/* CSS riêng cho Categories - CHỈ OVERRIDE FLEX */

/* Override motchill-optimized cho categories */
.full-width-content .list-films .item.category-item {
    flex: 0 0 calc(20% - 12px) !important; /* 5 items per row với gap */
}

/* Responsive cho categories */
@media (max-width: 1400px) {
    .full-width-content .list-films .item.category-item {
        flex: 0 0 calc(20% - 12px) !important; /* 5 items per row */
    }
}

@media (max-width: 1200px) {
    .full-width-content .list-films .item.category-item {
        flex: 0 0 calc(25% - 12px) !important; /* 4 items per row */
    }
}

@media (max-width: 1000px) {
    .full-width-content .list-films .item.category-item {
        flex: 0 0 calc(33.33% - 12px) !important; /* 3 items per row */
    }
}

@media (max-width: 800px) {
    .full-width-content .list-films .item.category-item {
        flex: 0 0 calc(50% - 12px) !important; /* 2 items per row */
    }
}

@media (max-width: 600px) {
    .full-width-content .list-films .item.category-item {
        flex: 0 0 calc(50% - 12px) !important; /* 2 items per row */
    }
}

@media (max-width: 400px) {
    .full-width-content .list-films .item.category-item {
        flex: 0 0 100% !important; /* 1 item per row */
    }
}