/* Khung chứa dạng Flexbox xếp hàng ngang */
.cds-cpt-social-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Tự động xuống dòng nếu quá nhiều icon trên thiết bị di động */
  gap: 12px; /* Khoảng cách giữa các icon */
  margin: 15px 0;
}

/* Thẻ link bọc ngoài icon */
.cds-cpt-social-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; /* Chiều rộng ô chứa icon */
  height: 36px; /* Chiều cao ô chứa icon */
  border-radius: 6px; /* Bo góc nhẹ theo style tinh tế của Notion */
  overflow: hidden;
  background-color: transparent;
  transition:
    transform 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}

/* Hình ảnh logo nằm trọn bên trong link */
.cds-cpt-social-img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Đảm bảo ảnh không bị bóp méo, giữ nguyên tỷ lệ gốc */
}

/* Hiệu ứng nhấc nhẹ lên và tạo nền mờ khi di chuột vào (Hover) */
.cds-cpt-social-item:hover {
  transform: translateY(-2px);
  background-color: rgba(55, 53, 47, 0.08); /* Màu nền xám nhẹ dịu mắt */
}