:root {
  --red-color: #ce2030 !important;

  --primary-color: #002d47 !important;

  --background-color: #123160 !important;
}

body,
.nav > li > a {
  font-family: "Gilroy", sans-serif !important;
}

.nav > li > a {
  font-weight: 600 !important;

  text-transform: none !important;

  font-size: 16px !important;

  color: var(--primary-color) !important;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  opacity: 0.9;
}

.nav > li {
  margin: 0 calc(47px / 2) !important;
}

.nav > li:first-child {
  margin-left: 0 !important;
}

.nav > li:last-child {
  margin-right: 0 !important;
}

.logo-left .logo {
  margin-right: 70px !important;
}

#logo {
  width: 120px !important;
}

.header-nav .header-button-1 {
  margin-right: 12px !important;
}

.header-button-1 a,
.header-button-2 a {
  border-radius: 6px !important;

  padding: 5px 24px !important;

  font-size: 16px !important;

  margin: 0 !important;

  font-weight: 600 !important;

  line-height: unset !important;

  letter-spacing: unset !important;

  height: unset !important;

  min-height: unset !important;

  border: 1px solid transparent !important;

  box-shadow: none !important;
}

.header-button-1 a span,
.header-button-2 a span {
  font-size: 16px !important;

  font-weight: 600 !important;

  text-transform: none;
}

.header-nav .header-button-1 a {
  background-color: var(--red-color) !important;

  color: #fff !important;
}

.header-nav .header-button-2 a {
  background: transparent !important;

  color: var(--primary-color) !important;

  border: 1px solid var(--primary-color) !important;
}

.header-bottom {
  background: #012a44 !important;

  border-bottom: 1px solid #009eff !important;
}

.cs-header-bottom .icon-box-text,
.cs-header-bottom .icon-box-text a {
  font-size: 14px;

  color: #fff;
}

.cs-header-bottom-right .icon-box:first-child .icon-box-text {
  width: auto !important;
}

.cs-header-bottom-right .col-inner {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: nowrap;
}

.cs-header-bottom-right .icon-box {
  /* flex: 1 1 auto; */

  white-space: nowrap;

  flex-flow: nowrap;

  padding-right: 12px;

  margin-right: 12px;

  position: relative;
}

.cs-header-bottom-right .icon-box-left,
.cs-header-bottom-right .icon-box-right {
  width: unset !important;
}

/* 

.cs-header-bottom-right .icon-box:nth-child(2){

        flex: 0 0 127px;

}

.cs-header-bottom-right .icon-box:nth-child(2) .icon-box-text{

        flex: 0 0 127px !important;

    

}

.cs-header-bottom-right .icon-box:nth-child(3){

        flex: 0 0 100px;

}

.cs-header-bottom-right .icon-box:nth-child(3) .icon-box-text{

        flex: 0 0 100px !important;

    

} */

.cs-header-bottom-right .icon-box::after {
  position: absolute;

  width: 2px;

  height: 24px;

  content: "";

  background-color: #009eff;

  right: 0;

  top: -2px;
}

.cs-header-bottom-right {
  padding-left: 75px !important;
}

.cs-header-bottom .icon-box-img {
  flex-shrink: 0; /* icon không bị co lại */

  width: 18px !important;

  height: 18px !important;
}

.cs-header-bottom .icon,
.cs-header-bottom .icon-inner,
.cs-header-bottom .icon-inner img {
  height: 100% !important;

  object-fit: contain;
}

.cs-header-bottom .icon-inner img {
  transform: translateY(-6px);
}

.cs-header-bottom .icon-box-text {
  color: #fff;

  padding-left: 6px !important;

  font-size: 14px;

  line-height: 1.4;
}

.cs-header-bottom .cs-header-bottom-left .icon-box-text {
  white-space: nowrap;

  flex: 0 0 770px;

  overflow: hidden;

  position: relative;
}

/* phần text sẽ di chuyển */

.cs-header-bottom .cs-header-bottom-left .icon-box-text span {
  display: inline-block;

  padding-left: 100%; /* đẩy text ra khỏi khung ban đầu */

  animation: marquee 30s linear infinite;
}

.cs-header-bottom-right .icon-box:nth-child(3) {
  /* flex: 0 0 auto; */

  padding-right: 0;

  margin-right: 0;
}

.cs-header-bottom-right .icon-box:nth-child(3)::after {
  display: none !important;
}

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

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

.cs-header-bottom .col {
  padding-bottom: 0 !important;
}

.custom-submenu-wrapper {
  position: fixed;

  top: 80px;

  left: 0;

  width: 100vw;

  z-index: 99;

  padding-top: 45px;

  opacity: 0;

  visibility: hidden;

  transform: translateY(20px);

  transition: all 0.4s ease;
}

.custom-submenu {
  background: #002133;
}

.custom-submenu ul {
  list-style: none;

  display: grid;

  gap: 50px 24px;

  grid-template-columns: repeat(4, 1fr);

  padding: 24px 0 !important;
}

.custom-submenu ul li {
  position: relative;

  border-radius: 16px;

  background: #002d47;

  color: #fff;

  padding: 12px;

  overflow: hidden;
}

/* tạo viền ánh sáng */

.custom-submenu ul li::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 16px;

  padding: 2px;

  background: linear-gradient(
    185deg,
    rgba(196, 196, 196, 0) 0%,

    rgba(255, 255, 255, 0.6) 50%,

    rgba(196, 196, 196, 0) 100%
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.9;
}

.custom-submenu ul li a {
  display: flex;

  align-items: center;

  color: #fff;

  gap: 30px;

  height: 100%;
}

.submenu-title {
  font-size: 16px;

  padding-bottom: 14px;

  font-weight: 600;

  display: block;

  position: relative;
}

.submenu-title::after {
  position: absolute;

  width: 5px;

  height: 14px;

  border-radius: 12px;

  background-color: var(--red-color);

  content: "";

  left: -12px;

  top: 5px;
}

.submenu-title::before {
  background: linear-gradient(
    90deg,
    rgba(0, 151, 245, 0) 0%,

    #0097f5 50%,

    rgba(0, 151, 245, 0) 100%
  );

  width: 112px;

  height: 2px;

  border-radius: 12px;

  position: absolute;

  bottom: 0;

  left: 0;

  content: "";
}

.submenu-description {
  font-size: 14px;

  font-weight: 500;

  margin-top: 14px;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 2; /* number of lines to show */

  line-clamp: 2;

  -webkit-box-orient: vertical;
}

.submenu-icon {
  flex: 0 0 60px;
}

.menu-item {
  position: relative;
}

.menu-has-child::after,
.menu-has-child::before {
  position: absolute;

  height: 6px;

  width: 35px;

  background: var(--red-color);

  content: "";

  left: 50%;

  transform: translateX(-50%) scaleX(0);

  opacity: 0;

  transition: all 0.3s ease;
}

.menu-has-child::after {
  border-top-left-radius: 10px;

  border-top-right-radius: 10px;

  bottom: -12px;
}

.menu-has-child::before {
  border-bottom-left-radius: 10px;

  border-bottom-right-radius: 10px;

  top: -12px;
}

.menu-has-child:hover::after,
.menu-has-child:hover::before {
  transform: translateX(-50%) scaleX(1);

  opacity: 1;
}

.menu-has-child:hover > .custom-submenu-wrapper {
  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}

.nav-top-link {
  gap: 10px;

  align-items: center;

  transition: color 0.3s ease;
}

.menu-arrow {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  transition: transform 0.3s ease;
}

/* Khi hover vào link cha thì mũi tên xoay lên */

.menu-has-child:hover .menu-arrow {
  transform: rotate(180deg);
}

/* Toàn bộ section banner full viewport */

#home_banner,
.banner-global {
  position: relative;

  width: 100%;

  height: 1000px; /* Chiếm toàn bộ chiều cao màn hình */

  overflow: hidden;

  color: #fff;
}

/* Video nền full khung */

#home_banner .banner-bg,
.banner-global .banner-img {
  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover; /* Đảm bảo không bị méo */

  z-index: 0;
}

.banner-global .banner-img img {
  height: 100%;

  width: 100%;

  object-fit: cover;
}

/* Lớp phủ tối */

#home_banner .banner-overlay,
.banner-global .banner-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, #002d47 0%, rgba(0, 0, 0, 0) 35%);

  z-index: 1;
}

/* Nội dung trong banner */

#home_banner .banner-inner,
.banner-global .banner-inner {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 100%;

  gap: 200px;

  /* padding-top: clamp(80px, 8vw, 150px); */
}

#home_banner .banner-inner::after,
.banner-global .banner-inner::after {
  display: none !important;
}

#home_banner .banner-left {
  flex: 1;

  max-width: 800px;
}

.banner-global .banner-left {
  flex: 1;

  max-width: 880px;
}

#home_banner .banner-right {
  flex: 1;

  position: relative;
}

.banner-title,
.banner-subtitle {
  color: #fff;

  font-size: 48px;

  font-weight: 700;

  text-transform: uppercase;

  margin-bottom: 0;
}

