* {
  box-sizing: border-box; /*kiểm soát tốt hơn về kích thước phần tử, đặc biệt khi làm việc với bố cục responsive.*/
  padding: 0;
  margin: 0;
}
body,
html {
  font-family: sans-serif, arial, sans-serif, tahoma,Font Awesome 5 Free;
  color: #333;
  justify-content: center; /* Căn giữa ngang */
  align-items: center; /* Căn giữa dọc */
  width: 100%;
  height: 100%;
}
.header {
  background-color: #f8f9fa;
  margin: 0;
  padding: 0;
  width: 100%;
  top:0px;
}



.navbar-nav {
  margin-left: auto; /* Đẩy tất cả menu sang phải */
}

/* Đảm bảo các mục menu vẫn nằm bên phải khi thu nhỏ */
.navbar-collapse {
  justify-content: flex-end;
}

/* Đặt màu nền navbar và tùy chỉnh menu */
.navbar {
  background-color: black;
}
.navbar-brand {
  color: white !important;
}
.navbar-nav .nav-link {
  color: white !important;
}
.navbar-nav .nav-link:hover {
  color: #ddd !important;
}
.navbar-toggler {
  color: white;
  border: none;
}
.navbar-toggler:focus {
  box-shadow: none;
}

.navbarbox {
  margin: 0;
  padding: 0;
  display: none;
}
.nav_text_right {
  text-align: right;
}
.nav-link:hover {
  text-decoration: underline;
  color: #e9f5ff;
  margin: 0;
  padding: 0;
}

.overlay-box {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 100%;
  z-index: 10;
  transform: translateX(-50%);
  padding: 20px;
  border-radius: 8px;
  text-align: center; /* Căn giữa nội dung */
}

.language-bar {
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  color: white; /* Màu chữ */
  z-index: 1050; /* Đảm bảo luôn ở trên slide */
  padding: 10px;
  text-align: right; /* Căn sang phải */
  font-size: 16px;
margin-left :-150px;
}

.language {
  text-decoration: none;
  color: #ffffff;
  margin: 0 5px;
}
.language:hover {
  text-decoration: underline;
}

.language1 {
  text-decoration: none;
  color: #ffffff;
  margin: 0 5px;
}
.language1:hover {
  text-decoration: underline;
}

.logo img {
  margin-bottom: 15px;
  width: 300px;
  height: 183px;
}

.navigation1 ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.navigation1 li {
  display: inline;
  margin: 20px 10px;
  font-size: 18px;
}

.navigation1 a {
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.navigation1 a:hover {
  text-decoration: underline;
}
.hover-box {
  position: absolute;
  top: 93%; /* Đặt box dưới mục nav */
  left: 50%;
  transform: translateX(-50%);
  width: 1360px;
  background-color: rgb(255 255 255 / 85%);
  border-radius: 5px;
  text-align: center;
  font-size: 14px;
  display: none; /* Ẩn box mặc định */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 100;
  animation: moveUp 0.5s forwards;
  grid-template-columns: repeat(4, 1fr);
        gap: 0;
        border-radius: 5px;
        overflow: hidden;
}
.navigation1 li:hover .hover-box {
  display: grid; /* Hiển thị box khi di chuột */  
}
.hover-box-2 {
    grid-template-columns: repeat(3, 1fr);

}

.hover-box-3 {
    grid-template-columns: repeat(4, 1fr);
}
          .hidden {
        display: none;
      }

        .nav-box2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: 2px solid #ccc;
         background-size: cover;
      }
         .nav-box2 a {
   color:black;
      }
        .nav-box2-custombr{
              border-right: 0px solid #ccc;
        }

        .ctnav{
            align-items: flex-start;
        }
      .nav-box2-noborder {
        border-right: 0px solid #ccc;
      }
      .nav-box2-pd {
        margin: 40px;
      }
       .nav-box2-r {
        margin-right: 40px;
      }
      .nav-box2 ul {
        display:grid;
        list-style: none;
        padding: 0;
        margin: 2px;
      }
      .nav-box2 ul li {
        padding: 1px;
        margin-bottom: 2px;
        text-align: left;
        margin-right: 25px;
      }
      .customli{
         padding-top:40px;
         font-size:16px;
         font-weight:700;
         color:black;
      }
      customfontli{
          font-weight:500;
      }
      .nav-box2 ul li:last-child {
        margin-bottom: 0;
      }
      .nav-box2:last-child ul {
        height: 100%;
        width: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 3px;
        max-height: 100%;
        overflow: hidden;
      }

