body {
  font-family: 'Inter', sans-serif;
}

/* 
   Không định nghĩa biến CSS ở đây nữa vì trang liên hệ đã kế thừa toàn bộ 
   biến màu sắc chủ đạo mới (xanh dương sáng, xanh dương đậm) từ file global.css.
*/

.contact-page {
  margin-top: 63px;
}

/* Info Cards */
.contact-info-cards {
  display: flex;
  flex-direction: column;
  gap: 41px;
}

/* 
   Thẻ thông tin liên hệ bên trái (Địa chỉ, Số điện thoại, v.v.).
   Thay đổi màu nền từ màu hồng đỏ cũ sang màu xanh nhạt (#edf7fd) để hòa hợp với tông màu dự án.
*/
.info-card {
  background-color: #edf7fd;
  /* padding: 21px; */
  padding-top: 44px;
  padding-bottom: 44px;
  padding-left: 33px;
  padding-right: 21px; 
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: var(--transition-smooth); /* Đổi sang biến transition toàn cục từ global.css để đồng bộ hiệu ứng */
}

.info-card:hover {
  transform: translateY(-5px);
}

.info-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-icon img {
  max-width: 100%;
  height: auto;
}

.info-content h3 {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 12px;
  color: #323232F2;
}

.info-content p {
  margin-bottom: 0;
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 28px;
  color: #323232F2;
}

/* 
   Khung chứa form liên hệ (bên phải).
   Đổi màu nền sang xanh dương nhạt và thêm viền mờ khớp với thiết kế Figma mới.
*/
.contact-form-container {
  background-color: #edf7fd;
  padding-top: 54px;
  padding-bottom: 30px;
  padding-left: 44px;
  padding-right: 44px;
  border-radius: 30px;
  border: 0.7px solid rgba(46, 46, 46, 0.3);
}

/* 
   Tiêu đề chính của form liên hệ.
   Sử dụng màu xanh dương sáng thương hiệu làm điểm nhấn chính.
*/
.form-title {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 16px;
}

/* 
   Tiêu đề phụ / Mô tả ngắn bên dưới form liên hệ.
   Sử dụng màu xanh dương đậm để văn bản dễ đọc và đồng điệu với hệ thống màu mới.
*/
.form-subtitle {
  font-family: 'Inter', sans-serif;
  color: var(--secondary-color);
  font-size: 16px;
  line-height: 25px;
  margin-bottom: 28px;
}

/* Form Styling */
.input-group-custom {
  position: relative;
  width: 100%;
}

.input-group-custom .form-control {
  background-color: #FDFDFD !important;
  border: none !important;
  border-radius: 10px;
  padding: 15px 20px;
  padding-right: 45px;
  font-size: 14px;
  color: #141414DE;
  width: 100% !important;
  display: block;
}

.input-group-custom textarea.form-control {
  padding-right: 45px;
}

/* 
   Trạng thái khi người dùng nhấn/tập trung vào ô nhập liệu (input focus).
   Đổi hiệu ứng bóng viền màu đỏ cũ sang bóng màu xanh dương thương hiệu mờ (rgba(0, 174, 239, 0.15)).
*/
.input-group-custom .form-control:focus {
  box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.15);
  background-color: #ffffff !important;
  outline: none;
}

.input-icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 5;
  
}

.input-group-custom textarea + .input-icon {
  top: 25px;
  transform: none;
}

/* 
   Nút bấm gửi thông tin liên hệ.
   Thay đổi màu nền sang màu xanh dương sáng thương hiệu và áp dụng hiệu ứng chuyển động mượt.
*/
.btn-submit {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 5px;
  font-weight: 500;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: var(--transition-smooth); /* Đổi sang biến transition toàn cục từ global.css để đồng bộ hiệu ứng */
  margin-top: 10px;
}

/* 
   Hiệu ứng khi di chuột qua nút gửi (hover).
   Đổi nền sang xanh dương sẫm hơn (#009ad4) và bóng đổ màu xanh dịu để tạo chiều sâu trực quan.
*/
.btn-submit:hover {
  background-color: #009ad4;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 174, 239, 0.3);
}

/* 
   Hiệu ứng khi người dùng nhấn chuột vào nút (active).
   Đưa nút trở lại vị trí ban đầu.
*/
.btn-submit:active {
  transform: translateY(0);
}

