/* =========================================
   MODULE: TEXT REGION TOC (NÚT TRÊN - GÓC TRÁI)
   ========================================= */

.lelh-sidebar-toggle-btn {
    position: fixed;
    left: 0; right: auto;
    
    /* Căn giữa màn hình (Nằm trên GSP) */
    top: 50% !important; 
    bottom: auto !important; 
    margin-top: -24px; 
    
    transform: translateX(-100%); 
    
    width: 42px !important; 
    height: 42px !important;
    border-radius: 0 8px 8px 0 !important;
    
    background: #fff; color: #555;
    border: 1px solid #e0e0e0; border-left: none;
    
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    z-index: 9991; 
    
    display: flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer;
    
    opacity: 0; visibility: hidden;
    
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.3s ease, visibility 0.3s,
                width 0.2s ease, background 0.2s;
}

.lelh-sidebar-toggle-btn.is-visible {
    opacity: 1; visibility: visible; transform: translateX(0);
}

.lelh-sidebar-toggle-btn:hover {
    width: 52px !important; 
    background: #f9f9f9; color: #0073aa; 
    box-shadow: 4px 2px 12px rgba(0,0,0,0.15);
}

.lelh-sidebar-toggle-btn svg { width: 22px; height: 22px; display: block; stroke-width: 2; }

/* Ẩn khi Drawer mở */
body.showing-popup-drawer-from-right .lelh-sidebar-toggle-btn,
body.showing-popup-drawer-from-left .lelh-sidebar-toggle-btn,
body.kadence-drawer-open .lelh-sidebar-toggle-btn {
    opacity: 0 !important; visibility: hidden !important; transform: translateX(-100%) !important;
}

/* SIDEBAR PANEL */
.lelh-page-sidebar { 
    position: fixed; top: 0; left: 0; bottom: 0; 
    
    /* [CẬP NHẬT] Width rộng nhưng giới hạn Max Width cho Mobile */
    width: 350px; 
    max-width: 85vw; /* Chỉ chiếm 85% chiều rộng màn hình để hở mép overlay */
    
    background: #fff; box-shadow: 4px 0 20px rgba(0,0,0,0.2); 
    z-index: 200002; transform: translateX(-100%); 
    transition: transform 0.3s; display: flex; flex-direction: column; font-family: sans-serif; 
}

.lelh-page-sidebar.is-open { transform: translateX(0); }
.lelh-sidebar-header { padding: 0 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: #f8f9fa; height: 50px; flex-shrink: 0; }
.lelh-sidebar-title { font-weight: 700; font-size: 15px; color: #333; text-transform: uppercase; }
.lelh-sidebar-close { background: none; border: none; cursor: pointer; color: #999; padding: 4px; border-radius: 4px; display: flex; }
.lelh-sidebar-close:hover { background: #eee; color: #d63638; }
.lelh-sidebar-content { flex-grow: 1; overflow-y: auto; padding: 10px 0; }
.lelh-page-item { display: flex; align-items: center; padding: 12px 20px; cursor: pointer; border-left: 3px solid transparent; transition: background 0.1s; color: #444; font-size: 14px; border-bottom: 1px solid #f9f9f9; }
.lelh-page-item:hover { background: #f0f7ff; color: #0073aa; }
.lelh-page-item.is-current { background: #e6f2fa; color: #0073aa; border-left-color: #0073aa; font-weight: 600; }
.lelh-page-num { width: 24px; height: 24px; background: #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; margin-right: 12px; color: #666; font-weight: bold; flex-shrink: 0; }
.lelh-page-item.is-current .lelh-page-num { background: #0073aa; color: #fff; }
.lelh-page-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.lelh-sidebar-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200000; opacity: 0; visibility: hidden; transition: opacity 0.3s; backdrop-filter: blur(2px); }
.lelh-sidebar-overlay.is-visible { opacity: 1; visibility: visible; }