/*
  style.css – Định dạng cho trang web dịch vụ vận chuyển Long Thành

  Bảng màu sử dụng sắc xanh dương làm chủ đạo để tạo cảm giác tin cậy và chuyên nghiệp.
  Tất cả nội dung được bố trí trong các khung container có độ rộng tối ưu.
*/

/* Biến CSS cho màu sắc và kích thước */
:root {
  --primary-color: #006ecf; /* xanh dương chủ đạo */
  --secondary-color: #f5f9ff; /* màu nền nhạt */
  --accent-color: #fbae17; /* màu nhấn (vàng cam) */
  --dark-color: #2c3e50;
  --light-color: #ffffff;
  --max-width: 1200px;
}

/* Reset cơ bản */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: var(--dark-color);
  background-color: var(--secondary-color);
}

/* Container để giới hạn chiều rộng nội dung */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--light-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}
.logo {
  font-size: 1.5rem;
  color: var(--primary-color);
  font-weight: bold;
}
.nav a {
  color: var(--dark-color);
  margin-left: 1rem;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s;
}
.nav a:hover {
  color: var(--primary-color);
}

/* Hero section */
.hero {
  position: relative;
  height: 70vh;
  min-height: 450px;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light-color);
  text-align: center;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
}
.hero-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}
.btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.btn-primary {
  background-color: var(--accent-color);
  color: var(--dark-color);
}
.btn-primary:hover {
  /* màu hover đậm hơn khoảng 10% so với màu nhấn */
  background-color: #d99b14;
}

/* Services section */
.services {
  padding: 4rem 0 2rem;
  background-color: var(--light-color);
}
.services h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--primary-color);
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.service-item {
  background-color: var(--secondary-color);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}
.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.service-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.service-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}
.service-item p {
  font-size: 0.95rem;
  color: var(--dark-color);
}

/* Pricing section */
.pricing {
  padding: 4rem 0;
  background-color: var(--secondary-color);
}
.pricing h2 {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-size: 2rem;
}
.pricing p {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--dark-color);
}
.pricing-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.pricing-table {
  background-color: var(--light-color);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.pricing-table h3 {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-size: 1.4rem;
}
.pricing-table table {
  width: 100%;
  border-collapse: collapse;
}
.pricing-table th,
.pricing-table td {
  padding: 0.6rem;
  text-align: left;
  font-size: 0.9rem;
}
.pricing-table thead th {
  border-bottom: 2px solid var(--primary-color);
  color: var(--dark-color);
}
.pricing-table tbody tr:nth-child(even) {
  background-color: var(--secondary-color);
}
.pricing-table sup a {
  color: var(--primary-color);
  text-decoration: none;
  font-size: 0.8rem;
}
.note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #555;
  text-align: center;
  font-style: italic;
}

/* Booking section */
.booking {
  padding: 4rem 0;
  background-color: var(--light-color);
}
.booking h2 {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--primary-color);
  font-size: 2rem;
}
.booking p {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--dark-color);
}
.booking-form {
  max-width: 800px;
  margin: 0 auto;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.form-group {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
}
.form-group label {
  margin-bottom: 0.4rem;
  font-weight: 500;
  color: var(--dark-color);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary-color);
}
.form-group textarea {
  resize: vertical;
}
.booking-form button {
  display: block;
  margin: 1.5rem auto 0;
  background-color: var(--primary-color);
  color: var(--light-color);
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}
.booking-form button:hover {
  background-color: #0056a3;
}

/* Contact section */
.contact {
  padding: 4rem 0;
  background-color: var(--secondary-color);
}
.contact h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
  font-size: 2rem;
}
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.contact-info {
  flex: 1;
  min-width: 250px;
  font-size: 0.95rem;
}
.contact-info p {
  margin-bottom: 0.8rem;
}
.contact-info a {
  color: var(--primary-color);
  text-decoration: none;
}
.contact-info a:hover {
  text-decoration: underline;
}
.contact-map {
  flex: 1;
  min-width: 250px;
}
.map-placeholder {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Footer */
.footer {
  background-color: var(--dark-color);
  color: var(--light-color);
  padding: 2rem 0;
  font-size: 0.85rem;
}
.footer p {
  text-align: center;
  margin-bottom: 0.5rem;
}
.footer .citations {
  margin-top: 1rem;
  padding-left: 1.2rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--light-color);
}
.footer .citations li {
  margin-bottom: 0.5rem;
}
.footer .citations a {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Media queries */
@media (max-width: 768px) {
  .hero-content h2 {
    font-size: 1.8rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
  .service-item img {
    height: 150px;
  }
  .contact-grid {
    flex-direction: column;
  }
}