.banner_services-list {
  list-style: none;
}

.btn-banner {
  font-size: 16px;

  text-transform: capitalize;

  color: #fff !important;

  font-weight: 600;

  line-height: 24px;

  background-color: var(--red-color);

  padding: 12px 24px;

  display: block;

  width: fit-content;

  border-radius: 8px;

  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.banner_services-list li {
  display: flex;

  gap: 12px;

  margin-bottom: 24px;
}

.banner-right .feature {
  border-radius: 8px;

  border: 1px solid rgba(196, 196, 196, 0);

  background: linear-gradient(
    180deg,
    rgba(8, 88, 143, 0.7) 0%,

    rgba(0, 41, 70, 0.49) 100%
  );

  position: relative;

  display: flex;

  padding: 12px 24px;

  gap: 12px;

  width: fit-content;

  position: absolute;

  animation: featureBounce 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;

  will-change: transform;
}

.banner-right .feature.feature-top {
  top: -80px;

  left: 50px;
}

.banner-right .feature.feature-right {
  top: 50%;

  right: 20px;
}

.banner-right .feature.feature-bottom {
  left: 150px;

  bottom: -95px;
}

@keyframes featureBounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0);
  }
}

.banner-right .feature::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 8px;

  padding: 2px;

  background: linear-gradient(
    185deg,
    rgba(196, 196, 196, 0) 0%,

    rgba(255, 255, 255, 0.863) 50%,

    rgba(196, 196, 196, 0) 100%
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.9;
}

.banner-right .feature img {
  width: 42px;

  height: auto;

  object-fit: contain;
}

/* .banner-right .feature:first-child img{

      scale: 1.3;



} */

.banner-right .feature-text h4 {
  color: #fff;

  font-size: 16px;

  font-weight: 500;
}

.banner-right .feature-text p {
  color: #d7d7d7;

  font-size: 16px;

  font-weight: 400;

  margin-bottom: 0;
}

.custom-section {
  padding: 70px 0;
}

#experience_service,
#services-pricing-section {
  /* background-color: var(--background-color); */

  background-image: url("../images/bg-star.png");

  background-repeat: no-repeat;

  background-size: cover;
}

.bg-primary {
  background-color: var(--background-color) !important;
}

.cs-section-title {
  color: #fff;

  text-align: center;

  font-size: 32px;

  font-weight: 600;

  margin-bottom: 0;
}

.cs-section-subtitle {
  margin-top: 12px;

  margin-bottom: 0;

  color: rgba(255, 255, 255, 0.7);

  font-size: 16px;

  font-weight: 500;
}

.testimonials-slider {
  margin-top: 50px;

  margin-bottom: 24px;
}

.testimonial-card {
  position: relative;

  border-radius: 24px;

  border: 1px solid #152e4a;

  background: var(--primary-color);

  padding: 19px;

  overflow: hidden;
}

.testimonial-card-wrapper {
  border-radius: 24px;

  border: 1px solid #152e4a;

  background: linear-gradient(
    180deg,
    #182a45 0.36%,

    #05152f 15.94%,

    #07122d 75.98%,

    #031e4e 83.48%,

    #040918 91.75%,

    #040918 100.05%
  );

  padding-left: 7px;

  border-top-left-radius: 33px;

  border-bottom-left-radius: 33px;

  opacity: 0.8;
}

.has-light-border {
  position: relative;
}

/* Các cạnh có thể điều chỉnh riêng biệt */

.has-light-border::before {
  content: "";

  position: absolute;

  border-radius: 8px;

  pointer-events: none;

  inset: 0;

  z-index: 3;

  background:

    /* trên */ linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,

        rgba(6, 127, 205, 0.9) 50%,

        rgba(255, 255, 255, 0) 100%
      )
      top right 10% / 40% 1px no-repeat,
    /* dưới */
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 30%,

        rgba(6, 127, 205, 0.9) 50%,

        rgba(255, 255, 255, 0) 70%
      )
      bottom center/100% 1px no-repeat,
    /* trái */
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,

        rgba(6, 127, 205, 0.9) 40%,

        rgba(255, 255, 255, 0) 100%
      )
      left bottom 15% / 2px 40% no-repeat,
    linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,

        rgba(6, 127, 205, 0.9) 40%,

        rgba(255, 255, 255, 0) 100%
      )
      right bottom 12% / 1px 40% no-repeat;

  background-repeat: no-repeat;

  opacity: 1;
}

.testimonial-header {
  display: flex;

  justify-content: space-between;

  align-items: center;
}

.testimonial-header-left {
  display: flex;

  gap: 7px;

  align-items: center;
}

.testimonial-header-left .avatar img {
  width: 44px;

  height: 44px;

  border-radius: 50%;
}

.testimonial-header-left .info .name {
  color: #fff;

  font-size: 16px;

  font-weight: 600;

  line-height: 150%;

  margin-bottom: 0;
}

.testimonial-header-left .info .position {
  color: #717276;

  font-size: 13px;

  font-weight: 500;

  line-height: 150%;
}

.white-space {
  white-space: nowrap;
}

.page-link:focus {
  box-shadow: unset !important;
}
.home .testimonial-content {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
}
.testimonial-content > * {
  color: #fff !important;
}

.testimonial-content p {
  margin-bottom: 8px;
}
.testimonial-content p span {
  color: #fff !important;
}
.testimonial-content p label {
  color: #fff !important;
}
.testimonial-content p.title {
  font-size: 14px;

  font-weight: 600;
}

.testimonial-content p.content {
  font-size: 13px;

  font-weight: 500;
}

.testimonial-header {
  padding-bottom: 8px;

  margin-bottom: 8px;

  position: relative;
}

.testimonial-header::after {
  position: absolute;

  content: "";

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,

    #fff 50%,

    rgba(255, 255, 255, 0) 100%
  );

  width: 100%;

  height: 1px;

  bottom: 0;
}

.testimonial-date {
  display: block;

  text-align: end;

  font-size: 13px;

  font-weight: 500;
}

.testimonial-img img {
  width: 38px;

  height: auto;
}

.testimonial-img {
  margin-top: 8px;
}

.swiper-slide-active .testimonial-card {
  padding: 24px;
}

.swiper-slide-active .testimonial-header {
  padding-bottom: 14px;

  margin-bottom: 14px;
}

.swiper-slide-active .testimonial-header-left .avatar img {
  width: 55px;

  height: 55px;
}

.swiper-slide-active .testimonial-content p {
  margin-bottom: 14px;
}

.swiper-slide-active .testimonial-content p.title {
  font-size: 18px;
}

.swiper-slide-active .testimonial-content p.content {
  font-size: 16px;
}

.swiper-slide-active .testimonial-date {
  font-size: 16px;
}

.swiper-slide-active .testimonial-header-left .info .name {
  color: #fff;

  font-size: 20px;

  font-weight: 600;

  line-height: 150%;

  margin-bottom: 0;
}

.swiper-slide-active .testimonial-header-left .info .position {
  font-size: 16px;
}

.swiper-slide-active .testimonial-img img {
  width: 48px;
}

.swiper-slide-active .testimonial-img {
  margin-top: 14px;
}

#experience_service .swiper-wrapper {
  align-items: center;
}

.testimonial-header-right .rating svg {
  width: 20px;

  height: 20px;

  margin-left: 5px;
}

.swiper-slide-active .testimonial-header-right .rating svg {
  width: 24px;

  height: 24px;
}

.testimonial-header-right .rating .star {
  display: none;
}

.testimonial-header-right .rating .star.active {
  display: inline-block;
}

.seemore-btn {
  display: block;

  padding: 12px 70px;

  font-size: 14px;

  color: #fff !important;

  background-color: #0097f5;

  width: fit-content;

  margin: 0 auto;

  border-radius: 8px;

  font-weight: 600;

  position: relative;

  transition: all 0.3s;
}

.seemore-btn::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 8px;

  padding: 1px;

  background: linear-gradient(
    185deg,
    rgba(196, 196, 196, 0) 0%,

    rgba(255, 255, 255, 0.6) 50%,

    rgba(196, 196, 196, 0) 100%
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.9;
}

.seemore-btn:hover {
  background-color: var(--red-color);
}

.service-quality-wrapper {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: 60px;
}

.service-quality-item .sq-icon img {
  width: 104px;

  object-fit: contain;

  height: 104px;
}

.service-quality-item .sq-icon {
  padding: 21px;

  width: fit-content;

  border-radius: 24px;

  margin: 0 auto;

  margin-bottom: 16px;

  border: 1px solid #0097f5;
}

.service-quality-item .sq-text {
  text-align: center;
}

.service-quality-item .sq-text h3 {
  font-size: 18px;

  color: #fff;

  font-weight: 600;

  line-height: 1.8;

  margin-bottom: 0;
}

.service-quality-item .sq-text p {
  color: rgba(255, 255, 255, 0.7);

  text-align: center;

  font-size: 16px;

  font-style: normal;

  font-weight: 500;
}

