.product_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: 350px; /* 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 */
}

.products-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 */
}

.products-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 */
}

.products-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 */
  display: flex; /* Kích hoạt Flexbox cho container cha */
  justify-content: center; /* 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 */
}

.product_info-box .products-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à */
}

.right-product-box-btn,
.left-product-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-product-box-btn:focus,
.left-product-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-product-box-btn:disabled,
.left-product-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; */
}

.product-table {
  padding: 5px 5px;
  width: 260px;
  height: 325px;

  border-style: solid;
  border-width: 1px;
  border-color: #c8c8c8;
  border-radius: 5px;
  position: relative; /* 1. Tạo một positioning context */
  overflow: hidden; /* 2. Ẩn các phần tử con bị tràn ra ngoài */
}
.product-table:hover {
  border: 1px solid #007bff;
}
.product-img {
  margin-left: 5px;
  margin-right: 5px;
  background-color: #fff;
  width: 96%;
  height: 52%;
  /* Biến thẻ a thành flex container */
  display: flex;
  justify-content: center; /* Căn giữa ngang */
  align-items: center; /* Căn giữa dọc */
}
.product-img img {
  max-height: 100%;
  width: auto;
  height: auto;
}
.product-table-name {
  padding-top: 10px;
  text-align: left;
  font-weight: bold;
  font-size: 20px;
  padding-left: 5px;
  color: #005498;
}

.product-table-dest {
  height: 56px;
  padding: 5px 5px;
  text-align: left;
  font-size: 16px;
}
.product-table-price {
  margin-top: 8px;
  font-size: 16px;
  padding-left: 5px;
  display: flex; /* 1. Kích hoạt Flexbox */
  justify-content: space-between; /* 2. Đẩy các phần tử con về hai phía */
  align-items: center; /* 3. (Tùy chọn) Căn giữa các phần tử theo chiều dọc */
}

.product-table-brochure {
  margin-top: 5px;
  font-size: 16px;
  float: right;
  padding-right: 10px;
}
.product-table-btn {
  border-color: #dddddd;
  border-style: solid;
  background-image: linear-gradient(to bottom, #fff, #dadada);
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 96%;
}
.product-table-tag {
  font-size: 16px;
  float: left;
  padding-left: 7px;
}
.product-table-click {
  position: absolute;
  bottom: 5px; /* Đặt ở dưới đáy */
  right: 4px; /* Đặt ở cạnh phải */

  width: 42%; /* Giữ nguyên chiều rộng 50% của bạn */
  height: 36px;
  background-color: #0aaf50;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.product-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 */
  }
}

/* */

.manufacturer-first {
  padding-top: 20px;
}

.lv3-list-product {
  display: grid; /* Biến container thành grid container */
  grid-template-columns: repeat(4, 1fr); /* Tạo 4 cột có chiều rộng bằng nhau */
  gap: 20px; /* Khoảng cách giữa các hàng và các cột. Điều chỉnh giá trị này theo ý muốn. */
  /* Nếu bạn muốn căn giữa toàn bộ lưới sản phẩm trong container cha của nó, bạn có thể thêm: */
  /* justify-content: center; */
  padding-left: 25px;
}

/* Tùy chỉnh responsive để hiển thị ít cột hơn trên các màn hình nhỏ */
@media (max-width: 1200px) {
  .lv3-list-product {
    grid-template-columns: repeat(3, 1fr); /* 3 cột trên màn hình trung bình */
  }
}

@media (max-width: 768px) {
  .lv3-list-product {
    grid-template-columns: repeat(2, 1fr); /* 2 cột trên tablet */
  }
}

@media (max-width: 576px) {
  .lv3-list-product {
    grid-template-columns: 1fr; /* 1 cột trên điện thoại */
  }
}

.discontinued_products {
  margin-top: 15px;
}

