/* Tokens — tên theo variable Figma (file dvwUaJlQFpxhvsiF4SNLgw). SP < 1200 ≤ PC */
:root {
  --color-white: #fff;
  --color-ink: #000;
  --color-body: #808080;
  --color-navy: #0d2240;
  --color-cyan: #5bb8d4;
  --color-cream: #fcfaed;
  --color-vision: #e9f3fa;
  --color-surface-5: #d8eef9;
  --color-arrow: #7bb6e3;
  --color-value-heading: #4c4948;
  --color-category-highlight: #ede492;
  --color-chart-blue: #0081cc;
  --color-chart-text: #231815;
  --color-text-2: #374c58;
  --color-text-4: #637983;
  --color-border-6: #7db9de;
  --color-green: #6dc19b;
  --color-orange: #f4a755;
  --color-pink: #ea7ca1;
  --color-purple: #b593c3;

  /* Màu nhấn trong tiêu đề: SP dùng màu variable, PC dùng màu gốc PDF (ghi đè bên dưới) */
  --color-em-green: var(--color-green);
  --color-em-orange: var(--color-orange);
  --color-em-pink: var(--color-pink);
  --color-em-blue: var(--color-cyan);
  --color-em-orange-2: var(--color-orange);

  --font-sans: 'Noto Sans JP', sans-serif;
  --font-latin: 'Inter', sans-serif;

  --radius-25: 25px;
  --radius-30: 30px;

  --container: 1200px;
  --gutter: 24px;
}

@media (min-width: 1200px) {
  :root {
    --color-em-green: #58c291;
    --color-em-orange: #fd9b45;
    --color-em-pink: #f86d97;
    --color-em-blue: #47b0ff;
    --color-em-orange-2: #ffa143;
  }
}

/* Chừa chỗ cho header sticky khi nhảy tới anchor (#vision…) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 66px;
}

@media (min-width: 1200px) {
  html {
    scroll-padding-top: 82px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.5;
}

/* Ẩn/hiện theo breakpoint */
@media (max-width: 1199.98px) {
  .u-pc {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .u-sp {
    display: none !important;
  }
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
