/* Menu layout synchronized with ford-longbien.com.vn.
   Kept separate so the rest of the Smart City theme remains unchanged. */
body.vf-homepage-body #header.navbar-fixed-top,
body.vf-homepage-body #header,
body:has(.vf-home) #header.navbar-fixed-top,
body:has(.vf-home) #header {
    top: 0 !important;
}

@media (min-width: 992px) {
    .vf-design-nav,
    body.vf-homepage-body #header .vf-design-nav,
    body:has(.vf-home) #header .vf-design-nav {
        width: 100%;
        height: 64px;
        padding: 0 max(80px, calc((100% - 1200px) / 2));
        margin: 0 auto;
    }

    .vf-design-nav__brand,
    body.vf-homepage-body .vf-design-nav__brand,
    body:has(.vf-home) .vf-design-nav__brand {
        min-width: 178px;
        height: 64px;
        line-height: 64px;
    }

    .vf-design-nav__brand img,
    body.vf-homepage-body .vf-design-nav__brand img,
    body:has(.vf-home) .vf-design-nav__brand img {
        width: auto;
        height: 40px;
        max-width: 220px;
        max-height: 40px;
        object-fit: contain;
    }

    .vf-design-nav__links,
    body.vf-homepage-body .vf-design-nav__links,
    body:has(.vf-home) .vf-design-nav__links {
        gap: clamp(16px, 2vw, 38px);
    }

    .vf-design-nav__item,
    body.vf-homepage-body .vf-design-nav__item,
    body:has(.vf-home) .vf-design-nav__item {
        min-height: 64px;
    }

    .vf-design-nav__links > a,
    .vf-design-nav__links > .vf-design-nav__item > a,
    body.vf-homepage-body .vf-design-nav__links > a,
    body.vf-homepage-body .vf-design-nav__links > .vf-design-nav__item > a,
    body:has(.vf-home) .vf-design-nav__links > a,
    body:has(.vf-home) .vf-design-nav__links > .vf-design-nav__item > a {
        position: relative;
        height: 64px;
        color: #101820;
        font-size: 13px;
        line-height: 18px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    body.vf-homepage-body .vf-design-nav__search,
    body:has(.vf-home) .vf-design-nav__search {
        width: 42px;
        height: 42px;
        line-height: 42px;
    }
}

@media (min-width: 992px) and (max-width: 1350px) {
    .vf-design-nav,
    body.vf-homepage-body #header .vf-design-nav,
    body:has(.vf-home) #header .vf-design-nav {
        padding-right: 32px;
        padding-left: 32px;
    }

    .vf-design-nav__brand,
    body.vf-homepage-body .vf-design-nav__brand,
    body:has(.vf-home) .vf-design-nav__brand {
        min-width: 150px;
    }

    .vf-design-nav__brand img,
    body.vf-homepage-body .vf-design-nav__brand img,
    body:has(.vf-home) .vf-design-nav__brand img {
        max-width: 180px;
    }

    .vf-design-nav__links,
    body.vf-homepage-body .vf-design-nav__links,
    body:has(.vf-home) .vf-design-nav__links {
        gap: 12px;
    }

    .vf-design-nav__links > a,
    .vf-design-nav__links > .vf-design-nav__item > a,
    body.vf-homepage-body .vf-design-nav__links > a,
    body.vf-homepage-body .vf-design-nav__links > .vf-design-nav__item > a,
    body:has(.vf-home) .vf-design-nav__links > a,
    body:has(.vf-home) .vf-design-nav__links > .vf-design-nav__item > a {
        font-size: 11px;
        letter-spacing: .02em;
    }

    .vf-design-nav__links .vf-menu-hotline__link {
        padding-right: 9px;
        padding-left: 9px;
    }
}

.vf-design-nav__item.vf-menu-hotline {
    display: flex;
    align-items: center;
}

