/* ══════════════════════════════════════════════════════════════════════
   Vinhomes Olympic — trang giới thiệu dự án
   Bảng màu: xanh đêm (tin cậy) + vàng đồng (cao cấp) + kem (nền đọc)
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Lấy theo nhận diện Vinhomes hiện hành: navy đậm + vàng đồng trên nền
     TRẮNG, nhiều khoảng trống, chữ serif. Khác bản đầu của trang này (nền
     kem, nhiều mảng tối, nội dung chữ sans). */
  --dem:        #1B2A5B;
  --dem-nhat:   #27386f;
  --dong:       #C8962D;
  --dong-sang:  #E0B458;
  --kem:        #FFFFFF;
  --kem-dam:    #F7F3EC;
  --chu:        #1B2A5B;
  --chu-nhat:   #657089;
  --vien:       #E7E0D4;
  --trang:      #fff;

  --rong:       1200px;
  --rong-hep:   760px;
  --bo:         4px;
  --bong:       0 10px 34px rgba(27, 42, 91, .07);
  --bong-sau:   0 20px 54px rgba(27, 42, 91, .14);
  --nhanh:      .25s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 86px; }

body {
  margin: 0;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.85;
  color: var(--chu);
  background: var(--kem);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dem);
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

p { margin: 0 0 1.1em; }
a { color: inherit; }

.khung { width: min(100% - 2.5rem, var(--rong)); margin-inline: auto; }
.khung--hep { width: min(100% - 2.5rem, var(--rong-hep)); }

.bo-qua {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--dem); color: #fff; padding: .8rem 1.2rem;
}
.bo-qua:focus { left: 1rem; top: 1rem; }

/* ── Nút ──────────────────────────────────────────────────────────── */
.nut {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: 1rem 2.4rem;
  background: var(--dong); color: #fff;
  font-weight: 600; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid var(--dong); border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: var(--nhanh);
}
.nut:hover { background: var(--dem); border-color: var(--dem); color: #fff; transform: none; }
.nut--vien { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.nut--vien:hover { background: rgba(255,255,255,.12); border-color: #fff; transform: translateY(-2px); }
.nut--nho { padding: .6rem 1.2rem; font-size: .72rem; letter-spacing: .1em; }
.nut--to { padding: 1.1rem 2.4rem; font-size: .85rem; width: 100%; }

/* ── Thanh đỉnh ───────────────────────────────────────────────────── */
.dinh {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: transparent;
  transition: background var(--nhanh), box-shadow var(--nhanh), padding var(--nhanh);
  padding: .55rem 0;
}
.dinh--dinh {
  background: rgba(11, 27, 51, .95);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0,0,0,.22);
}
.dinh__trong { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.hieu { text-decoration: none; display: block; line-height: 1.25; }
.hieu__ten {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.22rem; font-weight: 700; letter-spacing: .09em;
  color: #fff;
}
.hieu__phu {
  display: block; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dong-sang);
}

/* gap hẹp + nowrap: 10 mục ở 1440px từng tràn xuống hàng hai và đè lên logo. */
.dieu-huong { display: flex; align-items: center; gap: 1.05rem; flex-wrap: nowrap; }
.dieu-huong a {
  color: rgba(255,255,255,.88); white-space: nowrap;
  text-decoration: none; font-size: .83rem; font-weight: 500;
  position: relative; padding: .2rem 0;
  transition: color var(--nhanh);
}
.dieu-huong a:not(.nut)::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--dong);
  transition: width var(--nhanh);
}
.dieu-huong a:not(.nut):hover { color: #fff; }
.dieu-huong a:not(.nut):hover::after { width: 100%; }

.nut-menu {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: .5rem;
}
.nut-menu span { width: 26px; height: 2px; background: #fff; transition: var(--nhanh); }
.nut-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nut-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nut-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Bìa ──────────────────────────────────────────────────────────── */
.bia { position: relative; min-height: 100svh; display: flex; align-items: center; isolation: isolate; }
.bia__anh { position: absolute; inset: 0; z-index: -2; }
.bia__anh img { width: 100%; height: 100%; object-fit: cover; }
.bia__phu {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,27,51,.82) 0%, rgba(11,27,51,.55) 45%, rgba(11,27,51,.92) 100%),
    linear-gradient(90deg, rgba(11,27,51,.65) 0%, transparent 65%);
}

.bia__luoi {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 4rem; align-items: center;
  padding: 8.5rem 0 10rem;
}
.bia__chu { color: #fff; }
.nhan-tren {
  font-size: .76rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--dong-sang); margin-bottom: 1.1rem;
}
.bia h1 {
  color: #fff; font-size: clamp(2.5rem, 6.2vw, 4.6rem);
  margin-bottom: 1.1rem; text-shadow: 0 2px 30px rgba(0,0,0,.3);
}
.bia h1 em { font-style: italic; color: var(--dong-sang); }
.bia__dan { font-size: 1.1rem; color: rgba(255,255,255,.9); max-width: 60ch; }
.bia__nut { display: flex; flex-wrap: wrap; gap: .9rem; margin: 2rem 0 1.5rem; }
.bia__luu-y { font-size: .88rem; color: rgba(255,255,255,.72); margin: 0; }
.bia__luu-y strong { color: var(--dong-sang); }

/* ── Thẻ biểu mẫu trên bìa ────────────────────────────────────────
   Nền sáng đặt trên bìa tối: tách hẳn khỏi ảnh nền nên mắt nhìn vào
   ngay, và chữ đen trên nền trắng thì đọc chắc chắn được dù ảnh bìa
   sau này có được thay bằng ảnh sáng hơn.
------------------------------------------------------------------ */
.the-mau {
  background: var(--trang);
  border-radius: var(--bo);
  padding: 2.1rem 1.9rem;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  border-top: 4px solid var(--dong);
}
.the-mau__nhan {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dong); font-weight: 700; margin-bottom: .5rem;
}
.the-mau__tieu-de { font-size: 1.55rem; margin-bottom: .6rem; }
.the-mau__dan { font-size: .9rem; color: var(--chu-nhat); margin-bottom: 1.4rem; }
.the-mau__dan strong { color: var(--dem); }

