/* Trang chủ v8.4 (22/10, Hiếu: ảnh hero quê, font digital, trang dài lộn xộn).
   Nạp sau cùng ở trang chủ. Chia trang thành 6 chương, mỗi chương một nền, khoảng đệm thống nhất:
   1 Giới thiệu (trắng) - 2 Chọn pallet: bộ tìm + so sánh kích thước (xám) - catalog (dải tối)
   3 Sản phẩm và hành trình: cấu tạo (trắng), hành trình (xám nhạt) - 4 Năng lực + triển lãm (trắng)
   5 Tư vấn + quy trình mua (xám) - 6 Tra cứu + bài viết (trắng). */
:root { --chap: 96px; --chap-in: 56px; --chap-bg: #F4F5F7; }
@media (max-width: 720px) { :root { --chap: 64px; --chap-in: 40px; } }

/* ---------- Hero: ảnh kho thật, chữ sans, không xoay, không chữ mono ---------- */
.hx9 .hx2__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 56px; }
.hx9 .hx2__eyebrow { font: 600 16px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--steel-2); border-bottom: 0; padding: 0 0 0 14px; margin: 0 0 18px; border-left: 4px solid var(--orange); }
.hx9 .hx2__title { margin-bottom: 22px; }
.hx9 .hx2__name { display: block; font: 800 clamp(52px, 5.4vw, 84px)/.95 var(--display); letter-spacing: -.03em; color: #14203F; white-space: nowrap; }
.hx9 .hx2__sub { display: block; margin-top: 14px; font: 700 clamp(22px, 2.1vw, 31px)/1.18 var(--display); letter-spacing: -.01em; color: #14203F; max-width: 620px; }
.hx9 .hx2__lede { border-left: 0; padding-left: 0; max-width: 600px; font-size: 18px; line-height: 1.6; color: var(--ink); margin: 0 0 28px; }
.hx9 .hx2__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hx9 .hx2__stats { margin-top: 40px; border-top: 2px solid var(--steel); border-bottom: 0; }
.hx9 .hx2__stats li { padding: 18px 16px 4px 0; }
.hx9 .hx2__stats li + li { padding-left: 18px; }
.hx9 .hx2__stats strong { font: 800 clamp(28px, 2.4vw, 36px)/1 var(--display); letter-spacing: -.02em; color: #14203F; }
.hx9 .hx2__stats span { margin-top: 8px; font: 500 15px/1.35 var(--font); letter-spacing: 0; text-transform: none; color: var(--muted); }
.hx9 .hx2__photo { margin: 0; align-self: center; }
.hx9 .hx2__photo img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 0; box-shadow: none; transform: none !important; }
.hx9 .hx2__photo figcaption { padding: 10px 0 0; font: 500 15px/1.45 var(--font); color: var(--muted); }
.hx9 .hx2__lines { padding: 22px 0 30px; }
.hx9 .hx2__lines-h { font: 700 15px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--steel-2); }

/* ---------- Nhịp chương ---------- */
main > section { border-top: 0; border-bottom: 0; }
.hx9 { border-bottom: 1px solid var(--line); }
.finder { padding: var(--chap) 0 var(--chap-in); background: var(--sand); }
.sizes { padding: 0 0 var(--chap); background: var(--sand); }
.sizes > .wrap { border-top: 1px solid var(--line); padding-top: var(--chap-in); }
.anat { padding: var(--chap) 0; background: #fff; }
.jr { padding: var(--chap) 0; background: var(--chap-bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.jr .jr__slide figcaption, .jr .jr__fig figcaption { background: #fff; }
.cap { padding: var(--chap) 0 var(--chap-in); background: #fff; }
.expo { padding: 0 0 var(--chap); background: #fff; }
.expo > .wrap { border-top: 1px solid var(--line); padding-top: var(--chap-in); }
.team { padding: var(--chap) 0; background: var(--sand); border-top: 1px solid var(--line); }
.lookup { padding: var(--chap) 0 var(--chap-in); background: #fff; border-top: 1px solid var(--line); }
.news { padding: 0 0 var(--chap); background: #fff; }
.news > .wrap { border-top: 1px solid var(--line); padding-top: var(--chap-in); }

/* ---------- Quy trình mua hàng (gộp vào chương Tư vấn) ---------- */
.buy { list-style: none; margin: var(--chap-in) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.buy li { border-top: 3px solid var(--steel); padding-top: 16px; }
.buy b { display: block; font: 800 15px/1 var(--display); letter-spacing: .06em; color: var(--orange-ink, #A85500); margin-bottom: 10px; }
.buy h3 { font: 700 19px/1.25 var(--display); color: #14203F; margin: 0 0 8px; }
.buy p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

@media (max-width: 1023px) {
  .hx9 .hx2__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 40px; }
  .hx9 .hx2__photo { max-width: 760px; }
  .buy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 720px) {
  .hx9 .hx2__grid { padding-top: 28px; padding-bottom: 36px; }
  .hx9 .hx2__name { white-space: normal; font-size: clamp(46px, 14vw, 64px); }
  .hx9 .hx2__lede { font-size: 17px; }
  .hx9 .hx2__cta .btn { flex: 1 1 100%; text-align: center; }
  .hx9 .hx2__stats li + li { padding-left: 14px; }
  .hx9 .hx2__stats li:nth-child(3) { padding-left: 0; }
  .buy { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
.hx9 .hx2__photo { display: block; }
.hx9 .hx2__photo figcaption { text-align: left; max-width: none; margin-inline: 0; }
/* >= 1024: ảnh luôn bên phải (site.css đảo order ở <= 1100); số liệu 4 cột chỉ khi cột chữ đủ rộng */
@media (min-width: 1024px) { .hx9 .hx2__photo { order: 0; } }
@media (min-width: 1280px) {
  .hx9 .hx2__stats { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .hx9 .hx2__stats li { padding-right: 18px; }
  .hx9 .hx2__stats span { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hx9 .hx2__grid { gap: 40px; }
  .hx9 .hx2__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx9 .hx2__stats li:nth-child(3) { padding-left: 0; }
}
/* điện thoại: bỏ thẻ bo góc + bóng đổ của site.css, chữ nằm phẳng dưới ảnh */
@media (max-width: 720px) {
  .hx9 .hx2__copy { margin-top: 0; padding: 22px 0 0; background: none; border-radius: 0; box-shadow: none; }
}