/* ==========================================================================
   MAIN CSS — mọi thứ dưới nếp gấp. Tải bất đồng bộ (xem inc/assets.php).

   Nguyên tắc của hướng editorial, áp dụng nhất quán ở mọi component:
   1. Đường kẻ mảnh 1px thay cho viền thẻ + đổ bóng.
   2. Không nhấc thẻ khi hover. Hover đổi màu chữ hoặc kẻ chân, thế là đủ.
   3. Section đánh số 01/02/03 bằng CSS counter, không dùng eyebrow màu.
   4. Nhịp điệu không đều: section quan trọng rộng hơn, có section tràn viền.
   5. Ảnh gánh phần nhìn. Chữ nhường chỗ cho ảnh.
   ========================================================================== */

/* ---------- Khung section ---------- */
.section{padding-block:clamp(4.5rem,9vw,9rem);position:relative}
.section--soft{background:var(--c-soft)}
.section--dark{background:var(--c-dark);color:color-mix(in srgb,#fff 58%,transparent)}
.section--dark h2,.section--dark h3{color:#fff}
.section--center{text-align:center}

/* Kẻ ngang mảnh phân tách các section cùng nền */
.section+.section:not(.section--soft):not(.section--dark):not(.section--kem):not(.section--anh)::before{
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:min(1280px,100% - 3rem);height:1px;background:var(--c-line);
}

.section__head{max-width:62rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.section__head--center{margin-inline:auto;text-align:center}

/* Nhãn section: số thứ tự + tên, không màu mè */
.section__eyebrow{
  display:flex;align-items:center;gap:1rem;margin:0 0 1.75rem;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-body);
}
.section{counter-increment:sec}
/* Số thứ tự đặt trong một ô vuông viền mảnh có nền nhạt — kiểu đánh số chương
   của ấn phẩm in. Đủ để con số trở thành một mốc thị giác thay vì một mẩu chữ
   lạc lõng, nhưng không thành thẻ nổi. */
.section__eyebrow::before{
  content:counter(sec,decimal-leading-zero);
  display:grid;place-items:center;flex:0 0 auto;
  width:46px;height:46px;
  border:1px solid color-mix(in srgb,var(--c-accent) 38%,transparent);
  background:color-mix(in srgb,var(--c-accent) 7%,transparent);
  font-family:var(--f-head);font-size:1.15rem;font-weight:600;letter-spacing:0;
  color:var(--c-accent);line-height:1;
}
.section__head--center .section__eyebrow{justify-content:center}
.section--dark .section__eyebrow{color:color-mix(in srgb,#fff 55%,transparent)}
.section--dark .section__eyebrow::before{
  color:var(--c-accent-lt);
  border-color:color-mix(in srgb,var(--c-accent-lt) 42%,transparent);
  background:color-mix(in srgb,var(--c-accent-lt) 10%,transparent);
}

.section__title{font-size:clamp(2.1rem,5vw,3.9rem);margin-bottom:.35em}
.section__lead{font-size:1.05rem}

/* Quy tắc GỐC của .answer nằm ở critical.css — khối mở đầu ở ngay đầu trang nên
   kích thước của nó phải do critical.css quyết định, nếu không trang sẽ đổi chiều
   cao lúc main.css tải xong (đã từng làm CLS vọt lên 0,66).
   Ở đây CHỈ được đổi màu và căn lề. Không đổi font-size / margin / max-width. */
.section--dark .answer{color:color-mix(in srgb,#fff 72%,transparent)}
.section__head--center .answer{margin-inline:auto}

.section__disclaimer{
  margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--c-line);
  font-size:.78rem;line-height:1.7;color:var(--c-body);max-width:72ch;
}
.section--dark .section__disclaimer{border-color:color-mix(in srgb,#fff 15%,transparent)}
.section__cta-line{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--c-line);
  font-size:.88rem;color:var(--c-body);
}
.link-btn{
  color:var(--c-primary);font-weight:600;font-size:inherit;
  border-bottom:1px solid var(--c-accent);padding-bottom:1px;transition:color .2s;
}
.link-btn:hover{color:var(--c-accent)}

/* ---------- Bảng thông số: hairline, không nền, không bo ---------- */
.spec-table{width:100%;border-collapse:collapse;font-size:.95rem}
.spec-table th,.spec-table td{
  padding:1.05rem 0;text-align:start;vertical-align:baseline;
  border-bottom:1px solid var(--c-line);
}
.spec-table th[scope=row]{
  width:38%;padding-right:2rem;font-weight:500;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-body);
}
.spec-table td{color:var(--c-primary);font-weight:500}
.spec-table thead th{
  border-bottom:1px solid var(--c-primary);color:var(--c-primary);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding-bottom:.8rem;
}
/*
 * Bảng tiến độ thanh toán: chia cột cố định.
 *
 * Để trình duyệt tự chia thì một ô giá trị dài như "Vượt 30% / 50% / 70%" ăn
 * hết chỗ (đo được 667px trên 901px), cột nội dung còn 74px — mỗi dòng một
 * chữ, hàng cao gấp năm lần bình thường. Chia cố định là hết.
 */
.spec-table--pay{table-layout:fixed}
.spec-table--pay th[scope=row]{width:20%;padding-right:1rem}
.spec-table--pay td:nth-child(2){width:27%;padding-right:1.5rem}
.payment__value{
  font-family:var(--f-head);font-size:1.5rem;font-weight:600;
  color:var(--c-primary);line-height:1.3;

  /* Không khoá xuống dòng: khoá thì cột phình ra và bóp cột bên cạnh. */
  overflow-wrap:anywhere;
}
@media(max-width:700px){
  .spec-table--pay{table-layout:auto}
  .spec-table--pay th[scope=row],
  .spec-table--pay td:nth-child(2){width:auto}
  .payment__value{font-size:1.15rem}
}

/* ---------- Tổng quan: bảng rộng, form nép sang cột hẹp ---------- */
.overview{display:grid;grid-template-columns:1fr 340px;gap:clamp(2rem,6vw,5rem);align-items:start}
.overview__cta{
  position:sticky;top:96px;padding:2rem;
  background:var(--c-primary);color:color-mix(in srgb,#fff 62%,transparent);
}
.overview__cta-title{color:#fff;font-family:var(--f-head);font-weight:600;font-size:1.7rem;line-height:1.15}
.overview__cta p{font-size:.88rem;line-height:1.65;margin-bottom:1.5rem}

/* ---------- Điểm nhấn: danh sách đánh số, không icon trong ô ---------- */
/* Kẻ dọc giữa các cột phụ thuộc số cột, mà auto-fit thì số cột đổi theo bề
   rộng màn hình — mọi công thức nth-child đều sai ở một khổ nào đó. Chỉ giữ
   hairline ngang và dùng column-gap để tách cột. Chắc chắn và sạch hơn. */
.usp-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  column-gap:clamp(2rem,4vw,4rem);border-top:1px solid var(--c-line);counter-reset:usp;
}
.usp{
  counter-increment:usp;padding:2.25rem 0 2.5rem;
  border-bottom:1px solid var(--c-line);
}
.usp::before{
  content:counter(usp,decimal-leading-zero);
  display:grid;place-items:center;width:38px;height:38px;margin-bottom:1.25rem;
  border:1px solid color-mix(in srgb,var(--c-accent) 34%,transparent);
  background:color-mix(in srgb,var(--c-accent) 6%,transparent);
  font-family:var(--f-head);font-size:.95rem;font-weight:600;
  letter-spacing:0;color:var(--c-accent);line-height:1;
}
/* Icon giữ trong DOM cho ngữ nghĩa nhưng ẩn đi — ô icon bo góc là dấu hiệu
   template rõ nhất, bỏ hẳn khỏi phần nhìn. */
.usp__icon{display:none}
.usp__title{font-size:1.18rem;font-weight:600;margin-bottom:.55rem}
.usp__desc{font-size:.93rem;line-height:1.72;margin:0}

/* ---------- Vị trí ---------- */
.location{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.map-lazy{position:relative;aspect-ratio:4/3;background:var(--c-soft);display:grid;place-items:center;overflow:hidden}
.map-lazy__img{width:100%;height:100%;object-fit:cover}
.map-lazy__btn{
  position:absolute;display:inline-flex;align-items:center;gap:.6rem;
  background:var(--c-paper);padding:1rem 1.8rem;
  font-size:.73rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-primary);transition:background .25s,color .25s;
}
.map-lazy__btn:hover{background:var(--c-primary);color:var(--c-paper)}
.map-lazy iframe{width:100%;height:100%;border:0;display:block}
.location__img{width:100%}
.location__address{
  display:flex;align-items:flex-start;gap:.6rem;margin-top:1.25rem;
  padding-top:1.25rem;border-top:1px solid var(--c-line);font-size:.86rem;
}
.location__address svg{flex:0 0 auto;color:var(--c-accent);margin-top:3px}
.location__address a{
  color:var(--c-primary);font-weight:600;white-space:nowrap;
  border-bottom:1px solid var(--c-accent);margin-left:auto;
}

.conn-group+.conn-group{margin-top:2.25rem}
.conn-group__title{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-body);margin-bottom:.25rem;padding-bottom:.75rem;
  border-bottom:1px solid var(--c-primary);
}
.conn{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:.85rem 0;border-bottom:1px solid var(--c-line);font-size:.9rem;
}
.conn__name{color:var(--c-primary)}
.conn__time{
  font-family:var(--f-head);font-size:1.15rem;font-weight:600;
  color:var(--c-accent);white-space:nowrap;
}

/* ---------- Sản phẩm: hàng ngang hairline, không phải thẻ nổi ---------- */
.product-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  column-gap:clamp(1.5rem,3vw,3rem);border-top:1px solid var(--c-line);
}
.product{
  display:flex;flex-direction:column;padding:2rem 0 2.25rem;
  border-bottom:1px solid var(--c-line);
}
.product__media{aspect-ratio:4/3;overflow:hidden;margin-bottom:1.5rem;background:var(--c-soft);padding:.75rem}
/*
 * Ô giữ chỗ khi loại căn chưa có mặt bằng.
 *
 * Trong cùng một hàng, thẻ có ảnh và thẻ không có làm phần chữ bắt đầu ở hai
 * độ cao khác nhau, nhìn như lỗi giao diện. Giữ chỗ cho thẳng hàng, và nói
 * thật là đang thiếu chứ không chèn ảnh giả.
 */
.product__media--trong{
  display:grid;place-items:center;background:transparent;
  border:1px dashed var(--c-line);
}
.product__media--trong span{
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-line);
}
/*
 * Ảnh loại căn là MẶT BẰNG, không phải ảnh phong cảnh — không được cắt.
 *
 * Với object-fit:cover, khung 4:3 cắt mất dải ghi tên căn và diện tích nằm ở
 * mép dưới bản vẽ — đúng phần khách cần đọc nhất. Dùng contain để thấy trọn
 * bản vẽ, nền mềm lấp phần thừa.
 */
.product__img{
  width:100%;height:100%;object-fit:contain;
  transition:scale .7s cubic-bezier(.2,.8,.2,1);
}
.product:hover .product__img{scale:1.02}
.product__body{display:flex;flex-direction:column;flex:1}
/* Nút đẩy xuống đáy thẻ để mọi nút thẳng một hàng, dù tiêu đề dài ngắn khác nhau. */
.product__body .btn{margin-top:auto}
.product__title{font-family:var(--f-head);font-weight:600;font-size:1.65rem;line-height:1.15;margin-bottom:.9rem}
/*
 * Thông số căn: KHÔNG viết hoa toàn bộ.
 *
 * text-transform:uppercase biến "m²" thành "M²" và "142 – 146,6m²" thành một
 * dải chữ hoa dài — nhìn nghiệp dư và khó đọc. Giữ nguyên chữ người viết,
 * chỉ phân cấp bằng cỡ chữ và màu.
 */
.product__specs{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.25rem;
  margin-bottom:1.1rem;font-size:.82rem;font-weight:500;color:var(--c-body);
}
/* Diện tích là số quan trọng nhất của một loại căn — cho nó đứng riêng một dòng. */
.product__area{flex:0 0 100%;color:var(--c-primary);font-weight:600}
.product__specs li{display:inline-flex;align-items:center;gap:.35rem}
.product__specs svg{display:none}
.product__desc{font-size:.9rem;line-height:1.72;margin-bottom:1.5rem;flex:1}
.product__price{
  font-family:var(--f-head);font-size:1.9rem;font-weight:600;color:var(--c-primary);
  padding-top:1rem;border-top:1px solid var(--c-line);margin-bottom:1.25rem;
}
/* Giá là một câu chứ không phải con số: hạ về cỡ chữ thường cho khỏi vỡ thẻ. */
.product__price--dai{
  font-family:var(--f-body);font-size:.88rem;font-weight:500;line-height:1.6;
  letter-spacing:0;color:var(--c-body);
}
/* Giá ghi chung cho mọi loại căn: một dòng dưới lưới, không lặp trên từng thẻ. */
.product-grid__gia{
  margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--c-line);
  font-family:var(--f-head);font-size:1.15rem;color:var(--c-primary);
}

/* ---------- Tabs mặt bằng ---------- */
.tabs__nav{display:flex;flex-wrap:wrap;gap:2rem;margin-bottom:2.5rem;border-bottom:1px solid var(--c-line)}
.tabs__btn{
  padding:0 0 1rem;font-size:.74rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-body);
  border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s;
}
.tabs__btn:hover{color:var(--c-primary)}
.tabs__btn.is-active{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.tabs__panel[hidden]{display:none}
.tabs__figure{margin:0;background:var(--c-paper)}
.tabs__img{width:100%;height:auto;cursor:zoom-in}
.tabs__figure figcaption{
  padding-top:1rem;margin-top:1rem;border-top:1px solid var(--c-line);
  font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-body);
}

/* ---------- Tiện ích: cột chữ, gạch đầu dòng mảnh ---------- */
.amenities{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1.5rem,4vw,3.5rem)}
.amenity-group__title{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-primary);padding-bottom:.85rem;border-bottom:1px solid var(--c-primary);
  margin-bottom:.4rem;
}
.amenity-list li{
  display:flex;align-items:baseline;gap:.75rem;padding:.7rem 0;
  font-size:.91rem;border-bottom:1px solid var(--c-line);
}
.amenity-list svg{display:none}
.amenity-list li::before{content:"";width:12px;height:1px;background:var(--c-accent);flex:0 0 auto;translate:0 -4px}
.amenity-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;margin-top:clamp(2.5rem,5vw,4rem);background:var(--c-line)}
.amenity-photos img{aspect-ratio:3/4;object-fit:cover;width:100%;cursor:zoom-in;transition:opacity .35s}
.amenity-photos a:hover img{opacity:.82}

