.team-page {
   position: relative;
   width: 100%;
   padding-top: 5rem !important;
}
.team-page-title {
   text-align: center;
   font-size: 1.5rem;
   font-weight: bold;
   color: var(--color-primary);
   text-transform: uppercase;
   line-height: 130%;
}
.team-page-selected {
   margin-top: 1.38rem !important;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}
.team-page-selected__item {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
}
.img_icon_fix{
    display: flex;
    justify-content: center;
    align-items: center;
   height: 3rem;
   width: 3rem;
}
.bt_ap{
   color: white;
   color: var(--Trng, #FFF);
leading-trim: both;
text-edge: cap;
font-family: "Google Sans";
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 1.5rem */
}
.team-page-selected__item .button {
   display: none;
   position: relative;
   height: 7.6875rem;
   width: 20.75rem;
   border-radius: 0.625rem;
   justify-content: center;
   align-items: center;
   border: 0.0625rem solid var(--color-primary) !important;
   transition: filter 0.3s ease;
}
.team-page-selected__item .button > div {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 0.6rem;
}
.make-appointment-left .button-dat-lich-kham {
   display: flex;
   justify-content: space-between;
   align-items: start;
   gap: 2rem;
}
.make-appointment-left .button-dat-lich-kham .mess-success {
   color: #29960e;
   text-align: justify;
   font-size: 0.75rem;
   font-style: normal;
   font-weight: 400;
   line-height: 150%; /* 1.125rem */
   max-width: 18.875rem;
   position: relative;
   z-index: 10;
}
.team-page-selected__item .button:hover {
   background-color: var(--color-primary) !important;
}
.team-page-selected__item .button-mobile {
   width: 100%;
   padding: 0.88rem;
   border-radius: 0.75rem;
}
.team-page-selected__item .button-mobile .action,
.team-page-selected__item .button .action {
   filter: brightness(0) invert(1);
}

.team-page-selected__item .button:hover .icon {
   filter: brightness(0) invert(1);
}
.team-page-selected__item .button .title {
   font-weight: bold;
   color: var(--color-primary);
   transition: color 0.3s ease;
   text-align: center;
   font-size: 1.125rem;
}
.team-page-selected__item .button:hover .title {
   color: white;
}

.team-page-selected__item .button .icon.active {
   filter: brightness(0) invert(1);
}

.team-page-selected__item .button .title.active {
   color: white;
}

.team-page-selected__content {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 3.75rem;
   margin-top: 2.5rem;
}
.team-page-selected__content-item {
   flex: 1;
   display: none;
   flex-direction: column;
}
.team-page-selected__content-from {
   width: 100%;
   display: flex;
   flex-direction: column-reverse;
   position: sticky;
   top: 1rem;
   right: 0;
}
.team-page-selected__content-from .background {
   height: 26.875rem;
   position: relative;
   border-radius: 1.02969rem;
   overflow: hidden;
}

.team-page-selected__content-from-text {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;

   display: flex;
   justify-content: space-between;
   align-items: flex-start;

   gap: 2.5rem;
   padding: 1.25rem !important;
}
.team-page-selected__content-from-text svg {
   width: 3.4rem;
}

.team-page-selected__content-from-text .text {
   font-weight: 600;
   font-size: 1.25rem;
   line-height: 150%;
   color: #ffffff;
   flex: 1;
}
.team-page-selected__content-from--title {
   font-weight: 700;
   color: var(--color-primary);
   line-height: 130%;
   font-size: 1.25rem;
   text-transform: uppercase;
   margin-top: 1.25rem !important;
   margin-bottom: 1rem !important;
}

.team-page-selected__content-from .input-container {
   margin-top: 0;
}

.team-page-selected__content-from .animated-input {
   width: 100%;
   max-width: 100%;
   height: 3.0625rem;
   padding: 0 0.625rem !important;
   border: none;
   border-radius: 0.5rem;
   background: #f1f9fc;
   color: #08354a;
   font-family: "Google Sans";
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
   outline: none;
   box-sizing: border-box;
}

.team-page-selected__content-from textarea.animated-input {
   height: 5.8125rem !important;
   min-height: 5.8125rem;
   padding-top: 0.875rem !important;
   resize: vertical;
}

.team-page-selected__content-from .floating-label,
.team-page-selected__content-from .input-container.is-focused .floating-label,
.team-page-selected__content-from .input-container.is-label-up .floating-label {
   top: 1.53125rem !important;
   left: 0.75rem;
   max-width: calc(100% - 1.5rem);
   overflow: hidden;
   color: rgba(8, 53, 74, 0.4);
   background: #f1f9fc;
   font-family: "Google Sans";
   font-size: 0.875rem;
   font-weight: 400 !important;
   line-height: 1.5;
   text-overflow: ellipsis;
   white-space: nowrap;
   transform: translateY(-50%) !important;
}

.team-page-selected__content-from .floating-label.label-textarea,
.team-page-selected__content-from .input-container.is-focused .floating-label.label-textarea,
.team-page-selected__content-from .input-container.is-label-up .floating-label.label-textarea {
   top: 0.875rem !important;
   transform: none !important;
}

.team-page-selected__content-from .input-container.has-value .floating-label {
   opacity: 0;
   visibility: hidden;
}

.team-page-selected__content-item__detail {
   display: flex;
   justify-content: flex-start;
   align-items: flex-end;
   gap: 0.25rem;
}
.team-page-selected__content-item__detail--one {
   position: relative;
   width: 40%;
}
.team-page-selected__content-item__detail--one img {
   width: 13.8125rem;
   height: 19.5rem;
   object-fit: contain;
}
.team-page-selected__content-item__detail--one__img {
   position: absolute;
   bottom: 0;
   right: 0;
   left: 0;
   height: 70%;

   background: linear-gradient(to bottom, #ffffff00, #ffffff);
}
.team-page-selected__content-item__detail--two {
   display: flex;
   flex-direction: column;
   flex: 1;
}
.team-page-selected__content-item__detail--two__name {
   font-weight: 900;
   color: #1a91c7;
   font-size: 1.875rem;
   line-height: 150%;
}
.team-page-selected__content-item__detail--two__position {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 0.75rem;
}
.team-page-selected__content-item__detail--two__position--one {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 0.2rem;
}
.team-page-selected__content-item__detail--two__position--one h2 {
   font-weight: 400;
}
.team-page-selected__content-item__detail--two__position--one h2,
.team-page-selected__content-item__detail--two__position--one h3 {
   font-size: 1rem !important;
   line-height: 150%;
}
.team-page-selected__content-item__detail--two__experience {
   font-size: 1.25rem;
   font-weight: 600;
   color: #08354a;
   line-height: 140%;
text-transform: uppercase;
   margin-top: 1.25rem;
}

.team-page-selected__content-item__detail--two__progress {
   border-radius: 0.75rem;
   padding: 0.75rem !important;
   margin-top: 0.62rem;
}

.team-page-selected__content-item__detail--two__progress--one > * + * {
   margin-top: 0.5rem !important;
}
.team-page-selected__content-item__detail--two__progress--one__item {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 0.5rem;
}
.team-page-selected__content-item__detail--two__progress--one__item-i {
   flex: 1;
   color: #08354acc;
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 150%;
}

@media (min-width: 1024px) {
   .team-page-selected__content-item__detail--one {
      width: auto;
   }
}

@media (min-width: 640px) {
   .team-page-selected__content-from {
      width: 23.61rem;
      flex-direction: column;
   }
   .team-page-selected__content-item {
      display: flex;
   }
   .button-mobile {
      display: none !important;
   }
   .team-page-selected__item .button {
      display: flex;
   }
   .team-page-selected__item {
      flex-direction: row;
      gap: 1.5rem;
   }
   .team-page-selected {
      margin-top: 2.5rem !important;
      gap: 1.5rem;
   }
   .team-page-title {
      font-size: 2.5rem;
   }
}
@media (max-width: 640px) {
   .team-page.team-page12 {
      padding-top: 2.5rem !important;
      padding-bottom: 3rem;
   }
   .img_icon_fix{
   height: 2.5rem;
   width: 2.5rem;
}
}


.team-skeleton__avatar,
.team-skeleton__line {
  background: linear-gradient(
    90deg,
    rgba(8, 53, 74, 0.06) 25%,
    rgba(8, 53, 74, 0.12) 50%,
    rgba(8, 53, 74, 0.06) 75%
  );
  background-size: 200% 100%;
  animation: okhub-skeleton 1.2s ease-in-out infinite;
  border-radius: 0.5rem;
}

.team-skeleton__avatar {
  width: 100%;
  aspect-ratio: 3 / 4;
}

.team-skeleton__line {
  height: 1rem;
  margin-top: 0.75rem;
  width: 100%;
}

.team-skeleton__line--title {
  height: 1.5rem;
  width: 70%;
  margin-top: 0.25rem;
}

.team-skeleton__line--meta {
  width: 50%;
}

@keyframes okhub-skeleton {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}