/* Style Custom cho Xe Ghép Tiện Chuyến Minh Thành */
:root {
  --primary: #dc2626; /* Đỏ đô tạo sự kích thích hành động & khẩn cấp */
  --primary-hover: #b91c1c;
  --secondary: #0284c7; /* Xanh dương uy tín */
  --zalo: #0068ff;
  --accent: #f59e0b;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1e293b;
  overflow-x: hidden;
}

/* Hiệu ứng rung chuông cho nút hotline */
@keyframes ring {
  0% { transform: rotate(0) scale(1) skew(1deg); }
  10% { transform: rotate(-25deg) scale(1) skew(1deg); }
  20% { transform: rotate(25deg) scale(1) skew(1deg); }
  30% { transform: rotate(-25deg) scale(1) skew(1deg); }
  40% { transform: rotate(25deg) scale(1) skew(1deg); }
  50% { transform: rotate(0) scale(1) skew(1deg); }
  100% { transform: rotate(0) scale(1) skew(1deg); }
}

/* Hiệu ứng sóng lan tỏa cho nút gọi nổi */
@keyframes pulse-wave {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

@keyframes pulse-wave-zalo {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(0, 104, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 104, 255, 0);
  }
}

.hotline-btn-pulse {
  animation: pulse-wave 1.8s infinite;
}

.zalo-btn-pulse {
  animation: pulse-wave-zalo 1.8s infinite;
}

.icon-ring {
  display: inline-block;
  animation: ring 1.5s infinite;
}

/* Card hover */
.price-card {
  transition: all 0.3s ease;
}

.price-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.15);
}

/* Sticky Bottom Bar for Mobile */
.mobile-bottom-bar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ffffff;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    padding: 8px 12px;
    gap: 8px;
  }
  
  body {
    padding-bottom: 72px; /* Tránh che khuất nội dung */
  }
}