/* Container */

.vn-grid-wrapper {

    display: flex; flex-wrap: wrap; margin: 0 -15px; box-sizing: border-box;

}

.vn-grid-item {

    padding: 0 15px; margin-bottom: 30px; box-sizing: border-box;

}



/* CỘT */

.cols-1 { width: 100%; }

.cols-2 { width: 50%; }

.cols-3 { width: 33.333%; }

.cols-4 { width: 25%; }



/* INNER COMMON */

.vn-grid-inner {

    display: block; text-decoration: none; position: relative;

    border-radius: 12px; overflow: hidden; height: 100%;

    transition: transform 0.3s;

}

.vn-grid-inner:hover { transform: translateY(-5px); }



/* IMAGE */

.vn-grid-thumb { position: relative; width: 100%; overflow: hidden; }

.vn-img-bg {

    width: 100%; height: 100%; background-size: cover; background-position: center;

    transition: transform 0.5s; position: absolute; top: 0; left: 0;

}

.vn-grid-inner:hover .vn-img-bg { transform: scale(1.05); }



/* ASPECT RATIO */

.ratio-16-9 .vn-grid-thumb { padding-top: 56.25%; }

.ratio-4-3 .vn-grid-thumb { padding-top: 75%; }

.ratio-1-1 .vn-grid-thumb { padding-top: 100%; }

.ratio-auto .vn-grid-thumb { height: 250px; }



/* CONTENT COMMON */

.vn-grid-content { padding: 15px 0; color: #333; transition: 0.3s; }

.vn-title {

    margin: 0;

    font-size: 16px;

    line-height: 1.4;

    font-weight: 400;

    color: inherit;

    

    /* Code cắt dòng */

    display: -webkit-box;

    -webkit-line-clamp: 2; /* Giới hạn 2 dòng */

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis; /* Thêm dấu ... */

    height: 2.8em; /* Giữ chiều cao cố định cho đẹp layout (1.4 line-height * 2) */

}

.vn-date { font-size: 11px; opacity: 0.8; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }

.vn-excerpt { font-size: 14px; margin-top: 8px; opacity: 0.8; }



/* =========================================

   STYLE 1: CARD (Chữ dưới ảnh - Dòng dưới)

   ========================================= */

.style-card .vn-grid-inner { background: transparent; }

.style-card .vn-overlay-mask { display: none; } /* Ẩn overlay */

.style-card .vn-grid-thumb { border-radius: 12px; } /* Bo tròn ảnh riêng */



/* =========================================

   STYLE 2: OVERLAY (Chữ đè ảnh - Dòng trên)

   ========================================= */

.style-overlay .vn-grid-inner { border-radius: 12px; }



/* Overlay Mask */

.style-overlay .vn-overlay-mask {

    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;

    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);

    pointer-events: none; z-index: 1;

}



/* Content đè lên */

.style-overlay .vn-grid-content {

    position: absolute; bottom: 0; left: 0; width: 100%;

    padding: 20px; color: #fff; z-index: 2;

}



.style-overlay .vn-title { 

    color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); 

    font-size: 20px; /* Chữ to hơn chút cho overlay */

}

.style-overlay .vn-date { color: rgba(255,255,255,0.8); }

.style-overlay .vn-excerpt { color: rgba(255,255,255,0.9); display: none; } /* Thường overlay không hiện mô tả cho gọn */



/* =========================================

   STYLE 3: LIST (Ngang)

   ========================================= */

.style-list .vn-grid-inner { display: flex; gap: 20px; align-items: flex-start; }

.style-list .vn-grid-thumb { width: 40%; padding-top: 28%; flex-shrink: 0; border-radius: 8px; }

.style-list .vn-grid-content { padding: 0; width: 60%; }

.style-list .vn-overlay-mask { display: none; }



/* MOBILE RESPONSIVE */

@media (max-width: 768px) {

    .mob-col-1 .vn-grid-item { width: 100%; }

    .mob-col-2 .vn-grid-item { width: 50%; }

    

    .style-list .vn-grid-inner { flex-direction: column; }

    .style-list .vn-grid-thumb { width: 100%; padding-top: 56.25%; }

    .style-list .vn-grid-content { width: 100%; padding-top: 10px; }

}



/* --- LAYOUT MODE: GRID (Cũ) --- */

.vn-grid-wrapper {

    display: flex; flex-wrap: wrap; margin: 0 -15px;

}