.discontinued_products a {
  display: flex; /* Biến thẻ a thành một flex container */
  justify-content: flex-start; /* Đẩy hai div con ra hai phía đối diện */
  align-items: center; /* Căn giữa các div con theo chiều dọc */
  width: 100%; /* Đảm bảo thẻ a chiếm toàn bộ chiều rộng có thể */
  text-decoration: none; /* Loại bỏ gạch chân mặc định của link */
  color: inherit; /* Kế thừa màu chữ từ phần tử cha */
  /* Thêm các thuộc tính styling khác cho thẻ a nếu cần */
  padding: 10px 0; /* Ví dụ: thêm padding */
}

.discontinued_products_title {
  background-color: #005498;
  color: #fff;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 16px;
}

.discontinued_products_click {
  background-color: #0aaf50;
  color: #fff;
  padding: 10px 20px;
}

/* Trang sản phẩm */

.product-line {
  background-color: #c8c8c8;
  width: 100%;
  height: 0.5px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.manufacturer-line {
  background-color: #005498;
  width: 100%;
  height: 3px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.manufacturer-main-title {
  margin-top: 30px;
}

.manufacturer-logo {
  /* Kích thước khung cố định */
  width: 320px;
  height: 100px;
  /* (Tùy chọn) Dùng Flexbox để căn hình ra giữa khung nếu hình không lấp đầy */
  display: flex;
  justify-content: left;
  align-items: center;
  overflow: hidden; /* Đảm bảo không có gì tràn ra ngoài */
}

.manufacturer-logo img {
  /* Thiết lập quan trọng nhất */
  object-fit: contain;

  /* Bắt buộc hình ảnh phải cố gắng lấp đầy khung chứa nó */
  width: auto;
  height: auto;
  max-width: 320px;
}
.manufacturer-main {
  margin-top: 30px;
}

.manufacturer-main-group {
  margin-top: 20px;
  padding-left: 0px;
}

.manufacturer-main-group ul {
  list-style: none;
  padding-left: 30px;
  padding-right: 20px;
  display: flex; /* Kích hoạt Flexbox cho thẻ <ul> */
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
}

.manufacturer-main-group ul li img {
  border: 1.5px solid;
  border-color: #005498;
}

.manufacturer-main-group ul li p {
  padding-top: 5px;
  font-size: 14px;
}

/* Trang sản phẩm cấp 1*/
.lv-first-manufacturer-title {
  margin-top: 30px;
}

.lv-first-manufacturer-group {
  margin-top: 20px;
  padding-left: 0px;
}

.lv-first-manufacturer-group ul {
  list-style: none;
  padding-left: 30px;
  padding-right: 20px;
  display: flex; /* Kích hoạt Flexbox cho thẻ <ul> */
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
}

.lv-first-manufacturer-group ul li img {
  border: 1.5px solid;
  border-color: #005498;
}

.lv-first-manufacturer-group ul li p {
  padding-top: 5px;
  font-size: 14px;
}

/* Trang sản phẩm cấp 2*/
.manufacturer-second-title {
  text-transform: uppercase;
  margin-top: 20px;
  font-size: 22px;
}

.manufacturer-second-group ul {
  list-style: none;
  padding-left: 0px;
}

.manufacturer-second-group ul li span {
  font-size: 18px;
  text-transform: uppercase;
}

.manufacturer-second-group ul li a {
  /* Đả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 */
  }
}

.manufacturer-second-group ul li a span:hover {
  font-weight: 700;
}

/* Trang sản phẩm cấp 3*/
.manufacturer-third-group {
  padding-left: 0px;
  padding-right: 0px;
}
.manufacturer-third-group ul {
  list-style-type: none;

  gap: 20px;
  margin-left: 0px;
  padding-left: 15px;
}

.manufacturer-third-group ul li {
  display: block;
}

.manufacturer-third-child-title {
  color: inherit; /* Thẻ a sẽ kế thừa màu chữ từ thẻ li cha của nó */
  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) */
  text-transform: uppercase;
  font-weight: 600;
  font-size: 19px;
}

