/* assets/css/frontend.css */

/* =========================================
   1. CẤU HÌNH CHUNG (GENERAL)
   ========================================= */
.pag-gallery-wrapper {
    margin: 20px 0;
    box-sizing: border-box;
    width: 100%;
}

.pag-gallery-wrapper * {
    box-sizing: border-box;
}

.pag-gallery-item {
    position: relative;
    overflow: hidden; /* Quan trọng cho hiệu ứng trượt */
    border-radius: 4px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.pag-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease; /* Tăng thời gian mượt mà hơn */
    border-radius: 4px;
}

.pag-lightbox-trigger {
    display: block;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    line-height: 0;
}

/* =========================================
   2. VIDEO PLACEHOLDER
   ========================================= */
.pag-video-placeholder { position: relative; display: block; }
.pag-play-button {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 48px; height: 48px; background: rgba(255, 255, 255, 0.9);
    border-radius: 50%; text-align: center; line-height: 48px; font-size: 20px;
    color: #333; z-index: 5; /* Z-index cao để nằm trên overlay */
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: transform 0.3s ease;
}
.pag-gallery-item:hover .pag-play-button {
    transform: translate(-50%, -50%) scale(1.1); color: #f00; background: #fff;
}

/* =========================================
   3. CÁC LAYOUT (MASONRY, GRID...)
   ========================================= */
/* Masonry */
.pag-layout-masonry { column-count: 3; column-gap: 15px; }
.pag-layout-masonry .pag-gallery-item { display: inline-block; width: 100%; margin-bottom: 15px; break-inside: avoid; }
@media (max-width: 768px) { .pag-layout-masonry { column-count: 2; } }
@media (max-width: 480px) { .pag-layout-masonry { column-count: 1; } }

