html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: grid; /* Kích hoạt CSS Grid cho body */
  grid-template-rows: auto 1fr auto; /* RẤT QUAN TRỌNG: Định nghĩa các hàng trong Grid */
  min-height: 100vh; /* Đảm bảo body có chiều cao tối thiểu bằng chiều cao viewport */
  width: 100%;
}

a {
  color: inherit; /* Kế thừa màu từ thẻ cha (văn bản thường) */
  text-decoration: none; /* Bỏ gạch chân */
}
main {
  grid-row: 2; /* Đặt main vào hàng thứ hai */
  width: 100%;
}
header {
  grid-row: 1; /* Đặt header vào hàng đầu tiên */
  background-color: #007bff;
  color: white;
  padding: 15px;
  text-align: center;
  width: 100%;
}

.site-header {
  background: linear-gradient(to bottom, #ffffff, #f4f4f4);
  /* Fallback color cho các trình duyệt cũ không hỗ trợ gradient */
  background-color: #ffffff;
  z-index: 3;
  position: static;
  height: 160px;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 10px;
}

.right-header {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.main-logo {
  float: left;
  width: auto;
  height: 70px;
}
.furuno-logo {
  width: auto;
  margin-bottom: 10px;
  margin-left: 12px;
  margin-right: 12px;
  height: 15px;
}
.phanphoi-title {
  color: #333333;
  font-size: 13pt;
  margin-bottom: 6px;
  width: auto;
  font-style: italic;
}
.seach-bar {
  position: static;
  width: auto;
  height: auto;
  float: left;
}
.site-header__menu {
  padding-top: 15px;
  margin-bottom: 10px;
}
.main-navigation {
  width: 100%;
  padding: 0; /* Xóa padding mặc định của thẻ ul */
  margin: 0; /* Xóa margin mặc định của thẻ ul */
}
.main-navigation ul {
  display: flex; /* Kích hoạt Flexbox cho thẻ <ul> */
  justify-content: space-between;
  list-style: none; /* Xóa dấu chấm mặc định của <li> */
  padding: 0; /* Xóa padding mặc định của thẻ ul */
  margin: 0; /* Xóa margin mặc định của thẻ ul */
  width: 100%; /* Đảm bảo ul chiếm hết chiều ngang của .main-menu */
}
.main-navigation li {
  text-align: center; /* Căn giữa nội dung văn bản trong mỗi <li> */
}
.main-navigation li a {
  color: black;
  display: block; /* Làm cho toàn bộ khu vực <li> có thể nhấp được */
  padding: 5px 0px; /* Padding cho nội dung bên trong */
  text-decoration: none; /* Xóa gạch chân link */
  white-space: nowrap; /* Ngăn không cho chữ xuống dòng nếu nội dung quá dài */
}

.current-menu-item {
  /* Đảm bảo thẻ a là inline-block để có thể đặt chiều rộng và sử dụng pseudo-element */
  display: inline-block;
  position: relative; /* Quan trọng: Dùng để định vị ::after */
  text-decoration: none; /* Xóa gạch chân mặc định của link nếu có */
  color: #333; /* Màu chữ mặc định */
  padding-bottom: 9px; /* Khoảng cách tổng cộng: 30px trống + 5px của đường kẻ */
  font-weight: 600;
  /* Hoặc chỉ padding-bottom 5px nếu muốn đường kẻ sát chữ hơn
       và dùng margin-top trên ::after */
}

.current-menu-item::after {
  content: ""; /* Bắt buộc phải có content cho pseudo-element */
  display: block; /* Để đường kẻ có chiều rộng và chiều cao */
  position: absolute; /* Định vị tuyệt đối để có thể căn giữa và đặt khoảng cách */
  bottom: 0; /* Đặt đường kẻ ở phía dưới cùng của thẻ a */
  left: 50%; /* Dịch sang trái 50% của thẻ a */
  transform: translateX(-50%); /* Dịch ngược lại 50% của chính nó để căn giữa */

  width: 110%; /* Độ dài đường kẻ bằng 120% của thẻ a (cũng là 120% của nội dung chữ Tin tức) */
  height: 3px; /* Độ dày của đường kẻ */
  background-color: #0aaf50; /* Màu xanh lá cây */
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
}
.site-header {
  background-color: #ffffff;
}
.site-footer {
  grid-row: 3; /* Đặt footer vào hàng thứ ba */
  bottom: 0;
  padding-top: 15px;
  width: 100%;
}
.search-field {
  border: none;
  outline: none;
  box-shadow: none;
}
.search-min-form {
  border: 1.5px solid;
  border-color: rgb(199, 198, 198);
  line-height: 0%;
  margin-bottom: 5px;
  height: 30px;
}
.submit-btn {
  border: none;
  outline: none;
  box-shadow: none;
  height: 100%;
  padding: 0px 12px;
  background-color: #005498;
  color: #ffffff;
}
.search-field {
  padding-left: 10px;
}
.language-btn {
  border: none;
  outline: none;
  box-shadow: none;
  background-image: url("../images/lagIcon-Eng.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 31px;
  width: 38px;
  margin-left: 15px;
}

/* CSS cho nút chuyển đổi ngôn ngữ mới */
.language-switcher-link {
  display: inline-block;
  margin-left: 15px;
  transition: opacity 0.2s ease;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 31px;
  width: 38px;
  margin-left: 15px;
  border: none;
  outline: none;
  box-shadow: none;
}

.language-switcher-link:hover {
  opacity: 0.75; /* Hiệu ứng mờ nhẹ khi di chuột */
}

.language-switcher-link img {
  height: 31px; /* Giữ nguyên kích thước của bạn */
  width: 38px;
  display: block; /* Loại bỏ khoảng trắng thừa bên dưới ảnh */
}

.footer {
  background-color: #005498;
  color: #ffffff;
  padding: 20px 20px;
}
.sort-intro-banner {
  background: #005498;
  padding-top: 20px;
  padding-bottom: 30px;
}
.sort-intro {
  padding-bottom: 15px;
}
.sort-intro p {
  color: #ffffff;
  text-align: center;
  margin: 0px 0px;
}
.page-banner-index {
  position: relative; /* Có thể cần nếu có nội dung tuyệt đối bên trong */
  overflow: hidden; /* Tránh tràn ra ngoài nếu có hiệu ứng */
}
.page-banner-index__bg-image {
  width: 100%;
  min-height: 285px; /* Chiều cao tối thiểu, điều chỉnh theo thiết kế */
  display: flex; /* RẤT QUAN TRỌNG: Kích hoạt Flexbox cho thẻ cha */
  align-items: center; /* Căn giữa các item con theo chiều dọc */
  justify-content: center; /* Tùy chọn: Căn giữa toàn bộ nhóm theo chiều ngang */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.banner-mini {
  position: relative; /* Rất quan trọng: Thiết lập ngữ cảnh định vị cho các phần tử con tuyệt đối */
  display: inline-block; /* Để container chỉ rộng bằng hình ảnh */
  overflow: hidden; /* Đảm bảo không có gì tràn ra ngoài nếu hình ảnh được điều chỉnh */
}
.banner-mini img {
  display: block; /* Loại bỏ khoảng trống dưới hình ảnh */
}
.sort-banner-text {
  position: absolute; /* Đặt thẻ span ở vị trí tuyệt đối so với .image-container */
  top: 50%; /* Dịch chuyển từ trên xuống 50% */
  left: 50%; /* Dịch chuyển từ trái sang 50% */
  transform: translate(
    -50%,
    -50%
  ); /* Dịch chuyển lại 50% kích thước của chính span để căn giữa chính xác */

  color: white; /* Màu chữ để dễ đọc trên hình ảnh */
  padding: 10px; /* Padding cho chữ */
  text-align: center; /* Căn giữa văn bản nếu có nhiều dòng */
  white-space: nowrap; /* Ngăn không cho chữ xuống dòng (tùy chọn) */
  pointer-events: none; /* (Tùy chọn) Cho phép click xuyên qua text nếu text không phải là link/button */
  font-size: medium;
  text-transform: uppercase;
  text-shadow: 2px 2px #222222;
  font-weight: 600;
}
.featured-news {
  display: flex; /* Kích hoạt Flexbox cho thẻ cha */
  justify-content: center; /* Căn giữa các thẻ con theo chiều ngang (trục chính) */
  align-items: center; /* Căn giữa các thẻ con theo chiều dọc (trục chéo) - tùy chọn, nếu bạn muốn căn giữa dọc theo chiều cao của div cha */
  flex-wrap: nowrap; /* RẤT QUAN TRỌNG: Ngăn các thẻ con xuống hàng */
}
.featured-news-child {
  white-space: nowrap;
  padding: 10px 4px;
}
.new-product-container {
  padding-top: 15px;
}
.special-product-container {
  padding-top: 30px;
}
.new-product-more {
  padding-top: 20px;
}

.manufacturer {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex; /* Kích hoạt Flexbox cho thẻ cha */
  justify-content: center; /* Căn giữa thẻ con theo chiều ngang (trục chính) */
  align-items: center; /* Căn giữa thẻ con theo chiều dọc (trục chéo) */
  width: 100%; /* Chiều rộng của khung */
  height: 190px; /* Chiều cao của khung */

  background-color: #fff;
  border-style: solid;
  border-color: #dcdede;
  border-width: 2px;
  border-radius: 10px;
  box-shadow: 1px 1px 1px gray;
}
.manufacturer-line-logo {
  width: 100%; /* Chiều rộng của khung */
  height: 100%; /* Chiều cao của khung */
  display: flex; /* Kích hoạt Flexbox cho thẻ cha */
  justify-content: center; /* Căn giữa thẻ con theo chiều ngang (trục chính) */
  align-items: center; /* Căn giữa thẻ con theo chiều dọc (trục chéo) */
}

.manu-title-line {
  align-self: flex-start;
  border-color: #dddddd;
  border-style: solid;
  background-image: linear-gradient(to bottom, #fff, #dadada);
  margin-top: 20px;
  height: 50px;
  width: 97%;
}
.manu-title-bg {
  height: 45px;
  width: 270px;
  background-image: url("../images/title-line.png");
  background-size: contain;
  background-repeat: no-repeat; /* Do not repeat the image */
  color: #ffffff;
  padding-top: 10px;
  padding-left: 10px;
}

.news-new {
  margin-top: 20px;
}

.news-new-title a {
  color: black;
  font-size: 22px;
}

.news-new-title a i {
  color: #005498;
}

.news-thumbnail {
  height: 100px;
  width: 150px;
}

.news-thumbnail img {
  height: 100px;
  width: auto;
}

.list-news {
  display: flex; /* Kích hoạt Flexbox cho thẻ cha */
  flex-wrap: wrap; /* Cho phép các thẻ con xuống hàng khi không đủ chỗ */
  justify-content: space-around; /* HOẶC space-between, center */
  align-items: flex-start; /* Căn chỉnh các hàng theo chiều dọc (để chúng bắt đầu từ trên cùng của container) */
  gap: 20px; /* RẤT QUAN TRỌNG: Tạo khoảng cách đều giữa các mục (cả ngang và dọc) */
}

.news-chils {
  flex-basis: 280px; /*nếu bạn muốn chiều rộng cố định */
  flex-grow: 1; /* Cho phép các mục giãn nở để lấp đầy không gian nếu cần */
  flex-shrink: 1; /* Cho phép các mục co lại nếu không gian hạn chế */
  background-color: #fff;
  border: 1px solid #eee;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: flex; /* Dùng flexbox bên trong item để căn chỉnh nội dung */
  flex-direction: column; /* Sắp xếp nội dung theo cột */
  justify-content: flex-start; /* Đẩy tiêu đề lên trên, nút xuống dưới */
  align-items: center; /* Căn giữa nội dung bên trong item */
  height: 260px;
}

.news-chils p {
  text-align: justify;
}

.news-group {
  margin-top: 15px;
  margin-bottom: 15px;
}
.sub-footer-bg {
  width: 100%;
  background-color: #e0ecff;
}

.sub-footer {
  display: flex; /* RẤT QUAN TRỌNG: Kích hoạt Flexbox cho thẻ cha */
  justify-content: space-between; /* HOẶC space-around, space-evenly, center */
  /* Đây là thuộc tính để phân phối khoảng trống ngang */
  align-items: flex-start; /* Tùy chọn: Căn chỉnh các mục theo chiều dọc (để chúng bắt đầu từ trên cùng) */
  flex-wrap: nowrap; /* RẤT QUAN TRỌNG: Ngăn các thẻ con xuống hàng */
  padding-top: 10px;
  padding-bottom: 10px;
}

.sub-footer1 {
  width: 300px; /* Chiều rộng ví dụ */
  padding: 15px;
}

.sub-footer1 span {
  display: block; /* Rất quan trọng: Biến span từ inline thành block-level */
  margin-bottom: 5px; /* Tùy chọn: Thêm khoảng cách giữa các dòng */
}

.line {
  background-color: #005498;
}
.chantrang {
  width: 100%;
}
.vertical-line {
  border-left: 1px solid #ffffff;
  height: 95%;
}

/* CSS để sắp xếp các đối tượng theo chiều ngang */
.search-form-container {
  display: flex; /* Sử dụng Flexbox để sắp xếp */
  flex-wrap: nowrap;
  justify-content: center; /* Đây là thuộc tính quan trọng để căn các đối tượng về bên phải */
  gap: 15px; /* Khoảng cách giữa các đối tượng */
  align-items: center; /* Căn chỉnh các đối tượng theo chiều dọc */
  padding-top: 10px;
  padding-bottom: 20px;
  margin: 20px auto; /* Căn giữa form */
  width: 100%;
}

.search-form-container select,
.search-form-container input[type="text"] {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  flex-shrink: 0; /* Ngăn các phần tử co lại */
  height: 45px;
  width: 24%;
}

.search-form-container select {
  background-image: linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  -webkit-appearance: none; /* Dành cho trình duyệt Webkit (Chrome, Safari) */
  -moz-appearance: none; /* Dành cho trình duyệt Mozilla (Firefox) */
  appearance: none; /* Tiêu chuẩn */
}

.search-form-container select:focus {
  background-image: linear-gradient(45deg, green 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, green 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
  border-color: green;
  outline: 0;
}

.search-form-container button {
  height: 45px;
  width: 19%;
  margin-left: 20px;

  /* Các thuộc tính mới cho background ảnh */
  background-image: url("../images/button-bg.png"); /* Thay thế bằng đường dẫn ảnh của bạn */
  background-size: cover; /* Phóng ảnh để phủ kín toàn bộ button, giữ tỷ lệ */
  background-position: center; /* Căn giữa ảnh trong button */
  background-repeat: no-repeat; /* Không lặp lại ảnh */

  /* Các thuộc tính cũ của button */
  color: white; /* Màu chữ trên button */
  cursor: pointer;
  border: none;
  padding: 8px 12px; /* Đặt lại padding vì nó bị bỏ khỏi nhóm trên */
  font-size: 1rem; /* Đặt lại font-size */
  flex-shrink: 0;
  min-width: 100px; /* Đảm bảo button có đủ chiều rộng cho ảnh */
  min-height: 40px; /* Đảm bảo button có đủ chiều cao cho ảnh */
  /* Để chữ hiển thị rõ trên ảnh, bạn có thể cần điều chỉnh màu chữ hoặc thêm text-shadow */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- CSS cho hiệu ứng cuộn logo --- */

/* Khung chứa trực tiếp của dải logo */
.list-manufacturer-logo {
  overflow: hidden; /* BẮT BUỘC: Ẩn mọi thứ tràn ra ngoài khung này */
  width: 100%;
  padding: 10px 0; /* Thêm khoảng đệm trên dưới cho đẹp hơn */
}

.logo-list {
  display: flex; /* Kích hoạt Flexbox cho thẻ cha */
  justify-content: center; /* Căn giữa thẻ con theo chiều ngang (trục chính) */
  align-items: center; /* Căn giữa thẻ con theo chiều dọc (trục chéo) */
}

/* --- CSS rút gọn cho dải logo --- */

/* 1. Khung chứa, ẩn đi phần bị tràn */
.logo-scroller {
  overflow: hidden;
  width: 100%;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

/* 2. Danh sách logo, dùng flexbox để xếp hàng ngang */
.logo-scroller .logo-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  width: max-content; /* Đảm bảo ul đủ rộng */
}

/* 3. Định dạng cho từng logo */
.logo-scroller .logo-list li {
  margin: 0 25px;
  flex-shrink: 0;
}

.logo-scroller .logo-list li img {
  height: 100%;
  width: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
  opacity: 0.8;
}

.logo-scroller .logo-list li:hover img {
  opacity: 1;
}