/* ============================================================
   BASE — Reset & kiểu chữ nền tảng (Module A)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: clamp(15px, 1vw + 0.6rem, 17px);
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;                 /* chặn tràn ngang trên điện thoại */
}

/* Lớp hạt nhiễu rất nhẹ phủ toàn trang (cố định, không bắt chuột) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--green-900);
  letter-spacing: -0.01em;
  text-wrap: balance;                 /* tránh 1 chữ rớt dòng cuối */
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -0.018em; }
h3 { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink); line-height: 1.3; letter-spacing: -0.005em; }

p { max-width: 64ch; text-wrap: pretty; }

ul, ol { list-style-position: inside; }

::selection { background: var(--gold-soft); color: var(--green-900); }

/* Viền focus rõ ràng cho người dùng bàn phím (a11y) */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Tôn trọng người dùng tắt chuyển động */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}