@charset "UTF-8";
/**
 * _base.scss
 * 
 * 1/ biến màu săc
 * 2/ biến kích thước font chữ
 * 3/ Cấu hình border
 * 4/ Mixin
 * 5/ Responsive
*/
body {
  background-image: url(/wp-content/uploads/2024/09/bgr.png) !important;
  background-size: cover;
  background-position: top center;
  background-color: rgb(0, 24, 31);
}

#main,
#wrapper {
  background-color: transparent !important;
}

.button.is-outline {
  border: 1px solid !important;
}
.button span {
  font-weight: 400;
}
html{
  scroll-behavior: smooth;
}
.text-border p {
  color: rgba(255, 255, 255, 0) !important;
  -webkit-text-stroke: 2px #e8e2d4;
  font-size: 140px;
  font-style: normal;
  font-weight: 600;
  line-height: 120px; /* 85.714% */
  letter-spacing: -1.5px;
  margin-bottom: 50px;
}
@media (max-width: 767px) {
  .text-border p {
    font-size: 50px;
    text-align: center;
  }
}

@media (max-width: 767px) {
  #masthead .header-inner .flex-left {
    display: none;
  }
}
#masthead .header-inner .flex-right .header-nav {
  background: rgba(142, 141, 141, 0.1215686275);
  padding: 20px;
  border-radius: 5px;
  display: flex;
  gap: 10px;
  width: 500px;
  justify-content: space-evenly;
}
#masthead .header-inner .flex-right .header-nav.nav > li > a {
  color: #fff;
}
#masthead .header-inner .flex-right .header-nav.nav > li.current-menu-item > a, #masthead .header-inner .flex-right .header-nav.nav > li:hover > a {
  color: var(--fs-color-primary);
}

.stuck #masthead .header-inner .flex-right .header-nav {
  background: transparent;
  padding: 0px;
  border-radius: 5px;
  display: flex;
  gap: 10px;
  width: 500px;
  justify-content: space-evenly;
}

@media (max-width: 767px) {
  .transparent .header-main {
    height: 100px !important;
  }
}

body .header-bg-color {
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
}

.vs_about-team .content-team p {
  font-size: 1.6rem;
}
.vs_about-team .title-team {
  position: relative;
}
.vs_about-team .title-team::before {
  content: "";
  width: 70%;
  height: 1px;
  background-color: rgb(232, 226, 212);
  position: absolute;
  left: -50%;
  top: 134px;
}
.vs_about-team .title-team::after {
  content: "";
  width: 70%;
  height: 1px;
  background-color: rgb(232, 226, 212);
  position: absolute;
  right: -50%;
  top: 134px;
}
.vs_about-team .title-wwd {
  position: relative;
}
.vs_about-team .title-wwd::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: rgb(232, 226, 212);
  position: absolute;
  left: -50%;
  top: -34px;
}
.vs_about-team .title-wwd::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: rgb(232, 226, 212);
  position: absolute;
  right: -50%;
  bottom: -34px;
}

.vs_service .tabbed-content .nav {
  margin-bottom: 50px;
  justify-content: space-evenly;
}
.vs_service .tabbed-content .nav .tab a {
  border-radius: 0;
}
.vs_service .tabbed-content .nav .tab.active a {
  border: none;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-radius: 0;
}
.vs_service .tabbed-content .nav .tab:hover a {
  border-bottom: 1px solid #fff;
  border-radius: 0;
}
.vs_service .tabbed-content .tab-panels .service-left > .col-inner .row {
  align-items: stretch;
  height: 100%;
}
.vs_service .tabbed-content .tab-panels .service-left .service-title h3 {
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -1.5px;
  text-align: left;
}
.vs_service .tabbed-content .tab-panels .service-left .service-title h2 {
  color: var(--fs-color-primary);
}
.vs_service .tabbed-content .tab-panels .service-left .service-title-parner h3 {
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -1.5px;
  text-align: left;
  color: var(--fs-color-primary);
}
.vs_service .tabbed-content .tab-panels .service-left .gallery-col {
  padding-bottom: 0;
}
.vs_service .tabbed-content .tab-panels .service-left .gallery-col img {
  height: 60px;
  object-fit: contain;
  width: auto;
}
.vs_service .tabbed-content .tab-panels .service-right .img:nth-child(2) {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  animation: pencil-animate 4s 1s infinite alternate;
}
@keyframes pencil-animate {
  0% {
    transform: translate(-10px, 10px);
  }
  50% {
    transform: translate(10px, -10px);
  }
  100% {
    transform: translate(15px, -20px);
  }
}

