/* Giao diện trình đọc FlipHTML5 kiểu EPUB / sách tương tác – lib/pdf/js/flipbook-ui.js */

/* ---------- chủ đề: biến màu (html[data-fbui-theme], flipbook-ui.js gắn ngay khi nạp, lưu localStorage "fbui-settings") ---------- */
:root {
    --fbui-bar: #29292b;
    --fbui-panel: #1f1f22;
    --fbui-text: #e4e4e4;
    --fbui-strong: #fff;
    --fbui-muted: #9a9aa0;
    --fbui-accent: #f47b20;
    --fbui-on-accent: #fff;
    --fbui-field: #2a2a2e;
    --fbui-border: #3a3a3f;
    --fbui-border-hover: #5a5a60;
    --fbui-hover: rgba(255, 255, 255, .1);
    --fbui-hover-soft: rgba(255, 255, 255, .06);
    --fbui-nav: rgba(44, 44, 46, .92);
    --fbui-nav-hover: rgba(72, 72, 76, .95);
    --fbui-nav-text: #fff;
    --fbui-stage: #1c1c1e;
}

/* Sáng – Google Play Books / Kindle */
html[data-fbui-theme="light"] {
    --fbui-bar: #fff;
    --fbui-panel: #fff;
    --fbui-text: #1f1f1f;
    --fbui-strong: #111;
    --fbui-muted: #6b6f76;
    --fbui-field: #f1f3f4;
    --fbui-border: #dadce0;
    --fbui-border-hover: #b0b4ba;
    --fbui-hover: rgba(0, 0, 0, .06);
    --fbui-hover-soft: rgba(0, 0, 0, .04);
    --fbui-nav: rgba(255, 255, 255, .95);
    --fbui-nav-hover: #f1f3f4;
    --fbui-nav-text: #333;
    --fbui-stage: #eef0f2;
}

/* Sepia – Kindle / Apple Books */
html[data-fbui-theme="sepia"] {
    --fbui-bar: #f4ecd8;
    --fbui-panel: #f8f1e3;
    --fbui-text: #5b4636;
    --fbui-strong: #3e2f22;
    --fbui-muted: #8a7560;
    --fbui-accent: #a0662b;
    --fbui-field: #efe4cc;
    --fbui-border: #dccfb2;
    --fbui-border-hover: #c4b08c;
    --fbui-hover: rgba(91, 70, 54, .1);
    --fbui-hover-soft: rgba(91, 70, 54, .06);
    --fbui-nav: rgba(244, 236, 216, .95);
    --fbui-nav-hover: #e9dcc0;
    --fbui-nav-text: #5b4636;
    --fbui-stage: #e6dcc4;
}

/* Xanh đêm – bảng màu Nord */
html[data-fbui-theme="nord"] {
    --fbui-bar: #2e3440;
    --fbui-panel: #2e3440;
    --fbui-text: #e5e9f0;
    --fbui-strong: #eceff4;
    --fbui-muted: #a3acbb;
    --fbui-accent: #88c0d0;
    --fbui-on-accent: #2e3440;
    --fbui-field: #3b4252;
    --fbui-border: #4c566a;
    --fbui-border-hover: #616e88;
    --fbui-hover: rgba(236, 239, 244, .1);
    --fbui-hover-soft: rgba(236, 239, 244, .06);
    --fbui-nav: rgba(46, 52, 64, .92);
    --fbui-nav-hover: #434c5e;
    --fbui-nav-text: #eceff4;
    --fbui-stage: #3b4252;
}

/* Nền quanh sách (#bacgradient = lớp màu / ảnh nền của thư viện): phủ màu chủ đề, "Theo sách" giữ nền gốc */
html:not([data-fbui-theme="book"]) .fbui #bacgradient::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--fbui-stage);
}

/* Tông trang: lọc ảnh trang trong khung sách */
html[data-fbui-tone="warm"] .fbui #bookContainer img {
    filter: sepia(.35) brightness(.96);
}

