/* =====================================================================
   IT-Flipbook — Trình xem flipbook (P5)

   BỐ CỤC MÀU: theo ĐÚNG tông của site tham chiếu (Takara HORO — http://localhost:8090):
   nền sáng, xanh thương hiệu #055aaa, chữ #111827, viền #d7deea, nền phụ #f2f5f9,
   bo góc 12/18 px, bóng mềm `0 18px 40px rgba(15,23,42,.12)`, font Noto Sans.
   Các giá trị này lấy từ chính `:root` của site đó nên hai bên trông cùng một hệ.
   `data-theme` (light/dark/sepia) chỉ chi phối NỀN GIẤY của từng trang.
   ===================================================================== */

.jdb-viewer {
    /* Bảng màu dùng chung với site Takara HORO */
    --jdb-accent: #055aaa;
    --jdb-accent-strong: #04488a;
    --jdb-accent-soft: rgba(5, 90, 170, .2);
    --jdb-teal: #0e7490;
    --jdb-ink: #111827;
    --jdb-muted: #526072;
    --jdb-line: #d7deea;
    --jdb-line-strong: #b9c8de;
    --jdb-surface: #ffffff;
    --jdb-surface-soft: #f2f5f9;
    --jdb-surface-hover: #eef3fa;
    /* “Khung” trình xem: nền trắng kính mờ (nhẹ, hợp nền sáng) */
    --jdb-chrome: rgba(255, 255, 255, .88);
    --jdb-chrome-solid: #ffffff;
    --jdb-chrome-2: #ffffff;
    --jdb-chrome-2-hover: #eef3fa;
    --jdb-glass: blur(12px) saturate(1.2);
    --jdb-shadow-sm: 0 10px 30px rgba(15, 23, 42, .06);
    --jdb-shadow: 0 18px 40px rgba(15, 23, 42, .12);
    --jdb-shadow-lg: 0 28px 56px rgba(15, 23, 42, .18);
    --jdb-page-shadow: 0 16px 36px rgba(15, 23, 42, .16);
    --jdb-radius: 18px;
    --jdb-radius-sm: 12px;
    --jdb-radius-pill: 999px;
    --jdb-warning-bg: #fff7ed;
    --jdb-warning-line: #fed7aa;
    --jdb-warning-ink: #b45309;
    --jdb-danger: #ce3a39;
    --jdb-motion: .18s;
    --jdb-motion-slow: .28s;
    --jdb-toolbar-h: 46px;
    font-family: "Noto Sans", "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--jdb-surface);
    color: var(--jdb-ink);
    border: 1px solid var(--jdb-line);
    box-shadow: var(--jdb-shadow);
    overflow: hidden;
}

/* Nền sau lưng sách (lớp nằm dưới ảnh trang) */
.jdb-viewer {
    --jdb-bg: var(--jdb-surface-soft);
    --jdb-panel: var(--jdb-chrome);
}

.jdb-viewer__preview {
    margin: 0;
    padding: 10px 14px;
    background: var(--jdb-warning-bg);
    color: var(--jdb-warning-ink);
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid var(--jdb-warning-line);
}

.jdb-viewer__error {
    margin: 0;
    padding: 18px;
    color: var(--jdb-danger);
    font-weight: 600;
}

/* --------------------------------------------------------------- Toolbar */
.jdb-viewer__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Khe hẹp: đo thật cho thấy 3 nhóm + nhãn chữ cần ~1100 px khi giãn 4 px/6 px; để 10 px thì
       thanh xuống 2 dòng ở cột nội dung 1142 px. */
    gap: 4px;
    /* Cho phép truy vấn theo BỀ RỘNG CỦA CHÍNH THANH (không phải bề rộng cửa sổ): nhãn chữ ẩn/hiện
       theo chỗ thật có ⇒ không bao giờ bị xuống dòng chỉ vì nhãn. */
    container-type: inline-size;
    flex-wrap: wrap;
    min-height: var(--jdb-toolbar-h);
    padding: 6px 10px;
    background: var(--jdb-chrome);
    -webkit-backdrop-filter: var(--jdb-glass);
    backdrop-filter: var(--jdb-glass);
    border-bottom: 1px solid var(--jdb-line);
    transition: opacity .25s ease, transform .25s ease;
    z-index: 4;
}