.vf-design-nav__links .vf-menu-hotline__link {
    display: inline-flex;
    align-items: center;
    gap: 0;
    height: auto;
    min-height: 0;
    padding: 8px 13px;
    border: 0;
    border-radius: 999px;
    background: var(--vf-hm-bg, #1c548c);
    color: var(--vf-hm-color, #fff);
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: .02em;
    text-transform: none;
    white-space: nowrap;
}

.vf-design-nav__links .vf-design-nav__item.vf-menu-hotline > .vf-menu-hotline__link,
body.vf-homepage-body .vf-design-nav__links .vf-menu-hotline__link,
body:has(.vf-home) .vf-design-nav__links .vf-menu-hotline__link {
    height: auto;
    min-height: 0;
    padding: 8px 13px;
    font-size: 13px;
    line-height: 18px;
    background: var(--vf-hm-bg, #1c548c);
    color: var(--vf-hm-color, #fff);
}

.vf-design-nav__links .vf-design-nav__item.vf-menu-hotline > .vf-menu-hotline__link:hover,
.vf-design-nav__links .vf-design-nav__item.vf-menu-hotline > .vf-menu-hotline__link:focus,
body.vf-homepage-body .vf-design-nav__links .vf-menu-hotline__link:hover,
body.vf-homepage-body .vf-design-nav__links .vf-menu-hotline__link:focus,
body:has(.vf-home) .vf-design-nav__links .vf-menu-hotline__link:hover,
body:has(.vf-home) .vf-design-nav__links .vf-menu-hotline__link:focus {
    background: var(--vf-hm-bg-hover, #173f69);
    color: var(--vf-hm-hover-color, #fff);
}

.vf-design-nav__links .vf-menu-hotline__link i {
    display: none;
}

.vf-design-nav__links .vf-menu-hotline__link:hover,
.vf-design-nav__links .vf-menu-hotline__link:focus {
    border: 0;
    background: var(--vf-hm-bg-hover, #173f69);
    color: var(--vf-hm-hover-color, #fff);
    text-decoration: none;
}

.vf-design-nav__links .vf-menu-hotline__link::after,
.vf-design-nav__links .vf-menu-hotline__link:hover::after,
.vf-design-nav__links .vf-menu-hotline__link:focus::after {
    content: none;
}

.vf-design-nav__links > a.is-active,
.vf-design-nav__links > a:hover,
.vf-design-nav__links > a:focus,
.vf-design-nav__links > .vf-design-nav__item > a.is-active,
.vf-design-nav__links > .vf-design-nav__item > a:hover,
.vf-design-nav__links > .vf-design-nav__item > a:focus {
    color: var(--vf-blue);
    border-bottom: 0;
}

.vf-design-nav__links > a.is-active::after,
.vf-design-nav__links > a:hover::after,
.vf-design-nav__links > a:focus::after,
.vf-design-nav__links > .vf-design-nav__item > a.is-active::after,
.vf-design-nav__links > .vf-design-nav__item > a:hover::after,
.vf-design-nav__links > .vf-design-nav__item > a:focus::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--vf-blue);
    transform: translateX(-50%);
}

.vf-design-nav__item.has-submenu > a {
    position: relative;
    padding-right: 18px;
}

.vf-design-nav__item.has-submenu > a::after {
    content: none !important;
}

.vf-design-nav__item.has-submenu > a::before {
    content: "";
    position: absolute;
    right: 2px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    pointer-events: none;
}

.vf-design-nav__submenu {
    min-width: 280px;
    padding: 8px 0;
}

.vf-design-nav__submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

.vf-design-nav__submenu a {
    min-height: 0;
    padding: 8px 18px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .08em;
}

.vf-design-nav__submenu a:hover::after,
.vf-design-nav__submenu a:focus::after {
    content: none;
}

/* Danh sách sản phẩm dài: chia hai cột để menu không phủ gần hết màn hình. */
.vf-design-nav__submenu.vf-design-nav__submenu--compact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 430px;
    max-height: calc(100vh - 92px);
    padding: 8px !important;
    overflow-y: auto;
}

body:has(.vf-home) .vf-design-nav__submenu.vf-design-nav__submenu--compact-grid a,
body.vf-homepage-body .vf-design-nav__submenu.vf-design-nav__submenu--compact-grid a,
.vf-design-nav__submenu.vf-design-nav__submenu--compact-grid a {
    padding: 8px 12px !important;
    font-size: 12px;
    line-height: 16px !important;
}

.vf-design-nav__item .vf-design-nav__submenu.vf-submenu--flip {
    left: auto;
    right: 0;
    transform: translate(0, 10px);
}

.vf-design-nav__item:hover .vf-design-nav__submenu.vf-submenu--flip,
.vf-design-nav__item:focus-within .vf-design-nav__submenu.vf-submenu--flip {
    transform: translate(0, 0);
}

.vf-design-nav__search {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: #101820;
    line-height: 42px;
}

.vf-design-nav__search:hover,
.vf-design-nav__search:focus {
    background: rgba(0, 87, 184, .1);
    color: var(--vf-blue);
}

@media (max-width: 991px) {
    .nav-mobile-header {
        padding: 2px;
    }

    .nav-mobile-header-container .menu-icon,
    .nav-mobile-header-container .mobile-search {
        width: 42px;
        height: 42px;
    }

    .nav-mobile-header-container .menu-icon button,
    .nav-mobile-header-container .mobile-search .search-icon {
        padding: 8px;
        border: 0;
        background: transparent;
        font-size: 20px;
        line-height: 20px;
        cursor: pointer;
    }

    .nav-mobile-header-container .mobile-logo .logo {
        max-height: 30px;
    }

    .mobile-nav-container {
        min-height: 46px;
    }

    .nav-mobile {
        top: 46px;
    }

    #header.navbar-fixed-top,
    #header {
        height: 46px;
        min-height: 46px;
    }
}

#navMobile .vf-menu-hotline__link {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--vf-hm-bg, #1c548c);
    font-weight: 700;
}

.nav-mobile-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e4002b;
    color: #fff;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(228, 0, 43, .35);
    transition: background .15s ease, transform .15s ease;
}

.nav-mobile-close span {
    display: block;
    margin-top: -4px;
    font-size: 30px;
    font-weight: 400;
}

.nav-mobile-close:hover,
.nav-mobile-close:focus {
    background: #b8001f;
    transform: scale(1.06);
    outline: none;
}

.nav-mobile:not(.nav-mobile-open) .nav-mobile-close {
    display: none;
}