/* ==========================================================
   PUBLIC HEADER ORDER + 1280 ALIGNMENT FINAL - 2026-08-25 V23
   Muc tieu:
   1) Banner (neu co) -> Menu ngang -> Dong ho/Ngay thang + Tim kiem.
   2) Ca 3 khoi dung CHUNG mot truc trai/phai 1280px.
   3) Khong thay doi markup, ID, form action, menu data hay JavaScript.

   Luu y ky thuat:
   Header dung display:contents de co the dat menu nam giua banner va
   brand-row-main. Vi display:contents loai bo box 1280 cua header,
   wrapper va tung child truc tiep phai tro thanh 1280 authority.
   ========================================================== */

:root {
    --hns-header-frame-1280: 1280px;
}

/* 1280 authority cua toan bo cum Banner / Menu / Clock+Search. */
body:not(.admin-body) .transport-header-order-wrap {
    display: flex;
    flex-direction: column;
    width: min(100%, var(--hns-header-frame-1280)) !important;
    max-width: var(--hns-header-frame-1280) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Cho banner va dong ho/tim kiem tham gia cung thu tu voi #mainNavigation
   ma khong can copy/di chuyen Razor markup. */
body:not(.admin-body) .transport-header-order-wrap > header.brand-row-search {
    display: contents;
}

/* 1) Banner dau trang: cung dung dung 1280 nhu menu. */
body:not(.admin-body) .transport-header-order-wrap .brand-header-banner-wide,
body:not(.admin-body) .transport-header-order-wrap .brand-header-banner-wide.inner-header-banner-wide {
    order: 10;
    width: 100% !important;
    max-width: var(--hns-header-frame-1280) !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

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

/* 2) Menu ngang: lam truc chuan 1280 cho hai khoi con lai. */
body:not(.admin-body) .transport-header-order-wrap > #mainNavigation {
    order: 20;
    width: 100% !important;
    max-width: var(--hns-header-frame-1280) !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

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

/* 3) Dong ho/ngay thang + tim kiem: cung dung 1280, khong con co/rong khac menu. */
body:not(.admin-body) .transport-header-order-wrap .brand-row-main {
    order: 30;
    width: 100% !important;
    max-width: var(--hns-header-frame-1280) !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Cac child cua dong Clock/Search khong duoc ep row vuot ra khoi frame. */
body:not(.admin-body) .transport-header-order-wrap .brand-datetime-wrap,
body:not(.admin-body) .transport-header-order-wrap .brand-search-wrap,
body:not(.admin-body) .transport-header-order-wrap .brand-search-form,
body:not(.admin-body) .transport-header-order-wrap .brand-search-input-wrap {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Responsive: tu 1280 tro xuong, ba khoi van chung dung 100% viewport/container.
   Khong dung calc(100% - 16px/20px) rieng cho banner hoac clock/search vi se lech menu. */
@media (max-width: 1280px) {
    body:not(.admin-body) .transport-header-order-wrap,
    body:not(.admin-body) .transport-header-order-wrap .brand-header-banner-wide,
    body:not(.admin-body) .transport-header-order-wrap .brand-header-banner-wide.inner-header-banner-wide,
    body:not(.admin-body) .transport-header-order-wrap > #mainNavigation,
    body:not(.admin-body) .transport-header-order-wrap .brand-row-main {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================
   TOPBAR + EDUCATION FRAME ALIGNMENT FIX - 2026-08-25 V24
   Muc tieu:
   - Hotline / Zalo / Language dung cung truc 1280 voi Menu.
   - Mobile: topbar va menu cung full width, khong calc tru lech mep.
   - Education: vo hieu rule breakout 100vw cu gay lech/khuat menu PC.
   - Chi ap dung public header, khong anh huong Admin CMS.
   ========================================================== */

/* Topbar nam ngoai transport-header-order-wrap, vi vay phai gan cung
   authority width 1280 mot cach rieng. */
body:not(.admin-body) .topbar.topbar-upgraded.header-language-zone {
    width: min(100%, var(--hns-header-frame-1280)) !important;
    max-width: var(--hns-header-frame-1280) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

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

/* Education truoc day breakout 100vw bang left:50%/-50vw. Sau khi header
   da co wrapper 1280, breakout nay lam menu/banner lech khoi truc chung. */
body:not(.admin-body).home-layout-education .transport-header-order-wrap > #mainNavigation,
body:not(.admin-body).home-layout-education .main-menu-wrap {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: var(--hns-header-frame-1280) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

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 {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: var(--hns-header-frame-1280) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}

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 > #mainNavigation > .site-shell.main-menu-shell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Mobile/tablet: tat ca cac khoi dau trang cung full width. Noi dung topbar
   dung cung 10px inset voi main-menu-shell cua mobile-menu-unified. */
@media (max-width: 1280px) {
    body:not(.admin-body) .topbar.topbar-upgraded.header-language-zone,
    body:not(.admin-body) .transport-header-order-wrap,
    body:not(.admin-body) .transport-header-order-wrap > #mainNavigation,
    body:not(.admin-body).home-layout-education .main-menu-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 860px) {
    body:not(.admin-body) .topbar.topbar-upgraded.header-language-zone > .site-shell.topbar-upgraded-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body:not(.admin-body) .topbar.topbar-upgraded.header-language-zone .topbar-contact-card-compact,
    body:not(.admin-body) .topbar.topbar-upgraded.header-language-zone .topbar-contact-actions,
    body:not(.admin-body) .topbar.topbar-upgraded.header-language-zone .topbar-right-tools.header-lang {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}