@keyframes moveUp {
  0% {
    opacity: 0;
    height: 20%;
  }
  100% {
    opacity: 1;
    height: 250px;
  }
}

section.application {
  display: grid;
  text-align: center; /* Căn giữa nội dung */
  margin-top: 30px;
  margin-bottom: 20px;
}
.application h1 {
  font-size: 60px;
}
.container {
  width: 100%;
  margin: 0 auto;
}
.swiper_wrap {
  padding: 0px 50px;
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
  text-align: center;
}
.swiper_wrap img {
  width: 100%;
  height: 280px;
  transition: opacity 0.3s ease;
}
.swiper-slide:hover img {
  opacity: 0; /* Làm mờ hình ảnh */
  object-fit: contain;
}

.swiper-slide:hover {
  background-color: rgb(0, 255, 55); /* Nền đen khi hover */
}
.swiper-slide:hover .icon-overlay {
  display: block; /* Hiện icon khi hover */
}

.swiper-button-next {
  margin-top: 0px;
  position: absolute;
  border: 3px solid #c2c2c2; /* Khung nút */
  top: 50%;
  right: -40px;
  width: 45px;
  height: 45px;
  padding: 30px;
  transform: translateY(-50%);
  background-image: url("../images/right-arrow.png");
  background-size: 18px;
}
.swiper-button-prev {
  position: absolute;
  top: 50%;
  border: 3px solid #c2c2c2; /* Khung nút */
  left: -40px;
  width: 45px;
  height: 45px;
  font-size: 25px;
  transform: translateY(-50%);
  margin-top: 0px;
  padding: 30px;
  background-image: url("../images/left-arrow.png");
  background-size: 18px;
}

.icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 50px;
  z-index: 10;
}

.application-item {
  bottom: 20px;
  left: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  color: rgb(255, 255, 255);
  padding: 10px;
  border-radius: 5px;
  display: none; /* Hidden by default */
  max-width: 100%;
  height: 390px;
  text-align: center;
  transition: opacity 0.3s ease;
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateX(0);
  }
}
.showitem {
  animation: slideUp 2s ease-in; /* Apply the slide-up animation */
}

.buttonmore {
  justify-content: center;
  align-items: center;
  display: grid;
}
.custom-button {
  top: 20px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 250px;
  height: 70px;
  padding: 0;
  border: 1px solid #dddddd;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  background-color: #ffffff;
}

.button-text {
  flex: 7;
  text-align: center;
  z-index: 1;
  color: #ddd;
}

.button-icon {
  flex: 3;
  text-align: center;
  z-index: 1;
  color: #ddd;
  border-left: 1px solid #dddddd;
  margin: 10px;
  padding: 16px 0px 16px 0px;
}

.hover-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0%;
  height: 100%;
  background-color: #b6d427;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease;
}

.custom-button:hover .hover-effect {
  width: 100%;
}

section.Product {
  margin-top: 120px;
  margin-bottom: 10px;
}
.productbox {
  background-color: #007bff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  top: 100px;
}
.pr-screen-box {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Chia thành 2 cột */
  grid-template-rows: repeat(2, 1fr); /* Chia thành 2 hàng */
}

.pr-screen-box ul {
  display: contents; /* Để ul không ảnh hưởng đến layout */
  list-style: none;
}

.pr-screen-box li {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(0, 0, 0);
  font-size: 4rem;
  font-weight: bold;
  border: 1px solid white; /* Viền phân cách giữa các ô */
  height: 535px;
  position: relative; /* Đặt position để làm cha tham chiếu */
  overflow: hidden; /* Giới hạn nội dung bên trong không cho tràn ra ngoài */
  opacity: 0;
  transform: translateY(50px); /* Dịch xuống để tạo hiệu ứng */
  transition: transform 0.8s ease; /* Hiệu ứng mượt khi thay đổi */
}
.pr-screen-box li.active {
  opacity: 1; /* Hiển thị rõ */
  transform: translateY(0); /* Đưa về vị trí ban đầu */
  animation: scaleIn 1s ease-in-out forwards; /* Hiệu ứng phóng to */
}

.pr-screen-box li:first-child {
  opacity: 1; /* Đảm bảo phần tử đầu tiên luôn hiển thị */
  transform: translateY(0); /* Đưa về vị trí ban đầu */
}

