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

/*************** ADD CUSTOM CSS HERE.   ***************/

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

}

/* ===== Homepage hero slider - align to Figma layout (desktop) ===== */
@media (min-width: 850px) {
  body.home .section-slider .slider-home .banner.has-video {
    padding-top: 56.25% !important;
  }

  body.home .section-slider .slider-home .banner.has-video .banner-layers.container {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 3.5vw 2.4vw !important;
    z-index: 3 !important;
  }

  body.home .section-slider .slider-home .banner.has-video .text-box_banner,
  body.home .section-slider .slider-home .banner.has-video .text-box.banner-layer.text-box_banner {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  body.home .section-slider .slider-home .banner.has-video .text-box_banner .text-box-content {
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  body.home .section-slider .slider-home .banner.has-video .dynamic-text-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  body.home .section-slider .slider-home .banner.has-video .text-left_dynamic,
  body.home .section-slider .slider-home .banner.has-video .text-left {
    max-width: 72% !important;
  }

  body.home .section-slider .slider-home .banner.has-video .text-left-content {
    margin: 0 0 14px !important;
    font-size: clamp(28px, 2.4vw, 44px) !important;
    line-height: 1.15 !important;
  }

  body.home .section-slider .slider-home .banner.has-video .banner-list-custom {
    gap: 8px 56px !important;
    margin-top: 12px !important;
  }

  body.home .section-slider .slider-home .banner.has-video .text-right_dynamic,
  body.home .section-slider .slider-home .banner.has-video .text-right {
    flex: 0 0 auto !important;
    padding-bottom: 2px !important;
  }
}


/* === Global: item-grid thumbnails always fill container, no grey background === */
.item-grid .thumb-wrapper,
.item-grid-one .thumb-wrapper,
.item-grid-two .thumb-wrapper,
.item-grid-three .thumb-wrapper {
  position: relative !important;
  overflow: hidden !important;
  aspect-ratio: 420 / 340 !important;
}

.item-grid .thumb-wrapper img,
.item-grid-one .thumb-wrapper img,
.item-grid-two .thumb-wrapper img,
.item-grid-three .thumb-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Project grid image crop fix: prevent stretching and support 3 anchor ratios */
body.page-id-896 .posts-container .thumb-wrapper {
  position: relative !important;
  overflow: hidden !important;
}

body.page-id-896 .posts-container .thumb-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* 1) Square */
body.page-id-896 .posts-container .item-grid .thumb-wrapper {
  aspect-ratio: 1 / 1 !important;
}

/* 2) Landscape */
body.page-id-896 .posts-container .item-grid-one .thumb-wrapper,
body.page-id-896 .posts-container .item-grid-three .thumb-wrapper {
  aspect-ratio: 16 / 9 !important;
}

/* 3) Portrait */
body.page-id-896 .posts-container .item-grid-two .thumb-wrapper {
  /* aspect-ratio: 3 / 4 !important; */
}

/* Keep the two .item-grid-three cards at identical height on project page */
@media (min-width: 768px) {
  body.page-id-896 .grid-box-three .item-grid-three .thumb-wrapper {
    height: 340px !important;
    aspect-ratio: auto !important;
  }

  body.page-id-896 .grid-box-three .item-grid-three .thumb-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Fix grid-box-three layout on project page (page-id-896):
   item-grid-three:nth-child(5) was spanning 2 rows but image height is fixed,
   causing blank bottom-left area. Override to span 1 row, and make the
   last 2 item-grid items span 2 columns each for a balanced layout. */
@media (min-width: 768px) {
  body.page-id-896 .grid-box-three .item-grid-three:nth-child(5) {
    grid-row: span 1 !important;
  }
  body.page-id-896 .grid-box-three .item-grid:nth-child(7),
  body.page-id-896 .grid-box-three .item-grid:nth-child(8) {
    grid-column: span 2 !important;
  }
}


/* === Icon alignment + size fix v3 === */

/* 1. Center all li items on the nav's cross-axis */
ul.header-nav.nav-right {
    align-items: center !important;
}

/* 2. Search <a>: remove vertical padding, keep inline-flex */
.header-nav.nav-right li.header-search > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* 3. Increase desktop search icon size */
.header-nav.nav-right .custom-search-icon {
    width: 24px !important;
    height: 24px !important;
}

/* 4. Increase desktop map icon size */
.header-nav.nav-right li.html_topbar_right .image-to-map-wrapper {
    width: 24px !important;
    height: 24px !important;
}

/* 5. Mobile sidebar - language switcher wrapper chain */
.html_top_right_text .elements-mobile .trp-shortcode-switcher__wrapper,
.html_top_right_text .elements-mobile .trp-current-language-item__wrapper {
    display: flex !important;
    align-items: center !important;
}

.html_top_right_text .elements-mobile .trp-language-item {
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* 6. Increase mobile sidebar search and map icon size */
.html_top_right_text .elements-mobile .custom-search-icon {
    width: 25px !important;
    height: 25px !important;
}

.html_top_right_text .elements-mobile .image-to-map-wrapper {
    width: 24px !important;
    height: 24px !important;
}

/* Fine-tune: mobile search +3px, desktop map +1px */
.html_top_right_text .elements-mobile .mobile-search-toggle {
    margin-top: 1px;
}

.header-nav.nav-right li.html_topbar_right .image-to-map-wrapper {
    margin-top: 1px;
}

/* === Mobile: project thumbnails equal size 1:1 square === */
@media (max-width: 767px) {
    [class*="grid-box"] .thumb-wrapper {
        position: relative !important;
        width: 100% !important;
        height: 0 !important;
        padding-bottom: 100% !important;
        overflow: hidden !important;
    }

    [class*="grid-box"] .thumb-wrapper img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* === Desktop: "Các dự án khác" - follows content container width === */
@media (min-width: 768px) {
    /* Remove col/col-inner padding so slider fills its container */
    .related-section > .col,
    .related-section .col-inner {
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Slider: full width, arrows visible inside */
    .related-section .eps-wrapper {
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    /* Override JS-set inline width so viewport fills full 100vw wrapper */
    .related-section .eps-viewport {
        width: 100% !important;
    }

    /* Gap between slides */
    .related-section .eps-slide {
        padding: 0 8px !important;
    }

    /* Arrows: centered vertically, inside slider at edges */
    .related-section .eps-btn {
        position: absolute !important;
        top: 40% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        margin: 0 !important;
    }

    .related-section .eps-btn.eps-prev {
        left: 16px !important;
        right: auto !important;
    }

    .related-section .eps-btn.eps-next {
        right: 16px !important;
        left: auto !important;
    }
}

/* === Mobile: "Các dự án khác" — full-width image, arrows next to title === */
@media (max-width: 767px) {
    /* Make col-inner the positioning context; padding-top replaces heading's margin-top */
    .related-section .col-inner {
        position: relative !important;
        padding-top: 100px !important;
    }

    /* Remove heading margin (spacing now from col-inner padding-top) */
    .related-section .title-more_project {
        margin-top: 0 !important;
        padding-right: 76px !important;
        box-sizing: border-box !important;
        line-height: 32px !important;
    }

    /* Remove eps-wrapper as positioning context so buttons can reach col-inner */
    .related-section .eps-wrapper {
        position: static !important;
        gap: 0 !important;
    }

    /* Anchor buttons to top-right of col-inner, aligned with heading */
    .related-section .eps-btn {
        position: absolute !important;
        top: 100px !important;
        z-index: 2;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }

    .related-section .eps-btn.eps-prev {
        right: 36px !important;
    }

    .related-section .eps-btn.eps-next {
        right: 0 !important;
    }

    /* Full-width slides — remove horizontal padding */
    .related-section .eps-slide {
        padding: 0 !important;
    }
}

/* === Single post sections full-width breakout (desktop + mobile) === */
.single-page .section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
}

/* Images inside sections on mobile: 15px padding each side */
@media (max-width: 767px) {
    .single-page .section .img {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
}

/* === Lien he page background gradient (Figma) === */
.bg-contact .bg-fill {
    background: linear-gradient(176deg, #373A39 30%, #747474 100%) !important;
}

/* === Footer: border-top follows container width (scales with zoom) === */
footer .absolute-footer {
    border-top: none !important;
    padding-top: 0 !important;
}

footer .absolute-footer > .container {
    border-top: 1px solid;
    padding-top: 28px;
}

.footer-secondary {
    margin-right: 0px !important;
    padding: 0;
}

@media (max-width: 767px) {
    footer .absolute-footer {
        margin: 0 !important;
        width: 100% !important;
    }

    footer .absolute-footer > .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    footer .absolute-footer .footer-primary,
    footer .absolute-footer .footer-secondary {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }
}rtant;
    }
}

/* === Skeleton loader background for thumbnails while image loads === */
.thumb-wrapper {
    background-color: #e0e0e0;
}

/* === Language icon: golden header matches search/map icon color (#E0E0E0) === */
body.custom-expertise-header .trp-shortcode-switcher {
    background: transparent !important;
}

body.custom-expertise-header .trp-language-item {
    border-color: #E0E0E0 !important;
}

body.custom-expertise-header .trp-language-item-name {
    color: #E0E0E0 !important;
}

.cat-label {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #4C504E !important;
}