:root {
  --color-main: #f4c571;
  --border-color: #c4a56e;
  --btn-color: #bd8741;
  --text-color-white: #fff;
  --text-color-dark: #000;
  --background-color: #000;
  --bg-page: #fffaed;
  --font-family-base: "Roboto", sans-serif;
  --font-family-secondary: "Poppins", sans-serif;
  --font-family-third: "Montserrat", sans-serif;
  --font-family-heading: "Beau Rivage", cursive;
  --font-family-heading-services: "Yomogi", cursive;
  --font-size-base: 18px;
  --line-height-base: 28px;

  /* Effect background */
  --effect-bg: rgba(255, 255, 255, 0.1);

  /* Effect size */
  --effect-width: 120%;
  --effect-height: 120%;

  /* Transition */
  --effect-duration: 1.2s;
  --effect-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Transform các giá trị mặc định */
  --effect-scale: scale3d(2.2, 1.8, 1);
  --effect-rotate: rotate3d(0, 0, 1, 45deg);
  --effect-translate-start: translate3d(0, -120%, 0);
  --effect-translate-end: translate3d(0, 120%, 0);

  --img-scale-hover: scale(1.2);
  --img-transition-hover: all 1s ease-in-out;

  --bg-gradient: linear-gradient(90.14deg,
      #bd8741 38.14%,
      rgba(89, 51, 14, 0.2) 123.12%);
}

html {
  scroll-behavior: smooth;
  /* scroll-behavior: auto !important; */
  background-color: #3a3a3c;
  overscroll-behavior-y: none;
}

body {
  background-color: var(--background-color);
  font-family: var(--font-family-base);
  font-weight: 400;
  color: var(--text-color-white);
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
  line-height: var(--line-height-base);
  position: relative;
  height: auto;
  overflow-x: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

body img {
  max-width: 100%;
  height: auto;
}

a,
a:hover {
  text-decoration: none;
}

.img {
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  height: auto;
}

img.alignnone {
  width: auto;
}

img.alignright {
  float: right;
  margin: 0 0 1em 1em;
  width: auto;
}

img.alignleft {
  float: left;
  margin: 0 1em 1em 0;
  width: auto;
}

img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  height: auto;
}

a img.alignright {
  float: right;
  margin: 0 0 1em 1em;
  width: auto;
}

a img.alignleft {
  float: left;
  margin: 0 1em 1em 0;
  width: auto;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  height: auto;
}
.aligncenter{
  margin-inline: auto;
}
.aligncenter p{ 
  text-align: center;
}

.aligncenter .wp-element-caption {
  text-align: center;
}

.w-fit {
  width: fit-content;
}

.owl-theme .owl-nav [class*="owl-"]:hover {
  background-color: transparent;
}

.rotate-180 {
  transform: rotate(180deg);
}

.row.gx-10px {
  --bs-gutter-x: 10px;
}

.row.gy-10px {
  --bs-gutter-y: 10px;
}

.row.gx-20px {
  --bs-gutter-x: 20px;
}

.row.gx-17px {
  --bs-gutter-x: 17px;
}

.row.gx-7px {
  --bs-gutter-x: 7px;
}

.row.gy-20px {
  --bs-gutter-y: 20px;
}

input:focus,
textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

.item .row,
.item>.row,
.owl-item .row {
  margin: 0;
  padding: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--input-color) !important;
  caret-color: var(--input-color) !important;

  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;

  transition: background-color 9999s ease-in-out 0s;
}

input:-internal-autofill-selected {
  -webkit-text-fill-color: var(--input-color) !important;
  background-color: transparent !important;
}

.bg-inherit {
  background-color: inherit !important;
}

.ftwp-heading-target {
  position: relative;
}

.ftwp-heading-target::before {
  content: "";
  display: block;
  height: 400px;
  margin-top: -400px;
  pointer-events: none;
}

.form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: inherit;
}

/* @property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
} */

/* header */
.header-logo {
  padding-top: clamp(10px, 1vw, 28px);
  padding-bottom: clamp(15px, 1.6vw, 44px);
}

.header-logo img {
  width: clamp(120px,
      calc(172px + (270 - 172) * ((100vw - 1440px) / (1650 - 1440))),
      270px);
  height: auto;
  aspect-ratio: 270 / 128;
  object-fit: contain;
  display: block;
  margin: auto;
}

/* menu */
.menu-main {
  background-color: var(--color-main);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 999;
}

.menu-main.scroll-top {
  animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
}

.menu-search a {
  color: #3a3a3c;
  cursor: pointer;
  display: block;
}

.menu-booking a {
  border-radius: 12px;
  font-weight: 400;
  padding: 5px;
  line-height: 150%;
}

.navigation,
.navigation ul,
.navigation ul li,
.navigation ul li a {
  list-style: none;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.navigation ul {
  width: 100%;
}

.navigation:after,
.navigation>ul:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.navigation>ul {
  display: flex;
}

.navigation>ul>li>a {
  color: #010101;
  font-family: var(--font-family-third);
  text-align: center;
  white-space: nowrap;
  position: relative;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
}

.navigation>ul>li>a svg {
  width: 20px;
}

.navigation ul li:first-child a {
  margin-left: 0;
}

.navigation ul li:last-child a {
  margin-right: 0;
}

.navigation>ul>li.active>a:hover:before,
.navigation>ul>li.active>a:focus:before,
.navigation>ul>li.active>a:active:before {
  display: none;
}

.navigation ul ul {
  position: absolute;
  left: -9999px;
  top: 40px;
  width: 200px;
  z-index: 999;
  opacity: 0;
  -webkit-transition:
    top 0.2s ease,
    opacity 0.2s ease-in;
  -o-transition:
    top 0.2s ease,
    opacity 0.2s ease-in;
  transition:
    top 0.2s ease,
    opacity 0.2s ease-in;
  padding-left: 0;
}

.navigation ul ul ul {
  width: auto;
}

.navigation.align-right ul ul {
  text-align: right;
}

.navigation>ul>li>ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom-color: var(--color-main);
  top: -1px;
  left: 30%;
  display: none;
}

.navigation.align-right>ul>li>ul::after {
  left: auto;
  right: 20px;
}

.navigation ul ul ul::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-right-color: var(--color-main);
  top: 12px;
  left: -8px;
}

.navigation>ul>li:hover>ul {
  top: 35px;
  left: 0;
  opacity: 1;
}
.navigation.block-hover > ul > li:hover > ul.sub-menu {
  left: -9999px !important;
  opacity: 0 !important;
  top: 40px !important;
}
.bg-menu{
  width: 100%;
  background: var(--color-main);
  position: fixed;
  left: 0;
  top: 228px;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}
.navigation>ul>li:hover>ul li{
  position: relative;
}
.navigation>ul>li:hover>ul li.bg-menu-item .bg-menu{
  opacity: 1;
  visibility: visible;
  transition: all 0.7s;
}

.navigation.align-right>ul>li:hover>ul {
  left: auto;
  right: 0;
}

.navigation ul ul ul {
  padding-top: 0;
  padding-left: 6px;
}

.navigation.align-right ul ul ul {
  padding-right: 6px;
}

.navigation ul ul>li:hover>ul {
  left: 200px;
  top: 0;
  opacity: 1;
}

.navigation.align-right ul ul>li:hover>ul {
  left: auto;
  right: 100%;
  opacity: 1;
}

.navigation ul ul li a {
  color: var(--text-color-dark);
  text-decoration: none;
  padding: 5px 0;
  line-height: 27px;
  width: 300px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-family-third);
  position: relative;
  font-size: 14px;
}

.navigation ul ul li a svg {
  transform: translateY(-50%) rotate(-90deg) !important;
  width: 18px;
  position: absolute;
  right: 10px;
  top: 50% !important;
}

.navigation>ul>li:hover>a,
.navigation ul ul li:hover a {
  color: #c16d00;
}

.menu-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 998;
}

/* Khi active */
.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* slider */

#slider-home {
  overflow: hidden;
}

#slider-home .item a img,
#slider-home .item video,
.slider-video[poster] {
  object-fit: cover;
  aspect-ratio: 16/9;
}

#slider-home .item a span span {
  font-family: var(--font-family-heading);
  font-size: clamp(30px, 9.1vw, 150px);
  line-height: clamp(120%, 10vw, 150%);
}

#slider-home .slider-text-wrap {
  pointer-events: none;
}

.main-slider .swiper-slide-active .slider-text {
  animation: backInDown 1.8s ease-out 0.5s both;
}

/* project-block */
.project-block__row {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(20px, 2vw, 60px);
}
.project-block__row:has(> .project-item:nth-child(4)) {
  grid-template-columns: repeat(4, 1fr);
}

.project-item .project-thumb,
.project-related .project-item .project-scale {
  aspect-ratio: 509/713;
  width: 100%;
  overflow: hidden;
  box-shadow: 1px 2px 11px #5c5c5c3d;
  will-change: transform;
  transform: translateZ(0);
  transition:
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.65s ease;
}

.project-item .project-thumb:hover,
.project-related .project-item:hover .project-scale,
.box-project-item:hover>a {
  box-shadow: 5px 5px 20px 0px #8d818142;
  transform: scale3d(1.01, 1.01, 1.01) !important;
}

.project-block {
  margin-top: -5vw;
  z-index: 1;
  padding-bottom: clamp(50px, -106px + 13.628vw, 76px);
}

.project-title {

  font-weight: 300;
  font-size: clamp(16px, 1.2vw + 10.4px, 25px);
  margin-top: 27px;
  gap: 10px;
}

.draw-line {
  position: relative;
  background: transparent;
  font-size: 0;
  line-height: 0;
  vertical-align: baseline;
}

.draw-line::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #fff;
  transform: scaleY(0.5) scaleX(0);
  transform-origin: left center;
  transition: transform 0.95s cubic-bezier(0.19, 1, 0.22, 1);
}

.draw-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  z-index: 2;
}

.draw-line.draw::before {
  animation: dotRun 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.draw-line.draw::after {
  animation: lineDraw 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes dotRun {
  0% {
    left: 0;
    transform: translateY(-50%) translateX(0);
    opacity: 1;
  }

  94% {
    left: 100%;
    transform: translateY(-50%) translateX(-100%);
    opacity: 1;
  }

  100% {
    left: 100%;
    transform: translateY(-50%) translateX(-100%);
    opacity: 0;
  }
}

@keyframes lineDraw {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

/* .project-item .img:after,
.wrap-about__image .img:after,
.img-item-gallery .img:after,
.box-blog .img:after {
    content: '';
    background: var(--effect-bg);
    position: absolute;
    top: -10%;
    left: -10%;
    width: var(--effect-width);
    height: var(--effect-height);
    transition: transform var(--effect-duration) var(--effect-timing);

    transform: var(--effect-scale) var(--effect-rotate) var(--effect-translate-start);

    
    -webkit-transform: var(--effect-scale) var(--effect-rotate) var(--effect-translate-start);
    -moz-transform: var(--effect-scale) var(--effect-rotate) var(--effect-translate-start);
    -ms-transform: var(--effect-scale) var(--effect-rotate) var(--effect-translate-start);
}

.project-item:hover .img:after,
.wrap-about__image:hover .img:after,
.img-item-gallery:hover .img:after,
.box-blog:hover .img:after {
    transform: var(--effect-scale) var(--effect-rotate) var(--effect-translate-end);
    -webkit-transform: var(--effect-scale) var(--effect-rotate) var(--effect-translate-end);
    -moz-transform: var(--effect-scale) var(--effect-rotate) var(--effect-translate-end);
    -ms-transform: var(--effect-scale) var(--effect-rotate) var(--effect-translate-end);
}

.project-item .img img,
.slider-active .item .blog-thumb__secondary img,
.slider-active .item .blog-active__thumb img,
.wrap-about__image img,
.box-service,
.box-service__img,
.img-item-gallery .img img,
.box-blog .img img {
    -webkit-transition: var(--img-transition-hover);
    transition: var(--img-transition-hover);
} */

/* .project-item:hover .img img,
.wrap-about__image:hover a img,
.img-item-gallery:hover .img img,
.box-blog:hover .img img {
    -webkit-transform: var(--img-scale-hover);
    -ms-transform: var(--img-scale-hover);
    transform: var(--img-scale-hover);
} */

/* statistical-block */
/* .statistical-block {
    padding-top: clamp(40px, 4vw, 75px);
    padding-bottom: clamp(40px, 4.1vw, 77px);
} */

.statistical-block__number {
  font-size: clamp(24px, 3.5vw, 60px);

  line-height: 100%;
  height: clamp(32px, 4.8vw, 90px);
}

.statistical-block__description {
  font-size: clamp(13px, 1.21vw, 20px);
  line-height: 150%;
}

.statistical-block__row>div {
  border-right: 1px dotted var(--border-color);
}

.statistical-block__row>div:last-child {
  border-right: none;
}

/* blog-active */
.blog-active {
  padding-top: clamp(50px, -106px + 13.628vw, 76px);
  padding-bottom: clamp(50px, -107.2px + 13vw, 115px);
}

.blog-active__group {
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.blog-active__group::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-image-avtivities) center / cover no-repeat;
  z-index: 0;
  transform: translateZ(0);
  will-change: transform;
}

.blog-active__group * {
  position: relative;
  z-index: 1;
}

.blog-active__group__title {
  line-height: clamp(35px, 2vw + 35px, 40px);
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  margin-bottom: 0 !important;
  position: absolute;
  left: 0;
  top: 7px;
}
.blog-active__group__title span{
  padding-right: 25px;
  padding-top: 5px;
}

.slider-wrap {
  position: relative;
  overflow: visible;
  display: block;
  padding-left: 60px;
  aspect-ratio: 1920 / 1080;
}

.viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider-wrap .slide {
  width: clamp(300px, 50vw, 700px);
  aspect-ratio: 948/660;
  position: absolute;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  transition:
    transform 1500ms cubic-bezier(0.22, 0.9, 0.28, 1),
    opacity 1500ms cubic-bezier(0.22, 0.9, 0.28, 1),
    z-index 0ms !important;
  cursor: pointer;
}

.slide .slide-bg-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* cắt scale */
  z-index: 0;
}

.slide .slide-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.slide>.slide__line {
  position: relative;
  z-index: 2;
  height: 100%;
}

/* overlay gradient/mask để chữ dễ đọc */
.slider-wrap .slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 70%,
      rgba(0, 0, 0, 0.6) 90%,
      rgba(0, 0, 0, 0.85) 100%);
  z-index: 1;
  transition: background 700ms;
  bottom: -5px;
  right: -5px;
}

.slider-wrap .slide.back::after {
  background: rgb(0 0 0 / 50%);
  z-index: 1;
}

/* trạng thái front (active) - hiển thị đầy đủ, ở trước */
.slider-wrap .slide.front {
  transform: translate(-6%, 8%) scale(1);
  z-index: 30;
  opacity: 1;
  filter: none;
  position: absolute;
  left: 0;
  top: calc(50px * (clamp(380px, 56vw, 603px) / 603px));
}

/* trạng thái back (sau) - nằm sau, hơi lệch phải và lên trên */

.slider-wrap .slide.back {
  z-index: 10;
  right: 0 !important;
  left: auto !important;
  top: 0 !important;
}

.slider-wrap .slide.back .meta {
  display: none;
}

/* trạng thái offscreen (những item khác) sẽ ẩn và đặt bên phải */
.slider-wrap .slide.off {
  z-index: 5;
  /* transform: translate(60%, 0) scale(0.9); */
  opacity: 0;
  filter: grayscale(100%) blur(1px);
  pointer-events: none;
}

/* Nội dung text (đặt trên phần overlay) */
.slider-wrap .meta {
  position: absolute;
  left: 40px;
  bottom: 36px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  width: calc(100% - 40px);
  overflow: hidden;
  padding-right: 5px;
}

.slider-wrap .bignum {

  font-weight: 300;
  font-size: clamp(24px, 3.5vw, 60px);
}

.slider-wrap .textblock {
  border-left: 3px solid var(--btn-color);
  padding-left: 16px;
}

.slider-wrap .textblock h3 {
  font-size: clamp(18px, 1.7vw, 30px);
  margin-bottom: 5px;
  text-transform: uppercase;
}

