/* VIAI landing — design tokens (bản gốc từ Handoff + token bổ sung ở cuối :root) */
:root {
  --viai-blue: #0935A0;       /* lấy mẫu từ logo gốc */
  --viai-orange: #F36B26;     /* màu nhấn gần với mockup */
  --viai-navy: #0B1D47;
  --viai-blue-deep: #082B78;

  --viai-text: #182B53;
  --viai-muted: #71809B;
  --viai-surface: #FFFFFF;
  --viai-surface-ice: #F3F7FF;
  --viai-surface-warm: #FCFAF6;
  --viai-border: #E2E9F4;
  --viai-success: #17B98A;

  --font-sans: "Be Vietnam Pro", "Be Vietnam Pro Fallback", "Inter", Arial, sans-serif;  /* + font dự phòng chống layout shift, xem typography.css */
  --container-max: 1200px;
  --container-gutter: clamp(20px, 5vw, 72px);
  --section-space-desktop: clamp(44px, 3.8vw, 56px);
  --section-space-tablet: 44px;
  --section-space-mobile: 36px;
  --header-height: 72px;

  --radius-sm: 10px;
  --radius-card: 18px;
  --radius-large: 26px;
  --radius-pill: 999px;

  --shadow-card: 0 14px 44px rgba(11, 29, 71, 0.08);
  --shadow-float: 0 24px 64px rgba(9, 53, 160, 0.14);
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 180ms;
  --duration-normal: 280ms;

  /* ---- Chuyển động khi cuộn (css/motion.css, js/motion.js). Muốn nhẹ/mạnh hơn: chỉnh 3 biến đầu ---- */
  --reveal-dist: 28px;                          /* quãng trượt vào */
  --dur-reveal: 700ms;                          /* thời lượng xuất hiện */
  --stagger: 70ms;                              /* độ trễ giữa các phần tử cùng nhóm (JS đọc biến này) */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Token bổ sung (không có trong Handoff; lấy mẫu từ ảnh mẫu) ---- */
  --viai-blue-bright: #1553E0;              /* nút xanh, tab active, vòng tròn số */
  --viai-blue-band: linear-gradient(100deg, #0A38B4 0%, #0E4CDC 52%, #0A34A6 100%);   /* dải số */
  --viai-blue-footer: linear-gradient(160deg, #0B4FE0 0%, #0A3CB8 45%, #082B78 100%); /* form + footer */
  --viai-orange-soft: #FEEFE6;              /* nền chip / ô icon cam */
  --viai-orange-strong: #BF430B;            /* chữ cam cỡ nhỏ trên nền sáng (≥4.5:1, kể cả trên nền cam nhạt) */
  --viai-orange-heading: #E9611D;           /* cam cho heading lớn (≥3:1 trên trắng và trên nền ice) — gần như trùng cam thương hiệu */
  --viai-orange-on-blue: #FF965A;           /* số cam lớn trên dải xanh (≥3:1) */
  /* Gradient chữ nhấn trong title (h1/h2 .accent). Đo từ ảnh mẫu là #F68E18 → #FA692C nhưng đầu vàng chỉ ≈2.4:1 trên trắng;
     bản dưới đậm nhẹ để ≥3:1 trên cả nền trắng (3.27) lẫn nền ice (3.05). Muốn rực hơn: đổi đầu gradient (tốn tương phản). */
  --viai-grad-orange: linear-gradient(90deg, #E8680F 0%, #E5501C 100%);
  --viai-grad-orange-on-blue: linear-gradient(90deg, #FFC29B 0%, #FF965A 100%);   /* nhấn cam trên nền xanh đậm (CTA) */
  --viai-eyebrow-on-blue: #FFC9A8;          /* chữ eyebrow nhỏ trên nền xanh (≥4.5:1) */
  --viai-success-strong: #0E9F76;           /* dấu check trên nền trắng (≥3:1) */

  /* Nền các nút/nhãn cam có CHỮ TRẮNG. Hiện dùng cam thương hiệu theo ảnh mẫu (chữ trắng ≈3.0:1, chưa đạt AA cho chữ nhỏ).
     Muốn đạt AA (≈5:1): đổi thành var(--viai-orange-strong). Xem docs/orange-contrast-options.png. */
  --viai-cta-bg: var(--viai-orange);
  --viai-muted-strong: #5F6F8C;             /* chữ xám phụ cỡ nhỏ (≈5:1) */
  --viai-blue-soft: #EAF1FF;                /* nền chip xanh / ô icon xanh */
  --viai-success-soft: #E4F7F0;

  /* ---- Cảnh báo (mục Nỗi đau): đỏ thay cho cam để nhấn mạnh mức nghiêm trọng ---- */
  --viai-alert: #D92D20;                    /* huy hiệu "!" (trắng trên nền này ≈4.8:1) */
  --viai-alert-deep: #B42318;               /* chữ đỏ cỡ nhỏ trên nền trắng (≥6:1) */
  --viai-alert-soft: #FEF3F2;
  --viai-alert-border: #FECDCA;
  --viai-grad-alert: linear-gradient(90deg, #E5392C 0%, #C0271B 100%);   /* chữ nhấn h2 ở mục Nỗi đau (≥3.9:1 trên nền hồng nhạt) */

}

.container {
  width: min(calc(100% - 2 * var(--container-gutter)), var(--container-max));
  margin-inline: auto;
}
.section { padding-block: var(--section-space-desktop); }
@media (max-width: 900px) { .section { padding-block: var(--section-space-tablet); } }
@media (max-width: 600px) { .section { padding-block: var(--section-space-mobile); } }