/* ==========================================================================
   base.css — reset, typography, layout nền
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px); /* chừa chỗ cho header dính khi cuộn tới anchor */
}
/* Cuộn mượt luôn bật — trang chủ ý bỏ qua cài đặt "giảm chuyển động" của hệ điều hành */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--color-brand-blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  padding: 10px 16px; border-radius: 8px; background: var(--color-brand-navy); color: #fff; font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: calc(var(--content-max-width) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-space); }
.section--soft { background: var(--color-surface-soft); }

/* ---- Tiêu đề section: navy + cụm nhấn cam, in hoa như mockup ---- */
.section-head { max-width: 1140px; margin: 0 auto 40px; text-align: center; }
.h-caps {
  font-size: clamp(22px, 1.05rem + .9vw, 28px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--color-brand-navy);
  text-wrap: balance;
}
/* Cụm nhấn trong tiêu đề: cam gradient ngang (hai điểm dừng đủ đậm để chữ lớn đạt ~3:1 trên nền sáng) */
.accent {
  color: var(--color-brand-orange-text); /* dự phòng nếu trình duyệt không hỗ trợ background-clip:text */
  background: linear-gradient(90deg, var(--color-accent-from), var(--color-accent-to));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-sub {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-muted);
  text-wrap: balance;
}

/* ---- Icon (sprite inline, đổi màu bằng currentColor) ---- */
.icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }