/* Reset & Container */
#customGallery {
    padding: 10px 15px;
    font-family: 'Be Vietnam Pro', sans-serif; /* Bạn thay đổi font cho phù hợp */
    background: #fff;
}

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.gallery-header {
    margin-bottom: 30px;
    text-align: left;
}

.gallery-title {
    color: #025E5C; /* Màu xanh Học viện */
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.gallery-desc {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    max-width: 800px;
}

/* Grid System (Sử dụng CSS Grid cho responsive) */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Default 3 cột */
    gap: 20px; /* Khoảng cách giữa các ô */
}

/* Responsive Grid */
@media (max-width: 992px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cột trên tablet */
    }
}

@media (max-width: 576px) {
    .video-grid {
        grid-template-columns: 1fr; /* 1 cột trên mobile */
    }
}

/* Video Card */
.video-card {
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

    .video-card:hover {
        transform: translateY(-5px);
    }

.thumb-box {
    position: relative; /* Gốc tọa độ cho các phần tử con */
    width: 100%;
    padding-top: 56.25%; /* Tạo khung 16:9 */
    background: #000;
    overflow: hidden;
    border-radius: 10px;
}

    .thumb-box img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.9;
        transition: 0.3s;
    }

/* CĂN GIỮA ICON TUYỆT ĐỐI */
.play-icon {
    position: absolute;
    top: 50%; /* Đẩy xuống 50% khung hình */
    left: 50%; /* Đẩy sang phải 50% khung hình */
    transform: translate(-50%, -50%); /* Dịch ngược lại nửa kích thước icon để chính xác tâm */
    z-index: 5; /* Luôn nằm trên ảnh */
    color: rgba(255, 255, 255, 0.9);
    font-size: 60px; /* Chỉnh kích thước icon to nhỏ tại đây */
    line-height: 1;
    pointer-events: none; /* Để click xuyên qua icon vào thẻ cha */
    transition: all 0.3s ease;
    text-shadow: 0 0 15px rgba(0,0,0,0.5); /* Thêm bóng đổ để nổi bật trên ảnh sáng */
}

/* Hiệu ứng khi hover vào card */
.video-card:hover .play-icon {
    color: #fff;
    transform: translate(-50%, -50%) scale(1.1); /* Giữ vị trí tâm và phóng to */
}

.video-card:hover img {
    opacity: 0.7;
    transform: scale(1.05); /* Zoom nhẹ ảnh cho sinh động */
}
/* Footer Button Xem Thêm */
.gallery-footer {
    margin-top: 40px;
    text-align: center;
}

.btn-more {
    display: inline-block;
    padding: 12px 30px;
    background: #f1f1f1;
    color: #333;
    text-decoration: none;
    border-radius: 50px;
    font-size: 14px;
    transition: 0.3s;
}

    .btn-more:hover {
        background: #025E5C;
        color: #fff;
    }

/* Container phân trang */
.pagination-container {
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
}

    .pagination li {
        margin: 0 5px;
    }

        .pagination li a, .pagination li span {
            display: block;
            padding: 8px 16px;
            border: 1px solid #ddd;
            color: #025E5C;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.3s;
        }

        .pagination li.active span {
            background-color: #025E5C;
            color: white;
            border-color: #025E5C;
        }

        .pagination li a:hover {
            background-color: #f1f1f1;
        }

/* Ẩn nút "Xem thêm" cũ nếu bạn đã dùng phân trang số */
.gallery-footer {
    display: none;
}
/* Container bọc ngoài */
.pagination-container {
    margin: 40px 0;
    display: flex;
    justify-content: center;
}

/* Danh sách các nút */
ul.pagination {
    display: flex;
    padding: 0;
    list-style: none;
    gap: 5px; /* Khoảng cách giữa các nút */
}

    ul.pagination li {
        display: inline-block;
    }

        /* Style chung cho các nút link */
        ul.pagination li a,
        ul.pagination li span {
            color: #333;
            padding: 10px 18px;
            text-decoration: none;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            font-weight: 500;
            transition: all 0.3s ease;
            background-color: #fff;
        }

        /* TRẠNG THÁI ACTIVE - Trang hiện tại */
        ul.pagination li.active span {
            background-color: #025E5C !important; /* Màu xanh Học viện */
            color: #fff !important;
            border-color: #025E5C !important;
            cursor: default;
        }

        /* Hiệu ứng Hover cho các nút trang khác */
        ul.pagination li a:hover {
            background-color: #f5f5f5;
            border-color: #025E5C;
            color: #025E5C;
        }

        /* Style cho các nút đầu/cuối/trước/sau */
        ul.pagination li.PagedList-skipToFirst a,
        ul.pagination li.PagedList-skipToLast a,
        ul.pagination li.PagedList-skipToNext a,
        ul.pagination li.PagedList-skipToPrevious a {
            font-weight: bold;
            background-color: #fafafa;
        }
/* CSS này sẽ bắt mọi thẻ li có class chứa chữ active của PagedList */
.pagination-container li.active span,
.pagination-container li.active a {
    background-color: #025E5C !important;
    color: #fff !important;
    border-color: #025E5C !important;
}

/* Đảm bảo các thẻ li nằm ngang hàng */
.pagination-container ul {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 5px;
}
/* Container chính của phân trang */
.pagination-container {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

    /* Danh sách nút */
    .pagination-container ul.pagination {
        display: flex;
        flex-wrap: wrap; /* Cho phép các nút xuống dòng nếu quá dài */
        justify-content: center;
        list-style: none;
        padding: 0;
        gap: 5px;
        margin: 0;
    }

        /* Style cho từng nút bấm */
        .pagination-container ul.pagination li a,
        .pagination-container ul.pagination li span {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 40px; /* Đảm bảo nút đủ to để bấm bằng ngón tay */
            height: 40px;
            padding: 0 10px;
            border: 1px solid #ddd;
            color: #333;
            text-decoration: none;
            border-radius: 5px;
            font-size: 14px;
            background: #fff;
            transition: all 0.2s ease-in-out;
        }

/* Mobile: Khi màn hình rất nhỏ */
@media (max-width: 480px) {
    .pagination-container ul.pagination {
        gap: 3px;
    }

        .pagination-container ul.pagination li a,
        .pagination-container ul.pagination li span {
            min-width: 35px;
            height: 35px;
            font-size: 12px;
            padding: 0 5px;
        }

    /* Ẩn bớt các nút "Đầu" và "Cuối" trên mobile nếu muốn gọn */
    .pagination-container .PagedList-skipToFirst,
    .pagination-container .PagedList-skipToLast {
        display: none;
    }
}