/* ==========================================================
   TRAN CUONG 2026 - TRANSPORT UNIFIED MENU
   Applies to every public page when body has transport mode.
   Canonical DOM:
   #mainNavigation .primary-menu-host > ul.menu-root
   li.has-children > ul.menu-sub
   ========================================================== */

@media (min-width:861px) and (hover:hover) and (pointer:fine) {
    body.home-layout-transport #mainNavigation,
    body.layout-transport #mainNavigation,
    body.transport-layout #mainNavigation,
    body[data-home-layout="transport"] #mainNavigation,
    body[data-layout="transport"] #mainNavigation,
    body.home-layout-transport #mainNavigation *,
    body.layout-transport #mainNavigation *,
    body.transport-layout #mainNavigation *,
    body[data-home-layout="transport"] #mainNavigation *,
    body[data-layout="transport"] #mainNavigation * {
        box-sizing: border-box;
    }

    body.home-layout-transport #mainNavigation,
    body.layout-transport #mainNavigation,
    body.transport-layout #mainNavigation,
    body[data-home-layout="transport"] #mainNavigation,
    body[data-layout="transport"] #mainNavigation,
    body.home-layout-transport #mainNavigation .main-menu-shell,
    body.layout-transport #mainNavigation .main-menu-shell,
    body.transport-layout #mainNavigation .main-menu-shell,
    body.home-layout-transport #mainNavigation .primary-menu-host,
    body.layout-transport #mainNavigation .primary-menu-host,
    body.transport-layout #mainNavigation .primary-menu-host,
    body.home-layout-transport #mainNavigation .menu-root,
    body.layout-transport #mainNavigation .menu-root,
    body.transport-layout #mainNavigation .menu-root,
    body.home-layout-transport #mainNavigation .menu-sub,
    body.layout-transport #mainNavigation .menu-sub,
    body.transport-layout #mainNavigation .menu-sub {
        overflow: visible !important;
    }

    body.home-layout-transport #mainNavigation .menu-root li,
    body.layout-transport #mainNavigation .menu-root li,
    body.transport-layout #mainNavigation .menu-root li,
    body[data-home-layout="transport"] #mainNavigation .menu-root li,
    body[data-layout="transport"] #mainNavigation .menu-root li {
        position: relative !important;
    }

    body.home-layout-transport #mainNavigation .menu-root li > ul.menu-sub,
    body.layout-transport #mainNavigation .menu-root li > ul.menu-sub,
    body.transport-layout #mainNavigation .menu-root li > ul.menu-sub,
    body[data-home-layout="transport"] #mainNavigation .menu-root li > ul.menu-sub,
    body[data-layout="transport"] #mainNavigation .menu-root li > ul.menu-sub {
        display: block !important;
        position: absolute !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 100000 !important;
        transition: opacity .10s ease, visibility 0s linear .75s !important;
    }

    body.home-layout-transport #mainNavigation .menu-root > li > ul.menu-sub,
    body.layout-transport #mainNavigation .menu-root > li > ul.menu-sub,
    body.transport-layout #mainNavigation .menu-root > li > ul.menu-sub,
    body[data-home-layout="transport"] #mainNavigation .menu-root > li > ul.menu-sub,
    body[data-layout="transport"] #mainNavigation .menu-root > li > ul.menu-sub {
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
    }

    body.home-layout-transport #mainNavigation .menu-sub li > ul.menu-sub,
    body.layout-transport #mainNavigation .menu-sub li > ul.menu-sub,
    body.transport-layout #mainNavigation .menu-sub li > ul.menu-sub,
    body[data-home-layout="transport"] #mainNavigation .menu-sub li > ul.menu-sub,
    body[data-layout="transport"] #mainNavigation .menu-sub li > ul.menu-sub {
        top: -5px !important;
        left: calc(100% - 8px) !important;
        right: auto !important;
    }

    body.home-layout-transport #mainNavigation .menu-root li:hover > ul.menu-sub,
    body.home-layout-transport #mainNavigation .menu-root li:focus-within > ul.menu-sub,
    body.home-layout-transport #mainNavigation .menu-root li.transport-submenu-open > ul.menu-sub,
    body.layout-transport #mainNavigation .menu-root li:hover > ul.menu-sub,
    body.layout-transport #mainNavigation .menu-root li:focus-within > ul.menu-sub,
    body.layout-transport #mainNavigation .menu-root li.transport-submenu-open > ul.menu-sub,
    body.transport-layout #mainNavigation .menu-root li:hover > ul.menu-sub,
    body.transport-layout #mainNavigation .menu-root li:focus-within > ul.menu-sub,
    body.transport-layout #mainNavigation .menu-root li.transport-submenu-open > ul.menu-sub,
    body[data-home-layout="transport"] #mainNavigation .menu-root li:hover > ul.menu-sub,
    body[data-home-layout="transport"] #mainNavigation .menu-root li:focus-within > ul.menu-sub,
    body[data-home-layout="transport"] #mainNavigation .menu-root li.transport-submenu-open > ul.menu-sub,
    body[data-layout="transport"] #mainNavigation .menu-root li:hover > ul.menu-sub,
    body[data-layout="transport"] #mainNavigation .menu-root li:focus-within > ul.menu-sub,
    body[data-layout="transport"] #mainNavigation .menu-root li.transport-submenu-open > ul.menu-sub {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition-delay: 0s !important;
    }

    body.home-layout-transport #mainNavigation .menu-root > li.has-children::after,
    body.layout-transport #mainNavigation .menu-root > li.has-children::after,
    body.transport-layout #mainNavigation .menu-root > li.has-children::after,
    body[data-home-layout="transport"] #mainNavigation .menu-root > li.has-children::after,
    body[data-layout="transport"] #mainNavigation .menu-root > li.has-children::after {
        content: "" !important;
        position: absolute !important;
        left: -12px !important;
        right: -12px !important;
        top: 100% !important;
        height: 24px !important;
        z-index: 99998 !important;
        pointer-events: auto !important;
    }

    body.home-layout-transport #mainNavigation .menu-sub > li.has-children::after,
    body.layout-transport #mainNavigation .menu-sub > li.has-children::after,
    body.transport-layout #mainNavigation .menu-sub > li.has-children::after,
    body[data-home-layout="transport"] #mainNavigation .menu-sub > li.has-children::after,
    body[data-layout="transport"] #mainNavigation .menu-sub > li.has-children::after {
        content: "" !important;
        position: absolute !important;
        top: -14px !important;
        bottom: -14px !important;
        left: calc(100% - 18px) !important;
        width: 52px !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    body.home-layout-transport #mainNavigation .menu-sub > li,
    body.layout-transport #mainNavigation .menu-sub > li,
    body.transport-layout #mainNavigation .menu-sub > li,
    body[data-home-layout="transport"] #mainNavigation .menu-sub > li,
    body[data-layout="transport"] #mainNavigation .menu-sub > li {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 40px !important;
    }

    body.home-layout-transport #mainNavigation .menu-sub > li > a,
    body.layout-transport #mainNavigation .menu-sub > li > a,
    body.transport-layout #mainNavigation .menu-sub > li > a,
    body[data-home-layout="transport"] #mainNavigation .menu-sub > li > a,
    body[data-layout="transport"] #mainNavigation .menu-sub > li > a {
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }

    body.home-layout-transport #mainNavigation li.transport-submenu-open,
    body.layout-transport #mainNavigation li.transport-submenu-open,
    body.transport-layout #mainNavigation li.transport-submenu-open,
    body[data-home-layout="transport"] #mainNavigation li.transport-submenu-open,
    body[data-layout="transport"] #mainNavigation li.transport-submenu-open {
        z-index: 100010 !important;
    }

    body.home-layout-transport #mainNavigation .menu-sub,
    body.layout-transport #mainNavigation .menu-sub,
    body.transport-layout #mainNavigation .menu-sub,
    body[data-home-layout="transport"] #mainNavigation .menu-sub,
    body[data-layout="transport"] #mainNavigation .menu-sub {
        min-width: 250px !important;
    }
}