.slider-wrap .textblock p {

  font-weight: 500;
  margin-bottom: 25px;
}

.slider-wrap .btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  color: #fff;
  border: 1px solid #fff;
  transition: all 220ms;

}

.slider-wrap .btn:hover {
  background: var(--btn-color);
  border-color: var(--btn-color);
}

/* số nhỏ góc phải của back */
.slider-wrap .small-index {
  position: absolute;
  right: 29px;
  bottom: 67px;
  z-index: 2;

  font-weight: 300;
  font-size: clamp(24px, 3.5vw, 60px);
  pointer-events: none;
  color: #fff;
}

/* navigation */
.slider-wrap .nav {
  position: absolute;
  right: 28px;
  bottom: 45px;
  z-index: 60;
  display: none;
  gap: 18px;
}

.slider-wrap .nav button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-color);
  transition: all 180ms;
}

.slider-wrap .nav button svg {
  width: clamp(20px,
      calc(25px + (32 - 25) * ((100vw - 1440px) / (1650 - 1440))),
      32px);
}

.slider-wrap .slide.front .slide__line {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider-wrap .slide.front .slide__line .draw-line-horizontal,
.slider-wrap .slide.front .slide__line .draw-line-vertical {
  display: block;
}

.draw-line-horizontal {
  position: absolute;
  bottom: -32px;
  right: -50px;
  display: none;
}

.draw-line-horizontal,
.line-horizontal-about {
  width: clamp(70px, calc(0.86 * (100vw - 1600px) + 280px), 223px);
}

.draw-line-horizontal span,
.line-horizontal-about span {
  height: 1px;
  width: 100%;
  background: transparent;
  position: relative;
  display: inline-block;
}

.draw-line-horizontal span::after,
.line-horizontal-about span:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #fff;
  transform: scaleY(0.5) scaleX(0);
  transform-origin: left center;
  transition: transform 0.95s cubic-bezier(0.19, 1, 0.22, 1);
}

.draw-line-horizontal span::before,
.line-horizontal-about span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  z-index: 2;
}

.draw-line-horizontal span.draw::before,
.line-horizontal-about span.draw::before {
  animation: dotRun 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.draw-line-horizontal span.draw::after,
.line-horizontal-about span.draw::after {
  animation: lineDraw 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.slider-active .owl-item:not(.active) .draw-line-horizontal span::before,
.slider-active .owl-item:not(.active) .draw-line-horizontal span:after,
.slider-active .owl-item:not(.active) .draw-line-vertical span::before,
.slider-active .owl-item:not(.active) .draw-line-vertical span:after {
  animation: none !important;
  transform: none !important;
  opacity: 0 !important;
  height: 0 !important;
  transform: scaleX(0) !important;
}

.draw-line-vertical {
  position: absolute;
  bottom: -42px;
  right: -29px;
  display: none;
}

.draw-line-vertical,
.line-vertical-about {
  height: clamp(43.26px,
      calc((0.86 * (100vw - 1600px) + 280px) / 1.618),
      138px);
}

.draw-line-vertical span,
.line-vertical-about span {
  height: 100%;
  width: 1px;
  background: transparent;
  position: relative;
  display: inline-block;
}

.draw-line-vertical span::after,
.line-vertical-about span::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: top center;
  transform: scaleY(0);
}

.draw-line-vertical span::before,
.line-vertical-about span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateY(0);
}

/* Trigger animation */
.draw-line-vertical span.draw::before,
.line-vertical-about span.draw::before {
  animation: dotDown 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.draw-line-vertical span.draw::after,
.line-vertical-about span.draw::after {
  animation: lineDown 3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes dotDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  5% {
    opacity: 1;
    transform: translateY(0);
  }

  94% {
    opacity: 1;
    transform: translateY(clamp(43.26px, calc((0.86 * (100vw - 1600px) + 280px) / 1.618), 138px));
  }

  100% {
    opacity: 0;
    transform: translateY(clamp(43.26px, calc((0.86 * (100vw - 1600px) + 280px) / 1.618), 138px));
  }
}

@keyframes lineDown {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

/* wrap-about */
.wrap-about {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: clamp(60px, -106px + 13.628vw, 98px);
}

.wrap-about__content {
  row-gap: clamp(20px, 1.875vw, 45px);
}

.wrap-about__content h2 {
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  /* line-height: clamp(40px, 3.64vw, 60px); */
}

.wrap-about__content .short-intro {
  font-size: clamp(14px, 1.0625vw, 20px);
  padding-right: 10px;
}

.wrap-about__content .short-intro {
  row-gap: clamp(15px, 1.25vw, 30px);
}

.wrap-about__content .short-intro p {
  margin-bottom: 0;
}

.wrap-about__content a,
.wrap-about__content>div div {

  font-weight: 400;
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
  line-height: 150%;
  min-width: clamp(120px, calc(0.58 * (100vw - 1600px) + 180px), 209px);
  min-height: calc(clamp(120px, calc(0.58 * (100vw - 1600px) + 180px), 209px) / 3.73);
  background-color: var(--btn-color);
  border-radius: 12px;
  transition: ease-in-out 0.3s;
  margin-right: 80px;
}

.wrap-about__content a:hover,
.wrap-about__content>div div:hover {
  background-color: var(--background-color);
  border: 1px solid var(--btn-color);
}

.wrap-about__image a {
  aspect-ratio: 806/900;
  height: auto;
}

.wrap-about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.line-horizontal-about {
  position: absolute;
  bottom: clamp(-32px, -1.94vw, 0px);
  left: clamp(-60px, -3.64vw, 0px);
}

.line-vertical-about {
  position: absolute;
  bottom: clamp(-48px, -2.9vw, 0px);
  left: clamp(-32px, -1.93vw, 0px);
}

/* procedure-wrap */
.procedure-wrap {
  padding-top: 47px;
  padding-bottom: 86px;
}

.box-title h2 {
  padding-inline: 25px;
  margin-bottom: clamp(30px, 6.3vw - 64px, 76px);
}

.box-title h2 span {
  font-size: clamp(23px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  line-height: clamp(20px, 2vw + 35px, 48px);
  font-weight: 700 !important;
  text-transform: capitalize !important;
}

.box-title h2::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: #fff;
}

.box-title.draw h2::before {
  animation: draw-horizontal 1.2s ease-out forwards;
}

.box-title h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -15px;
  width: 1px;
  height: 0;
  background: #fff;
}

.box-title.draw h2::after {
  animation: draw-vertical 1.2s ease-out forwards;
}

.box-title span::before {
  content: "";
  position: absolute;
  top: -4px;
  right: -9px;
  width: 0;
  height: 1px;
  background: #fff;
}

.box-title.draw span::before {
  animation: draw-horizontal 1.2s ease-out forwards;
}

.box-title span::after {
  content: "";
  position: absolute;
  top: -15px;
  right: 0;
  width: 1px;
  height: 0;
  background: #fff;
}

.box-title.draw span::after {
  animation: draw-vertical 1.2s ease-out forwards;
}

@keyframes draw-horizontal {
  from {
    width: 0;
  }

  to {
    width: 113px;
  }
}

@keyframes draw-vertical {
  from {
    height: 0;
  }

  to {
    height: 35px;
  }
}

.procedure-wrap__construction ul {
  gap: 20px;
  margin-bottom: 40px;
}

.procedure-wrap__construction ul li button {
  border-radius: 12px !important;
  font-size: 14px;
  color: #666666d9;
  background-color: #e3e3e3;
  height: 39px;
  line-height: 100%;
  min-width: 150px;
  transition: ease-in-out 0.3s;
}

.procedure-wrap__construction ul li button.active,
.procedure-wrap__construction ul li button:hover {
  background-color: var(--btn-color) !important;
  color: var(--text-color-white) !important;
}

.procedure-tab-content {
  gap: 21px;
}

.procedure-tab-content .procedure-box {
  flex: 0 0 calc((100% - (21px * 5)) / 6);
  gap: 30px;
  aspect-ratio: 255/308;
  border-radius: 10px;
  padding-inline: 20px;
  transition: ease-in-out 0.3s;
  overflow: hidden;
  justify-content: center;
}

.procedure-box__desc {
  justify-content: center;
  opacity: 0;
  transition: ease-in-out 0.5s;
  padding-inline: 20px;
}

.procedure-tab-content .procedure-box:hover .procedure-box__desc {
  opacity: 1;
}

.procedure-box__icon {
  width: clamp(40px, calc(4.135vw + -6.16px), 95px);
  color: var(--btn-color);
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

.procedure-box__icon svg {
  aspect-ratio: 1/1;
  width: clamp(40px, calc(4.135vw + -6.16px), 95px);
}

.procedure-tab-content .procedure-box p,
.procedure-box__desc p {
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  margin-inline: auto;
}

.procedure-tab-content .procedure-box .procedure-box__icon+p {
  position: absolute;
  top: calc(40% + clamp(40px, 4.135vw - 6.16px, 95px) + 7px);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 0 5px;
}

.procedure-box__desc p {
  margin-top: 25px;
}

.procedure-box__desc p {
  -webkit-line-clamp: 4 !important;
}

.procedure-box__count {

  line-height: 100%;
  font-size: clamp(24px, 3.5vw, 60px);
  border-radius: 5px;
  background-color: #e5e5e5;
  aspect-ratio: 55/110;
  width: clamp(35px, 3vw, 55px);
  overflow: hidden;
}

.prodcedure-view {
  margin-top: 95px;
}

.prodcedure-view a {
  background-color: var(--btn-color);
  border-radius: 12px;

  font-weight: 400;
  line-height: 100%;
  min-width: clamp(120px, 17vw, 274px);
  min-height: clamp(27px, 17vw, 62px);
  transition: ease-in-out 0.3s;
  text-align: center;
}

.prodcedure-view a:hover {
  border: 1px solid var(--btn-color);
  background-color: var(--background-color);
}

/* services-wrap */
.services-wrap,
.statistical-block {
  padding-top: clamp(40px, -106px + 13.628vw, 83px);
  padding-bottom: clamp(40px, -106px + 13.628vw, 83px);
}

.statistical-block:after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-image) center / cover no-repeat;
  z-index: 0;
  background-attachment: fixed;
  transform: translateZ(0);
  will-change: transform;
}


.services-wrap__title {
  margin-bottom: clamp(30px, 6.3vw - 75px, 103px);
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes spin {
  to { --angle: 360deg; }
}
.services-wrap .box-service{
  will-change: transform;
  transform: translateZ(0);
  transition: transform 5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 5s ease;
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 10px;
}
.box-service.service-zoom{
  /* animation: zoomOnce 5s ease forwards; */
  transform: scale3d(1.03, 1.03, 1.03);
  box-shadow: 5px 5px 20px 0px #8d818142;
}
@keyframes zoomOnce {
  0% {
    transform: scale3d(1, 1, 1);
    box-shadow: 1px 2px 11px #5c5c5c3d;
  }
  30% {
    transform: scale3d(1.05, 1.05, 1.05);
    box-shadow: 5px 5px 20px 0px #8d818142;
  }
  100% {
    transform: scale3d(1, 1, 1);
    box-shadow: 1px 2px 11px #5c5c5c3d;
  }
}

.box-service::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: 2; /* nằm trên ảnh để thấy border */
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: spin 5s linear infinite;
  animation-play-state: paused;
  background: conic-gradient(
  from var(--angle),
  transparent 0%,
  transparent 25%,
  #fff 33%,   
  #fff 37%,  
  #fff 42%,   
  #fff 46%,  
  #fff 50%,   
  #fff 55%,   
  #fff 59%,  
  transparent 67%,
  transparent 100%
);
  /* chỉ hiện viền, che phần giữa */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 4px;
  inset: 0;
  pointer-events: none
}

.box-service::after {
  display: none; /* không cần nữa vì dùng mask trick */
}

.box-service:hover::before {
  opacity: 1;
  animation-play-state: running;
}

.box-service__img a img {
  aspect-ratio: 394/725;
}

.box-service__caption {
  max-width: clamp(200px, calc(280px + (68 * ((100vw - 1440px) / 210))), 348px);
  aspect-ratio: 348/154;
  background-color: rgb(0 0 0 / 25%);
  bottom: 34px;
  overflow: hidden;
  /* transform-origin: left center;
    transform: scaleX(0); */
}

/* .box-service__caption.draw {
    animation: captionExpand 1.6s ease forwards;
} */

.box-service__caption a {

  line-height: 150%;
  font-size: clamp(16px,
      calc(22px + (30 - 22) * ((100vw - 1440px) / (1650 - 1440))),
      30px);
  display: inline-block;
  /* transform-origin: left center;
    transform: scale(0.7);
    opacity: 0;
    animation: textScale 1.6s ease forwards; */
}

/* .box-service__caption.draw a {
    animation: textScale 1.6s ease forwards;
} */

/* .box-service .box-service__img a:after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgb(195 188 179);
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.box-service:hover .box-service__img a::after {
    opacity: 0.5;
} */

@keyframes captionExpand {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes textScale {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* characteristic-wrap */
.characteristic-wrap {
  padding-top: 45px;
  padding-bottom: 55px;
}

.characteristic-wrap__left {
  height: 100%;
  background-position: right -53px;
  background-repeat: no-repeat;
  background-size: cover;
}

.characteristic-wrap__left:after,
.characteristic-wrap__right:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.7;
  z-index: 0;
}

.characteristic-wrap__right {
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
}

.characteristic-group__box {
  gap: 10px;
  margin-bottom: 30px;
}

.characteristic-group__box img {
  width: 65px;
  height: auto;
  aspect-ratio: 65/59;
}

.characteristic-group__box h5,
.characteristic-group__box p {
  font-size: clamp(12px, 2.38vw - 21.27px, 16px);
  line-height: 150%;
  font-weight: 400;
  margin-bottom: 0 !important;
}

.characteristic-group__box p {
  max-width: 393px;
}

.characteristic-wrap h6 {
  font-size: clamp(20px,
      calc(22px + (30 - 22) * ((100vw - 1440px) / (1650 - 1440))),
      30px);
  line-height: var(--line-height-base);
  margin-bottom: 20px;
}

.characteristic-wrap h2 {
  font-size: clamp(21px, 2.424vw, 40px);
  /* line-height: clamp(20px, 2vw + 35px, 48px); */
  margin-bottom: 0;
}

.characteristic-wrap .view-more {
  margin-top: clamp(120px,
      calc(120px + (74 * ((100vw - 1440px) / 210))),
      151px);
}

.characteristic-wrap a,
.box-404__form a,
.box-search__form a {
  background-color: var(--btn-color);
  border-radius: 12px;

  font-weight: 400;
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
  line-height: 150%;
  transition: ease-in-out 0.3s;
  min-width: clamp(120px, 17vw, 209px);
  min-height: clamp(32px, calc(0.58 * (100vw - 1600px) + 180px), 56px);
  text-align: center;
}

.characteristic-wrap a:hover,
.box-404__form a:hover {
  background-color: transparent;
  border: 1px solid var(--btn-color);
}

/* contact-wrap */
.contact-wrap {
  padding-top: 50px;
  padding-bottom: 52px;
  background: var(--bg-gradient);
}

.contact-wrap__info {
  padding-left: 50px;
}

.contact-wrap__info h2 {
  line-height: clamp(40px, 2vw, 45px);
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
}

.contact-wrap__info p {
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
}

.frm-rgister {
  gap: 15px;
}

.frm-rgister .form-group {
  max-width: 551px;
  border-radius: 20px;
  min-width: 0;
  height: clamp(calc(150px / 3.09375),
      calc((150px + 0.228571 * (100vw - 1440px)) / 3.09375),
      64px);
  cursor: pointer;
}

.frm-rgister .form-group .line-input {
  position: relative;
  border-radius: 12px;
  padding: 2px;
  overflow: hidden;
  height: clamp(calc(150px / 3.09375),
      calc((150px + 0.228571 * (100vw - 1440px)) / 3.09375),
      64px);
}

/* VỆT SÁNG */
.frm-rgister .form-group .line-input::before {
  content: "";
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  opacity: 0;
}

/* GLOW NHẸ */
.frm-rgister .form-group .line-input::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(14px);
  opacity: 0;
}

