/* ─── 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): xanh
   brand #1e96eb; nền/chữ theo light/dark của web (bg #fff/#141414, chữ #141414/#e6e6e6). */
@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;
  /* Biến bù khung nhìn hụt của iOS Safari; web không cần nên để 0 — overlay vẫn đúng. */
  --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;
  }
}

/* ─── Intro "Một vật thể, ba trạng thái": công cụ, bàn làm việc, thẻ ghi nhớ. Một khung biến hình liền mạch, tên gọi khổng lồ mờ phía sau, màn kéo lên cong mép khi vào app ─── */
:root { --bi-pop: 0 8px 24px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.12); --bi-sec: #f4f4f5; --bi-line: #e3e2e4; --bi-mute: #5f5e63; --bi-mk: rgba(30,150,235,.22); --bi-bad-bg: #fdeceb; --bi-bad: #bc362a; --bi-dot: #cfd0d6; --bi-paper: #fff; --bi-ghost: #f2f3f5; --bi-edge: #8e8d91; --bi-hl: #fedfbb; --bi-hlt: #d34f0b; --bi-nsh: 0 0 4px rgba(0,0,0,.14), 0 2px 12px rgba(0,0,0,.14); }
:root[data-theme="dark"] { --bi-pop: 0 8px 28px rgba(0,0,0,.55), 0 0 1px rgba(255,255,255,.12); --bi-sec: #252525; --bi-line: #2e2e2e; --bi-mute: #9c9ca0; --bi-mk: rgba(30,150,235,.36); --bi-bad-bg: #2e1a18; --bi-bad: #f06a5f; --bi-dot: #3a3a3c; --bi-paper: #252525; --bi-ghost: #1c1c1c; --bi-edge: #9c9ca0; --bi-hl: rgba(211,79,11,.34); --bi-hlt: #ff9a63; --bi-nsh: 0 0 4px rgba(0,0,0,.5), 0 2px 12px rgba(0,0,0,.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bi-pop: 0 8px 28px rgba(0,0,0,.55), 0 0 1px rgba(255,255,255,.12); --bi-sec: #252525; --bi-line: #2e2e2e; --bi-mute: #9c9ca0; --bi-mk: rgba(30,150,235,.36); --bi-bad-bg: #2e1a18; --bi-bad: #f06a5f; --bi-dot: #3a3a3c; --bi-paper: #252525; --bi-ghost: #1c1c1c; --bi-edge: #9c9ca0; --bi-hl: rgba(211,79,11,.34); --bi-hlt: #ff9a63; --bi-nsh: 0 0 4px rgba(0,0,0,.5), 0 2px 12px rgba(0,0,0,.5); } }
#bstrIntroOverlay { position: fixed; left: 0; right: 0; top: 0; bottom: calc(-1 * var(--tran-day)); z-index: 999; pointer-events: auto; background: var(--c-intro-bg); font-family: Inter, "Source Sans 3", system-ui, sans-serif; color: var(--c-intro-ink); will-change: transform; }
.bi-bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--bi-line); visibility: hidden; } /* intro.js bật ở lần đầu (có câu chuyện) */
.bi-bar i { display: block; height: 100%; background: var(--c-intro-blue); transform-origin: left center; transform: scaleX(0); }
.bi-ghosts { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.bi-gw { grid-area: 1 / 1; margin: 0; overflow: hidden; padding: .22em .04em .16em; font: 800 min(calc(92vw / (var(--n) * .56)), 16rem)/1.02 var(--font-baloo); letter-spacing: -.02em; color: var(--bi-ghost); white-space: pre; visibility: hidden; }
.bi-gw span { display: inline-block; }
.bi-stage { position: absolute; left: 0; right: 0; top: 0; bottom: var(--tran-day); display: grid; grid-template: 100% / 100%; place-items: center; }
.bi-stage > *, .bi-fit > * { grid-area: 1 / 1; }
/* Khung co theo chiều cao màn hình: intro.js đặt --bi-s. */
.bi-fit { display: grid; place-items: center; transform: scale(var(--bi-s, 1)); }
.bi-ob { position: relative; overflow: hidden; border: 1px solid var(--bi-line); border-radius: 12px; background: var(--c-intro-bg); box-shadow: var(--bi-pop); visibility: hidden; }
.bi-la, .bi-lb { position: absolute; left: 50%; top: 50%; visibility: hidden; }
.bi-hd { padding: 16px 20px 12px; display: grid; gap: 2px; border-bottom: 1px solid var(--bi-line); }
.bi-hd b { font-size: 20px; font-weight: 600; line-height: 28px; }
.bi-hd span { font-size: 12px; font-weight: 500; line-height: 20px; color: var(--bi-mute); text-wrap: balance; }
.bi-q { margin: 0; padding: 0; list-style: none; }
.bi-q li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; padding: 10px 20px; border-bottom: 1px solid var(--bi-line); }
.bi-ql { display: grid; gap: 1px; min-width: 0; }
.bi-ql b { font-size: 14px; font-weight: 600; line-height: 20px; }
.bi-ql span { font-size: 12px; line-height: 16px; color: var(--bi-mute); }
.bi-op { display: flex; gap: 6px; }
.bi-o { display: flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px solid var(--bi-line); border-radius: 4px; background: var(--c-intro-bg); font-style: normal; font-size: 13px; font-weight: 500; line-height: 20px; color: var(--bi-mute); white-space: nowrap; transition: background-color .17s, border-color .17s, color .17s; }
.bi-o.on { border-color: var(--c-intro-blue); background: var(--bi-mk); color: var(--c-intro-ink); }
.bi-o em { font-style: normal; font-weight: 600; font-size: 12px; }
.bi-rs { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 16px; background: var(--bi-sec); }
.bi-sc small { display: block; font-size: 12px; line-height: 16px; color: var(--bi-mute); }
.bi-sc strong { display: block; font-weight: 600; font-size: 14px; color: var(--bi-mute); }
.bi-sc strong b { display: inline-block; min-width: .65em; font-size: 34px; line-height: 40px; color: var(--c-intro-ink); text-align: right; }
.bi-rt { display: grid; gap: 1px; padding: 8px 14px; border-radius: 8px; background: var(--bi-bad-bg); color: var(--bi-bad); text-align: right; }
.bi-rt b { font-size: 14px; font-weight: 600; line-height: 20px; }
.bi-rt span { font-size: 12px; font-weight: 500; line-height: 16px; }
/* Màn hình hẹp (intro.js gắn lớp bi-hep lúc dựng cảnh): lề hẹp hơn, nút gọn hơn. */
.bi-hep .bi-hd, .bi-hep .bi-q li, .bi-hep .bi-rs { padding-left: 14px; padding-right: 14px; }
.bi-hep .bi-q li { column-gap: 10px; }
.bi-hep .bi-o { gap: 4px; padding: 3px 8px; }
.bi-wbar { display: flex; justify-content: center; padding: 10px; border-bottom: 1px solid var(--bi-line); background: var(--bi-sec); }
.bi-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 8px; background: var(--bi-line); font-size: 13px; line-height: 24px; }
.bi-seg b { position: relative; z-index: 1; padding: 0 14px; font-weight: 500; text-align: center; color: var(--bi-mute); white-space: nowrap; transition: color .17s; }
.bi-seg b:first-of-type, .bi-seg.bang b:last-of-type { color: var(--c-intro-ink); }
.bi-seg.bang b:first-of-type { color: var(--bi-mute); }
.bi-pill { position: absolute; left: 2px; top: 2px; bottom: 2px; width: calc(50% - 2px); border-radius: 6px; background: var(--c-intro-bg); box-shadow: 0 0 1px rgba(0,0,0,.12), 0 1px 5px rgba(0,0,0,.12); }
.bi-body { position: relative; height: 210px; overflow: hidden; background-color: var(--c-intro-bg); background-image: radial-gradient(var(--bi-dot) 1px, transparent 1.2px); background-size: 16px 16px; }
.bi-body::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--c-intro-bg); opacity: var(--bi-cover, 1); pointer-events: none; }
.bi-bl { position: absolute; left: 0; top: 0; z-index: 1; box-sizing: border-box; display: flex; align-items: center; padding: 0 4px; border: 1px solid transparent; border-radius: 4px; font-size: 15px; line-height: 20px; }
.bi-bl::before { content: ""; position: absolute; inset: -1px; z-index: -1; border: 1px solid var(--bi-line); border-radius: inherit; background: var(--bi-paper); box-shadow: var(--bi-nsh); opacity: var(--giay, 0); }
.bi-bl:first-of-type { font-weight: 600; }
.bi-bl > span { display: block; }
.bi-cn { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bi-cn path { fill: none; stroke: var(--bi-edge); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.bi-cn .bi-ah { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; }
.bi-k { position: relative; display: inline-block; }
.bi-k b { position: relative; font-weight: 600; }
.bi-mk { position: absolute; z-index: -1; left: -4px; right: -4px; top: 1px; bottom: -1px; border-radius: 4px; background: var(--bi-hl); transform-origin: left center; transform: scaleX(0); }
.bi-lc { position: relative; width: 340px; height: 148px; visibility: hidden; }
.bi-fc { position: absolute; inset: 0; }
.bi-fl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; border: 1px solid var(--bi-line); border-radius: 12px; background: var(--bi-sec); box-shadow: var(--bi-pop); font-size: 17px; font-weight: 500; line-height: 25px; text-align: center; text-wrap: balance; }
.bi-b { font-size: 28px; font-weight: 600; }
.bi-b mark { padding: 0 6px; border-radius: 4px; color: var(--bi-hlt); background: var(--bi-hl); }
.bi-btns { position: absolute; left: 0; right: 0; top: 100%; margin-top: 20px; display: flex; justify-content: center; gap: 8px; visibility: hidden; }
.bi-bt { padding: 4px 14px; border-radius: 4px; background: var(--bi-line); font-size: 13px; font-weight: 500; line-height: 24px; }
.bi-pr { background: var(--c-intro-blue); color: #121212; box-shadow: 0 0 1px rgba(0,0,0,.12), 0 1px 5px rgba(0,0,0,.12); }
.bi-br { margin: 0; display: flex; white-space: pre; font: 800 clamp(2.6rem, min(11vw, 15vh), 5.75rem)/1.25 var(--font-baloo); color: var(--c-intro-ink); visibility: hidden; }
.bi-br i { font-style: normal; color: var(--c-intro-blue); }
.bi-c { display: inline-block; }
.bi-w { display: inline-flex; overflow: hidden; padding: .22em 0 .16em; margin: -.22em 0 -.16em; }
.bi-foot { position: absolute; left: 0; right: 0; bottom: max(6vh, 32px); display: flex; justify-content: center; pointer-events: none; }
.bi-caps { position: relative; width: min(420px, calc(100% - 32px)); height: 22px; margin: 0; padding: 0; list-style: none; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 22px; text-align: center; }
.bi-caps li { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; visibility: hidden; }
/* Mép cong phía dưới của màn kéo lên khi vào app. */
.bi-edge { position: absolute; left: -6%; right: -6%; top: calc(100% - 1px); height: max(64px, 10vh); background: var(--c-intro-bg); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
/* Màn hình thấp (điện thoại xoay ngang). Hàng sát hơn: intro.js gắn lớp bi-thap lúc dựng cảnh, vì chiều cao khung đo theo
   nó. Chú thích xuống sát đáy, khung nằm gọn phía trên chú thích: theo màn hình đang có, kể cả khi xoay máy giữa chừng. */
.bi-thap .bi-hd { padding-top: 10px; padding-bottom: 8px; }
.bi-thap .bi-q li { padding-top: 6px; padding-bottom: 6px; }
.bi-thap .bi-rs { padding-top: 8px; padding-bottom: 10px; }
@media (max-height: 480px) { .bi-stage { bottom: calc(var(--tran-day) + 40px); } .bi-foot { bottom: 12px; } }