/* ============================================================
   EDUCATION HEADER FULL VIEWPORT FINAL - 2026-08-25 V26
   Scope: ONLY public HomeLayout=education.
   Purpose:
   - Topbar Hotline/Zalo/Language = full viewport width.
   - Banner + menu + clock/search = full viewport width.
   - Keep all other layouts untouched.
   - Replace the V24 education 1280 clamp without changing markup/JS.
   ============================================================ */

/* Never allow a 100vw breakout to create a horizontal scrollbar. */
body:not(.admin-body).home-layout-education {
    overflow-x: clip !important;
}

/* Topbar is outside transport-header-order-wrap, therefore it can fill
   the viewport directly. */
body:not(.admin-body).home-layout-education .topbar.topbar-upgraded.header-language-zone {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body:not(.admin-body).home-layout-education .topbar.topbar-upgraded.header-language-zone > .site-shell.topbar-upgraded-inner {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* transport-header-order-wrap remains the ordering host only. Its direct
   visual children breakout from the centered host to the viewport using
   left:50% + translateX(-50%). This is stable even when the host itself is
   capped at 1280px. */
body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-header-banner-wide,
body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-header-banner-wide.inner-header-banner-wide,
body:not(.admin-body).home-layout-education .transport-header-order-wrap > #mainNavigation,
body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-row-main {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Header/banner must not inherit the V24 1280 cap. */
body:not(.admin-body).home-layout-education .transport-header-order-wrap > header.site-shell.brand-row.brand-row-search.header-top-strip,
body:not(.admin-body).home-layout-education header.site-shell.brand-row.brand-row-search.header-top-strip {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-header-banner-wide,
body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-header-banner-wide.inner-header-banner-wide {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
}

body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-header-banner-wide img,
body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-header-banner-wide.inner-header-banner-wide img {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
}

/* Menu background and menu shell both fill the Education viewport.
   Existing desktop/mobile menu behavior and submenu JS are untouched. */
body:not(.admin-body).home-layout-education .transport-header-order-wrap > #mainNavigation,
body:not(.admin-body).home-layout-education .main-menu-wrap {
    overflow: visible !important;
}

body:not(.admin-body).home-layout-education .transport-header-order-wrap > #mainNavigation > .site-shell.main-menu-shell,
body:not(.admin-body).home-layout-education .main-menu-wrap > .site-shell.main-menu-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Clock/search row also follows the same viewport width so the entire top
   header has one left/right edge, matching Education body/footer. */
body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-row-main {
    padding-left: clamp(10px, 2vw, 28px) !important;
    padding-right: clamp(10px, 2vw, 28px) !important;
}

@media (max-width: 860px) {
    body:not(.admin-body).home-layout-education .topbar.topbar-upgraded.header-language-zone,
    body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-header-banner-wide,
    body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-header-banner-wide.inner-header-banner-wide,
    body:not(.admin-body).home-layout-education .transport-header-order-wrap > #mainNavigation,
    body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-row-main {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
    }

    body:not(.admin-body).home-layout-education .topbar.topbar-upgraded.header-language-zone > .site-shell.topbar-upgraded-inner,
    body:not(.admin-body).home-layout-education .transport-header-order-wrap > #mainNavigation > .site-shell.main-menu-shell,
    body:not(.admin-body).home-layout-education .main-menu-wrap > .site-shell.main-menu-shell,
    body:not(.admin-body).home-layout-education .transport-header-order-wrap .brand-row-main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}