/* ============================================
   RESPONSIVE STYLES (Mobile & Tablet)
   ============================================ */

/* Tablet and Smaller (max-width: 991px) */
@media (max-width: 991px) {
    :root {
        --container-width: 100%;
    }

    .container {
        padding: 0 20px;
    }

    /* 2. Hide Sidebar & Enable Mobile Filter on Tablet/Mobile */
    .sidebar-wrapper {
        display: none;
    }

    /* Stack the main layout */
    .main-layout-books {
        grid-template-columns: 1fr !important;
        /* Stack column */
        gap: 2rem;
    }

    /* Mobile Filter Button - Visible on Tablet/Mobile */
    .btn-mobile-filter {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        font-weight: 500;
        cursor: pointer;
        color: var(--text-dark);
        margin-left: 10px;
    }

    .btn-mobile-filter:hover {
        background: #f9f9f9;
        color: var(--primary-blue);
        border-color: var(--primary-blue);
    }

    /* Grids to Stack */
    .hero-grid,
    .main-layout,
    .detail-body-grid,
    .detail-top-grid,
    .guide-layout,
    .news-container-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* News Sub Grid (List) - Tablets might still want 2 cols, but if narrow, 1. 
       Let's keep 2 cols for tablet for now, or check user request. 
       User said: <576px = 1 col.
    */

    /* Hero Sidebar */
    .hero-sidebar {
        display: none;
        /* Mobile Menu handles this */
    }

    .hero-slider,
    .hero-slider .slide,
    .hero-slider .slider-img {
        height: auto !important;
        /* Allow scaling */
        min-height: unset;
        aspect-ratio: 16/9;
        /* Mobile/Tablet ratio */
        width: 100%;
        position: relative;
    }

    /* Order Shifts - REMOVED based on user feedback "Return right body to old position" */
    /* .body-right, .sidebar-filter {
        order: 10; 
    } */

    /* Navbar Components */
    .nav-links {
        display: none;
        /* Use mobile menu instead */
    }

    .search-box {
        margin: 10px 0;
        width: 100%;
    }

    /* Mobile Layout - Header Rows */
    .book-list-container .flex.justify-between.items-center.mb-6 {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .content-tabs {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
        display: flex;
        gap: 10px;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .content-tabs::-webkit-scrollbar {
        display: none;
    }

    .content-tabs .tab-btn {
        flex-shrink: 0;
    }

    /* Row 2: Sort + Filter */
    .book-list-container .flex.items-center.gap-4 {
        width: 100%;
        justify-content: space-between;
    }

    .sort-box {
        flex: 1;
        display: flex;
        align-items: center;
        min-width: 0;
        /* Allow shrinking */
    }

    .sort-box span {
        white-space: nowrap;
        font-size: 0.85rem;
    }

    .sort-box select {
        flex: 1;
        width: 100%;
        max-width: 100%;
        text-overflow: ellipsis;
        padding-right: 20px;
        /* Space for arrow */
    }

    /* Small Mobile adjustments for Sort */
    @media (max-width: 400px) {
        .sort-box span {
            display: none;
            /* Hide "Sắp xếp:" label on very small screens */
        }
    }

    /* Featured Carousel Fix (User Request: 6 items visible on desktop, fewer here) */
    /* Tablet (Small) / Mobile Large */
    /* Show 3 items: (100% - 2 gaps) / 3 */
    .featured-list a.book-demo-card {
        min-width: calc((100% - 48px) / 3) !important;
    }
}

/* Featured Carousel Global Fix Override (if needed here, but style.css handles it) */
/* .featured-list-wrapper { overflow: hidden; } */

/* Tablet (max-width: 768px) */
/* Mobile Menu Overlay Styles */
.mobile-menu-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    display: none;
}

.mobile-menu-container.active {
    display: block;
}

.mobile-menu-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.mobile-menu-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    /* Width of the menu */
    max-width: 320px;
    height: 100%;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mobile-menu-container.active .mobile-menu-content {
    transform: translateX(0);
}

.mobile-menu-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.mobile-logo {
    height: 30px;
}

.close-menu-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.mobile-menu-body {
    padding: 15px;
    overflow-y: auto;
    flex: 1;
}

.mobile-section h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #333;
}

.mobile-cat-list,
.mobile-nav-links {
    list-style: none;
    padding: 0;
}

.mobile-cat-list li,
.mobile-nav-links li {
    margin-bottom: 10px;
}

.mobile-cat-list a,
.mobile-nav-links a {
    color: #555;
    font-size: 0.95rem;
    display: block;
    padding: 5px 0;
}

