/* ============================================
   RESPONSIVE.CSS
   Điều chỉnh layout cho tablet & điện thoại.
   ============================================ */

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

  .profile__main {
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
    padding: 32px 26px;
  }

  .profile__side {
    padding: 32px 26px;
  }

  .info-grid {
    margin-top: 6px;
  }
}

@media (max-width: 420px) {
  .badges {
    gap: 8px;
  }

  .badge {
    font-size: 11.5px;
    padding: 6px 12px;
  }

  .profile__name {
    font-size: 26px;
  }
}