/* Trang tin tức và sự kiện */

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

.news-list-title {
  text-transform: uppercase;
}
.news-list-title ul {
  background-color: #e0ecff;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 10px;

  list-style: none; /* RẤT QUAN TRỌNG: Xóa dấu chấm mặc định */
  padding-left: 0; /* RẤT QUAN TRỌNG: Xóa padding mặc định của ul để item có thể căn lề */
  margin: 0; /* Tùy chọn: Xóa margin mặc định của ul */
}

.news-list-title ul li {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;

  font-size: 18px;
  background-color: #ffffff;
  border: 1px solid #70a0cb;
  font-weight: 500;
  color: #005498;
  /* Để dấu chấm tùy chỉnh nằm trong border */
  position: relative; /* RẤT QUAN TRỌNG: Thiết lập ngữ cảnh định vị cho ::before */
  padding-left: 25px; /* RẤT QUAN TRỌNG: Tạo không gian cho dấu chấm bên trong border */
  /* Điều chỉnh giá trị này để có khoảng cách phù hợp giữa dấu chấm và nội dung */
}

.news-list-title ul li a {
  color: inherit; /* Thẻ a sẽ kế thừa màu chữ từ thẻ li cha của nó */
  /* Nếu li có màu #005498, a cũng sẽ có màu đó. */
  text-decoration: none; /* RẤT QUAN TRỌNG: Loại bỏ gạch chân mặc định */
  cursor: pointer; /* Đảm bảo con trỏ chuột vẫn hiển thị hình bàn tay khi di qua (mặc định của a) */
  /* Thuộc tính này thường không cần thiết vì đây là hành vi mặc định, nhưng nó giúp làm rõ ý định. */
}

/* Ẩn ::marker mặc định vì chúng ta sẽ tạo dấu chấm tùy chỉnh */
.news-list-title ul li::marker {
  content: none; /* Đảm bảo marker mặc định không hiển thị */
}

/* Tạo dấu chấm tùy chỉnh bằng ::before */
.news-list-title ul li::before {
  content: "•"; /* Nội dung của dấu chấm. Có thể dùng "•", "➤", hoặc ký tự Unicode khác */
  color: green; /* Màu của dấu chấm tùy chỉnh */
  position: absolute; /* Định vị tuyệt đối so với li */
  left: 10px; /* Vị trí của dấu chấm từ lề trái của border */
  top: 50%; /* Đặt dấu chấm ở giữa theo chiều dọc */
  transform: translateY(-50%); /* Căn giữa chính xác theo chiều dọc */
  font-size: 1.2em; /* Kích thước của dấu chấm, tương đối với font-size của li */
  line-height: 1; /* Đảm bảo chiều cao dòng không ảnh hưởng đến vị trí */
}

.news-list-title ul li:hover {
  color: #ffffff; /* Màu của dấu chấm tùy chỉnh */
  background-color: #005498;
}

/* Trang liên hệ */

.contact-container {
  margin-top: 20px;
}

.contact-company-name {
  font-weight: bold;
  color: #005498;
  font-size: 18px;
}

.contact-company-detail {
  color: #005498;
}

.contact-company-detail p {
  margin: 2px 0px;
  padding-left: 12px;
}

.contact-company-map {
  padding-top: 15px;
  text-align: center;
}

