/* ============================================================
   regna-responsive.css — làm bản Framer chạy được dưới 1200px.

   VÌ SAO CẦN: thiết kế Framer CHỈ có layout desktop 1200px.
   Breakpoint CSS của Framer (max-width:809px và 810-1199px) chỉ dài
   738 ký tự mỗi cái và TOÀN LÀ TYPOGRAPHY — không một dòng layout nào.
   Dưới 1200px mọi thứ giữ nguyên 1200px rồi bị cắt hai bên.
   Đã kiểm chứng: bản gốc favorite-gazelle-657517.framer.app bị y hệt.

   Nguyên tắc: KHÔNG đụng gì từ 1200px trở lên — desktop giữ nguyên 100%.
   ============================================================ */

@media (max-width: 1199px) {

  /* 1. Bỏ trần 1200px, cho co theo màn hình */
  [data-framer-name="Main"],
  [data-framer-name="Main"] > *,
  [data-framer-name="Hero"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 2. Mọi khối con: đừng vượt quá khung nhìn */
  [data-framer-name="Main"] * {
    max-width: 100% !important;
  }

  /* 3. Hàng ngang nhiều cột -> cho xuống dòng thay vì tràn */
  [data-framer-name="Main"] [style*="flex-direction: row"]:not(ul):not([data-framer-name="Testimonials"]),
  [data-framer-name="Main"] [style*="flex-direction:row"]:not(ul):not([data-framer-name="Testimonials"]) {
    flex-wrap: wrap !important;
  }

  /* 4. Lề an toàn hai bên */
  [data-framer-name="Main"] > * {
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
  }

  /* 5. Ảnh/video không được đẩy layout */
  [data-framer-name="Main"] img,
  [data-framer-name="Main"] video { max-width: 100% !important; height: auto !important; }

  /* 6. Framer đặt CHIỀU CAO CỐ ĐỊNH cho section. Khi nội dung xếp lại thì
        chiều cao đó không còn khớp -> sinh mảng trống lớn. Cho cao tự động.
        TRỪ Hero: nó cần vùng cuộn cao để chạy scrub. */
  [data-framer-name="Main"] > *,
  [data-framer-name="Main"] > * > * {
    height: auto !important;
    min-height: 0 !important;
  }
  /* khối có ảnh nền / video nền thì giữ tỉ lệ, không ép về auto */
  [data-framer-name="Main"] [data-framer-background-image-wrapper],
  [data-framer-name="Main"] video {
    height: 100% !important;
  }

}

/* ---- MOBILE: xếp dọc ---- */
@media (max-width: 809px) {
  /* hàng nhiều cột -> một cột.
     TRỪ marquee (<ul>) và carousel: chúng TỰ cuộn ngang, ép thành cột sẽ
     biến thành tháp dọc khổng lồ (đo được: Social 889px -> 9535px). */
  [data-framer-name="Main"] [style*="flex-direction: row"]:not(ul):not([data-framer-name="Testimonials"]),
  [data-framer-name="Main"] [style*="flex-direction:row"]:not(ul):not([data-framer-name="Testimonials"]) {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* marquee + carousel: giữ hàng ngang, cho cuộn */
  [data-framer-name="Main"] ul,
  [data-framer-name="Main"] [data-framer-name="Testimonials"] {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: auto !important;
  }
  [data-framer-name="Main"] > * {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   CỠ CHỮ CO GIÃN cho tiêu đề lớn.
   Framer đặt font-size cố định; dưới 810px thì heading tràn ra ngoài
   (đo được: h1 hero rộng 768px trong khung 430px).
   Dùng clamp() để chữ tự co, KHÔNG đụng desktop (>=1200px).
   Marquee chạy ngang (AI-POWERED PRECISION, 100+ BODY MEASUREMENTS...)
   thì để nguyên — tràn là CÓ CHỦ Ý vì nó tự cuộn.
   ============================================================ */
@media (max-width: 1199px) {
  [data-framer-name="Hero"] h1,
  [data-framer-name="Hero"] h1 * {
    font-size: clamp(28px, 7.2vw, 86px) !important;
    line-height: 1.06 !important;
    white-space: normal !important;
  }
  [data-framer-name="Hero"] [data-framer-name="Content"],
  [data-framer-name="Hero"] [data-framer-name="Heading Content"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
  /* tiêu đề section trong Main */
  [data-framer-name="Main"] h2,
  [data-framer-name="Main"] h2 * {
    font-size: clamp(24px, 5.2vw, 52px) !important;
    line-height: 1.12 !important;
  }
  [data-framer-name="Main"] h3,
  [data-framer-name="Main"] h3 * { font-size: clamp(20px, 3.6vw, 36px) !important; }
  [data-framer-name="Main"] h4,
  [data-framer-name="Main"] h4 * { font-size: clamp(17px, 2.6vw, 26px) !important; }

  /* chữ dài không được đẩy layout */
  [data-framer-name="Main"] h1, [data-framer-name="Main"] h2,
  [data-framer-name="Main"] h3, [data-framer-name="Main"] h4, [data-framer-name="Main"] p {
    overflow-wrap: anywhere;
  }
}