:root {
  --font-primary-regular: "svn-gilroy-regular";
  --font-primary-thin: "svn-gilroy-thin";
  --font-primary-light: "svn-gilroy-light";
  --font-primary-medium: "svn-gilroy-medium";
  --font-primary-semiBold: "svn-gilroy-semiBold";
  --font-primary-bold: "svn-gilroy-bold";
  --font-primary-black: "svn-gilroy-black";
  --font-PlayfairDisplay-regular: "PlayfairDisplay-regular";
  --font-PlayfairDisplay-thin: "PlayfairDisplay-thin";
  --font-PlayfairDisplay-light: "PlayfairDisplay-light";
  --font-PlayfairDisplay-medium: "PlayfairDisplay-medium";
  --font-PlayfairDisplay-semiBold: "PlayfairDisplay-semiBold";
  --font-PlayfairDisplay-bold: "PlayfairDisplay-bold";
  --font-PlayfairDisplay-black: "PlayfairDisplay-black";
  --White: #fff;
  --1: #00987A;
  --Foundation-Red-red-500: #FF5E36;
  --gray-9---body-text: #121212;
  --gray-7: #595959;
  --gray-6---subtle-text: #8C8C8C;
  --gray-4---stroke: #D8D8D8;
  --Foundation-Green-green-500: #115D41;
}

/* font */

@font-face {
  font-family: "svn-gilroy-regular";
  src: url(../font/SVN-Gilroy/SVN-Gilroy-Regular.otf);
}

@font-face {
  font-family: "svn-gilroy-light";
  src: url(../font/SVN-Gilroy/SVN-Gilroy-Light.otf);
}

@font-face {
  font-family: "svn-gilroy-medium";
  src: url(../font/SVN-Gilroy/SVN-Gilroy-Medium.otf);
}

@font-face {
  font-family: "svn-gilroy-semiBold";
  src: url(../font/SVN-Gilroy/SVN-Gilroy-SemiBold.otf);
}

@font-face {
  font-family: "svn-gilroy-bold";
  src: url(../font/SVN-Gilroy/SVN-Gilroy-Bold.otf);
}

@font-face {
  font-family: "svn-gilroy-black";
  src: url(../font/SVN-Gilroy/SVN-Gilroy-Black.otf);
}

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

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

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

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

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

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

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;
}

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

.header-container {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  background: #0E2F52;
  z-index: 1000;
}

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

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

