/* ============================================================
   LANDING — Trang giới thiệu sản phẩm (/gioi-thieu)
   ------------------------------------------------------------
   Hệ màu/typography RIÊNG, cố ý KHÔNG dùng biến của app.css.
   Trang vẫn theo `data-bs-theme` giống app (và dùng chung khoá
   localStorage 'theme', nên chọn Sáng trong app thì vào đây
   cũng Sáng), nhưng bảng màu là của riêng nó: app.css chỉ có
   token cho giao diện làm việc, không có nền/độ tương phản của
   một trang kể chuyện. Mọi thứ scope dưới .lp để không rò ra
   các trang khác — app.css vẫn nạp trước cho font + reset.

   Hướng thẩm mỹ: "sân cầu lông", hai thời điểm trong ngày.
     · TỐI  — sân ban đêm. Nền navy (#05101F → #0D2144), vạch sân
              trắng mảnh. 🔴 Navy này KHÔNG còn khớp sidebar của
              app: từ 2026-08-20 sidebar chuyển sang xanh thảm đậm
              (--court-900/950). Giữ navy ở đây là CÓ CHỦ Ý —
              "ban đêm" là bối cảnh trời tối, không phải mặt thảm;
              accent mới đã đủ nối hai bên về cùng một thương hiệu.
     · SÁNG — nhà thi đấu ban ngày: nền xám ngà, vạch sân xám,
              chữ navy đậm. KHÔNG phải bản tối lật ngược — accent
              phải đổi sang sắc đậm hơn, vì #4ADE80/#7FD9BC vốn
              đọc tốt trên nền tối thì trên nền sáng gần như
              biến mất.
   Số tiền và mốc giờ luôn mono tabular — tương phản giữa
   "giọng nói" (Be Vietnam Pro) và "dữ liệu".
   ============================================================ */

/* Số tiền chạy bằng font mono (để các cột số thẳng hàng), nhưng glyph ₫ của font mono hệ thống thô
   và lệch trọng lượng so với chữ số bên cạnh. Mượn ĐÚNG một ký tự ₫ (U+20AB) từ Be Vietnam Pro —
   file này đã được tải sẵn cho phần chữ, nên không tốn thêm request nào. */
@font-face {
  font-family: 'BVP Dong';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/be-vietnam-pro-600-vietnamese.woff2') format('woff2');
  unicode-range: U+20AB;
}

/* ------------------------------------------------------------
   Token KHÔNG đổi theo giao diện: type, nhịp, bo góc.
   ------------------------------------------------------------ */
