/* ==========================================================================
   VPPA PICKLEBALL — Design System v3 "Daylight"
   --------------------------------------------------------------------------
   Nền sáng ấm làm chủ đạo, khoảng thở rộng, bóng đổ mềm.
   Nền tối chỉ dùng làm điểm nhấn: hero, một dải nội dung, chân trang.
   Mọi thành phần đọc token → đổi ngữ cảnh chỉ bằng cách đổi token.
   Màu gốc từ logo: đỏ #ED3825 (chữ VPA) · xanh chanh #B1D823 (quả bóng)
   ========================================================================== */

/* ---------- 1. Token ---------- */
:root {
  color-scheme: light;

  /* Thương hiệu */
  --red: #ED3825;
  --ember: #FF6A50;        /* đỏ nâng sáng, chỉ dùng trên nền tối */
  --red-deep: #B0230F;
  --lime: #B1D823;
  --lime-lift: #CFEA6B;

  /* Nền sáng — trắng ngả ấm, không phải trắng máy */
  --paper-0: #FBFAF7;
  --paper-1: #FFFFFF;
  --paper-2: #F2EFE9;
  --paper-3: #E8E4DB;

  /* Nền tối — chỉ cho các dải điểm nhấn */
  --ink-950: #0A0C11;
  --ink-900: #0E1116;
  --ink-850: #151921;

  /* ----- Token ngữ cảnh: mặc định NỀN SÁNG ----- */
  --ground: var(--paper-0);
  --panel: linear-gradient(180deg, #FFFFFF, #FDFCFA);
  --panel-solid: #FFFFFF;
  --hairline: rgba(32, 26, 18, .13);
  --hairline-soft: rgba(32, 26, 18, .075);
  --tx: #15171D;
  --tx-2: #565C67;
  --tx-3: #666C75;
  --accent: var(--red);
  --accent-bg: rgba(237, 56, 37, .075);
  --accent-bd: rgba(237, 56, 37, .16);
  --lime-bg: rgba(177, 216, 35, .16);
  --lime-fg: #5F7B05;
  --data: #6C8A08;
  --field-bg: #FFFFFF;
  /* Bóng đổ ngả ấm — mềm và "đắt" hơn bóng xám lạnh */
  --sh-1: 0 1px 2px rgba(38, 30, 20, .035), 0 10px 28px -16px rgba(38, 30, 20, .18);
  --sh-2: 0 2px 6px rgba(38, 30, 20, .05), 0 34px 64px -32px rgba(38, 30, 20, .3);
  --sh-glow: 0 24px 60px -28px rgba(237, 56, 37, .42);

  /* Chữ */
  --f-display: 'Archivo', 'Be Vietnam Pro', system-ui, sans-serif;
  --f-body: 'Manrope', 'Be Vietnam Pro', system-ui, sans-serif;

  --h1: clamp(2.35rem, 4.7vw, 4.5rem);
  --h2: clamp(1.95rem, 3.4vw, 3.1rem);
  --h3: clamp(1.22rem, 1.7vw, 1.55rem);
  --lead: clamp(1.02rem, 1.15vw, 1.16rem);

  /* Nhịp */
  --sp-section: clamp(84px, 9vw, 152px);
  --container: 1320px;
  --gutter: clamp(22px, 4.4vw, 56px);

  --r-sm: 12px;
  --r: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* Dải ngà — tạo nhịp giữa các mục trắng */
.section--paper { --ground: var(--paper-2); --hairline-soft: rgba(32, 26, 18, .09); }

/* ----- Ngữ cảnh NỀN TỐI: chỉ đổi token ----- */
.section--dark,
.section--ink2,
.hero,
.page-hero,
.site-footer,
.topbar,
.on-dark {
  color-scheme: dark;
  --ground: var(--ink-950);
  --panel: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  --panel-solid: var(--ink-850);
  --hairline: rgba(255, 255, 255, .12);
  --hairline-soft: rgba(255, 255, 255, .07);
  --tx: #F2F1EE;
  --tx-2: #A8ADB7;
  --tx-3: #868C96;
  --accent: var(--ember);
  --accent-bg: rgba(237, 56, 37, .14);
  --accent-bd: rgba(237, 56, 37, .24);
  --lime-bg: rgba(177, 216, 35, .13);
  --lime-fg: var(--lime-lift);
  --data: var(--lime-lift);
  --field-bg: rgba(255, 255, 255, .05);
  --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -16px rgba(0,0,0,.6);
  --sh-2: 0 2px 6px rgba(0,0,0,.34), 0 34px 64px -32px rgba(0,0,0,.8);
}
.section--ink2 { --ground: var(--ink-900); }

/* ---------- 2. Reset & nền ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  scroll-padding-top: 104px; overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.78;
  color: var(--tx);
  background: var(--paper-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 {
  margin: 0; font-family: var(--f-display); font-weight: 700;
  line-height: 1.1; letter-spacing: -.028em; color: var(--tx);
  text-wrap: balance;
}
/* line-height rộng hơn để dấu tiếng Việt trên chữ hoa (Ế, Ỉ, Ệ, Ấ) không bị cụt */
h1 { font-size: var(--h1); font-weight: 800; letter-spacing: -.038em; line-height: 1.12; }
h2 { font-size: var(--h2); letter-spacing: -.032em; }
h3 { font-size: var(--h3); }
h4 { font-size: 1.06rem; letter-spacing: -.02em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
b, strong { font-weight: 700; color: var(--tx); }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: #CFC9BE; border-radius: 99px; border: 3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: #BCB5A8; }

/* Vân giấy rất nhẹ — chống cảm giác màu phẳng, gần như không nhìn thấy */
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 960px; }

.section {
  position: relative; overflow: hidden;
  padding-block: var(--sp-section);
  background: var(--ground); color: var(--tx);
}
.section--tight { padding-block: clamp(56px, 6.5vw, 96px); }
.section > .container { position: relative; z-index: 2; }

/* Kẻ tóc phân mục — chỉ giữa hai mục cùng tông sáng, mờ dần hai đầu */
.section + .section::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-soft) 22%, var(--hairline-soft) 78%, transparent);
}
.section--dark + .section::before,
.section--ink2 + .section::before,
.section--paper + .section:not(.section--paper)::before,
.section + .section--dark::before,
.section + .section--ink2::before,
.section + .section--paper::before { display: none; }