.jdb-viewer.is-idle .jdb-viewer__toolbar {
    opacity: .35;
}

.jdb-viewer:hover .jdb-viewer__toolbar,
.jdb-viewer:focus-within .jdb-viewer__toolbar {
    opacity: 1;
}

.jdb-viewer__group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.jdb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--jdb-line);
    border-radius: var(--jdb-radius-sm);
    background: var(--jdb-surface);
    color: var(--jdb-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--jdb-motion, .18s) ease, color var(--jdb-motion, .18s) ease,
        border-color var(--jdb-motion, .18s) ease, box-shadow var(--jdb-motion, .18s) ease;
}

.jdb-btn:hover {
    background: var(--jdb-chrome-2-hover);
    border-color: var(--jdb-line-strong);
    box-shadow: var(--jdb-shadow-sm);
}

.jdb-btn:focus-visible {
    outline: 2px solid var(--jdb-accent);
    outline-offset: 2px;
}

.jdb-btn.is-active {
    background: var(--jdb-accent);
    border-color: var(--jdb-accent);
    color: #fff;
    font-weight: 700;
}

.jdb-btn.is-active:hover {
    background: var(--jdb-accent-strong);
    border-color: var(--jdb-accent-strong);
}

/* Mỗi nút có icon + NHÃN CHỮ: người dùng không phải đoán nghĩa biểu tượng.
   Vẫn giữ aria-label nên khi nhãn bị ẩn trên màn hình hẹp thì trình đọc màn hình vẫn đọc được. */
.jdb-btn__icon {
    font-size: 15px;
    line-height: 1;
}

.jdb-btn__label {
    margin-left: 6px;
    font-size: 13px;
    white-space: nowrap;
}
.jdb-btn--zoom {
    min-width: 58px;
    font-variant-numeric: tabular-nums;
}

/* Nút không bấm được (đầu/cuối sách, đã tới giới hạn zoom) phải trông KHÁC hẳn nút thường,
   nếu không người dùng sẽ tưởng nút hỏng. */
.jdb-btn[disabled],
.jdb-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: var(--jdb-surface-soft);
    border-color: var(--jdb-line);
    box-shadow: none;
}

.jdb-btn[disabled]:hover {
    background: var(--jdb-surface-soft);
    border-color: var(--jdb-line);
    box-shadow: none;
}

