/* Bảng phong cách cho Footer chân trang - Sử dụng phối hợp lưới hiển thị và màu sắc nhận diện nổi bật */

footer {
  position: relative;
  background-color: #00aeef; /* Nền xanh da trời sáng đặc trưng theo thiết kế Figma */
  color: var(--text-light);
  padding: 80px 0 30px; /* Padding lớn để phân tách nội dung chân trang rộng rãi */
  overflow: hidden;
  isolation: isolate; /* Tạo Stacking Context độc lập để mix-blend-mode hoạt động chính xác bên trong footer */
}

/* Ảnh nền họa tiết hoa văn mờ nhạt nằm đè lên nền xanh để tăng tính mỹ thuật */
.footer-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/footer-background.webp');
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply; /* Hòa trộn nhân màu giúp họa tiết chìm sâu vào nền xanh */ 
  pointer-events: none; /* Tránh cản trở tương tác nhấp chuột của người dùng */
  z-index: 1;
}

.footer-inner {
  position: relative;
  z-index: 2; /* Đẩy nội dung chữ lên trên ảnh nền mờ */
}

.footer-brand {
  margin-bottom: 30px;
}

.footer-brand .logo-text-light {
  font-family: var(--font-logo);
  font-weight: 800;
  font-size: 48px;
  color: var(--text-light);
  display: block;
  margin-bottom: 5px;
}

.brand-name {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.5px;
  margin-bottom: 25px; /* Giãn cách 25px xuống địa chỉ để cân xứng với cột đăng ký email */
}

/* Lưới phân chia danh sách cơ sở thành hai cột để cân đối trang web */
.footer-branches-grid {
  /* Loại bỏ grid custom vì đã được thay thế bằng Bootstrap row/col */
  margin-bottom: 35px;
}

.branches-column h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #f7eaea;
  border-left: none; /* Bỏ border custom cũ để khớp với Figma */
  padding-left: 0;
  text-transform: none;
}

.branches-column p {
  font-size: 16px;
  line-height: 1.7;
  color: #f7eaea;
  margin-bottom: 0px;
}

.branches-column-right {
  margin-top: 0px;
}

@media (min-width: 576px) {
  .branches-column-right {
    margin-top: 31px; /* Thụt lề trên cho cột phải để thẳng hàng với CS1 */
  }
}

/* Danh sách Hotline và Email có chèn icon minh họa */
.footer-contact-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff; /* Biểu tượng đứng độc lập, không có vòng tròn mờ bao quanh */
}

.contact-item p {
  font-size: 16px;
  color: #f7eaea;
  margin-bottom: 0;
}

/* Khối đăng ký và kết nối mạng xã hội ở bên phải */
.footer-newsletter {
  /* Loại bỏ thuộc tính flex custom vì đã được thay thế bằng col-lg-5 của Bootstrap */
  display: flex;
  flex-direction: column;
}

.newsletter-title {
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 25px;
}

/* Ô nhập email và nút gửi tách rời có khoảng cách gap 8px */
.newsletter-input-group {
  display: flex;
  margin-bottom: 35px;
  width: 100%;
  max-width: 420px;
}

.newsletter-input {
  width: 260px;
  height: 44px;
  background-color: #f5f5f5;
  border-radius: 4px;
  border: none;
  padding: 10px 20px;
  color: var(--text-dark);
  font-size: 14px;
}

.newsletter-input::placeholder {
  color: rgba(10, 31, 68, 0.4);
  font-style: italic;
}

.btn-send-email {
  width: 100px;
  height: 44px;
  background-color: #0d307a; /* Màu nút gửi xanh đậm theo Figma */
  color: #ffffff;
  border-radius: 4px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  border: none;
  box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.1);
  transition: var(--transition-smooth);
}

.btn-send-email:hover {
  background-color: #0b2661;
}

/* Danh sách các nút liên kết mạng xã hội theo quy chuẩn Figma */
.footer-socials {
  display: flex;
  gap: 16px;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px; /* Bo góc vuông vắn nhẹ nhàng */
  color: var(--text-light);
  transition: var(--transition-smooth);
}