/* KHI KÍCH HOẠT */
.frm-rgister .form-group .line-input.draw::before {
  opacity: 1;
  background: conic-gradient(from 0deg,
      transparent 0deg,
      transparent 250deg,

      #fff2d8 265deg,
      #ffb347 290deg,
      #ff8c00 310deg,

      transparent 330deg,
      transparent 360deg);
  animation: draw-border 2.6s linear forwards;
}

.frm-rgister .form-group .line-input.draw::after {
  opacity: 0.6;
  animation: draw-border 2.6s linear forwards;
}

/* ANIMATION */
@keyframes draw-border {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

.frm-rgister input {
  color: #afafaf;

  font-weight: 400;
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
  line-height: 150%;
  background-color: #dddde5;
  width: 100%;
  height: 100%;
  /* aspect-ratio: 551/64; */
  height: clamp(calc(150px / 3.09375),
      calc((150px + 0.228571 * (100vw - 1440px)) / 3.09375),
      64px);
  border-radius: 12px;
  padding-left: 49px;
  position: relative;
  box-sizing: border-box;
}

.frm-rgister input::placeholder {
  font-size: clamp(12px, calc((100vw - 1600px) * 0.02 + 14px), 18px);
}

.frm-rgister input::-webkit-input-placeholder {
  /* Chrome, Safari, Opera */
  font-size: clamp(12px, calc((100vw - 1600px) * 0.02 + 14px), 18px);
}

.frm-rgister input:-ms-input-placeholder {
  /* IE 10-11 */
  font-size: clamp(12px, calc((100vw - 1600px) * 0.02 + 14px), 18px);
}

.frm-rgister input::-ms-input-placeholder {
  /* Edge Legacy */
  font-size: clamp(12px, calc((100vw - 1600px) * 0.02 + 14px), 18px);
}

.frm-rgister input::placeholder {
  font-size: clamp(12px, calc((100vw - 1600px) * 0.02 + 14px), 18px);
}

.form-group .icon {
  color: #141414;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.frm-rgister>button {
  flex: 0 0 auto;
  border-radius: 12px;
  width: clamp(150px, calc(150px + 0.228571 * (100vw - 1440px)), 198px);
  /* aspect-ratio: 198/64; */
  height: clamp(calc(150px / 3.09375),
      calc((150px + 0.228571 * (100vw - 1440px)) / 3.09375),
      64px);

  color: #3a3a3c;
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);

  line-height: 150%;
  font-weight: 400;
  background-color: #f5f7fa;
}

.frm-rgister button svg {
  color: #141414;
  margin-right: 6px;
}

/* discover-project */
.discover-project {
  padding-block: 135px;
}

.discover-project__category ul.nav {
  gap: 20px;
  margin-bottom: 120px;
  align-items: stretch;
}

.discover-project__category ul.nav li {
  flex: 0 0 calc((100% - 60px) / 4);
  max-width: 581px;
  box-sizing: border-box;
  display: flex;
}

.discover-project__category ul.nav li {
  min-height: 50px;
}

