:root {
    /* Colors */
    --color-whitesmoke-100: #f8f8f8;
    --color-whitesmoke-200: #efefef;
    --color-white: #fff;
    --color-royalblue: #015de4;
    --color-slategray: #637381;
    --color-gray-100: #897676;
    --color-gray-200: #1e1e1e;
    --color-gray-300: #111928;
    --color-gray-400: rgba(255, 255, 255, 0.68);
    --color-darkslategray: #48545f;
    --color-gold: #fecb00;
    --color-darkgray: #acb1b6;
    --color-darkorange: #ff8115;

    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
}

/* Custom color utilities */
.text-royalblue {
    color: var(--color-royalblue);
}

.bg-royalblue {
    background-color: var(--color-royalblue);
}

.border-royalblue {
    border-color: var(--color-royalblue);
}

.text-gold {
    color: var(--color-gold);
}

.bg-gold {
    background-color: var(--color-gold);
}

.text-darkgray {
    color: var(--color-darkgray);
}

.bg-darkgray {
    background-color: var(--color-darkgray);
}

.text-darkorange {
    color: var(--color-darkorange);
}

.bg-darkorange {
    background-color: var(--color-darkorange);
}

/* Whitesmoke variants */
.bg-whitesmoke-100 {
    background-color: var(--color-whitesmoke-100);
}

.bg-whitesmoke-200 {
    background-color: var(--color-whitesmoke-200);
}

/* Gray variants */
.text-gray-100 {
    color: var(--color-gray-100);
}

.text-content {
    color: var(--color-gray-200);
}

.text-gray-300 {
    color: var(--color-gray-300);
}

.text-gray-400 {
    color: var(--color-gray-400);
}

.bg-gray-100 {
    background-color: var(--color-gray-100);
}

.bg-gray-200 {
    background-color: var(--color-gray-200);
}

.bg-gray-300 {
    background-color: var(--color-gray-300);
}

.bg-gray-400 {
    background-color: var(--color-gray-400);
}
.text-slategray {
    color: var(--color-slategray);
}
@import "tailwindcss";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";


.backdrop-blur {
    --tw-backdrop-blur: blur(8px)
}

.backdrop-blur,
.backdrop-blur-2xl {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, )
}

.backdrop-blur-2xl {
    --tw-backdrop-blur: blur(var(--blur-2xl))
}

.backdrop-blur-lg {
    --tw-backdrop-blur: blur(var(--blur-lg))
}

.backdrop-blur-lg,
.backdrop-blur-xl {
    -webkit-backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, )var(--tw-backdrop-brightness, )var(--tw-backdrop-contrast, )var(--tw-backdrop-grayscale, )var(--tw-backdrop-hue-rotate, )var(--tw-backdrop-invert, )var(--tw-backdrop-opacity, )var(--tw-backdrop-saturate, )var(--tw-backdrop-sepia, )
}

.backdrop-blur-xl {
    --tw-backdrop-blur: blur(var(--blur-xl))
}


.glassy-card {
    border: 1px solid hsl(0, 0%, 100%, 0.5);
    background: hsl(0, 0%, 100%, 0.4);
    backdrop-filter: blur(3px);
    box-shadow: inset 0 0 8px 1px hsl(0, 0%, 100%, 0.5);
}
 header {
     transition: transform 0.4s ease, opacity 0.4s ease;
 }

 .hide-header {
     transform: translateY(-100%);
     opacity: 0;
 }
.card-layer {
    transition: transform 0.6s ease-out;
}

 /* Custom Swiper styles */
 .swiper-button-next,
 .swiper-button-prev {
     color: #015DE4;
     background-color: rgba(255, 255, 255, 0.8);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }

 .swiper-button-next:after,
 .swiper-button-prev:after {
     font-size: 18px;
 }

 .swiper-pagination-bullet {
     width: 10px;
     height: 10px;
 }

 .swiper-pagination-bullet-active {
     background: #015DE4;
 }

 /* Cho phép hiển thị trên desktop */
 @media (min-width: 1024px) {
     .lg\:swiper-reset {
         width: auto !important;
         margin-right: 0 !important;
     }

     .desktop-testimonials {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 2rem;
     }
 }