/* --- LAYOUT MODE: SLIDER (Swiper) --- */

.vn-swiper-container {

    padding-bottom: 50px; /* Tăng khoảng cách dưới để chứa Pagination */

    overflow: hidden; 

    position: relative;

}

.swiper-slide {

    height: auto; 

}



/* --- PAGINATION (Chấm bi) --- */

.vn-swiper-container .swiper-pagination {

    bottom: 0 !important; /* Đẩy xuống đáy của padding */

    text-align: center;

}



/* Style chấm bi */

.vn-swiper-container .swiper-pagination-bullet {

    width: 12px; /* To hơn */

    height: 12px;

    background: #000; /* Màu đen khi chưa active */

    opacity: 0.3;     /* Mờ đi chút */

    margin: 0 6px !important; /* Khoảng cách giữa các chấm */

    transition: all 0.3s ease;

}



/* Chấm bi Active */

.vn-swiper-container .swiper-pagination-bullet-active {

    background: #e60023; /* Màu đỏ */

    opacity: 1;

    transform: scale(1.2); /* Phóng to nhẹ khi active */

}



/* Nút Next/Prev (Mũi tên) */

.swiper-button-next, .swiper-button-prev {

    color: #fff; 

    text-shadow: 0 0 5px rgba(0,0,0,0.5);

    width: 40px; height: 40px;

}

/* Ẩn mũi tên nếu muốn chỉ dùng dot, hoặc style lại tùy ý */

/* .swiper-button-next::after, .swiper-button-prev::after { font-size: 20px; } */



/* --- LAYOUT MODE: MASONRY --- */

.vn-masonry-grid {

    margin: 0 -15px; /* Bù padding */

}

/* Grid Sizer (Phần tử ảo để đo độ rộng cột) */

.grid-sizer { width: 100%; } 

.grid-sizer.cols-2 { width: 50%; }

.grid-sizer.cols-3 { width: 33.333%; }

.grid-sizer.cols-4 { width: 25%; }



/* Masonry Item */

.vn-masonry-grid .vn-grid-item {

    margin-bottom: 30px;

    float: left; /* Masonry yêu cầu float */

}



/* Ẩn ảnh thật trong Masonry nếu không phải auto height */

.vn-hidden-img { 

    width: 100%; display: block; visibility: hidden; position: absolute; z-index: -1; 

}

/* Nếu chọn Auto height cho Masonry thì hiện ảnh thật ra */

.ratio-auto .vn-grid-thumb { height: auto !important; padding-top: 0 !important; }

.ratio-auto .vn-img-bg { display: none; } /* Ẩn bg, hiện img thật */

.ratio-auto .vn-hidden-img { 

    visibility: visible; position: relative; z-index: 1; 

}



/* --- Responsive Update --- */

@media (max-width: 768px) {

    .vn-masonry-grid .grid-sizer { width: 100% !important; }

    .vn-masonry-grid .vn-grid-item { width: 100% !important; }

}

/* =========================================
   PAGINATION (PHÂN TRANG SỐ & LOAD MORE)
   ========================================= */

/* Phân trang số chuẩn SEO */
.vn-pagination {
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 8px; margin-top: 40px; width: 100%;
}
.vn-pagination .page-numbers {
    display: inline-flex; justify-content: center; align-items: center;
    min-width: 40px; height: 40px; padding: 0 10px;
    background: #f1f5f9; color: #334155;
    text-decoration: none; border-radius: 6px;
    font-size: 15px; font-weight: 600; transition: all 0.3s ease;
}
.vn-pagination .page-numbers:hover { background: #e2e8f0; color: #0f172a; }
.vn-pagination .page-numbers.current { background: #e60023; color: #fff; pointer-events: none; }

/* Nút Load More AJAX */
.vn-load-more-wrap { text-align: center; margin-top: 40px; width: 100%; }
.vn-btn-load-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 32px; background: #e60023; color: #fff;
    border: none; border-radius: 40px; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: all 0.3s ease;
}
.vn-btn-load-more:hover { background: #cc0020; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(230, 0, 35, 0.3); }
.vn-btn-load-more.loading { background: #94a3b8; cursor: not-allowed; transform: none; box-shadow: none; }

/* Spinner quay lúc Load More */
.vn-loader-spin {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
    border-radius: 50%; animation: vn-spin 1s linear infinite;
}
@keyframes vn-spin { 100% { transform: rotate(360deg); } }