/* * MODULE: ADVANCED ANIMATIONS
 * Description: Hover effects, Transitions, Interactive states
 */

/* ==========================================================================
   1. NAVIGATION MENU ANIMATIONS
   ========================================================================== */

/* --- Link Hover Effect (Underline Slide) --- */
.wp-block-navigation .wp-block-navigation-item__content {
    position: relative;
    padding-bottom: 4px; /* Khoảng cách cho gạch chân */
}

/* Tạo đường kẻ ảo */
.wp-block-navigation .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--wp--preset--color--accent); /* Màu cam accent */
    transition: width 0.3s ease-in-out;
}

/* Khi hover: Kéo dài đường kẻ ra 100% */
.wp-block-navigation .wp-block-navigation-item__content:hover::after {
    width: 100%;
}

/* --- Submenu Slide Down Effect --- */
.wp-block-navigation .wp-block-navigation__submenu-container {
    display: block !important; /* Ghi đè display:none mặc định của WP */
    visibility: hidden;        /* Ẩn bằng visibility để tránh click nhầm */
    opacity: 0;                /* Trong suốt hoàn toàn */
    transform: translateY(-10px); /* Dịch lên trên một chút */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Hiệu ứng trượt mượt */
    
    /* Style cơ bản cho submenu */
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border-top: 3px solid var(--wp--preset--color--primary);
}

/* Khi hover vào li cha: Hiện submenu */
.wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Trượt về vị trí gốc */
}


/* ==========================================================================
   2. SECTOR GRID CARDS (WP COVER BLOCK)
   ========================================================================== */

/* Chỉ áp dụng cho các Cover bên trong Column (Tránh ảnh hưởng Hero Section) */
.wp-block-column .wp-block-cover {
    overflow: hidden; /* Cắt phần ảnh phóng to thừa ra */
    cursor: pointer;
}

/* --- Image Zoom Effect --- */
.wp-block-column .wp-block-cover__image-background {
    transition: transform 0.5s ease, filter 0.5s ease;
    transform-origin: center;
}

/* Khi hover vào Card: Zoom ảnh và làm tối đi chút */
.wp-block-column .wp-block-cover:hover .wp-block-cover__image-background {
    transform: scale(1.1); /* Phóng to 110% */
    filter: brightness(0.8); /* Giảm độ sáng còn 80% */
}

/* --- Content Slide Up Effect --- */
/* Target nội dung bên trong Card */
.wp-block-column .wp-block-cover__inner-container .wp-block-group {
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
    transform: translateY(20px); /* Vị trí mặc định: Dịch xuống 20px */
    opacity: 0.9;
}

/* Khi hover vào Card: Nội dung trượt lên và rõ nét */
.wp-block-column .wp-block-cover:hover .wp-block-cover__inner-container .wp-block-group {
    transform: translateY(0); /* Về vị trí gốc */
    opacity: 1;
}

/* Hiệu ứng riêng cho nút "SEE MORE" (đường link) */
.wp-block-column .wp-block-cover a {
    display: inline-block;
    transition: transform 0.3s ease;
}

.wp-block-column .wp-block-cover:hover a {
    transform: translateX(5px); /* Dịch sang phải nhẹ khi hover */
}


/* ==========================================================================
   3. GLOBAL BUTTONS (INTERACTIVE)
   ========================================================================== */

.wp-block-button__link,
.wp-element-button {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    top: 0;
}

/* Hover: Nảy lên nhẹ và đổ bóng sâu hơn */
.wp-block-button__link:hover:not(.has-background),
.wp-element-button:hover:not(.has-background) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Active (Click): Lún xuống */
.wp-block-button__link:active,
.wp-element-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ==========================================================================
   4. SCROLL REVEAL ANIMATIONS
   ========================================================================== */
.scroll-trigger-init {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.scroll-trigger-init.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.wp-block-column:nth-child(2) .scroll-trigger-init { transition-delay: 0.2s; }
.wp-block-column:nth-child(3) .scroll-trigger-init { transition-delay: 0.4s; }
.wp-block-column:nth-child(4) .scroll-trigger-init { transition-delay: 0.6s; }


/* ==========================================================================
   5. LIGHTBOX GALLERY (MODAL)
   ========================================================================== */

/* Container chính (Ẩn mặc định) */
.fkse-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999; /* Trên tất cả mọi thứ */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Khi kích hoạt */
.fkse-lightbox.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Nền đen mờ */
.fkse-lightbox__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    cursor: zoom-out;
}

/* Khu vực hiển thị ảnh */
.fkse-lightbox__content {
    position: relative;
    z-index: 100000;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ảnh Gallery */
.fkse-lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border: 2px solid #fff;
    transition: opacity 0.15s ease;
}

/* Đếm số trang (1/5) */
.fkse-lightbox__counter {
    color: #fff;
    margin-top: 10px;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Nút điều hướng chung */
.fkse-lightbox__close,
.fkse-lightbox__prev,
.fkse-lightbox__next {
    position: absolute;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 40px;
    line-height: 1;
    padding: 10px;
    transition: color 0.2s, transform 0.2s;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fkse-lightbox__close:hover,
.fkse-lightbox__prev:hover,
.fkse-lightbox__next:hover {
    color: #ffffff;
    transform: scale(1.1);
}

/* Vị trí các nút */
.fkse-lightbox__close {
    top: 20px;
    right: 20px;
    font-size: 50px;
}

.fkse-lightbox__prev {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.fkse-lightbox__next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* Mobile responsive cho Lightbox */
@media (max-width: 768px) {
    .fkse-lightbox__prev,
    .fkse-lightbox__next {
        font-size: 30px;
        padding: 5px;
    }
    .fkse-lightbox__img {
        max-width: 95vw;
    }
}

/* ==========================================================================
   6. ABOUT US MODAL (CRITICAL FIX)
   ========================================================================== */

/* Wrapper Chính */
.fkse-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999 !important; /* Đảm bảo trên tất cả mọi thứ (hơn cả Header Fixed) */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Trạng thái Ẩn (Mặc định) */
    opacity: 0;
    visibility: hidden; /* Dùng visibility để tránh click nhầm */
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Trạng thái Active (Hiện) */
.fkse-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Nền tối */
.fkse-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Tăng độ tối lên 85% */
    backdrop-filter: blur(5px);
    z-index: 1;
}

/* Hộp nội dung */
.fkse-modal__content {
    position: relative;
    z-index: 2; /* Nổi trên overlay */
    background: #fff;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    
    /* Animation Slide Up */
    transform: translateY(50px);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.fkse-modal.active .fkse-modal__content {
    transform: translateY(0);
}

/* Header Modal */
.fkse-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
    background: #fff; /* Đảm bảo nền trắng */
}

.fkse-modal__close {
    background: none;
    border: none;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
    padding: 0;
}

.fkse-modal__close:hover {
    color: var(--wp--preset--color--accent);
}

/* Body Modal (Scrollable) */
.fkse-modal__body {
    padding: 30px;
    overflow-y: auto;
    max-height: calc(90vh - 80px); /* Trừ đi chiều cao header */
}

/* Fix Mobile */
@media (max-width: 768px) {
    .fkse-modal__content {
        width: 95%;
        max-height: 85vh;
    }
    .fkse-modal__body {
        padding: 20px;
    }
}