.map-container {
  display: flex;
  justify-content: center;
  width: 100%;
}
.map-container iframe {
border-radius: 30px;
  width: 100%;
  max-width: 1280px;
  height: 641px;
}
.map {
  border-radius: 30px;
  width: 100%;
  max-width: 1280px;
  height: 641px;
}

@media (max-width: 1024px) {
  .contact-page {
    margin-top: 10px;
  }

  .info-content h3 {
    font-size: 20px;
  }

  .info-content p {
    font-size: 16px;
  }

  .info-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .form-title {
    font-size: 24px;
  }

  .form-subtitle {
    /* Giảm cỡ chữ mô tả form trên tablet */
    font-size: 15px;
  }

  .map-container {
    height: auto !important;
    padding: 0 24px !important; /* Đệm lề hai bên để bản đồ không bị chạm sát mép màn hình */
    margin-bottom: 50px !important;
  }

  .map {
    height: 400px !important; /* Giảm chiều cao bản đồ trên các màn hình tablet lớn */
  }
}

@media (max-width: 991px) {
  .contact-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .contact-map-section {
    padding-top: 0px !important;
    padding-bottom: 40px !important;
  }

  .contact-form-container {
    /* Giảm padding của form container trên tablet để tiết kiệm diện tích */
    padding: 35px 25px;
    margin-top: 10px;
  }

  .info-card {
    /* Giảm padding của thẻ thông tin trên tablet để gọn gàng hơn */
    padding: 30px 20px;
  }

  .info-content h3 {
    /* Giảm cỡ chữ tiêu đề thông tin trên tablet */
    font-size: 19px;
  }

  .info-content p {
    /* Giảm cỡ chữ nội dung thông tin trên tablet */
    font-size: 15.5px;
  }

  .form-title {
    /* Giảm cỡ chữ tiêu đề form trên tablet */
    font-size: 23px;
  }
}

@media (max-width: 768px) {
  .contact-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .contact-map-section {
    padding-top: 0px !important;
    padding-bottom: 30px !important;
  }

  .info-card {
    /* Thu gọn thêm padding và đổi bố cục xếp dọc trên thiết bị di động */
    padding: 20px;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .info-icon {
    width: 40px !important;
    height: 40px !important;
  }
  .map {
    aspect-ratio: 16 / 9; /* Thay đổi sang tỷ lệ 16:9 để bản đồ trông dẹt và cân đối hơn trên di động */
    height: auto !important;
    border-radius: 15px; /* Giữ bo góc đẹp đồng bộ với desktop */
  }
  .map-container {
    padding: 0 15px !important;
    margin-top: 0px !important; /* Loại bỏ margin âm để tránh làm các phần tử đè lên nhau */
    margin-bottom: 30px !important;
  }
  .contact-info-cards{
    gap: 20px;
  }

  .info-content h3 {
    /* Giảm cỡ chữ trên di động trung bình */
    font-size: 18px;
  }

  .info-content p {
    /* Giảm cỡ chữ trên di động trung bình */
    font-size: 15px;
  }

  .form-title {
    /* Giảm cỡ chữ form trên di động trung bình */
    font-size: 22px;
  }

  .form-subtitle {
    /* Giảm cỡ chữ mô tả form trên di động trung bình */
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .contact-section {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
  }

  .contact-map-section {
    padding-top: 0px !important;
    padding-bottom: 25px !important;
  }

  .info-card {
    /* Giảm tối đa padding của thẻ trên màn hình di động nhỏ */
    padding: 15px !important;
  }

  .contact-form-container {
    /* Giảm tối đa padding của form trên di động nhỏ để tăng khoảng trống nhập liệu */
    padding: 25px 15px !important;
  }

  .info-content h3 {
    /* Giảm cỡ chữ trên di động nhỏ */
    font-size: 17px !important;
  }

  .info-content p {
    /* Giảm cỡ chữ trên di động nhỏ */
    font-size: 14px !important;
  }

  .form-title {
    /* Giảm cỡ chữ form trên di động nhỏ */
    font-size: 20px !important;
  }

  .form-subtitle {
    /* Giảm cỡ chữ mô tả form trên di động nhỏ */
    font-size: 13.5px !important;
  }
}


@media (max-width: 321px) {
  .info-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .info-content h3 {
    font-size: 16px !important;
  }

  .info-content p {
    font-size: 13px !important;
  }

  .form-title {
    font-size: 18px !important;
  }
}