/* =========================================================
   RED DZAO — RESPONSIVE
   Điều chỉnh bổ sung theo breakpoint (layout đã responsive tự nhiên)
   ========================================================= */

/* < 480px: siết khoảng cách, giảm cỡ chữ hero một chút */
@media (max-width: 479px) {
  .hero__title { font-size: clamp(2.2rem, 11vw, 2.8rem); }
  .rd-btn { padding: 0.85rem 1.5rem; }
}

/* 768px trở lên: chapter dùng 2 cột nội dung/ảnh khi phù hợp */
@media (min-width: 768px) {
  .chapter__inner--split {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-xl);
  }
  .chapter__inner--split.is-reverse {
    direction: rtl;
  }
  .chapter__inner--split.is-reverse > * {
    direction: ltr;
  }
}

/* 1024px trở lên: mở rộng padding section, bật sidebar (đã xử lý ở layout.css) */
@media (min-width: 1024px) {
  .chapter { padding-block: var(--space-2xl); }
}

/* 1440px trở lên: giới hạn container rộng hơn một chút cho màn hình lớn */
@media (min-width: 1440px) {
  :root { --container-max: 1280px; }
}

/* Thiết bị không hỗ trợ hover (cảm ứng): bỏ hiệu ứng hover nặng */
@media (hover: none) {
  .rd-btn--primary:hover,
  .rd-btn--outline:hover,
  .rd-btn--gold:hover {
    transform: none;
  }
}