.lp {
  --lp-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lp-mono: 'BVP Dong', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'SF Mono', Consolas, monospace;

  --lp-gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --lp-section: clamp(4.5rem, 9vw, 8.5rem);
  --lp-max:     1180px;

  /* Bo góc: vừa phải, không "viên thuốc" */
  --lp-r-sm: 8px;
  --lp-r:    12px;
  --lp-r-lg: 18px;

  background: var(--lp-bg);
  color: var(--lp-chalk);
  font-family: var(--lp-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* 🔴 `clip`, KHÔNG phải `hidden`. `overflow-x: hidden` ép trục còn lại thành `auto`, biến khối
     này thành một scroll container — và `position: sticky` của .lp-nav khi đó dính theo container
     đó thay vì theo viewport. Container lại cao đúng bằng nội dung nên không bao giờ cuộn ⇒ thanh
     nav trôi mất cùng trang, im lặng, không lỗi. Đo mới thấy: ở scrollY=600 thanh nằm ở top=-669.
     `clip` chặn tràn ngang y hệt nhưng không tạo scroll container nên sticky vẫn chạy. */
  overflow-x: clip;
}

/* ------------------------------------------------------------
   SÁNG — nhà thi đấu ban ngày (mặc định khi không có data-bs-theme)
   ------------------------------------------------------------ */
.lp {
  --lp-bg:        #F4F6FA;
  --lp-bg-2:      #FFFFFF;
  --lp-surface:   #FFFFFF;
  --lp-surface-2: #FFFFFF;
  --lp-raise:     #E4EAF4;
  --lp-ui-bottom:    #F7F9FD;
  --lp-clock-bottom: #F2F6FD;
  --lp-nav-bg:    rgba(244, 246, 250, .86);
  --lp-float-bg:  rgba(255, 255, 255, .94);

  /* Vạch sân */
  --lp-line:        rgba(15, 23, 42, .10);
  --lp-line-strong: rgba(15, 23, 42, .24);

  /* Chữ */
  --lp-chalk: #0F172A;
  --lp-mute:  #475569;
  --lp-dim:   #64748B;

  /* Accent: mang NGHĨA, không trang trí.
     blue = hành động · green = tiền đã xong / có mặt · amber = còn nợ.
     Bản SÁNG dùng sắc đậm để đạt tương phản đọc được trên nền nhạt.

     🔴 Tên `--lp-blue*` là DẤU VẾT LỊCH SỬ, không còn tả đúng màu: từ 2026-08-20 màu hành động là
     XANH THẢM sân cầu lông (--court-500 #0E7A5F bên app.css), không phải xanh dương. Giữ tên vì đổi
     là 26 chỗ trong file này cộng 6 chỗ ở template, sót một chỗ là vỡ layout mà KHÔNG báo lỗi — đúng
     lý do đã giữ tiền tố `share-` trong app.css (VT-5). Đọc `--lp-blue` là "màu hành động".

     Vẫn phải khác rõ --lp-green (#15803D = tiền): xanh thảm ngả LAM nên tách được, xanh lá thuần
     thì không. Cùng ràng buộc "primary tách khỏi màu-ngữ-nghĩa-tiền" ở 02_Brand_Identity.md § 8. */
  --lp-blue:      #08503F;
  --lp-blue-deep: #0E7A5F;
  --lp-green:     #15803D;
  --lp-amber:     #C2410C;

  --lp-tint-blue:  rgba(14, 122, 95, .09);
  --lp-tint-green: rgba(21, 128, 61, .10);
  --lp-tint-amber: rgba(194, 65, 12, .10);
  --lp-edge-blue:  rgba(14, 122, 95, .26);
  --lp-edge-green: rgba(21, 128, 61, .28);
  --lp-edge-amber: rgba(194, 65, 12, .28);

  --lp-sel:        rgba(14, 122, 95, .18);
  --lp-on-accent:  #FFFFFF;
  --lp-btn-hover:  #0A6450;
  --lp-track:      rgba(15, 23, 42, .10);
  --lp-glow:       rgba(14, 122, 95, .14);
  --lp-chart-2:    #166534;

  --lp-shadow: 0 18px 44px rgba(15, 23, 42, .10), 0 2px 8px rgba(15, 23, 42, .06);
  --lp-totop-shadow:       0 10px 28px rgba(14, 122, 95, .28), 0 3px 10px rgba(15, 23, 42, .18);
  --lp-totop-shadow-hover: 0 14px 34px rgba(14, 122, 95, .34), 0 5px 14px rgba(15, 23, 42, .22);
}

/* ------------------------------------------------------------
   TỐI — sân ban đêm
   ------------------------------------------------------------ */
[data-bs-theme="dark"] .lp {
  --lp-bg:        #05101F;
  --lp-bg-2:      #071627;
  --lp-surface:   #0D2144;
  --lp-surface-2: #12294F;
  --lp-raise:     #16305A;
  --lp-ui-bottom:    #0A1B39;
  --lp-clock-bottom: #0C1F42;
  --lp-nav-bg:    rgba(5, 16, 31, .82);
  --lp-float-bg:  rgba(13, 33, 68, .92);

  --lp-line:        rgba(150, 175, 214, .16);
  --lp-line-strong: rgba(150, 175, 214, .34);

  --lp-chalk: #F2F6FC;
  --lp-mute:  #9DB0CE;
  --lp-dim:   #6D82A6;

  --lp-blue:      #7FD9BC;
  --lp-blue-deep: #0A6450;
  --lp-green:     #4ADE80;
  --lp-amber:     #FFAE6B;

  --lp-tint-blue:  rgba(127, 217, 188, .12);
  --lp-tint-green: rgba(74, 222, 128, .12);
  --lp-tint-amber: rgba(255, 174, 107, .12);
  --lp-edge-blue:  rgba(127, 217, 188, .30);
  --lp-edge-green: rgba(74, 222, 128, .30);
  --lp-edge-amber: rgba(255, 174, 107, .32);

  --lp-sel:        rgba(127, 217, 188, .30);
  --lp-on-accent:  #FFFFFF;
  --lp-btn-hover:  #0E7A5F;
  --lp-track:      rgba(150, 175, 214, .16);
  --lp-glow:       rgba(14, 122, 95, .28);
  --lp-chart-2:    #2BA55C;

  --lp-shadow: 0 24px 60px rgba(2, 8, 20, .55), 0 4px 14px rgba(2, 8, 20, .4);
  --lp-totop-shadow:       0 10px 28px rgba(14, 122, 95, .38), 0 3px 12px rgba(2, 8, 20, .5);
  --lp-totop-shadow-hover: 0 16px 38px rgba(14, 122, 95, .46), 0 6px 16px rgba(2, 8, 20, .55);
}

/* Chặn nền của app.css lọt qua ở <body>. Giá trị dự phòng là nền SÁNG vì
   đó là mặc định khi chưa có data-bs-theme nào được đặt. */
body.lp-body {
  background: var(--lp-bg, #F4F6FA);
  margin: 0;
}

/* Chỉ có hiệu lực ở trang giới thiệu vì landing.css chỉ được nạp ở đó.
   scroll-padding chừa chỗ cho thanh trên dính, nếu không tiêu đề của mục
   vừa nhảy tới sẽ nằm khuất sau nó. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.lp ::selection { background: var(--lp-sel); color: var(--lp-chalk); }

.lp-wrap {
  width: 100%;
  max-width: var(--lp-max);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
/* 🔴 line-height của tiêu đề KHÔNG được xuống dưới ~1.05.
   Tiếng Việt chồng hai dấu trên cùng một nguyên âm ("ố" = mũ + sắc, "ằ" = trăng + huyền), nên phần
   nhô lên của chữ cao hơn hẳn tiếng Anh. Ở .96 — con số trông rất "chặt" và đúng gu display — dấu
   của dòng dưới đâm vào chân chữ dòng trên: đã thấy rõ ở "Tan sân 21:00. / Chốt sổ xong". Muốn tiêu
   đề trông chặt thì siết letter-spacing, đừng siết line-height. */
.lp-display {
  font-size: clamp(2.5rem, 7.2vw, 5rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--lp-chalk);
  margin: 0;
  text-wrap: balance;
}
.lp-h2 {
  font-size: clamp(1.85rem, 4.4vw, 3.15rem);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--lp-chalk);
  margin: 0 0 1rem;
  text-wrap: balance;
}
.lp-h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--lp-chalk);
  margin: 0 0 .5rem;
}
.lp-lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--lp-mute);
  margin: 0;
  max-width: 46ch;
}
.lp-body-text {
  color: var(--lp-mute);
  margin: 0;
  max-width: 54ch;
}
.lp-accent { color: var(--lp-blue); }
.lp-money {
  font-family: var(--lp-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -.01em;
}

/* Eyebrow — vạch sân ngắn rồi tới nhãn. */
.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lp-dim);
  margin: 0 0 1rem;
}
.lp-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--lp-line-strong);
  flex: none;
}