.trial_form-wrapper {
  display: flex;

  padding: 51px 100px;

  justify-content: space-between;

  align-items: center;

  background-image: url("../images/free_trial.png");

  background-repeat: no-repeat;

  background-size: 100% 100%;

  margin-top: 70px;
}

.trial-form .form-row {
  display: flex;

  gap: 12px;
}

.trial_form-right form {
  margin-bottom: 0;
}

.trial_form-left h2 {
  font-size: 32px;

  color: #fff;

  font-weight: 500;

  margin-bottom: 12px;
}

.trial_form-left p {
  font-size: 18px;

  font-style: normal;

  font-weight: 500;

  line-height: 30px;

  background: var(--P1, linear-gradient(90deg, #34d399 0%, #5eead4 69.04%));

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}

.wpcf7-spinner {
  position: absolute;
}

.trial_form-right input {
  background-color: var(--primary-color) !important;

  color: #fff !important;

  border-radius: 8px !important;

  padding: 12px 24px !important;

  border: 0 !important;

  box-shadow: none !important;

  height: 48px !important;

  margin: 0 !important;

  line-height: unset !important;
}

.trial_form-right input::placeholder {
  color: #fff !important;

  font-size: 16px !important;
}

.trial_form-right .wpcf7-submit {
  margin: 0;

  font-size: 16px;

  text-transform: capitalize !important;

  color: #fff;

  font-weight: 500;

  background-color: var(--red-color) !important;
}

.trial_form-right .wpcf7-form-control-wrap {
  position: relative;
}

.trial_form-right .wpcf7-form-control-wrap::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 8px;

  padding: 1px;

  background: linear-gradient(
    181deg,
    rgba(196, 196, 196, 0) 0%,

    rgba(255, 255, 255, 0.6) 50%,

    rgba(196, 196, 196, 0) 100%
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.9;
}

.reason_why_360-wrapper {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  max-width: 1220px;

  margin-left: auto;

  margin-right: auto;
}

.reason_why_360-item {
  display: flex;

  gap: 40px;

  padding: 50px 100px 50px 0;

  align-items: flex-start;

  margin-bottom: 20px;

  position: relative;
}

.reason_why_360-item:nth-child(2n + 2) {
  padding: 50px 0 50px 100px;
}

.reason_why_360-item:nth-child(3),
.reason_why_360-item:nth-child(4) {
  margin-bottom: 0;

  margin-top: 20px;
}

.reason_why_360-item:nth-child(1):after {
  position: absolute;

  content: "";

  background: linear-gradient(
    1deg,
    rgba(255, 255, 255, 0) 0%,

    #fff 50%,

    rgba(255, 255, 255, 0) 100%
  );

  width: 1px;

  height: 160px;

  top: 50%;

  right: 0;

  transform: translateY(-50%);
}

.reason_why_360-item:nth-child(3):after {
  position: absolute;

  content: "";

  background: linear-gradient(
    1deg,
    rgba(255, 255, 255, 0) 0%,

    #fff 50%,

    rgba(255, 255, 255, 0) 100%
  );

  width: 1px;

  height: 160px;

  top: 50%;

  right: 0;

  transform: translateY(-50%);
}

.reason_why_360-item:nth-child(1)::before {
  position: absolute;

  content: "";

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,

    #fff 50%,

    rgba(255, 255, 255, 0) 100%
  );

  width: 500px;

  height: 1px;

  bottom: -20px;

  left: 50%;

  transform: translateX(-50%);
}

.reason_why_360-item:nth-child(2)::before {
  position: absolute;

  content: "";

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,

    #fff 50%,

    rgba(255, 255, 255, 0) 100%
  );

  width: 500px;

  height: 1px;

  bottom: -20px;

  left: 50%;

  transform: translateX(-50%);
}

.reason_why_360-icon {
  flex: 0 0 50px;
}

.reason_why_360-icon img {
  width: 50px;

  height: 50px;

  object-fit: contain;
}

.reason_why_360-infor h3 {
  font-size: 20px;

  color: #fff;

  text-transform: uppercase;

  margin-bottom: 12px;
}

.reason_why_360-infor p {
  color: rgba(255, 255, 255, 0.7);

  font-size: 16px;

  font-weight: 500;

  line-height: 150%;
}

#why_cloud360 {
  background-image: url("../images/earth_bg.png");

  background-repeat: no-repeat;

  background-size: 2000px;

  padding-top: 560px !important;

  background-position: top;

  padding-bottom: 50px !important;

  position: relative;
}

.human-img-overlay {
  position: absolute;

  bottom: 0;

  right: 0px;

  z-index: 1;
}

.human-img-overlay img {
  height: 500px;
}

#why_cloud360 .container {
  z-index: 2;

  position: relative;
}

#section_partner {
  background-repeat: no-repeat;

  background-size: cover;
}

.logo_partner-section {
  overflow: hidden;
}

.logo_partner-swiper {
  width: 100%;

  padding: 30px 0;

  margin-top: 120px;

  margin-bottom: 200px;

  background: rgba(255, 255, 255, 0.7);
}

.logo_partner-item {
  display: flex;

  align-items: center;

  justify-content: center;
}

.logo_partner-img img {
  max-width: 100%;

  height: 80px;

  width: auto;

  object-fit: contain;

  transition: transform 0.3s ease, opacity 0.3s ease;
}

.faq_list-wrapper {
  max-width: 1000px;

  margin: 0 auto;

  margin-top: 50px;
}

.faq-item {
  border: 0.5px solid var(--W-stroke, rgba(196, 196, 196, 0));

  margin-bottom: 24px;

  padding: 12px 24px;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.12) 0%,

    rgba(191, 191, 191, 0.12) 100%
  );
}

.faq-heading h3,
.faq-heading h4 {
  color: #fff;

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 0;
}

.faq-heading {
  display: flex;

  justify-content: space-between;

  align-items: center;

  cursor: pointer;

  transition: 0.3s ease;

  position: relative;

  transition: 0.25s all cubic-bezier(0.17, 0.67, 0.09, 0.97);
}

.faq-heading h3,
.faq-heading h4 {
  color: #fff;

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 0;

  position: relative;

  padding-left: 12px;
}

.faq-heading h3::before {
  content: "";

  width: 11px;

  height: 11px;

  border: 2px solid #ff3b4d;

  display: block;

  position: absolute;

  left: -7px;

  top: 6px;

  border-radius: 50%;
}

/* Dấu cộng tạo bằng 2 thanh ngang & dọc */

.faq-heading::before,
.faq-heading::after {
  content: "";

  position: absolute;

  right: 0px;

  background: #ff3b4d;

  transition: 0.25s all cubic-bezier(0.17, 0.67, 0.09, 0.97);
}

.faq-heading::before {
  width: 2px;

  height: 16px;
}

.faq-heading::after {
  width: 16px;

  height: 2px;

  right: -7px;
}

/* Khi active: chỉ còn thanh ngang (thành dấu trừ) */

.faq-heading.active::before {
  transform: rotate(90deg);

  opacity: 0;
}

.faq-content {
  display: none;

  margin-top: 24px;

  color: rgba(255, 255, 255, 0.7);

  font-size: 16px;

  padding: 0 12px;
}

.footer-wrapper {
  position: relative;

  overflow: hidden; /* để video không tràn ra ngoài */

  color: #fff;

  padding: 85px 0 0;
}

.footer-bg {
  position: absolute;

  inset: 0; /* top, right, bottom, left = 0 */

  z-index: 1; /* nằm dưới toàn bộ nội dung footer */

  overflow: hidden;
}

.banner_footer-bg {
  width: 100%;

  height: 100%;

  object-fit: cover; /* phủ kín vùng footer */

  object-position: center;

  position: absolute;

  top: 0;

  left: 0;

  filter: brightness(0.55); /* làm tối video để nội dung nổi bật hơn */

  z-index: 1;
}

.footer-wrapper .container,
.footer-bottom {
  position: relative;

  z-index: 2;
}

.footer-row {
  display: flex;

  gap: 150px;
}

.footer-menus {
  display: flex;

  justify-content: space-between;

  margin-bottom: 15px;
}

.footer-left {
  flex: 0 0 450px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;
}

.footer-right {
  flex: 1;
}

.footer-certificates-wrap {
  display: flex;

  gap: 24px;

  align-items: center;
}

.footer-certificates {
  display: flex;

  align-items: center;

  gap: 24px;
}

.footer-logo img {
  height: 60px;

  width: fit-content;
}

.footer-information {
}

.footer-title {
  color: #fff;

  position: relative;

  font-size: 16px;

  font-weight: 600;

  padding-left: 10px;

  margin-bottom: 24px;
}

.footer-title::before {
  position: absolute;

  width: 5px;

  height: 13px;

  border-radius: 12px;

  background-color: var(--red-color);

  content: "";

  left: -5px;

  top: 5px;
}

.footer-information-content p img {
  margin-bottom: 0 !important;
}