.pr-image-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Độ rộng hình ảnh, tùy chỉnh */
  height: 100%; /* Chiều cao hình ảnh, tùy chỉnh */
  background-position: center; /* Căn chỉnh hình ảnh ở giữa */
  background-repeat: no-repeat; /* Không lặp hình ảnh */
  border-radius: 8px; /* Bo góc hình ảnh, tùy chỉnh */
  background-size: cover; /* Phóng to hình ảnh để che toàn bộ ô */
  z-index: -1; /* Đặt hình nền phía sau nội dung */
  transition: transform 0.3s ease; /* Thêm hiệu ứng mượt khi phóng to */
}
.pr-screen-box li:hover .pr-image-box {
  transform: scale(1.1); /* Phóng to nhẹ khi di chuột vào li */
}
@keyframes scaleIn {
  0% {
    transform: scale(0.5); /* Bắt đầu nhỏ hơn */
    opacity: 0; /* Bắt đầu trong suốt */
  }
  50% {
    opacity: 0.5; /* Hiện dần */
  }
  100% {
    transform: scale(1); /* Kết thúc với kích thước bình thường */
    opacity: 1; /* Hiện rõ hoàn toàn */
  }
}

.pr-text-box {
  position: absolute;
  bottom: 10%; /* Cách cạnh dưới 10% */
  left: 50%; /* Đặt ở giữa theo chiều ngang */
  transform: translateX(-50%); /* Dịch sang trái 50% để căn giữa */
  background-color: rgba(0, 0, 0, 0.6); /* Nền đen với độ mờ */
  color: #fff; /* Màu chữ trắng */
  padding: 10px 20px; /* Khoảng cách padding */
  border-radius: 8px; /* Bo góc */
  font-size: 1.2rem; /* Kích thước chữ */
  text-align: center; /* Căn giữa chữ */
}

.pr-bt-img {
  display: grid;
  justify-content: center;
  text-align: center;
}
.pr-custom-button {
  top: 40px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 250px;
  height: 70px;
  padding: 0;
  border: 1px solid #096318;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  background-color: transparent;
}

.pr-button-text {
  flex: 7;
  text-align: center;
  z-index: 1;
  color: #ddd;
}

.pr-button-icon {
  flex: 3;
  text-align: center;
  z-index: 1;
  color: #ddd;
  border-left: 1px solid #096318;
  margin: 10px;
  padding: 16px 0px 16px 0px;
}
.pr-custom-button:hover .hover-effect {
  width: 100%;
}

section.Glstevie {
  width: 100%; /* Đảm bảo chiếm hết chiều ngang trình duyệt */
  margin: 0 auto; /* Căn giữa phần tử theo chiều ngang */
  overflow: hidden; /* Ngăn phần tử con tràn ra ngoài */
  position: relative; /* Làm gốc cho phần tử con */
  padding-bottom: 20px;
  box-sizing: border-box; /* Đảm bảo padding và border không làm tăng kích thước */
}

.gl-screen-box {
  display: flex;
  flex-direction: column; /* Chuyển thành bố cục cột */
  justify-content: flex-start; /* Chia đều không gian giữa các phần tử */
  align-items: flex-end; /* Căn chỉnh các phần tử về bên phải */
  width: 100%;
  height: 100%;
  margin: 0;
  background-position: center; /* Căn chỉnh hình ảnh ở giữa */
  background-repeat: no-repeat; /* Không lặp hình ảnh */
  background-size: cover; /* Phóng to hình ảnh để che toàn bộ ô */
  position: relative;
}
.gl-screen-box::before {
  content: ""; /* Tạo lớp phủ */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6); /* Màu trắng mờ */
  backdrop-filter: blur(5px); /* Hiệu ứng mờ */
  z-index: 1; /* Lớp phủ ở dưới nội dung chính */
}
.glbox1 {
  width: 50%; /* Chiều rộng ban đầu */
  max-height: 620px; /* Giới hạn chiều cao tối đa */
  background-color: #ffffff;
  transition: width 0.3s ease;
  z-index: 1;
  position: relative; /* Không dùng absolute để tránh chồng chéo */
  box-sizing: border-box; /* Đảm bảo padding và border không làm tăng kích thước */
  animation: glslideUp 4s ease-out forwards; /* Áp dụng animation */
}
.gbbox1-text {
  padding: 100px;
  padding-right: 250px;
  max-width: 100%; /* Chiếm toàn bộ chiều rộng của glbox1 */
  max-height: 100%;
  transform-origin: top left; /* Điểm gốc để thu nhỏ */
  transition: transform 0.3s ease; /* Hiệu ứng thu nhỏ mượt mà */
  text-align: left;
  font-size: 1rem;
  box-sizing: border-box;
}
.gbbox1-text h1 {
  font-size: calc(40px + 2vw); /* Kích thước chữ tiêu đề tăng theo viewport */
  font-weight: 700;
}
.gbbox1-text p {
  width: 100%;
  font-size: calc(10px + 0.3vw);
  margin: 0; /* Loại bỏ khoảng cách giữa các đoạn văn */
  color: #c2c2c2;
  display: -webkit-box; /* Sử dụng flexbox để giới hạn dòng */
  -webkit-line-clamp: 3; /* Số dòng tối đa hiển thị */
  -webkit-box-orient: vertical; /* Thiết lập hiển thị dọc */
  overflow: hidden; /* Ẩn phần nội dung vượt quá */
  text-overflow: ellipsis; /* Hiển thị dấu "..." */
}
.gl-bt-img {
  display: flex;
  justify-content: left;
}
.glbuttonmore {
  justify-content: center;
  align-items: center;
}
.gl-custom-button {
  top: 20px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 250px;
  height: 70px;
  padding: 0;
  border: 1px solid #096318;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  background-color: transparent;
}