.vs_page-conact {
  padding-bottom: 0 !important;
}

.vs_contact-form form {
  margin-bottom: 0;
}
.vs_contact-form form input:not(.wpcf7-submit) {
  background: transparent;
  height: 50px;
  color: #fff;
  border-radius: 5px;
  border-color: rgba(255, 255, 255, 0.3294117647);
}
.vs_contact-form form input:not(.wpcf7-submit)::placeholder {
  color: #fff;
}
.vs_contact-form form .form-right p,
.vs_contact-form form .form-right span {
  height: 100%;
}
.vs_contact-form form .form-right textarea {
  height: calc(100% - 25px);
  background: transparent;
  color: #fff;
  border-radius: 5px;
  border-color: rgba(255, 255, 255, 0.3294117647);
}
.vs_contact-form form .form-right textarea::placeholder {
  color: #fff;
}
.vs_contact-form form .wpcf7-submit {
  margin-right: 0;
  border-radius: 5px;
  margin-bottom: 0;
}
.vs_contact-form form .wpcf7-spinner {
  position: absolute;
}

.vs_banner {
  padding-top: 100px !important;
}
.vs_banner .col h1 {
  font-size: 2.7rem;
  font-weight: 500;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .vs_banner .col h1 {
    font-size: 1.6rem;
  }
}
.vs_banner .col h1 strong {
  color: var(--fs-color-primary);
  font-weight: 500;
}