/* ==========================================================
   TRANSPORT HEADER ORDER
   Banner (if any) -> Horizontal Menu -> Clock + Search
   Only applies to Transport layout; other layouts unchanged.
   ========================================================== */
body.home-layout-transport .transport-header-order-wrap,
body.layout-transport .transport-header-order-wrap,
body.transport-layout .transport-header-order-wrap,
body[data-home-layout="transport"] .transport-header-order-wrap,
body[data-layout="transport"] .transport-header-order-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: visible;
}

/* Let header children participate in the wrapper order. */
body.home-layout-transport .transport-header-order-wrap > header.brand-row-search,
body.layout-transport .transport-header-order-wrap > header.brand-row-search,
body.transport-layout .transport-header-order-wrap > header.brand-row-search,
body[data-home-layout="transport"] .transport-header-order-wrap > header.brand-row-search,
body[data-layout="transport"] .transport-header-order-wrap > header.brand-row-search {
    display: contents;
}

/* Keep the optional wide banner above the horizontal menu. */
body.home-layout-transport .transport-header-order-wrap .brand-header-banner-wide,
body.layout-transport .transport-header-order-wrap .brand-header-banner-wide,
body.transport-layout .transport-header-order-wrap .brand-header-banner-wide,
body[data-home-layout="transport"] .transport-header-order-wrap .brand-header-banner-wide,
body[data-layout="transport"] .transport-header-order-wrap .brand-header-banner-wide {
    order: 10;
    width: min(1280px, calc(100% - 20px));
    margin-left: auto;
    margin-right: auto;
}

