@charset "UTF-8";
/*
Theme Name: C12WE1024
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0.4
*/
/*************** ADD CUSTOM CSS HERE.   ***************/
.polygon {
  position: absolute;
  opacity: 0;
  background: rgba(255, 255, 255, 0.2); /* Nền mờ */
  animation: move-transform-scale 10s ease-in-out infinite alternate;
  animation-fill-mode: backwards;
  /* Kích thước, vị trí, màu sắc ban đầu */
}
.polygon.shape1 {
  width: 100px;
  height: 100px;
  top: 30%;
  left: 20%;
  animation-delay: 0s;
  animation-name: shape1-transform;
}
.polygon.shape2 {
  width: 120px;
  height: 120px;
  top: 40%;
  left: 60%;
  animation-delay: 1s;
  animation-name: shape2-transform;
}
.polygon.shape3 {
  width: 80px;
  height: 80px;
  top: 60%;
  left: 30%;
  animation-delay: 2s;
  animation-name: shape3-transform;
}
.polygon.shape4 {
  width: 150px;
  height: 150px;
  top: 20%;
  left: 70%;
  animation-delay: 3s;
  animation-name: shape4-transform;
}
.polygon.shape5 {
  width: 60px;
  height: 60px;
  top: 50%;
  left: 10%;
  animation-delay: 4s;
  animation-name: shape5-transform;
}

/* Keyframes với hiệu ứng scale */
@keyframes shape1-transform {
  0% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.5;
  }
  50% {
    clip-path: polygon(60% 0%, 100% 60%, 40% 100%, 0% 40%);
    transform: translate3d(-20px, 30px, 50px) scale(1.5); /* Thêm scale phóng to */
    opacity: 1;
  }
  100% {
    clip-path: polygon(50% 0%, 90% 50%, 50% 90%, 10% 50%);
    transform: translate3d(0, -20px, -50px) scale(0.8); /* Scale thu nhỏ */
    opacity: 0.5;
  }
}
@keyframes shape2-transform {
  0% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.6;
  }
  50% {
    clip-path: polygon(50% 0%, 85% 30%, 50% 90%, 15% 30%);
    transform: translate3d(20px, -10px, 30px) scale(1.4); /* Scale phóng to */
    opacity: 0.8;
  }
  100% {
    clip-path: polygon(60% 0%, 100% 60%, 40% 100%, 0% 40%);
    transform: translate3d(-10px, -20px, -30px) scale(0.9); /* Scale thu nhỏ */
    opacity: 0.4;
  }
}
@keyframes shape3-transform {
  0% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.6;
  }
  50% {
    clip-path: polygon(60% 0%, 90% 40%, 50% 90%, 10% 40%);
    transform: translate3d(15px, 25px, 40px) scale(1.6); /* Scale phóng to hơn */
    opacity: 1;
  }
  100% {
    clip-path: polygon(50% 0%, 80% 50%, 50% 100%, 20% 50%);
    transform: translate3d(0, -10px, -40px) scale(0.7); /* Scale thu nhỏ rõ rệt */
    opacity: 0.5;
  }
}
@keyframes shape4-transform {
  0% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.6;
  }
  50% {
    clip-path: polygon(55% 0%, 95% 45%, 55% 95%, 5% 45%);
    transform: translate3d(-25px, -15px, 60px) scale(1.3); /* Scale vừa phải */
    opacity: 0.9;
  }
  100% {
    clip-path: polygon(60% 0%, 100% 60%, 40% 100%, 0% 40%);
    transform: translate3d(0, -20px, -60px) scale(1); /* Quay về trạng thái ban đầu */
    opacity: 0.5;
  }
}
@keyframes shape5-transform {
  0% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.6;
  }
  50% {
    clip-path: polygon(45% 0%, 85% 45%, 45% 85%, 15% 45%);
    transform: translate3d(10px, -25px, 70px) scale(1.4); /* Scale phóng to nhẹ */
    opacity: 1;
  }
  100% {
    clip-path: polygon(50% 0%, 90% 50%, 50% 90%, 10% 50%);
    transform: translate3d(-10px, -15px, -70px) scale(0.9); /* Scale thu nhỏ */
    opacity: 0.4;
  }
}
.br-10px {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(74, 74, 74, 0.29);
}

html {
  scroll-behavior: smooth; /* Tạo hiệu ứng cuộn mượt */
}

header .header-main {
  position: relative;
  overflow: hidden;
  perspective: 1000px;
}
header .header-main .header-inner {
  z-index: 2;
  position: relative;
}
header .header-main:after {
  z-index: 0;
  content: "";
  position: absolute;
  left: 5%;
  top: 0;
  width: 200px;
  aspect-ratio: 1/1;
  background: rgba(4, 166, 108, 0.6);
  animation: header-title-animation 10s ease-in-out infinite;
  animation-direction: alternate;
  transform: rotate(320deg);
}
header .header-main:before {
  z-index: 0;
  content: "";
  position: absolute;
  left: 5%;
  top: 0;
  width: 200px;
  aspect-ratio: 1/1;
  background: rgba(4, 166, 108, 0.6);
  animation: header-title-animation 10s ease-in-out infinite;
  animation-direction: alternate;
  animation-delay: 0.5s;
  transform: rotate(320deg);
}
@keyframes header-title-animation {
  0% {
    transform: rotate(320deg);
  }
  50% {
    left: 10%;
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(220deg) scale(0.5);
    background: rgba(4, 166, 108, 0);
  }
}

