/* ============================================================
   OPTIMIZE — The New Leaders v2  (site thenewleaders-v2.local)
   Tải SAU live.css. Theo .claude/context/ui-standards-v2.md.
   GIỮ bố cục + màu brand + font Euclid Circular A + cách trình bày web cũ.
   Chỉ tinh chỉnh typography / spacing / states cho dễ đọc, chuẩn UX/UI.
   Scope: body.tnl-opt. Áp dần từng trang — đợt 1: TRANG CHỦ.
   ============================================================ */

/* ===== §1 TYPOGRAPHY ===== */

/* Nét body "đầm" hơn (feedback) — giữ Euclid, KHÔNG đụng heading */
.tnl-opt p,
.tnl-opt li,
.tnl-opt blockquote {
  font-weight: 500;
}

/* Line-height body thoáng (chuẩn 1.55-1.65). Sửa chỗ 1.25 quá chật.
   live dùng !leading-* (important) nên cần !important để thắng. */
.tnl-opt p,
.tnl-opt li {
  line-height: 1.6 !important;
}

/* Measure 60-72 ký tự: cap đoạn quá rộng (đo thực tế có chỗ 85-90ch).
   Dùng em (không dùng ch vì glyph '0' Euclid rộng ~0.625em -> ch sai số lớn).
   34em ≈ 680px ở 20px ≈ ~68 ký tự thật; scale theo cỡ chữ. Là TRẦN nên
   đoạn vốn hẹp không bị ảnh hưởng. */
.tnl-opt p {
  max-inline-size: 34em;
}
/* đoạn đang căn giữa thì giữ giữa sau khi cap */
.tnl-opt .text-center > p,
.tnl-opt p.text-center,
.tnl-opt [class*="items-center"] > p,
.tnl-opt [class*="text-center"] p {
  margin-inline: auto;
}

/* ===== §2 SPACING ===== */
/* khoảng thở giữa các đoạn liền nhau trong khối nội dung dài */
.tnl-opt p + p {
  margin-top: 0.85em;
}

/* ===== §3 TRANG SỰ KIỆN: chữ "nhẹ hơn" (feedback) =====
   Chữ đen/tối trên thẻ sự kiện -> #3A3A3A (vẫn đạt contrast WCAG AA).
   Chỉ áp vùng sự kiện (body.tnl-opt-events), không đụng chữ trắng trên nền tối. */
.tnl-opt-events p,
.tnl-opt-events .text-black,
.tnl-opt-events [class*="text-[#101"],
.tnl-opt-events [class*="text-[#000"],
.tnl-opt-events [class*="text-[#1D1D1D"] {
  color: #3A3A3A !important;
}

/* ===== §5 INTERACTION STATES ===== */
/* transition mượt cho link/nút (150-250ms) */
.tnl-opt a,
.tnl-opt button {
  transition: color .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* focus-visible rõ ràng cho bàn phím (accessibility) */
.tnl-opt a:focus-visible,
.tnl-opt button:focus-visible,
.tnl-opt input:focus-visible,
.tnl-opt textarea:focus-visible {
  outline: 2px solid #FF4B1F;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Newsletter (trang chủ) "mềm mại hơn" — bo mềm input + nút, giữ mũi tên sẵn có */
.tnl-opt input[type="email"],
.tnl-opt input[type="text"],
.tnl-opt textarea {
  border-radius: 12px;
}
.tnl-opt button[type="submit"] {
  border-radius: 9999px;
}
.tnl-opt button[type="submit"]:hover {
  transform: translateY(-1px);
}

/* 2026-06-13 — Mobile: ẩn section 1 (hero video VideoBanner) trên di động.
   Yêu cầu Hiếu: bản di động bỏ video hero. Desktop giữ nguyên. */
@media (max-width: 768px) {
  [data-sentry-component="VideoBanner"] { display: none !important; }
}

/* 2026-06-13 — TỐI ƯU GỌN GÀNG TRANG CHỦ (pass 1: vertical rhythm).
   Giữ nguyên nội dung/bố cục/màu; chỉ siết padding dọc section + gap cards,
   căn theo từng breakpoint. KHÔNG đụng cặp watermark -mt-[240px]/pt-[240px]. */
.tnl-opt.home [class*="xl:py-36"]{ padding-top:48px; padding-bottom:48px; }
.tnl-opt.home [class*="xl:py-64"]{ padding-top:56px; padding-bottom:56px; }
.tnl-opt.home [class*="gap-[240px]"]{ margin-top:56px; gap:28px; }
@media (min-width:768px){
  .tnl-opt.home [class*="xl:py-36"]{ padding-top:56px; padding-bottom:56px; }
  .tnl-opt.home [class*="xl:py-64"]{ padding-top:64px; padding-bottom:64px; }
  .tnl-opt.home [class*="gap-[240px]"]{ margin-top:72px; gap:40px; }
}
@media (min-width:1024px){
  .tnl-opt.home [class*="xl:py-36"]{ padding-top:64px; padding-bottom:64px; }
  .tnl-opt.home [class*="xl:py-64"]{ padding-top:88px; padding-bottom:88px; }
  .tnl-opt.home [class*="gap-[240px]"]{ margin-top:96px; gap:56px; }
}
@media (min-width:1280px){
  .tnl-opt.home [class*="xl:py-36"]{ padding-top:88px; padding-bottom:88px; }
  .tnl-opt.home [class*="xl:py-64"]{ padding-top:120px; padding-bottom:120px; }
  .tnl-opt.home [class*="gap-[240px]"]{ margin-top:120px; gap:64px; }
}

/* 2026-06-13 — Cards "cách tiếp cận": số outline 01-04 thu nhỏ + dời gọn về góc
   thẻ, KHÔNG cắt ngang chữ (feedback "nhìn hơi mệt"). Giữ ý đồ trang trí. */
.tnl-opt.home [class*="gap-[240px]"] [class*="-top-[180px]"]{
  top: -46px; bottom:auto; width: 78px; height:auto; opacity:.8;
}
.tnl-opt.home [class*="gap-[240px]"] [class*="-right-20"]{ right: 10px; left:auto; }
.tnl-opt.home [class*="gap-[240px]"] [class*="-left-4"]{ left: 10px; right:auto; }
@media (min-width:768px){
  .tnl-opt.home [class*="gap-[240px]"] [class*="-top-[180px]"]{ top:-60px; width:104px; }
  .tnl-opt.home [class*="gap-[240px]"] [class*="-right-20"]{ right: 20px; }
  .tnl-opt.home [class*="gap-[240px]"] [class*="-left-4"]{ left: 20px; }
}

/* ===== §6 FOOTER - khop live (2026-07-13) =====
   Tinh chinh body-text o §1/§2 (lh 1.6, weight 500, p+p margin) KHONG ap cho footer:
   footer gom nhan mau (Ket noi./Truyen cam hung./...) + thong tin lien he,
   live de hop mau sat nhau (gap-3), chu weight 400, leading-tight. */
.tnl-opt [class*="bg-[#101010]"] p {
  font-weight: 400;
  max-inline-size: none;
  line-height: 1.4 !important;   /* contact block: khop lh mac dinh cua live */
}
.tnl-opt [class*="bg-[#101010]"] p + p { margin-top: 0; }
.tnl-opt [class*="bg-[#101010]"] [class*="gap-3"] > p {
  line-height: 1.25 !important;  /* nhan mau: !leading-tight nhu live */
}