html[data-fbui-tone="night"] .fbui #bookContainer img {
    filter: invert(.9) hue-rotate(180deg);
}

/* ---------- cụm nút góc phải thanh trên ---------- */
.fbui-group {
    position: absolute;
    top: 0;
    right: 8px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
}

.fbui-btn,
.fbui-close,
.fbui-del {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--fbui-text);
    cursor: pointer;
}

.fbui-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

    .fbui-btn:hover {
        background: var(--fbui-hover);
    }

    .fbui-btn.active {
        color: var(--fbui-accent);
    }

        .fbui-btn.active svg {
            fill: currentColor;
        }

/* Nút quay lại + tên sách (main-native.js addBackBarStyle) theo màu chủ đề */
.fbui .app-back-btn,
.fbui .app-back-title {
    color: var(--fbui-text);
}

    .fbui .app-back-btn:hover {
        background: var(--fbui-hover);
    }

/* Nút thêm ghi chú cạnh trang của thư viện: đã có nút Ghi chú trên thanh */
.anno-noteAdd {
    display: none !important;
}

/* Thanh trên cùng màu chân trang; nền body cùng màu: #tmpContainer bám đáy, cao lẻ (vd 699.333px) -> khe trên đầu không lộ vạch trắng */
body.fbui,
.fbui .fbTopBar {
    background: var(--fbui-bar) !important;
}

/* Ô tìm kiếm của thư viện: chỉ hiện khi bấm icon */
.fbui .fbTopBar:not(.fbui-search-open) > .searchBar {
    display: none !important;
}

/* ---------- nút lật trang hai bên (như EPUB) ---------- */
.fbui .floatPageButton,
.fbui .flip_button_left,
.fbui .flip_button_right {
    display: none !important;
}

.fbui-nav {
    position: fixed;
    top: 50%;
    z-index: 1001;
    margin-top: -18px;
}

/* nút lật (fbui-nav) + nút về trang đầu / cuối của thư viện (fbui-edge, vị trí do thư viện đặt) */
.fbui-nav,
.fbui .fbui-edge {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--fbui-nav-text);
    background: var(--fbui-nav);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
}

    .fbui-nav:hover,
    .fbui .fbui-edge:hover {
        background: var(--fbui-nav-hover);
        box-shadow: 0 0 0 1px var(--fbui-hover), 0 2px 10px rgba(0, 0, 0, .45);
    }

    .fbui-nav svg,
    .fbui .fbui-edge svg {
        width: 18px;
        height: 18px;
    }

.fbui-left {
    left: 5px;
}

.fbui-right {
    right: 5px;
}

/* thư viện gán display:block khi hiện -> căn icon bằng padding */
.fbui .fbui-edge {
    box-sizing: border-box;
    padding: 9px;
}

    .fbui .fbui-edge svg {
        display: block;
    }

/* ---------- chân trang (như EPUB): thay nội dung thanh dưới của thư viện ---------- */
.fbui-footbar {
    background: var(--fbui-bar) !important;
}

    .fbui-footbar > :not(.fbui-foot) {
        display: none !important;
    }

.fbui-foot {
    box-sizing: border-box;
    height: 100%;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: var(--fbui-bar);
}

/* vạch tiến độ + chữ gọn ở giữa chân trang */
.fbui-progress,
.fbui-foot-text {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.fbui-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--fbui-hover);
    overflow: hidden;
    cursor: pointer;
}

.fbui-progress-fill {
    height: 100%;
    background: var(--fbui-accent);
    transition: width .2s;
}

.fbui-foot-text {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--fbui-strong);
}

