.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-overlay.open { display: flex; }

.modal-card {
  width: 400px;
  background: #1a202c; /* Màu nền tối của modal */
  color: white;
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3);.modal-actions {
  display: flex;
  justify-content: center; /* Căn giữa nhóm nút trong modal */
  gap: 12px;
  width: 100%;
}

.btn {
  /* Các thuộc tính quan trọng để căn giữa chữ */
  display: flex;
  justify-content: center; /* Căn ngang chữ */
  align-items: center;     /* Căn dọc chữ */
  
  flex: 1; /* Giúp 2 nút có độ rộng bằng nhau */
  padding: 12px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
}

/* Tùy chỉnh màu sắc để giống thiết kế của bạn */
.btn-secondary { 
  background: #2d3748; 
  color: white; 
}

.btn-primary { 
  background: #3b82f6; 
  color: white; 
}
}

.icon-warning {
  width: 50px;
  height: 50px;
  border: 2px solid #d97706;
  color: #d97706;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 20px;
}

.modal-title { margin: 0 0 10px; font-size: 20px; }
.modal-desc { color: #a0aec0; margin-bottom: 25px; }

.modal-actions {
  display: flex;
  gap: 12px;
}

.btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
}

.btn-secondary { background: #2d3748; color: white; }
.btn-primary { background: #3b82f6; color: white; } /* Hoặc dùng màu đỏ nếu bạn muốn cảnh báo mạnh */