/* Thin (100) */
@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400&display=swap");
@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-ThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* ExtraLight (200) */
@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-Extralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-ExtralightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Light (300) */
@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-Thin.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-ThinItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium / Semibold (500–600) */
@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-SemiboldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ExtraBold (800) */
@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-ExtraBoldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Black (900) */
@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Averta";
  src: url("../langs/Averta-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --primary-color: #08171c !important;
  --padding-left-home: 240px !important;
  --padding-left-aboutus: clamp(30px, 10vw, 180px) !important;
  --padding-right-col: 60px clamp(20px, 8vw, 180px) 60px clamp(20px, 8vw, 180px) !important;
  --secondary-color: #577c8e !important;
}
::-webkit-scrollbar {
  width: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6,
.heading-font,
.off-canvas-center .nav-sidebar.nav-vertical > li > a {
  font-family: "Averta", sans-serif !important;
}
.nav > li > a {
  font-family: "Averta", sans-serif !important;
  font-size: 14px !important;
  color: #fff !important;
  padding: 0 !important;
  font-weight: 400 !important;
}
.nav > li {
  margin: 0 15px !important;
}
body {
  font-family: "Averta", sans-serif !important;
  font-weight: 400;
  min-height: 100vh;
  background-image: url("../images/background-effect.jpg");
  background-color: #08171c;
}
#main,
#wrapper {
  background-color: transparent !important;
}

.flex-col.flex-right .header-nav .header-block .header-block-block-1 {
  display: flex;
  gap: 12px;
}
.flex-col.flex-right
  .header-nav
  .header-block
  .header-block-block-1
  .icon-box-img {
  margin-bottom: 7px !important;
  width: 20px !important;
}
.flex-col.hide-for-medium.flex-left .header-nav {
  justify-content: center !important;
}
.current-menu-item .nav-top-link,
.menu-item .nav-top-link:hover {
  color: #5dbfed !important;
}