/* Horizontal menu is moved above clock/search. */
body.home-layout-transport .transport-header-order-wrap > #mainNavigation,
body.layout-transport .transport-header-order-wrap > #mainNavigation,
body.transport-layout .transport-header-order-wrap > #mainNavigation,
body[data-home-layout="transport"] .transport-header-order-wrap > #mainNavigation,
body[data-layout="transport"] .transport-header-order-wrap > #mainNavigation {
    order: 20;
    width: 100%;
    overflow: visible !important;
}

/* Clock + Search block is placed immediately below the menu. */
body.home-layout-transport .transport-header-order-wrap .brand-row-main,
body.layout-transport .transport-header-order-wrap .brand-row-main,
body.transport-layout .transport-header-order-wrap .brand-row-main,
body[data-home-layout="transport"] .transport-header-order-wrap .brand-row-main,
body[data-layout="transport"] .transport-header-order-wrap .brand-row-main {
    order: 30;
    width: min(1280px, calc(100% - 20px));
    margin: 8px auto 0;
    box-sizing: border-box;
}

/* Preserve submenu visibility when navigation is inside the new wrapper. */
body.home-layout-transport .transport-header-order-wrap,
body.home-layout-transport .transport-header-order-wrap #mainNavigation,
body.home-layout-transport .transport-header-order-wrap #mainNavigation .main-menu-shell,
body.home-layout-transport .transport-header-order-wrap #mainNavigation .primary-menu-host,
body.layout-transport .transport-header-order-wrap,
body.layout-transport .transport-header-order-wrap #mainNavigation,
body.transport-layout .transport-header-order-wrap,
body.transport-layout .transport-header-order-wrap #mainNavigation {
    overflow: visible !important;
}

@media (max-width:860px) {
    body.home-layout-transport .transport-header-order-wrap .brand-row-main,
    body.layout-transport .transport-header-order-wrap .brand-row-main,
    body.transport-layout .transport-header-order-wrap .brand-row-main,
    body[data-home-layout="transport"] .transport-header-order-wrap .brand-row-main,
    body[data-layout="transport"] .transport-header-order-wrap .brand-row-main {
        width: calc(100% - 16px);
        margin-top: 6px;
    }
}


/* ==========================================================
   TRANSPORT HEADER BANNER - FORCE 1280PX CONTAINER
   Fix overflow after reordering Menu / Clock / Search.
   ========================================================== */
body.home-layout-transport .transport-header-order-wrap .brand-header-banner-wide,
body.layout-transport .transport-header-order-wrap .brand-header-banner-wide,
body.transport-layout .transport-header-order-wrap .brand-header-banner-wide,
body[data-home-layout="transport"] .transport-header-order-wrap .brand-header-banner-wide,
body[data-layout="transport"] .transport-header-order-wrap .brand-header-banner-wide {
    width: 100% !important;
    max-width: 1280px !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: hidden !important;
}

body.home-layout-transport .transport-header-order-wrap .brand-header-banner-wide img,
body.layout-transport .transport-header-order-wrap .brand-header-banner-wide img,
body.transport-layout .transport-header-order-wrap .brand-header-banner-wide img,
body[data-home-layout="transport"] .transport-header-order-wrap .brand-header-banner-wide img,
body[data-layout="transport"] .transport-header-order-wrap .brand-header-banner-wide img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}

/* Prevent inherited full-viewport rules from forcing the banner beyond 1280px. */
body.home-layout-transport .transport-header-order-wrap .inner-header-banner-wide,
body.layout-transport .transport-header-order-wrap .inner-header-banner-wide,
body.transport-layout .transport-header-order-wrap .inner-header-banner-wide,
body[data-home-layout="transport"] .transport-header-order-wrap .inner-header-banner-wide,
body[data-layout="transport"] .transport-header-order-wrap .inner-header-banner-wide {
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-inline: auto !important;
}