/* Trang chi tiết sản phẩm */
.product-detail-avatar {
  /* Kích thước khung cố định */
  width: 490px;
  height: 490px;
  border: 10px solid #f2f2f2;
  /* (Tùy chọn) Dùng Flexbox để căn hình ra giữa khung nếu hình không lấp đầy */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Đảm bảo không có gì tràn ra ngoài */
}

.product-detail-avatar img {
  /* Thiết lập quan trọng nhất */
  object-fit: contain;

  /* Bắt buộc hình ảnh phải cố gắng lấp đầy khung chứa nó */
  width: 100%;
  height: 100%;
}

.product-detail {
  margin-top: 30px;
  margin-bottom: 30px;
}

.right-media-btn,
.left-media-btn {
  /* Đảm bảo button có kích thước cố định để icon dễ căn giữa */
  width: 40px; /* Ví dụ chiều rộng của nút */
  height: 80px; /* 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 */
  background: none;
  cursor: pointer;
  /* Các kiểu dáng khác cho button */
  background-color: #999999;
  color: white;
  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-media-btn:focus,
.left-media-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-media-btn:disabled,
.left-media-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; */
}

.product-detail-list-media {
  display: flex; /* Kích hoạt Flexbox cho container cha */
  justify-content: center; /* 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: 60px; /* 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 */
  max-width: 530px;
  margin: 20px auto; /* Căn giữa khối carousel trên trang */
}

/* Container mới để cắt ảnh và áp dụng overflow: hidden */
.product-media-carousel-viewport {
  width: calc(
    5 * (80px + 10px)
  ); /* **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 */
}

.product-detail-list-media .media-list {
  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à */
}