.discover-project__category ul li button,
.discover-project__category ul li button span {
  border-radius: 12px !important;

  font-size: 18px;
  color: #666666d9;
  background-color: #e3e3e3;
  line-height: 100%;
  transition: ease-in-out 0.3s;
  max-width: 581px;
  width: 100%;
  min-height: 45px;
  display: block;
  transform-origin: top left;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.discover-project__category ul li button span {
  display: block;
}

.discover-project__category ul li button.active span,
.discover-project__category ul li button:hover span {
  background-color: var(--btn-color) !important;
  color: #fff !important;
}

.discover-project__category ul li button:hover span {
  border: 1px solid var(--btn-color);
  margin: 0 3px;
}
.discover-project__category ul li button.active:hover span{
  margin: 0;
}

.discover-project__category ul li button.active:after {
  content: "";
  position: absolute;
  inset: 0 -2px 0 -2px;
  border-radius: inherit;
  background: linear-gradient(84deg,
      #ffd18c,
      #ffdb75,
      #ff9900,
      #ffd275,
      #724a0e,
      #ffab13,
      #ffd079,
      #ffdb56);
  background-size: 300% 300%;
  z-index: 0;
  animation: moveGradient 4s linear infinite;
}
.discover-project__category ul.nav:has(li:nth-child(3):last-child) button.active:after{
  inset: 0px -3px 0px -3px;
}
.discover-project__category ul.nav:has(li:nth-child(3):last-child) li button span{
  min-height: 40px;
}

.discover-project__category ul li button.active>span {
  position: relative;
  /* để text lên trên gradient */
  z-index: 1;
}

@keyframes card-spin {
  0% {
    --angle: 0turn;
  }

  100% {
    --angle: 1turn;
  }
}

@keyframes moveGradient {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.tab-content-project {
  row-gap: 80px;
}

.img-item-gallery {
  border-radius: 10px;
  overflow: visible;
  box-shadow: 1px 2px 11px #5c5c5c3d;
  will-change: transform;
  transform: translateZ(0);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s ease;
  position: relative;
}

/* .img-item-gallery::after {
  content:"";
  position:absolute;
  inset: 14px -18px -26px -18px;
  z-index:-1;
  border-radius: inherit;

  background: linear-gradient(
    to bottom,
    rgba(212,200,200,0) 0%,
    rgba(212,200,200,.12) 55%,
    rgba(212,200,200,.28) 100%
  );

  filter: blur(32px);
  opacity: .9;

  transition:
    inset .35s ease,
    filter .35s ease,
    opacity .35s ease;
} */

.img-item-gallery:hover {
  box-shadow: 5px 5px 20px 0px #8d818142;
  transform: scale3d(1.01, 1.01, 1.01) !important;
}

/* .img-item-gallery:hover::after {
  inset: 18px -22px -34px -22px;
  filter: blur(40px);
  opacity: 1;
} */

.img-item-gallery img {
  aspect-ratio: 395/593;
}

.tab-project-info {
  gap: clamp(15px, calc(4.55vw - 25.1px), 50px);
}

.tab-project-info h4 {
  margin-bottom: 0;
}

.tab-project-info h4 a {
  font-family: var(--font-family-second);
  font-size: clamp(18px, 1.21vw, 40px);
}

.tab-project-info__desc * {
  margin-bottom: 0;
}

.tab-project-info__view {
  padding-left: 37px;
}

.tab-project-info__view a {
  column-gap: 16px;
  font-family: var(--font-family-second);
  font-weight: 600px;
}

.tab-project-info__view a:hover span {
  color: var(--btn-color);
}

.tab-project-info__view a svg {
  color: var(--btn-color);
}

.tab-project-info__view a span+span {
  height: 1px;
  background-color: var(--btn-color);
}

/* construction-activities */
.construction-activities {
  padding-top: 42px;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.construction-activities__title h2,
.testimonials-wrap__title h2,
.blog-wrap__title h2,
.footer-partner__title h2 {

  line-height: clamp(35px, 2vw + 35px, 40px);
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  margin-bottom: 25px !important;
}

.construction-activities__title p,
.testimonials-wrap__title p,
.blog-wrap__title p {
  max-width: 1008px;
  margin-bottom: 0;
  margin-inline: auto;
}

.construction-activities:after {
  content: "";
  background-color: rgb(0 0 0 / 60%);
  position: absolute;
  inset: 0;
}

.construction-activities__album {
  margin-top: 57px;
  padding: 0 16px;
}

.grid-wrapper>div {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
}

.grid-wrapper>a>img,
.grid-wrapper>a>video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.grid-wrapper {
  display: grid;
  gap: 8px;
  /* hoặc grid-gap */
  grid-template-columns: repeat(6, 1fr);
  /* ← CHIA 6 CỘT CỐ ĐỊNH */
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
}

.grid-wrapper .wide {
  grid-column: span 2;
}

.grid-wrapper .tall {
  grid-row: span 2;
}

.grid-wrapper .big {
  grid-column: span 2;
  grid-row: span 2;
}

/* testimonials-wrap */
.testimonials-wrap {
  padding-block: 40px;
}

.testimonials-wrap__title.box-title h2::before,
.testimonials-wrap__title.box-title h2::after,
.testimonials-wrap__title.box-title h2 span::before,
.testimonials-wrap__title.box-title h2 span::after{
  background: var(--background-color);
}

.testimonials-wrap__title p {
  max-width: 581px;
}

.testimonial-info {
  gap: 17px;
}

.testimonial-info p {

  font-weight: 700;
  line-height: 100%;
}

.testimonial-info h5 {
  color: var(--btn-color);
}

.testimonials-info__desc {

  font-weight: normal;
  max-width: 797px;
}

.testimonial-info h6 {

  color: var(--btn-color);
}

.testimonials-info__review {

  gap: 15px;
}

.testimonials-info__review i {
  color: #fec311;
}

.testimonials-image img {
  aspect-ratio: 480/598;
  max-width: clamp(200px, 28vw, 480px);
}

.slider-testimonials .owl-nav {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
}

.slider-testimonials .owl-nav [class*="owl-"] {
  background-color: #d9d9d9 !important;
  aspect-ratio: 1/1;
  width: 40px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: ease-in-out 0.3s;
}

.slider-testimonials .owl-nav [class*="owl-"]:hover {
  background-color: var(--btn-color) !important;
}

/* blog-wrap */
.blog-wrap {
  padding-top: 46px;
  padding-bottom: 79px;
}

.blog-wrap__title p {
  max-width: 581px;
  margin-bottom: 40px;
}

.meta-post {
  margin-bottom: 15px;
  font-size: 16px;
}

.meta-post>div {
  column-gap: 5px;
}

.meta-post svg {
  color: #656565;
}

.meta-post span {

  font-weight: 300;
  color: #fff;
}

.box-blog h4 {
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  white-space: normal;
}

.box-blog h4 a {

  font-size: 18px;
  line-height: 100%;
}

.box-blog.card-body {
  padding-top: 24px;
}

.box-blog .card-text {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: 16px;
  line-height: 23px;
}

.box-blog .img {
  border-radius: 12px;
}

.box-blog .img img {
  aspect-ratio: 1108/700;
}

.feature-post .box-blog .img img {
  aspect-ratio: 1088/787;
}

/* footer */
footer {
  background-color: #3a3a3c;
  padding: 60px 0;
}

.footer-partner {
  padding-bottom: 20px;
  border-bottom: 1px solid #656565;
}

.footer-partner__title h2 {
  margin-bottom: 14px;
  color: var(--text-color-white);
}

.slider-partner .item a {
  aspect-ratio: 228/137;
  height: 137px;
}

.footer-bottom {
  padding-top: 40px;
}

.footer-bottom__logo img {
  max-width: clamp(120px,
      calc(172px + (270 - 172) * ((100vw - 1440px) / (1650 - 1440))),
      270px);
  aspect-ratio: 305/172;
}

.menu-footer ul {
  display: flex;
  gap: 40px;
  list-style: none;
}

.menu-footer ul li a {

  font-weight: 600;
  line-height: 150%;
  color: #656565;
}

.footer-info {
  margin-top: 18px;
}

.footer-info h5,
.footer-info .footer-info__company {

  font-weight: 600;
  line-height: 200%;
}

.footer-info .footer-info__company {
  gap: 12px;
}

.footer-map iframe {
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px;
}

footer .copyright {
  margin-top: 50px;
}

footer .copyright p {
  margin-bottom: 34px;
}

.copyright img {
  aspect-ratio: 211/30;
  max-width: 211px;
}

.footer-info__social ul {
  column-gap: 15px;
}

.footer-info__social li img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

/* page-contact */
.form-block {
  padding-top: 76px;
  padding-bottom: 22px;
}

.title-page h1 {
  font-size: 20px;

  line-height: clamp(40px, 3.64vw, 60px);
  min-width: clamp(120px, 17vw, 300px);
  /* aspect-ratio: 300/69; */
  border: 1px solid #fff;
  border-radius: 20px;
  padding-inline: 10px;
  margin-bottom: 53px;
}

.title-form {
  max-width: 930px;
}

.title-form h2 {

  line-height: clamp(40px, 3.64vw, 60px);
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  margin-bottom: 24px;
}

.title-form h2 span:first-child {
  color: var(--btn-color);
}

.form-wrap .form-contact {
  max-width: 540px;
  gap: 22px;
}

.form-wrap .form-contact label,
.box-form-cta label {
  margin-bottom: 7px;
  font-family: var(--font-family-third);
  font-size: 14px;
  line-height: 150%;
}

.form-wrap .form-contact label span {
  margin-left: 4px;
  color: #ff1818;
}

.form-wrap .form-contact input,
.form-wrap .form-contact input:focus,
.form-wrap .select2-container--default .select2-selection--single,
.form-wrap .form-contact textarea,
.recruitment-box__form form input,
.recruitment-box__form form textarea,
.recruitment-box__form form input:focus {
  background-color: transparent;
  height: clamp(32px, 3.5vw, 70px);
  border-radius: 20px;
  --input-color: #949499;
  color: var(--input-color);
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
  padding: 0 15px;

  line-height: 150%;
  border-color: #fff;
}

.form-wrap .form-contact input::placeholder,
.form-wrap .form-contact textarea::placeholder,
.recruitment-box__form form input::placeholder,
.recruitment-box__form form textarea::placeholder,
.archive-form .form-contact input::placeholder {
  color: var(--input-color);
}

.form-wrap .form-contact input::-webkit-input-placeholder,
.form-wrap .form-contact textarea::-webkit-input-placeholder,
.recruitment-box__form form input::-webkit-input-placeholder,
.recruitment-box__form form textarea::-webkit-input-placeholder,
.archive-form .form-contact input::-webkit-input-placeholder {
  /* Chrome, Safari, Opera */
  color: var(--input-color);
}

.form-wrap .form-contact input:-ms-input-placeholder,
.form-wrap .form-contact textarea:-ms-input-placeholder,
.recruitment-box__form form input::-ms-input-placeholder,
.recruitment-box__form form textarea::-ms-input-placeholder,
.archive-form .form-contact input::-ms-input-placeholder {
  /* IE 10-11 */
  color: var(--input-color);
}

.form-contact .select2-container--default .select2-selection--single .select2-selection__rende#ff0000,
.form-cta .select2-container--default .select2-selection--single .select2-selection__rende#ff0000 {
  color: #949499;
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
  line-height: 150%;
  padding: 15px;
  display: block;
  align-items: center;
  height: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-clip: padding-box;
}

.form-contact .select2-dropdown,
.form-cta .select2-dropdown {
  border: 1.5px solid #fff;
  background-color: #000 !important;
  overflow: hidden;
}

.form-contact .select2-container--open .select2-dropdown--below,
.form-cta .select2-container--open .select2-dropdown--below {
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.form-contact .select2-container--open .select2-dropdown--above,
.form-cta .select2-container--open .select2-dropdown--above {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.form-contact .select2-container--default .select2-results>.select2-results__options,
.form-cta .select2-container--default .select2-results>.select2-results__options {
  max-height: 400px !important;
}

.form-contact .select2-results__option,
.form-cta .select2-results__option {
  padding: 15px;
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
  color: #949499;
  transition: 0.2s ease;
}

.form-contact .select2-results__option--highlighted,
.form-cta .select2-results__option--highlighted {
  background: var(--btn-color) !important;
  color: #fff !important;
}

.form-contact .select2-container--default .select2-results__option--selected,
.form-cta .select2-container--default .select2-results__option--selected {
  background: var(--btn-color) !important;
  color: #fff !important;
}

.form-contact .select2-container--default .select2-selection--single .select2-selection__arrow,
.form-cta .select2-container--default .select2-selection--single .select2-selection__arrow {
  display: none;
}

.form-contact .select2-container--default .select2-selection--single,
.form-cta .select2-container--default .select2-selection--single {
  background-image: url("data:image/svg+xml;utf8,<svg width='13' height='8' viewBox='0 0 13 8' xmlns='http://www.w3.org/2000/svg'><path d='M0.183058 0.183058C0.404947 -0.0388305 0.752167 -0.0590022 0.996843 0.122543L1.06694 0.183058L6.45833 5.57417L11.8497 0.183058C12.0716 -0.0388305 12.4188 -0.0590022 12.6635 0.122543L12.7336 0.183058C12.9555 0.404947 12.9757 0.752167 12.7941 0.996843L12.7336 1.06694L6.90028 6.90028C6.67839 7.12216 6.33117 6.67839 6.33117 6.33117 6.08649 6.96079 6.01639 6.90028L0.183058 1.06694C-0.0610194 0.822864 -0.0610194 0.427136 0.183058 0.183058Z' fill='%23D9D9D9'/></svg>");

  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 13px 8px;
  padding-right: 40px;
  position: relative;
}

.form-contact .select2-container--default .select2-selection--single .select2-selection__rende#ff0000,
.form-cta .select2-container--default .select2-selection--single .select2-selection__rende#ff0000 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  height: auto;
}

.form-contact,
.form-cta {
  visibility: hidden;
}

.form-contact.loaded,
.form-cta.loaded {
  visibility: visible;
}

.flatpickr-time *::selection3609 {
  background: transparent !important;
  color: #000 !important;
}

.flatpickr-day.selected {
  background-color: var(--btn-color) !important;
  border-color: var(--btn-color) !important;
}

.form-wrap .form-contact textarea,
.form-wrap .form-contact textarea:focus {
  height: auto;
  padding: 15px;
}

.form-wrap .form-contact textarea::placeholder {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #949499;
}

.form-wrap .form-contact textarea:focus::placeholder {
  opacity: 0;
}

.form-contact button {
  background-color: var(--btn-color);
  color: var(--text-color-white);
  border-radius: 12px;
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);

  min-width: clamp(120px, 17vw, 185px);
  min-height: clamp(29px, 17vw, 46px);
  transition: ease-in-out 0.3s;
}

.form-contact button:hover {
  background-color: #000;
  border: 1px solid var(--btn-color);
}

.contact-info-block {
  padding-top: 30px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.contact-info-block:after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 77%);
}

.info-block__title {
  margin-bottom: 50px;
}

.contact-info-company h4 {

  line-height: 200%;
  font-size: clamp(20px, 1.8vw, 30px);
  margin-bottom: 34px;
}

.contact-info-company__box {
  row-gap: 31px;
}

.contact-info-company__box>div p {
  color: #656565;
  line-height: 200%;
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
}

.contact-info-company__map {
  border-radius: 20px;
  overflow: hidden;
  max-width: 776px;
  aspect-ratio: 776/486;
  margin-left: auto;
}

.contact-info-company__map iframe {
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px;
}

.contact-faq {
  padding-top: 61px;
  padding-bottom: 50px;
}

.faq-list {
  margin-top: 57px;
}

.faq-list>div {
  max-width: 1425px;
  gap: 25px;
}

.faq-list button {

  font-size: clamp(16px, calc(16px + (100vw - 1470px) * (2 / 180)), 18px);

  line-height: 150%;
  padding-block: 8px;
}

.faq-list button span {
  padding-right: 13px;
}

.faq-list button:after {
  background-image: none !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f067";
  font-size: 1rem;
  color: var(--btn-color);
  transition: none;
  position: absolute;
  right: 0;
  top: 35%;
  transform: translateY(-50%) !important;
}

.faq-list button:not(.collapsed)::after {
  content: "\f068";
}

.faq-list h4 button:not(.collapsed) {
  margin-bottom: 10px;
}

.faq-list .accordion-body {

  font-size: clamp(14px, calc(14px + (100vw - 1470px) * (2 / 180)), 16px);
}

.faq-list .accordion-body * {
  margin-bottom: 0;
}

.faq-list .accordion-item:not(:has(.accordion-collapse.show)) {
  border-bottom: 1px solid #fff !important;
}

/* recruitment-page */
.recruitment-intro {
  padding-top: 72px;
  padding-bottom: 85px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.recruitment-intro:after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 0;
}

.recruitment-intro__content h2 {

  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  line-height: clamp(40px, 3.64vw, 60px);
  margin-bottom: 16px;
}

.recruitment-intro__content h2 span:first-child {
  color: var(--btn-color);
}

.recruitment-intro__content .desc-recruitment {

  margin-bottom: clamp(40px, calc(40px + 57 * ((100vw - 375px) / 1275)), 97px);
}

.recruitment-intro__content .img-recruitment {
  max-width: 937px;
  margin-left: auto;
}

.recruitment-intro__content img {
  border-radius: 20px;
  aspect-ratio: 937/571;
}

.frm-search form {
  max-width: 523px;
  background-color: var(--btn-color);
  padding: 32px 33px 32px 18px;
  border-radius: 10px;
}

.frm-search form .form-group {
  height: 27px;
}

.frm-search form input {

  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
  --input-color: #fff;
  color: var(--input-color);
}

.frm-search form button svg {
  width: 22px;
}

.frm-searchr input::placeholder {
  color: var(--input-color);
}

.frm-searchr input::-webkit-input-placeholder {
  /* Chrome, Safari, Opera */
  color: var(--input-color);
}

.frm-search input:-ms-input-placeholder {
  /* IE 10-11 */
  color: var(--input-color);
}

.frm-search input::-ms-input-placeholder {
  /* Edge Legacy */
  color: var(--input-color);
}

.frm-search input::placeholder {
  color: var(--input-color);
}

.benefit-block {
  padding-top: 49px;
  padding-bottom: 45px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.main-benefit .list-benefit {
  gap: 32px;
}

.main-benefit .list-benefit>div {
  gap: 35px;
}

.list-benefit__icon img {
  width: 50px !important;
  aspect-ratio: 1/1;
}

.list-benefit__icon svg {
  width: 50px;
  height: 50px;
  color: #656565;
}

.list-benefit__caption h4 {

  font-size: clamp(18px, 2.424vw, 25px);
  line-height: clamp(40px, 3.64vw, 60px);
  margin-bottom: 22px;
}

.list-benefit__caption .desc-benefit {}

.list-benefit__caption .desc-benefit * {
  margin-bottom: 0;
}

.benefit-block__title h2 {
  font-size: clamp(22px, 2.424vw, 40px);
  line-height: clamp(40px, 3.64vw, 60px);
}

.benefit-block__title h2 span:first-child {
  color: var(--btn-color);
}

.main-benefit .owl-nav.disabled+.owl-dots {
  position: absolute;
  left: 0;
  bottom: -36px;
}

.main-benefit .owl-nav.disabled+.owl-dots button {
  width: 10px;
  height: 10px;
  margin-right: 5px;
}

.main-benefit .owl-nav.disabled+.owl-dots button.active span {
  background-color: var(--btn-color);
}

.recruitment-blog {
  padding-top: 30px;
  padding-bottom: 116px;
  background: #d9d9d91a;
}

.show-result-recruitment {
  margin-bottom: 55px;
  max-width: 985px;
  margin-left: auto;
}

.show-result-recruitment p span {
  color: var(--btn-color);
}

.recruitment-category {
  background-color: var(--btn-color);
  border-radius: 20px;
  max-width: 535px;
  margin-bottom: 91px;
}

.recruitment-category h3,
.recruitment-box__title h3 {
  padding: 30px;

  border-bottom: 1px solid #fff;
  color: var(--text-color-dark);
  line-height: clamp(28px, calc(11.905vw - 136.43px), 60px);
  font-size: clamp(20px, calc(2.857vw - 17.14px), 25px);
}

.recruitment-category h3 span:first-child {
  color: var(--text-color-white);
}

.recruitment-category__accordion {
  padding: 29px 0 26px 0;
}

.recruitment-category__accordion .accordion-button,
.recruitment-category__accordion .accordion-button:not(.collapsed) {
  box-shadow: none !important;
}

.recruitment-category__accordion .accordion-button::after {
  border: 0 !important;
  box-shadow: none !important;
}

.recruitment-category__accordion>.accordion>.accordion-item>h5 {
  border-bottom: 0.5px solid #f4c57133 !important;
  padding: 0 30px !important;
}

.recruitment-category__accordion .accordion-item:last-child>h5 {
  border: none !important;
}

.recruitment-category__accordion h5>div a {
  font-size: 20px;
  line-height: clamp(35px, calc(7.143vw - 57.86px), 60px);
}

.recruitment-category__accordion .acc-icon {
  transition: 0.25s ease;
  cursor: pointer;
}

.recruitment-category__accordion .acc-icon[aria-expanded="true"] {
  transform: rotate(90deg);
}

.recruitment-category__accordion .accordion-button {
  cursor: default;
}

.recruitment-category__accordion .accordion-button::after {
  display: none !important;
}

.recruitment-category__accordion .accordion-body>.accordion>.accordion-item {
  padding-left: 56px !important;
}

.recruitment-category__accordion .accordion-body .accordion-body .accordion-item {
  padding-left: 30px !important;
}

.recruitment-box {
  background-color: var(--background-color);
  border-radius: 20px;
  max-width: 535px;
}

.recruitment-box.sticky-top {
  z-index: 998 !important;
  top: 50px
}

.recruitment-box__title {
  border-bottom: 1px solid #fff;
}

.recruitment-box__title h3 {
  color: var(--text-color-white);
}

.recruitment-box__title h3 span:last-child {
  color: var(--btn-color);
}

.recruitment-box__title .desc-form {
  padding: 0 30px;
  margin-bottom: 23px;

}

.recruitment-box__title .desc-form *,
.recruitment-box__form .note-form * {
  margin-bottom: 0;
}

.recruitment-box__form {
  padding: 30px 10px 57px 10px;
}

.recruitment-box__form form {
  margin-bottom: 45px;
  gap: 25px;
}

.recruitment-box__form form:not(.error) input {
  border: 1px solid #fff !important;
}

.recruitment-box__form .note-form {}

.recruitment-box__form .form-group {
  column-gap: 7px;
}

.recruitment-box__form .form-group:not(.d-flex),
.input-wrap {
  position: relative;
}

.recruitment-box__form .form-group:not(.d-flex)::before,
.input-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 1px solid #fff;
  pointer-events: none;
}

form .form-group.error:not(.d-flex, .textarea)::before,
form .input-wrap.error:not(.textarea)::before {
  border: 1px solid #ff0000 !important;
}

.recruitment-box__form form button {
  background-color: var(--btn-color);
  border-radius: 50px;
  color: var(--text-color-white);

  min-width: 130px;
  height: 60px;
  transition: ease-in-out 0.3s;
}

.recruitment-box__form form button:hover {
  background-color: transparent;
  border: 1px solid var(--btn-color);
}

.recruitment-box__form .group-upload {
  cursor: pointer;

  column-gap: 30px;
  height: 60px;
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.recruitment-box__form .error .group-upload {
  border: 1px solid #ff0000;
}

.recruitment-box__form .group-upload button {
  pointer-events: none;
  min-width: 125px;
  height: 40px;
}

.recruitment-box__form .group-upload span {
  font-size: 13px;
  font-style: italic;
}

body.single .recruitment-box__form .group-upload span {
  color: #fff;
}

.list-blog-recruitment {
  row-gap: 48px;
}

.blog-recruitment-item {
  background-color: #666666d9;
  border-radius: 20px;
  padding: 20px;
  width: 100%;
  max-width: 985px;
  margin-left: auto;
}

.blog-recruitment-item__caption {
  row-gap: 20px;

}

.blog-recruitment-item__caption .info-recruitment p {
  margin-bottom: 0;
}

.blog-recruitment-item__caption>span a {
  font-size: 16px;
  color: #e5e5e5;
}

.blog-recruitment-item__caption h4 a {
  font-size: clamp(20px, 1.8vw, 28px);
}

.blog-recruitment-item__action {
  column-gap: 16px;
}

.blog-recruitment-item__action>a {
  background-color: var(--btn-color);
  border-radius: 50px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-recruitment-item__action>span {
  background-color: #2f9300;
  border-radius: 50px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-recruitment-item__action>span.expried {
  background-color: var(--background-color);
}

.blog-recruitment-item__img img {
  /* max-width: 370px; */
  margin-left: auto;
  aspect-ratio: 551/355;
  border-radius: 20px;
  object-fit: cover;
  height: 100%;
}

.list-blog-recruitment>button {
  background-color: var(--btn-color);

  padding: 12px 16px;
  border-radius: 12px;
  max-width: 985px;
  transition: 0.3s ease-in-out;
  border: 1px solid var(--btn-color);
}

.list-blog-recruitment>button:hover {
  background-color: transparent;
}

.list-blog-recruitment>button:disabled {
  cursor: not-allowed;
}

.recruitment-galleries {
  padding-top: 109px;
  padding-bottom: 61px;
}

.recruitment-galleries__title {
  padding-bottom: 22px;
  margin-bottom: 29px;
  border-bottom: 1px solid #656565;
}

.recruitment-galleries__title h2 {
  margin-bottom: 12px;
}

.recruitment-galleries__wrap {
  display: grid;
  gap: clamp(10px, 1.5vw, 31px);
  box-sizing: border-box;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: center;
}

.recruitment-galleries__wrap a {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.carousel {
  max-width: 937px;
  width: 100%;
  aspect-ratio: 937/571;
  overflow: hidden;
  position: relative;
}

.carousel .list .item {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0 0 0 0;
  border-radius: 20px;
  overflow: hidden;
}

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

.carousel .list .item .content {
  position: absolute;
  top: 20%;
  width: 1140px;
  max-width: 80%;
  left: 50%;
  transform: translateX(-50%);
  padding-right: 30%;
  box-sizing: border-box;
  color: #fff;
  text-shadow: 0 5px 10px #0004;
}

.carousel .list .item .author {
  font-weight: bold;
  letter-spacing: 10px;
}

.carousel .list .item .title,
.carousel .list .item .topic {
  font-size: 5em;
  font-weight: bold;
  line-height: 1.3em;
}

.carousel .list .item .topic {
  color: #f1683a;
}

.carousel .list .item .buttons {
  display: grid;
  grid-template-columns: repeat(2, 130px);
  grid-template-rows: 40px;
  gap: 5px;
  margin-top: 20px;
}

.carousel .list .item .buttons button {
  border: none;
  background-color: #eee;
  letter-spacing: 3px;
  font-family: Poppins;
  font-weight: 500;
}

.carousel .list .item .buttons button:nth-child(2) {
  background-color: transparent;
  border: 1px solid #fff;
  color: #eee;
}

/* thumbail */
.thumbnail {
  position: absolute;
  bottom: clamp(10px, 3vw, 50px);
  left: 50%;
  width: max-content;
  z-index: 100;
  display: flex;
  gap: 20px;
}

.thumbnail .item {
  width: clamp(90px, 8vw, 150px);
  aspect-ratio: 937/571;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}

.thumbnail .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.thumbnail .item .content {
  color: #fff;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

.thumbnail .item .content .title {
  font-weight: 500;
}

.thumbnail .item .content .description {
  font-weight: 300;
}

/* arrows */
.arrows {
  position: absolute;
  top: 80%;
  right: 52%;
  z-index: 100;
  width: 300px;
  max-width: 30%;
  display: flex;
  gap: 10px;
  align-items: center;
}

.arrows button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eee4;
  border: none;
  color: #fff;
  font-family: monospace;
  font-weight: bold;
  transition: 0.5s;
  cursor: pointer;
}

.arrows button:hover {
  background-color: var(--btn-color);
  color: #fff;
}

/* animation */
.carousel .list .item:nth-child(1) {
  z-index: 1;
}

/* create animation when next click */
.carousel.next .list .item:nth-child(1) img {
  width: 150px;
  height: 220px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  border-radius: 30px;
  animation: showImage 0.5s linear 1 forwards;
}

@keyframes showImage {
  to {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

.carousel.next .thumbnail .item:nth-last-child(1) {
  overflow: hidden;
  animation: showThumbnail 0.5s linear 1 forwards;
}

.carousel.prev .list .item img {
  z-index: 100;
}

@keyframes showThumbnail {
  from {
    width: 0;
    opacity: 0;
  }
}

.carousel.next .thumbnail {
  animation: effectNext 0.5s linear 1 forwards;
}

@keyframes effectNext {
  from {
    transform: translateX(150px);
  }
}

/* running time */

.carousel .time {
  position: absolute;
  z-index: 1000;
  width: 0%;
  height: 3px;
  background-color: #f1683a;
  left: 0;
  top: 0;
}

.carousel.next .time,
.carousel.prev .time {
  animation: runningTime 3s linear 1 forwards;
}

@keyframes runningTime {
  from {
    width: 100%;
  }

  to {
    width: 0;
  }
}

/* prev click */

.carousel.prev .list .item:nth-child(2) {
  z-index: 2;
}

.carousel.prev .list .item:nth-child(2) img {
  animation: outFrame 0.5s linear 1 forwards;
  position: absolute;
  bottom: 0;
  left: 0;
}

@keyframes outFrame {
  to {
    width: 150px;
    height: calc(150px * 571 / 937);
    bottom: 50px;
    left: 50%;
    border-radius: 20px;
  }
}

.carousel.prev .thumbnail .item:nth-child(1) {
  overflow: hidden;
  opacity: 0;
  animation: showThumbnail 0.5s linear 1 forwards;
}

.carousel.next .arrows button,
.carousel.prev .arrows button {
  pointer-events: none;
}

.loader {
  width: 55px;
  height: 30px;
  --dot-size: 16px;
  --gap: 3px;
  --_g: radial-gradient(circle, #fff 50%, transparent 51%);

  background:
    var(--_g) 0 50%,
    var(--_g) calc(var(--dot-size) + var(--gap)) 50%,
    var(--_g) calc(2 * (var(--dot-size) + var(--gap))) 50%;

  background-size: var(--dot-size) var(--dot-size);
  background-repeat: no-repeat;
  animation: l3 1s infinite linear;
}

@keyframes l3 {
  20% {
    background-position:
      0 0,
      calc(var(--dot-size) + var(--gap)) 50%,
      calc(2 * (var(--dot-size) + var(--gap))) 50%;
  }

  40% {
    background-position:
      0 100%,
      calc(var(--dot-size) + var(--gap)) 0,
      calc(2 * (var(--dot-size) + var(--gap))) 50%;
  }

  60% {
    background-position:
      0 50%,
      calc(var(--dot-size) + var(--gap)) 100%,
      calc(2 * (var(--dot-size) + var(--gap))) 0;
  }

  80% {
    background-position:
      0 50%,
      calc(var(--dot-size) + var(--gap)) 50%,
      calc(2 * (var(--dot-size) + var(--gap))) 100%;
  }
}

/* list-blog-page */
.list-blog-page {
  padding-top: 122px;
  padding-bottom: 67px;
}

.list-blog-page__title .description-category {
  margin-bottom: 133px;
}

.list-blog-page__title .description-category * {

  margin-bottom: 0;
}

.list-blog-page__title .description-category h2,
.sub-category__title h2,
.feature-post__title h2 {
  font-weight: 600;
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  line-height: clamp(40px, 3.64vw, 60px);
  margin-bottom: 15px;
}

.list-blog-page .box-category {
  gap: 55px;
}

.sub-category__title {

  margin-bottom: 80px;
}

.sub-category .view-more {
  margin-top: 88px;
}

.sub-category .view-more a,
.box-content-detail .view-more a,
.project-related .view-more a {
  background-color: var(--btn-color);
  padding: 12px 16px;
  border-radius: 12px;

  min-width: clamp(120px, 12.7vw, 209px);
  min-height: clamp(32px, 3.4vw, 56px);
  border: 1px solid var(--btn-color);
  transition: 0.3s ease-in-out;
}

.sub-category .view-more a:hover {
  background-color: transparent;
}

body:not(.home) .meta-post {
  margin-bottom: 23px;
}

body:not(.home) .box-blog .card-body {
  gap: 24px;
}

body:not(.home) .box-blog h4 {
  margin-bottom: -16px;
}

.box-blog .card-view a {
  padding: 12px 16px;
  border: 1px solid #666666d9;
  border-radius: 12px;
  min-width: clamp(120px, 12.7vw, 209px);
  min-height: clamp(32px, 3.4vw, 56px);
  display: inline-block;

  transition: 0.3s ease-in-out;
}

.box-blog:hover .card-view a {
  background-color: var(--btn-color);
}

.feature-post {
  border-bottom: 1px solid #fff;
}

.feature-post,
.feature-post__title {
  margin-bottom: 55px;
}

.feature-post__title {}

.feature-post__title p a {

  font-size: clamp(16px, calc(-64.29px + 5.71vw), 20px);

  gap: 10px;
}

.feature-post .col-6 {
  margin-bottom: 20px;
}

.feature-post .box-blog .card-view a {
  background-color: var(--btn-color);
}

.box-faq-form {
  padding-top: 55px;

}

.archive-form h2 {
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  line-height: clamp(40px, 3.64vw, 60px);
  text-transform: capitalize;
}

.box-faq-form__list>div {
  gap: 25px;
}

.box-faq-form__list h4 button:not(.collapsed) {
  margin-bottom: 0;
}

.archive-form__desc {
  margin-bottom: 15px;
}

.archive-form__desc p * {
  margin-bottom: 0;
}

.archive-form .box-form {
  background-color: var(--btn-color);
  padding: 25px 16px;
  border-radius: 12px;
  margin-top: 30px;
  max-width: 630px;
  margin-inline: auto;
}

.archive-form .box-form .form-contact {
  gap: 20px;
}

.archive-form .form-contact label {
  font-size: 13px;
  color: #3a3a3c;
  margin-bottom: 5px;
}

.archive-form .form-contact input,
.archive-form .select2-container--default .select2-selection--single,
.form-cta input,
.form-cta .select2-container--default .select2-selection--single {
  border-radius: 12px;
  padding: 12px 16px;
  height: 48px;
  --input-color: #949499;
  color: var(--input-color);
}

.archive-form .form-contact button,
.box-form-cta button {
  background-color: var(--background-color);
  width: 100%;
  height: 48px;
}

.archive-form .select2-container--default .select2-selection--single {
  padding: 12px 5px;
}


/* page-breadcrumb */
.breadcrumb-share {
  padding-top: 65px;
  padding-bottom: 0;
}

.page-breadcrumb a,
.page-breadcrumb span,
.page-breadcrumb .breadcrumb-item.active {
  color: var(--text-color-dark);

}

.page-breadcrumb a:hover {
  color: var(--btn-color);
}

.page-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
  content: ">";
}

.breadcrumb-share .share-box ul {
  margin-bottom: 0;
}

/* single-project */
body.single,
body.page-template-default {
  background-color: var(--bg-page);
  color: var(--text-color-dark);
}

.page-project-info,
.page-project-galleries {
  margin-top: 26px;
  margin-bottom: 59px;
}

.page-project-galleries {
  margin-top: 0;
}

body.single .time-meta {
  gap: 11px;

  font-weight: 300;
}

.page-project-info h1 {

  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  line-height: clamp(40px, 3.64vw, 60px);
  margin-bottom: 36px;
}

.page-project-info .desc-project {

  height: 100%;
  padding: 16px;
  background: var(--btn-color) url(../images/bg-info-project.webp) no-repeat center center / cover;
  background-blend-mode: soft-light;
}

.page-project-info .desc-project>p {
  bottom: 16px;
  right: 16px;
  font-size: 14px;

  margin-bottom: 0;
}

.page-project-info .desc-project>div {
  gap: 30px;
}

.page-project-info .desc-project>div ul {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.page-project-info .desc-project>div * {
  margin-bottom: 0;
}

.page-project-info .main-img {
  aspect-ratio: 818/599;
}

.page-project-info .img-promotion a {
  aspect-ratio: 390/756;
}

.page-project-galleries__title h2 {
  font-family: var(--font-family-third);
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  line-height: clamp(40px, 3.64vw, 60px);
  margin-bottom: 13px;
}

.page-project-galleries__title .desc-gal {

  margin-bottom: 32px;
}

.list-galleries-pro .carousel,
.list-galleries-recruitment .carousel {
  max-width: 100%;
  aspect-ratio: 1635/913;
  overflow: hidden;
}

.list-galleries-pro .item,
.list-galleries-recruitment.item {
  border-radius: 20px;
  overflow: hidden;
}

.list-galleries-pro .arrows,
.list-galleries-recruitment .arrows {
  right: auto;
  left: 10%;
  top: auto;
  bottom: 60px;
}

.list-galleries-pro .thumbnail,
.list-galleries-recruitment .thumbnail {
  left: 75%;
}

.list-galleries-pro .carousel .list .item,
.list-galleries-pro .thumbnail .item img,
.list-galleries-recruitment .list .item,
.list-galleries-recruitment .item img {
  border-radius: 10px;
}

.project-detail .col-12 > h2 {
  font-family: var(--font-family-third);
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  margin-bottom: 42px;
}

.project-detail__desc {
  margin-bottom: 40px;
}

.box-content-detail {
  padding-bottom: 25px;
  overflow-anchor: none;
}

.box-content-detail .content {
  max-height: 341px;
  overflow: hidden;
  transition: max-height 0.35s ease;
  position: relative;
}

.box-content-detail .content:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110px;
  background-image: linear-gradient(transparent, var(--bg-page));
}

.box-content-detail.show .content:after {
  display: none;
}

.box-content-detail.show {
  background: transparent;
}

.box-content-detail.show .content {
  max-height: none;
}

.box-content-detail h2 {
  font-size: clamp(20px, 0.38vw + 10.8px, 24px);
}

.box-content-detail h3,
.box-content-detail h4 {
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
}

body.single .archive-form .box-form {
  padding: 16px 16px 30px !important;
}

body.single:not(.single-services) .archive-form h2,
body.page-template-default .archive-form h2 {
  font-size: clamp(18px, 1.39vw, 24px);
  margin-bottom: 30px;
  text-transform: capitalize;
}

body.single:not(.single-services) .archive-form form {
  gap: 20px !important;
}

body.single .archive-form .form-contact label {
  font-size: 14px;
}

.archive-form .form-contact .select2-results__option,
.archive-form .form-contact .select2-container--default .select2-selection--single .select2-selection__rende#ff0000,
.form-cta .select2-results__option,
.form-cta .select2-container--default .select2-selection--single .select2-selection__rende#ff0000 {
  padding: 10px !important;
  font-size: 15px;
}

.archive-form .form-contact .select2-container--default .select2-selection--single .select2-selection__rende#ff0000 {
  padding-left: 0 !important;
  font-size: 15px;
  padding-block: 0 !important;
}

.box-content-detail .view-more {
  margin-top: 15px;
}

.box-content-detail .view-more a:hover,
.project-related .view-more a:hover {
  background-color: var(--background-color);
}

.project-related {
  padding-top: 20px;
  padding-bottom: 93px;
}

body.single:not(.single-services) .box-title h2::before,
body.single:not(.single-services) .box-title h2::after,
body.single:not(.single-services) .box-title span::before,
body.single:not(.single-services) .box-title span::after {
  background-color: var(--background-color);
}
.footer-partner__title h2:after,
.footer-partner__title h2::before,
.footer-partner__title h2 span::after,
.footer-partner__title h2 span::before{
  background-color: #fff !important;
}

body.single .box-title h2 {
  margin-bottom: clamp(30px, 7.3vw - 64px, 53px);
}

.project-related .sub-title {
  margin-bottom: 10px;
}

.project-related__title .desc-info {
  margin-bottom: 41px;
}

.project-related .view-more {
  margin-top: 17px;
}

.project-item__info {
  background-color: var(--background-color);
  padding: 20px;
  transition: transform 0.4s ease;
  transform: translateY(calc(100% - 61px));
  /* clip-path: inset(0 0 0 0); */
  pointer-events: auto;
  cursor: pointer;
}

.project-item__info h4 {
  margin-bottom: 17px;
  gap: 10px;
}

.project-item__info h4 a {

  font-size: 20px;
  font-weight: 500;
}

.project-item__info h4 span {
  height: 1px;
  background-color: #fff;
}

.project-item__info .preview {
  margin-bottom: 24px;
  font-size: 14px;
  font-family: var(--font-family-base);
}

.project-item__info>a {
  border-radius: 12px;
  background-color: #e3e3e3;
  padding: 10px;
  font-size: 14px;

  font-weight: 700;
  color: #666666d9;
}

.project-related .project-item:hover .project-item__info,
.grid-item:hover .project-item__info {
  transform: translateY(0);
  background-color: var(--btn-color);
}

.project-related .project-item a,
.project-related .project-item a:hover {
  box-shadow: none;
  transform: none !important;
}

body:not(.home) .contact-wrap {
  background: linear-gradient(90.14deg, #bd8741 38.14%, #010101 123.12%);
}

.gallery-project .mainSwiper {
  height: clamp(420px, 56vw, 915px);
  overflow: hidden;
  border-radius: 10px;
}

.gallery-project .mainSwiper a {
  position: relative;
  display: block;
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  transform: translateZ(0) !important;
}
.gallery-project .mainSwiper a>* {
  position: relative;
  z-index: 1;
}

.gallery-project .mainSwiper a img {
  max-height: clamp(420px, 56vw, 915px);
  border-radius: 10px;
}

.thumbSwiper {
  height: 100%;
  max-height: clamp(420px, 56vw, 915px);
  overflow: hidden;
}

.thumbSwiper .swiper-slide span {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  border-radius: 10px;
  height: 100%;
}

.thumbSwiper .swiper-slide span:after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: 0.5;
}

.thumbSwiper .swiper-slide-thumb-active span:after {
  opacity: 1;
  background-color: transparent;
}

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

.swiper-button-next,
.swiper-button-prev {
  color: #fff;
}

body.single-project .procedure-wrap__construction ul li button {
  background-color: var(--btn-color);
  color: #fff;
}

body.single-project .procedure-wrap__construction ul li button.active,
body.single-project .procedure-wrap__construction ul li button:hover {
  background-color: var(--background-color) !important;
}

/* page-project */

.hero-project {
  padding-top: 92px;
  aspect-ratio: 1920/550;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-project::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: 0.4;
}
.hero_project__desc h2 {
  font-weight: 600;
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  line-height: clamp(40px, 3.64vw, 60px);
  margin-bottom: 10px;
}

.break-cat {
  height: 0.5px;
  width: 100%;
  background-color: #fff;
  margin-top: 49px;
}

.project-cat-inner {

  padding-top: 49px;
}

.project-cat-inner__desc {
  margin-bottom: 65px;
}

.project-cat-inner .box-characteristic {
  column-gap: 19px;
}

.project-cat-inner .box-characteristic__count {
  font-size: 70px;
  font-weight: 700;
  position: relative;
  color: var(--color-main);
  line-height: 1.2;
  height: auto;
}

.box-characteristic__count::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 150%;
  height: 30px;

  background: radial-gradient(ellipse at center,
      rgba(0, 0, 0, 1) 100%,
      rgba(0, 0, 0, 0.9) 84%,
      rgba(0, 0, 0, 0.6) 100%,
      rgba(0, 0, 0, 0.25) 65%,
      rgba(0, 0, 0, 0) 80%);

  transform: translateX(-50%);
  filter: blur(8px);
  z-index: 1;
}

.banner-project {
  padding-top: 40px;
}

.slider-project-cat.owl-theme .owl-nav,
.block-team__list.owl-theme .owl-nav {
  position: static;
}

.slider-project-cat .owl-nav [class*="owl-"] {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color) !important;
  margin: 0 !important;
  transform: rotate(45deg);
}

.slider-project-cat .owl-nav [class*="owl-"] span {
  color: var(--btn-color);
  transform: rotate(-45deg);
}

.slider-project-cat .owl-nav [class*="owl-"] span.prev{
  padding-left: 15px;
}

.slider-project-cat .owl-nav [class*="owl-"] span.next {
  padding-right: 15px;
}

.slider-project-cat.owl-theme .owl-nav .owl-prev{
  position: absolute;
  left: -30px;
  right: auto;
  bottom: 46%;
}

.slider-project-cat.owl-theme .owl-nav .owl-next{
  position: absolute;
  left: auto;
  right: -30px;
  bottom: 46%;
}

.slider-project-cat .project-item__info {
  background-color: transparent;
  transform: translateY(0);
  padding: 10px 10px 0 0;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

body.page .project-item__info .preview {
  margin-bottom: 0;
  font-weight: 300;
}

.slider-project-cat .project-item__info .preview ul li:nth-child(n + 3) {
  display: none;
}

body.page .project-item__info .preview ul {
  padding-left: 17px;
}

body.page .project-item__info h4 {
  margin-bottom: 13px;
}

.slider-project-cat .project-item__info h4 a {
  font-weight: 500;
  font-size: 20px;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.87);
}

body.page .project-item:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 70%,
      rgba(0, 0, 0, 0.6) 90%,
      rgba(0, 0, 0, 0.85) 100%);
  z-index: 1;
  transition: background 700ms;
  bottom: -5px;
  right: -5px;
  left: -5px;
  pointer-events: none;
}

body.page .box-project-item img {
  aspect-ratio: 480/423;
}

.box-project-item__caption {
  padding: 20px 0;
}
.project-default-slider .box-project-item,
.project-default-slider .swiper-slide{
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}
.project-cat-inner .box-project-item__caption {
  padding: 10px 10px 10px 14px;
  background: #00000094;
  left: -4px;
  bottom: 10px;
  transition: transform 0.5s ease, opacity 0.5s ease;
  width: 65%;
  z-index: 1;
  cursor: pointer;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity !important;
  -webkit-font-smoothing: antialiased;
}

.box-project-item__caption h4 {
  margin-bottom: 7px;
}

.box-project-item__caption h4 a {
  font-size: 20px;

}

.box-project-item__caption .preview,
.box-project-item__caption .preview ul {
  font-size: 15px;
  font-family: var(--font-family-base);
}

.project-cat-inner .box-project-item__caption .preview ul {
  padding-left: 0;
  list-style: none;
}

.box-project-item__caption .preview * {
  margin-bottom: 0;
}

.box-project-item__caption .preview ul li:nth-child(n + 3),
body.page .project-item__info .preview ul li:nth-child(n + 3),
.project-related .project-item__info .preview ul li:nth-child(n + 3) {
  display: none;
}

.project-related .project-item__info .preview {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

body.page .project-item__info .preview ul,
body.page .project-item__info .preview * {
  margin-bottom: 0;
}

.box-project-item>a {
  overflow: hidden;
  box-shadow: 1px 2px 11px #5c5c5c3d;
  will-change: transform;
  transform: translateZ(0);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s ease;
  display: block;
}

.box-project-grid {
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 384px;
}
.box-project-grid .project-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 0;
}

/* layer active */
.box-project-grid .project-layer.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* tối ưu GPU */
.box-project-grid .project-layer {
  will-change: opacity;
}

.box-project-grid .grid-item {
  grid-row: span 1;
}


.box-project-grid .grid-item:nth-child(3n + 1) {
  grid-row: span 2;
}

.grid-item .project-item__info {
  transform: translateY(calc(100% - 56px));
}

.text-slider {
  padding: 63px 0;
}

.text-slider-wrap {
  overflow: hidden;
  width: 100%;
}

.text-slider__run {
  display: flex;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.text-slider__run span {

  font-size: 120px;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: rgb(255 255 255 / 30%);
  white-space: nowrap;
  padding-right: 80px;
  line-height: 1.2;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.project-faq-contact {
  padding-bottom: 76px;
}

.grid-item .project-item__info h4 {
  margin-right: -20px;
}

.grid-item:hover .project-item__info h4 {
  margin-right: 0;
}

.grid-item:hover .project-item__info h4 span {
  display: none;
}

.group-slider .item {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.group-slider .item >.box-project-item:first-child {
  grid-column: 1 / -1;
}

.group-slider .item .box-project-item img {
  aspect-ratio: 813/576;
}

.group-slider .item>.box-project-item:first-child img {
  aspect-ratio: 1649/564;
}

.slide-cell {
  position: relative;
}
.slide-cell .sizer {
  display: block;
  width: 100%;
  aspect-ratio: 813/576;
  visibility: hidden;
  pointer-events: none;
}

.slide-cell .box-project-item {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.slide-cell .box-project-item.active {
  opacity: 1;
  pointer-events: auto;
}

.group-slider .box-project-item__caption {
  left: 22px;
  bottom: 30px;
  cursor: pointer;
}

.group-slider .item>.box-project-item:first-child .box-project-item__caption {
  max-width: 566px;
}

.project-default-slider .swiper-button-prev, .project-default-slider .swiper-button-next{
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color) !important;
  margin: 0 !important;
  will-change: transform;
  transform: translateY(-50%) rotate(45deg) translateZ(0);
  backface-visibility: hidden;
  top: 50%;
  
}
.project-default-slider .swiper-button-prev{
  left: -29px;
}
.project-default-slider .swiper-button-next{
  right: -29px;
}
.project-default-slider .swiper-button-next:after, .project-default-slider .swiper-button-prev:after{
  transform: rotate(-45deg);
  font-size: 30px;
  color: var(--btn-color);
}
.project-default-slider .swiper-button-prev:after{
  padding-left: 19px;
}
.project-default-slider .swiper-button-next:after{
  padding-right: 19px;
}

/* menu-mobile */
.header-sm {
  background: var(--background-color);
  padding: 10px 0;
  height: auto;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease-in-out;
}

.header-sm .logo a img {
  height: 56px;
  transition: height 0.4s ease-in-out;
  width: auto;
}

.header-sm.scroll-top {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  max-width: calc(100% - 16px);
  margin: 8px auto 0;
  border-radius: 12px;
  overflow: hidden;
}

.header-sm.scroll-top::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.35),
      rgba(255, 255, 255, 0.08),
      transparent 60%);
}

.header-sm.scroll-top::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%,
      rgba(255, 255, 255, 0.18),
      transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0, 0, 0, 0.08), transparent 45%),
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.12),
      transparent 50%);

  opacity: 0.35;
  mix-blend-mode: overlay;
}

