/* style */
.mb-0,
.mb-0 * {
   margin-bottom: 0;
}

/* Footer */
#footer .ux-menu-link__text {
   color: #fff;
}

#footer .absolute-footer {
   display: none;
}


/* Header */
#header .flex-right {
   min-width: 196px;
}

#header .header-nav-main.nav-left {
   justify-content: center;
}

#header .nav-top-link {
   font-size: 16px;
   line-height: 24px;
}

#header .html_topbar_left {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
}

#header #top-bar {
   padding-top: 5px;
   padding-bottom: 5px;
}

#header .header-nav-main .menu-item>a {
   position: relative;
}

#header .header-nav-main>.menu-item.active>a::after,
#header .header-nav-main>.menu-item:hover>a::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 5px;
   height: 5px;
   background-color: var(--primary-color);
}

#header .header-search>a {
   padding: 8px 10px;
   border-radius: 50%;
   border-radius: 99px;
   background: #F6E7D6;
}

#header .header-search .icon-search {
   color: #A15200;
}

#header .header-search .ux-search-submit .icon-search {
   color: #fff;
}

/* Transalate */
#header .gt_float_switcher {
   box-shadow: none;
   border: none;
   background: transparent;
   position: relative;
   overflow: visible;
}

#header .gt_options {
   width: 160px;
   position: absolute;
   top: 100%;
   left: 0;
   background-color: #fff;
   box-shadow: rgba(0, 0, 0, 0.15) 0 5px 15px;
}

#header .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {
   transform: rotate(0deg);
}

#header .gt_float_switcher .gt_options a {
   font-size: 16px;
}

#header .gt_float_switcher .gt_options a:hover {
   background: var(--primary-color);
   color: #fff;
}

#header .gt_float_switcher .gt-selected {
   background: transparent;
}

/* Homepage */
#wrapper .home-sec-4 .home-sec-4-row-inner {
   padding: 17px;
   border: 1px solid rgba(255, 255, 255, 1);
   background-color: rgba(255, 255, 255, 0.24);
}

#wrapper .home-sec-4 .home-sec-4-row-inner .col {
   padding-bottom: 0;
}

.btn-banner-bg {
   width: 268px !important;
   overflow: hidden;
}

.btn-banner {
   display: flex !important;
   align-items: center;

   width: max-content;
   height: 38px !important;

   padding: 0 !important;
   margin: 0 !important;
   border: 0 !important;
   background: transparent !important;

   transform: translateX(calc((38px + 4px) * -1)) !important;

   transition: transform 0.3s linear !important;
   box-shadow: none !important;
}

.btn-banner span {
   height: 38px;
   padding: 0 20px;
   width: 222px;

   display: flex !important;
   align-items: center;
   justify-content: center;

   white-space: nowrap;
   line-height: 1 !important;
   background: var(--primary-color);
   color: #fff;
   flex-shrink: 0;
}

.btn-banner i {
   position: static !important;

   flex: 0 0 38px;
   width: 38px;
   height: 38px;

   display: flex !important;
   align-items: center;
   justify-content: center;

   margin: 0 !important;

   background: var(--primary-color);
   color: #fff;
}

.btn-banner .btn-banner-icon-clone {
   margin-right: 4px !important;
}

.btn-banner>i:not(.btn-banner-icon-clone) {
   margin-left: 4px !important;
}

.btn-banner:hover {
   transform: translateX(0) !important;
}

.line-ung-dung {
   width: 1px;
   height: 100%;
   background: #5C403F;
}

.dot-ung-dung {
   position: absolute;
   left: 50%;
   width: 8px;
   height: 8px;
   transform: translateX(-50%) rotate(45deg);
   background: var(--primary-color);
}

.dot-ung-dung.dot-1 {
   top: 25%;
}

.dot-ung-dung.dot-2 {
   top: 50%;
}

.dot-ung-dung.dot-3 {
   top: 75%;
}


@media (min-width: 850px) {
   .future-tabs.tabbed-content .nav-vertical {
      width: 50%;
      max-width: 50%;
      flex: 0 0 50%;
      gap: 16px;
   }

   .future-title {
      width: 50%;
      max-width: 50%;
      flex: 0 0 50%;

      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
   }

   .future-col .col-inner {
      position: relative;
   }


   .future-tabs .nav-tabs {
      padding-top: 250px !important;
      padding-bottom: 150px;
   }

   .future-btn {
      position: absolute !important;
      bottom: 0;
      left: 0;
      z-index: 1;
      margin-bottom: 1rem;
      margin-left: 0.5rem;
   }
}

.future-tabs .nav-vertical.nav-tabs>li {
   border: none;
}

.future-tabs .nav-vertical.nav-tabs>li>a {
   background: transparent;
   font-size: 1.4rem;
   color: #BBB;
   border-left: 8px solid transparent !important;
   font-weight: 400;
   line-height: 33.6px;
}

.future-tabs .nav-vertical.nav-tabs>li.active>a {
   border-left-color: var(--primary-color) !important;
   color: #000;
}

.future-tabs .tab-panels {
   border: none !important;
   box-shadow: none !important;
}

.flickity-page-dots {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-start;

   width: 231px;
   height: 8px;

   margin: 20px auto 0 !important;
   padding: 0 !important;

   background: #ededed;
   border-radius: 999px;
   overflow: hidden;
}

/* Ẩn dot tròn mặc định */
.project-slider .flickity-page-dots .dot {
   flex: 1;
   height: 100%;

   margin: 0 !important;
   padding: 0 !important;

   background: transparent !important;
   border: 0 !important;
   border-radius: 0 !important;

   opacity: 1 !important;
}

