/* =============================================================
   responsive.css — GMVPro Landing Page

   Breakpoints:
   ≤1100px  Tablet landscape
   ≤900px   Tablet portrait
   ≤640px   Mobile
   ≤400px   Small phones
   coarse   Touch device min-targets
============================================================= */

/* ============================================================
   Tablet landscape ≤1100px
============================================================ */
@media (max-width: 1100px) {
  :root { --gutter: clamp(20px, 4vw, 40px); }

  /* Nav có thêm link "Phân tích AI" — thu gọn để không tràn */
  .nav__links { gap: 20px; font-size: 14px; }
  .nav__links a:last-child { display: none; }   /* ẩn "Về chúng tôi" */

  .features__grid,
  .testimonials__grid,
  .pricing__grid { grid-template-columns: 1fr 1fr; }

  .features__grid > :nth-child(3),
  .testimonials__grid > :nth-child(3) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }

  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .footer__top > :first-child { grid-column: 1 / -1; }
}

/* ============================================================
   Tablet portrait ≤900px
============================================================ */
@media (max-width: 900px) {
  /* AI section — stack points above panel */
  .ai__layout {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 620px;
    margin: 0 auto;
  }

  .steps__stack {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 520px;
  }
  /* Reset staircase margins — inline styles are removed, overriding class selectors */
  .step--1 { margin: 0; }
  .step--2 { margin: 0; }
  .step--3 { margin: 0; }

  .steps__arrow { display: none; }

  .faq__layout { grid-template-columns: 1fr; gap: 32px; }
  .faq__illu { position: relative; top: 0; max-width: 240px; margin: 0 auto; }

  .pricing__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plan--featured { transform: none; }
  .plan--featured:hover { transform: translateY(-4px); }
}