/* Ô nhập số trang (gõ số rồi Enter để nhảy thẳng tới trang đó) */
.jdb-pager {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jdb-pager__input {
    width: 58px;
    height: 34px;
    padding: 0 4px;
    text-align: center;
    border: 1px solid var(--jdb-line);
    border-radius: var(--jdb-radius-sm);
    background: var(--jdb-surface);
    color: var(--jdb-ink);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    /* Tông sáng: để phần mũi tên tăng/giảm của <input type=number> hiển thị theo tông sáng */
    color-scheme: light;
}

.jdb-pager__input:focus-visible {
    outline: 2px solid var(--jdb-accent);
    outline-offset: 2px;
}

.jdb-pager__total {
    color: var(--jdb-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* Vách ngăn mảnh giữa các nhóm chức năng (Điều hướng | Cách xem | Tài liệu) */
.jdb-viewer__group + .jdb-viewer__group::before {
    content: "";
    align-self: center;
    width: 1px;
    height: 22px;
    margin-right: 2px;
    background: var(--jdb-line);
}

.jdb-counter {
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    color: var(--jdb-muted);
    min-width: 68px;
    text-align: center;
}

.jdb-counter strong {
    color: var(--jdb-ink);
    font-size: 15px;
}

/* ----------------------------------------------------------------- Stage */
.jdb-viewer__stage {
    position: relative;
    flex: 1 1 auto;
    /* Chiều cao do JS tính lại cho vừa sách (viewer.js: fitStage) — đây chỉ là giá trị dự phòng */
    min-height: 260px;
    height: min(78vh, 900px);
    /* KHÔNG để trục nào là `auto` ở đây: khi bo góc, tờ giấy cong vượt ra ngoài ô nên khung sinh
       thanh cuộn dọc 15 px ⇒ bề rộng khung tụt 1142 → 1127 px, sách co lại và "nhảy" về thị giác
       (đã đo: stageScrollH 615 → 938, stageBar 0 → 15). `hidden` cả hai trục giữ bề rộng khung cố
       định; phần tờ giấy cong tràn ra chỉ bị cắt ở mép khung.
       Khi người dùng PHÓNG TO thì ngược lại: cần cuộn để xem phần tràn, nên chỉ mở `auto` trong
       trạng thái .is-zoomed (xem bên dưới). */
    overflow: hidden;
    padding: 14px 12px 22px;
    /* Kéo ngang để lật trang; cuộn dọc vẫn do trình duyệt xử lý */
    touch-action: pan-y;
    user-select: none;
    /* Nền “bàn đặt sách”: sáng, có vạt xanh rất nhẹ ở trên và bóng mờ dưới để trang giấy nổi lên */
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(5, 90, 170, .07), transparent 62%),
        linear-gradient(180deg, #f8fafc 0%, #eaeff7 100%);
}

.jdb-viewer__scroller {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1180px;
    height: 100%;
}

/* ---------------------------------------------------------------- Logo khung xem
   Logo do quản trị tải lên (/admin/cau-hinh → “Logo khung xem”), đứng ở góc TRÁI TRÊN sân khấu.
   Hai điều kiện để “thu phóng gì nó vẫn cố định”:
   . phần bị phóng to nằm trong `.jdb-viewer__scroller` ⇒ logo là ANH EM đứng ngoài, không bị scale;
   . `position: sticky` ⇒ khi sân khấu mở cuộn (.is-zoomed) logo vẫn neo ở góc.
   `width/height: 0` để logo KHÔNG chiếm chỗ trong luồng (không đẩy khung sách xuống); phần ảnh thật
   nằm trong thẻ img nên vẫn hiện đầy đủ. `pointer-events: none` để không chắn thao tác kéo góc bìa
   ở vùng góc trên - trái của khung.
   LƯU Ý ĐÃ ĐO: đặt `top/left` KHÁC 0 sẽ làm logo LỆCH khi cuộn — vị trí lúc đứng yên = lề sân khấu
   + offset, còn lúc cuộn nó bị ghim ở mốc 0 (đo được: offset 14 ⇒ lệch 22 → 8 px khi cuộn hết cỡ;
   offset 0 ⇒ đứng yên ở 8,10 px cả khi cuộn). Vì vậy để 0 và dùng lề của sân khấu làm khoảng chừa. */
.jdb-viewer__logo {
    position: sticky;
    top: 0;
    left: 0;
    display: block;
    width: 0;
    height: 0;
    z-index: 6;
    pointer-events: none;
    /* Khoảng chừa thêm cho logo khỏi dính sát mép khung (lề sân khấu lo phần chính) */
    padding: 6px 0 0 6px;
}

.jdb-viewer__logo img {
    display: block;
    max-width: none;
    height: auto;
    /* Bóng nhẹ để logo đọc được cả trên nền sáng lẫn trên trang giấy */
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, .2));
}

/* Khi phóng to: mở cuộn cho khung để xem được phần bị tràn (trước đây `overflow: hidden` làm
   phần phóng to bị cắt cụt và không thể kéo xem). `scrollbar-gutter: stable` giữ chỗ thanh cuộn
   ngay từ đầu nên bề rộng khung không đổi khi vừa cuộn được vừa không. */
.jdb-viewer.is-zoomed .jdb-viewer__stage {
    overflow: auto;
    scrollbar-gutter: stable;
}

.jdb-viewer__book {
    width: 100%;
    height: 100%;
}

/* StPageFlip tạo khoảng đệm tỉ lệ (padding-bottom) cho wrapper để giữ chỗ cho sách;
   khung của ta đã có chiều cao xác định nên khoảng đệm này chỉ tạo thêm vùng trống
   phía dưới (sinh thanh cuộn thừa) — bỏ đệm và cho wrapper cao đúng bằng khung. */
.jdb-viewer__book .stf__wrapper {
    padding-bottom: 0 !important;
    height: 100%;
    max-width: 100%;
}

/* StPageFlip đặt min-width/min-height TRỰC TIẾP trên phần tử gốc (inline style), theo công
   thức minWidth × (usePortrait ? 1 : 2). Vì ta dùng minWidth để điều khiển số trang hiển thị,
   giá trị đó sẽ kéo giãn khung sách (đã từng làm khung rộng 100000px và đẩy trang ra ngoài
   màn hình). Bề rộng thật luôn do `.jdb-viewer__book` quyết định nên vô hiệu hoá hai thuộc
   tính đó; số trang hiển thị vẫn do điều kiện (bề rộng khung < 2 × minWidth) quyết định. */
.jdb-viewer__book.stf__parent {
    min-width: 0 !important;
    min-height: 0 !important;
}

.jdb-page {
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jdb-page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    user-select: none;
    -webkit-user-drag: none;
}

/* Trang ruột khổ “mặt trải” (gấp đôi bìa) được CẮT làm hai lá — mỗi lá hiện một nửa
   của ảnh gốc. Ảnh gốc rộng đúng gấp đôi ô nên đặt img rộng 200% rồi dịch trái/phải:
   cắt đúng giữa, không bóp méo (200% của ô 1:1 = đúng tỉ lệ 2:1 của ảnh). */
.jdb-page[data-half] {
    overflow: hidden;
}

.jdb-page[data-half] img {
    position: absolute;
    top: 0;
    width: 200%;
    height: 100%;
    max-width: none;
    object-fit: fill;
}

.jdb-page[data-half="left"] img { left: 0; }
.jdb-page[data-half="right"] img { left: -100%; }

/* Bìa đứng riêng (sách đang ĐÓNG): chỉ có trang bìa trên khung, nằm ở NỬA PHẢI như bìa sách
   thật đang đặt trên bàn (gáy ở giữa), nửa trái để trống cho tới khi mở ra. Bỏ nền trắng của ô
   để không còn "dải trắng" hai bên ảnh bìa (ảnh bìa vuông nằm trong ô khổ ngang của trang ruột). */
.jdb-viewer[data-cover-alone="1"] .jdb-page[data-n="1"],
.jdb-viewer[data-cover-alone="1"] .jdb-page[data-n="1"] img {
    background: transparent;
}

/* Bỏ luôn bóng viền của ô để không còn thấy "khung chữ nhật" quanh ảnh bìa */
.jdb-viewer[data-cover-alone="1"] .jdb-page[data-n="1"].stf__item {
    box-shadow: none;
}

/* TRANG CUỐI (bìa sau) đứng riêng: xử lý đối xứng với bìa trước — bỏ nền trắng của ô và bỏ bóng
   viền. Bìa sau nằm ở NỬA TRÁI (đúng như lúc đã lật hết sách, bìa sau ở bên trái) nên KHÔNG
   dịch khối sách: giữ nguyên gáy ở giữa khung cho hai đầu sách đối xứng nhau. */
.jdb-viewer[data-last-alone="1"] .jdb-page--tail,
.jdb-viewer[data-last-alone="1"] .jdb-page--tail img {
    background: transparent;
}

.jdb-viewer[data-last-alone="1"] .jdb-page--tail.stf__item {
    box-shadow: none;
}

.jdb-viewer[data-theme="dark"] .jdb-page,
.jdb-viewer[data-theme="dark"] .jdb-page img {
    background: #e9edf3;
}

/* Bìa đang đóng lại: ĐÃ THỬ ẩn những tờ đứng yên của cụm đang mở (`--simple`) bằng
   `visibility: hidden` theo cờ `data-flip-closing` — đã GỠ vì không thể đẹp: ẩn ngay khi vừa chạm
   rìa thì cả trang trắng trơn, còn ẩn muộn (khi bìa đã quét qua) thì bìa vẫn đang ở trên không nên
   vẫn hở khoảng trắng. Muốn hết hẳn phải `clip-path` tờ tĩnh theo vùng bìa đã quét qua.
   Ghi chú đầy đủ ở `viewer.js` (mục “GHI CHÚ R17”). */

/* Ảnh hưởng của StPageFlip: gáy sách và bóng đổ. Bóng NGOÀI mềm theo tông sáng của site
   tham chiếu; phần `inset` giữ lại để tờ giấy vẫn có chiều sâu khi lật. */
.jdb-viewer[data-effect="hard"] .stf__item {
    box-shadow: var(--jdb-page-shadow), inset 0 0 24px rgba(15, 23, 42, .14);
}

.jdb-viewer[data-effect="soft"] .stf__item {
    box-shadow: var(--jdb-page-shadow), inset 0 0 10px rgba(15, 23, 42, .06);
}

/* --------------------------------------------------------------- Loading */.jdb-viewer__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--jdb-ink);
    font-size: 14px;
    font-weight: 600;
    z-index: 5;
}