/* Ánh sáng nhạt phía trên mục — đủ để tách lớp, không thành mảng màu */
.section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(46% 34% at 12% 0%, rgba(237, 56, 37, .035), transparent 66%);
}
.section:nth-of-type(even)::after {
  background: radial-gradient(46% 34% at 90% 0%, rgba(237, 56, 37, .03), transparent 66%);
}
.section--dark::after, .section--ink2::after {
  background: radial-gradient(52% 40% at 12% 0%, rgba(237, 56, 37, .11), transparent 64%);
}
/* Dải tối là than xanh có chuyển sắc, không phải hình chữ nhật đen phẳng */
.section--dark, .section--ink2 {
  background-image: linear-gradient(172deg, #1A202B 0%, #10141B 58%, #141922 100%);
}
/* Dải ngà nổi lên như một tấm vật liệu, không cắt phẳng */
.section--paper { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 60px 70px -80px rgba(60,48,32,.3); }

.grid { display: grid; gap: clamp(16px, 1.6vw, 24px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.center { text-align: center; }
.mt-s { margin-top: 18px; } .mt-m { margin-top: 34px; } .mt-l { margin-top: 58px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hide-sm { display: none; }
@media (min-width: 760px) { .hide-sm { display: block; } }

/* ---------- 4. Tiêu đề mục ---------- */
/* Tên đầu mục: cỡ chữ lớn hơn hẳn để dẫn mắt vào từng phần nội dung */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-display);
  font-size: clamp(.86rem, 1.05vw, 1rem); font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; line-height: 1.35;
  color: var(--accent); margin-bottom: 20px; font-variant-numeric: tabular-nums;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: currentColor; opacity: .85; flex: none; }
.eyebrow--light { color: var(--lime-fg); }
.eyebrow--center { justify-content: center; }

.section-head { max-width: 760px; }
.section-head--center { margin-inline: auto; text-align: center; }
.lead { font-size: var(--lead); color: var(--tx-2); line-height: 1.8; margin-top: 22px; }
.head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; margin-bottom: clamp(40px, 4.5vw, 68px);
}
.hl { color: var(--accent); }
.hl-lime { color: var(--lime-fg); }

/* ---------- 5. Nút ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border-radius: var(--r-pill); border: 1px solid transparent;
  background: linear-gradient(180deg, #F2452F, var(--red));
  color: #fff; font-family: var(--f-body); font-weight: 700; font-size: .94rem;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 12px 28px -16px rgba(237,56,37,.85);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), background .3s, color .3s, border-color .3s;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
  transition: transform .75s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 20px 42px -18px rgba(237,56,37,.9); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--ghost {
  background: var(--panel-solid); color: var(--tx); border-color: var(--hairline);
  box-shadow: var(--sh-1);
}
.btn--ghost:hover { background: var(--tx); color: var(--panel-solid); border-color: var(--tx); box-shadow: var(--sh-1); }
.btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); box-shadow: none; }
.btn--light:hover { background: #fff; color: var(--ink-950); border-color: #fff; box-shadow: none; }
.btn--lime {
  background: linear-gradient(180deg, #C3E63A, var(--lime)); color: #10130A;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 12px 28px -16px rgba(177,216,35,.8);
}
.btn--sm { padding: 11px 22px; font-size: .865rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .9rem; color: var(--accent);
  transition: gap .45s var(--ease);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.link-arrow:hover { gap: 16px; }
.link-arrow:hover svg { transform: translate(2px, -2px); }
.link-arrow--light { color: var(--lime-fg); }

/* ---------- 6. Thanh trên & điều hướng ---------- */
/* Dải đen trên cùng: chỉ đặt TÊN CÔNG TY dạng chữ in, căn giữa.
   Số điện thoại, email và các kênh liên hệ đã dời hẳn xuống header,
   cụm nút nổi góc phải và chân trang. */
.topbar {
  background: var(--ink-950); color: var(--tx-2); font-size: .8rem;
  position: relative; z-index: 91;
}
.topbar__in { display: flex; justify-content: center; align-items: center; gap: 18px; height: 44px; }
.topbar__name {
  display: inline-flex; align-items: center; gap: 16px; min-width: 0;
  font-family: var(--f-display);
  font-size: clamp(.68rem, .92vw, .84rem); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: #EFEDE8;
}
.topbar__name::before, .topbar__name::after {
  content: ""; height: 1px; width: clamp(20px, 3.6vw, 52px); flex: none;
  background: linear-gradient(90deg, transparent, var(--ember));
}
.topbar__name::after { background: linear-gradient(90deg, var(--ember), transparent); }
.topbar__name .short { display: none; }
@media (max-width: 900px) {
  .topbar__name .full { display: none; }
  .topbar__name .short { display: inline; }
}

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(251, 250, 247, .82);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease-soft), border-color .4s, box-shadow .4s;
}
.site-header.is-stuck {
  background: rgba(251, 250, 247, .94);
  border-bottom-color: var(--hairline-soft);
  box-shadow: 0 14px 30px -26px rgba(38, 30, 20, .5);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 26px; height: 82px; }
.brand { display: flex; align-items: center; gap: 14px; flex: none; }
.brand img { height: 38px; width: auto; }
/* Tên công ty đã chuyển lên dải đen trên cùng — header chỉ giữ logo */
.nav__menu { display: flex; align-items: center; gap: 2px; }
.nav__menu > li > a {
  position: relative; display: block; padding: 10px 16px; white-space: nowrap;
  font-size: .885rem; font-weight: 600; color: var(--tx-2);
  transition: color .3s;
}
.nav__menu > li > a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 1.5px;
  background: var(--red); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.nav__menu > li > a:hover { color: var(--tx); }
.nav__menu > li > a:hover::after, .nav__menu > li > a.is-active::after { transform: scaleX(1); }
.nav__menu > li > a.is-active { color: var(--tx); }

.nav__cta { display: flex; align-items: center; gap: 14px; flex: none; }
.nav__phone { display: none; }
@media (min-width: 1180px) {
  .nav__phone { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
  .nav__phone span { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tx-3); }
  .nav__phone i {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-bd);
  }
  .nav__phone svg { width: 16px; height: 16px; }
}
.nav__toggle {
  position: relative; width: 44px; height: 44px;
  border: 1px solid var(--hairline); background: var(--panel-solid); border-radius: 13px; cursor: pointer;
}
/* Ba vạch neo tuyệt đối vào tâm nút — khi mở, hai vạch chồng khít nhau
   thành dấu X chuẩn, không phụ thuộc chiều cao dòng của bố cục. */
.nav__toggle span {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 1.6px;
  background: var(--tx); border-radius: 2px;
  transform: translate(-50%, calc(-50% + var(--y, 0px)));
  transition: transform .4s var(--ease), opacity .2s;
}
.nav__toggle span:nth-child(1) { --y: -6px; }
.nav__toggle span:nth-child(3) { --y: 6px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }
@media (min-width: 1024px) { .nav__toggle { display: none; } }
@media (max-width: 1023px) {
  .nav__menu {
    /* top được JS gán theo đáy header thật, biến dưới chỉ là dự phòng */
    position: fixed; top: var(--menu-top, 106px); left: 0; right: 0; bottom: auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #FFFFFF;
    padding: 14px var(--gutter) 32px; border-bottom: 1px solid var(--hairline-soft);
    box-shadow: var(--sh-2);
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease);
    max-height: calc(100dvh - var(--menu-top, 106px)); overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__menu > li > a { padding: 16px 4px; font-size: 1.06rem; }
  .nav__menu > li > a::after { left: 4px; right: auto; width: 26px; }
  .nav__menu > li + li { border-top: 1px solid var(--hairline-soft); }
}

/* ---------- 7. Hero ---------- */
.hero { position: relative; background: var(--ink-950); color: #fff; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: -6% 0 0; z-index: -2; will-change: transform; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: 1;
  filter: saturate(1.06) contrast(1.03) brightness(1.09);
  animation: heroDrift 30s var(--ease-soft) infinite alternate;
}
@keyframes heroDrift { from { transform: scale(1.02); } to { transform: scale(1.1); } }
/* Lớp phủ chỉ đậm ở phần đặt chữ — ảnh vẫn đọc được là một bức ảnh, không thành mảng đen */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,12,17,.9) 0%, rgba(10,12,17,.7) 28%, rgba(10,12,17,.22) 58%, rgba(10,12,17,.1) 100%),
    linear-gradient(180deg, rgba(10,12,17,.42) 0%, transparent 24%, transparent 58%, rgba(10,12,17,.86) 100%);
}
.hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(340px 340px at var(--mx, 50%) var(--my, 40%), rgba(237,56,37,.14), transparent 70%);
  transition: opacity .8s var(--ease-soft);
}
.hero:hover .hero__glow { opacity: 1; }
@media (hover: none) { .hero__glow { display: none; } }