.hotec-header-title {
  color: #ca0808;
  text-align: center;
  font-family: "Francois One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.hotec-header-title .main-title {
  line-height: 1.4;
}
.hotec-header-title .sub-title {
  margin-top: 5px;
  text-transform: uppercase;
  color: #FFF;
  background: #ca0808;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 80%;
  position: relative;
  overflow: hidden;
  animation: title-text-animation 10s linear infinite;
  animation-direction: normal;
}
.hotec-header-title .sub-title:before {
  content: "";
  width: 5px;
  height: 5px;
  background: radial-gradient(rgba(255, 255, 255, 0.67), transparent, transparent);
  position: absolute;
  left: -20%;
  top: 50%;
  transform: translateY(-50%) scale(5);
  animation: title-light-animation 5s ease-out 2s infinite;
  border-radius: 50%;
}
@keyframes title-light-animation {
  0% {
    left: -20%;
    transform: scale(50);
  }
  50% {
    transform: scale(100);
    left: 150%;
  }
  100% {
    transform: scale(50);
    left: 150%;
  }
}
@keyframes title-text-animation {
  40% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(180deg);
  }
  55% {
    transform: rotateX(0deg);
    letter-spacing: normal;
  }
  65% {
    letter-spacing: 2px;
  }
  70% {
    letter-spacing: normal;
  }
}

footer #top-link.back-to-top {
  border: none;
  background: rgba(4, 166, 108, 0.7607843137);
  border-radius: 10px !important;
  color: #FFF;
  font-weight: bold;
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.6s ease;
}
footer #top-link.back-to-top:hover {
  border-radius: 50% !important;
}
footer .ft-heading {
  font-size: clamp(16px, 2vw, 18px);
  margin-bottom: 5px;
  padding: 5px;
  font-weight: bold;
}
footer .ft-heading-2 {
  margin-bottom: 10px;
  padding: 5px 15px;
  font-size: clamp(16px, 2vw, 18px);
  background: rgba(0, 0, 0, 0.2196078431);
  backdrop-filter: blur(5px);
  color: #FFF;
  border-radius: 2px;
  border-bottom: 2px solid #F1F1F1;
}
footer .ft-description {
  margin-bottom: 15px;
}
footer .ft-description p {
  margin-bottom: 5px;
}

.box.box-blog-post {
  border: 1px solid #F1F1F1;
  border-radius: 2px;
  transition: all 0.6s ease;
}
.box.box-blog-post .box-text {
  padding: 15px;
}
.box.box-blog-post .box-text .box-text-inner {
  text-align: left;
}
.box.box-blog-post .box-text .box-text-inner h1, .box.box-blog-post .box-text .box-text-inner h2, .box.box-blog-post .box-text .box-text-inner h3, .box.box-blog-post .box-text .box-text-inner h4, .box.box-blog-post .box-text .box-text-inner h5, .box.box-blog-post .box-text .box-text-inner h6 {
  margin: 0;
  font-weight: 500;
}
.box.box-blog-post .box-text .box-text-inner .post-title {
  margin-bottom: 5px;
}
.box.box-blog-post .box-text .box-text-inner .post-title a {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: normal;
  color: #191919;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.box.box-blog-post .box-text .box-text-inner .post-meta {
  width: fit-content;
  background: #444444;
  padding: 2px 5px;
  line-height: 1.2;
  color: #FFF;
  border-radius: 2px;
  margin: unset;
}
.box.box-blog-post .box-text .box-text-inner .is-divider {
  display: none;
}
.box.box-blog-post:hover {
  box-shadow: 0 0 10px rgba(41, 41, 41, 0.21);
}

body.page #content .page-inner h1 {
  color: #04a66c;
  border-bottom: 1px solid #F1F1F1;
  text-transform: uppercase;
  margin-bottom: 15px;
  padding-bottom: 10px;
}
body.page #content .page-inner h2 {
  color: #191919;
}
body.page #content .page-inner ul {
  margin-left: 20px;
}

.animated-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #04a66c, #191919);
  perspective: 1000px;
}

.ux-relay__control .ux-relay__pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.ux-relay__control .ux-relay__pagination li {
  margin: 0;
}
.ux-relay__control .ux-relay__pagination li span, .ux-relay__control .ux-relay__pagination li a {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.ux-relay__control .ux-relay__pagination li span {
  background-color: #04a66c;
}
.ux-relay__control .ux-relay__pagination li a {
  background-color: #191919;
  color: #FFF;
}
.ux-relay__control .ux-relay__pagination li a:hover {
  background-color: #04a66c;
}

body.single .entry-header .entry-title {
  color: #04a66c;
  border-bottom: 1px solid #F1F1F1;
  padding-bottom: 15px;
}
body.single .entry-header .entry-divider {
  display: none;
}

.row.featured-icon-box .icon-box {
  border: 1px solid #FFF;
  border-radius: 5px;
}
.row.featured-icon-box .icon-box .icon-box-text h2, .row.featured-icon-box .icon-box .icon-box-text h3, .row.featured-icon-box .icon-box .icon-box-text h4, .row.featured-icon-box .icon-box .icon-box-text h5, .row.featured-icon-box .icon-box .icon-box-text h6 {
  font-size: clamp(30px, 2vw, 60px);
  color: #FFF;
  margin-bottom: 0px;
  padding: 20px 0;
}
.row.featured-icon-box .icon-box .icon-box-text p, .row.featured-icon-box .icon-box .icon-box-text span {
  background: #FFF;
  color: #000;
  padding: 10px 0;
  font-weight: bold;
}

@media all and (max-width: 576px) {
  .mobile-swiper {
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .mobile-swiper > .col {
    width: 75%;
    flex-basis: 75%;
    min-width: 75%;
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .mobile-swiper > .col .text {
    white-space: wrap;
  }
  .mobile-swiper > .col .icon-box {
    border: 1px solid #F1F1F1;
    border-radius: 10px;
  }
  .mobile-swiper > .col .box {
    white-space: normal;
  }
}

/*# sourceMappingURL=style.css.map */