/* ─── Font + biến màu cho Intro Overlay ─────────────────────────────────────────────────────
   Baloo 2 tự host, 3 subset lấy nguyên văn từ Google Fonts CSS2 API.
   Màu lấy đúng theo bảng màu thật của Bác sĩ Trọng (--bstr-v2-*, xem styles.1056fe91.css) thay
   vì bộ màu mặc định của gói intro gốc — bộ đó dùng xanh #2f6fed/#5697eb, lệch tông với xanh
   brand thật #1e96eb, đúng như đã chỉ ra. Nền/chữ cũng đổi theo light/dark thật của web (bg
   #fff/#141414, chữ #141414/#e6e6e6) thay vì trắng/đen chung chung của bản gốc. */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/Baloo2-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/Baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/Baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-baloo: 'Baloo 2', system-ui, sans-serif;
  --c-intro-bg: #ffffff;
  --c-intro-ink: #141414;
  --c-intro-blue: #1e96eb;
  /* App gốc dùng biến này để vá khung nhìn hụt của iOS Safari; trong1510 không có cơ chế
     tương ứng nên để 0 — overlay vẫn đúng, chỉ bỏ phần vá riêng cho iOS đó (xem README gói). */
  --tran-day: 0px;
}

:root[data-theme="dark"] {
  --c-intro-bg: #141414;
  --c-intro-ink: #e6e6e6;
  --c-intro-blue: #1e96eb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-intro-bg: #141414;
    --c-intro-ink: #e6e6e6;
    --c-intro-blue: #1e96eb;
  }
}

/* ─── Layout (thay cho class Tailwind của bản React gốc) ──────────────────────────────────── */
#bstrIntroOverlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(-1 * var(--tran-day));
  z-index: 999;
  pointer-events: auto;
  overflow: hidden;
}
#bstrIntroCover {
  position: absolute;
  inset: 0;
  background: var(--c-intro-bg, #ffffff);
  /* The hole-reveal phase (intro.js) rewrites clip-path every animation frame on this
     full-viewport element — one of the two measured jank sources (frame-timing capture showed
     dropped frames clustering exactly during this phase). contain:paint scopes the browser's
     paint invalidation to this element's own bounds instead of considering ancestors/siblings;
     will-change hints the compositor to keep it isolated. Doesn't eliminate the per-frame
     recalculation cost (clip-path polygon changes still need a main-thread repaint every tick —
     no way around that without abandoning clip-path entirely, which the original author already
     tried and rejected: an SVG <mask> alternative caused a worse iOS Safari freeze, see
     intro.js's own comments), but reduces what each repaint has to consider. */
  contain: paint;
  will-change: clip-path;
}
.bstr-intro-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--tran-day);
  display: flex;
  align-items: center;
  justify-content: center;
}
#introLogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 800;
}
.bstr-intro-inline {
  display: inline-block;
}
.bstr-intro-tgroup {
  display: flex;
  align-items: baseline;
}