.header-right-first {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--White, #FFF);
  font-family: var(--font-primary-semiBold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
  letter-spacing: 0.32px;
  text-transform: uppercase;
}

.header-right-first .header-search {
  padding-right: 16px;
  border-right: 1px solid #00987A;
}

.header-language {
  position: relative;
  cursor: pointer;
}

.header-language-current {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-language-list {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: max-content;
  background-color: #0E2F52;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.25);
  padding: 8px 16px;
  z-index: 1;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.header-language-list.active {
  opacity: 1;
  pointer-events: all;
}

.header-language-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

.navigator-menu li {
  position: relative;
}

.navigator-menu li span,
.navigator-menu li a {
  display: flex;
  padding: 6px 0 2px 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--White);
  font-family: var(--font-primary-semiBold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.navigator-menu li span:hover,
.navigator-menu li a:hover {
  color: #00987A;
}

.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: 202%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
}

.navigator-menu li .sub-menu a {
  color: #0E2F52;
}

.navigator-menu li .sub-menu a:hover {
  color: #00987A;
}

.navigator-menu li .sub-menu::after {
  content: "";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 40px;
  background-color: transparent;
}

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

.main-container {
  min-height: 100vh;
}

.footer-container {
  width: 100%;
  height: 532px;
  background: #111F2D;
  padding: 52px 0 0 0;
  position: relative;
  overflow-y: hidden;
}

.footer-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100%; */
}

.footer-container video source {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-inner {
  width: min(100%, 1200px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  z-index: 1;
}

.footer-inner .footer-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.footer-inner .footer-menu li a {
  display: flex;
  padding: 6px 0 2px 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--White);
  font-family: var(--font-primary-semiBold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.footer-inner .footer-menu li a:hover {
  color: #00987A;
}

.footer-bottom {
  width: 100%;
  padding-top: 40px;
  border-top: 1px solid #FFFfff20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  align-self: stretch;
}

.footer-bottom-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px 32px;
  flex-wrap: wrap;
  color: var(--White);
}

.footer-bottom-center .footer-address {
  width: 100%;
}

.footer-bottom-copy {
  color: #FFF;
}

.main-container {
  padding-top: 100px;
}

.banner-item {
  height: 500px;
  position: relative;
}

.banner-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 30, 46, 0.00) 56.9%, #001E2E 100%);
}

.banner-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.banner-item .banner-content {
  width: min(95%, 1320px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.banner-home {
  width: 100%;
  height: 602px;
}

.banner-home video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  position: relative;
}

.banner-home .banner-content {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: min(100%, 510px);
  display: flex;
  height: 100%;
  padding: 199px 50px 199px 20px;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.90) 55.68%);
  transform: unset;
}

.banner-home .banner-content .banner-title {
  color: #001E2E;
  font-family: var(--font-PlayfairDisplay-semiBold);
  font-size: 46px;
  font-style: normal;
  line-height: 64px;
  text-transform: capitalize;
}

.btn-color-green,
.btn-border-green,
.btn-border-white,
.btn-color-white {
  display: flex;
  height: 44px;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 64px;
  background: var(--1);
  color: #FFF !important;
  font-family: var(--font-primary-semiBold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  cursor: pointer;
  width: max-content;
}

.btn-border-green {
  border: 1px solid var(--1);
  background: transparent;
  color: var(--1) !important;
}

.btn-border-white {
  border: 1px solid #FFFFFF20;
  background: transparent;
  color: #FFF !important;
}

.btn-color-white {
  background: #FFF;
  color: var(--1) !important;
}

.home-box-1 {
  padding: 25px 0;
  background-image: url('/img/home-box-1-bg.webp');
  background-size: cover;
  background-position: center;
}

.home-box-1-inner {
  width: 100%;
  display: flex;
  width: 1400px;
  align-items: center;
  gap: 20px;
}

.home-box-1-item {
  flex: 1;
  display: flex;
  padding: 32px 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.home-box-1-item .first {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--White);
  text-align: center;
  font-family: var(--font-PlayfairDisplay-regular);
  font-size: 66px;
  font-style: normal;
  line-height: 74px;
}

.home-box-1-item .first .number {
  display: flex;
  height: 74px;
  padding-bottom: 12px;
  align-items: center;
  gap: 10px;
  overflow-y: scroll;
  flex-direction: column;
  gap: 8px;
  /* margin-top: -8px; */
  pointer-events: none;
}

.home-box-1-item .first .number::-webkit-scrollbar {
  display: none;
}

.home-box-1-item .first .number .num-inner {
  display: block;
  transition: transform 0.5s ease;
}

.home-box-1-item .second {
  color: var(--White);
  text-align: center;
  font-family: var(--font-primary-semiBold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  opacity: 0.9;
  height: 64px;
}

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

.sec-88 {
  padding: 88px 0
}

.sec-64 {
  padding: 64px 0
}

.home-box-2,
.home-box-4 {
  background: #F3F4F4;
}

.home-box-2-inner {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.home-box-2-inner .left {
  width: 645px;
  aspect-ratio: 645/532;
  height: auto;
  flex-shrink: 0;
}

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

.home-box-2-inner .right {
  display: flex;
  flex: 1;
  padding-left: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex-shrink: 0;
}

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

.home-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--Foundation-Red-red-500);
  font-family: var(--font-primary-semiBold);
  text-transform: uppercase;
}

.home-tag::before {
  content: '';
  width: 56px;
  height: 3px;
  background: var(--Foundation-Red-red-500);
}

.main-title {
  color: #111E2E;
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 36px;
  font-style: normal;
  line-height: 44px;
}

.home-box-2-inner .right .first .desc {
  color: var(--gray-9---body-text, #121212);
  text-align: justify;
}

.home-box-3 {
  background-image: url('/img/home-box-3-bg.webp');
  background-size: cover;
  background-position: center;
  background-color: #111F2D;
}

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

.home-box-3-inner .left {
  display: flex;
  padding: 24px 0 0 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: sticky;
  top: 120px;
  flex: 1;
}

.home-box-3-inner .left .main-title {
  color: #FFF;
}

.home-box-3-inner .left .first {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.home-box-3-inner .left .desc {
  text-align: justify;
  color: var(--White);
  opacity: 0.7;
}

.home-box-3-inner .right {
  display: flex;
  width: 676px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.home-box-3-item {
  display: flex;
  padding: 32px 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid #FFF;
  background: #283F58;
}

.home-box-3-item .first {
  display: flex;
  align-items: center;
  gap: 24px;
}

.home-box-3-item .first .icon {
  display: flex;
  padding: 20px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #111F2D;
}

.home-box-3-item .first .title {
  color: var(--White);
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
}

.home-box-3-item .desc {
  overflow: hidden;
  color: var(--White);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 72px;
}

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

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

.box-menu {
  display: flex;
  padding: 4px;
  align-items: center;
  border-radius: 40px;
  background: #FFF;
}

.box-menu .box-menu-item {
  display: flex;
  height: 40px;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--gray-7);
  font-family: var(--font-primary-medium);
  background-color: transparent;
  transition: all 0.3s ease-in-out;
  border-radius: 40px;
  cursor: pointer;
}

.box-menu .box-menu-item:hover,
.box-menu .box-menu-item.active {
  background-color: var(--Foundation-Red-red-500);
  color: #FFF;
}

.home-box-4-item {
  display: none;
}

.home-box-4-item.active {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  align-self: stretch;
}

.home-box-4-content {
  width: 100%;
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: var(--White);
}

.home-box-4-item .left {
  display: flex;
  width: 526px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.home-box-4-item .right {
  flex: 1;
}

.project-type-2 {
  width: 100%;
  height: 500px;
  position: relative;
}

.project-type-2::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: rgba(0, 0, 0, 0.20);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  z-index: 2;
}

.project-type-2:hover::after {
  opacity: 1;
}

.project-type-2 .img {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

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

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

.project-type-2 .content {
  display: flex;
  width: 432px;
  padding: 16px 24px 16px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  background: #FFF;
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 3;
}

.tag-project {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gray-7);
  font-family: var(--font-primary-medium);
  text-transform: uppercase;
}

.tag-project::before {
  content: '';
  width: 56px;
  height: 3px;
  background: var(--Foundation-Red-red-500);
}

.project-type-2 .title {
  color: var(--gray-9---body-text) !important;
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  transition: all 0.3s ease-in-out;
}

.project-type-2:hover .title {
  color: var(--1) !important;
}

.project-type-2 .location {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  color: var(--gray-9---body-text) !important;
}

.project-type-2 .location img {
  margin-top: 4px;
}

.project-item {
  width: 100%;
  display: flex;
  align-items: center;
}

.project-item .img {
  width: 200px;
  height: 145px;
  overflow: hidden;
  position: relative;
}

.project-item .img::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: rgba(0, 0, 0, 0.20);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  z-index: 2;
}

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

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

.project-item:hover .img::after {
  opacity: 1;
}

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

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

.project-item:hover .content .title {
  color: var(--1) !important;
}

.project-item .content .location {
  color: var(--gray-7);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.home-box-4-item .left .project-item:not(:last-child) {
  padding-bottom: 16px;
  border-bottom: 1px solid #BFBFBF;
}

.home-box-5 {
  position: relative;
  padding: 56px 0;
  background: linear-gradient(270deg, #34B284 21.09%, #111E2E 74.85%);
}

.home-box-5 video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: lighten;
}

.home-box-5 video source {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-box-5-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.home-box-5-inner .title {
  color: var(--White);
  font-family: var(--font-primary-semiBold);
  font-size: 36px;
  font-style: normal;
  line-height: 44px;
}

.home-box-5-inner .desc {
  width: min(100%, 575px);
  margin: 0 auto;
  color: var(--White);
  text-align: center;
  opacity: 0.8;
}

.home-box-6 {
  padding: 56px 0 0 0;
  background: linear-gradient(180deg, rgba(17, 93, 65, 0.15) 0%, rgba(255, 255, 255, 0.00) 17.24%);
}

.home-box-7-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  background: #FFF;
}

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

.home-box-7-header .left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: min(100%, 800px);
}

.home-box-7-header .left .desc {
  color: #434343;
}

.home-box-7-header .right {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
}

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

.news-item .img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 420/275;
  height: auto;
  overflow: hidden;
  position: relative;
}

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

.news-item .img::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: rgba(0, 0, 0, 0.20);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  z-index: 2;
}

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

.news-item:hover .img::after {
  opacity: 1;
}

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

.news-item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
  letter-spacing: 0.4px;
  transition: all 0.3s ease-in-out;
}

