/**
 * Nhà Xinh Design — Homepage layout & responsive polish
 * Fixes empty header-bottom gap, tightens sections, refines floating widgets.
 */

/* ─── Hide empty desktop bottom bar (mega menu lives in header-main) ─── */
@media (min-width: 850px) {
    #wide-nav.header-bottom:not(:has(#mega-menu-wrap-primary)) {
        display: none !important;
        min-height: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }
}

/* ─── Transparent homepage header over hero (no gray strip) ─── */
.home.page-template-transparent-header .header.transparent,
.home.page-template-transparent-header-php .header.transparent {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    background: transparent !important;
    box-shadow: none !important;
}

.home.page-template-transparent-header .header.transparent:not(.stuck) .header-wrapper,
.home.page-template-transparent-header-php .header.transparent:not(.stuck) .header-wrapper {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.42) 0%,
        rgba(0, 0, 0, 0.12) 55%,
        rgba(0, 0, 0, 0) 100%
    ) !important;
}

.home.page-template-transparent-header .header.transparent.stuck,
.home.page-template-transparent-header-php .header.transparent.stuck {
    position: fixed !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.home.page-template-transparent-header .header-bottom,
.home.page-template-transparent-header-php .header-bottom {
    min-height: 0 !important;
    background: transparent !important;
}

.home #content,
.home .page-wrapper,
.home #main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.home #main,
.home #wrapper {
    background-color: #fff !important;
}

/* ─── Hero / slider ─── */
.home .ux-slider-wrapper,
.home .banner,
.home .ux-slider {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.home .ux-slider .flickity-viewport,
.home .banner .flickity-viewport {
    min-height: clamp(260px, 48vw, 620px);
    max-height: min(72vh, 720px);
}

.home .ux-slider .bg,
.home .banner .bg {
    min-height: inherit;
}

.home .ux-slider .bg img,
.home .banner .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.home .ux-slider .text-box,
.home .banner .text-box {
    padding: clamp(12px, 3vw, 28px) !important;
}

.home .ux-slider h1,
.home .ux-slider h2,
.home .banner h1,
.home .banner h2 {
    font-size: clamp(1.25rem, 3.2vw, 2.75rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.35em !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* ─── Section rhythm — less dead space ─── */
.home .section {
    padding-top: clamp(14px, 2.5vw, 28px) !important;
    padding-bottom: clamp(14px, 2.5vw, 28px) !important;
}

.home .row,
.home .row-large,
.home .row-small {
    margin-bottom: 0 !important;
}

.home .row > .col,
.home .row-large > .col,
.home .row-small > .col {
    padding: clamp(4px, 1vw, 10px) !important;
    margin-bottom: 0 !important;
}

.home .gap-element,
.home .is-divider {
    display: none !important;
}

.home .section .gap-element {
    height: clamp(8px, 1.5vw, 16px) !important;
    display: block !important;
}

/* Product / blog grids on home */
.home .box-text {
    height: auto !important;
    min-height: 38px;
    padding: 6px 8px 8px !important;
}

.home .has-shadow .box-text {
    height: auto !important;
}

.home .image-cover img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.home .box,
.home .box-image {
    margin-bottom: 0 !important;
}

/* ─── Mega menu on transparent header ─── */
@media (min-width: 850px) {
    .home .header.transparent:not(.stuck) #mega-menu-wrap-primary #mega-menu-primary > li > a {
        color: #fff !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }

    .home .header.transparent:not(.stuck) #mega-menu-wrap-primary #mega-menu-primary > li > a:hover,
    .home .header.transparent:not(.stuck) #mega-menu-wrap-primary #mega-menu-primary > li.mega-current-menu-item > a {
        color: #d5ff7d !important;
    }

    .home .header.transparent.stuck #mega-menu-wrap-primary #mega-menu-primary > li > a {
        color: #222 !important;
        text-shadow: none;
    }
}

/* ─── Floating contacts — edge-aligned, no overlap ─── */
.home .gotohome {
    display: none !important;
}

#nxfc-contact-stack {
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
    gap: 6px !important;
    --nx-width: clamp(150px, 38vw, 180px);
    --nx-fs: clamp(10px, 2.6vw, 12px);
}

.nxfc-chip,
.nxfc-map {
    width: var(--nx-width) !important;
    max-width: calc(100vw - 24px);
}

.nxfc-ring {
    width: var(--nx-width) !important;
}

/* ─── Tablet ─── */
@media (max-width: 849px) {
    .home .ux-slider .flickity-viewport,
    .home .banner .flickity-viewport {
        min-height: clamp(220px, 42vw, 420px);
        max-height: 55vh;
    }

    .home .header.transparent .header-main {
        height: auto !important;
        min-height: 56px;
    }

    #wide-nav.header-bottom {
        min-height: 0 !important;
        background: rgba(255, 255, 255, 0.96) !important;
    }

    .home .row-large > .col {
        width: auto !important;
        flex: 1 1 50%;
        max-width: 50%;
    }
}

/* ─── Mobile ─── */
@media (max-width: 549px) {
    .home .ux-slider .flickity-viewport,
    .home .banner .flickity-viewport {
        min-height: clamp(200px, 58vw, 320px);
        max-height: 48vh;
    }

    .home .row-large > .col,
    .home .small-columns-1 > .col {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        padding: 6px 8px !important;
    }

    .home .box-text a:not(.button),
    .home .box-text h1,
    .home .box-text h2,
    .home .box-text h3 {
        font-size: 11px !important;
        padding: 0 6px !important;
    }

    #nxfc-contact-stack {
        right: 6px !important;
        bottom: 10px !important;
        --nx-width: 148px;
        --nx-fs: 10px;
        --nx-py: 6px;
    }

    .nxfc-ring {
        height: 48px !important;
    }

    .nxfc-hotline-bar {
        height: 30px !important;
        line-height: 30px !important;
    }

    .home .back-to-top {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
        right: 8px !important;
    }
}

/* ─── Large screens — breathe without huge gaps ─── */
@media (min-width: 1200px) {
    .home .container,
    .home .row {
        max-width: 1240px;
    }

    .home .section + .section {
        margin-top: 0;
    }
}