/* ==================================== */
/* CUSTOM STYLES FOR GB RESOURCE WIDGET */
/* ==================================== */

/* --- 1. Tab Menu Styles --- */
.gb-resource-slider-wrp {
    overflow-x: auto; 
    white-space: nowrap; /* Ngăn các li bị xuống dòng */
    margin-bottom: 40px; 
    /* Ẩn thanh cuộn nếu có thể */
    scrollbar-width: none; /* Firefox */
}
.gb-resource-slider-wrp::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.gb-resource-slider-tab {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex; 
    gap: 32px; 
}

.gb-resource-slider-tab li {
    display: flex;
    align-items: center;
    padding: 10px 0; 
    cursor: pointer;
    font-size: 16px;
    font-weight: 600; 
    color: #323232; 
    position: relative;
    transition: color 0.3s ease;
    gap: 10px;
}
.gb-resource-slider-tab li .gb-tab-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
}

.gb-resource-slider-tab li.active {
    font-weight: 600;
}

/* Đường gạch chân cho tab active */
.gb-resource-slider-tab li.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px; 
    background-color: #ffb800; 
}

/* Ẩn icon timeline.svg trong tab menu (theo mẫu HTML gốc) */
.gb-resource-slider-tab li img.gb-curve {
    display: none; 
}

/* --- 2. Slider Card Styles --- */

/* Container chính */
.gb-resource-tab-repeater-main {
    width: 100%;
    overflow: hidden;
}

/* Ẩn nội dung tab không được chọn */
.gb-resources-tab-main {
    display: none;
}
.gb-resources-tab-main:first-child {
    display: block; /* Mặc định hiển thị tab đầu tiên */
}

/* Container slider */
.gb-resource-tab-slider-wrp {
    width: 100%;
    overflow: visible; /* cho phép tràn hai bên */
    position: relative;
    --gb-peek: 64px; /* khoảng tràn hai bên (desktop) */
}

.gb-resource-tab.swiper,
.gb-resource-tab.swiper-container {
    width: 100%;
    overflow: visible;
}

.gb-resource-tab-repeater-main .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

/* Let Swiper calculate slide widths for fractional slidesPerView (2.5) */
.gb-resource-tab-loop.swiper-slide {
    flex-shrink: 0; /* Để Swiper tự set width theo slidesPerView */
    width: auto;   /* Không ép width để tránh sai tính toán */
    box-sizing: border-box;
}



.gb-resource-featured-image {
    line-height: 0;
    position: relative;
    /* Tỷ lệ khung hình ảnh: 380x280 (giả định) */
    padding-top: 53.68%; /* 280/380 * 100% */
    overflow: hidden;
}

.gb-resource-featured-image a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.gb-resource-featured-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}



.gb-resource-content-box {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}

.gb-resource-cat-date-wrp {
    display: flex;
    justify-content: flex-start;
    font-size: 12px;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.gb-resource-cat-date-wrp a {
    color: #323232;
    background: #E4E4E4;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
}

.gb-resource-date {
    color: #323232;
    font-weight: 600;
    font-size: 16px;
}

.gb-resource-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    text-decoration: none;
    color: #333; 
    transition: color 0.3s ease;
}

.gb-resource-title:hover {
    color: #ffb800; /* Hiệu ứng hover */
}

.gb-resource-title h6 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    max-width: 90%; /* Để lại chỗ cho icon */
}

/* Icon (fal fa-angle-right) */
.gb-resource-title i {
    color: #ffb800; 
    font-size: 16px;
}

/* --- 3. Swiper Navigation & Pagination Styles --- */

.resource-tab-navigation {
    display: flex;
    justify-content: space-between; /* Đẩy các phần tử ra hai bên */
    align-items: center;
    margin-top: 30px;
}

.gb-resource-tab-repeater-main .swiper-pagination {
    text-align: left; 
    width: auto;
    position: static;
    margin: 0;
}

