:root {
  --font-primary-regular: "mona-sans-regular";
  --font-primary-thin: "mona-sans-thin";
  --font-primary-light: "mona-sans-light";
  --font-primary-medium: "mona-sans-medium";
  --font-primary-semiBold: "mona-sans-semiBold";
  --font-primary-bold: "mona-sans-bold";
  --font-primary-black: "mona-sans-black";
  --font-sf-pro-display-regular: "sf-pro-display-regular";
  --font-sf-pro-display-thin: "sf-pro-display-thin";
  --font-sf-pro-display-light: "sf-pro-display-light";
  --font-sf-pro-display-medium: "sf-pro-display-medium";
  --font-sf-pro-display-semiBold: "sf-pro-display-semiBold";
  --font-sf-pro-display-bold: "sf-pro-display-bold";
  --font-sf-pro-display-black: "sf-pro-display-black";
  --White: #fff;
  --Foundation-Green-green-50: #EAEFEA;
  --gray-9---body-text: #121212;
  --Foundation-Green-green-500: #295E30;
  --bg-1: #F5F5F7;
  --gray-4---stroke: #D8D8D8;
  --Foundation-Red-red-500: #E44119;
  --gray-6---subtle-text: #8C8C8C;
  --Foundation-Green-green-100: #BCCDBE;
  --Foundation-Green-green-300: #6F9272;
  --subtext: #494D59;
  --Grey-9: #090C13;
  --gray-8: #434343;
  --GPCN: #056142;
  --Foundation-Green-green-700: #1C421F;
}

/* font */

@font-face {
  font-family: "mona-sans-regular";
  src: url(../font/mona-sans/MonaSans-Regular.ttf);
}

@font-face {
  font-family: "mona-sans-light";
  src: url(../font/mona-sans/MonaSans-Light.ttf);
}

@font-face {
  font-family: "mona-sans-medium";
  src: url(../font/mona-sans/MonaSans-Medium.ttf);
}

@font-face {
  font-family: "mona-sans-semiBold";
  src: url(../font/mona-sans/MonaSans-SemiBold.ttf);
}

@font-face {
  font-family: "mona-sans-bold";
  src: url(../font/mona-sans/MonaSans-Bold.ttf);
}

@font-face {
  font-family: "mona-sans-black";
  src: url(../font/mona-sans/MonaSans-Black.ttf);
}

@font-face {
  font-family: "sf-pro-display-regular";
  src: url(../font/SF-pro-display/SF-Pro-Display-Regular.otf);
}

@font-face {
  font-family: "sf-pro-display-light";
  src: url(../font/SF-pro-display/SF-Pro-Display-Light.otf);
}

@font-face {
  font-family: "sf-pro-display-medium";
  src: url(../font/SF-pro-display/SF-Pro-Display-Medium.otf);
}

@font-face {
  font-family: "sf-pro-display-semiBold";
  src: url(../font/SF-pro-display/SF-Pro-Display-Semibold.otf);
}

@font-face {
  font-family: "sf-pro-display-bold";
  src: url(../font/SF-pro-display/SF-Pro-Display-Bold.otf);
}

@font-face {
  font-family: "sf-pro-display-black";
  src: url(../font/SF-pro-display/SF-Pro-Display-Black.otf);
}

label {
  font-weight: unset !important;
}

body {
  font-family: var(--font-primary-regular);
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-9---body-text);
  top: 0 !important;
}

.text-white {
  color: var(--White) !important;
}

.color-green {
  color: var(--GPCN);
}

.required {
  color: #F00;
}

.text-center {
  text-align: center !important;
}

.bg-second {
  background-color: var(--bg-1);
}

a {
  text-decoration: none !important;
}

/* h1:not(.editor-content h1),
h2:not(.editor-content h2),
h3:not(.editor-content h3),
h4:not(.editor-content h4),
h5:not(.editor-content h5),
h6:not(.editor-content h6),
p:not(.editor-content p) {
  margin: 0;
} */

p {
  text-align: justify;
}

.overlay-header,
.btn-close-menu,
.popup-search {
  display: none;
}

.bg-second {
  background-color: #F5F5F7;
}

.header-container {
  padding: 16px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: all 0.3s ease;
  border-bottom: 1px solid;
  border-color: transparent;
}

.header-container.fixed,
body:not(.main-home-container) .header-container {
  background-color: var(--White);
  border-color: rgba(255, 255, 255, 0.20);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
}

.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.header-right-first {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-language {
  position: relative;
  margin-left: 12px;
}

.header-language::after {
  content: "";
  position: absolute;
  top: 0;
  left: -12px;
  width: 1px;
  height: 100%;
  background-color: rgba(216, 216, 216, 0.50);
}

.header-language-current {
  display: flex;
  padding: 2px 8px 2px 2px;
  align-items: center;
  gap: 4px;
  border-radius: 62px;
  background: var(--Foundation-Green-green-50);
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-semiBold);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  cursor: pointer;
}

.header-language-current span {
  width: 22px;
}

.header-language-list {
  position: absolute;
  top: 28px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  width: max-content;
  border-radius: 8px;
  background: var(--White);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.header-language-list.active {
  opacity: 1;
  visibility: visible;
}

.header-language-item {
  display: flex;
  padding: 2px 8px 2px 2px;
  align-items: center;
  gap: 4px;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-semiBold);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  cursor: pointer;
}

.navigator-menu {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  list-style: none;
}

.navigator-menu li {
  flex-wrap: wrap;
}

.navigator-menu li span,
.navigator-menu li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--gray-9---body-text);
  font-family: var(--font-sf-pro-display-semiBold);
  font-size: 14px;
  font-style: normal;
  line-height: 24px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.navigator-menu li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border-bottom: 3px solid;
  border-color: transparent;
}

.navigator-menu li i {
  font-size: 12px;
  margin-top: -3px;
  transition: all 0.3s ease;
}

.navigator-menu>li:hover,
.navigator-menu>li.active {
  border-color: var(--Foundation-Green-green-500);
}

.navigator-menu>li:hover>span,
.navigator-menu>li:hover>a,
.navigator-menu>li.active>span,
.navigator-menu>li.active>a,
.navigator-menu>li:hover>i,
.navigator-menu>li.active>i {
  color: var(--Foundation-Green-green-500);
}

.navigator-menu li .sub-menu {
  display: flex;
  width: 282px;
  padding: 20px;
  gap: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0;
  list-style: none;
  background: #FFF;
  box-shadow: 0 4px 10px 0 rgba(70, 63, 63, 0.25);
  position: absolute;
  top: 120%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* opacity: 1;
  visibility: visible; */
  transition: all 0.3s ease;
}

.navigator-menu li .sub-menu li {
  width: 100%;
}

.navigator-menu li .sub-menu::after {
  content: '';
  position: absolute;
  top: -20px;
  width: 100%;
  height: 20px;
  background-color: transparent;
}

.navigator-menu li .sub-menu li a,
.navigator-menu li .sub-menu li span {
  font-family: var(--font-primary-semiBold);
  border-width: 2px;
  width: 100%;
}

.navigator-menu li .sub-menu li:hover>a,
.navigator-menu li .sub-menu li:hover>span {
  border-color: var(--Foundation-Green-green-500);
  color: var(--Foundation-Green-green-500);
}

.navigator-menu li .sub-menu li .sub-menu {
  top: -7px;
  left: calc(100% + 20px);
  z-index: 10;
}

.navigator-menu li .sub-menu li .sub-menu::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60px;
  width: 60px;
  height: 100%;
  background-color: transparent;
}

.navigator-menu li:hover>.sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.main-container {
  min-height: 100vh;
  background-color: var(--White);
}

.main-container:not(:has(.main-home-container)) {
  margin-top: 96px;
}

.footer-first-inner {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.footer-first-inner .right {
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.footer-first-inner .right .content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-first-inner .right .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
  opacity: 0.6;
}

.footer-first-inner .right .content .desc {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.footer-first-inner .left {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1 0 0;
}

.footer-first-inner .left .item {
  margin-right: 32px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}


.footer-first-inner .left .item::after {
  content: "";
  position: absolute;
  top: 0;
  right: -32px;
  width: 1px;
  height: 100%;
  background-color: rgba(216, 216, 216, 0.50);
}

.footer-first-inner .left .item .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
}

.footer-first-inner .left .item .content .title,
.item-follow-us .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
  opacity: 0.6;
}

.footer-first-inner .left .item .content .desc {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.item-follow-us {
  display: flex;
  align-items: center;
  gap: 16px;
}

.item-follow-us .social-list {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-first {
  background: var(--bg-1);
}

.footer-second {
  padding: 48px 0 28px 0;
}

.footer-second-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-second-inner .left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.btn-color-green {
  display: flex;
  height: 40px;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 40px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: var(--Foundation-Green-green-500);
  color: var(--White);
  text-align: center;
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  cursor: pointer;
}

.footer-second-inner .right {
  color: var(--Foundation-Green-green-500);
  text-align: center;
  font-family: var(--font-primary-semiBold);
  font-size: 22px;
  font-style: normal;
  line-height: 30px;
  text-transform: uppercase;
  width: min(100%, 476px);
}

.footer-menu {
  padding: 28px 0 0 0;
  margin: 28px 0 0 0;
  border-top: 1px solid var(--gray-4---stroke);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-menu>li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer-menu>li>a,
.footer-menu>li>span {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  text-transform: uppercase;
}

.footer-menu>li .sub-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
  max-width: 180px;
}

.footer-menu>li .sub-menu li a {
  color: var(--gray-9---body-text);
  transition: all 0.3s ease;
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.footer-menu>li .sub-menu li:hover a {
  color: var(--Foundation-Green-green-500);
}

.banner-item {
  position: relative;
}

.banner-home .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
}

.sec-72 {
  padding: 72px 0;
}

.sec-56 {
  padding: 56px 0;
}

.home-box-1-inner {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.home-box-1-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  width: 900px;
}

.home-box-1-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.main-title {
  font-family: var(--font-primary-bold);
  font-size: 36px;
  font-style: normal;
  line-height: 44px;
  text-transform: uppercase;
}

.green-text {
  color: var(--Foundation-Green-green-500);
}

.home-box-1-right {
  display: flex;
  padding-left: 56px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
}

.home-box-1-right .item {
  width: 100%;
  display: flex;
  padding: 8px 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.home-box-1-right .item .number {
  color: var(--Foundation-Green-green-500);
  font-family: var(--font-primary-bold);
  font-size: 56px;
  font-style: normal;
  line-height: 64px;
}

.home-box-1-right .item:nth-child(even) .number {
  color: var(--Foundation-Red-red-500);
}

.home-box-1-right .item:not(:last-child) {
  padding-bottom: 12px;
  border-bottom: 1px solid #D8D8D8;
}

.home-box-1-left-content {
  width: 100%;
}

.map-wrapper {
  position: relative;
  width: 900px;
}

.map-image {
  width: 100%;
  display: block;
}

.asia {
  position: absolute;
  top: 260px;
  left: 270px;
}

#lineCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.pin {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  animation: pulse 2s infinite;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.home-box-3 {
  position: relative;
}

.home-box-3-img {
  position: absolute;
  bottom: 0;
  right: 0;
}

.home-box-3-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 2;
}

.home-box-3-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-color-red {
  display: flex;
  height: 44px;
  padding: 12px 7px 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 40px;
  background: var(--Foundation-Red-red-500);
  color: var(--White) !important;
  text-align: center;
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  position: relative;
}

.btn-color-red::before {
  content: "";
  border-radius: 45px;
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.04);
  transition: all 0.6s ease;
  transform: scaleX(0);
}

.btn-color-red:hover::before {
  transform: scaleX(1);
}

.btn-color-red span,
.btn-color-red .btn-icon {
  z-index: 1;
}

