.hfb-page-info {
    padding-top: 5px;
}

/* 1. Wrapper */
.hfb-wrapper { width: 100%; margin: 20px auto; position: relative; max-width: 1000px; background: #f0f0f0; padding: 10px; box-sizing: border-box; border-radius: 8px; overflow: hidden; }

/* 2. Book */
.hfb-book { width: 100% !important; max-width: 100% !important; margin: 0 auto; touch-action: pan-y; -webkit-user-select: none; user-select: none; position: relative; z-index: 1; }
.stf__wrapper, .stf__block { width: 100% !important; }

/* 3. Page */
.hfb-page { background: #fff; border: 1px solid #ddd; overflow: hidden; }
.hfb-page-content { width: 100%; height: 100%; padding: 0 !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; background-position: center center !important; overflow-y: hidden; position: relative; z-index: 2; color: #333; }
.hfb-page-content > *:not(img):not(iframe) { margin: 20px; }
.hfb-page-footer { position: absolute; bottom: 5px; width: 100%; text-align: center; color: #888; font-size: 12px; pointer-events: none; }

/* 4. Toolbar */
.hfb-toolbar { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; background: #2c3e50; padding: 8px 10px; border-radius: 6px; color: #fff; position: relative; z-index: 100; }
.hfb-tool-group { display: flex; gap: 5px; }
.hfb-ctrl-btn { background: rgba(255,255,255,0.1); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto !important; }

/* ============================================================
   FIX LỖI PADDING-BOTTOM CỦA THƯ VIỆN (QUAN TRỌNG)
   ============================================================ */

/* Khi wrapper đang ở chế độ Fullscreen */
.hfb-wrapper:fullscreen .stf__wrapper,
.hfb-wrapper:-webkit-full-screen .stf__wrapper,
.hfb-wrapper:-moz-full-screen .stf__wrapper,
.hfb-wrapper:-ms-fullscreen .stf__wrapper {
    /* Ghi đè inline style padding-bottom: 75% của thư viện */
    padding-bottom: 0 !important;
    
    /* Ép chiều cao bung ra 100% để khớp với màn hình */
    height: 100% !important;
    width: 100% !important;
    
    /* Căn giữa sách */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Đảm bảo khung chứa bên ngoài cũng full */
.hfb-wrapper:fullscreen .hfb-book,
.hfb-wrapper:-webkit-full-screen .hfb-book {
    width: 100% !important;
    height: calc(100vh - 60px) !important; /* Trừ toolbar */
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* Reset Flex để stf__wrapper bung ra */
    display: block !important; 
}

/* Toolbar ở đáy */
.hfb-wrapper:fullscreen .hfb-toolbar,
.hfb-wrapper:-webkit-full-screen .hfb-toolbar {
    position: absolute;
    bottom: 0; left: 0; width: 99%;
    z-index: 2147483647;
    background: rgba(0,0,0,0.8);
}

/* ============================================================
   8. ẨN NÚT FULLSCREEN TRÊN MOBILE/TABLET
   ============================================================ */
@media (max-width: 1024px) {
    .hfb-btn-fullscreen {
        display: none !important;
    }
    
    /* Điều chỉnh lại thanh toolbar cho cân đối khi mất 1 nút */
    .hfb-tool-group.right {
        display: none;
    }
    
    .hfb-tool-group.center {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================
   NEW: MEDIA BAR (THANH AUDIO Ở GIỮA)
   ========================================= */
.hfb-media-bar {
    background: #f1f1f1;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* Nút Info trong thanh Media */
.hfb-media-btn {
    background: #fff;
    border: 1px solid #ccc;
    color: #333;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hfb-media-btn:hover { background: #e0e0e0; }

/* Audio Player HTML5 */
.hfb-main-audio {
    width: 100%;
    max-width: 400px;
    height: 36px;
}

/* Ẩn Media bar khi Fullscreen để tránh rối (Hoặc giữ lại tùy bạn) */
.hfb-wrapper:fullscreen .hfb-media-bar, 
.hfb-wrapper:-webkit-full-screen .hfb-media-bar {
    position: absolute;
    bottom: 60px; /* Nằm trên toolbar điều hướng */
    left: 0;
    width: 100%;
    background: rgba(255,255,255,0.9);
    z-index: 9999999;
}

/* =========================================
   TEXT HIGHLIGHT & WORD INTERACTION
   ========================================= */
/* Container câu văn */
.hfb-sentence {
    display: flex;       
    flex-wrap: wrap;     
    align-items: center; 
    gap: 5px;            
    margin: 15px 0;
    line-height: 1.6;
    width: 100%;
}

.hfb-sentence p { display: contents !important; margin: 0; padding: 0; }
.hfb-sentence br { display: none !important; }

/* Từ riêng lẻ */
.hfb-word {
    padding: 2px 4px;
    transition: 0.2s;
    cursor: pointer;
    border-radius: 4px;
    display: inline-block;
    white-space: pre; 
    color: #333;
    position: relative;
    z-index: 10000 !important; /* Để bấm được từ điển */
    pointer-events: auto !important;
}

.hfb-word:hover { background-color: rgba(0,0,0,0.05); }

/* Highlight styles */
.hfb-highlight { color: red !important; font-weight: bold; }
.hfb-highlight-word { background: #ffcc01 !important; color: #000; }