.gb-resource-tab-repeater-main .swiper-pagination-bullet {
    background: #ccc; 
    opacity: 1;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.gb-resource-tab-repeater-main .swiper-pagination-bullet-active {
    background: #ffb800; 
    transform: scale(1.2);
}

.resource-tab-arrow-wrp {
    display: flex;
    gap: 10px; 
}

/* Kiểu dáng mũi tên (dùng class tùy chỉnh trong render PHP) */
.gb-resource-tab-repeater-main .swiper-button-prev,
.gb-resource-tab-repeater-main .swiper-button-next,
.gb-resource-tab-repeater-main [class^="swiper-button-prev-"],
.gb-resource-tab-repeater-main [class^="swiper-button-next-"] {
    position: static; 
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff; 
    border: 1px solid #ccc; 
    margin: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gb-resource-tab-repeater-main .swiper-button-prev:hover,
.gb-resource-tab-repeater-main .swiper-button-next:hover,
.gb-resource-tab-repeater-main [class^="swiper-button-prev-"]:hover,
.gb-resource-tab-repeater-main [class^="swiper-button-next-"]:hover {
    border-color: #ffb800;
}

.gb-resource-tab-repeater-main .swiper-button-prev.swiper-button-disabled,
.gb-resource-tab-repeater-main .swiper-button-next.swiper-button-disabled,
.gb-resource-tab-repeater-main [class^="swiper-button-prev-"].swiper-button-disabled,
.gb-resource-tab-repeater-main [class^="swiper-button-next-"].swiper-button-disabled {
    opacity: 0.5; 
    cursor: default;
    border-color: #ffb800;
}

/* Tùy chỉnh icon mũi tên (Sử dụng CSS content cho Font Awesome) */
.gb-resource-tab-repeater-main .swiper-button-prev::after,
.gb-resource-tab-repeater-main .swiper-button-next::after,
.gb-resource-tab-repeater-main [class^="swiper-button-prev-"]::after,
.gb-resource-tab-repeater-main [class^="swiper-button-next-"]::after {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    font-size: 14px;
    color: #333; 
    position: absolute;
}

.gb-resource-tab-repeater-main .swiper-button-prev::after,
.gb-resource-tab-repeater-main [class^="swiper-button-prev-"]::after {
    content: "\f053"; /* fa-chevron-left */
}

.gb-resource-tab-repeater-main .swiper-button-next::after,
.gb-resource-tab-repeater-main [class^="swiper-button-next-"]::after {
    content: "\f054"; /* fa-chevron-right */
}


/* --- 4. Responsive (Điều chỉnh trên các thiết bị) --- */

@media (max-width: 1200px) {}

@media (max-width: 1024px) {
    .gb-resource-slider-tab { gap: 24px; }
    .gb-resource-tab-slider-wrp { --gb-peek: 48px; }
}

@media (max-width: 767px) {
    .gb-resource-slider-tab {
        gap: 40px;
        overflow: hidden;
        overflow-x: auto;
    }
    .gb-resource-tab-slider-wrp { --gb-peek: 24px; }
    .gb-resource-content-box {
        padding: 15px;
    }
    .gb-resource-title h6 {
        font-size: 16px;
    }
}

/* assets/css/gb-resource.css */

/* --- 1. Sửa lỗi hiển thị slide bị cắt --- */
/* Đã được xử lý ở phần trên, xóa duplicate */

/* --- 2. Sửa lỗi CSS Navigation (Thêm selector cho class mới) --- */

/* Các class cho mũi tên */
.gb-resource-tab-repeater-main .swiper-button-prev,
.gb-resource-tab-repeater-main .swiper-button-next,
.gb-resource-tab-repeater-main [class^="swiper-button-prev-"], /* Selector cho class prev có ID */
.gb-resource-tab-repeater-main [class^="swiper-button-next-"] { /* Selector cho class next có ID */
    position: static; 
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff; 
    border: 2px solid #ffb800;
    margin: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}



.gb-resource-tab-repeater-main .swiper-button-prev::after,
.gb-resource-tab-repeater-main [class^="swiper-button-prev-"]::after {
    content: "\f060";
    color: #ffb800;
}

.gb-resource-tab-repeater-main .swiper-button-next::after,
.gb-resource-tab-repeater-main [class^="swiper-button-next-"]::after {
    content: "\f061";
    color: #ffb800;
}