/* locale */
html[lang="vi"] .article__item-description {
  font-family: "Montserrat";
}

html[lang="en"] .banner__content .enter-website input[type="submit"] {
  font-family: "Poppins";
  font-weight: 600;
  line-height: 16px;
}

html[lang="vi"] .banner__content .enter-website input[type="submit"],
html[lang="vi"] .general-title .right {
  font-family: "Montserrat";
  font-weight: 600;
  line-height: 12px;
}

/* banner */
.banner {
  justify-content: space-between;
  background-size: cover;
  position: relative;
}

.banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 570px;
  opacity: 0.6;
  background: #020202;
  mix-blend-mode: soft-light;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.banner__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(80%);
}

.banner__img img.desktop {
  height: 570px;
}

.banner__content {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  max-width: 800px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.banner__content > div:has(> div > div > form) {
  width: 73%;
}

.banner__content--title {
  color: var(--white);
  text-align: center;
  text-shadow: 4px 6px 5px rgba(0, 0, 0, 0.5);
  font-family: "Renogare";
  font-size: 60px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2.4px;
}

.banner__content .line {
  margin: 21px 0;
  width: 100px;
  height: 3.37px;
  margin-bottom: 23.63px;
}

.banner__content--text {
  color: var(--white);
  text-align: center;
  text-shadow: 9px 4px 9px rgba(0, 0, 0, 0.9);
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.8px;
  margin-bottom: 47px;
}

.banner__content .enter-website {
  border: 1px solid #333;
  border-radius: 5px;
}

.banner__content .enter-website span input,
.banner__content .enter-website > input {
  height: 50px;
  border-radius: unset;
}

.banner__content .enter-website input::placeholder {
  color: #858c95;
  font-weight: 500;
}

.banner__content .enter-website input[type="submit"],
.banner__content .enter-website button {
  /* width: 221px; */
  width: fit-content;
  flex-grow: 1;
  font-weight: 600;
  flex-shrink: 0;
  border-radius: unset;
  height: 50px;
}

@keyframes color-transition {
  0% {
    background: #3470e1;
  }

  33% {
    background: #28509b;
  }

  66% {
    background: #de4b99;
  }

  100% {
    background: #9642fe;
  }
}

/* study */

.study {
  margin-top: 70px;
  /* margin-bottom: 4px; */
}

.study .client__content {
  margin: 45px 45px 65px;
}

.study .client__content.content__box {
  min-height: 245px;
}

.study .container {
  overflow: hidden;
}

.study .container .client {
  padding: 0;
}

.study .general-title.mobile {
  display: none;
}

/* .client__content {
  min-height: 246px !important;
} */

.client .slide .slick-slide {
  margin: 0px 12.5px;
}

.client .slide .slick-list {
  margin: 0px -12.5px;
}

.client .slide .slick-dots {
  bottom: -25px;
}

.study__tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 73px;
}

.study__tabs-item {
  background-color: var(--white);
  padding: 10px 20px 10px;
  position: relative;
  cursor: pointer;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 1px;
  text-transform: capitalize;
  transition: all 0.2s;
  min-width: 198px;
  max-height: 47px;
  text-align: center;
  position: relative;
  box-shadow: -2px 4px 4px 0px rgba(0, 0, 0, 0.2);
}

.slide__content.owl-carousel.owl-theme .owl-dots {
  margin-top: 51px;
}

.study__tabs-item.active,
.study__tabs-item:hover {
  max-height: fit-content;
}

.study__tabs-item .content {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: all 0.3s ease;
}

.study__tabs-item .content h3 {
  transition: all 0.3s ease;
  transform: translateX(0);
  /* Initial state */
}

.study__tabs-item .content img {
  opacity: 0;
  visibility: hidden;
  /* Use visibility instead of display for transitions */
  transition: all 0.3s linear;
}

.study__tabs-item.active .content,
.study__tabs-item:hover .content {
  position: relative;
  justify-content: center;
}