.map-btn {
  width: 265px;

  /* 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: 18px; /* Đặt lại font-size */
  flex-shrink: 0;
  min-width: 100px; /* Đảm bảo button có đủ chiều rộng cho ảnh */
  min-height: 50px; /* Đả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);
  text-transform: uppercase;
}

.contact-services {
  margin-top: 30px;
  height: 300px;
}

.contact-services-1 {
  text-align: center;
  background-color: #f5f5f5;
  padding-top: 20px;
  height: 100%;
}

.contact-services-1 p {
  color: #005498;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.contact-services-2 {
  text-align: center;
  background-color: #f5f5f5;
  padding-top: 20px;
  height: 100%;
}

.contact-services-2 p {
  color: #005498;
  font-weight: 600;
}

.contact-services-2 {
  height: 300px;
}

.contact-services-3 {
  text-align: center;
  background-color: #f5f5f5;
  padding-top: 20px;
  height: 100%;
}

.contact-services-3 p {
  color: #005498;
  font-weight: 600;
}

.contact-services-3 button {
  margin-top: 10px;
}

/* Trang nhóm tin tức */

.news-list-detail {
  min-height: 0; /* Đảm bảo min-height không giới hạn nó nếu có */
  overflow: hidden; /* Quan trọng để chứa các float con nếu có, hoặc để tự căn chỉnh */
}

.news-sub-list-detail {
  min-height: 0; /* Đảm bảo min-height không giới hạn nó nếu có */
  overflow: hidden; /* Quan trọng để chứa các float con nếu có, hoặc để tự căn chỉnh */
  padding-bottom: 10px;
}

.group-news-title {
  font-weight: 650;
  padding-top: 3px;
  padding-left: 10px;
  width: 100%;
  height: 30px;
  color: #ffffff;
  background-color: #0aaf50;
}

.news-child-title-pic {
  display: block;
  margin-bottom: 15px;
  width: 100%; /* Luôn full chiều ngang của div cha */
}

.news-child-title-pic img {
  width: 100%; /* Luôn full chiều ngang của div cha */
  height: 150px; /* Chiều cao cố định là 100px */
  object-fit: cover; /* Quan trọng: Tự động cắt ảnh để lấp đầy kích thước định sẵn */
  display: block; /* Vẫn giữ display: block để loại bỏ khoảng trống dưới ảnh */
}

.news-child-excerpt {
  text-align: justify;
  margin-top: 10px;
  padding-right: 20px;
}

.news-child-title {
  font-weight: 600;
}

.group-news-detail {
  padding-top: 10px;
  padding-left: 10px;
  background-color: #f2f2f2;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.news-child-title-sub {
  font-weight: 500;
  margin-bottom: 0px;
}

.news-child-title-sub li::marker {
  color: #0aaf50;
}

.archive-container {
  padding-top: 20px;
}

.news-img {
  width: auto; /* Hoặc một chiều rộng cố định, ví dụ: 300px */
  height: 200px; /* BẮT BUỘC: phải có chiều cao cụ thể */
  overflow: hidden; /* Ẩn đi phần ảnh bị crop thừa ra ngoài */
  margin-left: 5px;
  margin-right: 5px;

  background-color: #fff;
}
.news-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Đây là thuộc tính quan trọng nhất */
}

.news-table {
  padding-top: 5px;
  background-color: #f2f2f2;
  width: 260px;
  height: 325px;
}

.news-new {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex; /* Kích hoạt Flexbox cho container cha */
  justify-content: space-between; /* RẤT QUAN TRỌNG: Đẩy các phần tử con ra hai bên */
  align-items: center; /* RẤT QUAN TRỌNG: Căn giữa các phần tử con theo chiều dọc */

  /* Đảm bảo chiều cao của container đủ lớn để căn giữa */
  height: 400px; /* Ví dụ: Chiều cao của khu vực sản phẩm/chi tiết */
  width: 100%; /* Chiều rộng của cột */
  background-color: #ffffff; /* Màu nền để dễ nhìn */
}

.right-news-box-btn,
.left-news-box-btn {
  /* Đảm bảo button có kích thước cố định để icon dễ căn giữa */
  width: 50px; /* Ví dụ chiều rộng của nút */
  height: 100px; /* Ví dụ chiều cao của nút */
  padding: 0; /* Rất quan trọng: Xóa padding mặc định của button */

  /* Kích hoạt Flexbox cho button để căn giữa icon */
  display: flex;
  justify-content: center; /* Căn giữa icon theo chiều ngang */
  align-items: center; /* Căn giữa icon theo chiều dọc */

  /* Các kiểu dáng khác cho button */
  background-color: #999999;
  color: white;
  border: none;
  cursor: pointer;
}

.right-news-box-btn:focus,
.left-news-box-btn:focus {
  border: none; /* Đảm bảo không có viền mặc định nào */
  outline: none; /* **Quan trọng: Loại bỏ khung focus mặc định** */
}