.hero__in { position: relative; padding-block: clamp(84px, 12vw, 168px) clamp(60px, 7vw, 104px); }
.hero__badge {
  display: inline-flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px;
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill);
  background: rgba(255,255,255,.08); backdrop-filter: blur(10px);
  font-size: .78rem; font-weight: 500; color: #E4E6EA; margin-bottom: 32px;
}
.hero__badge b { color: #fff; font-weight: 700; letter-spacing: .04em; }
.hero__badge .dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #F2452F, var(--red)); color: #fff;
  font-size: .68rem; font-weight: 800; font-family: var(--f-display);
}
.hero h1 { max-width: 17ch; text-transform: uppercase; color: #fff; text-shadow: 0 2px 30px rgba(10,12,17,.5); }
/* Khung che dòng chừa thêm khoảng hở trên/dưới rồi kéo lại bằng margin âm:
   dấu thanh không bị cắt mà bố cục vẫn giữ nguyên nhịp. */
.hero h1 .l1, .hero h1 .l2 {
  display: block; overflow: hidden;
  padding-block: .14em .04em; margin-block: -.14em -.04em;
}
.hero h1 .l1 > span, .hero h1 .l2 > span { display: block; }
.hero h1 .l2 > span { color: #FF5238; }
.hero__sub {
  max-width: 46ch; font-size: clamp(1.02rem, 1.25vw, 1.2rem); color: #DDE0E5;
  margin-top: 30px; line-height: 1.78;
  text-shadow: 0 1px 3px rgba(10,12,17,.8), 0 2px 22px rgba(10,12,17,.9);
}
.hero__sub b { color: #fff; font-weight: 600; }
.hero__actions { margin-top: 42px; }
/* Biểu tượng VPA màu cam: thu còn ~½ cỡ cũ cho cân đối với tiêu đề bên trái */
.hero__logo-mark {
  position: absolute; right: calc(var(--gutter) - 2px); top: clamp(58px, 8vw, 104px);
  width: clamp(60px, 7vw, 98px); opacity: .95;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.7));
}
@media (max-width: 960px) { .hero__logo-mark { display: none; } }

.hero__stats {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(10,12,17,.35), rgba(10,12,17,.62));
  backdrop-filter: blur(6px);
}
.hero__stats li { padding: 30px 8px 34px; position: relative; }
.hero__stats li + li::before {
  content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.16) 30%, rgba(255,255,255,.16) 70%, transparent);
}
.hero__stats li + li { padding-left: clamp(16px, 2.4vw, 34px); }
.stat__num {
  display: flex; align-items: baseline; gap: 5px;
  font-family: var(--f-display); font-size: clamp(2rem, 3.6vw, 3.15rem);
  font-weight: 800; letter-spacing: -.05em; color: #fff; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__num .suffix { color: var(--lime-lift); font-size: .62em; font-weight: 700; }
.stat__label { font-size: clamp(.76rem, .9vw, .84rem); color: #B4B9C2; margin-top: 12px; line-height: 1.5; }
@media (max-width: 760px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
  .hero__stats li:nth-child(3)::before { display: none; }
  .hero__stats li:nth-child(3) { padding-left: 8px; }
  .hero__stats li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
}

/* Hero trang trong */
.page-hero { position: relative; background: var(--ink-950); color: #fff; overflow: hidden; isolation: isolate; }
.page-hero__bg { position: absolute; inset: 0; z-index: -2; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.page-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,12,17,.92) 8%, rgba(10,12,17,.6) 48%, rgba(10,12,17,.2) 82%),
    linear-gradient(180deg, rgba(10,12,17,.55), transparent 34%, rgba(10,12,17,.72));
}
.page-hero__in { padding-block: clamp(64px, 8vw, 124px) clamp(58px, 7vw, 102px); }
.page-hero h1 { font-size: clamp(2.05rem, 3.8vw, 3.5rem); text-transform: uppercase; max-width: 18ch; color: #fff; }
.page-hero p { max-width: 60ch; color: #D3D6DC; margin-top: 26px; font-size: var(--lead); line-height: 1.8; }
.page-hero p b { color: #fff; font-weight: 600; }
.crumbs {
  display: flex; gap: 12px; align-items: center; margin-bottom: 26px;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #9DA3AD;
}
.crumbs a:hover { color: #fff; }
.crumbs span { color: var(--ember); }

/* ---------- 8. Hoạ tiết vợt & bóng ---------- */
.ball-watermark {
  position: absolute; pointer-events: none; z-index: 1; opacity: .05;
  width: clamp(260px, 32vw, 480px); aspect-ratio: 1; color: var(--accent);
}
.ball-watermark--tr { top: -50px; right: -30px; }
.ball-watermark--bl { bottom: -60px; left: -40px; }
@media (max-width: 860px) { .ball-watermark { display: none; } }
.court-lines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(90deg, transparent 0 calc(50% - .5px), var(--hairline-soft) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent 0 calc(50% - .5px), var(--hairline-soft) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  background-size: 240px 240px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
}

/* ---------- 9. Thẻ ---------- */
.card {
  position: relative; height: 100%; isolation: isolate;
  background: var(--panel); background-color: var(--panel-solid);
  border: 1px solid var(--hairline-soft); border-radius: var(--r);
  padding: clamp(26px, 2.3vw, 34px);
  box-shadow: var(--sh-1);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: var(--hairline); }
.card__icon {
  width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent);
  border: 1px solid var(--accent-bd); margin-bottom: 22px;
}
.card__icon svg { width: 22px; height: 22px; }
.card__icon--lime { background: var(--lime-bg); color: var(--lime-fg); border-color: rgba(177,216,35,.34); }
.card__media {
  margin: calc(-1 * clamp(26px, 2.3vw, 34px)) calc(-1 * clamp(26px, 2.3vw, 34px)) 26px;
  border-radius: var(--r) var(--r) 0 0;
}
.card h3 { margin-bottom: 12px; }
.card p { color: var(--tx-2); font-size: .945rem; }
.card__num {
  position: absolute; top: 26px; right: 28px; font-family: var(--f-display);
  font-size: 2.4rem; font-weight: 800; letter-spacing: -.06em; line-height: 1;
  color: var(--tx); opacity: .08; font-variant-numeric: tabular-nums;
}

.ticks { display: grid; gap: 12px; margin-top: 20px; }
.ticks li { display: flex; gap: 12px; font-size: .92rem; color: var(--tx-2); line-height: 1.62; }
.ticks svg { width: 17px; height: 17px; flex: none; color: var(--data); margin-top: 4px; }
.ticks b { color: var(--tx); }

/* ---------- 10. Khung ảnh ---------- */
.frame {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--paper-3); isolation: isolate;
}
.frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(32,26,18,.07);
}
.frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s var(--ease-soft);
}
.frame--paddle { border-radius: 220px 220px 24px 24px; }
.frame--tall { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--sq { aspect-ratio: 1; }
a.frame:hover img, .card:hover .frame img { transform: scale(1.05); }
.frame__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 36px 24px 20px;
  background: linear-gradient(transparent, rgba(10,12,17,.9));
  color: #fff; font-weight: 600; font-size: .93rem; line-height: 1.5;
}
.frame__tag {
  position: absolute; top: 16px; left: 16px; z-index: 1; padding: 6px 15px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, #F2452F, var(--red)); color: #fff;
  font-size: .655rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 8px 20px -10px rgba(237,56,37,.85);
}
.frame__tag--lime { background: linear-gradient(180deg, #C3E63A, var(--lime)); color: #10130A; }
.frame__tag--dark { background: rgba(10,12,17,.7); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); box-shadow: none; }

/* ---------- 11. Bố cục chia đôi ---------- */
.split { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(36px, 5.5vw, 88px); align-items: center; }
.split--reverse .split__media { order: 2; }
@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split--reverse .split__media { order: 0; }
}
.media-stack { position: relative; }
.media-stack__main { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.media-stack__sub {
  position: absolute; right: -4%; bottom: -10%; width: 44%; border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh-2), 0 0 0 7px var(--ground);
}
.media-stack__badge {
  position: absolute; left: -14px; top: 30px; z-index: 2;
  background: linear-gradient(180deg, #F2452F, var(--red)); color: #fff;
  border-radius: 18px; padding: 16px 22px;
  box-shadow: 0 18px 40px -18px rgba(237,56,37,.75);
  display: grid; gap: 3px; min-width: 138px;
}
.media-stack__badge b {
  font-family: var(--f-display); font-size: 1.7rem; font-weight: 800;
  letter-spacing: -.045em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.media-stack__badge span { font-size: .655rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.88); font-weight: 700; }
@media (max-width: 600px) { .media-stack__sub { display: none; } .media-stack__badge { left: 14px; } }

/* ---------- 12. Dải số liệu ---------- */
.stats-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hairline-soft); border-radius: var(--r); overflow: hidden;
  background: var(--panel-solid); box-shadow: var(--sh-1);
}
.stats-band > div { padding: clamp(24px, 2.6vw, 38px); position: relative; }
.stats-band > div + div::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--hairline-soft) 28%, var(--hairline-soft) 72%, transparent);
}
.stats-band .n {
  font-family: var(--f-display); font-size: clamp(2rem, 3vw, 2.9rem); font-weight: 800;
  letter-spacing: -.05em; color: var(--tx); line-height: 1; display: flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums;
}
.stats-band .n .suffix { color: var(--accent); font-size: .62em; }
.stats-band .t { font-size: .855rem; color: var(--tx-2); margin-top: 12px; line-height: 1.6; }
@media (max-width: 900px) {
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .stats-band > div:nth-child(3)::before { display: none; }
  .stats-band > div:nth-child(n+3) { border-top: 1px solid var(--hairline-soft); }
}
@media (max-width: 560px) {
  .stats-band { grid-template-columns: 1fr; }
  .stats-band > div + div::before { display: none; }
  .stats-band > div + div { border-top: 1px solid var(--hairline-soft); }
}