.slider_home-section .banner.has-hover {
  padding-top: calc(100vh - 80px) !important;
}
body .slider_home-section .slider-text {
  top: unset !important;
  left: unset !important;
  bottom: 35px !important;
  transform: unset !important;
  right: 35px !important;
  width: 400px !important;
}
.slider-text h3 {
  font-size: 26px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.slider-text p {
  margin: 0 !important;
  font-size: 18px !important;
  text-shadow: 4px 4px 4px rgb(0, 0, 0);
  font-weight: 300 !important;
  text-align: end;
}
.section {
  padding: 0 !important;
}
.custom-row-border-right {
  border-right: 1px solid var(--primary-color);
}
.custom-row-border-bottom {
  border-bottom: 1px solid var(--primary-color);
}
.col.designer-title h1,
.col.designer-title h1 span {
  border-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.col.designer-title h1 {
  font-size: 58px;
  font-weight: 700;
  justify-content: center;
  max-width: 770px;
  color: var(--secondary-color) !important;
  padding-left: var(--padding-left-home) !important;
}
.col.designer-title .section-title-container {
  margin-bottom: 0 !important;
}
.col.designer-title h1 span {
  text-transform: none !important;
}
.col.designer-title,
.col.designer-content,
.col.desinger-information,
.col.designer-form {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.col.designer-content p {
  color: var(--primary-color) !important;
  font-size: 18px !important;
  margin-bottom: 0 !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  width: 645px;
  text-align: justify;
}
.col.designer-content .col-inner {
  justify-content: center;
  display: flex;
}
.col.desinger-information,
.col.designer-form {
  height: auto;
  padding: 40px 0 !important;
}
.col.designer-form .wpcf7 .wpcf7-not-valid-tip {
  padding: 8px !important;
  margin-top: 0 !important;
}
.col.designer-form .wpcf7 form .wpcf7-response-output {
  margin: 13px 0 0em !important;
}
.col.designer-form .wpcf7 .wpcf7-not-valid-tip:after {
  display: none !important;
}
.desinger-information h3 {
  font-size: 22px !important;
  color: var(--primary-color);
  font-weight: 500;
  margin-bottom: 17px !important;
  font-family: "Roboto", sans-serif !important;
}
.desinger-information p {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--primary-color) !important;
  width: 370px;
  margin-bottom: 0px !important;  
}
.col.desinger-information .col-inner {
  padding-left: var(--padding-left-home) !important;
}
.designer-form .col-inner {
  display: flex;
  flex: 0 0 645px;
  margin-left: auto !important;
  gap: 40px;
}
.designer-form .col-inner h3 {
  flex: 0 0 fit-content;
  color: var(--primary-color) !important;
  font-size: 22px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500;
}
.designer-form .col-inner form {
  flex: auto;
  margin-bottom: 0 !important;
}
.designer-form .col-inner form input {
  border: 1px solid var(--primary-color);
  margin-bottom: 5px !important;
  box-shadow: none !important;
}
.designer-form .col-inner form input::placeholder {
  font-size: 16px;
  color: #989898 !important;
}
.designer-form .col-inner form input[type="submit"] {
  width: 100% !important;
  font-size: 18px !important;
  text-transform: none;
  font-weight: 400;
  background-color: var(--primary-color) !important;
  margin-bottom: 0 !important;
}
.wpcf7-spinner {
  display: none !important;
}
.about_us-heading {
  padding-top: 40px !important;
  padding-bottom: 75px !important;
  border-bottom: 1px solid var(--primary-color) !important;
}
.about_us-heading-text h3 {
  font-size: 28px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 25px !important;
}
.about_us-heading-text p {
  font-size: 18px;
  font-weight: 400;
  color: var(--primary-color);
  line-height: 28px;
  margin-bottom: 0 !important;
}
.counter-number-wrap {
  color: var(--secondary-color);
  font-size: 48px;
  font-weight: 700;
}
.counter-box {
  text-align: center;
}
.counter-box p {
  font-size: 20px;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 0 !important;
}
.counter-section {
  display: flex;
  align-items: center;
  margin-top: 40px;
  justify-content: space-between;
}
.counter-scope {
  font-size: 40px;
  color: var(--secondary-color);
  font-weight: 700;
  margin-top: 15px;
}
.about_us-heading .col {
  padding-bottom: 0 !important;
}
.about_us-banner {
  padding: 20px 0 !important;
}
.about_us-banner .row {
  margin-top: 0 !important;
}
.about_us-banner .row .col {
  padding: 0 !important;
}
.about_us-overview {
  border-top: 1px solid var(--primary-color);
}
.about_us-overview-left h2 {
  font-size: 48px;
  font-weight: 400;
  color: var(--primary-color) !important;
  max-width: 380px;
  text-align: center;
  text-transform: none;
  margin-bottom: 0 !important;
}
.about_us-overview .col {
  padding: 0 !important;
}
.about_us-overview-left {
  display: flex;
  align-items: center;
}
.about_us-overview-left .col-inner {
  display: flex;
  justify-content: center;
}
.about_us-overview-right .col-inner {
  padding: var(--padding-right-col) !important;
}
/* .about_us-overview-inner-wrapper{
    max-width: 800px;
} */
.about_us-overview-right h3 {
  font-size: 24px !important;
  color: var(--primary-color) !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}
.about_us-overview-right h4 {
  font-size: 20px !important;
  font-weight: 400 !important;
  margin-bottom: 16px !important;
  color: var(--primary-color);
}
.about_us-overview-right p {
  font-size: 18px;
  line-height: 30px;
  color: var(--primary-color);
  margin-bottom: 0 !important;
}
.about_us-overview-right ul {
  margin-bottom: 0 !important;
}
.about_us-overview-right li {
  font-size: 18px !important;
  text-align: justify !important;
}
.core-value-row .col-inner {
  padding: 0 !important;
}
.core-value-row .col:first-child {
  flex-basis: 180px;
  max-width: 180px;
}
.core-value-row .col:last-child {
  flex-basis: auto;
  max-width: fit-content;
}
.core-value-row {
  margin: 0 !important;
  margin-bottom: 45px !important;
}
.core-value-row:last-child {
  margin-bottom: 0 !important;
}
.core-value-row h3 {
  font-size: 28px !important;
  margin-bottom: 0 !important;
}
.about-us-partner-col .col-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 40px;
}
.about-us-partner-col .col-inner .img {
  margin-bottom: 0 !important;
}
.about-us-partner-col .col-inner .img-inner {
  display: flex;
  justify-content: center;
}
.about-us-partner-col .col-inner img {
  height: auto !important;
  width: auto !important;
  object-fit: contain !important;
  margin-bottom: 0 !important;
  filter: grayscale(100%) brightness(1.3);
  transition: all 0.4s ease;
  cursor: pointer;
}
.about-us-partner-col .col-inner img:hover {
  filter: grayscale(100%) brightness(0.4) contrast(1.5);
}
.about-us-bottom .col {
  padding: 0 !important;
}
.about-us-bottom-left {
  display: flex;
  align-items: center;
}
.about-us-bottom-left .col-inner {
  display: flex;
  justify-content: center;
}
.about-us-bottom-left h2 {
  text-align: center;
  text-transform: none;
  font-size: 58px;
  margin-bottom: 0 !important;
  max-width: 380px;
  font-weight: 700;
  color: var(--secondary-color) !important;
}
.about-us-bottom .about-us-bottom-col-inner-left {
  padding: 60px 0 !important;
  border-right: 1px solid var(--primary-color) !important;
}
.about-us-bottom .about-us-bottom-col-inner-right {
  padding: 60px 0 !important;
}
.about-us-bottom-right .row {
  margin: 0 !important;
}
.about-us-bottom-col-inner-left .col-inner {
  max-width: 400px !important;
  margin: 0 auto !important;
}
.about-us-bottom .about-us-bottom-col-inner-right .col-inner {
  max-width: 300px !important;
  margin: 0 auto !important;
}
.about-us-bottom-col-inner-left .col-inner h3 {
  font-size: 22px !important;
  color: var(--primary-color);
  font-weight: 400 !important;
  margin-bottom: 16px !important;
  font-family: "Roboto", sans-serif !important;
}
.about-us-bottom-col-inner-left .col-inner p {
  font-size: 16px;
  font-weight: 300;
  color: var(--primary-color);

  margin-bottom: 0 !important;
}
.about-us-bottom-col-inner-right .col-inner p {
  font-size: 16px !important;
  font-weight: 100;
  color: var(--primary-color);

  margin-bottom: 0 !important;
}
.absolute-footer {
  display: none !important;
}
.project-tabs {
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: center;
  list-style: none !important;
  background-color: #989898;
  opacity: 0.2;
  margin-bottom: 10px !important;
  transition: all 0.4s ease-in-out;
}
.project-tabs:hover {
  opacity: 1;
}
.project-tabs li {
  margin-bottom: 0 !important;
  padding: 6px 0;
  transform: translateX(55px);
}
.project-tabs li a {
  font-size: 18px;
  color: #fff !important;
  transition: all 0.4s ease-in-out;
}
.project-tabs li.active a,
.project-tabs li a:hover {
  color: var(--primary-color) !important;
}
.project-list.grid {
  /* display: grid;
  gap: 3px;
  grid-template-columns: repeat(5, minmax(300px, 1fr)); */
  position: relative;
}
.project-list .project-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 10%);
  filter: grayscale(100%);
  transition: all 0.4s ease-in-out;
}
/* .project-list .project-item {
  position: relative;
  overflow: hidden;
} */
.project-item {
  position: absolute;
  width: calc(20% - 3px); /* 100% / 5 cột - khoảng cách */
  overflow: hidden;
  margin-bottom: 3px;
}
.project-list .project-item:hover img {
  filter: grayscale(0%);
}
.project-title {
  position: absolute;
  bottom: 0;
  background-color: rgba(8, 23, 28, 0.5);
  margin-bottom: 0 !important;
  font-size: 16px;
  font-weight: 300;
  text-transform: none;
  text-align: center;
  padding: 6px 0;
  opacity: 0;
  transform: translateX(0); /* ban đầu ở vị trí gốc */
  pointer-events: none;
  transition: opacity 0.7s ease-in-out;
}
.project-title.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ẩn bằng animation trượt sang trái */
.project-title.slide-out {
  animation: titleSlideLeft 0.7s ease forwards;
}

