/* ============================================================
   DU AN NHA TRANG — Hong An · New City
   Tông màu học từ salepro.com: navy #042045 · vàng đồng #e19c09
   © 2026 Nguyễn Hồng Ân — cấm sao chép. Canary: HANT-DA-0804-XK52
   ============================================================ */
:root {
  --navy: #042045;
  --navy-800: #0a3060;
  --navy-700: #12457f;
  --gold: #e19c09;
  --gold-soft: #f6c14b;
  --red: #e40b0b;
  --blue: #056ee9;
  --xam-100: #f9f9f9;
  --xam-200: #f1f1f4;
  --xam-300: #dbdfe9;
  --xam-600: #78829d;
  --chu: #22304a;
  --trang: #ffffff;
  /* 23/08/2026: bo góc 14 → 6px. Bo tròn lớn = app tiêu dùng; góc gần vuông = BĐS hạng sang.
     Một biến, đổi cả trang (thẻ, hộp form, khung sa bàn…). Nút vẫn 6px như cũ. */
  --bo-tron: 6px;
  --bong: 0 10px 30px rgba(4, 32, 69, .10);
  --bong-to: 0 18px 50px rgba(4, 32, 69, .18);
  /* nhịp chuyển động dùng chung — ease-out "đắt": nhanh lúc đầu, hãm êm lúc cuối */
  --nhip: cubic-bezier(.2, .8, .2, 1);
  --nhip-ra: cubic-bezier(.16, 1, .3, 1);
  --cao-dau: 94px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
  color: var(--chu);
  background: var(--trang);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.khung { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- chữ ---------- */
.chu-tay {
  display: inline-block; font-weight: 800; font-size: .78rem; line-height: 1.4;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
h1, h2, h3 { color: var(--navy); line-height: 1.25; }
/* Tiêu đề serif (bản AI Studio 20/08): CHỈ weight 700, line-height >=1.3, không tracking âm.
   Số đếm và <small> trong tiêu đề GIỮ SANS — serif làm số rung bề ngang. */
h1, .tieu-de-muc, .dai-cta h2 {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-weight: 700; line-height: 1.3; letter-spacing: 0;
}
.tieu-de-muc small { font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif; }
.tieu-de-muc { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: 6px 0 14px; }
/* gạch vàng 48x2 dưới tiêu đề mục (học mockup editorial) */
.tieu-de-muc::after { content: ""; display: block; width: 48px; height: 2px; background: var(--gold); margin-top: 14px; }
.giua .tieu-de-muc::after, .dai-cta .tieu-de-muc::after { margin-left: auto; margin-right: auto; }
.mo-ta-muc { color: var(--xam-600); max-width: 720px; margin: 0 auto 34px; }
.giua { text-align: center; }

/* ---------- nút (khách lớn tuổi: luôn có CHỮ, cao ≥48px) ---------- */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 26px; border-radius: 6px;
  font-size: 1.02rem; font-weight: 700; cursor: pointer; border: 0;
  transition: transform .18s ease, background .18s ease;
}
.nut:active { transform: scale(.97); }
/* vàng phẳng đặc, không gradient không glow (chip/nhãn vẫn pill — cặp chuẩn editorial) */
.nut-vang { background: var(--gold); color: var(--navy); position: relative; overflow: hidden; }
.nut-vang:hover { transform: translateY(-1px); }
/* vệt sáng quét qua nút vàng khi rê chuột — CHỈ máy có chuột và không giảm chuyển động;
   điện thoại không có hover nên không tốn gì */
/* 25/08/2026: bỏ điều kiện no-preference — vệt quét là hiệu ứng DO RÊ CHUỘT (khách tự
   khởi động, không phải trang tự nhúc nhích), máy anh Ân bật giảm chuyển động vẫn phải thấy */
@media (hover: hover) and (pointer: fine) {
  .nut-vang::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform: skewX(-18deg) translateX(-160%); pointer-events: none;
  }
  .nut-vang:hover::after { animation: anh-quet .75s ease; }
  @keyframes anh-quet { to { transform: skewX(-18deg) translateX(420%); } }
}
/* bỏ backdrop-filter: blur đè lên ảnh hero là 2 lượt lọc GPU mỗi khung cuộn trên Android tầm trung */
.nut-vien { background: rgba(4,32,69,.35); color: var(--trang); border: 2px solid rgba(255,255,255,.65); }
.nut-vien:hover { background: rgba(255,255,255,.18); }
.nut-navy { background: var(--navy); color: var(--trang); }
.nut-navy:hover { background: var(--navy-700); }
.nut-do { background: var(--red); color: var(--trang); }

/* ---------- màn chào (splash) ---------- */
#manChao {
  position: fixed; inset: 0; z-index: 9999; background: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  transition: opacity .5s ease, visibility .5s ease;
}
#manChao.an { opacity: 0; visibility: hidden; }
#manChao .logo-chao { font-size: 2rem; font-weight: 800; color: var(--trang); letter-spacing: .5px; }
#manChao .logo-chao b { color: var(--gold); }
/* man chao da go bo 19/08/2026 — no che trang cho toi khi anh tai xong */

/* ---------- header dính ---------- */
header.thanh-dau {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(4, 32, 69, .55); backdrop-filter: blur(10px);
  transition: background .3s ease, box-shadow .3s ease;
}
header.thanh-dau.cuon { background: rgba(4, 32, 69, .97); box-shadow: 0 4px 18px rgba(0,0,0,.25); }
/* điện thoại: nền đặc, không blur — blur đè ảnh hero là thêm lượt lọc GPU mỗi khung cuộn */
@media (max-width: 900px) { header.thanh-dau { background: rgba(4, 32, 69, .92); backdrop-filter: none; } }
/* thanh tiến độ đọc trang: vạch vàng 2px sát mép dưới header, dài ra theo cuộn.
   Chỉ transform (không đổi width) → không reflow, không repaint cả header. */
.tien-do-doc {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2;
  background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--tien-do, 0));
  pointer-events: none;
}
/* logo co nhẹ khi cuộn — chiều cao header GIỮ NGUYÊN 94px (đổi height là nhảy neo #lien-he) */
.logo .tron { transition: transform .28s var(--nhip); }
header.thanh-dau.cuon .logo .tron { transform: scale(.88); }
/* dải chứng chỉ mỏng TRÊN thanh menu (học Navigation.tsx bản AI Studio) — đầu trang nay cao 94px */
.dai-cc {
  height: 30px; display: flex; align-items: center;
  background: rgba(2, 16, 36, .92); border-bottom: 1px solid rgba(225, 156, 9, .25);
  font-size: .72rem; letter-spacing: .05em; color: #b9cbe4; white-space: nowrap;
}
.dai-cc .khung { width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.dai-cc b, .dai-cc a { color: var(--gold-soft); font-weight: 700; }
.dcc-gon { display: none; }
@media (max-width: 999px) { .dcc-du { display: none; } .dcc-gon { display: inline; } }
.thanh-dau-trong { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--trang); font-weight: 800; font-size: 1.15rem; }
.logo .tron { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 900; }
.logo b { color: var(--gold); }
nav.menu-chinh { display: flex; gap: 4px; align-items: center; }
nav.menu-chinh a {
  color: #e8eef7; font-weight: 600; font-size: .92rem; padding: 10px 13px; border-radius: 8px;
  transition: color .2s, background .2s;
}
nav.menu-chinh a:hover, nav.menu-chinh a.hien-tai { color: var(--gold-soft); background: rgba(255,255,255,.08); }
.nut-menu-mobile { display: none; background: none; border: 0; cursor: pointer; padding: 10px; min-height: 48px; }
.nut-menu-mobile span { display: block; width: 24px; height: 3px; background: var(--trang); margin: 5px 0; border-radius: 2px; }
@media (max-width: 900px) {
  nav.menu-chinh {
    position: fixed; top: 94px; right: 0; width: min(320px, 85vw); height: calc(100vh - 94px);
    background: var(--navy); flex-direction: column; align-items: stretch; padding: 18px;
    transform: translateX(100%); transition: transform .3s ease; gap: 6px;
  }
  nav.menu-chinh.mo { transform: translateX(0); }
  nav.menu-chinh a { font-size: 1.05rem; padding: 14px 16px; }
  .nut-menu-mobile { display: block; }
}

/* ---------- hero (học salepro: ảnh thật + phủ gradient xanh 135°) ---------- */
/* navy phẳng kiểu editorial (bản AI Studio 20/08): bỏ 2 quầng radial, ảnh chỉ còn là vân nền mờ */
.hero {
  position: relative; min-height: 82vh; display: flex; align-items: center;
  background: var(--navy);
  overflow: hidden; color: var(--trang); padding: 140px 0 70px;
}
.hero .anh-hero { position: absolute; inset: 0; }
.hero .anh-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(4,32,69,.93) 0%, rgba(7,44,94,.85) 50%, rgba(4,32,69,.93) 100%);
}
.hero-trong { position: relative; z-index: 2; max-width: 850px; }
.hero h1 { color: var(--trang); font-size: clamp(1.9rem, 4.6vw, 3.2rem); margin: 14px 0 18px; }
.hero h1 b { color: var(--gold-soft); }
.hero p.lot { font-size: clamp(1rem, 2vw, 1.2rem); color: #d7e2f2; max-width: 640px; margin-bottom: 30px; }
.hero .hang-nut { display: flex; gap: 14px; flex-wrap: wrap; }
/* .the-noi / @keyframes troi (hộp trôi lơ lửng) đã XOÁ 23/08/2026 — CSS chết, build.js không dùng */

/* ---------- số liệu đếm (bản hộp kính — còn dùng ở /gioi-thieu/) ---------- */
.day-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin-top: 46px; }
.o-so { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--bo-tron); padding: 16px 18px; }
.o-so .so { font-size: 1.9rem; font-weight: 900; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.o-so .ten { font-size: .88rem; color: #cfe0f5; }

/* ============================================================
   HERO TRANG CHỦ 2 TẦNG — 23/08/2026 (hội đồng 3 AI phản biện chốt)
   Tầng ảnh: ảnh biển THẬT Nha Trang (anh Ân quay ở Vĩnh Hoà 11/08) full-bleed,
   chữ nằm trên dải tối bên trái. Tầng nền: dải navy đặc chứa thẻ danh tính NẰM NGANG
   + 4 con số TRẦN (không hộp kính, kẻ vạch vàng mảnh). Hộp kính + cột phải = SaaS;
   ảnh lớn + số trần = BĐS hạng sang. Lộ theo LỚP một lần khi tải (data-lop), CSS
   thuần — không JS, không IntersectionObserver; máy giảm-chuyển-động chỉ mờ-tỏ.
   ============================================================ */
.hero-chu { min-height: 0; padding: 0; display: block; overflow: visible; }
.hero-chu::before { content: none; }
.hero-chu .tang-anh {
  position: relative; min-height: 60vh; display: flex; align-items: center;
  padding: 126px 0 48px; overflow: hidden; background: var(--navy);
}
.hero-chu .anh-hero img { opacity: .85; object-position: 62% 48%; }
/* phủ tối: đậm bên trái cho chữ, mở dần sang phải cho biển thở; thêm dải mờ đáy để nối vào tầng nền */
.hero-chu .tang-anh::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* 25/08: phủ MỘT PHÍA (T8) — đặc bên trái nơi có chữ, thả 35–40% khung bên phải cho
     thấy biển thật. Bản cũ phủ tối cả khung: ảnh thật nhất trang bị chính lớp chữ giết. */
  background:
    linear-gradient(180deg, rgba(4,32,69,.55) 0%, rgba(4,32,69,0) 22%, rgba(4,32,69,0) 70%, rgba(4,32,69,.96) 100%),
    linear-gradient(100deg, rgba(4,32,69,.97) 0%, rgba(4,32,69,.88) 32%, rgba(4,32,69,.38) 58%, rgba(4,32,69,0) 80%);
}
/* .khung có margin auto — thu max-width là CĂN GIỮA cả khối chữ. Giữ khung 1200 làm
   thước, chặn bề rộng ở TỪNG phần tử chữ để khối nằm sát mép trái (đã dính 24/08). */
.hero-chu .hero-trong { max-width: 1200px; }
.hero-chu h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); margin: 14px 0 18px; max-width: 900px; }
/* 25/08: "Nha Trang" thôi tô vàng (tic "tô vàng keyword" của mọi landing AI) —
   nghiêng serif trắng + gạch vàng mảnh dưới chân */