.footer-information-content p {
  display: flex;

  gap: 15px;

  align-items: center;

  margin-bottom: 14px;

  color: #fff;

  font-size: 16px;

  font-weight: 500;
}

.footer-information-content {
  padding: 12px 20px;

  padding-right: 0;
}

.footer-menu ul {
  padding-left: 0;

  list-style: none;

  margin-bottom: 0;
}

.footer-menu ul li {
  margin-bottom: 0;
}

.footer-menu ul li a {
  color: rgba(255, 255, 255, 0.8);

  font-size: 16px;

  font-weight: 500;

  line-height: 32px;
}

.footer-certificates-wrap .footer-title {
  flex: 0 0 100px;

  margin-bottom: 0;
}

.footer-cert-item img {
  height: 60px;
}

.footer-socials li {
  margin-bottom: 15px !important;
}

.footer-socials li a {
  display: flex;

  gap: 8px;

  align-items: center;
}

.footer-bottom p {
  color: #fff;

  font-size: 14px;

  font-style: normal;

  font-weight: 600;

  line-height: 150%;

  margin-bottom: 0;
}

.footer-bottom {
  margin-top: 30px;

  padding: 30px 0;

  margin-left: auto;

  margin-right: auto;

  position: relative;

  text-align: center;
}

.footer-bottom::after {
  position: absolute;

  content: "";

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,

    #fff 50%,

    rgba(255, 255, 255, 0) 100%
  );

  width: 500px;

  height: 1px;

  top: 0;

  left: 50%;

  transform: translateX(-50%);
}

.footer-subscribe form {
  margin-bottom: 0;

  display: flex;
}

.footer-subscribe form p {
  margin-bottom: 0;

  display: flex;

  background: rgba(255, 255, 255, 0.12);

  border-radius: 12px;

  position: relative;
}

.footer-subscribe form p label {
  height: 40px;
}

.footer-subscribe form p::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 12px;

  padding: 1px;

  background: linear-gradient(
    181deg,
    rgba(196, 196, 196, 0) 0%,

    rgba(255, 255, 255, 0.6) 50%,

    rgba(196, 196, 196, 0) 100%
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.9;
}

.footer-subscribe form label {
  margin-bottom: 0;
}

.footer-subscribe input {
  margin: 0 !important;

  border: 0 !important;

  color: #fff !important;

  border-radius: 12px !important;

  font-size: 16px !important;

  font-weight: 400 !important;

  outline: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  height: 40px !important;

  line-height: unset !important;

  display: block;
}

.footer-subscribe input::placeholder {
  color: #fff;

  font-size: 16px;

  font-weight: 400;
}

.footer-subscribe input[type="submit"] {
  display: none !important;
}

.footer-subscribe .wpcf7-response-output {
  display: none !important;
}

.footer-subscribe .wpcf7 .wpcf7-not-valid-tip {
  background-color: #ffffff;

  top: 25px;
}

.footer-subscribe .wpcf7 .wpcf7-not-valid-tip:after {
  border-bottom-color: #ffffff;
}

.slider-action {
  position: relative;

  display: flex;

  gap: 10px;
}

.swiper-button-next,
.swiper-button-prev {
  position: unset !important;

  width: 30px !important;

  height: 30px !important;

  background-color: var(--red-color) !important;

  margin-top: unset !important;

  opacity: 0.5;

  transition: all 0.6s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 1;
}

.news-heading {
  display: flex;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  display: none !important;
}

.news-heading {
  padding: 0 0 12px 50px;

  border-bottom: 1px solid #fff;
}

.block-title {
  margin-bottom: 0;

  color: #fff;

  font-size: 24px;

  font-weight: 600;

  text-transform: capitalize;

  position: relative;
}

.block-title::after {
  position: absolute;

  width: 5px;

  height: 15px;

  border-radius: 12px;

  background-color: var(--red-color);

  content: "";

  left: -17px;

  top: 8px;
}

.news-thumb {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9; /* ✅ tự tính chiều cao theo tỉ lệ */

  overflow: hidden;

  border-radius: 12px;

  display: block;
}

.news-thumb img {
  width: 100%;

  height: 100%;

  object-fit: cover; /* ảnh vẫn đầy khung, không méo */

  border-radius: 12px;

  display: block;

  transition: all 0.5s;
}

.news-item {
  padding: 10px;

  background-color: #fff;

  border-radius: 12px;

  transition: all 0.5s;
}

.news-item:hover {
  box-shadow: 0 4px 70px 0 rgba(0, 158, 255, 0.7),
    0 4px 24px 0 rgba(0, 158, 255, 0.5);
}

.news-item:hover img {
  transform: scale(1.1);
}

.news-title a {
  color: #000;

  font-size: 16px;

  font-weight: 600;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 1; /* number of lines to show */

  line-clamp: 1;

  -webkit-box-orient: vertical;
}

.news-excerpt {
  color: rgba(0, 0, 0, 0.8);

  font-size: 16px;

  line-height: 24px;

  display: -webkit-box;

  -webkit-line-clamp: 2; /* number of lines to show */

  line-clamp: 2;

  overflow: hidden;

  -webkit-box-orient: vertical;
}

.news-meta {
  display: flex;

  padding: 13px 16px;

  justify-content: space-between;

  border-radius: 12px;

  background: rgba(17, 49, 96, 0.06);
}

.news-meta-left {
  display: flex;

  gap: 10px;

  align-items: center;
}

.news-meta-infor span {
  display: block;
}

.news-meta-right {
  display: flex;

  align-items: center;

  gap: 15px;
}

.news-meta-left span:first-child {
  font-size: 16px;

  font-weight: 600;

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

.news-meta-left span:last-child {
  color: rgba(0, 0, 0, 0.5);

  font-size: 14px;

  font-weight: 600;

  line-height: 18px;
}

.news-meta-share-icon a svg {
  width: 18px;

  height: 18px;
}

/* Kích thước từng loại slide (dùng slidesPerView:'auto') */

.video-slider .slide-big {
  width: 50%;
}

.video-slider .slide-col {
  width: 30%;
}

.video-slider {
  position: relative;
}

.video-slider::after {
  position: absolute;

  width: 105px;

  height: 100%;

  background: linear-gradient(
    270deg,
    #f5f5f5 5.21%,

    rgba(245, 245, 245, 0.7) 64.58%,

    rgba(245, 245, 245, 0) 100%
  );

  top: 0;

  right: 0;

  content: "";

  display: block;

  z-index: 9;
}

/* Khoảng cách giữa các slide sẽ do Swiper set (spaceBetween) */

/* Card chung */

.video-item .video-thumb {
  position: relative;

  display: block;

  overflow: hidden;

  border-radius: 12px;
}

.video-item .video-thumb img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;
}

/* Slide lớn cao = 100% khối; ảnh 16:9 và có info bên dưới */

.video-item--big .video-thumb img {
  height: 386px;
}

.video-item--big .video-info {
  background: rgba(255, 255, 255, 0.8);

  color: #0a1e46;

  border-radius: 12px;

  padding: 16px;
}

.video-info-wrapper {
  position: absolute;

  z-index: 9;

  width: 100%;

  bottom: 0;

  left: 0;

  padding: 0 16px 16px;
}

.video-item--small h5 {
  color: #000;

  font-size: 16px;

  font-weight: 600;

  text-transform: capitalize;

  margin-bottom: 16px;
}

.video-item--big .video-info p {
  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 2; /* number of lines to show */

  line-clamp: 2;

  -webkit-box-orient: vertical;
}

.video-item--small .video-info p {
  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 5;

  line-clamp: 5;

  -webkit-box-orient: vertical;
}

.video-item--big .video-info h4 {
  color: #000;

  font-size: 20px;

  font-weight: 600;

  text-transform: capitalize;
}

.video-info p {
  margin-bottom: 0;

  color: rgba(0, 0, 0, 0.8);

  font-size: 16px;

  font-weight: 400;

  text-transform: capitalize;
}

.video-item--big {
  position: relative;
}

/* Cột nhỏ gồm 2 item xếp dọc */

.video-col {
  display: grid;

  grid-template-rows: 1fr 1fr;

  gap: 16px;

  height: 100%;
}

.video-item--small .video-thumb img {
  aspect-ratio: 16 / 9;
}

.video-item--small {
  display: flex;

  padding: 10px;

  background-color: #fff;

  border-radius: 12px;

  gap: 10px;
}

.video-item--small .video-thumb {
  flex: 0 0 190px;
}

/* Nút play */

.play-btn {
  position: absolute;

  top: 40%;

  left: 50%;

  transform: translate(-50%, -50%);

  background: transparent;

  border-radius: 50%;

  width: 70px;

  border: 1px solid #fff;

  height: 70px;

  display: flex;

  align-items: center;

  justify-content: center;
}

.play-btn i {
  color: var(--red-color);

  font-size: 30px;
}

/* Responsive */

@media (max-width: 1199px) {
  .video-slider .slide-big {
    width: 60%;
  }

  .video-slider .slide-col {
    width: 40%;
  } /* hiển thị 1 cột mỗi lần */
}