.jdb-viewer[data-theme="dark"] .jdb-viewer__loading {
    background: rgba(255, 255, 255, .72);
}

.jdb-spinner {
    width: 18px;
    height: 18px;
    border: 3px solid var(--jdb-line);
    border-top-color: var(--jdb-accent);
    border-radius: 50%;
    animation: jdb-spin .8s linear infinite;
}

@keyframes jdb-spin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------ Thumbnails */
/* Dải trang nằm ngay DƯỚI khung sách (không phải bảng trượt bên phải) để luôn thấy
   mình đang ở trang nào; cuộn ngang khi sách nhiều trang. */
.jdb-thumbs {
    position: relative;
    width: 100%;
    background: var(--jdb-chrome);
    -webkit-backdrop-filter: var(--jdb-glass);
    backdrop-filter: var(--jdb-glass);
    border-top: 1px solid var(--jdb-line);
    display: flex;
    flex-direction: column;
    z-index: 4;
}

/* Cần thiết vì khối này dùng display:flex — thuộc tính `hidden` của HTML sẽ bị CSS của
   tác giả ghi đè (bẫy đã gặp ở P2 với .alert/.save-bar). */
.jdb-thumbs[hidden] {
    display: none !important;
}

.jdb-thumbs__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--jdb-line);
    font-size: 13px;
}