@keyframes titleSlideLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}
.project-title a {
  color: #fff !important;
}
.load-more-wrap {
  padding: 20px 0;
}
#load-more {
  margin: 0 auto;
  display: block;
  background: var(--primary-color);
  color: #fff !important;
  text-transform: none;
  font-weight: 400;
  border: 1px solid transparent;
}
#load-more:hover {
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  background-color: transparent !important;
}
.footer-wrapper {
  background-color: #fff !important;
}
#page-tin-tuc {
  margin-top: 10px;
}
.first-blog {
  border-right: 1px solid var(--primary-color);
  padding-left: 100px;
}
.blog-item.first-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.blog-item.first-item .thumb {
  display: block;
  height: 100%;
}
.blog-item.first-item .thumb img {
  height: 100%;
  object-fit: cover;
}
.blog-item.first-item h2 {
  color: var(--primary-color);
  font-size: 32px;
  font-weight: 600;
  line-height: 46px;
  margin-bottom: 25px;
}
.blog-item.first-item h2 a {
  color: var(--primary-color) !important;
}
.blog-list {
  border-bottom: 1px solid var(--primary-color);
}
.remaining-blog {
  padding-left: 0;
}
.remaining-blog .blog-item {
  padding: 10px 0;
  padding-left: 10px;
  display: flex;
  gap: 30px;
  align-items: center;
  border-bottom: 1px solid var(--primary-color);
}
.remaining-blog .blog-item:first-child {
  padding-top: 0;
}