.header-sm.scroll-top .logo a img {
  height: 30px;
}

#hamburger {
  background-color: transparent;
  top: 50%;
  transform: translateY(-50%);
}

#hamburger:before,
#hamburger:after,
#hamburger span {
  background-color: #cec4b6;
  border-radius: 999px;
  border: 1px solid #fff;
}

/* single-blog */
.hero-banner {
  aspect-ratio: 1920/706;
  padding-top: 48px;
}

.group-title {
  max-width: 1205px;
}

.group-title h1 {

  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  line-height: 150%;
  margin-bottom: 15px;
}

.group-title p {
  font-weight: 300;
  color: var(--btn-color);
  font-size: 14px;
}

.group-title__img {
  border-radius: 20px;
  aspect-ratio: 1108/700;
  max-width: 1108px;
  width: 100%;
  transform: translateY(49px);
}

body.single main {
  background-color: var(--bg-page);
}

.blog-detail {
  padding-top: 80px;
}

body.page-template-default .blog-detail {
  padding-bottom: 40px;
}

.blog-detail__form .archive-form h2 {
  color: var(--text-color-dark);
}

.blog_detail__meta svg {
  color: #656565;
}

.blog_detail__meta {
  margin-top: 15px;
  gap: 11px;
  font-weight: 300;

}

