/* CAR LISTING MODULE CSS */
.section-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
    flex-wrap: wrap;
}
.section-title-wrap a { display: flex; align-items: center; gap: 12px; height: 50px; }
.section-title-wrap img { flex-shrink: 0; height: 45%; width: auto; object-fit: contain; }

.product-tabs {
    display: flex;
    gap: 10px;
    flex: 1;
    justify-content: center;
}
.listing-hotline {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.listing-hotline .info { line-height: 1.2; }
.product-tabs a {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    padding: 8px 18px; border-radius: 4px; background: transparent; color: var(--clr-text-main);
    display: inline-flex; align-items: center; gap: 8px; transition: 0.3s;
}
.product-tabs a span { font-size: 16px; margin-top: -2px; }
.product-tabs a.active { background: #E6EDF5; color: var(--clr-primary); }

.car-coverflow-slider {
    width: 100%;
    padding-top: 10px; /* Top padding uses the 50% card as standard, so minimal padding is needed */
    padding-bottom: 60px; /* Space for pagination */
    overflow: hidden;
}

.car-coverflow-slider .swiper-wrapper {
    align-items: center; /* Vertically center all slides relative to the tallest one */
}

.car-coverflow-slider .swiper-slide {
    width: calc(25% - 10px); /* 25% width minus gap */
    opacity: 0.5;
    transition: opacity 0.4s ease; /* Removed width transition to fix Swiper loop jitter */
    display: flex;
    justify-content: center;
    height: auto; /* Prevent stretching to full height */
}

.car-coverflow-slider .swiper-slide .car-card {
    width: 100%; /* Ensure card fills the slide percentage */
    height: max-content; /* Override the 100% height from grid layout so it doesn't stick to top */
}

.car-coverflow-slider .swiper-slide-active {
    width: calc(50% - 10px); /* 50% width minus gap */
    opacity: 1;
    z-index: 10;
}

/* Adjust sizes for smaller screens */
@media (min-width: 992px) {
    /* Removed font-size/padding transitions to prevent layout thrashing */
    .car-coverflow-slider .swiper-slide-active .car-title { font-size: 26px; margin-bottom: 20px; }
    .car-coverflow-slider .swiper-slide-active .car-badge { font-size: 13px; padding: 6px 18px; top: 20px; left: 20px; }
    .car-coverflow-slider .swiper-slide-active .spec-item { font-size: 13px; gap: 8px; }
    .car-coverflow-slider .swiper-slide-active .spec-item i { font-size: 18px; }
    .car-coverflow-slider .swiper-slide-active .car-specs-bar { padding: 18px 10px; margin-bottom: 25px; }
    .car-coverflow-slider .swiper-slide-active .v-name { font-size: 15px; padding-left: 10px; }
    .car-coverflow-slider .swiper-slide-active .v-price { font-size: 18px; padding-right: 10px; }
    .car-coverflow-slider .swiper-slide-active .car-versions { gap: 12px; margin-bottom: 25px; }
    .car-coverflow-slider .swiper-slide-active .btn-card-primary,
    .car-coverflow-slider .swiper-slide-active .btn-card-outline { font-size: 14px; padding: 14px 10px; }
    .car-coverflow-slider .swiper-slide-active .btn-card-hotline,
    .car-coverflow-slider .swiper-slide-active .btn-card-zalo { width: 48px; height: 48px; font-size: 18px; }
    .car-coverflow-slider .swiper-slide-active .btn-card-zalo img { width: 24px !important; height: 24px !important; }
}

@media (max-width: 991px) {
    .car-coverflow-slider .swiper-slide { width: calc(30% - 10px); }
    .car-coverflow-slider .swiper-slide-active { width: calc(60% - 10px); }
    .product-tabs { overflow-x: auto; padding-bottom: 5px; }
}

@media (max-width: 575px) {
    .car-coverflow-slider .swiper-slide { width: calc(85% - 5px); }
    .car-coverflow-slider .swiper-slide-active { width: calc(85% - 5px); }
}

.swiper-pagination-bullet { background: var(--clr-primary, #00a6ff); }
.swiper-button-next, .swiper-button-prev { color: var(--clr-primary, #00a6ff); opacity: 0.5; transition: 0.3s; }
.swiper-button-next:hover, .swiper-button-prev:hover { opacity: 1; }