/* ============================================================
   Mobile ≤640px
============================================================ */
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  body { font-size: 15.5px; }

  /* === NAV — compact === */
  .nav__inner { padding: 12px var(--gutter); gap: 12px; }
  .nav__links { display: none; }
  .brand__sub { display: none; }
  .brand__word { font-size: 17px; }
  .brand__mark { width: 28px; height: 28px; }
  .btn--nav-outline { padding: 8px 14px; font-size: 13px; }
  .btn--nav-fill { padding: 8px 14px; font-size: 13px; }

  /* === HERO === */
  .hero { padding: 36px 0 0; }
  .hero__pin, .hero__bolt { display: none; }
  .hero__title { font-size: 32px; line-height: 1.1; margin-bottom: 16px; }
  .hero__title br { display: none; }
  .hero__sub { font-size: 15.5px; margin-bottom: 24px; }
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 40px;
    padding: 0 8px;
  }
  .hero__cta .btn { width: 100%; padding: 14px 20px; }
  .hero__screen { padding: 0 var(--gutter); }
  .hero__screen-frame { border-radius: 14px; transform: translateY(10px); }
  .hero__chrome { padding: 8px 10px; }
  .hero__chrome-url { font-size: 10px; padding: 3px 8px; max-width: none; }

  /* Trust bar */
  .hero__trust {
    margin-top: 40px;
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
  .hero__trust-list {
    gap: 8px 18px;
    justify-content: center;
    font-size: 13px;
  }
  .hero__trust-list li small { font-size: 9px; padding: 1px 4px; }

  /* === SECTION SPACING === */
  .features, .testimonials, .pricing, .faq, .closing { padding: 56px 0; }
  .ai { padding: 56px 0; }
  .ai__head { margin-bottom: 32px; }
  .steps { padding: 48px 0; }
  .partners { padding: 40px 0; }
  .video-section { padding: 44px 0; }
  .section-title { font-size: 26px; line-height: 1.15; }
  .features__head, .testimonials__head, .pricing__head { margin-bottom: 32px; }
  .steps__head { margin-bottom: 24px; }

  /* === AI SECTION === */
  .ai__badge { font-size: 11px; padding: 6px 12px; }
  .ai__lead { font-size: 15px; }
  .ai__head .section-title br { display: none; }
  .ai__layout { gap: 32px; }
  .ai__points { gap: 20px; }
  .ai__point { grid-template-columns: 38px 1fr; gap: 13px; }
  .ai__point-ico { width: 38px; height: 38px; border-radius: 11px; }
  .ai__point-ico svg { width: 18px; height: 18px; }
  .ai__point-t { font-size: 16px; }
  .ai__point-b { font-size: 14px; }
  .ai__panel { border-radius: 18px; }
  .ai__panel-head { padding: 14px 16px; gap: 10px; }
  .ai__panel-live { font-size: 10.5px; padding: 4px 9px; }
  .ai__panel-body { padding: 14px 16px; gap: 10px; }
  .ai-card { padding: 12px 14px; }
  .ai-card__name { font-size: 14px; }
  .ai-card__stat, .ai-card__rec { font-size: 13px; }
  .ai__cta { margin-top: 36px; flex-direction: column; gap: 12px; }
  .ai__cta .btn { width: 100%; }
  .ai__cta-note { font-size: 13px; text-align: center; }

  /* === HERO AI FLAG === */
  .hero__flag {
    font-size: 12.5px;
    padding: 6px 12px 6px 6px;
    gap: 8px;
    margin-bottom: 18px;
    text-align: left;
  }
  .hero__flag-new { font-size: 10.5px; padding: 3px 9px; }
  .hero__flag svg { display: none; }

  /* === FEATURES — single column === */
  .features__grid { grid-template-columns: 1fr; gap: 14px; }
  .features__grid > :nth-child(3) { max-width: 100%; }
  .feat-card { padding: 24px 22px 20px; }
  .feat-card__icon { width: 42px; height: 42px; margin-bottom: 18px; }
  .feat-card__title { font-size: 17px; }
  .feat-card__body { font-size: 14px; margin-bottom: 16px; }

  /* === STEPS === */
  .steps__stack { max-width: 100%; gap: 12px; }
  .step { padding: 22px 20px; }
  .step__num { font-size: 40px; margin-bottom: 14px; }
  .step__t { font-size: 17px; }
  .step__b { font-size: 14px; }

  /* === VIDEO === */
  .video__player { border-radius: 14px; }
  .video__title { font-size: 18px; }
  .video__desc { font-size: 12.5px; }
  .video__meta { bottom: 16px; left: 16px; right: 16px; }
  .video__play {
    width: 52px; height: 52px;
    right: 16px; top: 16px;
    transform: none;
  }
  .video__player:hover .video__play { transform: scale(1.06); }
  .video__play svg { width: 18px; height: 18px; }
  .video__badge { font-size: 9.5px; padding: 4px 9px; margin-bottom: 8px; }
  .video__hint { font-size: 12px; padding: 10px 14px; }

  /* === TESTIMONIALS === */
  .testimonials__grid { grid-template-columns: 1fr; gap: 14px; }
  .testimonials__grid > :nth-child(3) { max-width: 100%; }
  .testi { padding: 24px 20px; }
  .testi__quote { font-size: 14px; }

  /* === PARTNERS === */
  .partners__t { font-size: 18px; margin-bottom: 24px; }
  .partners__logos { gap: 14px; }
  .partner-logo { height: 36px; font-size: 11.5px; padding: 0 14px; }

  /* === PRICING === */
  .pricing__title { font-size: 32px; }
  .pricing__grid { gap: 14px; }
  .plan { padding: 26px 22px; }
  .plan__name { font-size: 20px; }
  .plan__price { font-size: 36px; }

  /* === FAQ === */
  .faq__layout { gap: 24px; }
  .faq__illu { max-width: 180px; }
  .faq__title { font-size: 28px; margin-bottom: 20px; }
  .faq-item { padding: 14px 18px; }
  .faq-item summary { font-size: 14.5px; gap: 12px; }
  .faq-item summary::after { width: 9px; height: 9px; }
  .faq-item__body { font-size: 13.5px; }

  /* === CLOSING === */
  .closing { padding: 48px 0 64px; }
  .closing__card { padding: 44px 22px; border-radius: 20px; }
  .closing__card::before { width: 140px; height: 140px; top: -60px; left: -60px; }
  .closing__card::after { width: 200px; height: 200px; bottom: -90px; right: -90px; }
  .closing__t { font-size: 24px; line-height: 1.15; margin-bottom: 12px; }
  .closing__t br { display: none; }
  .closing__sub { font-size: 14.5px; margin-bottom: 24px; }
  .closing__btn { padding: 14px 28px; font-size: 15px; }
  .closing__re { font-size: 12px; }

  /* === MODAL ĐẶT LỊCH DEMO === */
  .modal { padding: 14px; align-items: flex-end; }
  .modal__dialog { padding: 28px 20px 22px; border-radius: 22px; max-width: 100%; }
  .modal__title { font-size: 20px; }
  .modal__desc { font-size: 13.5px; }
  .modal__ico { width: 46px; height: 46px; margin-bottom: 12px; }
  .modal__head { margin-bottom: 18px; }
  .dform { gap: 13px; }
  .dform__input { font-size: 16px; }   /* ≥16px để iOS không tự zoom khi focus */
  .dform__note { font-size: 11.5px; }
  .dform__done-cta { flex-direction: column; }
  .dform__done-cta .btn { width: 100%; }

  /* === FOOTER === */
  .footer { padding: 44px 0 20px; }
  .footer__top { grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px; }
  .footer__about-tag { max-width: 100%; }
  .footer__base { font-size: 12px; }
}

/* ============================================================
   Small phones ≤400px
============================================================ */
@media (max-width: 400px) {
  :root { --gutter: 16px; }

  .hero__title { font-size: 28px; }
  .hero__sub { font-size: 15px; }
  .section-title { font-size: 23px; }

  .features, .testimonials, .pricing, .faq { padding: 44px 0; }
  .steps { padding: 40px 0; }
  .ai { padding: 44px 0; }
  .hero__flag { font-size: 12px; }
  .ai-card__acts .ai-chip { font-size: 12px; padding: 5px 11px; }

  .closing__t { font-size: 22px; }
  .partners__logos { gap: 10px; }
  .partner-logo { height: 32px; font-size: 10.5px; padding: 0 10px; }
  .hero__trust-list { font-size: 12.5px; }
  .nav__cta { gap: 8px; }
  .btn--nav-outline { padding: 7px 12px; font-size: 12.5px; }
  .btn--nav-fill { padding: 7px 12px; font-size: 12.5px; }
}

/* ============================================================
   Touch devices — minimum tap target 44px
============================================================ */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .step__btn { min-height: 40px; }
  .feat-card__link { min-height: 36px; padding-bottom: 6px; }
  .faq-item summary { min-height: 44px; }
  .nav__cta .btn { min-height: 38px; }
}