﻿.inner-page {
    overflow: hidden;
    padding: 35px 0;
    padding-bottom: 35px;
}

    .inner-page .boxes {
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

/* ==========================================================================
   THƯ VIỆN ẢNH - BỐ CỤC MASONRY (masonry.desandro.com)
   3 cột trên desktop, 2 cột trên mobile.

   Masonry tự tính số cột từ bề rộng thật của .pt-masonry-sizer và
   .pt-masonry-gutter theo công thức:
       số cột = floor((bềRộngKhung + gutter) / (sizer + gutter))

   !!! ĐỪNG sửa các số % bên dưới thành cho tổng đúng 100%.
   Ví dụ 32%*3 + 2%*2 = 100% nhìn thì "đẹp" nhưng phép chia rơi đúng
   biên số nguyên (102/34 = 3.0), sai số dấu phẩy động của JavaScript và
   việc trình duyệt làm tròn pixel sẽ đẩy kết quả xuống 2.999... khiến
   floor() trả về 2 cột. Đã kiểm tra: bộ 32%/2% hỏng ở 1468 bề rộng màn
   hình, bộ 49%/2% hỏng ở 382 bề rộng.

   Hai bộ số dưới đây đã quét toàn dải và không hỏng ở bề rộng nào:
       desktop 32%  + 1.9%  -> 3 cột, chiếm 99.8% (quét 768..2560px)
       mobile  49%  + 1.7%  -> 2 cột, chiếm 99.7% (quét 240..767px)
   ========================================================================== */
.pt-masonry {
    margin: 0;
    padding: 0;
    list-style: none;
}

    /* Masonry đặt item ở position:absolute, cần clear hai phần tử đo còn nằm trong dòng */
    .pt-masonry:after {
        content: '';
        display: block;
        clear: both;
    }

/* Hai phần tử chỉ dùng để Masonry đo, không hiển thị nội dung */
.pt-masonry-sizer,
.pt-masonry-gutter {
    height: 0;
    overflow: hidden;
}

.pt-masonry-sizer {
    width: 32%;
}

.pt-masonry-gutter {
    width: 1.9%;
}

.pt-masonry-item {
    box-sizing: border-box;
    width: 33%;
    /* Khoảng hở dọc phải dùng padding chứ không dùng margin: Masonry tính
       padding vào chiều cao item (outerHeight) còn margin thì không, dùng
       margin sẽ khiến các ảnh chồng sát nhau. */
    padding-bottom: 16px;
}

.pt-masonry-card {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(35, 65, 125, .10);
}

    .pt-masonry-card img {
        display: block;
        width: 100%;
        height: auto;
        transition: transform .35s ease, filter .35s ease;
    }

.pt-masonry-item:hover .pt-masonry-card img {
    transform: scale(1.045);
    filter: saturate(1.08);
}

@media (max-width: 767px) {
    .pt-masonry-sizer {
        width: 49%;
    }

    .pt-masonry-gutter {
        width: 1.7%;
    }

    .pt-masonry-item {
        width: 49%;
        padding-bottom: 12px;
    }

    .pt-masonry-card {
        border-width: 4px;
        border-radius: 10px;
    }
}
