/* 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; }
}