.vs_misson-vision .section-content > .row {
  position: relative;
}
.vs_misson-vision .section-content > .row::before {
  content: "";
  background-image: url("/wp-content/uploads/2024/09/bgr-who-we-are-3.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.4;
}
.vs_misson-vision .text-highlight {
  font-size: 1.6rem;
}
@media (max-width: 767px) {
  .vs_misson-vision .text-highlight {
    font-size: 1.5rem;
  }
}
.vs_misson-vision .col-mission {
  margin-bottom: 50px;
}
.vs_misson-vision .col-mission .content-misson {
  width: fit-content;
  margin: auto;
  position: relative;
}
.vs_misson-vision .col-mission .content-misson::before {
  content: "";
  height: 30px;
  width: 30px;
  background-image: url(/wp-content/uploads/2024/09/quote.svg);
  filter: invert(97%) sepia(9%) saturate(0%) hue-rotate(106deg) brightness(97%) contrast(111%);
  position: absolute;
  background-size: cover;
  left: -30px;
  top: -10px;
}
.vs_misson-vision .col-vision {
  margin-bottom: 50px;
}
.vs_misson-vision .col-vision .title-vision {
  text-align: right;
}
.vs_misson-vision .col-vision .content-vision {
  width: fit-content;
  margin: auto;
  position: relative;
}
.vs_misson-vision .col-vision .content-vision::before {
  content: "";
  height: 30px;
  width: 30px;
  background-image: url(/wp-content/uploads/2024/09/quote.svg);
  filter: invert(97%) sepia(9%) saturate(0%) hue-rotate(106deg) brightness(97%) contrast(111%);
  position: absolute;
  background-size: cover;
  right: -30px;
  top: -10px;
  transform: rotate(180deg);
}
.vs_misson-vision .col-team .content-vision {
  font-size: 1.6rem;
}

.vs_logo .gallery-col {
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
}
.vs_logo .gallery-col img {
  height: 100px;
  object-fit: contain;
}

.vs_contact .contact-right .col-inner {
  background-color: rgba(255, 255, 255, 0.24);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  padding: 50px;
  border-radius: 10px;
}
.vs_contact .contact-right .col-inner::before {
  content: "";
  background-image: url(/wp-content/uploads/2024/09/Group.svg);
  width: 100px;
  height: 100px;
  background-position: center;
  position: absolute;
  background-size: cover;
  right: -100px;
  top: -100px;
}
.vs_contact .contact-right .col-inner .icon-box {
  margin-bottom: 20px;
}
.vs_contact .contact-right .col-inner .icon-box .icon-box-text {
  font-size: 1.3rem;
}
.vs_contact .contact-right .col-inner .button {
  border-radius: 10px;
  margin-left: auto;
  display: block;
  margin-top: 30px;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .vs_contact .contact-right .col-inner .button {
    margin-top: 0;
    margin-left: 0;
  }
}

.projects-slider .flickity-slider .item-project {
  width: 66% !important;
  padding: 50px;
}
@media (max-width: 767px) {
  .projects-slider .flickity-slider .item-project {
    width: 100% !important;
    padding: 10px;
  }
}
.projects-slider .flickity-slider .item-project .col-inner .project-thumb {
  margin-right: auto;
  text-align: right;
}
@media (max-width: 767px) {
  .projects-slider .flickity-slider .item-project .col-inner .project-thumb {
    margin-bottom: 10px;
  }
}
.projects-slider .flickity-slider .item-project .col-inner .project-thumb img {
  width: 950px;
  height: 550px;
  object-fit: cover;
  opacity: 0.7;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .projects-slider .flickity-slider .item-project .col-inner .project-thumb img {
    width: 100%;
  }
}
.projects-slider .flickity-slider .item-project .col-inner .project-content {
  width: 56%;
  max-width: 650px;
  /* height: 265px; */
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  padding: 30px;
  border-radius: 10px;
  backdrop-filter: blur(7px);
}
@media (max-width: 767px) {
  .projects-slider .flickity-slider .item-project .col-inner .project-content {
    width: 100%;
    position: unset;
    top: unset;
    transform: unset;
  }
}
.projects-slider .flickity-slider .item-project .col-inner .project-content .title {
  font-size: 2rem;
}
.projects-slider .flickity-slider .item-project .col-inner .project-content .project-button .button {
  border-radius: 5px;
}
.projects-slider .flickity-slider .item-project .col-inner .project-content .project-button .button.primary {
  background: rgb(0, 44, 55);
}
.projects-slider .flickity-slider .item-project .col-inner .project-content .project-button .button.is-outline {
  border-width: 1px;
}

.title-project {
  padding: 50px 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.title-project h1 {
  color: var(--fs-color-primary) !important;
  font-size: 3rem;
  text-transform: uppercase;
  margin-bottom: 0;
}
.title-project h2 {
  font-size: 2.5rem;
  text-transform: uppercase;
  font-weight: 400;
}
.title-project .rank-math-breadcrumb {
  text-transform: uppercase;
}
.title-project .rank-math-breadcrumb a,
.title-project .rank-math-breadcrumb .last {
  color: var(--fs-color-primary);
}

.portfolio-page-wrapper .catgory_projects .list-category_projects {
  display: flex;
  gap: 39px;
  justify-content: center;
  list-style: none;
}
@media (max-width: 767px) {
  .portfolio-page-wrapper .catgory_projects .list-category_projects {
    gap: 10px;
    flex-wrap: wrap;
  }
}
.portfolio-page-wrapper .catgory_projects .list-category_projects .item-category {
  padding: 5px 15px;
}
.portfolio-page-wrapper .catgory_projects .list-category_projects .item-category.active {
  border-bottom: 1px solid;
}
.portfolio-page-wrapper .row {
  position: relative;
  overflow: hidden;
}
.portfolio-page-wrapper .decor-project-archive {
  width: 100% !important;
  height: 100%;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  position: absolute;
}
.portfolio-page-wrapper .decor-project-archive .item-cate-decor {
  font-size: 10rem;
  color: rgba(255, 255, 255, 0.06);
  display: block;
  text-transform: uppercase;
  list-style: 2;
  text-align: right;
}
.portfolio-page-wrapper .decor-project-archive .item-cate-decor:nth-child(2) {
  font-size: 7rem;
  text-align: left;
}
.portfolio-page-wrapper .decor-project-archive .item-cate-decor:nth-child(3) {
  font-size: 11rem;
}
.portfolio-page-wrapper .decor-project-archive .item-cate-decor:nth-child(4) {
  font-size: 8rem;
}
.portfolio-page-wrapper .decor-project-archive .item-cate-decor:nth-child(5) {
  font-size: 13rem;
}
.portfolio-page-wrapper .item-project {
  padding: 0 40px 30px !important;
}
.portfolio-page-wrapper .item-project:nth-child(2n) {
  margin-top: 80px;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .portfolio-page-wrapper .item-project:nth-child(2n) {
    margin-top: 30px;
    margin-bottom: 0;
  }
}
.portfolio-page-wrapper .item-project .portfolio-box {
  margin-bottom: 80px;
  position: relative;
}
@media (max-width: 767px) {
  .portfolio-page-wrapper .item-project .portfolio-box {
    margin-top: 30px;
    margin-bottom: 0;
  }
}
.portfolio-page-wrapper .item-project .portfolio-box .box-image .image-thumb {
  position: relative;
  width: 60%;
  margin: auto;
}
.portfolio-page-wrapper .item-project .portfolio-box .box-image .image-thumb::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4196078431);
  position: absolute;
  left: 0;
  top: 0;
}
.portfolio-page-wrapper .item-project .portfolio-box .box-image .image-thumb img {
  aspect-ratio: 261/407;
  display: block;
  object-fit: cover;
}
.portfolio-page-wrapper .item-project .portfolio-box .box-text-top {
  position: absolute;
  width: 50%;
  top: 30px;
}
.portfolio-page-wrapper .item-project .portfolio-box .box-text-top .box-text-inner .portfolio-box-title {
  margin-bottom: 10px;
}
.portfolio-page-wrapper .item-project .portfolio-box .box-text-top .box-text-inner .portfolio-box-title a {
  font-size: 1.6rem;
  color: var(--fs-color-primary);
  font-weight: bold;
}
.portfolio-page-wrapper .item-project .portfolio-box .box-text-top .box-text-inner .portfolio-box-category {
  margin-bottom: 10px;
  color: var(--fs-color-primary);
  font-weight: 400;
  font-size: 1.2rem;
}
@media (max-width: 767px) {
  .portfolio-page-wrapper .item-project .portfolio-box .box-text-top .box-text-inner .portfolio-box-category {
    display: none;
  }
}
.portfolio-page-wrapper .item-project .portfolio-box .box-text-bottom {
  position: absolute;
  width: fit-content;
  right: 0;
  bottom: 60px;
}
.portfolio-page-wrapper .item-project .portfolio-box .box-text-bottom .box-text-inner {
  display: flex;
  align-content: center;
  align-items: center;
  gap: 20px;
}
.portfolio-page-wrapper .item-project .portfolio-box .box-text-bottom .box-text-inner::before {
  content: "";
  width: 100px;
  height: 1px;
  display: block;
  background-color: #fff;
}

