/* html {
  scrollbar-color: #8b8b8b #fff;
} */

body {
  font-family: "Inter", sans-serif;
  font-style: normal;
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: #79808a;
}

.dropdown {
  box-shadow: 0px 2px 19px rgba(0, 0, 0, 0.05);
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

@media (min-width: 1024px) {
  .dropdown:before {
    top: -0.375rem;
    /* ~ -6px */
    left: 2.5rem;
    /* 40px */
    height: 0.75rem;
    /* 12px */
    width: 0.75rem;
    /* 12px */
    transform: rotate(45deg);
    border-left: 1px solid rgba(238, 238, 238, 1);
    border-top: 1px solid rgba(238, 238, 238, 1);
    content: "";
    position: absolute;
  }

  /* .dark .dropdown::before {
    border-left: 1px solid rgb(45 47 64);
    border-top: 1px solid rgb(45 47 64);
  } */
}

.font-inter {
  font-family: "Inter", sans-serif;
}

.font-outfit {
  font-family: "Outfit", sans-serif;
}

/* Animate play at Why Choose US */
/*
* 75%, 100% => Ở mốc 75% của thời gian animation và Ở mốc 100% (kết thúc) thì áp dụng các style bên trong.
* scale(2) = gấp đôi chiều rộng và chiều cao.
* opacity: 0 → hoàn toàn trong suốt (biến mất).
*/
@keyframes ud-ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* animation: name duration timing-function delay iteration-count direction fill-mode play-state;
* animation: ud-ping => tên của @keyframes (đã định nghĩa ở trên).
* 1s => thời gian chạy 1 vòng animation (1 giây).
* cubic-bezier(0, 0, 0.2, 1) → cách animation thay đổi tốc độ theo thời gian (easing function).
* infinite → lặp lại mãi mãi (không dừng).

=> .nf sẽ chạy keyframes ud-ping, mỗi vòng mất 1 giây, chạy theo đường cong tốc độ cubic-bezier(0,0,0.2,1), và lặp vô hạn.
*/

.nf {
  animation: ud-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* 
* Ở thời điểm bắt đầu (0%) và kết thúc (100%), phần tử sẽ xoay 360 độ
* Ở giữa animation (50% thời gian), phần tử quay trở về góc 0 độ (như ban đầu).
=> Kết quả: phần tử sẽ xoay đi rồi xoay ngược lại, tạo cảm giác quay tròn rồi trở về.
*/
@keyframes ud-rotating {
  0%,
  100% {
    transform: rotate(360deg);
  }
  50% {
    transform: rotate(0deg);
  }
}

/* 
* ud-rotating → tên animation vừa định nghĩa.
* 30s → thời gian chạy một vòng animation = 30 giây (rất chậm, kiểu xoay nền).
* linear → tốc độ xoay đều nhau (không nhanh – chậm – nhanh như ease).
* infinite → chạy vĩnh viễn, không dừng.
 */
.of {
  animation: ud-rotating 30s linear infinite;
}

*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

.if {
  --tw-rotate: 6deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c:hover .im {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ef {
  --tw-translate-y: 6.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.nl {
  transition-timing-function: linear;
}
.il {
  transition-duration: 300ms;
}

.ml {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.vl:hover {
  fill: #f36a8d;
}

.b .cn:hover {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.am:hover {
  --tw-shadow: 0px 6px 90px rgba(8, 14, 40, 0.04);
  --tw-shadow-colored: 0px 6px 90px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.b ._m:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(28 33 54 / var(--tw-bg-opacity));
}

.bl {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.xk {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.og > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.gm:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.cl {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.jl {
  transition-duration: 200ms;
}

.mf {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.yk {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.ff {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.b .sm {
  --tw-bg-opacity: 1;
  background-color: rgb(24 28 49 / var(--tw-bg-opacity));
}

.vk {
  --tw-shadow: 0px 8px 70px rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0px 8px 70px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.b .xm {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.gf {
  --tw-translate-x: 1.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.mh {
  --tw-bg-opacity: 1;
  background-color: rgb(243 106 141 / var(--tw-bg-opacity));
}
.gh {
  --tw-bg-opacity: 1;
  background-color: rgb(78 107 255 / var(--tw-bg-opacity));
}
.hh {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
._k {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
    0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.dj {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.bl {
  transition-property: color, background-color, border-color, fill, stroke,
    opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
    -webkit-backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ll {
  transition-duration: 100ms;
}

.c:hover .im {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.c:hover .jm {
  --tw-border-opacity: 1;
  border-color: rgb(78 107 255 / var(--tw-border-opacity));
}

.c:hover .km {
  --tw-bg-opacity: 1;
  background-color: rgb(78 107 255 / var(--tw-bg-opacity));
}

.c:hover .lm {
  fill: #ffffff;
}

.c:hover .mm {
  fill: #4e6bff;
}

.c:hover .a {
  visibility: visible;
  --tw-translate-y: 1.625rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}