@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .nav-inner {
    flex-direction: column;
    gap: 12px;
  }

  .hero-inner {
    padding: 44px 0 36px;
  }

  .hero h1 {
    font-size: 28px;
  }

  .hero-sub {
    font-size: 15px;
  }

  .search-card {
    padding: 18px 16px 14px;
    border-radius: var(--cs-radius-lg);
  }

  .search-row {
    flex-direction: column;
  }

  #btn-search {
    width: 100%;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .stats-inner {
    gap: 16px;
  }

  .detail-header-card {
    padding: 24px;
  }

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