/* ==========================================================================
   BASE — design tokens, reset, typography, buttons, utilities
   Bảng màu theo Brand Guideline German Link: đỏ #BE1E2D, vàng #FFDA00, đen #231F20
   ========================================================================== */

:root {
  /* ---- Màu thương hiệu, lấy từ Brand Guideline German Link (trang 23-24) ----
     Đỏ    #BE1E2D  C15 M100 Y95 K15
     Vàng  #FFDA00  C0  M12  Y100 K0
     Đen   #231F20  K100
     Ba màu thứ cấp dùng kèm: #660C11 (đỏ đậm), #58595B và #808285 (xám).
     Các giá trị còn lại là sắc độ pha ra từ bộ màu trên, không phải màu mới. */
  --red: #be1e2d;        /* màu chính */
  --red-dark: #660c11;   /* thứ cấp — dùng cho gradient và trạng thái hover */
  --red-soft: #fbeaec;   /* sắc độ nhạt của đỏ chính, dùng làm nền */
  --gold: #ffda00;       /* màu chính */
  --gold-dark: #e0bc00;  /* sắc độ đậm của vàng chính */
  --ink: #231f20;        /* màu chính */
  --ink-2: #58595b;      /* thứ cấp */
  --muted: #808285;      /* thứ cấp */
  --line: #e5e3e4;       /* sắc độ nhạt của xám thứ cấp */
  --bg: #ffffff;
  --bg-soft: #f8f6f6;    /* sắc độ rất nhạt của đen chính */

  /* Spacing + shape */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 6px 24px rgba(35, 31, 32, 0.08);
  --shadow-lg: 0 18px 50px rgba(35, 31, 32, 0.16);
  --section-y: 72px;
  --container: 1160px;

  /* Chiều cao 2 thanh cố định — dùng để chừa chỗ cho nội dung */
  --header-h: 68px;
  --stickybar-h: 76px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  /* Chặn iOS/Android tự phóng to chữ khi xoay ngang máy */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* Chặn mọi trường hợp tràn ngang trên mobile */
  overflow-x: hidden;
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Chừa chỗ cho thanh CTA dưới cùng + vùng home indicator của iPhone */
  padding-bottom: calc(var(--stickybar-h) + env(safe-area-inset-bottom, 0px));
}

/* Khối chỉ bật khi campaign-config.js đã có số liệu — thắng mọi display khác */
[hidden] { display: none !important; }

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(28px, 4.4vw, 50px); }
h2 { font-size: clamp(24px, 3.2vw, 38px); }
h3 { font-size: clamp(18px, 2vw, 22px); }
p  { margin: 0 0 1em; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--red { background: var(--red); color: #fff; }
.section--dark { background: var(--ink); color: #fff; }
.text-center { text-align: center; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Section heading ---------- */
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--red-soft);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.section--red .eyebrow,
.section--dark .eyebrow { color: var(--gold); background: rgba(255, 255, 255, .12); }

.section-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.section-head p { color: var(--muted); font-size: 17px; margin-bottom: 0; }
.section--red .section-head p,
.section--dark .section-head p { color: rgba(255, 255, 255, .82); }

/* Gạch chân vàng dưới tiêu đề */
.underline-gold { position: relative; display: inline-block; }
.underline-gold::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 6px;
  background: var(--gold);
  border-radius: 4px;
  opacity: .9;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
/* Nút dùng MÀU PHẲNG đúng mã thương hiệu.
   Trước đây dùng gradient đỏ→đỏ đậm khiến mắt đọc ra một màu trung gian,
   không còn là #BE1E2D. Hover làm tối nhẹ bằng filter để giữ nguyên sắc đỏ. */
.btn--primary {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 22px rgba(190, 30, 45, .36);
}
.btn--primary:hover { filter: brightness(.9); box-shadow: 0 12px 30px rgba(190, 30, 45, .46); }
.btn--gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(255, 218, 0, .4);
}
.btn--gold:hover { filter: brightness(.94); }
.btn--ghost { border: 2px solid currentColor; color: inherit; }
.btn--lg { padding: 18px 44px; font-size: 18px; }
.btn--block { width: 100%; }

/* Nhịp đập nhẹ cho CTA chính, dừng khi user tắt animation */
@keyframes pulse-cta {
  0%, 100% { box-shadow: 0 8px 22px rgba(190, 30, 45, .36); }
  50%      { box-shadow: 0 8px 34px rgba(190, 30, 45, .62); }
}
.btn--pulse { animation: pulse-cta 2s ease-in-out infinite; }

/* Người dùng bật "Giảm chuyển động" trong cài đặt máy.
   Tắt hiệu ứng LẶP và chuyển động vị trí (thứ gây khó chịu, chóng mặt),
   nhưng GIỮ hiệu ứng mờ dần — nó không di chuyển nên vô hại, mà vẫn
   giữ được cảm giác trang mượt mà. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .25s !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}

/* ---------- Responsive breakpoints ---------- */
@media (max-width: 980px) {
  :root { --section-y: 54px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 30px; }
  /* Nút dài phải xuống dòng được, nếu không sẽ đẩy trang tràn ngang */
  .btn {
    width: 100%;
    white-space: normal;
    padding-inline: 20px;
    font-size: 15.5px;
  }
  .btn--lg { padding: 16px 20px; font-size: 16.5px; }
}