.right-news-box-btn:disabled,
.left-news-box-btn:disabled {
  color: #ccc; /* Màu xám nhạt khi nút bị vô hiệu hóa */
  cursor: not-allowed; /* Biểu tượng con trỏ "không cho phép" */
  opacity: 0.7; /* Làm mờ một chút */
  /* Bạn có thể thêm các hiệu ứng khác như: */
  /* background-color: #f5f5f5; */
  /* border: 1px solid #ddd; */
}

.news-list-box {
  display: flex; /* RẤT QUAN TRỌNG: Biến ul thành Flex container */
  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 ul */
  margin: 0; /* Xóa margin mặc định của ul */
  width: 100%; /* Đảm bảo ul chiếm toàn bộ chiều rộng của thẻ cha (main-menu) */
  justify-content: flex-start; /* THÊM DÒNG NÀY: Căn các item về bên trái */
}

.news-list-box li {
  margin: 0px 10px;
  flex-grow: 0; /* THAY ĐỔI DÒNG NÀY: Ngăn item tự giãn ra */
  flex-shrink: 0; /* Thêm để ngăn item bị co lại nếu không cần thiết */
  text-align: center; /* Căn giữa nội dung văn bản trong mỗi <li> */
}

.news_info-box {
  margin-top: 20px;
  display: flex; /* Kích hoạt Flexbox cho container cha */
  justify-content: space-between; /* RẤT QUAN TRỌNG: Đẩy các phần tử con ra hai bên */
  align-items: center; /* RẤT QUAN TRỌNG: Căn giữa các phần tử con theo chiều dọc */

  /* Đảm bảo chiều cao của container đủ lớn để căn giữa */
  height: 330px; /* Ví dụ: Chiều cao của khu vực sản phẩm/chi tiết */
  width: 100%; /* Chiều rộng của cột */
  background-color: #ffffff; /* Màu nền để dễ nhìn */
}

.news_info-box .news-list-box {
  display: flex; /* RẤT QUAN TRỌNG: Biến ul thành Flex container */
  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 ul */
  margin: 0; /* Xóa margin mặc định của ul */
  width: 100%; /* Đảm bảo ul chiếm toàn bộ chiều rộng của thẻ cha (main-menu) */
  transition: transform 0.5s ease-in-out; /* Hiệu ứng cuộn mượt mà */
}

.new-news-list {
  width: calc(
    4 * (260px + 20px)
  ); /* **Quan trọng:** Chiều rộng chính xác cho 3 ảnh + khoảng cách */
  overflow: hidden; /* **Quan trọng:** Ẩn các phần tử con tràn ra ngoài khung nhìn */
  position: relative; /* Có thể cần nếu có các hiệu ứng phức tạp hơn */
}

.news-table:hover {
  border: 1px solid #0aaf50;
}

.news-a-link {
  /* Đảm bảo link không có gạch chân */
  text-decoration: none !important;

  /* Đặt màu chữ về màu mặc định (thường là màu văn bản kế thừa) */
  color: inherit !important;

  /* Loại bỏ bất kỳ kiểu chữ in đậm hay nghiêng nào */
  font-weight: normal !important;
  font-style: normal !important;

  /* Đặt kích thước chữ về kích thước kế thừa */
  font-size: inherit !important;

  /* Loại bỏ background */
  background-color: transparent !important;

  /* Loại bỏ padding và margin */
  padding: 0 !important;
  margin: 0 !important;

  /* Loại bỏ border */
  border: none !important;

  /* Đảm bảo con trỏ chuột là mặc định */
  cursor: default !important; /* hoặc 'auto' nếu bạn muốn nó là con trỏ mặc định của text */

  /* Loại bỏ các hiệu ứng khi hover, focus, active */
  &:hover,
  &:focus,
  &:active,
  &:visited {
    text-decoration: none !important;
    color: inherit !important;
    background-color: transparent !important;
    /* Thêm các thuộc tính khác nếu cần reset cho các trạng thái này */
  }
}

.news-item-content {
  margin: 10px 10px;
  text-align: justify;
}