/* Mốc giờ — marker cấu trúc của trang. Không dùng 01/02/03 vì
   nội dung này là một chuỗi THỜI GIAN thật của một buổi tập. */
.lp-time {
  font-family: var(--lp-mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--lp-blue);
  background: var(--lp-tint-blue);
  border: 1px solid var(--lp-edge-blue);
  border-radius: var(--lp-r-sm);
  padding: .25rem .5rem;
  display: inline-block;
}

/* ============================================================
   NÚT
   ============================================================ */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.375rem;
  border-radius: var(--lp-r);
  font-size: .9375rem;
  font-weight: 600;
  font-family: var(--lp-sans);
  text-decoration: none;
  /* Nhãn nút KHÔNG bao giờ được bẻ dòng: nút cao gấp đôi và mũi tên rớt xuống dòng dưới.
     Chỗ nào hẹp thì rút ngắn nhãn (xem .lp-only-wide), không để nó tự xuống dòng. */
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.lp-btn--primary {
  background: var(--lp-blue-deep);
  color: var(--lp-on-accent);
  border-color: var(--lp-blue-deep);
}
.lp-btn--primary:hover {
  background: var(--lp-btn-hover);
  border-color: var(--lp-btn-hover);
  color: var(--lp-on-accent);
  transform: translateY(-1px);
}
.lp-btn--ghost {
  background: transparent;
  color: var(--lp-chalk);
  border-color: var(--lp-line-strong);
}
.lp-btn--ghost:hover {
  background: var(--lp-track);
  border-color: var(--lp-line-strong);
  color: var(--lp-chalk);
  transform: translateY(-1px);
}
.lp-btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .875rem; }

.lp a:focus-visible,
.lp button:focus-visible {
  outline: 2px solid var(--lp-blue);
  outline-offset: 3px;
  border-radius: var(--lp-r-sm);
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

/* ============================================================
   THANH ĐIỀU HƯỚNG
   ============================================================ */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--lp-nav-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: transform .3s var(--lp-ease-nav, cubic-bezier(.4, 0, .2, 1)),
              border-color .25s ease,
              background-color .25s ease;
}
.lp-nav.is-stuck { border-bottom-color: var(--lp-line); }
/* Cuộn xuống là lúc người ta đang đọc ⇒ trả lại chiều cao thanh cho nội dung.
   Cuộn lên là lúc người ta đi tìm chỗ khác ⇒ đưa thanh trở lại ngay. */
.lp-nav.is-hidden { transform: translateY(-100%); }
/* min-height chứ không phải height: nếu một ngày nội dung cao hơn dự tính, thanh giãn ra
   thay vì để chữ tràn ra ngoài khung. */
.lp-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}
.lp-brand {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: var(--lp-chalk);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.0625rem;
  /* "CLB Cầu Lông" gãy làm hai dòng ở 390px nếu không chặn — thanh nav cao gấp đôi
     và tên sản phẩm là thứ đầu tiên người ta thấy. */
  white-space: nowrap;
}
.lp-brand__mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--lp-blue-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-on-accent);
  flex: none;
}
/* 🔴 Phải khai `color` NGAY TRÊN thẻ svg, không chỉ trên ô cha: app.css có
   `.brand-svg { color: var(--action-primary) }` đặt thẳng lên phần tử svg, mà quy tắc đặt trực tiếp
   luôn thắng màu kế thừa từ cha — dù cha có cụ thể tới đâu. Hệ quả nếu thiếu dòng này: ở giao diện
   SÁNG, --action-primary (#0E7A5F) trùng đúng nền nút (--lp-blue-deep) ⇒ con cầu lông biến mất hẳn,
   chỉ còn một ô vuông xanh trống. */
.lp-brand__mark .brand-svg { width: 18px; height: 18px; color: var(--lp-on-accent); }
.lp-nav__links { display: flex; align-items: center; gap: 1.75rem; }
.lp-nav__link {
  color: var(--lp-mute);
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 500;
  transition: color .18s ease;
}
.lp-nav__link:hover { color: var(--lp-chalk); }
.lp-nav__cta { display: flex; align-items: center; gap: .75rem; }
.lp-theme {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lp-r);
  border: 1px solid var(--lp-line);
  background: transparent;
  color: var(--lp-mute);
  font-size: 1rem;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.lp-theme:hover {
  color: var(--lp-chalk);
  border-color: var(--lp-line-strong);
  background: var(--lp-track);
}

/* Nút ☰ mở menu gập — ẩn trên máy tính (.lp-nav__links đã đủ), chỉ hiện ≤991px (xem @media dưới).
   Tạo dáng đồng bộ với .lp-theme để hai nút cạnh nhau thành một cặp. */
.lp-nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--lp-r);
  border: 1px solid var(--lp-line);
  background: transparent;
  color: var(--lp-mute);
  font-size: 1.25rem;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.lp-nav__toggle:hover {
  color: var(--lp-chalk);
  border-color: var(--lp-line-strong);
  background: var(--lp-track);
}

/* ── Nút "lên đầu trang" ─────────────────────────────────────────────
   Nổi cố định góc dưới phải, chỉ hiện sau khi đã cuộn qua khu hero (JS gắn
   .is-visible). Hình tròn, hiện/ẩn mượt bằng opacity + trượt lên hơi nảy;
   rê chuột thì nhấc nhẹ và mũi tên nhích lên. Bấm là cuộn êm về đỉnh.
   Mọi chuyển động tự tắt khi hệ điều hành bật "giảm chuyển động".        */
