/* 
Theme Name: SaoKim Digital
Theme URI: https://saokim.digital/
Description: A product designed and implemented by SaoKim Digital for customers. Hotline 0964.699.499
Author: Sao Kim Team
Template: hello-elementor
Author URI: https://saokim.digital/
Version: 1.0.0
*/
//@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');
//@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..700;1,400..700&display=swap');
:root {
  --color-success: #009400;
  --transition-cb: all .2s cubic-bezier(.4, 0, .2, 1) 0ms;
  --gap-form: 20px;
  --color-required: #EB4C4C;
}

@font-face {
  font-family: 'Rounded Mplus 1c';
  src: url(./assets/fonts/RoundedMplus1c-Regular.otf);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Rounded Mplus 1c';
  src: url(./assets/fonts/RoundedMplus1c-Regular.otf);
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rounded Mplus 1c';
  src: url(./assets/fonts/RoundedMplus1c-Medium.otf);
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rounded Mplus 1c';
  src: url(./assets/fonts/RoundedMplus1c-Bold.otf);
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rounded Mplus 1c';
  src: url(./assets/fonts/RoundedMplus1c-Black.otf);
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* Custome keyframes css */
/* .fadeIn,
.fadeInDown,
.fadeInLeft,
.fadeInRight,
.fadeInUp,
.zoomIn {
  transition: opacity, transform ease 1.25s;
  animation: ease 1.25s;
} */

@keyframes myFadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.fadeIn {
  animation-name: myFadeIn !important;
}

@keyframes myFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -15%, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInDown {
  animation-name: myFadeInDown !important;
}

@keyframes myFadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-15%, 0, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInLeft {
  animation-name: myFadeInLeft !important;
}

@keyframes myFadeInRight {
  from {
    opacity: 0;
    transform: translate3d(15%, 0, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInRight {
  -webkit-animation-name: myFadeInRight !important;
  animation-name: myFadeInRight !important;
}

@keyframes myFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 15%, 0)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.fadeInUp {
  animation-name: myFadeInUp !important;
}

@keyframes myZoomIn {
  from {
    opacity: 0;
    transform: scale3d(.9, .9, .9)
  }

  50% {
    opacity: 1
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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



@keyframes aniTranslateY {
  0% {
    transform: translateY(0);

  }

  100% {
    transform: translateY(-20px);
  }
}

@keyframes myHeightRect {
  from {
    height: 0;
    transform: translateY(100%);
  }

  to {
    height: revert-layer;
    transform: translateY(0);
  }
}

.myHeightRect {
  /* animation: none !important;
  transform: translateY(0) !important;
  animation-duration: 0 !important;
  opacity: 1 !important; */
  /* 
  animation-play-state: paused !important;
  opacity: 1 !important; */
}

@keyframes myFadeIn1 {
  from {
    opacity: 1
  }

  to {
    opacity: 1
  }
}

.myHeightRect {
  animation-name: myFadeIn1 !important;
}


.myHeightRect rect {
  /* animation-duration: 3.5s; */
  animation: myHeightRect 3s forwards;
}


body,
main {
  overflow-x: hidden;
  font-variant-numeric: lining-nums proportional-nums;
}

.elementor-field {
  font-variant-numeric: lining-nums proportional-nums;
}


.zoomIn {
  animation-name: myZoomIn !important;
}

.required {
  color: var(--color-required);
}

.dgwt-wcas-suggestions-wrapp::-webkit-scrollbar {
  width: 6px;
  margin-top: 20px;
}

div#elementor-popup-modal-546 {
  top: 114px;
}

/* Track */
.dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-track {
  background: #CCCCCC;
}

.e-loop-item[inert],
.swiper-slide[inert] {
  user-select: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* Handle */
.dgwt-wcas-suggestions-wrapp::-webkit-scrollbar-thumb {
  background: var(--e-global-color-primary);
}

/* start */
.partner_logos ul.slick-dots li {
  /* height: 7px; */
}

.partner_logos ul.slick-dots,
.slider_my_server ul.slick-dots {
  padding: 0;
  display: flex;
  list-style: none;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
}

.slider_my_server ul.slick-dots {
  display: none !important;
}

.partner_logos ul.slick-dots button,
.slider_my_server ul button {
  padding: 0 !important;
  font-size: 0;
  background: #fff;
  border: none;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  border: 0.5px solid #989898;
}

.slider_my_server ul.slick-dots li {
  height: 17px;
}

.partner_logos li.slick-active button,
.slider_my_server li.slick-active button {
  background: var(--e-global-color-primary);
}

/* .gallery-logo img {
  display: table;
  margin: auto;
  display: block;
} */

.partner_logos {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
  margin-top: 32px;
}

.partner_logo {
  /* width: 16.66666666666667%; */
  border-radius: 4px;
  /* padding: 10px; */
}

body:not(.elementor-editor-active) .slider_my_server .my_server_item {
  display: none;
}


.slick-slide .my_server_item {
  display: block;
}

/* .partner_logos .slick-slide>div:nth-child(2) {
  border-top: 1px solid #F2F2F2;
}

.partner_logos .slick-track .slick-active:not([data-slick-index="0"]) {
  border-left: 1px solid #F2F2F2;
} */

/* .partner_logos .slick-slide.slick-active:last-of-type {
  border-right: 1px solid red !important;
} */

.error404 main#content {
  text-align: center;
  padding: 100px 0;
}

.partner_logos_img {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.partner_logos_img img {
  max-height: 80px;
  object-fit: cover;
}

.only-mobile.dmsp .sub-menu {
  display: none !important;
}

/* .slider-work .swiper-slide-active,
.slider-work .swiper-slide-duplicate-active {
  z-index: 100;
  transform: scale(2);
}


.slider-work .swiper-slide-next,
.slider-work .swiper-slide-prev,
.slider-work .swiper-slide-duplicate-next,
.slider-work .swiper-slide-duplicate-prev {
  z-index: 50;
  transform: scale(1.5);
} */


@media (min-width: 1200px) {
  .swiper-slide .my_server_title {
    font-size: 28px;
    padding-top: 24px;
  }
}

.my_server_title {
  text-transform: uppercase;
  font-family: var(--e-global-typography-977ae5c-font-family), Sans-serif;
  font-size: var(--e-global-typography-977ae5c-font-size);
  font-weight: var(--e-global-typography-977ae5c-font-weight);
  line-height: var(--e-global-typography-977ae5c-line-height);
  color: var(--e-global-color-text);
  padding-top: 10px;
  text-align: center;
  margin: 0;
}

@media (max-width: 1366px) {
  .my_server_title {
    font-size: 20px;
  }
}

.my_server_item {
  padding: 20px;
}

.list-tab-content .list-content.active {
  /* display: flex ; */
}

.list-tab-content .list-content {}

@media (min-width: 1025px) {
  .only-mobile.menu-item {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .type-product.e-loop-item {
    overflow: visible !important;
  }

}

/* .elementor-swiper-button:hover svg rect,
.slick-arrow:hover rect {
  fill: var(--e-global-color-secondary);
}

.elementor-swiper-button:hover svg path,
.slick-arrow:hover path {
  stroke: #fff;
  fill: transparent;
} */

@media (max-width: 1024px) {}

/* ul.product-cat-accordion li.active h4 {
  margin-bottom: 0;
} */

/* .product-cat-accordion li.active span.btn-push-minus   */


/* .product-cat-accordion */
/* custome padding layout laptop */
@media (min-width: 1024px) and (max-width: 1600px) {}

@media (max-width: 767px) {
  .my-breadcrumbs ul.elementor-icon-list-items {
    display: -webkit-box !important;
    overflow: scroll;
    flex-wrap: nowrap !important;
  }

  .my-breadcrumbs ul.elementor-icon-list-items span {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
  }

  .my-breadcrumbs ul.elementor-icon-list-items::after {
    content: '';
    display: block;
    background: rgb(255, 255, 255);
    background: linear-gradient(-260deg, rgba(243, 243, 243, 0) 0%, rgba(243, 243, 243, 1) 50%);
    width: 40px;
    height: 100%;
    position: absolute;
    right: 0;
  }

  div#elementor-popup-modal-546 {
    top: 82px;
  }

}

@media (min-width: 768px) and (max-width: 1023px) {}

@media (max-width: 967px) {
  .histories-list .history-item {
    width: 50%;
  }
}


.wpd-form-col-left .wpd-field-icon,
.wpd-form-col-left .wc_website-wrapper,
.wpd-form-head {
  display: none !important;
}

.wpd-form-col-left input {
  color: #00000080 !important;
  font-family: "Rounded Mplus 1c", Sans-serif;
  font-size: 18px !important;
  outline: none !important;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  font-weight: 500;
  line-height: 170% !important;
  height: 47px !important;
}

.wpd-form-col-left input:focus-within {}

#wpdcom .wpd-comment .wpd-comment-right {
  font-family: "Rounded Mplus 1c", Sans-serif;
  font-weight: 500;
}

svg.icon-sumbmit-cmt {
  cursor: pointer;
}

#wpdcom .wc-field-submit input:hover+svg.icon-sumbmit-cmt circle,
svg.icon-sumbmit-cmt:hover circle {
  fill: #8EC045;
  transition: .3s;
}

#wpdcom .wpd-second-button,
#wpdcom .wpd-prim-button {
  color: #FFF;
  font-family: "Rounded Mplus 1c";
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  border-radius: 100px;
  background: var(--BLue-1, #009FE3);
  padding: 10px 25px;
}

#wpdcom .wpd-prim-button:hover {
  background-color: #8EC045;
}

#wpdcom .wc-field-submit input[type="submit"] {
  opacity: 1 !important;
}

#wpdcom .ql-toolbar {
  background-color: rgba(0, 159, 227, 1) !important;
  border: none !important;
}

#wpdcom .wpd-thread-head .wpd-thread-info {
  border-color: rgba(0, 159, 227, 1) !important;
  font-family: "Rounded Mplus 1c";
  color: #fff !important;
  font-size: 18px !important;
  outline: none !important;
  font-weight: 500;
  line-height: 170% !important;
  font-style: normal;
}

