/* 
 * Styles for Fullscreen Slider (PowerPoint Effect)
 */

/* -- Reset and Basic Setup -- */
/* Remove body scroll lock to let header stay naturally and normal scroll function outside of the slider */

/* Force container to match viewport but stay in normal document flow */
.via-fs-container {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 10 !important; /* Thấp hơn header của Woodmart đang thường dùng 300-400 */
    background: #fff;
    perspective: 1200px; /* Needed for 3D page-flip effect */
}

/* The slides wrapper */
.via-fs-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    visibility: hidden;
    overflow: hidden; /* Hide scrollbars as requested */
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0); 
    background: #fff; /* fallback */
    z-index: 1;
}

.via-fs-slide.via-fs-active-slide {
    visibility: visible;
    z-index: 10;
}

/* --- Slide Effect: Slide --- */
.via-fs-effect-slide .via-fs-slide {
    transition: transform 1s ease-in-out;
}

.via-fs-effect-slide .via-fs-slide.via-fs-active-slide {
    transform: translateY(0);
}

.via-fs-effect-slide .via-fs-slide.via-fs-animating-next {
    visibility: visible;
    z-index: 20;
    animation: slideInFromBottom var(--via-fs-duration, 1s) ease-in-out forwards;
}

.via-fs-effect-slide .via-fs-slide.via-fs-animating-prev {
    visibility: visible;
    z-index: 20;
    animation: slideInFromTop var(--via-fs-duration, 1s) ease-in-out forwards;
}

.via-fs-effect-slide .via-fs-slide.via-fs-moving-out-next {
    visibility: visible;
    z-index: 10;
    animation: slideOutToTop var(--via-fs-duration, 1s) ease-in-out forwards;
}

.via-fs-effect-slide .via-fs-slide.via-fs-moving-out-prev {
    visibility: visible;
    z-index: 10;
    animation: slideOutToBottom var(--via-fs-duration, 1s) ease-in-out forwards;
}

@keyframes slideInFromBottom {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}
@keyframes slideInFromTop {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}
@keyframes slideOutToTop {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}
@keyframes slideOutToBottom {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}


/* --- Slide Effect: Fade --- */
.via-fs-effect-fade .via-fs-slide {
    transition: opacity var(--via-fs-duration, 1s) ease-in-out;
    opacity: 0;
}

.via-fs-effect-fade .via-fs-slide.via-fs-active-slide {
    opacity: 1;
}

.via-fs-effect-fade .via-fs-slide.via-fs-animating-next,
.via-fs-effect-fade .via-fs-slide.via-fs-animating-prev {
    visibility: visible;
    z-index: 20;
    opacity: 1;
}

.via-fs-effect-fade .via-fs-slide.via-fs-moving-out-next,
.via-fs-effect-fade .via-fs-slide.via-fs-moving-out-prev {
    visibility: visible;
    z-index: 10;
    opacity: 0;
}


/* --- Slide Effect: Page-Flip (PowerPoint style) --- */
.via-fs-effect-page-flip .via-fs-slide {
    transform-origin: 50% 50%;
}

.via-fs-effect-page-flip .via-fs-slide.via-fs-animating-next {
    visibility: visible;
    z-index: 20;
    animation: flipInNext var(--via-fs-duration, 1s) ease-in-out forwards;
}
.via-fs-effect-page-flip .via-fs-slide.via-fs-moving-out-next {
    visibility: visible;
    z-index: 10;
    animation: flipOutNext var(--via-fs-duration, 1s) ease-in-out forwards;
}
.via-fs-effect-page-flip .via-fs-slide.via-fs-animating-prev {
    visibility: visible;
    z-index: 20;
    animation: flipInPrev var(--via-fs-duration, 1s) ease-in-out forwards;
}
.via-fs-effect-page-flip .via-fs-slide.via-fs-moving-out-prev {
    visibility: visible;
    z-index: 10;
    animation: flipOutPrev var(--via-fs-duration, 1s) ease-in-out forwards;
}

@keyframes flipInNext {
    0% { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0; }
    100% { transform: translateZ(0) rotateX(0deg); opacity: 1; }
}
@keyframes flipOutNext {
    0% { transform: translateZ(0) rotateX(0deg); opacity: 1; }
    100% { transform: translateZ(-1000px) rotateX(90deg); opacity: 0; }
}

@keyframes flipInPrev {
    0% { transform: translateZ(-1000px) rotateX(90deg); opacity: 0; }
    100% { transform: translateZ(0) rotateX(0deg); opacity: 1; }
}
@keyframes flipOutPrev {
    0% { transform: translateZ(0) rotateX(0deg); opacity: 1; }
    100% { transform: translateZ(-1000px) rotateX(-90deg); opacity: 0; }
}


/* --- Dots Navigation --- */
.via-fs-nav-dots {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.via-fs-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.via-fs-dot:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.via-fs-dot.active {
    background-color: transparent;
    border-color: rgba(0, 0, 0, 0.8);
    transform: scale(1.3);
}

/* Specific styling if active background is dark */
body.via-fs-dark-theme .via-fs-dot {
    background-color: rgba(255, 255, 255, 0.3);
}
body.via-fs-dark-theme .via-fs-dot:hover {
    background-color: rgba(255, 255, 255, 0.6);
}
body.via-fs-dark-theme .via-fs-dot.active {
    border-color: rgba(255, 255, 255, 0.8);
    background-color: transparent;
}