@media (max-width: 767px) {
  .video-slider .slide-big,
  .video-slider .slide-col {
    width: 85%;
  } /* 1 slide/khung + preview nhẹ */

  .video-col {
    grid-template-rows: auto auto;
  }
}

#popular_service-section .service-list {
  margin-top: 70px;
}

.service-list {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 50px;
}

.service-item {
  flex: 0 1 calc(33.333% - 50px);

  box-sizing: border-box;

  background-color: var(--primary-color);

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.24);

  padding: 24px;

  color: #fff;

  transition: all 0.5s;
}

.service-item:hover {
  box-shadow: 0 4px 70px 0 rgba(0, 158, 255, 0.7),
    0 4px 24px 0 rgba(0, 158, 255, 0.5);

  transform: translateY(-20px);
}

.service-heading-top {
  display: flex;

  justify-content: space-between;
}

.service-heading-top h3 {
  display: flex;

  gap: 10px;

  align-items: center;

  margin-bottom: 0;

  color: #fff;
}

.is-popular {
  flex: 0 0 fit-content;

  height: 25px;

  border-radius: 4px;

  background: var(--star, linear-gradient(90deg, #fcff00 0%, #ffc300 100%));

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);

  font-size: 14px;

  color: var(--primary-color);

  font-weight: 600;

  line-height: 25px;

  display: flex;

  justify-content: center;

  align-items: center;
}

.service-heading-bottom {
  display: flex;

  margin-top: 20px;

  align-items: center;

  justify-content: space-between;
}

.service-price {
  display: flex;

  gap: 12px;

  align-items: center;
}

.red-price {
  color: var(--red-color);

  font-size: 24px;

  font-weight: 700;

  line-height: 36px;
}

.line-through-price {
  font-size: 15px;

  color: #fff;

  text-decoration: line-through;

  line-height: 24px;

  opacity: 0.8;
}

.service-sale-percent {
  padding: 5px 8px 5px 8px;

  border-radius: 4px;

  background-color: var(--red-color);

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);

  color: #fff;

  font-size: 14px;

  font-weight: 600;
}

.service-heading {
  margin-bottom: 20px;

  padding-bottom: 20px;

  position: relative;
}

.service-heading::after {
  background: linear-gradient(
    90deg,
    rgba(0, 151, 245, 0) 0%,

    #0097f5 50%,

    rgba(0, 151, 245, 0) 100%
  );

  width: 100%;

  height: 2px;

  border-radius: 12px;

  position: absolute;

  bottom: 0;

  left: 0;

  content: "";
}

.service-card-information {
  display: flex;

  flex-direction: column;

  gap: 16px;
}

.service-card-item {
  display: flex;

  align-items: center;

  gap: 12px;
}

.service-card-comparison {
  margin-top: 16px;

  border-radius: 8px;

  border: 1px solid rgba(196, 196, 196, 0);

  background: rgba(255, 255, 255, 0.12);

  width: fit-content;

  padding: 6px 24px;

  display: block;

  color: #fff !important;

  font-weight: 600;

  position: relative;
}

.service-card-comparison::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 8px;

  padding: 1px;

  background: linear-gradient(
    181deg,
    rgba(196, 196, 196, 0) 0%,

    rgba(255, 255, 255, 0.6) 50%,

    rgba(196, 196, 196, 0) 100%
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.9;
}

.service-register-btn {
  display: block;

  margin-top: 16px;

  width: fit-content;

  margin-left: auto;

  margin-right: auto;

  padding: 12px 70px;

  color: #fff !important;

  font-size: 14px;

  background-color: #009eff;

  font-weight: 600;

  border-radius: 8px;

  position: relative;

  transition: all 0.3s;
}

.service-register-btn:hover {
  background-color: #ce2030;
}

.service-register-btn::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 8px;

  padding: 1px;

  background: linear-gradient(
    181deg,
    rgba(196, 196, 196, 0) 0%,

    rgba(255, 255, 255, 1) 50%,

    rgba(196, 196, 196, 0) 100%
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.9;
}

.category_service-flex {
  display: flex;

  flex-wrap: wrap;

  gap: 50px;

  justify-content: center;
}

.category_service-item {
  flex: 0 1 calc(29% - 50px);

  background-color: var(--primary-color);

  color: #fff;

  border-radius: 12px;

  position: relative;
}

.category_service-item::after {
  content: "";

  position: absolute;

  inset: 18px;

  border-radius: 8px;

  pointer-events: none;

  z-index: 3;

  border: 1px solid #999b9c8f;

  background:

    /* trái */ linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,

        rgba(255, 255, 255, 0.8) 40%,

        rgba(255, 255, 255, 0) 100%
      )
      left center / 1px 80% no-repeat,
    /* phải */
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,

        rgba(255, 255, 255, 0.9) 40%,

        rgba(255, 255, 255, 0) 100%
      )
      right center / 1px 80% no-repeat;

  background-repeat: no-repeat;

  opacity: 1;
}

.category_service-item:nth-child(3),
.category_service-item:nth-child(4) {
  flex: 0 1 calc(45% - 50px);
}

.category_service-thumb img {
  height: 360px;

  width: 100%;

  object-fit: cover;

  border-top-left-radius: 12px;

  border-top-right-radius: 12px;
}

.category_link {
  display: block;

  margin-top: 16px;

  width: fit-content;

  margin-left: auto;

  margin-right: auto;

  padding: 12px 70px;

  color: #fff !important;

  font-size: 14px;

  background-color: #009eff;

  font-weight: 600;

  border-radius: 8px;

  position: relative;

  transition: all 0.3s;
}

.category_link:hover {
  background-color: #ce2030;
}

.category_link::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 8px;

  padding: 1px;

  background: linear-gradient(
    181deg,
    rgba(196, 196, 196, 0) 0%,

    rgba(255, 255, 255, 1) 50%,

    rgba(196, 196, 196, 0) 100%
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.9;
}

.category_service-infor {
  padding: 0 36px 36px;
}

.category_price {
  margin: 10px 0;
}

.category_service-infor h3 {
  color: #fff;

  font-size: 18px;

  font-weight: 700;

  margin-bottom: 10px;
}

.category_description {
  color: rgba(255, 255, 255, 0.7);

  text-align: justify;

  font-size: 16px;

  font-weight: 500;

  line-height: 24px;

  height: 72px;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  line-clamp: 3;

  -webkit-box-orient: vertical;
}

.category_service-item:nth-child(3) img,
.category_service-item:nth-child(4) img {
  object-position: top;

  height: 100%;

  object-fit: contain;
}

.category_service-item:nth-child(3) .category_service-infor,
.category_service-item:nth-child(4) .category_service-infor {
  padding: 0 66px;

  position: absolute;

  bottom: 36px;
}

.logo-group {
  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  background-color: #fff;

  width: fit-content;

  padding: 0 16px 4px;

  border-bottom-left-radius: 16px;

  border-bottom-right-radius: 16px;
}

.logo-group img {
  width: 70px;

  height: auto;

  transform: none !important;
}

#services-pricing-section .trial_form-wrapper {
  margin-top: 0;
}

.services-pricing-wrapper {
  margin-top: 70px;
}

.tab-pricing-service ul {
  display: flex;

  gap: 6px;

  background-color: var(--primary-color);

  position: relative;

  padding: 24px;

  padding-top: 13px;

  width: fit-content;

  justify-content: center;

  align-items: center;

  list-style: none;

  border-radius: 12px;
}

.tab-pricing-item {
  border-radius: 6px;

  border: 1px solid var(--W-stroke, rgba(196, 196, 196, 0));

  background: rgba(255, 255, 255, 0.12);

  width: 150px;

  height: 67px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  cursor: pointer;

  transition: all 0.5s;

  margin-top: 11px;

  margin-bottom: 0 !important;
}

.tab-pricing-item::after,
.tab-pricing-service ul::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 6px;

  padding: 1px;

  background: linear-gradient(
    181deg,
    rgba(196, 196, 196, 0) 0%,

    rgba(255, 255, 255, 1) 50%,

    rgba(196, 196, 196, 0) 100%
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.9;
}

.tab-pricing-item a {
  font-size: 14px;

  color: #fff !important;

  font-weight: 600;

  text-decoration: none;

  transition: color 0.3s ease;

  display: block;

  position: relative;
}

.tab-pricing-service ul::after {
  border-radius: 12px;
}

.tab-pricing-item:hover,
.tab-pricing-item.active {
  background-color: #fff;

  margin-top: 0;

  height: 78px;
}

.tab-pricing-item:hover a,
.tab-pricing-item.active a {
  color: var(--primary-color) !important;
}

.tab-pricing-item a::after {
  content: "";

  position: absolute;

  left: -20%;

  bottom: -6px; /* Khoảng cách dưới chữ */

  width: 0;

  height: 3px;

  background-color: #ff2c55; /* màu đỏ trong hình */

  border-radius: 3px;

  transition: width 0.4s ease;
}