/* ---------- Thư viện: lưới lệch, ảnh sát nhau ---------- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--c-line)}
.gallery__item{grid-column:span 2}
.gallery__item:first-child{grid-column:span 4;grid-row:span 2}
.gallery__item:nth-child(4){grid-column:span 3}
.gallery__item:nth-child(5){grid-column:span 3}
.gallery__item img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;cursor:zoom-in;transition:opacity .35s}
.gallery__item:first-child img{aspect-ratio:auto;min-height:100%}
.gallery__item a:hover img{opacity:.82}

/* ---------- Tiến độ ---------- */
.progress{display:grid;grid-template-columns:1fr 300px;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.timeline{border-top:1px solid var(--c-line)}
.timeline__item{
  display:grid;grid-template-columns:130px 1fr;gap:1.5rem;
  padding:1.75rem 0;border-bottom:1px solid var(--c-line);position:relative;
}
.timeline__dot{display:none}
.timeline__date{
  grid-column:1;font-family:var(--f-head);font-size:1.35rem;font-weight:600;
  color:var(--c-primary);margin:0;display:block;line-height:1.2;
}
.timeline__badge{
  display:block;margin-top:.45rem;
  font-family:var(--f-body);font-size:.66rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--c-body);
}
.timeline__item--doing .timeline__date,
.timeline__item--doing .timeline__badge{color:var(--c-accent)}
.timeline__item--done{opacity:.55}
.timeline__body{grid-column:2}
.timeline__title{font-size:1.05rem;font-weight:600;margin-bottom:.35rem}
.timeline__desc{font-size:.9rem;line-height:1.7;margin:0}
.progress__photos figure{margin:0}
.progress__photos img{width:100%;cursor:zoom-in}
.progress__photos figcaption{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c-body);
  margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--c-line);
}

