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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-dark) var(--color-surface-alt);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-alt);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary-dark);
    border-radius: 999px;
    border: 2px solid var(--color-surface-alt);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "Be Vietnam Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 28px;
    text-align: justify;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

ul,
ol {
    padding-left: 1.25rem;
    margin: 0 0 1rem;
}

li {
    margin-bottom: 0.35rem;
}

p {
    margin: 0 0 1rem;
}

span {
    display: inline;
}

blockquote {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--color-primary);
    color: var(--color-text-muted);
    font-style: italic;
}

button,
input,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
    text-align: left;
}

h1 { font-size: 72px; }
h2 { font-size: 56px; }
h3 { font-size: 44px; }
h4 { font-size: 34px; }
h5 { font-size: 28px; }
h6 {
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.text-muted { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-primary { color: var(--color-primary); }
.text-center { text-align: center; }
.text-uppercase { text-transform: uppercase; }

/* ---------- Layout utilities ---------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2.5rem; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 800px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2.5rem; }

/* ---------- Cards / boxes ---------- */
.box {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.25rem;
}

.card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 8px 24px var(--color-shadow);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.divider {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--color-border);
    border: none;
    margin: 1.5rem 0;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

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

/* ---------- Thanh tien trinh cuon (fixed, top) ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
    z-index: 1100;
    transition: width 0.12s linear;
}

.toc {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 950;
    display: flex;
    align-items: center;
}

.toc__toggle {
    width: 3rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px 0 0 999px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-right: none;
    color: var(--color-text);
    font-size: 1.2rem;
    box-shadow: 0 8px 20px var(--color-shadow);
    transition: background 0.15s ease, color 0.15s ease;
}

.toc__toggle:hover,
.toc.is-open .toc__toggle {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.toc__panel {
    position: absolute;
    right: 100%;
    top: 50%;
    width: 300px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 20px 50px var(--color-shadow-strong);
    opacity: 0;
    pointer-events: none;
    transform: translate(12px, -50%);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toc.is-open .toc__panel {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
}

.toc__panel-title {
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    color: var(--color-text-subtle);
    padding: 0.4rem 0.6rem 0.6rem;
}

.toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.toc__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    color: var(--color-text);
    font-size: 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.toc__link:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.toc__link-number {
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    min-width: 1.5rem;
}

.toc__link:hover .toc__link-number {
    color: var(--color-text-inverse);
}

@media (max-width: 800px) {
    .toc {
        display: none;
    }
}

/* ---------- "Page" component: 1 section = 1 trang dang slide ----------
   Giao dien co dinh, moi trang la 1 to A4 nam ngang (ti le that, khop voi
   PDF xuat ra), KHONG co dan theo chieu rong trinh duyet. Man hinh nho
   hon thi dung nut zoom (-) hoac scrollbar ngang de xem het. */
/* #zoomViewport duoc app.js tu tao, boc quanh #content, chieu cao duoc
   JS tinh lai = chieu cao that * muc zoom, de vung cuon luon khop voi
   kich thuoc da zoom (transform khong tu lam viec nay). */
#zoomViewport {
    position: relative;
    display: flex;
    justify-content: center;
}

#content {
    display: block;
    width: 1920px;
    flex: none;
    transform-origin: top center;
}

.page {
    /* Chot: moi .page = dung 1 to A4 nam ngang (ti le 297:210 ~ 1.4143:1).
       Giu width 1920px lam moc (cac font-size/padding da tinh theo moc
       nay), height tinh theo dung ti le A4: 1920 / (297/210) = 1357.6px. */
    position: relative;
    width: 1920px;
    height: 1358px;
    margin: 12px auto;
    box-sizing: border-box;
    /* 1 khoi tron mo, dat lech goc tren-phai - hoa tiet trang tri chinh */
    background-image:
        radial-gradient(circle 380px at 92% 4%, var(--color-glow) 0%, transparent 72%),
        linear-gradient(165deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 24px 60px -24px var(--color-shadow-strong);
    color: var(--color-text);
    overflow: hidden;
    /* Chu watermark chim o goc duoi-phai moi trang (page__inner::after ben
       duoi doc bien nay). Doi noi dung theo tung section bang cach override
       bien nay tren class .page--xxx tuong ung (vd trang CLB). */
    /* --page-watermark: "WEB DESIGN 2026";
    --page-watermark-size: 160px; */
}

/* Watermark chu in hoa, cuc mo, chim o goc duoi-phai, khong chan chon/
   click duoc noi dung. z-index:-1 (trong stacking context cua .page__inner)
   nen luon nam duoi chu/anh that. Text lay tu bien --page-watermark de
   tung section co the doi noi dung ma khong can lap lai toan bo rule. */
/* .page__inner::after {
    content: var(--page-watermark);
    position: absolute;
    right: -0.05em;
    bottom: -0.12em;
    z-index: -1;
    font-family: "Be Vietnam Pro", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--page-watermark-size);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--color-text);
    opacity: 0.045;
    pointer-events: none;
    user-select: none;
} */

@media print {
    .page__inner::after { display: none !important; }
}

/* Lop trong (JS tu boc trong app.js) - giu nguyen kich thuoc thiet ke goc
   1920x1080 va toan bo layout/padding cua noi dung. Tach rieng lop nay
   giup khi in co the "co" rieng no bang transform ma KHONG lam sai kich
   thuoc vat ly cua .page ben ngoai (yeu to quyet dinh ngat trang dung). */
.page__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 72px;
    overflow: hidden;
}