.tab-pricing-item:hover a::after,
.tab-pricing-item.active a::after {
  width: 145%;
}

.tab-comparision-service ul {
  list-style: none;
}

.tab-comparision-item {
  width: 150px;

  height: 45px;

  display: flex;

  align-items: center;

  cursor: pointer;

  justify-content: center;

  border-radius: 5px;

  border: 1px solid var(--W-stroke, rgba(196, 196, 196, 0));

  background: rgba(255, 255, 255, 0.12);

  position: relative;

  transition: all 0.5s;
}

.tab-comparision-item::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 5px;

  padding: 1px;

  background: linear-gradient(
    181deg,
    rgba(196, 196, 196, 0) 0%,

    rgba(255, 255, 255, 1) 50%,

    rgba(196, 196, 196, 0) 100%
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.9;
}

.tab-comparision-item a {
  color: #fff !important;

  font-size: 14px;

  font-weight: 600;
}

.tab-comparision-item:hover,
.tab-comparision-item.active {
  background: #0097f5;
}

.comparison-table {
  border-collapse: separate !important;

  border-spacing: 2px;

  width: 100%;

  table-layout: fixed;
}

.comparison-table th,
.comparison-table td {
  background: rgba(255, 255, 255, 0.12);

  padding: 20px;

  text-align: center;

  vertical-align: middle;

  border-bottom: 0;
}

.comparison-table th {
  font-size: 18px;

  color: #fff;

  font-weight: 700;
}

.comparison-table td {
  color: rgba(255, 255, 255, 0.7);

  font-size: 16px;

  font-weight: 500;
}

.comparison-table td:first-child {
  color: #fff;

  font-size: 16px;

  font-weight: 600;
}

.comparison-table-wrapper {
  overflow: visible;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
  width: 20%; /* điều chỉnh nếu muốn nhỏ hơn hoặc lớn hơn */
}

.comparison-table th:not(:first-child),
.comparison-table td:not(:first-child) {
  width: calc(80% / 3); /* 80% chia cho 3 cột = mỗi cột ~26.66% */
}

.is-popular-col {
  position: relative;

  background-color: var(--red-color) !important;
}

.badge-popular {
  position: absolute;

  display: block;

  right: 10px;

  top: 50%;

  transform: translateY(-50%);

  padding: 5px 8px 5px 8px;

  border-radius: 4px;

  background: linear-gradient(90deg, #fcff00 0%, #ffc300 100%);

  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.4);

  font-size: 12px;

  color: var(--primary-color);

  font-weight: 600;

  text-transform: none;
}

.comparison-nav {
  display: flex;

  justify-content: flex-end;
}

.comparison-nav button {
  line-height: unset !important;

  box-shadow: none !important;

  height: unset !important;

  min-height: unset !important;

  background-color: var(--red-color) !important;

  padding: 0 !important;

  width: 30px !important;

  height: 30px !important;

  transition: all 0.6s;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 0 !important;
}

.service_highlight-row {
  display: flex;

  align-items: center;

  justify-content: space-between;

  color: #fff;

  position: relative;
}

.service-section-title {
  color: #fff;

  font-size: 48px;

  font-weight: 700;

  margin-bottom: 0;
}

.service-section-subtitle {
  color: #fff;

  font-size: 48px;

  font-weight: 700;

  margin-bottom: 0;

  margin-top: 12px;
}

.highlight-feature-item {
  margin-bottom: 12px;

  border-radius: 4px;

  background: rgba(255, 255, 255, 0.24);

  backdrop-filter: blur(8.587301254272461px);

  display: flex;

  padding: 12px 24px;

  align-items: center;

  gap: 12px;

  width: fit-content;
}

.server_taxonomy-class .highlight-feature-item,
.email_taxonomy-class .highlight-feature-item {
  align-items: flex-start;

  width: 100%;
}

.service_highlight-top-description {
  margin-bottom: 24px;
}

.server_taxonomy-class .service_highlight-right img,
.email_taxonomy-class .service_highlight-right img {
  height: 500px;
}

.server_taxonomy-class .service-section-title {
  color: var(--red-color) !important;
}

.highlight-feature-infor h3 {
  color: #fff;

  font-size: 20px;

  font-weight: 600;
}

.highlight-feature-item p {
  margin-bottom: 0;
}

.service_highlight-left {
  flex: 0 0 1050px;

  background-image: url("../images/arrow-overlay.png");

  background-repeat: no-repeat;

  background-position: left center;

  background-size: 651px 699px;

  position: relative;

  z-index: 2;

  padding: 89px 0;

  padding-left: 50px;
}

.service_highlight-right {
  position: absolute;

  right: -70px;

  z-index: 1;
}

.service_highlight-right img {
  height: 600px;
}

.cta-btn {
  padding: 12px 24px;

  background-color: var(--red-color);

  color: #fff;

  font-size: 14px;

  font-weight: 600;

  display: block;

  width: fit-content;

  border-radius: 8px;
}

.website_speed-left {
  flex: 0 0 800px;
}

.website_speed-left-img img {
  object-fit: contain;

  transform: scale(1.1);

  z-index: 1;
}

.website_speed-right {
  position: relative;

  z-index: 2;
}

.website_speed-right a {
  color: #fff !important;

  font-size: 14px;

  font-weight: 600;

  padding: 12px 24px;

  display: block;

  width: fit-content;

  border-radius: 8px;

  background: var(--red-color);

  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

.special_offer-wrapper {
  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  padding: 75px 90px;

  padding-right: 0;

  position: relative;
}

.special_offer-icon-list {
  display: flex;

  align-items: center;

  gap: 48px;

  justify-content: flex-start;
}

.special_offer-icon-item {
  text-align: center;

  color: #fff;

  padding: 20px;

  flex: 0 0 250px;
}

.special_offer-icon-item p {
  color: #fff;

  font-size: 18px;

  font-weight: 700;

  margin-bottom: 0;

  margin-top: 16px;
}

.special_offer-icon-item:nth-child(2) {
  position: relative;
}

.special_offer-icon-item:nth-child(2)::before {
  position: absolute;

  content: "";

  background: linear-gradient(
    1deg,
    rgba(255, 255, 255, 0) 0%,

    #fff 50%,

    rgba(255, 255, 255, 0) 100%
  );

  width: 1px;

  height: 160px;

  top: 50%;

  left: -24px;

  transform: translateY(-50%);
}

.special_offer-icon-item:nth-child(2)::after {
  position: absolute;

  content: "";

  background: linear-gradient(
    1deg,
    rgba(255, 255, 255, 0) 0%,

    #fff 50%,

    rgba(255, 255, 255, 0) 100%
  );

  width: 1px;

  height: 160px;

  top: 50%;

  right: -24px;

  transform: translateY(-50%);
}

.content_offer {
  position: absolute;

  z-index: 1;

  right: 0;

  padding-right: 60px;

  top: 50%;

  transform: translateY(-50%);
}

.content_offer h3 {
  color: #fff;

  text-align: center;

  font-size: 32px;

  font-weight: 700;
}

.content_offer p {
  background: var(--P1, linear-gradient(90deg, #34d399 0%, #5eead4 69.04%));

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  font-size: 16px;

  font-weight: 500;

  margin-bottom: 16px;
}

.content_offer a {
  color: #fff !important;

  font-size: 14px;

  font-weight: 600;

  padding: 12px 24px;

  display: block;

  width: fit-content;

  border-radius: 8px;

  background: var(--red-color);

  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);

  margin: 0 auto;
}

@media (min-width: 1400px) {
  #alternate_content_section .container {
    max-width: 1420px;
  }
}

.green-title {
  color: #34d399;

  font-size: 32px;

  font-weight: 700;
}

.alternate_content_description {
  color: #fff;

  font-size: 16px;

  font-weight: 600;

  line-height: 24px;
}

.alternate-item {
  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;
}

.alternate-item.box-alternate-content-left {
  flex-direction: row-reverse;
}

.box-alternate-img img {
  width: 100%;

  height: auto;

  max-height: 360px;

  display: block;

  border-radius: 12px;

  object-fit: contain;
}

.box-alternate-img {
  flex: 0 0 50%;

  max-width: 600px;
}

.box-alternate-text {
  flex: 1;

  max-width: 600px;
}

.box-alternate-text h3 {
  color: #34d399;

  font-size: 32px;

  font-weight: 700;

  margin-bottom: 0;
}

.box-alternate-text p {
  color: #fff;

  font-size: 16px;

  font-weight: 600;

  margin-bottom: 0;

  margin-top: 24px;
}

.box-alternate-text ul {
  list-style: none;

  margin-bottom: 0;

  margin-top: 24px;
}

.box-alternate-text ul li span {
  color: #fff;

  font-size: 16px;

  font-weight: 500;
}

.box-alternate-text ul li {
  display: flex;

  gap: 12px;
}

.box-alternate-text ul li svg {
  flex: 0 0 18px;
}

.alternate-item:last-child {
  padding-bottom: 0 !important;
}

.outstanding_features_list {
  margin-top: 50px;

  list-style: none;

  display: grid;

  gap: 50px;

  grid-template-columns: repeat(3, 1fr);

  background-image: url("../images/ellipse_bg.png");

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;
}

.outstanding_features-item {
  background: linear-gradient(180deg, #002236 0%, #07202f 100%);

  padding: 24px;

  margin-bottom: 0;

  border-radius: 12px;

  text-align: center;

  color: #fff;

  min-height: 277px;

  position: relative;
}

.outstanding_features-item::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: 12px;

  padding: 1px;

  background: linear-gradient(
    180deg,
    rgba(196, 196, 196, 0) 0%,

    rgba(255, 255, 255, 1) 12%,

    rgba(196, 196, 196, 0) 100%
  );

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

  opacity: 0.9;
}

.outstanding_features-icon img {
  width: 48px;

  height: 48px;

  object-fit: contain;
}

.outstanding_features-icon {
  padding: 10px;

  border-radius: 12px;

  margin: 0 auto;

  width: fit-content;
}

.outstanding_features-item h3 {
  margin-bottom: 0;

  margin-top: 32px;

  color: #fff;

  font-size: 16px;

  font-weight: 600;
}

.feature-diviver {
  width: 250px;

  height: 1px;

  margin: 12px auto;

  border-radius: 7px;
}

.outstanding_features-item p {
  margin-bottom: 0;

  color: rgba(255, 255, 255, 0.7);

  font-size: 16px;

  font-weight: 500;
}

.start_with_htv-inner h3 {
  color: #fff;

  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

  font-size: 64px;

  font-weight: 700;

  line-height: 92px;

  text-transform: uppercase;

  margin-bottom: 24px;
}

.start_with_htv-inner p {
  color: #fff;

  margin-bottom: 24px;

  font-size: 20px;

  font-weight: 600;
}

.start_with_htv-inner a {
  color: #fff !important;

  font-size: 14px;

  font-weight: 600;

  padding: 12px 24px;

  display: block;

  width: fit-content;

  border-radius: 8px;

  background: var(--red-color);

  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

#start_with_htv .container {
  background-image: url("../images/start_htv.png");

  background-repeat: no-repeat;

  background-position: center;

  padding: 50px 100px;

  background-size: contain;
}

.gallery_img-grid {
  display: grid;

  width: 100%;

  gap: 25px;

  grid-template-columns: repeat(4, 1fr);

  grid-template-rows: auto;

  margin-top: 50px;
}

.gallery_img-item {
  display: block;

  overflow: hidden;

  border-radius: 12px;
}

.gallery_img-item:nth-child(1) {
  grid-column: 1 / 3;

  grid-row: 1/2;
}

.gallery_img-item:nth-child(2) {
  grid-column: 1 / 2;

  grid-row: 2 / 3;
}

.gallery_img-item:nth-child(3) {
  grid-column: 2 / 3;

  grid-row: 2 / 3;
}

.gallery_img-item:nth-child(4) {
  grid-column: 3 / 4;

  grid-row: 1 / 3;
}

.gallery_img-item:nth-child(5) {
  grid-column: 4 / 5;

  grid-row: 1 / 2;
}

.gallery_img-item:nth-child(6) {
  grid-column: 4 / 5;

  grid-row: 2 / 3;
}

.gallery_img-item img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;
}

