/* Bố cục Bento Grid */
.bento-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 90%;
  max-width: 1100px;
  margin: 120px auto 50px auto;
  position: relative;
}

/* Các neo ẩn tránh lỗi dịch chuyển grid */
.bento-anchor {
  position: absolute;
  visibility: hidden;
}
#discord.bento-anchor, #about.bento-anchor, #join.bento-anchor { top: -140px; }

/* Định dạng chung thẻ Card */
.bento-card {
  background-color: #161617 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
  min-height: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  transition: transform 0.2s ease !important;
}

.bento-card:hover { transform: translateY(-3px) !important; }

/* Ô 1: LOGO & IP COPIER (Màu tối đồng bộ) */
.bento-logo-card {
  grid-column: span 1;
  background-color: #1c1c1e !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px !important;
}

.bento-logo-box {
  background-color: transparent !important;
  width: 100%;
  flex-grow: 1;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

.bento-logo-img {
  max-width: 100% !important;
  max-height: 145px !important;
  object-fit: contain;
  border-radius: 16px;
}

/* Thiết lập nút coppy IP sáng rõ, nổi bật hơn nền */
.main1_ipcopier.bento-ip-button {
  width: 100% !important;
  background-color: #252528 !important; /* Màu xám sáng hơn nền để nổi bật */
  border: 1px solid #3a3a3c !important; /* Đường viền rõ nét */
  padding: 14px 10px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important; /* Tạo chuyển động mượt mà khi di chuột vào */
  display: block !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* Hiệu ứng sáng lên khi di chuột vào nút */
.main1_ipcopier.bento-ip-button:hover {
  background-color: #2d2d31 !important;
  border-color: #48484a !important;
}

.main1_ipcopier_text1 {
  font-family: 'Space Grotesk', sans-serif !important;
  color: #ffffff !important; /* Màu chữ trắng rõ ràng nổi bật */
  font-size: 0.95rem !important;
  font-weight: bold !important;
  transition: color 0.15s ease !important;
}

.main1_ipcopier_text2 {
  font-family: 'Space Grotesk', sans-serif !important;
  color: #a0a0a0 !important; /* Màu xám chữ phụ sáng rõ, dễ đọc */
  font-size: 0.78rem !important;
  margin-top: 4px !important;
  display: inline-block !important;
  transition: color 0.15s ease !important;
}

/* Loại bỏ hoàn toàn CSS của popup lơ lửng cũ tránh rác mã */
.main1_popup {
  display: none !important;
}

.bento-store-card { grid-column: span 2; }

/* Ô 3: SỐ LIỆU DISCORD (Căn lề trái gọn gàng) */
.bento-discord-card {
  grid-column: span 1;
  background-color: #1c1c1e !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}

.discord-stats {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  gap: 10px;
}

.discord-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.discord-stat-num {
  font-size: 1.5rem !important;
  font-weight: bold !important;
  color: #ffffff !important;
}

.discord-stat-label {
  font-size: 0.8rem !important;
  color: #8e8e93 !important;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.discord-dot {
  width: 6px;
  height: 6px;
  background-color: #5865F2; /* Màu xanh tím đặc trưng của Discord */
  border-radius: 50%;
  display: inline-block;
}

/* Ô 4: CHỈ SỐ MINECRAFT (STATS Dashboard) */
.bento-stats-card {
  grid-column: span 2;
  min-height: 220px !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.server-status-badge {
  background-color: rgba(46, 213, 115, 0.15);
  color: #2ed573;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #2ed573;
  border-radius: 50%;
}

.stats-body {
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.stat-main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.stat-number {
  font-size: 2.6rem !important;
  font-weight: bold !important;
  color: #ffffff !important;
  line-height: 1;
}

.stat-label {
  font-size: 0.9rem !important;
  color: #8e8e93 !important;
  margin-top: 6px;
}

/* Danh sách tên người chơi đang online trong Stats Card */
.player-list-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  width: 100%;
  max-height: 80px; /* Giới hạn chiều cao */
  overflow-y: auto; /* Tự hiện thanh cuộn nếu quá nhiều người */
}

/* Thẻ tag chứa tên từng người chơi */
.player-tag {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  font-family: monospace !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: inline-block !important;
}

/* Ô 5: HƯỚNG DẪN THAM GIA (Giao diện tối giản, bo góc tròn mượt mà đen tuyền) */
.bento-join-card {
  grid-column: span 2;
  background-color: #1c1c1e !important; /* Màu xám tối đồng bộ */
  background-image: none !important; /* Không sử dụng ảnh nền tránh bị rối mắt */
  justify-content: center;
  align-items: center;
  padding: 30px 24px !important;
}

.bento-join-card-content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.mc-input-group {
  margin-top: 14px !important;
  width: 100%;
}

.mc-label {
  display: block !important;
  color: #8e8e93 !important; /* Màu xám nhạt */
  font-size: 0.85rem !important;
  margin-bottom: 6px !important;
  text-align: left !important;
  font-family: 'Space Grotesk', sans-serif !important;
}

.mc-input-box {
  background-color: #000000 !important; /* Nền hộp đen tuyền */
  border: 1px solid #2c2c2e !important; /* Viền tối mờ tinh tế */
  padding: 12px 16px !important;
  font-family: 'Courier New', Courier, monospace !important; /* Font chữ monospace */
  font-size: 1rem !important;
  border-radius: 12px !important; /* Bo góc tròn trơn tru mềm mại */
  text-align: left !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  width: 100%;
}

.mc-input-box-gray {
  color: #8e8e93 !important; /* Màu chữ dòng địa chỉ IP */
}