/* Hoa tiet mach dien 45/90 do (Dark Modern Tech), chim o 2 goc CUA TUNG
   TRANG (khong phai nen ngoai), mo dan vao giua bang mask de trung tam
   luon giu toi/trong cho text. z-index:-1 (trong stacking context rieng
   cua .page__inner do co z-index:1) nen luon nam DUOI toan bo noi dung
   that, khong bao gio choi len chu/anh. Dung mask-image (alpha that) thay
   vi "ve de mau nen" vi nen .page la gradient cheo - de bi lech mau neu
   dung mau dac de che. */
.page__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg, transparent 0 15px, var(--color-circuit-line) 15px 16px, transparent 16px 31px),
        repeating-linear-gradient(-45deg, transparent 0 15px, var(--color-circuit-metal) 15px 16px, transparent 16px 31px),
        repeating-linear-gradient(90deg, transparent 0 31px, rgba(255, 255, 255, 0.03) 31px 32px, transparent 32px 63px),
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(255, 255, 255, 0.03) 31px 32px, transparent 32px 63px);
    -webkit-mask-image:
        radial-gradient(circle 620px at 0% 0%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%),
        radial-gradient(circle 620px at 100% 100%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%);
    mask-image:
        radial-gradient(circle 620px at 0% 0%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%),
        radial-gradient(circle 620px at 100% 100%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 45%, transparent 75%);
    /*
      Chi dung opacity (chay tren compositor, khong ve lai) - KHONG dung
      animate background-position: no bat ve lai (repaint) toan bo lop
      gradient+mask moi frame, nhan len tren toi 35 trang cung luc se lam
      GPU/CPU tang rat cao du dang o ngoai khung nhin (xem bai hoc tuong
      tu o .page::after ben duoi - dung transform thay vi background-position).
    */
    animation: pageCircuitPulse 9s ease-in-out infinite;
}

@keyframes pageCircuitPulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
    .page__inner::before { animation: none; }
}

/* Tat trong PDF: mask-image tren nhieu trang de bi trinh duyet rasterize
   thanh bitmap khi in, lam file PDF nang len - trong khi ban in da du gon
   nhe (van con radial-gradient/sheen khac lam nen). */
@media print {
    .page__inner::before { display: none !important; }
}

.page::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-glow), transparent);
    z-index: 2;
}

/* Lop luot sang cheo, chuyen dong lien tuc (qua lai, khong giat khung).
   Dung transform (GPU compositor) thay vi animate background-position de
   khong bi lag/giat khi cuon - background-position phai ve lai moi frame,
   con transform thi khong. */
.page::after {
    content: "";
    position: absolute;
    inset: -60%;
    background: linear-gradient(
        115deg,
        transparent 42%,
        var(--color-glow) 49%,
        var(--color-glow) 51%,
        transparent 58%
    );
    opacity: 0.5;
    animation: page-sheen 9s ease-in-out infinite alternate;
    pointer-events: none;
    will-change: transform;
}

@keyframes page-sheen {
    from { transform: translate3d(-16%, -10%, 0); }
    to { transform: translate3d(16%, 10%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .page::after {
        animation: none;
    }
}

.page-number {
    position: absolute;
    /* left: 1.5rem; */
    right: 1.5rem;
    bottom: 1.5rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-weight: 700;
    border-radius: 4px;
    font-size: 0.9rem;
}

.page-footer-note {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}

.logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.logo-row__item {
    height: 140px;
    width: auto;
    filter: drop-shadow(0 4px 8px var(--color-shadow-strong)) drop-shadow(0 0 24px var(--color-glow)) brightness(1.08);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.logo-row__item:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 8px 14px var(--color-shadow-strong)) drop-shadow(0 0 32px var(--color-glow)) brightness(1.12);
}

/* ---------- Animation on scroll (animate.css driven) ---------- */
[data-animate] {
    opacity: 0;
}

[data-animate].animate__animated {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* ---------- Nut "In PDF" (hover goc duoi phai) ---------- */
.print-trigger {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 7rem;
    height: 7rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 1rem;
    z-index: 1000;
}

.print-trigger__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 700;
    box-shadow: 0 8px 20px var(--color-shadow-strong);
    opacity: 0;
    transform: translate(30%, 30%);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    pointer-events: none;
}

.print-trigger:hover .print-trigger__btn,
.print-trigger:focus-within .print-trigger__btn {
    opacity: 1;
    transform: translate(0, 0);
    pointer-events: auto;
}

.print-trigger__btn:hover {
    background: var(--color-primary-dark);
}

/* ---------- Nut "Len dau trang" (chi hien sau khi cuon xuong) ---------- */
.back-to-top {
    position: fixed;
    right: 1.75rem;
    bottom: 6.5rem;
    z-index: 1000;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 1.2rem;
    box-shadow: 0 8px 20px var(--color-shadow);
    opacity: 0;
    transform: translateY(0.75rem);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* ---------- Zoom in/out cho khung 1920x1080 co dinh ---------- */
.zoom-control {
    position: fixed;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.4rem 0.6rem;
    box-shadow: 0 8px 20px var(--color-shadow);
}

.zoom-control__btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.zoom-control__btn:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.zoom-control__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
    color: var(--color-text);
}

.zoom-control__level {
    min-width: 3rem;
    text-align: center;
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.zoom-control__divider {
    width: 1px;
    height: 1.25rem;
    background: var(--color-border);
}

.zoom-control__page {
    min-width: 3.4rem;
    text-align: center;
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(8, 4, 3, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.97);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.lightbox-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

body.lightbox-open {
    overflow: hidden;
}

.lightbox-overlay__stage {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 4rem;
}

.lightbox-overlay__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    user-select: none;
    border-radius: 6px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
    opacity: 1;
    transition: transform 0.2s ease, opacity 0.18s ease;
}

.lightbox-overlay__img.is-dragging {
    transition: opacity 0.18s ease;
}

.lightbox-overlay__img.is-swapping {
    opacity: 0;
}

.lightbox-overlay__close,
.lightbox-overlay__nav,
.lightbox-overlay__zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-surface-alt);
    color: var(--color-text);
    transition: background 0.15s ease, color 0.15s ease;
}

