/*
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ==========================================================================
   Visual Portfolio Modern Card Style (Clean Grid Alignment)
   ========================================================================== */

/* Card Container */
.vp-portfolio__items {
    margin-top: 30px !important;
}

/* Card Wrap - Clean (No border, no shadow, transparent background) */
.vp-portfolio__item-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Card Hover lift */
.vp-portfolio__item-wrap:hover {
    transform: translateY(-6px) !important;
}

/* Image Container - Fixed Aspect Ratio to Align Cards Perfectly */
.vp-portfolio__item-img-wrap {
    aspect-ratio: 16/10 !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    border-bottom: none !important; /* No red highlight line */
    border-radius: 10px !important; /* Keep original rounded corners on images */
}

.vp-portfolio__item-img {
    width: 100% !important;
    height: 100% !important;
}

.vp-portfolio__item-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Forces the image to fill the aspect ratio neatly without distortion */
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.vp-portfolio__item-wrap:hover .vp-portfolio__item-img img {
    transform: scale(1.06) !important;
}

/* Hover Overlay Glassmorphism */
.vp-portfolio__item-overlay {
    background: rgba(0, 58, 93, 0.3) !important; /* Brand Dark Blue #003a5d overlay */
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px) !important;
    transition: opacity 0.4s ease !important;
    opacity: 0 !important;
    border-radius: 10px !important;
}

.vp-portfolio__item-wrap:hover .vp-portfolio__item-overlay {
    opacity: 1 !important;
}

/* Caption Container - Centered and Spaced */
.vp-portfolio__item-caption {
    background: transparent !important;
    padding: 7px 0 15px 0 !important;
    text-align: center !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Hide Meta Categories */
.vp-portfolio__item-meta-categories {
    display: none !important;
}

/* Item Title */
.vp-portfolio__item-meta-title {
    margin: 0 !important;
    line-height: 1.45 !important;
}

/* Item Title Link - Fixed height for perfect row alignment */
.vp-portfolio__item-meta-title a {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 48px !important;
    text-align: center !important;
}

.vp-portfolio__item-meta-title a:hover {
    color: #E2564D !important;
}

/* Filter Bar Styling */
.vp-portfolio__filter-wrap {
    margin-bottom: 25px !important;
}

.vp-portfolio__filter-wrap a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #666666 !important;
    padding: 8px 18px !important;
    border-radius: 30px !important;
    transition: all 0.3s ease !important;
    background: #f5f5f5 !important;
    margin: 0 4px 8px 4px !important;
    display: inline-block !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
}

.vp-portfolio__filter-wrap a:hover {
    background: #eaeaea !important;
    color: #003a5d !important; /* Brand Dark Blue #003a5d */
}

.vp-portfolio__filter-wrap a.vp-filter-active {
    background: #003a5d !important; /* Brand Dark Blue #003a5d */
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 58, 93, 0.2) !important;
}

/* Load More Button Styling */
.vp-portfolio__pagination-wrap {
    margin-top: 40px !important;
}

.vp-portfolio__pagination-wrap a {
    background: #003a5d !important; /* Brand Dark Blue #003a5d */
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    border-radius: 30px !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 58, 93, 0.15) !important;
    border: 1px solid #003a5d !important; /* Brand Dark Blue #003a5d */
}

.vp-portfolio__pagination-wrap a:hover {
    background: #E2564D !important;
    border-color: #E2564D !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(226, 86, 77, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   Global Breadcrumbs Premium Bar (DANANG EVENTS Style)
   ========================================================================== */
.vitracoevent-breadcrumbs-container {
    background: #003a5d !important; /* Brand Dark Blue full-width bar */
    padding: 10px 0 !important;
    margin-bottom: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#vitracoevent-breadcrumbs {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.7) !important; /* Light white for text */
    text-align: left !important; /* Left-aligned */
}

#vitracoevent-breadcrumbs a {
    color: #ffffff !important; /* White links */
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    opacity: 0.85;
}

#vitracoevent-breadcrumbs a:hover {
    color: #E2564D !important; /* Brand Red on hover */
    opacity: 1;
}

#vitracoevent-breadcrumbs .breadcrumb_last {
    color: rgba(255, 255, 255, 0.5) !important; /* Muted white for current page */
    font-weight: 400 !important;
}

/* Fix separators */
#vitracoevent-breadcrumbs span {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Rounded Corners for Single Portfolio/Project Gallery Images */
.single-portfolio .entry-content img,
.single-portfolio .wp-block-gallery img,
.single-portfolio .wp-block-image img {
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

.single-portfolio .entry-content img:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px) !important;
}

