/* ==========================================================================
   Hồng Ân Capital — giao diện chính
   Bảng màu: navy sâu + vàng đồng. Mọi cặp chữ/nền đã đo tương phản ≥ 4.5:1
   (chữ vàng trên nền sáng dùng --gold-chu, KHÔNG dùng --gold).
   ========================================================================== */

:root {
  --ink:        #0B1B2B;
  --ink-2:      #12293F;
  --ink-3:      #1C3A56;
  --gold:       #C8A44D;   /* chỉ dùng trên nền tối, hoặc làm NỀN nút (chữ navy) */
  --gold-sang:  #E3C883;
  --gold-chu:   #7A5F28;   /* màu chữ vàng trên nền sáng — 5.47:1 trên nền kem */
  --kem:        #F7F4EE;
  --kem-2:      #EFE9DF;
  --trang:      #FFFFFF;
  --chu:        #16212D;
  --chu-nhat:   #5A6672;
  --vien:       #E4DED3;

  --font-tieu-de: 'Playfair Display', Georgia, serif;
  --font-than:    'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --khung:   1280px;
  --khung-rong: 1560px;
  --le:      clamp(16px, 4vw, 40px);

  --r-nho:  6px;
  --r-vua:  12px;
  --r-lon:  20px;

  --bong-1: 0 2px 10px rgba(11, 27, 43, .06);
  --bong-2: 0 14px 40px rgba(11, 27, 43, .10);
  --bong-3: 0 30px 70px rgba(11, 27, 43, .18);

  --nhip:   .55s cubic-bezier(.22, 1, .36, 1);
  --nhip-nhanh: .3s cubic-bezier(.22, 1, .36, 1);

  --cao-header: 84px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cao-header) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-than);
  font-size: 17px;
  line-height: 1.7;
  color: var(--chu);
  background: var(--trang);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-tieu-de);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.12rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* ---------------------------------------------------------------- Khung */
.khung { width: min(var(--khung), 100% - var(--le) * 2); margin-inline: auto; }
.khung-rong { width: min(var(--khung-rong), 100% - var(--le) * 2); margin-inline: auto; }
.khung-hep { width: min(820px, 100% - var(--le) * 2); margin-inline: auto; }

.doan { padding-block: clamp(64px, 8vw, 118px); }
.doan--kem  { background: var(--kem); }
.doan--toi  { background: var(--ink); color: #E8EDF2; }
.doan--toi h2, .doan--toi h3 { color: #fff; }
.doan--mong { padding-block: clamp(44px, 5vw, 72px); }

/* Nhãn nhỏ trên tiêu đề khối: chỉ dùng khi nó nói thêm điều gì đó,
   không lặp lại chính tiêu đề bên dưới. */
/* KHÔNG giới hạn bề ngang ở cả cụm đầu khối: làm vậy là ép luôn TIÊU ĐỀ xuống
   dòng giữa màn hình rộng thênh thang ("… chọn Minh Phú / Land"). Giới hạn chỉ
   có ý nghĩa với đoạn văn — dòng chữ quá dài mới khó đọc, tiêu đề thì không. */
.doan__dau { margin-bottom: clamp(32px, 4vw, 56px); }
.doan__dau--giua { text-align: center; }
.doan__dau h2 { text-wrap: balance; }   /* buộc phải xuống dòng thì chia cân đối */
.doan__mo-ta {
  color: var(--chu-nhat); font-size: 1.05rem; margin-top: -.2em;
  max-width: 68ch;                       /* giới hạn nằm ở ĐÂY */
}
.doan__dau--giua .doan__mo-ta { margin-inline: auto; }
.doan--toi .doan__mo-ta { color: #AEBCC9; }

.gach-vang {
  width: 56px; height: 3px; background: var(--gold); border: 0; margin: 0 0 22px;
}
.doan__dau--giua .gach-vang { margin-inline: auto; }

/* ---------------------------------------------------------------- Nút */
.nut {
  --nut-nen: var(--gold);
  --nut-chu: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  background: var(--nut-nen);
  color: var(--nut-chu);
  font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;      /* không bao giờ bẻ đôi nhãn nút */
  position: relative; overflow: hidden;
  transition: transform var(--nhip-nhanh), box-shadow var(--nhip-nhanh), background var(--nhip-nhanh), color var(--nhip-nhanh);
}
.nut:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200, 164, 77, .34); }
.nut:active { transform: translateY(0); }
.nut svg { width: 18px; height: 18px; flex: 0 0 auto; }

.nut--vien { --nut-nen: transparent; --nut-chu: var(--ink); border-color: rgba(11, 27, 43, .28); }
.nut--vien:hover { --nut-nen: var(--ink); --nut-chu: #fff; box-shadow: var(--bong-2); }

.nut--vien-sang { --nut-nen: transparent; --nut-chu: #fff; border-color: rgba(255, 255, 255, .5); }
.nut--vien-sang:hover { --nut-nen: #fff; --nut-chu: var(--ink); box-shadow: 0 12px 30px rgba(0,0,0,.28); }

.nut--toi { --nut-nen: var(--ink); --nut-chu: #fff; }
.nut--toi:hover { box-shadow: 0 12px 28px rgba(11, 27, 43, .3); }

.nut--nho { padding: 11px 22px; font-size: .9rem; }
.nut--rong { width: 100%; }

/* Liên kết dạng "Xem thêm →" */
.lien-ket {
  display: inline-flex; align-items: center; gap: 9px;
  white-space: nowrap;      /* "Xem dự án →" phải nằm trọn một dòng */
  font-weight: 600; color: var(--gold-chu);
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  transition: gap var(--nhip-nhanh), color var(--nhip-nhanh);
}
.lien-ket:hover { gap: 15px; color: var(--ink); }
.doan--toi .lien-ket, .lien-ket--sang { color: var(--gold); }
.doan--toi .lien-ket:hover, .lien-ket--sang:hover { color: #fff; }

/* ------------------------------------------------- Hiệu ứng hiện khi cuộn
   Trạng thái ẩn CHỈ áp dụng khi JS đã chạy (class .js do script trong <head> gắn).
   Không có chốt này, JS lỗi là cả trang trắng trơn mà không báo gì. */
.js [data-hien] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--tre, 0ms);
  will-change: opacity, transform;
}
.js [data-hien="trai"]  { transform: translate3d(-40px, 0, 0); }
.js [data-hien="phai"]  { transform: translate3d(40px, 0, 0); }
.js [data-hien="mo"]    { transform: none; }
.js [data-hien="to"]    { transform: scale(.94); }
.js [data-hien].da-hien { opacity: 1; transform: translate3d(0, 0, 0); }

/* Ảnh lộ dần sau tấm màn vàng */
.man { position: relative; overflow: hidden; }
.js .man::after {
  content: ''; position: absolute; inset: 0; background: var(--gold);
  transform: scaleX(1); transform-origin: right center;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1);
  transition-delay: var(--tre, 0ms);
  z-index: 2;
}
.js .man.da-hien::after { transform: scaleX(0); }
.js .man img { transform: scale(1.14); transition: transform 1.5s cubic-bezier(.22, 1, .36, 1); }
.js .man.da-hien img { transform: scale(1); }

/* Tiêu đề hiện theo từng dòng chữ */
.js .chu-dong { display: block; overflow: hidden; }
.js .chu-dong > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--tre, 0ms);
}
.js .da-hien .chu-dong > span, .js .chu-dong.da-hien > span { transform: translateY(0); }

/* --- Nội dung ngay đầu trang: hiện bằng CSS, KHÔNG chờ JavaScript ---
   Khối hero nằm sẵn trong khung nhìn nên không có lý do gì phải đợi
   IntersectionObserver. Trên máy khách tải trang lần đầu (chưa có bộ nhớ đệm,
   phải tải font và ảnh nền), JS chạy muộn tới vài giây — trong khoảng đó khách
   nhìn thấy một khối hero TRỐNG TRƠN. Dùng animation CSS thì chữ hiện ngay từ
   khung hình đầu tiên, JS hỏng cũng không ảnh hưởng. */
@keyframes ha-vao-cho {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
.js .hero [data-hien],
.js .hero-trong [data-hien],
.js .da-tt[data-hien] {
  animation: ha-vao-cho .8s cubic-bezier(.22, 1, .36, 1) var(--tre, 0ms) both;
  transition: none;
}

/* Ai bật "giảm chuyển động" thì trả mọi thứ về đúng chỗ — chỉ tắt transition là
   phần tử kẹt vĩnh viễn ngoài màn hình. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-hien],
  .js [data-hien].da-hien,
  .js .chu-dong > span,
  .js .man img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .man::after { display: none !important; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ================================================================ Header */
.header {
  position: fixed; inset: 0 0 auto; z-index: 900;
  height: var(--cao-header);
  display: flex; align-items: center;
  transition: background var(--nhip), box-shadow var(--nhip), height var(--nhip);
}
.header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 27, 43, .72) 0%, rgba(11, 27, 43, 0) 100%);
  opacity: 1; transition: opacity var(--nhip);
}
.header.dinh {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--vien), 0 8px 30px rgba(11, 27, 43, .08);
  height: 70px;
}
.header.dinh::before { opacity: 0; }
.header.an { transform: translateY(-100%); }
.header { transition: transform var(--nhip), background var(--nhip), box-shadow var(--nhip), height var(--nhip); }