.gl-button-text {
  flex: 7;
  text-align: center;
  z-index: 1;
  color: #ddd;
}

.gl-button-icon {
  flex: 3;
  text-align: center;
  z-index: 1;
  color: #ddd;
  border-left: 1px solid #096318;
  margin: 10px;
  padding: 16px 0px 16px 0px;
}
.gl-custom-button:hover .hover-effect {
  width: 100%;
}
.glbox2 {
  width: 80%; /* Chiều rộng 80% của gl-screen-box */
  max-height: 100%; /* Chiều cao 50% của gl-screen-box */
  background-color: #f1f8fc;
  max-height: 100%; /* Đảm bảo không vượt quá chiều cao của cha */
  z-index: 2;
  position: relative; /* Không dùng absolute để tránh chồng chéo */
  box-sizing: border-box; /* Đảm bảo padding và border không làm tăng kích thước */
  animation: glslideUp 4s ease-out forwards; /* Áp dụng animation */
}
.gbbox2-text {
  padding: 100px;
  padding-right: 250px;
  max-width: 100%;
  transform-origin: top left; /* Điểm gốc để thu nhỏ */
  transition: transform 0.3s ease; /* Hiệu ứng thu nhỏ mượt mà */
  text-align: left;
  font-size: 1rem;
  box-sizing: border-box;
}
.gbbox2-text h1 {
  font-size: calc(40px + 2vw); /* Kích thước chữ tiêu đề tăng theo viewport */
  font-weight: 700;
}
.gbbox2-contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px auto;
  width: 100%;
  gap: 10px;
  flex-wrap: wrap;
}
.gbbox2-contents-box {
  text-align: center;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
  width: 22%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gbbox2-contents-box img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  transition: transform 0.3s ease;
}
.gbbox2-contents-box img:hover {
  transform: scale(1.05); /* Phóng to nhẹ 5% */
}
.gbbox2-contents-box p {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}
.box2buttonmore {
  justify-content: center;
  align-items: center;
}
.gbbox2-custom-button {
  top: 20px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 250px;
  height: 70px;
  padding: 0;
  border: 1px solid #096318;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  background-color: transparent;
}

.gbbox2-button-text {
  flex: 7;
  text-align: center;
  z-index: 1;
  color: #ddd;
}

.gbbox2-button-icon {
  flex: 3;
  text-align: center;
  z-index: 1;
  color: #ddd;
  border-left: 1px solid #096318;
  margin: 10px;
  padding: 16px 0px 16px 0px;
}
.gbbox2-custom-button:hover .hover-effect {
  width: 100%;
}