/* ---------- Thanh toán ---------- */
.payment{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.payment__subtitle{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-body);margin-bottom:1.5rem;
}
.payment__benefits{border-top:1px solid var(--c-primary);padding-top:1.5rem}
.benefit-list li{
  display:flex;align-items:baseline;gap:.85rem;padding:.9rem 0;
  font-size:.92rem;line-height:1.65;border-bottom:1px solid var(--c-line);
}
.benefit-list li:last-child{margin-bottom:2rem}
.benefit-list svg{display:none}
.benefit-list li::before{content:"";width:14px;height:1px;background:var(--c-accent);flex:0 0 auto;translate:0 -4px}

/* ---------- Chủ đầu tư ---------- */
.developer{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.developer__img{width:100%;object-fit:cover;aspect-ratio:4/5}
.developer__logo{max-height:44px;width:auto;margin-bottom:1.75rem}
.developer__name{font-family:var(--f-head);font-weight:600;font-size:2.1rem;line-height:1.1;margin-bottom:1rem}
.developer__desc{font-size:.96rem;line-height:1.78;margin-bottom:2.25rem}
.fact-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;margin:0;border-top:1px solid var(--c-line)}
.fact{padding:1.1rem 1.25rem 1.1rem 0;border-bottom:1px solid var(--c-line)}
.fact dt{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-body);margin-bottom:.4rem}
.fact dd{margin:0;font-family:var(--f-head);font-size:1.25rem;font-weight:600;color:var(--c-primary);line-height:1.2}

/* ---------- Tin tức: hairline, ảnh gánh phần nhìn ---------- */
.news-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  column-gap:clamp(1.5rem,3vw,3rem);border-top:1px solid var(--c-line);
}
.news{border-bottom:1px solid var(--c-line)}
.news__link{display:block;padding:1.75rem 0 2rem}
.news__media{aspect-ratio:3/2;overflow:hidden;margin-bottom:1.25rem;background:var(--c-soft)}
.news__img{width:100%;height:100%;object-fit:cover;transition:scale .7s cubic-bezier(.2,.8,.2,1)}
.news__link:hover .news__img{scale:1.035}
.news__date{
  display:block;font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-accent);margin-bottom:.6rem;
}
.news__title{
  font-family:var(--f-head);font-size:1.45rem;font-weight:600;line-height:1.22;
  margin-bottom:.6rem;transition:color .2s;
}
.news__link:hover .news__title{color:var(--c-accent)}
.news__excerpt{font-size:.89rem;line-height:1.72;margin-bottom:1rem}
.news__more{
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-primary);border-bottom:1px solid var(--c-accent);padding-bottom:2px;
}