#wpdcom .ql-toolbar .ql-stroke {
  stroke: rgba(0, 0, 0, 1);
}

#wpdcom .wpd-comment-header,
#wpdcom .wpd-comment-text {
  color: rgba(204, 204, 204, 1) !important;
}

#wpdcom.wpdiscuz_unauth .wc-field-submit {
  padding-top: 0 !important;
}

.wpd-form-row {
  margin-top: 10px;
}

#wpdcom .ql-toolbar .ql-fill {
  fill: rgba(0, 0, 0, 1);
}

.ql-editor {
  padding: 16px;
  min-height: 88px !important;
}

#wpdcom .ql-container {
  border: none !important;
}

#wpdcom .ql-editor,
#wpdcom .ql-editor::before {
  color: #00000080 !important;
  font-family: "Rounded Mplus 1c", Sans-serif;
  font-size: 18px !important;
  outline: none !important;
  border-radius: 12px !important;
  font-weight: 500;
  line-height: 170% !important;
  font-style: normal;
}

#comments,
#wpdcom {
  max-width: 100% !important;
  margin: auto !important;
  font-style: normal;
}

#wpdcom .wc_name {
  border: 2px solid var(--Yellow-2, #DEDC00) !important;
}

#wpdcom .single_phone {
  border: 2px solid var(--BLue-2, #36B7BA) !important;
}

