/* ============================================================
   regna-responsive.css v2 — responsive cho landing Framer (< 1200px).

   CÁCH HOẠT ĐỘNG
   • regna-force-desktop.js + vá style breakpoint: Framer LUÔN render cây
     DOM desktop (bản tablet/phone của thiết kế thiếu section + sai thứ tự).
   • File này xếp lại cây desktop đó theo từng section, nhắm bằng
     data-framer-name (tên layer trong Framer), KHÔNG dùng class băm.
   • ≥1200px: không đụng gì — desktop giữ nguyên 100%.

   Breakpoint: 1199 (tablet + mobile) · 809 (mobile) · 480 (mobile nhỏ)
   ============================================================ */

/* ---------- 0. BIẾN ---------- */
:root{
  --rn-pad: 32px;          /* lề trái/phải section */
  --rn-gap: 32px;
}
@media (max-width: 809px){ :root{ --rn-pad: 20px; --rn-gap: 24px; } }

@media (max-width: 1199px){

  /* ---------- 1. KHUNG TRANG ---------- */
  /* Framer gán order cho breakpoint nhỏ (hero bị đẩy xuống dưới đường cuộn) */
  [data-framer-name="Hero"]   { order: 0 !important; }
  [data-framer-name="Contet"] { order: 1 !important; }
  [data-framer-name="Scroll"] { order: 2 !important; }
  [data-framer-name="Main"]   { order: 3 !important; }
  [data-framer-name="Main"] + div { order: 4 !important; width: 100% !important; max-width: 100% !important; }

  [data-framer-name="Main"],
  [data-framer-name="Hero"],
  [data-framer-name="Contet"],
  [data-framer-name="Scroll"]{
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }
  [data-framer-name="Main"] > *{
    width: 100% !important; max-width: 100% !important;
    height: auto !important; min-height: 0 !important;
  }
  /* không cho bất cứ gì tràn ngang, TRỪ marquee (tự cuộn) */
  [data-framer-name="Main"] *:not(ul):not(li):not([data-framer-name="Marquee"] *){ max-width: 100%; }
  body{ overflow-x: hidden; }

  /* container cấp 1 của section: đổi bề rộng cố định 1200/1140/1040 → 100% */
  [data-framer-name="Main"] > * > [data-framer-name="Container"],
  [data-framer-name="About"] > [data-framer-name="Container"],
  [data-framer-name="Counter"] > [data-framer-name="About-Section"],
  [data-framer-name="CTA"] > [data-framer-name="Content"]{
    width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important;
    padding-left: var(--rn-pad) !important; padding-right: var(--rn-pad) !important;
  }

  /* ---------- 2. CHỮ ---------- */
  [data-framer-name="Main"] h2, [data-framer-name="Main"] h2 *{
    font-size: clamp(30px, 5.2vw, 48px) !important; line-height: 1.12 !important; width: auto !important; max-width: 100% !important;
  }
  [data-framer-name="Main"] h3, [data-framer-name="Main"] h3 *{ font-size: clamp(22px, 3.4vw, 34px) !important; line-height: 1.2 !important; }
  [data-framer-name="Main"] h4, [data-framer-name="Main"] h4 *{ font-size: clamp(20px, 2.8vw, 26px) !important; }
  [data-framer-name="Main"] h6, [data-framer-name="Main"] h6 *{ font-size: clamp(18px, 2.4vw, 22px) !important; }
  [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; }

  /* ---------- 3. HERO ---------- */
  [data-framer-name="Hero"]{ height: 100svh !important; min-height: 560px !important; }
  [data-framer-name="Hero"] [data-framer-name="Content"]{
    width: min(768px, calc(100% - 2 * var(--rn-pad))) !important; max-width: 100% !important;
  }
  [data-framer-name="Hero"] [data-framer-name="Heading Content"],
  [data-framer-name="Hero"] [data-framer-name="Heading Content"] > *{ width: 100% !important; max-width: 100% !important; }
  [data-framer-name="Hero"] h1, [data-framer-name="Hero"] h1 *{
    font-size: clamp(32px, 7.4vw, 64px) !important; line-height: 1.06 !important; white-space: normal !important;
  }
  [data-framer-name="Hero"] p, [data-framer-name="Hero"] p *{ font-size: clamp(13px, 2.2vw, 18px) !important; }
  [data-framer-name="Hero"] [data-framer-name="Button Row"]{
    width: 100% !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important;
  }

  /* ---------- 4. INTRO (About) ---------- */
  [data-framer-name="About"]{ padding-top: 56px !important; }
  [data-framer-name="About"] [data-framer-name="Container"]{ gap: 40px !important; }
  [data-framer-name="About"] [data-framer-name="Top"],
  [data-framer-name="About"] [data-framer-name="Bottom"],
  [data-framer-name="About"] [data-framer-name="Top"] > *,
  [data-framer-name="About"] [data-framer-name="Bottom"] > *{
    width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  [data-framer-name="About"] [data-framer-name="Top"] [data-framer-name="Top"]{ justify-content: center !important; align-items: center !important; gap: 6px 12px !important; }
  [data-framer-name="About"] [data-framer-name="Top"] [data-framer-name="Top"] > *{ width: auto !important; }
  [data-framer-name="About"] [data-framer-name="Top"] h2{ text-align: center !important; }
  [data-framer-name="About"] [data-framer-name="Logo"]{ width: auto !important; }
  [data-framer-name="About"] [data-framer-name="List"]{ justify-content: center !important; }
  /* khối phone: ảnh + video absolute, marquee absolute */
  [data-framer-name="About"] [data-framer-name="Center"]{ height: auto !important; min-height: 0 !important; aspect-ratio: 1200 / 709; position: relative !important; }
  [data-framer-name="About"] [data-framer-name="Center"] > div:first-child{
    left: 50% !important; transform: translateX(-50%) !important; top: 0 !important;
    width: min(340px, 28.3%) !important; height: auto !important; aspect-ratio: 340 / 699;
  }
  [data-framer-name="About"] [data-framer-name="Center"] > div:first-child > div{ width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; }
  [data-framer-name="About"] [data-framer-name="Center"] > div:first-child > div:nth-child(2){ left: 2% !important; top: 0.7% !important; width: 96% !important; height: 98% !important; }
  [data-framer-name="About"] [data-framer-name="Center"] > div:nth-child(2){ width: 100% !important; left: 0 !important; height: auto !important; }
  [data-framer-name="About"] [data-framer-name="Center"] [data-framer-name="Desktop"]{ width: 100% !important; height: auto !important; aspect-ratio: 3 / 1; }
  [data-framer-name="About"] [data-framer-name="Marquee"]{ width: 100% !important; }

  /* ---------- 5. BUILT FOR YOUR BODY (Features) ---------- */
  [data-framer-name="Features"] [data-framer-name="Top"],
  [data-framer-name="Features"] [data-framer-name="Left"]{ width: 100% !important; }
  [data-framer-name="Features"] [data-framer-name="Grid"]{ width: 100% !important; gap: 20px !important; }
  [data-framer-name="Features"] [data-framer-name="Grid"] > *{
    flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: auto !important; aspect-ratio: 554 / 590;
  }
  [data-framer-name="Features"] [data-framer-name="Grid"] > * > div:first-child{ width: 100% !important; height: 100% !important; }
  [data-framer-name="Features"] [data-framer-name="Grid"] + *,
  [data-framer-name="Features"] [data-framer-name="01"]{ width: 100% !important; height: auto !important; }
  [data-framer-name="Features"] [data-framer-name="01"] > [data-framer-name="Top"]{ width: 45% !important; padding: 32px !important; }
  [data-framer-name="Features"] [data-framer-name="01"] > div:last-child{ width: 55% !important; height: auto !important; aspect-ratio: 620 / 395; }
  [data-framer-name="Features"] [data-framer-name="01"] > div:last-child > *{ width: 100% !important; }
  [data-framer-name="Features"] [data-framer-name="01"] > div:last-child video{ width: 100% !important; height: auto !important; }

  /* ---------- 6. HOW IT WORKS (Process Section) ---------- */
  [data-framer-name="Process Section"] [data-framer-name="Top"],
  [data-framer-name="Process Section"] [data-framer-name="Main"]{ width: 100% !important; }
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div,
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div > div{ width: 100% !important; height: auto !important; }
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div > div > [data-framer-name]{
    width: 100% !important; height: auto !important; min-height: 120px !important; padding: 0 24px !important;
  }
  [data-framer-name="Process Section"] [data-framer-name="Left"]{ width: 220px !important; flex: 0 0 220px !important; padding: 24px 0 !important; }
  [data-framer-name="Process Section"] [data-framer-name="Center"]{ width: 80px !important; flex: 0 0 80px !important; height: 120px !important; }
  [data-framer-name="Process Section"] [data-framer-name="Right"]{ width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; padding: 24px 0 !important; }
  [data-framer-name="Process Section"] [data-framer-name="Right"] [data-framer-name="Container"]{ width: 100% !important; }
  [data-framer-name="Process Section"] [data-framer-name="Right"] p{ width: auto !important; white-space: normal !important; }
  [data-framer-name="Process Line Ray"]{ left: 50% !important; }

  /* ---------- 7. COLLECTIONS (Use Case) ---------- */
  [data-framer-name="Use Case"] [data-framer-name="Courses"]{ width: 100% !important; padding: 64px 0 !important; }
  [data-framer-name="Use Case"] [data-framer-name="Courses"] > [data-framer-name="Container"]{ width: 100% !important; gap: 32px !important; }
  [data-framer-name="Use Case"] [data-framer-name="Top"]{ width: 100% !important; }
  [data-framer-name="Use Case"] [data-framer-name="Courses"] > [data-framer-name="Container"] > *,
  [data-framer-name="Use Case"] [data-framer-name="Courses"] > [data-framer-name="Container"] > * > *{ width: 100% !important; height: auto !important; }
  [data-framer-name="Course - Left"], [data-framer-name="Course - Right"]{ width: 100% !important; height: auto !important; aspect-ratio: 1814 / 867; }
  [data-framer-name="Course - Left"] > div:first-child, [data-framer-name="Course - Right"] > div:first-child{ width: 100% !important; height: 100% !important; }
  [data-framer-name="Use Case"] [data-framer-name="Courses"] > div:last-child{ width: 100% !important; height: 100% !important; left: 0 !important; }

  /* ---------- 8. TESTIMONIALS (Social) ---------- */
  [data-framer-name="Social"] [data-framer-name="Top"]{ width: 100% !important; gap: 20px !important; }
  [data-framer-name="Social"] [data-framer-name="Top"] > [data-framer-name="Top"]{ flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
  [data-framer-name="Social"] [data-framer-name="Right"]{ flex: 0 0 auto !important; width: auto !important; }
  [data-framer-name="Ticker"]{ width: 100% !important; }

  /* ---------- 9. FEATURED GEAR + VIDEO (Counter / Container) ---------- */
  [data-framer-name="Counter"] [data-framer-name="Top"],
  [data-framer-name="Container"] > [data-framer-name="Top"]{ width: 100% !important; }
  [data-framer-name="Testimonials"]{ width: 100% !important; }

  /* ---------- 10. SHIPPING (Counter > About-Section) ---------- */
  [data-framer-name="Counter"]{ padding-top: 72px !important; }
  [data-framer-name="About-Section"] [data-framer-name="Container"],
  [data-framer-name="About-Section"] [data-framer-name="Top"],
  [data-framer-name="About-Section"] [data-framer-name="Bottom"],
  [data-framer-name="About-Section"] [data-framer-name="Primary"],
  [data-framer-name="About-Section"] [data-framer-name="Reveal Text"]{ width: 100% !important; max-width: 100% !important; }
  [data-framer-name="About-Section"] [data-framer-name="Container"]{ padding: 0 !important; gap: 48px !important; }
  [data-framer-name="About-Section"] [data-framer-name="Top"]{ gap: 48px !important; }
  [data-framer-name="About-Section"] [data-framer-name="Reveal Text"] p{ justify-content: center !important; font-size: clamp(20px, 3.2vw, 30px) !important; }
  [data-framer-name="About-Section"] [data-framer-name="Stats 1"]{ flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; gap: 24px !important; }
  [data-framer-name="About-Section"] [data-framer-name="Stats 1"] h3,
  [data-framer-name="About-Section"] [data-framer-name="Stats 1"] h3 *{ font-size: clamp(20px, 3vw, 34px) !important; white-space: nowrap !important; }
  [data-framer-name="About-Section"] [data-framer-name="Stats 1"] > div{ width: 100% !important; }
  [data-framer-name="Dot Pattern"]{ width: 100% !important; left: 0 !important; height: auto !important; }
  /* quả cầu */
  [data-framer-name="Counter"] > [data-framer-name="Hero"]{ width: 100% !important; height: auto !important; aspect-ratio: 1200 / 431; padding: 0 !important; min-height: 0 !important; order: 0 !important; }
  [data-framer-name="Counter"] > [data-framer-name="Hero"] > div{ left: 50% !important; transform: translateX(-50%) !important; top: 36% !important; width: min(575px, 48%) !important; height: auto !important; aspect-ratio: 575 / 534; }
  [data-framer-name="Counter"] > [data-framer-name="Hero"] > div > div, [data-framer-name="Counter"] > [data-framer-name="Hero"] > div > div > div{ width: 100% !important; height: 100% !important; }
  [data-framer-name="Counter"] > [data-framer-name="Hero"] canvas{ width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; }
  [data-framer-name="Counter"] > [data-framer-name="Hero"] [data-framer-name="Ellipse"]{ left: 50% !important; transform: translateX(-50%) !important; width: min(482px, 40%) !important; height: auto !important; aspect-ratio: 1 / 1; top: 33% !important; }

  /* ---------- 11. CTA ---------- */
  [data-framer-name="CTA"] > [data-framer-name="Content"]{ position: relative !important; top: auto !important; }
  [data-framer-name="CTA"] [data-framer-name="Container"] > [data-framer-name="Content"]{ width: 100% !important; gap: 24px !important; align-items: center !important; }
  [data-framer-name="CTA"] [data-framer-name="Left"], [data-framer-name="CTA"] [data-framer-name="Right"]{ flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; padding-top: 48px !important; }
  [data-framer-name="CTA"] [data-framer-name="Left"] > [data-framer-name="Content"], [data-framer-name="CTA"] [data-framer-name="Right"] > [data-framer-name="Content"]{ width: 100% !important; }
  [data-framer-name="CTA"] [data-framer-name="Center"]{ flex: 0 0 auto !important; width: min(467px, 34%) !important; height: auto !important; }
  [data-framer-name="CTA"] [data-framer-name="Center"] > div{ width: 100% !important; height: auto !important; aspect-ratio: 1046 / 1600; }
  [data-framer-name="CTA"] [data-framer-name="Center"] > div > div:first-child{ width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; }
  [data-framer-name="CTA"] [data-framer-name="Center"] > div > div:nth-child(2){ left: 15.8% !important; top: 1% !important; width: 59.3% !important; height: auto !important; aspect-ratio: 277 / 600; }
  [data-framer-name="CTA"] [data-framer-name="Bottom Overlay"]{ width: 100% !important; left: 0 !important; }
  [data-framer-name="CTA"] [data-framer-name="Title/Description"] h2{ font-size: clamp(28px, 4vw, 40px) !important; }
  [data-framer-name="CTA"] [data-framer-name="Buttons"]{ flex-wrap: wrap !important; }
}

/* ============================================================
   MOBILE ≤ 809px
   ============================================================ */
@media (max-width: 809px){
  /* (pill mobile: xử lý trong regna-nav.css — thanh gọn + pill nằm dưới) */

  /* 4. Intro */
  [data-framer-name="About"] [data-framer-name="Top"] h2, [data-framer-name="About"] [data-framer-name="Top"] h2 *{ font-size: clamp(26px, 7.2vw, 36px) !important; }
  [data-framer-name="About"] [data-framer-name="Center"]{ aspect-ratio: auto; height: min(150vw, 620px) !important; }
  [data-framer-name="About"] [data-framer-name="Center"] > div:first-child{ width: min(300px, 72%) !important; }
  [data-framer-name="About"] [data-framer-name="Center"] > div:nth-child(2){ top: 32% !important; }

  /* 5. Built for Your Body: 1 cột */
  [data-framer-name="Features"] [data-framer-name="Grid"]{ flex-direction: column !important; }
  [data-framer-name="Features"] [data-framer-name="Grid"] > *{ width: 100% !important; flex: none !important; aspect-ratio: 4 / 5; }
  [data-framer-name="Features"] [data-framer-name="Grid"] > [data-framer-name="03"] [data-framer-name="Title/Description"]{
    left: 24px !important; right: 24px !important; top: auto !important; bottom: 24px !important; width: auto !important;
  }
  [data-framer-name="Features"] [data-framer-name="Grid"] > [data-framer-name="03"] [data-framer-name="Title/Description"] > div{ width: 100% !important; }
  [data-framer-name="Features"] [data-framer-name="01"]{ flex-direction: column !important; }
  [data-framer-name="Features"] [data-framer-name="01"] > [data-framer-name="Top"]{ width: 100% !important; padding: 28px 24px 8px !important; }
  [data-framer-name="Features"] [data-framer-name="01"] > [data-framer-name="Top"] > *{ width: 100% !important; }
  [data-framer-name="Features"] [data-framer-name="01"] > [data-framer-name="Top"] > div:last-child{ flex-wrap: wrap !important; }
  [data-framer-name="Features"] [data-framer-name="01"] > div:last-child{ width: 100% !important; }

  /* 6. How It Works: icon+số | nội dung */
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div > div > [data-framer-name]{
    display: grid !important; grid-template-columns: auto 1fr !important; gap: 0 16px !important; align-items: center !important;
    padding: 16px 16px !important; min-height: 0 !important;
  }
  [data-framer-name="Process Section"] [data-framer-name="Left"]{ width: auto !important; flex: none !important; padding: 0 !important; }
  [data-framer-name="Process Section"] [data-framer-name="Left"] [data-framer-name="Container"]{ gap: 10px !important; }
  [data-framer-name="Process Section"] [data-framer-name="Icon Wrap"]{ width: 56px !important; height: 56px !important; }
  [data-framer-name="Process Section"] [data-framer-name="Center"],
  [data-framer-name="Process Line Ray"]{ display: none !important; }
  [data-framer-name="Process Section"] [data-framer-name="Right"]{ padding: 0 !important; }
  [data-framer-name="Process Section"] [data-framer-name="Main"]{ gap: 12px !important; }

  /* 7. Collections: ảnh trên, chữ dưới */
  [data-framer-name="Use Case"] [data-framer-name="Courses"]{ padding: 48px 0 !important; }
  [data-framer-name="Use Case"] [data-framer-name="Courses"] > [data-framer-name="Container"] > *{ position: relative !important; top: auto !important; }
  [data-framer-name="Course - Left"], [data-framer-name="Course - Right"]{
    aspect-ratio: auto !important; display: flex !important; flex-direction: column !important; gap: 0 !important;
    border-radius: 16px; overflow: hidden;
  }
  [data-framer-name="Course - Left"] > div:first-child, [data-framer-name="Course - Right"] > div:first-child{
    position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 2 !important;
  }
  [data-framer-name="Course - Left"] > div:first-child img, [data-framer-name="Course - Right"] > div:first-child img{ object-position: 70% 40% !important; }
  [data-framer-name="Course - Left"] > [data-framer-name="Container"], [data-framer-name="Course - Right"] > [data-framer-name="Container"]{
    position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    width: 100% !important; height: auto !important; padding: 20px !important; border-radius: 0 !important;
  }
  [data-framer-name="Course - Left"] > [data-framer-name="Container"] > *, [data-framer-name="Course - Right"] > [data-framer-name="Container"] > *{ width: 100% !important; }
  [data-framer-name="Course - Left"] > [data-framer-name="Container"] [data-framer-name="desktop"],
  [data-framer-name="Course - Right"] > [data-framer-name="Container"] [data-framer-name="desktop"]{ width: auto !important; display: inline-flex !important; }

  /* 8. Testimonials: tiêu đề + "trusted" xếp dọc, card hẹp hơn */
  [data-framer-name="Social"] [data-framer-name="Top"]{ flex-direction: column !important; align-items: flex-start !important; }
  [data-framer-name="Social"] [data-framer-name="Top"] > *{ width: 100% !important; flex: none !important; }
  [data-framer-name="Social"] [data-framer-name="Right"]{ align-items: flex-start !important; }
  [data-framer-name="Ticker"] li{ width: min(340px, 82vw) !important; }
  [data-framer-name="Ticker"] li > *{ width: 100% !important; }
  [data-framer-name="Ticker"] [data-framer-name="Content"]{ width: 100% !important; }

  /* 10. Shipping: 3 số liệu xếp dọc */
  [data-framer-name="About-Section"] [data-framer-name="Primary"] > [data-framer-name="Top"]{ flex-direction: column !important; gap: 28px !important; height: auto !important; }
  [data-framer-name="About-Section"] [data-framer-name="Stats 1"]{ width: 100% !important; flex: none !important; gap: 8px !important; height: auto !important; }
  [data-framer-name="About-Section"] [data-framer-name="Stats 1"] [data-framer-name="Top"]{ padding-bottom: 6px !important; height: auto !important; }
  [data-framer-name="Counter"] > [data-framer-name="Hero"]{ aspect-ratio: 1 / 0.6; }
  [data-framer-name="Counter"] > [data-framer-name="Hero"] > div{ width: min(575px, 86%) !important; top: 28% !important; }
  [data-framer-name="Counter"] > [data-framer-name="Hero"] [data-framer-name="Ellipse"]{ width: min(482px, 72%) !important; top: 26% !important; }

  /* 11. CTA: xếp dọc */
  [data-framer-name="CTA"] [data-framer-name="Container"] > [data-framer-name="Content"]{ flex-direction: column !important; }
  [data-framer-name="CTA"] [data-framer-name="Left"], [data-framer-name="CTA"] [data-framer-name="Right"]{ width: 100% !important; flex: none !important; padding-top: 24px !important; align-items: center !important; text-align: center; }
  [data-framer-name="CTA"] [data-framer-name="Left"] > [data-framer-name="Content"]{ align-items: center !important; }
  [data-framer-name="CTA"] [data-framer-name="Title/Description"] > *{ width: 100% !important; text-align: center; }
  [data-framer-name="CTA"] [data-framer-name="Buttons"]{ justify-content: center !important; }
  [data-framer-name="CTA"] [data-framer-name="Center"]{ width: min(467px, 70%) !important; }
  [data-framer-name="CTA"] [data-framer-name="Right"] > [data-framer-name="Content"]{ align-items: center !important; }
  [data-framer-name="CTA"] [data-framer-name="Right"] h3{ text-align: center; }
  [data-framer-name="CTA"] [data-framer-name="Cloud 03"], [data-framer-name="CTA"] [data-framer-name="Cloud 04"]{ display: none !important; }
}

@media (max-width: 480px){
  [data-framer-name="Hero"] h1, [data-framer-name="Hero"] h1 *{ font-size: clamp(30px, 9vw, 40px) !important; }
  [data-framer-name="Main"] h2, [data-framer-name="Main"] h2 *{ font-size: clamp(26px, 7.4vw, 32px) !important; }
}

/* ============================================================
   v2.1 — sửa theo đo đạc thực tế ở 390px
   ============================================================ */
@media (max-width: 1199px){
  /* section có padding ngang riêng của Framer (Process Section: 100px 80px) → dồn lề về Container */
  [data-framer-name="Main"] > *{ padding-left: 0 !important; padding-right: 0 !important; }
  [data-framer-name="Process Section"]{ padding-top: 64px !important; padding-bottom: 64px !important; }
  [data-framer-name="Process Section"] [data-framer-name="Right"] [data-framer-name="Container"] > *{ width: 100% !important; }

  /* tiêu đề Framer dùng white-space: pre → không xuống dòng được */
  [data-framer-name="Main"] h1, [data-framer-name="Main"] h2, [data-framer-name="Main"] h3,
  [data-framer-name="Main"] h4, [data-framer-name="Main"] h6{ white-space: normal !important; }
  /* đoạn văn dài (không phải nhãn pill / nút): chỉ những p rộng ≥ 200px mới cho xuống dòng → làm bằng cách nhắm container */
  [data-framer-name="Main"] [data-framer-name="Right"] p,
  [data-framer-name="Main"] [data-framer-name="Title/Description"] > div:not([data-framer-name]) p,
  [data-framer-name="Main"] [data-framer-name="Bottom"] > div > p,
  [data-framer-name="Main"] [data-framer-name="Content"] > div > p{ white-space: normal !important; }
  [data-framer-name="About"]{ padding-top: 104px !important; }

  /* intro: marquee chữ khổng lồ + list hashtag bị cắt */
  [data-framer-name="About"] [data-framer-name="Marquee"],
  [data-framer-name="About"] [data-framer-name="Marquee"] *{ height: auto !important; }
  [data-framer-name="About"] [data-framer-name="Marquee"] p,
  [data-framer-name="About"] [data-framer-name="Marquee"] h1,
  [data-framer-name="About"] [data-framer-name="Marquee"] h2{ font-size: clamp(56px, 11vw, 114px) !important; line-height: 1 !important; white-space: nowrap !important; }
  [data-framer-name="About"] [data-framer-name="Bottom"],
  [data-framer-name="About"] [data-framer-name="List"]{ height: auto !important; overflow: visible !important; }

  /* shipping: 3 số liệu canh giữa */
  [data-framer-name="About-Section"] [data-framer-name="Stats 1"],
  [data-framer-name="About-Section"] [data-framer-name="Stats 1"] > *{ align-items: center !important; justify-content: center !important; text-align: center !important; }

  /* footer (có [Main] riêng, class framer-b2uwpo) */
  [data-framer-name="Main"] [data-framer-name="Logo & Media"],
  [data-framer-name="Main"] [data-framer-name="All Pages"],
  [data-framer-name="Main"] [data-framer-name="Social Wrap"],
  [data-framer-name="Main"] [data-framer-name="Reserved"],
  [data-framer-name="Main"] [data-framer-name="Desktop"] > [data-framer-name="Content"]{ width: 100% !important; max-width: 100% !important; height: auto !important; }
  [data-framer-name="Main"] [data-framer-name="Desktop"] > [data-framer-name="Content"]{ gap: 48px !important; }
  [data-framer-name="Main"] [data-framer-name="Logo & Media"]{ flex: 0 1 40% !important; width: auto !important; }
  [data-framer-name="Main"] [data-framer-name="All Pages"]{ flex: 1 1 0 !important; width: auto !important; gap: 32px !important; flex-wrap: wrap !important; }
  [data-framer-name="Main"] [data-framer-name="All Pages"] > *{ flex: 1 1 140px !important; width: auto !important; }
  [data-framer-name="Main"] [data-framer-name="Logo & Media"] *, [data-framer-name="Main"] [data-framer-name="All Pages"] *{ white-space: normal !important; }
}
@media (max-width: 809px){
  /* card "Engineered to Perform": ảnh absolute che chữ */
  [data-framer-name="Features"] [data-framer-name="02"] [data-framer-name="Center"]{ width: 62% !important; left: auto !important; right: -10% !important; height: 100% !important; }
  [data-framer-name="Features"] [data-framer-name="02"] > [data-framer-name="Title/Description"],
  [data-framer-name="Features"] [data-framer-name="02"] > div:not([data-framer-name]),
  [data-framer-name="Features"] [data-framer-name="02"] > [data-framer-name="Button Inner"]{ z-index: 2 !important; }
  [data-framer-name="Features"] [data-framer-name="02"] > div:not([data-framer-name]) p{ width: 52% !important; max-width: 52% !important; }

  /* collections: panel chữ trên nền đỏ sẫm → nền tối mờ cho dễ đọc */
  [data-framer-name="Course - Left"] > [data-framer-name="Container"],
  [data-framer-name="Course - Right"] > [data-framer-name="Container"]{ background: rgba(14,14,16,.72) !important; backdrop-filter: blur(10px); }

  /* video carousel: card giữa theo tỉ lệ, không để trống dưới */
  [data-framer-name="Testimonials"]{ height: auto !important; }

  /* footer: xếp dọc */
  [data-framer-name="Main"] [data-framer-name="Desktop"] > [data-framer-name="Content"]{ flex-direction: column !important; gap: 40px !important; }
  [data-framer-name="Main"] [data-framer-name="Logo & Media"]{ flex: none !important; width: 100% !important; }
  [data-framer-name="Main"] [data-framer-name="All Pages"]{ flex: none !important; width: 100% !important; gap: 28px !important; }
  [data-framer-name="Main"] [data-framer-name="All Pages"] > *{ flex: 1 1 45% !important; }
  [data-framer-name="Main"] [data-framer-name="Reserved"]{ flex-wrap: wrap !important; justify-content: center !important; gap: 8px 20px !important; text-align: center; }
  [data-framer-name="Main"] [data-framer-name="Reserved"] > *{ width: auto !important; }
  [data-framer-name="Main"] [data-framer-name="Social Wrap"]{ flex-wrap: wrap !important; gap: 12px 20px !important; }
}

/* v2.2 */
@media (max-width: 1199px){
  /* footer có [Main] riêng với padding 80px hai bên */
  [data-framer-name="Main"]:has([data-framer-name="Reserved"]){ padding-left: var(--rn-pad) !important; padding-right: var(--rn-pad) !important; }
  [data-framer-name="Main"]:has([data-framer-name="Reserved"]) > [data-framer-name="Container"]{ padding-left: 0 !important; padding-right: 0 !important; }
}
@media (max-width: 809px){
  /* collections: card nền trắng lộ ra dưới panel */
  [data-framer-name="Course - Left"], [data-framer-name="Course - Right"]{ background: transparent !important; }
  /* video: section padding 160px trên/dưới quá lớn */
  [data-framer-name="Main"] > [data-framer-name="Container"]{ padding-top: 64px !important; padding-bottom: 48px !important; }
  [data-framer-name="About"]{ padding-top: 104px !important; }
}

/* v2.3 */
@media (max-width: 1199px){
  /* "Made by You": wrapper đoạn văn có chiều cao cố định 224px → chữ tràn đè nút */
  [data-framer-name="Features"] [data-framer-name="01"] > [data-framer-name="Top"] > div{ height: auto !important; min-height: 0 !important; }
}
@media (max-width: 809px){
  /* marquee chữ khổng lồ sau phone: ở mobile chỉ gây rối */
  [data-framer-name="About"] [data-framer-name="Center"] > div:nth-child(2){ display: none !important; }
  /* CTA: mây absolute phủ lên ảnh phone */
  [data-framer-name="CTA"] > [data-framer-name="Content"] > [data-framer-name^="Cloud"]{ display: none !important; }
  /* collections: gap giữa card */
  [data-framer-name="Use Case"] [data-framer-name="Courses"] > [data-framer-name="Container"]{ gap: 20px !important; }
}

/* v2.4 */
@media (max-width: 1199px){
  [data-framer-name="Features"] [data-framer-name="01"] > [data-framer-name="Top"]{ height: auto !important; min-height: 0 !important; }
  [data-framer-name="Features"] [data-framer-name="01"] > [data-framer-name="Top"] > *{ flex-shrink: 0 !important; }
}
@media (max-width: 809px){
  [data-framer-name="Features"] [data-framer-name="02"] > div:not([data-framer-name]){ width: 50% !important; max-width: 50% !important; }
  [data-framer-name="Features"] [data-framer-name="02"] > div:not([data-framer-name]) p{ width: 100% !important; max-width: 100% !important; }
}

/* v2.5 */
@media (max-width: 1199px){
  /* "Made by You": wrapper đoạn văn có flex:1 0 0 trong cột cao auto → cao 0px, chữ tràn đè nút */
  [data-framer-name="Features"] [data-framer-name="01"] > [data-framer-name="Top"] > *{ flex: 0 0 auto !important; height: auto !important; }
  /* footer là component có CSS breakpoint riêng ép container 390px/810px → mở về 100% */
  div:has(> [data-framer-name="Desktop"] > [data-framer-name="Main"] [data-framer-name="Reserved"]),
  [data-framer-name="Desktop"]:has(> [data-framer-name="Main"] [data-framer-name="Reserved"]),
  [data-framer-name="Main"]:has([data-framer-name="Reserved"]){ width: 100% !important; max-width: 100% !important; }
  [data-framer-name="Main"]:has([data-framer-name="Reserved"]) [data-framer-name="Container"],
  [data-framer-name="Main"]:has([data-framer-name="Reserved"]) [data-framer-name="Desktop"]{ width: 100% !important; max-width: 100% !important; }
  /* CTA: h3 "Scan the QR code" quá lớn ở tablet */
  [data-framer-name="CTA"] [data-framer-name="Right"] h3, [data-framer-name="CTA"] [data-framer-name="Right"] h3 *{ font-size: clamp(20px, 2.4vw, 28px) !important; }
  [data-framer-name="CTA"] [data-framer-name="Title/Description"] > *, [data-framer-name="CTA"] [data-framer-name="Right"] h3{ text-align: inherit; }
}

/* v2.6: card "Engineered to Perform" — ảnh absolute che chữ ở cả tablet */
@media (max-width: 1199px){
  [data-framer-name="Features"] [data-framer-name="02"] [data-framer-name="Center"]{ width: 60% !important; left: auto !important; right: -8% !important; height: 100% !important; }
  [data-framer-name="Features"] [data-framer-name="02"] > [data-framer-name="Title/Description"],
  [data-framer-name="Features"] [data-framer-name="02"] > div:not([data-framer-name]),
  [data-framer-name="Features"] [data-framer-name="02"] > [data-framer-name="Button Inner"]{ z-index: 2 !important; }
  [data-framer-name="Features"] [data-framer-name="02"] > div:not([data-framer-name]){ width: 48% !important; max-width: 48% !important; }
  [data-framer-name="Features"] [data-framer-name="02"] > div:not([data-framer-name]) p{ width: 100% !important; max-width: 100% !important; }
}

/* v2.6: CTA — mây absolute đè lên ảnh phone ở tablet */
@media (max-width: 1199px){
  [data-framer-name="CTA"] [data-framer-name="Center"]{ position: relative !important; z-index: 2 !important; }
  [data-framer-name="CTA"] > [data-framer-name="Content"] > [data-framer-name^="Cloud"]{ z-index: 0 !important; opacity: .7; }
}

/* v2.7: pill menu — panel neo theo mép trái nút Menu nên tràn phải ở mobile */
@media (max-width: 809px){
  [data-framer-name="Nav Menu"]{ left: auto !important; right: 0 !important; }
}

/* v2.8: collections — hiệu ứng scale khi xếp chồng vô nghĩa khi card không còn sticky, lại tạo khoảng trống */
@media (max-width: 809px){
  [data-framer-name="Use Case"] [data-framer-name="Courses"] > [data-framer-name="Container"] > *,
  [data-framer-name="Use Case"] [data-framer-name="Courses"] > [data-framer-name="Container"] > * > *,
  [data-framer-name="Course - Left"], [data-framer-name="Course - Right"]{ transform: none !important; opacity: 1 !important; }
}
@media (max-width: 809px){
  /* panel chữ có translateY(-50%) inline để đè lên ảnh ở desktop → mobile bỏ, panel nằm ngay dưới ảnh */
  [data-framer-name="Course - Left"] > [data-framer-name="Container"],
  [data-framer-name="Course - Right"] > [data-framer-name="Container"]{ transform: none !important; }
}

/* ============================================================
   v2.9 — HOW IT WORKS: timeline dọc thống nhất cho mobile + tablet
   [icon] [số] | tiêu đề + mô tả ; line dọc đi qua cột số ; chữ luôn canh trái
   ============================================================ */
@media (max-width: 1199px){
  :root{ --hiw-pad-x: 16px; --hiw-icon: 56px; --hiw-num: 40px; --hiw-gap: 12px; }
  [data-framer-name="Process Section"] [data-framer-name="Main"]{ position: relative !important; gap: 10px !important; }
  /* line dọc: đặt đúng tâm cột số = pad + icon + gap + num/2 */
  [data-framer-name="Process Section"] [data-framer-name="Main"]::before{
    content: ''; position: absolute; z-index: 1; width: 2px; border-radius: 2px;
    left: calc(var(--hiw-pad-x) + var(--hiw-icon) + var(--hiw-gap) + var(--hiw-num) / 2 - 1px);
    top: 56px; bottom: 56px;
    background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, #b90a2e 30%, #b90a2e 70%, rgba(0,0,0,.06) 100%);
  }
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div,
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div > div{ width: 100% !important; height: auto !important; }
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div > div > [data-framer-name]{
    display: grid !important; grid-template-columns: var(--hiw-icon) var(--hiw-num) 1fr !important;
    column-gap: var(--hiw-gap) !important; row-gap: 0 !important; align-items: center !important;
    width: 100% !important; height: auto !important; min-height: 0 !important;
    padding: 14px var(--hiw-pad-x) !important; position: relative !important; border-radius: 20px !important;
  }
  /* Left + Container "tan" ra để icon và số thành 2 ô của grid */
  [data-framer-name="Process Section"] [data-framer-name="Left"],
  [data-framer-name="Process Section"] [data-framer-name="Left"] > [data-framer-name="Container"]{ display: contents !important; }
  [data-framer-name="Process Section"] [data-framer-name="Icon Wrap"]{ width: var(--hiw-icon) !important; height: var(--hiw-icon) !important; border-radius: 16px !important; flex: none !important; }
  [data-framer-name="Process Section"] [data-framer-name="Icon Wrap"] > div{ width: 26px !important; height: 26px !important; }
  [data-framer-name="Process Section"] [data-framer-name="Background"]{
    width: var(--hiw-num) !important; height: var(--hiw-num) !important; border-radius: 50% !important; flex: none !important;
    position: relative !important; z-index: 2 !important; box-shadow: 0 0 0 3px #fff;
  }
  [data-framer-name="Process Section"] [data-framer-name="Center"],
  [data-framer-name="Process Line Ray"]{ display: none !important; }
  [data-framer-name="Process Section"] [data-framer-name="Right"]{
    width: auto !important; min-width: 0 !important; height: auto !important; padding: 0 !important; flex: none !important;
    align-items: flex-start !important; justify-content: center !important;
  }
  [data-framer-name="Process Section"] [data-framer-name="Right"] [data-framer-name="Container"],
  [data-framer-name="Process Section"] [data-framer-name="Right"] [data-framer-name="Container"] > *{ width: 100% !important; max-width: 100% !important; align-items: flex-start !important; }
  [data-framer-name="Process Section"] [data-framer-name="Right"] p{ text-align: left !important; width: 100% !important; white-space: normal !important; }
  [data-framer-name="Process Section"] [data-framer-name="Right"] [data-framer-name="Container"] > div:first-child p{ font-size: clamp(18px, 2.2vw, 22px) !important; line-height: 1.25 !important; }
  [data-framer-name="Process Section"] [data-framer-name="Right"] [data-framer-name="Container"] > div:last-child p{ font-size: clamp(14px, 1.7vw, 17px) !important; line-height: 1.45 !important; }
}
@media (min-width: 810px) and (max-width: 1199px){
  :root{ --hiw-pad-x: 24px; --hiw-icon: 64px; --hiw-num: 44px; --hiw-gap: 16px; }
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div > div > [data-framer-name]{ padding: 20px var(--hiw-pad-x) !important; }
  [data-framer-name="Process Section"] [data-framer-name="Main"]::before{ top: 70px; bottom: 70px; }
  [data-framer-name="Process Section"] [data-framer-name="Container"]{ max-width: 760px !important; margin: 0 auto !important; }
}
@media (max-width: 1199px){
  /* chỉ hàng đang Active (theo cuộn) mới có nền, các hàng khác đồng nhất */
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div > div > [data-framer-name]:not([data-framer-name="Active"]){ background: transparent !important; }
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div > div > [data-framer-name="Active"]{ background: #f2f2f2 !important; }
}

/* ============================================================
   v3.0 — HOW IT WORKS: dùng lại line + chấm gốc của Framer (line xám chạy dần theo cuộn)
   cột: icon | số | chấm(line) | chữ. Ray/Line giữ px của Framer, regna-process.js scale theo chiều cao thật.
   ============================================================ */
@media (max-width: 1199px){
  :root{ --hiw-dot: 32px; }
  [data-framer-name="Process Section"] [data-framer-name="Main"]::before{ display: none !important; content: none !important; }
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div > div > [data-framer-name]{
    grid-template-columns: var(--hiw-icon) var(--hiw-num) var(--hiw-dot) 1fr !important;
  }
  [data-framer-name="Process Section"] [data-framer-name="Center"]{
    display: flex !important; width: var(--hiw-dot) !important; height: 100% !important; min-height: 56px !important;
    flex: none !important; align-items: center !important; justify-content: center !important; position: relative !important;
  }
  [data-framer-name="Process Section"] [data-framer-name="Center"] > div{ position: relative; z-index: 2; }
  [data-framer-name="Process Section"] [data-framer-name="Frame Top"]{ width: 100% !important; height: 50% !important; left: 0 !important; top: 0 !important; z-index: 1 !important; }
  [data-framer-name="Process Section"] [data-framer-name="Background"]{ box-shadow: none; z-index: auto !important; }
  /* Ray: tâm cột chấm = pad + icon + gap + num + gap + dot/2 */
  [data-framer-name="Process Line Ray"]{
    display: flex !important; left: calc(var(--hiw-pad-x) + var(--hiw-icon) + var(--hiw-gap) + var(--hiw-num) + var(--hiw-gap) + var(--hiw-dot) / 2) !important;
    top: 0 !important; height: 100% !important; overflow: visible !important; z-index: 0 !important;
  }
  [data-framer-name="Process Line Wrap"]{ transform-origin: top center; }
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div{ position: relative; z-index: 1; }
}
@media (max-width: 1199px){
  /* v3.1: Ray/Wrap là con trực tiếp của [Main] nên bị rule width:100% bắt nhầm; và thứ tự lớp: hàng (nền) < line < mặt nạ Frame Top < chấm */
  [data-framer-name="Process Line Ray"]{ width: 1px !important; height: 100% !important; z-index: 2 !important; }
  [data-framer-name="Process Line Wrap"]{ width: 3px !important; height: 864px !important; left: -1px !important; position: absolute !important; top: 0 !important; }
  [data-framer-name="Process Line"]{ width: 3px !important; }
  [data-framer-name="Process Section"] [data-framer-name="Main"] > div{ z-index: auto !important; }
  [data-framer-name="Process Section"] [data-framer-name="Frame Top"]{ z-index: 3 !important; }
  [data-framer-name="Process Section"] [data-framer-name="Center"] > div{ z-index: 4 !important; }
}
@media (max-width: 1199px){
  /* v3.2: Ray/Wrap/Line có cùng mẫu lồng với hàng (Main > div > div > [name]) nên bị rule hàng bắt nhầm → reset */
  [data-framer-name="Process Line Ray"]{ position: absolute !important; display: block !important; padding: 0 !important; margin: 0 !important; }
  [data-framer-name="Process Line Wrap"]{ display: block !important; padding: 0 !important; margin: 0 !important; overflow: clip !important; }
  [data-framer-name="Process Line"]{
    display: block !important; position: absolute !important; grid-template-columns: none !important;
    width: 3px !important; height: 864px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    border-radius: 0 !important; left: 0 !important; background: rgb(82, 82, 82) !important;
  }
}
@media (max-width: 1199px){
  /* v3.3: selector chuỗi đầy đủ để thắng rule hàng (độ ưu tiên cao hơn) */
  [data-framer-name="Process Section"] [data-framer-name="Main"] > [data-framer-name="Process Line Ray"]{
    position: absolute !important; display: block !important; width: 1px !important; height: 100% !important; top: 0 !important;
    padding: 0 !important; margin: 0 !important; z-index: 2 !important; overflow: visible !important; min-height: 0 !important;
  }
  [data-framer-name="Process Section"] [data-framer-name="Main"] > [data-framer-name="Process Line Ray"] > [data-framer-name="Process Line Wrap"]{
    position: absolute !important; display: block !important; width: 3px !important; height: 864px !important; left: -1px !important; top: 0 !important;
    padding: 0 !important; margin: 0 !important; overflow: clip !important; transform-origin: top center; min-height: 0 !important; max-width: none !important;
  }
  [data-framer-name="Process Section"] [data-framer-name="Main"] > [data-framer-name="Process Line Ray"] > [data-framer-name="Process Line Wrap"] > [data-framer-name="Process Line"]{
    position: absolute !important; display: block !important; width: 3px !important; height: 864px !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important; border-radius: 0 !important; left: 0 !important; background: rgb(82, 82, 82) !important; grid-template-columns: none !important;
  }
}
@media (max-width: 1199px){
  /* v3.4: Frame Top / Frame Bottom là mặt nạ absolute; rule [Center] > div{position:relative} làm chúng chiếm chỗ, đẩy chấm hàng 1 & 5 lệch */
  [data-framer-name="Process Section"] [data-framer-name="Center"] > [data-framer-name="Frame Top"],
  [data-framer-name="Process Section"] [data-framer-name="Center"] > [data-framer-name="Frame Bottom"]{
    position: absolute !important; left: 0 !important; width: 100% !important; height: 50% !important; z-index: 3 !important; margin: 0 !important;
  }
  [data-framer-name="Process Section"] [data-framer-name="Center"] > [data-framer-name="Frame Top"]{ top: 0 !important; bottom: auto !important; }
  [data-framer-name="Process Section"] [data-framer-name="Center"] > [data-framer-name="Frame Bottom"]{ bottom: 0 !important; top: auto !important; }
}
@media (max-width: 1199px){
  /* v3.5: pill logo trong "powered by REGNA" — rule [Top] > * xoá padding của nó, chữ dính viền */
  [data-framer-name="About"] [data-framer-name="Top"] [data-framer-name="Logo"]{
    width: auto !important; height: 56px !important; padding: 0 24px !important; gap: 10px !important;
    display: inline-flex !important; align-items: center !important; align-self: center !important; flex: none !important;
  }
  [data-framer-name="About"] [data-framer-name="Top"] [data-framer-name="Logo"] > div:first-child{ width: 100% !important; height: 100% !important; left: 0 !important; top: 0 !important; }
  [data-framer-name="About"] [data-framer-name="Top"] [data-framer-name="Logo"] > [data-framer-name^="Logo ecm"]{ width: 131px !important; height: 18px !important; flex: none !important; }
}
@media (max-width: 480px){
  [data-framer-name="About"] [data-framer-name="Top"] [data-framer-name="Logo"]{ height: 46px !important; padding: 0 18px !important; }
  [data-framer-name="About"] [data-framer-name="Top"] [data-framer-name="Logo"] > [data-framer-name^="Logo ecm"]{ width: 108px !important; height: 15px !important; }
}

/* ---- 9. Use-case card CTA: the pill from the card artwork, as a real button ------------------
   dark glass pill · red sparkle disc on the left · white 600 label · arrow on the right.
   Framer's own Glow/Stroke/Fill layers and its inline icon are hidden; only the <p> label is kept.
   Keyed on the component class (framer-XXMyp): on hover Framer swaps the anchor to another variant whose
   data-framer-name differs, and the style must survive that swap. */
[data-framer-name="Courses"] a.framer-XXMyp{
  display:inline-flex !important; flex-direction:row !important; flex-wrap:nowrap !important; justify-content:flex-start !important; align-items:center !important; gap:14px !important;
  height:56px !important; width:auto !important; min-width:0 !important; padding:0 22px 0 6px !important;
  border-radius:999px !important; border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(18,18,20,.58) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease !important;
}
[data-framer-name="Courses"] a.framer-XXMyp::before{
  content:""; flex:none; width:44px; height:44px; border-radius:50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2.5l1.9 5.6 5.6 1.9-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.9z'/%3E%3Cpath d='M18.5 15l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z'/%3E%3C/svg%3E") center / 22px 22px no-repeat,
    radial-gradient(circle at 35% 30%, #ff6a5c 0%, #e11d2e 58%, #8f0f1e 100%);
  box-shadow:0 0 18px rgba(255,59,48,.55), 0 0 0 1px rgba(255,255,255,.12) inset;
}
[data-framer-name="Courses"] a.framer-XXMyp::after{
  content:""; flex:none; width:18px; height:18px; margin-left:10px; opacity:.92;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-framer-name="Courses"] a.framer-XXMyp > [data-framer-name="Glow"],
[data-framer-name="Courses"] a.framer-XXMyp > [data-framer-name="Stroke"],
[data-framer-name="Courses"] a.framer-XXMyp > [data-framer-name="Fill"],
[data-framer-name="Courses"] a.framer-XXMyp [data-framer-name="text content"] > :not([data-framer-name="Text"]){ display:none !important; }
[data-framer-name="Courses"] a.framer-XXMyp [data-framer-name="text content"]{ padding:0 !important; gap:0 !important; overflow:visible !important; }
[data-framer-name="Courses"] a.framer-XXMyp p{
  font-family:Inter, "Inter Placeholder", system-ui, sans-serif !important; font-size:16px !important; font-weight:600 !important;
  line-height:1 !important; letter-spacing:-.01em !important; color:#fff !important; white-space:nowrap !important; margin:0 !important;
}
[data-framer-name="Courses"] a.framer-XXMyp:hover{ background:rgba(40,40,44,.72) !important; border-color:rgba(255,255,255,.34) !important; transform:translateY(-1px); }
[data-framer-name="Courses"] a.framer-XXMyp:hover::before{ box-shadow:0 0 26px rgba(255,59,48,.75), 0 0 0 1px rgba(255,255,255,.18) inset; }
[data-framer-name="Courses"] a.framer-XXMyp[aria-disabled="true"]{ cursor:default !important; opacity:.78; }
[data-framer-name="Courses"] a.framer-XXMyp[aria-disabled="true"]:hover{ transform:none; background:rgba(18,18,20,.58) !important; border-color:rgba(255,255,255,.18) !important; }
[data-framer-name="Courses"] a.framer-XXMyp[aria-disabled="true"]::before{ filter:grayscale(.7) brightness(.85); box-shadow:none; }
@media (max-width: 809.98px){
  [data-framer-name="Courses"] a.framer-XXMyp{ height:48px !important; gap:10px !important; padding:0 18px 0 5px !important; }
  [data-framer-name="Courses"] a.framer-XXMyp::before{ width:38px; height:38px; background-size:19px 19px, auto; }
  [data-framer-name="Courses"] a.framer-XXMyp p{ font-size:15px !important; }
  [data-framer-name="Courses"] a.framer-XXMyp::after{ width:16px; height:16px; margin-left:6px; }
}

/* ---- 10. Use-case cards: image + CTA only -----------------------------------------------------
   The glass content box (title + copy) is removed; the card's own text lives in the artwork.
   The Framer "Container" that held it becomes a transparent, absolutely positioned slot for the
   CTA pill, parked bottom-left where the artwork's pill used to sit. Everything in the Container
   that is not the CTA is hidden; nothing is removed from the DOM, so the retitling script and the
   click gate keep working. */
[data-framer-name="Course - Left"], [data-framer-name="Course - Right"]{ position:relative !important; }
[data-framer-name="Course - Left"] > [data-framer-name="Container"],
[data-framer-name="Course - Right"] > [data-framer-name="Container"]{
  position:absolute !important; left:5% !important; right:auto !important; top:auto !important; bottom:11% !important;
  width:auto !important; height:auto !important; padding:0 !important; margin:0 !important; z-index:20 !important; /* the image wrapper is z-index 10 */
  background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:none !important; border:0 !important; border-radius:0 !important; overflow:visible !important;
  display:block !important;
}
[data-framer-name="Course - Left"] > [data-framer-name="Container"] > *:not(:has(a.framer-XXMyp)),
[data-framer-name="Course - Right"] > [data-framer-name="Container"] > *:not(:has(a.framer-XXMyp)){ display:none !important; }
[data-framer-name="Course - Left"] > [data-framer-name="Container"] > *:has(a.framer-XXMyp),
[data-framer-name="Course - Right"] > [data-framer-name="Container"] > *:has(a.framer-XXMyp){ width:auto !important; margin:0 !important; padding:0 !important; }
@media (max-width: 809.98px){
  [data-framer-name="Course - Left"] > [data-framer-name="Container"],
  [data-framer-name="Course - Right"] > [data-framer-name="Container"]{ left:16px !important; bottom:16px !important; }
}