/* số trang hiện tại = ô nhập "đi tới trang" (luôn có khung để biết nhập được) */
.fbui-goto {
    margin: 0 4px;
    padding: 2px 4px;
    border: 1px solid var(--fbui-strong);
    border-radius: 4px;
    font: inherit;
    text-align: center;
    color: inherit;
    background: var(--fbui-field);
    outline: none;
}

    .fbui-goto:hover,
    .fbui-goto:focus {
        border-color: var(--fbui-accent);
    }

.fbui-percent {
    margin-left: auto;
    color: var(--fbui-muted);
}

/* ---------- hộp thoại ---------- */
.fbui-mask {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 18vh;
    background: rgba(0, 0, 0, .45);
}

.fbui-modal,
.fbui-side,
.fbui-thumbs,
.fbui-pop,
.fbui-foot {
    font: 14px/1.45 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--fbui-text);
}

.fbui-modal,
.fbui-side,
.fbui-thumbs,
.fbui-pop {
    background: var(--fbui-panel);
}

.fbui-modal {
    width: min(360px, calc(100vw - 32px));
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}

.fbui-modal-head {
    display: flex;
    align-items: center;
    padding: 12px 8px 4px 16px;
}

.fbui-modal-title {
    flex: 1;
    font-weight: 600;
}

.fbui-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--fbui-muted);
}

    .fbui-close:hover {
        color: var(--fbui-strong);
        background: var(--fbui-hover);
    }

.fbui-modal-body {
    padding: 8px 16px 0;
}

.fbui-input {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--fbui-border);
    border-radius: 8px;
    font: inherit;
    color: var(--fbui-text);
    background: var(--fbui-field);
    outline: none;
}

    .fbui-input:focus {
        border-color: var(--fbui-accent);
    }

.fbui-textarea {
    height: 110px;
    resize: none;
}

.fbui-count {
    margin-top: 4px;
    font-size: 12px;
    text-align: right;
    color: var(--fbui-muted);
}

/* chọn trang (trang đôi) trong hộp dấu trang */
.fbui-pages {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.fbui-page {
    flex: 1;
}

    .fbui-page.active {
        border-color: var(--fbui-accent);
        color: var(--fbui-accent);
    }

.fbui-confirm {
    margin: 0;
    padding: 8px 16px 0;
}

.fbui-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 16px 16px;
}

.fbui-action {
    padding: 7px 18px;
    border: 1px solid var(--fbui-border);
    border-radius: 8px;
    font: inherit;
    color: var(--fbui-text);
    background: transparent;
    cursor: pointer;
}

    .fbui-action:hover {
        background: var(--fbui-hover-soft);
    }

    .fbui-action.primary {
        border-color: var(--fbui-accent);
        color: var(--fbui-on-accent);
        background: var(--fbui-accent);
    }

    .fbui-action.danger {
        margin-right: auto;
        border-color: transparent;
        color: #e5484d;
    }

.fbui-confirm ~ .fbui-modal-foot .danger {
    margin-right: 0;
    color: #fff;
    background: #e03131;
}

/* ---------- thanh bên ---------- */
.fbui-side-mask {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

.fbui-side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    width: min(300px, 85vw);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .3s;
}

.fbui-side-open .fbui-side {
    transform: none;
}

.fbui-side-open .fbui-side-mask {
    opacity: 1;
    visibility: visible;
}

.fbui-side-head {
    display: flex;
    align-items: center;
    padding: 8px 8px 0 12px;
    border-bottom: 1px solid var(--fbui-border);
}

.fbui-tab {
    padding: 10px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-weight: 600;
    color: var(--fbui-muted);
    background: transparent;
    cursor: pointer;
}

    .fbui-tab.active {
        border-bottom-color: var(--fbui-accent);
        color: var(--fbui-accent);
    }

.fbui-side-head .fbui-close {
    margin-left: auto;
}

.fbui-side-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.fbui-item {
    position: relative;
    padding: 10px 44px 10px 16px;
    border-left: 3px solid transparent;
    cursor: pointer;
}

    .fbui-item:hover {
        background: var(--fbui-hover-soft);
    }

    .fbui-item.current {
        border-left-color: var(--fbui-accent);
    }