.hero-chu h1 b { color: #fff; font-style: italic; border-bottom: 3px solid var(--gold); padding-bottom: 2px; }
.hero-chu .lot { margin-bottom: 28px; }
.hero-chu .loi-rieng { margin-top: 16px; }
@media (max-width: 900px) {
  .hero-chu .tang-anh { min-height: 0; padding: 124px 0 44px; }
  /* điện thoại: phủ gần đặc — chữ to đọc được ngay, ảnh chỉ còn là chiều sâu sau lưng chữ */
  .hero-chu .tang-anh::before {
    background:
      linear-gradient(180deg, rgba(4,32,69,.78) 0%, rgba(4,32,69,.72) 60%, rgba(4,32,69,.98) 100%);
  }
  .hero-chu .anh-hero img { opacity: .6; object-position: 50% 40%; }
}

/* tầng nền */
.hero-chu .tang-nen {
  position: relative; z-index: 2; background: var(--navy); color: var(--trang);
  border-top: 1px solid rgba(246,193,75,.22); padding: 26px 0 36px;
}
/* thẻ danh tính NẰM NGANG: ảnh | tên + vai + 3 chứng cứ trên một hàng | kênh liên lạc (kẻ vạch dọc) */
.hero-chu .the-an {
  margin-top: 0; max-width: none; display: grid; grid-template-columns: auto 1fr auto;
  gap: 22px; align-items: center; padding: 18px 24px; border-radius: 6px;
  background: rgba(7,44,94,.55); border: 1px solid rgba(225,156,9,.38);
}
.hero-chu .the-an > img { width: 84px; height: 100px; }
.hero-chu .the-an .ta-cred { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 9px; }
.hero-chu .ta-lien-lac { border-top: 0; margin: 0; padding: 0 0 0 24px; border-left: 1px solid rgba(255,255,255,.16); }
.hero-chu .ta-lien-lac > span { margin-bottom: 8px; }
@media (max-width: 1100px) { .hero-chu .the-an .ta-cred { display: grid; gap: 6px; } }
@media (max-width: 900px) {
  .hero-chu .tang-nen { padding: 20px 0 28px; }
  .hero-chu .the-an { grid-template-columns: auto 1fr; gap: 16px; padding: 16px; }
  .hero-chu .the-an > img { width: 66px; height: 79px; }
  .hero-chu .ta-lien-lac { display: none; }   /* đã có thanh gọi dính đáy */
}
/* 4 số TRẦN: không hộp, không nền — chỉ vạch vàng mảnh bên trái, số to tabular-nums */
/* 25/08: số NUỐT nhãn (T9) — số to hơn, nhãn nhỏ in hoa, bỏ vạch chia cột: chỉ khoảng trắng */
.hero-chu .day-so { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 28px; margin-top: 26px; }
.hero-chu .o-so { background: none; border: 0; border-radius: 0; padding: 4px 0; }
.hero-chu .o-so .so { font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1.1; letter-spacing: -.01em; }
.hero-chu .o-so .ten { margin-top: 5px; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: #b9cbe4; }
@media (max-width: 700px) {
  .hero-chu .day-so { grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 20px; }
  .hero-chu .o-so .so { font-size: 1.8rem; }
  .hero-chu .o-so .ten { font-size: .72rem; }
}

/* ---- lộ theo lớp khi tải: data-lop = thứ tự 0..5, mỗi lớp 650ms, lệch 90ms ----
   'backwards' để giữ trạng thái đầu trong lúc chờ; KHÔNG dùng 'forwards' — hết hoạt hình
   phần tử về style thường, hover/transition gốc hoạt động lại. Lớp 0 (kicker + h1) không
   trễ để LCP không lùi. */
@media (prefers-reduced-motion: no-preference) {
  .hero-chu [data-lop] { animation: lop-len .65s var(--nhip-ra) backwards; animation-delay: calc(var(--lop, 0) * 90ms); }
  @keyframes lop-len { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  /* ảnh biển "thở" một lần: zoom 1.07 → 1 trong 2,4s rồi đứng yên (sang là tĩnh) */
  .hero-chu .anh-hero img { animation: anh-tho 2.4s var(--nhip-ra) both; transform-origin: 60% 50%; }
  @keyframes anh-tho { from { transform: scale(1.07); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  /* 25/08/2026 — anh Ân chốt: hiệu ứng anh ĐẶT LÀM thì không để cài đặt Windows xoá.
     Máy giảm chuyển động vẫn thấy chữ dâng lên (14px, một lần, không lặp); thứ bị bỏ
     là cú zoom "thở" của tấm ảnh biển to — đó mới là thứ gây khó chịu thật. */
  .hero-chu [data-lop] { animation: lop-len-diu .55s ease-out backwards; animation-delay: calc(var(--lop, 0) * 90ms); }
  @keyframes lop-len-diu { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
.hero-chu [data-lop="0"] { --lop: 0; } .hero-chu [data-lop="1"] { --lop: 1; } .hero-chu [data-lop="2"] { --lop: 2; }
.hero-chu [data-lop="3"] { --lop: 3; } .hero-chu [data-lop="4"] { --lop: 4; } .hero-chu [data-lop="5"] { --lop: 5; }

/* ---------- giới thiệu 2 cột kiểu salepro: ảnh trái + điểm phải ---------- */
.gioi-thieu-2cot { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .gioi-thieu-2cot { grid-template-columns: 1fr; } }
.gt-anh { position: relative; }
/* 25/08: bo góc về hệ 6px (góc gần vuông = hạng sang, luật 23/08), ảnh đứng 4:5 cao hơn */
.gt-anh .anh-lon { border-radius: var(--bo-tron); width: 100%; height: 480px; object-fit: cover; }
.gt-anh .anh-nho {
  position: absolute; right: -18px; bottom: -26px; width: 46%; height: 180px; object-fit: cover;
  border-radius: var(--bo-tron); border: 5px solid var(--trang); box-shadow: var(--bong-to);
}
.gt-anh .the-kinh-nghiem {
  position: absolute; left: -14px; top: -18px; background: var(--navy); color: var(--trang);
  border-radius: var(--bo-tron); padding: 12px 18px; box-shadow: var(--bong-to); font-size: .88rem;
}
.gt-anh .the-kinh-nghiem b { color: var(--gold-soft); font-size: 1.25rem; display: block; }
@media (max-width: 900px) { .gt-anh { margin-bottom: 30px; } .gt-anh .anh-nho { bottom: -14px; } }

/* ---------- mục 01-05 giới thiệu ---------- */
.muc { padding: 92px 0; }
@media (max-width: 700px) { .muc { padding: 60px 0; } }

/* ---------- đầu mục kiểu editorial (23/08/2026): căn TRÁI, gạch vàng trước kicker,
   số mục "01" serif mờ lớn phía sau — thay cho khối .giua căn giữa lặp 10 lần ---------- */
.dau-muc { position: relative; max-width: 780px; margin-bottom: 34px; }
.dau-muc::before {
  content: attr(data-so); position: absolute; left: -6px; top: -38px; z-index: 0;
  font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: 6rem; line-height: 1;
  color: rgba(4, 32, 69, .06); pointer-events: none; letter-spacing: -.02em;
}
.nen-navy .dau-muc::before { color: rgba(255, 255, 255, .07); }
.dau-muc > * { position: relative; z-index: 1; }
.dau-muc .chu-tay { display: inline-flex; align-items: center; gap: 10px; }
.dau-muc .chu-tay::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--gold); }
.dau-muc .tieu-de-muc { font-size: clamp(1.75rem, 3.4vw, 2.55rem); margin: 8px 0 12px; }
.dau-muc .mo-ta-muc { margin: 0; max-width: 640px; }
.dau-muc.sang .tieu-de-muc, .dau-muc.sang .mo-ta-muc { color: #fff; }
.dau-muc.sang .mo-ta-muc { color: #c6d5ea; }
/* 25/08/2026 — tách CHƯƠNG và MỤC PHỤ (đơn thuốc T1): chỉ 4 mục xương sống (dự án, kho hàng,
   giá tuần, nhà lẻ) giữ đầu mục lớn + số mờ; mục phụ hạ giọng — hết cảnh một khuôn nhân bản
   9 lần khiến mắt bắt được "nhịp máy" sau 3 mục. */
.dau-muc.nho { margin-bottom: 22px; }
.dau-muc.nho .tieu-de-muc { font-size: clamp(1.3rem, 2.3vw, 1.6rem); margin: 0 0 10px; }
.muc:has(> .khung > .dau-muc.nho) { padding: 56px 0; }
@media (max-width: 700px) {
  .dau-muc { margin-bottom: 26px; }
  .dau-muc::before { font-size: 3.8rem; top: -22px; left: -2px; }
}
.muc.nen-xam { background: var(--xam-100); }
.muc.nen-navy { background: var(--navy); color: var(--trang); }
.muc.nen-navy h2, .muc.nen-navy h3 { color: var(--trang); }
/* 25/08/2026 — bỏ hộp thẻ đổ bóng, chuyển sang danh sách hairline kiểu biên tập
   (đơn thuốc art director T3: mẫu chuẩn là dải nguyên tắc — không hộp, không bóng).
   Hộp trắng + bóng + bo góc lặp khắp trang chính là "mùi Elementor" bị chê AI hóa. */
.day-diem { display: flex; flex-direction: column; max-width: 860px; margin: 0 auto; }
.diem {
  display: flex; gap: 22px; align-items: flex-start; background: none;
  border: 0; border-top: 1px solid var(--xam-300); border-radius: 0; padding: 24px 4px;
}
.diem:first-child { border-top: 0; padding-top: 8px; }
.diem .stt {
  font-size: 2.6rem; font-weight: 900; color: transparent;
  -webkit-text-stroke: 2px var(--gold); min-width: 64px; line-height: 1;
  padding-top: 2px;
}
.diem h3 { font-size: 1.12rem; margin-bottom: 6px; }
.diem p { color: var(--xam-600); font-size: .96rem; }

/* ---------- lưới thẻ ---------- */
.luoi-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
/* 25/08/2026: bỏ bóng THƯỜNG TRỰC (đồ in thật hiếm khi có bóng — bóng trên mọi khối là mùi
   AI đậm nhất, lời art director). Bóng chỉ hiện khi rê chuột trên thẻ bấm được. */
.the {
  background: var(--trang); border-radius: var(--bo-tron); padding: 28px;
  border: 1px solid var(--xam-200);
  transition: transform .25s ease, box-shadow .25s ease;
}
.the:hover { transform: translateY(-6px); box-shadow: var(--bong-to); }
/* Ô icon: bỏ vuông vàng gradient 54px (component đặc trưng landing AI 2024–2025) —
   thay bằng khung viền mảnh, nét icon màu vàng: đứng được trên cả nền trắng lẫn navy */
.the .bieu-tuong { width: 44px; height: 44px; border-radius: 4px; background: none; border: 1px solid rgba(246,193,75,.55); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.bt { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bt-chan { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; opacity: .85; }
.the h3 { font-size: 1.15rem; margin-bottom: 8px; }
.the p { color: var(--xam-600); font-size: .95rem; }
.muc.nen-navy .the { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.muc.nen-navy .the p { color: #c6d5ea; }

/* ---------- nhà lẻ đang bán (video từ kênh, task 22h tự cập nhật) ---------- */
.luoi-nha-le { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.the-nha-le { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.the-nha-le.nha-le-an { display: none; }
.anh-nha-le { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.anh-nha-le img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.the-nha-le:hover .anh-nha-le img { transform: scale(1.05); }
.anh-nha-le .phat {
  position: absolute; inset: 0; margin: auto; width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 32, 69, .72); color: #fff; border-radius: 50%; font-size: 1.3rem; padding-left: 4px;
}
.nhan-nha-le { position: absolute; top: 12px; left: 12px; background: var(--navy); color: #fff; font-size: .74rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.nhan-nha-le.moi { background: var(--red); }
.than-nha-le { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.than-nha-le h3 { font-size: 1.05rem; }
.gia-nha-le { color: var(--gold); font-weight: 800; font-size: 1.35rem; margin: 6px 0 10px; }
.gia-nha-le small { color: var(--xam-600); font-weight: 600; font-size: .8rem; }
.chip-nha-le { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-nha-le span { background: var(--xam-100, #f1f4f8); border: 1px solid var(--xam-200); border-radius: 999px; padding: 4px 10px; font-size: .78rem; color: var(--xam-600); }
.than-nha-le .hang-nut { margin-top: auto; }

/* ---------- thẻ kho hàng (giỏ hàng trực tiếp) ---------- */
a.the-kho { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: inherit; border: 2px solid var(--gold-soft); }
a.the-kho .nut { margin-top: 18px; min-height: 44px; }
a.the-kho p b { color: var(--gold); font-size: 1.25rem; }
/* bento 23/08/2026: giỏ #1 (nhà phố bản đồ — sản phẩm không sàn nào ở Nha Trang có) chiếm 2 cột,
   4 giỏ còn lại thẻ thường. Lưới đều 5 thẻ = không gì quan trọng; lưới có thứ bậc = có điểm nhấn. */
.luoi-kho { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* 26/08/2026 — thẻ nhà phố thành 2 BUỒNG (chữ trái · ảnh bản đồ thật phải, full-bleed 3 mép).
   Hiệu ứng ở đây toàn loại chạy MỘT LẦN (reveal, đếm số, hover) — cố ý không có vòng lặp
   vô hạn: máy bật giảm-chuyển-động (máy anh Ân) vẫn thấy đủ mọi thứ. */
.luoi-kho > .the-kho.lon {
  grid-column: span 2; padding: 0; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch;
}
.the-kho.lon .buong-chu { padding: 26px 28px; display: flex; flex-direction: column; align-items: flex-start; }
.the-kho.lon .buong-chu h3 { font-size: 1.45rem; }
.the-kho.lon .buong-chu p { font-size: 1.02rem; margin-bottom: 18px; }
.so-kho-to { margin-bottom: 12px; }
.so-kho-to b { display: block; font-size: clamp(2.8rem, 4.2vw, 3.6rem); line-height: 1.02; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.so-kho-to span { font-size: .85rem; color: #c6d5ea; }
/* hàng "người trực kho": avatar 44px + chấm xanh đang trực (tĩnh, không pulse) + nút */
.hang-truc-kho { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(246, 193, 75, .35); width: 100%; }
.htk-anh { position: relative; flex: none; }
.htk-anh img { display: block; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; }
.htk-anh::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid var(--navy); }
.htk-chu { display: flex; flex-direction: column; line-height: 1.35; }
.htk-chu b { color: #fff; font-size: .95rem; white-space: nowrap; }
.htk-chu small { color: #c6d5ea; font-size: .8rem; }
a.the-kho .hang-truc-kho .nut { margin-top: 0; margin-left: auto; white-space: nowrap; }
.the-kho.lon .buong-ban-do { position: relative; min-height: 260px; border-left: 1px solid rgba(246, 193, 75, .35); }
.the-kho.lon .buong-ban-do img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--nhip); }
.the-kho.lon:hover .buong-ban-do img { transform: scale(1.04); }
/* scrim mép trái để buồng chữ không bao giờ chạm thẳng nền sáng của bản đồ */
.the-kho.lon .buong-ban-do::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 32, 69, .5), rgba(4, 32, 69, 0) 45%); pointer-events: none; }
/* nhãn trung thực — đặt TRÁI để không che dòng ghi công OSM/CARTO nằm góc phải ảnh */
.nhan-song { position: absolute; left: 12px; bottom: 10px; z-index: 1; background: rgba(4, 32, 69, .88); color: #cfe0f5; font-size: .72rem; padding: 4px 9px; border-radius: 4px; }
/* buồng bản đồ lộ SAU buồng chữ một nhịp — cùng họ reveal (một lần), chạy cả trong reduce */
html.js .the-kho.lon.hien-dan.da-hien .buong-ban-do { animation: lo-dan .48s var(--nhip) backwards; animation-delay: .18s; }
html.js .the-kho.lon.hien-dan.da-hien .nhan-song { animation: lo-dan .4s var(--nhip) backwards; animation-delay: .55s; }
@media (max-width: 900px) { .luoi-kho { grid-template-columns: 1fr 1fr; } .luoi-kho > .the-kho.lon { grid-column: span 2; } }
@media (max-width: 640px) {
  .luoi-kho { grid-template-columns: 1fr; }
  .luoi-kho > .the-kho.lon { grid-column: auto; grid-template-columns: 1fr; }
  /* điện thoại: dải bản đồ 170px nằm TRÊN, chữ dưới */
  .the-kho.lon .buong-ban-do { order: -1; min-height: 170px; border-left: 0; border-bottom: 1px solid rgba(246, 193, 75, .35); }
  .the-kho.lon .buong-ban-do::after { background: linear-gradient(180deg, rgba(4, 32, 69, 0) 55%, rgba(4, 32, 69, .45)); }
  .hang-truc-kho { flex-wrap: wrap; }
  a.the-kho .hang-truc-kho .nut { margin-left: 0; width: 100%; text-align: center; }
}

/* 26/08/2026 — dải "Nhận căn mới qua Zalo" ngay dưới lưới 5 giỏ (anh chốt phương án 1).
   Mỏng một hàng: chữ trái · nút vàng phải; cùng họ nền kính mờ với .o-so, viền vàng nhạt
   cùng tông vạch ngăn của thẻ kho. Điện thoại xếp dọc, nút ăn hết chiều ngang (≥48px sẵn ở .nut). */
.dai-zalo-kho {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 24px; padding: 18px 24px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(246, 193, 75, .35);
  border-radius: var(--bo-tron);
}
.dai-zalo-kho .dz-chu b { display: block; color: #fff; font-size: 1.08rem; }
.dai-zalo-kho .dz-chu small { color: #c6d5ea; font-size: .88rem; }
.dai-zalo-kho .nut { flex: none; white-space: nowrap; }
@media (max-width: 700px) {
  .dai-zalo-kho { flex-direction: column; align-items: stretch; text-align: center; }
  .dai-zalo-kho .nut { width: 100%; }
}

/* ---------- xu thế 2026: 3 cột chữ trần kẻ vạch dọc kiểu báo (thay 3 thẻ) ---------- */
.cot-bao { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.cot-bao > div { padding: 6px 30px 6px 24px; border-left: 1px solid rgba(246,193,75,.38); }
.cot-bao > div p { color: #c6d5ea; font-size: .98rem; }
.cot-bao .nhan-to {
  font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  color: var(--gold-soft); line-height: 1.15; margin-bottom: 10px;
}
@media (max-width: 800px) { .cot-bao { grid-template-columns: 1fr; gap: 22px; } .cot-bao > div { padding: 2px 0 2px 18px; } }

/* ---------- nguyên tắc làm nghề: một dải ngang 3 cột, kẻ trên dưới, không thẻ ---------- */
.dai-nguyen-tac {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px;
  border-top: 1px solid var(--xam-300); border-bottom: 1px solid var(--xam-300); padding: 34px 0;
}
.dai-nguyen-tac > div { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; }
.dai-nguyen-tac .bieu-tuong { width: 46px; height: 46px; border-radius: 8px; margin: 0; }
.dai-nguyen-tac .bieu-tuong .bt { width: 22px; height: 22px; }
.dai-nguyen-tac h3 { font-size: 1.12rem; margin-bottom: 6px; }
.dai-nguyen-tac p { color: var(--xam-600); font-size: .95rem; }
@media (max-width: 800px) { .dai-nguyen-tac { grid-template-columns: 1fr; gap: 22px; padding: 24px 0; } }

/* ---------- đối tác: hàng tên TĨNH (marquee chạy vô tận đã bỏ 23/08 — "sạp bảo hiểm", không dừng được trên cảm ứng) ---------- */
.hang-doi-tac { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; }
.hang-doi-tac span {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px;
  border: 1px solid var(--xam-300); border-radius: 4px; background: var(--trang);
  font-weight: 800; color: var(--navy); font-size: .92rem; letter-spacing: .04em; text-transform: uppercase;
}
.hang-doi-tac span::before { content: "◆"; color: var(--gold); font-size: .7em; }

/* ---------- thẻ dự án ---------- */
.luoi-du-an { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
/* 25/08 (T5): thẻ đầu — Pearl Bay, có ảnh thật — trải 2 cột với ảnh cao hơn.
   MỘT hàng lệch duy nhất phá cảm giác máy chia đều; chỉ bật khi lưới đủ rộng ≥2 cột. */
@media (min-width: 901px) {
  .luoi-du-an > .the-du-an:first-child { grid-column: span 2; }
  .luoi-du-an > .the-du-an:first-child .anh, .luoi-du-an > .the-du-an:first-child .anh-chu { height: 310px; }
}
/* 25/08 (T4): bảng giá tuần — hàng chỉ số kiểu trang tài chính, ngăn bằng hairline dọc,
   số to navy trần trụi trên nền phẳng. Thay cho 4 thẻ trắng đổ bóng kiểu SaaS. */
.day-gia { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; }
.o-gia { padding: 6px 26px; border-left: 1px solid var(--xam-300); }
.o-gia:first-child { border-left: 0; padding-left: 4px; }
.og-khu { font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--xam-600); }
.og-so { font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 6px; }
.og-so small { font-size: .85rem; font-weight: 600; color: var(--xam-600); letter-spacing: 0; }
.og-bd { margin-top: 4px; font-weight: 700; font-size: .9rem; }
@media (max-width: 700px) {
  .day-gia { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .o-gia { padding: 2px 16px; }
  .o-gia:nth-child(odd) { border-left: 0; padding-left: 4px; }
}
.the-du-an {
  background: var(--trang); border-radius: var(--bo-tron); overflow: hidden;
  border: 1px solid var(--xam-200); box-shadow: var(--bong);
  transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column;
}
.the-du-an:hover { transform: translateY(-6px); box-shadow: var(--bong-to); }
/* nền navy giữ chỗ: ảnh lazy chưa nạp thì là ô màu trầm, không bao giờ ô TRẮNG TRƠN
   (cả 3 vai phản biện đều bắt lỗi này trên ảnh chụp trang) */
.the-du-an .anh { position: relative; height: 200px; overflow: hidden; background: var(--navy); }
.the-du-an .anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--nhip); }
.the-du-an:hover .anh img { transform: scale(1.035); }   /* 1.07/500ms → 1.035/700ms: chậm và nhỏ = đắt hơn */
/* 25/08 — bìa 4 dự án chưa có ảnh thật: từ "poster gradient chữ vàng" (rất AI) sang
   "bìa hồ sơ in": navy phẳng, khung hairline vàng lùi 10px, tên serif căn TRÁI ở đáy,
   dòng chú thích in hoa nhỏ. Không bịa ảnh — chỉ đổi cách trình bày (đơn thuốc T6). */
.the-du-an .anh-chu {
  position: relative; height: 200px; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; gap: 4px;
  background: var(--navy); color: var(--trang); text-align: left; padding: 18px 22px;
}
.the-du-an .anh-chu::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(246,193,75,.5); pointer-events: none; }
.the-du-an .anh-chu .ten-to { font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: 1.4rem; letter-spacing: 0; line-height: 1.25; color: #fff; }
.the-du-an .anh-chu small { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); }
/* nhãn: từ pill 999px nền đặc → nhãn vuông viền mảnh (T10); riêng nhãn trạng thái đỏ
   "Đang mở bán" giữ nền đặc — điểm son duy nhất có chủ đích */
.nhan-loai {
  position: absolute; top: 12px; left: 12px; background: rgba(4,32,69,.55); color: var(--trang);
  border: 1px solid rgba(255,255,255,.45); font-size: .7rem; font-weight: 700;
  padding: 4px 10px; border-radius: 3px; letter-spacing: .08em;
}
.nhan-loai.thap { color: var(--gold-soft); border-color: rgba(246,193,75,.6); }
.nhan-trangthai { position: absolute; top: 12px; right: 12px; background: rgba(228,11,11,.92); color: #fff; font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 3px; letter-spacing: .04em; }
.the-du-an .than { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.the-du-an h3 { font-size: 1.12rem; }
.the-du-an .slogan { color: var(--xam-600); font-size: .92rem; flex: 1; }
.the-du-an .vi-tri { font-size: .88rem; color: var(--navy-700); font-weight: 600; }
.the-du-an .chan-the { display: flex; gap: 10px; margin-top: 10px; }
.the-du-an .chan-the .nut { flex: 1; min-height: 46px; padding: 10px 12px; font-size: .95rem; }
/* Nấc thứ ba: nhắn Zalo — nhẹ hơn hai nút trên để không cướp mắt, nhưng vẫn
   đủ 46px và có CHỮ (luật nút cho khách 40-65 tuổi). */
.the-du-an .nut-zalo-the {
  display: flex; align-items: center; justify-content: center;
  width: 100%; margin-top: 8px; min-height: 46px; padding: 10px 12px;
  font-size: .92rem; font-weight: 600;
  color: var(--navy); background: #f4f7fb; border: 1px solid #dce4ee;
}
.the-du-an .nut-zalo-the:hover { background: #eaf1fa; border-color: var(--gold); }

/* ---------- bộ lọc ---------- */
.hang-loc { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.hang-loc select {
  min-height: 48px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--xam-300);
  font-size: .98rem; color: var(--chu); background: var(--trang); font-family: inherit; cursor: pointer;
}
.hang-loc select:focus { outline: 2px solid var(--gold); border-color: var(--gold); }

/* ---------- trang chi tiết ---------- */
.hero-duan { position: relative; min-height: 58vh; display: flex; align-items: flex-end; color: var(--trang); background: linear-gradient(135deg, var(--navy), var(--navy-700)); padding-top: 94px; }
.hero-duan .anh-nen { position: absolute; inset: 0; }
.hero-duan .anh-nen img { width: 100%; height: 100%; object-fit: cover; }
.hero-duan .phu { position: absolute; inset: 0; background: linear-gradient(to top, rgba(4,32,69,.94) 8%, rgba(4,32,69,.35) 55%, rgba(4,32,69,.25)); }
.hero-duan .trong { position: relative; z-index: 2; padding: 46px 0 34px; width: 100%; }
.hero-duan h1 { color: var(--trang); font-size: clamp(1.7rem, 4vw, 2.7rem); }
.hero-duan .lot { color: #d7e2f2; max-width: 640px; margin-top: 8px; }
.thanh-tab {
  position: sticky; top: 94px; z-index: 700; background: var(--trang);
  border-bottom: 1px solid var(--xam-200); box-shadow: 0 4px 14px rgba(4,32,69,.06);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.thanh-tab .trong { display: flex; gap: 2px; min-width: max-content; }
.thanh-tab a {
  padding: 14px 16px; font-weight: 700; font-size: .92rem; color: var(--xam-600);
  border-bottom: 3px solid transparent; white-space: nowrap; min-height: 48px; display: flex; align-items: center;
}
.thanh-tab a:hover, .thanh-tab a.hien-tai { color: var(--navy); border-bottom-color: var(--gold); }
.o-thong-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: -34px auto 0; position: relative; z-index: 5; }
.o-thong-so .o { background: var(--trang); border-radius: var(--bo-tron); box-shadow: var(--bong-to); padding: 18px 20px; text-align: center; }
.o-thong-so .o .gia-tri { font-weight: 900; color: var(--navy); font-size: 1.15rem; }
.o-thong-so .o .nhan { font-size: .82rem; color: var(--xam-600); }
.bang-tong-quan { width: 100%; border-collapse: collapse; background: var(--trang); border-radius: var(--bo-tron); overflow: hidden; box-shadow: var(--bong); }
.bang-tong-quan td { padding: 13px 18px; border-bottom: 1px solid var(--xam-200); font-size: .96rem; }
.bang-tong-quan td:first-child { font-weight: 700; color: var(--navy); width: 220px; background: var(--xam-100); }
.danh-sach-diem li { margin: 0 0 10px 22px; }
.danh-sach-diem li::marker { color: var(--gold); }

/* ---------- thư viện ảnh ---------- */
.luoi-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.luoi-anh .o-anh { position: relative; border-radius: 12px; overflow: hidden; box-shadow: var(--bong); cursor: zoom-in; }
.luoi-anh img { width: 100%; height: 230px; object-fit: cover; transition: transform .4s ease; }
.luoi-anh .o-anh:hover img { transform: scale(1.06); }
.luoi-anh .o-anh span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 10px 8px; font-size: .8rem; color: #fff;
  background: linear-gradient(transparent, rgba(4,32,69,.85));
}

/* ---------- phân khu ---------- */
.the-phan-khu { border-top: 4px solid var(--gold); }
.the-phan-khu .nhan-pk { display: inline-block; background: var(--xam-200); color: var(--navy); font-size: .78rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }

/* ---------- SA BÀN TƯƠNG TÁC ---------- */
.khung-saban {
  position: relative; border-radius: var(--bo-tron); overflow: hidden;
  box-shadow: var(--bong-to); background: #eef3f7; touch-action: none;
  height: min(72vh, 640px); cursor: grab;
}
.khung-saban.keo { cursor: grabbing; }
.canh-saban { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.canh-saban img { display: block; width: 2200px; max-width: none; }
.canh-saban svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* viewBox là 0-100 nên stroke-width tính theo % bề rộng ảnh — 1 đơn vị = 22px.
   Ô căn chỉ rộng ~10px, nên PHẢI dùng non-scaling-stroke để nét tính bằng pixel
   màn hình, không thì 735 viền chồng nhau thành mảng đen kịt (lỗi 06/08/2026). */
.canh-saban polygon {
  fill: rgba(120, 130, 157, .10); stroke: rgba(4, 32, 69, .28); stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
  cursor: pointer; transition: fill .15s ease;
}
.canh-saban polygon:hover { fill: rgba(225, 156, 9, .55); stroke: var(--gold); stroke-width: 2; }
.canh-saban polygon.co-gia { fill: rgba(4, 180, 64, .55); stroke: #04b440; stroke-width: 1; }
.canh-saban polygon.co-gia:hover { fill: rgba(225, 156, 9, .7); }
/* tím = giá tham khảo, chưa có phiếu tính giá của CĐT */
.canh-saban polygon.gia-tk { fill: rgba(107, 78, 174, .5); stroke: #6B4EAE; stroke-width: 1; }
.canh-saban polygon.gia-tk:hover { fill: rgba(225, 156, 9, .7); }
.canh-saban polygon.dang-chon { fill: rgba(228, 11, 11, .6); stroke: var(--red); stroke-width: 2.5; }
/* --ng = 1/tỉ-lệ-zoom: nhãn giữ nguyên cỡ chữ trên màn hình dù bản đồ thu nhỏ,
   không thì ở mức vừa khung chữ chỉ còn 4-5px, đọc không ra */
.nhan-gia {
  position: absolute; transform: translate(-50%, -50%) scale(var(--ng, 1)); background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 5px; pointer-events: none;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.nhan-gia.tk { background: #6B4EAE; }
/* nhãn nào chen lên nhãn khác thì tự ẩn; phóng to là nó hiện lại dần */
.nhan-gia.chen { display: none; }
.dieu-khien-saban { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.dieu-khien-saban button {
  width: 44px; height: 44px; border-radius: 10px; border: 0; background: rgba(255,255,255,.95);
  color: var(--navy); font-size: 1.25rem; font-weight: 800; cursor: pointer; box-shadow: var(--bong);
}
.chu-dan-saban {
  position: absolute; left: 12px; top: 12px; z-index: 5; background: rgba(255,255,255,.95);
  border-radius: 10px; padding: 9px 12px; font-size: .8rem; box-shadow: var(--bong); line-height: 1.9;
}
/* điện thoại: chú dẫn nằm đè lên bản đồ thì che mất gần nửa khu hàng — cho nằm ngang một dòng ở đáy */
@media (max-width: 700px) {
  .chu-dan-saban {
    left: 8px; right: 8px; top: auto; bottom: 8px; display: flex; flex-wrap: wrap;
    gap: 4px 14px; justify-content: center; line-height: 1.4; padding: 7px 10px; font-size: .74rem;
  }
  .mach-saban { display: none; }
}
.chu-dan-saban i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.mach-saban {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5;
  background: rgba(4,32,69,.9); color: #fff; padding: 8px 16px; border-radius: 999px;
  font-size: .85rem; pointer-events: none;
}

/* ---------- thẻ thông tin căn (popup) ---------- */
#theCan {
  position: fixed; inset: 0; z-index: 9400; background: rgba(4, 20, 40, .78);
  display: none; align-items: center; justify-content: center; padding: 14px; backdrop-filter: blur(3px);
}
#theCan.mo { display: flex; }
#theCan .hop {
  background: var(--navy); color: #fff; border-radius: 18px; width: 100%; max-width: 940px;
  max-height: 92vh; overflow: auto; box-shadow: 0 24px 70px rgba(0,0,0,.5); animation: hienLen .3s ease;
}
#theCan .dinh { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; }
#theCan .dinh h3 { color: var(--gold-soft); font-size: 1.5rem; letter-spacing: .5px; margin: 0; }
#theCan .dong-the { background: rgba(255,255,255,.12); color: #fff; border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; }
#theCan .thanTrong { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 0 24px 24px; }
@media (max-width: 780px) { #theCan .thanTrong { grid-template-columns: 1fr; } }
#theCan .nhan-muc { color: var(--gold); font-size: .78rem; font-weight: 800; letter-spacing: 1px; margin-bottom: 8px; }
#theCan table { width: 100%; border-collapse: collapse; }
#theCan td { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .93rem; }
#theCan td:first-child { color: #a9bcd6; }
#theCan td:last-child { text-align: right; font-weight: 700; }
#theCan .o-gia { background: rgba(255,255,255,.07); border-radius: 12px; padding: 14px 18px; margin: 14px 0; display: flex; align-items: center; justify-content: space-between; }
#theCan .o-gia b { color: var(--gold-soft); font-size: 1.55rem; }
#theCan .mini { width: 100%; border-radius: 12px; margin-bottom: 12px; }
#theCan form { background: rgba(255,255,255,.07); border-radius: 12px; padding: 16px; }
#theCan form input { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 9px; border: 0; font-size: 1rem; font-family: inherit; margin-bottom: 9px; }
#theCan form .nut { width: 100%; }
#theCan .loi { color: #ff9b9b; font-weight: 600; display: none; margin-bottom: 8px; font-size: .9rem; }

/* ---------- ảnh 360 ---------- */
.khung-360 { position: relative; border-radius: var(--bo-tron); overflow: hidden; box-shadow: var(--bong-to); background: var(--navy); }
.khung-360 iframe { width: 100%; height: min(70vh, 560px); border: 0; display: block; }

/* ---------- quỹ căn ---------- */
.bang-quy-can { width: 100%; border-collapse: collapse; background: var(--trang); font-size: .9rem; }
.bang-quy-can th { background: var(--navy); color: var(--trang); padding: 10px 12px; text-align: left; white-space: nowrap; position: sticky; top: 0; }
.bang-quy-can td { padding: 9px 12px; border-bottom: 1px solid var(--xam-200); }
.bang-quy-can tr:hover td { background: #fffbef; }
.hop-quy-can { max-height: 480px; overflow: auto; border-radius: 12px; box-shadow: var(--bong); border: 1px solid var(--xam-200); }

/* ---------- video: bấm mới tải YouTube, không làm chậm trang ---------- */
.luoi-video { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.o-video { position: relative; border-radius: var(--bo-tron); overflow: hidden; box-shadow: var(--bong); cursor: pointer; background: #000; }
.o-video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .92; transition: transform .4s ease; }
.o-video:hover img { transform: scale(1.05); }
.o-video .nut-play {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(228, 11, 11, .92); color: #fff; font-size: 1.5rem; padding-left: 5px;
  box-shadow: 0 8px 26px rgba(0,0,0,.4); transition: transform .2s ease;
}
.o-video:hover .nut-play { transform: translate(-50%, -50%) scale(1.12); }
.o-video p {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); color: #fff; font-size: .92rem; font-weight: 600;
}
.o-video iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

/* ---------- khoá nội dung (cổng thu khách) ---------- */
.khoa {
  position: relative; border: 2px dashed var(--gold); border-radius: var(--bo-tron);
  padding: 34px 24px; text-align: center; background: linear-gradient(180deg, #fffdf5, #fff8e6);
}
.khoa .o-khoa-bieu-tuong { font-size: 2rem; }
.khoa h3 { margin: 8px 0 6px; }
.khoa p { color: var(--xam-600); max-width: 460px; margin: 0 auto 16px; }
.khoa form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; margin: 0 auto; }
.khoa input {
  min-height: 50px; padding: 12px 16px; border-radius: 10px; border: 1.5px solid var(--xam-300);
  font-size: 1.05rem; font-family: inherit;
}
.khoa input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.khoa .loi { color: var(--red); font-weight: 600; display: none; }
.noi-dung-khoa { display: none; }
.noi-dung-khoa.mo { display: block; }

/* ---------- form tư vấn ---------- */
.hop-form { background: var(--trang); border-radius: var(--bo-tron); box-shadow: var(--bong-to); padding: 30px; max-width: 520px; margin: 0 auto; }
.hop-form label { font-weight: 700; font-size: .92rem; color: var(--navy); display: block; margin: 12px 0 5px; }
.hop-form input, .hop-form select, .hop-form textarea {
  width: 100%; min-height: 50px; padding: 12px 15px; border-radius: 10px;
  border: 1.5px solid var(--xam-300); font-size: 1.03rem; font-family: inherit;
}
.hop-form textarea { min-height: 84px; resize: vertical; }
.hop-form input:focus, .hop-form select:focus, .hop-form textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.hop-form .nut { width: 100%; margin-top: 18px; }
.bao-ok { display: none; text-align: center; padding: 26px 10px; }
.bao-ok .to { font-size: 2.6rem; }
.bao-ok h3 { margin: 8px 0; }

/* ---------- màn hình chờ gọi tư vấn (học Vinhomes Market OA) ---------- */
#manCho {
  position: fixed; inset: 0; z-index: 9500; background: rgba(4, 20, 40, .75);
  display: none; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(4px);
}
#manCho.mo { display: flex; }
#manCho .the-cho {
  background: var(--trang); border-radius: 20px; max-width: 420px; width: 100%;
  max-height: 92vh; overflow: auto; box-shadow: 0 24px 70px rgba(0,0,0,.4);
  animation: hienLen .35s ease;
}
@keyframes hienLen { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
#manCho .dinh-cho {
  background: linear-gradient(135deg, var(--navy), var(--navy-700));
  color: var(--trang); padding: 26px 24px 22px; text-align: center; border-radius: 20px 20px 0 0;
}
#manCho .vong-song {
  width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%;
  background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; position: relative;
}
#manCho .vong-song::before, #manCho .vong-song::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(246,193,75,.75); animation: toaSong 2s ease-out infinite;
}
#manCho .vong-song::after { animation-delay: 1s; }
@keyframes toaSong { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
#manCho .dinh-cho h3 { color: var(--trang); font-size: 1.22rem; margin-bottom: 6px; }
#manCho .dinh-cho p { color: #cfe0f5; font-size: .95rem; }
#manCho .than-cho { padding: 22px 24px 26px; }
#manCho .o-ma {
  background: var(--xam-100); border: 1px dashed var(--xam-300); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 16px; font-size: .9rem; color: var(--xam-600);
}
#manCho .o-ma b { color: var(--navy); font-size: 1.05rem; letter-spacing: .5px; }
#manCho .cvien { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
#manCho .cvien .tron-ten {
  width: 54px; height: 54px; border-radius: 50%; flex: 0 0 54px;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: var(--navy); font-weight: 900; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
}
#manCho .cvien b { color: var(--navy); display: block; font-size: 1.05rem; }
#manCho .cvien small { color: var(--xam-600); }
#manCho .buoc { list-style: none; margin: 0 0 18px; }
#manCho .buoc li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: .94rem; }
#manCho .buoc .dau { color: #04b440; font-weight: 900; }
#manCho .buoc .dang { color: var(--gold); font-weight: 900; animation: nhapNhay 1.2s ease-in-out infinite; }
@keyframes nhapNhay { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
#manCho .hang-nut-cho { display: flex; flex-direction: column; gap: 10px; }
#manCho .hang-nut-cho .nut { width: 100%; }
#manCho .dong-cho {
  background: none; border: 0; color: var(--xam-600); cursor: pointer;
  width: 100%; padding: 12px; font-size: .92rem; font-family: inherit; min-height: 44px;
}

/* ---------- đối tác: marquee .bang-doi-tac/.doan-doi-tac/@keyframes chay-ngang ĐÃ XOÁ 23/08/2026
   (thay bằng .hang-doi-tac tĩnh ở trên) ---------- */

/* ---------- so sánh ---------- */
.bang-so-sanh { width: 100%; border-collapse: collapse; background: var(--trang); box-shadow: var(--bong); border-radius: var(--bo-tron); overflow: hidden; }
.bang-so-sanh th, .bang-so-sanh td { padding: 13px 15px; border: 1px solid var(--xam-200); font-size: .93rem; vertical-align: top; }
.bang-so-sanh th { background: var(--navy); color: var(--trang); text-align: left; }
.bang-so-sanh td:first-child { font-weight: 700; color: var(--navy); background: var(--xam-100); min-width: 130px; }
.cuon-ngang { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- footer ---------- */
footer { background: var(--navy); color: #c6d5ea; padding: 56px 0 90px; }
footer h4 { color: var(--trang); font-size: 1rem; margin-bottom: 14px; letter-spacing: .5px; }
.luoi-footer { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; }
@media (max-width: 760px) { .luoi-footer { grid-template-columns: 1fr; } }
footer a:hover { color: var(--gold-soft); }
footer ul { list-style: none; } footer li { margin-bottom: 9px; }
.dong-ban-quyen { border-top: 1px solid rgba(255,255,255,.14); margin-top: 36px; padding-top: 18px; font-size: .85rem; color: #8fa5c4; }

/* ---------- thanh gọi dính đáy (mobile) ---------- */
.thanh-goi {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  display: flex; box-shadow: 0 -4px 18px rgba(0,0,0,.18);
}
.thanh-goi a {
  flex: 1; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; font-size: 1.05rem; color: var(--trang);
}
.thanh-goi .goi { background: var(--red); }
.thanh-goi .zalo { background: #0068ff; }
@media (min-width: 901px) { .thanh-goi { display: none; } footer { padding-bottom: 56px; } }

/* ---------- nút lên đầu ---------- */
#nutLenDau {
  position: fixed; right: 16px; bottom: 74px; z-index: 850; width: 52px; height: 52px;
  border-radius: 50%; background: var(--navy); color: var(--trang); border: 0; cursor: pointer;
  font-size: 1.3rem; box-shadow: var(--bong-to); opacity: 0; visibility: hidden; transition: opacity .3s;
}
#nutLenDau.hien { opacity: 1; visibility: visible; }
@media (min-width: 901px) { #nutLenDau { bottom: 24px; } }

/* ---------- hiện dần khi cuộn — BẢN 23/08/2026 (chỉ ẩn khi có JS — html.js do app.js gắn;
   máy nào JS hỏng thì mọi thứ vẫn hiện đủ, không bao giờ trắng trang)
   Vì sao đổi từ transition sang animation:
   - Bản cũ `.da-hien{transform:none}` đè lên `.the:hover{translateY(-6px)}` ⇒ hover nhấc thẻ
     CHẾT trên cả trang (lỗi sống từ 04/08); transition .7s cũng đè .25s của thẻ.
   - animation 'backwards' (KHÔNG forwards): chạy xong là trả phần tử về style thường,
     hover/transition gốc của thẻ hoạt động lại, không cần JS dọn lớp.
   - 28px/700ms ease = chữ ký AOS/Elementor; 12px/480ms ease-out nhanh-hãm-êm là nhịp "đắt".
   - Lệch nhịp theo --i (app.js gán theo thứ tự anh em trong cùng cha, tối đa 3 bậc × 70ms). */
html.js .hien-dan:not(.da-hien) { opacity: 0; }
html.js .hien-dan.da-hien { animation: lo-dan .48s var(--nhip) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes lo-dan { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* lớp cũ tre-* (còn trong trang dự án) → quy về --i */
.hien-dan.tre-1 { --i: 1; } .hien-dan.tre-2 { --i: 2; } .hien-dan.tre-3 { --i: 3; }
/* gạch vàng dưới tiêu đề mục TỰ VẼ RA (scaleX — composited, không repaint) sau khi khối hiện */
html.js .hien-dan.da-hien .tieu-de-muc::after {
  transform-origin: 0 50%;
  animation: ve-gach .5s var(--nhip) backwards; animation-delay: calc(var(--i, 0) * 70ms + .22s);
}
html.js .hien-dan.da-hien.giua .tieu-de-muc::after, html.js .hien-dan.da-hien .giua .tieu-de-muc::after,
html.js .dai-cta.hien-dan.da-hien .tieu-de-muc::after { transform-origin: 50% 50%; }
@keyframes ve-gach { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- RÈM LỘ TIÊU ĐỀ (lụm 25/08/2026 từ ledangminhnhat.com, sửa lại cho hợp) ----------
   Chữ tiêu đề mục lộ dần từ dưới lên như kéo rèm, thay vì cả khối cùng mờ-tỏ. Đây là
   thứ DUY NHẤT về hình ảnh đáng lấy từ trang kia — nó tạo một khoảnh khắc để mắt bám vào
   mỗi khi qua một mục, mà không thêm một dòng JS nào.
   ⚠ Mấu chốt là INSET ÂM ba cạnh: `inset(-.3em -.6em 100% -.6em)`. Cắt đúng khung chữ là
   cụt dấu tiếng Việt (Ữ, Ọ, Ầ) và đuôi g/y — lỗi mà một khung clip 0 sẽ gây ra và chỉ lộ
   ra khi đọc kỹ. Bên kia cũng phải để inset âm vì đúng lý do này.
   Dùng `backwards` chứ KHÔNG `forwards`: chạy xong trả chữ về style thường, không khoá
   clip-path lên tiêu đề (cùng luật đã cứu hover thẻ ngày 23/08).
   Nhịp 620ms, vào SAU khối 60ms và TRƯỚC gạch vàng (220ms) — rèm kéo rồi gạch mới vẽ. */
html.js .hien-dan.da-hien .tieu-de-muc {
  animation: keo-rem .62s var(--nhip) backwards;
  animation-delay: calc(var(--i, 0) * 70ms + .06s);
}
@keyframes keo-rem {
  from { clip-path: inset(-.3em -.6em 100% -.6em); transform: translateY(10px); }
  to   { clip-path: inset(-.3em -.6em -.3em -.6em); transform: none; }
}

/* ---------- lightbox ---------- */
#lightbox {
  position: fixed; inset: 0; z-index: 950; background: rgba(4,20,40,.92);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
#lightbox.mo { display: flex; }
#lightbox img { max-width: 94vw; max-height: 88vh; border-radius: 10px; }
#lightbox .dong { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.15); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; }

/* ---------- CTA cuối ---------- */
.dai-cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-700) 100%);
  border-radius: 20px; padding: 46px 30px; text-align: center; color: var(--trang);
  position: relative; overflow: hidden;
}
.dai-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 90% 10%, rgba(225,156,9,.3), transparent 60%); }
.dai-cta > * { position: relative; }
.dai-cta h2 { color: var(--trang); }

/* ============================================================
   NANG CAP 19/08/2026
   - Con nguoi len dau trang (khach duoc gioi thieu toi day de kiem tra NGUOI)
   - Loi rieng cho giao dich lon
   - Ton trong cai dat "giam chuyen dong" cua may khach
   ============================================================ */

/* --- loi tat kin dao cho khach lon, ngay duoi 2 nut chinh --- */
.loi-rieng {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  min-height: 44px; padding: 10px 18px; border-radius: 4px;
  border: 1px solid rgba(225,156,9,.35); background: rgba(225,156,9,.12);
  color: var(--gold-soft); font-weight: 700; font-size: .95rem;
}
/* nền cũ và hover cũ gần trùng nhau => hover như chết; nay đậm lên rõ */
.loi-rieng:hover { background: rgba(225,156,9,.22); border-color: rgba(246,193,75,.6); }
.bt-lr { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- the danh tinh o dau trang — kieu "ho so tham dinh" (ban AI Studio 20/08):
       anh chan dung CHU NHAT nhu anh the ho so, nen navy dac, vien vang 1px --- */
.the-an {
  display: flex; gap: 18px; align-items: center; margin-top: 30px;
  max-width: 620px; padding: 18px 20px; border-radius: 6px;
  background: rgba(7,44,94,.85); border: 1px solid rgba(225,156,9,.45);
}
.the-an > img {
  width: 92px; height: 110px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(246,193,75,.6);
}
.the-an .ta-ten { font-size: 1.18rem; font-weight: 800; color: var(--trang); line-height: 1.3; }
.the-an .ta-vai { font-size: .86rem; color: #cfe0f5; margin-top: 2px; }
.the-an .ta-cred { list-style: none; margin: 11px 0 0; padding: 0; display: grid; gap: 6px; }
.the-an .ta-cred li {
  display: flex; align-items: center; gap: 7px; font-size: .83rem; color: #dbe6f5; line-height: 1.35;
}
.the-an .ta-cred b { color: var(--gold-soft); font-weight: 800; }
.bt-cr { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--gold-soft); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* dai "kenh lien lac truc tiep" TRONG .ta-chu — an <=900px (mobile da co thanh-goi dinh day,
   the cao them 130px la day day-so mat hut) */
.ta-lien-lac { border-top: 1px solid rgba(255,255,255,.16); margin-top: 12px; padding-top: 11px; }
.ta-lien-lac > span {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #9fb4d2; margin-bottom: 8px;
}
.ta-ll-hang { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-ll-hang a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border-radius: 4px; font-size: .88rem; font-weight: 700;
}
.ta-ll-hang a[data-sk="goi-the-an"] { background: var(--gold); color: var(--navy); }
.ta-ll-hang a[data-sk="zalo-the-an"] { border: 1px solid rgba(246,193,75,.5); color: var(--gold-soft); }
.ta-ll-hang a[data-sk="zalo-the-an"]:hover { background: rgba(225,156,9,.15); }
@media (max-width: 900px) { .ta-lien-lac { display: none; } }
@media (max-width: 620px) {
  /* Giu ngang tren dien thoai: xep doc lam dau trang dai them 130px,
     day day so va noi dung xuong qua sau. */
  .the-an { gap: 14px; padding: 16px; }
  .the-an > img { width: 66px; height: 79px; }
  .the-an .ta-ten { font-size: 1.05rem; }
  .the-an .ta-vai { font-size: .8rem; }
  .the-an .ta-cred li { font-size: .78rem; }
}

/* --- the tren nen navy (khoi giao dich lon) --- */
.the.the-toi { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); }
.the.the-toi h3 { color: var(--trang); }
.the.the-toi p { color: #cfe0f5; }
.hang-nut.giua-nut { justify-content: center; margin-top: 30px; }

/* --- khoi gui trang cho nguoi quen --- */
.hop-gioi-thieu {
  display: flex; gap: 18px; align-items: center;
  border: 1px solid var(--xam-300); border-radius: var(--bo-tron);
  background: var(--xam-100); padding: 26px 28px;
}
.gt-bt { width: 34px; height: 34px; flex-shrink: 0; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hop-gioi-thieu h3 { font-size: 1.12rem; }
.hop-gioi-thieu p { color: var(--xam-600); font-size: .95rem; margin-top: 6px; }
.gt-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.gt-nut button, .gt-nut a {
  min-height: 46px; display: inline-flex; align-items: center; padding: 0 20px;
  border-radius: 6px; font-size: .96rem; font-weight: 700; cursor: pointer;
  font-family: inherit; border: 0;
}
.gt-nut button { background: var(--navy); color: var(--trang); }
.gt-nut a { border: 1.5px solid var(--xam-300); background: var(--trang); color: var(--navy); }
@media (max-width: 640px) { .hop-gioi-thieu { flex-direction: column; align-items: flex-start; } }

/* --- NANG CAP 20/08 (ban AI Studio) --- */
/* hop "ho so kin" cho khoi giao dich lon: vien nam tren hop nay,
   KHONG vien .khung (vien sat mep mobile trong nhu loi) */
.ho-so-kin {
  max-width: 960px; margin: 0 auto; padding: 48px 44px;
  background: rgba(7,44,94,.95); border: 1px solid rgba(225,156,9,.45);
  border-radius: 6px; box-shadow: 0 26px 60px rgba(0,0,0,.38);
}
@media (max-width: 640px) { .ho-so-kin { padding: 26px 20px; } }
.vi-cam-ket { text-align: center; margin-top: 20px; font-size: .8rem; color: #a9bcd6; letter-spacing: .03em; }

/* danh so "Gio hang #1..#5" tren 5 the kho hang */
.so-gio {
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 6px;
}

/* footer: URL day du dang chu — chong gia mao (hoc FooterEditorial.tsx) */
.kenh-chinh-thuc { margin-top: 14px; font-size: .84rem; color: #8fa5c4; line-height: 1.9; }
.kenh-chinh-thuc a { color: #c6d5ea; text-decoration: underline; text-underline-offset: 3px; }
/* 31/08/2026 — 2 nút avatar nền tảng thay link chữ trần (anh Ân chê khô khan). Xếp DỌC
   full bề cột, cao ≥56px cho dễ bấm trên điện thoại; handle/URL đầy đủ hiện mờ ngay dưới
   tên kênh — khối chống giả mạo phải giữ URL cho khách đối chiếu. */
.kenh-nut { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; max-width: 360px; }
.kenh-nut .kn { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px 8px 8px;
  border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  color: #eef3fa; text-decoration: none; }
.kenh-nut .kn:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .3); }
.kenh-nut .kn-logo { flex: none; width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
  display: flex; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.kenh-nut .kn-logo svg { width: 100%; height: 100%; display: block; }
.kenh-nut .kn-chu { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.kenh-nut .kn-chu b { font-size: .93rem; }
.kenh-nut .kn-chu small { font-size: .78rem; color: #9db3d4; overflow-wrap: anywhere; }

/* --- Máy khách bật "giảm chuyển động" (VIẾT LẠI LẦN 3 — 25/08/2026):
   Bản 23/08 bóp reveal về mờ-tỏ 0,4s ⇒ trên chính máy anh Ân (đang bật chế độ này) trang
   nhìn như KHÔNG có hiệu ứng — anh báo lỗi lần hai. Chốt luật mới:
   - GIỮ NGUYÊN: reveal khi cuộn (một lần mỗi lượt vào khung, 12px, không lặp), rèm tiêu đề,
     gạch vàng, hover (khách tự khởi động). Đây là hiệu ứng CHỦ TRANG ĐẶT LÀM.
   - CHỈ TẮT/DỊU: cuộn mượt, vòng lặp VÔ HẠN (vòng sóng, nhẫn chat), zoom "thở" ảnh hero to.
     Đó mới là thứ gây khó chịu cho người nhạy chuyển động. --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #manCho .vong-song::before, #manCho .vong-song::after { animation: song-mo 2s ease-out infinite; transform: none; }
  @keyframes song-mo { 0% { opacity: .9; } 100% { opacity: 0; } }
  #theCan .hop, #manCho .the-cho { animation-name: hien-mo; }
  @keyframes hien-mo { from { opacity: 0; } to { opacity: 1; } }
}

/* Cac co icon dung o tung cho */
.bt-i { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8;
        stroke-linecap: round; stroke-linejoin: round; vertical-align: -.16em; }
.bt-to { width: 46px; height: 46px; fill: none; stroke: var(--gold); stroke-width: 1.6;
         stroke-linecap: round; stroke-linejoin: round; margin: 0 auto; display: block; }
.bt-song { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9;
           stroke-linecap: round; stroke-linejoin: round; }
.bt-khoa { width: 34px; height: 34px; fill: none; stroke: var(--gold); stroke-width: 1.6;
           stroke-linecap: round; stroke-linejoin: round; }
.thanh-goi a .bt-i, .nut .bt-i { width: 1.1em; height: 1.1em; }

/* --- Lưới 2 cột hero cũ (.hero-chinh, 20/08) ĐÃ GỠ 23/08/2026 — trang chủ nay dùng .hero-chu 2 tầng
       (xem khối HERO TRANG CHỦ 2 TẦNG ở trên). --- */

/* ============================================================
   CHATBOT "TRỢ LÝ CỦA HỒNG ÂN" — 23/08/2026
   Nút bấm mới mở (không popup tự bật). Chữ ≥16px, nút ≥44px (khách lớn tuổi).
   Lớp: nút 930 · khung 940 — trên header (900) và thanh gọi (800), dưới lightbox
   (950) và màn chờ (9500). Mobile: khung phủ toàn màn, nút nằm trên .thanh-goi.
   ============================================================ */
/* Nút = avatar robot vàng + nhãn nổi (A1 24/08/2026 — nút pill cũ trông như nút liên hệ
   thường, khách không nhận ra có trợ lý). Icon navy trên nền vàng; avatar có VIỀN TRẮNG
   + bóng đổ để không chìm khi trang nền trắng. Chấm xanh = "đang trực". */
.nut-chat {
  position: fixed; right: 16px; bottom: 88px; z-index: 930;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}
.nc-avatar {
  position: relative; flex: none; order: 2; width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--navy);
  border: 2px solid #fff; box-shadow: 0 14px 34px rgba(4, 32, 69, .35);
}
.nc-cham {
  position: absolute; right: 1px; top: 1px; width: 14px; height: 14px; border-radius: 50%;
  background: #16a34a; border: 2px solid #fff;
}
.nc-nhan {
  order: 1; background: var(--trang); color: var(--navy);
  font-weight: 700; font-size: 1rem; line-height: 1.2; padding: 10px 14px;
  border-radius: 999px; border: 1px solid var(--xam-300);
  box-shadow: 0 8px 22px rgba(4, 32, 69, .22); white-space: nowrap;
}
.nut-chat:hover .nc-avatar { background: var(--gold-soft); }
.nut-chat.dang-mo { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .nc-avatar::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid rgba(225, 156, 9, .55); animation: ncPulse 2.8s ease-out infinite;
  }
  @keyframes ncPulse {
    0% { transform: scale(1); opacity: .8; }
    70% { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1.3); opacity: 0; }
  }
}

/* Bong bóng mời — src/app.js bật 1 lần/7 ngày, hiện sau 2s rồi 6s tự thu; ✕ đóng ngay.
   KHÔNG bao giờ tự mở khung chat (anh Ân cấm popup 29/07) — bấm bong bóng mới mở. */
.bong-chat {
  position: fixed; right: 16px; bottom: 162px; z-index: 929;
  max-width: min(320px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 6px;
  background: var(--trang); color: var(--navy);
  border: 1px solid var(--xam-300); border-radius: 14px 14px 4px 14px;
  box-shadow: 0 14px 34px rgba(4, 32, 69, .25);
  padding: 12px 12px 12px 14px; font-size: 1rem; line-height: 1.45; cursor: pointer;
}
.bong-chat .bc-chu { order: 1; }
.bong-chat .bc-x {
  order: 2; flex: none; width: 36px; height: 36px; margin: -6px -4px -6px 0;
  border: 0; border-radius: 50%; background: none; color: var(--xam-600, #667);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.bong-chat .bc-x:hover { background: var(--xam-100, #eef1f5); }
@media (prefers-reduced-motion: no-preference) {
  .bong-chat { animation: bcHien .25s ease; }
  @keyframes bcHien { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

.khung-chat {
  position: fixed; right: 16px; bottom: 24px; z-index: 940;
  width: 390px; max-width: calc(100vw - 32px); height: 600px; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; background: var(--trang); border-radius: 18px;
  box-shadow: 0 24px 64px rgba(4, 32, 69, .30); overflow: hidden; border: 1px solid var(--xam-300);
}
.khung-chat[hidden] { display: none; }
.kc-dau { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--navy); color: var(--trang); }
.kc-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: var(--gold); color: var(--navy); font-weight: 900; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
}
.kc-ten { min-width: 0; }
.kc-ten b { display: block; font-size: 1.05rem; line-height: 1.2; }
.kc-ten small { display: block; color: #cfe0f5; font-size: .8rem; line-height: 1.3; margin-top: 2px; }
.kc-dong {
  margin-left: auto; width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: var(--trang); font-size: 1.15rem; font-weight: 700;
}
.kc-dong:hover { background: rgba(255, 255, 255, .22); }
.kc-tin {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; background: var(--xam-100);
  display: flex; flex-direction: column; gap: 10px; font-size: 1rem; -webkit-overflow-scrolling: touch;
}
.kc-tin .tin { max-width: 90%; padding: 10px 14px; border-radius: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.kc-tin .tin.k { align-self: flex-end; background: var(--navy); color: var(--trang); border-bottom-right-radius: 4px; }
.kc-tin .tin.b { align-self: flex-start; background: var(--trang); color: var(--chu); border: 1px solid var(--xam-300); border-bottom-left-radius: 4px; }
.kc-tin .tin.b small.nguon { display: block; margin-top: 6px; color: var(--xam-600); font-size: .78rem; }
.kc-tin .tin.b a.kc-link { display: inline-block; margin-top: 8px; color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.kc-tin .tin.cho { color: var(--xam-600); font-style: italic; }
.kc-chip { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 12px 4px; background: var(--xam-100); }
.kc-chip[hidden] { display: none; }
.kc-chip .chip {
  border: 1px solid var(--navy); background: var(--trang); color: var(--navy); border-radius: 999px;
  padding: 8px 13px; min-height: 40px; cursor: pointer;
  font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif; font-weight: 600; font-size: .92rem;
}
.kc-chip .chip:hover { background: var(--navy); color: var(--trang); }
.kc-go { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--xam-300); background: var(--trang); }
.kc-go[hidden] { display: none; }
.kc-go input {
  flex: 1; min-width: 0; min-height: 46px; font-size: 1rem; padding: 10px 12px;
  border: 1px solid var(--xam-300); border-radius: 10px; font-family: inherit; color: var(--chu);
}
.kc-go input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.kc-gui {
  min-width: 66px; min-height: 46px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--gold); color: var(--navy); font-weight: 800; font-size: 1rem; font-family: inherit;
}
.kc-gui:disabled { opacity: .6; cursor: default; }
.kc-chan { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px 12px 12px; background: var(--trang); }
.kc-hd {
  min-height: 44px; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 0; border-radius: 8px; padding: 6px 8px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .9rem; line-height: 1.2;
}
.kc-hd-zalo { background: #0068ff; color: var(--trang); }
.kc-hd-goi { background: var(--red); color: var(--trang); }
.kc-hd-lead { background: var(--gold); color: var(--navy); }
.kc-hd.nhan { box-shadow: 0 0 0 3px var(--gold-soft); }
.kc-lead { padding: 12px 14px 10px; border-top: 1px solid var(--xam-300); background: var(--trang); flex: 0 0 auto; max-height: 82%; overflow: auto; }
.kc-lead[hidden] { display: none; }
.kc-lead-tieu-de { font-weight: 800; color: var(--navy); font-size: 1.02rem; }
.kc-lead label { font-weight: 700; font-size: .9rem; color: var(--navy); display: block; margin: 8px 0 4px; }
.kc-lead input, .kc-lead textarea {
  width: 100%; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--xam-300); border-radius: 8px;
  font-family: inherit; color: var(--chu);
}
.kc-lead textarea { resize: vertical; min-height: 56px; }
.kc-lead input:focus, .kc-lead textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.kc-lead-nut { display: flex; gap: 8px; margin-top: 10px; }
.kc-lead-nut .nut { flex: 1; min-height: 46px; padding: 10px 10px; font-size: .95rem; }
.kc-lead-ghi { font-size: .78rem; color: var(--xam-600); margin-top: 8px; line-height: 1.45; }
.kc-lead .loi { color: var(--red); font-weight: 600; margin-top: 6px; font-size: .92rem; }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
  .nut-chat { left: 16px; right: auto; bottom: 72px; }
  .nc-avatar { order: 1; width: 56px; height: 56px; }
  .nc-avatar svg { width: 30px; height: 30px; }
  .nc-nhan { order: 2; font-size: .95rem; padding: 9px 12px; }
  .bong-chat { left: 16px; right: auto; bottom: 142px; border-radius: 14px 14px 14px 4px; }
  .khung-chat { inset: 0; width: auto; max-width: none; height: auto; max-height: none; border-radius: 0; border: 0; }
  .kc-tin .tin { max-width: 92%; }
}
@media (prefers-reduced-motion: no-preference) {
  .khung-chat { animation: kcHien .22s ease; }
  @keyframes kcHien { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ---------- FAQ trên trang dự án (soạn cho bot, treo luôn lên trang) ---------- */
.danh-sach-faq { max-width: 840px; display: grid; gap: 10px; }
details.faq { background: var(--trang); border: 1px solid var(--xam-300); border-radius: 12px; padding: 0 18px; }
details.faq summary {
  cursor: pointer; font-weight: 700; color: var(--navy); padding: 15px 0; font-size: 1.02rem; line-height: 1.4;
  list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--gold); font-weight: 900; font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }
details.faq[open] summary::after { content: "−"; }
details.faq .faq-tra-loi { padding: 0 0 16px; color: var(--chu); line-height: 1.65; }
details.faq .faq-tra-loi small { display: block; margin-top: 8px; color: var(--xam-600); font-size: .82rem; }

/* ============================================================
   GHÉP CHỌN LỌC TỪ BẢN AI STUDIO — phương án A′ (25/08/2026)
   Xoá cả khối này + gỡ khoiMaTran()/trangTinhDongTien() trong build.js là về bản cũ.
   ============================================================ */

/* ---- avatar thật trong logo (thay vòng chữ Â ở header; footer giữ chữ) ---- */
.tron-anh { overflow: hidden; padding: 0; border: 2px solid var(--gold); }
.tron-anh img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ---- nút chuyển Lưới/Hồ sơ + nguồn tiền (dùng chung) ---- */
.doi-kieu-xem { display: inline-flex; gap: 0; border: 1px solid var(--xam-300); border-radius: var(--bo-tron); overflow: hidden; margin-top: 14px; }
.doi-kieu-xem button {
  min-height: 44px; padding: 8px 18px; border: 0; background: var(--trang); color: var(--xam-600);
  font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
}
.doi-kieu-xem button + button { border-left: 1px solid var(--xam-300); }
.doi-kieu-xem button.dang-chon { background: var(--navy); color: var(--trang); }
.doi-kieu-xem button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ---- chế độ Hồ sơ: thẻ dự án trải một cột, ảnh trái chữ phải ---- */
.luoi-du-an.xem-ho-so { grid-template-columns: 1fr; }
.luoi-du-an.xem-ho-so > .the-du-an:first-child { grid-column: auto; }
.luoi-du-an.xem-ho-so > .the-du-an:first-child .anh,
.luoi-du-an.xem-ho-so > .the-du-an:first-child .anh-chu { height: 100%; }
@media (min-width: 701px) {
  .luoi-du-an.xem-ho-so .the-du-an { display: grid; grid-template-columns: 280px 1fr; }
  .luoi-du-an.xem-ho-so .the-du-an > a { display: block; height: 100%; }
  .luoi-du-an.xem-ho-so .the-du-an .anh,
  .luoi-du-an.xem-ho-so .the-du-an .anh-chu { height: 100%; min-height: 210px; }
}

/* ---- ma trận so sánh trang chủ ---- */
.bang-ma-tran { min-width: 980px; }
.bang-ma-tran td:first-child { min-width: 170px; }
.bang-ma-tran td small { display: block; margin-top: 5px; font-size: .76rem; font-weight: 400; color: var(--xam-600); }
.bang-ma-tran .o-cho { color: var(--xam-600); font-style: italic; }
.bang-ma-tran .mt-uu { display: block; color: var(--navy); }
.bang-ma-tran .mt-luuy { display: block; margin-top: 8px; color: var(--chu); }
.bang-ma-tran .mt-luuy small { margin-top: 2px; }
.chan-ma-tran { margin-top: 16px; font-size: .92rem; color: var(--xam-600); }
.chan-ma-tran a { color: var(--blue); font-weight: 700; }

/* ---- trang /tinh-dong-tien/ ---- */
.luoi-tinh { display: grid; gap: 26px; }
@media (min-width: 901px) { .luoi-tinh { grid-template-columns: 1.05fr .95fr; align-items: start; } }
.cot-nhap { background: var(--trang); border: 1px solid var(--xam-300); border-radius: var(--bo-tron); padding: 26px; }
.o-nhap { display: block; margin-bottom: 18px; font-size: .86rem; font-weight: 700; color: var(--navy); }
.o-nhap input[type="number"] {
  display: block; width: 100%; min-height: 48px; margin-top: 7px; padding: 10px 13px;
  border: 1px solid var(--xam-300); border-radius: var(--bo-tron);
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--navy); background: var(--xam-100);
}
.o-nhap input[type="number"]:focus { outline: 2px solid var(--gold); border-color: var(--gold); background: var(--trang); }
.o-nhap input[type="range"] { display: block; width: 100%; margin-top: 10px; accent-color: var(--gold); }
.o-nhap .doi-kieu-xem { margin-top: 8px; }
.neo-thue { margin-top: 4px; padding: 13px 15px; background: var(--xam-100); border-left: 3px solid var(--gold); border-radius: var(--bo-tron); font-size: .86rem; font-weight: 400; line-height: 1.6; }
.neo-thue small { display: block; margin-top: 6px; color: var(--xam-600); font-size: .78rem; }
.cot-ket { background: var(--navy); border: 1px solid var(--navy-700); border-radius: var(--bo-tron); padding: 26px; color: #c6d5ea; }
.cot-ket .kq-cho { color: #8fa5c4; font-style: italic; }
.o-kq { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: .9rem; }
.o-kq b { font-size: 1.15rem; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.o-kq.kq-chot b { color: var(--gold-soft); font-size: 1.3rem; }
.o-kq.kq-thieu b { color: var(--gold-soft); font-size: .88rem; font-style: italic; white-space: normal; text-align: right; }
.kq-luat { margin-top: 16px; padding: 12px 14px; background: rgba(255,255,255,.06); border-left: 3px solid var(--gold); border-radius: var(--bo-tron); font-size: .84rem; line-height: 1.6; }

/* ---- thanh cuộn tuỳ chỉnh (vi chỉnh lấy từ bản AI, đổi về màu nhà) ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--xam-200); }
::-webkit-scrollbar-thumb { background: var(--xam-300); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---- bản in: khách VIP in trang mang đi xem — bỏ vỏ, giữ ruột ---- */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .thanh-dau, footer, .thanh-goi, #nutLenDau, .nut, .doi-kieu-xem, .nut-menu-mobile,
  .nut-chat, #khungChat, #lien-he, iframe, video { display: none !important; }
  .muc { padding: 18px 0 !important; break-inside: avoid; }
  html.js .hien-dan:not(.da-hien) { opacity: 1 !important; }
}

/* ---------- mục «Thông tin mới nhất từ CĐT» trên trang dự án (30/08/2026) ----------
   Hiệu ứng cố ý toàn loại MỘT LẦN (reveal .hien-dan + hover) theo luật 26/08; thứ lặp
   duy nhất là vòng sóng chấm xanh — tắt hẳn dưới prefers-reduced-motion (chấm thành tĩnh,
   giống chấm trực kho ở trang chủ). */
.muc-tin-cdt { padding: 56px 0; background: linear-gradient(180deg, #fdf8ee, var(--trang) 72%); border-bottom: 1px solid var(--xam-300); }
.muc-tin-cdt .cham-truc { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; margin-right: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .muc-tin-cdt .cham-truc { animation: tc-tho 2.6s ease-in-out infinite; }
  @keyframes tc-tho { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); } 50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }
}
.dong-tin-cdt { list-style: none; margin: 0; padding: 0; position: relative; max-width: 820px; }
.dong-tin-cdt::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--gold), rgba(225, 156, 9, .12)); }
.tc-tin { position: relative; padding: 0 0 26px 30px; }
.tc-tin::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--trang); border: 3px solid var(--gold); }
.tc-tin:last-child { padding-bottom: 4px; }
.tc-hang-nhan { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.tc-ngay { font-weight: 800; color: var(--navy); font-size: .85rem; letter-spacing: .02em; }
.tc-loai { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); border: 1px solid var(--xam-300); padding: 2px 8px; }
.tc-moi { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--red); padding: 2px 8px; }
.tc-tin h3 { font-size: 1.06rem; margin: 0 0 6px; color: var(--navy); }
.tc-tin p { margin: 0 0 8px; max-width: 700px; }
.tc-nguon { font-size: .8rem; color: var(--xam-600); }
.tc-dau { background: #fff; border: 1px solid rgba(225, 156, 9, .5); border-left: 3px solid var(--gold); border-radius: var(--bo-tron); padding: 16px 18px 16px 34px; margin-bottom: 26px; box-shadow: var(--bong); }
.tc-dau::before { left: 14px; top: 23px; background: var(--gold-soft); }
.tc-dau:hover { box-shadow: var(--bong-to); }
@media (max-width: 700px) {
  .muc-tin-cdt { padding: 42px 0; }
  .tc-dau { padding: 14px 14px 14px 30px; }
  .tc-dau::before { left: 10px; top: 21px; }
}

/* ---- /tinh-dong-tien/ bản HAI GIAI ĐOẠN + bảng lãi suất có nguồn (04/09/2026) ----
   Hội đồng 4 vai chốt: máy tính phải ra con số THÁNG 13 (thả nổi), có chốt tuổi + thu nhập,
   bảng lãi suất mỗi dòng dán nguồn + ngày, số cũ LÀM MỜ chứ không giấu. Nút ≥44px có chữ
   (khách 40–65 tuổi). Không hiệu ứng lặp — chỉ reveal .hien-dan sẵn có. */
.dang-tinh-cho { margin-bottom: 14px; padding: 10px 13px; background: #fdf8ee; border-left: 3px solid var(--gold); border-radius: var(--bo-tron); font-size: .9rem; color: var(--navy); font-weight: 600; }
.hang-doi { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .hang-doi { grid-template-columns: 1fr 1fr; } }
.o-nhap .goi-y { display: block; margin-top: 6px; font-size: .78rem; font-weight: 400; line-height: 1.5; color: var(--xam-600); }
.o-nhap .goi-y em, .o-nhap .goi-y b { font-style: normal; font-weight: 700; color: var(--navy); }
.khoi-chot { margin: 4px 0 18px; padding: 14px 15px 8px; border: 1px dashed var(--xam-300); border-radius: var(--bo-tron); background: var(--xam-100); }
.khoi-chot h3 { margin: 0 0 12px; font-size: .95rem; color: var(--navy); }
.khoi-chot .goi-y { margin: -4px 0 8px; }
.o-kq.kq-canh { display: block; }
.o-kq.kq-canh b { display: block; white-space: normal; font-size: 1.05rem; margin-bottom: 4px; }
.o-kq.kq-canh span { display: block; font-size: .84rem; line-height: 1.55; color: #c6d5ea; }
.o-kq.kq-canh.tot b { color: #7ee2a8; }
.o-kq.kq-canh.vua b { color: var(--gold-soft); }
.o-kq.kq-canh.xau b { color: #ff8a8a; }
.kq-nhom { margin-top: 16px; padding-top: 4px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #8fa5c4; }
.o-kq .ghi-nho { display: block; margin-top: 3px; font-size: .78rem; color: #8fa5c4; font-weight: 400; }
.ls-bao { margin-top: 10px; min-height: 1.4em; font-size: .84rem; line-height: 1.5; color: var(--gold-soft); }
.chu-nut-phu { display: block; margin-top: 6px; font-size: .78rem; color: #8fa5c4; text-align: center; }
/* mục lãi suất tham khảo */
.muc-ls { background: var(--xam-100); border-top: 1px solid var(--xam-300); }
.tieu-de-ls { margin: 28px 0 10px; font-size: 1.05rem; color: var(--navy); }
.ghi-ls { margin: 0 0 12px; font-size: .88rem; color: var(--xam-600); line-height: 1.6; max-width: 820px; }
.dai-thi-truong { padding: 14px 16px; background: var(--trang); border: 1px solid var(--xam-300); border-left: 3px solid var(--gold); border-radius: var(--bo-tron); font-size: .92rem; line-height: 1.6; color: var(--navy); }
.dai-thi-truong .ls-nguon { margin-top: 6px; }
.ds-ls { display: grid; gap: 12px; }
@media (min-width: 760px) { .ds-ls { grid-template-columns: 1fr 1fr; } }
.dong-ls { padding: 14px 16px; background: var(--trang); border: 1px solid var(--xam-300); border-radius: var(--bo-tron); }
.dong-ls.cu { opacity: .72; }
.ls-dau { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ls-ten { font-size: 1.05rem; color: var(--navy); }
.nhan-tuoi { font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border: 1px solid; border-radius: 3px; white-space: nowrap; }
.nhan-tuoi.moi { color: #0a8a3c; border-color: #0a8a3c; }
.nhan-tuoi.hoi-lai { color: #a86a00; border-color: #e19c09; }
.nhan-tuoi.cu { color: #b42318; border-color: #b42318; }
.ls-cong-bo { margin: 8px 0 4px; font-size: .95rem; font-weight: 600; color: var(--navy); line-height: 1.5; }
.ls-so { margin: 6px 0 2px; font-size: 1.6rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ls-so small { font-size: .8rem; font-weight: 600; color: var(--xam-600); }
.ls-nguon { font-size: .8rem; color: var(--xam-600); line-height: 1.55; }
.ls-nguon a { color: var(--navy); text-decoration: underline; }
.ls-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.nut-dung { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--navy); border-radius: var(--bo-tron); background: var(--trang); color: var(--navy); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.nut-dung:hover, .nut-dung:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--navy); outline: none; }
.luat-ls { margin-top: 28px; padding: 16px 18px; background: var(--trang); border-left: 3px solid var(--navy); border-radius: var(--bo-tron); font-size: 1rem; line-height: 1.65; color: var(--navy); }
.luat-ls p { margin: 0 0 8px; }
.luat-ls p:last-child { margin: 0; }
@media print { .muc-ls .ls-nut { display: none !important; } }

/* ============================================================
   05/09/2026 — ẢNH THẬT thay chữ trần (anh Ân: "đừng để những dòng chữ thô kệch,
   nhìn rất AI hoá — tìm ảnh anh đăng chèn vào"). Mọi ảnh ở đây là ảnh thật của
   anh Ân: khung hình trích từ video anh tự quay tại Vinhomes Pearl Bay (08/2026),
   ảnh giải VnExpress Marathon Nha Trang 2026, ảnh lễ NEW AWARDS của New City,
   ảnh chụp màn hình app thật. KHÔNG ảnh stock, KHÔNG ảnh AI. Sao lưu: *.truoc-anh-0509
   ============================================================ */
/* Thẻ có ảnh trên đầu (trang /gioi-thieu/ mục "Tôi không bán bằng cảm tính") */
.the.co-anh { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.the.co-anh .anh-the { display: block; aspect-ratio: 16 / 9; background: var(--navy); overflow: hidden; border-bottom: 1px solid var(--xam-200); }
.the.co-anh .anh-the img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .45s var(--nhip); }
.the.co-anh:hover .anh-the img { transform: scale(1.04); }
.the.co-anh .than-the { padding: 20px 24px 26px; }
.the.co-anh .than-the p { margin-bottom: 0; }
.the.co-anh .xem-thu { color: var(--blue); font-weight: 700; }
/* Dải 3 ảnh thực địa dưới mục "Ba việc tôi tự tay làm" */
.dai-anh-thuc-dia { display: grid; grid-template-columns: 1.3fr .8fr 1.3fr; gap: 12px; margin-top: 34px; }
.dai-anh-thuc-dia img { width: 100%; height: 250px; object-fit: cover; border-radius: var(--bo-tron); display: block; background: var(--navy); cursor: zoom-in; }
.chu-thich-anh { display: block; margin-top: 10px; font-size: .84rem; color: var(--xam-600); }
@media (max-width: 700px) {
  .dai-anh-thuc-dia { grid-template-columns: 1fr 1fr; }
  .dai-anh-thuc-dia img { height: 150px; }
  .dai-anh-thuc-dia img:first-child { grid-column: span 2; height: 200px; }
}
/* Mục "Tôi chạy bộ": chữ trái · ảnh ghép phải (1 lớn + 2 nhỏ) */
.luoi-chay { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.ghep-chay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ghep-chay img { width: 100%; height: 165px; object-fit: cover; border-radius: var(--bo-tron); display: block; background: var(--navy); cursor: zoom-in; }
.ghep-chay img:first-child { grid-column: span 2; height: 300px; }
@media (max-width: 900px) { .luoi-chay { grid-template-columns: 1fr; gap: 28px; } .ghep-chay img:first-child { height: 240px; } }
/* Thẻ kho hàng (4 giỏ thường): ảnh chụp app / ảnh dự án thật nằm TRÊN đầu thẻ, full-bleed 3 mép */
a.the-kho .anh-kho { position: relative; width: calc(100% + 56px); margin: -28px -28px 18px; aspect-ratio: 16 / 8; overflow: hidden; background: var(--navy); border-bottom: 1px solid rgba(246, 193, 75, .35); }
a.the-kho .anh-kho img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .45s var(--nhip); }
a.the-kho:hover .anh-kho img { transform: scale(1.04); }
a.the-kho .anh-kho .nhan-song { left: 10px; bottom: 8px; }
a.the-kho .anh-kho::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 32, 69, 0) 60%, rgba(4, 32, 69, .55)); pointer-events: none; }
/* Trang chủ #gioi-thieu: ảnh nhỏ nay là ảnh anh Ân đi xem hàng — giữ đúng khung .anh-nho */

/* ---- 05/09/2026: trang tổng /du-an/ gom theo chủ đầu tư + tin CĐT tổng ---- */
.nhom-cdt { margin-top: 22px; }
.nhom-cdt-ten { font-family: 'Lora', Georgia, serif; font-size: 1.15rem; color: var(--navy); margin: 0 0 10px; padding-left: 12px; border-left: 3px solid var(--gold); }
.bang-nhom-cdt td small { display: block; font-weight: 400; color: var(--xam-600); font-size: .8rem; margin-top: 3px; }
.tc-du-an { font-size: .78rem; font-weight: 700; color: var(--navy); text-decoration: none; padding: 2px 8px; border: 1px solid var(--xam-300); border-radius: 3px; background: var(--trang); }
.tc-du-an:hover { border-color: var(--gold); }