.jdb-thumbs__now {
    margin-left: auto;
    color: var(--jdb-muted);
}

.jdb-thumbs__now strong {
    color: var(--jdb-ink);
}

.jdb-thumbs__grid {
    display: flex;
    gap: 8px;
    /* Mọi ô cao BẰNG NHAU nên canh theo mép trên là đủ */
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px 12px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--jdb-line-strong) transparent;
}

/* MỌI Ô THUMB CÙNG KÍCH THƯỚC: ô luôn vuông, ảnh tự lấp đầy ô (object-fit) nên dài/ngang
   khác nhau cũng thành một dãy đều nhau — thumbnail chỉ để nhận diện trang, không phải để đo. */
.jdb-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 78px;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--jdb-line);
    border-radius: var(--jdb-radius-sm);
    background: var(--jdb-surface);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--jdb-motion, .18s) ease, transform var(--jdb-motion, .18s) ease,
        box-shadow var(--jdb-motion, .18s) ease;
}

.jdb-thumb:hover {
    border-color: var(--jdb-line-strong);
    transform: translateY(-2px);
    box-shadow: var(--jdb-shadow-sm);
}

.jdb-thumb.is-current {
    border-color: var(--jdb-accent);
    box-shadow: 0 0 0 2px var(--jdb-accent-soft), var(--jdb-shadow-sm);
}

/* Trang đối diện của tờ giấy đang mở (chế độ hai trang) — biết ngay cặp đang xem */
.jdb-thumb.is-facing {
    border-color: var(--jdb-accent-soft);
}

.jdb-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #fff;
}

.jdb-thumb span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 24, 39, .68);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 0;
    text-align: center;
}

@media (max-width: 600px) {
    .jdb-thumb { width: 58px; }
    .jdb-thumbs__head { font-size: 12px; }
}

/* Cần thiết vì các khối dưới đây dùng display:flex — thuộc tính `hidden` của HTML
   sẽ bị CSS của tác giả ghi đè (bẫy đã gặp ở P2 với .alert/.save-bar). */
.jdb-viewer [hidden] {
    display: none !important;
}

/* ------------------------------------------------------------------ Hint */
.jdb-viewer__hint {
    margin: 0;
    padding: 9px 14px;
    background: var(--jdb-chrome);
    -webkit-backdrop-filter: var(--jdb-glass);
    backdrop-filter: var(--jdb-glass);
    border-top: 1px solid var(--jdb-line);
    color: var(--jdb-muted);
    font-size: 12.5px;
}

.jdb-viewer__hint kbd {
    background: var(--jdb-surface-soft);
    border: 1px solid var(--jdb-line);
    border-radius: 6px;
    padding: 0 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--jdb-ink);
}

