/* ==========================================================================
   HoloLearn — base.css
   Token thiết kế, reset, typography và khung layout dùng chung.
   Mọi class của site có tiền tố `hl-` để không đụng CSS của theme/plugin
   khi chuyển sang WordPress.
   ========================================================================== */

:root {
  /* Màu thương hiệu */
  --hl-blue: #2596be;
  --hl-blue-deep: #1f7fa0;
  --hl-cyan: #18c8e8;
  --hl-yellow: #ffcf3a;
  --hl-yellow-deep: #ffc41a;
  --hl-purple: #5a2b92;
  --hl-purple-light: #6d38ad;
  --hl-coral: #ff5d6c;
  --hl-coral-deep: #ff4457;
  --hl-green: #57b947;
  --hl-green-deep: #3f9a2c;
  --hl-orange: #f28b3b;
  --hl-orange-deep: #d0731f;
  --hl-pink: #ff9ec7;

  /* Trung tính */
  --hl-ink: #241b3d;
  --hl-text: #5b5470;
  --hl-muted: #8b849c;
  --hl-cream: #fff7ea;
  --hl-white: #fff;
  --hl-line: #f1e7d6;
  --hl-field-border: #f0e2cc;
  --hl-footer-text: #c9c2df;
  --hl-danger: #c81f33;
  --hl-success: #2c8a1c;

  /* Nền nhạt theo nhóm thẻ */
  --hl-tint-blue: #e8f7fc;
  --hl-tint-orange: #fdefe2;
  --hl-tint-green: #eef8e7;
  --hl-tint-peach: #fff2e2;
  --hl-tint-sky: #f7fbfd;

  /* Chữ */
  --hl-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Bo góc */
  --hl-radius-sm: 14px;
  --hl-radius-md: 22px;
  --hl-radius-lg: 28px;
  --hl-radius-xl: 34px;
  --hl-radius-panel: 30px; /* khối lớn: bộ sưu tập, gallery, lợi ích */
  --hl-radius-pill: 999px;

  /* Đổ bóng */
  --hl-shadow-sm: 0 8px 18px rgba(36, 27, 61, .10);
  --hl-shadow-md: 0 16px 34px rgba(36, 27, 61, .08);
  --hl-shadow-lg: 0 26px 50px rgba(36, 27, 61, .18);

  /* Layout */
  --hl-wrap: 1180px;
  --hl-gutter: clamp(16px, 4vw, 48px);
  --hl-header-h: 80px;
  --hl-section-y: clamp(56px, 8vw, 104px);
  --hl-tap: 44px;
}

@media (max-width: 860px) {
  :root { --hl-header-h: 64px; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* neo #section không bị header sticky che mất tiêu đề */
  scroll-padding-top: calc(var(--hl-header-h) + 12px);
}

body {
  font-family: var(--hl-font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hl-ink);
  background: var(--hl-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; }
figure { margin: 0; }
address { font-style: normal; }

h1, h2, h3, h4 {
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.02em;
  overflow-wrap: break-word;
}
p, li, td, th, a { overflow-wrap: break-word; }

/* ---------- Khung layout ---------- */
.hl-wrap {
  width: 100%;
  max-width: var(--hl-wrap);
  margin-inline: auto;
  padding-inline: var(--hl-gutter);
}

.hl-section {
  position: relative;
  padding-block: var(--hl-section-y);
}

/* ---------- Tiện ích ---------- */
/* chứa các <symbol> SVG dùng lại bằng <use>; không dùng display:none để <use> vẫn vẽ được */
.hl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.hl-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;
}

.hl-skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--hl-radius-pill);
  background: var(--hl-ink);
  color: var(--hl-white);
  font-weight: 700;
}
.hl-skip-link:focus { top: 12px; }

:focus-visible {
  outline: 3px solid var(--hl-purple);
  outline-offset: 3px;
}

/* ---------- Hiện dần khi cuộn ----------
   Chỉ ẩn khi có class .hl-js trên <html>. Script trong <head> tự gỡ class này
   nếu main.js không chạy xong (lỗi tải, trình duyệt cũ) → nội dung luôn hiện.
   Dùng thuộc tính `translate` (không dùng `transform`) để không giẫm lên
   hiệu ứng hover của các thẻ. */
.hl-js .hl-reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .6s ease, translate .6s ease;
}
.hl-js .hl-reveal.is-visible {
  opacity: 1;
  translate: none;
}

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hl-js .hl-reveal { opacity: 1; translate: none; }
}

/* ---------- In / lưu PDF: hiện toàn bộ nội dung chưa cuộn tới ---------- */
@media print {
  .hl-js .hl-reveal { opacity: 1; translate: none; transition: none; }
  .hl-header { position: static; box-shadow: none; }
  .hl-nav-toggle, .hl-skip-link { display: none; }
}