#wpdcom .wc_email {
  border: 2px solid var(--Pupple-2, #5C2483) !important;
}

.single-post .comments-area {
  display: none;
}

.page-content .comments-area {
  display: block;
}

/* Timeline */
.timeline-desktop {
  position: relative;
  display: flex;
  justify-content: center;
}

.timeline-desktop .timeline-years {
  position: relative;
  display: flex;
  min-width: 100%;
  flex-direction: column;
  align-items: center;
  row-gap: 186px;
}

.timeline-desktop .timeline-years .timeline-year-item {
  display: flex;
  row-gap: 24px;
  width: 100%;
  padding-left: 60px;
  gap: 67px;
}

.timeline-desktop .timeline-years .timeline-year-item h4 {}

.timeline-year-item[data-index="0"] h4 {
  margin-top: -10px !important;
}

@media not all and (min-width: 1024px) {
  .timeline-desktop .timeline-years .timeline-year-item ul {
    width: 90%
  }
}

.timeline-desktop .timeline-years .timeline-year-item {

  h3,
  h4 {
    line-height: normal;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 12px;
  }

  h3 {
    font-family: "Libre Bodoni";
    font-size: 48px;
  }

  h4 {
    font-family: 'Vollkorn';
    font-size: 24px;
    line-height: 160%;
  }

  .timeline-content {
    width: 34%;
    color: var(--Color-text, #666);
    font-variant-numeric: lining-nums proportional-nums;
    font-family: Vollkorn;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    margin-top: -20px;
  }

  .timeline-image {
    display: grid;
    grid-template-columns: auto auto;
    gap: 20px;
  }

  .timeline-images {
    display: grid;
    /* grid-template-columns: auto auto; */
    width: 62%;
    /* gap: 20px; */
    margin-top: -20px;

    img#timeline-image-2236 {
      mix-blend-mode: multiply;
      /* height: 318px; */
      /* object-fit: cover; */
    }

    img {
      object-fit: cover;
      width: 100%;
    }
  }
}