.lp-totop {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 45;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--lp-blue-deep);
  color: var(--lp-on-accent);
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: var(--lp-totop-shadow);
  /* Trạng thái ẩn: mờ, thu nhỏ, trượt xuống — và không nhận chuột khi đang ẩn. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.85);
  transition: opacity .28s ease, visibility .28s ease, background-color .18s ease,
    box-shadow .22s ease, transform .34s cubic-bezier(.34, 1.56, .64, 1);
}
.lp-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.lp-totop:hover {
  background: var(--lp-btn-hover);
  box-shadow: var(--lp-totop-shadow-hover);
  transform: translateY(-3px) scale(1);
}
.lp-totop:active {
  transform: translateY(-1px) scale(.96);
}
.lp-totop:focus-visible {
  outline: 2px solid var(--lp-blue);
  outline-offset: 3px;
}
.lp-totop i {
  transition: transform .25s ease;
}
.lp-totop:hover i {
  transform: translateY(-2px);
}

@media (max-width: 575.98px) {
  .lp-totop {
    width: 46px;
    height: 46px;
    font-size: 1.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-totop {
    transition: opacity .2s ease, visibility .2s ease;
    transform: none;
  }
  .lp-totop.is-visible,
  .lp-totop:hover,
  .lp-totop:active {
    transform: none;
  }
  .lp-totop i,
  .lp-totop:hover i {
    transition: none;
    transform: none;
  }
}

/* Popup menu gập: overlay NỔI trên nội dung (position:absolute) — KHÔNG chiếm chỗ trong luồng.
   🔴 Vì sao absolute chứ không phải display:none↔flex trong luồng: bản trong-luồng khi MỞ làm header
   cao thêm ~250px ⇒ trình duyệt dịch scrollY để giữ mỏ neo ⇒ handler cuộn tưởng "đang cuộn xuống" và
   tự đóng menu ngay lập tức. Đúng triệu chứng đã gặp: ở đỉnh trang mở được, nhưng cuộn xuống rồi cuộn
   lên bấm thì menu vừa mở đã đóng. Overlay không đổi layout nên không có cú nhảy scroll đó.
   .lp-nav là position:sticky ⇒ chính nó là containing block cho con absolute này. */
.lp-nav__mobile {
  position: absolute;
  top: calc(100% - .25rem);
  right: var(--lp-gutter);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: .125rem;
  width: min(18rem, calc(100vw - 2 * var(--lp-gutter)));
  padding: .5rem;
  /* Nền ĐỤC hoàn toàn (--lp-surface, không phải --lp-float-bg bán trong suốt) để chữ menu không
     lẫn với nội dung trang bên dưới. Nền đặc rồi thì backdrop-filter vô nghĩa ⇒ bỏ. */
  background: var(--lp-surface);
  border: 1px solid var(--lp-line-strong);
  border-radius: 16px;
  box-shadow: var(--lp-shadow);
  /* Trạng thái đóng: mờ + trượt/thu nhỏ nhẹ từ góc nút ☰ + không nhận chuột. Dùng visibility (KHÔNG
     phải display) để transition chạy được — display không nội suy được. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.5rem) scale(.97);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .2s ease,
              transform .2s var(--lp-ease-nav, cubic-bezier(.4, 0, .2, 1)),
              visibility .2s;
}
.lp-nav__mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.lp-nav__mlink {
  color: var(--lp-mute);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: .75rem .625rem;
  border-radius: 10px;
  transition: color .18s ease, background-color .18s ease;
}
.lp-nav__mlink:hover,
.lp-nav__mlink:focus-visible {
  color: var(--lp-chalk);
  background: var(--lp-track);
}
.lp-nav__mlink--login {
  margin-top: .375rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-chalk);
  font-weight: 600;
}

/* ============================================================
   SECTION
   ============================================================ */
.lp-section { padding-block: var(--lp-section); position: relative; }
.lp-section--tight { padding-block: calc(var(--lp-section) * .62); }
.lp-section + .lp-section { border-top: 1px solid var(--lp-line); }

.lp-section__head { max-width: 42rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.lp-section__head--center { margin-inline: auto; text-align: center; }
.lp-section__head--center .lp-lead { margin-inline: auto; }
.lp-section__head--center .lp-eyebrow { justify-content: center; }

/* Bố cục "kể chuyện": chữ một bên, giao diện thật một bên. */
.lp-split {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.lp-split--flip .lp-split__media { order: -1; }
.lp-split__copy { min-width: 0; }
.lp-split__media { min-width: 0; }

/* Problem → Action → Result: ba nhịp dưới phần chữ mỗi section. */
.lp-beats { display: grid; gap: .875rem; margin-top: 1.75rem; }
.lp-beat {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  font-size: .9375rem;
  color: var(--lp-mute);
}
.lp-beat__key {
  font-family: var(--lp-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--lp-dim);
  padding-top: .3rem;
}
.lp-beat strong { color: var(--lp-chalk); font-weight: 600; }
.lp-beat--result { color: var(--lp-chalk); }
.lp-beat--result .lp-beat__key { color: var(--lp-green); }

/* ============================================================
   KHUNG GIAO DIỆN GIẢ LẬP — dựng lại đúng UI thật của app
   ============================================================ */
.lp-ui {
  background: linear-gradient(180deg, var(--lp-surface) 0%, var(--lp-ui-bottom) 100%);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  box-shadow: var(--lp-shadow);
  overflow: hidden;
}
.lp-ui__bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--lp-line);
  background: var(--lp-ui-bottom);
  font-size: .75rem;
  color: var(--lp-dim);
  min-width: 0;
}
.lp-ui__crumb {
  display: flex;
  align-items: center;
  gap: .375rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lp-ui__crumb b { color: var(--lp-mute); font-weight: 600; }
.lp-ui__body { padding: clamp(1rem, 2.4vw, 1.5rem); }

.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .1875rem .5rem;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap;
}
.lp-badge--green { color: var(--lp-green); background: var(--lp-tint-green); border-color: var(--lp-edge-green); }
.lp-badge--blue  { color: var(--lp-blue);  background: var(--lp-tint-blue); border-color: var(--lp-edge-blue); }
.lp-badge--amber { color: var(--lp-amber); background: var(--lp-tint-amber); border-color: var(--lp-edge-amber); }
.lp-badge--dim   { color: var(--lp-dim);   background: var(--lp-track); border-color: var(--lp-line); }

/* Dòng người trong bảng — dùng lại ở chia tiền, điểm danh, công nợ. */
.lp-line {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .625rem .25rem;
  border-bottom: 1px solid var(--lp-line);
}
.lp-line:last-child { border-bottom: 0; }
.lp-line__avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lp-raise);
  color: var(--lp-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex: none;
}
.lp-line__name { font-size: .9375rem; font-weight: 500; color: var(--lp-chalk); min-width: 0; }
.lp-line__meta {
  display: block;
  font-size: .75rem;
  color: var(--lp-dim);
  font-weight: 400;
}
.lp-line__meta .lp-w {
  font-family: var(--lp-mono);
  color: var(--lp-mute);
}
.lp-line__amount { font-size: .9375rem; font-weight: 600; color: var(--lp-chalk); }

