/* MBVNS compact header — phones and tablets only (enqueued with media="(max-width: 1023px)").
   Measured on the source (mercedes-benz.com.vn/vi), real devices, Safari:
   - iPhone 16 Pro (402): 84px black bar, 16px side gutter; hamburger in a 48x36 slot (36px
     glyph box, #e8e8e8); 38px logo centred at y23; right: language (48x32 slot, 32px button,
     24px globe) and account (56x40 slot: 32px #696969 avatar with a 16px #e8e8e8 icon), 16px apart.
   - iPad Pro 11 (834): same bar with a 7vw gutter (58.4) and the "Đăng nhập" label (16/23,
     #e8e8e8, 8px after the avatar) inside a 140.1px account slot.
   Everything is centred on the bar's 42px midline. The desktop actions and link row are hidden;
   the hamburger opens the menu overlay (template-parts/mobile-menu.php). */

.mb-header, .mbvns-header { --mb-gutter: 16px; min-height: 84px; padding: 0 var(--mb-gutter); gap: 0;
  justify-content: flex-start; flex-wrap: wrap; }
@media (min-width: 601px) { .mb-header, .mbvns-header { --mb-gutter: 7vw; } }

.mb-header-actions { display: none; }
.mb-header-compact { display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 84px; }

.mb-header .mb-logo, .mbvns-header .mb-logo { position: absolute; top: 23px; left: 50%;
  transform: translateX(-50%); }
.mb-header .mb-logo img, .mbvns-header .mb-logo img { width: 38px; height: 38px; }

.mb-burger { display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 48px; height: 36px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.mb-burger span { width: 24px; height: 2px; margin: 3px 0; background: #e8e8e8; }

.mb-compact-actions { display: flex; align-items: center; gap: 16px; }
.mb-compact-lang { display: grid; place-items: center; width: 48px; height: 32px; padding: 0; border: 0;
  background: none; color: #e8e8e8; cursor: pointer; }
.mb-compact-lang svg { display: block; width: 24px; height: 24px; }
.mb-compact-account { display: flex; align-items: center; height: 40px; padding: 0 12px; border: 0;
  border-radius: 12px; background: none; color: #e8e8e8; font-family: inherit; cursor: pointer; }
.mb-compact-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: #696969; color: #e8e8e8; }
.mb-compact-avatar svg { display: block; width: 16px; height: 16px; }
.mb-compact-label { display: none; margin-left: 8px; font-size: 16px; line-height: 23px; white-space: nowrap; }
@media (min-width: 601px) { .mb-compact-label { display: inline; } }
.mb-burger:focus-visible, .mb-compact-lang:focus-visible, .mb-compact-account:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; }

/* The desktop link row is replaced by the hamburger overlay (template-parts/mobile-menu.php). */
.mb-nav, .mbvns-nav { display: none; }
.mb-mega-menu { display: none; }