.header__trong {
  display: flex; align-items: center; gap: 24px; width: 100%;
  justify-content: space-between;     /* logo trái · menu giữa · nút phải */
}

.logo { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.logo img { max-height: 52px; width: auto; transition: max-height var(--nhip); }
.header.dinh .logo img { max-height: 44px; }
.logo__chu { display: grid; line-height: 1.1; }
.logo__ten { font-family: var(--font-tieu-de); font-size: 1.32rem; font-weight: 700; color: #fff; transition: color var(--nhip); }
.logo__phu { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-sang); transition: color var(--nhip); }
.header.dinh .logo__ten { color: var(--ink); }
.header.dinh .logo__phu { color: var(--gold-chu); }
body:not(.trang-chu) .header:not(.dinh) .logo__ten { color: #fff; }

/* --- Menu chính --- */
.menu-chinh { margin-inline: auto; min-width: 0; }   /* căn giữa thay vì dồn sang phải */
.menu-chinh ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.menu-chinh li { position: relative; }
.menu-chinh a {
  display: block; padding: 10px 15px;
  font-size: .95rem; font-weight: 500; color: #fff;
  border-radius: 999px;
  transition: color var(--nhip-nhanh), background var(--nhip-nhanh);
  position: relative;
}
.menu-chinh a::after {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--nhip-nhanh);
}
.menu-chinh a:hover::after,
.menu-chinh .current-menu-item > a::after,
.menu-chinh .current_page_parent > a::after,
.menu-chinh .current-menu-parent > a::after { transform: scaleX(1); }
.header.dinh .menu-chinh a { color: var(--ink); }

/* Menu con */
.menu-chinh ul ul {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 5;
  display: block; min-width: 260px; padding: 10px;
  background: #fff; border-radius: var(--r-vua); box-shadow: var(--bong-3);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--nhip-nhanh), transform var(--nhip-nhanh), visibility var(--nhip-nhanh);
}
.menu-chinh li:hover > ul, .menu-chinh li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-chinh ul ul a { color: var(--ink) !important; padding: 10px 14px; border-radius: var(--r-nho); font-weight: 500; }
.menu-chinh ul ul a:hover { background: var(--kem); }
.menu-chinh ul ul a::after { display: none; }

.header__nut { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.header__dt {
  display: inline-flex; align-items: center; gap: 9px;
  white-space: nowrap; flex: 0 0 auto;   /* số điện thoại bị bẻ thành 3 dòng
                                            khi thanh đầu trang hết chỗ */
  font-weight: 600; color: #fff; font-size: .95rem;
  padding: 9px 16px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  transition: all var(--nhip-nhanh);
}
.header__dt svg {
  width: 18px; height: 18px;
  flex: 0 0 auto;     /* BẮT BUỘC: <svg> là flex item, khai mỗi width vẫn bị co
                         về 0 khi thanh đầu trang chật — icon biến mất không dấu vết */
}
.header__dt:hover { background: #fff; color: var(--ink); border-color: #fff; }
.header.dinh .header__dt { color: var(--ink); border-color: rgba(11,27,43,.25); }
.header.dinh .header__dt:hover { background: var(--ink); color: #fff; }

/* --- Nút mở menu trên điện thoại --- */
.nut-menu {
  display: none; width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 50%;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.header.dinh .nut-menu { border-color: rgba(11,27,43,.25); }
.nut-menu span { display: block; width: 18px; height: 2px; background: #fff; transition: transform var(--nhip-nhanh), opacity var(--nhip-nhanh); }
.header.dinh .nut-menu span { background: var(--ink); }
.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); }

/* --- Ngăn kéo menu điện thoại --- */
.ngan-keo {
  position: fixed; inset: 0 0 0 auto; z-index: 950;
  width: min(400px, 88vw);
  background: var(--ink); color: #fff;
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  display: flex; flex-direction: column;
  padding: 26px 24px calc(26px + env(safe-area-inset-bottom));
  overflow-y: auto; overflow-x: hidden;
}
.ngan-keo.mo { transform: translateX(0); }
.ngan-keo__phu {
  position: fixed; inset: 0; z-index: 940; background: rgba(6, 15, 25, .6);
  opacity: 0; visibility: hidden; transition: opacity var(--nhip), visibility var(--nhip);
  backdrop-filter: blur(3px);
}
.ngan-keo__phu.mo { opacity: 1; visibility: visible; }
.ngan-keo__dong {
  align-self: flex-end; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 0; color: #fff; font-size: 22px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.ngan-keo ul { list-style: none; margin: 18px 0 0; padding: 0; }
.ngan-keo > ul > li { border-bottom: 1px solid rgba(255,255,255,.1); }
.ngan-keo a {
  display: block; padding: 15px 4px; min-height: 48px;
  font-size: 1.06rem; font-weight: 500; color: #fff;
  transition: color var(--nhip-nhanh), padding-left var(--nhip-nhanh);
}
.ngan-keo a:hover, .ngan-keo .current-menu-item > a { color: var(--gold); padding-left: 10px; }
.ngan-keo ul ul { margin: 0 0 10px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.14); }
.ngan-keo ul ul a { font-size: .96rem; padding: 10px 4px; color: #B9C6D2; }
.ngan-keo__lh { margin-top: auto; padding-top: 26px; display: grid; gap: 10px; }
.ngan-keo__lh a { padding: 0; }

/* ================================================================== Hero */
.hero {
  position: relative; min-height: min(100svh, 940px);
  display: flex; align-items: flex-end;
  padding-top: var(--cao-header); padding-bottom: clamp(56px, 8vh, 110px);
  color: #fff; overflow: hidden; background: var(--ink);
}
.hero__nen { position: absolute; inset: 0; z-index: 0; }
.hero__anh {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.6s ease;
  will-change: opacity, transform;
}
.hero__anh.dang-xem { opacity: 1; }
.hero__anh img, .hero__anh video {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(1.08) saturate(1.06);   /* phối cảnh ban ngày sáng rõ hơn */
}
.hero__anh.dang-xem img { animation: ken-burns 11s ease-out forwards; }
@keyframes ken-burns { from { transform: scale(1.02); } to { transform: scale(1.13); } }

/* Lớp phủ chỉ tối ở dải BÊN TRÁI (nơi đặt chữ) và mép dưới. Phủ đều cả ảnh thì
   phối cảnh ban ngày thành xám xịt — khách vừa mở trang đã thấy một mảng tối. */
.hero__phu {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* Dải trái đậm hẳn để chữ trắng đọc được trên phối cảnh ban ngày; từ 55%
       trở đi nhạt dần để ảnh giữ được độ sáng thật. */
    /* Vệt tối bám sát khối chữ (tắt hẳn ở 72%) — bù lại ảnh nền được làm sáng
       lên, nên tổng thể sáng hơn hẳn mà chữ vẫn đo được trên 4,5:1. */
    linear-gradient(90deg, rgba(8, 19, 31, .92) 0%, rgba(8, 19, 31, .86) 26%, rgba(8, 19, 31, .6) 44%, rgba(8, 19, 31, .16) 60%, rgba(8, 19, 31, 0) 72%),
    linear-gradient(180deg, rgba(8, 19, 31, .28) 0%, rgba(8, 19, 31, 0) 20%, rgba(8, 19, 31, 0) 64%, rgba(8, 19, 31, .34) 100%);
}
.hero__trong { position: relative; z-index: 2; }   /* KHÔNG khai width ở đây:
   phần tử này mang cả class .khung-rong, khai lại width là xoá mất lề của khung
   và chữ dính sát mép trái màn hình. */
.hero__nhan {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .76rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-sang); font-weight: 600; margin-bottom: 18px;
}
.hero__nhan::before { content: ''; width: 40px; height: 1px; background: var(--gold); }
.hero__nhan { text-shadow: 0 1px 8px rgba(8, 19, 31, .9); }
.hero h1 {
  color: #fff; max-width: 20ch; margin-bottom: .34em;
  text-wrap: balance;
  /* Bóng chữ gánh phần việc mà lớp phủ vừa nhả ra: nó chỉ tối quanh nét chữ,
     không làm xám cả tấm ảnh phía sau. */
  text-shadow: 0 2px 10px rgba(8, 19, 31, .9), 0 1px 28px rgba(8, 19, 31, .7);
}
.hero__mo-ta {
  max-width: 48ch; font-size: clamp(1rem, 1.4vw, 1.15rem); color: #EEF3F8;
  text-shadow: 0 1px 6px rgba(8, 19, 31, .95), 0 1px 18px rgba(8, 19, 31, .75);
}
.hero__nut { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Số liệu dưới hero */
.hero__so {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; margin-top: clamp(40px, 6vh, 70px);
  background: rgba(255,255,255,.16); border-radius: var(--r-vua); overflow: hidden;
}
.hero__so > div { background: rgba(11, 27, 43, .55); backdrop-filter: blur(8px); padding: 22px 24px; }
.hero__so b { display: block; font-family: var(--font-tieu-de); font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--gold-sang); line-height: 1; }
.hero__so span { font-size: .86rem; color: #C4D0DB; letter-spacing: .04em; }

/* Mũi tên gợi ý cuộn */
.hero__cuon {
  position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 6px; color: rgba(255,255,255,.7); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase;
}
.hero__cuon i { display: block; width: 1px; height: 42px; background: linear-gradient(180deg, var(--gold), transparent); animation: chay-xuong 2.2s ease-in-out infinite; }
@keyframes chay-xuong { 0%, 100% { transform: scaleY(.3); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* Chấm chuyển ảnh hero */
.hero__cham { position: absolute; right: var(--le); bottom: 26px; z-index: 3; display: flex; gap: 10px; }
.hero__cham button {
  width: 34px; height: 3px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(255,255,255,.35); transition: background var(--nhip-nhanh);
}
.hero__cham button[aria-current="true"] { background: var(--gold); }

/* Hero gọn cho trang trong */
.hero-trong {
  position: relative; min-height: clamp(340px, 46vh, 520px);
  display: flex; align-items: flex-end; padding-top: var(--cao-header); padding-bottom: 54px;
  background: var(--ink); color: #fff; overflow: hidden;
}
.hero-trong__anh { position: absolute; inset: 0; z-index: 0; }
.hero-trong__anh img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.hero-trong::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(8,19,31,.85) 0%, rgba(8,19,31,.5) 42%, rgba(8,19,31,.1) 78%),
    linear-gradient(180deg, rgba(8,19,31,.45) 0%, rgba(8,19,31,.05) 40%, rgba(8,19,31,.72) 100%);
}
.hero-trong__trong { position: relative; z-index: 2; }
.hero-trong h1 { color: #fff; margin-bottom: .2em; }
.hero-trong p { color: #C9D5E0; max-width: 62ch; }

/* Đường dẫn phân cấp */
.duong-dan { font-size: .85rem; color: rgba(255,255,255,.72); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.duong-dan a { color: rgba(255,255,255,.72); transition: color var(--nhip-nhanh); }
.duong-dan a:hover { color: var(--gold); }
.duong-dan span[aria-hidden] { opacity: .5; }
.duong-dan--toi { color: var(--chu-nhat); }
.duong-dan--toi a { color: var(--chu-nhat); }
.duong-dan--toi a:hover { color: var(--gold-chu); }

/* ================================================================== Thẻ */
.luoi { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.luoi--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.luoi--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.luoi--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.luoi > * { min-width: 0; }

.the {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border-radius: var(--r-lon); overflow: hidden;
  border: 1px solid var(--vien);
  transition: transform var(--nhip), box-shadow var(--nhip), border-color var(--nhip);
}
.the:hover { transform: translateY(-6px); box-shadow: var(--bong-3); border-color: transparent; }
.the__anh { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--kem-2); }
.the__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.the:hover .the__anh img { transform: scale(1.07); }
.the__than { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1 1 auto; gap: 12px; }
.the__ten { font-size: 1.3rem; margin: 0; transition: color var(--nhip-nhanh); }
.the:hover .the__ten { color: var(--gold-chu); }
.the__mo-ta { color: var(--chu-nhat); font-size: .97rem; margin: 0; }
.the__chan {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;      /* thà xuống dòng cả cụm còn hơn bóp nát chữ trong cụm */
}

/* --- Nút hành động của thẻ ---
   Không để link gạch chân trần: trên một thẻ sản phẩm, đây là chỗ mắt người
   dừng lại cuối cùng và là chỗ quyết định có bấm hay không. */
.nut-the {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 20px;
  background: var(--kem); color: var(--ink);
  font-weight: 600; font-size: .93rem; white-space: nowrap;
  border: 1px solid var(--vien); border-radius: 999px;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color var(--nhip-nhanh), border-color var(--nhip-nhanh), box-shadow var(--nhip-nhanh);
}
/* Nền vàng trượt từ trái sang khi rê vào. Dùng phần tử giả để chuyển động chạy
   trên compositor thay vì vẽ lại cả thẻ. */
.nut-the::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-sang) 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.nut-the__mui {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: #fff; color: var(--ink);
  transition: transform var(--nhip-nhanh), background var(--nhip-nhanh), color var(--nhip-nhanh);
}
.nut-the__mui svg { width: 15px; height: 15px; }
.the:hover .nut-the, .the-ngang:hover .nut-the, .nut-the:hover, .nut-the:focus-visible {
  color: var(--ink); border-color: transparent;
  box-shadow: 0 8px 22px rgba(200, 164, 77, .34);
}
.the:hover .nut-the::before, .the-ngang:hover .nut-the::before,
.nut-the:hover::before, .nut-the:focus-visible::before { transform: scaleX(1); }
.the:hover .nut-the__mui, .nut-the:hover .nut-the__mui {
  transform: translateX(4px); background: var(--ink); color: var(--gold);
}
@media (prefers-reduced-motion: reduce) {
  .nut-the::before, .nut-the__mui { transition: none; }
}


/* Cả thẻ bấm được, không bắt dí vào đúng chữ "Xem chi tiết" */
.the__phu-kin { position: absolute; inset: 0; z-index: 3; }
.the:has(.the__phu-kin) { cursor: pointer; }

/* Phần tử TRANG TRÍ trông như nút (thực chất là <span>) phải để cú bấm đi xuyên
   qua, rơi xuống link phủ kín thẻ. Nâng z-index cho chúng là biến chúng thành
   tấm chắn: bấm đúng vào nút thì không có gì xảy ra, bấm chỗ trống lại đi được.
   Link và nút THẬT bên trong thẻ vẫn nhận bấm bình thường (quy tắc ngay dưới). */
.the .nut-the,
.the__chan > span.lien-ket,
.the__chan > span.nut,
.the-td__nut,
.the-td__nut > span.nut,
.the-ngang .nut-the { pointer-events: none; }

/* Link/nút thật thì ngược lại: phải nằm trên lớp phủ và nhận được bấm. */
.the a:not(.the__phu-kin), .the button,
.the-td a:not(.the__phu-kin), .the-td button,
.the-cs a:not(.the__phu-kin), .the-cs button,
.the-ngang a:not(.the__phu-kin) { position: relative; z-index: 4; pointer-events: auto; }

.nhan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: var(--kem-2); color: var(--gold-chu);
}
.nhan--noi { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--gold); color: var(--ink); }
.nhan--toi { background: rgba(255,255,255,.14); color: #fff; }
.nhan--xanh { background: #E3F1E8; color: #1E6B3C; }
.nhan--xam  { background: #E9EDF1; color: #4A5A69; }

.the__tt { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; color: var(--chu-nhat); }
.the__tt span { display: inline-flex; align-items: center; gap: 7px; }
.the__tt svg { width: 16px; height: 16px; color: var(--gold-chu); flex: 0 0 auto; }

/* Danh sách có dấu tick */
.ds-tick { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ds-tick li { display: flex; gap: 11px; align-items: flex-start; font-size: .97rem; }
.ds-tick svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 3px; color: var(--gold-chu); }
.doan--toi .ds-tick svg, .ds-tick--sang svg { color: var(--gold); }

/* ======================================================= Khối trang chủ */
/* Giới thiệu nhanh: ảnh + chữ */
.gt { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 76px); align-items: center; }
.gt__anh { position: relative; }
.gt__anh img { border-radius: var(--r-lon); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gt__anh-phu {
  position: absolute; right: -26px; bottom: -34px; width: 46%;
  border-radius: var(--r-vua); overflow: hidden; box-shadow: var(--bong-3); border: 6px solid #fff;
}
.gt__anh-phu img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; }
.gt__so {
  position: absolute; left: -22px; top: 34px; z-index: 3;
  background: var(--ink); color: #fff; padding: 20px 26px; border-radius: var(--r-vua);
  box-shadow: var(--bong-3); text-align: center;
}
.gt__so b { display: block; font-family: var(--font-tieu-de); font-size: 2.2rem; color: var(--gold); line-height: 1; }
.gt__so span { font-size: .8rem; color: #B9C6D2; }

/* Khối lợi thế dạng ô */
.the-loi-the {
  background: #fff; border: 1px solid var(--vien); border-radius: var(--r-lon);
  padding: 30px 28px; display: grid; gap: 13px; align-content: start;
  transition: transform var(--nhip), box-shadow var(--nhip), background var(--nhip);
  position: relative; overflow: hidden;
}
.the-loi-the::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold);
  transform: scaleY(0); transform-origin: top; transition: transform var(--nhip);
}
.the-loi-the:hover { transform: translateY(-6px); box-shadow: var(--bong-2); }
.the-loi-the:hover::before { transform: scaleY(1); }
.the-loi-the__icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--kem); color: var(--gold-chu); margin-bottom: 4px;
  position: relative; z-index: 1;
}

/* Icon phóng lớn chìm dưới nền thẻ. Đặt tràn khỏi góc dưới phải để nó đọc như
   một hoa văn nền chứ không phải một icon thứ hai. */
.the-loi-the__chim {
  position: absolute; right: -26px; bottom: -30px; z-index: 0;
  width: 148px; height: 148px; display: block;
  color: var(--gold);
  opacity: .085;
  transform: rotate(-8deg);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
  pointer-events: none;
}
.the-loi-the__chim svg { width: 100%; height: 100%; stroke-width: 1.2; }
.the-loi-the:hover .the-loi-the__chim { transform: rotate(-4deg) scale(1.08); opacity: .14; }
.the-loi-the > :not(.the-loi-the__chim) { position: relative; z-index: 1; }
.doan--toi .the-loi-the__chim { color: var(--gold); opacity: .12; }
.doan--toi .the-loi-the:hover .the-loi-the__chim { opacity: .2; }
@media (prefers-reduced-motion: reduce) { .the-loi-the__chim { transition: none; } }
.the-loi-the__icon svg { width: 27px; height: 27px; }
.the-loi-the h3 { margin: 0; font-size: 1.16rem; }
.the-loi-the p { color: var(--chu-nhat); font-size: .96rem; margin: 0; }
.doan--toi .the-loi-the { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.doan--toi .the-loi-the p { color: #AEBCC9; }
.doan--toi .the-loi-the__icon { background: rgba(200,164,77,.16); color: var(--gold); }

/* --- Dải số liệu --- */
/* Nền navy phẳng lì trông bẹt; thêm hai vầng sáng rất nhạt và một lớp vân mảnh
   để khối có chiều sâu mà không làm chữ khó đọc. */
.doan--so-lieu { position: relative; overflow: hidden; }
.doan--so-lieu::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(200, 164, 77, .16) 0%, transparent 62%),
    radial-gradient(55% 120% at 88% 100%, rgba(80, 140, 190, .16) 0%, transparent 60%);
}
/* Lớp vân chéo rất mảnh — nhìn kỹ mới thấy, nhưng bỏ đi là khối bẹt hẳn. */
.doan--so-lieu::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, .028) 0px, rgba(255, 255, 255, .028) 1px, transparent 1px, transparent 14px);
}
.doan--so-lieu > * { position: relative; z-index: 1; }

.so-lieu { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px; text-align: center; }
.so-lieu__o { position: relative; padding: 18px 12px; }
/* Vạch phân cách mảnh giữa các ô, tự ẩn ở ô đầu và khi xuống dòng */
.so-lieu__o::before {
  content: ''; position: absolute; left: -15px; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent);
}
.so-lieu__o:first-child::before { display: none; }
@media (max-width: 760px) { .so-lieu__o::before { display: none; } }

