/* ===================================================================
   Deeprouter — Responsive / mobile fixes
   Trang gốc dùng inline-style cố định (không có media query) nên dùng
   attribute-selector [style*="..."] + !important để override trên mobile.
   =================================================================== */

/* Chặn cuộn ngang toàn cục */
html, body { overflow-x: hidden !important; max-width: 100vw; }

/* ---------- TABLET & MOBILE: <= 860px ---------- */
@media (max-width: 860px) {

  /* Container nội dung chính: thu nhỏ padding 2 bên */
  [style*="max-width:1200px"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="max-width:820px"]  { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding:0 32px"]   { padding-left: 18px !important; padding-right: 18px !important; }

  /* ---- NAV ---- */
  [style*="padding:16px 32px"] { padding: 12px 16px !important; }
  /* Ẩn menu giữa trên mobile (vẫn truy cập được qua footer); giữ logo + CTA */
  [style*="gap:30px;font-size:14px;color:var(--dr-nav-link)"] { display: none !important; }
  [style*="margin-left:28px"] { margin-left: 0 !important; }
  /* Logo nav nhỏ lại */
  [style*="height:48px;width:auto"] { height: 38px !important; }

  /* ---- HERO ---- */
  /* Stack cột dọc */
  [style*="gap:48px;padding:84px 0 96px"] {
    flex-direction: column !important;
    gap: 36px !important;
    padding: 48px 0 56px !important;
  }
  /* Sơ đồ routing: không để rộng cố định 560px gây tràn */
  [style*="width:560px;height:460px"] {
    width: 100% !important;
    max-width: 440px !important;
    height: 360px !important;
    margin: 0 auto !important;
  }
  /* Cho phép nút & hàng số liệu xuống dòng */
  [style*="gap:14px;margin-bottom:42px"] { flex-wrap: wrap !important; }
  [style*="display:flex;gap:38px"] { gap: 22px !important; flex-wrap: wrap !important; }
  [style*="gap:14px;justify-content:center"] { flex-wrap: wrap !important; }

  /* ---- GRID: ép xuống hàng ---- */
  [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  /* Footer */
  [style*="1.6fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

  /* ---- QUICKSTART / CODE BLOCK ---- */
  [style*="min-width:360px"] { min-width: 0 !important; width: 100% !important; }
  [style*="min-width:320px"] { min-width: 0 !important; width: 100% !important; }
  [style*="border-radius:20px;padding:48px"] { padding: 28px 20px !important; }

  /* ---- CTA band ---- */
  [style*="padding:72px 48px"] { padding: 44px 22px !important; }

  /* Card padding lớn thu gọn */
  [style*="border-radius:18px;padding:34px"] { padding: 26px !important; }
  [style*="border-radius:16px;padding:30px"] { padding: 24px !important; }
}

/* ---------- MOBILE NHỎ: <= 600px — thu nhỏ tiêu đề lớn ---------- */
@media (max-width: 600px) {
  [style*="font-size:62px"] { font-size: 32px !important; }
  [style*="font-size:54px"] { font-size: 30px !important; }
  [style*="font-size:52px"] { font-size: 30px !important; }
  [style*="font-size:50px"] { font-size: 29px !important; }
  [style*="font-size:48px"] { font-size: 28px !important; }
  [style*="font-size:46px"] { font-size: 28px !important; }
  [style*="font-size:44px"] { font-size: 27px !important; }
  [style*="font-size:42px"] { font-size: 27px !important; }
  [style*="font-size:40px"] { font-size: 26px !important; }
  [style*="font-size:38px"] { font-size: 25px !important; }
  [style*="font-size:36px"] { font-size: 24px !important; }
  [style*="font-size:34px"] { font-size: 23px !important; }

  /* Đoạn mô tả lớn */
  [style*="font-size:19px"] { font-size: 16px !important; }
  [style*="font-size:18px"] { font-size: 15.5px !important; }

  /* Padding dọc các section lớn thu gọn */
  [style*="padding:100px 32px 40px"] { padding-top: 56px !important; padding-bottom: 28px !important; }
  [style*="padding:100px 32px 60px"] { padding-top: 56px !important; padding-bottom: 36px !important; }
  [style*="padding:80px 32px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
}