/* BỆNH VIỆN LÊ VĂN VIỆT - PHẦN MỀM THI ĐUA KHEN THƯỞNG */
/* Hệ màu chủ đạo: TONE XANH LÁ Y TẾ (Medical Emerald & Forest Green) */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  --primary-dark: #064e3b;      /* Xanh rêu đậm trang trọng */
  --primary-green: #059669;     /* Xanh lá y tế BV Lê Văn Việt */
  --primary-emerald: #10b981;   /* Xanh ngọc tươi sáng */
  --primary-mint: #ecfdf5;      /* Xanh lá nhạt nền trang nhã */
  --gold-award: #d97706;        /* Vàng kim vinh danh */
}

body {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f4fbf7;
  color: #1e293b;
}

/* Header Gradient màu xanh lá y tế Bệnh viện Lê Văn Việt */
.hospital-green-header {
  background: linear-gradient(135deg, #064e3b 0%, #047857 50%, #059669 100%);
}

/* Hiệu ứng background mờ ẩn toàn thể tòa nhà Bệnh viện Lê Văn Việt */
.hospital-watermark-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 1.5rem;
  z-index: 0;
  background-color: #064e3b;
}

.hospital-watermark-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  opacity: 0.65;
  filter: blur(0.3px) contrast(1.15) brightness(1.08);
  transform: scale(1.0);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.group:hover .hospital-watermark-img {
  transform: scale(1.02);
  opacity: 0.75;
}

/* Lớp phủ chuyển màu xanh y tế chuyên nghiệp: làm trong suốt vùng trung tâm để hiện rõ bảng tên đỏ Bệnh viện Lê Văn Việt */
.hospital-watermark-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg, 
    rgba(6, 78, 59, 0.75) 0%, 
    rgba(4, 120, 87, 0.32) 38%, 
    rgba(4, 120, 87, 0.32) 58%, 
    rgba(15, 23, 42, 0.82) 100%
  );
  pointer-events: none;
}

.hospital-card-header {
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
}

/* Khung viền và ánh kim vinh danh Bảng vàng */
.gold-frame {
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 20px -2px rgba(245, 158, 11, 0.2);
}

.gold-gradient-text {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Avatar chữ viết tắt (Initials Avatar) sang trọng, không dùng ảnh stock */
.avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #ffffff;
  background: linear-gradient(135deg, #047857 0%, #10b981 100%);
  border: 2px solid #a7f3d0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.avatar-initials-gold {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
  border: 2px solid #fde68a;
  color: #ffffff;
}

/* Card hover animation */
.card-hover {
  transition: all 0.25s ease-in-out;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* Khung Giấy khen trang trọng */
.certificate-frame {
  border: 10px solid #059669;
  outline: 3px solid #b45309;
  background: #fffdfa;
  position: relative;
  box-shadow: 0 15px 35px rgba(6, 78, 59, 0.2);
}

.certificate-frame::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px dashed #ca8a04;
  pointer-events: none;
}

/* Scrollbar tinh tế */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #ecfdf5;
}
::-webkit-scrollbar-thumb {
  background: #a7f3d0;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #059669;
}

/* Hoạt ảnh nút Chat AI nổi */
@keyframes pulseGreen {
  0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(5, 150, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

.pulse-green {
  animation: pulseGreen 2.5s infinite;
}

/* Thanh trượt bảng dữ liệu quản lý nhân sự */
.table-scroll-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.table-scroll-container::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 6px;
}
.table-scroll-container::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 6px;
}
.table-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #059669;
}