/*
 * Trang chủ (/) — CSS riêng cho các khối chỉ Home dùng: hero 2 cột, mô phỏng app (thuần trang
 * trí, không gắn số liệu), 3 bước bắt đầu, bảng giá rút gọn, banner CTA.
 *
 * Nạp qua $extraCss trong layouts/main.php — không ảnh hưởng trang khác. Chỉ dùng var(--...)
 * từ design-tokens.css, không viết cứng hex/px mới.
 */

.hero-rich {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-12);
    align-items: center; padding: var(--sp-16) 0 var(--sp-10);
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px; background: var(--tint);
    color: var(--brand-link); font-weight: 600; font-size: var(--fs-sm);
    padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: var(--sp-6);
}
.hero-rich h1 { font-size: var(--fs-hero); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--sp-6); }
.hero-rich h1 .accent { color: var(--brand); }
.hero-rich .lead { max-width: 520px; margin: 0 0 var(--sp-8); }
.hero-cta-row { display: flex; gap: 14px; margin-bottom: var(--sp-7); flex-wrap: wrap; }
.hero-note { font-size: var(--fs-xs); color: var(--muted-2); margin: 0; }

/* App mockup minh hoạ — thuần trang trí (khối/màu/chip tên tính năng), KHÔNG gắn số liệu
   thật hay giả nào, tránh hiểu nhầm là thống kê thật của hệ thống. */
.app-mockup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-card); overflow: hidden; }
.app-mockup-topbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.app-mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
.app-mockup-dot.a { background: var(--warn-fg); }
.app-mockup-dot.b { background: var(--brand); }
.app-mockup-dot.c { background: var(--danger-fg); }
.app-mockup-body { display: flex; height: 300px; }
.app-mockup-sidebar { width: 68px; background: var(--canvas); border-right: 1px solid var(--line); padding: var(--sp-4) var(--sp-2); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.app-mockup-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); }
.app-mockup-icon.is-active { background: var(--brand); border-color: var(--brand); }
.app-mockup-main { flex: 1; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.app-mockup-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.app-mockup-chip { font-size: var(--fs-xs); font-weight: 600; padding: 6px 10px; border-radius: var(--r-pill); background: var(--tint); color: var(--brand-link); }
.app-mockup-chart { flex: 1; background: var(--canvas); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: var(--sp-4); display: flex; align-items: flex-end; gap: 6px; }
.app-mockup-chart span { flex: 1; background: var(--line-tint); border-radius: 4px; }
.app-mockup-chart span:nth-child(3n) { background: var(--brand); }

.section-head-center { text-align: center; max-width: 620px; margin: 0 auto var(--sp-12); }
.section-head-center h2 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 14px; }
.section-head-center p { font-size: var(--fs-lg); color: var(--ink-4); margin: 0; }

.feature-icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-5); padding-bottom: var(--sp-16); }
.feature-icon-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px; }
.feature-icon-badge { width: 42px; height: 42px; border-radius: 11px; background: var(--tint); color: var(--brand-link); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); }
.feature-icon-card h3 { font-size: var(--fs-md); font-weight: 700; margin: 0 0 8px; }
.feature-icon-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; margin: 0; }

.steps-section { background: var(--surface-alt); padding: var(--sp-16) 0; margin: 0 0 var(--sp-16); border-radius: var(--r-lg); }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-7); padding: 0 var(--sp-8); }
.step-num { font-size: var(--fs-xs); font-weight: 800; color: var(--brand); margin-bottom: 10px; letter-spacing: 0.03em; }
.step-card h3 { font-size: var(--fs-lg); font-weight: 700; margin: 0 0 8px; }
.step-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin: 0; }

.pricing-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; padding: var(--sp-16) 0; }
.pricing-teaser h2 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 16px; }
.pricing-teaser p { font-size: var(--fs-lg); color: var(--ink-4); line-height: 1.6; margin: 0 0 var(--sp-6); }
.pricing-teaser-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-7); }
.pricing-teaser-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-5); }
.pricing-teaser-head .unit { font-size: var(--fs-sm); color: var(--muted); }
.pricing-teaser-head .amount { font-size: var(--fs-h2); font-weight: 800; }
.pricing-teaser-row { display: flex; justify-content: space-between; padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line-tint); font-size: var(--fs-md); }
.pricing-teaser-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.pricing-teaser-row .credits { font-weight: 700; color: var(--brand-link); }

.cta-banner { background: var(--brand-grad); border-radius: var(--r-xl); padding: var(--sp-12); text-align: center; color: var(--surface); margin-bottom: var(--sp-16); }
.cta-banner h2 { font-size: var(--fs-h2); font-weight: 800; margin: 0 0 12px; }
.cta-banner p { font-size: var(--fs-md); color: var(--on-dark); margin: 0 0 var(--sp-6); }
.cta-banner .btn-primary { background: var(--surface); color: var(--brand-darker); }

@media (max-width: 860px) {
    .hero-rich, .pricing-teaser { grid-template-columns: 1fr; }
    .app-mockup { order: -1; }
    .steps-grid { padding: 0 var(--sp-4); }
}