.study__tabs-item.active .content img,
.study__tabs-item:hover .content img {
  opacity: 1;
  visibility: visible;
  /* Make visible on hover/active */
  position: absolute;
  right: 0;
}

.study__tabs-item .dropdown {
  position: absolute;
  width: 100%;
  left: 0;
  color: #323539;
  background-color: var(--white);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.4px;
  text-align: left;
  visibility: hidden;
  transform: translateY(10px);
  /* transition   : all 0.25s ease; */
}

.study__tabs-item .dropdown li {
  padding: 16px 32px;
}

.study__tabs-item .dropdown li:hover a {
  color: rgba(52, 112, 225, 1);
}

.study__tabs-item .content img {
  display: none;
}

.study__tabs-item.active,
.study__tabs-item:hover .content img {
  display: block;
}

.study__tabs-item.active .dropdown,
.study__tabs-item:hover .dropdown {
  visibility: visible;
  z-index: 2;
}

.study__tabs-item .line {
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 1;
  transition: all 0.2s;
}

.study__wrapper {
  padding: 0 50px;
  height: auto;
  margin-bottom: 0px !important;
}

.study .study__wrapper.slide .slick-dots {
  bottom: 24px;
}

.study__grid {
  margin-top: 49px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid #323539;
}

.study__grid--item {
  border-top: 1px solid #323539;
  border-bottom: 1px solid #323539;
  border-right: 1px solid #323539;
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 535px;
}

.study__grid--item .item__img {
  flex-shrink: 0;
  max-height: 238px;
}

.study__grid--item .item__img img {
  width: 100%;
  /* filter: grayscale(100%); */
  object-fit: cover;
}

.study__grid--item .item__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 18px 24px;
  flex: 1;
}

.study__grid--item .item__content > a {
  flex-grow: 1;
}

.study__grid--item .item__content--top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.study__grid--item .name {
  color: #323539;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.4px;
}

.study__grid--item .title {
  color: #3470e1;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.16px;
  text-align: center;
  max-width: 90%;
  /* overflow: hidden; */
  /* max-height: 48px; */
}

.study__grid--item .title p {
  /* display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  text-overflow: ellipsis; */
}

.study__grid--item .text p:empty {
  padding-bottom: 0px;
}

.study__grid--item .text p:not(:empty) {
  margin-bottom: 12px;
}

.study__grid--item .item__content .line {
  width: 30px;
  height: 4px;
  margin: 12px 0 16px;
}

.study__grid--item .text {
  color: #858e95;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.7px;
  max-height: 112px;
  overflow: hidden;
}

.study__grid--item .text p {
  /* padding-bottom: 14px; */
}

.study__grid--item .item--content--bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}

.study__grid--item .cta-link .cta-link__text a {
  background: #0a77ff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.study__grid--item:hover .cta-link .cta-link__text a {
  background: linear-gradient(0.25turn, #3470e1, #9642fe);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.study__grid--item .cta-link .cta-link__dir {
  filter: invert(38%) sepia(88%) saturate(3468%) hue-rotate(210deg)
    brightness(96%) contrast(83%);
  transform: rotate(-45deg);
  margin-left: 16px;
}

.study__grid--item:hover .cta-link__dir {
  transform: rotate(0deg);
  filter: none;
}

.study__grid--item:hover > .line {
  width: 100%;
  height: 4px;
}

.study__grid--item > .line {
  position: absolute;
  bottom: 0;
  width: 0%;
  transition: 0.25s;
}

/* report */
.report {
  padding-top: 70px;
  padding-bottom: 70px;
}

.report .report__content {
  padding: 0;
}

.report__content {
  margin-top: 93px;
}

.report .report__content .slide .slick-dots {
  bottom: -155px;
}

.report__content .slide__item-bottom {
  padding: 25px 40px 40px;
  background-color: var(--white);
}

.report__content .slide__item-bottom .title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  gap: 27px;
}

.report__content .slide__item-bottom .line {
  width: 50px;
}

.report__content .slide__item-bottom .script {
  margin-top: 20px;
}