@media not all and (min-width: 1024px) {
  .timeline-desktop .timeline-years .timeline-year-item ul {
    width: 90%
  }
}

@media (min-width: 1551px) {
  .timeline-desktop .timeline-years .timeline-year-item {
    img {
      height: 318px;
    }
  }
}

@media (max-width: 1550px) {
  .timeline-desktop .timeline-years .timeline-year-item {
    img {
      height: 245px;
    }
  }
}

@media(min-width: 768px) and (max-width: 1024px) {
  .timeline-desktop .timeline-years .timeline-year-item {
    img {
      height: 300px;
    }
  }
}

.timeline-desktop .timeline-years .timeline-year-item.active-scroll {

  h3,
  h4 {
    color: var(--e-global-color-primary);
  }

}

.last-dot {
  left: -5px !important;
  top: auto !important;
  bottom: 0 !important;
  background: var(--e-global-color-primary) !important;
  transform: none !important;
}

.timeline-desktop .timeline-dot {
  top: 0;
  width: 12px;
  height: 12px;
  position: absolute;
  left: -5px;
  z-index: 1;
  background: var(--e-global-color-primary) !important;
}

.first-dot,
.timeline-year-item[data-index="0"] .timeline-dot {
  top: 0 !important;
  transform: none !important;
}

.timeline-col {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  height: 100%;
  width: 3px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: #66666680;
}

.timeline-col-line {
  position: relative;
  width: 100%;
  height: 100%
}

.timeline-col-line .line {
  position: absolute;
  height: 0;
  width: 100%;
  background: var(--e-global-color-primary);
}

.timeline-dot {
  z-index: 10;
  width: .75rem;
  height: .75rem;
  border-radius: 9999px;
  background-color: #ccc;
}

.timeline-year-item {
  position: relative;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms
}

/*.timeline-year-item.active-scroll {
  color: #006489
}*/

/*
.timeline-year-item.active-scroll .timeline-dot {
  background: linear-gradient(180deg, #00AEEF 0%, #006489 100%) !important;
}
*/

.timeline-dot {
  transition-property: background, left, width, height;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  transition-timing-function: linear
}


@media only screen and (max-width: 1024px) {

  .timeline-desktop .timeline-years .timeline-year-item {
    flex-direction: column;

    .timeline-content,
    .timeline-images {
      width: 100%;
    }
  }

  .timeline-desktop .timeline-years .timeline-year-item {
    gap: 37px;
  }

  .timeline-col {
    left: 0;
  }

  .timeline-desktop .timeline-dot {
    left: -5px;
  }

  .timeline-desktop .timeline-years {
    row-gap: 100px;
  }

  img#timeline-image-2236 {
    height: 177px !important;
  }
}


@media only screen and (max-width: 767px) {
  .timeline-desktop .timeline-years .timeline-year-item {
    padding-left: 30px;

    h3 {
      font-size: 32px;
    }

    h4 {
      font-size: 20px;
    }

    .timeline-content {
      font-size: 18px;
      margin-top: -15px;
    }

    img {
      height: 250px !important;
    }

    img#timeline-image-2236 {
      height: 85px !important;
    }

    .timeline-image {
      display: grid;
      grid-template-columns: auto;
    }
  }
}


@media only screen and (max-width: 340px) {
  .timeline-desktop .timeline-years .timeline-year-item {
    img {
      height: 184px !important;
    }
  }
}

/* .swiper-slide {
  transform-style: preserve-3d;
  will-change: transform;
} */