/* =========================================


   THX FILE MANAGER STYLES (FULL UPDATED)


   ========================================= */





/* --- 1. Layout & Toolbar --- */


.thx-fm-container * { box-sizing: border-box; }


.thx-fm-container * { box-sizing: border-box; }


.thx-fm-toolbar { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 12px 15px; border-radius: var(--thx-radius, 12px); margin-bottom: 25px; border: 1px solid var(--thx-border, #e5e7eb); box-shadow: 0 2px 5px rgba(0,0,0,0.02); flex-wrap: wrap; gap: 10px; width: 100%; box-sizing: border-box; min-width: 0; }


.thx-fm-breadcrumb { font-size: 15px; font-weight: 600; color: #3c434a; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow-x: auto; max-width: 100%; width: 100%; min-width: 0; scrollbar-width: none; }


.thx-fm-breadcrumb::-webkit-scrollbar { display: none; }


.thx-fm-breadcrumb a { text-decoration: none; color: var(--thx-primary, #2271b1); transition: 0.2s; }


.thx-fm-breadcrumb a:hover { color: var(--thx-orange, #f38122); }


.thx-fm-sep { font-size: 10px; color: #a7aaad; margin: 0 2px; width: auto; height: auto; }


.thx-fm-actions { display: flex; gap: 8px; align-items: center; }





/* --- 2. Buttons --- */


.thx-btn-compact { width: 36px; height: 36px; border: 1px solid var(--thx-border, #dcdcde); background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #50575e; transition: all 0.2s; flex-shrink: 0; }


.thx-btn-compact:hover { background: var(--thx-primary, #f0f6fc); color: #fff; border-color: var(--thx-primary, #2271b1); }


.thx-btn-compact:hover span { color: #fff; }


.thx-btn-compact.active { background: var(--thx-primary, #2271b1); color: #fff; border-color: var(--thx-primary, #2271b1); }





/* --- 3. Tooltips (Generic) --- */


.thx-tooltip-trigger { position: relative; display: inline-block; }


.thx-tooltip-text { 


    visibility: hidden; background-color: #222; color: #fff; text-align: left; 


    border-radius: 4px; padding: 8px 12px; position: absolute; z-index: 999999; 


    bottom: 130%; left: 50%; transform: translateX(-50%); opacity: 0; 


    transition: opacity 0.2s; font-size: 12px; font-weight: 500; white-space: pre-line; 


    pointer-events: none; box-shadow: 0 4px 15px rgba(0,0,0,0.3); width: max-content; 


    max-width: 250px; line-height: 1.5; 


}


.thx-tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #222 transparent transparent transparent; }


.thx-tooltip-trigger:hover .thx-tooltip-text { visibility: visible; opacity: 1; }





/* --- 4. View Dropdown (Nâng cao: Tooltip trên, Menu dưới, Cầu nối) --- */


.thx-view-dropdown { position: relative; display: inline-block; z-index: 100; }





/* Tooltip riêng cho nút View: Luôn nằm trên */


.thx-view-dropdown .thx-tooltip-text {


    bottom: 100% !important; top: auto !important; margin-bottom: 12px;


    z-index: 1001; pointer-events: none; /* Chuột xuyên qua */


}


.thx-view-dropdown .thx-tooltip-text::after {


    top: 100% !important; bottom: auto !important;


    border-color: #333 transparent transparent transparent !important;


}





/* Menu Dropdown: Luôn nằm dưới */


.thx-view-content { 


    display: none; position: absolute; top: 100%; right: 0; 


    background: #fff; border: 1px solid var(--thx-border, #ccd0d4); 


    border-radius: 8px; box-shadow: 0 5px 25px rgba(0,0,0,0.15); 


    z-index: 1000; min-width: 160px; margin-top: 12px; padding: 5px 0; 


}





/* CẦU NỐI VÔ HÌNH (Quan trọng): Lấp khoảng trống để giữ hover */


.thx-view-content::before {


    content: ""; position: absolute; top: -20px; left: 0; 


    width: 100%; height: 20px; background: transparent; z-index: 1;


}





/* Mũi tên menu */


.thx-view-content::after {


    content: ''; position: absolute; top: -7px; right: 15px; 


    width: 12px; height: 12px; background: #fff; transform: rotate(45deg); 


    border-left: 1px solid #ccd0d4; border-top: 1px solid #ccd0d4; z-index: -1;


}





.thx-view-dropdown:hover .thx-view-content { display: block; animation: thxFmFadeIn 0.2s; }


.thx-view-content a { display: flex; align-items: center; gap: 10px; padding: 12px 15px; text-decoration: none; color: #3c434a; font-size: 14px; transition: 0.1s; border-bottom: 1px solid #f9f9f9; }


.thx-view-content a:last-child { border-bottom: none; }


.thx-view-content a:hover { background: var(--thx-blue-pastel, #f0f6fc); color: var(--thx-primary, #2271b1); }


.thx-view-content a.active { background-color: #f0f9ff; color: var(--thx-primary, #2271b1); font-weight: 600; }


.thx-view-content .dashicons { font-size: 18px; width: 18px; height: 18px; color: #888; }


.thx-view-content a:hover .dashicons, .thx-view-content a.active .dashicons { color: var(--thx-primary, #2271b1); }





/* --- 5. Thumbnails --- */


.thx-thumb-wrapper { display: flex; align-items: center; justify-content: center; background: #f6f7f7; overflow: hidden; position: relative; }


.thx-thumb-img { width: 100%; height: 100%; object-fit: cover; }


.thx-thumb-icon-box { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }


.thx-thumb-icon-box .dashicons { font-size: 32px; width: 32px; height: 32px; }


.thx-bg-folder { background-color: #ffe0b2; color: #f57c00; } .thx-bg-pdf { background-color: #ffcdd2; color: #d32f2f; } .thx-bg-doc { background-color: #bbdefb; color: #1976d2; } .thx-bg-xls { background-color: #c8e6c9; color: #388e3c; } .thx-bg-img { background-color: #e1bee7; color: #7b1fa2; } .thx-bg-def { background-color: #cfd8dc; color: #455a64; }


.thx-fm-card .thx-thumb-wrapper { width: 100%; height: 100px; border-radius: 6px; margin-bottom: 10px; } .thx-fm-card .thx-thumb-icon-box .dashicons { font-size: 48px; width: 48px; height: 48px; }


.thx-fm-list .thx-thumb-wrapper { width: 40px; height: 40px; border-radius: 4px; margin-right: 15px; flex-shrink: 0; } .thx-fm-list .thx-thumb-icon-box .dashicons { font-size: 24px; width: 24px; height: 24px; }





/* --- 6. List View --- */


.thx-fm-list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--thx-border, #e5e7eb); border-radius: 8px; }


.thx-fm-list th { text-align: left; padding: 15px; background: #f8f9fa; border-bottom: 1px solid var(--thx-border, #e5e7eb); color: #646970; font-size: 13px; font-weight: 700; text-transform: uppercase; }


.thx-fm-list td { padding: 12px 15px; border-bottom: 1px solid #f0f0f1; vertical-align: middle; color: #3c434a; font-size: 14px; }


.thx-fm-list tr:last-child td { border-bottom: none; } .thx-fm-list tr:hover { background: #f6f7f7; }


.thx-fm-list td.fm-name-col { width: auto; overflow: visible !important; display: flex !important; align-items: center; gap: 15px; }


.thx-fm-list td.fm-name-col > a:first-child { flex-shrink: 0; }


.thx-fm-list td.fm-name-col > div { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } 


.thx-fm-list td.fm-name-col > div > div:first-child { display: flex; align-items: center; }


.thx-fm-list td.fm-name-col a { display: inline-block; vertical-align: middle; word-break: break-word; }


.thx-fm-list th.fm-action-col, .thx-fm-list td.fm-action-col { width: 1px; white-space: nowrap; text-align: right; padding-right: 15px; }


.thx-fm-list th:nth-child(2), .thx-fm-list td:nth-child(2), .thx-fm-list th:nth-child(3), .thx-fm-list td:nth-child(3) { width: 120px; white-space: nowrap; }


.thx-fm-list .thx-info-icon-wrapper { opacity: 0; transition: opacity 0.2s; margin-left: 8px; cursor: help; display: inline-flex; align-items: center; height: 20px; flex-shrink: 0; } .thx-fm-list tr:hover .thx-info-icon-wrapper { opacity: 1; } .thx-info-icon-wrapper .dashicons { color: #b0b0b0; font-size: 18px; width: 18px; height: 18px; line-height: 18px; } .thx-info-icon-wrapper:hover .dashicons { color: var(--thx-primary, #2271b1); }





/* --- 7. Grid View --- */


.thx-fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px; }


.thx-fm-card { border: 1px solid var(--thx-border, #e5e7eb); border-radius: 8px; padding: 20px; text-align: center; background: #fff; transition: 0.2s; position: relative; }


.thx-fm-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.06); border-color: var(--thx-primary, #2271b1); transform: translateY(-3px); }


.thx-fm-card .thx-fm-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #3c434a; }





/* --- 8. Modals --- */


.thx-fm-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 99999; align-items: center; justify-content: center; backdrop-filter: blur(3px); } .thx-fm-modal.active { display: flex; } .thx-fm-modal-box { background: #fff; padding: 30px; border-radius: 12px; width: 420px; max-width: 90%; box-shadow: 0 15px 35px rgba(0,0,0,0.15); animation: thxFmFadeIn 0.2s; position: relative; } .thx-fm-modal-box.large { width: 900px; max-width: 95%; max-height: 90vh; display: flex; flex-direction: column; overflow-y: auto; } @keyframes thxFmFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }


.thx-close-modal { position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 50%; background: #f0f0f1; color: #555; font-size: 20px; font-weight: bold; cursor: pointer; border: none; transition: 0.2s; } .thx-close-modal:hover { background: var(--thx-red, #d63638); color: #fff; transform: rotate(90deg); }


.thx-storage-widget { margin-top: 30px; background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #eee; } .thx-storage-bar-bg { width: 100%; height: 8px; background: #f0f0f1; border-radius: 4px; overflow: hidden; margin: 8px 0; } .thx-storage-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s; } .thx-storage-text { font-size: 13px; color: #666; display: flex; justify-content: space-between; }


.thx-progress-container { width: 100%; background-color: #f3f3f3; border-radius: 4px; overflow: hidden; margin-top: 15px; height: 10px; display: none; } .thx-progress-bar { width: 0%; height: 100%; background-color: var(--thx-primary, #2271b1); transition: width 0.3s; }


.thx-info-icon { position: relative; display: inline-block; color: #b0b0b0; cursor: help; margin-left: 5px; vertical-align: middle; } .thx-info-icon:hover { color: var(--thx-primary, #2271b1); }


.thx-doc-content h1, .thx-doc-content h2, .thx-doc-content h3 { color: #333; margin-top: 20px; margin-bottom: 10px; } .thx-doc-content p { margin-bottom: 15px; } .thx-doc-content ul, .thx-doc-content ol { margin-left: 20px; margin-bottom: 15px; }

html.thx-no-scroll, html.thx-no-scroll body, html.thx-no-scroll #wpwrap, html.thx-no-scroll #wpcontent, html.thx-no-scroll #page, html.thx-no-scroll .site, html.thx-no-scroll .site-content { overflow: hidden !important; }

.thx-fm-modal { overscroll-behavior: contain; }


.thx-lightbox { z-index: 100000; background: rgba(0,0,0,0.9); } .thx-lightbox-content { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; } .thx-lightbox-content img { max-width: 90%; max-height: 80vh; border-radius: 4px; box-shadow: 0 0 50px rgba(0,0,0,0.5); margin-bottom: 15px; display: none; } .thx-lightbox-content iframe { width: 90%; height: 80vh; background: #fff; border-radius: 4px; border: none; margin-bottom: 15px; display: none; } .thx-lightbox .thx-close-modal { top: 20px; right: 20px; background: rgba(255,255,255,0.2); color: #fff; } .thx-lightbox .thx-close-modal:hover { background: var(--thx-red); } .thx-lightbox-btn { background: var(--thx-primary); color: #fff; padding: 10px 25px; border-radius: 30px; text-decoration: none; font-weight: bold; display: inline-flex; align-items: center; } .thx-lightbox-btn:hover { background: #fff; color: var(--thx-primary); }





/* --- 9. Toolbar cho Grid View (Sort/Filter) --- */


.thx-fm-grid-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 10px 15px; background: #f9f9f9; border-radius: 12px; border: 1px solid #eee; }


.thx-sortable { cursor: pointer; user-select: none; position: relative; }


.thx-sortable:hover { background-color: #f0f0f1; }


.thx-sort-icon { display: inline-block; width: 10px; margin-left: 5px; opacity: 0.3; }


.thx-sort-icon::before { content: "\25BC"; font-size: 10px; }


.thx-sortable.active .thx-sort-icon { opacity: 1; }


.thx-sortable.active.asc .thx-sort-icon::before { content: "\25B2"; }


.thx-filter-wrapper { position: relative; }


.thx-filter-icon { margin-left: 5px; opacity: 0.4; cursor: pointer; }


.thx-filter-wrapper:hover .thx-filter-icon { opacity: 1; color: var(--thx-primary); }


.thx-filter-popup { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #ccd0d4; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 100; min-width: 150px; padding: 10px; border-radius: 4px; margin-top: 5px; text-align: left; }


.thx-filter-wrapper:hover .thx-filter-popup { display: block; }


.thx-filter-popup label { display: block; margin-bottom: 5px; font-weight: normal; font-size: 13px; cursor: pointer; }


.thx-filter-popup label:hover { color: var(--thx-primary); }





/* --- Hide Horizontal Borders (Viewer) --- */


.thx-dv-hide-h-borders .thx-dv-block {


    border-top: none; border-bottom: none; border-radius: 0; background: transparent; box-shadow: none;


}


.thx-dv-hide-h-borders .thx-dv-block:last-child { border-radius: 0; }


.thx-dv-hide-h-borders .thx-dv-block-header { border: none; background: transparent; padding-top: 20px; }





/* --- Hide Vertical Borders (Viewer) --- */


.thx-dv-hide-v-borders .thx-dv-cols { background: transparent; gap: 0; }


.thx-dv-hide-v-borders .thx-dv-col { background: transparent; }


.thx-dv-hide-v-borders .thx-dv-col-headers { background: transparent; gap: 0; }


.thx-dv-hide-v-borders .thx-dv-col-hdr { background: transparent; }





/* Both hidden */


.thx-dv-hide-h-borders.thx-dv-hide-v-borders .thx-dv-block { border: none; }


.thx-dv-hide-h-borders.thx-dv-hide-v-borders .thx-dv-col-headers { border: none; }





/* --- Accordion Styles --- */


.thx-accordion-header {


    cursor: pointer;


    transition: background 0.2s, color 0.2s;


    display: flex;


    align-items: center;


    gap: 8px;


}


.thx-accordion-header:hover { background: #eef1f5; color: var(--thx-primary, #2271b1); }


.thx-acc-icon { transition: transform 0.3s ease; font-size: 16px; width: 16px; height: 16px; line-height: 16px; }


.thx-accordion-header.active .thx-acc-icon { transform: rotate(90deg); color: var(--thx-primary, #2271b1); }


.thx-accordion-body { border-top: 1px dashed #e0e3e8; }





/* --- Viewer Dropdown --- */

.thx-dv-settings-dropdown { position: relative; display: inline-block; }

.thx-dv-settings-dropdown .thx-btn-compact { 

    display: flex; align-items: center; justify-content: center; gap: 6px; 

    height: 32px; padding: 0 12px; background: #f0f0f1; border: 1px solid #c3c4c7; 

    border-radius: 4px; cursor: pointer; color: #3c434a; font-size: 13px; font-weight: 500;

    white-space: nowrap !important; box-sizing: border-box; flex-shrink: 0; min-width: max-content;

}

.thx-dv-settings-dropdown .thx-btn-compact .dashicons {

    width: 20px; height: 20px; font-size: 16px; margin: 0; display: flex; align-items: center; justify-content: center; line-height: 1; color: inherit;

}

.thx-dv-settings-dropdown .thx-btn-compact:hover { background: #fff; border-color: var(--thx-primary, #2271b1); color: var(--thx-primary, #2271b1); }

.thx-dv-settings-menu {

    display: none; position: absolute; right: 0; top: 100%; min-width: 200px;

    background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);

    z-index: 1000; padding: 5px 0; margin-top: 5px; text-align: left;

}

.thx-dv-settings-dropdown:hover .thx-dv-settings-menu { display: block; }

.thx-dv-toggle-label { display: block; padding: 6px 15px; cursor: pointer; font-size: 13px; font-weight: normal; }



/* --- 10. ACTION DROPDOWN --- */

.thx-fm-actions-dropdown { position: relative; display: inline-block; cursor: pointer; text-align: center; }

.thx-fm-actions-menu {

    display: none; position: absolute; z-index: 1000;

    bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 8px;

    background: #fff; border: 1px solid #ccd0d4; border-radius: 8px;

    box-shadow: 0 5px 25px rgba(0,0,0,0.15); padding: 8px; min-width: 140px;


    flex-wrap: wrap; justify-content: center; gap: 4px; cursor: default;


}


.thx-fm-actions-menu::after {


    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);


    border-width: 6px; border-style: solid; border-color: #fff transparent transparent transparent;


}


.thx-fm-actions-menu::before {


    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);


    border-width: 7px; border-style: solid; border-color: #ccd0d4 transparent transparent transparent;


    margin-top: 1px;


}


.thx-fm-actions-dropdown.show .thx-fm-actions-menu { display: flex; animation: thxActionDropAnim 0.15s ease-out; }





@keyframes thxActionDropAnim {


    from { opacity: 0; }


    to { opacity: 1; }


}





/* Desktop List View specific override */


.thx-fm-list td.fm-action-col .thx-fm-actions-menu {


    left: auto; right: 0; transform: none; justify-content: flex-end;


}


.thx-fm-list td.fm-action-col .thx-fm-actions-menu::after,


.thx-fm-list td.fm-action-col .thx-fm-actions-menu::before {


    left: auto; right: 10px; transform: none;


}





/* --- 11. CREATE DROPDOWN --- */


.thx-fm-create-menu {


    display: none; position: absolute; z-index: 1000;


    top: 100%; left: 0; margin-top: 8px;


    background: #fff; border: 1px solid #ccd0d4; border-radius: 8px;


    box-shadow: 0 5px 25px rgba(0,0,0,0.15); padding: 8px 0; min-width: 220px;


    flex-direction: column; text-align: left;


}


.thx-fm-create-menu::before {


    content: ''; position: absolute; bottom: 100%; left: 20px;


    border-width: 7px; border-style: solid; border-color: transparent transparent #ccd0d4 transparent;


    margin-bottom: 1px;


}


.thx-fm-create-menu::after {


    content: ''; position: absolute; bottom: 100%; left: 21px; 


    border-width: 6px; border-style: solid; border-color: transparent transparent #fff transparent;


}


.thx-fm-create-dropdown.show .thx-fm-create-menu { display: flex; animation: thxActionDropAnim 0.15s ease-out; }


.thx-fm-create-menu a {


    display: flex; align-items: center; gap: 8px; padding: 8px 15px;


    color: #3c434a; text-decoration: none; font-size: 14px;


}


.thx-fm-create-menu a:hover { background: #f0f0f1; color: var(--thx-primary, #2271b1); }


.thx-fm-create-menu a .dashicons { font-size: 18px; width: 18px; height: 18px; line-height: 18px; color: #8c8f94; }


.thx-fm-create-menu a:hover .dashicons { color: var(--thx-primary, #2271b1); }





/* --- 12. RESPONSIVE CSS (MOBILE: Force Grid) --- */


@media (max-width: 768px) {


    /* Layout chung */


    .thx-fm-container { overflow-x: clip; max-width: 100%; }


    .thx-tooltip-text { display: none !important; } /* Tooltip vô dụng trên mobile và gây tràn màn hình ngang */


    


    .thx-fm-toolbar { flex-direction: column; align-items: stretch; gap: 15px; }


    .thx-fm-breadcrumb { margin-bottom: 10px; padding-bottom: 5px; }


    .thx-fm-actions { justify-content: space-between; width: 100%; }


    


    /* Ẩn nút chuyển View */


    .thx-fm-view-switcher, .thx-view-dropdown { display: none !important; }





    /* RESET BẢNG: Biến Table thành Grid */


    .thx-fm-list, .thx-fm-list tbody, .thx-fm-list tr.thx-fm-row { display: block !important; width: 100% !important; }


    .thx-fm-list thead { display: none !important; }





    /* Biến TBODY thành Grid 2 cột */


    .thx-fm-list tbody { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; }





    /* Biến mỗi dòng (TR) thành Card */


    .thx-fm-list tr.thx-fm-row {


        background: #fff; border: 1px solid #eee; border-radius: 12px;


        padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);


        display: flex !important; flex-direction: column !important;


        align-items: center !important; text-align: center !important;


        height: 100%; box-sizing: border-box !important;


    }





    /* [QUAN TRỌNG] Ẩn tất cả cột, TRỪ cột tên và cột hành động */


    .thx-fm-list td:not(.fm-name-col):not(.fm-action-col) { display: none !important; }





    /* Cột Tên & Icon */


    .thx-fm-list td.fm-name-col {


        display: flex !important; flex-direction: column !important;


        align-items: center !important; width: 100% !important; min-width: 0 !important;


        border: none !important; padding: 0 !important;


    }


    .thx-fm-list .thx-thumb-wrapper { width: 50px !important; height: 50px !important; margin: 0 0 10px 0 !important; }


    .thx-fm-list td.fm-name-col a { font-weight: 600; font-size: 13px; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; overflow-wrap: anywhere; }


    .thx-fm-list td.fm-name-col > div { width: 100%; text-align: center; }





    /* [QUAN TRỌNG] Style hiển thị lại Cột Hành Động */


    .thx-fm-list td.fm-action-col {


        display: flex !important;


        width: 100% !important;


        justify-content: center !important;


        flex-wrap: wrap !important;


        gap: 5px !important;


        margin-top: 15px !important;


        padding-top: 10px !important;


        text-align: center !important;


    }


    


    /* Quay lại hiển thị Center trên mobile thay vì Right-align ở Desktop */


    .thx-fm-list td.fm-action-col .thx-fm-actions-menu {


        left: 50%; right: auto; transform: translateX(-50%); justify-content: center;


    }


    .thx-fm-list td.fm-action-col .thx-fm-actions-menu::after,


    .thx-fm-list td.fm-action-col .thx-fm-actions-menu::before {


        left: 50%; right: auto; transform: translateX(-50%);


    }





    /* Modal Mobile */


    .thx-fm-modal-box { width: 95%; max-width: 95%; max-height: 90vh; overflow-y: auto; padding: 20px; } 


    .thx-fm-modal-box.large { height: 90vh; } 


    .thx-lightbox-content iframe, .thx-lightbox-content img { width: 95%; height: 60vh; }
    .thx-doc-content { padding: 10px !important; }


}





/* --- 13. FIX DOC VIEWER & SCROLLBAR --- */


.thx-doc-content {


    flex: 1; width: 100%; box-sizing: border-box !important; border: 1px solid #ddd; background: #fff; padding: 30px; overflow-y: auto; overflow-x: hidden; border-radius: 4px; font-family: 'Georgia', serif; font-size: 18px; line-height: 1.8; color: #333; min-height: 400px;


}


.thx-doc-content img { max-width: 100% !important; height: auto !important; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); margin: 15px 0; }


.thx-fm-modal-box.large { width: 1200px !important; max-width: 95% !important; height: 85vh !important; display: flex !important; flex-direction: column !important; }





/* =========================================================================


   14. BLOCK EDITOR — Table Layout


   ========================================================================= */


.thx-be-modal-box { width: 95% !important; max-width: 1200px !important; }


.thx-be-container { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 5px 0; }





/* --- Page Tabs --- */


.thx-be-page-tabs {


    display: flex; gap: 4px; padding: 0 10px; margin-bottom: 0; flex-wrap: wrap; align-items: flex-end; border-bottom: 1px solid #c3c4c7;


}


.thx-be-page-tab {


    display: flex; align-items: center; gap: 4px;


    background: #f0f0f1; border: 1px solid #c3c4c7; border-radius: 4px 4px 0 0;


    padding: 6px 12px; cursor: pointer; color: #3c434a; font-weight: 500; font-size: 13px;


    border-bottom: none;


}


.thx-be-page-tab.active {


    background: #fff; border-color: #2271b1; color: #2271b1; border-bottom: 2px solid #fff;


    margin-bottom: -1px; z-index: 1; position: relative; font-weight: 600;


}


.thx-be-page-tab-name { flex: 1; min-width: 60px; padding: 2px; }


.thx-be-page-tab-name:hover { text-decoration: underline; }





/* --- Column Header Row (nhãn cột chung) --- */


.thx-be-col-header-row {


    display: flex; gap: 1px; background: #d8dee5; border-radius: 10px 10px 0 0;


    border: 1px solid #e0e3e8; border-bottom: none;


    overflow: hidden; margin-bottom: 0; position: relative; z-index: 1;


    min-height: auto;


}


.thx-be-header-corner {


    flex-direction: column; gap: 4px; justify-content: center;


}


.thx-be-col-count { font-size: 11px; color: #888; font-weight: 600; }


.thx-be-col-actions { display: flex; gap: 4px; }


.thx-be-row-label-cell {


    flex-shrink: 0; padding: 8px 12px;


    background: linear-gradient(135deg, #e8ecf0, #dfe3e8);


    display: flex; align-items: center; gap: 8px;


}


.thx-be-col-header-cell {


    flex: 1; min-width: 150px; padding: 8px 10px;


    background: linear-gradient(135deg, #eef1f5, #e5e9ed);


}


.thx-be-col-def-label {


    width: 100%; border: none; background: transparent; font-size: 12px;


    font-weight: 600; color: #555; padding: 4px 6px; border-radius: 4px;


    outline: none; transition: background 0.2s; text-transform: uppercase;


    letter-spacing: 0.3px;


}


.thx-be-col-def-label:focus { background: #fff; box-shadow: 0 0 0 2px rgba(34,113,177,0.2); }


.thx-be-col-def-label::placeholder { color: #b0b5bd; font-weight: 400; text-transform: none; }





/* --- Block Row --- */


.thx-be-block {


    border: 1px solid #e0e3e8; border-radius: 0; margin-bottom: 0;


    border-top: none; background: #fafbfc;


}


.thx-be-block:last-of-type { border-radius: 0 0 10px 10px; }


.thx-be-block:hover { border-color: #b0c4de; }





/* --- Hide Horizontal Borders (Editor) --- */


.thx-be-hide-h-borders .thx-be-block {


    border-top: none; border-bottom: none; border-radius: 0; background: transparent;


}


.thx-be-hide-h-borders .thx-be-block:last-of-type { border-radius: 0; }


.thx-be-hide-h-borders .thx-be-row-header { border-bottom: none; }


.thx-be-hide-h-borders .thx-be-row-label-cell { background: transparent; }





/* --- Hide Vertical Borders (Editor) --- */


.thx-be-hide-v-borders .thx-be-cols { background: transparent; gap: 0; }


.thx-be-hide-v-borders .thx-be-col { border-right: none; }


.thx-be-hide-v-borders .thx-be-row-label-cell { border-right: none; }


.thx-be-hide-v-borders .thx-be-col-header-cell { border-right: none; }





/* Both hidden */


.thx-be-hide-h-borders.thx-be-hide-v-borders .thx-be-block { border: none; }


.thx-be-hide-h-borders.thx-be-hide-v-borders .thx-be-col-header-row { border: none; background: transparent; }





/* --- Row Header (nhãn hàng + nút) --- */


.thx-be-row-header {


    display: flex; border-bottom: 1px solid #eee;


}


.thx-be-row-header .thx-be-row-label-cell {


    background: linear-gradient(135deg, #f5f7fa, #eef1f5);


    border-right: 1px solid #e0e3e8; flex-wrap: wrap;


}


.thx-be-block-num {


    background: var(--thx-primary, #2271b1); color: #fff; font-size: 11px; font-weight: 700;


    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;


    justify-content: center; flex-shrink: 0;


}


.thx-be-block-label {


    flex: 1; border: none; background: transparent; font-size: 13px; font-weight: 500;


    color: #3c434a; padding: 2px 6px; border-radius: 4px; outline: none;


    min-width: 60px;


}


.thx-be-block-label:focus { background: #fff; box-shadow: 0 0 0 2px rgba(34,113,177,0.2); }


.thx-be-block-label::placeholder { color: #bbb; font-weight: 400; }


.thx-be-block-actions { display: flex; gap: 3px; flex-shrink: 0; }





/* --- Shared Buttons --- */


.thx-be-btn-sm {


    border: 1px solid #d0d5dd; background: #fff; border-radius: 6px;


    width: 26px; height: 26px; display: inline-flex; align-items: center;


    justify-content: center; cursor: pointer; color: #666; transition: all 0.15s;


    padding: 0; font-size: 12px;


}


.thx-be-btn-sm:hover { background: #f0f6fc; border-color: var(--thx-primary, #2271b1); color: var(--thx-primary, #2271b1); }


.thx-be-btn-sm .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 14px; }


.thx-be-btn-add { width: auto; padding: 0 8px; gap: 2px; font-weight: 500; font-size: 11px; color: var(--thx-primary, #2271b1); border-color: var(--thx-primary, #2271b1); }


.thx-be-btn-add:hover { background: var(--thx-primary, #2271b1); color: #fff; }


.thx-be-btn-del:hover { background: #fef2f2; border-color: #d63638; color: #d63638; }





/* --- Columns (cells) --- */


.thx-be-cols {


    display: flex; gap: 1px; background: #e0e3e8;


}


.thx-be-col {


    flex: 1; min-width: 150px; background: #fff; display: flex; flex-direction: column;


}





/* --- Contenteditable Editor --- */


.thx-be-editor {


    flex: 1; min-height: 100px; padding: 12px 14px; outline: none;


    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px;


    line-height: 1.7; color: #333; border: 2px solid transparent;


    transition: border-color 0.2s; overflow-y: auto;


}


.thx-be-editor:focus { border-color: rgba(34, 113, 177, 0.3); background: #fefeff; }


.thx-be-editor:empty::before {


    content: attr(data-placeholder); color: #ccc; font-style: italic; pointer-events: none;


}





/* --- Ghi chú (Annotations) --- */


.thx-annotation {


    border-bottom: 1.5px dashed var(--thx-primary, #2271b1);


    cursor: help;


    color: inherit;


    text-decoration: none;


}


/* JS-rendered tooltip (appended to body, escapes overflow) */


.thx-annotation-tooltip {


    position: fixed; z-index: 999999; pointer-events: none;


    background: #1e293b; color: #fff; padding: 8px 14px; border-radius: 6px;


    font-size: 13px; line-height: 1.5; font-weight: normal; text-align: left;


    max-width: 320px; min-width: 100px; white-space: pre-wrap;


    word-wrap: break-word; overflow-wrap: break-word;


    box-shadow: 0 4px 15px rgba(0,0,0,0.25);


    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;


}


.thx-annotation-tooltip::after {


    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);


    border: 5px solid transparent; border-top-color: #1e293b;


}


.thx-be-editor img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0; }


.thx-be-editor h1, .thx-be-editor h2, .thx-be-editor h3, .thx-be-editor h4 { margin: 12px 0 8px; color: #1d2327; }


.thx-be-editor ul, .thx-be-editor ol { padding-left: 24px; margin: 8px 0; }


.thx-be-editor hr { border: none; border-top: 2px solid #eee; margin: 16px 0; }





/* --- Annotation Modal (Add / Edit) --- */


.thx-annotation-overlay {


    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;


    background: rgba(0,0,0,0.4); z-index: 999999;


    display: flex; align-items: center; justify-content: center;


}


.thx-annotation-modal {


    width: 380px; max-width: 90%; background: #fff;


    border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);


    display: flex; flex-direction: column; overflow: hidden;


    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;


    animation: thx-modal-fadein 0.2s ease-out;


}


@keyframes thx-modal-fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }





.thx-annot-header {


    padding: 12px 16px; font-size: 14px; font-weight: 600; color: #1d2327;


    background: #f6f7f7; border-bottom: 1px solid #e0e3e8;


}


.thx-annot-body { padding: 16px; }


.thx-annot-input {


    width: 100%; border: 1px solid #c3c4c7; border-radius: 6px; padding: 10px;


    font-size: 14px; line-height: 1.5; outline: none; box-sizing: border-box; resize: vertical;


    font-family: inherit;


}


.thx-annot-input:focus { border-color: var(--thx-primary, #2271b1); box-shadow: 0 0 0 1px var(--thx-primary, #2271b1); }


.thx-annot-actions {


    display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #f0f0f1;


    background: #fff; justify-content: flex-end;


}


.thx-annot-btn {


    border: 1px solid #c3c4c7; background: #fff; border-radius: 6px;


    padding: 6px 14px; font-size: 13px; font-weight: 500; cursor: pointer; color: #2c3338;


}


.thx-annot-btn:hover { background: #f6f7f7; border-color: #8c8f94; }


.thx-annot-save { background: var(--thx-primary, #2271b1); color: #fff; border-color: var(--thx-primary, #2271b1); }


.thx-annot-save:hover { background: #135e96; color: #fff; border-color: #135e96; }


.thx-annot-remove { border-color: transparent; color: #d63638; margin-right: auto; }


.thx-annot-remove:hover { background: #fef2f2; border-color: #d63638; }


.thx-annot-cancel { }


.thx-be-editor .thx-annotation { cursor: pointer; }





/* --- Add Block Button --- */


.thx-be-add-block-wrap { text-align: center; padding: 12px 0; }


.thx-be-add-block-btn {


    background: none; border: 2px dashed #d0d5dd; border-radius: 10px;


    padding: 10px 20px; color: #888; font-size: 13px; font-weight: 500;


    cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px;


}


.thx-be-add-block-btn:hover { border-color: var(--thx-primary, #2271b1); color: var(--thx-primary, #2271b1); background: #f0f6fc; }


.thx-be-add-block-btn .dashicons { font-size: 16px; width: 16px; height: 16px; }





/* =========================================================================


   15. RICH-TEXT TOOLBAR (Sticky trong container)


   ========================================================================= */


.thx-rte-toolbar {


    position: sticky; top: 0; z-index: 100;


    display: flex; flex-wrap: wrap; gap: 2px;


    background: #fff; border-color: #ccd0d4; border-style: solid; border-radius: 8px;


    box-shadow: 0 2px 12px rgba(0,0,0,0.1);


    


    /* Trạng thái ẩn: Thu gọn hoàn toàn không gian */


    max-height: 0; opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0;


    overflow: hidden; pointer-events: none;


    transition: all 0.25s ease-in-out;


}


.thx-rte-toolbar.thx-rte-active {


    /* Trạng thái hiện */


    max-height: 100px; opacity: 1; margin-bottom: 8px; padding-top: 6px; padding-bottom: 6px; border-width: 1px;


    pointer-events: auto; padding-left: 8px; padding-right: 8px;


}


.thx-rte-toolbar-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }


.thx-rte-toolbar button {


    border: none; background: #f8f9fa; border-radius: 4px; width: 30px;


    height: 30px; cursor: pointer; display: inline-flex; align-items: center;


    justify-content: center; color: #444; transition: all 0.1s; font-size: 13px; padding: 0;


}


.thx-rte-toolbar button:hover { background: var(--thx-primary, #2271b1); color: #fff; }


.thx-rte-toolbar button .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }


.thx-rte-sep { width: 1px; height: 20px; background: #e0e3e8; margin: 0 4px; flex-shrink: 0; }


.thx-rte-select {


    border: 1px solid #d0d5dd; border-radius: 4px; padding: 2px 4px;


    font-size: 12px; height: 30px; background: #f8f9fa; cursor: pointer; color: #444; outline: none;


}


.thx-rte-select:focus { border-color: var(--thx-primary, #2271b1); }


.thx-rte-color-wrap {


    display: inline-flex; align-items: center; justify-content: center;


    width: 30px; height: 30px; background: #f8f9fa; border-radius: 4px;


    cursor: pointer; position: relative; transition: background 0.1s;


}


.thx-rte-color-wrap:hover { background: #e8edf2; }


.thx-rte-color-wrap .dashicons { font-size: 16px; width: 16px; height: 16px; color: #444; pointer-events: none; }


.thx-rte-color-input {


    position: absolute; top: 0; left: 0; width: 100%; height: 100%;


    opacity: 0; cursor: pointer; border: none; padding: 0;


}





/* =========================================================================

   16. DOC VIEWER — Table View with Toggle

   ========================================================================= */

.thx-dv-toggle-panel {

    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;

    padding: 10px 16px; background: linear-gradient(135deg, #f0f6fc, #eef2f7);

    border: 1px solid #d0dce8; border-radius: 8px; margin-bottom: 16px; font-size: 13px;

}

.thx-dv-toggle-panel strong { display: flex; align-items: center; gap: 4px; color: #3c434a; }

.thx-dv-toggle-panel .dashicons { font-size: 16px; width: 16px; height: 16px; }

.thx-dv-toggle-label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: #555; }

.thx-dv-toggle-label:hover { color: var(--thx-primary, #2271b1); }

.thx-dv-toggle-label input[type="checkbox"] { accent-color: var(--thx-primary, #2271b1); cursor: pointer; }



/* --- Viewer Column Headers --- */

.thx-dv-col-headers {

    display: flex; gap: 1px; background: #e0e3e8; border-radius: 0;

    overflow: hidden; margin-bottom: 0;

}

.thx-dv-col-hdr {

    flex: 1; min-width: 120px; padding: 12px 14px; min-height: 20px;

    background: #f8fafc;

    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Noto Sans', Arial, sans-serif;

    font-size: 13px; font-weight: 600; color: #64748b;

    text-transform: uppercase; letter-spacing: 0.5px;

}



.thx-dv-block {

    border: none; margin-bottom: 0;

    overflow: hidden; background: transparent;

}

.thx-dv-block:last-child { border-radius: 0; }

.thx-dv-block-header {

    padding: 12px 14px; background: #fff;

    font-weight: 600; font-size: 14px; color: var(--thx-primary, #2271b1); border-bottom: 1px solid #e2e8f0;

}

.thx-dv-cols { display: flex; gap: 1px; background: #e0e3e8; }

.thx-dv-col { flex: 1; min-width: 120px; background: #fff; transition: opacity 0.3s; }

.thx-dv-toggle-label:hover { background: #f0f6fc; }

.thx-dv-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 15px; cursor: pointer; color: #3c434a; font-size: 14px; transition: background 0.2s; }

.thx-dv-menu-item:hover { background: #f0f6fc; color: var(--thx-primary, #2271b1); }

.thx-dv-menu-item input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: var(--thx-primary, #2271b1); }


.thx-dv-menu-heading { padding: 5px 15px; font-weight: 600; font-size: 12px; color: #666; text-transform: uppercase; border-bottom: 1px solid #f0f0f1; margin-bottom: 5px; }





/* --- Viewer Columns --- */


.thx-dv-col-content {


    padding: 14px 25px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px; line-height: 1.7; color: #333;


}


.thx-dv-zoom-0 .thx-dv-col-content { font-size: 17px; }


.thx-dv-zoom-1 .thx-dv-col-content { font-size: 19px; }


.thx-dv-zoom-2 .thx-dv-col-content { font-size: 21px; }


.thx-dv-zoom-3 .thx-dv-col-content { font-size: 23px; }





.thx-dv-col-content img { max-width: 100%; height: auto; border-radius: 4px; }





/* =========================================================================


   17. PUBLIC SHARE — Responsive wrappers


   ========================================================================= */


.thx-fm-public-share-wrap { padding: 40px; }


.thx-fm-public-share-doc-wrap { padding: 25px; }





/* =========================================================================


   18. BLOCK EDITOR — Responsive


   ========================================================================= */


@media (max-width: 768px) {

    .thx-fm-modal-box.large { width: 100% !important; max-width: 100% !important; height: 100vh !important; border-radius: 0 !important; }


    .thx-be-col-header-row { flex-wrap: wrap; }


    .thx-be-col-header-cell { min-width: 100%; }


    .thx-be-row-label-cell { width: 100%; min-width: 100%; }


    .thx-be-cols { flex-direction: column; }


    .thx-be-col { min-width: 100%; }


    .thx-be-row-header .thx-be-row-label-cell { flex-wrap: wrap; }


    .thx-be-block-actions { width: 100%; justify-content: flex-end; margin-top: 4px; }


    /* Viewer: ẩn column header trên mobile vì đã đan xen */

    .thx-dv-col-headers { display: none; }

    .thx-dv-cols { flex-direction: column; }

    .thx-dv-col { min-width: 100%; }

    .thx-be-modal-box { width: 100% !important; max-width: 100% !important; height: 95vh !important; border-radius: 0 !important; }

    

    /* Public Share Wrappers on Mobile: Giảm tối đa padding để hiển thị chữ */

    .thx-fm-public-share-wrap { padding: 10px !important; margin: 0 auto !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; }

    .thx-fm-public-share-doc-wrap { padding: 0 !important; margin-top: 0 !important; }

    

    /* Giảm lề bên trong của các cột/dòng trên mobile */

    .thx-dv-col-content { padding: 14px 10px !important; }

    .thx-dv-interleaved { padding: 0 5px !important; }



    /* Nút Tuỳ chỉnh: chỉ icon con mắt trên mobile */

    .thx-dv-btn-label { display: none; }

}



/* --- Interleave Mobile Layout --- */

.thx-dv-interleaved { padding: 0 14px; }

/* Vẫn giữ Interleave padding 14px cho Desktop nếu cần, nhưng Media query ở trên đã overwrite cho mobile */




.thx-dv-interleave-pair {


    margin-bottom: 12px; padding-bottom: 12px;


    border-bottom: 1px dashed #e8ecf0;


}


.thx-dv-interleave-pair:last-child { border-bottom: none; margin-bottom: 0; }


.thx-dv-interleave-item { line-height: 1.7; font-size: 15px; }


.thx-dv-interleave-item[data-view-col="0"] {


    border-left: 3px solid var(--thx-primary, #2271b1); padding-left: 10px; margin-bottom: 4px;


}


.thx-dv-interleave-item[data-view-col="1"] {


    border-left: 3px solid #e67e22; padding-left: 10px; margin-bottom: 4px; color: #555;


}


.thx-dv-interleave-item[data-view-col="2"] {


    border-left: 3px solid #27ae60; padding-left: 10px; margin-bottom: 4px; color: #555;


}


.thx-dv-interleave-item p, .thx-dv-interleave-item div { margin: 0; }


.thx-dv-zoom-0 .thx-dv-interleave-item { font-size: 17px; }


.thx-dv-zoom-1 .thx-dv-interleave-item { font-size: 19px; }


.thx-dv-zoom-2 .thx-dv-interleave-item { font-size: 21px; }


.thx-dv-zoom-3 .thx-dv-interleave-item { font-size: 23px; }





/* Single column visible mode overrides */


.thx-single-col-visible .thx-dv-interleave-pair { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }


.thx-single-col-visible .thx-dv-interleave-item { border-left: none !important; padding-left: 0 !important; color: inherit !important; margin-bottom: 12px; }


.thx-single-col-visible .thx-dv-block { border: none !important; box-shadow: none !important; }


.thx-single-col-visible .thx-dv-block-header { border: none !important; background: transparent !important; padding-top: 25px; padding-left: 0; padding-right: 0; }





/* =========================================================================


   18. BLOCK EDITOR — Footer (Save / Export / Import)


   ========================================================================= */


.thx-be-footer {


    display: flex; align-items: center; justify-content: space-between;


    margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; flex-shrink: 0;


}


.thx-be-footer-left { display: flex; gap: 8px; }


.thx-be-io-btn {


    display: inline-flex !important; align-items: center; gap: 4px;


    font-size: 13px !important; padding: 4px 12px !important;


    border-radius: 6px !important; transition: all 0.15s;


}


.thx-be-io-btn .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }


.thx-be-io-btn:hover { border-color: var(--thx-primary, #2271b1) !important; color: var(--thx-primary, #2271b1) !important; }


@media (max-width: 768px) {


    .thx-be-footer { flex-direction: column; gap: 10px; }


    .thx-be-footer-left { width: 100%; justify-content: center; }


}





/* Spin animation for loading */


@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }





/* Document Gallery Slideshow */

.thx-doc-gallery .thx-gal-btn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: rgba(0,0,0,0.5);

    color: white;

    border: none;

    padding: 8px 12px;

    cursor: pointer;

    border-radius: 4px;

    z-index: 10;

    font-size: 16px;

    line-height: 1;

}

.thx-doc-gallery .thx-gal-btn:hover { background: rgba(0,0,0,0.8); }

.thx-doc-gallery .thx-gal-btn.prev { left: 10px; }

.thx-doc-gallery .thx-gal-btn.next { right: 10px; }

.thx-doc-gallery .thx-gal-dots {

    text-align: center;

    position: absolute;

    bottom: 10px;

    width: 100%;

    z-index: 10;

}

.thx-doc-gallery .thx-gal-dot {

    display: inline-block;

    width: 8px;

    height: 8px;

    margin: 0 4px;

    background: rgba(255,255,255,0.5);

    border-radius: 50%;

    cursor: pointer;

    box-shadow: 0 1px 2px rgba(0,0,0,0.3);

}

.thx-doc-gallery .thx-gal-dot.active {

    background: rgba(255,255,255,1);

}





/* Force all doc gallery images to thumbnails */

.thx-doc-gallery img {

    width: auto !important;

    height: 120px !important;

    max-width: 100% !important;

    object-fit: contain !important;

    cursor: pointer !important;

    border-radius: 4px;

    border: 1px solid #ddd;

    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

    transition: transform 0.2s;

    margin-right: 10px;

    margin-bottom: 10px;

}

.thx-doc-gallery img:hover {

    transform: scale(1.05);

}




/* =========================================================================

   17. PRINT STYLES (Xu?t PDF)

   ========================================================================= */

@media print {

    body.thx-pdf-printing * { visibility: hidden; }

    body.thx-pdf-printing #thx-pdf-print-container, 

    body.thx-pdf-printing #thx-pdf-print-container * { visibility: visible; }

    

    body.thx-pdf-printing #thx-pdf-print-container {

        position: absolute; left: 0; top: 0; width: 100%;

    }

    

    .thx-pdf-page { page-break-after: always; margin-bottom: 30px; }

    .thx-pdf-page:last-child { page-break-after: avoid; }

    

    .thx-pdf-page-title { font-size: 22px; font-weight: bold; margin-bottom: 20px; color: #000; text-align: center; }

    .thx-pdf-block { margin-bottom: 25px; page-break-inside: avoid; }

    .thx-pdf-block-title { font-size: 16px; font-weight: bold; margin-bottom: 10px; color: #333; border-bottom: 2px solid #ccc; padding-bottom: 4px; }

    

    .thx-pdf-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }

    .thx-pdf-table th, .thx-pdf-table td { border: 1px solid #ccc; padding: 10px; text-align: left; vertical-align: top; }

    .thx-pdf-table th { background-color: #f5f5f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; font-weight: bold; }

    

    .thx-pdf-fn-marker { color: #d32f2f; font-weight: bold; margin-left: 2px; }

    

    .thx-pdf-footnotes { margin-top: 30px; padding-top: 15px; page-break-inside: avoid; }

    .thx-pdf-fn-line { border-top: 1px solid #000; width: 30%; margin-bottom: 10px; }

    .thx-pdf-fn-item { font-size: 12px; color: #333; margin-bottom: 5px; line-height: 1.4; white-space: pre-wrap; }

}



/* =========================================================================

   19. SIDEBAR - NOTES & DISCUSSIONS

   ========================================================================= */

.thx-doc-sidebar {

    display: flex;

    flex-direction: column;

    position: sticky;

    top: 70px;

    height: calc(100vh - 70px);

    scroll-margin-top: 70px;

}

.admin-bar .thx-doc-sidebar {

    top: 102px;

    height: calc(100vh - 102px);

    scroll-margin-top: 102px;

}

.thx-sidebar-tabs {

    display: flex;

    border-bottom: 1px solid #e2e8f0;

    background: #f8fafc;

    flex-shrink: 0;

}

.thx-sidebar-tab {

    flex: 1;

    text-align: center;

    padding: 14px 10px;

    font-weight: 600;

    font-size: 15px;

    color: #64748b;

    cursor: pointer;

    border-bottom: 2px solid transparent;

    transition: all 0.2s ease;

}

.thx-sidebar-tab:hover {

    color: #334155;

    background: #f1f5f9;

}

.thx-sidebar-tab.active {

    color: var(--thx-primary, #2271b1);

    border-bottom-color: var(--thx-primary, #2271b1);

    background: #fff;

}

.thx-sidebar-content-area {

    flex: 1;

    overflow-y: auto;

    background: #fff;

    position: relative;

}

.thx-sidebar-pane {

    display: none;

    padding: 20px;

    animation: thxFadeIn 0.3s ease;

}

.thx-sidebar-pane.active {

    display: block;

}

@keyframes thxFadeIn {

    from { opacity: 0; transform: translateY(5px); }

    to { opacity: 1; transform: translateY(0); }

}



.thx-verse-num-css::before { content: attr(data-verse); }



/* --- Mobile Sidebar Overlay --- */

@media (max-width: 768px) {

    .thx-doc-sidebar {

        position: fixed !important;

        top: 0 !important;

        left: 0 !important;

        width: 100vw !important;

        height: 100vh !important;

        z-index: 999999 !important;

        border-left: none !important;

        background: #fff !important;

    }

    .admin-bar .thx-doc-sidebar {

        top: 46px !important;

        height: calc(100vh - 46px) !important;

    }

    .thx-sidebar-close-btn {

        display: flex !important;

    }

}



@media (max-width: 768px) { .thx-hide-on-mobile { display: none !important; } }

/* Mobile Bottom Sheet for Settings & Bookmarks & Tools */
@media (max-width: 768px) {
    /* Shared backdrop for bottom sheets */
    .thx-bottom-sheet-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(15, 23, 42, 0.6) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 999990 !important;
        display: none;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    .thx-dv-settings-dropdown .thx-dv-settings-menu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: auto !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important;
        border-radius: 24px 24px 0 0 !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.15) !important;
        z-index: 999995 !important;
        padding-bottom: env(safe-area-inset-bottom, 30px) !important;
        background: #fff !important;
        border: none !important;
        margin-top: 0 !important;
        display: block !important;
        visibility: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Disable transforms/transitions on triggers on mobile/when open to prevent containing block issues */
    .thx-fm-ann-trigger,
    .thx-dv-settings-dropdown,
    .thx-floating-tool-btn {
        transform: none !important;
        transition: none !important;
    }
    .thx-fm-ann-trigger:hover,
    .thx-dv-settings-dropdown:hover,
    .thx-floating-tool-btn:hover,
    .thx-fm-ann-trigger:active,
    .thx-dv-settings-dropdown:active,
    .thx-floating-tool-btn:active {
        transform: none !important;
    }

    /* Raise parent trigger's stacking context when bottom sheet is open */
    .thx-fm-ann-trigger.thx-dropdown-open,
    .thx-dv-settings-dropdown.thx-dropdown-open {
        z-index: 999999 !important;
        transform: none !important;
    }
    
    .thx-dv-settings-dropdown.thx-dropdown-open .thx-dv-settings-menu {
        z-index: 999999 !important;
    }
    
    .thx-dv-settings-dropdown .thx-dv-settings-menu.thx-open {
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    
    /* Drag handle indicator at the top of bottom sheet */
    .thx-dv-settings-menu::before {
        content: "" !important;
        display: block !important;
        width: 36px !important;
        height: 5px !important;
        background: #cbd5e1 !important;
        border-radius: 2.5px !important;
        margin: 12px auto 16px auto !important;
        flex-shrink: 0 !important;
    }
    
    /* Optimize padding and layout for touch targets inside menu */
    .thx-dv-settings-menu .thx-dv-menu-item,
    .thx-dv-settings-menu .thx-dv-toggle-label {
        padding: 14px 24px !important;
        font-size: 15px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .thx-dv-settings-menu .thx-dv-menu-heading {
        padding: 16px 24px 8px 24px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }
    .thx-dv-settings-menu .thx-dv-menu-divider {
        display: none !important; /* Hide standard dividers since we use item borders */
    }
    
    /* Make bookmark snippet and layout feel premium on mobile */
    .thx-bookmark-menu {
        height: auto !important;
        max-height: 80vh !important;
    }
    
    .thx-bookmark-menu li {
        margin: 0 16px 12px 16px !important;
        padding: 14px 16px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
    }
}