/* -------------------------
   Modal Custom Glow Effect
-------------------------- */
.modal-body { 
  max-height: 70vh; 
  overflow-y: auto; 
}
.img-caption { 
  font-style: italic; 
  margin-bottom: 20px; 
  color: #333; 
}
.modal-content {
  border: 3px solid rgba(0, 247, 255, 0.9);
  border-radius: 14px;
  box-shadow: 0 0 14px rgba(0, 247, 255, 0.8),
              0 0 28px rgba(0, 247, 255, 0.6),
              0 0 56px rgba(0, 247, 255, 0.4);
  animation: glow 2.4s ease-in-out infinite alternate;
}
@keyframes glow {
  0% {
    box-shadow: 0 0 10px rgba(0, 247, 255, 0.7),
                0 0 20px rgba(0, 247, 255, 0.5),
                0 0 40px rgba(0, 247, 255, 0.3);
    border-color: rgba(0, 247, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 18px rgba(0, 234, 255, 0.9),
                0 0 36px rgba(0, 247, 255, 0.7),
                0 0 64px rgba(0, 247, 255, 0.5);
    border-color: rgba(0, 255, 255, 1);
  }
}
.modal-header, .modal-body { 
  background: rgba(255, 255, 255, 0.98); 
}
@media (prefers-reduced-motion: reduce) { 
  .modal-content { animation: none; } 
}

/* Glow Icon */
img[src*="icon-5.png"] {
  border: 3px solid #00f7ff;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 0 10px #00f7ff, 0 0 20px #00f7ff, 0 0 30px #00f7ff;
  animation: glowIcon 2s infinite alternate;
}
@keyframes glowIcon {
  from { box-shadow: 0 0 8px #00f7ff, 0 0 16px #00f7ff; }
  to   { box-shadow: 0 0 16px #00eaff, 0 0 32px #00f7ff; }
}

/* -------------------------
   Contact Box
-------------------------- */
/* Overlay khi bật popup */
#contact-box-overlay {
  position: fixed;
  background-color: rgba(0,0,0,0.5);
  inset: 0;
  z-index: 1000;
  display: none;
}

/* Khung chính */
#contact-box {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1001;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

/* Nút chính */
#contact-box .container {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 0.9rem;
  font-weight: 500;
  color: #222;
}

/* Icon trong nút chính */
#contact-box .contact-icon {
  width: 2rem;
  height: 2rem;
  background: #27272a;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

/* Hiệu ứng ping đỏ */
#contact-box .dot-ping {
  position: absolute;
  top: 0;
  right: -5px;
  width: 14px;
  height: 14px;
}
#contact-box .dot {
  background: red;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
#contact-box .ping {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: red;
  animation: ping 1s infinite;
}
@keyframes ping {
  75%,100% { transform: scale(2); opacity: 0; }
}

/* Popup */
#contact-box .popup {
  position: absolute;
  bottom: 4rem;
  right: 0;
  background: #fff;
  border-radius: 0.5rem;
  min-width: 16rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  display: none;
  flex-direction: column;
  animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Item trong popup */
#contact-box .popup .item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  text-decoration: none;
  color: #222;
  border-radius: 0.5rem;
  transition: background 0.2s;
}
#contact-box .popup .item:hover {
  background: #f4f4f5;
}
#contact-box .popup .item .logo,
#contact-box .popup .item .icon {
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#contact-box .popup .item .logo img {
  width: 100%;
  height: auto;
}
#contact-box .popup .item .meta {
  display: flex;
  flex-direction: column;
}
#contact-box .popup .item .meta .title {
  font-size: 0.9rem;
  font-weight: 600;
}
#contact-box .popup .item .meta .description {
  font-size: 0.75rem;
  color: #555;
}
#contact-box .popup .divide {
  height: 1px;
  background: #eee;
  margin: 0.25rem 0;
}