.product-detail-list-media .media-list li {
  flex: 0 0 auto; /* Ngăn li co giãn, giữ kích thước tự động */
  margin: 0px 5px;
  width: 80px; /* **Quan trọng:** Đặt chiều rộng cố định cho mỗi ảnh li */
  height: 80px; /* Đặt chiều cao cố định để hình không bị méo */
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-detail-list-media .media-list li img {
  max-width: 100%; /* Đảm bảo ảnh nằm gọn trong li */
  height: auto; /* Giữ tỷ lệ ảnh */
  display: block;
  cursor: pointer; /* Thêm con trỏ bàn tay để báo hiệu có thể click */
  border: 2px solid transparent; /* Viền trong suốt mặc định */
  transition: border-color 0.2s ease; /* Hiệu ứng chuyển màu viền mượt mà */
}

.product-detail-list-media .media-list li img.active {
  border-color: #007bff; /* Ví dụ: viền xanh khi ảnh được chọn */
}

.product-detail-title {
  color: #005498;
  font-weight: 700;
  font-size: 24px;
}

.product-detail-title-line {
  background-color: #2c2c2c;
  width: 100%;
  height: 1px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.product-detail-excerpts {
  text-align: justify;
}

.product-detail-application-name {
  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: baseline; /* RẤT QUAN TRỌNG: Căn giữa các phần tử con theo chiều dọc */
}

.product-detail-application-name ul {
  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 */
  height: 30px;
}

.product-detail-application-name ul li {
  margin-right: 15px;
  flex-grow: 1; /* RẤT QUAN TRỌNG: Cho phép mỗi <li> giãn nở để lấp đầy không gian còn lại */
  text-align: center; /* Căn giữa nội dung văn bản trong mỗi <li> */
  border: 1px solid #005498;
  color: #005498;
  padding-right: 15px;
  padding-left: 15px;
  font-size: 18px;
}

.product-detail-spec-banner {
  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: baseline; /* RẤT QUAN TRỌNG: Căn giữa các phần tử con theo chiều dọc */
}

.product-detail-spec-banner ul {
  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 */
  height: 60px;
}

.product-detail-spec-banner ul li {
  margin-right: 3px;
  flex-grow: 1; /* RẤT QUAN TRỌNG: Cho phép mỗi <li> giãn nở để lấp đầy không gian còn lại */
  text-align: center; /* Căn giữa nội dung văn bản trong mỗi <li> */
  padding-right: 15px;
  padding-left: 15px;
}

.product-detail-support {
  display: flex; /* Kích hoạt Flexbox cho container cha */
  justify-content: right; /* RẤT QUAN TRỌNG: Đẩy các phần tử con ra hai bên */
  color: #005498;
}

.product-detail-support i {
  font-size: 42px;
  margin-right: 10px;
  padding-top: 12px;
}

.product-detail-support-number p {
  margin-bottom: 0px;
  margin-top: 0px;
}

.product-detail-outlink a {
  height: 40px;
  width: 120px;
  padding: 10px 20px;
  font-weight: 600;
  background-color: #0aaf50;
  color: #fff;
  border: none; /* Loại bỏ viền */
  margin-top: 10px;
  margin-right: 10px;
}

/* Container của Tabs */
/* General styling for the container */
.product-detail-tabs-header {
  position: relative;
}

.product-detail-tabs {
  position: relative; /* Giữ nó trong luồng tài liệu */
  z-index: 2; /* Đảm bảo nó nằm trên tab-line nếu cần */
  margin-top: 30px;
  overflow: hidden;
  position: relative; /* Quan trọng để các phần tử con có thể định vị tương đối */
}

.product-detail-tab-line {
  position: relative; /* Cũng giữ nó trong luồng tài liệu */
  top: -1px; /* Di chuyển lên trên 1px */
  z-index: 1; /* Đảm bảo nó nằm dưới tab-buttons nếu cần */
  background-color: #005498;
  width: 100%;
  height: 2px;
  margin-top: 0px;
  margin-bottom: 20px;
}

.product-detail-tab-box {
  background-color: #ffffff;
  width: 1px;
  height: 20%;
}

/* Ẩn hoàn toàn các radio button gốc */
.product-detail-tabs input[type="radio"] {
  display: none;
}

/* Styling cho container của các nút tab (label) */
.product-detail-tabs-buttons {
  display: flex; /* Kích hoạt Flexbox cho thẻ div này */
  justify-content: flex-end; /* Quan trọng: Dồn các phần tử con về phía cuối của trục chính (bên phải) */
  align-items: center; /* Căn chỉnh các mục theo chiều dọc (giữa theo chiều cao), đảm bảo chúng thẳng hàng */
  color: #fff; /* Màu xanh cho text tab đang hoạt động */
  min-height: 36px; /* Ví dụ: Đặt một chiều cao cố định cho container cha */
}

/* Styling cho từng nút tab (chính là các Label) */
.product-detail-tab-button {
  background-color: #005498;

  padding: 10px 30px;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  user-select: none; /* Ngăn chặn chọn text khi click nhanh */
}

/* Loại bỏ border-right cho label cuối cùng */
.product-detail-tabs-buttons .product-detail-tab-button:last-of-type {
  border-right: none;
}

.product-detail-tab-triangle {
  width: 32px;
  height: 100%;
  clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
  padding: 10px 0px;
  margin-right: -1px;
  background-color: #005498;
  flex-shrink: 0; /* Ngăn tam giác bị co lại nếu không gian hạn chế */
}

.product-detail-tab-button:hover {
  font-weight: bold;
  background-color: #005498;
}

/* Styling cho nút tab đang được chọn (active) */
/* Khi input radio được checked, tìm siblings là .tabs-buttons-css-only,
   sau đó tìm label tương ứng bên trong đó và áp dụng style active. */
#tab1-radio:checked ~ .product-detail-tabs-buttons label[for="tab1-radio"],
#tab2-radio:checked ~ .product-detail-tabs-buttons label[for="tab2-radio"],
#tab3-radio:checked ~ .product-detail-tabs-buttons label[for="tab3-radio"],
#tab4-radio:checked ~ .product-detail-tabs-buttons label[for="tab4-radio"],
#tab5-radio:checked ~ .product-detail-tabs-buttons label[for="tab5-radio"] {
  white-space: nowrap;
  margin-bottom: 0px;

  color: #fff; /* Màu xanh cho text tab đang hoạt động */
}

.product-detail-tabs-buttons label {
  margin-bottom: 0px;
}

/* Ẩn tất cả các khu vực nội dung tab theo mặc định */
.tab-pane-css-only {
  display: none;
  padding: 20px;
  background-color: #fff;
  /* Có thể thêm border hoặc shadow nếu muốn */
}

/* Hiển thị khu vực nội dung tab tương ứng khi radio button được chọn */
/* Khi radio button được checked, tìm sibling là tab-pane-css-only tương ứng và hiển thị */
#tab1-radio:checked ~ #tab1-pane,
#tab2-radio:checked ~ #tab2-pane,
#tab3-radio:checked ~ #tab3-pane,
#tab4-radio:checked ~ #tab4-pane,
#tab5-radio:checked ~ #tab5-pane {
  display: block;
}

