@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap');

:root {
    --main-font: 'Be Vietnam Pro', sans-serif; /* Đổi tên font ở đây để áp dụng toàn trang */
}

body {
    font-family: var(--main-font);
}
.glassmorphism {
    background: rgba(26, 26, 30, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.text-gradient {
    background: linear-gradient(to right, #f59e0b, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Geometric Background Animation */
@keyframes blueprint-scroll {
    from { background-position: 0 0; }
    to { background-position: 40px 40px; }
}
.blueprint-bg {
    background-image: 
        linear-gradient(rgba(245, 158, 11, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 158, 11, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: blueprint-scroll 20s linear infinite;
}

/* Coverflow Slider Styles */
.perspective-1000 {
    perspective: 1000px;
}

.coverflow-item {
    position: absolute;
    width: 60%;
    max-width: 700px;
    height: 90%;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transform-style: preserve-3d;
    opacity: 0;
    pointer-events: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    background: #111113; /* fallback */
}

.coverflow-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coverflow-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
    transition: opacity 0.4s;
    opacity: 0;
}

.coverflow-item.active {
    transform: translateX(0) scale(1) translateZ(0);
    opacity: 1;
    z-index: 30;
    pointer-events: auto;
    filter: blur(0px) brightness(1);
}

.coverflow-item.active .coverflow-content {
    opacity: 1;
    transition-delay: 0.2s;
}

.coverflow-item.prev {
    transform: translateX(-65%) scale(0.7) translateZ(-150px);
    opacity: 0.5;
    z-index: 20;
    pointer-events: auto;
    filter: blur(3px) brightness(0.4);
    cursor: pointer;
}

.coverflow-item.next {
    transform: translateX(65%) scale(0.7) translateZ(-150px);
    opacity: 0.5;
    z-index: 20;
    pointer-events: auto;
    filter: blur(3px) brightness(0.4);
    cursor: pointer;
}

/* Hidden items outside the visible scope */
.coverflow-item.hidden-left {
    transform: translateX(-120%) scale(0.5) translateZ(-300px);
    opacity: 0;
    z-index: 10;
}

.coverflow-item.hidden-right {
    transform: translateX(120%) scale(0.5) translateZ(-300px);
    opacity: 0;
    z-index: 10;
}