/* Thumbnails */
.pag-layout-thumbnails { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pag-layout-thumbnails .pag-gallery-item { margin-bottom: 0; aspect-ratio: 1 / 1; }
.pag-layout-thumbnails img { width: 100%; height: 100%; object-fit: cover; }

/* Slideshow */
.pag-layout-slideshow .pag-gallery-item { display: none; }
.pag-layout-slideshow .pag-gallery-item:first-child { display: block; width: 100%; cursor: pointer; }
.pag-layout-slideshow .pag-gallery-item:first-child::after {
    content: '\f232'; font-family: 'dashicons'; position: absolute; bottom: 20px; right: 20px;
    background: rgba(0,0,0,0.7); color: #fff; padding: 10px; border-radius: 4px; pointer-events: none;
}

/* Image Browser */
.pag-layout-image_browser { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pag-layout-image_browser .pag-gallery-item:first-child { grid-column: 1 / -1; margin-bottom: 10px; }
.pag-layout-image_browser .pag-gallery-item { margin-bottom: 0; cursor: pointer; aspect-ratio: 16/9; }
.pag-layout-image_browser img { height: 100%; object-fit: cover; }

/* Compact */
.pag-layout-compact { display: flex; flex-wrap: wrap; gap: 2px; }
.pag-layout-compact .pag-gallery-item { width: calc(25% - 2px); margin: 0; border-radius: 0; }
.pag-layout-compact img { border-radius: 0; }

/* Mosaic */
.pag-layout-mosaic { display: flex; flex-wrap: wrap; gap: 5px; }
.pag-layout-mosaic .pag-gallery-item { flex-grow: 1; height: 250px; margin: 0; border-radius: 0; }
.pag-layout-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.pag-layout-mosaic::after { content: ''; flex-grow: 99999; }

/* Blog Style (Riêng layout này không dùng hiệu ứng hover chữ trượt lên vì đã có chữ bên dưới) */
.pag-layout-blog_style { display: flex; flex-direction: column; gap: 40px; max-width: 800px; margin: 0 auto; }
.pag-layout-blog_style .pag-item-title {
    display: block !important; position: static !important; background: transparent !important; color: #333 !important;
    text-align: left; font-size: 18px; font-weight: bold; margin-top: 15px; padding: 0; opacity: 1 !important; transform: none !important;
}

/* =========================================
   4. TABS & POPUP
   ========================================= */
.pag-category-gallery-container { margin: 20px 0; }
.pag-tab-nav { list-style: none; padding: 0; margin: 0 0 20px 0; display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid #ddd; }
.pag-tab-link { display: block; padding: 10px 20px; text-decoration: none; color: #555; border: 1px solid transparent; border-bottom: none; font-weight: 600; cursor: pointer; }
.pag-tab-link.active { color: #000; border-bottom: 2px solid #000; }
.pag-tab-content .pag-tab-pane { display: none; }
.pag-tab-content .pag-tab-pane.active { display: block; animation: fadeEffect 0.5s; }
@keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }

/* Magnific Popup Arrows */
.mfp-arrow { opacity: 1 !important; margin: 0 !important; top: 50% !important; margin-top: -55px !important; padding: 0 !important; width: 90px !important; height: 110px !important; display: flex !important; align-items: center; justify-content: center; }
.mfp-arrow:before, .mfp-arrow:after { display: none !important; border: none !important; }
.mfp-arrow-left { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 60px 60px !important; left: 0 !important; }
.mfp-arrow-right { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 60px 60px !important; right: 0 !important; }
.mfp-arrow:hover { opacity: 0.8 !important; background-color: rgba(0,0,0,0.1) !important; border-radius: 5px; }
.mfp-close { opacity: 1 !important; color: #FFF !important; font-size: 40px !important; right: 10px !important; top: 10px !important; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

/* ==========================================================================
   9. HIỆU ỨNG HOVER PRO (ÁP DỤNG CHO TẤT CẢ TRỪ BLOG STYLE)
   ========================================================================== */

/* 1. Lớp phủ tối màu (Overlay) */
.pag-gallery-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); /* Gradient đẹp hơn màu đen đặc */
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

/* Hiện lớp phủ khi hover */
.pag-gallery-item:hover::before {
    opacity: 1;
}

/* Zoom ảnh khi hover */
.pag-gallery-item:hover img {
    transform: scale(1.1); /* Zoom lớn hơn chút */
}

/* 2. Tiêu đề/Mô tả trượt từ dưới lên */
.pag-item-title {
    display: block !important; /* Bắt buộc hiện */
    position: absolute;
    bottom: -60px; /* Giấu xuống dưới đáy (chiều cao ước lượng của title) */
    left: 0;
    width: 100%;
    padding: 15px;
    background: transparent !important; /* Xóa nền trắng mặc định */
    color: #fff !important;
    text-align: center;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    transition: bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Hiệu ứng trượt mượt */
    z-index: 3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none; /* Để click xuyên qua vào ảnh */
}

/* Trượt tiêu đề lên khi hover */
.pag-gallery-item:hover .pag-item-title {
    bottom: 0;
}

/* =========================================
   10. TABS STYLES (ELEMENTOR COMPATIBLE)
   ========================================= */
.pag-category-gallery-container {
    margin: 20px 0;
    display: flex;
    flex-direction: column; /* Mặc định cột cho Horizontal */
}

/* --- Navigation --- */
.pag-tab-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border-bottom: 2px solid #eee;
}

.pag-tab-link {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #555;
    background: #f8f9fa;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pag-tab-link:hover {
    background: #e9ecef;
    color: #333;
}

.pag-tab-link.active {
    background: #0073aa; /* Màu chủ đạo */
    color: #fff;
    border-color: #0073aa;
}

/* --- Content --- */
.pag-tab-content {
    width: 100%;
}
.pag-tab-content .pag-tab-pane {
    display: none;
    animation: fadeIn 0.5s;
}
.pag-tab-content .pag-tab-pane.active {
    display: block;
}

/* --- LAYOUT: HORIZONTAL --- */
.pag-tabs-horizontal .pag-tab-nav {
    border-bottom: 2px solid #eee;
}
/* Căn chỉnh */
.pag-tabs-align-left .pag-tab-nav { justify-content: flex-start; }
.pag-tabs-align-center .pag-tab-nav { justify-content: center; }
.pag-tabs-align-right .pag-tab-nav { justify-content: flex-end; }

/* --- LAYOUT: VERTICAL --- */
.pag-tabs-vertical {
    flex-direction: row; /* Chuyển container thành hàng ngang */
    gap: 20px;
}

.pag-tabs-vertical .pag-tab-nav {
    flex-direction: column; /* Nav thành cột dọc */
    border-bottom: none;
    border-right: 2px solid #eee;
    min-width: 200px;
    margin: 0;
}

.pag-tabs-vertical .pag-tab-link {
    border-radius: 4px; /* Bo tròn đều */
    border: 1px solid transparent;
    text-align: left;
    margin-bottom: 5px;
}

.pag-tabs-vertical .pag-tab-link.active {
    border-right: 4px solid #005a87; /* Điểm nhấn bên phải */
}

/* Responsive cho Vertical: Trên mobile chuyển về Horizontal */
@media (max-width: 768px) {
    .pag-tabs-vertical {
        flex-direction: column;
    }
    .pag-tabs-vertical .pag-tab-nav {
        flex-direction: row;
        border-right: none;
        border-bottom: 2px solid #eee;
        width: 100%;
        overflow-x: auto; /* Cho phép cuộn ngang nếu nhiều tab */
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   11. XỬ LÝ KHI CÓ NHIỀU TAB (ADVANCED)
   ========================================= */

/* --- 1. Tab Ngang: Tự động xuống dòng gọn gàng --- */
.pag-tabs-horizontal .pag-tab-nav {
    flex-wrap: wrap; /* Cho phép xuống dòng */
}
/* Tùy chọn: Nếu muốn cuộn ngang trên mobile thay vì xuống dòng (kiểu Shopee) */
@media (max-width: 768px) {
    .pag-tabs-horizontal .pag-tab-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px; /* Chừa chỗ cho thanh cuộn */
    }
    .pag-tabs-horizontal .pag-tab-item {
        flex-shrink: 0; /* Không bị co lại */
    }
}

/* --- 2. Tab Dọc: Sticky Menu (Trượt theo nội dung) --- */
.pag-tabs-vertical .pag-tab-nav {
    /* Làm cho menu dính khi cuộn */
    position: -webkit-sticky;
    position: sticky;
    top: 20px; /* Cách mép trên màn hình 20px */
    
    /* Giới hạn chiều cao và cho phép cuộn nội bộ nếu danh sách tab quá dài */
    max-height: 80vh; 
    overflow-y: auto;
    
    /* Thẩm mỹ */
    height: fit-content;
    padding-right: 10px; /* Tránh thanh cuộn đè nội dung */
}

/* Tùy chỉnh thanh cuộn cho đẹp (Webkit browsers) */
.pag-tabs-vertical .pag-tab-nav::-webkit-scrollbar {
    width: 4px;
}
.pag-tabs-vertical .pag-tab-nav::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}