.blog-detail__content {
  margin-top: 26px;
}

.blog-detail__content .content {
  max-height: 995px;
  overflow-anchor: none;
}

body.single-services .blog-detail__content .content {
  max-height: 1090px;
}

body.single-services .blog-detail__content.show .content {
  max-height: none;
}

.blog-detail__promotion,
.blog-detail__form,
.quick-contact {
  top: 50px;
  z-index: 998;
}

.blog-faq {
  padding: 40px 0 30px;

}

.blog-faq .faq-list {
  max-width: 1366px;
  margin-inline: auto;
}

.des-box-faq {
  border-bottom: 0.5px solid #010101;
  padding-bottom: 18px;
}

.des-box-faq p {
  max-width: 1156px;
  margin: auto;
}

.related-blog {
  padding-top: 53px;
  padding-bottom: 21px;
}

body.single .form-contact button,
body.page:not(.page-template-page-contact-us) .form-contact button {
  min-width: unset;
  width: 100%;
  min-height: auto;
  color: var(--text-color-white);
  border: 1px solid var(--background-color);
}

.ez-toc-js-icon-con {
  border: none !important;
}

.ez-toc-icon-toggle-span {
  position: relative;
}

.ez-toc-icon-toggle-span svg {
  display: none;
}

.ez-toc-icon-toggle-span::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  display: inline-block;
  margin-left: 6px;
  font-size: 14px;
  color: var(--text-color-white);
  transition: 0.3s ease-in-out;
}

.box-content-detail .toc_close .ez-toc-icon-toggle-span::after {
  content: "\f077";
}

.ez-toc-sticky-fixed .ez-toc-sidebar {
  background-color: var(--background-color) !important;
}

.ez-toc-sticky-title-container {

  background-color: var(--btn-color) !important;
  color: var(--text-color-white);
  border-color: var(--btn-color) !important;
}

.ez-toc-sticky-fixed .ez-toc-close-icon,
.ez-toc-sticky-title-container p {
  color: var(--text-color-white) !important;
}

.box-content-detail .ez-toc-title-container {
  border-bottom: 0.5px solid var(--text-color-white) !important;
  margin-bottom: 10px !important;
}

body.single .archive-form .form-contact input,
body.single .archive-form .select2-container--default .select2-selection--single {
  padding: 12px 7px;
}

.box-design-idea {
  max-width: 560px;
  padding: 60px 30px;
  background: #d9d9d9b2;
}

.discover-function {
  margin-bottom: 59px;
}

.discover-function__img img {
  border-radius: 20px;
  aspect-ratio: 800/431;
}

.discover-function__content h2 {
  font-family: var(--font-family-third);
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  line-height: clamp(40px, 3.64vw, 60px);
  margin-bottom: 13px;
}

.discover-function__content .desc-function {

  margin-bottom: 6px;
}

.list-function__item {
  padding: 23px 0;
  border-bottom: 1px solid #010101;
  font-size: 25px;
  font-weight: 500;

  cursor: pointer;
}

.list-function__item.active {
  color: var(--btn-color);
}

.list-function__item:last-child {
  border-bottom: none;
}

.swal2-popup .swal2-styled.swal2-confirm,
.swal2-popup .swal2-styled:focus {
  background-color: var(--btn-color) !important;
  box-shadow: none !important;
}

#ez-toc-sticky-container a,
#ez-toc-sticky-container a:visited {
  color: #9f9f9f !important;
}

.blog-faq .faq-list .accordion-item:not(:has(.accordion-collapse.show)) {
  border-bottom: 1px solid #000 !important;
}

body.modal-open {
  padding-right: 0 !important;
  scroll-behavior: auto !important;
}

.faq-list .accordion-button[aria-expanded="true"] {
  color: var(--btn-color) !important;
}

#frmCtaModal {}

#frmCtaModal button.btn-close {
  right: 15px;
  top: 15px;
  filter: invert(1);
  opacity: 1;
}

#frmCtaModal button.btn-close:focus {
  box-shadow: none;
}

.box-form-cta form {
  gap: 20px;
}

.box-form-cta button {
  background-color: var(--background-color);
  color: var(--text-color-white) !important;
  border-radius: 12px;
  border: 1px solid var(--background-color) !important;
}

.form-cta .select2-container--default .select2-selection--single .select2-selection__rende#ff0000 {
  padding-left: 0 !important;
}

#frmCtaModal .modal-body {
  padding-bottom: 35px;
}

#frmCtaModal .modal-content {
  border-radius: 20px;
  background-color: var(--btn-color);
}

.bottom-sheet-cta #frmCtaModal.modal.fade .modal-dialog {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  max-width: 100%;
  height: auto;

  transform: translateY(100%);
  transition: transform 0.5s ease;
}

/* Modal wrapper */
.bottom-sheet-cta #frmCtaModal.modal.fade .modal-dialog {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  max-width: 100%;
  height: 100vh;

  display: flex;
  align-items: flex-end;

  transform: translateY(100%);
  transition: transform 0.45s ease;
}

.bottom-sheet-cta #frmCtaModal.modal.fade.show .modal-dialog {
  transform: translateY(0);
}

/* Content */
.bottom-sheet-cta #frmCtaModal .modal-content {
  width: 100%;
  height: auto;
  min-height: 64dvh;
  max-height: 92svh;
  margin-top: auto;

  border-radius: 16px 16px 0 0;
  /* chỉ bo góc trên */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Handle container */
.bottom-sheet-cta #frmCtaModal .modal-handle {
  padding: 8px 0 4px;
  cursor: pointer;
}

.bottom-sheet-cta #frmCtaModal .modal-handle::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background: #ccc;
  border-radius: 2px;
  margin: 0 auto 4px;
}

.bottom-sheet-cta #frmCtaModal .modal-handle::after {
  content: "";
  display: block;
  width: 28px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  margin: 0 auto;
}

.bottom-sheet-cta #frmCtaModal .modal-content {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bottom-sheet-cta #frmCtaModal .modal-body {
  padding-bottom: 15px !important;
  padding-top: 0 !important;
}

.bottom-sheet-cta .box-form-cta form {
  gap: 5px;
}

#frmCtaModal .modal-header {
  padding-bottom: 0;
}

.bottom-sheet-cta .form-cta input,
.bottom-sheet-cta .form-cta button {
  border-radius: 12px;
  padding: 12px 16px;
  height: 35px;
  --input-color: #949499;
  color: var(--input-color);
}

.bottom-sheet-cta .form-cta .select2-container--default .select2-selection--single {
  height: 35px;
}

.bottom-sheet-cta .form-cta button {
  padding: 6px 16px;
  margin-top: 15px;
}

.bottom-sheet-cta #frmCtaModal button.btn-close {
  display: none !important;
}

.bottom-sheet-cta #frmCtaModal .modal-handle {
  display: block !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border: 4px solid rgb(189 135 65 / 30%) !important;
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--btn-color) !important;
}

.bottom-sheet-cta #frmCtaModal .modal-body {
  overflow-y: auto;
  overflow-x: hidden;
}

label.error {
  font-size: 0.875rem !important;
  position: absolute;
  bottom: -29px;
  left: 12px;
  color: #ff0000 !important;
}

body.single:not(.single-project, .single-recruitment, .single-services) label.error {
  display: none !important;
}

.recruitment-box__form form.error .group-upload {
  border: 1px solid #ff0000;
}

body:not(.page) .select2-container--default .select2-selection--single .select2-selection__rendered,
.promotion-services__form .select2-container--default .select2-selection--single .select2-selection__rendered,
.form-cta .select2-container--default .select2-selection--single .select2-selection__rendered,
.archive-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 15px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #949499;
}

.form-cta .select2-container--default .select2-selection--single {
  padding-inline: 10px;
}

.recruitment-box__form form textarea,
.recruitment-box__form form textarea:focus {
  background-color: transparent;
  border-radius: 20px;
  --input-color: #949499;
  color: var(--input-color);
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
  padding: 15px;

  line-height: 150%;
  border-color: #fff;
  height: auto;
}

/* single-recruitment */
.single-title__title h1 {
  border: 1px solid #000;
  margin-top: 69px;
  margin-bottom: 0;
}

.page-recruitment-galleries {
  margin-top: 48px;
  margin-bottom: 103px;
}

.recruitment-detail__info>span {
  margin-bottom: 16px;
  display: inline-block;
}

.recruitment-detail__info>span a {
  color: var(--btn-color);
}

.recruitment-detail__info .info-recruitment {
  margin-bottom: 43px;
}

.recruitment-detail__info .info-recruitment p {
  font-size: 20px;
  line-height: 35px;
}

.recruitment-detail__info .info-recruitment .info-recruitment__break {
  background-color: #000;
  max-width: 535px;
  height: 1px;
  margin-top: 40px;
}

body.single-recruitment .recruitment-box__title h3 {
  padding: 5px 15px 0;
  margin-bottom: 0;
}

body.single-recruitment .recruitment-box__title {
  border-color: #656565;
}

body.single-recruitment .recruitment-box__form form:not(.error) input,
body.single-recruitment .recruitment-box__form form:not(.error) .form-group:not(.d-flex)::before,
body.single-recruitment form:not(.error) .input-wrap::before,
body.single-recruitment .recruitment-box__form form textarea,
body.single-recruitment .recruitment-box__form form textarea:focus,
body.single-recruitment .recruitment-box__form form:not(.error) .group-upload {
  border: 1px solid #656565 !important;
}