.glbox1,
.glbox2 {
  opacity: 0;
  transform: translateY(50px); /* Bắt đầu từ dưới */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.glbox1.visible,
.glbox2.visible {
  opacity: 1;
  transform: translateY(0); /* Di chuyển lên và hiện rõ */
}

@keyframes glslideUp {
  0% {
    transform: translateY(100px); /* Bắt đầu từ dưới */
    opacity: 0; /* Ban đầu ẩn */
  }
  100% {
    transform: translateY(0); /* Di chuyển lên vị trí ban đầu */
    opacity: 1; /* Hiện rõ */
  }
}

section.Steviaclassrom {
  width: 100%; /* Đảm bảo chiếm hết chiều ngang trình duyệt */
  display: grid;
  overflow: hidden; /* Ngăn phần tử con tràn ra ngoài */
  position: relative; /* Làm gốc cho phần tử con */
  padding-bottom: 20px;
  box-sizing: border-box; /* Đảm bảo padding và border không làm tăng kích thước */
  text-align: center;
}

.Steviaclassrom h1 {
  padding-top: 50px;
  padding-bottom: 50px;
  font-size: 80px;
  font-weight: 700;
}

.Steviaclassrom-box {
  display: flex;
  width: 100%;
}
.Steviaclassrom-column {
  flex: 1; /* Cả hai cột chiếm đều không gian */
  background-color: rgb(255, 255, 255);
  justify-content: center;
  align-items: center;
}
.Steviaclassrom-column img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Điều chỉnh ảnh để bao phủ toàn bộ khung */
}
.Steviaclassrom-column img {
  max-width: 100%;
}
.video-thumbnail {
  width: 100%;
  cursor: pointer;
}
/* Khung video khi nhấp vào ảnh */
.video-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  padding: 20px;
  border-radius: 10px;
  z-index: 1000;
}

/* Style cho dấu X */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  color: white;
  cursor: pointer;
  font-weight: bold;
  background: none;
  border: none;
  z-index: 1001;
}

.close-btn:hover {
  color: #ff0000; /* Màu đỏ khi hover */
}

video {
  max-width: 100%;
  border-radius: 10px;
}

.Steviaclassrom-boxcontents {
  width: 100%;
  flex-direction: column; /* Đặt các phần tử theo chiều dọc */
  display: flex;
}
.Steviaclassrom-contents {
  text-align: left;
  padding-bottom: 20px;
  border-bottom: 2px dotted rgb(233, 233, 233);
  margin-left: 150px;
  margin-right: 70px;
  margin-bottom: 20px;
}
.Steviaclassrom-contents h4 {
  font-size: 20px;
  font-weight: 700;
}
.Steviaclassrom-contents p {
  width: 100%;
  font-size: calc(10px + 0.3vw);
  margin: 0; /* Loại bỏ khoảng cách giữa các đoạn văn */
  color: #c2c2c2;
  display: -webkit-box; /* Sử dụng flexbox để giới hạn dòng */
  -webkit-line-clamp: 3; /* Số dòng tối đa hiển thị */
  -webkit-box-orient: vertical; /* Thiết lập hiển thị dọc */
  overflow: hidden; /* Ẩn phần nội dung vượt quá */
  text-overflow: ellipsis; /* Hiển thị dấu "..." */
}

.Steviaclassrom-contents-more {
  width: 100%;
  display: flex;
  padding: 10px;
  justify-content: right;
  text-align: right;
  margin-top: 10px;
}
.Steviaclassrom-contents-more a {
  font-size: 16px;
}
.Steviaclassrom-contents:hover {
  color: #00f33d;
}
.Steviaclassrom-bt-img {
  display: flex;
  justify-content: left;
  margin-left: 150px;
}

