/*
================================================================
== TỆP: CSS/VIEW3D-SWITCH.CSS
== CHỨC NĂNG: Định dạng cho các nút chuyển đổi model 3D
================================================================
*/

/* Thanh cuộn chứa các nút chuyển đổi */
.view3d-switch-container {
  display: flex;
  align-items: center;
  gap: 15px; /* Tăng khoảng cách giữa các nút */
  flex-wrap: nowrap; /* Quan trọng: Ngăn các nút xuống hàng */
  overflow-x: auto; /* Cho phép cuộn ngang khi có nhiều nút */
  overflow-y: hidden; /* Ẩn thanh cuộn dọc */
  padding: 10px 15px; /* Thêm đệm để các nút không bị dính vào cạnh */
  background-color: rgba(0, 0, 0, 0.3); /* Nền mờ cho thanh */
  border-radius: 50px; /* Bo tròn thành hình viên thuốc */
  border: 1px solid rgba(255, 241, 1, 0.2);
  flex-shrink: 0; /* Không co lại */
  -webkit-overflow-scrolling: touch; /* Cuộn mượt hơn trên iOS */

  /* Tùy chỉnh thanh cuộn cho Firefox */
  scrollbar-width: thin;
  scrollbar-color: #fff101 rgba(0, 0, 0, 0.2);
}

/* Tùy chỉnh thanh cuộn cho Webkit (Chrome, Safari) */
.view3d-switch-container::-webkit-scrollbar {
  height: 6px; /* Chiều cao của thanh cuộn ngang */
}

.view3d-switch-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.view3d-switch-container::-webkit-scrollbar-thumb {
  background: #fff101;
  border-radius: 3px;
}

.view3d-switch-btn {
  width: 30px; /* Tăng kích thước nút tròn */
  height: 30px; /* Tăng kích thước nút tròn */
  padding: 0;
  background-color: rgba(0, 0, 0, 0.4);
  border: 2px solid #fff101;
  border-radius: 50%; /* Bo tròn thành hình tròn */
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0; /* Ngăn nút bị co lại khi không gian hẹp */
}

.view3d-switch-btn:hover {
  background-color: rgba(255, 241, 1, 0.3);
  transform: translateY(-2px);
}

/* Nút đang được chọn (active) */
.view3d-switch-btn.active {
  background-color: #fff101;
  color: #c00207;
  box-shadow: 0 0 10px rgba(255, 241, 1, 0.5);
  pointer-events: none; /* Không cho click vào nút đang active */
  transform: scale(1.1); /* Phóng to nhẹ nút đang được chọn */
}