/*!Can thiệp animation toàn bộ các loading thành phần giúp trải nghiệm mượt hơn: */
.kt-header{ animation: 1.35s ease-out 0s 1 fadeInDown;}
.kt-subheader__breadcrumbs{ animation: 0.8s ease-out 0s 1 fadeInDown; }
.kt-footer__bottom{ animation: 1.35s ease-out 0s 1 fadeInUp;}
.kt-portlet{ animation: 1.15s ease-out 0s 1 fadeIn;}
.progress{ animation: 2.35s ease-out 0s 1 zoomIn;}

/*!Bổ sung màu sắc tùy biến KidsOnline*/
.btn-ko-gray {
    color: #666;
    background-color: #e1e5ec;
    border-color: #e1e5ec;
}
.btn-ko-gray:hover {
  color: #80898e;
  background-color: #e9edef;
  border-color: #e9edef; }
.btn-ko-gray:focus, .btn-ko-gray.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(253, 87, 142, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(253, 87, 142, 0.5); }
.btn-ko-gray.disabled, .btn-ko-gray:disabled {
  color: #fff;
  background-color: #fd397a;
  border-color: #fd397a; }
.btn-ko-gray:not(:disabled):not(.disabled):active, .btn-ko-gray:not(:disabled):not(.disabled).active,
.show > .btn-ko-gray.dropdown-toggle {
  color: #80898e;
  background-color: #e9edef;
  border-color: #e9edef; }
.btn-ko-gray:not(:disabled):not(.disabled):active:focus, .btn-ko-gray:not(:disabled):not(.disabled).active:focus,
.show > .btn-ko-gray.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(253, 87, 142, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(253, 87, 142, 0.5); }
.ko-font-pink {
  color: #f599c3 !important; }
.ko-font-blue {
  color: #51C5F2 !important; }
.ko-link {
  color: #6c7293;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.ko-link:hover {
  color: #36a3f7;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

/*!Bổ sung màu sắc thang màu Biểu đồ KidsOnline*/
/*- Dưới chuẩn mức 2: đỏ hiểm nguy;*/
.ko-color-danger {color: #FF7062 !important; }
.ko-badge--danger {color:#ffffff ;background: #FF7062;}

/*- Dưới chuẩn mức 1: vàng cảnh báo;*/
.ko-color-warning {color: #FAC253 !important; }
.ko-badge--warning {color:#ffffff ;background: #FAC253;}

/*- Bằng chuẩn: xanh thông tin;*/
.ko-color-info {color: #5FCDED !important; }
.ko-badge--info {color:#ffffff ;background: #5FCDED;}

/*- Vượt chuẩn (chiều cao): xanh thành công;*/
.ko-color-success {color: #A9D03F !important; }
.ko-badge--success {color:#ffffff ;background: #A9D03F;}

/*- Vượt ngưỡng mức 1: xanh quá tải;*/
.ko-color-over1 {color: #5F8AC7 !important; }
.ko-badge--over1 {color:#ffffff ;background: #5F8AC7;}

/*- Vượt ngưỡng mức 2: tím quá tải;*/
.ko-color-over2 {color: #684F98 !important; }
.ko-badge--over2 {color:#ffffff ;background: #684F98;}

/*!Can thiệp badge*/
.kt-badge.kt-badge--done {
color: #ffffff;
background: #2786fb; }
.kt-badge.kt-badge--outline.kt-badge--info {
background: transparent;
color: #2786fb;
border: 1px solid #2786fb; }
.kt-badge.kt-badge--outline.kt-badge--info.kt-badge--outline-2x {
border: 2px solid #2786fb; }
/*!Can thiệp badge cho phần menu*/
.ko-badge-xs {height: 15px;width: 15px;font-size: 0.670rem;font-weight: bold;}
.ko-badge-xxs {height: 10px;width: 10px;font-size: 0.5rem;}
.ko-badge-xxxs {height: 7px;width: 7px;font-size: 0.3rem;}
/*Can thiệp badge cho phần picture*/
.ko-badge__pic {
    width: 3.5rem !important;
    height: 3.5rem !important;
    object-fit: cover;
}
.ko-badge__pic_full {
    width: 13.5rem !important;
    height: 13.5rem !important;
    object-fit: cover;
}


.ko-font{font-family: 'Montserrat', sans-serif;}
.ko-font-w500{font-weight: 500 !important;}
.ko-font-w600{font-weight: 600 !important;}
.ko-font-w700{font-weight: 700 !important;}
.ko-font-w800{font-weight: 800 !important;}
.ko-font-w900{font-weight: 900 !important;}
.ko-font-s05{font-size:0.5rem !important;}
.ko-font-s06{font-size:0.6rem !important;}
.ko-font-s07{font-size:0.7rem !important;}
.ko-font-s08{font-size:0.8rem !important;}
.ko-font-s09{font-size:0.9rem !important;}
.ko-font-s10{font-size:1.0rem !important;}
.ko-font-s11{font-size:1.1rem !important;}
.ko-font-s12{font-size:1.2rem !important;}
.ko-font-s13{font-size:1.3rem !important;}
.ko-font-s14{font-size:1.4rem !important;}
.ko-font-s15{font-size:1.5rem !important;}
.ko-font-s16{font-size:1.6rem !important;}
.ko-font-s17{font-size:1.7rem !important;}
.ko-font-s18{font-size:1.8rem !important;}
.ko-font-s19{font-size:1.9rem !important;}
.ko-font-s20{font-size:2.0rem !important;}
.ko-cursor-p{cursor:pointer;}
.ko-mwidth-35{min-width: 35px !important;}
.ko-mwidth-115{min-width: 115px;}
.ko-mwidth-100{min-width: 100px;display: inline-block;}
.ko-mheight-300{min-height: 70vh;}
.ko-role-img{
  max-width: 40.5rem !important;
  border-radius: 15px !important; 
  border: 3.5px solid #ebedf2;
  margin-bottom:2rem;
}
.kt-widget__head:hover img{
  border-color: #36a3f7;
}
.ko-post-img{max-width: 8.5rem !important;border-radius: 4px !important;}
.ko-post-img-169{
  position: relative;
  padding-bottom: 56.2%;
}
.ko-post-img-169 img{
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.ko-deco-line{text-decoration: line-through;}
.ko-grid-pic-1 {display: grid;grid-template-columns: 0fr 0fr;grid-gap: 1px;align-items: start;justify-items: center;}
.ko-grid-pic-1 img {
  width: 7.8rem;
  border-radius: 4px !important;
  object-fit: cover;
}
.ko-grid-pic-2 {display: grid;grid-template-columns: 0fr 0fr;grid-gap: 1px;align-items: start;justify-items: center;}
.ko-grid-pic-2 img {
  width: 7.8rem;
  height: 3.8rem;
  border-radius: 4px !important;
  object-fit: cover;
}
.ko-grid-pic-2 img:nth-child(1) {grid-column: span 2;grid-row: span 3;}
.ko-grid-pic-3 {display: grid;grid-template-columns: 0fr 0fr;grid-gap: 1px;align-items: start;justify-items: center;}
.ko-grid-pic-3 img {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 4px !important;
  object-fit: cover;
}
.ko-grid-pic-3 img:nth-child(1) { width: 7.8rem; height: 3.8rem;grid-column: span 2;grid-row: span 3;}
.ko-grid-pic-4 { 
  display: grid;
  grid-template-columns: 0fr 0fr;
  grid-gap: 1px;
  align-items: start;
  justify-items: center;
  }
.ko-grid-pic-4 img {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 4px !important;
  object-fit: cover;
}
.ko-grid-pic-4 img:nth-child(1,5) {grid-column: span 2;grid-row: span 3;}
.ko-grid-pic-full { 
  display: grid;
  grid-template-columns: 0fr 0fr;
  grid-gap: 1px;
  align-items: start;
  justify-items: center;
  }
.ko-grid-pic-full img {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 4px !important;
  object-fit: cover;
}
.ko-grid-pic-full img:nth-child(1n+4) {grid-column: span 2;grid-row: span 2;}
.ko-userpic--circle{border-radius: 50% !important;}
.ko-userpic--xl{max-width: 80px !important;} 
.ko-userpic--smx span{width: 47px;height: 47px;font-size: 0.8rem;}   


.ko_label__checkbox {
  display: none;
}

.ko_label__check {
  display: inline-block;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.1);
  background: white;
  color: white !important;
  vertical-align: middle;
  margin-right: 20px;
  width: 2em;
  height: 2em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border .3s ease;
  
  i.icon {
    opacity: 0.2;
    font-size: ~'calc(1rem + 1vw)';
    color: transparent;
    transition: opacity .3s .1s ease;
    -webkit-text-stroke: 3px rgba(0,0,0,.5);
  }
  
  &:hover {
    border: 5px solid rgba(0,0,0,0.2);
  }
}

.ko_label__checkbox:checked + .ko_label__text .ko_label__check {
  
  .icon {
    opacity: 1;
    transform: scale(0);
    color: white;
    -webkit-text-stroke: 0;
    animation: icon .3s cubic-bezier(1.000, 0.008, 0.565, 1.650) .1s 1 forwards;
  }
}

@keyframes icon {
  from {
    opacity: 0;
    transform: scale(0.1);
  }
  to {
    opacity: 1;
    transform: scale(0.9)
  }
}

.ko_label__checkbox:checked + .ko_label__text .ko_label__check_info { animation: ko_check_info .2s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards; }
@keyframes ko_check_info {
  0% {width: 2em;height: 2em;border-width: 0;}
  10% {width: 2em;height: 2em;opacity: 0.1;background: rgba(0,0,0,0.2);border-width: 0;}
  12% {width: 2em;height: 2em;opacity: 0.4;background: rgba(0,0,0,0.2);border-width: 0;}
  50% { width: 2em;height: 2em;background: #2786fb;border: 0;opacity: 0.6;}
  100% {width: 2em;height: 2em;background: #2786fb;border: 0;opacity: 1;}
}
.ko_label__checkbox:checked + .ko_label__text .ko_label__check_danger { animation: ko_check_danger .2s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards; }
@keyframes ko_check_danger {
  0% {width: 2em;height: 2em;border-width: 0;}
  10% {width: 2em;height: 2em;opacity: 0.1;background: rgba(0,0,0,0.2);border-width: 0;}
  12% {width: 2em;height: 2em;opacity: 0.4;background: rgba(0,0,0,0.2);border-width: 0;}
  50% { width: 2em;height: 2em;background: #F02F4D;border: 0;opacity: 0.6;}
  100% {width: 2em;height: 2em;background: #F02F4D;border: 0;opacity: 1;}
}
.ko_label__checkbox:checked + .ko_label__text .ko_label__check_success { animation: ko_check_success .2s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards; }
@keyframes ko_check_success {
  0% {width: 2em;height: 2em;border-width: 0;}
  10% {width: 2em;height: 2em;opacity: 0.1;background: rgba(0,0,0,0.2);border-width: 0;}
  12% {width: 2em;height: 2em;opacity: 0.4;background: rgba(0,0,0,0.2);border-width: 0;}
  50% { width: 2em;height: 2em;background: #00B96A;border: 0;opacity: 0.6;}
  100% {width: 2em;height: 2em;background: #00B96A;border: 0;opacity: 1;}
}
.ko_label__checkbox:checked + .ko_label__text .ko_label__check_primary { animation: ko_check_primary .2s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards; }
@keyframes ko_check_primary {
  0% {width: 2em;height: 2em;border-width: 0;}
  10% {width: 2em;height: 2em;opacity: 0.1;background: rgba(0,0,0,0.2);border-width: 0;}
  12% {width: 2em;height: 2em;opacity: 0.4;background: rgba(0,0,0,0.2);border-width: 0;}
  50% { width: 2em;height: 2em;background: #5867dd;border: 0;opacity: 0.6;}
  100% {width: 2em;height: 2em;background: #5867dd;border: 0;opacity: 1;}
}
.ko_label__checkbox:checked + .ko_label__text .ko_label__check_warning { animation: ko_check_warning .2s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards; }
@keyframes ko_check_warning {
  0% {width: 2em;height: 2em;border-width: 0;}
  10% {width: 2em;height: 2em;opacity: 0.1;background: rgba(0,0,0,0.2);border-width: 0;}
  12% {width: 2em;height: 2em;opacity: 0.4;background: rgba(0,0,0,0.2);border-width: 0;}
  50% { width: 2em;height: 2em;background: #ffb822;border: 0;opacity: 0.6;}
  100% {width: 2em;height: 2em;background: #ffb822;border: 0;opacity: 1;}
}
.ko_label__checkbox:checked + .ko_label__text .ko_label__check_dark { animation: ko_check_dark .2s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards; }
@keyframes ko_check_dark {
  0% {width: 2em;height: 2em;border-width: 0;}
  10% {width: 2em;height: 2em;opacity: 0.1;background: rgba(0,0,0,0.2);border-width: 0;}
  12% {width: 2em;height: 2em;opacity: 0.4;background: rgba(0,0,0,0.2);border-width: 0;}
  50% { width: 2em;height: 2em;background: #464856;border: 0;opacity: 0.6;}
  100% {width: 2em;height: 2em;background: #464856;border: 0;opacity: 1;}
}
.ko_label__checkbox:checked + .ko_label__text .ko_label__check_light { animation: ko_check_light .2s cubic-bezier(0.895, 0.030, 0.685, 0.220) forwards; color: black !important;}
@keyframes ko_check_light {
  0% {width: 2em;height: 2em;border-width: 0;}
  10% {width: 2em;height: 2em;opacity: 0.1;background: rgba(0,0,0,0.2);border-width: 0;}
  12% {width: 2em;height: 2em;opacity: 0.4;background: rgba(0,0,0,0.2);border-width: 0;}
  50% { width: 2em;height: 2em;background: #e4e8ee;border: 1;opacity: 0.6;}
  100% {width: 2em;height: 2em;background: #e4e8ee;border: 1;opacity: 1;}
}

.kt-radio.ko-radio--success.kt-radio--disabled {
  opacity: 0.8; }

.kt-radio.ko-radio--success > span {
  border: 1px solid #00B96A; }
  .kt-radio.kt-radio--success > span:after {
    border: solid #00B96A;
    background: #00B96A; }

.kt-radio.ko-radio--success > input:disabled ~ span:after {
  border-color: #00B96A; }

.kt-radio.ko-radio--success > input:checked ~ span {
  border: 1px solid #00B96A; }

.kt-radio.ko-radio--success.kt-radio--bold > input:checked ~ span {
  border: 2px solid #00B96A; }

.kt-radio.ko-radio--success > input:disabled ~ span {
  opacity: 0.6; }

.kt-radio.ko-radio--success.kt-radio--solid > span {
  /*background: #00B96A;*/
  border: 1px solid transparent !important; }

.kt-radio.ko-radio--success.kt-radio--solid > span:after {
    border: solid #ffffff;
    background: #ffffff; }

.kt-radio.ko-radio--success.kt-radio--solid > input:focus ~ span {
  border: 1px solid transparent !important; }

.kt-radio.ko-radio--success.kt-radio--solid > input:checked ~ span {
  background: #00B96A; }

.kt-radio.ko-radio--info.kt-radio--disabled {
  opacity: 0.8; }

.k0-zoom20{zoom:2;}
.k0-zoom15{zoom:1.5;}
.k0-zoom13{zoom:1.3;}
.k0-zoom09{zoom:0.9;}
.k0-zoom07{zoom:0.7;}
.k0-zoom05{zoom:0.5;}

.ko-title {
    height: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 800;
    border-width: 1px;
}
.ko-title:focus{
    color: #495057;
    background-color: #fff;
    border-color: #0480E0;
    border-width: 1px;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 103, 221, 0.25);
    box-shadow: 0 0 0 0.2rem rgba(88, 103, 221, 0.25);

}.ko-title::placeholder{
    color: #a5a5a5;
}
.ko-border-b-solid{border-bottom: 1px solid #ebedf2;padding-bottom: 0.8rem;}
.ko-border-b-dash{border-bottom: 1px dashed #ebedf2;padding-bottom: 0.8rem;}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.ko_scroll_auto{
    overflow-x:auto;
    overflow-y:auto;
}
.ko_scroll_hidden{
    overflow-x:hidden;
    overflow-y:hidden;
}
.carousel-caption {
    position: absolute;
    top: 0;
    text-align: left;
    left: inherit;
    right: inherit;
    color:#000;
}

.carousel-caption:not(#caption-0) {
    display: none;
}

.ko_bg_cover_center{
  background-size: cover !important;
  background-position: center;
}
.ko_cover{
  object-fit: cover;
}

.ko_btn{
  display: flex;
  align-items: center;
  width: 170px;
  height: 50px;
  background:linear-gradient(94.91deg, #F9A91A 1.3%, #F0645E 69.22%);
  border-radius: 30px 30px 30px 2px;
  padding: 0 10px 0 25px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  transition: all .3s ease;
  cursor: pointer;
}
/*#F0645E*/
.ko_btn:hover{
  background:linear-gradient(30.91deg, #36a3f7 2.3%, #3658d4 69.22%);
  font-size: 13.5px;
}
.btn-pink {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background:linear-gradient(94.91deg, #F9A91A 1.3%, #F0645E 69.22%);
  border-color: #f599c3; }
.btn-pink:hover {
  color: #fff;
  background:linear-gradient(30.91deg, #F9A91A 2.3%, #F0645E 69.22%);
  font-size: 14.2px; }

.ko_lang {
  border-radius: 5px;box-sizing: unset; width: 22px; border:1px solid rgba(235, 237, 242, 0.9) ;
}
.ko-bg-brand {
  background: #36a3f7;
  background: -webkit-linear-gradient(45deg, #36a3f7 0%, #3658d4 100%)!important;
  background: linear-gradient(45deg, #36a3f7 0%, #3658d4 100%)!important;}
.ko-bg-info {
  background: #36a3f7;
  background: -webkit-linear-gradient(45deg, #36a3f7 0%, #1ae6f0 100%)!important;
  background: linear-gradient(45deg, #36a3f7 0%, #1ae6f0 100%)!important;}
.ko-bg-danger {
  background: #ff0844;
  background: -webkit-linear-gradient(45deg, #ff0844, #ffb199)!important;
  background: linear-gradient(45deg, #ff0844 0%, #ffb199 100%)!important;}
.ko-bg-warning {
  background: #F9A91A;
    background: -webkit-linear-gradient(45deg, #F9A91A 0%, #ffeb3b 100%)!important;
    background: linear-gradient(45deg, #F9A91A 0%, #ffeb3b 100%)!important;}
.ko-bg-success {
  background: #00b09b;
  background: -webkit-linear-gradient(45deg, #00b09b, #96c93d)!important;
  background: linear-gradient(45deg, #00b09b, #96c93d)!important;}
.ko-bg-dark {
  background: #283048;
    background: -webkit-linear-gradient(45deg, #283048, #859398)!important;
    background: linear-gradient(45deg, #283048, #859398)!important;}
.ko-bg-pink2 {
  background: #f599c3;
    background: -webkit-linear-gradient(45deg, #f599c3, #ffdada)!important;
    background: linear-gradient(45deg, #f599c3, #ffdada)!important;}
.ko-bg-pink {
  background: #f54ea2;
    background: -webkit-linear-gradient(45deg, #f54ea2, #ffdada)!important;
    background: linear-gradient(45deg, #f54ea2, #ffdada)!important;}

.kt-portlet {
  border-radius: 20px 20px 20px 20px !important;}

.kt-header__topbar .kt-header__topbar-item .kt-header__topbar-wrapper .kt-badge:not(.kt-badge--username) {
    left: 60% !important;
    width: 15px !important;
    height: 15px !important;
    top: 24px !important;
    font-size: 0.670rem;
}
 .kt-notification .kt-notification__item.kt-notification__item--read {
    opacity: 0.9 !important;
    background: #dfdfdf;
     }
.btn.btn-icon.btn-xs, .btn-group-xs > .btn.btn-icon {
    height: 1.7rem;
    width: 1.7rem;
}
.btn.btn-icon.btn-icon-xs [class^="fa-"],
.btn.btn-icon.btn-icon-xs [class*=" fa-"] {
  font-size: 0.99rem; }
.kt-notification .kt-notification__item .kt-notification__item-details .kt-notification__item-title{
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #393b45 !important;
}
.kt-notification .kt-notification__item .kt-notification__item-details .kt-notification__item-time {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.ko-radius {
  border-radius: 27px 27px 27px 27px !important;}
.ko-radius-1 {
  border-radius: 0px 27px 27px 27px !important;}
.ko-radius-2 {
  border-radius: 27px 0px 27px 27px !important;}
.ko-radius-3 {
  border-radius: 27px 27px 0px 27px !important;}
.ko-radius-4 {
  border-radius: 27px 27px 27px 0px !important;}

.ko-loading {
    animation: timeline;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
}
@keyframes timeline {
  0% {
    background-position: -350px 0;
}
  100% {
    background-position: 400px 0; }
}
.portlet
.ko-spin {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.ko-spin div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50% 50% 0% 50%;
  background: linear-gradient(30.91deg, #36a3f7 2.3%, #3658d4 69.22%);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.ko-spin div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.85s infinite;
}
.ko-spin div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.85s infinite;
}
.ko-spin div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.85s infinite;
}
.ko-spin div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.85s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}


.kt-badge__pic{
  width: 3.5rem !important;
  height: 3.5rem !important;
}
.kt-badge__pic-male{
  background-color: #dcecfe !important;
  color: #2786fb !important;
}
.kt-badge__pic-female{
  background-color: #ffdcfc !important;
  color: #F02F4D !important;
}