/* Styling cho nội dung bên trong tab-pane */
.tab-pane-css-only h2 {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 15px;
  color: #333;
}

.tab-pane-css-only p {
  line-height: 1.6;
  color: #666;
}

/* Thông số kỹ thuật trang chi tiết*/
/* Styling cho phần tổng thể */
.product-specs-section {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
}

.specs-section-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
}

/* Styling cho từng nhóm thông số */
.specs-group {
  margin-bottom: 25px;
}

.specs-group-name {
  font-size: 20px;
  color: #555;
  margin-bottom: 15px;
  background-color: #e0e0e0;
  padding: 8px 15px;
  border-radius: 4px;
}

/* Styling cho bảng thông số */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.specs-table tr:nth-child(even) {
  background-color: #f2f2f2; /* Màu nền xen kẽ cho các hàng */
}

.specs-table td {
  padding: 10px 15px;
  border: 1px solid #ddd;
  vertical-align: top;
}

.specs-table .spec-name {
  width: 30%; /* Điều chỉnh chiều rộng cột tên thông số */
  font-weight: bold;
  color: #444;
}

.specs-table .spec-detail {
  width: 70%; /* Điều chỉnh chiều rộng cột chi tiết thông số */
  color: #666;
}

/* Phụ kiện đi kèm của trang chi tiết */
/* Styling tổng thể cho phần phụ kiện */
.product-accessories-section {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
}

.accessories-section-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
}

/* Container cho danh sách phụ kiện */
.accessories-list {
  display: flex; /* Dùng flexbox để các phụ kiện xếp hàng ngang */
  flex-wrap: wrap; /* Cho phép các mục xuống dòng nếu không đủ chỗ */
  gap: 20px; /* Khoảng cách giữa các phụ kiện */
}

/* Styling cho từng mục phụ kiện */
.accessory-item {
  display: flex;
  align-items: flex-start; /* Căn chỉnh các mục theo chiều dọc */
  width: calc(33% - 20px); /* Ví dụ: 3 cột, trừ đi gap */
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.accessory-image {
  flex-shrink: 0; /* Ngăn hình ảnh bị co lại */
  margin-right: 15px;
  width: 80px; /* Kích thước cố định cho ảnh phụ kiện */
  height: 80px;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid #eee;
}

.accessory-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Đảm bảo ảnh phủ đầy khung mà không bị méo */
}

.accessory-details {
  flex-grow: 1; /* Cho phép phần chi tiết chiếm không gian còn lại */
}

.accessory-name {
  font-size: 18px;
  color: #444;
  margin-top: 0;
  margin-bottom: 5px;
}

.accessory-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 0;
}

.accessories-pic {
  width: 150px;
  height: 150px;
  /* Biến thẻ a thành flex container */
  display: flex;
  justify-content: center; /* Căn giữa ngang */
  align-items: center; /* Căn giữa dọc */
}

