/* MBVNS footer — phones and tablets only (enqueued with media="(max-width: 1023px)").
   The source footer has three layouts below its 1024px desktop one (real-device / real-browser
   measurements on mercedes-benz.com.vn/vi):
   - < 480 (iPhone 16 Pro 402, default zoom): one column. Black, 5vw gutter; back-to-top label
     82px under the footer top; 18/28 bold white headings with 16px under them, 14px #e8e8e8
     links on a 40px pitch; groups separated by a 1px #333 rule centred in a 49px gap.
   - 480-767 (desktop Chrome 500-767; also what an iPhone shows with Safari page zoom ~75%):
     the sitemap as a 2x2 grid — row 1 "Các dòng xe / Mua xe", row 2 "Tư vấn mua xe /
     Dịch vụ" — two equal columns 16px apart inside the 5vw gutters; row-2 groups
     open with a 1px #333 rule 24px after row-1 lists, then 24px padding.
   - 768-1023 (iPad Pro 11, 834): 4-column grid with a 7vw gutter and 16px column gap; back-to-top
     label 58px under the footer top; legal links in one wrapping row.
   Every layout ends with the lower block: 1px #333 rule 32px after the last list, 32px padding,
   the social row (32px targets with 24px icons on a 56px pitch), 24px, the legal links
   (stacked on a 40px pitch below 768, one row from 768), 16px bottom padding. */

.mb-footer, .mbvns-footer { display: block; gap: 0; padding: 16px 5vw; }
.mb-foot-top { padding: 0; }
.mb-foot-totop { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%;
  margin: 24px 0 0; padding: 8px 0; background: none; border: 0; color: var(--mb-white);
  font-family: inherit; cursor: pointer; }
.mb-foot-totop-icon { display: grid; place-items: center; width: 34px; height: 34px; color: #e8e8e8; }
.mb-foot-totop-label { font-size: 12px; line-height: 16px; }

.mbvns-footer-nav { border-top: 0; margin: 0; }
.mbvns-footer-nav:first-of-type { margin-top: 32px; }
.mbvns-footer-nav + .mbvns-footer-nav { border-top: 1px solid #333; margin-top: 24px; padding-top: 24px; }
.mb-foot-head { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--mb-white); margin: 0 0 16px; }
.mbvns-footer-nav ul { display: flex; flex-direction: column; gap: 4px; }
.mbvns-footer-nav a { display: block; font-size: 14px; line-height: 36px; color: #e8e8e8; }

.mb-foot-social { display: flex; align-items: center; gap: 24px; list-style: none; margin: 32px 0 0;
  padding: 32px 0 16px; border-top: 1px solid #333; }
.mb-foot-social a { display: grid; place-items: center; width: 32px; height: 32px; color: #e8e8e8;
  border-radius: 4px; }
.mb-foot-social svg { display: block; width: 24px; height: 24px; }
.mb-foot-social a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.mb-foot-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 24px 0 0;
  padding: 0; border-top: 0; font-size: 14px; }
.mb-foot-legal span, .mb-foot-legal a { line-height: 36px; color: #e8e8e8; font-size: 14px; }

@media (min-width: 480px) {
  .mb-footer, .mbvns-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px; row-gap: 0; align-items: start; }
  .mb-foot-top, .mb-foot-social, .mb-foot-legal { grid-column: 1 / -1; }
  .mbvns-footer-nav:nth-of-type(-n+2) { margin-top: 32px; padding-top: 0; border-top: 0; }
  .mbvns-footer-nav:nth-of-type(n+3) { margin-top: 24px; padding-top: 24px; border-top: 1px solid #333; }
}

@media (min-width: 768px) {
  .mb-footer, .mbvns-footer { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; padding: 16px 7vw; }
  .mb-foot-totop { margin: 0; }
  .mbvns-footer-nav:nth-of-type(-n+4) { margin-top: 32px; padding-top: 0; border-top: 0; }
  .mb-foot-legal { flex-direction: row; flex-wrap: wrap; gap: 16px; }
}