/* ---------- 13. Quy trình 5 bước ---------- */
.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 1.8vw, 28px); counter-reset: step; }
.process__item { position: relative; padding-top: 46px; }
.process__item::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0; font-family: var(--f-display);
  font-size: .78rem; font-weight: 800; letter-spacing: .16em; color: var(--accent);
  background: var(--ground); padding-right: 14px; font-variant-numeric: tabular-nums;
}
.process__item::after {
  content: ""; position: absolute; top: 10px; left: 36px; right: -14px; height: 1px;
  background: linear-gradient(90deg, var(--hairline), transparent);
}
.process__item:last-child::after { display: none; }
.process__item h4 { margin-bottom: 11px; }
.process__item p { font-size: .885rem; color: var(--tx-2); line-height: 1.68; }
@media (max-width: 1040px) { .process { grid-template-columns: repeat(2, 1fr); } .process__item::after { display: none; } }
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } }

/* ---------- 14. Bảng ---------- */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--hairline-soft); border-radius: var(--r);
  background: var(--panel-solid); box-shadow: var(--sh-1); -webkit-overflow-scrolling: touch;
}
table.data {
  width: 100%; border-collapse: collapse; min-width: 660px;
  font-size: .925rem; font-variant-numeric: tabular-nums;
}
table.data th, table.data td { padding: 17px 22px; text-align: center; }
table.data thead th {
  font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tx-3); padding-block: 20px; border-bottom: 1px solid var(--hairline);
}
table.data thead th:first-child { text-align: left; }
table.data tbody th { text-align: left; font-weight: 600; color: var(--tx); white-space: nowrap; font-size: .93rem; }
table.data tbody tr + tr th, table.data tbody tr + tr td { border-top: 1px solid var(--hairline-soft); }
table.data tbody tr { transition: background .3s; }
table.data tbody tr:hover { background: rgba(237,56,37,.03); }
table.data td.is-best {
  background: linear-gradient(180deg, rgba(237,56,37,.09), rgba(237,56,37,.04));
  font-weight: 700; color: var(--red-deep);
}
.tick-y { color: var(--data); font-weight: 800; font-size: 1.05rem; }
.tick-n { color: var(--tx-3); font-weight: 700; opacity: .5; }
.note {
  font-size: .845rem; color: var(--tx-3); margin-top: 20px;
  position: relative; padding-left: 28px; line-height: 1.68;
}
.note svg { width: 15px; height: 15px; position: absolute; left: 0; top: 5px; color: var(--accent); }
.note b { color: var(--tx-2); }

/* ---------- 15. Gói dịch vụ ---------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 1.8vw, 26px); align-items: stretch; }
.plan {
  position: relative; display: flex; flex-direction: column; isolation: isolate;
  background: var(--panel-solid);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-lg);
  padding: clamp(28px, 2.5vw, 40px);
  box-shadow: var(--sh-1);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s;
}
.plan:hover { transform: translateY(-7px); box-shadow: var(--sh-2); border-color: var(--hairline); }
/* Gói nổi bật: đảo tông để làm tâm điểm */
.plan--featured {
  color-scheme: dark;
  --tx: #F2F1EE; --tx-2: #A8ADB7; --tx-3: #868C96; --data: var(--lime-lift);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(237,56,37,.2), transparent 60%),
    linear-gradient(180deg, #191D26, #0E1116);
  border-color: rgba(237,56,37,.32);
  box-shadow: var(--sh-2), var(--sh-glow);
  color: var(--tx);
}
.plan--featured::before, .plan--featured::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none;
  border-color: rgba(237,56,37,.55); border-style: solid; border-width: 0;
}
.plan--featured::before { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; border-radius: 6px 0 0 0; }
.plan--featured::after { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; border-radius: 0 0 6px 0; }
.plan--featured hr { border-top-color: rgba(255,255,255,.13); }

.plan__flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: linear-gradient(180deg, #C3E63A, var(--lime)); color: #10130A;
  font-size: .655rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 20px; border-radius: var(--r-pill); white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(177,216,35,.9);
}
.plan__name { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 800; color: var(--accent); }
.plan--featured .plan__name { color: var(--lime-lift); }
.plan h3 { margin: 12px 0 8px; }
.plan__desc { font-size: .915rem; color: var(--tx-2); line-height: 1.68; }
.plan__price {
  font-family: var(--f-display); font-size: clamp(1.7rem, 2.2vw, 2.2rem); font-weight: 800;
  letter-spacing: -.045em; margin-top: 22px; line-height: 1.1; color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.plan__price small {
  display: block; font-family: var(--f-body); font-size: .78rem; font-weight: 500;
  color: var(--tx-3); margin-top: 10px; line-height: 1.55;
}
.plan hr { border: 0; border-top: 1px solid var(--hairline-soft); margin: 26px 0; }
.plan .btn { width: 100%; margin-top: auto; }
.plan .ticks { margin-bottom: 30px; }
@media (max-width: 940px) { .pricing { grid-template-columns: 1fr; } }

/* ---------- 16. Tab & bộ chọn ---------- */
.tabs {
  display: inline-flex; gap: 5px; padding: 5px; border-radius: 30px; flex-wrap: wrap;
  background: var(--paper-2); border: 1px solid var(--hairline-soft);
}
.section--paper .tabs { background: #fff; }
.section--dark .tabs, .section--ink2 .tabs { background: rgba(255,255,255,.07); }
.tab {
  border: 0; background: transparent; padding: 11px 24px; border-radius: var(--r-pill);
  font-weight: 600; font-size: .875rem; color: var(--tx-2); cursor: pointer;
  transition: background .35s var(--ease), color .3s, box-shadow .35s;
}
.tab:hover { color: var(--tx); }
.tab.is-active {
  background: linear-gradient(180deg, #F2452F, var(--red)); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 20px -10px rgba(237,56,37,.85);
}
.tab-panel[hidden] { display: none; }

.scale-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.scale-btn {
  display: flex; align-items: baseline; gap: 7px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--panel-solid); border-radius: var(--r-pill);
  padding: 12px 24px; font-family: var(--f-display); font-weight: 700; color: var(--tx);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; box-shadow: var(--sh-1);
  transition: all .35s var(--ease);
}
.scale-btn small { font-family: var(--f-body); font-size: .7rem; font-weight: 600; color: var(--tx-3); letter-spacing: .08em; }
.scale-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.scale-btn.is-active {
  background: linear-gradient(180deg, #F2452F, var(--red)); border-color: transparent; color: #fff;
  box-shadow: 0 10px 26px -12px rgba(237,56,37,.85);
}
.scale-btn.is-active small { color: rgba(255,255,255,.8); }

/* Bảng kết quả ước tính — đảo tông để làm tâm điểm của trang */
.quote-out {
  color-scheme: dark;
  --tx: #F2F1EE; --tx-2: #A8ADB7; --tx-3: #868C96;
  position: relative; display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 3vw, 52px); align-items: center; margin-top: 38px;
  border-radius: var(--r-lg); padding: clamp(30px, 3.2vw, 50px);
  background:
    radial-gradient(90% 120% at 6% 0%, rgba(237,56,37,.2), transparent 56%),
    linear-gradient(180deg, #191D26, #0D1015);
  box-shadow: var(--sh-2); color: var(--tx);
}
.quote-out .eyebrow { color: var(--lime-lift); }
.quote-out__price {
  font-family: var(--f-display); font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800;
  letter-spacing: -.045em; color: #fff; line-height: 1.08;
}
.quote-out__price .unit { color: var(--lime-lift); }
.quote-out__meta { font-size: .9rem; color: var(--tx-2); margin-top: 18px; line-height: 1.9; }
.quote-out__meta b { color: #fff; font-weight: 600; }
@media (max-width: 860px) { .quote-out { grid-template-columns: 1fr; } }
.quote-rows { display: grid; gap: 10px; }
.quote-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 16px 22px; border-radius: 16px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09);
  transition: background .3s;
}
.quote-row:hover { background: rgba(255,255,255,.09); }
.quote-row--hi {
  background: linear-gradient(180deg, #F2452F, var(--red)); border-color: transparent;
  box-shadow: 0 14px 34px -18px rgba(237,56,37,.95);
}
.quote-row span { font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--tx-3); }
.quote-row--hi span { color: rgba(255,255,255,.85); }
.quote-row b {
  font-family: var(--f-display); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 800;
  letter-spacing: -.035em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* ---------- 17. Thư viện ảnh & lightbox ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery a {
  position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/3;
  background: var(--paper-3); isolation: isolate; box-shadow: var(--sh-1);
}
.gallery a img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease), filter .6s var(--ease-soft);
}
.gallery a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(32,26,18,.08);
  background: rgba(237,56,37,0); transition: background .5s;
}
.gallery a:hover img { transform: scale(1.06); }
.gallery a:hover::after { background: rgba(237,56,37,.1); }
.gallery--feature a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery--feature a:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 5vh 5vw; opacity: 0; pointer-events: none;
  background: rgba(10, 12, 17, .88); backdrop-filter: blur(22px);
  transition: opacity .45s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 86vh; border-radius: 14px; box-shadow: 0 50px 120px -40px rgba(0,0,0,.9); }