.news-item:hover .content .title {
  color: var(--1) !important;
}

.news-item .content .desc {
  color: var(--gray-7) !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: 72px;
  overflow: hidden;
}

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

.breadcrumb li a,
.breadcrumb li span {
  color: var(--White);
}

.breadcrumb li img {
  filter: brightness(0) invert(1);
}

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

.banner-item .banner-title {
  color: var(--White);
  font-family: var(--font-PlayfairDisplay-semiBold);
  font-size: 46px;
  font-style: normal;
  line-height: 64px;
  text-transform: uppercase;
}

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

.thong-diep-inner .left {
  width: 532px;
  height: 600px;
  position: sticky;
  top: 120px;
}

.thong-diep-inner .left::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 54.2%, rgba(0, 0, 0, 0.60) 87.29%);
}

.thong-diep-inner .left .img {
  width: 100%;
  height: 100%;
}

.thong-diep-inner .left .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thong-diep-inner .left .info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  width: 100%;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.thong-diep-inner .left .info .name {
  color: var(--White);
  font-family: var(--font-PlayfairDisplay-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.thong-diep-inner .left .info .position {
  color: var(--White);
  opacity: 0.8;
  position: relative;
  padding-bottom: 16px;
}

.thong-diep-inner .left .info .position::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 101px;
  height: 3px;
  background: var(--Foundation-Red-red-500);
}

.thong-diep-inner .right {
  padding-left: 32px;
  flex: 1 0 0;
}

.thong-diep-inner .right .list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.thong-diep-inner .right .list .item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

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

.thong-diep-inner .right .list .item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 30px;
}