/* ==========================================================================
   Related Projects Section (Single Portfolio Pages)
   ========================================================================== */
.vitracoevent-related-projects {
    margin-top: 50px !important;
    margin-bottom: 50px !important; /* Spaces the section away from the footer */
    padding-top: 40px !important;
    border-top: 1px solid #eaeaea !important;
    width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;
}

.vitracoevent-related-projects .related-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #003a5d !important; /* Brand Dark Blue #003a5d */
    margin-bottom: 30px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    position: relative !important;
    padding-left: 15px !important;
}

.vitracoevent-related-projects .related-title::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 18px !important;
    background-color: #E2564D !important; /* Brand Orange-Red accent line */
    border-radius: 2px !important;
}

.related-projects-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
}

.related-project-item {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.related-project-item:hover {
    transform: translateY(-5px) !important;
}

.related-project-link {
    text-decoration: none !important;
    display: block !important;
}

.related-project-img-wrap {
    aspect-ratio: 16/10 !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 10px !important; /* Matches main project cards */
    background-color: #f5f5f5 !important;
}

.related-project-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border-radius: 10px !important;
}

.related-project-item:hover .related-project-img {
    transform: scale(1.06) !important;
}

.related-project-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 58, 93, 0.2) !important; /* Brand Dark Blue #003a5d overlay */
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
    border-radius: 10px !important;
}

.related-project-item:hover .related-project-overlay {
    opacity: 1 !important;
}

.related-project-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 42px !important;
    transition: color 0.3s ease !important;
}

.related-project-link:hover .related-project-title {
    color: #E2564D !important;
}

/* Responsive */
@media (max-width: 921px) {
    .related-projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 544px) {
    .related-projects-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   Default Banner Hero Section (Single Portfolio & Blog Posts)
   ========================================================================== */
.vitracoevent-default-banner-hero {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding: 130px 0 70px 0 !important;
    min-height: 250px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    clear: both !important;
}

.vitracoevent-default-banner-hero .banner-title {
    color: #ffffff !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1.3 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

@media (max-width: 921px) {
    .vitracoevent-default-banner-hero {
        padding: 100px 20px 50px 20px !important;
        min-height: 200px !important;
    }
    .vitracoevent-default-banner-hero .banner-title {
        font-size: 28px !important;
    }
}

@media (max-width: 544px) {
    .vitracoevent-default-banner-hero {
        padding: 80px 15px 40px 15px !important;
        min-height: 180px !important;
    }
    .vitracoevent-default-banner-hero .banner-title {
        font-size: 22px !important;
    }
}

/* Hide default entry title/header inside the main content area to prevent duplication */
.single-portfolio .entry-header,
.single-post .entry-header {
    display: none !important;
}

/* Set article title (H1) inside post content area to 35px, H2 to 30px (User preference) */
.single-post:not(.vitracoevent-legacy-layout) .site-content h1,
.single-portfolio .site-content h1 {
    font-size: 35px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #005cb5 !important;
}

.single-post:not(.vitracoevent-legacy-layout) .site-content h2,
.single-portfolio .site-content h2 {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #005cb5 !important;
}

/* ==========================================================================
   Single Post 2-Column Responsive Layout
   ========================================================================== */
@media (min-width: 922px) {
    .single-post .site-content .ast-container {
        display: flex !important;
        gap: 40px !important;
        align-items: flex-start !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    .single-post .site-content .ast-container .elementor {
        flex: 1 !important;
        max-width: 72% !important;
        width: 72% !important;
        box-sizing: border-box !important;
    }
    .vitracoevent-latest-posts-sidebar {
        width: 25% !important;
        max-width: 25% !important;
        position: sticky !important;
        top: 100px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   Single Post Sidebar (Tin tức mới nhất)
   ========================================================================== */
.vitracoevent-latest-posts-sidebar {
    background: #ffffff !important;
    padding: 25px !important;
    border-radius: 10px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04) !important;
    border: 1px solid #eaeaea !important;
    box-sizing: border-box !important;
    margin-bottom: 40px !important;
}

.vitracoevent-latest-posts-sidebar .sidebar-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #003a5d !important; /* Brand Dark Blue */
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    position: relative !important;
    padding-left: 12px !important;
    border-left: 4px solid #E2564D !important; /* Accent Red line */
    line-height: 1.2 !important;
}

.latest-posts-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.latest-post-item {
    border-bottom: 1px solid #f2f2f2 !important;
    padding-bottom: 15px !important;
}

.latest-post-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.latest-post-link {
    display: flex !important;
    gap: 12px !important;
    text-decoration: none !important;
}

.latest-post-thumb-wrap {
    width: 70px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #f5f5f5 !important;
}

.latest-post-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
}

.latest-post-placeholder {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important;
    color: #888 !important;
    background: #eee !important;
}

.latest-post-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.latest-post-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 35px !important;
    transition: color 0.3s ease !important;
}

.latest-post-link:hover .latest-post-title {
    color: #E2564D !important;
}

.latest-post-date {
    font-size: 11px !important;
    color: #888888 !important;
}

/* Mobile and Tablet optimization */
@media (max-width: 921px) {
    .single-post .site-content .ast-container {
        display: block !important;
    }
    .single-post .site-content .ast-container .elementor {
        width: 100% !important;
        max-width: 100% !important;
    }
    .vitracoevent-latest-posts-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 40px !important;
    }
}