.fbui-item-text {
    word-break: break-word;
}

    .fbui-item-text.clamp {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.fbui-item-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--fbui-muted);
}

.fbui-del {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    color: #e5484d;
    visibility: hidden;
}

    .fbui-del:hover {
        background: rgba(229, 72, 77, .15);
    }

.fbui-item:hover .fbui-del {
    visibility: visible;
}

@media (hover: none) {
    .fbui-del {
        visibility: visible;
    }
}

.fbui-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--fbui-muted);
}

/* ---------- khung ảnh trang (bên phải) ---------- */
.fbui-thumbs {
    position: fixed;
    right: 0;
    z-index: 100000;
    width: min(280px, 85vw);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--fbui-border);
    transform: translateX(100%);
    transition: transform .3s;
}

.fbui-thumbs-open .fbui-thumbs {
    transform: none;
}

.fbui-thumbs-title {
    padding: 10px 4px;
    font-weight: 600;
}

.fbui-thumbs-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 10px;
    align-content: start;
}

.fbui-thumbs-double > :first-child {
    grid-column: 2;
}

.fbui-thumb {
    position: relative;
    padding: 0;
    border: none;
    font: inherit;
    font-size: 12px;
    color: var(--fbui-muted);
    background: transparent;
    cursor: pointer;
}

.fbui-thumb-img {
    display: block;
    aspect-ratio: var(--fbui-ratio, 3 / 4);
    margin-bottom: 4px;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: var(--fbui-field);
}

    .fbui-thumb-img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.fbui-thumb:hover .fbui-thumb-img {
    border-color: var(--fbui-border-hover);
}

.fbui-thumb.current {
    color: var(--fbui-accent);
}

    .fbui-thumb.current .fbui-thumb-img {
        border-color: var(--fbui-accent);
    }

.fbui-thumb-mark {
    position: absolute;
    top: 2px;
    right: 6px;
    color: var(--fbui-accent);
}

    .fbui-thumb-mark svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
    }

/* ---------- bảng cài đặt (nút bánh răng) ---------- */
.fbui-pop {
    position: fixed;
    z-index: 100002;
    width: 300px;
    padding: 14px 16px 16px;
    border: 1px solid var(--fbui-border);
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

    /* điện thoại: tấm trượt từ dưới lên */
    .fbui-pop.fbui-sheet {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        border-radius: 12px 12px 0 0;
    }

.fbui-pop-label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fbui-muted);
}

    .fbui-pop-label ~ .fbui-pop-label {
        margin-top: 16px;
    }

.fbui-themes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 8px;
}

.fbui-theme {
    padding: 0;
    border: none;
    font: inherit;
    font-size: 12px;
    color: var(--fbui-text);
    background: transparent;
    cursor: pointer;
}

/* ô xem trước: thanh trên + nền + chấm màu nhấn (màu gán inline theo từng chủ đề) */
.fbui-swatch {
    position: relative;
    display: block;
    height: 46px;
    margin-bottom: 4px;
    border: 2px solid var(--fbui-border);
    border-radius: 8px;
    overflow: hidden;
}

    .fbui-swatch i {
        display: block;
        height: 12px;
    }

    .fbui-swatch b {
        position: absolute;
        right: 6px;
        bottom: 6px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

.fbui-theme:hover .fbui-swatch {
    border-color: var(--fbui-border-hover);
}

.fbui-theme.active {
    color: var(--fbui-accent);
}

    .fbui-theme.active .fbui-swatch {
        border-color: var(--fbui-accent);
    }

.fbui-tones {
    display: flex;
    gap: 8px;
}

    .fbui-tones .fbui-action {
        flex: 1;
        padding: 7px 0;
    }

        .fbui-tones .fbui-action.active {
            border-color: var(--fbui-accent);
            color: var(--fbui-accent);
        }