/* ============================================================
   FLIPPING BOOK — Trình đọc lật trang 3D cho Kho sách Vật lý
   Dùng PDF.js render trang → CSS 3D transform lật trang
   ============================================================ */

/* ── Overlay toàn màn hình ── */
.fb-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #1a1a2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fb-fade-in .25s ease;
    font-family: inherit;
}

@keyframes fb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Thanh tiêu đề trên ── */
.fb-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    /* Chừa chỗ cho tai thỏ / đồng hồ. PWA đặt thanh trạng thái kiểu
       "black-translucent" nên trang bắt đầu vẽ từ y=0 — không chừa thì
       đồng hồ và sóng/pin đè lên nút Đóng và nút Toàn màn hình, bấm không được.
       env() bằng 0 trên máy tính và Safari thường, nên chỉ PWA mới bị đẩy xuống. */
    padding-top: max(10px, calc(env(safe-area-inset-top, 0px) - 9px));
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
    box-sizing: border-box;
}

.fb-header-title {
    flex: 1;
    color: #f1f5f9;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-header-info {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.fb-btn-icon {
    background: rgba(255,255,255,.1);
    border: none;
    color: #e2e8f0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.fb-btn-icon:hover { background: rgba(255,255,255,.2); }
.fb-btn-icon:disabled { opacity: .35; cursor: default; }
.fb-btn-icon:disabled:hover { background: rgba(255,255,255,.1); }
.fb-btn-icon .material-icons-round { font-size: 20px; }

/* ── Vùng sân khấu sách ── */
.fb-stage {
    flex: 1;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    padding: 16px 20px;
    box-sizing: border-box;
    position: relative;
}

.fb-stage.dang-keo { cursor: grabbing; }

/* ── Đang phóng to: cho cuộn quanh trang ──
   flex + căn giữa + overflow sẽ cắt cụt mép trên và mép trái khi con to hơn
   khung — đó là hạn chế cố hữu của flexbox. Nên khi phóng to phải bỏ căn giữa
   bằng flex và dùng margin:auto trên chính quyển sách. */
.fb-stage.dang-phong {
    overflow: auto;
    justify-content: flex-start;
    align-items: flex-start;
    cursor: default;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.fb-stage.dang-phong .fb-book {
    margin: auto;
    touch-action: auto;      /* phóng to thì ngón tay dùng để cuộn, không lật */
}
.fb-stage.dang-phong .fb-book-shadow { display: none; }

/* ── Bóng đổ nền sách ── */
.fb-book-shadow {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 30px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, transparent 80%);
    pointer-events: none;
}

/* ── Quyển sách (khung cố định, không dựng lại mỗi lần lật) ── */
.fb-book {
    position: relative;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    /* Phối cảnh đặt Ở ĐÂY (không phải ở .fb-stage) để con trực tiếp
       là tờ giấy .fb-flip nhận được chiều sâu 3D */
    perspective: 2400px;
    perspective-origin: 50% 45%;
    will-change: transform;
    touch-action: pan-y;      /* kéo ngang là để lật trang, không phải cuộn */
    user-select: none;
    -webkit-user-select: none;
}

/* ── Mỗi ô trang (nền) ── */
.fb-page {
    position: relative;
    background: #fff;
    box-shadow: 0 4px 32px rgba(0,0,0,.35);
    overflow: hidden;
    flex-shrink: 0;
    backface-visibility: hidden;
}

.fb-page.is-empty { visibility: hidden; }

.fb-page canvas { display: block; width: 100%; height: 100%; }

.fb-page-left  { border-radius: 3px 0 0 3px; box-shadow: -2px 0 10px rgba(0,0,0,.22); }
.fb-page-right { border-radius: 0 3px 3px 0; box-shadow:  2px 0 10px rgba(0,0,0,.22); }

/* Gáy sách: thay cho vạch kẻ cũ, hai trang cùng tối dần đều về phía giữa.
   Cách này cho ra chỗ giáp đối xứng và mềm, không còn đường kẻ nào. */
.fb-page-left::after,
.fb-page-right::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 7%;
    pointer-events: none;
    z-index: 2;
}
.fb-page-left::after  { right: 0; background: linear-gradient(90deg,  rgba(0,0,0,0) 0%, rgba(0,0,0,.17) 100%); }
.fb-page-right::after { left: 0;  background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.17) 100%); }