/* ---------- FAQ: hairline, không thẻ ---------- */
.faq{border-top:1px solid var(--c-line)}
.faq__item{border-bottom:1px solid var(--c-line)}
.faq__q{
  display:flex;align-items:baseline;justify-content:space-between;gap:2rem;
  padding:1.6rem 0;cursor:pointer;list-style:none;
}
.faq__q::-webkit-details-marker{display:none}
.faq__q h3{font-family:var(--f-head);font-size:1.4rem;font-weight:600;line-height:1.25;margin:0;transition:color .2s}
.faq__q:hover h3{color:var(--c-accent)}
.faq__icon{flex:0 0 auto;color:var(--c-body);transition:rotate .3s ease;translate:0 -2px}
.faq__item[open] .faq__icon{rotate:180deg}
.faq__a{padding:0 0 1.9rem;max-width:64ch}
.faq__a .answer{font-size:.98rem;line-height:1.8;color:var(--c-body)}
.faq__more{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--c-line);
  font-size:.88rem;color:var(--c-body);
}
.faq__more a{color:var(--c-primary);font-weight:600;border-bottom:1px solid var(--c-accent)}

/* ---------- Liên hệ ---------- */
.contact{display:grid;grid-template-columns:1fr 440px;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contact__perks{margin:2.5rem 0;border-top:1px solid color-mix(in srgb,#fff 18%,transparent)}
.contact__perks li{
  display:flex;align-items:baseline;gap:.85rem;padding:.9rem 0;font-size:.93rem;
  border-bottom:1px solid color-mix(in srgb,#fff 12%,transparent);
}
.contact__perks svg{display:none}
.contact__perks li::before{content:"";width:14px;height:1px;background:var(--c-accent-lt);flex:0 0 auto;translate:0 -4px}
.contact__direct{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:2rem}
.contact__direct-item{display:inline-flex;align-items:center;gap:.8rem;transition:opacity .2s}
.contact__direct-item:hover{opacity:.72}
.contact__direct-item svg{color:var(--c-accent-lt)}
.contact__direct-item small{
  display:block;font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:color-mix(in srgb,#fff 45%,transparent);margin-bottom:.25rem;
}
.contact__direct-item strong{color:#fff;font-family:var(--f-head);font-size:1.5rem;font-weight:600}
.contact__form{background:var(--c-paper);padding:clamp(1.75rem,3vw,2.75rem)}
/* Panel form là đảo nền sáng nằm trong section nền tối. Quy tắc
   ".section--dark h3{color:#fff}" có độ ưu tiên cao hơn nên sẽ tô trắng tiêu đề
   này và làm nó biến mất trên nền giấy. Phải ghi đè bằng selector cùng cấp. */
.section--dark .contact__form-title{
  font-family:var(--f-head);font-weight:600;font-size:1.65rem;line-height:1.2;
  color:var(--c-primary);margin-bottom:2rem;padding-bottom:1.25rem;
  border-bottom:1px solid var(--c-line);
}

/* ---------- Form: input gạch chân, không khung ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-form__row{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem}
.lead-form__field{display:block;margin-bottom:1.5rem}
.lead-form__label{
  display:block;font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-body);margin-bottom:.5rem;
}
.lead-form__label em{color:var(--c-accent);font-style:normal}
.lead-form input[type=text],.lead-form input[type=tel],.lead-form input[type=email],
.lead-form select,.lead-form textarea{
  width:100%;padding:.6rem 0;border:0;border-bottom:1px solid var(--c-line);
  border-radius:0;font:inherit;font-size:.95rem;color:var(--c-primary);
  background:transparent;transition:border-color .25s;
}
.lead-form input::placeholder,.lead-form textarea::placeholder{color:color-mix(in srgb,var(--c-body) 55%,transparent)}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:0;border-bottom-color:var(--c-primary)}
.lead-form input[aria-invalid=true]{border-bottom-color:#a33}
.lead-form textarea{resize:vertical;min-height:70px}
.lead-form__consent{
  display:flex;align-items:flex-start;gap:.65rem;font-size:.78rem;line-height:1.6;
  color:var(--c-body);margin-block:.25rem 1.75rem;cursor:pointer;
}
.lead-form__consent input{margin-top:3px;accent-color:var(--c-primary);width:15px;height:15px;flex:0 0 auto}
.lead-form__note{
  font-size:.72rem;letter-spacing:.06em;color:var(--c-body);text-align:center;
  margin:1rem 0 0;opacity:.75;
}
.lead-form__result{margin-top:1rem;font-size:.86rem;line-height:1.6}
.lead-form__result.is-error{color:#a33;border-top:1px solid #a33;padding-top:.85rem}
.lead-form__result.is-success{color:var(--c-primary);border-top:1px solid var(--c-accent);padding-top:.85rem;font-weight:600}
.overview__cta .lead-form__label{color:color-mix(in srgb,#fff 55%,transparent)}
.overview__cta .lead-form__consent,.overview__cta .lead-form__note{color:color-mix(in srgb,#fff 50%,transparent)}
.overview__cta .lead-form input{color:#fff;border-bottom-color:color-mix(in srgb,#fff 25%,transparent)}
.overview__cta .lead-form input::placeholder{color:color-mix(in srgb,#fff 30%,transparent)}
.overview__cta .lead-form input:focus{border-bottom-color:#fff}
.overview__cta .btn--primary{background:var(--c-paper);color:var(--c-primary)}
.overview__cta .btn--primary:hover{background:var(--c-accent);color:#fff}
.overview__cta .lead-form__result.is-success{color:#fff;border-top-color:var(--c-accent-lt)}
.btn__spinner{display:none;width:14px;height:14px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite}
.is-sending .btn__spinner{display:block}
.is-sending{opacity:.6;pointer-events:none}
@keyframes spin{to{rotate:360deg}}

/* ---------- Footer ---------- */
.site-footer{background:var(--c-dark);color:color-mix(in srgb,#fff 48%,transparent);padding-block:clamp(3rem,6vw,5rem) 2rem;font-size:.86rem}
.site-footer__grid{
  display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:clamp(2rem,5vw,4rem);
  padding-bottom:3rem;border-bottom:1px solid color-mix(in srgb,#fff 12%,transparent);
}
.site-footer__logo{height:38px;width:auto;margin-bottom:1.5rem}
.site-footer__brand{font-family:var(--f-head);font-size:1.8rem;font-weight:500;color:#fff;margin-bottom:1rem}
.site-footer__desc{font-size:.8rem;line-height:1.8;margin:0;max-width:46ch}
.site-footer__title{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,#fff 70%,transparent);margin-bottom:1.25rem}
.site-footer__links li,.site-footer__contact li{padding:.4rem 0}
.site-footer__links a{font-size:.82rem;transition:color .2s}
.site-footer__links a:hover{color:#fff}
.site-footer__contact li{display:flex;align-items:flex-start;gap:.65rem;font-size:.82rem;line-height:1.6}
.site-footer__contact svg{flex:0 0 auto;color:var(--c-accent-lt);margin-top:3px}
.site-footer__contact a:hover{color:#fff}
.site-footer__bottom{padding-top:2rem;font-size:.72rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between}
.site-footer__bottom p{margin:0}
.site-footer__note{color:color-mix(in srgb,#fff 32%,transparent)}

/* ---------- Sticky CTA (mobile) ---------- */
/*
 * Thanh liên hệ dính đáy — hiện trên MỌI cỡ màn hình.
 *
 * Trước đây chỉ hiện trên điện thoại. Nhưng khách xem dự án trên máy tính
 * cũng cần chỗ bấm mà không phải cuộn ngược lên đầu trang.
 *
 * Thanh cao khoảng 60px. Google chỉ phạt khi cửa sổ che PHẦN LỚN nội dung
 * ngay khi vừa mở trang — một thanh mỏng ở đáy không nằm trong diện đó.
 */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:flex;
  background:var(--c-paper);border-top:1px solid var(--c-line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 24px rgba(0,0,0,.10);

  /* Trượt xuống khi khách đang ở ngay khối đăng ký: lúc đó form đã ở trước
     mặt, thanh chỉ che thêm. */
  transition:transform .28s ease;
}
.sticky-cta.la-an{transform:translateY(110%)}

/* Chừa chỗ cho thanh, đừng để nó đè lên dòng cuối trang. */
body{padding-bottom:64px}

@media (min-width:1025px){
  .sticky-cta{
    left:auto;right:1.5rem;bottom:1.5rem;
    width:auto;border:1px solid var(--c-line);border-radius:var(--bo-nut,var(--radius));
    overflow:hidden;
  }
  .sticky-cta__item{flex:0 0 auto;padding:.8rem 1.4rem}
  body{padding-bottom:0}
}
.sticky-cta__item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.85rem .3rem;font-size:.63rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--c-body);
}
.sticky-cta__item+.sticky-cta__item{border-left:1px solid var(--c-line)}
.sticky-cta__item svg{color:var(--c-primary)}
.sticky-cta__item--form{background:var(--c-primary);color:var(--c-paper);border-left-color:var(--c-primary)}
.sticky-cta__item--form svg{color:var(--c-paper)}

/* ---------- Popup ---------- */
.popup{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.25rem}
.popup[hidden]{display:none}
.popup__backdrop{position:absolute;inset:0;background:rgba(18,16,12,.8);animation:fade .3s ease}
.popup__panel{
  position:relative;background:var(--c-paper);width:min(460px,100%);
  max-height:92svh;overflow-y:auto;padding:clamp(1.75rem,4vw,2.75rem);
  animation:rise .4s cubic-bezier(.2,.8,.2,1);
}
.popup__close{position:absolute;top:1.1rem;right:1.1rem;width:32px;height:32px;display:grid;place-items:center;color:var(--c-body);transition:color .2s}
.popup__close:hover{color:var(--c-primary)}
.popup__title{font-family:var(--f-head);font-weight:600;font-size:2rem;line-height:1.1;margin-bottom:.5rem;padding-right:2rem}
.popup__sub{font-size:.85rem;line-height:1.7;margin-bottom:2rem;padding-bottom:1.25rem;border-bottom:1px solid var(--c-line)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;translate:0 20px}}

/* ---------- Lightbox / Video ---------- */
.lightbox,.video-modal{position:fixed;inset:0;z-index:210;background:rgba(18,16,12,.96);display:grid;place-items:center;padding:2rem;animation:fade .25s ease}
.lightbox img{max-width:100%;max-height:92svh;object-fit:contain}
.lightbox__close{position:absolute;top:1.5rem;right:1.5rem;width:44px;height:44px;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.25);transition:background .2s}
.lightbox__close:hover{background:rgba(255,255,255,.12)}
.video-modal__frame{width:min(1040px,100%);aspect-ratio:16/9}
.video-modal iframe{width:100%;height:100%;border:0}

/* ---------- Bài viết: mục lục dính, bài liên quan ---------- */
.article{padding-block:clamp(2rem,4vw,3.5rem) 0}
.crumbs{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:2rem;
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-body);
}
.crumbs a{border-bottom:1px solid transparent;transition:border-color .2s}
.crumbs a:hover{border-bottom-color:var(--c-accent)}
.crumbs__current{color:var(--c-primary);font-weight:600;text-transform:none;letter-spacing:0}

.article__head{max-width:56rem;margin-bottom:2rem}
.article__meta{
  display:flex;gap:.6rem;align-items:center;margin-bottom:1rem;
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent);
}
.article__title{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;margin-bottom:.4em}
.article__lead{font-size:1.12rem;line-height:1.75;color:var(--c-body);max-width:62ch}
.article__hero{margin:0 0 clamp(2rem,4vw,3.5rem)}
.article__hero img{width:100%;height:auto}

.article__grid{
  display:grid;grid-template-columns:260px minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
  padding-bottom:clamp(3rem,6vw,5rem);
}
.toc{position:sticky;top:96px;border-top:1px solid var(--c-primary);padding-top:1.1rem}
.toc__title{
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-body);margin-bottom:.75rem;
}
.toc__list{counter-reset:toc;list-style:none;margin:0;padding:0}
.toc__item{counter-increment:toc;border-bottom:1px solid var(--c-line)}
.toc__item a{
  display:flex;gap:.65rem;padding:.6rem 0;font-size:.86rem;line-height:1.5;
  color:var(--c-body);transition:color .2s;
}
.toc__item a::before{
  content:counter(toc,decimal-leading-zero);flex:0 0 auto;
  font-size:.62rem;font-weight:600;letter-spacing:.06em;color:var(--c-accent);padding-top:.25em;
}
.toc__item a:hover,.toc__item.is-active a{color:var(--c-primary)}
.toc__item.is-active a{font-weight:600}
.toc__item--h3 a{padding-left:1.4rem;font-size:.82rem}
.toc__item--h3 a::before{display:none}

.article__body{max-width:none}
.article__body h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:2.5rem 0 .7rem;scroll-margin-top:90px}
.article__body h3{font-size:1.2rem;margin:1.9rem 0 .5rem;scroll-margin-top:90px}
.article__body p{font-size:1.02rem;line-height:1.82}
.article__body img{margin-block:1.75rem}
.article__body ul,.article__body ol{margin:1.1rem 0 1.4rem;padding-left:1.1rem}
.article__body ul li{list-style:none;position:relative;padding-left:1.1rem;margin-bottom:.5rem}
.article__body ul li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:1px;background:var(--c-accent)}
.article__body ol{list-style:decimal}
.article__body ol li{margin-bottom:.5rem;padding-left:.3rem}
.article__body blockquote{
  margin:2rem 0;padding:0 0 0 1.5rem;border-left:2px solid var(--c-accent);
  font-family:var(--f-head);font-size:1.3rem;line-height:1.5;color:var(--c-primary);
}
.article__body a{color:var(--c-primary);border-bottom:1px solid var(--c-accent)}

.article__cta{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.75rem;
  border-top:1px solid var(--c-primary);
}
.article__cta-title{font-family:var(--f-head);font-size:1.6rem;font-weight:600;color:var(--c-primary);margin-bottom:.3rem}
.article__cta p{font-size:.92rem}

/* ---------- Trang bài viết ---------- */
.prose{max-width:680px;margin-inline:auto}
.prose__thumb{margin-bottom:2rem}
.prose h2{margin-top:2.5rem;font-size:2rem}
.post-meta{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-body)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem 2.5rem}
.card{border-top:1px solid var(--c-line);padding-top:1.5rem}
.card__media img{aspect-ratio:3/2;object-fit:cover;width:100%;margin-bottom:1.25rem}
.card__title{font-family:var(--f-head);font-size:1.5rem;font-weight:600;line-height:1.2;margin-bottom:.5rem}
.card__desc{font-size:.87rem;line-height:1.7;margin:0}

/* ---------- Hiệu ứng vào khung nhìn: kín đáo hơn ---------- */
.reveal{opacity:0;translate:0 12px;transition:opacity .7s cubic-bezier(.2,.8,.2,1),translate .7s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;translate:0 0}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .overview,.location,.payment,.progress,.developer,.contact{grid-template-columns:1fr}
  .overview__cta{position:static}
  .developer__img{aspect-ratio:16/10}
  .contact__form{order:-1}
  .gallery{grid-template-columns:repeat(4,1fr)}
  .gallery__item,.gallery__item:first-child,.gallery__item:nth-child(4),.gallery__item:nth-child(5){grid-column:span 2;grid-row:auto}
  .gallery__item:first-child img{aspect-ratio:3/2;min-height:0}
}

@media (max-width:768px){
  .section{padding-block:3.5rem}
  .lead-form__row{grid-template-columns:1fr;gap:0}
  .site-footer__grid{grid-template-columns:1fr;gap:2.5rem}
  body{padding-bottom:60px}
  .spec-table th[scope=row]{width:46%;padding-right:1rem;font-size:.64rem}
  .spec-table th,.spec-table td{padding:.85rem 0;font-size:.87rem}
  .usp{padding:1.75rem 0 2rem}
  .product{padding:1.75rem 0 2rem}
  .news__link{padding:1.5rem 0 1.75rem}
  .article__grid{grid-template-columns:1fr;gap:2rem}
  .toc{position:static;background:var(--c-soft);padding:1.25rem;border-top-width:2px}
  .article__body p{font-size:1rem}
  .news__title{font-size:1.25rem}
  .timeline__item{grid-template-columns:1fr;gap:.5rem}
  .timeline__body{grid-column:1}
  .gallery,.amenity-photos{grid-template-columns:repeat(2,1fr)}
  .contact__direct{gap:1.75rem}
  .tabs__nav{gap:1.25rem}
  .faq__q h3{font-size:1.15rem}
  .section__title{font-size:clamp(1.85rem,7vw,2.4rem)}
  .section__eyebrow{gap:.8rem;margin-bottom:1.35rem}
  .section__eyebrow::before{width:38px;height:38px;font-size:1rem}
}

@media print{
  .site-header,.sticky-cta,.popup,.intro__actions,.hero__play,.hero__scroll,.lead-form,.site-footer__links{display:none!important}
  .section{padding-block:1rem;break-inside:avoid}
  body{padding-bottom:0;background:#fff}
}

/* ==========================================================================
 * NHỊP BỐ CỤC — do bộ giao diện quyết định
 * ==========================================================================
 *
 * Mười bốn mục cùng một nền, cùng một khuôn thì cuộn mãi vẫn thấy một kiểu:
 * từng mục sạch nhưng tổng thể phẳng. Bốn kiểu nền dưới đây tạo nhịp, và mỗi
 * bộ giao diện gán kiểu khác nhau cho từng mục.
 * ========================================================================== */

/* Nền dịu hơn một bậc — tách khối mà không cắt mạch đọc. */

/* Mục bày ảnh: bỏ đệm hai bên cho ảnh chạy sát mép màn hình. */
.section--anh{padding-inline:0}
.section--anh .section__head{padding-inline:clamp(1rem,5vw,4rem)}
.section--anh .container{max-width:none;padding-inline:0}

/* Độ thoáng do bộ giao diện chỉnh, không sửa từng mục. */
.section{padding-block:calc(clamp(4rem,9vw,7.5rem) * var(--do-thoang,1))}
.btn{border-width:var(--vien-nut,1px)}

/* ==========================================================================
 * ẢNH NỀN PHỦ LỚP TỐI
 * ==========================================================================
 *
 * Đây là thứ tạo chênh lệch lớn nhất giữa một trang trông "tự làm" và một
 * trang trông chuyên nghiệp: mục có ảnh nền phủ lớp tối thay vì nền phẳng
 * một màu.
 *
 * Lớp phủ là bắt buộc, không phải trang trí — chữ trắng đặt thẳng lên ảnh
 * phối cảnh sáng thì không đọc được. Lớp phủ giữ tương phản ở mọi tấm ảnh.
 * ========================================================================== */

.section--anh-nen{position:relative;isolation:isolate;overflow:hidden}

/* Ảnh nền. Chú thích để ngoài khối: chú thích nằm giữa các dòng khai báo từng
   làm trình duyệt bỏ qua phần còn lại của khối. */
.section--anh-nen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--nen-anh);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Lớp phủ bắt buộc: chữ trắng đặt thẳng lên ảnh phối cảnh sáng thì không đọc
   được. Dùng rgba đặc thay vì color-mix để chạy được trên mọi trình duyệt. */
.section--anh-nen::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(12,18,32,.84);
}

/* Không có ảnh thì lớp phủ cho nền tối phẳng, mục không bị trong suốt. */
.section--anh-nen:not([style*="--nen-anh"])::after{background:var(--c-dark)}

@media(min-width:1025px){
  /* Ảnh đứng yên khi cuộn, tạo chiều sâu. Trên máy nhỏ thì tắt: tốn hiệu năng
     và lỗi trên iOS. */
  .section--anh-nen::before{background-attachment:fixed}
}

.section--anh-nen .stat,
.section--anh-nen .usp,
.section--anh-nen .conn-group{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  padding:1.5rem;
  backdrop-filter:blur(6px);
}

/* ---------- Biến do bộ giao diện chỉnh ---------- */
.btn{border-radius:var(--bo-nut,var(--radius))}
.section__title{text-transform:var(--hoa-tieu-de,none)}

/*
 * Dải kem ngắt mạch giữa chuỗi mục nền tối.
 *
 * Phải lật TOÀN BỘ biến màu trong dải, không chỉ tô lại tiêu đề. Bộ nền tối
 * đặt --c-body là xám sáng; giữ nguyên thì chữ thân bài sáng nằm trên nền kem
 * sáng, đọc không ra. Đổi biến thì mọi thành phần bên trong tự theo.
 */
.section--kem{
  --c-paper:#eee4dd;
  --c-soft:#e5d9d0;
  --c-primary:#161311;
  --c-body:#4a423c;
  --c-line:rgba(0,0,0,.14);
  --c-accent:#9c5a34;

  background:var(--c-paper);
  color:var(--c-body);
}
.section--kem .section__eyebrow{color:#7a6a5e}
.section--kem .section__eyebrow::before{border-color:rgba(0,0,0,.2);color:#7a6a5e}
.section--kem .btn--outline{border-color:rgba(0,0,0,.25);color:#161311}
.section--kem .btn--outline:hover{background:#161311;color:#eee4dd;border-color:#161311}

/* ==========================================================================
 * BẢNG THÔNG SỐ GỌN
 * ==========================================================================
 * Mười bảy dòng liền một khối làm mắt trôi. Gập còn tám dòng, phần còn lại vẫn
 * nằm trong HTML cho Google đọc, người dùng bấm mới mở.
 * ========================================================================== */

.spec-table--gap tr.is-an{display:none}
.spec-table--gap.la-mo tr.is-an{display:table-row}

.spec-table__them{
  margin-top:1.1rem;padding:.7rem 1.3rem;
  font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-primary);background:transparent;
  border:1px solid var(--c-line);border-radius:var(--bo-nut,var(--radius));
  cursor:pointer;transition:border-color .2s,color .2s;
}
.spec-table__them:hover{border-color:var(--c-accent);color:var(--c-accent)}

/* Dấu ° thay cho cụm "theo thông tin công bố" lặp ở từng dòng. */
.spec-table__dau{color:var(--c-accent);font-size:.9em;margin-left:.15em}
.spec-table__chu{
  margin-top:1rem;font-size:.78rem;line-height:1.6;opacity:.72;
}
.spec-table__chu span{color:var(--c-accent)}

/* ==========================================================================
 * KHỐI NỀN SÁNG NẰM TRONG MỤC NỀN TỐI
 * ==========================================================================
 *
 * Thẻ nền trắng đặt trong mục nền tối sẽ thừa hưởng màu chữ sáng của mục —
 * chữ trắng trên nền trắng, mất hẳn.
 *
 * Neo theo CHÍNH KHỐI chứ không theo mục cha: khối này lúc nào cũng nền trắng,
 * còn mục cha có thể là --dark, --soft hay --anh-nen tuỳ bộ giao diện. Neo
 * theo cha thì đổi bộ một cái là lỗi quay lại.
 *
 * Lật toàn bộ biến màu, không tô lại từng dòng: có biến thì mọi thành phần bên
 * trong tự theo, kể cả phần thêm sau này.
 * ========================================================================== */

.overview__cta,
.khoi-sang{
  --c-paper:#ffffff;
  --c-soft:#f4f2ef;
  --c-primary:#161311;
  --c-body:#4a423c;
  --c-line:rgba(0,0,0,.14);
  --c-accent-lt:#9c5a34;

  color:var(--c-body);
}
.overview__cta h3,.overview__cta h4,
.khoi-sang h3,.khoi-sang h4{color:var(--c-primary)}

.overview__cta p,.overview__cta label,.overview__cta li,.overview__cta span,
.khoi-sang p,.khoi-sang label,.khoi-sang li{color:var(--c-body)}

.overview__cta input,.overview__cta select,.overview__cta textarea,
.khoi-sang input,.khoi-sang select,.khoi-sang textarea{
  color:var(--c-primary);
  background:#fff;
  border-color:var(--c-line);
}
.overview__cta a{color:var(--c-accent-lt)}

/* ==========================================================================
 * ĐOẠN TRẢ LỜI DÀI — GẬP BẰNG CSS
 * ==========================================================================
 * Cắt bằng CSS chứ không cắt chuỗi: chữ vẫn nằm đủ trong HTML nên Google và
 * AI Overview đọc trọn, mà mắt người chỉ thấy ba dòng.
 * ========================================================================== */

/* p.answer--gap chứ không phải .answer--gap: critical.css đặt .answer thành
   display:flow-root, mà line-clamp chỉ chạy với -webkit-box. Cùng độ ưu tiên
   thì luật nào tải sau thắng — critical.css lại nằm trong <head> inline nên
   luôn sau. Thêm tên thẻ để chắc chắn thắng. */
p.answer--gap{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
p.answer--gap.la-mo{
  display:block;
  overflow:visible;
}
.answer__them{
  display:inline-block;margin-top:.6rem;padding:0;
  font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-accent);background:none;border:0;border-bottom:1px solid currentColor;
  cursor:pointer;
}
.answer__them:hover{color:var(--c-primary)}

/* Không có JavaScript thì hiện đủ, đừng giấu mất nội dung. */
.no-js .answer--gap{display:block;-webkit-line-clamp:none;overflow:visible}
.no-js .answer__them{display:none}

/* ==========================================================================
 * MỤC TOÀN MÀN HÌNH — KIỂU SLIDE
 * ==========================================================================
 *
 * Mỗi mục chiếm trọn một màn hình, cuộn tới đâu bám tới đó.
 *
 * KHÔNG ảnh hưởng SEO: đây chỉ là cách trình bày. Chữ vẫn là chữ thật trong
 * HTML, không phải ảnh, không nạp bằng JavaScript — Google đọc y như trước.
 *
 * Dùng min-height chứ không phải height: nội dung dài hơn màn hình thì mục tự
 * cao ra, không bị cắt. Đây là khác biệt giữa "kiểu slide" và "ép vào slide".
 * ========================================================================== */

.section--man{
  min-height:100svh;
  display:grid;
  align-content:center;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}

/* Cuộn bám kiểu "proximity" chứ không "mandatory".
   Mandatory giành quyền cuộn với người dùng: lỡ tay một cái là nhảy nguyên
   màn, và mục dài hơn màn hình thì không xem hết được. */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity}
}

/* Mũi tên gợi ý cuộn tiếp, chỉ ở mục toàn màn. */
.section--man .section__head{margin-bottom:0}
.section--man .container{width:100%}

@media (max-width:1024px){
  /* Điện thoại: bỏ chiều cao cố định. Bàn phím ảo và thanh địa chỉ co giãn
     làm 100svh nhảy liên tục, chữ tiếng Việt lại dài hơn tiếng Anh nên rất
     dễ tràn. */
  .section--man{min-height:0;display:block}
  html{scroll-snap-type:none}
}

/* ==========================================================================
 * MÀN ẢNH XEN GIỮA
 * ==========================================================================
 * Một tấm ảnh trọn màn hình, phủ lớp tối, trên đó một câu ngắn.
 * Đây là thứ tạo nhịp kiểu trình chiếu mà không phải cắt chữ của mục nào.
 * ========================================================================== */

.man-anh{
  position:relative;
  min-height:86svh;
  display:grid;
  align-content:end;
  overflow:hidden;
  scroll-snap-align:start;
  isolation:isolate;
}
.man-anh__img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
}
/* Lớp phủ dày ở đáy, nhạt ở đỉnh: chữ nằm dưới nên chỉ cần tối phần dưới,
   phần trên để ảnh được thấy rõ. */
.man-anh::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,15,26,.92) 0%,rgba(10,15,26,.55) 38%,rgba(10,15,26,.12) 72%,rgba(10,15,26,0) 100%);
}
.man-anh__noi{
  padding:clamp(2rem,6vw,5rem) clamp(1.25rem,6vw,5rem) clamp(3rem,7vw,6rem);

  /* 56ch tính theo cỡ chữ THƯỜNG (17px) nên ra 545px, trong khi câu tiêu đề
     dùng cỡ 54px — bị bó thành bốn dòng. Đặt theo pixel để câu đủ chỗ. */
  max-width:min(92vw,900px);
}
.man-anh__nhan{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 .9rem;
}
.man-anh__cau{
  font-family:var(--f-head);
  font-size:clamp(1.9rem,4.2vw,3.4rem);
  line-height:1.12;font-weight:600;color:#fff;margin:0;

  /* Cân dòng cho khỏi rơi một chữ xuống dòng cuối. */
  text-wrap:balance;
}
.man-anh__phu{
  margin:1rem 0 0;font-size:1.02rem;line-height:1.7;color:rgba(255,255,255,.82);
}