/* ==========================================================================
   Table of Contents (Mục lục bài viết)
   ========================================================================== */
.vitracoevent-toc-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 15px 20px !important;
    margin: 25px auto 35px auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 600px !important;
}

.vitracoevent-toc-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    user-select: none !important;
}

.vitracoevent-toc-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #003a5d !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Unicode list icon replacement */
.vitracoevent-toc-title::before {
    content: "\2630" !important;
    font-size: 14px !important;
    color: #003a5d !important;
}

.vitracoevent-toc-toggle {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #003a5d !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.vitracoevent-toc-toggle-icon {
    transition: transform 0.3s ease !important;
    width: 6px !important;
    height: 6px !important;
    border-left: 2px solid #003a5d !important;
    border-bottom: 2px solid #003a5d !important;
    transform: rotate(-45deg) !important; /* Arrow down default */
    margin-bottom: 3px !important;
}

.vitracoevent-toc-box.open .vitracoevent-toc-toggle-icon {
    transform: rotate(135deg) !important; /* Arrow up */
    margin-bottom: -1px !important;
}

.vitracoevent-toc-content {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease-out, margin-top 0.35s ease !important;
    margin-top: 0 !important;
}

.vitracoevent-toc-box.open .vitracoevent-toc-content {
    max-height: 1000px !important;
    margin-top: 15px !important;
}

.vitracoevent-toc-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vitracoevent-toc-list li {
    margin-bottom: 8px !important;
    line-height: 1.45 !important;
}

.vitracoevent-toc-list li a {
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.vitracoevent-toc-list li a:hover {
    color: #E2564D !important;
}

.vitracoevent-toc-list .toc-depth-3 {
    padding-left: 20px !important;
    font-weight: 400 !important;
}
.vitracoevent-toc-list .toc-depth-3 a {
    font-size: 13px !important;
    color: #64748b !important;
}

/* ==========================================================================
   News Card Styling (Tin Tức Grid Cards - Enforced Equal Heights)
   ========================================================================== */
/* Image layout for all screens */
.uael-post__thumbnail {
    aspect-ratio: 16/10 !important;
    width: 100% !important;
    overflow: hidden !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.uael-post__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    transition: transform 0.5s ease !important;
}

/* Card inner wrap default styling */
.uael-post__inner-wrap {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    background: #ffffff !important;
    border: 1px solid #eaeaea !important;
    box-sizing: border-box !important;
}

.uael-post__inner-wrap:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.uael-post__inner-wrap:hover .uael-post__thumbnail img {
    transform: scale(1.05) !important;
}

/* Equal Height logic on Desktop and Tablet (stacked views do not need this) */
@media (min-width: 768px) {
    .uael-post__inner-wrap {
        height: 520px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .uael-post__content-wrap {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        padding: 25px !important;
    }
    
    .uael-post__title {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        height: 48px !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
    }
    
    .uael-post__excerpt {
        flex: 1 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 20px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #666666 !important;
    }
    
    .uael-post__read-more {
        align-self: flex-start !important;
        margin-top: auto !important;
    }
}

/* ==========================================================================
   Revert Layout for Legacy Landing Page Posts
   ========================================================================== */
.vitracoevent-legacy-layout.single-post .entry-header {
    display: block !important;
}
.vitracoevent-legacy-layout.single-post .site-content .ast-container {
    display: block !important;
}
.vitracoevent-legacy-layout.single-post .site-content #primary,
.vitracoevent-legacy-layout.single-post .site-content .ast-container .elementor {
    max-width: 100% !important;
    width: 100% !important;
    flex: none !important;
}
.vitracoevent-legacy-layout .vitracoevent-latest-posts-sidebar,
.vitracoevent-legacy-layout .vitracoevent-toc-box,
.vitracoevent-legacy-layout .vitracoevent-default-banner-hero {
    display: none !important;
}