/**
 * Site-wide horizontal gutters (all pages).
 * At 1920px: 200px. Smaller screens scale down by viewport width.
 * Header is intentionally excluded because it uses .nav-container.
 */
:root {
  --site-gutter-x: clamp(16px, 4vw, 48px);
}

@media (max-width: 1142px) {
  :root {
    --site-gutter-x: max(12px, env(safe-area-inset-left, 0px));
  }
}

@media (min-width: 1600px) {
  /* Home hero — section padding tắt ngang, bù gutter ở màn rất lớn */
  .bn-home__inner {
    padding-left: var(--site-gutter-x);
    padding-right: var(--site-gutter-x);
  }

  /* Banner tiêu đề trang con (breadcrumb trong hero) */
  .sec-pageTitle__breadcrumb {
    padding-left: var(--site-gutter-x);
    padding-right: var(--site-gutter-x);
  }
}