.product-description-gallery {
    clear: both;
}

/* ==========================================================
   CKEditor Bootstrap Gallery
   imgx2 = 2 ảnh
   imgx3 = 3 ảnh
   imgx4 = 4 ảnh
   ========================================================== */

/* Container */
.row-container[class*="imgx"] {
    overflow: hidden;
}

/* Bootstrap Row */
.row-container[class*="imgx"] > .row {
    height: 100%;
}

/* Bootstrap Column */
.row-container[class*="imgx"] .col {
    height: 100%;
    overflow: hidden;
}

/* CKEditor thường sinh p, br, &nbsp; */
.row-container[class*="imgx"] p {
    margin: 0;
    padding: 0;
    height: 100%;
    line-height: 0;
    overflow: hidden;
}

/* Image Cover */
.row-container[class*="imgx"] img {
    display: block;
    width: 100%;
    height: 100% !important;

    object-fit: cover;
    object-position: center center;

    transition: transform .3s ease;
}

/* Hover effect */
.row-container[class*="imgx"] img:hover {
    transform: scale(1.03);
}

/* CKEditor figure cho NCC tự làm sản phẩm có figure */
.row-container.imgx3 figure.image {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.row-container.imgx3 figure.image img {
    width: 100%;
    height: 100% !important;

    object-fit: cover;
    object-position: center;

    display: block;
}

/* ==========================================================
   DESKTOP
   ========================================================== */

.row-container.imgx2 {
    height: 450px;
}

.row-container.imgx3 {
    height: 350px;
}

.row-container.imgx4 {
    height: 300px;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 991.98px) {

    .row-container.imgx2 {
        height: 380px;
    }

    .row-container.imgx3 {
        height: 300px;
    }

    .row-container.imgx4 {
        height: 260px;
    }
}

/* ==========================================================
   MOBILE
   Bootstrap chuyển col-md-* thành col-12
   Mỗi ảnh thành 1 hàng riêng
   ========================================================== */

@media (max-width: 767.98px) {

    .row-container.imgx2,
    .row-container.imgx3,
    .row-container.imgx4 {
        height: auto;
        overflow: visible;
    }

    .row-container.imgx2 > .row,
    .row-container.imgx3 > .row,
    .row-container.imgx4 > .row {
        height: auto;
    }

    .row-container.imgx2 .col,
    .row-container.imgx3 .col,
    .row-container.imgx4 .col {
        height: 250px;
        margin-bottom: 12px;
    }

    .row-container.imgx2 .col:last-child,
    .row-container.imgx3 .col:last-child,
    .row-container.imgx4 .col:last-child {
        margin-bottom: 0;
    }
}