.lightbox-overlay__close:hover,
.lightbox-overlay__nav:hover,
.lightbox-overlay__zoom-btn:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.lightbox-overlay__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    font-size: 1.2rem;
    z-index: 1;
}

.lightbox-overlay__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.4rem;
    z-index: 1;
}

.lightbox-overlay__nav--prev { left: 1.5rem; }
.lightbox-overlay__nav--next { right: 1.5rem; }

.lightbox-overlay__zoom {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    background: var(--color-surface-alt);
    border-radius: 999px;
    padding: 0.4rem 0.6rem;
}

.lightbox-overlay__zoom-btn {
    width: 2rem;
    height: 2rem;
    background: transparent;
}

.lightbox-overlay__counter {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-family: "JetBrains Mono", "Consolas", monospace;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-text-inverse);
    background: var(--color-primary);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px var(--color-shadow);
}

/* ---------- Print ---------- */
@page {
    size: A4 landscape;
    margin: 0;
}

@media print {
    .print-trigger,
    .zoom-control,
    .scroll-progress,
    .toc,
    .back-to-top,
    .lightbox-overlay {
        display: none !important;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html,
    body {
        margin: 0;
        background: var(--color-surface);
    }

    #zoomViewport {
        display: block;
    }

    #content {
        width: auto;
    }

    /*
      Noi dung dieu khien boi scroll (IntersectionObserver) se khong duoc
      kich hoat neu nguoi dung chua tung cuon toi do truoc khi bam In PDF.
      Khi in, luon hien full noi dung, bo qua trang thai animation.
    */
    [data-animate] {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }

    .page::after {
        content: none;
    }

    .page {
        margin: 0;
        border: none;
        border-radius: 0;
        width: 297mm;
        height: 210mm;
        box-sizing: border-box;
        page-break-after: always;
        break-after: page;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .page:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    .page__inner {
        width: 1920px;
        height: 1358px;
        /*
          Dung "zoom", KHONG dung "transform: scale()": transform chi ve lai
          hinh anh (paint), khong thu nho kich thuoc bo cuc (layout box) -
          .page__inner van chiem dung 1358px chieu cao trong luong lay out,
          cao hon nhieu so voi .page (210mm ~ 793px). Trinh duyet in tinh so
          trang theo kich thuoc layout THAT (chua scale) nen phan tran ra bi
          tach thanh hang loat trang in du (phan lon la trang trang) - vi du
          33 trang bi nhan len thanh ~4x trang. "zoom" thu nho ca layout that
          nen khong con phan tran, het bi sinh trang du.

          KHONG dung calc(297mm / 1920px): chia 2 don vi tuyet doi khac loai
          (mm/px) trong calc() Firefox tinh sai ty le (Chrome thi dung), gay
          in ra khong dung kich thuoc that. Quy doi san 297mm ve px theo
          chuan CSS (1in = 96px = 25.4mm) roi chia px/px (cung don vi) de
          moi trinh duyet tinh giong nhau: 297 * 96 / 25.4 / 1920.
        */
        zoom: 0.5844000213;
    }
}

/* ---------- Overlay bao hieu qua trinh nap trang (spinner SVG + thanh tien trinh) ---------- */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: var(--color-surface);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-overlay__anim {
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.loading-overlay__bar {
    width: 260px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-surface-alt);
    overflow: hidden;
}

.loading-overlay__bar-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
    transition: width 0.35s ease;
}

.loading-overlay__label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.loading-overlay__label #loadingPercent {
    color: var(--color-primary);
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .loading-overlay__anim {
        animation-play-state: paused !important;
    }
}

@media print {
    .loading-overlay {
        display: none !important;
    }
}