@media (max-width: 1800px) {
  .hero-title {
    font-size: 3rem;
  }
}

@media (max-width: 1200px) {
  .detail-content {
    grid-template-columns: 1fr !important;
  }

  .detail-sidebar {
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 992px) {
  .page-title {
    font-size: 2.5rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .filter-buttons {
    gap: 10px;
  }

  .filter-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 60px 0 40px;
  }

  .page-title {
    font-size: 2rem;
  }

  .page-subtitle {
    font-size: 1rem;
  }

  .section-title {
    font-size: 1.8rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .detail-header {
    flex-direction: column;
    text-align: center;
  }

  .detail-title {
    font-size: 24px;
  }

  .coupon-section .coupon-card {
    grid-template-columns: 1fr !important;
    padding: 24px;
  }

  .discount-big {
    font-size: 36px;
  }

  .coupon-code-big {
    font-size: 24px;
  }

  .copy-section {
    flex-direction: column;
  }

  .copy-section .btn {
    width: 100%;
  }

  .detail-card {
    padding: 20px;
  }
}

@media (max-width: 576px) {
  .filter-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-btn {
    width: 100%;
  }

  .coupon-card {
    margin-bottom: 20px;
  }

  .coupon-title {
    font-size: 1.2rem;
  }

  .hero-title {
    font-size: 2rem;
  }
}