/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* ============================================================================
   CSS VARIABLES
   ============================================================================ */

:root {
    /* Brand Colors */
    --color-primary: #0c6465;
    --color-secondary: #ffce7b;
    --color-black: #000;
    --color-white: #fff;

    /* Container Widths */
    --container-width-xs: 880px;
    --container-width-sm: 1068px;
    --container-width-base: 1080px;
    --container-width-md: 1200px;

    /* Container Padding */
    --container-padding: 30px;
    --container-padding-mobile: 15px;

    /* Responsive Breakpoints */
    --breakpoint-md: 1200px;
    --breakpoint-lg: 1400px;

    /* Common Spacing */
    --spacing-xs: 10px;
    --spacing-sm: 20px;
    --spacing-md: 30px;
    --spacing-lg: 60px;
    --spacing-xl: 100px;



    /* New Semantic Font System */
    --hdev-font-body: 'BT BeauSans', sans-serif;
    --hdev-font-heading: 'Classy Vogue', serif;
    --hdev-font-subheading: 'UTM Edwardian', cursive;

    /* Global Colors */
    --hdev-color-heading-text: linear-gradient(to top, #0c6465 0%, #169291 100%);
    --hdev-gradient-gold: linear-gradient(to right, #C19149 0%, #FCE398 50%, #fedf8c 100%);
    --hdev-gold: #fedf8c;
    /* Standard Icon Size (Desktop) */
    --hdev-icon-size: 60px;

    /* Typography - Font Sizes */
    --hdev-fs-nav-tabs: 1.25rem;

    /* Typography - Font Sizes Scale (Standardized) */

    /* Heading Scale */
    --hdev-fs-h1: clamp(2.5rem, 5vw + 1rem, 3.8rem);
    /* 40px -> 60px */
    --hdev-fs-h2: clamp(2rem, 4vw + 0.5rem, 3rem);
    /* 32px -> 48px */
    --hdev-fs-h3: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
    /* 24px -> 36px */
    --hdev-fs-h4: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
    /* 20px -> 28px */
    --hdev-fs-h5: clamp(1.1rem, 1vw + 0.5rem, 1.25rem);
    /* 17.6px -> 20px */

    /* VISUAL CORRECTION - Tinh chỉnh riêng cho Font đặc thù */
    /* Heading (Classy Vogue) - Nét dày, nên size vừa phải */
    --hdev-fs-heading-opt: clamp(1.5rem, 2vw + 1rem, 2.2rem);
    /* Desktop ~2rem */

    /* Sub Heading (UTM Edwardian) - Script mảnh, cần size to hơn */
    --hdev-fs-subheading-opt: clamp(2rem, 3vw + 1rem, 2rem);
    /* Desktop ~2.7rem - 3rem */

    /* Body Scale */
    --hdev-fs-body-lg: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);
    /* 16px -> 20px */
    --hdev-fs-body-base: clamp(0.9375rem, 0.5vw + 0.5rem, 1rem);
    /* 15px -> 16px */
    --hdev-fs-body-sm: 0.875rem;
    /* 14px */
}

/* Global Typography Override */
body,
p,
.entry-content,
.entry-summary,
.nav>li>a,
.ux-menu-link__text,
.flatsome-text-font {
    font-family: var(--hdev-font-body);
}

/* ============================================================================
   FULLPAGE.JS STYLES - SHARED ACROSS ALL MODULES
   ============================================================================ */

.hdev-fullpage .fp-overflow,
.fp-section .fp-overflow {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Desktop: Full Height Image Columns */
@media (min-width: 850px) {

    body:not(.ux-builder-active) .hdev-fullpage .col .img.has-hover img,
    body:not(.ux-builder-active) .fp-section .col .img.has-hover img {
        min-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
        margin: 0 !important;
    }

    body:not(.ux-builder-active) .hdev-fullpage .col:has(.img.has-hover),
    body:not(.ux-builder-active) .fp-section .col:has(.img.has-hover) {
        height: 100vh !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body:not(.ux-builder-active) .hdev-fullpage .col:has(.img.has-hover) .img.has-hover,
    body:not(.ux-builder-active) .fp-section .col:has(.img.has-hover) .img.has-hover {
        flex: 1 !important;
        height: 100% !important;
        min-height: 100vh !important;
    }

    body:not(.ux-builder-active) .hdev-fullpage,
    body:not(.ux-builder-active) .fp-section {
        overflow: hidden !important;
        max-height: 100vh !important;
        position: relative !important;
    }
}

/* Mobile: Natural Flow */
@media (max-width: 849px) {
    :root {
        --hdev-size-h1: 2.25rem;
        --hdev-size-h2: 2rem;
        --hdev-size-h3: 1.75rem;
        --hdev-size-h4: 1.375rem;
    }

    body:not(.ux-builder-active) .hdev-fullpage,
    body:not(.ux-builder-active) .fp-section {
        overflow: visible !important;
        max-height: none !important;
        min-height: auto !important;
    }
}

/* ============================================================================
   ADMIN BAR & HEADER FIXES
   ============================================================================ */

body.admin-bar:not(.ux-builder-active) #main,
body.admin-bar:not(.ux-builder-active) .fullpage-wrapper {
    padding-top: 32px !important;
    position: relative;
    top: 0 !important;
}

#header,
.header-wrapper {
    z-index: 999 !important;
}

/* ============================================================================
   CUSTOM BLOG POSTS SLIDER (Class: hdev-blog-news)
   ============================================================================ */

/* Title Styling */
.hdev-blog-news .box-blog-post .post-title {
    font-family: var(--hdev-font-americana);
    font-size: var(--hdev-fs-nav-tabs);
    text-align: left;
    margin-bottom: 0;
}

.hdev-blog-news .box-blog-post .post-title a {
    color: #1a1a1a;
    text-decoration: none;
}

.hdev-blog-news .box-blog-post .post-title a:hover {
    color: var(--color-primary);
}

/* Force Text Container Left Align */
.hdev-blog-news .box-blog-post .box-text,
.hdev-blog-news .box-blog-post .box-text-inner {
    text-align: left;
}

/* Meta Info: Category + Date Inline */
.hdev-blog-news .box-blog-post .post-meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-family: var(--hdev-font-sans);
    font-size: 0.875rem;
    opacity: 0.7;
    text-align: left;
}

.hdev-blog-news .box-blog-post .post-meta-info .post-category {
    font-weight: 500;
    color: #333;
    position: relative;
    padding-right: 1rem;
}

.hdev-blog-news .box-blog-post .post-meta-info .post-category::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.3125rem;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #333;
    transform: translateY(-50%);
}

.hdev-blog-news .box-blog-post .post-meta-info .post-date {
    font-weight: 400;
    color: #555;
}

/* Hide default Flickity SVG */
.hdev-blog-news .flickity-button svg {
    display: none;
}

.hdev-blog-news .flickity-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.hdev-blog-news .flickity-button.previous::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Cpath d='M50 34L11 34L18.41 26' stroke='%232c3e50' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hdev-blog-news .flickity-button.next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Cpath d='M10 34L49 34L41.59 26' stroke='%232c3e50' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hdev-blog-news .flickity-button {
    display: block;
    opacity: 1;
    background: transparent;
    border: none;
    color: #2c3e50;
    width: 60px;
    height: 60px;
    transition: all 0.3s ease;
}

/* Flickity Navigation Margins Override */
.slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button {
    margin-top: 0;
}

.slider-nav-outside.slider-nav-circle .previous {
    margin-right: 0;
}

.slider-nav-outside.slider-nav-circle .next {
    margin-left: 0;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .hdev-blog-news .box-blog-post .post-title {
        font-size: var(--hdev-fs-subtitle-laptop);
    }

    .hdev-blog-news .flickity-button {
        width: 40px;
        height: 40px;
    }
}

/* Helper Class for Gradient Text */
.hdev-text-gradient-gold {
    background: var(--hdev-gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

@media (max-width: 768px) {
    .hdev-blog-news .box-blog-post .post-title {
        font-size: 1.25rem;
    }

    .hdev-blog-news .box-blog-post .post-meta-info {
        font-size: 0.75rem;
        margin-bottom: 8px;
    }

    .hdev-blog-news .flickity-button {
        display: none;
    }
}

@media (max-width: 480px) {
    .hdev-blog-news .box-blog-post .post-title {
        font-size: 1.125rem;
    }
}

/* ============================================================================
   BLOG SINGLE POST - COVER IMAGE & CUSTOM HEADER
   ============================================================================ */

/* Blog Cover Image Wrapper */
.hdev-blog-cover-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

.hdev-blog-cover {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Blog Header - Center Alignment */
.hdev-blog-header {
    text-align: center;
    padding: 3rem 1rem 2rem;
}

.hdev-blog-header .entry-header-text {
    max-width: 800px;
    margin: 0 auto;
}

/* Category Styling */
.hdev-blog-category {
    font-family: var(--hdev-font-script);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.hdev-blog-category a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.hdev-blog-category a:hover {
    opacity: 0.7;
}

/* Title Styling */
.hdev-blog-title {
    font-family: var(--hdev-font-americana);
    font-size: 2.5rem;
    line-height: 1.3;
    margin: 0 0 1.5rem;
    color: var(--color-black);
}

/* Meta (Date) Styling */
.hdev-blog-meta {
    font-family: var(--hdev-font-sans);
    font-size: 0.95rem;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.hdev-blog-meta .icon-calendar {
    font-size: 1rem;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .hdev-blog-cover {
        height: 300px;
    }

    .hdev-blog-header {
        padding: 2.5rem 1rem 1.5rem;
    }

    .hdev-blog-category {
        font-size: 1.35rem;
    }

    .hdev-blog-title {
        font-size: 2rem;
    }

    .hdev-blog-meta {
        font-size: 0.875rem;
    }
}

@media (max-width: 550px) {
    .hdev-blog-cover {
        height: 250px;
    }

    .hdev-blog-header {
        padding: 2rem 1rem 1rem;
    }

    .hdev-blog-category {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    .hdev-blog-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .hdev-blog-meta {
        font-size: 0.8rem;
    }
}

/* ============================================================================
   BLOG SINGLE POST - TRANSPARENT HEADER & HEADER CONTAINER
   ============================================================================ */

/* Transparent Header for Blog Single Post - Desktop/Laptop
.single-post .header-wrapper {
    background: transparent !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
 */
/*
.single-post .header-main {
    background: transparent !important;
}*/
/* Header container alignment 
#header .header-wrapper {
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
}
*/
/* Fix header inner alignment - DISABLED: Causing full width header issue on single posts
   The header-wrapper already has proper max-width and padding (lines 467-474)
   Forcing .header-inner to 100% causes menu/logo to spread to screen edges
   
body.single-post #header .header-main,
body.single-post #header .header-inner {
    width: 100% !important;
    max-width: 100% !important;
}
*/

/* Override fullpage.css header positioning for blog 
.single-post #header {
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}
*/
/*
@media (max-width: 1400px) {
    .single-post #header .header-wrapper {
        max-width: var(--container-width-md);
    }
}

@media (max-width: 1200px) {
    .single-post #header .header-wrapper {
        max-width: var(--container-width-base);
    }
}
*/
@media (max-width: 768px) {
    #header .header-wrapper {
        position: fixed;
        padding-left: 0;
        padding-right: 0;
        background: var(--color-white);
        box-shadow: 0 2px 8px rgb(0 0 0 / 68%);
    }
}

/* ============================================================================
   BLOG ARCHIVE - FEATURED IMAGE STYLING
   ============================================================================ */

/* Featured Image Border Radius for Archive Pages */
.hdev-blog-image img {
    border-radius: 0.65rem;
    overflow: hidden;
}

/* Hide Entry Footer Meta (Category links) on Archive Pages */
.blog-archive .entry-meta.clearfix,
.blog-archive .entry-footer {
    display: none !important;
}

/* Hide "Continue Reading" Button on Archive Pages */
.blog-archive .more-link.button {
    display: none !important;
}

/* Border Separator Between Posts */
.blog-archive article {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.blog-archive article:last-child {
    border-bottom: none;
}

/* Title Link Styling on Archive Pages */
.blog-archive .hdev-blog-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-archive .hdev-blog-title a:hover {
    color: var(--color-primary);
}

/* Cover image should go under header */
body.single-post .hdev-blog-cover-wrapper {
    margin-top: 0;
    position: relative;
    z-index: 1;
}

/* Add padding to cover to account for header height */
body.single-post .page-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0;
}

/* Sticky header transition - change to solid when scrolling */
body.single-post #header.stuck {
    background: #fff !important;
}

body.single-post #header.stuck .header-wrapper,
body.single-post #header.stuck .header-main {
    background: #fff !important;
}

/* ============================================================================
   BLOG SINGLE - RELATED POSTS SECTION
   ============================================================================ */

/* Full Width Background Wrapper */
.hdev-related-posts {
    width: 100%;
    margin-top: 4rem;
    padding: 3rem 0;
    background-color: #e4e8cf;
}

/* Related Posts sử dụng styling từ .hdev-blog-news */
/* Chỉ cần override một số phần riêng biệt */
.hdev-related-posts .section-title {
    justify-content: center;
}

.hdev-related-posts .section-subtitle {

    font-family: var(--hdev-font-script);
    text-transform: capitalize !important;
    font-size: var(--hdev-size-h3);
    color: var(--color-primary);
}

.hdev-related-posts .section-main-title {
    font-family: var(--hdev-font-americana);
    font-size: var(--hdev-size-h2);
}

.hdev-related-posts .box-image,
.hdev-related-posts .box-image img {
    border-radius: 0.625rem;
    overflow: hidden;
}

.hdev-related-posts .post-read-more {
    margin-top: 0.75rem;
}

.hdev-related-post .read-more-link {
    font-family: var(--hdev-font-sans);
    font-size: 0.875rem;
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: opacity 0.3s ease;
}

.hdev-related-posts .read-more-link:hover {
    opacity: 0.7;
}

.hdev-related-posts .read-more-link .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.hdev-related-posts .read-more-link:hover .arrow {
    transform: translateX(4px);
}

/* Flickity Arrow Navigation - Circle Outside Style */
.hdev-related-posts .flickity-button {
    background: #fff !important;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 50px !important;
    height: 50px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 1 !important;
    z-index: 10;
}

/* Hide default Flickity SVG */
.hdev-related-posts .flickity-button svg {
    display: none !important;
}

.hdev-related-posts .flickity-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.hdev-related-posts .flickity-button.previous::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 18l-6-6 6-6' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.hdev-related-posts .flickity-button.next::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 18l6-6-6-6' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Arrow positioning - Outside */
.hdev-related-posts .flickity-button.previous {
    left: -60px;
}

.hdev-related-posts .flickity-button.next {
    right: -60px;
}

.hdev-related-posts .flickity-button:hover {
    background: #f5f5f5 !important;
}

.hdev-related-posts .flickity-button:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed;
}

/* Pagination Dots */
.hdev-related-posts .flickity-page-dots {
    bottom: -40px;
}

.hdev-related-posts .flickity-page-dots .dot {
    width: 10px;
    height: 10px;
    background: #333;
    opacity: 0.3;
}

.hdev-related-posts .flickity-page-dots .dot.is-selected {
    opacity: 1;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .hdev-related-posts {
        margin-top: 2.5rem;
        padding-top: 2rem;
    }

    /* Mobile: 1 item per view, pagination dots */
    .hdev-related-posts .hdev-blog-news {
        margin-bottom: 2rem;
    }
}

@media (max-width: 550px) {}

/* ===================================
   Hdev Heading Styles
   =================================== */
.hdev-heading {
    line-height: 1.4;
}

.hdev-heading.has-line-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: rgb(255, 206, 123);
}

.back-to-top {
    margin-right: 2.5em !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.absolute-footer {
    display: none;
}


@media (max-width: 1599px) and (min-width: 850px) {
    .hdev-footer {
        transform: scale(0.8);
        transform-origin: center center;
        margin-top: -30px;
    }
}

.hdev-footer .ux-menu-link__text {
    color: #fff;
}

/* ========================================
   GLOBAL LAPTOP RESPONSIVE FIX (1025px - 1536px)
   ======================================== */
@media (min-width: 1025px) and (max-width: 1536px) {
    :root {
        /* Reduce Heading Size for Laptops */
        --hdev-fs-heading-opt: 1.6rem;




        /* Reduce Icon Size for Laptops */
        --hdev-icon-size: 40px;

        /* Reduce Heading Size for Laptops (H2, H3) */
        --hdev-fs-h2: 2.2rem;
        --hdev-fs-h3: 1.6rem;
    }
}

/* ========================================
   FOOTER FULL HEIGHT FIX (Global)
   ======================================== */
.hdev-footer-fullheight {
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    /* Override FullPage styles */
    overflow: visible !important;
    /* Allow content to flow */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* Center content vertically */
}

/* Ensure footer content expands */
#footer.hdev-footer-fullheight .footer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Fix FullPage image styles within Footer to be native */
#footer.hdev-footer-fullheight .col .img.has-hover img,
#footer.hdev-footer-fullheight .col .img.has-hover .attachment-original {
    position: absolute !important;
    object-fit: cover !important;
    height: 100% !important;
}