.Steviaclassrom-custom-button {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 250px;
  height: 70px;
  padding: 0;
  border: 1px solid #096318;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 1.5rem;
  background-color: transparent;
}
.Steviaclassrom-custom-button:hover .hover-effect {
  width: 100%;
}

 .col-md-4,.col-md-8 h5 {
    font-size: 1.2rem; /* Giữ kích thước như trước */
    font-weight: 700; /* Tăng độ đậm của chữ */  
  }

     .headercontents {
        width: 100%;
        height: 657px; /* Chiều cao bằng chiều cao của viewport */
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        position: relative;
       margin-bottom :40px;
      }
      .language-ba-ct {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.3);
        color: white;
        padding: 5px 10px;
        border-radius: 25px;
        font-size: 16px;
      }
      .language-ba-ct a:hover {
          text-decoration: underline;
        }
       .nav-content {
        position: absolute;
        top: 40px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15%;
        z-index: 10;
      }
        .menu-content {
        list-style: none;
        display: flex;
        gap: 15px;
        padding-left: 15px;
        position: relative;
      }

      .menu-content li {
        display: inline;
      }

      .menu-content a {
        color: white;
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
      }

      .menu-content a:hover {
        text-decoration: underline;
      }
      .logo2 img {
          width: 250px;
          height: 170px;
        }
           /* Hộp dropdown nằm chính giữa màn hình */
      .dropdown-box-ct {
        position: fixed; /* Đặt vị trí cố định trên màn hình */
        top: 275px; /* Đặt hộp ở giữa màn hình theo chiều dọc */
        left: 50%; /* Đặt hộp ở giữa màn hình theo chiều ngang */
        transform: translate(
          -50%,
          -50%
        ); /* Di chuyển hộp để căn giữa hoàn hảo */
        width: 1360px; /* Chiều rộng của hộp */      
       background-color: rgb(255 255 255 / 85%);
        border-radius: 5px;
        text-align: center;
          font-size: 14px;
        display: none; /* Ẩn hộp khi chưa hover */
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transition: opacity 0.3s ease; /* Thêm hiệu ứng mờ */
        z-index: 9;
         animation: moveUp 0.5s forwards;
           grid-template-columns: repeat(4, 1fr);
        gap: 0;
        border-radius: 5px;
        overflow: hidden;
      }

      /* Sửa lại CSS */
      .menu-content li:hover .dropdown-box-ct,
      .menu-content .dropdown-box-ct:hover {
        opacity: 1; /* Đảm bảo rằng dropdown không ẩn */
        transition: opacity 0.3s ease;
      }

      .dropdown-box-ct-2 {
    grid-template-columns: repeat(3, 1fr);

}

.dropdown-box-ct-3 {
    grid-template-columns: repeat(4, 1fr);
}
.ctm-intem-content{
    color: black !important;
    padding:11px;
    font-weight: 400 !important;
    font-size: 16px !important;
}
.ctmli{
    padding:11px !important;
}


.bottom-left-nav {
  position: absolute;
  bottom: 100px;
  left: 400px;
  border-radius: 10px;
  padding: 20px 40px;
  z-index: 11; /* Đảm bảo xuất hiện trên các phần khác */
}

.bottom-left-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 100px;
}

.bottom-left-nav ul li {
  display: inline;
}

.bottom-left-nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 30px;
  font-weight: bold;
}

.bottom-left-nav ul li a:hover {
  text-decoration: underline;
  color: #ffcc00; /* Hiệu ứng hover */
}

.selected {
    background-color: #ffcc00; /* Chọn màu bạn muốn khi menu con được chọn */
    color: white;
}

