:root{
  --max-width:1100px;
  --accent:#0b6cff;
  --muted:#666;
  --bg:#f7f8fb;
  --card:#fff;
  font-family: Inter, Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#111;line-height:1.45}
.container{max-width:var(--max-width);margin:0 auto;padding:20px}
/* header */
.site-header{background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.06);position:sticky;top:0;z-index:50}
.header-row{display:flex;align-items:center;gap:16px;justify-content:space-between}
.logo{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.1rem}
.main-nav a{margin:0 8px;text-decoration:none;color:#222}
.hotline{background:var(--accent);color:#fff;padding:8px 12px;border-radius:6px;text-decoration:none}

/* hero */
.hero{padding:36px 0;background:linear-gradient(180deg, #fff, var(--bg))}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:center}
.hero h1{margin:0 0 10px;font-size:1.9rem}
.lead{color:var(--muted);margin-bottom:14px}
.cta-row .btn{margin-right:10px}

/* cards & grids */
.section{padding:28px 0}
.vehicles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vehicle{background:var(--card);padding:12px;border-radius:8px;box-shadow:0 6px 18px rgba(10,10,10,.04)}
.vehicle img{width:100%;height:160px;object-fit:cover;border-radius:6px}
.table-card{background:var(--card);padding:16px;border-radius:8px;box-shadow:0 6px 18px rgba(10,10,10,.04);margin-bottom:16px}
.price-tables{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.table-card table{width:100%;border-collapse:collapse;margin-top:8px}
.table-card th, .table-card td{padding:8px;border-bottom:1px solid #eee;text-align:left}
.muted{color:var(--muted);font-size:.95rem}

/* booking */
.book-quick{display:flex;gap:24px;align-items:flex-start;margin-top:16px}
.book-quick form{display:flex;flex-direction:column;gap:10px;min-width:260px}
.book-quick label{display:flex;flex-direction:column;font-size:.95rem}
input,select{padding:8px;border:1px solid #ddd;border-radius:6px}

/* buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;border:1px solid transparent}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--accent)}

/* footer */
.site-footer{padding:18px 0;text-align:center;color:var(--muted);font-size:.95rem;background:transparent;border-top:1px solid rgba(0,0,0,.03)}

/* responsiveness */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .vehicles-grid{grid-template-columns:1fr 1fr}
  .price-tables{grid-template-columns:1fr;gap:10px}
}
@media (max-width:600px){
  .main-nav{display:none}
  .vehicles-grid{grid-template-columns:1fr}
  .book-quick{flex-direction:column}
}

/* Scoped under #contact-section to avoid global effects */
#contact-section {
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}


/* Modal styling, scoped to #zalo-modal */
/* ===== Floating Contact Buttons (scoped) ===== */
#floating-contact {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 9999; /* Always on top */
}

/* Common button style */
#floating-contact a,
#floating-contact button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  outline: none;
  cursor: pointer;
  color: white;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  animation: floatPulse 2.5s infinite ease-in-out;
}

/* Phone button */
#floating-phone-btn {
  background-color: #28a745;
}

/* Zalo button */
#floating-zalo-btn {
  background-color: #0068ff;
}

/* Hover effects */
#floating-phone-btn:hover,
#floating-zalo-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

/* Pulse animation */
@keyframes floatPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  }
}

/* ===== Zalo QR Modal (scoped) ===== */
#floating-zalo-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

#floating-zalo-modal.active {
  display: flex;
}

#floating-zalo-modal img {
  width: 260px;
  height: 260px;
  border-radius: 12px;
  background: white;
  padding: 10px;
  animation: popIn 0.3s ease;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

@keyframes popIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}


#floating-phone-btn {
  text-decoration: none;   /* removes underline or dash */
  color: white;            /* ensures the icon stays white */
}

/* Mobile responsiveness for floating buttons */
@media (max-width: 600px) {
  #floating-contact {
    bottom: 15px;
    right: 15px;
    gap: 10px;
  }

  #floating-contact a,
  #floating-contact button {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  #floating-zalo-modal img {
    width: 200px;
    height: 200px;
  }
}
body {
  padding-bottom: 100px; /* gives space under content for buttons */
}
/* hero */
.hero {
  padding: 32px 0;
  background: linear-gradient(180deg, #fff, var(--bg));
  overflow-x: hidden; /* prevent text overflow on mobile */
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 20px;
  align-items: center;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.hero h1 {
  margin: 0 0 8px;
  font-size: 1.6rem; /* smaller default size */
  line-height: 1.3;
  word-wrap: break-word;
}

.hero h2 {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.4;
}

.lead {
  color: var(--muted);
  margin-bottom: 14px;
  font-size: 0.95rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ✅ Tablet (width ≤ 900px) */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-image {
    order: -1; /* move image above text */
    margin-bottom: 16px;
  }

  .hero h1 {
    font-size: 1.4rem;
  }

  .hero h2 {
    font-size: 0.95rem;
  }

  .lead {
    font-size: 0.9rem;
  }
}

/* ✅ Mobile (width ≤ 600px) */
@media (max-width: 600px) {
  .hero {
    padding: 20px 12px;
  }

  .hero h1 {
    font-size: 1.2rem;
    line-height: 1.35;
  }

  .hero h2 {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .lead {
    font-size: 0.85rem;
  }

  .cta-row {
    flex-direction: column;
    align-items: center;
  }

  .cta-row .btn {
    width: 100%;
    max-width: 240px;
    text-align: center;
  }
}

/* ✅ Very small phones (width ≤ 400px) */
@media (max-width: 400px) {
  .hero h1 {
    font-size: 1.1rem;
  }

  .hero h2 {
    font-size: 0.8rem;
  }

  .lead {
    font-size: 0.8rem;
  }
}