.btn-color-red .btn-icon,
.btn-view-all .btn-icon {
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 32px;
  background: var(--White);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.leader-item {
  padding: 0 0 24px 20px;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 64px;
}

.leader-item .leader-image {
  position: relative;
  width: 412px;
}

.leader-item .leader-image img {
  border-radius: 16px;
}

.leader-item .leader-image::after {
  content: '';
  width: 260px;
  height: 392px;
  border-radius: 16px;
  background: var(--Foundation-Green-green-500);
  position: absolute;
  left: -20px;
  bottom: -24px;
}

.leader-item .leader-image img {
  position: relative;
  width: 100%;
  z-index: 10;
}

.leader-item .leader-content {
  display: flex;
  /* flex: 1; */
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  flex-shrink: 0;
  width: min(100%, 632px);
}

.leader-item .leader-content .first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.leader-item .leader-content .first img {
  width: 60px;
}

.leader-item .leader-content .first .desc {
  color: #121212;
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 78px;
}

.leader-item .leader-content .second {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.leader-item .leader-content .second .name {
  color: #121212;
  font-family: var(--font-primary-bold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  text-transform: uppercase;
}

.leader-item .leader-content .second .position {
  width: 297px;
  color: #595959;
}

.leader-item .leader-content .third {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.leader-item .leader-content .third .count {
  color: #BFBFBF;
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.leader-item .leader-content .third .count .current {
  color: var(--Foundation-Red-red-500);
  font-size: 24px;
  margin-right: 4px;
}

.home-box-4-inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.home-box-4-content {
  width: min(100%, 1100px);
  margin: 0 auto;
}

.value-wrapper {
  max-width: 100%;
  position: relative;
}

.value-row {
  display: flex;
  justify-content: space-between;
  gap: 180px;
}

.value-item h3 {
  color: var(--Foundation-Green-green-500);
  font-family: var(--font-primary-bold);
  font-size: 22px;
  font-style: normal;
  line-height: 30px;
}

.value-item div {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.value-row.top {
  justify-content: flex-start;
}

.value-row.bottom {
  justify-content: center;
}

.home-box-5-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.news-item .news-img {
  display: block;
  width: 100%;
  height: 288px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.news-item .news-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.news-item:hover .news-img img {
  transform: scale(1.05);
}

.news-item .news-content {
  display: flex;
  padding-top: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.news-tag {
  color: var(--Foundation-Red-red-500);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
}

.news-title {
  color: var(--gray-9---body-text) !important;
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 56px;
  transition: all 0.3s ease;
}

.news-item:hover .news-title,
.news-item-type-2:hover .news-title {
  color: var(--Foundation-Green-green-500) !important;
}

.news-date {
  color: var(--gray-6---subtle-text, #8C8C8C);
}

.news-slider .owl-dots,
.other-project-slider .owl-dots,
.certificate-slider .owl-dots,
.vision-mission-box-1-content-list .owl-dots {
  margin-top: 24px;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: center;
}

.news-slider .owl-dot span,
.other-project-slider .owl-dot span,
.certificate-slider .owl-dot span,
.vision-mission-box-1-content-list .owl-dot span {
  display: none;
}

.news-slider .owl-dot,
.other-project-slider .owl-dot,
.certificate-slider .owl-dot,
.vision-mission-box-1-content-list .owl-dot {
  width: 8px;
  height: 8px;
  border-radius: 6px;
  background: var(--Foundation-Green-green-100);
  transition: all 0.3s ease;
}

.news-slider .owl-dot.active,
.other-project-slider .owl-dot.active,
.certificate-slider .owl-dot.active,
.vision-mission-box-1-content-list .owl-dot.active {
  width: 36px;
  background: var(--Foundation-Green-green-500);
}

.home-box-6 {
  padding: 100px 0;
  background-image: url('/img/bg-home-6.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.home-box-6::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(41, 94, 48, 0.00) 50%, rgba(41, 94, 48, 0.95) 78.88%);
  z-index: 1;
}

.home-box-6 .container {
  position: relative;
  z-index: 2;
}

.home-box-6-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
}

.home-box-6-inner .first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: var(--White);
}

.home-box-6-inner .first .main-title {
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.form-newsletter {
  width: 450px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form-newsletter .btn-submit-newsletter {
  border: none;
  width: max-content;
}

.form-newsletter .btn-submit-newsletter .btn-icon {
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 32px;
  background: var(--White);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.form-newsletter .form-control {
  display: flex;
  height: 48px;
  padding: 12px 8px 12px 16px;
  align-items: center;
  border-radius: 48px;
  border: 1px solid var(--gray-4---stroke);
  background-color: transparent;
  color: var(--White);
}

.home-box-7 {
  display: flex;
  padding: 32px 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--Foundation-Green-green-500);
}

.home-box-7-inner {
  width: min(100%, 1100px);
  margin: 0 auto;
}

.home-box-2 {
  padding: 72px 0 0 0;
}

.home-box-2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.home-box-2-header .desc {
  width: min(100%, 560px);
}

.home-box-2-content {
  position: relative;
}

.home-box-2-content-img {
  width: 100%;
  height: 760px;
  position: relative;
}

.home-box-2-content-img::after {
  background: linear-gradient(184deg, rgba(4, 17, 31, 0.00) 55.32%, rgba(4, 17, 31, 0.80) 80.76%);
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.home-box-2-content-img-item {
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s ease;
  top: 0;
  left: 0;
}

.home-box-2-content-img-item:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}

.home-box-2-content-img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-box-2-content-img-item.active {
  opacity: 1;
  visibility: visible;
}

.home-box-2-content-list {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  overflow: hidden;
}

.home-box-2-content-list .home-box-2-content-list-items {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 32px;
}

.home-box-2-content-list-item {
  flex: 1;
  position: relative;
  transition: all 0.6s ease;
  transform: translateY(216px);
  cursor: pointer;
}

.home-box-2-content-list-item.active {
  transform: translateY(0);
}

.home-box-2-content-list-item .first {
  padding: 32px;
  border-top: 1px solid var(--Foundation-Green-green-300, #6F9272);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 0.6s ease;
}

.home-box-2-content-list-item.active .first {
  opacity: 0;
  visibility: hidden;
}

.home-box-2-content-list-item.active .second {
  opacity: 1;
  visibility: visible;
}

.home-box-2-content-list-item .first .title {
  color: var(--White);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-transform: uppercase;
}

.home-box-2-content-list-item .first .number {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.20);
  font-family: var(--font-primary-bold);
  font-size: 88px;
  font-style: normal;
  line-height: 88px;
  text-transform: uppercase;
}

.home-box-2-content-list-item .second {
  display: flex;
  padding: 32px 32px 24px 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
  border-radius: 16px 16px 0 0;
  background: var(--Foundation-Green-green-500);
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s ease;
}

.home-box-2-content-list-item .second .title {
  color: var(--White);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-transform: uppercase;
}

.home-box-2-content-list-item .second .desc {
  color: var(--White);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 120px;
}

.home-box-2-content-list-item .second .line {
  width: 100%;
  height: 1px;
  background-color: #6F9272;
}

.btn-view-service .btn-icon {
  display: flex;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background: var(--White);
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.btn-view-service {
  color: var(--White) !important;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.30);
}

.banner-item:has(.banner-content)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.00) 22.26%, rgba(0, 0, 0, 0.00) 46.69%);
}

.banner-content {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 1;
}

.breadcrumb {
  padding: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb>li+li:before {
  display: none;
}

.breadcrumb li a {
  color: var(--White);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
}

.breadcrumb li i {
  font-size: 12px;
  color: var(--Foundation-Red-red-500);
}

.banner-content .banner-title {
  color: #FFF;
  font-family: var(--font-primary-bold);
  font-size: 48px;
  font-style: normal;
  line-height: 56px;
  text-transform: uppercase;
  margin: 0 !important;
}

.thong-diep-container {
  padding-bottom: 120px;
}

.thong-diep-inner .first {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 30px;
}

.thong-diep-inner .first .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.thong-diep-inner .first .left .left-img {
  border-radius: 16px;
  overflow: hidden;
}

.thong-diep-inner .first .left .left-info {
  display: flex;
  padding: 16px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.thong-diep-inner .first .left .left-info .name {
  font-family: var(--font-primary-bold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.thong-diep-inner .first .right {
  display: flex;
  padding-left: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 1 0 0;
}

.thong-diep-inner .first .right-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 32px 64px;
}

.thong-diep-inner .first .right-list .item {
  width: calc(50% - 32px);
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.thong-diep-inner .first .right-list .item:nth-child(2n)::after {
  content: '';
  position: absolute;
  top: 0;
  left: -32px;
  width: 1px;
  height: 100%;
  background-color: rgba(216, 216, 216, 0.50);
}

.thong-diep-inner .first .right-list .item .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.thong-diep-inner .first .right-list .item .content .title {
  color: var(--gray-8);
  width: 200px;
}

.thong-diep-inner .first .right-list .item .content .desc {
  color: var(--Foundation-Green-green-500);
  font-family: var(--font-primary-medium);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.management-inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.menu-list,
.award-menu {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 32px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.menu-list-item,
.award-menu-item {
  display: flex;
  padding-bottom: 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-bottom: 2px solid;
  border-color: transparent;
  cursor: pointer;
  color: rgba(38, 38, 38, 0.80);
  font-family: var(--font-primary-bold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  position: relative;
}

.menu-list-item:not(:last-child),
.award-menu-item:not(:last-child) {
  margin-right: 32px;
}

.menu-list-item:not(:last-child)::after,
.award-menu-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: -32px;
  background-color: var(--gray-4---stroke);
  width: 1px;
  height: 20px;
}

.menu-list-item.active,
.menu-list-item:hover,
.award-menu-item.active,
.award-menu-item:hover {
  color: var(--Foundation-Green-green-500);
  border-color: var(--Foundation-Green-green-500);
}

.menu-box {
  width: 100%;
  display: none;
  flex-direction: column;
  gap: 56px;
}

.menu-box.active {
  display: flex;
}

.menu-box-item {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 30px;
  flex-wrap: wrap;
}

.menu-box-mangager.center .menu-box-item {
  justify-content: center;
}

/* .menu-box-mangager-title:first-child + .menu-box-mangager .menu-box-item {
  justify-content: center;
}

.menu-box-mangager:last-child .menu-box-item,
.menu-box-mangager-title + .menu-box-mangager .menu-box-item {
  justify-content: flex-start;
} */

.menu-box-mangager:not(:first-child) {
  padding-top: 40px;
  border-top: 1px solid var(--gray-4---stroke);
}

.menu-box-mangager-title {
  color: var(--Foundation-Green-green-500);
  font-family: var(--font-primary-semiBold);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
  text-transform: uppercase;
}

.menu-box-mangager-sub-title {
  color: var(--Foundation-Red-red-500);
  font-family: var(--font-primary-semiBold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  text-transform: uppercase;
  margin-bottom: -20px;
}

.menu-box-mangager-sub-title+.menu-box-mangager,
.menu-box-mangager-title+.menu-box-mangager {
  padding-top: 0;
  border-top: none;
}

.management-inner .menu-box {
  gap: 40px;
}

.management-item {
  width: calc(50% - 15px);
  border-bottom: 4px solid;
  border-color: transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding: 0 48px 16px 0;
}

.management-item:hover,
.management-item.active {
  border-color: var(--Foundation-Green-green-500);
}

.management-item-img {
  width: 200px;
  height: 200px;
  border-radius: 4px;
  overflow: hidden;
}

.management-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.management-item-content {
  display: flex;
  padding: 16px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
}

.management-item-content .before-name {
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  text-transform: uppercase;
}

.management-item-content .name {
  font-family: var(--font-primary-bold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  text-transform: uppercase;
}

.management-item-content .position {
  color: #121212;
  height: 48px;
}

.management-info-item {
  display: none;
  width: 100%;
  padding: 32px;
  align-items: flex-start;
  gap: 30px;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
  position: relative;
}

.management-info-item.active {
  display: flex;
}

.management-info-img {
  width: 300px;
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
}

.management-info-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.management-info-content {
  flex: 1;
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  color: var(--gray-8);
  max-height: 270px;
  overflow-y: scroll;
  padding-right: 8px;
}

.management-info-content::-webkit-scrollbar {
  width: 4px;
}

.management-info-content::-webkit-scrollbar-thumb {
  background-color: var(--Foundation-Green-green-500);
  border-radius: 10px;
}

.btn-close-management-info {
  cursor: pointer;
}

.corporate-culture-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.corporate-culture-header {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.corporate-culture-header .desc {
  color: var(--Foundation-Green-green-500);
  text-align: center;
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
}

.corporate-culture-content {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
}

.corporate-culture-content .list {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
}

.corporate-culture-content .list .item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.corporate-culture-content .list .item .title {
  color: var(--Foundation-Green-green-500);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-transform: uppercase;
}

.corporate-culture-content .list .item .desc {
  padding-bottom: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 140px;
  color: var(--gray-9---body-text);
  text-align: justify;
}

.history-inner,
.award-inner {
  display: flex;
  width: 100%;
  padding-top: 32px;
  align-items: flex-start;
  gap: 30px;
}

.history-right,
.time-line-list {
  width: 100px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 120px;
}

.history-item,
.time-line-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 80px;
  color: var(--gray-6---subtle-text);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.history-item:not(:last-child):after,
.time-line-item:not(:last-child):after {
  content: '';
  position: absolute;
  top: 24px;
  right: 10px;
  width: 1px;
  height: 80px;
  border-right: 1px dashed var(--gray-4---stroke);
}

.history-item:hover,
.history-item.active,
.time-line-item:hover,
.time-line-item.active {
  color: var(--Foundation-Green-green-500);
}

.history-item .dot,
.time-line-item .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid;
  border-color: transparent;
  position: relative;
}

.history-item .dot::after,
.time-line-item .dot::after {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--gray-4---stroke);
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}

.history-item:hover .dot::after,
.history-item.active .dot::after,
.time-line-item:hover .dot::after,
.time-line-item.active .dot::after {
  background-color: var(--Foundation-Green-green-500);
}

.history-item.active .dot,
.time-line-item.active .dot {
  border-color: var(--Foundation-Green-green-500);
}

.history-left,
.award-left {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex-shrink: 0;
}

.history-content-item {
  display: flex;
  align-items: flex-start;
  gap: 52px;
}

.history-content-item:not(:last-child) {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.history-content-item .right {
  display: flex;
  width: 1036px;
  align-items: flex-start;
  gap: 30px;
}

.history-content-item .right .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
}

.history-content-item .right .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 22px;
  font-style: normal;
  line-height: 30px;
}

.history-content-item .right .content .img {
  width: 432px;
}

.history-content-item .left {
  display: flex;
  padding: 16px 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  transform: rotate(-90deg);
  color: var(--gray-4---stroke);
  font-family: var(--font-primary-bold);
  font-size: 96px;
  font-style: normal;
  line-height: 88px;
  width: 88px;
  margin-top: -8px;
  transition: all 0.3s ease;
}

.strategic-vision-box-2-item-inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}

.strategic-vision-box-2-item-inner .img {
  flex: 1;
}

.strategic-vision-box-2-item-inner .img img {
  width: 100%;
}

.strategic-vision-box-2-item-inner .content {
  display: flex;
  padding-left: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex: 1 0 0;
}

.strategic-vision-box-2-item-inner .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 36px;
  font-style: normal;
  line-height: 44px;
  text-transform: uppercase;
}

.strategic-vision-box-2-item-inner .content .desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.strategic-vision-box-2-item-inner .content .desc .first {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.strategic-vision-box-2-item-inner .content .desc .list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.strategic-vision-box-2-item-inner .content .desc .list .item {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

.strategic-vision-box-2-item:nth-child(2n) {
  background-color: var(--bg-1);
}

.strategic-vision-box-2-item:nth-child(2n) .strategic-vision-box-2-item-inner {
  flex-direction: row-reverse;
}

.strategic-vision-box-2-item:nth-child(2n) .strategic-vision-box-2-item-inner .content {
  padding-left: 0;
  padding-right: 32px;
}

.award-inner {
  flex-direction: column;
}

.award-box-item {
  display: none;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
}

.award-box-item.active {
  display: flex;
}

.award-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.award-left .award-left-item {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.award-left .award-left-item .header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-4---stroke);
  color: var(--Foundation-Green-green-100);
  font-family: var(--font-primary-bold);
  font-size: 36px;
  font-style: normal;
  line-height: 44px;
  text-transform: uppercase;
  width: 100%;
}

.award-left .award-left-item .list {
  display: flex;
  align-items: center;
  gap: 30px 24px;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}

.award-left .award-left-item .list .item {
  width: calc(25% - 18px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.award-left .award-left-item .list .item .img {
  width: 100%;
  height: 180px;
  border-radius: 16px;
  border: 1px solid var(--gray-4---stroke);
  background: #F5F5F7;
  padding: 8px;
}

.award-left .award-left-item .list .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

.award-left .award-left-item .list .item .title {
  padding: 0 16px;
  text-align: center;
  font-family: var(--font-primary-medium);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 72px;
}

.award-img-container {
  background-color: var(--bg-1);
}

.award-img-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.award-img-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 16px;
}

.award-img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.award-img-item {
  position: relative;
  overflow: hidden;
  grid-column: span 7 / span 2;
  grid-row: span 2 / span 2;
  border-radius: 8px;
}

.award-img-item.first {
  grid-column: span 12 / span 5;
  grid-row: span 4 / span 4;
}

.partners-box-first {
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
}

.partners-box-first .desc {
  width: min(100%, 960px);
  margin: 0 auto;
  text-align: center;
}

.partners-box-second {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.partners-box-second .main-title {
  text-align: center;
}

.customer-item {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  background: var(--bg-1);
}

.customer-item .img {
  width: auto;
  height: 36px;
}

.customer-item .img img {
  height: 100%;
}

.customer-item .avatar {
  width: 68px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}

.customer-item .info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.customer-item .info-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
}

.customer-item .info-content .name {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.customer-item .info-content .position {
  color: var(--gray-6---subtle-text);
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
}

.customer-item .desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 240px;
}

.network-of-operations-inner {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.network-of-operations-left {
  width: 645px;
  margin-top: 68px;
}

.network-of-operations-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.office-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.office-list .item {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 40px;
}

.office-list .item:not(:last-child) {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.office-list .item-title {
  width: 156px;
  color: var(--Foundation-Red-red-500);
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
  text-transform: uppercase;
}

.office-list .item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
}

.office-list .item-content .item-content-item,
.office-list .item-content .project-item {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.office-list .item-content .project-item {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.office-list .item-content .project-item .name,
.office-list .item-content .project-item .acreage {
  flex: 1 0 0;
}

.network-of-operations-form .form-control {
  display: flex;
  height: 56px;
  padding: 8px 16px;
  align-items: center;
  gap: 16px;
  border-radius: 32px;
  border: 1px solid var(--Foundation-Green-green-100);
  appearance: none;
  background-image: url(/img/icons/down.svg);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
  color: var(--gray-9---body-text);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  box-shadow: none;
}

.news-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.news-inner-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

.news-inner-header .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  width: min(100%, 470px);
}

.news-inner-header .right {
  width: min(100%, 446px);
}

.news-inner-header .left .news-title {
  color: var(--Grey-9);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  height: auto;
  opacity: 0.9;
}

.form-search-news {
  width: 100%;
  display: flex;
  padding: 8px 8px 8px 16px;
  align-items: center;
  gap: 16px;
  border-radius: 32px;
  border: 1px solid var(--Foundation-Green-green-100);
}

.form-search-news .form-control {
  flex: 1;
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
}

.form-search-news button {
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 24px;
  background: var(--Foundation-Red-red-500);
  border: none;
}

.news-menu {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.news-menu-item {
  display: flex;
  height: 44px;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 40px;
  border: 1px solid;
  border-color: var(--Foundation-Green-green-100);
  color: var(--Foundation-Green-green-500);
  text-align: center;
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.news-menu-item:hover,
.news-menu-item.active {
  background: var(--Foundation-Green-green-500);
  border-color: var(--Foundation-Green-green-500);
  color: var(--White);
}

.news-list-first .news-slider .owl-dots {
  display: none;
}

.news-list-first {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.news-list-second {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px 64px;
  flex-wrap: wrap;
}

.news-item-type-2 {
  width: calc(50% - 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.news-list-second .news-item-type-2:last-child,
.news-list-second .news-item-type-2:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
  border: none;
}

.news-item-type-2 .news-second {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.news-item-type-2 .news-second .img {
  width: 280px;
  height: 192px;
  border-radius: 8px;
  overflow: hidden;
}

.news-item-type-2 .news-second .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.news-item-type-2:hover .news-second .img img {
  transform: scale(1.05);
}

.news-item-type-2 .news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.news-item-type-2 .news-content .desc {
  color: var(--gray-8);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 120px;
}

.news-item-type-2 .news-content .tag-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.pagination {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-content: center;
  margin: 0;
}

.pagination li a,
.pagination li span {
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  border-radius: 32px !important;
  background: #EEF0F4;
  color: var(--gray-9---body-text);
  text-align: center;
  font-size: 14px;
  line-height: 22px;
  transition: all 0.3s ease;
  border: none;
}

.pagination li:hover a,
.pagination li.active a,
.pagination li.active span {
  background: var(--Foundation-Green-green-500);
  color: var(--White);
}

.insider-news-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  margin-bottom: 40px;
}

.insider-news-item .img {
  border-radius: 8px;
  overflow: hidden;
}

.insider-news-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.insider-news-item:hover .img img {
  transform: scale(1.05);
}

.insider-news-item .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 22px;
  font-style: normal;
  line-height: 30px;
  padding-right: 8px;
  transition: all 0.3s ease;
}

.insider-news-item:hover .title {
  color: var(--Foundation-Green-green-500);
}

.news-inner:has(.insider-news-list) .pagination {
  margin-top: -40px;
}

.banner-news-details .banner-content {
  bottom: unset;
  top: 50%;
  transform: translate(-50%, -50%);
}

.banner-news-details .breadcrumb {
  justify-content: center;
  margin-bottom: 24px;
}

.banner-news-details .banner-title {
  text-align: center;
}

.news-detail-share {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  justify-content: center;
  margin-top: 24px;
}

.other-news-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.other-news-list {
  width: 100%;
}

.news-share {
  padding-top: 24px;
  border-top: 1px solid var(--gray-4---stroke);
  width: min(100%, 1000px);
  margin: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.news-share a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.10);
}

.news-detail-content {
  width: min(100%, 1000px);
  margin: 0 auto;
}

.news-detail-content img {
  max-width: 100%;
  height: auto;
}

.career-menu {
  padding: 56px 0 72px 0;
}

.career-menu:has(.career-menu-item[data-item="2"].active) {
  background-color: #F9FAFB;
}

.career-menu-inner {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 64px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.career-menu-item {
  padding-bottom: 16px;
  border-bottom: 1px solid;
  border-color: transparent;
  color: rgba(38, 38, 38, 0.80);
  font-family: var(--font-primary-bold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.career-menu-item.active,
.career-menu-item:hover {
  border-color: var(--Foundation-Green-green-500);
  color: var(--Foundation-Green-green-500);
}

.career-menu-item:not(:last-child)::after {
  content: '';
  background-color: var(--gray-4---stroke);
  width: 1px;
  height: 20px;
  position: absolute;
  top: 0;
  right: -32px;
}

.career-box-1 {
  padding-bottom: 56px;
}

.career-box-1 .container {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.career-box-1 .left {
  display: flex;
  padding-right: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex: 1 0 0;
}

.career-box-1 .left .main-title {
  padding-right: 64px;
}

.career-box-1 .left .data-list {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.career-box-1 .left .data-item {
  display: flex;
  padding: 0 46px 0 16px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--gray-4---stroke);
}

.career-box-1 .left .data-item .number {
  color: var(--Foundation-Green-green-500);
  font-family: var(--font-primary-bold);
  font-size: 40px;
  font-style: normal;
  line-height: 56px;
  height: 56px;
}

.career-box-1 .left .data-item .desc {
  color: var(--gray-8);
  font-family: var(--font-primary-medium)
}

.career-box-1 .left .data-item:last-child {
  border-right: none;
  padding: 0 16px;
}

.career-box-1 .right {
  flex: 1 0 0;
}

.career-box-1 .right img {
  width: 100%;
}

.container::after,
.container::before {
  display: none;
}

.career-box-2 .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.career-item-first {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 40px;
}

.career-item-first .left {
  flex: 1 0 0;
}

.career-item-first .right {
  display: flex;
  padding: 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  border-bottom: 3px solid var(--Foundation-Green-green-500);
  background: var(--White);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
}

.career-item-first .right .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.career-item {
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.career-item-img {
  display: flex;
  height: 288px;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.career-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.career-item:hover .career-item-img img {
  transform: scale(1.05);
}

.career-item-title {
  margin-top: 16px;
  color: var(--gray-9---body-text) !important;
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  font-family: var(--font-primary-bold);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 64px;
  width: 100%;
  transition: all 0.3s ease;
}

.career-item:hover .career-item-title {
  color: var(--Foundation-Green-green-500) !important;
}

.career-box-3 .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}

.career-box-3-item {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.career-box-3-item .img {
  flex: 1;
  position: relative;
}

.career-box-3-item .img::after {
  content: "";
  position: absolute;
  left: -16px;
  bottom: -16px;
  width: 563px;
  height: 350px;
  border-radius: 16px;
  background: #DCEADC;
}

.career-box-3-item .img img {
  width: 629px;
  height: 385px;
  border-radius: 16px;
  z-index: 1;
  position: relative;
}

.career-box-3-item .desc {
  display: flex;
  width: 638px;
  padding-left: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.career-box-3-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.career-box-3-item:nth-child(odd) .desc {
  padding-left: 0;
  padding-right: 32px;
}

.career-box-3-item:nth-child(odd) .img::after {
  left: auto;
  right: -16px;
}

.career-box {
  display: none;
}

.career-box.active {
  display: block;
}

.career-list {
  width: min(100%, 1170px);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.career-list-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.search-career {
  display: flex;
  align-items: center;
  gap: 64px;
  width: 100%;
}

.search-career .title {
  color: var(--Grey-9);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.form-search-career {
  display: flex;
  padding: 8px 8px 8px 16px;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
  border-radius: 32px;
  border: 1px solid var(--Foundation-Green-green-100);
}

.form-search-career .form-control {
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent;
}

.form-search-career button.btn-search-news {
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: none;
  padding: 0;
}

.career-box-second {
  background-color: #F9FAFB;
  padding: 0 0 56px 0;
}

.career-list-item {
  padding: 32px;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.career-list-item .first {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.career-list-item .first .title {
  color: var(--gray-9---body-text) !important;
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  transition: all 0.3s ease;
}

.career-list-item:hover .first .title {
  color: var(--Foundation-Green-green-500) !important;
}

.career-list-item .location {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  color: var(--gray-8) !important;
}

.career-list-item .second {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.career-list-item .second .desc {
  color: #595959;
  opacity: 0.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  height: 48px;
}

.application-deadline {
  color: var(--subtext);
  display: flex;
  align-items: center;
  gap: 8px;
}

.application-deadline .date {
  color: var(--Foundation-Green-green-500);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.career-list .pagination {
  margin-top: -40px;
}

.career-detail-container {
  background: #F9FAFB;
}

.career-detail-inner {
  display: flex;
  width: min(100%, 1170px);
  margin: auto;
  align-items: flex-start;
  gap: 30px;
}

.hightlight-career {
  display: flex;
  width: 364px;
  padding: 24px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex-shrink: 0;
  border-radius: 16px;
  border: 1px solid rgba(216, 216, 216, 0.50);
  background: var(--White);
  position: sticky;
  top: 120px;
}

.hightlight-career-title {
  color: var(--Grey-9);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.hightlight-career-item:not(:last-child) {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(216, 216, 216, 0.50);
  width: 100%;
}

.hightlight-career-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.hightlight-career-item .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.career-detail-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
}

.career-detail-content-title {
  color: var(--Grey-9);
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
  text-transform: uppercase;
}

.career-contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.career-contact-info .title {
  color: var(--Grey-9);
  font-family: var(--font-primary-semiBold);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.career-contact-info .list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.career-contact-info .list .item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.career-contact-info .list .item a {
  color: var(--gray-9---body-text) !important;
}

.form-career {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  gap: 32px;
  border-radius: 16px;
  border: 1px solid rgba(216, 216, 216, 0.50);
  background: #F6F6F6;
}

.form-career-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  gap: 32px;
  margin-bottom: 24px;
}

.form-career-header .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.form-career-header .desc {
  color: #595959;
}

.form-career .form-item {
  width: 100%;
  margin-bottom: 16px;
}

.form-career .form-item label {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.form-career .form-control {
  width: 100%;
  resize: none;
  min-height: 48px;
  display: flex;
  padding: 12px 16px;
  align-items: center;
  gap: 115px;
  gap: 32px;
  border-radius: 8px;
  border: 1px solid;
  background: var(--White);
  border-color: rgba(216, 216, 216, 0.50);
  transition: all 0.3s ease;
  box-shadow: none;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.form-career .form-control:focus,
.form-career .form-control:hover {
  border-color: var(--Foundation-Green-green-500);
}

.form-career .form-control::placeholder {
  color: #595959;
}

.upload-wrapper {
  border: 1px dashed var(--Foundation-Green-green-500);
  border-radius: 12px;
  padding: 30px;
  width: 100%;
  margin: 20px 0 0 0;
  background: #fff;
  transition: all 0.2s ease;
}

.uploadBox.error .upload-wrapper {
  border-color: var(--Foundation-Red-red-500);
}

.upload-wrapper input {
  display: none;
}

.upload-wrapper.dragover {
  background: var(--Foundation-Green-green-100);
  border-color: var(--Foundation-Red-red-500);
}

.upload-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.upload-text {
  font-size: 16px;
}

.upload-btn {
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid var(--Foundation-Red-red-500);
  background: var(--White);
  color: var(--Foundation-Red-red-500);
  cursor: pointer;
}

.upload-btn:hover {
  background: var(--Foundation-Red-red-500);
  color: var(--White);
}

.upload-note {
  font-size: 12px;
  color: var(--Grey-9);
}

.file-preview {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  border-radius: 8px;
  border: 1px dashed #FF8A04;
  background: var(--White);
}

.file-item {
  display: flex;
  align-items: center;
  gap: 24px;
  gap: 32px;
}

.file-item .file-left {
  display: flex;
  align-items: center;
  gap: 8px;
  gap: 32px;
}

.file-item .file-left .file-name {
  color: var(--Grey-9);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.file-item .file-remove {
  cursor: pointer;
}

.investors-container .container {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.investors-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

.investors-main>.main-title {
  width: min(100%, 1000px);
  margin: auto;
}

.time-line-box {
  width: min(100%, 1000px);
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.investors-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.investors-item {
  display: flex;
  padding: 12px 24px 12px 12px;
  align-items: center;
  gap: 16px;
  border-radius: 8px;
  background: var(--White);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.10);
  width: 100%;
  cursor: pointer;
}

.investors-item .content {
  flex: 1;
}

.investors-item .content .date {
  color: var(--gray-6---subtle-text);
}

.investors-item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
  transition: all 0.3s ease;
}

.investors-item:hover .content .title {
  color: var(--Foundation-Green-green-500);
}

.investors-item .actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.investors-item .actions .btn-see {
  padding-right: 16px;
  border-right: 1px solid var(--gray-4---stroke);
}

.information-released-box .main-title {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-4---stroke);
  width: 100%;
  color: var(--Foundation-Green-green-100);
}

.investors-item-type-2 img {
  border-radius: 12px;
  overflow: hidden;
}

.investors-item-type-2 .content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 14px;
}

.investors-item-type-2 .content .title {
  font-family: var(--font-primary-bold);
}

.happy-cncers-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  gap: 32px;
}

.happy-cncers-content {
  width: 100%;
}

.happy-cncers-slider .owl-stage-outer {
  margin: -8px;
  padding: 8px;
}

.event-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 16px;
  border: 1px solid var(--gray-4---stroke);
  background: var(--White);
  overflow: hidden;
  cursor: pointer;
}

.event-item-img {
  width: 100%;
  height: 290px;
  border-radius: 8px;
  overflow: hidden;
}

.event-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.event-item:hover .event-item-img img {
  transform: scale(1.05);
}

.event-item-content {
  display: flex;
  padding: 16px 24px 24px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  gap: 32px;
}

.event-item-content .title {
  color: #121212;
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 56px;
  width: 100%;
}

.event-item-content .content {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.event-item-content .content-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-8);
}

.event-item-content .content-item img {
  width: 24px;
}

.event-item-content .content-item:last-child {
  width: 100%;
  flex: unset;
  height: 48px;
}

.event-item-content .action {
  width: 100%;
  display: flex;
  height: 44px;
  align-items: flex-start;
  gap: 8px;
}

.event-item-content .action .btn-register-event {
  flex: 1;
  padding: 12px 24px;
}

.btn-border-red {
  border: 1px solid var(--Foundation-Red-red-500);
  color: var(--Foundation-Red-red-500);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 40px;
  transition: all 0.3s ease;
  text-align: center;
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  text-transform: uppercase;
  cursor: pointer;
}

.modal-event .modal-dialog {
  width: min(95%, 1200px);
  height: 90vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.modal-event .modal-content {
  width: 100%;
  border-radius: 16px;
}

.modal-event .modal-header {
  display: flex;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.modal-event .modal-header::after,
.modal-event .modal-header::before {
  display: none;
}

.modal-event .modal-title {
  color: #9DA8C3;
  text-align: center;
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-transform: uppercase;
}

.modal-event .modal-body {
  padding: 0;
}

.event-info {
  width: min(95%, 1000px);
  margin: -45px auto 0 auto;
  display: flex;
  padding: 16px 32px;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 0 10px 0 rgba(7, 63, 146, 0.15);
  position: relative;
  z-index: 10;
}

.event-modal .btn-register-event {
  padding: 12px 24px;
}

.event-info .left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.event-info .left .first {
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.event-info .left .second {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.event-info .left .second-item {
  display: flex;
  align-items: center;
  color: var(--Foundation-Red-red-500);
  font-family: var(--font-primary-semiBold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  gap: 8px;
}

.event-modal-content {
  display: flex;
  padding: 24px 32px 72px 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  gap: 32px;
  background: var(--White, #FFF);
}

.event-modal-content .title {
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
}

.register-event-modal .modal-dialog {
  width: min(95%, 800px);
  height: 90vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.register-event-modal .modal-content {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

.register-event-modal .modal-header {
  display: flex;
  height: 152px;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  border-bottom: 1px solid var(--gray-4---stroke);
  background-image: url('/img/bg-register-event.webp');
  background-size: cover;
}

.form-gop-y-modal .modal-header {
  align-items: unset !important;
}

.get-advice-modal .modal-header {
  height: 96px;
  align-items: center;
}

.register-event-modal .modal-header::after,
.register-event-modal .modal-header::before {
  display: none;
}

.register-event-modal .modal-header .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.register-event-modal .modal-header .left .title {
  color: var(--White);
  text-align: center;
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-transform: uppercase;
}

.register-event-modal .modal-header .left .name-event {
  color: var(--White);
  font-family: var(--font-primary-regular);
  font-size: 20px;
  font-style: italic;
  line-height: 28px;
  text-decoration: underline;
}

.register-event-modal .modal-header .right img {
  filter: brightness(0) invert(1);
  cursor: pointer;
}

.register-event-modal .modal-body {
  display: flex;
  padding: 24px 32px 72px 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;

  background: var(--White);
}

.form-register-event {
  width: 100%;
}

.form-register-event .row {
  margin: 0 -8px;
}

.form-register-event .row>* {
  padding: 0 8px;
}

.form-register-event .form-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-9---body-text);
  margin-bottom: 16px;
}

.form-register-event .form-item,
.form-register-event .form-radio {
  margin-bottom: 16px;
}

.form-register-event .form-item label,
.form-register-event .form-radio label {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-semiBold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.form-register-event .form-control {
  display: flex;
  min-height: 48px;
  padding: 12px 16px;
  align-items: center;
  gap: 115px;
  border-radius: 8px;
  border: 1px solid;
  border-color: rgba(216, 216, 216, 0.50);
  background: var(--white, #FFF);
  outline: none;
  box-shadow: none;
  color: var(--gray-9---body-text);
}

.form-register-event .form-control.form-date {
  background-image: url('/img/icons/calendar-icon.svg');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px 20px;
  padding-right: 32px;
}

.form-register-event .form-control::placeholder {
  color: var(--gray-6---subtle-text);
}

.form-register-event .form-control:focus,
.form-register-event .form-control:hover {
  border-color: var(--Foundation-Green-green-500);
}

.form-register-event .form-select,
.form-register-event .form-control.form-time {
  appearance: none;
  background-image: url('/img/icons/chevon-down-green.svg');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  padding-right: 32px;
}

.form-register-event .form-button {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-register-event .form-button .btn-submit-register,
.form-register-event .form-button .btn-see-detail {
  width: 248px;
  padding: 12px 24px;
}

.form-register-event .form-radio {
  display: flex;
  align-items: center;
  gap: 32px;
}

.form-register-event .form-radio label input {
  display: none;
  padding-left: 40px;
}

.form-register-event .form-radio .radio-item label {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-direction: row-reverse;
  font-family: var(--font-primary-regular);
  cursor: pointer;
}

.form-register-event .form-radio .radio-item label span {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid;
  border-color: rgba(216, 216, 216, 0.50);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.form-register-event .form-radio .radio-item label span::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: var(--Foundation-Green-green-500);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.form-register-event .form-radio .radio-item label input:checked+span {
  border-color: var(--Foundation-Green-green-500);
}

.form-register-event .form-radio .radio-item label input:checked+span::after {
  opacity: 1;
}

.happy-cncers-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.happy-cncers-header .main-desc-type-2 {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.list-img-happy-cncers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.img-happy-cncers-item {
  width: calc(33% - 8px);
  border-radius: 16px;
  overflow: hidden;
}

.img-happy-cncers-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.happy-cncersbox-4-bg {
  width: 100%;
  height: 880px;
}

.happy-cncersbox-4-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.happy-cncers-box-4 {
  position: relative;
}

.happy-cncers-box-4 .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.happy-cncersbox-4-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.happy-cncersbox-4-content {
  width: min(100%, 700px);
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.happy-cncersbox-4-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  color: var(--White);
}

.happy-cncersbox-4-item {
  display: flex;
  width: min(100%, 450px);
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.happy-cncersbox-4-item .title {
  display: flex;
  padding: 8px 24px;
  align-items: center;
  gap: 232px;
  border-radius: 90px;
  background: rgba(0, 0, 0, 0.15);
  color: var(--White);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.happy-cncersbox-4-item .desc {
  color: var(--White);
}

.happy-cncersbox-5-inner {
  display: flex;
  width: 100%;
  border-radius: 16px;
  align-items: center;
  gap: 64px;
}

.happy-cncersbox-5-left {
  flex: 1;
  display: flex;
  padding-right: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
}

.happy-cncersbox-5-left .first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;

}

.happy-cncersbox-5-left .first .desc {
  font-family: var(--font-primary-medium);
}

.happy-cncersbox-5-left .second {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.happy-cncersbox-5-left .second .note {
  color: var(--Foundation-Red-red-500);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
}

.happy-cncersbox-5-left .second .btn-view-all {
  width: max-content;
}

.project-item {
  width: 100%;
  margin-bottom: 40px;
}

.project-item-img {
  width: 100%;
  height: 464px;
  border-radius: 16px;
  overflow: hidden;
  display: block;
}

.project-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease-in-out;
}

.project-item:hover .project-item-img img {
  transform: scale(1.05);
}

.project-item-content {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.project-item-content .title {
  color: var(--Grey-9);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.project-item-content .locaiton {
  display: flex;
  align-items: center;
  color: #595959;
}

.project-list {
  margin-top: 56px;
  gap: 40px;
}

.project-list .row>*:last-child .project-item,
.project-list .row>*:nth-last-child(2):nth-child(odd) .project-item {
  margin-bottom: 0;
}

.project-detail-inner {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 30px;
}

.project-detail-left {
  display: flex;
  width: 758px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.project-detail-left .location {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.project-detail-right {
  display: flex;
  flex-direction: column;
  padding: 32px;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  background: #FFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.project-detail-right .item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 30px;

}

.project-detail-right .item .left {
  display: flex;
  width: 186px;
  align-items: center;
  gap: 16px;
  font-family: var(--font-primary-medium);
}

.project-detail-right .item .desc {
  flex: 1;
}

.project-detail-right .item:not(:last-child) {
  padding-bottom: 16px;
  border-bottom: 1px solid #D9D9D9;
}

.other-project-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.other-project-content {
  width: 100%;
}

.other-project-slider .project-item .locaiton img {
  width: 24px;
}

.other-project-slider .owl-dots {
  margin-top: -16px;
}

.project-detail-second-content {
  margin-top: 40px;
}

.project-detail-container {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.project-img {
  width: 100%;
  height: 406px;
  border-radius: 16px;
  overflow: hidden;
  display: block;
}

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

.subsidiary-company-inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.subsidiary-company-inner .main-title {
  font-size: 32px;
  line-height: 40px;
}

.list-company-menu {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 30px;
}

.company-menu-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.company-menu-item .img {
  width: 100%;
  height: 232px;
}

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

.company-menu-item .content {
  display: flex;
  padding: 24px 32px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  background: #F5F5F7;
  transition: all 0.3s ease;
}

.company-menu-item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-semiBold);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.company-menu-item .content i {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  text-align: center;
  transition: all 0.3s ease;
}

.subsidiary-company-inner .content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.subsidiary-company-inner .list-company-box {
  width: 100%;
}

.list-company-box .company-box-item {
  display: none;
  width: 100%;
  padding: 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  background: #FFF;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.20);
}

.list-company-box .company-box-item.active {
  display: flex;

}

.list-company-box .company-box-item .list-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

.list-company-box .company-box-item .list-item:first-child {
  padding-bottom: 40px;
  border-bottom: 1px solid #BCCDBE;
}

.list-company-box .company-box-item .list-item .title {
  color: var(--Foundation-Green-green-500);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-transform: uppercase;
}

.list-company-box .company-box-item .list-item .list-company {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  flex-wrap: wrap;
}

.list-company-box .company-box-item .list-item .list-company .company-item {
  display: flex;
  width: 190px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.list-company-box .company-box-item .list-item .list-company .company-item .logo {
  width: 100%;
  height: 66px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-company-box .company-box-item .list-item .list-company .company-item .logo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.list-company-box .company-box-item .list-item .list-company .company-item span {
  color: var(--gray-8);
  text-align: center;
  font-family: var(--font-primary-medium);
  text-transform: uppercase;
}

.company-menu-item:hover .content,
.company-menu-item.active .content {
  background: var(--Foundation-Green-green-500);
}

.company-menu-item:hover .content .title,
.company-menu-item.active .content .title {
  color: var(--White);
}

.company-menu-item:hover .content i {
  color: var(--White);
}

.company-menu-item.active .content i {
  color: var(--White);
  transform: rotate(180deg);
}

.esg-banner-content {
  display: flex;
  width: 652px;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-radius: 16px;
  background: var(--Foundation-Green-green-500);
  color: var(--White);
  float: right;
}

.esg-box-1 {
  padding: 40px 0;
  text-align: center;
  color: var(--Foundation-Green-green-500);
  text-align: center;
  font-family: var(--font-primary-bold);
  font-size: 18px;
  font-style: normal;
  line-height: 24px;
}

.esg-box-main {
  padding-top: 72px;
}

.esg-box-main .container {
  display: flex;
  flex-direction: column;
}

.esg-box-2-inner {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.esg-box-2-item {
  display: flex;
  align-items: flex-start;
  gap: 90px;
}

.esg-box-2-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.esg-box-2-item .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;

  width: 470px;
}

.esg-box-2-item .content .desc {
  text-align: justify;
}

.esg-box-2-item .img {
  flex: 1;
  height: 500px;
  border-radius: 16px;
  overflow: hidden;
}

.esg-box-2-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.esg-box-3 {
  padding: 32px 0;
  background-image: url('../img/giai-thuong-bg.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.esg-box-3-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.esg-box-3-item img {
  width: 100%;
  max-width: 180px;
}

.esg-box {
  gap: 0;
}

.esg-box-3-item .name-award {
  text-align: center;
  font-family: var(--font-primary-bold);
  font-size: 20px;
  font-style: normal;
  line-height: 22px;
  width: 100%;
  color: var(--White);
}

.esg-box-3-item .time-award {
  color: var(--White);
  font-size: 20px;
  font-style: normal;
  line-height: 22px;
}

.esg-box-4-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.esg-box-4-inner .main-title {
  color: var(--Foundation-Green-green-500);
}

.esg-box-4-content {
  width: 100%;
}

.esg-box-5-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 72px 64px;
}

.esg-box-5-item {
  width: 30%;
  height: 498px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  position: relative;
  border-radius: 16px;
  background: #EDF8EE;
  transition: all 0.3s ease;
  cursor: pointer;
}

.esg-box-5-item:hover {
  background-color: #FCECE8;
}

.esg-box-5-item .title {
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-transform: uppercase;
}

.esg-box-5-item .number {
  position: absolute;
  bottom: 8px;
  right: 12px;
  color: #BFBFBF;
  text-align: right;
  font-family: var(--font-primary-bold);
  font-size: 56px;
  font-style: normal;
  line-height: 64px;
  transition: all 0.3s ease;
}

.esg-box-5-item:hover .number {
  color: var(--gray-9---body-text);
}

.esg-box-6-data {
  display: flex;
  align-items: flex-start;
  gap: 110px;
}

.esg-box-6-data-item {
  display: flex;
  padding: 8px 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  position: relative;
}

.esg-box-6-data-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: -55px;
  width: 1px;
  height: 144px;
  background-color: var(--gray-4---stroke);
}

.esg-box-6-data-item:first-child {
  flex: unset;
  width: 186px;
}

.esg-box-6-data-item .number {
  color: var(--Foundation-Red-red-500);
  font-family: var(--font-primary-bold);
  font-size: 52px;
  font-style: normal;
  line-height: 60px;
}

.esg-box-6-data-item .number .until {
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.esg-box-6-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  margin-top: 72px;
}

.esg-box-6-item {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

.esg-box-6-item .img {
  position: relative;
  width: 629px;
  height: 440px;
}

.esg-box-6-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  z-index: 10;
  position: relative;
}

.esg-box-6-item .img::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: -16px;
  width: 563px;
  height: 404px;
  border-radius: 16px;
  background: #DCEADC;
}

.esg-box-6-item:nth-child(even) {
  flex-direction: row-reverse;
}

.esg-box-6-item:nth-child(even) .img::after {
  left: unset;
  right: -16px;
}

.esg-box-6-item .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.production-technology-inner {
  display: flex;
  align-items: flex-start;
  z-index: 10;
  position: relative;
}

.production-technology-inner .left {
  display: flex;
  padding-right: 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex: 1 0 0;
}

.production-technology-inner .right {
  width: 787px;
  position: relative;
}

.production-technology-inner .right .img {
  width: 100%;
}

.production-technology-inner .right .img img {
  width: 100%;
}

.production-technology-inner .box-link-item {
  position: absolute;
  top: 191px;
  left: 0;
  width: 200px;
  height: 36px;
  z-index: 10;
  cursor: pointer;
}

.production-technology-inner .box-link-item-2 {
  top: 136px;
}

.production-technology-inner .box-link-item-3 {
  top: 88px;
  left: 30px;
}

.production-technology-inner .box-link-item-4 {
  top: 46px;
  left: 79px;
  height: 30px;
}

.production-technology-inner .box-link-item-5 {
  left: 140px;
  top: 3px;
  height: 42px;
}

.production-technology-inner .box-link-item-6 {
  right: 201px;
  left: unset;
  top: 3px;
  height: 42px;
}

.production-technology-inner .box-link-item-7 {
  top: 46px;
  right: 147px;
  left: unset;
  height: 30px;
}

.production-technology-inner .box-link-item-8 {
  top: 88px;
  right: 94px;
  left: unset;
}

.production-technology-inner .box-link-item-9 {
  top: 139px;
  right: 67px;
  left: unset;
}

.production-technology-inner .box-link-item-10 {
  top: 187px;
  right: 1px;
  left: unset;
  width: 255px;
}

.industrial-solutions-inner .box-link-item-2 {
  top: 128px;
  left: 19px;
}

.industrial-solutions-inner .box-link-item-3 {
  top: 59px;
  left: 60px;
}

.industrial-solutions-inner .box-link-item-4 {
  top: 5px;
  left: 131px;
  height: 43px;
}

.industrial-solutions-inner .box-link-item-5 {
  right: 182px;
  left: unset;
  top: 7px;
  height: 42px;
}

.industrial-solutions-inner .box-link-item-6 {
  right: 115px;
  left: unset;
  top: 56px;
  height: 32px;
}

.industrial-solutions-inner .box-link-item-7 {
  top: 118px;
  right: 71px;
  left: unset;
  height: 30px;
}

.industrial-solutions-inner .box-link-item-8 {
  top: 192px;
  right: 51px;
  left: unset;
}

.industrial-logistics-inner .box-link-item-2 {
  top: 128px;
  left: 19px;
}

.industrial-logistics-inner .box-link-item-3 {
  top: 59px;
  left: 36px;
  width: 218px;
}

.industrial-logistics-inner .box-link-item-4 {
  top: 5px;
  left: 109px;
  width: 210px;
  height: 43px;
}

.industrial-logistics-inner .box-link-item-5 {
  right: 182px;
  left: unset;
  top: 7px;
  height: 42px;
}

.industrial-logistics-inner .box-link-item-6 {
  right: 115px;
  left: unset;
  top: 56px;
  height: 32px;
}

.industrial-logistics-inner .box-link-item-7 {
  top: 118px;
  right: 71px;
  left: unset;
  height: 30px;
}

.industrial-logistics-inner .box-link-item-8 {
  top: 192px;
  right: 51px;
  left: unset;
}

.industrial-logistics-inner .box-link-item:nth-child(2) {
  height: 60px;
}

.production-technology-container .main-title {
  font-size: 32px;
  line-height: 40px;
}

.production-technology-box-1-content {
  width: 100%;
}

.production-technology-box-1-content-list .item {
  display: flex;
  padding: 8px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
}

.production-technology-box-1-content-list .item .number {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 56px;
}

.production-technology-box-1-content-list .item .title {
  margin-top: -8px;
  text-align: center;
}

.production-technology-header {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 30px;
}

.production-technology-header .desc {
  color: var(--gray-8);
  flex: 1;
}

.production-technology-header .main-title {
  flex: 1;
}

.services-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 16px;
  background: var(--White);
  overflow: hidden;
  margin-bottom: 40px;
  cursor: pointer;
}

.services-item .img {
  position: relative;
  height: 224px;
  overflow: hidden;
}

.services-item .img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.services-item:hover .img>img {
  transform: scale(1.05);
}

.services-item .icon {
  display: flex;
  width: 64px;
  min-height: 64px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 64px;
  background: linear-gradient(90deg, #285D2C 0%, #A4C939 100%);
}

.services-item .content {
  height: 256px;
  padding: 0 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: -34px;
  z-index: 1;
}

.services-item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
  transition: all 0.3s ease;
}

.services-item:hover .content .title {
  color: var(--Foundation-Green-green-500);
}

.industrial-solutions-service-item .icon {
  background: var(--GPCN);
}

.services-item.industrial-solutions-service-item:hover .content .title {
  color: var(--GPCN);
}

.production-technology-content {
  width: 100%;
}

.logoSwiper .item {
  display: flex;
  width: 100%;
  height: 76px;
  padding: 4px 12px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--gray-4---stroke);
}

.logoSwiper .item img {
  /* height: 100%; */
  width: 100%;
}

.certificate-item {
  display: flex;
  width: 100%;
  padding: 32px 64px;
  align-items: center;
  gap: 30px;
  border-radius: 16px;
  background: linear-gradient(90deg, #285D2C 0%, #A4C939 100%);
}

.certificate-item .img {
  width: 240px;
}

.certificate-item .content {
  display: flex;
  padding-left: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 1 0 0;
  color: var(--White);
}

.certificate-item .content .title {
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.production-technology-box-6 {
  background-image: url('../img/production-technology-box-6-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  height: 400px;
}

.production-technology-box-6::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(271deg, rgba(0, 0, 0, 0.00) 21.84%, rgba(0, 0, 0, 0.00) 33.89%, rgba(0, 0, 0, 0.80) 98.96%);
}

.book-service-content {
  width: min(100%, 878px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  margin-top: 70px;
}

.book-service-content .title {
  color: var(--White, #FFF);
  font-family: var(--font-primary-bold);
  font-size: 36px;
  font-style: normal;
  line-height: 44px;
  text-transform: uppercase;
}

.book-service-content .actions {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.pt-detail-box-6 .btn-get-advice {
  background: linear-gradient(90deg, #285D2C 0%, #A4C939 100%);
}

.book-service-content .actions .btn-booking {
  background: var(--White);
}

.book-service-content .actions .btn-booking span {
  background: linear-gradient(90deg, #285D2C 0%, #A4C939 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out;
}

.book-service-content .actions .btn-booking .btn-icon {
  background: linear-gradient(90deg, #285D2C 0%, #A4C939 100%);
}

.book-service-content .actions .btn-booking .btn-icon img {
  filter: brightness(0) invert(1);
}

.industry-logistics-box-2 {
  padding-bottom: 0 !important;
}

.industry-logistics-box-1 {
  padding: 72px 0 56px 0;
}

.industry-logistics-box-1 .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.industry-logistics-box-1-first {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 30px;
}

.industry-logistics-box-1-first .left {
  padding-right: 64px;
  flex: 1;
}

.industry-logistics-box-1-first .right {
  position: relative;
}

.industry-logistics-box-1-first .right .point {
  position: absolute;
  background-color: transparent;
}

.industry-logistics-box-1-first .right .point.point-industry-logistics {
  top: 33%;
  left: 23%;
  width: 50%;
  height: 100px;
}

.industry-logistics-box-1-first .right .point.point-logistics {
  top: 5%;
  left: 37%;
  width: 24%;
  height: 111px;
}

.industry-logistics-box-1-second {
  width: 100%;
}

.industry-logistics-box-1-second-header {
  width: min(100%, 1000px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

.industry-logistics-box-1-second .img {
  width: 100%;
}

.industry-logistics-box-1-second .img img {
  width: 100%;
}

.industrial-solutions-box-1 .production-technology-header {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.industrial-solutions-box-1 .production-technology-header .desc {
  max-width: 1000px;
  margin: 0 auto;
}

.industrial-solutions-box-1-content {
  width: min(100%, 1000px);
  margin: auto;
}

.industrial-solutions-box-1-content img {
  width: 100%;
}

.industrial-solutions-certificate-slider .owl-dots {
  display: none;
}

.industrial-solutions-certificate-slider .owl-stage-outer {
  margin: -8px;
  padding: 8px;
}

.industrial-solutions-certificate-item {
  border-radius: 16px;
  background: var(--White);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
}

.industrial-solutions-certificate-item .content .title {
  color: var(--GPCN);
}

.industrial-solutions-certificate-item .content .desc {
  color: var(--gray-9---body-text);
}

.industrial-solutions-box-3 {
  padding: 0 0 72px 0;
}

.industrial-solutions-box-4 {
  background-image: url('../img/industrial-solutions-box-4-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.industrial-solutions-box-4 .book-service-content .actions .btn-get-advice,
.industrial-solutions-box-4 .book-service-content .actions .btn-booking .btn-icon {
  background: var(--GPCN);
}

.industrial-solutions-box-4 .book-service-content .actions .btn-booking span {
  background: transparent;
  color: var(--GPCN);
  -webkit-text-fill-color: unset
}

.logistics-service-item .icon {
  background: var(--Foundation-Red-red-500);
}

.logistics-service-item:hover .content .title {
  color: var(--Foundation-Red-red-500);
}

.logistics-box-2 {
  padding-bottom: 32px !important;
}

.logistics-box-4 {
  background-image: url('../img/logistics-box-3-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.logistics-box-4-inner {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 30px;
}

.logistics-box-4-left {
  display: flex;
  padding-right: 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  flex: 1;
}

.logistics-box-4-right {
  flex: 1;
  position: relative;
}

.logistics-box-4-right::after {
  content: '';
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 100%;
  height: 100%;
  background: var(--Foundation-Red-red-500);
  border-radius: 16px;
}

.logistics-box-4-right img {
  width: 100%;
  position: relative;
  z-index: 1;
}

.certificate-logistics-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}

.certificate-logistics-item .img {
  width: 100%;
}

.certificate-logistics-item .img img {
  width: 100%;
}

.certificate-logistics-item .title {
  color: var(--gray-9---body-text);
  text-align: center;
  font-family: var(--font-primary-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.logistics-box-1-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.logistics-box-1-content {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.logistics-box-1-item {
  display: flex;
  padding: 8px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
}

.logistics-box-1-item .number {
  color: var(--Foundation-Red-red-500);
  font-family: var(--font-primary-bold);
  font-size: 56px;
  font-style: normal;
  line-height: 64px;
}

.logistics-box-1-item .desc {
  color: var(--gray-8);
  text-align: center;
}

.logistics-box-1-item:not(:last-child) {
  padding-right: 24px;
  border-right: 1px solid var(--gray-4---stroke);
}

.logistics-box-1-item:nth-child(2) {
  flex: unset;
  width: max-content;
  padding: 8px 67px 0 43px;
}

.logistics-box-2-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.logistics-box-2-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.logistics-box-2-map {
  width: 100%;
  position: relative;
}

.logistics-box-2-map .img-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.logistics-box-2-map .img-map:first-child {
  position: relative;
  top: unset;
  left: unset;
}

.logistics-box-2-map .img-map.active {
  opacity: 1;
}

.logistics-box-2-map img {
  width: 100%;
}

.logistics-box-2-map .point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: transparent;
  cursor: pointer;
}

.logistics-box-2-map .point.point-asia {
  top: 36%;
  left: 76%;
  width: 35%;
  height: 59%;
}

.logistics-box-2-map .point.point-euro {
  top: 38%;
  left: 51%;
  width: 12%;
  height: 16%;
}

.logistics-box-2-map .point.point-na {
  top: 42%;
  left: 21%;
  width: 17%;
  height: 16%;
}

.logistics-box-2-map .point.point-sa {
  top: 78%;
  left: 31%;
  width: 14%;
  height: 42%;
}

.logistics-box-2-list {
  display: flex;
  align-items: stretch;
  gap: 30px;
  width: 100%;
}

.logistics-box-2-item {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 16px;
  background: var(--bg-1);
  width: calc(25% - 15px);
  cursor: pointer;
}

.logistics-box-2-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.logistics-box-2-item-header .icon {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 14px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 64px;
  background: var(--Foundation-Red-red-500);
  font-family: var(--font-primary-medium);
  color: var(--White);
}

.logistics-box-2-item-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.logistics-box-2-item-body>div {
  width: calc(50% - 12px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logistics-box-2-item-body .item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.logistics-box-2-item-body .item .name-city {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  white-space: nowrap;
}

.production-technology-box-4 {
  background-image: url('../img/production-technology-box-4-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 1070px;
}

.production-technology-box-4-inner {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

.production-technology-box-4-left {
  width: 645px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.production-technology-box-4-left .main-title {
  width: min(100%, 400px);
  color: var(--Foundation-Green-green-500);
}

.production-technology-box-4-content {
  display: flex;
  flex-direction: column;
}

.production-technology-box-4-content .item {
  display: none;
  width: 100%;
  height: 762px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(164, 201, 57, 0.25) 0%, rgba(164, 201, 57, 0.00) 100%);
}

.production-technology-box-4-content .item.active {
  display: flex;
}

.production-technology-box-4-content .item .img {
  width: 100%;
  height: 372px;
  overflow: hidden;
  border-radius: 8px;
}

.production-technology-box-4-content .item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.production-technology-box-4-content .item .content {
  display: flex;
  padding: 32px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.production-technology-box-4-content .item .content .title {
  color: var(--Foundation-Green-green-500);
  font-family: var(--font-primary-bold);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
  text-transform: uppercase;
}

.production-technology-box-4-content .item .content .address {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.production-technology-box-4-right {
  flex: 1;
  position: relative;
}

.production-technology-box-4-right .img-map {
  margin-right: -88px;
}

.production-technology-box-4-right .production-technology-box-4-box {
  width: 195px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid var(--Foundation-Green-green-500);
  background: var(--White);
  cursor: pointer;
}

.production-technology-box-4-right .production-technology-box-4-box .title {
  color: var(--Foundation-Green-green-500);
  text-align: center;
  font-family: var(--font-primary-bold);
  font-size: 18px;
  font-style: normal;
  line-height: normal;
  text-transform: uppercase;
}


.production-technology-box-4-right .production-technology-box-4-box .desc {
  color: var(--Foundation-Green-green-500);
  font-size: 14px;
  font-style: normal;
  line-height: 20px;
}

.production-technology-box-4-right .production-technology-box-4-box:hover,
.production-technology-box-4-right .production-technology-box-4-box.active {
  background: linear-gradient(90deg, #285D2C 0%, #A4C939 100%);
  border-color: none;
}


.production-technology-box-4-right .production-technology-box-4-box:hover .title,
.production-technology-box-4-right .production-technology-box-4-box.active .title,
.production-technology-box-4-right .production-technology-box-4-box:hover .address,
.production-technology-box-4-right .production-technology-box-4-box.active .address {
  color: var(--White) !important;
}

.production-technology-box-4-right .production-technology-box-4-box {
  position: absolute;
  top: 0;
  right: 10px;
}

.production-technology-box-4-right .production-technology-box-4-box:nth-child(1) {
  top: -10px;
}

.production-technology-box-4-right .production-technology-box-4-box:nth-child(2) {
  top: 12%;
}

.production-technology-box-4-right .production-technology-box-4-box:nth-child(3) {
  top: 22%;
}

.production-technology-box-4-right .production-technology-box-4-box:nth-child(4) {
  top: 32%;
}

.production-technology-box-4-right .production-technology-box-4-box:last-child {
  top: 92%;
}

.production-technology-box-4-right .production-technology-box-4-box:nth-last-child(2) {
  top: 82%;
}

.production-technology-box-4-right .production-technology-box-4-box:nth-last-child(3) {
  top: calc(70% - 8px);
}

.production-technology-box-4-right .production-technology-box-4-box:nth-last-child(4) {
  top: 59%;
}

.investors-box {
  margin-top: 56px;
}

.ui-timepicker-wrapper {
  width: 350px;
}

.ui-timepicker-wrapper::-webkit-scrollbar {
  width: 4px;
}

.ui-timepicker-wrapper::-webkit-scrollbar-thumb {
  background-color: #285D2C;
  border-radius: 4px;
}

.ui-timepicker-wrapper::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 4px;
}

.ui-timepicker-disabled {
  display: none;
}

.cnc-ecosystem-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.cnc-ecosystem-item {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  cursor: pointer;
}

.cnc-ecosystem-item:last-child,
.cnc-ecosystem-item:nth-child(4) {
  flex-direction: row-reverse;
}

.cnc-ecosystem-item-img {
  width: 660px;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
}

.cnc-ecosystem-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.cnc-ecosystem-item:hover .cnc-ecosystem-item-img img {
  transform: scale(1.03);
}

.cnc-ecosystem-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 40px;
}

.cnc-ecosystem-item:last-child .cnc-ecosystem-item-content,
.cnc-ecosystem-item:nth-child(4) .cnc-ecosystem-item-content {
  padding-left: 0;
  padding-right: 40px;
}

.cnc-ecosystem-item-title {
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.cnc-ecosystem-item .cnc-ecosystem-item-content .btn-color-red {
  width: 160px;
}

.vision-mission-inner {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 56px;
}

.vision-mission-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  border-radius: 8px;
  background: #F5F5F7;
  overflow: hidden;
}

.vision-mission-img {
  width: 100%;
  height: 252px;
}

.vision-mission-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vision-mission-number {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 8px;
  border: 1px solid var(--White);
  margin: -32px auto 0 auto;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vision-mission-number>div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--White);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-primary-bold);
  font-size: 36px;
  font-style: normal;
  line-height: 44px;
  color: var(--Foundation-Red-red-500);
}

.vision-mission-content {
  display: flex;
  width: 100%;
  padding: 0 6px 16px 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.vision-mission-title {
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.vision-mission-desc {
  text-align: center;
  height: 72px;
}

.event-modal-img {
  width: 100%;
  height: 564px;
}

.event-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-header-mobile,
.btn-close-mobile,
.wave-container>img:last-child,
.home-box-2-mobile {
  display: none;
}

.history-content-item .right .content .desc {
  text-align: justify;
}

.signature {
  display: flex;
  padding: 1px 0;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 240px;
  float: right;
}

.signature .position {
  color: var(--gray-8);
}

.signature .name {
  color: var(--gray-8);
  text-align: center;
  font-family: var(--font-primary-bold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.cnc-ecosystem-title {
  color: var(--Foundation-Green-green-500);
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
  text-transform: uppercase;
}

.mobile {
  display: none;
}

.skiptranslate,
#goog-gt-tt {
  display: none !important;
}

.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
  background: transparent !important;
  box-shadow: none !important;
}

.pt-detail-box-1 {
  padding: 40px 0;
  background: #F1F4F5;
}

.pt-detail-content {
  width: 100%;
  color: var(--Foundation-Green-green-500);
  text-align: center;
  font-family: var(--font-primary-semiBold);
  font-size: 18px;
  font-style: normal;
  line-height: 24px;
}

.pt-detail-box-2-list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 30px;
}

.pt-detail-box-2-item {
  width: calc(50% - 15px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #F5F5F7;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
}

.pt-detail-box-2-item .img {
  height: 354.75px;
  align-self: stretch;
  aspect-ratio: 20/11;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.pt-detail-box-2-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.pt-detail-box-2-item:hover .img img {
  transform: scale(1.05);
}

.pt-detail-box-2-item .content {
  display: flex;
  padding: 16px 16px 32px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  background: #FFF;
  position: relative;
}

.pt-detail-box-2-item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-semiBold);
  font-size: 22px;
  font-style: normal;
  line-height: 30px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 60px;
}

.pt-detail-box-2-item .content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #285D2C 0%, #A4C939 100%);
}

.pt-detail-box-3 {
  background: var(--bg-1);
}

.pt-detail-box-3-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.pt-detail-box-3-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 30px;
}

.pt-detail-box-3-item:nth-child(odd) {
  flex-direction: row-reverse;
}

.pt-detail-box-3-item .img {
  width: 629px;
  aspect-ratio: 629/384;
  border-radius: 16px;
  position: relative;
}

.pt-detail-box-3-item .img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-detail-box-3-item .img::after {
  position: absolute;
  content: "";
  bottom: -16px;
  left: -16px;
  width: 90%;
  height: 90%;
  border-radius: 16px;
  background: #DCEADC;
}

.pt-detail-box-3-item:nth-child(odd) .img::after {
  left: unset;
  right: -16px;
}

.pt-detail-box-3-item .content {
  flex: 1;
  display: flex;
  padding-right: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.pt-detail-box-3-item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
  text-transform: uppercase;
}

.pt-detail-box-3-item .content .list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.pt-detail-box-3-item .content .list .item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
  color: var(--gray-9---body-text);
}

.pt-detail-box-4-inner {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.pt-detail-box-4-first {
  display: flex;
  width: min(95%, 1440px);
  margin: 0 auto;
  align-items: flex-start;
  gap: 20px;
}

.pt-detail-box-4-first .item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
  height: 368px;
  position: relative;
}

.pt-detail-box-4-first .item .left {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.pt-detail-box-4-first .item .left img {
  position: relative;
  z-index: 1;
}

.pt-detail-box-4-first .item .left::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 22.726px;
  height: 100%;
  background: radial-gradient(146.85% 55.54% at -26.62% 52.43%, #262423 15%, #3E3D3C 20%, #716F6F 31%, #9C9B9B 43%, #C0BFBF 54%, #DBDBDB 65%, #EFEFEF 77%, #FBFBFB 88%, #FFF 100%);
  opacity: 0.5;
  mix-blend-mode: multiply;
}

.pt-detail-box-4-first .item .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  padding-top: 75px;
}

.pt-detail-box-4-first .item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 16px;
  font-style: normal;
  line-height: 26px;
  text-transform: uppercase;
  height: 52px;
  vertical-align: bottom;
  width: 100%;
  display: flex;
  align-items: center;
  padding-right: 26px;
}

.pt-detail-box-4-first .item .content .desc {
  font-size: 14px;
  line-height: 22px;
}

.pt-detail-box-4-first .item:last-child::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 100%;
  flex-shrink: 0;
  background: radial-gradient(139.9% 53.86% at -26.62% 52.43%, #262423 15%, #3E3D3C 20%, #716F6F 31%, #9C9B9B 43%, #C0BFBF 54%, #DBDBDB 65%, #EFEFEF 77%, #FBFBFB 88%, #FFF 100%);
  opacity: 0.5;
  mix-blend-mode: multiply;
  transform: rotate(180deg);
}

.pt-detail-box-4-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.pt-detail-box-4-box-title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
  text-transform: uppercase;
}

.pt-detail-box-4-product {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 12px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
  overflow: hidden;
}

.pt-detail-box-4-product-menu {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  height: 88px;
}

.pt-detail-box-4-product-menu .item {
  flex: 1;
  position: relative;
  cursor: pointer;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.pt-detail-box-4-product-menu .item span {
  position: relative;
  z-index: 1;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  transition: all 0.3s ease;
  text-align: center;
}

.pt-detail-box-4-product-menu .item.active span,
.pt-detail-box-4-product-menu .item:hover span {
  color: #fff;
}

.pt-detail-box-4-product-menu .item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #285D2C 0%, #A4C939 100%);
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
}

.pt-detail-box-4-product-menu .item:hover::after,
.pt-detail-box-4-product-menu .item.active::after {
  opacity: 1;
}

.pt-detail-box-4-product-content {
  display: none;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  flex-wrap: wrap;
  padding: 40px;
}

.pt-detail-box-4-product-content .item {
  width: calc(25% - 12px);
  aspect-ratio: 57/43;
}

.pt-detail-box-4-product-content .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pt-detail-box-4-product-content.active {
  display: flex;
}

.pt-detail-box-4-carousel,
.pt-detail-box-5-carousel {
  width: 100%;
}

.pt-detail-box-5-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.factory-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  border-radius: 16px;
  background: #FFF;
  cursor: pointer;
}

.factory-item .img {
  width: 100%;
  aspect-ratio: 420/224;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.factory-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.factory-item:hover .img img {
  transform: scale(1.05);
}

.factory-item .content {
  display: flex;
  padding: 0 16px 16px 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  margin-top: -32px;
  z-index: 10;
}

.factory-item .content .icon {
  display: flex;
  padding: 14px;
  align-items: center;
  gap: 10px;
  border-radius: 64px;
  background: linear-gradient(90deg, #285D2C 0%, #A4C939 100%);
}

.factory-item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-semiBold);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.factory-item .content .location {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.factory-item .content .location img {
  width: 24px;
}

.factory-item .content .location span {
  color: var(--gray-9---body-text);
}

.factory-item .content .desc {
  text-align: center;
  font-family: var(--font-primary-medium);
  text-transform: uppercase;
  background: linear-gradient(90deg, #2A5E2E 0%, #A4C839 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pt-detail-box-6 {
  width: 100%;
  height: 446px;
  background-image: url('/img/pt-detail-box-6-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.pt-detail-box-6 .container {
  margin: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pt-detail-box-6-box {
  display: flex;
  width: min(95%, 419px);
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.pt-detail-box-6-box .title {
  color: var(--White);
  font-family: var(--font-primary-bold);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.pt-detail-box-7-box {
  display: flex;
  width: min(100%, 1170px);
  margin: 0 auto;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
  overflow: hidden;
}

.pt-detail-box-7-box-header {
  display: flex;
  padding: 16px 24px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid var(--gray-4---stroke);
  background-image: url('/img/bg-form-register.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--White);
  text-align: center;
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-transform: uppercase;
}

.pt-detail-box-7-box-content {
  display: flex;
  padding: 24px 32px;
  align-items: flex-start;
  gap: 30px;
  align-self: stretch;
  background: var(--White);
}

.pt-detail-box-7-box-content .left {
  flex: 1;
}

.pt-detail-box-7-box-content .left img {
  width: 100%;
}

.pt-detail-box-7-box-content .right {
  flex: 1;
}

.form-pt-detail .form-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--gray-9---body-text);
}

.form-pt-detail .form-note strong {
  font-weight: unset;
  font-family: var(--font-primary-medium);
}

.form-pt-detail .form-item {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-pt-detail .row {
  margin: 0 -8px;
}

.form-pt-detail .row>* {
  padding: 0 8px;
}

.form-pt-detail .form-item label {
  margin: 0;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-semiBold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.form-pt-detail .form-control {
  display: flex;
  min-height: 48px;
  padding: 12px 16px;
  align-items: center;
  gap: 115px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid rgba(216, 216, 216, 0.50);
  outline: none;
  box-shadow: none;
  resize: none;
}

.form-pt-detail .code-capcha {
  margin-bottom: 16px;
}

.form-pt-detail .form-item .note {
  font-size: 14px;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-regular);
  line-height: 22px;
}

.form-pt-detail .btn-get-advice {
  background: linear-gradient(90deg, #285D2C 0%, #A4C939 100%);
  width: 248px;
  height: 44px;
  padding: 12px 24px;
  margin-top: 16px;
}

.pt-detail-box-8-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.pt-detail-box-8-content {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 30px;
}

.pt-detail-box-8-content .left {
  flex: 1;
  padding-right: 64px;
}

.pt-detail-box-8-content .right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  flex: 1 0 0;
}

.pt-detail-box-8-content .right .item {
  display: flex;
  padding: 24px;
  align-items: center;
  gap: 16px;
  align-self: stretch;
  border-radius: 16px;
  border: 1px solid #F0F0F0;
  background: #FAFAF9;
}

.pt-detail-box-8-content .right .item .icon {
  display: flex;
  width: 72px;
  height: 72px;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: var(--bg-1);
}

.pt-detail-box-8-content .right .item .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}

.pt-detail-box-8-content .right .item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-semiBold);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

.pt-detail-box-9-box {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.pt-detail-box-9-first {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 30px;
}

.pt-detail-box-9-first .right {
  width: 629px;
  aspect-ratio: 629/384;
  position: relative;
}

.pt-detail-box-9-first .right::after {
  content: "";
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 95%;
  height: 95%;
  border-radius: 16px;
  background: #DCEADC;
}

.pt-detail-box-9-first .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  z-index: 1;
  position: relative;
}

.pt-detail-box-9-first .left {
  display: flex;
  padding-right: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex: 1 0 0;
}

.pt-detail-box-9-first .left .first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-right: 44px;
}

.pt-detail-box-9-first .left .first .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
  text-transform: uppercase;
}

.pt-detail-box-9-first .left .list {
  display: flex;
  align-items: flex-start;
  gap: 40px 30px;
  width: 100%;
  flex-wrap: wrap;
}

.pt-detail-box-9-first .left .list-item {
  width: calc(50% - 15px);
  display: flex;
  padding: 24px 32px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid #F0F0F0;
  background: #F8FAFC;
}

.pt-detail-box-9-first .left .list-item .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pt-detail-box-9-first .left .list-item .content .number {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
  text-transform: uppercase;
}

.pt-detail-box-9-first .left .list-item .content .content {
  color: var(--gray-8)
}

.pt-detail-box-10 {
  padding: 52px 0;
  background: var(--Foundation-Green-green-700);
}

.pt-detail-box-10-box {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 87px;
  align-self: stretch;
}

.pt-detail-box-10-left {
  display: flex;
  padding-right: 64px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  flex: 1 0 0;
}

.pt-detail-box-10-right {
  width: 532px;
  aspect-ratio: 1/1;
  border-radius: 668px;
  border: 1px dashed #AEFFB9;
  padding: 32px;
}

.pt-detail-box-10-right img {
  width: 100%;
  height: 100%;
}

.pt-detail-box-10-left .first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.pt-detail-box-10-left .first .title {
  color: var(--White);
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
  text-transform: uppercase;
}

.pt-detail-box-10-left .first .desc {
  color: var(--White);
}

.pt-detail-box-10-left .second {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.pt-detail-box-10-left .second .item {
  width: calc(33% - 25px);
}

.pt-detail-box-10-left .second .item img {
  width: 100%;
}

.pt-detail-box-11-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}

.pt-detail-box-11-box-first {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.pt-detail-box-11-box-first-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: 100%;
}

.pt-detail-box-11-box-first-header .main-title {
  flex: 1;
  text-align: start;
}

.pt-detail-box-11-box-first-header-type-2 .main-title {
  text-align: center;
}

.pt-detail-box-11-box-first-header .actions-slider {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.pt-detail-box-12 {
  padding: 40px 0;
}

.factory-item-type-2 {
  flex-direction: row;
  align-items: stretch;
}

.factory-item-type-2 .img {
  width: 660px;
  aspect-ratio: 660/384;
  border-radius: 16px 0 0 16px;
}

.factory-item-type-2 .content {
  display: flex;
  padding: 32px 64px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  margin: 0 !important;
  flex: 1;
}

.pt-detail-box-12-box {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.pt-detail-box-12-list {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 16px 30px;
  flex-wrap: wrap;
}

.pt-detail-box-12-list .item {
  width: calc(25% - 8px);
  display: flex;
  width: 307.5px;
  padding: 16px;
  align-items: center;
  gap: 16px;
  border-radius: 16px;
  border: 1px solid;
  border-color: #F0F0F0;
  background: #F8FAFC;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10);
  transition: all 0.3s ease;
  cursor: pointer;
}

.pt-detail-box-12-list .item:hover {
  background: var(--White);
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
}

.pt-detail-box-12-list .item .icon {
  display: flex;
  padding: 12px;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: #FFF;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
}

.pt-detail-box-12-list .item .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-semiBold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  flex: 1;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(255, 59, 48, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
  }
}

/* responsive */

@media (min-width: 1400px) {
  .container {
    width: 1320px;
    padding: 0;
  }

  .header-container .container {
    width: 95%;
    padding: 0;
  }
}

@media(min-width: 1420px) {
  .header-container .container {
    width: 1400px;
    padding: 0;
  }
}

@media(max-width: 1024px) {
  .container {
    padding: 0;
  }

  .header-inner .logo img {
    width: 150px;
    height: auto;
  }

  .navigator-menu {
    gap: 12px;
  }

  .navigator-menu li span,
  .navigator-menu li a {
    gap: 2px;
    font-size: 13px;
    line-height: 20px;
  }

  .footer-first-inner {
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-first-inner .right {
    width: 100%;
  }

  .footer-first-inner .left .item {
    flex: 1;
    justify-content: flex-start;
  }

  .footer-menu>li {
    width: calc(25% - 20px);
  }

  .footer-menu {
    justify-content: flex-start;
  }

  .career-menu {
    padding: 42px 0;
  }

  .career-box-1 .container {
    flex-direction: column-reverse;
  }

  .career-box-1 .left .data-list {
    width: 100%;
    justify-content: center;
  }

  .banner-item {
    height: 426px;
  }

  .banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .career-box-3-item .desc {
    width: auto;
    flex: 1;
  }

  .career-item-first .left img {
    width: 100%;
  }

  .career-item-first .right {
    padding: 32px;
  }

  .news-item-type-2 .news-second {
    flex-direction: column;
  }

  .news-item-type-2 .news-content {
    gap: 16px;
  }

  .news-item-type-2 .news-second .img {
    width: 100%;
    aspect-ratio: 280/192;
  }

  .news-menu {
    width: 100%;
    overflow-x: scroll;
  }

  .news-menu-item {
    white-space: nowrap;
  }

  .news-menu::-webkit-scrollbar {
    display: none;
  }

  .news-list-second {
    gap: 16px 32px;
  }

  .banner-news-details .banner-content .banner-title {
    font-size: 40px;
    line-height: 48px;
  }

  .sec-72 {
    padding: 56px 0;
  }

  .project-item-content .locaiton {
    gap: 8px;
    height: 48px;
  }

  .project-item-content {
    padding: 16px 0;
    gap: 12px;
  }

  .project-item {
    margin-bottom: 20px;
  }

  .project-list {
    margin-top: 32px;
    gap: 32px;
  }

  .home-box-1-inner {
    flex-direction: column;
  }

  .home-box-1-right {
    flex: unset;
    width: 100%;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .home-box-1-right .item {
    width: calc(50% - 6px);
    align-items: center;
    gap: 4px;
  }

  .home-box-1-right .item:nth-last-child(2) {
    border-bottom: none;
    padding: 0;
  }

  .home-box-1-right .item .desc {
    width: 66%;
    text-align: center;
  }

  .map-wrapper {
    width: 100%;
    aspect-ratio: 900/488;
  }

  .map-wrapper canvas {
    width: 100%;
    height: 100%;
  }

  .home-box-1-left {
    width: 100%;
    gap: 40px;
  }

  .leader-item {
    gap: 28px
  }

  .leader-item .leader-image::after {
    width: 90%;
    height: 90%;
    left: -14px;
    bottom: -16px;
  }

  .leader-item .leader-content,
  .home-box-4-inner {
    gap: 32px;
  }

  .home-box-3-img {
    width: 350px;
  }

  .home-box-3-img img {
    width: 100%;
  }

  .value-row {
    gap: 150px;
  }

  .leader-item .leader-content {
    width: 60%;
  }

  .home-box-2 {
    padding: 56px 0 0 0;
  }

  .thong-diep-inner .first .left {
    width: 40%;
  }

  .thong-diep-inner .first .right {
    padding: 0;
  }

  .thong-diep-inner .first .left .left-img {
    width: 100%;
  }

  .thong-diep-inner .first .left .left-img img {
    width: 100%;
  }

  .thong-diep-inner .first .right-list .item .content .desc {
    font-size: 28px;
    line-height: 40px;
  }

  .thong-diep-inner .first .right-list .item:nth-child(2n)::after {
    display: none;
  }

  .history-content-item .right {
    width: 100%;
  }

  .history-content-item:not(:last-child) {
    gap: 32px;
  }

  .history-content-item .right {
    flex-direction: column-reverse;
  }

  .corporate-culture-inner {
    gap: 40px;
  }

  .corporate-culture-content {
    gap: 32px;
  }

  .award-left .award-left-item .list .item {
    width: calc(33% - 15px);
  }

  .esg-box-2-item {
    gap: 45px;
  }

  .esg-box-2-inner {
    gap: 56px;
  }

  .esg-box-5-inner {
    gap: 40px;
  }

  .esg-box-5-item {
    width: calc(50% - 20px);
  }

  .esg-box-6-data {
    gap: 20px 40px;
    flex-wrap: wrap;
  }

  .esg-box-6-data-item:not(:last-child)::after {
    display: none;
  }

  .esg-box-6-data-item {
    width: calc(50% - 20px) !important;
    flex: unset !important;
  }

  .esg-box-6-list {
    margin-top: 56px;
    gap: 56px;
  }

  .esg-box-6-item {
    gap: 32px;
  }

  .esg-box-6-item .img {
    flex: 1;
    height: auto;
  }

  .esg-box-6-item .img::after {
    width: 95%;
    height: 95%;
  }

  .esg-box-6-item .content {
    gap: 20px;
  }

  .home-box-2-content-list-item.active .second {
    padding: 20px;
    gap: 16px;
  }

  .home-box-2-content-list-item .second .title,
  .home-box-2-content-list-item .first .title {
    font-size: 20px;
    line-height: 28px;
  }

  .home-box-2-content-list-item .first {
    padding: 20px;
  }
}

@media(max-width: 768px) {
  .container {
    padding: 0 15px;
    width: 100%;
  }

  .btn-header-mobile {
    display: block;
  }

  .overlay-header {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .overlay-header.active {
    opacity: 1;
    visibility: visible;
  }

  .header-navigator {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(80%, 600px);
    z-index: 1000;
    background-color: var(--White);
    transition: all 0.3s ease;
    transform: translateX(-100%);
    padding: 64px 32px;
  }

  .header-navigator.active {
    transform: translateX(0);
  }

  .header-inner {
    align-items: center;
  }

  .navigator-menu {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    max-height: 100%;
    overflow-y: scroll;
    margin: 0 -8px;
    padding: 0 8px;
  }

  .navigator-menu li {
    width: 100%;
    gap: 0 16px;
    border: none;
  }

  .navigator-menu li span,
  .navigator-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
  }

  .navigator-menu li .sub-menu {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding-left: 16px;
    background-color: var(--White);
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0 16px;
    border-top: 3px solid;
    border-color: transparent;
    box-shadow: none;
  }

  .navigator-menu li .sub-menu.active {
    max-height: 1000px;
    padding: 16px;
    border-color: var(--Foundation-Green-green-500);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }

  .navigator-menu li .sub-menu li .sub-menu {
    left: 0;
  }

  .btn-close-mobile {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 40px;
    font-family: var(--font-primary-regular);
    transform: rotate(45deg);
  }

  .navigator-menu>li:hover>span,
  .navigator-menu>li:hover>a {
    border-color: transparent;
    color: var(--gray-9---body-text);
  }

  .navigator-menu>li.active>span,
  .navigator-menu>li.active>a {
    border-color: var(--Foundation-Green-green-500);
    color: var(--Foundation-Green-green-500);
  }

  .navigator-menu .sub-menu li a {
    padding: 0;
    border: none;
  }

  .btn-header-mobile i {
    font-size: 20px;
  }

  .footer-first-inner .right img {
    width: 36px;
    height: 36px;
  }

  .footer-menu>li>a,
  .footer-menu>li>span {
    font-size: 14px;
    line-height: 22px;
  }

  .footer-menu>li>span i,
  .footer-menu>li>a i {
    display: none;
  }

  .footer-menu>li {
    gap: 12px;
  }

  .footer-menu {
    gap: 24px 12px;
  }

  .footer-menu>li {
    width: calc(25% - 9px);
  }

  .career-menu,
  .sec-56,
  .sec-72 {
    padding: 32px 0;
  }

  .esg-box-main {
    padding-top: 32px;
  }

  .home-box-2 {
    padding: 32px 0 0 0;
  }

  .home-box-2-header {
    margin-bottom: 32px;
  }

  .career-menu-inner {
    width: 100%;
    overflow-x: scroll;
  }

  .career-box-1 .container {
    gap: 24px;
  }

  .career-box-1 .left {
    padding: 0;
    gap: 32px;
  }

  .main-title {
    font-size: 32px;
    line-height: 40px;
  }

  .career-box-2 .container {
    gap: 32px;
  }

  .career-item-first,
  .career-item {
    margin-bottom: 32px;
    flex-direction: column;
  }

  .career-item-title {
    font-size: 20px;
    line-height: 28px;
    height: 56px;
  }

  .career-box-3-item {
    flex-direction: column !important;
    align-items: center;
  }

  .career-box-3-item .desc {
    padding: 0 !important;
    gap: 24px;
  }

  .career-box-3-item {
    gap: 36px;
  }

  .career-menu-item {
    white-space: nowrap;
  }

  .banner-content {
    width: 100%;
  }

  .main-container:not(:has(.main-home-container)) {
    margin-top: 72px;
  }

  .career-list {
    gap: 32px;
  }

  .career-list-header .desc {
    text-align: center;
  }

  .career-list-item {
    margin-bottom: 24px;
    padding: 24px;
  }

  .career-box-second {
    padding-bottom: 32px;
  }

  .career-list .pagination {
    margin: 0;
  }

  .career-detail-inner {
    flex-direction: column;
    gap: 24px;
  }

  .hightlight-career {
    width: 100%;
  }

  .form-career {
    padding: 24px;
    align-items: center;
  }

  .career-detail-content {
    gap: 8px;
  }

  .form-career-header {
    gap: 24px;
  }

  .happy-cncersbox-5-inner {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .happy-cncersbox-5-left {
    padding: 0;
    width: 100%;
    flex: unset;
  }

  .happy-cncersbox-5-left .second {
    gap: 24px;
  }

  .register-event-modal .modal-body,
  .event-modal-content {
    padding: 24px 32px;
  }

  .event-modal-content {
    gap: 24px;
  }

  .news-inner {
    gap: 32px;
  }

  .news-list-first {
    padding-bottom: 32px;
  }

  .news-item-type-2 {
    width: calc(50% - 16px);
  }

  .news-inner-header {
    gap: 16px;
  }

  .banner-news-details .banner-content .banner-title {
    font-size: 38px;
    line-height: 46px;
  }

  .other-news-inner {
    gap: 32px;
  }

  .insider-news-item .img {
    width: 100%;
  }

  .project-item-content {
    padding: 8px 0;
    gap: 8px;
  }

  .project-item-img {
    width: 100%;
    height: auto;
    aspect-ratio: 354/216;
  }

  .menu-list,
  .award-menu {
    width: 100%;
    overflow-x: scroll;
    gap: 16px;
  }

  .menu-list-item {
    width: 100%;
    white-space: nowrap;
  }

  .menu-list-item {
    padding-bottom: 8px;
    margin-right: 16px;
  }

  .history-right,
  .time-line-list {
    display: none;
  }

  .investors-main,
  .time-line-box {
    gap: 32px;
  }

  .breadcrumb li a {
    white-space: nowrap;
  }

  .investors-box {
    margin-top: 32px;
  }

  .leader-item .leader-content .first img {
    width: 40px;
  }

  .btn-leader-slider img {
    width: 36px;
    height: 36px;
  }

  .value-row.top,
  .value-row.bottom {
    justify-content: space-between;
    gap: 64px;
  }

  .value-row .value-item {
    width: calc(33% - 54px);
  }

  .value-row.bottom .value-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .thong-diep-inner .first {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .thong-diep-inner .first .left {
    width: 80%;
  }

  .thong-diep-inner .second {
    padding-top: 24px;
  }

  .thong-diep-inner .first .right-list .item .content .title {
    width: 100%;
  }

  .history-left,
  .award-left {
    gap: 32px;
  }

  .history-content-item:not(:last-child) {
    padding-bottom: 32px;
  }

  .history-content-item .left {
    font-size: 80px;
    line-height: 88px;
  }

  .history-content-item .right {
    gap: 24px;
  }

  .history-content-item .right .content {
    gap: 12px;
  }

  .history-content-item .right .img,
  .history-content-item .right .img img {
    width: 100%;
  }

  .corporate-culture-content .center {
    width: 200px;
    height: 100%;
  }

  .corporate-culture-content .center img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
  }

  .corporate-culture-content {
    gap: 24px;
    align-items: stretch;
  }

  .corporate-culture-content .list {
    gap: 32px;
  }

  .corporate-culture-content .list .item .desc {
    -webkit-line-clamp: 4;
    height: 96px;
  }

  .vision-mission-inner,
  .award-left .award-left-item {
    gap: 32px;
  }

  .menu-list-item {
    white-space: nowrap;
  }

  .management-item {
    flex-direction: column;
    padding: 0 0 16px 0;
    align-items: center;
  }

  .management-item-content {
    width: 100%;
  }

  .signature {
    float: unset;
    align-items: flex-end;
    width: 100%;
    margin-top: -16px;
    gap: 12px;
  }

  .esg-box-2-item {
    gap: 32px;
  }

  .esg-box-2-inner {
    gap: 42px;
  }

  .esg-box-2-item .content {
    width: auto;
    flex: 1;
    gap: 20px;
  }

  .esg-box-2-item .img {
    height: auto;
  }

  .esg-box-5-inner {
    gap: 20px;
    align-items: stretch;
  }

  .esg-box-5-item {
    width: calc(50% - 10px);
    padding: 24px;
    gap: 20px;
  }

  .esg-box-6-item {
    flex-direction: column !important;
    align-items: center;
  }

  .esg-box-6-list {
    margin-top: 24px;
    gap: 24px;
  }

  .history-content-item.active .left {
    color: var(--Foundation-Green-green-500);
  }

  .home-box-2-content-img,
  .home-box-2-content-list {
    display: none;
  }

  .home-box-2-mobile {
    display: block;
  }

  .home-box-2-mobile-item {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: var(--Foundation-Green-green-500);
  }

  .home-box-2-mobile-item .content {
    padding: 0 12px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .home-box-2-mobile-item .content .title {
    font-size: 18px;
    font-family: var(--font-primary-semiBold);
    color: var(--White);
  }

  .home-box-2-mobile-item .content .desc {
    color: var(--White);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
    height: 154px;
    text-overflow: ellipsis;
  }

  .btn-view-service img {
    width: 20px !important;
  }

  .home-box-2-mobile-item .content .desc {
    -webkit-line-clamp: 6;
    height: 142px;
  }

  .banner-item:has(img.mobile)>img {
    display: none;
  }

  .banner-item img.mobile {
    display: block !important;
  }

  .partners-box-first {
    gap: 32px;
  }
}

@media(max-width: 568px) {

  .history-content-item .left {
    font-size: 44px;
    line-height: 52px;
  }

  .home-box-1-right .item .number,
  .esg-box-6-data-item .number {
    font-size: 34px;
    line-height: 42px;
  }

  .career-box-1 .left .data-item .number {
    font-size: 32px;
    line-height: 40px;
    height: 40px;
  }

  .career-box-3-item .desc .main-title,
  .career-detail-content-title,
  .banner-news-details .banner-content .banner-title,
  .time-line-box .main-title,
  .main-title,
  .banner-content .banner-title,
  .home-box-6-inner .first .main-title,
  .award-left .award-left-item .header {
    font-size: 24px;
    line-height: 32px;
  }

  .footer-second-inner .right,
  .search-career .title,
  .career-list-item .first .title,
  .form-career-header .title,
  .hightlight-career-title,
  .modal-event .modal-title,
  .event-modal-content .title,
  .news-inner-header .left .news-title,
  .project-item-content .title,
  .thong-diep-inner .first .right-list .item .content .desc,
  .esg-box-5-item .title,
  .esg-box-6-item .main-title,
  .h3,
  h3 {
    font-size: 20px;
    line-height: 28px;
  }

  .happy-cncersbox-4-item .title,
  .register-event-modal .modal-header .left .title,
  .insider-news-item .title,
  .value-item h3,
  .leader-item .leader-content .third .count .current,
  .history-content-item .right .content .title {
    font-size: 18px;
    line-height: 26px;
  }

  .career-item-title,
  .application-deadline .date,
  .event-item-content .title,
  .register-event-modal .modal-header .left .name-event,
  .news-menu-item,
  .news-title,
  .investors-item .content .title,
  .leader-item .leader-content .first .desc,
  .leader-item .leader-content .third .count,
  .management-item-content .name {
    font-size: 16px;
    line-height: 24px;
  }

  body,
  .btn-color-green,
  .breadcrumb li a,
  .career-menu-item,
  .btn-color-red,
  .btn-border-red,
  .other-project-slider .project-item .project-item-content .title,
  .management-item-content .before-name,
  .esg-box-6-data-item .number .until {
    font-size: 14px;
    line-height: 22px;
  }

  .news-tag,
  .home-box-1-right .item .desc,
  .value-item div,
  .thong-diep-inner .first .right-list .item .content .title {
    font-size: 12px;
    line-height: 20px;
  }

  .header-navigator {
    padding: 52px 20px;
  }

  .btn-close-mobile {
    top: 5px;
    right: 9px;
    font-size: 34px;
  }

  .header-inner .logo img {
    width: 80px;
  }

  .footer-first-inner .left {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .footer-first-inner .left .item::after {
    display: none;
  }

  .footer-first-inner .left .item {
    margin: 0;
    width: calc(50% - 6px);
    flex: unset;
  }

  .footer-first-inner .left .item .icon img {
    width: 24px;
    height: 24px;
  }

  .item-follow-us .social-list {
    gap: 8px;
  }

  .item-follow-us .social-list a img {
    width: 24px;
    height: 24px;
  }

  .footer-first-inner .left .item .content {
    gap: 0;
  }

  .footer-first-inner .left .item .content .title,
  .item-follow-us .title,
  .footer-first-inner .right .content .title {
    font-size: 12px;
    line-height: 20px;
  }

  .footer-second {
    padding: 24px 0;
  }

  .footer-second-inner {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .footer-menu>li {
    width: calc(33% - 10px);
  }

  .footer-menu>li {
    width: calc(50% - 6px)
  }

  .footer-menu>li:last-child {
    display: none;
  }

  .footer-second-inner .left {
    gap: 8px;
    align-items: center;
  }

  .footer-second-inner .left>img {
    width: 160px;
  }

  .footer-menu {
    padding: 16px 0 0 0;
    margin: 16px 0 0 0;
  }

  .career-box-3-item .img {
    width: 100%;
  }

  .career-box-3-item .img img {
    width: 100%;
    height: auto;
    aspect-ratio: 629/385;
  }

  .career-box-3-item .img::after {
    display: none;
  }

  .career-box-3-item {
    gap: 16px;
  }

  .career-box-3-item .desc {
    gap: 8px;
  }

  .career-box-3 .container {
    gap: 24px;
  }

  .career-menu,
  .sec-56,
  .sec-72,
  .home-box-7 {
    padding: 24px 0;
  }



  .career-item-first,
  .career-item {
    margin-bottom: 16px;
  }

  .row {
    margin: 0 -4px;
  }

  .row>* {
    padding: 0 4px;
  }

  .career-item-img {
    height: auto;
  }

  .career-item-title {
    margin-top: 8px;
    height: 48px;
  }

  .career-item-first .right {
    padding: 16px;
    gap: 8px;
  }

  .career-box-1 .left {
    gap: 8px;
  }

  .career-box-1 .left .data-item {
    padding: 0 8px;
    flex: 1;
    gap: 0;
  }

  .career-box-1 .left .data-list {
    gap: 8px;
  }

  .career-box-1,
  .career-box-second {
    padding-bottom: 24px;
  }

  .banner-item {
    height: 300px;
  }

  .breadcrumb {
    margin-bottom: 8px;
  }

  .main-container:not(:has(.main-home-container)) {
    margin-top: 60px
  }

  .banner-content {
    bottom: 20px;
  }

  .career-menu-inner {
    gap: 20px;
  }

  .career-menu-item {
    padding-bottom: 8px;
  }

  .career-menu-item:not(:last-child)::after {
    right: -10px;
  }

  .career-box-1 .container {
    gap: 16px;
  }

  .career-box-1 .left .main-title {
    padding: 0 8px 0 0;
  }

  .career-list {
    gap: 16px;
  }

  .search-career {
    gap: 20px;
  }

  .career-list-header {
    gap: 8px;
  }

  .search-career .title {
    display: none;
  }

  .form-search-career {
    height: 44px;
  }

  .career-list-item {
    margin-bottom: 16px;
    padding: 16px;
  }

  .career-list-item,
  .career-list-item .second {
    gap: 8px;
  }

  .career-list-item .first {
    gap: 4px;
    padding-bottom: 8px;
  }

  .career-list-item .location img {
    width: 16px;
    height: 16px;
  }

  .btn-color-red,
  .btn-border-red {
    padding: 4px 5px 4px 12px;
    height: 36px;
    gap: 4px;
  }

  .btn-color-red .btn-icon,
  .btn-view-all .btn-icon {
    width: 24px;
    height: 24px;
  }

  .form-career-header {
    gap: 8px;
    margin-bottom: 8px;
  }

  .form-career {
    padding: 16px 12px;
  }

  .form-career .form-control {
    min-height: 44px;
  }

  .upload-wrapper {
    padding: 16px;
    margin-top: 0;
  }

  .hightlight-career {
    gap: 12px;
  }

  .hightlight-career-item:not(:last-child) {
    padding-bottom: 12px;
  }

  .form-career .form-item {
    margin-bottom: 8px;
  }

  .happy-cncersbox-4-header img {
    width: 100%;
  }

  .happy-cncersbox-5-inner {
    gap: 16px;
  }

  .happy-cncersbox-5-inner .right {
    width: 100%;
  }

  .happy-cncersbox-5-inner .right img {
    width: 100%;
  }

  .happy-cncersbox-5-left .first,
  .happy-cncersbox-5-left .second,
  .happy-cncersbox-5-left {
    gap: 8px;
  }

  .happy-cncersbox-4-content {
    gap: 24px;
  }

  .happy-cncersbox-4-header,
  .happy-cncersbox-4-item {
    gap: 12px;
  }

  .happy-cncersbox-4-bg {
    height: 480px;
  }

  .img-happy-cncers-item {
    width: calc(50% - 4px);
  }

  .list-img-happy-cncers {
    gap: 8px;
  }

  .happy-cncers-inner {
    gap: 24px;
  }

  .event-item-content {
    gap: 16px;
    padding: 12px;
  }

  .event-item-content .title {
    height: 48px;
  }

  .event-item-content .content {
    gap: 8px;
  }

  .event-item-content .content-item img {
    width: 16px;
    height: 16px;
  }

  .event-item-content .action {
    height: 40px;
  }

  .event-item-content .action .btn-border-red {
    padding: 8px 12px;
  }

  .register-event-modal .modal-header {
    padding: 12px 16px;
    gap: 8px;
  }

  .register-event-modal .modal-header {
    height: max-content;
    min-height: 100px;
  }

  .register-event-modal .modal-header .left {
    gap: 8px;
  }

  .register-event-modal .modal-body {
    padding: 12px 16px;
  }

  .form-register-event .form-note,
  .form-register-event .form-item,
  .form-register-event .form-radio {
    margin-bottom: 8px;
  }

  .form-register-event .form-button {
    flex-direction: column;
  }

  .form-register-event .form-button .btn-submit-register,
  .form-register-event .form-button .btn-see-detail {
    width: 100%;
  }

  .event-info {
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
  }

  .event-info .left {
    gap: 8px;
    align-items: center;
  }

  .event-modal-img {
    height: 285px;
  }

  .event-modal-content {
    padding: 12px 16px;
    gap: 16px;
  }

  .news-list-second {
    flex-direction: column;
    gap: 16px;
  }

  .news-item-type-2 {
    width: 100%;
  }

  .news-inner {
    gap: 16px;
  }

  .news-list-first {
    padding: 0 0 16px 0
  }

  .news-inner-header {
    flex-direction: column;
    gap: 8px;
  }

  .news-inner-header .left,
  .news-item .news-content {
    gap: 8px;
  }

  .form-search-news {
    height: 44px;
  }

  .news-menu-item {
    height: 40px;
  }

  .news-item .news-content {
    padding-top: 8px;
  }

  .news-title {
    height: 48px;
  }

  .news-item-type-2 .news-second {
    gap: 8px;
  }

  .news-item-type-2 .news-content .desc {
    height: 110px;
  }

  .news-item-type-2 {
    padding: 0;
  }

  .other-news-inner {
    gap: 24px;
  }

  .banner-news-details {
    height: 400px;
  }

  .news-detail-share a img,
  .news-share a img {
    width: 36px;
    height: 36px;
  }

  .insider-news-item {
    gap: 8px;
    margin-bottom: 12px;
  }

  .news-inner:has(.insider-news-list) .pagination {
    margin: 0;
  }

  .project-list {
    margin-top: 24px;
    gap: 24px;
  }

  .project-list .row>* {
    width: 100%;
  }

  .project-item-content {
    gap: 0
  }

  .project-item-content .locaiton img {
    width: 20px;
    height: 20px;
  }

  .project-detail-inner {
    flex-direction: column;
  }

  .project-detail-left {
    width: 100%;
    gap: 12px;
  }

  .project-detail-left .location {
    gap: 8px;
  }

  .project-detail-inner {
    gap: 24px;
  }

  .project-detail-right {
    padding: 16px;
    gap: 12px;
  }

  .project-detail-right .item:not(:last-child) {
    padding-bottom: 12px;
  }

  .project-detail-right .item {
    gap: 8px;
  }

  .project-detail-right .item .left {
    width: 40%;
  }

  .project-detail-container {
    gap: 32px;
  }

  .project-detail-second-content {
    margin-top: 24px;
  }

  .project-img {
    width: 100%;
    height: auto;
    aspect-ratio: 405/270;
  }

  .other-project-inner {
    gap: 24px;
  }

  .project-item-content .locaiton {
    height: 70px;
  }

  .investors-main,
  .time-line-box {
    gap: 24px;
  }

  .investors-item {
    padding: 8px;
    gap: 8px;
  }

  .investors-item .img {
    width: 52px;
    height: auto;
  }

  .investors-item .img img {
    width: 100%;
  }

  .investors-item .content .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    max-height: 48px;
  }

  .investors-box {
    margin-top: 24px;
  }

  .investors-item-type-2 .content {
    gap: 8px;
    padding: 0;
  }

  .banner-home .logo {
    width: 200px;
  }

  .home-box-1-header {
    gap: 8px
  }

  .home-box-1-header .main-title {
    text-align: center;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .home-box-1-header .desc {
    text-align: center;
  }

  .home-box-1-left {
    gap: 16px;
  }

  .home-box-1-right .item .desc {
    width: 100%;
  }

  .home-box-1-right .item {
    padding: 0 0 8px 0 !important;
  }

  .home-box-1-inner {
    gap: 24px;
  }

  .map-wrapper .pin img {
    width: 12px !important;
  }

  /* .home-box-1-right {
    flex-direction: column;
  }

  .home-box-1-right .item {
    width: 100%;
  } */

  .home-box-2-header {
    flex-direction: column;
    margin-bottom: 16px;
    gap: 8px;
  }

  .home-box-2-header .desc {
    text-align: center;
  }

  .home-box-5-inner {
    gap: 24px;
  }

  .news-item .news-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }

  .value-wrapper {
    display: flex;
  }

  .leader-item {
    flex-direction: column;
    gap: 36px;
    padding: 0;
  }

  .leader-item .leader-content {
    width: 100%;
  }

  .leader-item .leader-image {
    width: 80%;
  }

  .leader-item .leader-content {
    gap: 16px;
  }

  .leader-item .leader-content .first {
    gap: 8px;
  }

  .leader-item .leader-content .first .desc {
    height: 72px;
  }

  .value-row {
    flex-direction: column !important;
  }

  .form-newsletter {
    width: 100%;
    gap: 16px;
  }

  .home-box-6-inner .first {
    width: 100%;
    align-items: center;
    gap: 8px;
  }

  .home-box-6 {
    padding: 24px 0;
  }

  .home-box-6-inner {
    gap: 16px;
  }

  .home-box-6::after {
    background: linear-gradient(90deg, rgba(41, 94, 48, 0.00) 29%, rgba(41, 94, 48, 0.95) 59.88%);
  }

  .form-newsletter .form-control {
    backdrop-filter: blur(10px);
  }

  .news-slider .owl-dots,
  .other-project-slider .owl-dots,
  .certificate-slider .owl-dots,
  .vision-mission-box-1-content-list .owl-dots {
    margin-top: 12px;
  }

  .news-slider .owl-dot.active,
  .other-project-slider .owl-dot.active,
  .certificate-slider .owl-dot.active,
  .vision-mission-box-1-content-list .owl-dot.active {
    width: 28px;
  }

  .wave-container {
    width: 120px;
  }

  .wave-container>img:last-child {
    display: block;
    width: 100%;
    height: 100%;
  }

  .wave-container>img:first-child {
    display: none;
  }

  .value-row {
    flex: 1;
  }

  .value-row .value-item {
    width: 100%;
    height: 100px;
  }

  .home-box-4-inner,
  .home-box-3-inner {
    gap: 24px;
  }

  .home-box-4-inner .home-box-3-header {
    align-items: center;
    justify-content: center;
  }

  .value-row.top,
  .value-row.bottom {
    gap: 8px;
  }

  .leader-item .leader-content .third {
    width: 100%;
    justify-content: center;
  }

  .home-box-2-mobile {
    display: block;
  }

  .home-box-2-content-img,
  .home-box-2-content-list {
    display: none;
  }

  .home-box-2-mobile {
    padding-bottom: 24px;
  }

  .btn-view-service {
    width: max-content;
  }

  .btn-view-service img {
    width: 12px !important;
  }

  .leader-item .leader-content .first img {
    width: 32px;
  }

  .btn-leader-slider img {
    width: 32px !important;
  }

  .thong-diep-inner .first .right-list {
    gap: 16px;
    width: 100%;
  }

  .thong-diep-inner .first .right-list .item {
    width: calc(50% - 8px);
    gap: 8px;
  }

  .thong-diep-inner .second img {
    max-width: 100%;
  }

  .thong-diep-inner .first .right,
  .thong-diep-inner .first {
    gap: 16px;
  }

  .thong-diep-inner .first .left {
    width: 100%;
  }

  .thong-diep-inner .first .left .left-info {
    padding: 8px 0;
  }

  .thong-diep-inner .first .right-list .item img {
    width: 32px;
    height: 32px;
  }

  .thong-diep-inner .first .right-list .item .content {
    gap: 0;
  }

  .history-inner,
  .award-inner {
    padding-top: 0;
  }

  .history-content-item,
  .history-content-item .right {
    gap: 12px !important;
  }

  .history-content-item .right .content {
    gap: 8px;
  }

  .history-content-item .left {
    width: 52px;
  }

  .history-left,
  .award-left {
    gap: 20px;
  }

  .history-content-item:not(:last-child) {
    padding-bottom: 20px;
  }

  .corporate-culture-content .center {
    display: none;
  }

  .corporate-culture-content {
    flex-direction: column;
    gap: 16px;
  }

  .corporate-culture-inner {
    gap: 24px;
  }

  .corporate-culture-content .list {
    gap: 16px;
  }

  .corporate-culture-content .list .item .desc {
    height: 88px;
  }

  .breadcrumb li:last-child a {
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: unset;
  }

  .vision-mission-inner,
  .management-inner,
  .esg-box-4-inner {
    gap: 24px;
  }

  .award-left .award-left-item {
    gap: 16px;
  }

  .award-menu-item {
    white-space: nowrap;
  }

  .award-left .award-left-item .list,
  .menu-box-item {
    gap: 16px;
  }

  .award-left .award-left-item .list .item {
    width: calc(50% - 8px);
    gap: 8px;
  }

  .award-left .award-left-item .list .item .title {
    height: 66px;
  }

  .award-left .award-left-item .header {
    padding-bottom: 8px;
  }

  .menu-box-mangager:not(:first-child) {
    padding-top: 16px;
  }

  .management-item {
    padding: 0 0 8px 0;
    width: calc(50% - 8px);
  }

  .management-item {
    flex-direction: column;
    gap: 0;
  }

  .management-item-img {
    width: 100%;
    height: 100%;
  }

  .management-item-content {
    padding: 8px 0;
    gap: 4px;
  }

  .management-inner .menu-box {
    gap: 16px;
  }

  .management-info-item.active {
    flex-direction: column;
    padding: 16px;
    gap: 8px;
    align-items: center;
  }

  .btn-close-management-info {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .management-item-content .position {
    height: auto;
  }

  .corporate-culture-content .list .item .desc {
    -webkit-line-clamp: unset;
    height: auto;
    padding: 0;
  }

  .esg-box-2-item {
    flex-direction: column !important;
    gap: 24px;
  }

  .esg-box-2-item .content {
    gap: 12px;
  }

  .esg-box-5-inner {
    flex-direction: column;
    gap: 16px;
  }

  .esg-box-5-item {
    width: 100%;
  }

  .esg-box-5-item {
    padding: 24px;
    gap: 16px;
  }

  .esg-box-6-list {
    gap: 16px;
    margin-top: 16px;
  }

  .esg-box-6-item {
    gap: 24px;
  }

  .esg-box-6-item .img {
    width: 100%;
    height: auto;
  }

  .esg-box-6-item .img::after {
    display: none !important;
  }

  .esg-box-6-item .content {
    gap: 16px;
  }

  .esg-box-6-data {
    gap: 20px;
  }

  .esg-box-6-data-item {
    width: calc(50% - 10px) !important;
    gap: 0;
  }

  .partners-box-first {
    gap: 24px;
  }
}