/*
Theme Name: Theme của BABYRED ai chôm làm chó
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* Slider container và viewport */
.golden-card-slider {
    overflow: visible !important;
}

.golden-card-slider .slider-inner {
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
    align-items: center;
}

.golden-card-slider .flickity-viewport,
.golden-card-slider .flickity-slider {
    overflow: visible !important;
}

.golden-card-slider .flickity-slider {
    display: flex !important;
    align-items: center;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Tất cả slides */
.golden-card-slider .flickity-slider > div {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: all 0.6s ease;
    border-radius: 40px;
    overflow: hidden;
    width: calc(33.333% - 20px) !important;
    margin: 0 10px;
}

/* Responsive - Mobile chỉ show 1 */
@media (max-width: 768px) {
    .golden-card-slider .flickity-slider > div {
        width: 90% !important;
        margin: 0;
    }

    .golden-card-slider .flickity-slider > div.is-selected {
        transform: scale(1);
    }
}

/* Slide active (giữa) */
.golden-card-slider .flickity-slider > div.is-selected {
    filter: none;
    transform: scale(1);
    opacity: 1;
    z-index: 2;
    box-shadow: 0 20px 40px rgba(255, 215, 0, 0.4);
}

/* Slides không active */
.golden-card-slider .flickity-slider > div:not(.is-selected) {
    filter: grayscale(100%) brightness(0.6);
    transform: scale(0.8);
    opacity: 0.7;
    z-index: 1;
}

/* Hover effect */
.golden-card-slider .flickity-slider > div:not(.is-selected):hover {
    filter: grayscale(50%);
    opacity: 0.9;
    transform: scale(0.85);
    cursor: pointer;
}

/* Ẩn slides khi đang drag/animate */
.golden-card-slider.is-dragging .flickity-slider > div:not(.is-selected),
.golden-card-slider.is-animating .flickity-slider > div:not(.is-selected) {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

/* Show lại sau transition */
.golden-card-slider:not(.is-dragging):not(.is-animating) .flickity-slider > div:not(.is-selected) {
    opacity: 0.7 !important;
    transition: all 0.6s ease 0.2s !important;
}

/* Alternative: Fade transition */
.golden-card-slider.fade-transition .flickity-slider > div {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) scale(0.8) !important;
    transition: all 0.6s ease !important;
}

.golden-card-slider.fade-transition .flickity-slider > div.is-selected {
    transform: translateX(-50%) scale(1) !important;
    z-index: 3;
}


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}