/* Base typography & tiện ích chung */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--paper-grain), var(--color-background);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: 1.25;
  font-weight: 700;
}

p + p { margin-top: 0.9em; }

a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

::selection { background: var(--color-primary); color: var(--color-dark); }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--color-primary); color: var(--color-dark); font-weight: 700;
  transform: translateY(-150%); transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }

.script { font-family: var(--font-script); font-weight: 700; }