@media (max-width:1280px) {
    body.home-layout-transport .transport-header-order-wrap .brand-header-banner-wide,
    body.layout-transport .transport-header-order-wrap .brand-header-banner-wide,
    body.transport-layout .transport-header-order-wrap .brand-header-banner-wide,
    body[data-home-layout="transport"] .transport-header-order-wrap .brand-header-banner-wide,
    body[data-layout="transport"] .transport-header-order-wrap .brand-header-banner-wide {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }
}


/* ==========================================================
   TRANSPORT HOME - ZONE ARTICLE CARD TYPOGRAPHY / SPACING
   Larger, cleaner titles and tighter image-to-text rhythm.
   ========================================================== */
body.home-layout-transport .rt-zone-card h3,
body.home-layout-transport .rt-zone-card h3 a,
body.home-layout-transport .rt-story-card h3,
body.home-layout-transport .rt-story-card h3 a,
body.home-layout-transport .rt-news-card h3,
body.home-layout-transport .rt-news-card h3 a,
body.home-layout-transport .rt-card-title,
body.home-layout-transport .rt-card-title a,
body.home-layout-transport .rt-zone-content h3,
body.home-layout-transport .rt-zone-content h3 a {
    font-size: clamp(16px, 1.18vw, 18px) !important;
    line-height: 1.38 !important;
    font-weight: 700 !important;
    letter-spacing: -0.012em;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
}

body.home-layout-transport .rt-zone-card img,
body.home-layout-transport .rt-story-card img,
body.home-layout-transport .rt-news-card img,
body.home-layout-transport .rt-zone-content img {
    display: block;
    margin-bottom: 0 !important;
}

body.home-layout-transport .rt-zone-card .rt-card-body,
body.home-layout-transport .rt-story-card .rt-card-body,
body.home-layout-transport .rt-news-card .rt-card-body,
body.home-layout-transport .rt-zone-content .rt-card-body,
body.home-layout-transport .rt-zone-card .content,
body.home-layout-transport .rt-story-card .content,
body.home-layout-transport .rt-news-card .content {
    padding-top: 9px !important;
}

body.home-layout-transport .rt-zone-card p,
body.home-layout-transport .rt-story-card p,
body.home-layout-transport .rt-news-card p,
body.home-layout-transport .rt-zone-content p {
    margin-top: 3px !important;
    margin-bottom: 0 !important;
    line-height: 1.55;
}

@media (max-width: 768px) {
    body.home-layout-transport .rt-zone-card h3,
    body.home-layout-transport .rt-zone-card h3 a,
    body.home-layout-transport .rt-story-card h3,
    body.home-layout-transport .rt-story-card h3 a,
    body.home-layout-transport .rt-news-card h3,
    body.home-layout-transport .rt-news-card h3 a,
    body.home-layout-transport .rt-card-title,
    body.home-layout-transport .rt-card-title a {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}


/* Actual Transport zone cards use mh-* classes. */
body.home-layout-transport .mh-zone-feature h3,
body.home-layout-transport .mh-zone-feature h3 a,
body.home-layout-transport .mh-zone-grid h3,
body.home-layout-transport .mh-zone-grid h3 a,
body.home-layout-transport .mh-zone-content h3,
body.home-layout-transport .mh-zone-content h3 a {
    font-size: clamp(16px, 1.18vw, 18px) !important;
    line-height: 1.38 !important;
    font-weight: 700 !important;
    letter-spacing: -0.012em;
    margin: 0 0 5px !important;
}

body.home-layout-transport .mh-zone-feature img,
body.home-layout-transport .mh-zone-grid img {
    display: block;
    margin-bottom: 0 !important;
}

body.home-layout-transport .mh-zone-feature > div,
body.home-layout-transport .mh-zone-grid article > div,
body.home-layout-transport .mh-zone-grid .mh-zone-item > div {
    padding-top: 8px !important;
}

body.home-layout-transport .mh-zone-feature p,
body.home-layout-transport .mh-zone-grid p,
body.home-layout-transport .mh-zone-content p {
    margin-top: 3px !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    body.home-layout-transport .mh-zone-feature h3,
    body.home-layout-transport .mh-zone-feature h3 a,
    body.home-layout-transport .mh-zone-grid h3,
    body.home-layout-transport .mh-zone-grid h3 a {
        font-size: 16px !important;
    }
}