/* Giao diện funnel LaunchMate. Màu, phông, cỡ chữ lấy từ brand.css (bộ nhận diện). */
html { scroll-behavior: smooth; }
html[lang="en"] .ja { display: none !important; }
html[lang="ja"] .en { display: none !important; }
body { font-family: var(--phong-than), 'Noto Sans JP', sans-serif; line-height: 1.75; }
h1, h2, h3 { font-family: 'Space Grotesk', 'Noto Sans JP', system-ui, sans-serif; font-weight: 700; color: var(--mau-chu); letter-spacing: 0; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3 { line-height: 1.35; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.wrap-nho { width: min(640px, 100% - 32px); margin-inline: auto; }
a.nut { text-decoration: none; }

/* Đầu trang */
.dau { background: #fff; border-bottom: 1px solid var(--chinh-100); }
.dau .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }
.dau img { height: 30px; width: auto; display: block; }
.ngon-ngu { display: flex; gap: 4px; font: 700 14px var(--phong-nhan); }
.ngon-ngu button { min-height: 44px; min-width: 44px; padding: 0 10px; background: transparent; border: 0; color: var(--chu-chinh-tren-nen); cursor: pointer; border-radius: 8px; font: inherit; }
.ngon-ngu button[aria-pressed="true"] { background: var(--chinh-100); color: var(--mau-chu); }

/* Khối trang */
.khoi { padding: var(--khoang-9) 0; }
.khoi-nen { background: #fff; }
.nhan { display: inline-block; font: 700 13px var(--phong-nhan); letter-spacing: .08em; color: var(--chu-nhan-tren-nen); text-transform: uppercase; margin-bottom: var(--khoang-3); }
h2 { font-size: var(--co-chu-2); margin: 0 0 var(--khoang-5); }

/* Thu hút */
.anh-hero { background: linear-gradient(180deg, #fff 0%, var(--mau-nen) 100%); padding: var(--khoang-9) 0 var(--khoang-8); text-align: center; }
.anh-hero h1 { font-size: var(--co-chu-1); margin: 0 auto var(--khoang-5); max-width: 18em; }
.anh-hero h1 em { font-style: normal; color: var(--chu-chinh-tren-nen); }
.phu { font-size: var(--co-chu-4); max-width: 34em; margin: 0 auto var(--khoang-6); }
.nho { font-size: 14px; color: #3C4268; margin-top: var(--khoang-4); }
.so-lieu { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--khoang-4); margin-top: var(--khoang-7); }
.so-lieu div { background: #fff; border-radius: var(--bo-the); box-shadow: var(--bong-nho); padding: 14px 24px; min-width: 140px; }
.so-lieu b { display: block; font: 700 28px var(--phong-tieu-de); color: var(--chu-chinh-tren-nen); line-height: 1.2; }
.so-lieu span { font-size: 14px; }

/* Thích thú */
.luoi-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--khoang-5); }
.the p { margin: 0; }
.dau-hieu { border-top: 4px solid var(--mau-chinh); }
.dan-dat { margin-top: var(--khoang-6); font-size: var(--co-chu-5); max-width: 40em; }
.buoc .so { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: var(--mau-chinh); color: var(--mau-chu-nhat); font: 700 18px var(--phong-tieu-de); margin-bottom: var(--khoang-3); }
.buoc h3 { font-size: var(--co-chu-4); margin: 0 0 var(--khoang-2); }
.buoc .gia { display: inline-block; margin-top: var(--khoang-3); font: 700 13px var(--phong-nhan); color: var(--chu-nhan-tren-nen); background: var(--nhan-100); padding: 4px 12px; border-radius: 999px; }
.tu-dung { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--khoang-7); align-items: center; }
.tu-dung img { width: 100%; height: auto; border-radius: var(--bo-anh); box-shadow: var(--bong-vua); display: block; }
.tu-dung figcaption { font-size: 13px; margin-top: var(--khoang-2); color: #3C4268; }

/* Khao khát */
.bang { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--bo-the); overflow: hidden; box-shadow: var(--bong-vua); }
.bang th, .bang td { text-align: left; padding: 18px 24px; vertical-align: top; }
.bang th { width: 32%; background: var(--chinh-100); font: 700 16px var(--phong-nhan); }
.bang tr + tr th, .bang tr + tr td { border-top: 1px solid var(--chinh-100); }
.lam-ho { background: var(--mau-nen-toi); color: var(--mau-chu-nhat); }
.lam-ho h2 { color: var(--mau-chu-nhat); }
.lam-ho p { font-size: var(--co-chu-5); max-width: 40em; margin: 0; }
.lo-lang { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--khoang-4); }
.lo-lang li { background: #fff; border-radius: var(--bo-the); padding: 16px 20px 16px 56px; position: relative; box-shadow: var(--bong-nho); }
.lo-lang li::before { content: ''; position: absolute; left: 20px; top: 20px; width: 18px; height: 10px; border-left: 3px solid var(--mau-chinh); border-bottom: 3px solid var(--mau-chinh); transform: rotate(-45deg); }

/* Hành động */
.keu-goi { background: var(--mau-nen-toi); color: var(--mau-chu-nhat); text-align: center; }
.keu-goi h2 { color: var(--mau-chu-nhat); }
.keu-goi p { font-size: var(--co-chu-5); margin: 0 auto var(--khoang-6); max-width: 32em; }
.chan { padding: var(--khoang-6) 0; font-size: 13px; color: #3C4268; background: #fff; }
.chan .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--khoang-3); }

/* Trang biểu mẫu và cảm ơn */
.trang-con { padding: var(--khoang-8) 0 var(--khoang-9); }
.trang-con h1 { font-size: var(--co-chu-2); margin: 0 0 var(--khoang-3); }
.tien-do { font: 700 13px var(--phong-nhan); color: var(--chu-nhan-tren-nen); letter-spacing: .08em; margin-bottom: var(--khoang-3); }
.the-form { margin-top: var(--khoang-6); }
.truong { margin-bottom: var(--khoang-5); }
.truong label { display: block; font: 700 14px var(--phong-nhan); margin-bottom: 6px; }
.truong input, .truong select, .truong textarea { width: 100%; box-sizing: border-box; background: #fff; }
.truong textarea { min-height: 120px; resize: vertical; }
.tuy-chon { font-weight: 400; color: #3C4268; margin-left: 6px; }
.dong-y { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; margin-bottom: var(--khoang-5); }
.dong-y input { width: 22px; min-height: 22px; margin-top: 4px; flex: none; }
.hang-nut { display: flex; gap: var(--khoang-3); flex-wrap: wrap; align-items: center; }
.loi { color: #B42318; font-size: 14px; margin: 0 0 var(--khoang-3); min-height: 0; }
.bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cac-buoc { list-style: none; padding: 0; margin: var(--khoang-6) 0; counter-reset: b; }
.cac-buoc li { counter-increment: b; display: flex; gap: 16px; background: #fff; border-radius: var(--bo-the); box-shadow: var(--bong-nho); padding: 18px 22px; margin-bottom: var(--khoang-3); }
.cac-buoc li::before { content: counter(b); flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--mau-chinh); color: var(--mau-chu-nhat); display: flex; align-items: center; justify-content: center; font: 700 16px var(--phong-tieu-de); }

@media (max-width: 800px) {
  .khoi { padding: var(--khoang-8) 0; }
  .luoi-3, .tu-dung, .lo-lang { grid-template-columns: 1fr; }
  .bang th, .bang td { display: block; width: auto; }
  .bang tr + tr th { border-top: 1px solid var(--chinh-100); }
  .bang td { padding-top: 0; }
  .anh-hero { padding: var(--khoang-8) 0 var(--khoang-7); }
}