.lp-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 1rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: var(--lp-tint-blue);
  margin-bottom: 1rem;
}
.lp-total__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lp-mute);
}
.lp-total__value { font-size: 1.5rem; font-weight: 700; color: var(--lp-chalk); }

/* ============================================================
   HERO
   ============================================================ */
.lp-hero { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem) var(--lp-section); overflow: hidden; }

/* Quầng sáng dịu sau tiêu đề — KHÔNG kẻ ô.
   Bản đầu vẽ "vạch sân cầu lông" bằng hai repeating-linear-gradient cách đều; vấn đề là vạch sân
   thật KHÔNG cách đều, nên thứ hiện ra đọc thành giấy kẻ ô và kéo mắt ra khỏi nội dung. Người dùng
   nhận ra ngay ở lần xem đầu (2026-08-10). Nền chỉ cần đỡ cho chữ, không cần kể chuyện riêng. */
.lp-hero__court {
  position: absolute;
  inset: -10% -20% auto;
  height: 620px;
  pointer-events: none;
  background: radial-gradient(1000px 460px at 50% -8%, var(--lp-glow), transparent 70%);
}
.lp-hero__inner { position: relative; z-index: 1; }
/* Đủ rộng để "Chốt sổ xong 21:03." nằm trọn một dòng ở cỡ chữ lớn nhất — tách ra thành dòng cụt
   chỉ có "21:03." làm hỏng nhịp của câu. */
.lp-hero__copy { max-width: 54rem; }
.lp-hero .lp-lead { max-width: 40ch; }

.lp-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lp-line);
  font-size: .875rem;
  color: var(--lp-dim);
}
.lp-hero__proof b { color: var(--lp-chalk); font-weight: 600; }

/* Sân khấu hero: bảng chốt sổ + đồng hồ + 2 thẻ nổi. */
.lp-stage { position: relative; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.lp-stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}
.lp-stage__side { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }

/* Đồng hồ chốt sổ — signature của trang. */
.lp-clock {
  background: linear-gradient(180deg, var(--lp-surface-2) 0%, var(--lp-clock-bottom) 100%);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  padding: 1.5rem;
  box-shadow: var(--lp-shadow);
}
.lp-clock__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lp-dim);
  margin: 0 0 .625rem;
}
.lp-clock__time {
  font-family: var(--lp-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.75rem, 7vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--lp-chalk);
  display: block;
}
.lp-clock__time.is-done { color: var(--lp-green); }
.lp-clock__note { font-size: .8125rem; color: var(--lp-mute); margin: .75rem 0 0; }
.lp-clock__budget {
  margin-top: 1rem;
  height: 4px;
  border-radius: 999px;
  background: var(--lp-track);
  overflow: hidden;
}
.lp-clock__budget span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lp-blue-deep), var(--lp-green));
  transition: width .4s linear;
}

.lp-float {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: var(--lp-float-bg);
  backdrop-filter: blur(8px);
  padding: .875rem 1rem;
  box-shadow: var(--lp-shadow);
}
.lp-float__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lp-dim);
  display: block;
  margin-bottom: .25rem;
}
.lp-float__value { font-size: 1.25rem; font-weight: 700; color: var(--lp-chalk); }
.lp-float__value small { font-size: .8125rem; font-weight: 500; color: var(--lp-green); margin-left: .375rem; }

/* ============================================================
   SECTION VẤN ĐỀ — mảnh vụn rải rác rồi gom về một khối
   ============================================================ */
/* 6 mẩu. minmax phải đủ RỘNG để số cột luôn là ước của 6 (3 trên máy tính, 2 trên máy tính bảng,
   1 trên điện thoại) — với 190px thì vừa 5 cột ở 1180px và hàng cuối trơ lại đúng một ô lẻ. */