@media (max-width:1024px){
  .man-anh{min-height:64svh}
}

/* Form đặt trên màn ảnh: nền mờ để đọc được chữ mà vẫn thấy ảnh phía sau. */
.man-anh .lead-form{
  margin-top:1.75rem;max-width:520px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  padding:1.25rem;
  backdrop-filter:blur(10px);
}
.man-anh .lead-form input,
.man-anh .lead-form select,
.man-anh .lead-form textarea{
  background:rgba(255,255,255,.92);color:#161311;border-color:transparent;
}
.man-anh .lead-form label,
.man-anh .lead-form .lead-form__note{color:rgba(255,255,255,.82)}

/* ==========================================================================
 * THANH TIẾN TRÌNH ĐỌC
 * ==========================================================================
 * Trang dài hơn hai mươi màn hình thì khách mất phương hướng: không biết còn
 * bao nhiêu, không biết đang ở đâu. Trang mẫu không có thứ này — đó là chỗ
 * mình làm tốt hơn được.
 *
 * Một vạch mảnh dưới đáy thanh đầu trang, không chiếm thêm chỗ nào.
 * ========================================================================== */

.tien-trinh{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:transparent;pointer-events:none;
}
.tien-trinh__thanh{
  height:100%;width:0;background:var(--c-accent);
  transform-origin:left;transition:width .12s linear;
}
@media (prefers-reduced-motion:reduce){
  .tien-trinh__thanh{transition:none}
}

/* Số thứ tự trong tiêu đề luận điểm: màu nhấn, hơi lùi để chữ vẫn dẫn dắt. */
.usp__so{color:var(--c-accent);font-variant-numeric:tabular-nums;margin-right:.35em}
ol.usp-grid{list-style:none;counter-reset:none}