/* Tablet (max-width: 768px) */
@media (max-width: 992px) {

    /* Header Layout Redesign */
    .top-header .container {
        display: grid;
        grid-template-columns: 48px 1fr 48px;
        align-items: center;
        padding: 10px 15px;
        gap: 0;
        justify-content: center;
        /* Override space-between */
    }

    /* 1. Mobile Menu (Left) */
    .mobile-menu-btn {
        display: flex !important;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1.5px solid #1f2937;
        /* Dark border */
        justify-content: center;
        align-items: center;
        font-size: 1.25rem;
        color: #1f2937;
        grid-column: 1;
        grid-row: 1;
    }

    /* 2. Logo (Center) */
    .logo {
        grid-column: 2;
        grid-row: 1;
        text-align: center;
        justify-self: center;
        margin: 0;
    }

    .logo img {
        height: 40px;
        width: auto;
    }

    /* 3. Mobile User (Right) */
    .header-right,
    .user-actions {
        display: contents !important;
        /* Allow children to participate in grid */
    }

    .mobile-user-btn {
        display: flex !important;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1.5px solid #1f2937;
        /* Dark border */
        justify-content: center;
        align-items: center;
        font-size: 1.25rem;
        color: #1f2937;
        grid-column: 3;
        grid-row: 1;
        background: transparent;
    }

    /* Hide other desktop elements */
    .hotline,
    .user-btn,
    .user-dropdown-container,
    .user-actions .icon-btn:not(.mobile-menu-btn):not(.mobile-user-btn) {
        display: none !important;
    }

    /* Icon Buttons Style Override for Mobile Header */
    .icon-btn.mobile-menu-btn,
    .icon-btn.mobile-user-btn {
        width: 44px;
        height: 44px;
    }



    .icon-btn i {
        font-size: 1.1rem;
    }

    /* Header Right Actions */
    .header-right {
        width: auto;
        gap: 10px;
    }

    /* Navbar / Search Bar */
    .main-navbar {
        background: #055BF5;
        /* Blue background */
        height: auto;
        padding: 15px 0;
    }

    .main-navbar .container {
        flex-direction: column;
        align-items: stretch;
        padding: 0 15px;
    }

    .nav-left,
    .nav-right {
        display: none !important;
    }

    /* Search Box styling */
    .nav-center {
        margin: 0 !important;
        flex: none;
        width: 100%;
    }

    .search-box {
        width: 100% !important;
        height: 48px !important;
        /* Taller 48px */
        background: #fff;
        border-radius: 50px;
        /* Pill shape */
        display: flex;
        align-items: center;
        padding: 5px;
        margin: 0;
        border: none;
    }

    .search-select {
        display: block !important;
        background: transparent;
        border: none;
        height: 100% !important;
        padding: 0 10px;
        color: #666;
        font-size: 0.9rem;
        border-right: 1px solid #eee;
        margin-right: 5px;
        max-width: 130px;
    }

    .search-input {
        height: 100% !important;
        border: none;
        padding: 0 10px;
        font-size: 1rem;
    }

    .search-btn {
        width: 40px;
        height: 40px !important;
        background: #FACC15;
        /* Yellow */
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        /* Push to right */
    }

    .search-btn i {
        font-size: 1.1rem;
    }

    /* Reset grids for consistency */
    /* NOTE: Grids remain at 768px? Or should they move?
       For "Navbar and Menu", we keep them separate.
       Closing 992px block here. */
}

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {

    /* Grids */
    .grid-4,
    .news-cols-3,
    .main-layout,
    .detail-top-grid,
    .detail-body-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* User Request: 480 -> 767px = 3 items */
    .grid-5,
    .book-grid-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Collections */
    .collections-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Hide breadcrumb on mobile if needed, or style it */
    .breadcrumb-section {
        display: none;
        /* Often hidden on mobile for space, or keep simpler */
    }

    /* Adjust margins */
    .section {
        padding: 2rem 0;
    }

    .news-section {
        margin-top: 0;
    }

    /* News Item - Stack layout on tablet */
    .news-list .news-item,
    .news-list article.news-item {
        flex-direction: column !important;
        gap: 16px;
    }

    .news-list .news-thumb {
        width: 100% !important;
        aspect-ratio: 4/3 !important;
    }

    .news-list .news-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
    }

    .news-list .news-content {
        padding-top: 0;
    }
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .hotline {
        display: none;
    }



    .search-select {
        display: none;
    }

    .grid-4,
    .news-sub-grid {
        grid-template-columns: 1fr !important;
    }

    /* User Request: <=480px = 2 items */
    .grid-5,
    .book-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
        /* Smaller gap for mobile */
    }

    /* Featured Carousel Fix (Small Mobile) */
    /* Show 1.5 items or 1 item */
    /* Let's show 1 item for simplicity on small screens */
    .featured-list a.book-demo-card {
        min-width: 100% !important;
    }

    /* Footer */
    .footer-content {
        padding-top: 20px;
    }

    .footer-socials {
        flex-wrap: wrap;
    }

    /* News Item - Stack layout on mobile */
    .news-list .news-item,
    .news-list article.news-item {
        flex-direction: column !important;
        gap: 16px;
    }

    .news-list .news-thumb {
        width: 100% !important;
        aspect-ratio: 4/3;
        max-height: none;
    }

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

    .news-list .news-content {
        padding-top: 0;
    }
}