.lp-mess {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .875rem;
  margin-bottom: 2.5rem;
}
.lp-scrap {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: var(--lp-bg-2);
  padding: .875rem 1rem;
  transition: transform .5s var(--lp-ease, cubic-bezier(.16, 1, .3, 1));
}
.lp-scrap__src {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-dim);
  display: block;
  margin-bottom: .375rem;
}
.lp-scrap__text { font-size: .875rem; color: var(--lp-mute); margin: 0; line-height: 1.5; }
.lp-scrap:nth-child(odd)  { transform: rotate(-1.1deg); }
.lp-scrap:nth-child(even) { transform: rotate(.9deg); }
.lp-scrap:nth-child(3n)   { transform: rotate(.4deg); }
.lp-mess.is-tidy .lp-scrap { transform: rotate(0deg); }

.lp-converge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-r-lg);
  background: linear-gradient(180deg, var(--lp-tint-blue), transparent);
  text-align: center;
}
.lp-converge strong {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--lp-chalk);
}

.lp-cost {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--lp-line);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  overflow: hidden;
  margin-top: 2.5rem;
}
.lp-cost__cell { background: var(--lp-bg-2); padding: 1.125rem 1.25rem; }
.lp-cost__num {
  font-family: var(--lp-mono);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--lp-chalk);
  display: block;
}
.lp-cost__num.is-good { color: var(--lp-green); }
.lp-cost__cap { font-size: .8125rem; color: var(--lp-dim); }

/* ============================================================
   LUỒNG DỮ LIỆU — chuỗi mắt xích module
   ------------------------------------------------------------
   Trên máy tính là một hàng ngang có mũi tên; xuống điện thoại
   xoay thành cột dọc (mũi tên cũng phải xoay theo, xem @media).
   ============================================================ */
.lp-flow {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.lp-flow__node {
  flex: 1 1 0;
  min-width: 118px;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem .875rem;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r);
  background: var(--lp-bg-2);
  text-align: center;
  align-items: center;
}
.lp-flow__node i { font-size: 1.125rem; color: var(--lp-blue); }
.lp-flow__node b { font-size: .875rem; font-weight: 600; color: var(--lp-chalk); }
.lp-flow__node span { font-size: .75rem; color: var(--lp-dim); }
.lp-flow__link {
  flex: none;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .125rem;
  padding-inline: .125rem;
}
.lp-flow__link::before {
  content: "→";
  font-size: 1rem;
  line-height: 1;
  color: var(--lp-line-strong);
}
.lp-flow__link span {
  font-size: .625rem;
  letter-spacing: .04em;
  color: var(--lp-dim);
  white-space: nowrap;
}
/* 🔴 Là flex container, nên phần chữ BẮT BUỘC nằm trong đúng MỘT <span>.
   Để text trần cạnh <b>/<i>, mỗi mẩu text và mỗi thẻ inline thành một flex item riêng, và mỗi item
   tự co về min-content ⇒ ở 360px cả đoạn văn vỡ thành mấy cột chữ dựng đứng. Không lộ trên máy tính
   vì còn thừa chỗ. Cùng lý do áp cho .lp-beat và mọi khối flex có chữ chảy. */
.lp-flow__note {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lp-line);
  font-size: .875rem;
  color: var(--lp-mute);
  line-height: 1.6;
}
.lp-flow__note i { color: var(--lp-green); padding-top: .1875rem; flex: none; }
.lp-flow__note b { color: var(--lp-chalk); font-weight: 600; }

/* ============================================================
   BUỔI TẬP — thông số dòng
   ============================================================ */
.lp-vote { display: grid; gap: 0; }
.lp-vote__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: .625rem 0;
  border-bottom: 1px solid var(--lp-line);
  font-size: .875rem;
}
.lp-vote__row:last-child { border-bottom: 0; }
.lp-vote__row span { color: var(--lp-dim); white-space: nowrap; }
.lp-vote__row b { color: var(--lp-chalk); font-weight: 600; text-align: right; }

/* ============================================================
   CHIA TIỀN — bảng tính từng bước
   ============================================================ */
.lp-calc {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
.lp-calc__steps {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  background: linear-gradient(180deg, var(--lp-surface) 0%, var(--lp-ui-bottom) 100%);
  box-shadow: var(--lp-shadow);
  overflow: hidden;
}
.lp-calc__row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--lp-line);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1);
}
.lp-calc__row:last-child { border-bottom: 0; }
.lp-calc__row.is-in { opacity: 1; transform: none; }
.lp-calc__k {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-dim);
}
.lp-calc__v { font-size: .9375rem; color: var(--lp-chalk); white-space: normal; }
.lp-calc__v i { color: var(--lp-dim); font-style: normal; font-size: .8125rem; }
.lp-calc__row.is-final { background: var(--lp-tint-green); }
.lp-calc__row.is-final .lp-calc__v { color: var(--lp-green); font-weight: 600; }

.lp-calc__out {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  padding: 1.5rem;
  background: var(--lp-bg-2);
}
/* Cùng luật với .lp-flow__note: phần chữ nằm trong một <span> để nó tự xuống dòng,
   icon giữ nguyên cạnh dòng đầu thay vì bị đẩy lên một dòng riêng. */
.lp-calc__check {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  margin-top: 1.25rem;
  padding: .75rem .875rem;
  border-radius: var(--lp-r);
  background: var(--lp-tint-green);
  border: 1px solid var(--lp-edge-green);
  font-size: .875rem;
  font-weight: 600;
  color: var(--lp-green);
}
.lp-calc__check i { flex: none; padding-top: .1875rem; }

