/* FLEXBOX MASONRY PRODUCTION CSS */

/* Gallery Container */
body .gallery-pro-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force Gallery Images Container to use Flexbox */
body .gallery-pro-container .gallery-images {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

/* Force Gallery Items */
body .gallery-pro-container .gallery-images .gallery-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

/* Specific Masonry Layout với Flexbox */
body .gallery-pro-container.gallery-masonry-layout .gallery-images {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

/* Masonry Items với chính xác 7 cột calculation */
body .gallery-pro-container.gallery-masonry-layout .gallery-item {
    flex: 0 0 calc((100% - 90px) / 7) !important;
    width: calc((100% - 90px) / 7) !important;
    box-sizing: border-box !important;
}

/* Force Images Display */
body .gallery-pro-container .gallery-item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Responsive cho 6 cột */
@media (max-width: 1400px) {
    body .gallery-pro-container.gallery-masonry-layout .gallery-item {
        flex: 0 0 calc((100% - 75px) / 6) !important;
        width: calc((100% - 75px) / 6) !important;
    }
}

/* Responsive cho 5 cột */
@media (max-width: 1200px) {
    body .gallery-pro-container.gallery-masonry-layout .gallery-item {
        flex: 0 0 calc((100% - 60px) / 5) !important;
        width: calc((100% - 60px) / 5) !important;
    }
}

/* Responsive cho 4 cột */
@media (max-width: 992px) {
    body .gallery-pro-container.gallery-masonry-layout .gallery-item {
        flex: 0 0 calc((100% - 45px) / 4) !important;
        width: calc((100% - 45px) / 4) !important;
    }
}

/* Responsive cho 3 cột */
@media (max-width: 768px) {
    body .gallery-pro-container.gallery-masonry-layout .gallery-item {
        flex: 0 0 calc((100% - 30px) / 3) !important;
        width: calc((100% - 30px) / 3) !important;
    }
}

/* Responsive cho 2 cột */
@media (max-width: 480px) {
    body .gallery-pro-container.gallery-masonry-layout .gallery-item {
        flex: 0 0 calc((100% - 15px) / 2) !important;
        width: calc((100% - 15px) / 2) !important;
    }
}

/* Mobile single column */
@media (max-width: 360px) {
    body .gallery-pro-container.gallery-masonry-layout .gallery-item {
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}