/* Grid 6 Responsive */
@media (max-width: 1200px) {
    .grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .grid-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .grid-6 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .grid-6 {
        grid-template-columns: 1fr !important;
    }

    /* Collections Slider Mobile */
    .collections-list .collection-card {
        min-width: 100% !important;
        /* 1 item */
    }
}

@media (max-width: 991px) {

    /* Tablet: 3 items? or 2? Let's say 3 items -> (100% - 48px)/3 */
    .collections-list .collection-card {
        min-width: calc((100% - 48px) / 3);
    }
}

@media (max-width: 768px) {

    /* Mobile Large: 2 items -> (100% - 24px)/2 */
    .collections-list .collection-card {
        min-width: calc((100% - 24px) / 2);
    }
}

/* =========================================
   MOBILE SIDEBAR STYLES
   ========================================= */
/* =========================================
   MOBILE SIDEBAR STYLES (Right Aligned)
   ========================================= */
.mobile-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.mobile-backdrop.active {
    display: block;
    opacity: 1;
}

/* Right-aligned Sidebar */
.mobile-sidebar {
    position: fixed;
    top: 0;
    right: -320px;
    /* Start hidden on the RIGHT */
    left: auto;
    /* Unlock left */
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 9999;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    /* Shadow on left */
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mobile-sidebar.active {
    right: 0;
    /* Slide in to right edge */
    left: auto;
}

/* =========================================
   MOBILE FILTER SIDEBAR (Left - Slide In)
   ========================================= */
.mobile-filter-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.mobile-filter-backdrop.active {
    display: block;
    opacity: 1;
}

.mobile-filter-sidebar {
    position: fixed;
    top: 0;
    left: -320px;
    /* Hidden LEFT */
    width: 300px;
    max-width: 85%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mobile-filter-sidebar.active {
    left: 0;
    /* Slide in */
}

.filter-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.filter-sidebar-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1e3a8a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-filter-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #999;
    cursor: pointer;
    padding: 5px;
}

.close-filter-btn:hover {
    color: #ef4444;
}

.filter-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Header */
.sidebar-header {
    position: relative;
    background: #055BF5;
    color: white;
    padding: 20px;
    /* Match list item padding */
    display: flex;
    align-items: center;
    min-height: 60px;
}

.sidebar-title {
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 15px;
    /* Gap between icon and text */
}

.sidebar-title i {
    font-size: 1.2rem;
    width: 20px;
    /* Fixed width for alignment */
    text-align: center;
}

/* Close Button - Outside LEFT */
.close-sidebar-btn {
    position: absolute;
    top: 15px;
    left: -50px;
    /* Move to LEFT of sidebar */
    width: 35px;
    height: 35px;
    background: #fff;
    color: #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 1.2rem;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
    /* Fix visibility issue when closed */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.mobile-sidebar.active .close-sidebar-btn {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
}

.mobile-cat-list li {
    border-bottom: 1px solid #f3f3f3;
}

.mobile-cat-list a {
    display: block;
    padding: 15px 20px;
    /* Vertical 15, Horizontal 20 */
    color: #333;
    font-weight: 500;
    padding-left: 20px;
    /* Strict left alignment */
}

/* Alignment Check:
   Header Icon: Starts at 20px padding-left. Width 20px center.
   List Text: Starts at 20px padding-left. 
   User wants Icon to align with Text? 
   No, "icon Danh mục thư viện căn trái thằng hàng với text của các menu con".
   
   Header: [20px Pad] [Icon 20px] [15px Gap] [Title]
   List:   [20px Pad] [Text]
   
   Wait. The user implies the "Header Icon" (likely the bars) should align with the "Menu Item Text".
   Currently: Header Icon starts at 20px. Menu Text starts at 20px. They ARE aligned.
*/

.mobile-cat-list a:hover {
    background: #f9f9f9;
    color: #055BF5;
}

/* =========================================
   HEADER RESPONSIVE (<= 992px)
   ========================================= */
@media (max-width: 992px) {

    /* Hide specific elements: Favorites, Bookmarks only if they are separate icons or part of header-right */
    /* User requested to KEEP Search Bar */
    .header-actions a[title="Tủ sách đã lưu"],
    .header-actions a[title="Yêu thích"],
    .header-actions .icon-btn:not(.user-btn):not(.mobile-menu-btn) {
        display: none !important;
    }

    /* Ensure User & Menu are visible and styled */
    .header-actions {
        gap: 10px;
    }

    /* Circle Outline Style for Icons */
    .header-actions .icon-btn {
        width: 40px;
        height: 40px;
        border: 1px solid #1e3a8a;
        /* Dark Blue Border */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1e3a8a;
        font-size: 1.2rem;
    }

    .header-actions .user-dropdown-container {
        display: block;
    }
}

/* =========================================
   HOMEPAGE GRID (5 -> 4 -> 2)
   ========================================= */
@media (max-width: 992px) {
    .book-grid-5 {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    /* Hide 5th item */
    .book-grid-5 .book-card.compact:nth-child(5) {
        display: none !important;
    }
}

@media (max-width: 576px) {
    .book-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Fix for "You Might Like" Carousel (2.5 items) */
    .featured-carousel .carousel-track {
        display: flex;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 10px;
        scrollbar-width: none;
    }

    .featured-carousel .carousel-track::-webkit-scrollbar {
        display: none;
    }

    .featured-carousel .carousel-item {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        margin-right: 0 !important;
    }

    /* Force show nav buttons on mobile */
    .section-header .carousel-nav {
        display: flex !important;
    }
}

/* =========================================
   BOOK DETAIL MOBILE SLIDER
   ========================================= */
.book-gallery-mobile {
    display: none;
    /* Hidden by default (Desktop) */
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .book-gallery-mobile {
        display: block;
    }

    /* Hide Desktop Cover */
    .book-detail-grid .book-cover-section {
        display: none !important;
    }
}

.gallery-track {
    display: flex;
    transition: transform 0.3s ease-out;
}

.gallery-slide {
    min-width: 100%;
    aspect-ratio: 2/3;
    /* Book ratio */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f9f9f9;
}

.gallery-slide img {
    height: 100%;
    object-fit: contain;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.g-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
}

.g-dot.active {
    background: #055BF5;
    width: 20px;
    border-radius: 4px;
}

/* =========================================
   LIGHTBOX MODAL
   ========================================= */
#lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10005;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

#lightbox-modal.active {
    display: flex;
    opacity: 1;
}

.lightbox-img-wrapper {
    max-width: 90%;
    max-height: 80vh;
}

.lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    background: none;
    border: none;
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* Desktop Clickable Cover */
.book-cover-main {
    cursor: pointer;
}

.sidebar-footer {
    padding: 20px;
    border-top: 1px solid #eee;
}

.view-all-btn {
    color: #055BF5;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

/* =========================================
   BANNER ASPECT RATIO FIX
   ========================================= */
.hero-slider .slide,
.hero-slider .slider-img {
    height: auto !important;
    /* Override fixed heights */
    aspect-ratio: 2/1;
    /* Reasonable default, or 21/9 */
    width: 100%;
}

@media (max-width: 480px) {

    .hero-slider .slide,
    .hero-slider .slider-img {
        aspect-ratio: 16/9;
        /* Taller on mobile? or keep 2/1 */
    }
}

/* =========================================
   HIDE SECONDARY BANNERS (<768px)
   ========================================= */
@media (max-width: 768px) {
    .sub-banner-section {
        display: none !important;
    }
}

/* =========================================
   MOBILE BOOK DETAIL INFO (Custom)
   ========================================= */
.book-info-mobile {
    display: none;
    padding: 20px;
    background: #fff;
}

@media (max-width: 768px) {
    .book-info-mobile {
        display: block;
    }

    /* Hide Desktop Grid */
    .book-detail-grid {
        display: none !important;
    }
}

.m-detail-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e3a8a;
    /* Dark Blue */
    margin-bottom: 8px;
}

.m-collection {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}

.m-collection a {
    color: #ef4444;
    /* Red */
    font-weight: 500;
}

.m-stats {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.m-stat-item.rating {
    font-weight: 700;
    font-size: 16px;
    color: #1e3a8a;
}

/* Meta Table */
.m-meta-table-wrapper {
    margin-bottom: 20px;
}

.m-meta-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.m-meta-table td {
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;
}

.m-meta-table td.label {
    width: 40%;
    color: #666;
    font-weight: 500;
}

.m-meta-table td.value {
    color: #333;
    font-weight: 500;
}

.m-meta-table td.value.text-blue {
    color: #2563eb;
}

.m-meta-table td.value.text-dark-blue {
    color: #1e3a8a;
}

.view-more-link {
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
}

/* Mobile Actions Buttons */
.m-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-m-action {
    flex: 1;
    /* Side by side on larger mobile */
    min-width: 140px;
    padding: 12px 15px;
    border-radius: 6px;
    border: none;
    color: white;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-m-action:hover {
    opacity: 0.9;
}

.btn-green {
    background: #198754;
}

.btn-blue {
    background: #0d6efd;
}

.btn-orange {
    background: #fd7e14;
}

/* Stack Buttons < 576px */
@media (max-width: 576px) {
    .m-actions {
        flex-direction: column;
    }

    .btn-m-action {
        width: 100%;
    }
}

/* Fix Homepage Grid for 993px - 1200px */
@media (min-width: 993px) and (max-width: 1200px) {
    .section-left-body .book-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}


/* Adjustments for Detail Tabs and Comments on Mobile */
@media (max-width: 768px) {
    .detail-desc {
        padding: 20px !important;
    }

    .comment-item.reply {
        margin-left: 20px !important;
        padding: 15px !important;
    }

    .btn-send {
        width: 100%;
    }
}

/* =========================================
   MOBILE FILTER SIDEBAR (Left - Slide In)
   ========================================= */
.mobile-filter-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.mobile-filter-backdrop.active {
    display: block;
    opacity: 1;
}

/* Base Mobile Filter Styles (Shared) */
.mobile-filter-sidebar {
    position: fixed;
    z-index: 9999;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* MOBILE Behavior (<= 480px): Slide from LEFT "bật ra" */
@media (max-width: 480px) {
    .mobile-filter-sidebar {
        top: 0;
        left: -320px;
        /* Hidden LEFT */
        width: 300px;
        max-width: 85%;
        height: 100%;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .mobile-filter-sidebar.active {
        left: 0;
        /* Slide in */
    }

    .close-filter-btn {
        display: block;
    }
}

/* TABLET Behavior (481px - 991px): Dropdown "sổ xuống" */
@media (min-width: 481px) and (max-width: 991px) {

    /* Ensure parent is relative for absolute positioning */
    .book-list-container .flex.items-center.gap-4 {
        position: relative;
    }

    .mobile-filter-sidebar {
        position: absolute;
        top: 100%;
        /* Push below the container */
        left: 0;
        right: auto;
        /* Match container width */
        width: 100%;
        max-width: none;
        max-height: 0;
        overflow: hidden;
        /* Reset flex */
        display: block;
        opacity: 0;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border: 1px solid #eee;
        border-radius: 8px;
        margin-top: 10px;
        height: auto;
    }

    .mobile-filter-sidebar.active {
        opacity: 1;
        max-height: 600px;
        overflow-y: auto;
    }

    .mobile-filter-backdrop.active {
        opacity: 0;
        /* Invisible backdrop but clickable */
    }

    .filter-sidebar-header {
        padding: 10px 15px;
    }

    .close-filter-btn {
        display: none;
    }
}

/* Adjust Sidebar Header */
.filter-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.filter-sidebar-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1e3a8a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-filter-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #999;
    cursor: pointer;
    padding: 5px;
}

.filter-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* TABLET INTERNAL GRID LAYOUT FIX */
@media (min-width: 481px) and (max-width: 991px) {

    .mobile-filter-sidebar .sidebar-filter {
        display: grid;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
        padding: 0;
    }

    .mobile-filter-sidebar .filter-group {
        border-bottom: none;
        margin-bottom: 0;
    }

    .mobile-filter-sidebar .filter-actions {
        grid-column: 1 / -1;
        margin-top: 15px;
    }
}

/* Detail Page Responsive Adjustments */
@media (max-width: 991px) {
    .detail-body-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* User Request: <1000px Remove padding left from news-list-col */
@media (max-width: 1000px) {
    .news-list-col {
        padding-left: 0;
    }
}