body.single-recruitment .recruitment-box__form {
  padding-bottom: 15px;
}

body.single-recruitment .recruitment-box__form form input,
body.single-recruitment .recruitment-box__form .group-upload,
body.single-recruitment .recruitment-box__form form button {
  height: 40px;
}

body.single-recruitment .recruitment-box__form .group-upload button {
  height: 25px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
}

body.single-recruitment .recruitment-box__form .group-upload {
  column-gap: 4px;
}

body.single-recruitment .recruitment-box__form form {
  margin-bottom: 18px;
}

body.single-recruitment .recruitment-box__form .note-form {
  font-size: 16px;
}

body.single-recruitment .recruitment-box__form .group-upload span {
  font-size: 8px;
}

.recruitment-detail {
  margin-bottom: 53px;
}

body.single-recruitment .recruitment-box__form form button:hover {
  color: var(--text-color-dark);
}

body.single-recruitment .recruitment-box__title .desc-form {
  padding: 0 10px;
}

/* page-services */
.block-title {
  padding-top: 84px;
}

.characteristic-services {
  padding-bottom: 114px;
}

.characteristic-services h2 {
  margin-bottom: 60px;
  font-size: clamp(24px, 3vw, 37px);
  line-height: 150%;
  font-family: var(--font-family-heading-services);
}

.list-services-characteristic {
  gap: 60px;
}

body.page-template-page-services .box-characteristic {
  border: 0.5px solid var(--btn-color);
  padding: 6px 0px 5px;
  gap: 12px;
}

.box-characteristic__icon img {
  width: clamp(100px, 8.33vw, 150px);
  aspect-ratio: 1/1;
}

.box-characteristic__caption {
  min-width: 0;

}

.box-characteristic__caption h4 {
  font-size: clamp(14px, 0.38vw + 10.8px, 18px);
  line-height: clamp(40px, 3.64vw, 60px);
  position: absolute;
  top: -32px;
  left: clamp(100px, 8.33vw, 150px);
  background-color: #000;
  padding-inline: 5px;
}

.box-characteristic__caption p {
  font-size: clamp(12px, 0.38vw + 10.8px, 16px);
  margin-bottom: 0;
}

body.page .services-wrap {
  padding-top: 0;
}

body.page .services-wrap__title {
  margin-bottom: 0;
}

body.page .characteristic-wrap {
  order: 2;
}

.services-activities {
  padding-top: 58px;
  padding-bottom: 20px;
}

.inner-item a {
  display: block;
  aspect-ratio: 430 / 553;
  border-radius: 20px;
  overflow: hidden;
}

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

body.page .faq-form {
  padding-bottom: 64px;
}

.characteristic-services__center img {
  aspect-ratio: 309/383;
  object-fit: contain;
}

.promotion-services {
  padding: 151px 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

}

.promotion-services:after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: 0.9;
  bottom: -1px;
  top: -1px;
}

.promotion-services__box {
  gap: 43px;
}

.promotion-services__box h5 {
  font-size: clamp(18px, calc(18px + (100vw - 320px) * 0.005263), 25px);
  line-height: 150%;
  margin-bottom: 14px;
}

.promotion-services__box h2 {
  font-size: clamp(18px, calc(22px + (100vw - 320px) * 0.005263), 35px);
  line-height: 150%;
}

.promotion-services__box .type-promotion {
  font-size: clamp(18px, calc(22px + (100vw - 320px) * 0.005263), 35px);
  line-height: 150%;
  color: var(--btn-color);
}

.promotion-services__box .content * {
  margin-bottom: 0;
}

.countdown-promotion-wrap {
  gap: 39px;
}

.countdown-promotion-wrap .count-box {
  background-color: #d9d9d9;
  border-radius: 15px;
  gap: 5px;
  color: var(--text-color-dark);
  width: clamp(80px, calc(80px + (100vw - 320px) * 0.0333), 156px);
  aspect-ratio: 1/1;
  font-size: clamp(18px, calc(18px + (100vw - 320px) * 0.005263), 25px);
}

.countdown-promotion-wrap .count-box span:first-child {
  font-weight: 600;
  line-height: 150%;
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
}

.promotion-services__form {
  background-color: var(--btn-color);
  border-radius: 12px;
  padding: 30px 16px;
}

.inner-services-activies {
  z-index: 0;
}

body.page-template-page-services .procedure-box__count {
  aspect-ratio: 35/70;
  width: clamp(30px, 3vw, 45px);
  font-size: clamp(18px, 3.5vw, 40px);
}

/* single-service */
.group-title span a {
  color: #fff;
}

body.single-services .accordion-item,
body.single-services .accordion-item button {
  color: #fff !important;
}

body.single-services .blog-detail__content img {
  border-radius: 20px;
}

body.single-services main .faq-form {
  padding-bottom: 83px;
}

.receive-quote {
  margin-top: 60px;
}

.receive-quote button {
  position: relative;
  padding: 0;
  border-radius: 12px;
}

.receive-quote button span {
  background-color: var(--background-color);
  color: #fff;
  position: relative;
  z-index: 1;
  padding: 12px 16px;

  font-weight: 500;
  border-radius: 12px;
  text-transform: uppercase;
  display: block;
}

.receive-quote button:after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(84deg,
      #ffd18c,
      #ffdb75,
      #ff9900,
      #ffd275,
      #724a0e,
      #ffab13,
      #ffd079,
      #ffdb56);
  background-size: 300% 300%;
  z-index: 0;
  animation: moveGradient 4s linear infinite;
}

.package-services {
  padding: 38px 0;
}

.package-services__box {
  border-radius: 20px;
  background-color: var(--bg-page);
  padding: 15px 0;
  gap: 19px;
}

.package-services__box h4 {
  font-size: clamp(16px, calc(16px + (100vw - 320px) * 0.005263), 23px);
  line-height: var(--line-height-base);

}

.package-services__box h4 span:last-child {
  color: #d9d9d9;
  margin-bottom: 10px;
}

.package-services__box .description {
  font-size: 15px;
  font-weight: 500;
}

.package-services__box div:not(:nth-child(2)) {
  padding-inline: 15px;
}

.package-services__box__price {
  background-color: #d9d9d9;
  line-height: clamp(35px, 2vw + 35px, 60px);
  font-size: clamp(18px, 1.8vw, 30px);
  padding: 18px 10px;

}

.package-services__box div:last-child p {
  line-height: clamp(35px, 2vw + 35px, 60px);
}

.package-services__box div:last-child ul {
  list-style: none;
  padding-left: 0;
}

.package-services__box div:last-child ul li {
  font-weight: 500;
  position: relative;
  padding-left: 32px;
}

.package-services__box div:last-child ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 23px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.37 1.5C3.53 1.5 1.69 3.23 1.69 5.92v8.16c0 2.68 1.84 4.42 4.68 4.42h9.75c2.85 0 4.69-1.74 4.69-4.42V5.92c0-2.69-1.84-4.42-4.69-4.42H6.37Zm9.75 18.5H6.37C2.56 20 0 17.62 0 14.08V5.92C0 2.38 2.56 0 6.37 0h9.76C19.94 0 22.5 2.38 22.5 5.92v8.16C22.5 17.62 19.94 20 16.12 20Z'/%3E%3Cpath d='M9.91 13.12a1.2 1.2 0 0 1-.6-.22L6.65 10.53a.7.7 0 0 1 0-1.06.85.85 0 0 1 1.19 0l2.07 1.84 4.75-4.21a.85.85 0 0 1 1.19 0 .7.7 0 0 1 0 1.06l-5.34 4.75a1.2 1.2 0 0 1-.6.21Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.package-services .col-12:nth-child(even) .package-services__box {
  background-color: var(--btn-color);
}

.package-services .note-prices {
  margin-top: 25px;
  font-size: 15px;
}

.package-services .note-prices * {
  margin-bottom: 0;
}

.procedure-services {
  padding-top: 69px;
}

.procedure-services .box-title h2::before,
.procedure-services .box-title h2::after,
.procedure-services .box-title span::before,
.procedure-services .box-title span::after {
  background-color: var(--background-color);
}

.process-timeline {
  position: relative;
  padding-top: 50px;
}

/* LINE CHÍNH */
.process-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #222;
  transform: translateX(-50%);
}

/* ITEM CHUNG */
.process-item {
  position: relative;
  max-width: 1392px;
  margin: auto;
  padding-top: 66px;
}

/* ======================
   STEP CENTER (STEP 0)
====================== */
.process-item.center {
  text-align: center;
  max-width: 964px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg-page);
}

/* chấm tròn ngắt line */
.process-center-dot {
  position: relative;
  width: 28px;
  height: 28px;
  margin: 0 auto 22px;
  background: var(--bg-page);
  border-radius: 50%;
  z-index: 3;
}

.process-center-dot::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 12px;
  height: 12px;
  background: #222;
  border-radius: 50%;
}

/* content center */
.process-center-content {
  padding: 0 20px;
  z-index: 2;
}

.process-tag {
  display: inline-block;
  border: 1px solid #6d5e49;
  border-radius: 15px;
  padding: 10px;
  font-size: 20px;
  margin-bottom: 47px;

}

.process-center-content .process-preview {
  font-size: 15px;
  background-color: var(--bg-page);
  padding-bottom: 30px;
}

.process-center-content .process-preview * {
  margin-bottom: 0;
}

.process-item.first-item {
  padding-top: 250px;
}

/* ======================
   STEP ZIGZAG
====================== */