.social-btn:hover {
  transform: translateY(-3px); /* Nhấc nhẹ nút lên khi hover */
  filter: brightness(1.1); /* Sáng tông màu lên nhẹ */
}

/* Màu thương hiệu cụ thể cho từng nút mạng xã hội theo thiết kế */
.social-btn.facebook {
  background-color: #074d93;
}

.social-btn.youtube {
  background-color: #f42929;
}

.social-btn.linkedin {
  background-color: #416eaf;
}

.social-btn.twitter {
  background-color: #000000;
}

/* Phần bản quyền và vạch ngăn cách cuối trang */
.footer-bottom {
  position: relative;
  z-index: 2;
  margin-top: 60px;
  text-align: center;
}

.footer-bottom .divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.61); /* Đường viền mờ màu trắng ngăn cách theo Figma */
  margin-bottom: 25px;
}

.copyright-text {
  font-size: 16px;
  color: #ffffff; /* Màu chữ trắng theo Figma */
}

/* Thiết kế responsive cho các phần tử chữ trong Footer */
@media (max-width: 991px) {
  footer {
    /* Giảm padding chân trang trên tablet để cân xứng với tỷ lệ màn hình */
    padding: 40px 0 25px;
  }

  .footer-brand .logo-text-light {
    /* Giảm cỡ chữ logo trên tablet */
    font-size: 38px;
  }

  .brand-name {
    /* Giảm cỡ chữ tên thương hiệu trên tablet */
    font-size: 28px;
  }

  .newsletter-title {
    /* Giảm cỡ chữ tiêu đề đăng ký trên tablet */
    font-size: 28px;
  }

  .branches-column h4 {
    /* Giảm cỡ chữ tiêu đề chi nhánh trên tablet */
    font-size: 15px;
  }

  .branches-column p {
    /* Giảm cỡ chữ địa chỉ trên tablet */
    font-size: 15px;
  }

  .contact-item p {
    /* Giảm cỡ chữ thông tin liên hệ trên tablet */
    font-size: 15px;
  }

  .copyright-text {
    /* Giảm cỡ chữ bản quyền trên tablet */
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  footer {
    /* Giảm thêm padding chân trang trên di động nhỏ để tối ưu khoảng trống */
    padding: 25px 0 15px !important;
  }

  .footer-brand .logo-text-light {
    /* Giảm thêm cỡ chữ logo trên di động nhỏ */
    font-size: 28px !important;
  }

  .brand-name {
    /* Giảm thêm cỡ chữ tên thương hiệu trên di động nhỏ */
    font-size: 24px !important;
  }

  .newsletter-title {
    /* Giảm thêm cỡ chữ tiêu đề đăng ký trên di động nhỏ */
    font-size: 24px !important;
  }

  .branches-column h4 {
    /* Giảm thêm cỡ chữ tiêu đề chi nhánh trên di động nhỏ */
    font-size: 14px !important;
  }

  .branches-column p {
    /* Giảm thêm cỡ chữ địa chỉ trên di động nhỏ */
    font-size: 14px !important;
  }

  .contact-item p {
    /* Giảm thêm cỡ chữ thông tin liên hệ trên di động nhỏ */
    font-size: 14px !important;
  }

  .copyright-text {
    /* Giảm thêm cỡ chữ bản quyền trên di động nhỏ */
    font-size: 14px !important;
  }
}

/* Tối ưu hóa cho màn hình di động siêu nhỏ (s: 320px) để không bị tràn ô input và đưa tên thương hiệu về 1 dòng */
@media (max-width: 320px) {
  .brand-name {
    /* Giảm cỡ chữ để đảm bảo dòng tên thương hiệu hiển thị gọn trên một dòng */
    font-size: 20px !important;
  }

  .newsletter-input {
    /* Giảm chiều ngang của ô input và cho phép tự động co giãn theo container */
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
  }

  .btn-send-email {
    /* Giữ độ rộng vừa đủ cho nút gửi để hiển thị trọn vẹn icon và chữ GỬI */
    flex-shrink: 0 !important;
    width: 90px !important;
    font-size: 13px !important;
  }
}