.lp-modes {
  display: grid;
  /* 5 ô = 5 cột bằng nhau. Không dùng auto-fit: ở bề rộng tối đa của .lp-wrap
     (1180px − gutter ≈ 1100px) chỉ vừa 4 cột 220px, nên ô thứ 5 rớt xuống một
     mình và để lại 3 track trống lộ nền kẻ. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--lp-line);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  overflow: hidden;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.lp-mode {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: 1.375rem 1.25rem;
  background: var(--lp-bg-2);
}
.lp-mode i { font-size: 1.125rem; color: var(--lp-blue); }
.lp-mode b { font-size: .9375rem; font-weight: 600; color: var(--lp-chalk); }
.lp-mode span { font-size: .8125rem; color: var(--lp-mute); line-height: 1.55; }

/* ============================================================
   ĐIỂM DANH — hàng tick được
   ============================================================ */
/* Là <button> thật, không phải <div> giả nút: bấm được bằng bàn phím,
   đọc được bằng trình đọc màn hình. Cần gỡ style mặc định của button. */
.lp-tick {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  width: 100%;
  padding: .5rem .25rem;
  border: 0;
  border-bottom: 1px solid var(--lp-line);
  background: transparent;
  text-align: left;
  font-family: var(--lp-sans);
  cursor: pointer;
}
.lp-tick:last-child { border-bottom: 0; }
.lp-tick__box {
  width: 44px;
  height: 44px;
  border-radius: var(--lp-r-sm);
  border: 1.5px solid var(--lp-line-strong);
  background: transparent;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.lp-tick.is-on .lp-tick__box {
  background: var(--lp-tint-green);
  border-color: var(--lp-green);
  color: var(--lp-green);
}
.lp-tick__name { font-size: .9375rem; font-weight: 500; color: var(--lp-mute); transition: color .2s ease; }
.lp-tick.is-on .lp-tick__name { color: var(--lp-chalk); }
.lp-counter {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: 1rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--lp-line);
}
.lp-counter__num {
  font-family: var(--lp-mono);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--lp-green);
  letter-spacing: -.03em;
}
.lp-counter__cap { font-size: .875rem; color: var(--lp-dim); }

/* ============================================================
   CÔNG NỢ — thanh tiến độ thu tiền
   ============================================================ */
.lp-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--lp-track);
  overflow: hidden;
  margin: .75rem 0 .5rem;
}
.lp-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--lp-green);
  transition: width 1.1s cubic-bezier(.16, 1, .3, 1);
}
.lp-progress__cap {
  display: flex;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--lp-dim);
}

/* ============================================================
   SỔ QUỸ — biểu đồ cột thuần CSS
   ============================================================ */
.lp-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .625rem;
  align-items: end;
  height: 168px;
  padding-top: .5rem;
}
.lp-chart__col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: .5rem; }
.lp-chart__bar {
  height: 0;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--lp-blue), var(--lp-blue-deep));
  transition: height .9s cubic-bezier(.16, 1, .3, 1);
}
.lp-chart__col:last-child .lp-chart__bar { background: linear-gradient(180deg, var(--lp-green), var(--lp-chart-2)); }
.lp-chart__x {
  font-family: var(--lp-mono);
  font-size: .6875rem;
  color: var(--lp-dim);
  text-align: center;
}
.lp-ledger { display: grid; gap: 0; margin-top: 1.25rem; }
.lp-ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: .625rem 0;
  border-top: 1px solid var(--lp-line);
  font-size: .875rem;
}
.lp-ledger__row span { color: var(--lp-mute); min-width: 0; }
.lp-ledger__in  { color: var(--lp-green); font-weight: 600; }
.lp-ledger__out { color: var(--lp-amber); font-weight: 600; }

/* ============================================================
   HÀNH TRÌNH — timeline theo mốc giờ
   ============================================================ */
.lp-journey { display: grid; gap: 0; margin-top: 1rem; }
.lp-step {
  display: grid;
  /* Đủ rộng cho mốc dài nhất ("Cuối tháng") và cho vai trò người thực hiện
     ("Anh Tuấn · Chủ CLB") không phải xuống ba dòng. */
  grid-template-columns: 128px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.75rem 0;
  border-top: 1px solid var(--lp-line);
  position: relative;
}
.lp-step:last-child { border-bottom: 1px solid var(--lp-line); }
.lp-step__when { padding-top: .125rem; }
.lp-step__who {
  display: block;
  font-size: .75rem;
  color: var(--lp-dim);
  margin-top: .5rem;
}
.lp-step__title {
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--lp-chalk);
  margin: 0 0 .375rem;
}
.lp-step__text { font-size: .9375rem; color: var(--lp-mute); margin: 0; max-width: 58ch; }

/* ============================================================
   CTA CUỐI
   ============================================================ */
.lp-final {
  position: relative;
  text-align: center;
  padding-block: clamp(5rem, 11vw, 9rem);
  overflow: hidden;
}
/* Cùng lý do với .lp-hero__court: chỉ quầng sáng, không kẻ ô. */
.lp-final__court {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(760px 380px at 50% 120%, var(--lp-glow), transparent 70%);
}
.lp-final__inner { position: relative; z-index: 1; }
.lp-final .lp-lead { margin-inline: auto; }
.lp-final .lp-actions { justify-content: center; }