.accessories-pic img {
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Media Queries cho các kích thước màn hình nhỏ hơn */
@media (max-width: 768px) {
  .accessory-item {
    width: calc(50% - 20px); /* 2 cột trên tablet */
  }
}

@media (max-width: 480px) {
  .accessories-list {
    flex-direction: column; /* 1 cột trên di động */
  }
  .accessory-item {
    width: 100%;
    flex-direction: column; /* Ảnh và text xếp chồng lên nhau */
    align-items: center;
    text-align: center;
  }
  .accessory-image {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/* Tài liệu của trang chi tiết */
/* Styling tổng thể cho phần tài liệu */
.product-docs-section {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
}

.docs-section-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  border-bottom: 2px solid #ddd;
  padding-bottom: 10px;
}

/* Container cho danh sách tài liệu */
.docs-list {
  display: flex;
  flex-direction: column; /* Xếp các tài liệu theo cột */
  gap: 15px; /* Khoảng cách giữa các mục tài liệu */
}

/* Styling cho từng mục tài liệu */
.doc-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.doc-icon {
  flex-shrink: 0;
  margin-right: 15px;
}

.doc-icon .dashicons {
  font-size: 40px;
  color: #0073aa; /* Màu sắc Dashicons */
}

.doc-details {
  flex-grow: 1;
}

.doc-title {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 5px;
}

.doc-title a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.doc-title a:hover {
  color: #0073aa;
}

.doc-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #777;
  display: flex; /* Hiển thị thông tin meta theo hàng ngang */
  flex-wrap: wrap;
  gap: 10px 20px; /* Khoảng cách giữa các mục meta */
}

.doc-meta li {
  display: flex;
  align-items: center;
}

.doc-meta li .dashicons {
  font-size: 16px;
  margin-right: 5px;
  color: #999;
}

.doc-download {
  flex-shrink: 0;
  margin-left: 20px;
}

.doc-download .button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  text-decoration: none;
}

/* Media Queries cho các kích thước màn hình nhỏ hơn */
@media (max-width: 768px) {
  .doc-item {
    flex-wrap: wrap; /* Cho phép wrap trên tablet */
    text-align: center;
    justify-content: center;
  }
  .doc-icon {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .doc-details {
    text-align: center;
    width: 100%; /* Chiếm toàn bộ chiều rộng */
    margin-bottom: 10px;
  }
  .doc-meta {
    justify-content: center; /* Căn giữa thông tin meta */
  }
  .doc-download {
    margin-left: 0;
    width: 100%;
  }
}

.accessories-line {
  background-color: #005498;
  width: 100%;
  height: 1px;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* Trang so sánh sản phẩm */
.compare-page-title {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #0aaf50;
  color: #fff;
  font-weight: 700;
}

.compare-group-title {
  background-color: #c8c8c8;
  text-transform: uppercase;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: 600;
}

.compare-parameter div {
  border: 1px solid #c8c8c8;
  padding-bottom: 5px;
  padding-top: 5px;
}

.compare-parameter-title {
  border: 1px solid #c8c8c8;
  background-color: #c8c8c8;
  padding-bottom: 7px;
  padding-top: 7px;
}

.compare-parameter-title select {
  width: 100%;
  height: 40px;
}

.compare-parameter-pic {
  border: 1px solid #c8c8c8;
  padding-bottom: 5px;
  padding-top: 5px;
  flex-wrap: wrap; /* Cho phép wrap trên tablet */
  text-align: center;
  width: 100%;
}

.compare-parameter-pic img {
  /* QUAN TRỌNG NHẤT: Giới hạn chiều rộng tối đa của ảnh bằng 100% chiều rộng của thẻ cha */
  max-width: 100%;

  /* Giữ nguyên tỷ lệ của ảnh khi chiều rộng thay đổi */
  height: auto;

  /* Tùy chọn: Giúp căn giữa ảnh nếu nó nhỏ hơn thẻ cha */
  display: block;
  margin: 0 auto;
}

.compare-product-select {
  padding: 8px 12px;
  -webkit-appearance: none; /* Loại bỏ style mặc định của trình duyệt */
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-caret-down-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%20%20%3Cpath%20d%3D%22M7.247%2011.14%202.451%205.658C1.885%205.013%202.345%204%203.204%204h9.592a1%201%200%200%201%20.753%201.659l-4.796%205.48a1%201%200%200%201-1.506%200z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 10px top 50%;
  background-size: 15px;
}