/* File: assets/css/lelib-list.css */

/* =========================================
   GRID SYSTEM (Responsive)
   ========================================= */
.tv-grid {
    display: grid; gap: 24px;
    padding: 0 !important;
}

.tv-grid.tv-latest-grid.tv-grid--three { 
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; 
}
.tv-layout.is-collapsed .tv-grid.tv-latest-grid.tv-grid--three { 
    grid-template-columns: repeat(4, 1fr); 
}

@media (min-width: 769px) and (max-width: 1024px) {
    .tv-grid.tv-latest-grid.tv-grid--three { grid-template-columns: repeat(2, 1fr); }
    .tv-layout.is-collapsed .tv-grid.tv-latest-grid.tv-grid--three { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .tv-grid.tv-latest-grid.tv-grid--three { grid-template-columns: repeat(2, 1fr); }
    .tv-layout.is-collapsed .tv-grid.tv-latest-grid.tv-grid--three { grid-template-columns: repeat(2, 1fr); }
    .tv-toggle-open { display: inline-flex !important; }
}
@media (max-width: 599px) {
    .tv-grid.tv-latest-grid.tv-grid--three, 
    .tv-layout.is-collapsed .tv-grid.tv-latest-grid.tv-grid--three { grid-template-columns: 1fr; }
}

/* =========================================
   TOOLBAR (Top: Pagination + Sort + Filter Toggle)
   ========================================= */
.tv-toolbar { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 24px; padding-bottom: 12px;
    border-bottom: 1px solid #f3f4f6; 
    flex-wrap: wrap; gap: 12px; 
}

.tv-toolbar-left {
    display: flex; align-items: center; gap: 12px;
}

.tv-toolbar-right {
    display: flex; align-items: center; gap: 8px; margin-left: auto;
}

/* Nút mở Filter (Mobile) - Gọn gàng */
.tv-toggle-open { 
    display: none; height: 32px; 
    padding: 0 12px; border-radius: 99px; 
    background-color: #fff; border: 1px solid #e5e7eb; 
    font-weight: 600; font-size: 0.8rem; color: #4b5563;
    align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s;
}

/* Hover: Nền xanh - Chữ trắng */
.tv-toggle-open:hover { 
    background-color: var(--tv-accent); 
    border-color: var(--tv-accent); 
    color: #ffffff; 
}

.tv-layout.is-collapsed .tv-toggle-open { display: inline-flex; }

/* Sort Label & Select (Compact) */
.tv-sort-label {
    font-size: 0.75rem; font-weight: 700; color: #9ca3af; 
    text-transform: uppercase; white-space: nowrap;
}

.tv-toolbar-right .tv-select--sm {
    height: 32px; font-size: 0.85rem; padding: 0 28px 0 10px;
    border-radius: 6px;
}

/* =========================================
   BOTTOM PAGINATION
   ========================================= */
.tv-pager--bottom {
    margin-top: 40px; 
    justify-content: center; 
    padding-top: 24px;
    border-top: 1px solid #f3f4f6;
}

/* =========================================
   LOADER (Fix z-index)
   ========================================= */
.tv-overlay-loader { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(255,255,255,0.7); 
    
    /* [CẬP NHẬT] Tăng z-index lên 200 để đè lên mọi element trong card (popup/nav) */
    z-index: 200; 
    
    display: flex; justify-content: center; padding-top: 100px; 
    opacity: 0; visibility: hidden; transition: all 0.25s; pointer-events: none; 
    backdrop-filter: blur(2px); 
}
.tv-overlay-loader.is-active { opacity: 1; visibility: visible; pointer-events: auto; }