/* CNV Work — global mobile responsive
   Apply rules cho mọi section/h*/p/grid mà JSX inline render ra.
   LƯU Ý: selector [style*="..."] chỉ match HTML rendered (kebab-case, KHÔNG có apostrophe).
   React serialize { padding: '120px 64px' } thành style="padding: 120px 64px;" — không quote. */

/* Base — không tràn ngang */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

@media (max-width: 1024px) {
  /* ─── SECTIONS: padding gọn ─── */
  body section,
  body div[data-screen-label] > section {
    padding: 48px 16px !important;
    min-height: auto !important;
  }
  body section[style*="padding: 140px"],
  body section[style*="padding: 120px"],
  body section[style*="padding: 112px"],
  body section[style*="padding: 110px"],
  body section[style*="padding: 100px"],
  body section[style*="padding: 96px"],
  body section[style*="padding: 90px"],
  body section[style*="padding: 80px"] {
    padding: 48px 16px !important;
  }
  /* div thay section role */
  body div[style*="padding: 140px 64px"],
  body div[style*="padding: 120px 64px"],
  body div[style*="padding: 112px 48px"],
  body div[style*="padding: 110px 64px"],
  body div[style*="padding: 100px 64px"],
  body div[style*="padding: 96px 48px"],
  body div[style*="padding: 90px 64px"],
  body div[style*="padding: 80px 64px"],
  body div[style*="padding: 64px 48px"],
  body div[style*="padding: 56px 48px"],
  body div[style*="padding: 48px 64px"] {
    padding: 48px 16px !important;
  }

  /* ─── TYPOGRAPHY: heading shrink ─── */
  body h1 {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.08 !important;
    word-break: break-word !important;
  }
  body h2 {
    font-size: clamp(24px, 6.5vw, 36px) !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
  }
  body h3 {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.2 !important;
  }
  body p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* ─── GRID: tất cả multi-col → 1 col ─── */
  body [style*="grid-template-columns: repeat(2"],
  body [style*="grid-template-columns: repeat(3"],
  body [style*="grid-template-columns: repeat(4"],
  body [style*="grid-template-columns: repeat(5"],
  body [style*="grid-template-columns: repeat(6"],
  body [style*="grid-template-columns: 0.6fr"],
  body [style*="grid-template-columns: 0.7fr"],
  body [style*="grid-template-columns: 0.8fr"],
  body [style*="grid-template-columns: 1.2fr"],
  body [style*="grid-template-columns: 1.3fr"],
  body [style*="grid-template-columns: 1.4fr"],
  body [style*="grid-template-columns: 1.5fr"],
  body [style*="grid-template-columns: 1fr 1fr"],
  body [style*="grid-template-columns: 2fr"],
  body [style*="grid-template-columns: 3fr"],
  body [style*="grid-template-columns: 140px"],
  body [style*="grid-template-columns: 240px"],
  body [style*="grid-template-columns: 272px"],
  body [style*="grid-template-columns: 320px"] {
    grid-template-columns: 1fr !important;
  }

  /* ─── GAPS: shrink ─── */
  body [style*="gap: 64"],
  body [style*="gap: 56"],
  body [style*="gap: 48"] {
    gap: 24px !important;
  }
  body [style*="gap: 40"],
  body [style*="gap: 36"],
  body [style*="gap: 32"] {
    gap: 18px !important;
  }

  /* ─── FLEX rows: cho phép wrap ─── */
  body [style*="display: flex"][style*="gap: 36"],
  body [style*="display: flex"][style*="gap: 32"],
  body [style*="display: flex"][style*="gap: 24"] {
    flex-wrap: wrap !important;
  }

  /* ─── IMAGES / SVG: không tràn ─── */
  body img, body svg {
    max-width: 100% !important;
    height: auto !important;
  }
  /* fixed-position absolute SVG: hide hẳn — dễ vỡ */
  body section [style*="position: absolute"][style*="height: 560"],
  body section [style*="position: absolute"][style*="height: 540"],
  body section [style*="position: absolute"][style*="height: 480"] {
    position: relative !important;
    height: auto !important;
  }

  /* ─── Big numbers (price, stats) ─── */
  body [style*="font-size: 80"],
  body [style*="font-size: 88"],
  body [style*="font-size: 92"] {
    font-size: clamp(28px, 8vw, 42px) !important;
  }
  body [style*="font-size: 56"],
  body [style*="font-size: 60"],
  body [style*="font-size: 52"] {
    font-size: clamp(24px, 6.5vw, 34px) !important;
  }
  body [style*="font-size: 48"],
  body [style*="font-size: 44"],
  body [style*="font-size: 40"] {
    font-size: clamp(22px, 6vw, 30px) !important;
  }
  body [style*="font-size: 36"],
  body [style*="font-size: 32"] {
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }
  body [style*="font-size: 28"],
  body [style*="font-size: 24"] {
    font-size: 18px !important;
  }
  body [style*="font-size: 20"],
  body [style*="font-size: 19"],
  body [style*="font-size: 18"] {
    font-size: 15px !important;
  }

  /* ─── Cards / containers fixed widths ─── */
  body [style*="width: 540"],
  body [style*="width: 480"],
  body [style*="width: 420"],
  body [style*="width: 380"],
  body [style*="width: 360"],
  body [style*="width: 320"] {
    max-width: 100% !important;
    width: 100% !important;
  }
  body [style*="max-width: 1440"],
  body [style*="max-width: 1280"],
  body [style*="max-width: 1200"],
  body [style*="max-width: 1180"],
  body [style*="max-width: 1100"],
  body [style*="max-width: 1080"],
  body [style*="max-width: 880"] {
    max-width: 100% !important;
  }

  /* ─── Buttons full-width khi đứng 1 mình ─── */
  body button[style*="padding: 14px 28"],
  body button[style*="padding: 16px 30"],
  body button[style*="padding: 16px 32"],
  body button[style*="padding: 14px 32"] {
    width: auto !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* ─── Footer flex space-between → stack ─── */
  body footer [style*="display: flex"][style*="justify-content: space-between"],
  body div[style*="padding-top: 24"][style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }

  /* ─── Pricing toggle pill (On-Cloud / On-Premise) shrink ─── */
  body button[style*="border-radius: 99"][style*="padding: 14px 28"] {
    padding: 10px 16px !important;
  }

  /* ─── Code block / API panel: scroll horizontal nếu quá dài ─── */
  body pre, body code {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-break: break-word !important;
  }

  /* ─── Position absolute large overlays: clip ─── */
  body section { overflow: hidden !important; }

  /* ─── Pricing tables: KHÔNG collapse, dùng horizontal scroll wrapper ─── */
  body .cnv-mobile-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -16px !important;
    padding: 0 16px 8px !important;
  }
  /* Scrollbar mảnh trên webkit — hint scrollable */
  body .cnv-mobile-scroll::-webkit-scrollbar {
    height: 6px !important;
  }
  body .cnv-mobile-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,104,142,0.45) !important;
    border-radius: 3px !important;
  }
  /* Override rules collapse 1col cho grid bên trong scroll wrapper */
  body .cnv-mobile-scroll [style*="grid-template-columns: 0.7fr 1.2fr 1.3fr 1.3fr"] {
    grid-template-columns: 0.7fr 1.2fr 1.3fr 1.3fr !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body .cnv-mobile-scroll [style*="grid-template-columns: 0.6fr 1.2fr 1.1fr 1.1fr"] {
    grid-template-columns: 0.6fr 1.2fr 1.1fr 1.1fr !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  body .cnv-mobile-scroll [style*="grid-template-columns: 1.4fr 1fr 1fr"] {
    grid-template-columns: 1.4fr 1fr 1fr !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* Footer 5-col vẫn collapse 1col vì không có scroll wrapper */
  body [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    padding: 14px 16px !important;
    gap: 8px !important;
  }
}

/* ─── Tablet/iPad portrait (641-1024): cùng layout stacking nhưng padding
       rộng rãi hơn phone, font lớn hơn chút để tận dụng màn hình ─── */
@media (min-width: 641px) and (max-width: 1024px) {
  body section,
  body div[data-screen-label] > section {
    padding: 72px 40px !important;
  }
  body section[style*="padding: 140px"],
  body section[style*="padding: 120px"],
  body section[style*="padding: 112px"],
  body section[style*="padding: 110px"],
  body section[style*="padding: 100px"],
  body section[style*="padding: 96px"],
  body section[style*="padding: 90px"],
  body section[style*="padding: 80px"],
  body div[style*="padding: 140px 64px"],
  body div[style*="padding: 120px 64px"],
  body div[style*="padding: 112px 48px"],
  body div[style*="padding: 110px 64px"],
  body div[style*="padding: 100px 64px"],
  body div[style*="padding: 96px 48px"],
  body div[style*="padding: 90px 64px"],
  body div[style*="padding: 80px 64px"],
  body div[style*="padding: 64px 48px"],
  body div[style*="padding: 56px 48px"],
  body div[style*="padding: 48px 64px"] {
    padding: 72px 40px !important;
  }
  /* Heading rộng rãi hơn phone */
  body h1 { font-size: clamp(36px, 5.5vw, 56px) !important; }
  body h2 { font-size: clamp(28px, 4.5vw, 44px) !important; }
  /* 2 cột thay vì 1 trên iPad cho card-grid 3-4 col */
  body [style*="grid-template-columns: repeat(3"],
  body [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Footer 5-col → 2-col */
  body [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  /* Pricing tables: scroll wrapper trên iPad — KHÔNG collapse, table giữ format gốc */
  body .cnv-mobile-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body .cnv-mobile-scroll [style*="grid-template-columns: 0.7fr 1.2fr 1.3fr 1.3fr"] {
    grid-template-columns: 0.7fr 1.2fr 1.3fr 1.3fr !important;
  }
  body .cnv-mobile-scroll [style*="grid-template-columns: 0.6fr 1.2fr 1.1fr 1.1fr"] {
    grid-template-columns: 0.6fr 1.2fr 1.1fr 1.1fr !important;
  }
  body .cnv-mobile-scroll [style*="grid-template-columns: 1.4fr 1fr 1fr"] {
    grid-template-columns: 1.4fr 1fr 1fr !important;
  }
}