/* Thanh active */
.project-slider .flickity-page-dots .dot.is-selected {
   position: relative;
}

.project-slider .flickity-page-dots .dot.is-selected::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;

   width: 100%;
   height: 8px;

   background: #937070;
   border-radius: 999px;
}

.project-slider .flickity-page-dots .dot {
   height: 8px !important;
}

.project-slider .flickity-button {
   position: absolute !important;
   border: 0 !important;
   width: 24px !important;
   height: 24px !important;
   color: transparent !important;
   bottom: 0 !important;
   top: auto !important;
}

.project-slider .flickity-button svg {
   display: none;
   position: relative;
}

.project-slider .flickity-prev-next-button {
   position: absolute !important;
   top: auto !important;
   bottom: -8px !important;

   width: 24px !important;
   height: 24px !important;
   padding: 0 !important;

   background: transparent !important;
   border: 0 !important;
   border-radius: 0 !important;
   box-shadow: none !important;

   transform: none !important;
   color: #000 !important;
}

.project-slider .flickity-prev-next-button svg {
   display: none !important;
}

.project-slider .flickity-prev-next-button.previous {
   left: calc(50% - 170px) !important;
   right: auto !important;
}

.project-slider .flickity-prev-next-button.next {
   right: calc(50% - 170px) !important;
   left: auto !important;
}

.project-slider .flickity-prev-next-button::before {
   content: "";
   display: block;
   width: 24px;
   height: 14px;

   background-color: currentColor;
   -webkit-mask-position: center;
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: contain;

   mask-position: center;
   mask-repeat: no-repeat;
   mask-size: contain;
}

.project-slider .flickity-prev-next-button.previous::before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14' fill='none'%3E%3Cpath d='M6.58228 0L7.65132 1.06908L2.89413 5.82632H24V7.33825H2.89413L7.65132 12.0954L6.58228 13.1645L0 6.58223L6.58228 0Z' fill='%23000'/%3E%3C/svg%3E");

   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14' fill='none'%3E%3Cpath d='M6.58228 0L7.65132 1.06908L2.89413 5.82632H24V7.33825H2.89413L7.65132 12.0954L6.58228 13.1645L0 6.58223L6.58228 0Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Mũi tên phải */
.project-slider .flickity-prev-next-button.next::before {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14' fill='none'%3E%3Cpath d='M17.4177 0L16.3487 1.06908L21.1059 5.82632H0V7.33825H21.1059L16.3487 12.0954L17.4177 13.1645L24 6.58223L17.4177 0Z' fill='%23000'/%3E%3C/svg%3E");

   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14' fill='none'%3E%3Cpath d='M17.4177 0L16.3487 1.06908L21.1059 5.82632H0V7.33825H21.1059L16.3487 12.0954L17.4177 13.1645L24 6.58223L17.4177 0Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Hover */
.project-slider .flickity-prev-next-button:hover {
   color: var(--primary-color) !important;
   background: transparent !important;
}

/* Disabled */
.project-slider .flickity-prev-next-button:disabled {
   opacity: 0.35 !important;
}

/* vision */
.vistion-sec-title-1 .title-top-white {
   opacity: 0.3;
}

.vistion-sec-title-2 {
   opacity: 0.08;
}

.title-bottom-gradient {
   background: linear-gradient(95deg, #FFF 0%, #C8102E 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.vistion-sec-title-2 {
   font-size: 75px;
   text-transform: uppercase;
}

.vision-progress {
   --item-count: 3;
   --progress-x: 0%;

   position: relative;
   width: 100%;
   height: 5px;
   overflow: hidden;
   background: #5c403f;
   border-radius: 5px;
}

.vision-progress::before {
   content: "";
   position: absolute;
   inset: 0 auto 0 0;

   width: calc(100% / var(--item-count));
   height: 100%;
   background: var(--primary-color);
   border-radius: inherit;

   transform: translateX(var(--progress-x));
   transition: transform 0.45s ease;
}

.vision-item {
   cursor: pointer;
}

.vision-item .col-inner {
   transition:
      opacity 0.35s ease,
      transform 0.35s ease;
}

.vision-item.is-active .col-inner {
   transform: translateY(-5px);
}

.vision-title {
   border-left: 2px solid #A15200;
   padding-left: 20px;
}

.vision-number {
   opacity: 0.2;
   transition: opacity 0.35s ease;
}

.vision-item.is-active .vision-number {
   opacity: 1;
}

.fc-back-button {
   display: flex;
   align-items: center;
   gap: 4px;
}

.number-col {
   border-right: 0.5px solid #fff;
}

.number-col:last-child {
   border-right: none;
}

.vision-section .section-content::before {
   content: "";
   position: absolute;
   right: 0;
   bottom: 0;

   width: 100%;
   height: 100%;

   background: var(--primary-color);

   clip-path: polygon(100% 0,
         100% 100%,
         0 100%);

   pointer-events: none;
   z-index: 0;
   opacity: 8%;
}

.wpcf7-spinner {
   display: none;
}

.contact-ft .newsletter-form>p {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

.contact-ft .newsletter-form .wpcf7-submit {
   flex-shrink: 0;
   background-color: #000;
}

@media (max-width: 768px) {
   .vistion-sec-title-2 {
      font-size: 3rem;
      text-transform: uppercase;
   }

   .number-col {
      border-right: none;
   }
}

.contact-map iframe{
   width: 100% !important;
}