.lp-foot {
  border-top: 1px solid var(--lp-line);
  padding-block: 2rem;
  font-size: .875rem;
  color: var(--lp-dim);
}
.lp-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lp-foot a { color: var(--lp-mute); text-decoration: none; }
.lp-foot a:hover { color: var(--lp-chalk); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.lp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.lp-reveal.is-in { opacity: 1; transform: none; }
.lp-reveal[data-lp-delay="1"] { transition-delay: .08s; }
.lp-reveal[data-lp-delay="2"] { transition-delay: .16s; }
.lp-reveal[data-lp-delay="3"] { transition-delay: .24s; }

/* Dưới 1200px, 5 cột sẽ hẹp hơn 220px — bề rộng tối thiểu mỗi ô cần để tiêu đề
   không vỡ. Chuyển sang 3 + 2 trên lưới 6 cột: hai hàng cùng lấp kín, không còn
   track trống lộ nền kẻ như khi để grid tự xuống dòng. */
@media (max-width: 1199.98px) {
  .lp-modes { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lp-mode:nth-child(-n+3) { grid-column: span 2; }
  .lp-mode:nth-child(n+4)  { grid-column: span 3; }
}

/* ============================================================
   RESPONSIVE — máy tính bảng
   ============================================================ */
@media (max-width: 991.98px) {
  .lp-split,
  .lp-calc,
  .lp-stage__grid { grid-template-columns: minmax(0, 1fr); }
  /* Trên một cột, chữ luôn đi trước giao diện — đảo thứ tự chỉ có nghĩa khi
     hai khối nằm cạnh nhau. */
  .lp-split--flip .lp-split__media { order: 0; }
  .lp-split__media { order: 0; }
  .lp-stage__side { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .lp-nav__links { display: none; }
  .lp-nav__toggle { display: inline-flex; }
  .lp-section__head { max-width: none; }
  .lp-calc__row { grid-template-columns: 160px minmax(0, 1fr); }
}

/* ============================================================
   RESPONSIVE — điện thoại
   ============================================================ */
@media (max-width: 575.98px) {
  .lp { line-height: 1.6; }
  .lp-hero__court { height: 420px; }
  .lp-stage__side { grid-template-columns: minmax(0, 1fr); }

  /* Luồng dữ liệu: hàng ngang cuộn được → cột dọc đọc từ trên xuống.
     Mũi tên phải xoay theo, nếu không nó chỉ sang ngang trong một cột dọc. */
  .lp-flow { flex-direction: column; overflow-x: visible; }
  .lp-flow__node { min-width: 0; flex-direction: row; text-align: left; gap: .75rem; padding: .875rem 1rem; }
  .lp-flow__node b { flex: 1 1 auto; }
  .lp-flow__link { flex-direction: row; gap: .5rem; padding-block: .25rem; }
  .lp-flow__link::before { content: "↓"; }

  .lp-calc__row { grid-template-columns: minmax(0, 1fr); gap: .25rem; padding: .875rem 1rem; }
  .lp-vote__row { grid-template-columns: minmax(0, 1fr); gap: .125rem; }
  .lp-vote__row b { text-align: left; }
  .lp-step {
    grid-template-columns: minmax(0, 1fr);
    gap: .875rem;
  }
  .lp-step__who { display: inline; margin-left: .625rem; margin-top: 0; }
  /* Ở 360px, "Khách của Nam" + huy hiệu KHÁCH không đủ chỗ trên một dòng nên huy hiệu rớt
     xuống, làm đúng một dòng cao vọt lên giữa bảng. Thu nhỏ đồng bộ cả cụm để mọi dòng
     cùng chiều cao — bảng tiền phải đọc như một cột đều, không phải danh sách so le. */
  .lp-line { grid-template-columns: 24px minmax(0, 1fr) auto; gap: .5rem; }
  .lp-line__avatar { width: 24px; height: 24px; font-size: .6875rem; }
  .lp-line__name { font-size: .875rem; }
  .lp-line__amount { font-size: .8125rem; }
  .lp-line__meta { font-size: .6875rem; }
  .lp-line__name .lp-badge { font-size: .625rem; padding: .125rem .375rem; }
  .lp-total { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .lp-chart { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .375rem; height: 140px; }
  /* Thanh trên ở 390px chỉ đủ chỗ cho: thương hiệu + nút giao diện + một CTA.
     Bỏ "Đăng nhập" ở đây — nó vẫn có ở cuối trang và trong khối CTA cuối.
     Kèm theo: thu nhỏ thương hiệu và rút nhãn CTA còn "Tạo CLB", nếu không cả hai
     cùng bẻ dòng và thanh nav cao gấp đôi. */
  .lp-nav__login { display: none; }
  .lp-nav__inner { gap: .5rem; }
  .lp-brand { font-size: .9375rem; gap: .5rem; }
  .lp-brand__mark { width: 28px; height: 28px; border-radius: 8px; }
  .lp-brand__mark .brand-svg { width: 16px; height: 16px; }
  .lp-theme { width: 36px; height: 36px; }
  .lp-only-wide { display: none; }
  .lp-nav__cta .lp-btn--sm { padding-inline: .875rem; }
  .lp-hero__proof { gap: .375rem 1rem; }

  /* Icon đứng một mình trên một dòng làm ô cao lên mà không thêm thông tin gì.
     Trên điện thoại cho nó về cùng hàng với tiêu đề. */
  .lp-mode {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: .75rem;
    row-gap: .25rem;
    align-items: center;
  }
  .lp-mode i { grid-row: 1; }
  .lp-mode b { grid-row: 1; }
  .lp-mode span { grid-column: 2; }
  /* Gỡ span 2/3 của máy tính bảng — trên điện thoại mỗi ô chiếm trọn một dòng.
     Phải cùng độ đặc hiệu với .lp-mode:nth-child(…) mới đè được. */
  .lp-modes { grid-template-columns: minmax(0, 1fr); }
  .lp-modes .lp-mode { grid-column: auto; }
  .lp-actions .lp-btn { flex: 1 1 100%; }
  .lp-ui__body { padding: 1rem; }
  .lp-cost__cell { padding: 1rem; }
}

/* ============================================================
   GIẢM CHUYỂN ĐỘNG — tôn trọng cài đặt hệ điều hành
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .lp *,
  .lp *::before,
  .lp *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .lp-reveal { opacity: 1; transform: none; }
  .lp-scrap { transform: none; }
}