/* Icon chìm cho từng ô số liệu */
.so-lieu__chim {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 96px; height: 96px; transform: translate(-50%, -54%);
  color: var(--gold); opacity: .09; pointer-events: none;
}
.so-lieu__chim svg { width: 100%; height: 100%; stroke-width: 1.1; }
.so-lieu__o b {
  display: block; font-family: var(--font-tieu-de);
  font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1; color: var(--gold);
}
.so-lieu__o span { display: block; margin-top: 10px; font-size: .95rem; color: #B9C6D2; letter-spacing: .03em; }

/* Băng chuyền logo đối tác — khoảng cách nằm trong padding của TỪNG MỤC,
   không dùng gap trên track (gap làm mốc nối lệch nửa gap, mỗi vòng giật một nhịp). */
.bang-chuyen { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.bang-chuyen__ray { display: flex; width: max-content; animation: chay-ngang 42s linear infinite; }
.bang-chuyen:hover .bang-chuyen__ray, .bang-chuyen:focus-within .bang-chuyen__ray { animation-play-state: paused; }
@keyframes chay-ngang { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bang-chuyen__o { flex: 0 0 auto; padding-inline: clamp(22px, 3vw, 44px); display: grid; place-items: center; }
.bang-chuyen__o img {
  max-height: 62px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .62; transition: filter var(--nhip-nhanh), opacity var(--nhip-nhanh);
}
.bang-chuyen__o:hover img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bang-chuyen__ray { animation: none; } }

/* Khối kêu gọi đăng ký */
.cta { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.cta__nen { position: absolute; inset: 0; z-index: 0; }
.cta__nen img { width: 100%; height: 100%; object-fit: cover; opacity: .24; }
.cta::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, rgba(11,27,43,.95) 30%, rgba(11,27,43,.6) 100%);
}
.cta__trong { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.cta h2 { color: #fff; }
.cta p { color: #C3D0DC; }
.cta__lh { display: grid; gap: 14px; margin-top: 26px; }
.cta__lh a { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-weight: 600; }
.cta__lh svg { width: 20px; height: 20px; color: var(--gold); flex: 0 0 auto; }

/* ================================================================= Form */
.form { background: #fff; border-radius: var(--r-lon); padding: clamp(26px, 3vw, 38px); box-shadow: var(--bong-3); }
.form__td { margin: 0 0 6px; font-size: 1.32rem; }
.form__mo-ta { color: var(--chu-nhat); font-size: .94rem; margin: 0 0 22px; }
.form__luoi { display: grid; gap: 14px; }
.form__hang-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Ô nhập: icon ở đầu ô + placeholder làm nhãn, không có nhãn rời phía trên.
   Nhãn vẫn còn cho trình đọc màn hình qua .an-mat. */
.o {
  position: relative; display: block;
}
.o svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--chu-nhat); pointer-events: none; z-index: 2;
}
.o input, .o select, .o textarea {
  width: 100%; padding: 15px 16px 15px 44px;
  font: inherit; font-size: .98rem;
  color: var(--chu);                      /* khai tường minh — tránh kế thừa chữ trắng của khối cha */
  background: var(--kem); border: 1px solid transparent; border-radius: var(--r-vua);
  transition: border-color var(--nhip-nhanh), background var(--nhip-nhanh), box-shadow var(--nhip-nhanh);
  appearance: none;
}
.o textarea { min-height: 116px; resize: vertical; padding-top: 14px; }
.o select { cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6672' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 18px; padding-right: 44px; }
.o select option { color: var(--chu); background: #fff; }
.o input::placeholder, .o textarea::placeholder { color: #8A96A2; }
.o input:focus, .o select:focus, .o textarea:focus {
  outline: none; background: #fff; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(200,164,77,.18);
}
.o:focus-within svg { color: var(--gold-chu); }
.o--tep input[type="file"] { padding: 12px 16px 12px 44px; background: var(--kem); cursor: pointer; }
.an-mat { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.form__dieu-khoan { font-size: .82rem; color: var(--chu-nhat); margin: 4px 0 0; }
.form__dieu-khoan a { color: var(--gold-chu); text-decoration: underline; }

/* Form đặt trên nền tối */
.form--toi { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); box-shadow: none; }
.form--toi .form__td { color: #fff; }
.form--toi .form__mo-ta, .form--toi .form__dieu-khoan { color: #AEBCC9; }
.form--toi .o input, .form--toi .o select, .form--toi .o textarea {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.16);
}
.form--toi .o input::placeholder, .form--toi .o textarea::placeholder { color: #9FAEBC; }
.form--toi .o svg { color: #9FAEBC; }
.form--toi .o select option { color: var(--chu); background: #fff; }
.form--toi .o input:focus, .form--toi .o select:focus, .form--toi .o textarea:focus { background: rgba(255,255,255,.14); border-color: var(--gold); }

/* Thông báo sau khi gửi */
.bao {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 18px; border-radius: var(--r-vua); margin-bottom: 18px; font-size: .95rem;
}
.bao svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; }
.bao--ok  { background: #E3F1E8; color: #16603A; }
.bao--loi { background: #FBE9E9; color: #8A2424; }

/* ============================================================ Trang dự án */
/* Bảng thông tin nhanh ngay dưới hero */
.da-tt {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  background: #fff; border-radius: var(--r-lon); box-shadow: var(--bong-2);
  overflow: hidden; margin-top: -60px; position: relative; z-index: 5;
}
/* Hero của trang dự án phải chừa đủ chỗ cho bảng thông tin kéo lên đè vào nó.
   Thiếu khoảng chừa này thì bảng phủ mất hàng nút "Nhận bảng giá" và hotline —
   đúng hai nút quan trọng nhất của trang. */
.hero--co-bang { padding-bottom: clamp(120px, 14vh, 190px); }
@media (max-width: 760px) {
  .hero--co-bang { padding-bottom: clamp(56px, 8vh, 90px); }
  .da-tt { margin-top: 0; }          /* màn hẹp thì xếp thường, không kéo lên */
}
.da-tt > div { padding: 24px 26px; border-right: 1px solid var(--vien); }
.da-tt > div:last-child { border-right: 0; }
.da-tt span { display: block; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--chu-nhat); margin-bottom: 6px; }
.da-tt b { font-size: 1.08rem; font-weight: 600; color: var(--ink); }

/* Menu dính trong trang dự án */
.menu-trong {
  position: sticky; top: 70px; z-index: 500;
  background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
  border-block: 1px solid var(--vien);
}
.menu-trong__ray {
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto; overflow-y: hidden;   /* khai tường minh cả hai trục: khai một trục
                                             thì trục kia tự thành auto và mọc thanh cuộn thừa */
  scrollbar-width: none; scroll-behavior: smooth;
  /* Mép phải mờ dần làm dấu hiệu "còn cuộn được", thay vì cắt cụt chữ */
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
}
.menu-trong__ray::-webkit-scrollbar { display: none; }
.menu-trong a {
  flex: 0 0 auto; padding: 17px 13px; font-size: .93rem; font-weight: 500; color: var(--chu-nhat);
  border-bottom: 2px solid transparent; transition: color var(--nhip-nhanh), border-color var(--nhip-nhanh);
  white-space: nowrap;
}
.menu-trong a:hover { color: var(--ink); }
.menu-trong a.dang-xem { color: var(--gold-chu); border-bottom-color: var(--gold); }
/* Nút nằm NGOÀI dải cuộn: đặt trong dải thì nó cuộn theo và bị cắt mất chữ
   ngay khi dự án có nhiều khối. */
.menu-trong__trong { display: flex; align-items: center; gap: 16px; min-width: 0; }
.menu-trong__ray { flex: 1 1 auto; min-width: 0; }   /* min-width:0 bắt buộc: flex item
                                                        mặc định không co nhỏ hơn nội dung,
                                                        thiếu nó là dải phình ra và đẩy nút đi */
.menu-trong__nut { flex: 0 0 auto; }

/* Khối nội dung linh hoạt */
.khoi--toi { background: var(--ink); color: #E8EDF2; }
.khoi--toi h2, .khoi--toi h3 { color: #fff; }
.khoi--kem { background: var(--kem); }
.khoi__doi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.khoi__doi--dao .khoi__anh { order: -1; }
.khoi__anh img { border-radius: var(--r-lon); width: 100%; }
.khoi__chu :is(h3) { margin-top: 1.6em; }
.khoi__chu > :first-child { margin-top: 0; }

/* Bảng thông số */
.thong-so { display: grid; gap: 0; border-top: 1px solid var(--vien); }
.thong-so > div { display: grid; grid-template-columns: minmax(140px, 240px) 1fr; gap: 20px; padding: 16px 4px; border-bottom: 1px solid var(--vien); }
.thong-so dt { color: var(--chu-nhat); font-size: .95rem; margin: 0; }
.thong-so dd { margin: 0; font-weight: 600; }
.khoi--toi .thong-so { border-color: rgba(255,255,255,.14); }
.khoi--toi .thong-so > div { border-color: rgba(255,255,255,.14); }
.khoi--toi .thong-so dt { color: #A9B8C6; }

/* Tiện ích dạng ô */
.tien-ich { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--vien); border: 1px solid var(--vien); border-radius: var(--r-lon); overflow: hidden; }
.tien-ich > div { background: #fff; padding: 26px 24px; display: grid; gap: 8px; transition: background var(--nhip-nhanh); }
.tien-ich > div:hover { background: var(--kem); }
.tien-ich b { font-size: 1.04rem; display: flex; align-items: center; gap: 10px; }
.tien-ich b::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.tien-ich p { margin: 0; color: var(--chu-nhat); font-size: .94rem; }
.khoi--toi .tien-ich { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.khoi--toi .tien-ich > div { background: var(--ink-2); }
.khoi--toi .tien-ich > div:hover { background: var(--ink-3); }
.khoi--toi .tien-ich p { color: #AEBCC9; }

/* Thư viện ảnh */
.thu-vien { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.thu-vien__o { position: relative; border: 0; padding: 0; background: none; border-radius: var(--r-vua); overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; }
.thu-vien__o img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.thu-vien__o:hover img { transform: scale(1.06); }
.thu-vien__o::after {
  content: ''; position: absolute; inset: 0; background: rgba(11,27,43,.35);
  opacity: 0; transition: opacity var(--nhip-nhanh);
}
.thu-vien__o:hover::after { opacity: 1; }
.thu-vien__o--to { grid-column: span 2; aspect-ratio: 16 / 10; }
@media (max-width: 700px) { .thu-vien__o--to { grid-column: span 1; } }

/* Khung xem ảnh phóng to — bấm ảnh thì to ra tại chỗ, không mở tab mới */
.den-chieu {
  position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px);
  background: rgba(6, 13, 21, .94); backdrop-filter: blur(6px);
}
.den-chieu.mo { display: flex; animation: hien-mo .25s ease both; }
@keyframes hien-mo { from { opacity: 0; } to { opacity: 1; } }
.den-chieu img { max-width: 100%; max-height: 84vh; border-radius: var(--r-vua); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.den-chieu__dong, .den-chieu__truoc, .den-chieu__sau {
  position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
  transition: background var(--nhip-nhanh);
}
.den-chieu__dong:hover, .den-chieu__truoc:hover, .den-chieu__sau:hover { background: rgba(255,255,255,.26); }
.den-chieu__dong { top: 20px; right: 20px; font-size: 22px; }
.den-chieu__truoc { left: 20px; top: 50%; transform: translateY(-50%); }
.den-chieu__sau   { right: 20px; top: 50%; transform: translateY(-50%); }
.den-chieu__so { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #C9D5E0; font-size: .9rem; }
.den-chieu__tab { position: absolute; bottom: 20px; right: 24px; color: #C9D5E0; font-size: .85rem; text-decoration: underline; }

/* Video nhúng / bản đồ */
.khung-nhung { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lon); overflow: hidden; background: var(--ink-2); }
.khung-nhung iframe, .khung-nhung video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.khung-nhung--thap { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .khung-nhung--thap { aspect-ratio: 4 / 3; } }

/* Thẻ chính sách */
.the-cs {
  display: flex; gap: 18px; align-items: flex-start;
  background: #fff; border: 1px solid var(--vien); border-radius: var(--r-vua);
  padding: 22px 24px; transition: transform var(--nhip), box-shadow var(--nhip), border-color var(--nhip);
  position: relative;
}
.the-cs:hover { transform: translateY(-4px); box-shadow: var(--bong-2); border-color: transparent; }
.the-cs__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--kem); color: var(--gold-chu); display: grid; place-items: center; flex: 0 0 auto; }
.the-cs__icon svg { width: 22px; height: 22px; }
.the-cs h3 { font-size: 1.1rem; margin: 0 0 6px; }
.the-cs p { margin: 0; font-size: .94rem; color: var(--chu-nhat); }
.the-cs__tep { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--gold-chu); position: relative; z-index: 4; }

/* ================================================================== Blog */
.blog-noi-bat { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: stretch; }
.blog-noi-bat .the--to .the__anh { aspect-ratio: 16 / 10; }
.blog-noi-bat .the--to .the__ten { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.blog-phu { display: grid; gap: 16px; align-content: start; }
.the-ngang { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; background: #fff; border: 1px solid var(--vien); border-radius: var(--r-vua); overflow: hidden; padding: 12px; transition: box-shadow var(--nhip), transform var(--nhip); position: relative; }
.the-ngang:hover { box-shadow: var(--bong-2); transform: translateX(4px); }
.the-ngang__anh { border-radius: var(--r-nho); overflow: hidden; aspect-ratio: 4 / 3; }
.the-ngang__anh img { width: 100%; height: 100%; object-fit: cover; }
.the-ngang h3 { font-size: 1.04rem; margin: 0 0 6px; }
.the-ngang time { font-size: .84rem; color: var(--chu-nhat); }

.bo-loc { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.bo-loc a {
  padding: 9px 19px; border-radius: 999px; font-size: .92rem; font-weight: 500;
  background: var(--kem); color: var(--chu-nhat); border: 1px solid transparent;
  transition: all var(--nhip-nhanh);
}
.bo-loc a:hover { background: var(--kem-2); color: var(--ink); }
.bo-loc a.dang-chon { background: var(--ink); color: #fff; }

.meta-bai { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; color: var(--chu-nhat); align-items: center; }
.meta-bai span { display: inline-flex; align-items: center; gap: 7px; }
.meta-bai svg { width: 15px; height: 15px; color: var(--gold-chu); }

/* Bài viết chi tiết */
.bai { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(30px, 4vw, 60px); align-items: start; }
.bai__cot-phu { position: sticky; top: calc(70px + 24px); display: grid; gap: 22px; }

.noi-dung { font-size: 1.06rem; line-height: 1.85; }
.noi-dung > * { margin-bottom: 1.2em; }
.noi-dung h2 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); margin-top: 1.7em; }
.noi-dung h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); margin-top: 1.5em; }
.noi-dung img, .noi-dung figure img { border-radius: var(--r-vua); }
.noi-dung figure { margin: 2em 0; }
.noi-dung figcaption { font-size: .88rem; color: var(--chu-nhat); text-align: center; margin-top: 10px; }
.noi-dung a:not(.nut):not(.lien-ket) { color: var(--gold-chu); text-decoration: underline; text-underline-offset: 3px; }
.noi-dung ul, .noi-dung ol { padding-left: 1.3em; }
.noi-dung li { margin-bottom: .5em; }
.noi-dung blockquote {
  margin: 2em 0; padding: 22px 28px; background: var(--kem);
  border-left: 3px solid var(--gold); border-radius: 0 var(--r-vua) var(--r-vua) 0;
  font-size: 1.1rem; font-style: italic; color: var(--ink);
}
.noi-dung table { width: 100%; border-collapse: collapse; }
.noi-dung th, .noi-dung td { padding: 12px 14px; border: 1px solid var(--vien); text-align: left; }
.noi-dung th { background: var(--kem); font-weight: 600; }
.noi-dung hr { border: 0; border-top: 1px solid var(--vien); margin: 2.4em 0; }

/* Mục lục tự dựng từ H2/H3 */
.muc-luc { background: var(--kem); border-radius: var(--r-vua); padding: 22px 24px; }
.muc-luc__td { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--chu-nhat); margin: 0 0 12px; font-family: var(--font-than); font-weight: 600; }
.muc-luc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: ml; }
.muc-luc li { counter-increment: ml; }
.muc-luc li.cap-3 { padding-left: 18px; }
.muc-luc a { display: flex; gap: 10px; font-size: .94rem; color: var(--chu-nhat); transition: color var(--nhip-nhanh); }
.muc-luc a::before { content: counter(ml) '.'; color: var(--gold-chu); font-weight: 600; flex: 0 0 auto; }
.muc-luc li.cap-3 a::before { content: '–'; }
.muc-luc a:hover, .muc-luc a.dang-xem { color: var(--ink); }

/* Khối chuyển đổi trong bài */
.cta-bai {
  background: linear-gradient(120deg, var(--ink) 0%, var(--ink-3) 100%);
  color: #fff; border-radius: var(--r-lon); padding: clamp(26px, 3vw, 38px);
  position: relative; overflow: hidden;
}
.cta-bai::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(200,164,77,.28), transparent 68%);
}
.cta-bai h3 { color: #fff; margin: 0 0 8px; font-size: 1.32rem; position: relative; z-index: 2; }
.cta-bai p { color: #C3D0DC; font-size: .97rem; position: relative; z-index: 2; }
.cta-bai .nut { position: relative; z-index: 2; margin-top: 6px; }
.cta-bai--giua { margin-block: 2.6em; }

.chia-se { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chia-se span { font-size: .88rem; color: var(--chu-nhat); }
.chia-se a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--kem); color: var(--chu-nhat); transition: all var(--nhip-nhanh);
}
.chia-se a:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
.chia-se svg { width: 18px; height: 18px; }

/* Phân trang */
.phan-trang { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 50px; }
.phan-trang .page-numbers {
  min-width: 46px; height: 46px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-nho); background: var(--kem); color: var(--chu-nhat); font-weight: 500;
  transition: all var(--nhip-nhanh);
}
.phan-trang .page-numbers:hover { background: var(--kem-2); color: var(--ink); }
.phan-trang .page-numbers.current { background: var(--ink); color: #fff; }
.phan-trang .dots { background: transparent; }

/* ============================================================ Tuyển dụng */
.the-td {
  display: grid; grid-template-columns: 1fr auto; gap: 18px 26px; align-items: center;
  background: #fff; border: 1px solid var(--vien); border-radius: var(--r-vua);
  padding: 26px 28px; transition: box-shadow var(--nhip), transform var(--nhip), border-color var(--nhip);
  position: relative;
}
.the-td:hover { box-shadow: var(--bong-2); transform: translateY(-3px); border-color: transparent; }
.the-td h3 { margin: 0 0 10px; font-size: 1.24rem; }
.the-td__tt { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .92rem; color: var(--chu-nhat); }
.the-td__tt span { display: inline-flex; align-items: center; gap: 8px; }
.the-td__tt svg { width: 16px; height: 16px; color: var(--gold-chu); }
.the-td__nut { position: relative; }   /* z-index bỏ đi: xem ghi chú ở .the__phu-kin */
.the-td--dong { opacity: .78; }

.jd { display: grid; gap: 26px; }
.jd__o { background: #fff; border: 1px solid var(--vien); border-radius: var(--r-vua); padding: 26px 28px; }
.jd__o h3 { margin-top: 0; }

/* ================================================================ Liên hệ */
.lh { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 4vw, 64px); align-items: start; }
.lh__o { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--vien); }
.lh__o:last-child { border-bottom: 0; }
.lh__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--kem); color: var(--gold-chu); display: grid; place-items: center; flex: 0 0 auto; }
.lh__icon svg { width: 22px; height: 22px; }
.lh__o b { display: block; margin-bottom: 3px; }
.lh__o a, .lh__o p { color: var(--chu-nhat); margin: 0; }
.lh__o a:hover { color: var(--gold-chu); }

/* ============================================================== Chân trang */
.chan { background: var(--ink); color: #A9B8C6; padding-top: clamp(56px, 7vw, 90px); }
.chan__tren { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(26px, 3vw, 50px); padding-bottom: 50px; }
.chan h4 { color: #fff; font-family: var(--font-than); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px; }
.chan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.chan a { color: #A9B8C6; transition: color var(--nhip-nhanh), padding-left var(--nhip-nhanh); display: inline-block; }
.chan a:hover { color: var(--gold); }
.chan__gt { max-width: 42ch; font-size: .96rem; }
.chan__logo { margin-bottom: 18px; }
.chan__logo .logo__ten { color: #fff; }
.chan__lh { display: grid; gap: 13px; font-size: .96rem; }
.chan__lh li { display: flex; gap: 12px; align-items: flex-start; }
.chan__lh svg { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; margin-top: 3px; }
.chan__mxh { display: flex; gap: 10px; margin-top: 22px; }
.chan__mxh a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff; transition: all var(--nhip-nhanh);
}
.chan__mxh a:hover { background: var(--gold); color: var(--ink); transform: translateY(-3px); }
.chan__mxh svg { width: 19px; height: 19px; }
.chan__duoi {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: center;
  font-size: .88rem;
}

/* ====================================== Nút gọi nổi & thanh dưới điện thoại */
.nut-noi {
  position: fixed; right: 18px; bottom: 24px; z-index: 800;
  display: grid; gap: 12px;
}
.nut-noi a {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.24);
  transition: transform var(--nhip-nhanh);
  position: relative;
}
.nut-noi a:hover { transform: scale(1.08); }
.nut-noi svg { width: 24px; height: 24px; }
.nut-noi__dt { background: #E0483B; }
.nut-noi__zalo { background: #0068FF; font-weight: 700; font-size: .84rem; }
.nut-noi__len { background: rgba(11,27,43,.82); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity var(--nhip), visibility var(--nhip), transform var(--nhip-nhanh); }
.nut-noi__len.hien { opacity: 1; visibility: visible; }
.nut-noi__dt::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(224, 72, 59, .6); animation: lan-toa 1.8s ease-out infinite;
}
@keyframes lan-toa { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nut-noi__dt::after { animation: none; } }

.thanh-duoi {
  display: none;
  position: fixed; inset: auto 0 0; z-index: 810;
  background: rgba(255,255,255,.97); backdrop-filter: blur(14px);
  border-top: 1px solid var(--vien);
  padding-bottom: env(safe-area-inset-bottom);
  grid-template-columns: repeat(4, 1fr);
}
.thanh-duoi a {
  display: grid; justify-items: center; align-content: center; gap: 4px;
  min-height: 62px; padding: 8px 4px;
  font-size: .68rem; font-weight: 500; color: var(--chu-nhat);
  transition: color var(--nhip-nhanh);
}
.thanh-duoi a.dang-xem { color: var(--gold-chu); }
.thanh-duoi svg { width: 21px; height: 21px; }
.thanh-duoi a.thanh-duoi--goi { color: #fff; background: var(--gold); }

/* =============================================================== 404 / trống */
.trong { text-align: center; padding-block: clamp(60px, 10vh, 120px); }
.trong svg { width: 64px; height: 64px; color: var(--vien); margin: 0 auto 20px; }
.trong h2 { margin-bottom: .3em; }
.trong p { color: var(--chu-nhat); max-width: 52ch; margin-inline: auto; }

/* ======================================================= Điện thoại/tablet */
@media (max-width: 1100px) {
  .bai { grid-template-columns: 1fr; }
  .bai__cot-phu { position: static; }
  .blog-noi-bat { grid-template-columns: 1fr; }
  .chan__tren { grid-template-columns: 1fr 1fr; }
  .cta__trong { grid-template-columns: 1fr; }
  .lh { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  :root { --cao-header: 70px; }
  .menu-chinh, .header__dt { display: none; }
  .nut-menu { display: flex; }
  .gt { grid-template-columns: 1fr; }
  .gt__anh-phu { width: 40%; right: 10px; bottom: -22px; }
  .gt__so { left: 10px; }
  .khoi__doi { grid-template-columns: 1fr; }
  .khoi__doi--dao .khoi__anh { order: 0; }
  .da-tt { margin-top: -30px; }
  .the-td { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; padding-bottom: 62px; }   /* chừa chỗ cho thanh dưới */
  .thanh-duoi { display: grid; }
  .nut-noi { bottom: 76px; right: 14px; }
  .nut-noi a { width: 48px; height: 48px; }

  /* Hero trên điện thoại: thấp hơn, chữ dồn xuống dưới và lớp phủ đậm hơn hẳn —
     màn hẹp thì khối chữ rơi vào giữa ảnh, nơi lớp phủ nhạt nhất, chữ trắng chìm
     vào nền. */
  .hero { min-height: 86svh; align-items: flex-end; }
  /* Màn hẹp: khối chữ chiếm gần trọn bề ngang nên không tách trái–phải được,
     phải phủ theo chiều dọc. */
  .hero__phu {
    background:
      linear-gradient(180deg, rgba(8,19,31,.55) 0%, rgba(8,19,31,.32) 26%, rgba(8,19,31,.9) 72%, rgba(8,19,31,.95) 100%);
  }
  .hero h1 { max-width: none; }
  .hero__mo-ta { font-size: 1rem; }
  .hero__so { margin-top: 26px; }
  .hero__so > div { padding: 16px 18px; }
  .hero__cuon { display: none; }      /* thừa chỗ trên màn hẹp, lại đè lên chấm chuyển ảnh */
  .hero__cham { right: 16px; bottom: 16px; }

  /* Nút Zalo và Gọi nổi: ẩn hẳn trên điện thoại. Thanh dưới đã có sẵn cả hai,
     để thêm nút nổi là vừa thừa vừa che mất nội dung đang đọc. */
  /* Phải đặc hiệu hơn `.nut-noi a` (0,1,1) — chính rule đó khai `display: grid`,
     nên `.nut-noi__zalo` (0,1,0) thua và nút vẫn hiện. Trang trả 200, không lỗi
     nào báo, chỉ có hai nút thừa nằm đè lên nội dung. */
  .nut-noi a.nut-noi__zalo, .nut-noi a.nut-noi__dt { display: none; }
  .nut-noi { bottom: 74px; right: 12px; gap: 0; }
  .nut-noi__len { width: 44px; height: 44px; }

  /* Menu chính bị ẩn nên không còn phần tử nào đẩy cụm nút sang phải:
     nút ba gạch dồn về sát logo. */
  .header__nut { margin-left: auto; }
  .header__trong { gap: 12px; }                    /* khe 28px đẩy nút tràn khỏi mép phải */
  .logo { min-width: 0; flex: 0 1 auto; }
  .logo img { max-height: 42px; }
  .nut-menu { flex: 0 0 auto; width: 44px; height: 44px; }
  .thanh-duoi { grid-template-columns: repeat(5, 1fr); }
  .thanh-duoi a { font-size: .64rem; }
  .hero__so { grid-template-columns: repeat(2, 1fr); }
  .form__hang-2 { grid-template-columns: 1fr; }
  .the-ngang { grid-template-columns: 110px 1fr; }
  .chan__tren { grid-template-columns: 1fr; gap: 32px; }
  .chan__duoi { justify-content: flex-start; }
  .da-tt { margin-top: 0; border-radius: var(--r-vua); }
  .da-tt > div { border-right: 0; border-bottom: 1px solid var(--vien); }
  .da-tt > div:last-child { border-bottom: 0; }
  .menu-trong { top: 60px; }
  .menu-trong__nut { display: none; }
  .thong-so > div { grid-template-columns: 1fr; gap: 4px; }
}

/* Máy in: bỏ thứ không cần */
@media print {
  .header, .ngan-keo, .nut-noi, .thanh-duoi, .menu-trong, .chan, .cta, .form { display: none !important; }
  body { padding: 0; }
}