.slide_feature-swiper {
  width: 700px;

  margin-top: 30px;
}

.slide_feature-img {
  opacity: 0;

  transform: translateY(100%);

  transition: all 3s ease;
}

.slide_feature-img img {
  height: 425px;

  object-fit: cover;

  width: 100%;
}

.slide_feature-item.active .slide_feature-img {
  opacity: 1;

  transform: translateY(0);
}

.slide_feature-title {
  color: #fff;

  text-align: center;

  font-size: 24px;

  font-weight: 500;
}

#section_slide_feature .container {
  position: relative;
}

.swiper-pagination {
  bottom: -30px !important;
}

.swiper-pagination-bullet {
  width: 12px !important;

  height: 12px !important;

  background: rgba(255, 255, 255, 0.24) !important;

  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  width: 25px !important;

  background: rgb(255, 255, 255) !important;

  border-radius: 50px !important;
}

.cs-content-table table {
  border-collapse: separate !important;

  border-spacing: 2px;

  width: 100%;

  table-layout: fixed;
}

.cs-content-table table td {
  border-bottom: 0;
}

.term-thue-server-vat-ly .cs-content-table table tr:nth-child(1),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(2),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(3),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(4),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(9),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(10),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(15),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(16),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(17),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(19),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(21),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(23),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(1),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(2),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(3),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(4),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(9),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(10),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(15),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(16),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(17),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(19),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(21),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(23) {
  background: rgba(255, 255, 255, 0.12);
}

.term-thue-cho-dat-may-chu .cs-content-table table tr:nth-child(odd),
.term-server-hosting .cs-content-table table tr:nth-child(odd),
.term-white-label-cloud .cs-content-table table tr:nth-child(odd),
.term-business-email .cs-content-table table tr:nth-child(odd),
.term-workspace-g-suite-gmail .cs-content-table table tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.12);
}

.term-thue-cho-dat-may-chu .cs-content-table table tr:nth-child(even),
.term-server-hosting .cs-content-table table tr:nth-child(even),
.term-white-label-cloud .cs-content-table table tr:nth-child(even),
.term-business-email .cs-content-table table tr:nth-child(even),
.term-workspace-g-suite-gmail .cs-content-table table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.06);
}

.term-thue-server-vat-ly .cs-content-table table tr:nth-child(5),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(6),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(7),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(8),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(11),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(12),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(13),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(14),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(18),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(20),
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(22),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(5),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(6),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(7),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(8),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(11),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(12),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(13),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(14),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(18),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(20),
.term-rent-a-physical-server .cs-content-table table tr:nth-child(22) {
  background: rgba(255, 255, 255, 0.06);
}

.term-thue-server-vat-ly .cs-content-table table tr:last-child,
.term-rent-a-physical-server .cs-content-table table tr:last-child,
.term-thue-cho-dat-may-chu .cs-content-table table tr:last-child,
.term-server-hosting .cs-content-table table tr:last-child,
.term-white-label-cloud .cs-content-table table tr:last-child,
.term-business-email .cs-content-table table tr:last-child,
.term-workspace-g-suite-gmail .cs-content-table table tr:last-child {
  background: var(--red-color);
}

.term-thue-server-vat-ly .cs-content-table table tr td,
.term-rent-a-physical-server .cs-content-table table tr td,
.term-thue-cho-dat-may-chu .cs-content-table table tr td,
.term-server-hosting .cs-content-table table tr td,
.term-white-label-cloud .cs-content-table table tr td,
.term-business-email .cs-content-table table tr td,
.term-workspace-g-suite-gmail .cs-content-table table tr td {
  padding: 16px 50px;

  padding-right: 0;

  position: relative;
}

.term-thue-server-vat-ly .cs-content-table table tr td::after,
.term-rent-a-physical-server .cs-content-table table tr td::after,
.term-thue-cho-dat-may-chu .cs-content-table table tr td::after,
.term-server-hosting .cs-content-table table tr td::after,
.term-white-label-cloud .cs-content-table table tr td::after,
.term-business-email .cs-content-table table tr td::after,
.term-workspace-g-suite-gmail .cs-content-table table tr td::after {
  content: "";

  width: 2px;

  height: 100%;

  position: absolute;

  right: -2px;

  top: 0;

  background: rgba(255, 255, 255, 0.12);
}

.term-thue-server-vat-ly .cs-content-table table tr td::before,
.term-rent-a-physical-server .cs-content-table table tr td::before,
.term-thue-cho-dat-may-chu .cs-content-table table tr td::before,
.term-server-hosting .cs-content-table table tr td::before,
.term-white-label-cloud .cs-content-table table tr td::before,
.term-business-email .cs-content-table table tr td::before,
.term-workspace-g-suite-gmail .cs-content-table table tr td::before {
  content: "";

  width: 1px;

  height: 24px;

  position: absolute;

  right: -2px;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(255, 255, 255, 0.5);
}

.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(1)
  td:nth-child(1),
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(5)
  td:nth-child(1),
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(9)
  td:nth-child(1),
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(11)
  td:nth-child(1),
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(15)
  td:nth-child(1),
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(1)
  td:nth-child(1),
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(5)
  td:nth-child(1),
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(9)
  td:nth-child(1),
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(11)
  td:nth-child(1),
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(15)
  td:nth-child(1) {
  padding: 24px;
}

.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(1)
  td:nth-child(1)::after,
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(5)
  td:nth-child(1)::after,
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(9)
  td:nth-child(1)::after,
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(11)
  td:nth-child(1)::after,
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(15)
  td:nth-child(1)::after,
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(1)
  td:nth-child(1)::before,
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(5)
  td:nth-child(1)::before,
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(9)
  td:nth-child(1)::before,
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(11)
  td:nth-child(1)::before,
