/* Nội dung công ty trên trang chủ (#home-partners, #home-logistics); không đụng body toàn site */

/* Page Container */
.company-page-container {
  width: 100%;
  overflow-x: hidden;
}

/* Banner Section */
.company-banner {
  width: 100%;
  position: relative;
  height: 400px;
  background-color: #f0f0f0;
}

.company-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* General Section Styling */
.section-container {
  padding: 60px var(--site-content-pad-x);
  text-align: center;
  max-width: var(--site-content-max);
  margin: 0 auto;
}

.section-container h2 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 20px;
  font-weight: 600;
}

.section-container p {
  font-size: 1.1rem;
  color: #7f8c8d;
  max-width: 800px;
  margin: 0 auto 40px auto;
  line-height: 1.6;
}

/* Partners Section */
.partners-section {
  background-color: #ffffff;
}

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* === PHẦN ĐÃ SỬA ĐỔI BẮT ĐẦU TẠI ĐÂY === */

/* Logo hiển thị màu gốc, không bị mờ */
.partner-logos img {
  max-height: 100px;
  max-width: 170px;
  /* Đã xóa: filter: grayscale(100%); */
  /* Đã xóa: opacity: 0.7; */
  transition: transform 0.3s ease; /* Thay đổi transition để áp dụng cho hiệu ứng zoom */
}

/* Khi hover, logo sẽ phóng to nhẹ */
.partner-logos img:hover {
  /* Đã xóa: filter: grayscale(0%); */
  /* Đã xóa: opacity: 1; */
  transform: scale(1.1); /* Thêm hiệu ứng phóng to (zoom) */
}

/* === KẾT THÚC PHẦN SỬA ĐỔI === */

/* === PHẦN CSS CHO VIDEO ĐÃ ĐƯỢC TỐI ƯU === */

/* Ghi đè riêng cho khu vực video để nó rộng hơn */
.logistics-section {
  max-width: none;
  width: 100%;
}

/* Thiết lập khung chứa video */
.video-container {
  position: relative;

  /* --- CÁC THAY ĐỔI QUAN TRỌNG --- */
  width: 90%; /* Chiếm 90% chiều rộng của .logistics-section */
  max-width: var(--site-content-max);

  /* GIẢI PHÁP CHÍNH: Giới hạn chiều cao tối đa bằng 85% chiều cao màn hình */
  max-height: 85vh;

  /* Kỹ thuật CSS hiện đại để tự động giữ tỷ lệ 16:9 */
  aspect-ratio: 16 / 9;

  /* --- Xóa các thuộc tính cũ không cần thiết nữa --- */
  /* height: 0; */
  /* padding-bottom: 56.25%; */

  /* Các thuộc tính khác giữ nguyên */
  margin: 40px auto;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Các phần CSS còn lại cho video, thumbnail, icon, iframe giữ nguyên như cũ */

.video-container .video-thumbnail,
.video-container .video-play-button,
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-container .video-thumbnail {
  object-fit: cover;
  transition: transform 0.3s ease;
  pointer-events: none;
}

.video-container .video-play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  pointer-events: none;
}

.video-container:hover .video-thumbnail {
  transform: scale(1.05);
}

.video-container:hover .video-play-button {
  color: #ff0000;
  transform: scale(1.1);
}

/* Container chính của nút */
.download-brochure-btn {
  display: inline-flex; /* Sử dụng flexbox để quản lý các phần tử con */
  /* 
    ĐÃ XÓA: align-items: center; 
    Đây là thay đổi quan trọng nhất. Khi xóa đi, flexbox sẽ sử dụng giá trị mặc định là 'stretch',
    sẽ tự động kéo dài các phần tử con để chúng có chiều cao bằng nhau.
  */
  vertical-align: middle;
  background-color: transparent;
  padding: 0;
  gap: 0;
  color: white;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 
  SỬA LỖI: Biến mỗi phần thành một flex container nhỏ để căn giữa nội dung của chính nó.
  Điều này đảm bảo icon và chữ luôn nằm giữa theo chiều dọc trong không gian đã được 'stretch'.
*/

/* Phần chứa icon (màu xanh đậm) */
.btn-icon-wrapper {
  background-color: #2c3e50;
  padding: 16px 20px;
  font-size: 1.6rem;

  /* Thêm vào để căn giữa icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phần chứa chữ (màu vàng) */
.btn-text-wrapper {
  background-color: #d19d3a;
  padding: 16px 25px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.5px;

  /* Thêm vào để căn giữa chữ */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hiệu ứng khi hover */
.download-brochure-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* === KẾT THÚC PHẦN THAY THẾ === */

.home-partners-section,
.home-logistics-section {
  box-sizing: border-box;
}