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

a:focus {
  outline: none;
}

/* Google Translate — ẩn UI, giữ banner trong DOM để restore về ngôn ngữ gốc */
#google_translate_element2,
.skiptranslate {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Không dùng display:none — cần truy cập iframe để bấm "Show original" */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame {
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
  visibility: hidden !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

.language-item {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.language-item.active,
.language-item:hover {
  opacity: 1;
}

/* 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;
  position: static !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;
  display: flex;
  align-items: center;
  gap: 20px;
}

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

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

.header-language-list {
  position: absolute;
  top: 258%;
  right: 0;
  width: max-content;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  background: #FFF;
  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;
  padding: 12px 24px;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #0B1D35;
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
}

.header-language-item:not(:last-child) {
  border-bottom: 1px solid #F0F0F0;
}

.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: max-content;
  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%, 1350px);
  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%, 710px);
  display: flex;
  height: 100%;
  padding: 199px 114px 199px 88px;
  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,
.btn-disable {
  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;
  transition: all 0.3s ease-in-out;
}

.btn-color-green:hover {
  background: #00987ad5;
}

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

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

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

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

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

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

.btn-disable {
  cursor: no-drop;
  background-color: #BFBFBF !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;
  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-size: 52px;
  font-style: normal;
  line-height: 60px;
}

.home-box-1-item .first .number {
  display: flex;
  height: 74px;
  align-items: center;
  gap: 10px;
  overflow-y: scroll;
  flex-direction: column;
  font-family: var(--font-primary-semiBold);
  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-medium);
  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;
  overflow: hidden;
}

font{
  box-shadow: none !important;
  background-color:transparent !important;
}

.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 .left-sticky-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
}

.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;
  border-color: #FFFFFF30;
  margin-top: 0;
  transition: all .3s ease-in-out;
  background: #283F58;
  position: relative;
}

.home-box-3-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), #283F58;
  z-index: 1;
  opacity: 0;
  transition: all .3s ease-in-out;
}

.home-box-3-item:hover::after {
  opacity: 1;
}

.home-box-3-item:hover {
  margin-top: -4px;
}

.home-box-3-item .img {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  transition: all .3s ease-in-out;
  z-index: 2;
  pointer-events: none;
}

.home-box-3-item:hover .img {
  opacity: 1;
}

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

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

.home-box-3-item .first .icon img {
  transition: all .3s ease-in-out;
  filter: brightness(1) invert(0);
}

.home-box-3-item:hover .first .icon {
  background: var(--1);
}

.home-box-3-item:hover .first .icon img {
  filter: brightness(0) invert(1);
}

.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;
  position: relative;
  z-index: 3;
}

.home-box-3-item .btn-border-white {
  position: relative;
  z-index: 3;
}

.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: stretch;
  width: 100%;
  gap: 30px;
}

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

.home-box-4-content .btn-link-home-box-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--1);
  color: var(--1);
  font-family: var(--font-primary-semiBold);
  font-size: 18px;
  font-style: normal;
  line-height: 26px;
}

.swiper-project-home .swiper-slide:not(:last-child) .project-item {
  padding-bottom: 14px;
  border-bottom: 1px solid #BFBFBF;
}

.swiper-project-home {
  height: 500px;
}

.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;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 64px;
}

.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;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 56px;
}

.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;
  transition: all 0.3s ease-in-out;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 44px;
}

.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;
  pointer-events: none;
}

.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;
  position: relative;
  z-index: 10;
}

.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;
  box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.10);
  transition: all 0.3s ease-in-out;
  border: 1px solid;
  border-color: transparent;
}

.news-item:hover .img {
  border-color: var(--gray-3, #F0F0F0);
  box-shadow: 0 0 20px 0 rgba(1, 93, 205, 0.15);
}

.news-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  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: 100%;
  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;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 56px;
  overflow: hidden;
}

.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 a {
  white-space: nowrap;
}

.breadcrumb li span {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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

.banner-item .banner-title {
  color: var(--White);
  font-family: var(--font-primary-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;
  background: #EAEAEA;
}

.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;
  width: 100%;
}

.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;
  background: #EAEAEA;
}

.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 {
  color: var(--gray-9---body-text);
  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 .desc {
  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;
  white-space: nowrap;
}

.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;
  position: relative;
  overflow: hidden;
}

.project-type-item .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 170px;
}

.project-type-item .img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 41.87%, #FFF 83.95%);
}

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

.project-type-item:hover {
  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;
  justify-content: flex-end;
  gap: 16px;
  position: relative;
  z-index: 10;
}

.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 .icon img {
  width: 40px !important;
}

.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 .location span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 48px;
}

.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);
  position: sticky;
  top: 120px;
}

.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;
  width: 100%;
  aspect-ratio: 645/456;
  height: auto;
}

.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: 100%;
  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);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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;
  margin: 0;
}

.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: calc(50% - 2px);
  transform: translateY(-50%) 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;
}

.du-an-chi-tiet-box-2-slider .project-type-item {
  width: 100%;
}

.du-an-chi-tiet-box-2-slider .owl-stage-outer {
  margin: -16px;
  padding: 16px;
}

.project-type-item .project-item-inner .project-content .location img,
.project-type-item.project-currently-underway .project-item-inner .project-content .time img {
  width: 24px !important;
}

.modal-detail .modal-dialog {
  width: min(95%, 1032px);
}

.modal-detail .modal-content {
  border-radius: 0;
  display: flex;
  padding: 48px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  border-radius: 4px;
  position: relative;
}

.modal-detail .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  width: 100%;
}

.modal-detail .btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -35px;
  right: -35px;
  z-index: 10;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.modal-detail .btn-close:hover {
  opacity: 0.7;
}

.modal-detail .btn-close img {
  width: 24px;
  height: 24px;
  display: block;
}

.modal-detail .modal-body .modal-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.modal-detail .modal-body .modal-detail-header .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.modal-detail .modal-body .list-du-an {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px 30px;
  padding-top: 32px;
  width: 100%;
  border-top: 1px solid #F0F0F0;
  max-height: 780px;
  overflow-y: scroll;
}

.modal-detail .modal-body .list-du-an::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
  border-radius: 8px;
}

.modal-detail .modal-body .list-du-an::-webkit-scrollbar-thumb {
  background-color: #FF5E36;
  border-radius: 8px;
}

.modal-detail .modal-body .list-du-an::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 8px;
}

.modal-detail .modal-body .list-du-an>.title {
  width: 100%;
  color: #111E2E;
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 24px;
  font-style: normal;
  line-height: 32px;
}

.project-popup-item {
  width: calc(50% - 15px);
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  border-radius: 8px;
  border: 1px solid;
  border-color: var(--gray-4---stroke);
  background: #FFF;
  transition: all 0.3s ease;
  margin-top: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.project-popup-item:hover {
  border-color: var(--1);
  margin-top: -4px;
}

.project-popup-item .first {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

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

.project-popup-item .first .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
}

.project-popup-item .first .right .title {
  color: var(--gray-7);
  font-family: var(--font-primary-medium);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
}

.project-popup-item .first .right .right-number {
  color: var(--1);
  font-family: var(--font-primary-bold);
  font-size: 28px;
  font-style: normal;
  line-height: 36px;
  text-transform: uppercase;
}

.project-popup-item .second {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  width: 100%;
}

.project-popup-item .second .title {
  color: var(--gray-9---body-text);
  font-family: var(--font-PlayfairDisplay-medium);
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
}

.project-popup-item .second .location {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.project-popup-item .second .location span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 48px;
}

.project-popup-item .third {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.project-popup-item .third .first .left {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #00A63E;
  font-family: var(--font-primary-semiBold);
  font-size: 14px;
  font-style: normal;
  line-height: 22px;
  text-transform: uppercase;
}

.project-popup-item.project-popup-item-full .third .first .left {
  color: var(--Foundation-Red-red-500);
}

.project-popup-item .third .first .right {
  width: 167px;
  height: 10px;
  border-radius: 12px;
  background: rgba(0, 166, 62, 0.15);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.project-popup-item .third .first .right .actived {
  height: 100%;
  border-radius: 12px;
  background: #00A63E;
}

.project-popup-item.project-popup-item-full .third .first .right .actived {
  background: #FF3636;
}

.project-popup-item .third .third-actions {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-popup-item .third .third-actions .btn-border-green,
.project-popup-item .third .third-actions .btn-color-green {
  flex: 1;
  width: max-content;
}

.btn-bottom-fixed {
  position: fixed;
  bottom: 70px;
  right: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  z-index: 30;
}

.btn-bottom-fixed .btn-bottom-item {
  display: flex;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 70px;
  background: var(--1);
  cursor: pointer;
}

.dieu-khoan-container {
  padding: 40px 0 64px 0;
}

.dieu-khoan-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.btn-close {
  display: none;
}

.modal-detail .btn-close {
  display: flex;
}

.list-service-industrial {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
}

.list-service-industrial .tong-quan-item {
  width: calc(33% - 17px);
}

@media (min-width: 768px) {
  .container {
    width: 95%;
  }
}

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

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

@media (max-width: 1450px) {
  body .page {
    /* clip không tạo scroll container — sticky vẫn hoạt động */
    overflow-x: clip;
  }

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

@media (max-width: 1024px) {
  .container {
    padding: 0;
  }

  .sec-64,
  .home-box-5,
  .sec-88 {
    padding: 56px 0;
  }

  .header-container {
    height: 80px;
  }

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

  .header-inner .logo img {
    width: 150px;
  }

  .header-right,
  .navigator-menu {
    gap: 16px;
  }

  .header-right-first {
    gap: 12px;
  }

  .header-right-first .header-search {
    padding-right: 12px;
  }

  .navigator-menu li span,
  .navigator-menu li a {
    font-size: 14px;
    line-height: 22px;
  }

  .footer-container {
    height: 460px;
  }

  .header-language-list {
    top: 215%;
  }

  .tong-quan-item {
    padding: 32px 12px;
  }

  .service-inner .tong-quan-item .title {
    font-size: 20px;
    line-height: 28px;
  }

  .footer-container video {
    height: auto;
    top: unset;
    bottom: 0;
  }

  .m-a-content {
    align-items: flex-start;
    gap: 24px;
  }

  .m-a-content .left {
    flex: 1;
  }

  .m-a-content .right {
    padding: 0;
  }

  .m-a-content .right .list .item {
    height: auto;
    padding: 12px 20px;
    gap: 20px;
  }

  .ket-noi-box-1-item .first {
    flex: 1;
  }

  .ket-noi-box-1-item .second {
    padding: 0 !important;
  }

  .ket-noi-box-2-inner .left {
    flex: 1;
  }

  .ket-noi-box-2-inner .right {
    padding: 24px;
  }

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

  .chi-tiet-tin-tuc-inner {
    gap: 24px;
  }

  .chi-tiet-tin-tuc-inner .left {
    padding-right: 24px;
  }

  .du-an-chi-tiet-container .first .right {
    flex: 1;
    width: auto;
  }

  .du-an-chi-tiet-container .first .left {
    padding: 0;
  }

  .du-an-chi-tiet-container .container,
  .du-an-chi-tiet-container .second,
  .du-an-chi-tiet-box-2-inner,
  .project-box-1-container .text,
  .project-list-inner {
    gap: 32px;
  }

  .du-an-chi-tiet-box-2-slider .owl-stage-outer {
    margin: -8px;
    padding: 8px;
  }

  .project-list-content {
    gap: 30px 24px;
  }

  .project-type-item {
    width: calc(33% - 13px);
  }

  .project-type-item .project-item-inner {
    padding: 20px;
  }

  .modal-detail .modal-content {
    padding: 40px;
  }

  .modal-detail .modal-body {
    gap: 28px;
  }

  .modal-detail .modal-body .list-du-an {
    padding-top: 28px;
    gap: 28px 24px;
  }

  .modal-detail .modal-body .modal-detail-header .content {
    gap: 8px;
  }

  .project-popup-item {
    width: calc(50% - 12px);
  }

  .logistics-container {
    flex-direction: column-reverse;
  }

  .vision-mission-item .img {
    flex: 1;
  }

  .vision-mission-item .content .icon img {
    width: 42px;
  }

  .vision-mission-item .content .icon {
    padding: 16px;
  }

  .vision-mission-item .content {
    padding: 0 !important;
    gap: 24px;
  }

  .thong-diep-inner .right {
    padding: 0;
  }

  .thong-diep-inner .left {
    width: min(100%, 460px);
    aspect-ratio: 532/600;
    height: auto;
  }

  .tong-quan-box-1-first .img,
  .tong-quan-box-3-inner .right {
    width: auto;
    flex: 1;
  }

  .tong-quan-box-1-first .content {
    padding: 0;
  }

  .tong-quan-box-1-inner {
    gap: 56px;
  }

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

  .tong-quan-box-2-content .left,
  .tong-quan-box-2-content .right {
    gap: 100px;
  }

  .management-inner {
    align-items: flex-start;
  }

  .management-inner .left {
    width: auto;
    flex: 1;
  }

  .management-inner .right {
    padding: 0;
  }

  .home-box-1-inner {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    justify-content: center;
  }

  .home-box-1-item {
    width: calc(50% - 10px);
    flex: unset;
    padding: 0 !important;
  }

  .home-box-2-inner {
    align-items: flex-start;
  }

  .home-box-2-inner .left {
    flex: 1;
    width: auto;
  }

  .home-box-2-inner .right {
    padding: 0;
  }

  .home-box-3-inner .right {
    width: 60%;
  }

  .home-box-3-inner {
    gap: 40px;
  }

  .home-box-3-item {
    padding: 24px;
    overflow: hidden;
  }

  .home-box-3-item .first .icon img {
    width: 40px;
    height: 40px;
  }

  .home-box-3-inner .left {
    padding: 0;
  }

  .home-box-4-item .left {
    width: 40%;
  }

  .project-item .img {
    width: 160px;
    height: 125px;
  }

  .corporate-culture-content .center {
    display: none;
  }

  .corporate-culture-content .left,
  .corporate-culture-content .right {
    gap: 28px;
    padding: 0;
  }
}

@media (max-width: 768px) {

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

  .btn-header-mobile {
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn-header-mobile i {
    font-size: 22px;
  }

  .overlay-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out
  }

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

  .header-navigator {
    position: fixed;
    top: 0;
    right: 0;
    width: min(80%, 400px);
    height: 100vh;
    background: #fff;
    z-index: 101;
    transition: all 0.3s ease-in-out;
    padding: 64px 32px 32px 32px;
    transform: translateX(100%);
  }

  .header-navigator.active {
    transform: translateX(0);
  }

  .header-right,
  .navigator-menu {
    flex-direction: column;
    align-items: flex-end;
  }

  .navigator-menu li span,
  .navigator-menu li a {
    color: #111E2E;
    padding: 0;
    justify-content: flex-end;
  }

  .btn-close-mobile {
    position: absolute;
    top: 20px;
    right: 32px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(45deg);
    font-size: 40px;
    font-family: var(--font-primary-semiBold);
  }

  .navigator-menu li {
    width: calc(100% - 24px);
  }

  .navigator-menu li .sub-menu {
    position: relative;
    opacity: 1;
    visibility: visible;
    align-items: flex-end;
    width: 100%;
    padding: 0 20px;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
  }

  .navigator-menu li.active .sub-menu {
    max-height: 1000px;
    padding: 20px;
    margin-top: 12px;
    pointer-events: all;
  }

  .navigator-menu li.active span {
    color: var(--1);
  }

  .navigator-menu {
    max-height: 100%;
    overflow-y: scroll;
    padding-right: 12px;
    gap: 32px;
  }

  .navigator-menu::-webkit-scrollbar {
    width: 0;
  }

  .sec-64,
  .home-box-5,
  .sec-88 {
    padding: 36px 0;
  }

  .home-box-6 {
    padding: 36px 0 0 0;
  }

  .footer-container,
  .footer-bottom {
    padding-top: 36px;
  }

  .footer-bottom {
    gap: 24px;
  }

  .footer-inner,
  .service-inner {
    gap: 36px;
  }

  .footer-inner .footer-menu {
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }

  .ket-noi-box-1-container .container,
  .list-ket-noi-box-1 {
    gap: 32px;
  }

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

  .ket-noi-box-1-item .second {
    gap: 24px;
  }

  .ket-noi-box-1-item .second .title {
    font-size: 28px;
    line-height: 36px;
  }

  .ket-noi-box-2-inner {
    flex-direction: column;
  }

  .ket-noi-box-2-inner .left,
  .ket-noi-box-2-inner .left .left-item {
    width: 100%;
  }

  .ket-noi-box-2-inner {
    padding: 24px;
  }

  .ket-noi-box-2-inner,
  .project-list-inner,
  .home-box-7-inner {
    gap: 32px;
  }

  .form-contact {
    width: 100%;
  }

  .project-list-content {
    gap: 32px 24px;
  }

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

  .chi-tiet-tin-tuc-inner .right {
    display: none;
  }

  .chi-tiet-tin-tuc-inner .left {
    padding: 0;
    border: none;
  }

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

  .du-an-chi-tiet-container .first {
    flex-direction: column-reverse;
    gap: 24px;
  }

  .du-an-chi-tiet-container .first .right {
    width: 100%;
    padding: 24px;
  }

  .project-list-content {
    gap: 20px;
  }

  .project-type-item {
    width: calc(50% - 10px);
  }

  .project-list-header {
    gap: 20px;
  }

  .project-list-menu {
    width: 100%;
    overflow-x: scroll;
  }

  .project-list-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .modal-detail .modal-content {
    padding: 32px;
  }

  .modal-detail .modal-body .modal-detail-header {
    gap: 20px;
  }

  .modal-detail .modal-body {
    gap: 24px;
  }

  .modal-detail .modal-body .list-du-an {
    gap: 20px;
  }

  .project-popup-item {
    width: 100%;
  }

  .service-header {
    gap: 12px;
  }

  .tong-quan-item {
    gap: 24px;
  }

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

  .m-a-content {
    flex-direction: column;
  }

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

  .m-a-content .right {
    gap: 24px;
  }

  .vision-mission-item {
    flex-direction: column !important;
    gap: 24px;
  }

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

  .vision-mission-item .content {
    gap: 20px;
  }

  .thong-diep-inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .thong-diep-inner .right .right-bottom {
    padding: 0;
    gap: 4px;
  }

  .tong-quan-box-1-first {
    flex-direction: column;
  }

  .tong-quan-box-1-first .content {
    gap: 24px;
  }

  .tong-quan-box-1-inner {
    gap: 36px;
  }

  .tong-quan-box-1-second,
  .tong-quan-box-2-inner {
    gap: 32px;
  }

  .tong-quan-box-2-content .center {
    display: none;
  }

  .tong-quan-box-2-content {
    flex-direction: column;
  }

  .tong-quan-box-2-content .left,
  .tong-quan-box-2-content .right {
    gap: 24px;
  }

  .tong-quan-box-2-item {
    align-items: center;
  }

  .tong-quan-box-2-item .desc {
    text-align: center;
  }

  .tong-quan-box-2-inner .main-title {
    width: 100%;
    text-align: center;
  }

  .tong-quan-box-3-inner {
    flex-direction: column-reverse;
  }

  .tong-quan-box-3-inner .left {
    padding: 0;
    gap: 24px;
  }

  .tong-quan-box-3-inner .left .main-title {
    width: 100%;
  }

  .tong-quan-box-3-inner .left .list,
  .tong-quan-box-3-inner .left {
    gap: 20px;
  }

  .tong-quan-box-3-inner .left .list .item {
    height: auto;
  }

  .tong-quan-box-3-inner .left .sub-title {
    padding-top: 20px;
  }

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

  .management-inner .right {
    gap: 24px;
  }

  .management-box-2-inner,
  .management-box-2-content,
  .management-box-list {
    gap: 32px;
  }

  .management-box-item-first {
    gap: 24px;
  }

  .management-box-item:not(:first-child) .management-box-item-first {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .management-item {
    width: calc(50% - 12px);
  }

  .management-box-content-item .img {
    width: 200px;
  }

  .management-box-content-item {
    padding: 24px;
    gap: 24px;
  }

  .banner-home {
    height: 500px;
  }

  .home-box-1-inner {
    flex-direction: column;
  }

  .home-box-1-item:not(:last-child) {
    border: none;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid #bfbfbf31;
  }

  .home-box-1-inner {
    gap: 20px;
  }

  .home-box-1-item {
    width: 80%;
    gap: 4px;
  }

  .home-box-1-item .first {
    font-size: 48px;
    line-height: 56px;
  }

  .home-box-1-item .first .number {
    padding-bottom: 8px;
  }

  .home-box-2-inner {
    flex-direction: column;
  }

  .home-box-3-inner {
    gap: 30px;
    flex-direction: column;
  }

  .home-box-3-inner .left {
    position: relative;
    top: 0;
    gap: 24px;
  }

  .home-box-3-inner .left .left-sticky-inner {
    gap: 24px;
  }

  .home-box-3-inner .right {
    width: 100%;
  }

  .home-box-4-item.active {
    flex-direction: column-reverse;
    gap: 16px;
  }

  .home-box-4-item .left {
    width: 100%;
  }

  .home-box-4-content {
    gap: 0;
  }

  .home-box-5-inner .title {
    font-size: 32px;
    line-height: 40px;
    text-align: center;
  }

  .corporate-culture-inner {
    gap: 32px;
  }

  .corporate-culture-item {
    height: 250px;
  }

  .btn-close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }

  .modal-detail .btn-close {
    display: flex;
    top: 8px;
    right: 8px;
  }

  .list-service-industrial {
    gap: 24px;
  }

  .list-service-industrial .tong-quan-item {
    width: 100%;
  }

  .list-service-industrial {
    gap: 16px;
  }

  .list-service-industrial .tong-quan-item {
    width: calc(33% - 12px);
  }
}

@media (max-width: 568px) {

  .banner-home .banner-content .banner-title {
    font-size: 32px;
    line-height: 40px;
  }

  .banner-item .banner-title,
  .home-box-1-item .first,
  .home-box-5-inner .title {
    font-size: 26px;
    line-height: 34px;
  }

  .main-title,
  .chi-tiet-tin-tuc-inner .left .main-title,
  .du-an-chi-tiet-container .second .header .title,
  .project-popup-item .first .right .right-number,
  .m-a-content .right .list .item .item-stt,
  .vision-mission-item .content .title,
  .tong-quan-box-2-item .title,
  .tong-quan-box-3-inner .left .main-title {
    font-size: 24px;
    line-height: 32px;
  }

  .ket-noi-box-1-item .second .title,
  .ket-noi-box-2-inner .right .first .main-title,
  .modal-detail .modal-body .modal-detail-header .content .main-title,
  .home-box-3-item .first .title,
  .project-type-2 .title,
  .corporate-culture-item-header .stt,
  .corporate-culture-item-header .title,
  .corporate-culture-header .desc {
    font-size: 20px;
    line-height: 28px;
  }

  .news-item .content .title,
  .project-type-item .project-item-inner .project-content .title,
  .project-popup-item .second .title,
  .logistics-container .left .item span,
  .m-a-content .right .list .item .content .title,
  .tong-quan-box-3-inner .left .list .item .content .title,
  .home-box-1-item .second,
  .project-item .content .title {
    font-size: 18px;
    line-height: 26px;
  }

  .service-inner .sub-title,
  .btn-color-green,
  .btn-border-green,
  .btn-border-white,
  .btn-color-white,
  .btn-disable,
  .project-box-1-container .text,
  .tong-quan-box-3-inner .left .sub-title,
  .management-item .info .name,
  .home-box-4-content .btn-link-home-box-4 {
    font-size: 16px;
    line-height: 24px;
  }

  body,
  .project-type-item .project-item-inner .project-content .time,
  .management-item .info .name {
    font-size: 14px;
    line-height: 22px;
  }

  .tag-project,
  .chi-tiet-tin-tuc-inner .left .tags-share .list-tag .tag-item {
    font-size: 12px;
    line-height: 20px;
  }

  .container {
    width: 100%;
    padding: 0 15px;
  }

  .header-container {
    height: 64px;
  }

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

  .header-language-list {
    top: 183%;
  }

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

  .navigator-menu li .sub-menu {
    padding: 0 12px;
  }

  .navigator-menu li.active .sub-menu {
    padding: 12px;
  }

  .navigator-menu {
    padding: 0 12px;
  }

  .header-navigator {
    padding: 64px 24px;
  }

  .banner-item {
    height: 280px;
  }

  .banner-item .banner-content {
    gap: 12px;
    bottom: 24px;
  }

  .sec-64,
  .home-box-5,
  .sec-88 {
    padding: 24px 0;
  }

  .home-box-6 {
    padding: 24px 0 0 0;
  }

  .footer-inner .footer-menu {
    gap: 16px 24px;
  }

  .footer-inner .footer-menu li {
    width: calc(50% - 12px);
  }

  .footer-inner,
  .service-inner {
    gap: 24px;
  }

  .footer-bottom {
    gap: 16px;
    padding-top: 24px;
  }

  .footer-container video {
    height: 300px;
    top: unset;
    bottom: 0;
    object-fit: cover;
  }

  .footer-container {
    height: 420px;
  }

  .footer-bottom .logo img {
    width: 200px;
  }

  .ket-noi-box-1-item {
    flex-direction: column !important;
    gap: 16px;
  }

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

  .ket-noi-box-1-container .container,
  .list-ket-noi-box-1 {
    gap: 24px;
  }

  .ket-noi-box-1-item .second,
  .ket-noi-box-2-inner .right .first {
    gap: 8px;
  }

  .ket-noi-box-2-inner {
    gap: 24px;
    padding: 16px;
  }

  .ket-noi-box-2-inner .left .left-item {
    height: auto;
    min-height: 60px;
  }

  .ket-noi-box-2-inner .right {
    padding: 0;
    background-color: transparent;
  }

  .btn-color-green,
  .btn-border-green,
  .btn-border-white,
  .btn-color-white,
  .btn-disable {
    height: 40px;
    padding: 12px;
  }

  .ket-noi-box-2-inner .left .logo img {
    width: 200px;
  }

  .project-list-inner {
    gap: 24px;
  }

  .project-list-content {
    gap: 16px;
  }

  .news-item .content {
    gap: 4px;
    padding-top: 12px;
  }

  .project-list-menu {
    width: 100%;
    overflow-x: scroll;
    gap: 16px;
  }

  .tag-project {
    gap: 8px;
  }

  .tag-project::before {
    width: 20px;
  }

  .news-item .content .title {
    height: 52px;
  }

  .news-item .content .desc {
    -webkit-line-clamp: 2;
    height: 44px;
  }

  .tin-tuc-lien-quan-container .home-box-7-inner {
    gap: 24px;
  }

  .home-box-7-header .right {
    gap: 12px;
  }

  .home-box-7-header .right>div {
    width: 32px;
  }

  .home-box-7-header .right>div img {
    width: 100%;
  }

  .chi-tiet-tin-tuc-container {
    padding: 24px 0;
    width: 100%;
  }

  .chi-tiet-tin-tuc-inner .left {
    width: 100%;
    gap: 12px;
  }

  .chi-tiet-tin-tuc-inner .left .tags-share {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .chi-tiet-tin-tuc-inner .left .tags-share .list-tag,
  .chi-tiet-tin-tuc-inner .left .tags-share .list-tag .tag-item {
    gap: 8px;
  }

  .share-tin-tuc {
    gap: 12px;
  }

  .du-an-chi-tiet-container .container,
  .du-an-chi-tiet-container .second,
  .du-an-chi-tiet-box-2-inner {
    gap: 24px;
  }

  .du-an-chi-tiet-container .first .right .item .title {
    width: 120px;
    gap: 8px;
  }

  .du-an-chi-tiet-container .first .right {
    padding: 16px;
    position: relative;
    top: 0;
  }

  .du-an-chi-tiet-container .first {
    gap: 20px;
  }

  .du-an-chi-tiet-container .first .left {
    gap: 16px;
  }

  .du-an-chi-tiet-container .second .header .btn-prev img,
  .du-an-chi-tiet-container .second .header .btn-next img,
  .du-an-chi-tiet-box-2-inner .header .btn-prev img,
  .du-an-chi-tiet-box-2-inner .header .btn-next img {
    width: 36px;
  }

  .project-type-item .project-item-inner .project-content .title {
    height: 56px;
  }

  .project-type-item .project-item-inner {
    padding: 16px;
  }

  .project-type-item .project-item-inner .project-content .location span {
    height: 44px;
  }

  .project-type-item .project-item-inner .project-content {
    gap: 12px;
  }

  .banner-item::after {
    background: linear-gradient(180deg, rgba(0, 30, 46, 0.00) 17.9%, #001E2E 100%);
  }

  .project-list-header,
  .service-box-2-inner {
    gap: 16px;
  }

  .project-type-item {
    width: 100%;
  }

  .service-header {
    gap: 8px;
  }

  .home-tag::before {
    width: 32px;
  }

  .tong-quan-item {
    gap: 20px;
  }

  .tong-quan-item .icon img,
  .modal-detail-header .icon img,
  .logistics-container .left .item img {
    width: 60px;
  }

  .modal-detail .modal-body .modal-detail-header {
    gap: 8px;
  }

  .modal-detail .modal-content {
    padding: 20px;
  }

  .modal-detail .modal-body {
    gap: 20px;
  }

  .modal-detail .modal-body .list-du-an {
    padding-top: 20px;
    gap: 16px;
  }

  .project-popup-item {
    padding: 16px;
    gap: 16px;
  }

  .project-popup-item .second .title {
    height: 52px;
  }

  .project-popup-item .second .location span {
    height: 44px;
  }

  .project-popup-item .third .first .right {
    width: 140px;
  }

  .project-popup-item .third {
    gap: 12px;
  }

  .btn-bottom-fixed {
    gap: 12px;
    bottom: 40px;
  }

  .logistics-container,
  .logistics-container .left {
    gap: 24px;
  }

  .logistics-container .left .item {
    width: 100%;
    padding: 20px;
  }

  .logistics-container .left .item span {
    width: 100%;
  }

  .m-a-content .right {
    gap: 16px;
  }

  .m-a-content .right .list .item {
    gap: 12px;
    padding: 12px;
  }

  .m-a-content .right .list .item .item-stt {
    width: 48px;
    height: 48px;
  }

  .m-a-content .right .list .item .content .desc {
    height: 44px;
  }

  .m-a-content .right .list .item .content {
    gap: 4px;
  }

  .vision-mission-item {
    gap: 16px;
  }

  .vision-mission-item .content .icon img {
    width: 28px;
  }

  .vision-mission-item .content {
    gap: 12px;
  }

  .vision-mission-item .content .icon {
    padding: 12px;
  }

  .thong-diep-inner .left .info {
    padding: 16px;
    gap: 12px;
  }

  .thong-diep-inner .left .info .position {
    padding-bottom: 8px;
  }

  .thong-diep-inner .right .list {
    gap: 8px;
  }

  .thong-diep-inner .right .list .item .icon img {
    width: 40px;
  }

  .tong-quan-box-1-first,
  .tong-quan-box-1-inner,
  .tong-quan-box-1-second,
  .tong-quan-box-2-inner,
  .tong-quan-box-3-inner {
    gap: 24px;
  }

  .tong-quan-box-1-first .content {
    gap: 16px;
  }

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

  .tong-quan-box-2-item,
  .tong-quan-box-3-inner .left .list .item {
    gap: 8px;
  }

  .tong-quan-box-3-inner .left .list,
  .tong-quan-box-3-inner .left {
    gap: 16px;
  }

  .tong-quan-box-3-inner .left .list .item img {
    width: 28px;
    height: 28px;
  }

  .management-inner {
    gap: 24px;
  }

  .management-inner .right {
    gap: 16px;
  }

  .management-inner .right .first {
    gap: 8px;
  }

  .management-inner .right .first .main-title {
    padding-right: 26px;
  }

  .management-box-2-inner,
  .management-box-2-content,
  .management-box-list {
    gap: 24px;
  }

  .management-box-item:not(:first-child) .management-box-item-first {
    gap: 12px;
  }

  .management-item {
    width: calc(50% - 6px);
  }

  .management-item .info .name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .management-item .info .position {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 44px;
  }

  .management-item .info {
    padding: 8px;
  }

  .management-box-content-item.active {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    position: relative;
  }

  .management-box-content-item .close {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  .home-box-1-inner,
  .home-box-3-inner .left,
  .home-box-3-inner .left .left-sticky-inner,
  .home-box-3-item .first {
    gap: 16px;
  }

  .home-box-2-inner,
  .home-box-3-inner,
  .home-box-3-inner .right,
  .home-box-4-inner {
    gap: 24px;
  }

  .home-box-2-inner .right .first {
    gap: 12px;
  }

  .home-box-3-item {
    padding: 16px;
  }

  .home-box-3-item .first .icon img {
    width: 32px;
    height: 32px;
  }

  .home-box-3-item .first .icon {
    padding: 12px;
  }

  .home-box-3-item .desc {
    height: 66px;
  }

  .home-box-3-item .img {
    height: 100%;
    width: auto;
  }

  .home-box-3-item .img img {
    height: 100%;
    width: auto;
  }

  .home-box-4-header {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .project-type-2 {
    width: 100%;
    aspect-ratio: 1/1;
    height: auto;
  }

  .home-box-4-item .right {
    width: 100%;
    flex: unset;
  }

  .project-type-2 .content {
    width: calc(100% - 16px);
    left: 8px;
    bottom: 8px;
    gap: 8px;
    padding: 8px;
  }

  .project-type-2 .title {
    height: 56px;
  }

  .home-box-4-content {
    padding: 12px;
  }

  .swiper-project-home .swiper-slide:not(:last-child) .project-item {
    padding: 0;
    border: none;
  }

  .swiper-project-home {
    height: 380px;
  }

  .project-item .content .title {
    height: 52px;
  }

  .project-item .img {
    width: 140px;
    aspect-ratio: 200/145;
    height: auto;
  }

  .project-item .content {
    padding: 0 8px;
  }

  .swiper-project-home .project-item .content .location {
    -webkit-line-clamp: 1;
    height: 22px;
  }

  .home-box-4-content {
    gap: 8px;
  }

  .home-box-4-content .btn-link-home-box-4 {
    gap: 4px;
  }

  .home-box-5-inner {
    gap: 16px;
  }

  .ket-noi-box-2-inner,
  .project-list-inner,
  .home-box-7-inner {
    gap: 24px;
  }

  .project-list-content .news-item {
    width: 100%;
  }

  .banner-home {
    height: 400px;
  }

  .banner-home .banner-content {
    padding: 32px 0;
    align-items: center;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
  }

  .banner-home.banner-item .banner-title {
    color: var(--White) !important;
  }

  .banner-home::after {
    background: linear-gradient(180deg, rgba(0, 30, 46, 0.00) -47.1%, #001E2E 86%);
  }

  .home-box-1-item .first .number {
    padding-bottom: 0;
    height: 37px;
  }

  .box-menu .box-menu-item {
    padding: 8px 20px;
  }

  .corporate-culture-header .desc {
    text-align: center;
  }

  .corporate-culture-header .main-title::after {
    width: 150px;
  }

  .corporate-culture-header {
    gap: 8px;
  }

  .corporate-culture-header .main-title {
    padding-bottom: 8px;
  }

  .corporate-culture-inner {
    gap: 24px;
  }

  .corporate-culture-content,
  .corporate-culture-content .left,
  .corporate-culture-content .right {
    flex-direction: column;
    gap: 16px;
  }

  .corporate-culture-item {
    height: auto;
  }

  .corporate-culture-item-header .stt {
    width: 26px;
  }

  .dieu-khoan-inner,
  .list-service-industrial {
    gap: 16px;
  }

  .list-service-industrial {
    flex-direction: column;
  }

  .list-service-industrial .tong-quan-item {
    width: 100%;
  }

  .home-box-1-item .second {
    height: 52px;
  }

  .project-type-2 .title {
    -webkit-line-clamp: 1;
    height: 28px;
  }

  .project-type-2 .location img {
    margin: 0;
  }
}