.term-thue-server-vat-ly
  .cs-content-table
  table
  tr:nth-child(15)
  td:nth-child(1)::before,
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(1)
  td:nth-child(1)::after,
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(5)
  td:nth-child(1)::after,
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(9)
  td:nth-child(1)::after,
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(11)
  td:nth-child(1)::after,
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(15)
  td:nth-child(1)::after,
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(1)
  td:nth-child(1)::before,
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(5)
  td:nth-child(1)::before,
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(9)
  td:nth-child(1)::before,
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(11)
  td:nth-child(1)::before,
.term-rent-a-physical-server
  .cs-content-table
  table
  tr:nth-child(15)
  td:nth-child(1)::before {
  display: none;
}

.term-thue-server-vat-ly .cs-content-table table tr:nth-child(5) td::after,
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(6) td::after,
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(7) td::after,
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(8) td::after,
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(11) td::after,
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(12) td::after,
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(13) td::after,
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(14) td::after,
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(18) td::after,
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(20) td::after,
.term-thue-server-vat-ly .cs-content-table table tr:nth-child(22) td::after,
.term-rent-a-physical-server .cs-content-table table tr:nth-child(5) td::after,
.term-rent-a-physical-server .cs-content-table table tr:nth-child(6) td::after,
.term-rent-a-physical-server .cs-content-table table tr:nth-child(7) td::after,
.term-rent-a-physical-server .cs-content-table table tr:nth-child(8) td::after,
.term-rent-a-physical-server .cs-content-table table tr:nth-child(11) td::after,
.term-rent-a-physical-server .cs-content-table table tr:nth-child(12) td::after,
.term-rent-a-physical-server .cs-content-table table tr:nth-child(13) td::after,
.term-rent-a-physical-server .cs-content-table table tr:nth-child(14) td::after,
.term-rent-a-physical-server .cs-content-table table tr:nth-child(18) td::after,
.term-rent-a-physical-server .cs-content-table table tr:nth-child(20) td::after,
.term-rent-a-physical-server .cs-content-table table tr:nth-child(22) td::after,
.term-thue-cho-dat-may-chu .cs-content-table table tr:nth-child(even) td::after,
.term-server-hosting .cs-content-table table tr:nth-child(even) td::after,
.term-white-label-cloud .cs-content-table table tr:nth-child(even) td::after,
.term-business-email .cs-content-table table tr:nth-child(even) td::after,
.term-workspace-g-suite-gmail
  .cs-content-table
  table
  tr:nth-child(even)
  td::after {
  background: rgba(255, 255, 255, 0.06) !important;
}

.term-thue-server-vat-ly .cs-content-table table td,
.term-rent-a-physical-server .cs-content-table table td,
.term-thue-cho-dat-may-chu .cs-content-table table td,
.term-server-hosting .cs-content-table table td,
.term-white-label-cloud .cs-content-table table td,
.term-business-email .cs-content-table table td,
.term-workspace-g-suite-gmail .cs-content-table table td {
  color: #fff;

  font-size: 16px;

  font-weight: 500;

  line-height: 20px;
}

.term-thue-server-vat-ly .cs-content-table table tr td:last-child,
.term-rent-a-physical-server .cs-content-table table tr td:last-child,
.term-thue-cho-dat-may-chu .cs-content-table table tr td:last-child,
.term-server-hosting .cs-content-table table tr td:last-child,
.term-white-label-cloud .cs-content-table table tr td:last-child,
.term-business-email .cs-content-table table tr td:last-child,
.term-workspace-g-suite-gmail .cs-content-table table tr td:last-child {
  padding-left: 0;

  padding-right: 50px;

  color: rgba(255, 255, 255, 0.7);

  font-weight: 400;
}

.term-thue-server-vat-ly .cs-content-table table tr td:last-child::before,
.term-rent-a-physical-server .cs-content-table table tr td:last-child::before,
.term-thue-cho-dat-may-chu .cs-content-table table tr td:last-child::before,
.term-server-hosting .cs-content-table table tr td:last-child::before,
.term-white-label-cloud .cs-content-table table tr td:last-child::before,
.term-business-email .cs-content-table table tr td:last-child::before,
.term-workspace-g-suite-gmail .cs-content-table table tr td:last-child::before {
  display: none;
}

.term-thue-server-vat-ly .cs-content-table table tr td em,
.term-rent-a-physical-server .cs-content-table table tr td em {
  padding-left: 50px;

  color: #009eff;
}

.term-thue-server-vat-ly .cs-content-table table tr:last-child td,
.term-rent-a-physical-server .cs-content-table table tr:last-child td,
.term-thue-cho-dat-may-chu .cs-content-table table tr:last-child td,
.term-server-hosting .cs-content-table table tr:last-child td,
.term-white-label-cloud .cs-content-table table tr:last-child td,
.term-business-email .cs-content-table table tr:last-child td,
.term-workspace-g-suite-gmail .cs-content-table table tr:last-child td {
  padding-left: 50px;

  color: #fff;
}

.term-thue-cho-dat-may-chu .server_taxonomy-class .service-section-title,
.term-server-hosting .server_taxonomy-class .service-section-title {
  color: #fff;
}

.searching-result {
  background: #fff;

  padding: 20px 25px;

  border-radius: 10px;

  border: 1px solid #e3e3e3;
}

.searching-result h2 {
  font-size: 20px;

  font-weight: 600;
}

.whois-loading {
  display: flex;

  align-items: center;

  padding: 10px 0;

  justify-content: center;
}

.whois-loading .spinner-border {
  color: var(--primary-color) !important;
}

.whois-result-box .domain-item {
  padding: 10px 14px;

  background: var(--background-color);

  border-radius: 6px;

  margin-bottom: 8px;

  font-size: 15px;
}

.whois-result-box .domain-item.success {
  border-left: 4px solid #28a745;
}

.whois-result-box .domain-item.fail {
  border-left: 4px solid #dc3545;
}

.domain-item {
  display: flex;

  justify-content: space-between;

  padding: 12px 15px;

  background: #ffffff;

  margin-bottom: 8px;

  align-items: center;

  border-radius: 8px;

  border: 1px solid #e7e7e7;
}

.domain-item .badge {
  height: unset;

  line-height: 1.8em;

  font-size: 14px;
}

/* .domain-item.available {

  border-left: 4px solid #28a745;

}



.domain-item.taken {

  border-left: 4px solid #dc3545;

}



.domain-item.error {

  border-left: 4px solid #6c757d;

} */

.domain-name {
  font-weight: 600;

  font-size: 16px;
}

.result-title {
  color: var(--primary-color);
}

.searching-result {
  display: none;
}

.testimonials-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}

.htv-tocwraper {
  background: linear-gradient(180deg, #002236 0%, #07202f 100%);
  padding: 15px 25px;
  border-radius: 10px;
  position: relative;
}
.htv-tocwraper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(196, 196, 196, 0) 0%,
    rgba(255, 255, 255, 1) 12%,
    rgba(196, 196, 196, 0) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: add, add;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.9;
}
.htv-tocwraper h2 {
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 0;
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  align-items: center;
  cursor: pointer;
}

.htv-tocwraper span {
  border: solid rgb(255, 255, 255);
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transition: all 0.3s;
}
.htv-toc ul {
  list-style: none;
  color: #fff;
  margin-bottom: 0;
  margin-top: 24px !important;
}
.htv-toc ul li a {
  font-size: 18px;
  color: #fff !important;
}
.htv-toc ul ul {
  list-style: disc;
  margin-bottom: 16px !important;
  margin-top: 16px !important;
  margin-left: 40px !important;
}
.htv-toc ul .h3-items a {
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
}
.htv-toc ul li .htv-toc-item .arrow-menu-toc {
  border-width: 0 1px 1px 0;
  padding: 4px;
  cursor: pointer;
}

.arrow-menu-toc.active,
.htv-tocwraper span.active {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.htv-toc ul li .htv-toc-item {
  display: flex;
  gap: 16px;
  align-items: center;
}
.htv-taxonomy-content {
  margin-top: 24px;
}
.htv-taxonomy-content h2,
.htv-taxonomy-content h3 {
  color: #fff;
}
.htv-taxonomy-content p {
  color: #ffffffaf;
}
.htv-toc,
.h3-items {
  display: none;
}
.show-more-toc {
  font-size: 22px;
  color: #ffff;
  width: fit-content;
  margin: 0 auto;
  cursor: pointer;
  position: relative;
}
.show-more-toc::after {
  position: absolute;
  content: "";
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
}
.arrow-show-more-toc {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(45deg);
  margin-left: 10px;
  margin-bottom: 4px;
  -webkit-transform: rotate(45deg);
  margin-top: 24px;
}
.arrow-show-more-toc.active {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.htv-toc-content-wrapper {
  height: 300px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.htv-toc-content-wrapper::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 100%;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(0deg, #384579 15%, rgba(255, 255, 255, 0) 100%);
}
.htv-toc-content-wrapper.active::before {
  display: none;
}
.htv-toc-content-wrapper.active {
  height: auto;
}