.mau-nhanh { display: grid; gap: 1rem; }
.mau-nhanh .o label { color: var(--chu); }
.mau-nhanh .o label span { color: #C0392B; }
.mau-nhanh .o input[type="text"],
.mau-nhanh .o input[type="tel"] {
  background: var(--kem); color: var(--chu);
  border: 1px solid var(--vien);
}
.mau-nhanh .o input::placeholder { color: #9AA3B2; }
.mau-nhanh .o input:focus { background: #fff; border-color: var(--dong); }
.mau-nhanh .o input[aria-invalid="true"] { border-color: #C0392B; }
.mau-nhanh .dong-y span { color: var(--chu-nhat); font-size: .86rem; }
.mau-nhanh .loi { color: #C0392B; }
.mau-nhanh .ket-qua--ok { color: #1E7A4C; }
.mau-nhanh .ket-qua--loi { color: #C0392B; }

.bia__so {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(11,27,51,.72);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.14);
}
.bia__so-trong {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem; padding: 1.4rem 0;
}
.bia__so-trong div { text-align: center; color: #fff; }
.bia__so-trong strong { display: block; font-size: .98rem; font-weight: 600; line-height: 1.35; }
.bia__so-trong span {
  display: block; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dong-sang); margin-top: .3rem;
}

/* ── Khối chung ───────────────────────────────────────────────────── */
.phan { padding: 6.5rem 0; }
.phan--nen { background: var(--kem-dam); }
.phan--dam { background: var(--dem); color: rgba(255,255,255,.9); }

.nhan-muc {
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dem); font-weight: 700; margin-bottom: .7rem;
}
.nhan-muc--sang { color: var(--dong-sang); }

.tieu-de {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 1.8rem;
  color: var(--dong); text-transform: uppercase; letter-spacing: .01em;
}
.tieu-de--sang { color: #fff; }

.dan { font-size: 1.07rem; color: var(--chu-nhat); }
.dan--giua { max-width: 68ch; }
.dan--sang { color: rgba(255,255,255,.78); }

.hai-cot { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: start; }

/* ── Bảng thông tin ───────────────────────────────────────────────── */
.bang-tt {
  margin: 0; background: var(--trang);
  border: 1px solid var(--vien); border-radius: var(--bo);
  overflow: hidden; box-shadow: var(--bong);
}
.bang-tt > div {
  display: grid; grid-template-columns: 1fr 1.25fr;
  gap: 1rem; padding: .95rem 1.4rem;
  border-bottom: 1px solid var(--vien);
}
.bang-tt > div:last-child { border-bottom: 0; }
.bang-tt dt { font-size: .83rem; color: var(--chu-nhat); letter-spacing: .02em; }
.bang-tt dd { margin: 0; font-weight: 600; font-size: .93rem; }
.cho {
  display: inline-block; padding: .12rem .6rem;
  background: #FDF3D8; color: #8A6A08;
  border-radius: 999px; font-size: .78rem; font-weight: 600;
}

/* ── Hộp lưu ý ────────────────────────────────────────────────────── */
.hop-luu-y {
  margin-top: 2.6rem; padding: 1.4rem 1.6rem;
  background: var(--trang);
  border-left: 4px solid var(--dong);
  border-radius: 0 var(--bo) var(--bo) 0;
  font-size: .94rem; color: var(--chu-nhat);
  box-shadow: var(--bong);
}
.hop-luu-y strong { color: var(--dem); }

/* ── Thẻ ──────────────────────────────────────────────────────────── */
.luoi-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.the {
  background: var(--trang); padding: 2rem 1.8rem;
  border: 1px solid var(--vien); border-radius: var(--bo);
  transition: var(--nhanh);
}
.the:hover { transform: translateY(-5px); box-shadow: var(--bong-sau); border-color: var(--dong); }
.the h3 { font-size: 1.22rem; margin-bottom: .6rem; }
.the p { margin: 0; font-size: .94rem; color: var(--chu-nhat); }

/* ── Tiện ích nội khu ─────────────────────────────────────────────── */
.luoi-ti {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem; margin-top: 2.6rem;
}
.ti {
  background: var(--trang); border: 1px solid var(--vien);
  border-radius: var(--bo); padding: 1.9rem 1.7rem;
  display: flex; flex-direction: column;
  transition: var(--nhanh);
}
.ti:hover { transform: translateY(-5px); box-shadow: var(--bong-sau); border-color: var(--dong); }
.ti__bieu {
  width: 50px; height: 50px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--dem) 0%, var(--dem-nhat) 100%);
  border-radius: 13px; margin-bottom: 1.1rem;
}
.ti__bieu svg { width: 25px; height: 25px; fill: var(--dong-sang); }
.ti h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.ti p { font-size: .92rem; color: var(--chu-nhat); margin-bottom: 1.1rem; flex: 1; }

.trang-thai {
  align-self: flex-start;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
  padding: .22rem .7rem; border-radius: 999px;
  background: var(--kem-dam); color: var(--chu-nhat);
  border: 1px solid var(--vien);
}
/* Màu cảnh báo cho hạng mục mà các nguồn đang nói khác nhau — người đọc cần
   nhận ra ngay là chỗ này chưa chắc chắn, không chỉ là "chưa có chi tiết". */
.trang-thai--canh { background: #FDF3D8; color: #8A6A08; border-color: #E8D49A; }

/* ── Bản đồ ───────────────────────────────────────────────────────── */
.ban-do { margin-top: 2.6rem; }
.ban-do iframe {
  width: 100%; height: 420px; border: 0;
  border-radius: var(--bo); box-shadow: var(--bong);
}
.chu-thich { font-size: .86rem; color: var(--chu-nhat); margin-top: .9rem; }

/* ── Lưới 2 cột có ảnh ────────────────────────────────────────────── */
.luoi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.luoi-2--anh { margin-top: 2.6rem; }
.dao figure { order: 2; }

.anh-the { margin: 0; position: relative; border-radius: var(--bo); overflow: hidden; box-shadow: var(--bong-sau); }
.anh-the img { width: 100%; height: 420px; object-fit: cover; }
.anh-the figcaption {
  position: absolute; right: .7rem; bottom: .7rem;
  background: rgba(11,27,51,.78); color: #fff;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 999px;
}

.ds-dam { list-style: none; padding: 0; margin: 0; }
.ds-dam li {
  padding: 1rem 0 1rem 2rem; position: relative;
  border-bottom: 1px solid var(--vien); font-size: .97rem;
}
.ds-dam li:last-child { border-bottom: 0; }
.ds-dam li::before {
  content: ''; position: absolute; left: 0; top: 1.5rem;
  width: 9px; height: 9px; background: var(--dong);
  transform: rotate(45deg);
}

.lien-ket-mui-ten {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--dem); font-weight: 600; font-size: .95rem;
  text-decoration: none; border-bottom: 2px solid var(--dong);
  padding-bottom: .15rem;
}
.lien-ket-mui-ten::after { content: '→'; transition: var(--nhanh); }
.lien-ket-mui-ten:hover::after { transform: translateX(5px); }

/* ── Mặt bằng & bảng giá ──────────────────────────────────────────── */
.tieu-de--phu { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 3.5rem; }

.an {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Khung chờ bản vẽ mặt bằng. Cố tình để trống và nói rõ là trống, thay vì
   mượn mặt bằng của dự án khác cho "đỡ xấu" — khách sẽ tưởng đó là mặt bằng
   của dự án này. */
.cho-anh {
  margin-top: 2.4rem; padding: 4rem 2rem; text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 11px,
      rgba(11,27,51,.035) 11px, rgba(11,27,51,.035) 22px),
    var(--trang);
  border: 2px dashed var(--vien); border-radius: var(--bo);
  color: var(--chu-nhat);
}
.cho-anh svg { width: 46px; height: 46px; fill: var(--vien); margin-bottom: .9rem; }
.cho-anh p { margin: 0; }
.cho-anh strong { color: var(--dem); font-size: 1.05rem; }
.cho-anh__phu { font-size: .88rem; margin-top: .5rem !important; }
.cho-anh code {
  background: var(--kem-dam); padding: .1rem .4rem;
  border-radius: 5px; font-size: .85em;
}

.canh-bao {
  margin: 1.6rem 0; padding: 1.2rem 1.4rem;
  background: #FFF8E6; border: 1px solid #E8D49A;
  border-left: 4px solid var(--dong);
  border-radius: 0 var(--bo) var(--bo) 0;
  font-size: .93rem; color: #6B5407;
}
.canh-bao strong { display: block; color: #4A3A05; margin-bottom: .3rem; }

.cuon-ngang { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.bang-gia {
  width: 100%; border-collapse: collapse; min-width: 620px;
  background: var(--trang); border-radius: var(--bo); overflow: hidden;
  box-shadow: var(--bong);
}
.bang-gia thead th {
  background: var(--dem); color: #fff; text-align: left;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; padding: .95rem 1.2rem;
}
.bang-gia tbody th, .bang-gia td {
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--vien);
  font-size: .94rem; text-align: left;
}
.bang-gia tbody tr:last-child th, .bang-gia tbody tr:last-child td { border-bottom: 0; }
.bang-gia tbody tr:hover { background: var(--kem); }
.bang-gia tbody th { font-weight: 600; color: var(--dem); }
.bang-gia .gia { font-weight: 700; color: var(--dem); white-space: nowrap; }

.goi-y-dk {
  margin-top: 2.6rem; padding: 1.8rem 2rem;
  background: var(--dem); color: #fff; border-radius: var(--bo);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.goi-y-dk h3 { color: #fff; font-size: 1.25rem; margin-bottom: .3rem; }
.goi-y-dk p { margin: 0; font-size: .93rem; color: rgba(255,255,255,.75); }

/* ── Mốc tiến độ ──────────────────────────────────────────────────── */
.moc { list-style: none; padding: 0; margin: 2.6rem 0 0; position: relative; }
.moc::before {
  content: ''; position: absolute; left: 11px; top: 10px; bottom: 10px;
  width: 2px; background: var(--vien);
}
.moc li { position: relative; padding: 0 0 2.4rem 3.2rem; }
.moc li:last-child { padding-bottom: 0; }
.moc li::before {
  content: ''; position: absolute; left: 4px; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--kem-dam); border: 2px solid var(--vien);
}
.moc__xong::before { background: var(--dong) !important; border-color: var(--dong) !important; }
.moc__dang::before { background: var(--trang) !important; border-color: var(--dong) !important; box-shadow: 0 0 0 5px rgba(201,162,39,.2); }
.moc__ngay {
  display: inline-block; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dong); font-weight: 600;
}
.moc h3 { font-size: 1.2rem; margin: .25rem 0 .35rem; }
.moc p { margin: 0; font-size: .95rem; color: var(--chu-nhat); }

/* ── Lưới ảnh ─────────────────────────────────────────────────────── */
.luoi-anh { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.4rem; }
.luoi-anh figure { margin: 0; position: relative; border-radius: var(--bo); overflow: hidden; }
.luoi-anh img { width: 100%; height: 300px; object-fit: cover; transition: transform .5s ease; }
.luoi-anh figure:hover img { transform: scale(1.06); }
.luoi-anh figcaption {
  position: absolute; left: .6rem; bottom: .6rem;
  background: rgba(11,27,51,.78); color: #fff;
  font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .6rem; border-radius: 999px;
}

/* ── Biểu mẫu ─────────────────────────────────────────────────────── */
.bieu-mau {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem;
  margin-top: 2.4rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--bo); padding: 2.2rem;
}
.o { display: flex; flex-direction: column; gap: .45rem; }
.o--rong { grid-column: 1 / -1; }
.o label { font-size: .85rem; font-weight: 500; color: rgba(255,255,255,.88); }
.o label span { color: var(--dong-sang); }

.o input, .o select, .o textarea {
  font-family: inherit; font-size: .97rem;
  padding: .85rem 1rem; color: #fff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  transition: var(--nhanh);
}
.o textarea { resize: vertical; }
.o input::placeholder, .o textarea::placeholder { color: rgba(255,255,255,.4); }
.o input:focus, .o select:focus, .o textarea:focus {
  outline: 0; border-color: var(--dong); background: rgba(255,255,255,.12);
}
.o select option { color: #1C2333; }
.o input[aria-invalid="true"], .o select[aria-invalid="true"] { border-color: #FF8A8A; }

.loi { color: #FFB4B4; font-size: .8rem; min-height: 1em; }

.dong-y { flex-direction: row; align-items: flex-start; gap: .65rem; display: flex; cursor: pointer; }
.dong-y input { width: 18px; height: 18px; margin-top: .25rem; flex: none; accent-color: var(--dong); }
.o--dong-y { gap: .3rem; }

.ket-qua { margin: .9rem 0 0; font-size: .92rem; text-align: center; min-height: 1.2em; }
.ket-qua--ok { color: var(--dong-sang); }
.ket-qua--loi { color: #FFB4B4; }

/* ── Chân trang ───────────────────────────────────────────────────── */
.chan { background: #071325; color: rgba(255,255,255,.62); padding: 4rem 0 2rem; font-size: .9rem; }
.chan__tren {
  display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.hieu__ten--chan { color: #fff; font-family: 'Playfair Display', serif; font-size: 1.2rem; letter-spacing: .09em; margin: 0 0 .4rem; }
.chan__mo-ta { margin: 0; max-width: 42ch; }
.chan__lien-he p { margin: 0 0 .35rem; }
.chan__lien-he span {
  display: inline-block; width: 68px;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dong-sang);
}
.chan__lien-he a { color: #fff; text-decoration: none; font-weight: 500; }
.chan__lien-he a:hover { color: var(--dong-sang); }

.mien-tru { padding: 2.2rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.mien-tru h2 {
  font-family: inherit; font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dong-sang); margin-bottom: .9rem;
}
.mien-tru p { font-size: .84rem; line-height: 1.7; margin-bottom: .8rem; }
.mien-tru strong { color: rgba(255,255,255,.9); }

.ban-quyen { text-align: center; font-size: .8rem; margin: 1.6rem 0 0; }

/* ── Nút liên hệ nổi (Zalo + Gọi) ─────────────────────────────────── */
.lien-he-noi {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 90;
  display: flex; align-items: center; gap: .6rem;
  /* Ẩn khi còn ở bìa: dưới đó đã có sẵn form đăng ký, để nút nổi đè lên form
     là hai lời kêu gọi hành động chọi nhau, mà nút lại che mất chữ. */
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: var(--nhanh);
}
.lien-he-noi--hien { opacity: 1; visibility: visible; transform: none; }

.nut-noi {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.25rem; border-radius: 999px;
  font-weight: 600; font-size: .92rem; text-decoration: none;
  box-shadow: 0 10px 28px rgba(11,27,51,.3);
  transition: var(--nhanh);
}
.nut-noi:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11,27,51,.38); }
.nut-noi svg { width: 20px; height: 20px; flex: none; }

.nut-noi--goi { background: var(--dong); color: var(--dem); }
.nut-noi--goi svg { fill: currentColor; }

/* Xanh Zalo để khách nhận ra ngay. Dùng bong bóng chat + chữ "Zalo" chứ không
   chép lại logo của họ — nhận diện vẫn đủ rõ mà không đụng tới nhãn hiệu. */
.nut-noi--zalo { background: #0068FF; color: #fff; }
.nut-noi--zalo svg { fill: #fff; }

/* ── Hiệu ứng hiện dần ────────────────────────────────────────────── */
.hien { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; }
.hien--ra { opacity: 1; transform: none; }

/* ══ Màn hình nhỏ ══════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .bia { min-height: 0; }
  .bia__luoi { grid-template-columns: 1fr; gap: 2.5rem; padding: 7rem 0 9rem; }
  .hai-cot, .luoi-2 { grid-template-columns: 1fr; gap: 2.2rem; }
  .dao figure { order: 0; }
  .luoi-3 { grid-template-columns: 1fr; }
  .luoi-ti { grid-template-columns: repeat(2, 1fr); }
  .luoi-anh { grid-template-columns: repeat(2, 1fr); }
  .bia__so-trong { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .phan { padding: 4.2rem 0; }

  .nut-menu { display: flex; }
  .dinh { background: rgba(11,27,51,.95); backdrop-filter: blur(12px); }
  .dieu-huong {
    position: fixed; inset: 64px 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--dem);
    padding: 1rem 1.25rem 1.6rem;
    border-top: 1px solid rgba(255,255,255,.1);
    transform: translateY(-120%);
    transition: transform var(--nhanh);
    max-height: calc(100svh - 64px); overflow-y: auto;
  }
  .dieu-huong--mo { transform: none; }
  .dieu-huong a { padding: .95rem 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .dieu-huong .nut { margin-top: 1rem; border-bottom: 0; }

  .bia__luoi { padding: 6rem 0 8.5rem; }
  .the-mau { padding: 1.6rem 1.3rem; }
  .bia__nut .nut { flex: 1 1 100%; }

  .luoi-ti { grid-template-columns: 1fr; }
  .cho-anh { padding: 2.6rem 1.2rem; }
  .goi-y-dk { padding: 1.4rem 1.3rem; }
  .goi-y-dk .nut { width: 100%; }
  .anh-the img { height: 280px; }
  .luoi-anh img { height: 200px; }
  .bieu-mau { grid-template-columns: 1fr; padding: 1.5rem; }
  .ban-do iframe { height: 320px; }

  .lien-he-noi { right: .75rem; bottom: .75rem; gap: .45rem; }
  .nut-noi { padding: .72rem 1rem; font-size: .86rem; }
  .chan { padding-bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hien { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Phần bổ sung: phân khu, bảng tính tài chính, hỏi đáp
   ══════════════════════════════════════════════════════════════════ */

/* ── Phân khu ─────────────────────────────────────────────────────── */
.luoi-pk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; margin-top: 2.6rem; }
.pk {
  background: var(--trang); border: 1px solid var(--vien);
  border-radius: var(--bo); padding: 1.8rem 1.5rem;
  border-top: 4px solid var(--dong); transition: var(--nhanh);
}
.pk:hover { transform: translateY(-5px); box-shadow: var(--bong-sau); }
.pk__ten {
  display: inline-block; font-family: 'Playfair Display', serif;
  font-size: 1.6rem; font-weight: 700; color: var(--dong);
  line-height: 1; margin-bottom: .6rem;
}
.pk h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.pk p { margin: 0; font-size: .9rem; color: var(--chu-nhat); }

/* ── Bảng tính tài chính ──────────────────────────────────────────── */
.may-tinh {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 0;
  margin-top: 2.6rem; border-radius: var(--bo); overflow: hidden;
  box-shadow: var(--bong-sau);
}
.may-tinh__nhap { background: var(--trang); padding: 2.2rem; display: grid; gap: 1.5rem; }
.may-tinh__nhap .o label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .88rem; font-weight: 500; color: var(--chu);
}
.may-tinh__nhap output { font-weight: 700; color: var(--dong); font-size: .95rem; }
.may-tinh__nhap input[type="number"] {
  padding: .8rem 1rem; font-size: 1.05rem; font-weight: 600;
  color: var(--chu); background: var(--kem);
  border: 1px solid var(--vien); border-radius: 10px;
}
.may-tinh__nhap input[type="number"]:focus { outline: 0; border-color: var(--dong); background: #fff; }
.may-tinh__nhap input[type="range"] { accent-color: var(--dong); height: 26px; }

.may-tinh__ket {
  background: var(--dem); color: #fff; padding: 2.2rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
}
.kq { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.kq span { font-size: .86rem; color: rgba(255,255,255,.7); }
.kq strong { font-size: 1.1rem; font-weight: 600; white-space: nowrap; }
.kq--chinh {
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding: 1.1rem 0; margin: .3rem 0;
}
.kq--chinh span { color: var(--dong-sang); font-weight: 500; }
.kq--chinh strong { font-size: 1.75rem; color: var(--dong-sang); font-family: 'Playfair Display', serif; }

/* ── Hỏi đáp ──────────────────────────────────────────────────────── */
.hoi { margin-top: 2.4rem; }
.hoi details {
  background: var(--trang); border: 1px solid var(--vien);
  border-radius: var(--bo); margin-bottom: .8rem; overflow: hidden;
}
.hoi details[open] { border-color: var(--dong); box-shadow: var(--bong); }
.hoi summary {
  padding: 1.15rem 3rem 1.15rem 1.4rem; cursor: pointer;
  font-weight: 600; font-size: .98rem; color: var(--dem);
  position: relative; list-style: none;
}
.hoi summary::-webkit-details-marker { display: none; }
.hoi summary::after {
  content: '+'; position: absolute; right: 1.3rem; top: 50%;
  transform: translateY(-50%); font-size: 1.5rem; font-weight: 300;
  color: var(--dong); line-height: 1; transition: var(--nhanh);
}
.hoi details[open] summary::after { content: '−'; }
.hoi summary:hover { background: var(--kem); }
.hoi details p {
  margin: 0; padding: 0 1.4rem 1.3rem; font-size: .93rem;
  color: var(--chu-nhat); line-height: 1.75;
}
.hoi details a { color: var(--dem); font-weight: 600; }

@media (max-width: 980px) {
  .luoi-pk { grid-template-columns: repeat(2, 1fr); }
  .may-tinh { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .luoi-pk { grid-template-columns: 1fr; }
  .may-tinh__nhap, .may-tinh__ket { padding: 1.5rem; }
  .kq--chinh strong { font-size: 1.5rem; }
}

/* ── Sân vận động biểu tượng ──────────────────────────────────────── */
.svd {
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 0;
  margin-top: 2.4rem; border-radius: var(--bo); overflow: hidden;
  box-shadow: var(--bong-sau);
}
.svd__chu { background: var(--dem); color: rgba(255,255,255,.82); padding: 2.4rem; }
.svd__chu h3 { color: #fff; font-size: 1.9rem; margin-bottom: .8rem; }
.svd__chu p { font-size: .96rem; }
.svd__chu strong { color: var(--dong-sang); }
.nhan-tren--toi { color: var(--dong-sang); margin-bottom: .6rem; }
.svd__so-sanh {
  margin: 1.2rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: .9rem; color: rgba(255,255,255,.68);
}
.svd__so {
  background: var(--dong); color: var(--dem); margin: 0;
  padding: 2.4rem 2rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem;
}
.svd__so > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.svd__so dt { font-size: .84rem; opacity: .75; }
.svd__so dd {
  margin: 0; font-weight: 700; font-size: 1.05rem;
  font-family: 'Playfair Display', serif; white-space: nowrap;
}

.the .trang-thai { margin-top: .9rem; }

/* ── Chính sách bán hàng ──────────────────────────────────────────── */
.luoi-cs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 2rem; }
.cs {
  background: var(--trang); border: 1px solid var(--vien);
  border-radius: var(--bo); padding: 1.8rem 1.6rem; transition: var(--nhanh);
}
.cs:hover { transform: translateY(-5px); box-shadow: var(--bong-sau); border-color: var(--dong); }
.cs__muc {
  display: block; font-family: 'Playfair Display', serif;
  font-size: 2.1rem; font-weight: 700; color: var(--dong);
  line-height: 1; margin-bottom: .55rem;
}
.cs h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.cs p { margin: 0; font-size: .9rem; color: var(--chu-nhat); }
/* Gói ưu đãi cao nhất — làm nổi để mắt dừng lại đúng chỗ khách quan tâm. */
.cs__nhan { border-color: var(--dong); box-shadow: 0 0 0 3px rgba(201,162,39,.12); }

@media (max-width: 980px) {
  .svd { grid-template-columns: 1fr; }
  .luoi-cs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .svd__chu, .svd__so { padding: 1.6rem; }
  .svd__chu h3 { font-size: 1.5rem; }
  .luoi-cs { grid-template-columns: 1fr; }
}

/* Dải 760–1180px: nav 10 mục vẫn chật dù đã thu gap. Giấu bớt mục phụ,
   người dùng vẫn tới được qua cuộn trang hoặc menu di động ở dưới 760px. */
@media (max-width: 1180px) and (min-width: 761px) {
  .dieu-huong { gap: .8rem; }
  .dieu-huong a { font-size: .78rem; }
  .dieu-huong a[href="#phan-khu"],
  .dieu-huong a[href="#hoi-dap"] { display: none; }
  .hieu__phu { display: none; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .dieu-huong a[href="#tien-do"],
  .dieu-huong a[href="#chinh-sach"] { display: none; }
}

/* ── Sơ đồ phân khu ───────────────────────────────────────────────── */
.so-do {
  margin: 2.4rem 0 0; padding: 1.6rem;
  background: var(--trang); border: 1px solid var(--vien);
  border-radius: var(--bo); box-shadow: var(--bong);
}
.so-do svg { width: 100%; height: auto; display: block; }
.so-do figcaption {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--vien);
  font-size: .85rem; color: var(--chu-nhat); text-align: center;
}
.so-do figcaption strong { color: var(--dem); }

/* ══════════════════════════════════════════════════════════════════
   Hiệu chỉnh theo nhận diện Vinhomes: nền sáng, serif, vàng in hoa
   ══════════════════════════════════════════════════════════════════ */

/* Các khối trước đây dùng phông sans nay theo serif chung của trang. */
.dieu-huong a, .nut, .nhan-muc, .nhan-tren, .trang-thai, .cho,
.bang-gia thead th, .svd__so dt, .kq span, .hoi summary,
.chan__lien-he span, .mien-tru h2, .bia__so-trong span {
  font-family: 'Lora', Georgia, serif;
}

/* Tiêu đề phụ trong mục: giữ vàng nhưng nhỏ hơn tiêu đề chính. */
.tieu-de--phu { color: var(--dong); font-size: clamp(1.35rem, 2.3vw, 1.85rem); }
.tieu-de--sang { color: #fff; text-transform: uppercase; }

/* Bìa: nhẹ hơn, chữ nổi trên ảnh thay vì phủ tối dày. */
.bia__phu {
  background:
    linear-gradient(180deg, rgba(27,42,91,.74) 0%, rgba(27,42,91,.48) 45%, rgba(27,42,91,.88) 100%),
    linear-gradient(90deg, rgba(27,42,91,.6) 0%, transparent 68%);
}
.bia h1 { text-transform: uppercase; letter-spacing: .015em; font-size: clamp(2.1rem, 5vw, 3.6rem); }
.bia h1 em { font-style: normal; color: var(--dong-sang); }

/* Thẻ: bớt bo góc cho khớp ngôn ngữ vuông vức của Vinhomes. */
.the, .ti, .pk, .cs, .bang-tt, .the-mau, .so-do, .cho-anh,
.anh-the, .luoi-anh figure, .hoi details, .bang-gia {
  border-radius: 3px;
}
.the:hover, .ti:hover, .pk:hover, .cs:hover { transform: translateY(-3px); }

/* Nhãn trạng thái: viền mảnh, in hoa nhỏ — hợp tông hơn nền bo tròn. */
.trang-thai, .cho {
  border-radius: 2px; text-transform: uppercase;
  letter-spacing: .08em; font-size: .68rem;
}

/* Hộp ghi chú: đổi nền kem cho ăn với nền trắng của trang. */
.hop-luu-y { background: var(--kem-dam); border-left-color: var(--dong); border-radius: 0 3px 3px 0; }
.canh-bao { border-radius: 0 3px 3px 0; }

.hieu__ten { letter-spacing: .14em; }
.dieu-huong a:not(.nut) { letter-spacing: .04em; }

/* ══════════════════════════════════════════════════════════════════
   LỚP PHỦ: bám theo giao diện vinhomesolympichanoi.com
   Khác hẳn vinhomes.vn (serif, thoáng, sang) — trang tham chiếu là kiểu
   TRANG THÔNG TIN: sans-serif, chữ dày, tiêu đề navy in hoa căn giữa,
   nút navy vuông, nút liên hệ tròn xếp dọc bên phải.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --dem:       #16305B;
  --dem-nhat:  #1F4078;
  --dong:      #C8A253;
  --dong-sang: #DDBE78;
  --kem:       #FFFFFF;
  --kem-dam:   #F4F6F9;
  --chu:       #233047;
  --chu-nhat:  #5A6680;
  --vien:      #E3E7ED;
}

body,
.dieu-huong a, .nut, .nhan-muc, .nhan-tren, .trang-thai, .cho,
.bang-gia thead th, .svd__so dt, .kq span, .hoi summary,
.chan__lien-he span, .mien-tru h2, .bia__so-trong span {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
body { line-height: 1.8; color: var(--chu); }

/* Tiêu đề: navy, in hoa, ĐẬM, CĂN GIỮA — dấu hiệu nhận dạng rõ nhất. */
h1, h2, h3 { font-family: 'Roboto', system-ui, sans-serif; font-weight: 700; }
.tieu-de {
  color: var(--dem); text-transform: uppercase; text-align: center;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 700;
  letter-spacing: .01em; line-height: 1.35; margin-bottom: 1.6rem;
}
.tieu-de--phu { color: var(--dem); font-size: clamp(1.1rem, 2vw, 1.4rem); }
.tieu-de--sang { color: #fff; }
.nhan-muc {
  color: var(--dong); text-align: center; font-weight: 700;
  font-size: .72rem; letter-spacing: .18em;
}
.nhan-muc--sang { color: var(--dong-sang); }
.dan--giua { margin-left: auto; margin-right: auto; text-align: center; }

/* Nút: navy đặc, in hoa, nhỏ, gần vuông. */
.nut {
  background: var(--dem); border-color: var(--dem); color: #fff;
  border-radius: 3px; padding: .85rem 1.8rem; font-size: .78rem; letter-spacing: .1em;
}
.nut:hover { background: var(--dong); border-color: var(--dong); color: #fff; }
.nut--vien { background: transparent; border-color: rgba(255,255,255,.6); }
.nut--vien:hover { background: #fff; border-color: #fff; color: var(--dem); }

/* Bìa: khối navy mờ đặt trên ảnh, giống khung tiêu đề của trang tham chiếu. */
.bia__chu {
  background: rgba(22, 48, 91, .82);
  padding: 2.4rem 2.2rem; border-radius: 4px;
  border-left: 4px solid var(--dong);
}
.bia h1 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.3; letter-spacing: 0; }
.bia h1 em { color: var(--dong-sang); }
.bia__dan { font-size: 1rem; }
.bia__phu {
  background: linear-gradient(180deg, rgba(22,48,91,.42) 0%, rgba(22,48,91,.3) 50%, rgba(22,48,91,.75) 100%);
}

/* Thẻ: tiêu đề căn giữa, phụ đề vàng in hoa — đúng kiểu thẻ sản phẩm của họ. */
.the h3, .ti h3, .pk h3, .cs h3 { text-align: center; text-transform: uppercase; font-size: .98rem; color: var(--dem); }
.the p, .ti p, .pk p, .cs p { text-align: center; }
.ti__bieu, .cs__muc, .pk__ten { margin-left: auto; margin-right: auto; }
.cs__muc, .pk__ten { display: block; text-align: center; color: var(--dong); }
.trang-thai { margin-left: auto; margin-right: auto; align-self: center; }

/* Nút liên hệ nổi: TRÒN, xếp DỌC ở mép phải. */
.lien-he-noi { flex-direction: column; right: .9rem; bottom: auto; top: 50%; transform: translateY(-50%); gap: .55rem; }
.lien-he-noi--hien { transform: translateY(-50%); }
.nut-noi { width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; }
.nut-noi span { display: none; }
.nut-noi svg { width: 22px; height: 22px; }
.nut-noi--goi { background: var(--dong); color: #fff; }
.nut-noi:hover { transform: scale(1.08); }

@media (max-width: 760px) {
  .lien-he-noi { top: auto; bottom: .8rem; transform: none; flex-direction: row; }
  .lien-he-noi--hien { transform: none; }
  .nut-noi { width: 44px; height: 44px; }
}

/* ── Header trắng + logo Vinhomes chính chủ ───────────────────────────
   Dùng được vì chủ trang là đại lý phân phối chính thức (khách xác nhận
   23/10/2026). Nếu sau này không còn là đại lý, PHẢI gỡ logo xuống. */
.dinh { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08); padding: .5rem 0; }
.dinh--dinh { background: #fff; box-shadow: 0 2px 16px rgba(22,48,91,.12); backdrop-filter: none; }

.hieu { display: flex; align-items: center; gap: .85rem; }
.hieu__logo { height: 40px; width: auto; display: block; }
.hieu__chu { display: block; border-left: 1px solid var(--vien); padding-left: .85rem; line-height: 1.25; }
.hieu__ten { color: var(--dem); font-size: 1rem; font-weight: 700; letter-spacing: .13em; }
.hieu__phu { color: var(--chu-nhat); font-size: .62rem; letter-spacing: .1em; }

/* Chữ điều hướng đổi sang navy cho hợp nền trắng. */
.dieu-huong a { color: var(--dem); font-weight: 500; }
.dieu-huong a:not(.nut):hover { color: var(--dong); }
.dieu-huong a:not(.nut)::after { background: var(--dong); }
.nut-menu span { background: var(--dem); }

/* Bìa bị header trắng che mất phần trên — đẩy nội dung xuống. */
.bia__luoi { padding-top: 9.5rem; }

@media (max-width: 1180px) and (min-width: 761px) {
  .hieu__chu { display: none; }
}
@media (max-width: 760px) {
  .dinh { background: #fff; }
  .dieu-huong {
    background: #fff; border-top: 1px solid var(--vien);
    inset: 60px 0 auto;
  }
  .dieu-huong a { border-bottom-color: var(--vien); }
  .hieu__logo { height: 34px; }
  .hieu__chu { display: none; }
  .bia__luoi { padding-top: 7.5rem; }
}

/* ── Nút Zalo: chữ thay cho SVG ───────────────────────────────────────
   SVG vẽ chữ "Zalo" ở cỡ 5px thì không ai đọc nổi (khách báo 23/10).
   Dùng text thật, đậm, đủ lớn trong vòng tròn. */
.chu-zalo {
  display: block !important; color: #fff;
  font-weight: 700; font-size: .82rem; letter-spacing: .01em; line-height: 1;
}
.nut-noi--zalo { background: #0068FF; }
.nut-noi { width: 52px; height: 52px; }
.nut-noi--goi svg { width: 23px; height: 23px; }

/* Phối cảnh quy hoạch thay sơ đồ tự vẽ: bỏ nền gạch chéo, để ảnh tự nói. */
.so-do { padding: 0; border: 1px solid var(--vien); overflow: hidden; }
.so-do img { width: 100%; height: auto; display: block; }

/* Bỏ nhãn trên ảnh — giờ toàn bộ là phối cảnh thật. */
.anh-the figcaption, .luoi-anh figcaption { display: none; }
.anh-the img { height: auto; max-height: 460px; object-fit: cover; }

/* ══════════════════════════════════════════════════════════════════
   LAM SANG TRANG (khach phan hoi 23/10: "web toi qua, lam sang len,
   it chu thoi, them nhieu hinh anh")
   ══════════════════════════════════════════════════════════════════ */

/* Bia: giam man phu toi de nhin ro phoi canh ben duoi. */
.bia__phu {
  background: linear-gradient(180deg, rgba(22,48,91,.30) 0%, rgba(22,48,91,.18) 45%, rgba(22,48,91,.58) 100%);
}
.bia__chu { background: rgba(22,48,91,.72); }

/* Muc dang ky: tu nen navy dac -> nen kem sang. */
.phan--dam { background: var(--kem-dam); color: var(--chu); }
.phan--dam .tieu-de, .tieu-de--sang { color: var(--dem); }
.nhan-muc--sang { color: var(--dong); }
.dan--sang { color: var(--chu-nhat); }
.bieu-mau {
  background: #fff; border: 1px solid var(--vien);
  box-shadow: var(--bong);
}
.bieu-mau .o label { color: var(--chu); }
.bieu-mau .o label span { color: #C0392B; }
.bieu-mau .o input, .bieu-mau .o select, .bieu-mau .o textarea {
  background: var(--kem-dam); color: var(--chu); border-color: var(--vien);
}
.bieu-mau .o input::placeholder, .bieu-mau .o textarea::placeholder { color: #9AA3B2; }
.bieu-mau .o input:focus, .bieu-mau .o select:focus, .bieu-mau .o textarea:focus {
  background: #fff; border-color: var(--dong);
}
.bieu-mau .dong-y span { color: var(--chu-nhat); }
.bieu-mau .loi { color: #C0392B; }
.bieu-mau .ket-qua--ok { color: #1E7A4C; }
.bieu-mau .ket-qua--loi { color: #C0392B; }

/* Khoi sân vận động: nen sang, chu navy. */
.svd__chu { background: var(--kem-dam); color: var(--chu); }
.svd__chu h3 { color: var(--dem); }
.svd__chu strong { color: var(--dong); }
.nhan-tren--toi { color: var(--dong); }
.svd__so-sanh { border-top-color: var(--vien); color: var(--chu-nhat); }

/* Bang tinh: khoi ket qua doi sang nen trang vien vang. */
.may-tinh__ket { background: #fff; color: var(--chu); border-left: 3px solid var(--dong); }
.kq span { color: var(--chu-nhat); }
.kq strong { color: var(--dem); }
.kq--chinh { border-color: var(--vien); }
.kq--chinh span { color: var(--dong); }
.kq--chinh strong { color: var(--dem); }

/* Khoi CTA: bot dam, dung vien vang thay vi nen navy dac. */
.goi-y-dk { background: var(--kem-dam); color: var(--chu); border-left: 3px solid var(--dong); }
.goi-y-dk h3 { color: var(--dem); }
.goi-y-dk p { color: var(--chu-nhat); }

/* ── The san pham co anh ──────────────────────────────────────────── */
.luoi-sp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.2rem; }
.sp {
  background: #fff; border: 1px solid var(--vien); border-radius: 3px;
  overflow: hidden; transition: var(--nhanh); display: flex; flex-direction: column;
}
.sp:hover { transform: translateY(-4px); box-shadow: var(--bong-sau); border-color: var(--dong); }
.sp img { width: 100%; height: 220px; object-fit: cover; display: block; }
.sp__chu { padding: 1.4rem 1.4rem 1.6rem; text-align: center; }
.sp h3 { font-size: 1.1rem; text-transform: uppercase; color: var(--dem); margin-bottom: .3rem; }
.sp__dt { color: var(--dong); font-weight: 700; font-size: .95rem; margin-bottom: .5rem; }
.sp p { font-size: .9rem; color: var(--chu-nhat); margin: 0; }

/* Anh to hon mot chut cho trang nhieu hinh. */
.anh-the img { max-height: 420px; }
.luoi-anh img { height: 260px; }

@media (max-width: 980px) { .luoi-sp { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .luoi-sp { grid-template-columns: 1fr; } .sp img { height: 200px; } }