/* ===== Đại Lý Xe Sài Gòn - Custom styles ===== */
/* Luôn chừa chỗ cho thanh cuộn dọc -> không bị giật ngang khi chuyển trang ngắn/dài */
html { overflow-y: scroll; scrollbar-gutter: stable; }
body { font-family: 'Roboto', sans-serif; }

/* Nút liên hệ nổi (Zalo/Hotline) — vòng sáng + hiệu ứng toả sóng */
.fab-btn { position: relative; width: 48px; height: 48px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(80,165,255,.35), 0 5px 14px rgba(0,0,0,.22); }
.fab-btn::before, .fab-btn::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; border: 2px solid rgba(56,152,255,.55); animation: fabWave 2s ease-out infinite; pointer-events: none; }
.fab-btn::after { animation-delay: 1s; }
@keyframes fabWave { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

/* Range chỉnh cỡ chữ toàn trang — vùng kéo cao ~44px, track mảnh, thumb to dễ kéo */
.fs-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; outline: none; cursor: pointer; touch-action: none; }
.fs-range::-webkit-slider-runnable-track { height: 8px; border-radius: 9999px; background: #e5e7eb; }
.fs-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -10px; width: 28px; height: 28px; border-radius: 50%; background: currentColor; box-shadow: 0 1px 5px rgba(0,0,0,.35); }
.fs-range::-moz-range-track { height: 8px; border-radius: 9999px; background: #e5e7eb; }
.fs-range::-moz-range-thumb { width: 28px; height: 28px; border: none; border-radius: 50%; background: currentColor; box-shadow: 0 1px 5px rgba(0,0,0,.35); }

/* Placeholder hoạ tiết */
.ph {
  background-color: #e2e6ea;
  background-image: linear-gradient(135deg, #eef1f4 25%, transparent 25%, transparent 50%, #eef1f4 50%, #eef1f4 75%, transparent 75%, transparent);
  background-size: 14px 14px;
}

/* Nút CTA (vàng gold) - vd Nghe báo giá, tư vấn trả góp */
.zbtn { background: #f4b41a; color: #0a2c5f; font-weight: 700; }
.zbtn:hover { background: #e0a40c; }

/* Nút LINK trực tiếp qua Zalo -> xanh chủ đạo Zalo (phân biệt với nút vàng) */
a.zbtn[href*="zalo"] { background: #0068ff; color: #fff; }
a.zbtn[href*="zalo"]:hover { background: #0055d4; }

/* Huy hiệu Zalo nhỏ - dùng logo ảnh, ẩn chữ. Đường dẫn tương đối từ public/css/ */
.zbadge {
  display: inline-block;
  width: 22px; height: 22px;
  font-size: 0; color: transparent; line-height: 0;
  flex-shrink: 0;
  background: url("../assets/Logo-Zalo-Arc.webp") center/contain no-repeat;
}

/* Nút play nhấp nháy (video) */
@keyframes playPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70%  { transform: scale(1.12); box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.play-pulse { animation: playPulse 1.5s ease-out infinite; }

/* Hexagon Hino */
.hexa { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* Select: bỏ giao diện mặc định iOS Safari (bị dẹp/bo góc lạ), thêm mũi tên đồng nhất */
select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%236b7280' d='M8 11L3 6h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.8rem;
  padding-right: 2rem;
  line-height: 1.4;
}

/* Ẩn scrollbar dải trượt */
.no-scrollbar::-webkit-scrollbar,
.slider-track::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.no-scrollbar,
.slider-track { -ms-overflow-style: none; scrollbar-width: none; }
/* Chặn overscroll/rubber-band tạo khoảng trống ở 2 đầu slider trên mobile */
.slider-track { overscroll-behavior-x: contain; }