.thong-diep-inner .right .right-bottom {
  display: flex;
  padding: 16px 0 0 0;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 260px;
  float: right;
}

.thong-diep-inner .right .right-bottom .position {
  color: var(--gray-6---subtle-text);
  font-family: var(--font-primary-semiBold);
}

.thong-diep-inner .right .right-bottom .name {
  color: var(--gray-9---body-text);
  text-align: center;
  font-family: var(--font-primary-semiBold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.management-inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 30px;
}

.management-inner .left {
  width: 645px;
  height: auto;
}

.management-inner .left img {
  width: 100%;
  height: auto;
}

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

.management-inner .right .first {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.management-box-1-container {
  background-color: #F3F4F4;
}

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

.management-box-2-content,
.management-box-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.management-box-list {
  width: min(100%, 960px);
  margin: 0 auto;
}

.management-box-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

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

.management-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);
  width: 300px;
  background: var(--White);
  cursor: pointer;
}

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

.management-item .img img {
  width: 100%;
  height: auto;
  transition: all 0.3s ease-in-out;
}

.management-item:hover .img img,
.management-item.active .img img {
  transform: scale(1.05);
}

.management-item .info {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
  border-bottom: 2px solid;
  border-color: transparent;
  transition: all 0.3s ease-in-out;
}

.management-item:hover .info,
.management-item.active .info {
  border-color: var(--Foundation-Red-red-500);
}

.management-item .info .name {
  color: #121212;
  font-size: 18px;
  line-height: 26px;
  text-transform: uppercase;
}

.management-item .info .name span {
  font-family: var(--font-primary-bold);
}

.management-box-content-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);
}

.management-box-content-item.active {
  display: flex;
}

.management-box-content-item .img {
  width: 300px;
  border-radius: 4px;
  overflow: hidden;
}

.management-box-content-item .img img {
  width: 100%;
  height: auto;
}

.management-box-content-item .content {
  flex: 1;
  max-height: 264px;
  overflow-y: scroll;
}

.management-box-content-item .content::-webkit-scrollbar {
  display: none;
}

.vision-mission-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.vision-mission-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 30px;
}

.vision-mission-item .img {
  width: 645px;
  height: auto;
}

.vision-mission-item .img img {
  width: 100%;
  height: auto;
}

.vision-mission-item .content {
  display: flex;
  flex: 1;
  padding-left: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex-shrink: 0;
}

.vision-mission-item .content .icon {
  display: flex;
  padding: 20px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: rgba(76, 209, 158, 0.10);
}

.vision-mission-item .content .title {
  color: #111E2E;
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 36px;
  font-style: normal;
  line-height: 44px;
}

.vision-mission-item:nth-child(even) {
  flex-direction: row-reverse;
}

.vision-mission-item:nth-child(even) .content {
  padding: 0 32px 0 0;
}

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

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

.corporate-culture-header .main-title {
  padding-bottom: 16px;
  position: relative;
}

.corporate-culture-header .main-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 265px;
  height: 3px;
  background-color: var(--Foundation-Red-red-500);
}

