/* =============================================================
   THÉP TRỌNG PHÁT — base.css
   Design tokens · reset · typography · buttons · section scaffolding
   · reveal utilities · keyframes · accessibility.
   Thứ tự nạp: base.css → layout.css → sections.css
   ============================================================= */

/* ---------- Design tokens (đổi màu/spacing tại đây) ---------- */
:root {
  --navy: #12284c;
  --navy-900: #0d1f3d;
  --navy-700: #1c355f;
  --orange: #e8632a;
  --orange-600: #d0521c;
  --zalo: #0068ff;

  --ink: #17202f;
  --muted: #5c6577;
  --muted-light: #aeb8c8;
  --bg: #ffffff;
  --bg-alt: #f4f6f9;
  --line: #e7eaf0;
  --white: #ffffff;

  --radius: 14px;
  --radius-lg: 20px;
  --container: 1200px;
  --header-h: 84px;

  --shadow-sm: 0 4px 14px rgba(18, 40, 76, 0.08);
  --shadow-md: 0 14px 34px rgba(18, 40, 76, 0.14);
  --shadow-lg: 0 26px 60px rgba(18, 40, 76, 0.22);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 800; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    box-shadow 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 10px 24px rgba(232, 99, 42, 0.32); }
.btn-primary:hover { background: var(--orange-600); transform: translateY(-2px); box-shadow: 0 16px 30px rgba(232, 99, 42, 0.4); }
.btn-ghost { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.btn-zalo { background: var(--zalo); color: #fff; box-shadow: 0 10px 24px rgba(0, 104, 255, 0.32); }
.btn-zalo:hover { background: #0056d6; transform: translateY(-2px); }
/* Icon SVG trong nút — theo màu chữ của nút (currentColor) */
.btn-ic { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Section scaffolding (dùng chung mọi section) ---------- */
.section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 54px; }
.section-title { font-size: clamp(1.8rem, 4vw, 2.7rem); text-transform: uppercase; letter-spacing: 0.5px; color: var(--navy); }
.section-title.light { color: #fff; }
.section-title::after { content: ""; display: block; width: 64px; height: 4px; border-radius: 4px; background: var(--orange); margin: 18px auto 0; }
.section-sub { color: var(--muted); margin-top: 18px; font-size: 1.05rem; }
.section-sub.light { color: var(--muted-light); }
.eyebrow { text-transform: uppercase; letter-spacing: 2.5px; font-size: 13px; font-weight: 700; color: var(--orange); margin-bottom: 14px; }
.eyebrow-dark { color: var(--orange); }
.section-cta { text-align: center; margin-top: 48px; }

/* ---------- Reveal on scroll ---------- */
/* Chỉ ẩn khi JS đã bật (html.js). Không có JS -> nội dung vẫn hiện đầy đủ. */
.reveal { transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(28px); }
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 0.07s; }
.reveal:nth-child(3) { transition-delay: 0.14s; }
.reveal:nth-child(4) { transition-delay: 0.21s; }
.reveal:nth-child(5) { transition-delay: 0.28s; }
.reveal:nth-child(6) { transition-delay: 0.35s; }

/* ---------- Keyframes ---------- */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes scrolldot { 0% { opacity: 0; top: 8px; } 50% { opacity: 1; } 100% { opacity: 0; top: 22px; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.001); opacity: 0.7; } 70% { box-shadow: 0 0 0 16px rgba(0, 0, 0, 0); opacity: 0; } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity: 0; } }

/* ---------- Responsive (base) ---------- */
@media (max-width: 900px) {
  .section { padding: 72px 0; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section-head { margin-bottom: 40px; }
}

/* ---------- Giảm chuyển động (accessibility) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg img { animation: none; }
  .scroll-hint span, .fab::after { animation: none; }
  * { transition-duration: 0.01ms !important; }
}