.portfolio-title_vs {
  padding-top: 220px;
}
.portfolio-title_vs .portfolio-title-inner {
  margin-bottom: 50px;
}
.portfolio-title_vs .portfolio-title-inner .category-project-single {
  font-size: 2rem;
  margin-bottom: 20px;
  color: var(--fs-color-primary);
}
.portfolio-title_vs .portfolio-title-inner .category-project-single a {
  color: var(--fs-color-primary);
}
.portfolio-title_vs .portfolio-title-inner .portfolio-title {
  font-size: 3rem;
  color: #e8e2d4;
}
.portfolio-title_vs .slider-project .carousel {
  margin-bottom: 10px;
}
.portfolio-title_vs .slider-project .carousel-cell {
  width: 100%;
}
.portfolio-title_vs .slider-project .carousel-nav .flickity-slider > div {
  padding: 10px;
  width: 25% !important;
  filter: brightness(0.5);
}
.portfolio-title_vs .slider-project .carousel-nav .flickity-slider > div.is-selected {
  filter: none;
}

.portfolio-top .col-divided .portfolio-summary .project-info h3 {
  font-weight: 400;
  font-size: 0.9rem;
}
.portfolio-top .col-divided .portfolio-summary .project-info p {
  font-size: 1.1rem;
}
.portfolio-top #portfolio-content .portfolio-inner .btn-project a {
  color: var(--fs-color-primary);
  font-style: italic;
}
.portfolio-top #portfolio-content .portfolio-inner .btn-project a i {
  background-color: rgba(255, 255, 255, 0.231372549);
  color: #fff;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  font-size: 0.9rem;
}