#lien-he {
   border: 2px solid rgba(0, 0, 0, 0.3);/* Đường viền màu đen, dày 2px */
    padding: 10px;          /* Thêm khoảng cách bên trong form */
    border-radius: 5px;     /* Tùy chọn: làm mềm góc viền */
    margin-bottom:20px;
}


 .custom-card {
        width: 30%; /* Mặc định 3 khung chia đều 30% */
        height: 502px;
        flex: 1; /* Co giãn trong khoảng 437px - 502px */
        position: relative; /* Để ảnh có thể phủ toàn bộ */
        overflow: hidden; /* Ẩn phần ảnh vượt quá khung */
      }
      .custom-card img {
        width: 100%;
        height: 100%;
        object-fit: fill; /* Đảm bảo ảnh phủ đầy khung mà không bị méo */
      }
      .custom-card img:hover {
        transform: scale(1.05); /* Phóng to ảnh một chút */
      }
      .card-body {
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Nền mờ cho phần nội dung */
        color: white;
        text-align: center;
        padding: 10px;
      }
      .custom-row {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .custom-card:not(:last-child) {
        margin-right: 20px; /* Tạo khoảng cách giữa các khung */
      }
      .bg-half {
        height: 300px; /* Nửa chiều cao của khung card */
      }
      .Aboutcontainer{
        height: 650px; /* Chiều cao tối thiểu là chiều cao của cửa sổ */
        padding: 0px; /* Thêm padding để có khoảng cách từ các cạnh */
        background-color: #ffffff; /* Thêm nền cho body */
      }

@media (prefers-reduced-motion: no-preference) {
  .glbox1,
  .glbox2 {
    opacity: 0;
    animation: slideUp 4s ease-out forwards; /* Ẩn mặc định và chỉ hiện khi cuộn */
  }
}

@media (min-width: 1500px) and (max-width: 1800px) {
  .gbbox2-contents {
    width: 120%;
  }
}
@media (min-width: 1200px) and (max-width: 1500px) {
  .gbbox2-contents {
    width: 130%;
  }
  .hover-box {
  width: 90%;
}
  .navigation1 a {
  font-size: 13px;
}
 .navigation1 li {
  margin: 20px 10px;
}
}
@media (min-width: 900px) and (max-width: 1200px) {
  .gbbox2-contents {
    width: 100%;
  }
  .Steviaclassrom-box-video img {
    width: 100%;
  }
    .hover-box {
  width: 80%;
}
      .navigation1 a {
  font-size: 10px;
}
       .navigation1 li {
  margin: 20px 3px;
  font-size:11px;
}
       .nav-box2-r {
    margin-right: 4px;
}
}
@media (min-width: 720px) and (max-width: 900px) {
        .navigation1 a {
  font-size: 8px;
}
  .glbox2 {
    height: 550px; /* Chiều cao 50% của gl-screen-box */
  }
  .gbbox2-text {
    padding-right: 210px;
  }
    .hover-box {
  width: 90%;
}
          .navigation1 a {
  font-size: 8px;
}
       .navigation1 li {
  margin: 20px 4px;
  font-size:10px;
}
              .nav-box2-r {
    margin-right: 1px;
}
              @keyframes moveUp {
  0% {
    opacity: 0;
    height: 20%;
  }
  100% {
    opacity: 1;
    height: 150px;
  }
}
              .nav-box2-pd {
    margin: 4px;
}
}
@media (min-width: 720px) and (max-width: 1200px) {
  .container {
    max-width: 80%; /* Đảm bảo phần tử không vượt quá chiều rộng của container */
    min-width: 200px; /* Optional: remove any padding between slides */
  }
  .gbbox1-text {
    padding: 30px;
    padding-right: 50px;
  }

  .gbbox2-text {
    padding-right: 20px;
  }
  .Steviaclassrom-contents {
    margin-top: 20px;
    margin-left: 30px;
    margin-right: 30px;
  }
  .custom-button,
  .pr-custom-button,
  .gl-custom-button,
  .box2buttonmore,
  .gbbox2-custom-button,
  .Steviaclassrom-bt-img,
  .Steviaclassrom-custom-button {
    width: 150px;
    height: 50px;
    font-size: 1rem;
  }
  .button-icon,
  .pr-button-icon,
  .gl-button-icon,
  .gbbox2-button-icon {
    margin: 10px;
    padding: 12px 0px 12px 0px;
  }
}
@media (min-width: 320px) and (max-width: 720px) {
    .Aboutcontainer
    {
         height:1700px;
         padding: 0px;
         background-color: #ffffff; /* Thêm nền cho body */
    }
     .custom-row {
          display: block;
        }
        .custom-card {
          width: 100%;
          margin-right: 0;
          margin-bottom: 20px;
        }
   .bg-half
   {
         height: 100px; /* Nửa chiều cao của khung card */
   }
    .headercontents
    {
        background-size: contain;
        height:180px;
    }
    .language-ba-ct{
        display:none;
    }
      .nav-content{
          display:none;
      }
      .bottom-left-nav{
          display:none;
      }
 .navbar-toggler {
        font-size: 40px; /* Tăng kích thước font khi thu nhỏ màn hình */
        padding: 5px; /* Thêm khoảng padding 5px */
    }
  .container {
    max-width: 100%; /* Đảm bảo phần tử không vượt quá chiều rộng của container */
    min-width: 200px; /* Optional: remove any padding between slides */
  }

  .overlay-box {
    display: none; /* Ẩn nav khi màn hình nhỏ hơn 720px */
  }
  .navbarboxcontent{
      display:none;
  }
  .navbarbox {
    display: block;
    position: relative;
  }
  .language-bar {
    top: 15px;
    left: -60px;
  }
  .swiper-button-next {
    display: none;
  }
  .swiper-button-prev {
    display: none;
  }
  .slider-wrapper {
    width: 100%;
  }
  .swiper_wrap {
    padding: 0px;
  }
  .swiper_wrap img {
    width: 255px;
    height: 280px;
  }
  .custom-button,
  .pr-custom-button,
  .gl-custom-button,
  .box2buttonmore,
  .gbbox2-custom-button,
  .Steviaclassrom-custom-button {
    width: 150px;
    height: 50px;
    font-size: 1rem;
  }
  .button-icon,
  .pr-button-icon,
  .gl-button-icon,
  .gbbox2-button-icon {
    margin: 10px;
    padding: 12px 0px 12px 0px;
  }
  .pr-screen-box {
    grid-template-columns: repeat(1, 1fr); /* Chia thành 2 cột */
    grid-template-rows: repeat(1, 1fr); /* Chia thành 2 hàng */
    object-fit: contain; /* Duy trì tỷ lệ hình, toàn bộ hình nằm gọn trong box */
  }
  .pr-screen-box li {
    max-width: 100%;
  }
  .pr-image-box {
    width: 100%; /* Độ rộng hình ảnh, tùy chỉnh */
    background-size: cover;
  }
  .gl-screen-box {
    width: 100%;
    align-items: center; /* Căn chỉnh các phần tử về bên phải */
    justify-content: center; /* Chia đều không gian giữa các phần tử */
  }
  .gbbox1-text {
    padding: 20px;
    padding-bottom: 20px;
  }
  .glbox1 {
    width: 100%; /* Chiều rộng ban đầu */
    max-height: 800px; /* Giới hạn chiều cao tối đa */
  }
  .gl-bt-img {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  .gbbox1-text p {
    font-size: calc(12px + 0.3vw);
  }
  .gbbox2-contents-box {
    width: 100%; /* 2 ô */
  }
  .glbox2 {
    width: 100%;
  }
  .gbbox2-text {
    padding: 0px;
    margin: 0;
    padding-bottom: 20px;
  }
  .gbbox2-text h1 {
    margin-top: 50px;
    margin-left: 20px;
    font-size: calc(20px + 2vw); /* Kích thước chữ tiêu đề tăng theo viewport */
    font-weight: 700;
  }
  .gbbox2-contents {
    justify-content: space-evenly;
    gap: 5px;
  }
  .gbbox2-contents-box {
    width: 48%;
  }
  .Steviaclassrom-box {
    flex-direction: column; /* Chuyển thành cột khi màn hình nhỏ */
  }
  .Steviaclassrom h1 {
    font-size: 60px;
  }
  .video-modal {
    width: 90%; /* Điều chỉnh chiều rộng modal */
    height: auto; /* Đảm bảo chiều cao tự động điều chỉnh */
  }

  video {
    width: 100%; /* Đảm bảo video chiếm hết chiều rộng modal */
    height: auto; /* Giữ tỷ lệ khung hình của video */
  }
  .Steviaclassrom-contents {
    margin-top: 20px;
    margin-left: 0px;
    margin-right: 0px;
  }
  .Steviaclassrom-bt-img {
    justify-content: left;
    margin-left: 0;
  }
  .navbar-brand img{
        filter: brightness(0) invert(1);
  }
  .col-md-8{
      display:none;
  }
     .box-item {
        flex-direction: column !important; /* Chuyển thành hàng dọc */
        width: 450px !important; /* Giới hạn chiều rộng để không bị tràn */
      
        margin: 0 auto; /* Canh giữa nếu cần */
        height: 500px !important; /* Tự động điều chỉnh theo nội dung */
    }

    .box-image-wrapper {
        width: 100% !important; /* Chiều rộng 100% */

    }


    .box-content {
        width: 100% !important; /* Chiếm toàn bộ chiều rộng */
    }
}
       .box-item {
        width: 1360px;
        height: 236px;
        transition: all 0.3s ease-in-out;
        display: flex;
        align-items: center;
        flex-direction: row;
        padding: 0;
        background-color: white;
        border: 1px solid rgba(0, 0, 0, 0.125);
        border-radius: 5px;
        overflow: hidden;
      }
      .box-item:hover .box-image {
            transform: scale(1.1);
      }
       .box-item:hover{
        background-color: #b6d427;
      }
      .box-image {
  width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out;

      }
      .box-content {
        width: 75%;
        padding: 1rem;
      }
      .box-image-wrapper {
    width: 25%;
    height: 100%;
    overflow: hidden; /* Ngăn hình ảnh tràn ra ngoài */
}
      .btn-custom {
    color: #b6d427 !important; /* Màu chữ */
    border: 1px solid #b6d427 !important; /* Viền */
    background-color: white !important; /* Nền */
    padding: 8px 16px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}
      .box-item:hover .btn-custom{
              background-color: #b6d427 !important; /* Khi hover, nền đổi màu */
    color: black !important; /* Chữ trắng */
     border: 1px solid black !important; /* Viền */
      }
      .box-textdate{
          color:black;
      }