/* Responsive: iPhone SE (320px) → tablet — tránh tràn ngang, CTA an toàn, safe-area */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.page {
  width: 100%;
  max-width: min(1600px, 100%);
  margin-inline: auto;
}

.page,
.section-inner,
.hero-media,
.promo-box,
.risk-grid,
.solution-grid,
.footer-top {
  min-width: 0;
}

/* Tablet: vùng chạm + safe-area cho FAB cố định */
@media (max-width: 1024px) {
  .sticky-fab {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    z-index: 45;
  }

  .sticky-fab.bubble-btn {
    /* Dùng % theo viewport của phần tử fixed, tránh 100vw gây lệch thanh cuộn */
    max-width: calc(100% - 24px);
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* Điện thoại lớn / phablet: nút pill được xuống dòng, không tràn viewport */
@media (max-width: 640px) {
  .bubble-btn {
    white-space: normal;
    text-align: center;
    justify-content: center;
    line-height: 1.2;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-cta.bubble-btn {
    max-width: min(100%, calc(100% - 16px));
  }

  .hero-cta {
    right: max(8px, env(safe-area-inset-right, 0px));
    top: max(8px, env(safe-area-inset-top, 0px));
  }

  .faq-summary__text,
  .hero-title-band h1 {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  .footer-cta .bubble-btn {
    width: 100%;
    max-width: 100%;
  }
}

/* CTA solution: căn giữa trong khối trên màn hẹp; promo-cta giữ căn phải */
@media (max-width: 520px) {
  .promo-cta {
    left: auto;
    right: max(10px, env(safe-area-inset-right, 0px));
    transform: none;
    max-width: calc(100% - 24px);
  }

  .solution-card.cta-host .bubble-anchor {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100% - 24px);
  }
}

/* Quy trình 5 bước: màn hẹp xếp 3 + 2, tránh chữ chồng lên nhau */
@media (max-width: 480px) {
  .process-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px 8px;
    margin-top: 16px;
  }

  .process-grid .step {
    flex: 0 0 calc(33.333% - 6px);
    max-width: calc(33.333% - 6px);
    min-width: 0;
  }

  .step-label {
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* iPhone SE / máy rất hẹp: giảm mép, giữ lưới risk 2 cột từ mockup 680px */
@media (max-width: 360px) {
  .full-bleed {
    padding-inline: max(6px, env(safe-area-inset-left, 0px))
      max(6px, env(safe-area-inset-right, 0px));
  }

  .hero-sub,
  .hero-title-band {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 320px) {
  .bubble-btn {
    padding-inline: 10px 12px;
    gap: 6px;
    font-size: 11px;
  }

  .sticky-fab.bubble-btn {
    padding-inline: 10px 12px;
    font-size: 11px;
  }
}