.report__content .slide__item-bottom .script p {
  font-weight: 500;
  color: #3470e1;
}

.report__content .slide__item-bottom .content {
  margin-top: 18px;
  list-style: disc;
}

.report__content .slide__item-bottom .content li::marker {
  color: #3470e1;
}

.report__content .slide__item-bottom .content li + li {
  margin-top: 18px;
}

.report__content .slide__item-bottom .cta-link {
  margin-top: 35px;
}

.report__content .slide__item {
  box-shadow: rgba(0, 0, 0, 0.25) -1px 2px 8px 0px;
  position: relative;
}

.report__content .slide__item::before {
  content: "";
  position: absolute;
  height: 4px;
  width: 0%;
  left: 0;
  bottom: 0;
  background: linear-gradient(0.25turn, #3470e1, #9642fe);
  transition: all 0.4s;
}

.report__content .slide__item:hover::before {
  width: 100%;
}

.report__content .slide__item .slide__item-top img {
  width: 100%;
}

/* contact */
.contact {
  padding: 70px 0px;
}

.contact .general-title {
  padding-top: 0;
}

.form__contact .submit__content {
  margin: 28px 36px 0px 36px;
}

.report__content .article__item {
  overflow: hidden;
  display: flex !important;
  border-radius: 12px;
  border: 1px solid #e5e5e7;
  height: 344px;
}

.article__item .article__item-thumbnail {
  flex-basis: 56.25%;
  max-width: 744px;
  flex-grow: 0;
  flex-shrink: 0;
}

.article__item .article__item-information {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.article__item .article__item-thumbnail img {
  object-fit: inherit;
  width: 100%;
  height: 100%;
}

.article__item-badge {
  align-self: flex-start;
  color: var(--Light-Primary-Main);
  background: #ecf4fc;
  border-radius: 24px;
  padding: 4px 12px;
  margin-bottom: 16px;
}

.article__item-titlegroup {
  color: var(--primary);
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
  font-family: Poppins;
  max-height: 90px;
  height: 100%;
  text-transform: uppercase;
}

.article__item-titlegroup .article__item-title {
  color: var(--primary);
  --line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: var(--line-clamp);
  -webkit-box-orient: vertical;
  height: 80px;
}

.article__item-description {
  font-family: Poppins;
  font-size: 16px;
  color: var(--Light-base-second);
  flex-grow: 1;
}

.article__item-audit {
  justify-self: end;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article__item-audit .audit__user {
  display: flex;
  gap: 10px;
}

.article__item-audit .audit__user .audit__user-avatar {
  border-radius: 50%;
  overflow: hidden;
  width: 40px;
  height: 40px;
}

.article__item-audit .audit__user .audit__user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article__item-audit .audit__user .audit__user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.article__item-audit .audit__user-name {
  color: var(--primary);
  font-weight: 600;
  font-size: 15px;
}

.article__item-audit .audit__user-time {
  color: var(--Light-base-second);
  font-weight: 500;
  font-size: 14px;
}

.article__item .audit__time {
  align-self: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--primary);
}

.report__content.slide__content.owl-carousel.owl-theme .owl-dots {
  margin-top: 51px;
}

.testimonial__content {
  margin-top: 50px;
}

.testimonial .testimonial__content .slide .slick-dots {
  bottom: -46px;
}

.testimonial {
  padding-top: 70px;
}

@media only screen and (max-width: 1024px) {
  .study .container .general-title .left > div {
    justify-content: center;
  }

  .banner__img img.desktop {
    display: block;
    max-height: 480px;
  }

  .banner__img img.mobile {
    display: none;
  }

  .article__item .article__item-thumbnail {
    flex-basis: 50%;
  }

  .banner__content--text {
    margin-bottom: 0px;
  }
}

@media only screen and (max-width: 1024px) and (min-width: 577px) {
  .banner::before {
    max-height: 480px;
  }

  .banner__content {
    translate: -50% -50%;
    width: 500px;
  }

  .banner__content .enter-website {
    border: none;
    flex-direction: row;
  }

  .banner__content .enter-website span {
    border-radius: 0;
    border: none;
    border: 1px solid #000;
    border-right: none;
  }

  .banner__content .enter-website span input {
    border-radius: 0;
    border: none;
  }

  .banner__content .enter-website input[type="submit"] {
    margin: 0;
    border-radius: 0;
    border: 1px solid #000;
    border-left: none;
    height: 52px;
  }

  .study__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .study__wrapper {
    padding: 0px;
    height: 100%;
    margin-bottom: 56px !important;
  }

  .study .study__wrapper.slide .slick-dots {
    bottom: -36px;
  }

  .testimonial .slide__content {
    padding-bottom: 42px;
  }

  .report {
    margin: 70px 0px 33px;
  }

  .testimonial__content {
    margin-top: 0px;
  }

  .report__content {
    margin-top: 0px;
  }

  .report .report__content .slide .slick-dots {
    bottom: -36px;
  }

  .article__item-description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .contact__content {
    margin-top: 0px;
    padding: 55px;
  }

  .contact {
    margin-top: 0px !important;
  }

  .study__grid--item,
  .study__grid--item .item__img {
    max-height: unset;
  }
}

@media only screen and (max-width: 768px) {
  .report__content .article__item {
    flex-direction: column;
    border-radius: none;
    border: none;
    height: auto;
    width: 95% !important;
    margin: 0 auto;
  }

  .article__item-description {
    flex-grow: 1;
    margin: 24px 0;
  }

  .article__item .article__item-information {
    padding: 32px 0px;
  }
}

@media only screen and (max-width: 576px) {
  .banner__img img.desktop {
    display: none;
  }

  .banner__img img.mobile {
    display: block;
    max-height: 300px;
  }

  html[lang="vi"] .study .general-title .right span {
    margin: 0 auto;
  }

  /* banner */
  .banner__content {
    position: unset;
    translate: unset;
  }

  .banner::before {
    display: none;
  }

  .banner__img img {
    filter: grayscale(0%);
  }

  .banner__content {
    margin-top: 41px;
  }

  .study__grid--item .item__content {
    padding: 24px 30px 36px;
  }

  .study__grid--item .item__content .line {
    margin: 16px 0 24px;
  }

  .study__wrapper {
    height: 100%;
    padding-bottom: 16px !important;
  }

  .study .client__content {
    margin: 0px;
  }

  .study__grid--item,
  .study__grid--item .item__img {
    max-height: unset;
  }

  .banner__content--title {
    color: #323539;
    text-align: center;
    font-family: "Renogare";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    text-shadow: none;
    line-height: unset;
    letter-spacing: unset;
  }

  .banner__content .line {
    height: 4px;
    width: 50px;
  }

  .banner__content--text {
    color: #323739;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.16px;
    text-shadow: unset;
    margin-bottom: 20px;
    max-width: 329px;
  }

  .banner__content .enter-website {
    flex-direction: column;
  }

  .banner__content .enter-website span input {
    max-width: 294px;
    margin: 0 auto;
    margin-bottom: 36px;
    padding: 8px 12px;
  }

  .banner__content .enter-website input::placeholder {
    color: var(--Light-base-second);
    text-align: center;
    font-family: "Poppins";
    font-size: 12px;
    font-weight: 500;
    line-height: 22px;
  }

  .banner__content .enter-website {
    border: unset;
    height: unset;
  }

  .banner__content .enter-website input[type="submit"] {
    max-width: 180px;
    width: 100%;
    margin: 0 auto;
    color: #fff;
    font-family: "Renogare";
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.24px;
    border-radius: 105px;
    padding: 13px 17px;
    margin-top: 36px;
  }

  /* study */

  .study__tabs-item.active .content img,
  .study__tabs-item:hover .content img {
    right: -10%;
  }

  .study {
    background-color: #fafbfc;
    padding-top: 36px;
    margin: 33px 0px 16px;
  }

  .study .container {
    padding: 0;
  }

  .study__content {
    margin-top: 0px;
  }

  .study__content .slick-list {
    padding: 0;
  }

  .study__content .slide__item .slide__item-content {
    background: none;
  }

  .study__content .slide__item-content::before {
    content: "";
    position: absolute;
    height: 160px;
    top: 0;
    width: 100%;
    background: rgba(179, 176, 176, 0.21);
    backdrop-filter: blur(3.5px);
  }

  .study
    .client__content.content__box
    .owl-item.active
    .slide__item-content::before {
    display: none;
  }

  .study__content .slide__item:hover {
    transform: scaleY(0%);
  }

  .study__content .slide__item .slide__item-content img {
    filter: grayscale(0);
  }

  .study__content .slide__item .slide__item-content {
    height: 160px;
  }

  .study .general-title.mobile {
    display: block;
  }

  .study .general-title .right {
    display: flex;
    margin: auto;
  }

  .study__tabs {
    margin-top: 36px;
  }

  .study__tabs-item {
    font-size: 15px;
    min-width: 132px;
  }

  .study__tabs-item .dropdown {
    font-size: 12px;
  }

  .study__tabs-item .dropdown li {
    padding: 16px 16px;
  }

  .study__wrapper {
    padding: 0;
  }

  .study__grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    border: none;
    margin-top: 36px;
  }

  .study__grid--item {
    border: none;
  }

  .study__grid--item .item--content--bottom {
    justify-content: space-between;
  }

  /* .study__grid--item .item--content--bottom .flag {
    display: none;
  } */

  /* testimonial */
  .testimonial .general-title {
    padding: 0;
  }

  .testimonial .container {
    padding: 0;
  }

  .testimonial__content {
    margin-top: 0;
  }

  .testimonial__content .slide__item {
    height: 24rem;
    padding: 0;
  }

  .testimonial__content .slide__item-content {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .slide__item-content .left::before {
    display: none;
  }

  .slide__item-content .left {
    margin: 32px 0 22px;
    width: 100%;
    padding: 0;
  }

  .slide__item-content .right {
    margin: 0;
    text-align: center;
    min-width: 331px;
  }

  .slide__item-content .right .img img:last-child {
    display: none;
  }

  .slide__item-content .right .img img:first-child {
    display: block;
    margin: 0 auto;
  }

  .slide__item-content .right p {
    margin-top: 22px;
    font-size: 13px;
  }

  .slide__item-content .left .text h2 {
    font-weight: 600;
  }

  .slide__item-content .left .avatar {
    margin-bottom: 17px;
  }

  .slide .slick-dots {
    bottom: -36px;
  }

  /* Report */

  .report {
    margin: 16px 0px 0px;
    background-color: #fafbfc;
  }

  .report__content {
    margin-top: 0px;
  }

  .article__item-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .report .slide .slick-dots {
    bottom: -43px !important;
  }

  /* contact */
  .contact {
    margin-top: 0px !important;
    padding-bottom: 42px;
    background-color: white;
  }

  /* search report */
  .report__content .article__item {
    flex-direction: column;
    border-radius: none;
    border: none;
    height: auto;
    width: 95% !important;
    margin: 0 auto;
  }

  .article__item-description {
    flex-grow: 1;
    margin: 24px 0;
  }

  .article__item .article__item-information {
    padding: 32px 0px;
  }

  .report__content.slide__content.owl-carousel.owl-theme .owl-dots {
    margin-top: 77px;
  }

  .banner__content .enter-website {
    width: auto;
  }

  .study .client .client__content.content__box {
    min-height: 164px;
  }

  .study .client .client__content.content__box .slide .slick-dots {
    bottom: -33px;
  }

  .testimonial .testimonial__content .slide .slick-dots {
    bottom: -41px;
  }

  .report .general-title {
    padding: 0px 8px 0px;
  }

  .report {
    padding-top: 0px;
  }

  .report__content.slide__content.owl-carousel.owl-theme .owl-dots {
    margin-top: 8px;
  }
}