/* --------------------------------------------- Trang /doc và bản nhúng */
.doc-page__head { margin-bottom: 16px; }
.doc-page__head h1 { margin: 0 0 6px; font-size: 26px; }
.doc-page__meta { display: flex; gap: 12px; align-items: center; color: #64748b; font-size: 14px; margin: 0 0 8px; }
.doc-page__description { color: #475569; line-height: 1.65; margin: 0 0 10px; max-width: 70ch; }
.doc-page__embed summary { cursor: pointer; color: #2563eb; font-weight: 600; }
.doc-page__embed textarea { width: 100%; font-family: Consolas, monospace; font-size: 12.5px; padding: 8px; border: 1px solid #d6dde8; border-radius: 8px; }
.doc-page__foot { margin-top: 16px; }

/* Bản nhúng iframe: khung xem chiếm HẾT diện tích iframe (yêu cầu “toàn màn hình”), không viền
   bo góc; sân khấu giãn theo phần còn lại sau thanh công cụ + dải trang (chiều cao do flex quyết
   định, KHÔNG do JS đặt như ở trang /doc — xem viewer.js: fitStage). */
.embed-body {
    margin: 0;
    height: 100%;
    background: var(--jdb-surface-soft, #f2f5f9);
    overflow: hidden;
}

.embed-body .jdb-viewer {
    border-radius: 0;
    border: 0;
    box-shadow: none;
    height: 100%;
    min-height: 0;
}

.embed-body .jdb-viewer__stage {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.embed-body .jdb-viewer__hint { display: none; }

.lock-page { max-width: 460px; margin: 40px auto; text-align: center; }
.lock-page__form { display: flex; flex-direction: column; gap: 14px; margin: 20px 0; text-align: left; }

/* Thanh công cụ hẹp: giữ icon, ẩn nhãn chữ (aria-label vẫn còn cho trình đọc màn hình).
   Dùng container query nên ngưỡng tính theo bề rộng THANH, đúng chỗ cần.
   1090 px = bề rộng tối thiểu mà 3 nhóm + nhãn chữ còn nằm gọn một dòng (đo được ~1082 px). */
@container (max-width: 1090px) {
    .jdb-btn__label { display: none; }
    .jdb-viewer__group + .jdb-viewer__group::before { display: none; }
}

/* Máy hẹp: 12 nút không thể dồn một dòng ⇒ cho thanh cuộn ngang thay vì xuống 2–3 dòng
   (2 dòng ăn mất ~40 px chiều cao khung sách). Dùng media query chứ KHÔNG dùng @container:
   phần tử khai báo `container-type` KHÔNG thể tự truy vấn chính nó (đã thử: rule không áp dụng). */
@media (max-width: 560px) {
    .jdb-viewer__toolbar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .jdb-viewer__group {
        flex: 0 0 auto;
    }
}

/* ----------------------------------------------------------- In / màn nhỏ */
@media (max-width: 720px) {
    /* Dự phòng cho trình duyệt cũ không hỗ trợ container query */
    .jdb-btn__label { display: none; }
    .jdb-btn { padding: 0 9px; }
    .jdb-pager__input { width: 50px; }
    .jdb-viewer__group + .jdb-viewer__group::before { display: none; }
}

@media (max-width: 640px) {
    .jdb-viewer__stage { height: min(62vh, 620px); padding: 10px 8px 16px; }
    .jdb-viewer__hint { font-size: 12px; }
    .jdb-btn { min-width: 32px; height: 32px; padding: 0 8px; }
    .jdb-pager__input { height: 32px; }
}

/* ------------------------------------------------------------------ In */
/* Khi in: chỉ in khối ảnh trang, bỏ mọi thành phần giao diện khác. */
.jdb-print { display: none; }

@media print {
    body.is-printing .jdb-print { display: block !important; }
    body.is-printing > *:not(.jdb-print) { display: none !important; }
    .jdb-print img {
        display: block;
        width: 100%;
        height: auto;
        page-break-after: always;
        break-after: page;
    }
    .jdb-print img:last-child {
        page-break-after: auto;
        break-after: auto;
    }
}

@media print {
    .jdb-viewer__toolbar,
    .jdb-thumbs,
    .jdb-viewer__hint { display: none !important; }
    .jdb-viewer { border: 0; }
}