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

/* Đảm bảo thuộc tính `hidden` luôn thắng, kể cả trên phần tử có class đặt `display` riêng (VD .button) —
   nếu không, mọi nơi vừa gán class .button vừa bật/tắt bằng el.hidden sẽ không thực sự ẩn đi. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  line-height: 1.25;
  margin: 0 0 var(--space-3);
}

h1 {
  font-size: var(--font-size-2xl);
}

h2 {
  font-size: var(--font-size-xl);
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--color-primary);
}

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

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.page {
  flex: 1;
  /* body là flex column nên .page là flex item: mặc định không co nhỏ hơn nội dung bên trong (VD bảng rộng
     có overflow-x: auto) — thiếu dòng này thì cả trang bị đẩy rộng ra, trình duyệt điện thoại thu nhỏ cả
     trang để vừa màn hình thay vì chỉ cuộn ngang đúng bảng (lỗi GV báo trên điện thoại, bước D3). */
  min-width: 0;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

.lead-text {
  max-width: 70ch;
  color: var(--color-text-muted);
}

.muted {
  color: var(--color-text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hiệu ứng đảo nổi bồng bềnh (trang chủ, trang đảo). */
@keyframes island-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.site-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.error-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 560px;
  margin: var(--space-6) auto;
}