/* ULTIMATE 7 COLUMNS OVERRIDE - HIGHEST SPECIFICITY */

/* Base rule - Force 7 columns với flexbox layout - maximum specificity */
html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Force individual items với flexbox calculation */
html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item {
    flex: 0 0 calc((100% - 90px) / 7) !important;
    width: calc((100% - 90px) / 7) !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

/* Override ALL responsive breakpoints cho 7 columns với flexbox */
@media screen and (max-width: 1600px) {
    html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    
    html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item {
        flex: 0 0 calc((100% - 90px) / 7) !important;
        width: calc((100% - 90px) / 7) !important;
    }
}

@media screen and (max-width: 1400px) {
    html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item {
        /* Vẫn giữ 7 cột cho desktop lớn */
        flex: 0 0 calc((100% - 90px) / 7) !important;
        width: calc((100% - 90px) / 7) !important;
    }
}

@media screen and (max-width: 1200px) {
    html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item {
        /* Vẫn giữ 7 cột */
        flex: 0 0 calc((100% - 90px) / 7) !important;
        width: calc((100% - 90px) / 7) !important;
    }
}

@media screen and (max-width: 992px) {
    html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item {
        /* Vẫn giữ 7 cột trên tablet */
        flex: 0 0 calc((100% - 90px) / 7) !important;
        width: calc((100% - 90px) / 7) !important;
    }
}

@media screen and (max-width: 768px) {
    html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item {
        /* Vẫn giữ 7 cột trên mobile lớn */
        flex: 0 0 calc((100% - 90px) / 7) !important;
        width: calc((100% - 90px) / 7) !important;
    }
}

/* Chỉ giảm xuống cho mobile rất nhỏ */
@media screen and (max-width: 600px) {
    html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item {
        /* 4 cột cho mobile: gap = 3 * 15px = 45px */
        flex: 0 0 calc((100% - 45px) / 4) !important;
        width: calc((100% - 45px) / 4) !important;
    }
}

@media screen and (max-width: 480px) {
    html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item {
        /* 3 cột cho mobile nhỏ: gap = 2 * 15px = 30px */
        flex: 0 0 calc((100% - 30px) / 3) !important;
        width: calc((100% - 30px) / 3) !important;
    }
}

@media screen and (max-width: 360px) {
    html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item {
        /* 2 cột cho mobile rất nhỏ: gap = 1 * 15px = 15px */
        flex: 0 0 calc((100% - 15px) / 2) !important;
        width: calc((100% - 15px) / 2) !important;
    }
}

/* Debug visual indicators */
html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"]::before {
    content: "7 COLUMNS ACTIVE" !important;
    position: absolute !important;
    top: -25px !important;
    left: 0 !important;
    background: #ff0000 !important;
    color: white !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    z-index: 9999 !important;
    border-radius: 3px !important;
}

/* Color-code items by column position */
html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item:nth-child(7n+1) {
    border-top: 5px solid #ff0000 !important;
}
html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item:nth-child(7n+2) {
    border-top: 5px solid #ff8000 !important;
}
html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item:nth-child(7n+3) {
    border-top: 5px solid #ffff00 !important;
}
html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item:nth-child(7n+4) {
    border-top: 5px solid #00ff00 !important;
}
html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item:nth-child(7n+5) {
    border-top: 5px solid #0080ff !important;
}
html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item:nth-child(7n+6) {
    border-top: 5px solid #8000ff !important;
}
html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] .gallery-pro-item:nth-child(7n+7) {
    border-top: 5px solid #ff0080 !important;
}

/* Container adjustments */
html body div.gallery-pro-container div.gallery-pro-grid.masonry[data-columns="7"] {
    position: relative !important;
    width: 100% !important;
    min-height: 300px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    box-sizing: border-box !important;
}