/* P37: header nav gap 24px at 1100-1440 (Bricks flex gap 4px; tear-guard 992-1365 pins 4px).
   992-1099 keeps 4px: 24px overlaps the header controls there (measured).
   Desktop submenu = 0.85em of the top-level size (menu ids menu-ics-main VI, menu-ics-main-en EN). Specificity beats tear-guard !important rules. */
@media (min-width:1100px) and (max-width:1440px){
 html body .bricks-nav-menu-wrapper .bricks-nav-menu.bricks-nav-menu#menu-ics-main, html body #brxe-noa29x .bricks-nav-menu.bricks-nav-menu{column-gap:24px}
 html body #brx-header ul.bricks-nav-menu[id^="menu-ics-main"]:not(#p37-nav){column-gap:24px}
}
@media (min-width:992px){
 html body #brx-header ul.bricks-nav-menu[id^="menu-ics-main"]:not(#p37-nav) .sub-menu li a{font-size:0.85em !important}
}

/* P53 (2026-11-05): desktop header CTA 'Liên hệ' (#brxe-0u3y67, black torn) at 75% size.
   Visual height = 75% of the header control height, capped at the logo height (#brxe-urmm1g = 3rem).
   Touch area >= 44px: invisible vertical padding + matching negative margin (P48 pattern); torn ::before/::after inset to the visual box so the padding never paints.
   Scope: desktop bar only (>= 992px). Phone/tablet CTA is in the mobile menu (#brxe-ed8mhp): untouched. Tokens only. */
:root {
  --ics-hdr-cta-k: 0.75;
  --ics-hdr-logo-h: 3rem;
  --ics-hdr-cta-h: min(calc(var(--header-control-h) * var(--ics-hdr-cta-k)), var(--ics-hdr-logo-h));
  --ics-hdr-cta-hit-y: max(0px, calc((2.75rem - var(--ics-hdr-cta-h)) / 2));
}
@media (min-width: 992px) {
  html:root body #brx-header #brxe-0u3y67.ics-btn.ics-btn--torn.brxe-button {
    box-sizing: content-box !important;
    height: var(--ics-hdr-cta-h) !important;
    min-height: 0 !important;
    padding-block: var(--ics-hdr-cta-hit-y) !important;
    padding-inline: calc(var(--sp-l) * var(--ics-hdr-cta-k)) !important;
    margin-block: calc(var(--ics-hdr-cta-hit-y) * -1) !important;
    font-size: calc(var(--fs-body) * var(--ics-hdr-cta-k)) !important;
    line-height: calc(var(--lh-body) * var(--ics-hdr-cta-k)) !important;
  }
  html:root body #brx-header #brxe-0u3y67.ics-btn--torn::before,
  html:root body #brx-header #brxe-0u3y67.ics-btn--torn::after {
    inset: var(--ics-hdr-cta-hit-y) 0 !important;
  }
}

/* P61 (2026-11-05): desktop header "true centre". Bar = 3 tracks (1fr auto 1fr): logo | main menu | actions.
   The visible menu sits on the bar midline. Actions wrapper #brxe-ics61a = lang #brxe-v9qqfj + a11y #ics-a11y-toggle + Contact #brxe-0u3y67 (DOM and tab order unchanged).
   Centre layout: >=992 at text scale 1; >=1440 at any text scale. Otherwise the original flex layout (wrapper = display:contents), so nothing new overlaps at text scale 2/3 below 1440.
   Phone/tablet (<992): wrapper display:contents = original DOM flow, hamburger untouched. Tokens only. */
html body #brx-header #brxe-ics61a { display: contents; }

/* H26 mobile menu (2026-11-05 VN): tablet/phone overlay content aligned to the header pill.
   List and CTA use the page container (--container-w 87.5%, max --container-max) so their left/right edges = header pill edges.
   Rows: min-height 3rem, padding-block --sp-s, 1px --border-separator between rows (none above first or below last).
   Chevron: full opacity, --sp-m size, right edge on the container edge (44px hit box kept via negative inline margin).
   Sub-menu: indented --sp-l. CTA: same width as list, --sp-m from bottom, safe-area aware.
   Scope: header 243 nav #brxe-noa29x, <=991px; phone <=599px adds row padding only. Specificity html:root body #brx-header #brxe-noa29x#brxe-noa29x beats ics-mobile-menu.css and tear-guard.css mobile rules. !important only where a higher-specificity rule already sets the property. Tokens only; literals only where no token exists (font clamp, 1.2 line-height, -14px = (sp-m - 44px)/2). */
@media (max-width: 991px) {
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: calc(var(--sp-m) + 3.5rem + var(--sp-l) + env(safe-area-inset-bottom, 0px)) !important;
  }
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu {
    box-sizing: border-box;
    width: var(--container-w);
    max-width: var(--container-max, 1440px);
    margin-inline: auto;
    padding: 0;
  }
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu > li {
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu > li + li {
    border-top: 1px solid var(--border-separator) !important;
  }
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu > li > a,
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle,
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle > a {
    min-height: 3rem;
  }
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu > li > a,
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle > a {
    padding: var(--sp-s) 0 !important;
    font-size: clamp(1.5rem, 4.5vw, 2.25rem) !important;
    line-height: 1.2 !important;
  }
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle button {
    margin-inline-end: calc((var(--sp-m) - 2.75rem) / 2);
  }
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle button::after {
    width: var(--sp-m);
    height: var(--sp-m);
    opacity: 1;
  }
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .sub-menu {
    margin-inline: var(--sp-l) 0;
  }
  html:root body #brx-header #brxe-noa29x ~ #brxe-ed8mhp#brxe-ed8mhp.ics-mobile-cta {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(var(--sp-m) + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%);
    width: var(--container-w) !important;
    max-width: var(--container-max, 1440px) !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
}
@media (max-width: 599px) {
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu > li > a,
  html:root body #brx-header #brxe-noa29x#brxe-noa29x .bricks-mobile-menu .brx-submenu-toggle > a {
    padding: var(--sp-xs) 0 !important;
  }
}