.corporate-culture-header .desc {
  font-family: var(--font-primary-semiBold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

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

.corporate-culture-content .center {
  width: 418px;
}

.corporate-culture-content .center img {
  width: 100%;
  height: auto;
}

.corporate-culture-content .left,
.corporate-culture-content .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 66px;
  padding-top: 17px;
}

.corporate-culture-item {
  display: flex;
  height: 226px;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 4px;
  border: 1px dashed #00987A;
  background: #FFF;
  box-shadow: 0 0 20px 0 rgba(1, 93, 205, 0.15);
}

.corporate-culture-item-header {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.corporate-culture-item-header .stt {
  color: var(--1);
  font-family: var(--font-primary-bold);
  font-size: 22px;
  font-style: normal;
  line-height: 30px;
  width: 32px;
}

.corporate-culture-item-header .title {
  color: var(--1);
  font-family: var(--font-PlayfairDisplay-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.corporate-culture-item .desc {
  text-align: justify;
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.corporate-culture-container {
  padding-bottom: 24px;
}

.tong-quan-box-1-container {
  background: #F3F4F4;
}

.tong-quan-box-1-inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.tong-quan-box-1-first {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.tong-quan-box-1-first .img {
  width: 660px;
  height: auto;
}

.tong-quan-box-1-first .img img {
  width: 100%;
  height: auto;
}

.tong-quan-box-1-first .content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex: 1;
  padding-left: 32px;
}

.tong-quan-box-1-first .content .main-title {
  margin-top: -16px;
}

.tong-quan-box-1-second {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.tong-quan-box-1-second-slider {
  width: 100%;
}

.tong-quan-box-1-second-slider .owl-stage-outer {
  margin: -16px;
  padding: 16px;
}

.tong-quan-item {
  display: flex;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  flex: 1 0 0;
  border-radius: 8px;
  border: 1px solid;
  border-color: var(--gray-4---stroke);
  background: #FFF;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(1, 93, 205, 0.15);
  transition: all 0.3s ease-in-out;
  margin-top: 0;
}

.tong-quan-item:hover {
  margin-top: -4px;
  border-color: var(--1);
  box-shadow: 0 0 20px 0 rgba(1, 93, 205, 0.15);
}

.tong-quan-item .title {
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
}

.tong-quan-box-3-inner {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 30px;
}

.tong-quan-box-3-inner .right {
  width: 645px;
  height: auto;
}

.tong-quan-box-3-inner .right img {
  width: 100%;
  height: auto;
}

.tong-quan-box-3-inner .left {
  display: flex;
  flex: 1;
  padding-right: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex-shrink: 0;
}

.tong-quan-box-3-inner .left .main-title {
  width: min(100%, 600px);
  font-size: 32px;
  line-height: 40px;
}

.tong-quan-box-3-inner .left .list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.tong-quan-box-3-inner .left .list .item {
  display: flex;
  width: 100%;
  height: 84px;
  align-items: flex-start;
  gap: 16px;
}

.tong-quan-box-3-inner .left .list .item .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}

.tong-quan-box-3-inner .left .list .item .content .title {
  font-family: var(--font-PlayfairDisplay-semiBold);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.tong-quan-box-3-inner .left .sub-title {
  color: var(--1);
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 18px;
  font-style: italic;
  line-height: 28px;
  width: 100%;
  padding-top: 32px;
  border-top: 1px solid #D8D8D8;
}

.tong-quan-box-2-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.tong-quan-box-2-inner .main-title {
  width: min(100%, 392px);
}

.tong-quan-box-2-content {
  display: flex;
  align-items: stretch;
  gap: 24px;
}

.tong-quan-box-2-content .center {
  width: 479px;
}

.tong-quan-box-2-content .center img {
  width: 100%;
  height: auto;
}

.tong-quan-box-2-content .left,
.tong-quan-box-2-content .right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 160px;
}

.tong-quan-box-2-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.tong-quan-box-2-item .title {
  color: #056142;
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
}

.tong-quan-box-2-item.chien-luoc .title {
  color: #65D0A9;
}

.tong-quan-box-2-item.trach-nhiem .title {
  color: #00987A;
}

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

.service-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.service-header .desc {
  color: #434343;
}

.service-inner .tong-quan-item .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  text-align: center;
}

.service-box-2-container {
  background-image: url(../img/service-img-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 56px 0;
}

.service-box-2-inner {
  display: flex;
  width: min(100%, 575px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
}

.service-box-2-inner .desc {
  color: #FFF;
  opacity: 0.8;
  text-align: center;
}

.service-box-2-inner .main-title {
  color: #FFF;
}

.logistics-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.logistics-container .right {
  flex: 1;
  height: auto;
}

.logistics-container .right img {
  width: 100%;
  height: auto;
}

.logistics-container .left {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px 16px;
  flex: 1 0 0;
  flex-wrap: wrap;
}

.logistics-container .left .item {
  width: calc(50% - 8px);
  display: flex;
  padding: 24px 32px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 0 20px 0 rgba(1, 93, 205, 0.15);
  border: 1px solid;
  border-color: transparent;
  cursor: pointer;
  margin-top: 0;
  transition: all 0.3s ease-in-out;
}

.logistics-container .left .item:hover {
  border-color: var(--1);
  margin-top: -4px;
  background-color: #F8FAFC;
}

.logistics-container .left .item span {
  color: var(--gray-9---body-text);
  text-align: center;
  font-family: var(--font-primary-bold);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
  height: 64px;
}

.service-inner .sub-title {
  color: var(--1);
  font-family: var(--font-primary-semiBold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.m-a-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.m-a-content .left {
  width: 645px;
  height: auto;
}

.m-a-content .left img {
  width: 100%;
  height: auto;
}

.m-a-content .right {
  display: flex;
  flex: 1;
  padding-left: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex-shrink: 0;
}

.m-a-content .right .list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.m-a-content .right .list .item {
  display: flex;
  width: 100%;
  height: 112px;
  padding: 16px 32px;
  align-items: center;
  gap: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 0 20px 0 rgba(1, 93, 205, 0.15);
}

.m-a-content .right .list .item .item-stt {
  display: flex;
  width: 56px;
  height: 56px;
  padding-bottom: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 32px;
  background: rgba(0, 152, 122, 0.10);
  color: var(--1);
  font-family: var(--font-PlayfairDisplay-regular);
  font-size: 32px;
  font-style: normal;
  line-height: 24px;
}

.m-a-content .right .list .item .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
}

.m-a-content .right .list .item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-PlayfairDisplay-semiBold);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.m-a-content .right .list .item .content .content {
  color: #434343;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 48px;
}

.project-box-1-container {
  padding: 24px 0;
}

.project-box-1-container .text {
  width: min(100%, 967px);
  color: var(--gray-9---body-text);
  text-align: center;
  font-family: var(--font-primary-semiBold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  margin: 0 auto
}

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

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

.project-list-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.project-list-menu {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-bottom: 1px solid var(--gray-4---stroke);
}

.project-list-menu-item {
  display: flex;
  padding-bottom: 4px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-bottom: 2px solid;
  border-color: transparent;
  color: var(--gray-6---subtle-text);
  font-family: var(--font-primary-semiBold);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.project-list-menu-item:hover,
.project-list-menu-item.active {
  color: var(--Foundation-Red-red-500);
  border-color: var(--Foundation-Red-red-500);
}

.project-list-content {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 30px;
}

.project-list-content.active {
  display: flex;
}

.project-type-item {
  width: calc(33% - 16px);
  display: flex;
  height: 304px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid;
  border-color: var(--gray-4---stroke);
  background: #FFF;
  margin-top: 0;
  box-shadow: 0 0 0px 0 rgba(1, 93, 205, 0.15);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.project-type-item:hover {
  border-color: var(--1);
  margin-top: -4px;
  box-shadow: 0 0 20px 0 rgba(1, 93, 205, 0.15);
}

.project-type-item .project-item-inner {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.project-type-item .project-item-inner .project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.project-type-item .project-item-inner .project-header .icon {
  display: flex;
  padding: 12px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #111F2D;
}

.project-type-item .project-item-inner .project-header .tag {
  color: var(--gray-7);
  font-family: var(--font-primary-medium);
  text-transform: uppercase;
}

.project-type-item .project-item-inner .project-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.project-type-item .project-item-inner .project-content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-PlayfairDisplay-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;
}

.project-type-item .project-item-inner .project-content .location {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  color: var(--gray-9---body-text);
}

.project-type-item .project-item-inner .project-content .time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary-semiBold);
  font-size: 16px;
  font-style: normal;
  line-height: 24px;
}

.project-type-item.project-currently-underway .project-item-inner .project-content .time {
  color: var(--Foundation-Red-red-500);
}

.project-type-item.project-complete .project-item-inner .project-content .time {
  color: var(--1);
}

.du-an-chi-tiet-container .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
}

.du-an-chi-tiet-container .container::after,
.du-an-chi-tiet-container .container::before {
  display: none;
}

.du-an-chi-tiet-container .first {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}

.du-an-chi-tiet-container .first .left {
  display: flex;
  padding-right: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
}

.du-an-chi-tiet-container .first .left .title {
  color: #090C13;
  font-family: var(--font-primary-semiBold);
  font-size: 24px;
  font-style: normal;
  line-height: 28px;
}

.du-an-chi-tiet-container .first .right {
  display: flex;
  width: 532px;
  padding: 24px 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(216, 216, 216, 0.50);
  background: #FFF;
  box-shadow: 0 0 10px 0 rgba(1, 93, 205, 0.15);
}

.du-an-chi-tiet-container .first .right .item {
  display: flex;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

.du-an-chi-tiet-container .first .right .item .title {
  display: flex;
  width: 148px;
  align-items: center;
  gap: 16px;
  color: var(--gray-7);
  font-family: var(--font-primary-semiBold);
}

.du-an-chi-tiet-container .first .right .item .desc {
  flex: 1;
  color: var(--gray-9---body-text, #121212);
  font-family: var(--font-primary-semiBold);
}

.du-an-chi-tiet-container .first .right .item:not(:last-child) {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(216, 216, 216, 0.50);
}

.du-an-chi-tiet-container .second {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}

.du-an-chi-tiet-container .second .header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.du-an-chi-tiet-container .second .header .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
}

.du-an-chi-tiet-container .second .header .header-actions {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
}

.second-content {
  width: 100%;
}

.second-slider .item-img {
  display: block;
  width: 100%;
  aspect-ratio: 215/152;
  height: auto;
}

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

.du-an-chi-tiet-box-2-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}

.du-an-chi-tiet-box-2-inner .header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

.du-an-chi-tiet-box-2-inner .header .header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.du-an-chi-tiet-box-2-content {
  width: 100%;
}

.project-other-item {
  position: relative;
  cursor: pointer;
}

.project-other-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.20);
  pointer-events: none;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.project-other-item:hover::after {
  opacity: 1;
}

.project-other-item .img {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

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

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

.project-other-item .content {
  position: absolute;
  z-index: 10;
  bottom: 10px;
  left: 16px;
  display: flex;
  width: min(80%, 432px);
  padding: 16px 24px 16px 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  background: #FFF;
  max-height: 124px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.project-other-item:hover .content {
  max-height: 180px;
}

.project-other-item .content .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 22px;
  font-style: normal;
  line-height: 30px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 60px;
}

.project-list-content .news-item {
  width: calc(33% - 16px);
}

.chi-tiet-tin-tuc-container {
  padding: 40px 0 64px 0;
}

.chi-tiet-tin-tuc-inner {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.chi-tiet-tin-tuc-inner .left {
  flex: 1;
  padding-right: 32px;
  border-right: 1px solid var(--gray-4---stroke);
}

.chi-tiet-tin-tuc-inner .right {
  position: sticky;
  top: 120px;
  display: flex;
  width: 300px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.chi-tiet-tin-tuc-inner .right .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-PlayfairDisplay-semiBold);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.list-featured-post {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.list-featured-post .news-item-style-2 {
  width: 100%;
}

.list-featured-post .news-item-style-2 .content {
  width: 100%;
}

.list-featured-post .news-item-style-2 .content .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 56px;
}

.tin-tuc-lien-quan-container .home-box-7-inner {
  background-color: transparent;
}

.breadcrumb-type-2 li img {
  filter: unset;
}

.breadcrumb-type-2 li a {
  color: var(--1);
}

.breadcrumb-type-2 li span {
  color: var(--gray-7);
}

.chi-tiet-tin-tuc-inner .left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chi-tiet-tin-tuc-inner .left .main-title {
  font-size: 28px;
  line-height: 36px;
}

.chi-tiet-tin-tuc-inner .left .date-tag {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.chi-tiet-tin-tuc-inner .left .date-tag .date {
  display: flex;
  height: 24px;
  align-items: center;
  gap: 8px;
  color: #494D59;
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.chi-tiet-tin-tuc-inner .left .tags-share {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  padding-top: 24px;
  border-top: 1px solid rgba(216, 216, 216, 0.50);
  width: 100%;
}

.chi-tiet-tin-tuc-inner .left .tags-share .list-tag {
  display: flex;
  padding-bottom: 8px;
  align-items: flex-start;
  gap: 16px;
}

.chi-tiet-tin-tuc-inner .left .tags-share .list-tag .title {
  color: var(--gray-6---subtle-text);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.chi-tiet-tin-tuc-inner .left .tags-share .list-tag .tag-item {
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.chi-tiet-tin-tuc-inner .left .tags-share .list-tag .tag-item:not(:last-child)::after {
  content: '/';
  color: #494D59;
  font-size: 14px;
  line-height: 22px;
}

.share-tin-tuc {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  color: #494D59;
}

.ket-noi-box-1-container {
  background: linear-gradient(180deg, #F3F4F4 0%, #FFF 100%);
}

.ket-noi-box-1-container .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}

.ket-noi-box-1-container .container::after,
.ket-noi-box-1-container .container::before {
  display: none;
}

.list-ket-noi-box-1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ket-noi-box-1-item {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.ket-noi-box-1-item .first {
  width: 645px;
  height: auto;
}

.ket-noi-box-1-item .first img {
  width: 100%;
  height: auto;
}

.ket-noi-box-1-item .second {
  display: flex;
  flex: 1;
  padding-left: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex-shrink: 0;
}

.ket-noi-box-1-item .second .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 32px;
  font-style: normal;
  line-height: 40px;
}

.ket-noi-box-1-item:nth-child(2n) {
  flex-direction: row-reverse;
}

.ket-noi-box-1-item:nth-child(2n) .second {
  padding: 0 0 0 32px;
}

.ket-noi-box-2-container {
  background-image: url('../img/ket-noi-bg-img.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ket-noi-box-2-inner {
  width: min(100%, 1170px);
  margin: 0 auto;
  display: flex;
  padding: 40px;
  align-items: center;
  gap: 40px;
  border-top: 4px solid var(--1);
  background: #FFF;
  box-shadow: 0 0 4px 0 rgba(0, 34, 109, 0.15);
}

.ket-noi-box-2-inner .left {
  display: flex;
  width: 460px;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  flex-shrink: 0;
}

.ket-noi-box-2-inner .left .left-item {
  width: 438px;
  height: 70px;
  border-radius: 4px;
  border: 1px solid var(--1);
  padding: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ket-noi-box-2-inner .left .left-item .first {
  display: inline-flex;
  padding: 0 24px 0 8px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background: #FFF;
  color: var(--gray-9---body-text);
  font-family: var(--font-primary-semiBold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
  position: absolute;
  top: -32px;
  left: 16px;
}

.ket-noi-box-2-inner .right {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  background: #F8F8F8;
}

.ket-noi-box-2-inner .right .first {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.ket-noi-box-2-inner .right .first .main-title {
  font-size: 28px;
  line-height: 36px;
}

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

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

.form-contact .form-item {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}

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

.form-contact .form-item .form-control {
  display: flex;
  min-height: 48px;
  padding: 8px 16px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 68px;
  border: 1px solid;
  border-color: var(--gray-4---stroke);
  background: var(--White);
  transition: all 0.3s ease;
  outline: none;
  box-shadow: none;
  font-size: 16px;
  line-height: 24px;
}

.form-contact .form-item .form-control:hover,
.form-contact .form-item .form-control:focus {
  border-color: var(--1);
}

.form-contact .form-item textarea.form-control {
  border-radius: 12px;
  resize: none;
}

.form-contact button.btn-color-green {
  border: none;
  width: 100%;
}

.form-contact .form-note {
  margin-bottom: 16px;
}

.form-contact .form-note label input {
  display: none;
}

.form-contact .form-note label {
  color: var(--gray-9---body-text);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  padding-left: 32px;
  position: relative;
}

.form-contact .form-note label::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid;
  border-color: var(--gray-4---stroke);
  transition: all 0.3s ease;
}

.form-contact .form-note label::before {
  content: '';
  position: absolute;
  display: block;
  top: 4px;
  transform: rotate(45deg);
  left: 10px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  z-index: 10;
  opacity: 0;
  transition: all 0.3s ease;
}

.form-contact .form-note label:has(input:checked)::before {
  opacity: 1;
}

.form-contact .form-note label:has(input:checked)::after {
  border-color: #FF5E36;
}

.form-contact .form-note label:has(input:checked)::after {
  border-color: #FF5E36;
  background-color: #FF5E36;
}

.form-contact .form-note label a {
  color: var(--Foundation-Green-green-500);
  font-family: var(--font-primary-semiBold);
  text-decoration-line: underline !important;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
}

@media(min-width: 1440px) {
  .container {
    width: 1320px;
    padding: 0;
  }

  .header-container .container,
  .home-box-1 .container {
    width: 1400px;
    padding: 0;
  }
}