/* dot zigzag */
.process-item.left::before,
.process-item.right::before {
  content: "";
  position: absolute;
  top: 106px;
  left: 50%;
  width: 28px;
  height: 28px;
  background: var(--bg-page);
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.process-item.left::after,
.process-item.right::after {
  content: "";
  position: absolute;
  top: 114px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #222;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

/* content box */
.process-content {
  padding-top: 50px;
}

.process-content h5 {
  display: inline-block;
  border: 1px solid #6d5e49;
  border-radius: 15px;
  padding: 10px;
  font-size: 20px;
  margin-bottom: 16px;

}

.process-content__preview {
  font-size: 15px;
}

.process-step {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}

.process-item.left .process-img {
  padding-left: 30px;
}

.process-item.right .process-img {
  padding-right: 30px;
}

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

.process-item.left .process-content {
  text-align: right;
  padding-right: 20px;
}

.process-item.right .process-content {
  text-align: left;
  padding-left: 20px;
}

.process-curve {
  position: absolute;
  left: 50%;
  transform: translateX(-96%);
  top: calc(100% + 20px);
  z-index: 3;
  background: var(--bg-page);
}

.process-item.left.first-item::before {
  top: 291px;
  z-index: 3;
}

.process-item.left.first-item::after {
  top: 299px;
}

.process-item.pt-0::after {
  top: 49px;
}

.process-item.pt-0::before {
  top: 41px;
}

/* page-about */
.tab-about {
  padding-top: 67px;
  padding-bottom: 48px;
}

.tab-about ul {
  gap: 26px;
}

.tab-about ul.nav-tabs li>button {
  border-radius: 20px !important;
  border: 1px solid #fff !important;
  color: #fff !important;

  font-weight: 600;
  font-size: clamp(16px, calc(2.222vw - 16.666px), 20px);

  min-width: clamp(150px, calc(150px + 11.28vw), 300px);

  min-height: clamp(32.5px, calc((150px + 11.28vw) * 0.2167), 65px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all ease-in-out 0.3s;
  text-transform: uppercase;
}

.tab-about ul li button:hover,
.tab-about ul li button.active {
  background-color: #fff !important;
  color: var(--btn-color) !important;
}

.over-view-company {
  padding-top: 75px;
  padding-bottom: 178px;
}

.over-view-company__img img {
  border-radius: 20px;
  aspect-ratio: 378/596;
  flex: 1;
  min-width: 0;
}

.over-view-company__img img:last-child {
  transform: translateY(88px);
}

.over-view-company__content h2 {
  gap: 10px;
}

.over-view-company__content h2 span:first-child {
  height: 0.5px;
  background-color: var(--text-color-white);
  min-width: 0;
}

.over-view-company__content h2 span+span {
  font-weight: 300;
  font-size: clamp(20px, calc(30px + (100vw - 1470px) * 5 / 180), 25px);

  line-height: 150%;
  margin-bottom: 35px;
}

.short-over-view {
  font-family: var(--font-family-base);
}

.over-view-company__btn {
  display: flex;
  gap: 47px;
  transform: translateY(88px);
}

.over-view-company__btn * {
  background-color: var(--btn-color) !important;
  color: var(--text-color-white);

  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin: 0 !important;
}

.experience-company {
  background-color: var(--btn-color);
  padding: 41px;
}

.experience-company__title h2,
.organizational-company__title h2 {
  margin-bottom: 30px;
}

.experience-company__title .description {
  margin-bottom: 40px;
}

.box-experience {
  gap: 26px;
}

.box-experience__icon {
  width: clamp(50px, 5vw, 90px);
  height: clamp(50px, 5vw, 90px);
}

.box-experience__icon img {
  width: clamp(24px, 2.727vw, 45px);
  aspect-ratio: 1/1;
}

.experience-company .row {
  row-gap: 87px;
}

.box-experience__content {
  max-width: 536px;
  min-width: 0;
}

.box-experience__content h4 {
  font-size: 21px;
  margin-bottom: 15px;
  font-family: var(--font-family-second);
}

.organizational-company {
  padding-top: 88px;
  padding-bottom: 58px;
}

.organizational-company__chart {
  margin-top: 63px;
}

.hero-intro {
  padding-top: 40px;
}

.hero-block-people h2 {
  line-height: clamp(35px, 2vw + 35px, 60px);
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);

  margin-bottom: 19px;
}

.hero-block-people h2 span:first-child {
  color: var(--btn-color);
}

.hero-block-people .desc-people {

  margin-bottom: 38px;
  display: flex;
  flex-direction: column;
  gap: 19px;
}

.desc-people__line {
  height: 110px;
  width: 0.5px;
  background-color: var(--text-color-white);
}

.hero-block-people .banner-people img {
  aspect-ratio: 1642/676;
  margin-bottom: 45px;
}

.culture-people {
  padding: 72px 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.culture-people .box-culture {
  gap: 224px;
}

.box-culture__caption h4 {
  font-weight: 300;

  font-size: clamp(18px, calc(18px + (100vw - 320px) * 0.005263), 25px);
  gap: 5px;
}

.box-culture__caption h4 span:last-child {
  min-width: 0;
  height: 0.5px;
  background-color: #fff;
  margin-bottom: 42px;
}

.box-culture__caption p {

  font-size: clamp(18px, calc(18px + (100vw - 320px) * 0.005263), 25px);
  letter-spacing: 2px;
  margin-bottom: 0;
}

.box-culture__caption .content {

  margin: 69px 0;
}

.box-culture__caption .view-more a,
.box-culture__caption .view-more>div {
  background-color: var(--btn-color);
  border: 1px solid var(--btn-color);
  border-radius: 12px;
  min-width: clamp(120px, 17vw, 276px);
  min-height: clamp(27px, 17vw, 62px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all ease-in-out 0.3s;

}

.box-culture__caption .view-more a:hover,
.box-culture__caption .view-more>div:hover {
  background-color: var(--background-color);
}

.box-culture__img img {
  aspect-ratio: 685/852;
  max-width: 685px;
}

.block-team {
  padding-top: 52px;
  padding-bottom: 85px;
}

.block-team--default {
  background-color: var(--bg-page);
}

.block-team--slider {
  padding-top: 93px;
  padding-bottom: 25px;
}

.block-team--default .box-title h2::before,
.block-team--default .box-title h2::after,
.block-team--default .box-title span::before,
.block-team--default .box-title span::after {
  background-color: var(--background-color);
}

.block-team--default .box-title h2 {
  margin-bottom: 35px;
}

.block-team__title {
  border-bottom: 1px solid #656565;
  padding-bottom: 18px;
  margin-bottom: 71px;
}

.block-team__title h2 {
  margin-bottom: 25px;
  margin-bottom: 71px;
}

/* .box-team {
    max-width: 541px;
} */

.box-team__img img {
  aspect-ratio: 541/493;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .box-team__caption {
  
} */

.box-team__caption h4 {
  font-size: clamp(18px, calc(18px + (100vw - 320px) * 0.005263), 25px);
  font-weight: 400;
  gap: 10px;
  margin-top: 30px;
  text-transform: capitalize;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
}

.box-team__caption h4 span:last-child {
  font-size: clamp(14px, calc(18px + (100vw - 320px) * 0.005263), 18px);
}

.box-team__caption {
  gap: 30px;
}

.box-team__caption p {
  font-weight: 400;
  margin-top: 0;
}

.block-team .row {
  row-gap: 177px;
}

.block-team__list .owl-prev {
  position: absolute;
  left: 0;
  top: 32%;
  transform: translateY(-50%);
  color: #d9d9d9;
}

.block-team__list .owl-next {
  position: absolute;
  right: 0;
  top: 32%;
  transform: translateY(-50%);
  color: #d9d9d9;
}

.block-team__list [class*="owl-"] svg {
  color: #d9d9d9;
}

.slider-team-feature .team-feature-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
}

.slider-team-feature__caption {
  gap: 87px;

  padding-right: 10px;
}

.slider-team-feature__caption h4 {
  font-size: clamp(18px, calc(18px + (100vw - 320px) * 0.005263), 25px);
}

.slider-team-feature__caption p {
  font-size: clamp(14px, calc(18px + (100vw - 320px) * 0.005263), 18px);
}

.slider-team-feature .button-nav {
  position: absolute;
  left: 0;
  bottom: 110px;
  max-width: 146px;
  width: 100%;
  max-height: 52px;
  height: 100%;
}

.slider-team-feature .button-nav div {
  width: 52px;
  height: 52px;
  background-color: var(--btn-color);
  color: #000;
  border-radius: 100%;
  transition: ease-in-out 0.3s;
}

.slider-team-feature .button-nav div:hover {
  background-color: var(--color-main);
}

.slider-team-feature .button-nav div:after {
  font-size: 22px;
}

.slider-feature-title h2 {
  gap: 14px;
}

.slider-feature-title h2 span {
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
}

.slider-feature-title h2 span+span {
  min-width: 0;
  height: 0.5px;
  background-color: #fff;
}

.block-team--slider:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 100px;
  background-color: var(--bg-page);
}

.slider-team-feature__img img {
  aspect-ratio: 402/655;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-team-list__img {
  background: #000;
}

.slider-team-list__img img {
  aspect-ratio: 318/422;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
}

.slider-team-feature .swiper-slide {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.slider-team-feature .swiper-wrapper {
  will-change: transform;
}

/* page-company */
/* body.page .main-content {
    
} */

.hero-intro h2,
.ceo-share h2 {
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  margin-bottom: 54px;
}

.meaning-company {
  max-width: 968px;
}

.meaning-company,
.meaning-company__box {
  gap: 30px;
}

.meaning-company__box h4 {
  font-size: clamp(16px, 1.05vw + 12.63px, 30px);
}

.meaning-company__box * {
  margin-bottom: 0;
}

.meaning-company__box img {
  margin-top: 30px;
  aspect-ratio: 958/399;
}

.meaning-company__box .content img,
.meaning-company__box .img-explain img {
  aspect-ratio: unset;
}

.meaning-company__box .intro-line-vertical {
  height: 110px;
  width: 0.5px;
  background-color: var(--text-color-white);
}

.ceo-share {
  padding-top: 54px;
  padding-bottom: 47px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.ceo-share::after {
  content: "";
  position: absolute;
  inset: 0;
  bottom: -1px;
  top: -1px;
  background: #000;
  opacity: 0.2;
  pointer-events: none;
}

.box-ceo-info__img {
  aspect-ratio: 816/710;
}

.box-ceo-info__caption {
  padding-top: 59px;
}

.box-ceo-info__caption h5,
.box-ceo-info__caption p {
  font-weight: 300;
  font-size: clamp(16px, 1.2vw + 10.4px, 25px);
  margin-bottom: 30px;
  gap: 50px;
}

.box-ceo-info__caption h5 span:last-child {
  min-width: 0;
  height: 0.5px;
  background-color: #fff;
}

.box-ceo-info__caption p {
  letter-spacing: 2px;
}

.box-ceo-share {
  max-width: 638px;
}

.box-ceo-share>img {
  aspect-ratio: 1/1;
  width: 100%;
  max-width: clamp(50px, 6.3vw, 110px);
}

.box-ceo-share .content {
  margin-top: 55px;
}

body.page .wrap-about {
  padding-top: 52px;
}

.vision-block {
  padding-bottom: 10px;
  padding-top: 125px;
}

.vision-block>.container {
  /* margin-right: auto;
  margin-left: 0;
  padding-left: 0;
  max-width: calc(100% - 127px); */
}

.vision-block__img img {
  filter: grayscale(100%) brightness(1.05) contrast(0.95);
}

.vision-block__caption {
  max-width: 717px;
  margin-left: auto;
}

.vision-block__caption .box-vision {
  margin-top: 25px;
  gap: 90px;
}

.vision-block__caption .box-vision h5 {
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  margin-bottom: 8px;
}

.vision-block__caption .box-video img {
  aspect-ratio: 660/153;
  border-radius: 99px;
  max-width: clamp(300px, 30vw, 660px);
  width: 100%;
}

.vision-block__caption .box-video a:after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 70%);
  z-index: 0;
}

.vision-block__caption .box-vision .content-vision * {
  margin-bottom: 0;
  z-index: 9;
}

.vision-block__caption .box-video a span {
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);

  font-size: clamp(21px, 2.424vw, 40px);
  width: 100%;
  z-index: 9;
}

.vision-block__caption .box-video a span svg {
  width: clamp(54px, 6vw, 140px);
  height: clamp(54px, 6vw, 140px);
}

.vision-block .line-horizontal-about {
  top: clamp(-32px, -1.94vw, 0px);
  right: clamp(-60px, -3.64vw, 0px);
  left: auto;
}

.vision-block .line-horizontal-about {
  top: clamp(-42px, -1.94vw, 0px);
  right: clamp(-60px, -3.64vw, 0px);
  left: auto;
}

.vision-block .line-vertical-about {
  top: clamp(-48px, -2.9vw, 0px);
  right: clamp(-27px, -1.93vw, 0px);
  left: auto;
}

.vision-block__caption .box-video {
  margin-bottom: 80px;
  margin-top: 71px;
}

.curved-text {
  position: absolute;

  width: clamp(120px, 13.6vw, 320px);
  height: clamp(120px, 13.6vw, 320px);

  top: clamp(-65px, -3.6vw, -85px);
  left: clamp(-55px, -3.6vw, -85px);
}

.curved-text svg {
  width: 100%;
  height: 100%;
}

.curved-text text {
  fill: #fff;
  font-size: 18px;
}

.curved-text svg {
  transform: rotate(-180deg);
}

.value-block {
  padding-top: 48px;
  padding-bottom: 25px;
}

.value-block h2 {
  font-size: clamp(25px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  margin-bottom: 35px;
}

.value-block h2:before,
.value-block h2:after,
.value-block h2 span:before,
.value-block h2 span:after {
  background-color: var(--background-color);
}

.value-block__left img,
.value-block__right .design-right img {
  aspect-ratio: 230/200;
  max-width: clamp(100px, 10.5vw, 230px);
}

.value-block__left .content {
  margin-top: 34px;
}


/* .value-img:after {
  content: "";
  position: absolute;
  background: transparent;
  border: 5px solid rgba(156, 43, 23, 1);
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
  z-index: 1;
  animation: my 1500ms infinite;
} */

@keyframes my {
  0% {
    border-color: var(--btn-color);
  }

  50% {
    border-color: var(--color-main);
  }

  100% {
    border-color: var(--btn-color);
  }
}

.banner-company {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 1919/472;
  cursor: pointer;
}

.banner-company:after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 59%);
}

/* applications_arch */
.applications-arch {
  padding-bottom: 49px;
}

.applications_arch h3 {
  margin-bottom: 29px;
  font-size: clamp(22px, 1.7vw, 30px);
}

.app-main-image img {
  aspect-ratio: 811/742;
}

.applications-arch .img-art {
  column-gap: 21px;
}

.applications-arch .img-art img {
  aspect-ratio: 395/614;
  flex: 1;
  min-width: 0;
  filter: grayscale(100%);
}

.applications-arc .content-art {
  margin-top: 20px;
}

.main-applications {
  margin-top: 25px;
}

.main-applications {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.box-application__text {
  border: 1px solid #D9D9D9;
  border-right: 0;
  padding: 25px 13px;
}

.box-application:last-child .box-application__text {
  border-right: 1px solid #D9D9D9;
}

.box-application h4 {
  font-size: clamp(15px, 0.38vw + 10.8px, 18px);
  margin-bottom: 24px;

}

.box-application__img {
  aspect-ratio: 395/310;
}

.banner-company-logo {
  aspect-ratio: 1920/548;
  position: relative;
  margin-bottom: 106px;
}

.banner-company-logo:after {
  content: '';
  background-color: rgb(0 0 0 / 80%);
  position: absolute;
  inset: 0
}

.banner-company-logo__title h2 {
  font-weight: 200;
  font-style: italic;
  font-size: clamp(18px, calc(30px + (100vw - 1470px) * 5 / 180), 35px);
  padding-bottom: 7px;
}

.banner-company-logo__title h2:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid #fff;
  width: 38%;
}

.block-thinking__content {
  max-width: 972px;
  margin-bottom: 54px;
}

.block-thinking {
  padding-bottom: 47px;
}

.block-thinking__gal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 38px;
}

.block-thinking__gal .item-gal:first-child {
  grid-column: span 2;
}

.block-thinking__gal img {
  display: block;
  filter: grayscale(100%);
}


/* page-404 */
body.error404,
body.search {}

.box-404__content,
.box-search__content {
  max-width: 800px;
  margin-inline: auto;
}

.box-404__form,
.box-search__form {
  max-width: 600px;
  margin-inline: auto;
}

.box-404__form button,
.box-search__form button {
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.box-404__form button:hover svg,
.box-search__form button:hover svg {
  color: #000;
}

.box-404__content h1,
.box-search__content h1 {
  font-size: clamp(25px, 2.424vw, 33px);
}

.box-404__form input,
.box-search__form input {
  height: 48px;
  border-radius: 20px;
}

.box-404__form a,
.box-search__form a {
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.box-404__content img,
.box-404__search img {
  max-height: 500px;
  width: auto;
}

.block-care,
.block-search-reuslut {
  padding-bottom: 30px;
}

.block-care h2,
.block-search-result h2 {
  font-size: clamp(20px, 2.424vw, 28px);
  margin-bottom: 20px;
}

.block-care .col-6,
.block-search-result .col-6 {
  margin-bottom: 20px;
}

#frm-search {
  top: 35px;
  right: -5px;
  width: 300px;
  padding: 5px;
  background-color: #ffffffaa;
  border: solid 1px silver;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  z-index: 999;
}

#frm-search label.error {
  display: none !important;
}

#frm-search input {
  height: 38px;
}

#frm-search .error input {
  border-radius: 6px !important;
}

#frm-search button {
  top: 1px;
  right: 0;
  background-color: var(--btn-color);
  color: #fff;
  z-index: 99;
}

/* menu-mobile */
.mm-menu {
  background-color: var(--background-color);
}

.mm-menu .mm-listview>li>a:hover,
.mm-menu .mm-listview>li.mm-selected>a:not(.mm-next),
.mm-menu .mm-listview>li.mm-selected>span {
  background-color: #656565;
}

.mm-listview>li>a,
.mm-listview>li>span {
  color: #d4d0d0;
}

.mm-menu .mm-listview>li:after {
  border-color: #625f5f;
}

.mm-listview .mm-next,
.mm-listview .mm-next:hover {
  background-color: transparent !important;
}

.mm-menu .mm-listview>li .mm-prev:before,
.mm-menu .mm-listview>li .mm-next:after,
.mm-menu .mm-listview>li .mm-arrow:after {
  border-color: #939090;
}

.social-mobile {
  column-gap: 10px;
  padding: 5px 0;
}

.social-mobile a img {
  width: 30px;
  height: 30px;
}

.mm-navbar .mobile-search-form {
  margin-inline: 11.25px;
}

.mm-navbar .mobile-search-form .form-group {
  position: relative;
  margin: 0;
}

.mm-navbar .mobile-search-form .form-control {
  width: 100%;
  height: 30px;
  padding: 0 42px 0 12px;
  font-size: 14px;
  line-height: 30px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  color: #333;
  outline: none;
  box-shadow: none;
}

.mm-navbar .mobile-search-form .form-control::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

.mm-navbar .mobile-search-form button {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mm-navbar .mobile-search-form svg {
  width: 18px;
  height: 18px;
  color: rgba(0, 0, 0, 0.6);
}

.mm-navbar .mobile-search-form .form-control:focus {
  border-color: rgba(0, 0, 0, 0.35);
}

.mm-menu_theme-dark .mm-navbar .mobile-search-form .form-control {
  background: #222;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.mm-menu_theme-dark .mobile-search-form svg {
  color: rgba(255, 255, 255, 0.6);
}

.wrap-about__content>div div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.df-popup-thumb .df-book-title {
  background-color: var(--btn-color) !important;
}

/* fenghshui */
body.post-type-archive-fengshui,
body.post-type-archive-fengshui_kitchen,
body.post-type-archive-fengshui_built_house,
body.page-template-page-thuoc-lo-ban {
  background-color: #fff;
  color: #000;
}

.fengshui-archive {
  padding-bottom: 30px;
}

.fengshui-archive__title,
.hero-page__title {
  padding-top: 76px;
}

.fengshui-archive__title h1,
.hero-page__title h1 {
  border-color: var(--background-color);
  aspect-ratio: unset;
}

.form-fenghshui {
  margin-bottom: 30px;
}

.form-fenghshui label {
  font-size: 16px;
}

.form-fenghshui input,
.form-fenghshui select {
  height: 40px;
  margin-top: 10px;
  border-radius: 15px;
}

.form-fenghshui button {
  background-color: var(--btn-color);
  color: #fff;
  border-radius: 15px;
  font-size: 18px;
  transition: ease-in-out 0.3s;
  width: 100%;
}

.form-fenghshui button:hover {
  background-color: var(--background-color);
  color: #fff;
}

/* fengshui lỗ ban */
#lobanOuter p {
  font-size: 14px;
}

.social-sticky-buttons {
  --sticky-button-size: 40px;
  --sticky-button-shadow: 0 0 10px 5px rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  bottom: 0;
  right: 0;
  z-index: 998;
  transform: translateY(-50%);
  background: var(--btn-color);
  padding: 10px !important;
  border-radius: 30px 0 0 30px;
  list-style: none;
}
.social-sticky-buttons__item {
  width: var(--sticky-button-size);
  aspect-ratio: 1;
}
.social-sticky-buttons a {
  text-decoration: none;
  border-radius: var(--sticky-button-size);
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-sticky-buttons a img{
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: contain;
}
.social-sticky-buttons li:last-child a{
  padding: 7px;
  animation: vibrate 1.5s ease infinite;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: vibrate;
  animation-timeline: auto;
  animation-range-start: normal;
  animation-range-end: normal;
}
@keyframes vibrate{
  0% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
  10% {
      transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
      transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
      transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
      transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
      transform: rotate(0deg) scale(1) skew(1deg);
  }
  100% {
      transform: rotate(0deg) scale(1) skew(1deg);
  }
}
.social-sticky-buttons:before, .social-sticky-buttons:after{
  content: "";
  position: absolute;
  right: 0;
  height: 30px;
  width: 60px;
  pointer-events: none;
}

.social-sticky-buttons:before {
  top: -30px;
  border-radius: 0 0 50px 0;
  box-shadow: 30px 1px 0 0 var(--btn-color);
}

.social-sticky-buttons:after {
  bottom: -30px;
  border-radius: 0 50px 0 0;
  box-shadow: 30px -1px 0 0 var(--btn-color);
}
.fancybox-is-open .fancybox-stage{
  background-color: #000 !important;
}