/* ============================================================
   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;
  --bo-tron: 14px;
  --bong: 0 10px 30px rgba(4, 32, 69, .10);
  --bong-to: 0 18px 50px rgba(4, 32, 69, .18);
}
* { 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 { font-family: 'Dancing Script', cursive; color: var(--gold); font-size: 1.6rem; }
h1, h2, h3 { color: var(--navy); line-height: 1.25; }
.tieu-de-muc { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 800; margin: 6px 0 14px; }
.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: 999px;
  font-size: 1.02rem; font-weight: 700; cursor: pointer; border: 0;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nut:active { transform: scale(.97); }
.nut-vang { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: var(--navy); box-shadow: 0 8px 22px rgba(225, 156, 9, .35); }
.nut-vang:hover { box-shadow: 0 12px 30px rgba(225, 156, 9, .5); transform: translateY(-2px); }
.nut-vien { background: rgba(255,255,255,.08); color: var(--trang); border: 2px solid rgba(255,255,255,.65); backdrop-filter: blur(4px); }
.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); }
#manChao .dong-chao { font-family: 'Dancing Script', cursive; color: var(--gold-soft); font-size: 1.3rem; }

/* ---------- 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); }
.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: 64px; right: 0; width: min(320px, 85vw); height: calc(100vh - 64px);
    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 ---------- */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-800) 55%, #1b5a9e 100%);
  overflow: hidden; color: var(--trang); padding: 110px 0 70px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(225,156,9,.22), transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 85%, rgba(5,110,233,.25), transparent 60%);
}
.hero .song { position: absolute; bottom: -2px; left: 0; right: 0; }
.hero-trong { position: relative; z-index: 2; max-width: 850px; }
.hero h1 { color: var(--trang); font-size: clamp(1.9rem, 4.6vw, 3.2rem); font-weight: 900; 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 { position: absolute; z-index: 2; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); border-radius: 12px; padding: 12px 18px; color: var(--trang); font-weight: 700; animation: troi 5s ease-in-out infinite; }
.the-noi small { display: block; font-weight: 400; color: #cfe0f5; }
@keyframes troi { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------- số liệu đếm ---------- */
.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); }
.o-so .ten { font-size: .88rem; color: #cfe0f5; }

/* ---------- mục 01-05 giới thiệu ---------- */
.muc { padding: 76px 0; }
.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); }
.day-diem { display: flex; flex-direction: column; gap: 16px; max-width: 860px; margin: 0 auto; }
.diem {
  display: flex; gap: 22px; align-items: flex-start; background: var(--trang);
  border: 1px solid var(--xam-200); border-radius: var(--bo-tron); padding: 24px 26px;
  box-shadow: var(--bong); transition: transform .25s ease, box-shadow .25s ease;
}
.diem:hover { transform: translateY(-4px); box-shadow: var(--bong-to); }
.diem .stt {
  font-size: 2rem; font-weight: 900; color: transparent;
  -webkit-text-stroke: 2px var(--gold); min-width: 58px; line-height: 1;
  padding-top: 4px;
}
.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; }
.the {
  background: var(--trang); border-radius: var(--bo-tron); padding: 28px;
  border: 1px solid var(--xam-200); box-shadow: var(--bong);
  transition: transform .25s ease, box-shadow .25s ease;
}
.the:hover { transform: translateY(-6px); box-shadow: var(--bong-to); }
.the .bieu-tuong { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 16px; }
.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; }

/* ---------- xu thế 2026 ---------- */
.the-xu-the .nhan-to { font-size: 1.5rem; font-weight: 900; color: var(--gold); margin-bottom: 6px; }

/* ---------- thẻ dự án ---------- */
.luoi-du-an { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.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); }
.the-du-an .anh { position: relative; height: 200px; overflow: hidden; }
.the-du-an .anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.the-du-an:hover .anh img { transform: scale(1.07); }
.the-du-an .anh-chu {
  height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(135deg, var(--navy), var(--navy-700));
  color: var(--trang); text-align: center; padding: 0 16px;
}
.the-du-an .anh-chu .ten-to { font-weight: 900; font-size: 1.3rem; letter-spacing: .5px; color: var(--gold-soft); }
.nhan-loai {
  position: absolute; top: 12px; left: 12px; background: var(--navy); color: var(--trang);
  font-size: .74rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; letter-spacing: .4px;
}
.nhan-loai.thap { background: var(--gold); color: var(--navy); }
.nhan-trangthai { position: absolute; top: 12px; right: 12px; background: rgba(228,11,11,.92); color: #fff; font-size: .74rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.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; }

/* ---------- 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: 64px; }
.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); font-weight: 900; }
.hero-duan .lot { color: #d7e2f2; max-width: 640px; margin-top: 8px; }
.thanh-tab {
  position: sticky; top: 64px; 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); }

/* ---------- 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; }

/* ---------- đối tác ---------- */
.bang-doi-tac { display: flex; gap: 16px; overflow: hidden; position: relative; }
.doan-doi-tac { display: flex; gap: 16px; animation: chay-ngang 26s linear infinite; }
.bang-doi-tac:hover .doan-doi-tac { animation-play-state: paused; }
@keyframes chay-ngang { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.o-doi-tac {
  min-width: 190px; height: 74px; display: flex; align-items: center; justify-content: center;
  background: var(--trang); border: 1px solid var(--xam-200); border-radius: 12px;
  font-weight: 800; color: var(--navy); font-size: 1.05rem; box-shadow: var(--bong);
}
.o-doi-tac span { color: var(--gold); margin-right: 5px; }

/* ---------- 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 ---------- */
.hien-dan { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.hien-dan.da-hien { opacity: 1; transform: none; }
.hien-dan.tre-1 { transition-delay: .12s; }
.hien-dan.tre-2 { transition-delay: .24s; }
.hien-dan.tre-3 { transition-delay: .36s; }

/* ---------- 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); }