.remaining-blog .blog-item:last-child {
  border-bottom: 0px;
}
.remaining-blog .blog-item .thumb {
  flex: 0 0 250px;
}
.remaining-blog .blog-item .thumb img {
  width: 100%;
  display: block;
  min-height: 195px;
  max-height: 100%;
  object-fit: cover;
}
.blog-item-info {
  flex: 1;
  padding-right: 100px;
}

.blog-item-info h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.blog-item-info h3 a {
  color: var(--primary-color) !important;
}
.blog-item-info .excerpt {
  color: var(--primary-color);
  text-align: justify;
  font-family: Averta;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* number of lines to show */
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.pagination-row .col-5 {
  padding-top: 25px;
  padding-bottom: 25px;
}
.pagination-row .pagination {
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.pagination-row .pagination .page-numbers {
  font-size: 18px;
  color: var(--primary-color) !important;
  font-weight: 400;
  display: block;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination-row .pagination .page-numbers.prev,
.pagination-row .pagination .page-numbers.next {
  width: unset;
  gap: 10px;
}
.pagination-row .pagination .page-numbers.current {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}
.single-post-img {
  padding: 10px !important;
  border-right: 1px solid var(--primary-color);
}
.single-post-img .img {
  margin-bottom: 10px !important;
}
.single-post-img .img:last-child {
  margin-bottom: 0px !important;
}
.single-post-content {
  padding: 10px 7.8% 0px 30px !important;
}
.single-post-row-wrapper {
  border-bottom: 1px solid var(--primary-color);
}
.single-post-time p {
  margin-bottom: 10px !important;
  font-size: 18px;
  color: #989898;
}
.single-post-title h1 {
  font-size: 26px;
  font-weight: 600;
  color: var(--primary-color) !important;
  line-height: 40px;
  text-transform: uppercase;
  margin-bottom: 25px !important;
}
.single-post-content-row-inner {
  margin: 0 !important;
}
.single-post-content-row-inner .single-post-content-col-1 {
  padding: 0px 40px 0 0 !important;
}
.single-post-content-row-inner .single-post-content-col-2 {
  padding: 0px 0px 0 40px !important;
}
.single-post-content-row-inner p {
  margin-bottom: 28px;
  font-size: 18px;
  color: var(--primary-color);
  line-height: 28px;
  text-align: justify;
  font-weight: 300;
  /* filter: contrast(0.9) brightness(1.1);

  font-family: "Roboto", sans-serif !important; */
}
.single-post-content-row-inner h3 {
  font-size: 18px;
  color: var(--primary-color);
  line-height: 32px;
  font-family: "Roboto", sans-serif !important;
  font-weight: 600;
}
.single-post-img .col-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.single-post-img .img,
.single-post-img .img-inner {
  height: 100% !important;
}
.single-post-img .img-inner img {
  height: 100%;
  object-fit: cover;
}
.post-contact-list {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
}
.footer-single-post-right .post-contact-list {
  justify-content: center;
}
.post-contact-item {
  font-size: 18px;
  color: var(--primary-color);
  font-weight: 300;
}
.project-galleries {
  display: flex;
  width: 100%;
  height: calc(100vh - 50px); /* chiều cao cố định */
  overflow: hidden;
  gap: 5px;
}
.project-galleries-mobile {
  display: none;
}
.project-gallery-item {
  flex: 0 0 80px;
  transition: all 0.5s;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.project-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: polygon(25px 0, 100% 0, 100% 100%, 0 100%, 0 30px);
}

/* Item active rộng hơn */
.project-gallery-item.active {
  flex: 1; /* số này càng lớn thì active càng to */
}
.project-gallery-item.active img {
  clip-path: unset;
}
.fancybox__container {
  z-index: 999999 !important;
}
.project-infor {
  background-color: var(--primary-color);
  position: absolute;
  bottom: 0;
  z-index: 9999999;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}
.project-infor.active {
  background: rgba(8, 23, 28, 0.5);
  backdrop-filter: blur(4px);
}
.project-infor-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.5s ease;
  padding: 0 30px 0;
}
.project-infor.active .project-infor-content {
  max-height: 500px;
  opacity: 1;
  padding: 10px 30px 10px;
}
.project-action-item {
  cursor: pointer;
}
.project-action-display svg {
  transform: rotate(180deg);
  transition: all 0.3s;
}
.project-infor.active .project-action-display svg {
  transform: rotate(0);
}
.project-infor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #fcfcfc80;
  border-bottom: 1px solid #fcfcfc80;
  padding: 0 30px;
}
.project-infor-heading h1 {
  color: #fff;
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 0;
  line-height: 1.4;
}
.project-action {
  display: flex;
  gap: 50px;
}

.project-infor-content-item {
  font-size: 18px;
  line-height: 32px;
  color: #fff;
  font-weight: 300;
}
.blog-list-mobile {
  display: none;
}
.social-icons {
  position: fixed;
  bottom: 60px;
  z-index: 99999;
  right: 8px;
  display: flex !important;
  flex-direction: column !important;
}
.social-icon-item img {
  width: 56px;
  object-fit: cover;
  object-position: center;
}
.custom-col-inner .col-inner {
  padding: 0 !important;
}
.col + .col + .col + .col + .col + .col + .col [data-animate] {
  transition-delay: 0s !important;
}
.wpcf7-not-valid-tip {
  display: none !important;
}
.wpcf7-form-control.wpcf7-not-valid {
  border: 1px solid #ff4d4f !important;
  background-color: #fff5f5 !important;
  transition: 0.3s;
}
.wpcf7-response-output {
  display: none !important;
}