/* ==========================================================================
   Responsive — luôn nạp cuối cùng (ghi đè biến :root)
   ========================================================================== */

@media (max-width: 1100px) {
  .bb-header__phone span { display: none; }
  .bb-menu > li > a { padding: 0 10px; }
}

@media (max-width: 1024px) {
  :root { --bb-section-y: 72px; --bb-header-h: 70px; }

  .bb-nav, .bb-header__actions .bb-btn { display: none; }
  .bb-header__actions { margin-left: auto; }
  .bb-burger { display: block; }

  .bb-hero__grid,
  .bb-story__grid,
  .bb-purple__grid,
  .bb-contact__grid,
  .bb-pd__grid { grid-template-columns: 1fr; gap: 44px; }
  .bb-hero__visual { max-width: 620px; margin-inline: auto; width: 100%; }
  .bb-purple__media { max-width: 420px; margin-inline: auto; }
  .bb-pd__media { position: static; }

  .bb-usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-usp__item:nth-child(3) { border-left: 0; }
  .bb-usp__item:nth-child(n+3) { border-top: 1px dashed var(--bb-line); }

  .bb-grid, .bb-grid--4, .bb-lines__grid, .bb-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-step:nth-child(2)::after { display: none; }

  .bb-footer__grid { grid-template-columns: 1fr 1fr; }
  .bb-cta__box { grid-template-columns: 1fr; padding: 44px 36px; }
  .bb-cta__actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
  :root { --bb-section-y: 56px; --bb-gutter: 16px; }

  .bb-logo img { width: 42px; height: 42px; }
  .bb-logo b { font-size: 23px; }
  .bb-logo i { font-size: 19px; }
  .bb-header__phone { display: none; }

  .bb-hero { padding-block: 32px 80px; }
  .bb-hero__text { font-size: 16px; }
  .bb-hero__actions .bb-btn { flex: 1 1 100%; }
  .bb-hero__note--a { left: 0; bottom: -20px; }
  .bb-hero__note--b { display: none; }

  .bb-usp__grid { grid-template-columns: 1fr; }
  .bb-usp__item + .bb-usp__item { border-left: 0; border-top: 1px dashed var(--bb-line); }

  .bb-grid, .bb-grid--4, .bb-lines__grid, .bb-values__grid, .bb-steps { grid-template-columns: 1fr; }
  .bb-step::after { display: none; }
  .bb-line { min-height: 340px; }
  .bb-story__stamp { right: 10px; width: 108px; height: 108px; font-size: 18px; }
  .bb-purple__facts { grid-template-columns: 1fr; }

  .bb-footer__grid { grid-template-columns: 1fr; }
  .bb-cta__box { padding: 36px 24px; border-radius: 26px; }
  .bb-cta__actions .bb-btn { flex: 1 1 100%; }

  .bb-form { padding: 26px 20px; }
  .bb-form__grid { grid-template-columns: 1fr; }
  .bb-doc__box, .bb-pd__desc-box { padding: 30px 22px; }
  .bb-pd__specs div { grid-template-columns: 110px 1fr; }
  .bb-float { right: 12px; bottom: 12px; }
  .bb-float a { width: 48px; height: 48px; }
}