.lightbox__cap { color: #C6CAD2; font-size: .88rem; text-align: center; margin-top: 20px; }
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-items: center; width: 50px; height: 50px;
  border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px); transition: background .3s, border-color .3s, transform .4s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--red); border-color: var(--red); }
.lightbox__close { top: 3.5vh; right: 4vw; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 2.5vw; }
.lightbox__nav--next { right: 2.5vw; }
.lightbox svg { width: 19px; height: 19px; }

/* ---------- 18. Dự án ---------- */
.case {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4.5vw, 76px);
  align-items: center; padding-block: clamp(48px, 5vw, 80px); position: relative;
}
.case + .case::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-soft) 20%, var(--hairline-soft) 80%, transparent);
}
.case:first-of-type { padding-top: 0; }
.case--reverse .case__media { order: 2; }
@media (max-width: 940px) { .case { grid-template-columns: 1fr; } .case--reverse .case__media { order: 0; } }
.case__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--paper-2); border: 1px solid var(--hairline-soft);
  font-size: .745rem; font-weight: 600; color: var(--tx-2);
}
.section--paper .chip { background: #fff; }
.section--dark .chip, .section--ink2 .chip { background: rgba(255,255,255,.08); }
.chip--red { background: linear-gradient(180deg, #F2452F, var(--red)); color: #fff; border-color: transparent; }
.chip--lime { background: linear-gradient(180deg, #C3E63A, var(--lime)); color: #10130A; border-color: transparent; font-weight: 700; }
.chip--outline { background: transparent; }

.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 30px 0; }
.kpi { position: relative; padding-left: 18px; }
.kpi::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--red), rgba(237,56,37,0));
}
.kpi b {
  display: block; font-family: var(--f-display); font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 800; letter-spacing: -.045em; line-height: 1.1; color: var(--tx);
  font-variant-numeric: tabular-nums;
}
.kpi span { font-size: .78rem; color: var(--tx-2); line-height: 1.45; display: block; margin-top: 5px; }
.page-hero .kpi b { color: #fff; }
.page-hero .kpi span { color: #B4B9C2; }

/* ---------- 19. Đối tác & sân ---------- */
.partner-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 1px solid var(--hairline-soft); border-radius: var(--r); overflow: hidden;
  background: var(--panel-solid);
}
.partner-grid div {
  min-height: 112px; display: grid; place-items: center; padding: 24px 18px; text-align: center;
  font-family: var(--f-display); font-weight: 700; color: var(--tx-2); font-size: 1rem;
  border-right: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft);
  transition: background .4s, color .3s;
}
.partner-grid div:hover { background: var(--paper-2); color: var(--tx); }
.partner-grid div small { display: block; font-family: var(--f-body); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); margin-top: 7px; }