.portfolio-bottom {
  margin-top: 30px;
}
.portfolio-bottom .related-projects-title {
  margin-top: 50px;
}
.portfolio-bottom .portfolio-related .row-small > .flickity-viewport > .flickity-slider > .col {
  flex-basis: 50% !important;
  max-width: 50% !important;
}
.portfolio-bottom .portfolio-related .row-small > .flickity-viewport > .flickity-slider > .col .portfolio-box .box-image {
  border-radius: 10px;
}
.portfolio-bottom .portfolio-related .row-small > .flickity-viewport > .flickity-slider > .col .portfolio-box .box-text .box-text-inner {
  display: flex;
}
.portfolio-bottom .portfolio-related .row-small > .flickity-viewport > .flickity-slider > .col .portfolio-box .box-text .box-text-inner .portfolio-box-title {
  width: 50%;
  text-align: left;
}
.portfolio-bottom .portfolio-related .row-small > .flickity-viewport > .flickity-slider > .col .portfolio-box .box-text .box-text-inner .portfolio-box-category {
  text-transform: none;
  color: var(--fs-color-primary);
  width: 50%;
  text-align: right;
  font-size: 0.8rem;
  opacity: 1;
  font-style: italic;
}
.portfolio-bottom .portfolio-related .row-small > .flickity-viewport > .flickity-slider > .col .portfolio-box .box-text .box-text-inner .portfolio-box-category span {
  opacity: 1;
}

.vs_footer-main .menu-footer-top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 40px;
}
@media (max-width: 767px) {
  .vs_footer-main .menu-footer-top {
    gap: 20px;
    flex-wrap: wrap;
  }
}
.vs_footer-main .menu-footer-top .ux-menu-link {
  display: inline;
  width: fit-content;
  font-size: 1.3rem;
}
.vs_footer-main .menu-footer-top .ux-menu-link a {
  display: inline;
}
.vs_footer-main .menu-footer-main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 40px;
}
@media (max-width: 767px) {
  .vs_footer-main .menu-footer-main {
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  .vs_footer-main .menu-footer-main .ux-menu-link:nth-child(4) {
    width: calc(50% - 20px);
    text-align: right;
  }
  .vs_footer-main .menu-footer-main .ux-menu-link:nth-child(3) {
    width: calc(50% - 20px);
    text-align: right;
  }
}
.vs_footer-main .menu-footer-main .ux-menu-link {
  display: inline;
  width: fit-content;
  font-size: 1.3rem;
}
.vs_footer-main .menu-footer-main .ux-menu-link a {
  display: inline;
}
.vs_footer-main .menu-footer-main .ux-menu-link i.ux-menu-link__icon {
  font-size: 26px;
  display: flex;
  align-items: flex-end;
}
.vs_footer-main .menu-footer-main .facebook-svg a span:before {
  content: "";
  display: inline-block;
  height: 25px;
  width: 26px;
  background: url("/wp-content/uploads/2024/10/facebook.png");
  background-size: cover;
}

.absolute-footer {
  display: none;
}/*# sourceMappingURL=style.css.map */