/* CSS Riêng cho Trang Ví (wallet.html) */

.wallet-section { 
  padding: 40px 0 60px; 
}

.wallet-grid { 
  display: grid; 
  grid-template-columns: 2fr 1fr; 
  gap: 24px; 
  margin-bottom: 30px; 
}

/* Thẻ Số Dư Chính */
.balance-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #fff; 
  border-radius: 16px; 
  padding: 28px; 
  position: relative; 
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.2);
}

.balance-title { 
  font-size: 14px; 
  color: #94a3b8; 
  font-weight: 500; 
  margin-bottom: 8px; 
}

.balance-amount { 
  font-size: 36px; 
  font-weight: 800; 
  color: #38bdf8; 
  margin-bottom: 20px; 
}

.balance-actions { 
  display: flex; 
  gap: 12px; 
  align-items: center; 
  flex-wrap: wrap; 
}

/* Cảnh báo chưa liên kết bank */
.bank-alert-box {
  background: rgba(234, 179, 8, 0.15); 
  border: 1px dashed #eab308; 
  border-radius: 10px;
  padding: 12px 16px; 
  margin-top: 15px; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 10px;
}

.bank-alert-text { 
  font-size: 13px; 
  color: #fde047; 
}

.btn-link-bank { 
  background: #eab308; 
  color: #000; 
  border: none; 
  padding: 6px 14px; 
  border-radius: 6px; 
  font-weight: 600; 
  font-size: 13px; 
  cursor: pointer; 
  text-decoration: none; 
}

/* Lưới các chỉ số nhỏ */
.stats-sub-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 16px; 
  margin-top: 20px; 
  border-top: 1px solid #334155; 
  padding-top: 20px; 
}

.stat-box h4 { 
  font-size: 12px; 
  color: #94a3b8; 
  margin-bottom: 4px; 
}

.stat-box p { 
  font-size: 18px; 
  font-weight: 700; 
  color: #f8fafc; 
}

/* Thẻ Thông tin Ngân hàng */
.payment-method-card { 
  background: #fff; 
  border-radius: 16px; 
  padding: 24px; 
  border: 1px solid #e2e8f0; 
}

.card-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 20px; 
}

.card-header h3 { 
  font-size: 16px; 
  font-weight: 700; 
  color: #1e293b; 
}

.bank-info-detail { 
  background: #f8fafc; 
  border: 1px solid #e2e8f0; 
  border-radius: 10px; 
  padding: 16px; 
}

.bank-name { 
  font-weight: 700; 
  font-size: 15px; 
  color: #0f172a; 
  margin-bottom: 4px; 
}

.bank-account { 
  font-size: 14px; 
  color: #64748b; 
  font-family: monospace; 
  letter-spacing: 1px; 
}

/* Bảng Lịch Sử Giao Dịch */
.history-card { 
  background: #fff; 
  border-radius: 16px; 
  padding: 24px; 
  border: 1px solid #e2e8f0; 
}

.history-table { 
  width: 100%; 
  border-collapse: collapse; 
  margin-top: 15px; 
  text-align: left; 
  font-size: 14px; 
}

.history-table th { 
  background: #f8fafc; 
  padding: 12px 16px; 
  color: #64748b; 
  font-weight: 600; 
  border-bottom: 1px solid #e2e8f0; 
}

.history-table td { 
  padding: 16px; 
  border-bottom: 1px solid #f1f5f9; 
}

.badge-status { 
  display: inline-block; 
  padding: 4px 10px; 
  border-radius: 20px; 
  font-size: 12px; 
  font-weight: 600; 
}

.status-success { 
  background: #dcfce7; 
  color: #15803d; 
}

.status-pending { 
  background: #fef9c3; 
  color: #a16207; 
}

/* Responsive riêng cho Wallet */
@media (max-width: 768px) {
  .wallet-grid { 
    grid-template-columns: 1fr; 
  }
  .stats-sub-grid { 
    grid-template-columns: 1fr; 
    gap: 12px; 
  }
}