/* landing.css — vỏ SEO /nuoc/<slug> + /mat-hang/<slug>
   (web_export_tiers_landing.py, round-3 2026-09-04). Nạp SAU style.css +
   ma.css (dùng chung token màu :root + .wrap/.stat-cards/.stat-card/
   .btn/.btn-back đã định nghĩa ở đó — KHÔNG lặp lại, chỉ override phần
   riêng của landing: cỡ số to hơn, màu YoY theo dấu, top-10/FAQ/explain
   chưa có class ở đâu khác). */

/* Khối 4: số liệu to hơn .stat-value mặc định (24px) một chút cho landing
   — "~1.6rem" theo spec, chỉ scope trong .landing-headline để không đụng
   trang khác dùng chung .stat-card (home, thi-truong). */
.landing-headline .stat-value { font-size: 1.6rem; }
.landing-kicker { color: var(--text-3); font-size: 12.5px; margin-bottom: 10px; }

.landing-yoy { margin-top: 6px; font-size: 12.5px; font-weight: 600; }
.landing-yoy.up { color: var(--up); }
.landing-yoy.down { color: var(--down); }

.landing-rank { margin-top: 12px; color: var(--text-2); font-size: 13px; }

.landing-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.landing-cta-row .btn.gold { text-decoration: none; }

/* ===== Khối 1: top-10 tên (nuoc<->mat-hang pivot) ===== */
.landing-top10 { padding: 26px 0; border-top: 1px solid var(--border-soft); }
.landing-top10 h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; margin: 18px 0 10px; }
.landing-top10 h2:first-of-type { margin-top: 0; }
.landing-name-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.landing-name-list li {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-2);
}
.landing-name-list a { color: var(--accent); text-decoration: none; }
.landing-name-list a:hover { text-decoration: underline; }

/* ===== Khối 3: giải thích + FAQ (không số tiền) ===== */
.landing-explain { padding: 20px 0; border-top: 1px solid var(--border-soft); }
.landing-explain h2 { font-size: 15px; font-weight: 700; margin: 14px 0 4px; color: var(--text-2); }
.landing-explain h2:first-of-type { margin-top: 0; }
.landing-explain p { color: var(--text-2); line-height: 1.6; font-size: 13.5px; }

.landing-faq { padding: 26px 0 40px; border-top: 1px solid var(--border-soft); }
.landing-faq h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 12px; }
.landing-faq details {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.landing-faq summary { cursor: pointer; font-weight: 600; }
.landing-faq p { margin: 10px 0 0; color: var(--text-2); line-height: 1.6; font-size: 13.5px; }

@media (max-width: 640px) {
  .landing-headline .stat-value { font-size: 1.35rem; }
  .landing-cta-row { flex-direction: column; align-items: stretch; }
}

/* Khối phễu 2 (sau top-10): quyền lợi trả phí + CTA */
.landing-paid { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--accent-2); border-radius: 14px; background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.landing-paid h2 { font-size: 18px; margin: 0 0 8px; }
.landing-paid p { color: var(--text-2); line-height: 1.6; margin: 0; }