/* Vạch gáy sách — đã bỏ theo yêu cầu (23/08/2026).
   Hai trang nay liền nhau; chỗ giáp vẫn còn bóng mềm từ box-shadow của
   .fb-page-left / .fb-page-right nên vẫn ra dáng gáy sách. */
.fb-spine { display: none; }

/* Bóng tờ giấy hắt xuống trang nền, phía gáy — đậm dần khi trang dựng lên */
.fb-gutter-shadow {
    position: absolute;
    top: 0;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 45%, rgba(0,0,0,0) 100%);
}
.fb-gutter-shadow.ben-trai {
    left: auto;
    right: 50%;
    background: linear-gradient(270deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.16) 45%, rgba(0,0,0,0) 100%);
}

/* ── TỜ GIẤY ĐANG LẬT ─────────────────────────────────────
   Hai mặt, mỗi mặt tự che lưng mình (backface-visibility) nên không
   bao giờ lộ mặt trái của canvas. Tờ giấy phẳng — không gập, không
   cong.                                                            */
.fb-flip {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 20;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform;
}

.fb-book.is-flipping .fb-flip { display: block; }

.fb-flip.to-right { transform-origin: left center; }   /* lật sang trái (đi tới) */
.fb-flip.to-left  { transform-origin: right center; }  /* lật sang phải (đi lùi) */

.fb-face {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.fb-face.is-empty { visibility: hidden; }
.fb-face:not(.is-empty) { box-shadow: 0 6px 30px rgba(0,0,0,.34); }

/* Mặt sau xoay sẵn 180° để khi tờ giấy lật qua thì nó dựng đúng chiều */
.fb-face-back { transform: rotateY(180deg); }

/* Hai nửa của một mặt — nay chỉ còn là cách cắt canvas, hai nửa luôn
   nằm phẳng sát nhau nên nhìn ra một tờ giấy liền. Bóng đổ chuyển lên
   cả mặt (.fb-face) để không có vệt tối ở chỗ nối. */
.fb-panel {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    background: #fff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.fb-panel-clip { position: absolute; top: 0; }
.fb-panel-clip canvas { display: block; width: 100%; height: 100%; }

/* Bóng phủ trên mặt tờ giấy, đậm nhất lúc trang dựng vuông góc */
.fb-shade {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}
.fb-shade-front { background: linear-gradient(270deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 100%); }
.fb-shade-back  { background: linear-gradient(90deg,  rgba(0,0,0,.50) 0%, rgba(0,0,0,.16) 55%, rgba(0,0,0,0) 100%); }

/* Placeholder trang đang tải (chỉ gặp lúc mới mở sách) */
.fb-page-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    position: absolute;
    inset: 0;
}

.fb-page-placeholder .spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #bb2649;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

/* ── Thanh điều hướng dưới ── */
.fb-nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
    box-sizing: border-box;
}

.fb-nav-btn {
    background: rgba(255,255,255,.1);
    border: none;
    color: #e2e8f0;
    min-width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 0 10px;
}
.fb-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.fb-nav-btn:disabled { opacity: .35; cursor: default; }
.fb-nav-btn .material-icons-round { font-size: 20px; }

.fb-page-input {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #f1f5f9;
    font-size: 14px;
    font-weight: 700;
    width: 56px;
    height: 36px;
    border-radius: 8px;
    text-align: center;
    outline: none;
    font-family: inherit;
    transition: border-color .15s;
}
.fb-page-input:focus { border-color: #bb2649; }

.fb-nav-sep {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

/* Loading ban đầu */
.fb-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #94a3b8;
    font-size: 15px;
    font-weight: 600;
    flex: 1;
}
.fb-loading .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,.1);
    border-top-color: #bb2649;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.fb-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #f87171;
    font-size: 15px;
    text-align: center;
    padding: 40px;
    flex: 1;
}

/* ── Responsive: điện thoại portrait → 1 trang ── */
/* Màn hẹp: thanh tiêu đề giờ có 3 nút (Đóng · Thu nhỏ · Phóng to) nên
   thu hẹp khoảng cách để tên sách còn chỗ. KHÔNG đổi cỡ nút — cỡ nút quyết
   định chiều cao 85px của thanh. */
@media (max-width: 480px) {
    .fb-header { gap: 8px; }
    .fb-header-info { font-size: 12px; }
}

@media (max-width: 900px) {
    .fb-spine { display: none; }
    .fb-page-left { display: none; }
    .fb-page-right { border-radius: 3px; }
    .fb-gutter-shadow { display: none; }
}