.venue {
  position: relative; border-radius: var(--r); overflow: hidden; min-height: 360px;
  display: flex; align-items: flex-end; color: #fff; isolation: isolate;
  box-shadow: var(--sh-1); transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.venue:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.venue img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
  transition: transform 1.1s var(--ease);
}
.venue::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(transparent 26%, rgba(10,12,17,.92) 94%);
}
.venue:hover img { transform: scale(1.06); }
.venue__body { position: relative; z-index: 1; padding: 30px 28px 28px; }
.venue__body h3 { font-size: 1.24rem; margin-bottom: 10px; color: #fff; }
.venue__body p { font-size: .885rem; color: #CBCFD6; line-height: 1.62; }
.venue__pill { position: absolute; top: 20px; left: 20px; z-index: 1; }

/* ---------- 20. Vận động viên ---------- */
.athlete {
  position: relative; border-radius: var(--r); overflow: hidden; background: var(--paper-3);
  box-shadow: var(--sh-1); transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.athlete:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.athlete img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center 20%;
  transition: transform 1.1s var(--ease);
}
.athlete:hover img { transform: scale(1.05); }
.athlete__body {
  position: absolute; inset: auto 0 0 0; padding: 26px 22px 22px;
  background: linear-gradient(transparent, rgba(10,12,17,.95) 46%); color: #fff;
}
.athlete__body h4 { font-size: 1.1rem; margin-bottom: 10px; color: #fff; }
.athlete__body li { font-size: .795rem; color: #CBCFD6; display: flex; gap: 9px; line-height: 1.52; }
.athlete__body li + li { margin-top: 6px; }
.athlete__body li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); flex: none; margin-top: 7px; }

/* ---------- 21. Dải kêu gọi ---------- */
.cta-band {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(70% 130% at 84% 6%, rgba(255,255,255,.22), transparent 56%),
    linear-gradient(140deg, #E23320 0%, var(--red) 44%, #B8240F 100%);
}
.cta-band__in {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr 1fr;
  gap: clamp(30px, 4vw, 64px); align-items: center; padding-block: clamp(58px, 6.5vw, 96px);
}
.cta-band h2 { text-transform: uppercase; color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); margin-top: 18px; font-size: var(--lead); }
.cta-band .btn { background: #fff; color: var(--red); border-color: #fff; box-shadow: 0 16px 40px -20px rgba(0,0,0,.5); }
.cta-band .btn:hover { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }
.cta-band .btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); box-shadow: none; }
.cta-band .btn--light:hover { background: #fff; color: var(--red); border-color: #fff; }
@media (max-width: 900px) { .cta-band__in { grid-template-columns: 1fr; } }

/* ---------- 22. Biểu mẫu ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .78rem; font-weight: 700; margin-bottom: 9px; color: var(--tx-2); letter-spacing: .04em; }
.field label .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 18px; border-radius: 14px; font-size: .95rem;
  background: var(--field-bg); border: 1px solid var(--hairline); color: var(--tx);
  transition: border-color .3s, box-shadow .3s;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.7; }
.field input::placeholder, .field textarea::placeholder { color: var(--tx-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(237,56,37,.12);
}
.form__note { font-size: .8rem; color: var(--tx-3); }
.form-status { padding: 15px 20px; border-radius: 14px; font-size: .9rem; font-weight: 600; display: none; }
.form-status.is-ok {
  display: block; background: rgba(177,216,35,.16); color: #4F6605;
  border: 1px solid rgba(177,216,35,.4);
}

.info-list { display: grid; gap: 24px; }
.info-list li { display: flex; gap: 18px; }
.info-list .ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none;
  background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-bd);
}
.info-list .ico svg { width: 19px; height: 19px; }
.info-list b { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tx-3); font-weight: 800; margin-bottom: 6px; }
.info-list span { font-size: 1rem; font-weight: 500; color: var(--tx); line-height: 1.6; }
.info-list a:hover { color: var(--accent); }

/* ---------- 23. Thanh liên hệ nhanh ---------- */
.rail { position: fixed; right: 18px; bottom: 22px; z-index: 95; display: grid; gap: 11px; justify-items: end; }
.rail__btn {
  position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; border: 1px solid rgba(255,255,255,.18); cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(38,30,20,.5), 0 1px 0 rgba(255,255,255,.2) inset;
  transition: transform .5s var(--ease), box-shadow .4s;
}
.rail__btn svg { width: 22px; height: 22px; }
.rail__btn:hover { transform: translateY(-3px) scale(1.06); }
.rail__btn--zalo { background: linear-gradient(180deg, #2A81FF, #0068FF); }
.rail__btn--phone { background: linear-gradient(180deg, #F2452F, var(--red)); }
.rail__btn--fb { background: linear-gradient(180deg, #3B8BF4, #1877F2); }
.rail__btn--mail { background: linear-gradient(180deg, #23262E, #12151C); }
.rail__btn--top {
  width: 44px; height: 44px; background: #fff; color: var(--tx); border-color: var(--hairline);
  opacity: 0; pointer-events: none; transition: opacity .4s, transform .5s var(--ease);
}
.rail__btn--top.is-visible { opacity: 1; pointer-events: auto; }
.rail__btn::after {
  content: attr(data-label); position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: var(--ink-950); color: #fff; font-size: .765rem; font-weight: 600;
  padding: 8px 14px; border-radius: 10px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s var(--ease);
}
.rail__btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail__btn--phone::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid rgba(237,56,37,.65); animation: pulse 2.6s var(--ease-soft) infinite; pointer-events: none;
}
@keyframes pulse { 0% { transform: scale(.92); opacity: .9; } 70% { transform: scale(1.4); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 680px) {
  .rail { right: 13px; bottom: 13px; gap: 9px; }
  .rail__btn { width: 46px; height: 46px; }
  .rail__btn svg { width: 19px; height: 19px; }
  .rail__btn::after { display: none; }
}

/* ---------- 24. Chân trang ---------- */
.site-footer {
  position: relative; background: var(--ink-950); color: var(--tx-2);
  padding-top: clamp(64px, 6.5vw, 100px);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.35fr; gap: clamp(32px, 3.2vw, 56px); }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h5 {
  font-family: var(--f-body); font-size: .69rem; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; margin: 0 0 24px; font-weight: 800;
}
.site-footer a { transition: color .25s; }
.site-footer a:hover { color: #fff; }
.footer-links { display: grid; gap: 14px; font-size: .91rem; }
.site-footer .brand img { height: 44px; }
.footer-about { font-size: .91rem; line-height: 1.8; margin-top: 24px; max-width: 40ch; }
.footer-social { display: flex; gap: 11px; margin-top: 26px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline);
  display: grid; place-items: center;
  transition: background .35s, border-color .35s, color .3s, transform .45s var(--ease);
}
.footer-social a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); }
.footer-social svg { width: 16px; height: 16px; }
.footer-contact { display: grid; gap: 16px; font-size: .91rem; }
.footer-contact li { display: flex; gap: 13px; align-items: flex-start; line-height: 1.65; }
.footer-contact svg { width: 16px; height: 16px; color: var(--ember); flex: none; margin-top: 5px; }
.footer-bottom {
  margin-top: clamp(48px, 4.5vw, 72px); border-top: 1px solid var(--hairline-soft);
  padding-block: 26px; display: flex; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; font-size: .81rem; color: var(--tx-3);
}

/* ---------- 25. Thành phần khác ---------- */
.marquee {
  overflow: hidden; background: var(--paper-2);
  border-block: 1px solid var(--hairline-soft);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; gap: 62px; padding-block: 22px; width: max-content; animation: slide 52s linear infinite; }
.marquee__track span {
  display: inline-flex; align-items: center; gap: 18px; white-space: nowrap;
  font-family: var(--f-display); font-size: .875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #8C8577;
}
.marquee__track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); opacity: .6; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

.accordion { border-top: 1px solid var(--hairline-soft); }
.accordion__item { border-bottom: 1px solid var(--hairline-soft); }
.accordion__btn {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  padding: 26px 52px 26px 0; position: relative; color: var(--tx);
  font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em;
  transition: color .3s;
}
.accordion__btn:hover { color: var(--accent); }
.accordion__btn::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 10px; height: 10px;
  margin-top: -7px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg); transition: transform .45s var(--ease), margin-top .45s var(--ease);
}
.accordion__btn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.accordion__panel > div { overflow: hidden; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel p, .accordion__panel ul { padding-bottom: 26px; color: var(--tx-2); font-size: .94rem; line-height: 1.8; max-width: 68ch; }

.badge-line { display: flex; flex-wrap: wrap; gap: 10px; }

.spec-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--hairline-soft); border-radius: var(--r); overflow: hidden;
  background: var(--panel-solid); box-shadow: var(--sh-1);
}
.spec-grid > div {
  padding: clamp(24px, 2.3vw, 34px);
  border-right: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft);
  transition: background .4s;
}
.spec-grid > div:hover { background: var(--paper-0); }
.spec-grid h4 { display: flex; gap: 13px; align-items: center; margin-bottom: 13px; }
.spec-grid h4 svg { width: 19px; height: 19px; color: var(--accent); flex: none; }
.spec-grid p { font-size: .91rem; color: var(--tx-2); line-height: 1.72; }
@media (max-width: 760px) { .spec-grid { grid-template-columns: 1fr; } }

/* Sơ đồ quy trình */
.flow { display: grid; gap: 30px; }
.flow__phase {
  position: relative; border-radius: var(--r-lg); padding: clamp(24px, 2.4vw, 36px);
  background: var(--panel-solid); border: 1px solid var(--hairline-soft); box-shadow: var(--sh-1);
}
.flow__phase::after {
  content: ""; position: absolute; left: 50%; bottom: -22px; width: 12px; height: 12px; z-index: 1;
  border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: translateX(-50%) rotate(45deg); opacity: .7;
}
.flow__phase:last-child::after { display: none; }
.flow__head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.flow__badge {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--f-display); font-weight: 800; font-size: .9rem; flex: none;
  background: var(--paper-2); border: 1px solid var(--hairline); color: var(--tx);
}
.flow__phase--live .flow__badge { background: linear-gradient(180deg, #F2452F, var(--red)); color: #fff; border-color: transparent; }
.flow__phase--post .flow__badge { background: linear-gradient(180deg, #C3E63A, var(--lime)); color: #10130A; border-color: transparent; }
.flow__head h3 { font-size: 1.2rem; }
.flow__head span { font-size: .78rem; color: var(--tx-3); font-weight: 600; }
.flow__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.flow__step {
  border-radius: 16px; padding: 20px 22px; background: var(--paper-0);
  border: 1px solid var(--hairline-soft); position: relative; overflow: hidden;
  transition: border-color .35s, transform .5s var(--ease);
}
.flow__step::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--red), rgba(237,56,37,0));
}
.flow__phase--post .flow__step::before { background: linear-gradient(180deg, var(--lime), rgba(177,216,35,0)); }
.flow__step:hover { border-color: var(--hairline); transform: translateY(-3px); }
.flow__step b { display: block; font-family: var(--f-display); font-size: .95rem; font-weight: 700; margin-bottom: 7px; color: var(--tx); }
.flow__step p { font-size: .845rem; color: var(--tx-2); line-height: 1.68; }
@media (max-width: 900px) { .flow__steps { grid-template-columns: 1fr; } }

.check-cols { columns: 2; column-gap: 46px; }
.check-cols li {
  break-inside: avoid; display: flex; gap: 12px; font-size: .93rem; color: var(--tx-2);
  padding: 11px 0; border-bottom: 1px solid var(--hairline-soft);
}
.check-cols svg { width: 16px; height: 16px; flex: none; margin-top: 5px; color: var(--accent); }
@media (max-width: 740px) { .check-cols { columns: 1; } }

.channel-list { display: grid; gap: 10px; }
.channel-list li {
  display: flex; align-items: center; gap: 18px; padding: 15px 20px; border-radius: 16px;
  background: var(--panel-solid); border: 1px solid var(--hairline-soft); box-shadow: var(--sh-1);
  transition: border-color .35s, transform .5s var(--ease);
}
.channel-list li:hover { border-color: var(--hairline); transform: translateX(5px); }
.channel-list .name { flex: 1; font-weight: 500; font-size: .93rem; color: var(--tx); line-height: 1.5; }
.channel-list .region { font-size: .76rem; color: var(--tx-3); white-space: nowrap; }
.channel-list .count {
  font-family: var(--f-display); font-weight: 800; color: var(--accent);
  letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
@media (max-width: 580px) { .channel-list li { flex-wrap: wrap; gap: 8px; } .channel-list .name { flex-basis: 100%; } }

/* ---------- 26. Chuyển động ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .07s; }
[data-reveal][data-delay="2"] { transition-delay: .14s; }
[data-reveal][data-delay="3"] { transition-delay: .21s; }
[data-reveal][data-delay="4"] { transition-delay: .28s; }
[data-reveal][data-delay="5"] { transition-delay: .35s; }

.hero h1 .l1 > span, .hero h1 .l2 > span {
  transform: translateY(105%); opacity: 0;
  animation: lineRise 1.1s var(--ease) forwards;
}
.hero h1 .l1 > span { animation-delay: .1s; }
.hero h1 .l2 > span { animation-delay: .22s; }
@keyframes lineRise { to { transform: translateY(0); opacity: 1; } }
.hero__badge, .hero__sub, .hero__actions, .hero__stats {
  opacity: 0; animation: fadeRise 1s var(--ease) forwards;
}
.hero__badge { animation-delay: .05s; }
.hero__sub { animation-delay: .38s; }
.hero__actions { animation-delay: .5s; }
.hero__stats { animation-delay: .62s; }
@keyframes fadeRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero h1 .l1 > span, .hero h1 .l2 > span { transform: none; opacity: 1; }
  .hero__badge, .hero__sub, .hero__actions, .hero__stats { opacity: 1; }
  .hero__bg img { animation: none; }
}

/* ---------- 27. Thu gọn lưới ---------- */
@media (max-width: 1060px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr; gap: 14px; }
}

/* ==========================================================================
   28. CHUẨN HOÁ MOBILE
   Nguyên tắc: vùng chạm tối thiểu 44px · chữ nhập liệu 16px (chặn iOS tự
   phóng to) · tôn trọng vùng an toàn của máy có tai thỏ · không có thao tác
   nào chỉ dùng được bằng hover.
   ========================================================================== */

/* --- 28.1 Phản hồi khi chạm --- */
@media (hover: none) {
  * { -webkit-tap-highlight-color: transparent; }
  .btn:active, .scale-btn:active, .tab:active,
  .rail__btn:active, .nav__toggle:active { transform: scale(.96); }
  .card:hover, .plan:hover, .venue:hover, .athlete:hover,
  .channel-list li:hover, .flow__step:hover { transform: none; }
  a.frame:hover img, .gallery a:hover img,
  .venue:hover img, .athlete:hover img { transform: none; }
}

/* --- 28.1b Nền mờ sau menu: chạm ra ngoài là đóng --- */
.nav__scrim {
  position: fixed; inset: 0; z-index: 89; background: rgba(10, 12, 17, .42);
  backdrop-filter: blur(3px); opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease); border: 0;
}
.nav__scrim.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .nav__scrim { display: none; } }

/* --- 28.2 Thanh điều hướng gọn lại --- */
@media (max-width: 1023px) {
  html { scroll-padding-top: 84px; }
  .nav { height: 68px; }
  .brand img { height: 34px; }
  .site-header.is-stuck { box-shadow: 0 10px 24px -20px rgba(38,30,20,.6); }
}
@media (max-width: 680px) {
  .topbar__in { height: 38px; gap: 12px; }
  .topbar__name { gap: 10px; letter-spacing: .14em; }
  .topbar__name::before, .topbar__name::after { width: 16px; }
  .nav { height: 62px; gap: 12px; }
  .brand img { height: 31px; }
  .nav__cta { gap: 9px; }
  .nav__cta .btn--sm { padding: 10px 16px; font-size: .82rem; }
  .nav__toggle { width: 42px; height: 42px; border-radius: 12px; }
}

/* --- 28.3 Chữ nhập liệu 16px: iOS sẽ không tự phóng to khi bấm vào ô --- */
@media (max-width: 1023px) {
  .field input, .field select, .field textarea { font-size: 16px; padding: 14px 16px; }
  .field label { font-size: .8rem; }
}

/* --- 28.4 Thanh liên hệ nhanh: xếp ngang, bám vùng an toàn --- */
@media (max-width: 680px) {
  .rail {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    grid-auto-flow: column; align-items: center; gap: 9px;
  }
  .rail__btn { width: 46px; height: 46px; }
  .rail__btn svg { width: 20px; height: 20px; }
  .rail__btn--top { width: 40px; height: 40px; order: -1; }
  .rail__btn--top:not(.is-visible) { display: none; }
  .rail__btn--phone::before { inset: -4px; }
}

/* --- 28.5 Nút chính chiếm trọn bề ngang cho dễ bấm --- */
@media (max-width: 520px) {
  /* Nút chính xếp chồng, bằng chiều ngang — trừ nút phụ cỡ nhỏ */
  .btn-row > .btn:not(.btn--sm) { width: 100%; }
  .btn-row { gap: 11px; }
  .cta-band .btn-row { justify-content: stretch !important; }
}

/* --- 28.6 Bảng: gợi ý vuốt ngang thay vì để người dùng tự đoán --- */
.table-wrap { position: relative; }
.table-wrap.is-scrollable::after {
  content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 56px;
  pointer-events: none; border-radius: 0 var(--r) var(--r) 0;
  background: linear-gradient(90deg, transparent, var(--panel-solid));
  opacity: 1; transition: opacity .3s;
}
.table-wrap.is-scrollable.is-end::after { opacity: 0; }
.scroll-hint {
  display: none; align-items: center; gap: 7px; margin-top: 12px;
  font-size: .76rem; font-weight: 600; letter-spacing: .04em; color: var(--tx-3);
}
.scroll-hint svg { width: 14px; height: 14px; color: var(--accent); }
@media (max-width: 900px) { .table-wrap.is-scrollable + .scroll-hint { display: flex; } }

/* --- 28.7 Xem ảnh phóng to: nút điều hướng xuống đáy, không đè lên ảnh --- */
@media (max-width: 760px) {
  .lightbox { padding: 8vh 4vw 15vh; }
  .lightbox img { max-height: 68vh; }
  .lightbox__nav { top: auto; bottom: calc(3vh + env(safe-area-inset-bottom)); transform: none; }
  .lightbox__nav:hover { transform: none; }
  .lightbox__nav--prev { left: 22%; }
  .lightbox__nav--next { right: 22%; }
  .lightbox__close { top: 2.5vh; right: 4vw; }
  .lightbox__cap { font-size: .82rem; margin-top: 14px; }
}

/* --- 28.8 Cỡ chữ & khoảng cách cho màn hình nhỏ --- */
@media (max-width: 560px) {
  :root {
    --h1: clamp(2rem, 8.4vw, 2.55rem);
    --h2: clamp(1.66rem, 6.6vw, 2rem);
    --sp-section: 68px;
  }
  body { font-size: 16px; }
  .topbar__name { font-size: clamp(.54rem, 2.6vw, .66rem); letter-spacing: .1em; gap: 0; }
  .topbar__name::before, .topbar__name::after { display: none; }
  .eyebrow { font-size: .82rem; letter-spacing: .12em; gap: 11px; margin-bottom: 16px; }
  .eyebrow::before { width: 24px; }
  .lead { margin-top: 18px; }
  .head-row { gap: 24px; margin-bottom: 32px; }
  .mt-l { margin-top: 40px; }
  .stat__label { font-size: .8rem; }
  .hero__in { padding-block: 56px 44px; }
  .hero__badge { margin-bottom: 24px; font-size: .74rem; padding: 6px 16px 6px 6px; }
  .hero__badge .long { display: none; }
  .hero__sub { margin-top: 22px; }
  .hero__actions { margin-top: 30px; }
  .hero__stats li { padding: 22px 8px 24px; }
  .page-hero__in { padding-block: 48px 44px; }
  .gallery { gap: 10px; }
  .card { padding: 24px 22px; }
  .card__media { margin: -24px -22px 22px; }
  .card__num { top: 20px; right: 20px; font-size: 2rem; }
  .plan { padding: 28px 24px; }
  .quote-out { padding: 26px 22px; }
  .flow__phase { padding: 24px 20px; }
  .case { padding-block: 40px; }
  .venue { min-height: 300px; }
  .venue__body { padding: 24px 22px 22px; }
  .accordion__btn { font-size: .99rem; padding: 22px 44px 22px 0; }
  .section-head, .page-hero p, .hero__sub { max-width: 100%; }
}

/* --- 28.9 Bộ chọn quy mô xếp lưới cho thẳng hàng --- */
@media (max-width: 520px) {
  .scale-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .scale-btn { justify-content: center; padding: 13px 8px; gap: 5px; font-size: .95rem; }
  .scale-btn small { font-size: .64rem; }
  .tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .tabs .tab { padding: 12px 10px; text-align: center; }
  [data-filter-group] { grid-template-columns: 1fr 1fr; }
}

/* --- 28.10 Chân trang & danh sách kênh --- */
@media (max-width: 580px) {
  .footer-bottom { flex-direction: column; gap: 10px; text-align: left; }
  .footer-social a { width: 44px; height: 44px; }
  .site-footer { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
  .channel-list li { padding: 14px 16px; }
  .channel-list .count { font-size: .95rem; }
}

/* --- 28.11 Chừa chỗ cho thanh liên hệ nổi ở cuối trang --- */
@media (max-width: 680px) {
  .site-footer .footer-bottom { padding-bottom: 76px; }
}

/* ==========================================================================
   29. PHƯƠNG ÁN NỀN ĐEN TOÀN TRANG  (thêm class "theme-dark" vào <body>)
   --------------------------------------------------------------------------
   Chỉ đảo bộ token nền sáng sang tông tối; toàn bộ thành phần tự đổi theo.
   Phần dưới chỉ xử lý những chỗ còn ghim màu sáng cứng trong CSS gốc.
   ========================================================================== */
body.theme-dark {
  color-scheme: dark;

  /* Đảo bảng nền: "giấy" trở thành các sắc độ than */
  --paper-0: #0A0C11;
  --paper-1: #12161D;
  --paper-2: #10141B;
  --paper-3: #1B212B;

  --ground: #0A0C11;
  --panel: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  --panel-solid: #151921;
  --hairline: rgba(255, 255, 255, .12);
  --hairline-soft: rgba(255, 255, 255, .07);
  --tx: #F2F1EE;
  --tx-2: #A8ADB7;
  --tx-3: #868C96;
  --accent: var(--ember);
  --accent-bg: rgba(237, 56, 37, .14);
  --accent-bd: rgba(237, 56, 37, .26);
  --lime-bg: rgba(177, 216, 35, .13);
  --lime-fg: var(--lime-lift);
  --data: var(--lime-lift);
  --field-bg: rgba(255, 255, 255, .05);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.7);
  --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 34px 64px -32px rgba(0,0,0,.85);

  background: #0A0C11;
}

/* Các dải nội dung: giữ nhịp bằng chênh lệch sắc độ thay vì sáng/tối */
body.theme-dark .section--paper {
  --ground: #10141B;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
body.theme-dark .section--dark,
body.theme-dark .section--ink2 {
  background-image: linear-gradient(172deg, #171D27 0%, #12171F 58%, #161B24 100%);
}
body.theme-dark .section::after {
  background: radial-gradient(46% 34% at 12% 0%, rgba(237, 56, 37, .09), transparent 66%);
}
body.theme-dark .section:nth-of-type(even)::after {
  background: radial-gradient(46% 34% at 90% 0%, rgba(237, 56, 37, .08), transparent 66%);
}

/* Header & menu di động */
body.theme-dark .site-header { background: rgba(10, 12, 17, .78); }
body.theme-dark .site-header.is-stuck {
  background: rgba(10, 12, 17, .94);
  box-shadow: 0 14px 30px -26px rgba(0, 0, 0, .9);
}
@media (max-width: 1023px) {
  body.theme-dark .nav__menu { background: #12161D; }
}

/* Nền trắng ghim cứng trong CSS gốc */
body.theme-dark .section--paper .tabs,
body.theme-dark .section--paper .chip { background: rgba(255, 255, 255, .07); }
body.theme-dark .marquee__track span { color: #7E848F; }
body.theme-dark .frame::after,
body.theme-dark .gallery a::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
body.theme-dark .rail__btn--top { background: #1B212B; color: #F2F1EE; border-color: rgba(255,255,255,.16); }
body.theme-dark table.data td.is-best {
  background: linear-gradient(180deg, rgba(237,56,37,.2), rgba(237,56,37,.08));
  color: #FFB9AC;
}
body.theme-dark table.data tbody tr:hover { background: rgba(255, 255, 255, .04); }
body.theme-dark .form-status.is-ok { color: var(--lime-lift); }
body.theme-dark .btn--ghost:hover { background: #fff; color: var(--ink-950); border-color: #fff; }
body.theme-dark .nav__toggle { background: rgba(255, 255, 255, .06); }

/* Gói nổi bật: viền lửa để vẫn bật lên giữa nền tối */
body.theme-dark .plan--featured {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(237,56,37,.26), transparent 60%),
    linear-gradient(180deg, #22272F, #12161D);
  border-color: rgba(237, 56, 37, .5);
}

body.theme-dark ::-webkit-scrollbar-track { background: #10141B; }
body.theme-dark ::-webkit-scrollbar-thumb { background: #2B323D; border-color: #10141B; }
body.theme-dark .grain { opacity: .035; }

/* Nút chuyển đổi giữa hai phương án nền */
.rail__btn--theme { background: linear-gradient(180deg, #2B323D, #171C24); }
body.theme-dark .rail__btn--theme { background: linear-gradient(180deg, #FBFAF7, #E4E0D7); color: var(--ink-950); border-color: rgba(0,0,0,.12); }