gk_se_web_report/public/assets/css/all.css

/*IMPORT FONT*/

@font-face {
  font-family: "iCiel-Alina";
  src: url(../fonts/iCiel-Alina.otf);
}

@font-face {
  font-family: "Myriadpro-Regular";
  src: url(../fonts/MYRIADPRO-REGULAR.woff);
}

@font-face {
  font-family: "Myriadpro-Bold";
  src: url(../fonts/MYRIADPRO-BOLD.woff);
}

@font-face {
  font-family: "Myriadpro-SemiBold";
  src: url(../fonts/MYRIADPRO-SEMIBOLD.woff);
}

@font-face {
  font-family: "Myriadpro-Light";
  src: url(../fonts/MYRIADPRO-LIGHT_0.OTF);
}

@font-face {
  font-family: "Myriadpro-Italic";
  src: url(../fonts/MyriadProCondensedItalic.ttf);
}

@font-face {
  font-family: "MyriadPro-Bold";
  src: url(../fonts/myriad-pro/MYRIADPRO-BOLD.OTF);
}

@font-face {
  font-family: "MyriadPro-SemiBold";
  src: url(../fonts/myriad-pro/MYRIADPRO-SEMIBOLD.OTF);
}

@font-face {
  font-family: "MyriadPro";
  src: url(../fonts/myriad-pro/MYRIADPRO-REGULAR.OTF);
}

/* AvertaStd */
@font-face {
  font-family: "AvertaStdCY-Black";
  src: url(../fonts/AvertaStdCY-Black_1.otf);
}
@font-face {
  font-family: "AvertaStdCY-ExtraBold";
  src: url(../fonts/AvertaStdCY-Extrabold_1.otf);
}
@font-face {
  font-family: "AvertaStdCY-ExtraBoldItalic";
  src: url(../fonts/AvertaStdCY-ExtraboldItalic_1.otf);
}
@font-face {
  font-family: "AvertaStdCY-Bold";
  src: url(../fonts/AvertaStdCY-Bold_1.otf);
}

@font-face {
  font-family: "AvertaStdCY-SemiBold";
  src: url(../fonts/AvertaStdCY-Semibold_1.otf);
}

@font-face {
  font-family: "AvertaStdCY";
  src: url(../fonts/AvertaStdCY-Regular_3.otf);
}
@font-face {
  font-family: "AvertaStdCY-Italic";
  src: url(../fonts/AvertaStdCY-RegularItalic_1.otf);
}


@font-face {
  font-family: 'Barlow-Bold';
  src: url(../fonts//Barlow-Bold.ttf);
}


:root {
  --primary-color: #00CC83;
  --second-color: #FF9F00;
  --button-bg-color: #FF9F00;
  --text-color: #4D4D4D;
  --height-header: 64px;
  --width-sidebar: 78px;
}

html {
  font-size: 62.5%;
}

@media screen and (max-height: 800px) { 
  :root {
    --height-header: 42px;
    --width-sidebar: 68px;
  }

  html {
    font-size: 50%;
  }
}

/*END IMPORT FONT*/
/*RESET CSS*/
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  /* font-family: "Myriadpro-Regular"; */
  font-family: "AvertaStdCY";
  font-size: 1.6rem;
  color: #4D4D4D;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
html,
body {
  /* height: 100%; */
  width: 100%;
}

html {
  scroll-behavior: smooth;
}

html:has(.modal_filter_mocktest),
html:has(.modal_not_scroll),
body:has(.modal_filter_mocktest),
body:has(.modal_not_scroll) {
  overflow: hidden !important;
  height: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
headLr,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
  -webkit-padding-start: 0;
  -moz-padding-start: 0;
  padding-inline-start: 0;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

ul {
  list-style: none;
}

input {
  /* font-family: "Myriadpro-Regular"; */
  font-family: "AvertaStdCY";
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  color: #4e4e4e;
}

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Change CSS UI modal select as div option */

.home_curriculum .select-styled {
  z-index: 1002 !important;
}

.home_curriculum .select-options {
  top: 14px !important;
}

input,
select {
  vertical-align: middle;
}

button {
  outline: none;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

.__bg_layout_parent_and_student {
  height: 100%;
  width: 100%;
  object-fit: contain;
  background: #fff;
}

body > iframe[style*="2147483647"] {
  display: none;
}

/*END RESET CSS*/
/*GENERAL CSS*/
.flex,
.flex-m {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.width-100-percent {
  width: 100% !important;
}

.__icon_close_filter {
  height: 18px;
}

.btn-custom-width {
  width: 100% !important;
  margin: 0px 10px;
  padding: 0px 25px !important;
}

.btn-add-class-custom {
  padding: 0px 70px !important;
}

.select-avatar-class-custom {
  height: 68px;
  display: flex;
  align-items: center;
  padding: 0px 10px !important;
}

.select-avatar-class-custom img {
  height: 53px;
}

.select-avatar-class-custom p {
  margin-left: 10px !important;
}

.flex-1 {
  flex: 1;
}

.clear {
  clear: both;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right !important;
}

.text-trans {
  text-transform: uppercase;
}

.disable-mobile {
  display: block;
}

.enable-mobile {
  display: none;
}

.rel {
  position: relative;
}

.sunE-container {
  width: 100%;
  height: auto;
  /* max-width: 1200px; */
  margin: 0 auto;
  padding: 0;
}

.form-sunE-button .btn-check-custom {
  padding: 0px 50px;
  /* margin-top: 60px; */
}

.bg-main {
  background: #f3ffff;
}

.min-hei-100 {
  min-height: 100vh;
}

.bold {
  font-family: "Myriadpro-Bold";
}

a:hover {
  color: #00b9b7;
}

/*END GENERAL CSS*/
/*SIDEBAR MENU*/
.sunE-logo {
  cursor: pointer;
}

.sunE-sidebar {
  display: flex;
  height: 100vh;
  -webkit-box-flex: 0;
  background-color: rgba(172, 241, 228, 0.66);
  flex: 0 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-transition: margin-left 250ms ease-out,
    -webkit-transform 250ms ease-out;
  transition: margin-left 250ms ease-out, -webkit-transform 250ms ease-out;
  transition: margin-left 250ms ease-out, transform 250ms ease-out;
  transition: margin-left 250ms ease-out, transform 250ms ease-out,
    -webkit-transform 250ms ease-out;
  width: 292px;
}

.calendar .day-calendar-custom {
  height: 40px;
  padding: 0px 12px;
  margin-bottom: 5px;
  margin-top: 12px;
}

.day-container .day-box {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(100% / 7 - 0px);
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 100%; */
}

.day-container .day-box .day-cell {
  min-width: 40px;
  min-height: 40px;
  margin: 5px 0px;
}

.sunE-sidebar-header svg {
  margin: 12px 8px 0 0;
  cursor: pointer;
}

.list-menu-i {
  margin-top: 20px;
  padding: 0 20px;
}

.list-menu-i-logout {
  padding-bottom: 3vh;
}

.list-menu-i .menu-img {
  width: 68px;
  max-height: 36px;
}

.list-menu-i-logout .menu-img img {
  width: 37px;
}

.list-menu-i .menu-img.active .ico_default {
  display: none;
}

.list-menu-i .menu-img .ico_active {
  display: none;
}

.list-menu-i .menu-img.active .ico_active {
  display: block;
}

.list-menu-i a.menu-item {
  font-size: 16px;
  color: #404041;
  line-height: 34px;
  align-items: center;
  padding: 12px 0 12px 40px;
  text-decoration: none;
  margin: 8px 0;
}

.list-menu-i a.menu-item.active {
  background: #fff;
  border-radius: 30px;
}

.list-menu-i a.menu-item span {
  font-size: 16px;
  color: #404041;
}

.list-menu-i a.menu-item:hover {
  text-decoration: none;
  background: #fff;
  border-radius: 30px;
}

.badge-student span {
  text-transform: uppercase;
  line-height: 30px !important;
  color: #fc9d24 !important;
}

.list-menu-i .active span {
  font-weight: bolder;
  font-size: 17px !important;
}

.empty-plan-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

.hide-date-custom {
  display: none !important;
}

.empty-plan-custom img {
  width: 316px;
  object-fit: cover;
}

.empty-plan-custom span {
  color: #00a79d;
  font-size: 24px;
  font-weight: bold;
  width: 316px;
  text-align: center;
  text-transform: uppercase;
}

.sunE-right-container {
  width: 100%;
  height: 100vh;
  overflow: auto;
  padding: 30px 20px 20px;
  position: relative;
}

.sunE-main-title {
  margin: 0 0 20px;
}

.sunE-main-title .line-h {
  display: block;
  width: 4px;
  height: 40px;
  background: #00bbb5;
  border-radius: 2px;
  border: none;
}

.sunE-main-title h1 {
  font-size: 32px;
  font-family: "Myriadpro-SemiBold";
  color: #00bbb5;
  line-height: 40px;
  padding-left: 8px;
}

.list-menu-custom {
  width: 300px;
}

.btn-gr {
  margin: 0 0 10px;
  background: #b7f3e5;
  border-radius: 15px;
  height: 60px;
  cursor: pointer;
  overflow: hidden;
}

.btn-gr.active {
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
}

.btn-gr .ico_active {
  display: none;
}

.btn-gr.active .ico_active {
  display: block;
  margin: 0 auto;
}

.btn-gr.active .ico_default {
  display: none;
}

.btn-gr-img {
  width: 100px;
  text-align: center;
  padding: 13px 0;
}

.btn-gr-text p {
  font-size: 18px;
  font-family: "Myriadpro-Bold";
  color: #00a79d;
  line-height: 60px;
}

.btn-gr.active .btn-gr-text p {
  color: #fff;
}

.sunE-content-box {
  padding: 0 0 0 30px;
}

.sunE-content-box.pad-0 {
  padding: 0;
}

.box-shadow {
  box-shadow: 1px 2px 4px 0 rgba(21, 27, 38, 0.4);
}

.box-shadow-2 {
  box-shadow: 1px 2px 6px 0 rgb(21 27 38 / 35%);
}

.box-white-content {
  background: #fff;
  border-radius: 15px;
  border: none;
  margin: 0 0 15px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.title-no-bg {
  color: #8f9a96;
  text-align: center;
  padding: 15px 0;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border: none;
  font-size: 22px;
  font-family: "Myriadpro-Bold";
  margin: 0 0 15px;
}

.title-bg {
  color: #fff;
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
  text-align: center;
  padding: 15px 0;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border: none;
  font-size: 22px;
  font-family: "Myriadpro-Bold";
  margin: 0 0 15px;
}

.text-light {
  font-family: "Myriadpro-Light";
}

.box-white-content p {
  font-size: 16px;
  text-align: center;
  margin: 0;
  padding: 0 0 15px;
}

.het-han {
  color: #8f9a96;
  text-align: center;
  padding: 5px 15px;
  border: 1px solid #8f9a96;
  font-size: 22px;
  font-family: "Myriadpro-Bold";
  margin: 0 0 15px;
}

.box-white-content {
  padding: 0 0 15px;
}

.text-title-blue {
  color: #00a69c;
  font-family: "Myriadpro-Bold";
  font-size: 18px;
}

.btn-send {
  margin-top: 40px;
}

.input-nm {
  background: #eee;
  color: #000;
  height: 40px;
  line-height: 40px;
  outline: none;
  border: none;
  border-radius: 20px;
  padding-left: 20px;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin: 0 0 15px;
  font-size: 16px;
  color: #000;
}

.input-nm::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1;
  /* Firefox */
}

.input-nm:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #000;
}

.input-nm::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #000;
}

.pad-box {
  padding: 30px 20px 0;
}

.box-buy-history .title-bg {
  padding: 5px 0;
}

.box-buy-history .price {
  background: #e6e7e8;
  color: #1b75bb;
  font-size: 32px;
  height: 60px;
  line-height: 60px;
  border: none;
  border-radius: 16px;
  padding: 0;
  text-align: center;
}

.box-buy-history p {
  padding: 0 0 8px;
  text-align: left;
}

.box-buy-history-price {
  padding: 0 20px;
}

.box-buy-history-time {
  padding-left: 20px;
}

.small {
  font-size: 18px;
}

.list-buy-history {
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 0 15px 10px 30px;
}

.list-buy-history::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.list-buy-history::-webkit-scrollbar-track {
  background: #bbcbc3;
  border-radius: 4px;
}

/* Handle */
.list-buy-history::-webkit-scrollbar-thumb {
  background: #00bbb6;
  border-radius: 4px;
}

.bg-main-site {
  background: #effff7;
}

.slider-custom {
  max-width: 440px;
  margin: 0 auto;
}

.slider-custom .uk-position-small {
  margin: 0;
}

.slider-custom .uk-slidenav-next svg,
.slider-custom .uk-slidenav-previous svg {
  display: none !important;
}

.slider-custom .uk-slidenav {
  padding: 86px 5px;
  border-radius: 8px;
  background: #f5fefa;
  box-shadow: 0 1px 3px 0 rgba(21, 27, 38, 0.15);
}

.slider-item-content {
  margin: 10px 30px;
  padding: 5px 0 0;
}

.slider-custom .uk-position-small[class*="uk-position-center-left"],
.slider-custom .uk-position-small[class*="uk-position-center-right"] {
  transform: translateY(-50%) translateY(0px);
}

.slider-custom .uk-dotnav > * > * {
  width: 14px;
  height: 14px;
  border: 1px solid #00bbb6;
}

.slider-custom .uk-dotnav > .uk-active > * {
  background-color: #00bbb6;
  border-color: transparent;
}

.slider-custom .uk-dotnav > * > :focus,
.slider-custom .uk-dotnav > * > :hover {
  background-color: #00bbb6;
}

.slider-custom .slick-next:before,
.slider-custom [dir="rtl"] .slick-prev:before,
.slider-custom .slick-prev:before {
  display: none;
}

.slider-custom .slick-arrow {
  background: #fff;
  padding: 86px 5px;
  position: absolute;
  border-radius: 10px;
  border: none;
  z-index: 9;
  text-align: center;
}

.slider-custom .slick-next,
.slider-custom .slick-prev {
  width: 31px;
  height: auto;
}

.slider-custom .slick-arrow.slick-next {
  left: calc(100% - 17px);
}

.slider-custom .slick-arrow.slick-prev {
  left: -16px;
}

.slider-custom .slick-next:before,
.slider-custom .slick-prev:before {
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: #fff;
}

.slider-custom .slick-dots li button:before {
  font-size: 16px;
  color: #00a79d;
}

.item-top-title {
  margin: 5px 10px;
  background: #d9ecf2;
  padding: 5px 0;
  border-radius: 10px;
}

.item-top-title p {
  text-align: center;
  font-size: 20px;
  padding: 0;
  color: #262261;
}

.item-price {
  margin: 5px 0;
  background: #f5f5f5;
}

.item-price p {
  text-align: center;
  font-size: 28px;
  padding: 0;
  color: #d34e42;
}

.item-time {
  padding: 0 30px;
  margin: 20px 0 20px;
}

.item-time p,
.item-time span {
  font-size: 16px;
  padding: 0;
  color: #000;
  text-align: left;
}

.item-time .text-red {
  color: #d34e42;
}

.btn-show-hide {
  width: 100%;
  padding-top: 30px;
  height: 1px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow: hidden;
}

.btn-desc {
  background: #bbf7e4;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  text-align: center;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.box-white-content .btn-desc img {
  margin-top: 8px;
}

.info .btn-desc img {
  transform: rotate(180deg);
}

.hide {
  display: none !important;
}

.list-info {
  padding: 0 20px;
  margin: 20px 0;
}

.item-list {
  margin: 0 0 10px;
}

.info-list-title {
  color: #000;
  font-family: "Myriadpro-Bold";
  font-size: 18px;
  margin: 0;
  padding: 0 0 20px;
}

.item-list-img {
  margin-right: 15px;
}

.item-list p {
  color: #404041;
  text-align: left;
}

.bg-yellow {
  background: #f1f3b9;
}

.chosen-class {
  margin: 0 auto;
  text-align: center;
}

.chosen-class select {
  width: 380px;
  height: 40px;
  border-radius: 20px;
  border: none;
  outline: none;
  text-align-last: center;
  box-shadow: 0 1px 8px 0 rgba(21, 27, 38, 0.15);
  font-size: 16px;
  font-family: "Myriadpro-Bold";
  padding-right: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Remove default arrow */
  background: url("./../images/icon/ico_dropdown.png") 96% / 20px no-repeat #fff;
  /* Add custom arrow */
}

.chosen-class select::-ms-expand {
  display: none;
  /* remove default arrow on ie10 and ie11 */
}

.chosen-class.err select {
  border: 2px solid #e22028;
}

.chosen-class select option {
  text-align: center;
}

.__status_excercise_home_std {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff6b;
}

/*END SIDEBAR MENU*/
/*GIAO VIEN*/

.bg-header-entrance-score {
  background-image: url('./../images/entrance_header.png');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: bottom;
}

.bg-body-entrance-score {
  background-image: url('./../images/entrance_body.png');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: bottom;
}

.bg-auth-img{
  width: 100%;
  height: 100vh;
  background-image: url("./../imgs/bg/bg_auth.png");
  background-position: bottom;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bg-main-img{
  width: 100%;
  height: 100%;
  background-image: url("./../imgs/bg/bg_main.png");
  background-position: bottom;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bg-sub-main-img {
  width: 100%;
  height: 100%;
  background-image: url("./../imgs/bg/bg_sub_main.png");
  background-position: bottom;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bg-sub-main-green-img {
  width: 100%;
  height: 100%;
  background-image: url("./../imgs/bg/bg_sub_main_green.png");
  background-position: bottom;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bg-outstanding-img {
  width: 100%;
  height: 100%;
  background-image: url("./../imgs/bg/bg_outstanding.png");
  background-position: bottom;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.bg-main-color {
  background-image: linear-gradient(to top, #fafffd, #e1fef0);
}

.sunE-container-box {
  padding: 50px 20px 20px;
}

.sunE-calendar {
  padding-right: 10px;
}

.calendar {
  width: 100%;
  background: #fff;
  border-radius: 20px;
}

.sunE-plan {
  padding-left: 10px;
}

.no-plan h2 {
  font-family: "Myriadpro-SemiBold";
  font-size: 24px;
  padding: 0;
  margin: 0;
  color: #00a79d;
}

.no-plan .form-sunE-button {
  margin: 10px 0 0;
}

.sunE-box-slider {
  margin: 20px 0;
}

.slider-custom-2 {
  max-width: 860px;
  margin: 0 auto;
}

.slider-custom-2 .uk-position-small {
  margin: 0;
}

.slider-custom-2 .uk-slidenav-next svg,
.slider-custom-2 .uk-slidenav-previous svg {
  display: none !important;
}

.slider-custom-2 .uk-slidenav {
  padding: 14px 16px;
  border-radius: 12px;
  background-image: linear-gradient(to bottom, #00e1a0, #00b9b7);
  box-shadow: 0 1px 3px 0 rgba(21, 27, 38, 0.15);
}

.slider-item-content {
  margin: 10px 30px;
  padding: 5px 0 0;
}

.slider-item-content img {
  margin: auto;
}

.slider-custom-2 .uk-position-center-left-out {
  right: calc(100% - 30px);
}

.slider-custom-2 .uk-position-center-right-out {
  left: calc(100% - 30px);
}

.slider-custom-2 .uk-dotnav > * > * {
  width: 14px;
  height: 14px;
  border: 1px solid #00bbb6;
}

.slider-custom-2 .uk-dotnav > .uk-active > * {
  background-color: #00bbb6;
  border-color: transparent;
}

.slider-custom-2 .uk-dotnav > * > :focus,
.slider-custom-2 .uk-dotnav > * > :hover {
  background-color: #00bbb6;
}

.slider-custom-2 .slick-next:before,
.slider-custom-2 [dir="rtl"] .slick-prev:before,
.slider-custom-2 .slick-prev:before {
  display: none;
}

.slider-custom-2 .slick-arrow {
  background: #00bbb6;
  padding: 14px 16px;
  position: absolute;
  border-radius: 10px;
  border: none;
  z-index: 9;
  text-align: center;
}

.slider-custom-2 .slick-next,
.slider-custom-2 .slick-prev {
  width: 48px;
  height: auto;
}

.slider-custom-2 .slick-arrow.slick-next {
  left: calc(100% - 35px);
}

/* Slider for student homepage */
.slider-custom-student .slick-arrow.slick-next {
  left: calc(100% - 75px);
}

.slider-custom-2 .slick-arrow.slick-prev {
  left: -16px;
}

/* Slider for student homepage */
.slider-custom-student .slick-arrow.slick-prev {
  left: 28px;
}

.slider-custom-2 .slick-next:before,
.slider-custom-2 .slick-prev:before {
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: #fff;
}

.slick-dots {
  bottom: -45px !important;
}

.slider-custom-student .slick-dots {
  position: relative !important;
  bottom: 0 !important;
  margin: 0.25rem 0 0.65rem;
}

.slider-custom-2 .slick-dots li button:before {
  font-size: 16px;
  color: #00a79d;
  background-color: #00a79d;
  content: "";
  border-radius: 50%;
  width: 14px;
  height: 14px;
}

.img-thumb {
  margin: 10px;
  width: 270px;
  height: 240px;
  border-radius: 10px;
  overflow: hidden;
}

.img-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.slider-item-desc {
  padding: 0 10px;
  box-sizing: border-box;
}

.item-top-title-main {
  margin: 10px 0;
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
  padding: 10px 0;
  border-radius: 25px;
}

.item-top-title-main p {
  text-align: center;
  font-size: 20px;
  padding: 0;
  color: #fff;
  font-family: "Myriadpro-SemiBold";
}

.chart-content {
  width: 100%;
  padding: 0 10px;
}

.chart-content canvas {
  margin-left: -35px;
  margin-top: 35px;
}

.calendar-text-tb {
  font-size: 18px;
  font-family: "Myriadpro-Bold";
  color: #00a79d;
}

.slider-custom-2 .slider-item-content {
  margin: 10px;
  padding: 0 15px;
}

.align-item-center {
  align-items: center;
}

.box-no-class .center-horizontal {
  padding-top: 80px;
}

.btn-img {
  display: inline-block;
}

.btn-img img {
  position: absolute;
  top: 8px;
  left: 15px;
  width: 24px;
}

.btn-img .btn-line-blue {
  padding-left: 50px;
}

.plan-item {
  background: #fff;
  border-radius: 10px;
  border: none;
  margin: 0 0 10px;
  /* border-left: 20px solid #fbb040; */
  overflow: hidden;
  height: 80px;
}
.personal.plan-item {
  border-left: 20px solid #8dc63f;
}

.test_evaluation.plan-item {
  border-left: 20px solid #c367f4;
}

.teaching_work.plan-item {
  border-left: 20px solid #00aeef;
}

.professional_activities.plan-item {
  border-left: 20px solid #fbb040;
}

.other.plan-item {
  border-left: 20px solid #be1e2d;
}

.plan-item:last-child {
  margin: 0 0 2px;
}

.plan-item-content {
  width: 100%;
  padding: 10px 40px 10px 10px;
}

.check-work {
  color: #000;
  font-family: "Myriadpro-SemiBold";
  font-size: 18px;
  padding: 0 0 0 10px;
  margin: 0 !important;
  line-height: 20px;
  width: 99%;
}

.width_70_percent {
  width: 70% !important;
}

.plan-item-content p {
  font-size: 18px;
  padding-left: 10px;
}

.his {
  margin-top: -5px;
  width: 111px;
}

.orange span,
.red span,
.success-text span {
  color: #fbb040;
  font-size: 14px;
  font-family: "Myriadpro-Bold";
  line-height: 30px;
  padding-left: 5px;
}

.red span {
  color: #be1e2d;
}

.success-text span {
  color: #84c241;
}

.btn-plan-item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  cursor: pointer;
}

.sunE-plan-list {
  max-height: 356px;
  overflow: auto;
  padding-right: 12px;
}

.homepage-teacher .sunE-plan-list-home {
  max-height: 24.8rem;
}

.sunE-plan-list::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.sunE-plan-list::-webkit-scrollbar-track {
  background: #bbcbc3;
  border-radius: 4px;
}

/* Handle */
.sunE-plan-list::-webkit-scrollbar-thumb {
  background: #00bbb6;
  border-radius: 4px;
}

.edit-plan-box {
  width: 166px;
  background: #b7f2e4;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -166px;
  transition: margin 0.6s ease;
  padding-top: 5px;
}

.edit-plan-box .flex-m {
  width: 166px;
}

.edit-plan-box .btn p {
  font-size: 18px;
  line-height: 18px;
}

.btn {
  cursor: pointer;
}

.plan-item-content .show-edit-box {
  display: none;
}

.edit-show .plan-item-content .hide-edit-box {
  display: none;
}

.edit-show .plan-item-content .show-edit-box {
  display: block;
}

.edit-show .edit-plan-box {
  margin-right: 0;
  transition: margin 0.6s ease;
}

.edit-show .plan-item-content {
  margin-left: -166px;
  transition: margin 0.6s ease;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.btn-sign-out {
  position: absolute;
  right: 20px;
  bottom: 50px;
}

.setting-content {
  text-align: center;
}

.setting-list {
  display: inline-block;
  max-width: 480px;
  margin: 80px 0 0;
}

.setting-box {
  padding: 20px 20px 0;
  display: inline-block;
  width: 125px;
  height: 125px;
  background: #fff;
  margin: 30px 30px 0 0;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
}

.setting-box img {
  margin: auto;
}

.setting-box p {
  line-height: 14px;
}

.top-8 {
  margin-top: 8px;
}

.top-16 {
  margin-top: 16px;
}

.sunE-no-class p {
  font-size: 18px;
  padding: 0;
  margin: 0;
  color: #000;
}

.sunE-no-class p .bold {
  color: #000;
  font-size: 18px;
}

.sunE-class-list {
  box-sizing: border-box;
}

.class-box {
  box-sizing: border-box;
  padding: 15px;
  border-radius: 20px;
  background: #fff;
  display: inline-block;
}

.class-box a {
  display: block;
  text-decoration: none;
}

.class-box a:hover {
  text-decoration: none;
}

.class-box .class-box-img {
  width: 145px;
  height: 120px;
  overflow: hidden;
}

.class-box .class-box-img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.title-line-blue {
  font-size: 20px;
  line-height: 24px;
  padding: 8px;
  text-align: center;
  border-radius: 20px;
  color: #fff;
  font-family: "Myriadpro-SemiBold";
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
}

.class-box-desc {
  padding: 0 0 0 15px;
}

.class-box-desc .title-line-blue {
  margin: 0 0 15px;
}

.class-box-desc p,
.class-box-desc span {
  font-size: 18px;
  margin: 0;
  padding: 0;
  font-family: "Myriadpro-Regular";
}

.class-offline {
  color: #be1e2d;
  text-transform: uppercase;
}

.class-online {
  color: #00a69c;
  text-transform: uppercase;
}

.sunE-class-content {
  padding-top: 40px;
}

.sunE-class-content .uk-grid > * {
  padding-left: 20px;
  padding-bottom: 20px;
}

.sunE-class-content .class-box {
  width: 100%;
  height: 100%;
}

.sunE-class-list {
  padding-right: 20px;
  max-height: calc(100vh - 225px);
  padding-bottom: 30px;
  overflow: auto;
}

.sunE-class-list::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.sunE-class-list::-webkit-scrollbar-track {
  background: #bbcbc3;
  border-radius: 4px;
}

/* Handle */
.sunE-class-list::-webkit-scrollbar-thumb {
  background: #00bbb6;
  border-radius: 4px;
}

.img-upload {
  width: 100%;
  height: 500px;
  background: #fff;
  border-radius: 20px;
  border: none;
}

.sunE-create-class-img .height-330 {
  height: 330px;
}

.avt-img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.avt-img img {
  width: 100%;
  height: 100%;
}

.avt-img #preview-avatar {
  object-fit: cover;
}

.img-gray {
  background: #ccc;
}

.upload-img {
  width: 88px;
  height: 55px;
  border-radius: 10px;
  border: none;
}

.upload-gr {
  background: #b2f1e6;
  width: 260px;
  padding: 10px;
  border-radius: 20px;
  border: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.upload-gr p {
  font-size: 18px;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 55px;
  font-family: "Myriadpro-Light";
}

.bg-line-blue select {
  background: linear-gradient(to right, #00e1a0, #00b9b7);
  color: #fff;
}

.sunE-class-info {
  padding-left: 30px;
}

.sunE-class-info select {
  width: 100%;
}

.class-on-off {
  margin: 10px 0 40px;
}

.class-on-off input {
  margin: -3px 8px 0 0;
  width: 20px;
  height: 20px;
  outline: none;
  /*box-shadow: 0 1px 6px 0 rgba(21, 27, 38, .15);*/
}

.class-on-off .err label {
  color: #e22028;
}

.class-on-off label {
  font-size: 16px;
  font-family: "Myriadpro-Semibold";
  color: #000;
}

.red {
  color: #ff0000;
}

.sunE-input-group {
  margin: 0 0 15px;
}

.sunE-input-group label {
  display: block;
  margin: 0;
  padding: 0 0 10px;
  font-family: "Myriadpro-Semibold";
  font-size: 18px;
  color: #000;
}

.sunE-input-group input {
  width: 100%;
  height: 44px;
  border: 1px solid #fff;
  border-radius: 18px;
  box-shadow: 0 1px 6px 0 rgba(21, 27, 38, 0.15);
  padding: 0 20px;
  box-sizing: border-box;
  outline: none;
  /* font-family: ; */
}

.sunE-input-group.err input {
  border-color: #e22028;
}

.class-slect-time {
  margin: 30px 0 0;
}

.class_slect_time_margin {
  margin: 20px 0 0 !important;
}

.select-gr {
  display: flex;
}

.select-gr select {
  width: 40px;
  height: 50px;
  border-radius: 10px;
  background: #00a69c;
  color: #fff;
  outline: none;
  border: none;
  box-shadow: 0 1px 6px 0 rgba(21, 27, 38, 0.15);
  margin: 0 8px 0 0;
  text-align-last: center;
  font-size: 16px;
  font-family: "Myriadpro-Semibold";
}

.select-gr select option {
  padding: 8px;
  text-align: center;
  text-align-last: center;
  background: #fff;
  color: #000;
  font-family: "Myriadpro-Regular";
}

.select-gr select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
.select-gr select::-ms-expand {
  display: none;
}

/* Select time Center */
.select-time-center input {
  text-align: center;
}

.class-index-box {
  box-sizing: border-box;
  padding: 15px;
  border-radius: 20px;
  background: #fff;
  display: inline-block;
  width: 100%;
}

.class-index-box .class-index-box-img {
  width: 280px;
  height: 237px;
}

.class-index-box .class-index-box-img img {
  width: 100%;
  height: 100%;
}

.class-index-box .class-box-desc .class-on {
  margin: 0 0 20px;
  display: block;
}

.info-gr {
  margin: 0 0 10px;
}

.info-gr .info-img {
  width: 30px;
}

.info-gr .info-img img {
  margin-top: 2px;
}

.info-gr .info-con {
  padding: 0 0 0 15px;
}

.info-gr .info-con p {
  font-size: 16px;
  font-family: "Myriadpro-Light";
  line-height: 30px;
}

.info-gr img {
  height: 22px;
  cursor: pointer;
}

.class-select-content {
  width: 100%;
  margin: auto;
  text-align: center;
}

.class-select-list {
  display: inline-block;
  max-width: 700px;
  margin: 80px 0 0;
}

.class-select-box {
  padding: 20px 0px 0;
  display: inline-block;
  width: 160px;
  height: 160px;
  background: #fff;
  margin: 0 5px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
}

.class-select-box img {
  margin: auto;
}

.class-select-box .select-img {
  height: 90px;
}

.class-select-box p {
  font-size: 16px;
  padding: 10px 0 0;
  margin: 0;
}

.bcht-calendar {
  text-align: center;
  margin: 0 0 40px;
}

.bcht-calendar input {
  width: 500px;
  height: 44px;
  border: none;
  border-radius: 18px;
  box-shadow: 0 1px 6px 0 rgba(21, 27, 38, 0.15);
  padding: 0 0 0 20px;
  box-sizing: border-box;
}

.student-list-container {
  width: 380px;
}

.custom-list-student {
  padding: 20px;
  border-radius: 20px;
  background: #fff;
}

.custom-list-student-2 {
  padding: 3px;
  box-shadow: 1px 2px 4px 0 rgb(21 27 38 / 40%);
  border-radius: 20px;
  background: #fff;
}

.list-student {
  max-height: calc(100vh - 270px);
  overflow: auto;
}

.list-student::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.list-student::-webkit-scrollbar-track {
  background: #bbcbc3;
  border-radius: 4px;
}

/* Handle */
.list-student::-webkit-scrollbar-thumb {
  background: #00cfab;
  border-radius: 4px;
}

.sunE-title-medium {
  font-size: 22px;
  margin: 0;
  padding: 0 0 20px;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.item-student {
  margin: 0 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  padding: 10px;
}

.item-student .stt {
  line-height: 70px;
  font-size: 16px;
  font-family: "Myriadpro-Bold";
  width: 30px;
}

.item-student .item-student-img {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background: #ccc;
  overflow: hidden;
}

.item-student .item-student-img.bd-orange {
  box-sizing: border-box;
  border: 2px solid #e7c71d;
}

.item-student .item-student-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item-student-name-container {
  max-width: 65%;
}
.item-student-name {
  padding: 0 0 0 20px;
}

.ranks .item-student-name {
  max-width: 70%;
}

.item-student-name p {
  line-height: 24px;
  font-size: 16px;
}

.add_student_container {
  padding-bottom: 0;
  overflow: hidden !important;
}

.justify-content-end {
  justify-content: end;
}

.justify-content-center {
  justify-content: center;
}

.__btn-cancel,
.__btn-register {
  height: 35px !important;
  width: 120px !important;
}

.background-add-student {
  height: calc(100vh - 90px);
  width: 100%;
  object-fit: contain;
  background: #fff;
}

.show_img {
  width: 8px;
}

.calendar .fix-nowap-row-calendar {
  min-width: 280px;
  /* max-width: 300px; */
  flex-wrap: nowrap;
}

.min-width-custom-200 {
  min-width: 200px;
}

.add_student {
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: calc(100vh - 100px);
  width: 100%;
  position: relative;
}

.add_code_student_custom {
  width: 470px;
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%, 0%);
}

.add_code_student_custom {
  width: 470px;
  position: absolute;
  left: 50%;
  top: 548px;
  transform: translate(-50%, -50%);
}

.add_code_student_custom.err input {
  border-color: #e22028;
}

.add_code_student_custom .ico_err {
  display: none;
  position: absolute;
  top: 5px;
  right: 15px;
}

.add_code_student_custom .sunE-input-border-blue-gr.err .ico_err {
  display: block;
  width: 25px;
}

.add_code_student_custom .form-sunE-button {
  margin: 20px 0 0;
}

.add_code_student_custom .sunE-title-medium {
  padding: 0 0 10px;
  margin-bottom: 20px;
}

.add_code_student_custom p.red {
  font-size: 16px;
  display: none;
}

.noti-message-custom {
  position: relative;
}

/* .noti-message-custom .icon-noti-mess{
    height: 35px;
} */

.noti-message-custom .count-noti-custom {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #be1e2d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 3px;
}

.add_code_student_custom.err p.red {
  display: block;
}

.empty-err-custom {
  height: 3vh;
}

.add_code_student_custom .error-help {
  margin: 0px;
  width: 100%;
}

.bottom-10 {
  margin-bottom: 10px;
}

.bottom-60 {
  margin-bottom: 60px;
}

.bottom-30 {
  margin-bottom: 30px;
}

.upload-gr .upload-img {
  height: 53px;
}

.add_code_student-bottom-60 {
  transform: translate(-50%, 0%);
  bottom: 30px;
  top: auto;
}

.sunE-input-border-blue-gr {
  max-width: 420px;
  margin: 0 auto 10px;
}

.horizontal-center {
  display: flex;
  align-items: center;
}

.horizontal-center .ico_input {
  top: auto !important;
  left: auto !important;
  margin-left: 5px;
}

.input-hide-arrow::-webkit-outer-spin-button,
.input-hide-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.input-hide-arrow[type="number"] {
  -moz-appearance: textfield;
}

.sunE-input-border-blue-gr input {
  width: 100%;
  height: 44px;
  border: 2px solid #399098;
  border-radius: 22px;
  /* text-align: center; */
  padding: 0 50px;
  box-sizing: border-box;
  outline: none;
}

.__posistion_custom {
  top: 0px !important;
  left: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  margin: auto !important;
  transform: none !important;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding-bottom: 30px;
}

.__posistion_custom .sunE-title-medium {
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.add_code_student-gr.err input {
  border-color: #e22028;
}

.add_code_student-gr .ico_err {
  display: none;
  position: absolute;
  top: 5px;
  right: 15px;
}

.add_code_student-gr .sunE-input-border-blue-gr.err .ico_err {
  display: block;
}

.add_code_student-gr .form-sunE-button {
  margin: 20px 0 0;
}

.add_code_student-gr .sunE-title-medium {
  padding: 0 0 10px;
}

.add_code_student-gr p.red {
  font-size: 16px;
  display: none;
}

.add_code_student-gr.err p.red {
  display: block;
}

.sunE-input-border-blue-gr .ico_input {
  position: absolute;
  /* top: 5px; */
  left: 7px;
}

.sunE-no-student .add_code_student-gr {
  top: 510px;
}

.class_student_list .sunE-title-medium {
  font-size: 18px;
}

.class_student_list_box {
  padding: 20px;
  border-radius: 20px;
  border: none;
  background: #fff;
  height: calc(100vh - 220px);
  overflow: auto;
}

.h-160.class_student_list_box {
  height: calc(100vh - 160px);
}

.btn-remove-student {
  padding-top: 20px;
  cursor: pointer;
}

.btn-user-add,
.btn-user-share {
  margin-right: 8px;
}

.btn-user-add img,
.btn-user-share img {
  width: 40px;
}

.sh-num {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  background: #f70000;
  position: absolute;
  top: -4px;
  right: -4px;
  border-radius: 10px;
  font-family: "Myriadpro-SemiBold";
}

.dk_class .select-all {
  padding: 10px;
  /* margin-right: 30px; */
  padding-right: 39px;
}

.change_point_checkbox_add_exercise {
  padding-right: 45px !important;
}

.dk_class .select-all label {
  font-size: 16px;
  font-family: "Myriadpro-SemiBold";
  color: #000;
}

.dk_class .select-all input {
  margin: -3px 0 0 10px;
  width: 16px;
  height: 16px;
}

.btn-check-gr {
  padding-top: 20px;
}

.btn-check-gr input {
  margin: -3px 10px 0 0;
  width: 16px;
  height: 16px;
}

.btn-check-gr .btn-accept {
  background: #eb8923;
  color: #fff;
  width: 115px;
  height: 30px;
  border-radius: 15px;
  outline: none;
  border: none;
  text-align: center;
  margin-right: 5px;
}

.btn-check-gr .btn-reject {
  background: #bcbdbf;
  color: #fff;
  width: 115px;
  height: 30px;
  border-radius: 15px;
  outline: none;
  border: none;
  text-align: center;
}

.btn-accept-reject-select-gr {
  margin: 20px 0;
}

.btn-accept-reject-select-gr .btn-select-custom {
  background-image: linear-gradient(to top, #00b9b7, #00e1a0);
  color: #fff;
  width: 120px;
  height: 40px;
  border-radius: 20px;
  outline: none;
  border: none;
  text-align: center;
  font-size: 16px;
  font-family: "Myriadpro-SemiBold";
}

.btn-select-custom.btn-reject {
  margin-right: 10px;
}

.btn-accept-reject-select-gr .btn-select-custom.no-accept {
  background: #bcbdbf;
}

.lichngay .list-menu-custom .btn-gr {
  height: 50px;
}

.lichngay .list-menu-custom .btn-gr-text p {
  line-height: 50px;
  font-size: 18px;
}

.sunE-main-title .form-sunE-button.btn-create-kh {
  margin-right: 10px;
}

.box-calender {
  width: 100%;
  margin: 0 0 30px;
}

.lichngay .list-menu-custom {
  width: 340px;
}

.list-kh-content {
  padding: 20px;
}

.no-kh {
  text-align: center;
  margin: 60px auto 0;
}

.no-kh h2 {
  font-family: "Myriadpro-Bold";
  font-size: 18px;
  color: #00a79d;
  text-align: center;
}

.plan-item-content {
  width: 100%;
}

.lichngay .sunE-plan-list {
  max-height: 420px;
  padding: 0 20px;
}

.sunE-box-tkh,
.sunE-box-xkh {
  width: 100%;
  padding: 30px 30px 0;
}

.input-gr {
  width: 100%;
  margin: 0 0 20px;
}

.laplai {
  width: 100%;
  margin: 0 0 20px;
  padding-left: 15px;
}

.input-gr label,
.laplai label,
.ct-hs label.ht {
  font-family: "Myriadpro-SemiBold";
  font-size: 18px;
  color: #000000;
  display: block;
  padding: 0 0 10px 15px;
}

.input-gr input,
.input-gr select {
  width: 100%;
  height: 40px;
  outline: none;
  border: none;
  border-radius: 20px;
  padding: 5px 20px;
  box-shadow: 0 1px 6px 0 rgba(21, 27, 38, 0.15);
  box-sizing: border-box;
  font-family: "Myriadpro-Regular";
  font-size: 16px;
  background: #fff;
}

.input-gr textarea {
  width: 100%;
  height: 100px;
  outline: none;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  box-shadow: 0 1px 6px 0 rgba(21, 27, 38, 0.15);
  box-sizing: border-box;
  font-family: "Myriadpro-Regular";
  background: #fff;
  font-size: 16px;
}

.input-gr textarea::placeholder,
.input-gr input::placeholder,
.input-gr select::placeholder {
  color: #414042 !important;
}

.input-gr textarea::-ms-input-placeholder,
.input-gr input::-ms-input-placeholder,
.input-gr select::-ms-input-placeholder {
  color: #414042 !important;
}

.input-gr textarea::-webkit-input-placeholder,
.input-gr input::-webkit-input-placeholder,
.input-gr select::-webkit-input-placeholder {
  color: #414042 !important;
}

.message textarea {
  resize: none;
}

.datlichnhac-input-gr {
  /* text-align: center; */
}

.custom-input::placeholder {
  opacity: 0.5;
}

.datlichnhac-input-gr input.dln-mins {
  width: 100px;
  height: 40px;
  outline: none;
  border: none;
  border-radius: 20px;
  padding: 5px 20px;
  box-shadow: 0 1px 6px 0 rgba(21, 27, 38, 0.15);
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
}

.datlichnhac-input-gr input.dln-check {
  width: 20px;
  height: 20px;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin: 0 10px 0 0;
}

.datlichnhac-input-gr .left {
  padding-right: 10px;
  font-size: 16px;
}

.datlichnhac-input-gr .right {
  padding-left: 10px;
  font-size: 16px;
}

.datlichnhac.err .datlichnhac-input-gr input.dln-mins {
  border: 2px solid #e22028;
}

.input-gr.err input,
.input-gr.err select,
.input-gr.err textarea {
  border: 2px solid #e22028;
}

.input-gr input::placeholder,
.input-gr textarea::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000;
  opacity: 1;
  /* Firefox */
}

.input-gr input:-ms-input-placeholder,
.input-gr textarea::placeholder {
  /* Internet Explorer 10-11 */
  color: #000;
}

.input-gr input::-ms-input-placeholder,
.input-gr textarea::placeholder {
  /* Microsoft Edge */
  color: #000;
}

.sunE-time-lcv .time {
  padding-right: 10px;
}

.sunE-time-lcv .time input {
  background: #a2eddf;
}

.sunE-time-lcv .lcv {
  padding-left: 10px;
}

.sunE-time-lcv .lcv select {
  padding-left: 10px;
}

.laplai p {
  line-height: 24px;
  padding-left: 0;
}

.laplai p span {
  line-height: 24px;
  font-family: "Myriadpro-Light";
  font-size: 16px;
}

.laplai input {
  margin: -2px 10px 0 0;
}

.laplai p > input[type="radio"]:checked + *::before {
  background: radial-gradient(
    #84c241 0%,
    #84c241 40%,
    transparent 50%,
    transparent
  );
}

.apdung label {
  display: block;
  margin: 15px 0;
  font-family: "Myriadpro-SemiBold";
  font-size: 18px;
  color: #000000;
  padding: 0 0 10px 15px;
}

.text-blue-main {
  color: #00a79d;
  font-family: "Myriadpro-SemiBold";
  font-size: 18px;
  padding-left: 40px;
}

.apdung .flex-1 img {
  margin: 20px 0 0 10px;
  cursor: pointer;
}

.sunE-box-xkh p {
  text-align: center;
  font-size: 18px;
  font-family: "Myriadpro-Light";
  margin: 0 0 15px;
}

.title-list-lichnam h2 {
  font-size: 24px;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  font-family: "Myriadpro-Bold";
  background: #00a79d;
  border-radius: 15px;
  border: none;
}

.w-120 {
  width: 120px;
}

.title-list-lichnam {
  margin: 0 0 15px;
}

.title-list-lichnam .flex-1 {
  margin-left: 10px;
}

.list-lichnam-item .w-120 {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 1px 6px 0 rgba(21, 27, 38, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-lichnam-item {
  margin: 0 0 10px;
}

.list-lichnam-item .w-120 p {
  font-size: 22px;
  text-align: center;
  font-family: "Myriadpro-Bold";
  margin: 0;
  padding: 0;
  min-height: 100px;
  line-height: 100px;
}

.list-lichnam-item .flex-1 {
  margin-left: 10px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 1px 6px 0 rgba(21, 27, 38, 0.15);
  padding: 10px 10px 35px 20px;
}

.list-lichnam-item .flex-1 p {
  font-size: 16px;
  font-family: "Myriadpro-Light";
  margin: 0;
  padding: 0;
}

.btn-capnhat {
  color: #00a79d;
  text-decoration: underline;
  font-size: 16px;
  font-family: "Myriadpro-SemiBold";
  position: absolute;
  bottom: 0.3rem;
  right: 3rem;
  cursor: pointer;
}

.__top {
  bottom: 30px;
  top: auto !important;
}

.flex-center-custom {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 0px !important;
}

.flex-center-custom input {
  width: 46px !important;
}

.list-lichnam-box {
  max-height: calc(100vh - 210px);
  overflow: auto;
  padding-right: 10px;
}

.custom-area::-webkit-input-placeholder {
  opacity: 0.5;
}

.scrollbar-custom {
  overflow: auto;
}

.scrollbar-custom::-webkit-scrollbar {
  width: 6px;
}

.style_scroll_overflowing_curriculum_favorite {
  max-height: calc(100vh - 280px) !important;
}

/* Track */
.scrollbar-custom::-webkit-scrollbar-track {
  background: #bbcbc3;
  border-radius: 4px;
}

/* Handle */
.scrollbar-custom::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

.scrollbar-custom-2::-webkit-scrollbar {
  width: 7px;
}

/* Track */
.scrollbar-custom-2::-webkit-scrollbar-track {
  background: #bbcbc3;
  border-radius: 4px;
  margin: 15px;
}

/* Handle */
.scrollbar-custom-2::-webkit-scrollbar-thumb {
  background: #00bbb6;
  border-radius: 4px;
}

/* Scroll Custom Transparent bg */
.scrollbar-custom-3::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.scrollbar-custom-3::-webkit-scrollbar-track {
  /* background: #bbcbc3; */
  border-radius: 4px;
  margin: 10px 0;
}

/* Handle */
.scrollbar-custom-3::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* SCROLL 4 */
/* Scroll Custom Transparent bg */
.scrollbar-custom-4::-webkit-scrollbar {
  width: 8px;
}

/* SCROLL PURPLE */
.scrollbar-custom-purple::-webkit-scrollbar {
  width: 7px;
}

/* Track */
.scrollbar-custom-purple::-webkit-scrollbar-track {
  background: #bbcbc3;
  border-radius: 4px;
}

/* Handle */
.scrollbar-custom-purple::-webkit-scrollbar-thumb {
  background: #2e3192;
  border-radius: 4px;
}

/* Track */
.scrollbar-custom-4::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin: 10px 0;
}

/* Handle */
.scrollbar-custom-4::-webkit-scrollbar-thumb {
  background: #ececec;
  border-radius: 4px;
}

/* Scroll5 */
/* Scroll Custom Transparent bg */
.scrollbar-custom-5::-webkit-scrollbar {
  width: 13px;
}

/* Track */
.scrollbar-custom-5::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  /* margin: 10px 0; */
}

/* Handle */
.scrollbar-custom-5::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

/* Scroll Orange */
/* Scroll Custom Transparent bg */
.scrollbar-custom-orange::-webkit-scrollbar {
  width: 6px;
}

/* Track */
.scrollbar-custom-orange::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 8px;
  margin: 14px 0;
}

/* Handle */
.scrollbar-custom-orange::-webkit-scrollbar-thumb {
  background: #dfb937;
  border-radius: 6px;
}

.btn-create-taomoi img {
  position: absolute;
  left: 15px;
  top: 9px;
}

.sunE-main-title .btn-create-taomoi.form-sunE-button,
.sunE-main-title .btn-create-datlai.form-sunE-button {
  margin-right: 10px;
}

.btn-create-taomoi button,
.btn-create-datlai button {
  padding: 0 35px 0 60px;
}

.btn-create-datlai img {
  position: absolute;
  left: 15px;
  top: 7px;
}

.w60 {
  width: 66px;
}

.tkb-day {
  display: flex;
}

.tkb-day p {
  text-align: center;
  font-size: 16px;
  color: #2ecdc0;
  font-family: "Myriadpro-Regular";
  padding-right: 20px;
}

.sunE-tkb-hour {
  display: flex;
}

.sunE-tkb-hour .w60 {
  border: 1px solid #a7a9ac;
  border-right: none;
  border-top: none;
  height: 88px;
}

.tkb-table .sunE-tkb-hour:first-child .w60 {
  border-top: 1px solid #a7a9ac;
}

.tkb-table .sunE-tkb-hour .w60.tkb-time {
  border: none;
  display: flex;
  align-items: flex-end;
  position: relative;
}

.tkb-table .borderTop50 {
  position: absolute;
  border-top: 1px solid #a7a9ac;
  top: 0;
  left: 50%;
  width: 100%;
}

.tkb-table .borderBottom50 {
  position: absolute;
  border-bottom: 1px solid #a7a9ac;
  bottom: 0;
  left: 50%;
  width: 100%;
}

.tkb-time p {
  font-size: 16px;
  color: #414042;
  font-family: "Myriadpro-SemiBold";
  text-align: right;
  padding-right: 10px;
  display: block;
  width: 100%;
}

.tkb-item {
  width: 66px;
  position: absolute;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.tkb-item h2 {
  color: #fff;
  font-size: 14px;
  font-family: "Myriadpro-Bold";
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 18px;
  width: 60px;
  max-height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0 0 5px;
}

.tkb-item p {
  color: #fff;
  font-size: 14px;
  font-family: "Myriadpro-Light";
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 16px;
}

.tkb-table {
  max-height: calc(100vh - 200px);
  overflow: auto;
  padding-right: 5px;
}

.flex-column {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.select-time input {
  width: 180px;
  margin: 13px 0 0 15px;
  background: #a2eddf;
}

.select-time .react-datepicker-wrapper .react-datepicker__input-container {
  z-index: 10;
}

/*END GIAO VIEN*/
/*GIAO TRINH*/
.pr-15 {
  padding-right: 15px;
}

.pl-15 {
  padding-left: 15px;
}

.pr-25 {
  padding-right: 25px;
}

.pl-25 {
  padding-left: 25px;
}

.sunE-select-gt {
  margin-top: 83px;
}

.box-select-gr {
  background: #fff;
  border-radius: 20px;
  padding: 30px 0 30px 32px;
  margin: 0 0 15px 20px;
  cursor: pointer;
  box-sizing: border-box;
}

.box-select-gr .thumb {
  position: absolute;
  top: -2px;
  left: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccedeb;
  border: 5px solid #fff;
  border-radius: 50%;
  width: 104px;
  height: 104px;
  box-shadow: 0 1px 8px 0 rgba(21, 27, 38, 0.24);
}

.box-select-info p {
  color: #221f1f;
  font-size: 18px;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 20px;
}

.box-select-info h2 {
  color: #00a69c;
  font-size: 18px;
  font-family: "Myriadpro-Bold";
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 20px;
  text-transform: uppercase;
}

.box-select-file-full {
  flex: 1;
}
.box-select-file-full p {
  flex: 1;
  text-align: left;
}

.box-giaotrinh-gr {
  background: #fff;
  border-radius: 20px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 30px 20px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0 15px 0 60px;
  width: 100%;
}

.giaobai-support.uk-container .box-giaotrinh-gr {
  margin: 0 0 0 20px;
}

.__input_score_exercise {
  /* color: rgb(183, 178, 178); */
  width: 80%;
  border: none;
  text-align: center;
}

.__input_score_exercise::placeholder {
  opacity: 0.5;
}

.__input_score_exercise:focus {
  outline: none;
}

.box-giaotrinh-gr .thumb {
  position: absolute;
  top: -5px;
  left: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  box-shadow: 0 1px 8px 0 rgba(21, 27, 38, 0.24);
}

.box-giaotrinh-gr .thumb3 {
  position: absolute;
  top: -5px;
  left: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccedeb;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 75px;
  height: 75px;
  box-shadow: 0 1px 8px 0 rgba(21, 27, 38, 0.24);
}

.box-giaotrinh-gr .thumb img {
  width: 65px;
  height: 65px;
  object-fit: contain;
}

.box-giaotrinh-gr .thumb3 img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.box-giaotrinh-gr .thumb2 {
  position: absolute;
  top: 5px;
  left: -30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 90px;
  height: 90px;
}

.gtcn-menu-gr {
  margin: 0 0 20px;
}

.gtcn-menu-gr span {
  color: #373737;
  font-size: 24px;
  font-family: "Myriadpro-SemiBold";
  margin-right: 30px;
  cursor: pointer;
}

.gtcn-menu-gr span.active {
  color: #00bbb6;
  border-bottom: 2px solid #00bbb6;
}

.box-select-info span {
  display: block;
  font-family: "Myriadpro-Light";
  font-size: 16px;
}

.box-giaotrinh-gr.hei-custom {
  height: 102px;
  justify-content: flex-start;
}

.box-giaotrinh-gr.hei-custom .thumb {
  top: 13px;
}

.box-giaotrinh-gr.hei-custom .thumb3 {
  top: 13px;
}

.box-giaotrinh-gr.hei-custom .box-select-info p {
  margin: 0 0 5px;
}

.btn-disable {
  cursor: not-allowed;
  /* background: #70707070 !important; */
  background: #c1c1c1 !important;
  pointer-events: none;
}

.box-giaotrinh-gr.hei-custom.active {
  background: #c3fdf3;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.box-giaotrinh-gr.hei-custom.edit .box-select-info p {
  text-align: left;
}

.box-giaotrinh-gr.hei-custom.edit {
  height: 150px;
  padding: 0 15px 0 30px;
  margin: 0 0 20px 0;
}

.sunE-main-title .form-sunE-button.btn-filter {
  margin-right: 10px;
}

.btn-filter-custom {
  justify-content: center;
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.btn-filter-custom img {
  margin-right: 6px;
}

.btn-filter img {
  position: absolute;
  top: 12px;
  left: 15px;
}

.btn-filter button {
  padding: 0 35px 0 45px;
}

.sunE-container-box.filter {
  padding: 20px 20px 0 20px;
}

.sunE-container-box.filter.pad-t-0 {
  padding: 0 20px 0 20px;
}

.sunE-giaotrinh-resuft-filter {
  background: #fff;
  padding: 20px 30px;
  border-radius: 20px;
  max-height: calc(100vh - 230px);
  margin: 0 0 15px;
  overflow: auto;
}

.span-title {
  color: #000;
  font-size: 16px;
  font-family: "Myriadpro-SemiBold";
  margin: 0 0 10px;
  display: block;
}

.sunE-giaotrinh-item {
  margin: 0 0 10px;
}

.sunE-giaotrinh-item .img {
  width: 120px;
  height: 108px;
}

.sunE-giaotrinh-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sunE-giaotrinh-item .content {
  padding-left: 20px;
  padding-top: 10px;
}

.sunE-giaotrinh-item .content h2.title {
  color: #00a69c;
  font-family: "Myriadpro-Bold";
  font-size: 18px;
  line-height: 22px;
  margin: 0 0 5px;
}

.sunE-giaotrinh-item .content .easy {
  background: #6ebf49;
  color: #fff;
  padding: 3px 10px;
  border: none;
  border-radius: 5px;
}

.sunE-giaotrinh-item .content .medium,
.sunE-giaotrinh-item .content .normal {
  background: #fbb040;
  color: #fff;
  padding: 3px 10px;
  border: none;
  border-radius: 5px;
}

.sunE-giaotrinh-item .content .hard {
  background: #be1e2d;
  color: #fff;
  padding: 3px 10px;
  border: none;
  border-radius: 5px;
}

.sunE-giaotrinh-item .content h3.desc {
  color: #00a69c;
  font-family: "Myriadpro-Light";
  font-size: 18px;
  line-height: 22px;
  margin: 0 0 10px;
}

.sunE-giaotrinh-item .content p,
.sunE-giaotrinh-item .content span {
  font-family: "Myriadpro-Light";
  font-size: 18px;
  line-height: 22px;
  margin: 0 0 10px;
}

.sunE-giaotrinh-item .chk-gr {
  position: absolute;
  display: flex;
  bottom: 0;
  right: 0;
}

.sunE-giaotrinh-item .chk-gr input {
  width: 25px;
  height: 25px;
  margin: 0 0 0 10px;
}

.btn-bar {
  margin-right: 10px;
  cursor: pointer;
  width: 64px;
}

.btn-bar img {
  height: 40px;
}

.bar-select {
  margin: 0 20px 0 20px;
}

.bar-select select {
  width: 100%;
  height: 40px;
  padding-left: 40px;
  border-radius: 20px;
  border: none;
  outline: none;
  box-shadow: 0 1px 8px 0 rgba(21, 27, 38, 0.15);
  font-size: 16px;
  font-family: "Myriadpro-SemiBold";
  padding-right: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Remove default arrow */
  background: url("./../images/icon/ico_dropdown.png") 97% / 20px no-repeat #fff;
  /* Add custom arrow */
}

.sunE-content-unit {
  max-width: 100%;
  overflow: auto;
}

.sunE-content-unit::-webkit-scrollbar {
  display: none;
}

.sunE-unit-list {
  display: inline-flex;
}

.sunE-unit-item {
  width: 187px;
}

.sunE-unit-item .h-287 {
  height: 287px;
}

.sunE-unit-item h2 {
  font-size: 22px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Myriadpro-Regular";
}

.sunE-unit-item p {
  font-size: 16px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Myriadpro-Light";
}

.cs-point {
  cursor: pointer;
}

.giaotrinh.unit .box-giaotrinh-gr {
  padding: 0 15px 0 50px;
  margin: 0 0 20px 20px;
}

.giaotrinh.unit .sunE-giaotrinh-list,
.giaotrinh.unit .unit-list {
  max-height: calc(100vh - 210px);
  overflow: auto;
  padding: 0 25px 0 20px;

  @media screen and (max-height: 800px){
  max-height: calc(100vh - 130px);

  }
}

.giaotrinh.unit .unit-list {
  padding: 0 80px 0 100px;
}

.giaotrinh.unit .unit-list .box-giaotrinh-gr {
  border-radius: 32px;
  height: 50px;
}

.giaotrinh.unit .box-giaotrinh-gr-first {
  background: #fff;
  padding: 15px 0;
  text-align: center;
  border-radius: 20px;
  margin: 0 0 20px -10px;
  width: calc(100% + 30px);
}

.padding_box_giaotrinh_gr_frist {
  padding: 15px 0 15px 50px !important;
}

.giaotrinh.unit .box-giaotrinh-gr-first h2 {
  font-size: 24px;
  margin: 0;
  padding: 15px 0;
  text-align: center;
  font-family: "Myriadpro-Bold";
}

.giaotrinh.unit .box-giaotrinh-gr-first img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.giaotrinh.unit .unit-list .box-giaotrinh-gr {
  padding: 0 45px 0 25px;
  margin: 0 0 10px 0;
  justify-content: flex-start;
}

.box-unit-info p,
.box-unit-info p span {
  font-size: 16px;
}

.unit-list .unit-giaotrinh-content.active {
  background: rgba(106, 248, 239, 0.3);
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  padding-bottom: 10px;
}

.btn-more-info {
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 20px;
  background: #d3d2d1;
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
}

.btn-more-info img {
  margin: 0;
}

.unit-list .unit-giaotrinh-content.active {
  margin-bottom: 10px;
}

.unit-list .unit-giaotrinh-content .unit-more-info {
  display: none;
}

.unit-list .unit-giaotrinh-content.active .unit-more-info {
  display: block;
  border-bottom: 1px solid #000;
}

.unit-list .unit-giaotrinh-content.active a:last-child .unit-more-info {
  border-bottom: none;
}

.unit-more-info-item {
  padding: 10px 0;
  border-bottom: 1px solid #fff;
}

.unit-more-info-item:last-child {
  border-bottom: none;
}

.unit-more-info-item .score {
  width: 60px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.unit-more-info-item .score .score-box {
  width: 40px;
  height: 40px;
  text-align: center;
  background: #fff;
  border-radius: 50%;
}

.info-item-desc h2 {
  font-size: 16px;
  line-height: 20px;
  margin: 0;
  padding: 0;
  font-family: "Myriadpro-SemiBold";
  color: #000;
  margin-right: 5px;
}

.info-item-desc p {
  font-size: 16px;
  line-height: 20px;
  margin: 0;
  padding: 0;
  color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-right: 5px;
  max-width: 290px;
  max-height: 20px;
}

.score-box {
  padding: 2px 0 0;
}

.score-box h2 {
  font-size: 20px;
  line-height: 20px;
  margin: 0;
  padding: 0;
  font-family: "Myriadpro-Bold";
  color: #e3001b;
}

.score-box span {
  font-size: 12px;
  line-height: 12px;
  margin: 0;
  padding: 0;
  font-family: "Myriadpro-Light";
  display: block;
}

.percent {
  width: 42px;
  height: 42px;
}

.line-h-44 {
  padding: 0;
  line-height: 44px;
}

.check-box-gr {
  margin: 10px 0;
}

.check-box-gr input {
  margin: -3px 8px 0 0;
  width: 20px;
  height: 20px;
  outline: none;
  /*box-shadow: 0 1px 6px 0 rgba(21, 27, 38, .15);*/
}

.check-box-gr .err label {
  color: #e22028;
}

.check-box-gr label {
  font-size: 16px;
  font-family: "Myriadpro-Semibold";
  color: #000;
}

/*END GIAO TRINH*/
/*TEACHER GIAO BAI*/
.btn-giaobai-gr {
  margin: 20px 0 0;
}

.btn-giaobai-gr .btn-line-blue {
  padding: 0 50px;
}

.sunE-giaobai-list {
  background: #fff;
  padding: 20px 30px;
  border-radius: 20px;
  max-height: calc(100vh - 230px);
  margin: 0 0 15px;
  overflow: auto;
}

.sunE-giaobai-list .sunE-giaotrinh-item {
  padding-bottom: 10px;
  border-bottom: 1px solid #777777;
}

.sunE-giaobai-list .sunE-giaotrinh-item:last-child {
  border-bottom: none;
}

.giaotrinh.pad-t-0 .sunE-giaotrinh-resuft-filter .sunE-giaotrinh-item {
  padding-bottom: 10px;
  border-bottom: 1px solid #777777;
}

.giaotrinh.pad-t-0
  .sunE-giaotrinh-resuft-filter
  .sunE-giaotrinh-item:last-child {
  border-bottom: none;
}

.pl-20 {
  padding-left: 20px;
}

.semibold {
  font-family: "Myriadpro-Semibold";
}

.nhacnho-content textarea {
  width: 100%;
  height: 80px;
  outline: none;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  box-shadow: 0 1px 6px 0 rgb(21 27 38 / 15%);
  box-sizing: border-box;
  font-family: "Myriadpro-Regular";
  font-size: 16px;
  resize: none;
  margin: 0 0 10px;
}

.nhacnho-content .datlichnhac-input-gr input.dln-mins {
  width: 80px;
}

.err-nhacnho {
  margin: 10px 0;
  display: none;
}

.err-nhacnho p {
  color: #e22028;
  font-family: "Myriadpro-Light";
}

.err-nhacnho img {
  margin: 15px 0 0;
}

.err.err-nhacnho {
  display: flex;
}

.box-giaotrinh-gr.active {
  background: #c3fdf3;
}

.teacher-giaobai .unit-list .box-giaotrinh-gr {
  padding: 0 25px;
  margin: 0 0 10px 0;
  justify-content: flex-start;
}

.unit-list .unit-giaotrinh-content.active a:last-child .unit-more-info {
  border-bottom: none;
}

.ythich.sunE-giaotrinh-resuft-filter {
  max-height: calc(100vh - 235px);
}

.sunE-container-box.teacher-giaotrinh-yt {
  padding: 10px 20px 0 20px;
}

.sunE-main-title .form-sunE-button.btn-setting {
  margin-right: 10px;
}

.btn-setting img {
  position: absolute;
  top: 6px;
  left: 15px;
}

.btn-setting button {
  padding: 0 35px 0 50px;
}

.box-info-giaobai {
  background: #fff;
  padding: 28px 20px;
  border-radius: 20px;
}

.box-info-giaobai h2.title {
  color: #00a69c;
  font-family: "Myriadpro-Bold";
  font-size: 18px;
  line-height: 22px;
  margin: 0 0 5px;
}

.box-info-giaobai h3.desc {
  color: #00a69c;
  font-family: "Myriadpro-Light";
  font-size: 18px;
  line-height: 22px;
  margin: 0 0 30px;
}

.box-info-giaobai p {
  font-family: "Myriadpro-Light";
  font-size: 18px;
  line-height: 22px;
  margin: 0 0 10px;
}

.semibold.box-info-giaobai p {
  font-family: "Myriadpro-Semibold";
}

.box-info-giaobai.semibold p {
  font-family: "Myriadpro-Semibold";
}

.pr-10 {
  padding-right: 10px;
}

.pl-10 {
  padding-left: 10px;
}

.menu-gr {
  margin: 0 0 15px;
}

.menu-gr button.btn-line-blue {
  background-image: linear-gradient(to right, #b7f3e4, #b7f3e4);
  border-radius: 5px;
  width: 100%;
  color: #00bbb5;
}

.menu-gr button.btn-line-blue.active {
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
  color: #fff;
}

.list-giaobai .item-student {
  background: #fff;
  border-radius: 20px;
  padding: 10px;
  /* margin-right: 15px; */
}

.item-student-name h2 {
  font-family: "Myriadpro-Semibold";
  font-size: 18px;
  line-height: 22px;
  margin: 10px 0 10px;
}

.item-student-name span {
  font-size: 18px;
  line-height: 26px;
  padding-left: 10px;
  font-family: "Myriadpro-Light";
}

.item-student .score {
  background: #be1e2d;
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: none;
  box-sizing: border-box;
  margin: 9px 0 0;
}

.item-student .score span {
  color: #fff;
  font-family: "Myriadpro-Semibold";
  font-size: 18px;
}

.list-giaobai {
  overflow: auto;
  max-height: calc(100vh - 260px);
  padding-right: 10px;
}

.list-giaobai.chualam {
  max-height: calc(100vh - 320px);
}

.chk-flex {
  display: flex;
  align-items: center;
}

.chk-flex input,
.chk-ab input {
  width: 20px;
  height: 20px;
  margin: 0;
}

.chk-ab {
  position: absolute;
  top: calc(50% - 10px);
  right: 15px;
}

.check-box-padding-custom label::before {
  padding: 10px 10px 10px 10px !important;
}

.padding_checkbox_filter label::before {
  margin-right: 8px !important;
}

.giaobai-ganday .select-all {
  padding: 15px 0 0;
}

.giaobai-ganday .select-all input {
  margin: -3px 10px 0 0;
  width: 16px;
  height: 16px;
}

.giaobai-ganday .select-all label {
  font-family: "Myriadpro-Semibold";
}

.gr-all-nn {
  margin: 30px 0 0;
}

.sunE-container-box.giaobai-ganday {
  padding: 32px 20px 20px;
}

.sunE-container-box.giaobai-support {
  padding: 20px 0 15px;
}

.mb-10 {
  margin-bottom: 10px;
}

.giaobai-ganday .p0 {
  padding: 0;
}

.btn-thembai {
  margin-right: 10px;
}

.file-support span {
  font-size: 14px;
  color: #f16522;
  padding-left: 10px;
  line-height: 30px;
}

.file-support-is-active span {
  color: #0b9300 !important;
}

.file-support.black span {
  font-size: 18px;
  color: #404041;
  font-family: "Myriadpro-Light";
  padding: 0 15px;
  display: block;
}

.bg-dc .sunE-giaotrinh-item {
  padding-bottom: 10px;
  border-bottom: 1px solid #000;
}

.bg-dc .sunE-giaotrinh-item:last-child {
  border-bottom: none;
}

.blue-main {
  color: #00a79d;
}

.giaobai-support .box-giaotrinh-gr {
  padding: 0 40px 0 60px;
}

.mr-10 {
  margin-right: 10px !important;
}

.title-semi {
  margin: 20px 0 10px;
  font-family: "Myriadpro-Semibold";
  font-size: 18px;
}

.sunE-input-group.re label {
  font-family: "Myriadpro-Regular";
}

.mg0 {
  margin: 0;
}

.mb-10 {
  margin-bottom: 10px;
}

.w-remove img {
  cursor: pointer;
}

/*END TEACHER GIAO BAI*/
/*CHAM BAI*/
.flex-5 {
  flex: 5;
}

.sunE-right-container:has(.__text_empty) {
  overflow: initial;
}
.chambai.writing {
  margin: 0 0 15px;
}

.btn-setting-cb {
  margin-right: 10px;
}

.topic {
  background: #fff;
  padding: 25px 20px;
  border-radius: 20px;
  margin: 0 0 15px;
}

.bg-line-blue {
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
}

.bg-blue {
  background: #00a69c;
}

.box-criteria {
  padding: 10px;
  border-radius: 20px;
  height: 274px;
  overflow: auto;
}

.box-criteria-full {
  max-height: fit-content;
}

.box-criteria-scroll {
  max-height: 310px;
}

.box-title-bg {
  border-radius: 25px;
  height: 40px;
  box-sizing: border-box;
  border: none;
}

.box-title-bg p {
  font-family: "Myriadpro-Bold";
  font-size: 22px;
  color: #fff;
  /* line-height: 48px; */
}

.bg-white {
  background: #fff;
}

.box-criteria-list,
.box-criteria-score {
  border-radius: 20px;
  border: none;
  padding: 10px 0;
}

.bd-bot {
  border-bottom: 1px solid #787878;
}

.bd-bot:last-child {
  border-bottom: none;
}

.box-criteria-item {
  height: 59px;
}

.max-w {
  max-width: 150px;
}

.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-h-flex {
  display: flex;
  align-items: center;
}

.box-criteria-content {
  margin: 0 0 15px;
}

.box-bd-20 {
  border-radius: 20px;
  padding: 10px 0;
}

.box-criteria-score-title p {
  color: #231f20;
  font-family: "Myriadpro-Bold";
  font-size: 18px;
  padding-left: 15px;
}

.box-criteria-comment {
  padding: 10px;
  border-radius: 20px;
}

.ml-10 {
  margin-left: 10px;
}

.box-criteria-comment h2 {
  color: #231f20;
  font-family: "Myriadpro-Bold";
  font-size: 24px;
  padding-left: 35px;
  margin: 0 0 5px;
}

.box-criteria-comment textarea {
  padding: 15px 15px 10px 35px;
  border-radius: 20px;
  resize: none;
  width: 100%;
  height: 200px;
  background: #ececec;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-family: "Myriadpro-Regular";
  font-size: 16px;
}

.box-criteria-comment textarea::placeholder {
  font-family: "Myriadpro-Regular";
  font-size: 16px;
}

.post-content {
  background: #fff;
  padding: 30px 20px;
  border-radius: 20px;
  margin: 0 0 15px;
}

.btn-mark {
  height: 42px;
  line-height: 42px;
  background: #ed8a22;
  padding: 0 0 0 25px;
  box-sizing: border-box;
  border-radius: 21px;
  border: none;
  cursor: pointer;
  margin: 0 10px 0 0;
}

.btn-help {
  height: 42px;
  line-height: 42px;
  background: #00a69c;
  box-sizing: border-box;
  border-radius: 21px;
  border: none;
  cursor: pointer;
  padding: 0 30px;
}

.btn-mark img {
  position: absolute;
  top: 2px;
  left: 3px;
}

.btn-mark p {
  font-family: "Myriadpro-Regular";
  font-size: 18px;
  padding: 0 35px;
  color: #fff;
}

.title-post-box {
  font-family: "Myriadpro-Bold";
  font-size: 24px;
  line-height: 42px;
}

.post-content .content-box-edit {
  padding: 15px 15px 10px 35px;
  border-radius: 20px;
  resize: none;
  width: 100%;
  background: #ececec;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-family: "Myriadpro-Regular";
  font-size: 16px;
  max-height: 210px;
  overflow-y: auto;
}

.content-box-edit .error {
  color: #ff0606;
  font-family: "Myriadpro-Bold";
}

.content-box-edit .delete {
  color: #ff0606;
  font-family: "Myriadpro-Bold";
  text-decoration: line-through;
}

.content-box-edit .fix {
  color: #00e254;
  font-family: "Myriadpro-Bold";
  text-decoration: underline;
}

.box-video-project {
  margin: 0 0 15px;
}

.box-project-score-gr {
  border-radius: 20px;
}

.project-score-gr {
  padding: 20px;
}

.project-score-gr h2 {
  color: #231f20;
  font-family: "Myriadpro-Bold";
  font-size: 24px;
  margin: 0 0 5px;
}

.project-score-gr textarea {
  padding: 15px 15px 10px 20px;
  border-radius: 20px;
  resize: none;
  width: 100%;
  height: 132px;
  background: #ececec;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-family: "Myriadpro-Regular";
  font-size: 16px;
}

.project-score-gr textarea::placeholder {
  font-family: "Myriadpro-Regular";
  font-size: 16px;
}

.project-score-gr input {
  border-radius: 20px;
  resize: none;
  width: 152px;
  height: 132px;
  background: #ececec;
  border: none;
  outline: none;
  box-sizing: border-box;
  font-family: "Myriadpro-Bold";
  font-size: 50px;
  color: #ff0000;
  text-align: center;
}

.project-score-gr input::-webkit-outer-spin-button,
.project-score-gr input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.project-score-gr input[type="number"] {
  -moz-appearance: textfield;
}

.black {
  color: #4d4d4d !important;
}

.lb-dc-gr span {
  color: #fff;
  font-size: 14px;
  padding: 3px 15px;
  border-radius: 11px;
  line-height: 21px;
}

.lb-dc-gr .lb {
  background: #faaf40;
  margin-right: 10px;
}

.lb-dc-gr .dc {
  background: #00a69c;
}

.sunE-container-box.chambai {
  padding: 10px 20px;
}

.sunE-chambai-content {
  background: #fff;
  padding: 20px 30px;
  border-radius: 20px;
  max-height: calc(100vh - 150px);
  margin: 0 0 15px;
  overflow: auto;
}

.sunE-chambai-content .sunE-giaotrinh-item {
  padding-bottom: 10px;
  border-bottom: 1px solid #707070;
}

.sunE-chambai-content .sunE-giaotrinh-item:last-child {
  border-bottom: none;
}

.list-detail {
  overflow: auto;
  max-height: calc(100vh - 260px);
  padding-right: 10px;
}

.list-detail .item-student {
  background: #fff;
  border-radius: 20px;
  padding: 10px 10px 10px 35px;
  margin: 0 0 10px 50px;
  min-height: 104px;
}

.list-detail .item-student .item-student-name span {
  font-size: 18px;
  line-height: 37px;
}

.list-detail .item-student-img {
  position: absolute;
  top: 9px;
  left: -45px;
  width: 85px;
  height: 85px;
  border-radius: 43px;
  overflow: hidden;
}

.list-detail .score {
  background-image: linear-gradient(to top, #00b9b7, #00e1a0);
  border-radius: 15px;
  width: 82px;
  height: 34px;
  position: absolute;
  top: 3px;
  right: 5px;
  margin: 0;
}

.list-detail .score span {
  font-size: 14px;
  color: #fff;
  line-height: 34px;
  font-family: "Myriadpro-Italic";
}

.list-detail .score span.f24.bold {
  font-family: "Myriadpro-Regular";
}

.f24 {
  font-size: 24px !important;
}

.gtcn-menu-gr.cb {
  margin: 10px 0 10px 0;
}

.cb-score-gr {
  width: 100%;
}

.cb-score-gr p {
  font-size: 18px;
  margin: 0 0 10px;
  font-family: "Myriadpro-Light";
}

.cb-score-gr span {
  font-size: 32px;
  font-family: "Myriadpro-Bold";
  color: #00a69c;
}

.bd-r-blue {
  border-right: 2px solid #00a69c;
}

/*END CHAM BAI*/

/*HO SO*/
.avatar-edit {
  margin: 30px 0 0;
}

.avatar-edit-box {
  background: #fff;
  width: 210px;
  height: 210px;
  border-radius: 115px;
  border: none;
  cursor: pointer;
  margin: 7px auto 25px;
  padding: 3px;
  overflow: hidden;
}

.avatar-edit-box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 9;
  object-fit: cover;
}

.avatar-edit-box .img-edit-avt {
  position: absolute;
  bottom: 0;
  background: #fff;
  height: 53px;
  width: 100%;
  text-align: center;
}

.avatar-edit-box .img-edit-avt img {
  width: 39px;
  height: 30px;
  border-radius: 0;
  margin-top: 10px;
  object-fit: cover;
}

.sunE-input-gr {
  margin: 0 0 20px;
}

.capitalize {
  text-transform: capitalize;
}

.sunE-input-gr label {
  padding: 0 0 0 20px;
  margin: 0 0 5px;
  display: block;
  font-family: "Myriadpro-Semibold";
  font-size: 18px;
}

.sunE-input-gr input {
  height: 44px;
  width: 100%;
  line-height: 44px;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0 20px;
  border-radius: 22px;
  outline: none;
  border: 1px solid #fff;
  box-shadow: 0 1px 8px 0 rgba(21, 27, 38, 0.15);
}

.select-date-profile .input_date_base_container .field_birthday {
  background-color: #fff;
  display: block;
  border: none;
  padding: 0;
  height: 44px;
}

.sunE-input-gr input {
  height: 44px;
  width: 100%;
  line-height: 44px;
  font-size: 14px;
  box-sizing: border-box;
  padding-left: 20px;
  border-radius: 22px;
  outline: none;
  border: 1px solid #fff;
  box-shadow: 0 1px 8px 0 rgba(21, 27, 38, 0.15);
}

.sunE-input-gr input::-webkit-outer-spin-button,
.sunE-input-gr input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.project-score-gr input[type="number"] {
  -moz-appearance: textfield;
}

.ml-10 {
  margin-left: 10px;
}

.hoso .sunE-male-female {
  width: 44px;
  height: 44px;
  text-align: center;
  background: #fff;
  border-radius: 33px;
  border: none;
  box-shadow: 0 1px 15px 0 rgba(21, 27, 38, 0.15);
  margin: 0 8px 0 0;
  line-height: 60px;
  cursor: pointer;
  display: flex;
}

.hoso .sunE-male-female span {
  font-size: 18px;
  line-height: 44px;
  padding: 0 0 0 10px;
}

.hoso .ico_male,
.hoso .ico_male_active {
  width: 26px;
  margin: 10px;
}

.hoso .ico_female,
.hoso .ico_female_active {
  width: 20px;
  margin: 5px 13px;
}

.hoso .sunE-male-female.male .ico_male_active {
  display: none;
}

.hoso .sunE-male-female.male .ico_male {
  display: flex;
}

.hoso .sunE-male-female.male.active .ico_male_active {
  display: flex;
}

.hoso .sunE-male-female.male.active .ico_male {
  display: none;
}

.hoso .sunE-male-female.female .ico_female_active {
  display: none;
}

.hoso .sunE-male-female.female .ico_female {
  display: flex;
}

.hoso .sunE-male-female.female.active .ico_female_active {
  display: flex;
}

.hoso .sunE-male-female.female.active .ico_female {
  display: none;
}

.sunE-container-box.hoso {
  padding: 0;
  min-height: 760px;
}

.box-detail-ab {
  position: absolute;
  top: 190px;
  width: 100%;
  padding: 0 80px;
}

.bg-hoso-top {
  background-image: linear-gradient(to right, #00e2a0, #00b9b7);
  width: 100%;
  height: 344px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.1;
}

.box-detail-ab .box-detail-hs {
  background: #fff;
  border-radius: 20px;
  padding: 100px 20px 20px;
  width: 420px;
  margin: 0 auto;
}

.text-error-input {
  color: #e22028;
}

.input-error {
  border-color: #e22028 !important;
}

.box-detail-hs .avt-ab {
  width: 217px;
  height: 217px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fff;
}

.box-detail-hs.student .avt-ab {
  width: 150px;
  height: 150px;
  top: -75px;
  left: calc(50% - 75px);
}

.box-detail-hs .avt-ab img {
  width: 100%;
  height: 100%;
}

.box-detail-hs h2.name {
  padding: 0;
  margin: 10px 0px;
  display: block;
  font-family: "Myriadpro-Bold";
  font-size: 32px;
  color: #231f20;
  text-align: center;
  margin-top: 20px;
}

.box-detail-hs .avt-ab {
  position: absolute;
  top: -109px;
  left: calc(50% - 108px);
}

.detail-info {
  padding: 0 60px 20px;
}

.ltk {
  line-height: 28px;
  margin: 20px 0 10px;
}

.btn-nc {
  padding: 0 5px;
  height: 28px;
  line-height: 28px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
  color: #fff;
  display: block;
  text-align: center;
  cursor: pointer;
}

#c-result-exam {
  background-image: url("/assets/images/bg-result-exam.png");
}

.btn-nc:hover {
  background-image: linear-gradient(to left, #00e1a0, #00b9b7);
}

.btn-nc a {
  color: #fff;
}

.info-sum {
  margin: 20px 0 0;
}

.info-sum h3 {
  font-size: 55px;
}

.mr-20 {
  margin-right: 20px;
}

.ml-20 {
  margin-left: 20px;
}

.flex-in {
  display: inline-flex;
}

.male-box {
  margin-right: 60px;
}

/*END HO SO*/
/*QUAN LY LOP OFFLINE*/
.sunE-container-box.diemdanh {
  padding: 30px 0 10px;
  margin-bottom: 10px;
}

.diemdanh-list {
  padding-right: 20px;
  max-height: calc(100vh - 230px);
  padding-bottom: 10px;
  overflow: auto;
}

.diemdanh-item {
  background: #fff;
  border-radius: 20px;
  padding: 10px 25px;
  margin: 0 0 10px 15px;
}

.diemdanh-add {
  cursor: pointer;
  padding: 15px 0;
}

.diemdanh-add img {
  width: 30px;
  height: 30px;
}

.medium-title {
  padding: 0;
  margin: 0 0 10px;
  display: block;
  font-family: "Myriadpro-Semibold";
  font-size: 18px;
}

.diemdanh-item img {
  margin-right: 10px;
}

.diemdanh-item p {
  font-size: 18px;
  font-family: "Myriadpro-Semibold";
  color: #000;
  line-height: 24px;
}

.mb-5 {
  margin-bottom: 5px;
}

.ico_user_class {
  margin-top: 12px;
}

.diemdanh-item span {
  font-size: 32px;
  font-family: "Myriadpro-Semibold";
  color: #faaf40;
  line-height: 42px;
}

.diemdanh-list-hs {
  padding: 0 15px 0 15px;
  height: calc(100vh - 240px);
  max-height: calc(100vh - 240px);
}

.diemdanh-list-hs .chk-flex.ab-top {
  position: absolute;
  top: 8px;
  right: 8px;
}

.diemdanh-list-hs .item-student-name h2 {
  font-family: "Myriadpro-Regular";
}

.item-student-name .btn-send-now {
  height: 32px;
  display: block;
  line-height: 32px;
  text-align: center;
  padding: 0;
  width: 120px;
  min-width: 120px;
  font-size: 16px;
  font-family: "Myriadpro-Regular";
  cursor: pointer;
}

.item-student-name .btn-op {
  height: 32px;
  border: 1px solid green;
  color: green;
  outline: none;
  box-sizing: border-box;
  border-radius: 16px;
  width: 100%;
  text-align: center;
  padding-left: 20px;
  font-size: 16px;
  font-family: "Myriadpro-Regular";
}

.diemdanh-no-item {
  margin: 40px auto 0;
}

.diemdanh-no-item p {
  color: #231f20;
  font-size: 24px;
  font-family: "Myriadpro-Bold";
  margin: 10px 0 0;
}

.btn-create-diemdanh button {
  padding: 0 20px 0 50px;
  background-image: linear-gradient(to left, #00e1a0, #00b9b7);
}

.btn-create-diemdanh img {
  position: absolute;
  top: 8px;
  left: 13px;
}

.diemdanh-ss {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 3rem;
}

.diemdanh-container .medium-title {
  color: #707070;
}

.w280 {
  width: 280px;
}

.f-right {
  float: right;
}

.nx-right-gr {
  position: absolute;
  bottom: 5px;
  right: 10px;
}

.diemdanh-list-hs .item-student-name h3 {
  max-width: 450px;
}

.send-success {
  display: flex;
}

.send-success img {
  margin: -3px 3px 0 0;
}

.send-success span.text-green {
  font-size: 14px;
  line-height: 20px;
}

/*END QUAN LY LOP OFFLINE*/
/*BANG VANG*/
.score-tb-student span {
  display: block;
  width: 80px;
  height: 46px;
  line-height: 46px;
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-family: "Myriadpro-Bold";
  background: #dc4630;
  border-radius: 5px;
  border: none;
}

.lv-up div {
  margin-left: 5px;
  color: #0b9300;
}

.lv-down span {
  margin-left: 5px;
  color: #dc4630;
}

.bangvang-content {
  padding: 20px 0 0;
}

.top {
  width: 285px;
  background: #fff;
  border-radius: 20px;
  padding: 30px 0;
  height: calc(100vh - 140px);
  overflow: auto;
}

.bangvang-content .class_student_list_box {
  padding: 20px 10px 20px 20px;
  border-radius: 20px;
  border: none;
  background: #fff;
  height: calc(100vh - 140px);
  overflow: auto;
}

.bangvang-content .class_student_list_box .list-student {
  max-height: 100%;
  padding-right: 10px;
}

.top-box {
  margin: 0 0 20px;
}

.__top_number {
  position: absolute;
  bottom: -5px;
  left: 40%;
  font-weight: bold;
  border-radius: 50%;
  background: #fff;
  width: 30px;
  height: 30px;
  font-family: "Myriadpro-Bold" !important;
  display: flex;
  align-items: center;
}

.__top_1 {
  border: 1px solid #eeab50;
}

.__top_2 {
  border: 1px solid #a5a5a5;
}

.__top_3 {
  border: 1px solid #7da6d7;
}

.top1 span {
  display: block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-size: 18px;
  font-family: "Myriadpro-Bold";
  background-image: linear-gradient(
    45deg,
    #b0853a,
    #f8efa5,
    #9d7033,
    #e7bf55,
    #faf4ac,
    #9d7033
  );
  text-align: center;
  border-radius: 15px;
  margin: 0 auto 5px;
}

.top2 span {
  display: block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-size: 18px;
  font-family: "Myriadpro-Bold";
  background-image: linear-gradient(
    45deg,
    #c0c0c0,
    #ebeaea,
    #b8b8b8,
    #6f6f6f,
    #ebeaea
  );
  text-align: center;
  border-radius: 15px;
  margin: 0 auto 5px;
}

.top3 span {
  display: block;
  width: 80px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-size: 18px;
  font-family: "Myriadpro-Bold";
  background-image: linear-gradient(
    40deg,
    #a3bee3,
    #7da6d7,
    #dde5f4,
    #b5c9e7,
    #174d6b
  );
  text-align: center;
  border-radius: 15px;
  margin: 0 auto 5px;
}

.top-hs {
  width: 166px;
  height: 147px;
  margin: 0 auto 10px;
}

.top2 .top-hs {
  width: 145px;
  height: 129px;
  margin: 0 auto 10px;
}

.top3 .top-hs {
  width: 139px;
  height: 123px;
  margin: 0 auto 10px;
}

.top1 .top-hs .avt {
  position: absolute;
  top: 34px;
  left: 45px;
  width: 78px;
  height: 78px;
  border-radius: 39px;
  border: 2px solid #f7eda1;
  box-sizing: border-box;
  object-fit: cover;
}

.top2 .top-hs .avt {
  position: absolute;
  top: 19px;
  left: 34px;
  width: 78px;
  height: 78px;
  border-radius: 39px;
  border: none;
  border: 2px solid #d3d2d2;
  box-sizing: border-box;
  object-fit: cover;
}

.top3 .top-hs .avt {
  position: absolute;
  top: 18px;
  left: 31px;
  width: 78px;
  height: 78px;
  border-radius: 39px;
  border: none;
  border: 2px solid #8da8ce;
  box-sizing: border-box;
  object-fit: cover;
}

.top-hs .gold {
  position: absolute;
  top: 11px;
  left: 61px;
}

.top p {
  font-size: 18px;
  font-family: "Myriadpro-Regular";
  text-align: center;
  padding: 0 10px;
}

.top-hs .__top_number {
  font-size: 18px;
  font-family: "Myriadpro-Regular";
  /* text-align: center; */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 18px;
}

/*END BANG VANG*/
/*VINH DANH*/
.vinhdanh-content {
  padding: 30px 0 10px;
}

.vinhdanh-content .uk-width-1-2 {
  margin-bottom: 20px;
}

.vinhdanh-content .uk-grid > * {
  padding-left: 20px !important;
}

.vinhdanh-content .uk-grid {
  margin-left: -20px !important;
}

.vinhdanh-item {
  background: #fff;
  border-radius: 20px;
}

.avt-vd {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border: 3px solid #e9af38;
  overflow: hidden;
  margin: 20px auto 0;
}

.avt-vd img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.name-vd {
  padding: 0 20px;
  line-height: 37px;
  white-space: nowrap;
  text-align: center;
  font-family: "Myriadpro-SemiBold";
  font-size: 18px;
  color: #fff;
  border-radius: 19px;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%, 0);
}

.vd-info {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translate(-50%, 0);
  font-family: "Myriadpro-Bold";
  font-size: 18px;
  white-space: nowrap;
}

.bg-red {
  background: #dc4630;
}

.text-red {
  color: #dc4630;
}

.bg-blue {
  background: #1b75bb;
}

.text-blue {
  color: #1b75bb;
}

.bg-green {
  background: #4b7805;
}

.text-green {
  color: #4b7805;
}

.bg-green-hi {
  background: #095b4f;
}

.text-green-hi {
  color: #095b4f;
}

.bg-black {
  background: #000000;
}

.text-black {
  color: #000000;
}

/*END VINH DANH*/
/*TIN NHAN*/
.tinnhan {
  padding: 20px 0 0;
}

.tb-mes {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.box-btn {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border: none;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #00b9b7;
  cursor: pointer;
}

.reng {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #be1e2d;
  position: absolute;
  bottom: 0;
  right: 0;
}

.tn-menu-gr {
  margin: 0 0 20px;
}

.tn-menu-item {
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  padding-bottom: 10px;
  border-bottom: 2px solid #afafaf;
}

.tn-menu-item.active {
  padding-bottom: 11px;
  border-bottom: 4px solid #f4ba42;
}

.tn-menu-item .box-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #00b9b7;
  cursor: pointer;
  margin: 0 auto 8px;
}

.tn-menu-item .reng {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #be1e2d;
  position: absolute;
  top: -4px;
  right: -11px;
  color: #fff;
  text-align: center;
  line-height: 25px;
  font-size: 14px;
  font-family: "Myriadpro-Light";
}

.tn-menu-item p {
  color: #58595b;
  font-size: 18px;
  font-family: "Myriadpro-Light";
  text-transform: uppercase;
}

.tn-menu-item.active p {
  font-family: "Myriadpro-Bold";
}

.list-tinnhan {
  padding: 0 20px 0 30px;
  height: calc(100vh - 260px);
  overflow: auto;
}

.tinnhan-item {
  background: #fff;
  border-radius: 20px;
  padding: 12px 20px 20px 45px;
  margin: 0 0 10px;
}

.tinnhan-item .avt {
  width: 46px;
  height: 46px;
  border-radius: 23px;
  border: 2px solid #e7c71d;
  overflow: hidden;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: -23px;
  background: #fff;
}

.tinnhan-item .avt.bd-ht {
  border: 1px solid #00b9b7;
}

.tinnhan-item .avt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.add_code_student-gr {
  width: 368px;
  position: absolute;
  left: 50%;
  top: 510px;
  transform: translate(-50%, -50%);
}

.border-dash-map-up {
  width: 250px;
  border: 3px dashed #00b9b7;
  top: 325px;
  left: 68px;
  transform: rotate(-60deg);
  position: absolute;
  z-index: 1;
}

.border-dash-map-down {
  width: 250px;
  border: 3px dashed #00b9b7;
  top: 333px;
  left: 50px;
  transform: rotate(60deg);
  position: absolute;
  z-index: 1;
}

.hethong .tinnhan-item .avt {
  text-align: center;
}

.hethong .tinnhan-item .avt img {
  width: 29px;
  height: 24px;
  margin-top: 9px;
  object-fit: cover;
}

.tinnhan-item h2 {
  font-size: 18px;
  line-height: 20px;
  font-family: "Myriadpro-SemiBold";
  margin: 0 0 10px;
  color: #000;
}

.tinnhan-item span {
  font-size: 12px;
  font-family: "Myriadpro-Bold";
  color: #000;
}

.hethong .tinnhan-item span {
  color: #939598;
}

.tinnhan-item p.mes-info {
  font-size: 18px;
  line-height: 24px;
  max-height: 72px;
  font-family: "Myriadpro-Regular";
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #000;
}

.msg-seen.tinnhan-item p.mes-info {
  color: #525252;
}

.no-mes-bg {
  display: none;
}

.no-mes .no-mes-bg {
  display: block;
}

.mes-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 444px;
}

.mes-content.no-mes {
  align-items: center;
}

.mes-content {
  padding: 0 0 0 20px;
}

.mex-box {
  width: 100%;
  background: rgb(0 185 183 / 10%);
  border-radius: 20px;
  box-sizing: border-box;
}

.mex-box.cus-hei {
  height: calc(100vh - 140px);
}

.mex-box.cus-hei-2 {
  height: calc(100vh - 220px);
}

.mex-info {
  padding: 30px;
}

.mex-box h2 {
  font-size: 22px;
  margin: 0 0 20px;
}

.mex-box p {
  font-size: 18px;
  margin: 0 0 10px;
}

.mex-box .btn-view-detail {
  margin: 40px auto 0;
  text-align: center;
}

.bg_update {
  width: calc(100% - 10px);
  margin: 30px 5px 0;
  box-sizing: border-box;
}

.select-message.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 18px;
  font-family: "Myriadpro-SemiBold";
  color: #3f3f3f;
  width: 200px;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: none;
  background: #fff;
  box-shadow: 2px 2px 4px 0 rgb(21 27 38 / 35%);
}

.select-message .select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  width: 200px;
  height: 48px;
  line-height: 48px;
  border: none;
  transition: all 0.2s ease-in;
  border-radius: 24px;
  color: #3f3f3f;
  font-size: 18px;
  text-align: center;
  font-family: "Myriadpro-SemiBold";
  z-index: 10;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.select-message .select-styled:after {
  content: "";
  width: 17px;
  height: 10px;
  background: url(./../images/tinnhan/ico_dropdown.png) 98% / 17px no-repeat
    transparent;
  position: absolute;
  top: 18px;
  right: 30px;
}

.select-message .select-options {
  z-index: 9;
  top: 50px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  padding: 0 20px 0;
  margin-top: 0 !important;
}

.select-message .select-options li {
  margin: 0;
  text-indent: 0;
  transition: all 0.15s ease-in;
  border-bottom: 1px solid #d2d2d2;
  text-align: center;
  font-size: 18px;
  font-family: "Myriadpro-SemiBold";
}

.search-custom {
  width: 400px;
  height: 48px;
  line-height: 48px;
  padding: 0 45px 0 20px;
  font-size: 18px;
  font-family: "Myriadpro-Regular";
  box-sizing: border-box;
  border: none;
  text-align: center;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  outline: none;
}

._line_box {
  background: #fff;
  padding: 6px 0;
  height: 48px;
  position: relative;
  width: 1px;
}

._line {
  width: 1px;
  display: block;
  height: 36px;
  border-right: 1px solid #d2d2d2;
  position: absolute;
  top: 6px;
  left: 0;
}

.icon_search {
  position: absolute;
  right: 13px;
  top: 14px;
  width: 22px;
}

/*END TIN NHAN*/
/*BAO CAO HOC TAP*/
.bcht {
  padding: 30px 0 10px;
}

.bcht .list-student {
  max-height: calc(100vh - 320px);
}

.student-info {
  width: 350px;
  margin-right: 20px;
}

.student-info input {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 18px;
  box-shadow: 0 1px 6px 0 rgb(21 27 38 / 15%);
  padding: 0 10px;
  box-sizing: border-box;
  outline: none;
  text-align: center;
}

.student-info .avt-i {
  width: 180px;
  height: 180px;
  border-radius: 90px;
  box-sizing: border-box;
  border: 3px solid #e7ae38;
  overflow: hidden;
  margin: 0 auto 20px;
}

.student-info .avt-i img {
  width: 100%;
  height: 100%;
}

.student-info .name {
  text-align: center;
  font-size: 24px;
  margin: 0 0 10px;
}

.email-gr {
  margin: 0 0 20px;
}

.email-gr img {
  margin: 0 10px 0 0;
}

.email-gr p {
  font-size: 18px;
  line-height: 24px;
  font-family: "Myriadpro-Light";
  word-break: break-all;
}

.box-bcht {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
}

.box-bcht-top {
  margin: 0 0 20px;
}

.box-bcht-top h2 {
  color: #414042;
  font-size: 18px;
  line-height: 40px;
  font-family: "Myriadpro-Bold";
}

.btn-history-bcht {
  color: #00b9b7;
  background: #fff;
  border: 2px solid #00b9b7;
  display: block;
  line-height: 40px;
  height: 40px;
  border-radius: 20px;
  padding: 0 35px;
  text-align: center;
  cursor: pointer;
  font-family: "Myriadpro-Semibold";
  font-size: 18px;
}

.title-info {
  background: #e6e7e8;
  border-radius: 20px;
  border: none;
  height: 40px;
  padding-left: 20px;
  margin: 0 5px 0 0;
  box-sizing: border-box;
}

.title-info.dtb-title {
  padding-left: 0;
}

.title-info p {
  font-family: "Myriadpro-Light";
  color: #000000;
  line-height: 40px;
  font-size: 18px;
}

.title-info.dtb-title p {
  font-family: "Myriadpro-Light";
  color: #000000;
  line-height: 20px;
  font-size: 18px;
}

.score-info {
  background: rgba(172, 241, 228, 0.86);
  border-radius: 20px;
  border: none;
  height: 40px;
  width: 84px;
}

.score-info p {
  font-family: "Myriadpro-Bold";
  color: #000000;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
}

.title-info.dtb-title {
  width: 120px;
  height: auto;
}

.h356 {
  height: 356px;
  width: 100%;
  background: #ccc;
  margin: 0 0 25px;
}

.bcht .sunE-plan {
  padding-left: 0;
}

.time-h {
  width: 80px;
}

.time-h p {
  font-family: "Myriadpro-Bold";
  font-size: 18px;
  color: #000;
  padding-left: 10px;
}

.schedule-item {
  margin: 0 0 10px;
  padding: 0 0 10px;
  border-bottom: 1px solid #b5b5b5;
}

.schedule-item:last-child {
  border-bottom: none;
}

.score-d {
  width: 80px;
}

.schedule-i p {
  font-family: "Myriadpro-Light";
  font-size: 18px;
  color: #000;
}

.score-d p {
  font-family: "Myriadpro-Light";
  font-size: 18px;
  color: #000;
}

.width_chart_report_student {
  width: 55%;
}

.width_report_detail_student {
  width: 45% !important;
  margin-left: 25px;
}

.flex_center_chart_report_student {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex_self_chart_report_student {
  align-self: flex-start;
}

/*END BAO CAO HOC TAP*/
/*PHIEU DIEM*/
.phieudiem-box {
  width: 286px;
  height: 100px;
  border-radius: 20px;
  background: rgb(0 203 173 / 30%);
  padding: 14px 30px;
}

.phieudiem .diemdanh-item {
  padding: 0;
}

.phieudiem .diemdanh-item .phieudiem-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 3rem;
}
.phieudiem .diemdanh-item .phieudiem-info p {
  font-family: "Myriadpro-Bold";
  font-size: 18px;
  text-align: center;
  line-height: 80px;
}

.score-bg-blue {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: rgb(0 203 173 / 30%);
  padding: 10px;
}

.score-bg-blue p {
  font-family: "Myriadpro-Light";
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  color: #00a69c;
}

.score-bg-blue span {
  font-family: "Myriadpro-Bold";
  font-size: 24px;
  text-align: center;
  color: #00a69c;
  line-height: 24px;
  display: block;
  text-align: center;
}

.box-bg-gr {
  width: 300px;
  margin-right: 20px;
}

.box-bg-content {
  width: 100%;
  background: #fff;
  padding: 30px 20px;
  border-radius: 20px;
}

.box-bg-content.th {
  margin-top: 34px;
}

.menu-gr-right span.btn {
  width: 100%;
  display: block;
  height: 56px;
  border-radius: 28px;
  text-align: center;
  background: rgb(0 203 173 / 30%);
  color: #231f20;
  font-size: 18px;
  line-height: 56px;
  margin: 0 0 10px;
  cursor: pointer;
}

.menu-gr-right input[type="text"].btn::placeholder {
  opacity: 0.3;
}

.send-success.title span {
  font-size: 24px;
  font-family: "Myriadpro-SemiBold";
  color: #84c241;
  line-height: 29px;
}

.box-bg-content h2 {
  font-size: 24px;
  font-family: "Myriadpro-Bold";
  color: #48d0c8;
  margin: 0 0 30px;
}

.box-bg-content p {
  font-size: 18px;
  line-height: 18px;
  font-family: "Myriadpro-SemiBold";
  color: #262626;
  margin: 0 0 10px;
}

.mt-10 {
  margin-top: 10px;
}

/*END PHIEU DIEM*/
/*HDHT*/
.huong-dan-hoc-tap.giaobai-support .box-giaotrinh-gr {
  padding: 0 20px 0 60px;
}

.box-select-info .text-left {
  text-align: left;
}

.btn-remove-item {
  width: 50px;
  height: 50px;
  background-image: linear-gradient(to right, #00b97f, #00b9b7);
  border-radius: 10px;
  cursor: pointer;
}

/*END HDHT*/
/*CUSTOM ON OFF BUTTON*/
.toggle-button-cover {
  position: relative;
  width: 52px;
}

.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  top: calc(50% - 15px);
  width: 52px;
  height: 20px;
  margin: 0 auto 0 auto;
}

.button.r,
.button.r .layer {
  border-radius: 100px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #dddddd;
  transition: 0.3s ease all;
  z-index: 1;
}

/* Button 1 */
.btn-on-off .knobs:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  background-image: linear-gradient(to right, #c9c9c9, #989898, #6e6f6f);
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
  border: 2px solid #fff;
  box-sizing: border-box;
}

.btn-on-off.active .checkbox:checked + .knobs:before {
  left: 24px;
  background-image: linear-gradient(to right, #fadb3a, #f5d030, #ebb318);
}

.btn-on-off .knobs,
#button-1 .knobs:before,
.btn-on-off .layer {
  transition: 0.3s ease all;
}

.student-index {
  padding: 7vh 20px 10px;
}

.empty-leaderboard-custom {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.empty-leaderboard-custom .title-empty {
  font-weight: bold;
  font-size: 18px;
}

.list-teacher-sunE {
  max-height: calc(100vh - 220px);
  height: calc(100vh - 220px);
  min-height: 33.5rem;
  overflow: auto;
  padding-right: 20px;
  width: 210px;
  overflow-x: hidden;
  box-shadow: 1px 2px 4px 0 rgb(21 27 38 / 40%);
}

.empty-payment-custom {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.empty-payment-custom img {
  margin-bottom: 10px;
}

.empty-payment-custom span {
  font-weight: bold;
}

.box-item-wh {
  width: 185px;
  height: 170px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  padding: 10px 0px;
  border: 3px solid #fff;
  margin: 0 0 10px;
  margin-left: 10px;
  position: relative;
}

.box-item-wh .img-thumb {
  width: 100%;
  height: 120px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 0 10px;
  border-radius: 20px;
}

.box-item-wh .img-thumb img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  object-fit: cover;
}

.box-item-wh.active {
  border: 3px solid #00e0a1;
}

.box-item-wh h2 {
  color: #404041;
  font-size: 18px;
  line-height: 18px;
  height: 18px;
  font-family: "Myriadpro-Bold";
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}

.box-item-wh .name-box {
  color: #404041;
  font-size: 18px;
  font-family: "Myriadpro-Bold";
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  background: #fff;
  padding: 10px;
  height: 33px;
  bottom: 0;
}

/* Shedu Item */
/* .shedu-item-container {
  width: 33rem;
} */

.shedu-mo-item {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 20px;
  background: #fff;
}

.shedu-first-item {
  padding: 25px 25px 45px;
  box-sizing: border-box;
  border-radius: 20px;
  background: #fff;
  margin: 0 0 20px;
}

.shedu-mo-item p {
  text-align: center;
  font-size: 24px;
  line-height: 24px;
  font-family: "Myriadpro-SemiBold";
  color: #606060;
  margin: 10px 0;
}

.shedu-first-item .img-shedu {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: #ccedeb;
  margin: 0 auto 20px;
  overflow: hidden;
}

.shedu-first-item h2 {
  color: #00bd9d;
  text-align: center;
  font-size: 30px;
  line-height: 32px;
  font-family: "Myriadpro-SemiBold";
  padding: 0;
  margin: 0 0 5px;
}

.shedu-first-item h3 {
  color: #404041;
  text-align: center;
  font-size: 18px;
  line-height: 18px;
  font-family: "Myriadpro-SemiBold";
  padding: 0;
  margin: 0 0 5px;
}

.shedu-first-item p {
  color: #404041;
  text-align: center;
  font-size: 18px;
  line-height: 18px;
  font-family: "Myriadpro-Light";
  padding: 0;
  margin: 0 0 5px;
}

.shedu-list-more-gr {
  padding: 25px;
  box-sizing: border-box;
  border-radius: 20px;
  background: #fff;
}

.shedu-more-item .img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #ccedeb;
  margin: 0 auto 10px;
  overflow: hidden;
}

.shedu-more-item p {
  color: #6d6e70;
  text-align: center;
  font-size: 16px;
  line-height: 18px;
  font-family: "Myriadpro-SemiBold";
  padding: 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bg-ab {
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(0 0 0 / 0.3);
  width: 68px;
  height: 68px;
}

.lb-qh-nn span {
  font-size: 14px;
  padding: 3px 15px;
  border-radius: 11px;
  line-height: 21px;
}

.lb-qh-nn .qh {
  color: #e53535;
  border: 1px solid #e53535;
  margin-right: 10px;
}

.btn-default:hover {
  background: #00c0b4;
  color: #ffffff;
  border-color: #00c0b4;
}

.btn-line-blue:hover {
  background: #00c0b4;
  color: #ffffff;
}

.lb-qh-nn .nn {
  color: #fff;
  background: #e53535;
  border: 1px solid #e53535;
  margin-right: 10px;
  cursor: pointer;
}

.lb-qh-nn .over {
  color: #bc4f4a;
  border: 1px solid #bc4f4a;
  margin-right: 10px;
  font-weight: 700;
}

.lb-qh-nn .hn {
  color: #faaf40;
  border: 1px solid #faaf40;
  margin-right: 10px;
}

.lb-qh-nn .sc {
  color: #fff;
  background: #84c241;
  border: 1px solid #84c241;
  margin-right: 10px;
  margin-left: 1rem !important;
}

.lb-qh-nn .sc_waiting {
  color: #fff;
  background: #f7b32b;
  border: 1px solid #f7b32b;
  margin-right: 10px;
}

.student-baitap-content {
  background: #fff;
  padding: 20px 30px;
  border-radius: 20px;
  max-height: calc(100vh - 200px);
  margin: 0 0 15px;
  overflow: auto;
}

.no-item p {
  text-align: center;
  font-size: 24px;
  line-height: 24px;
  font-family: "Myriadpro-SemiBold";
  color: #606060;
  margin: 10px 0;
}

.student-baitap-content .sunE-giaotrinh-item {
  padding-bottom: 10px;
  border-bottom: 1px solid #707070;
}

.star {
  margin-right: 10px;
}

.star img {
  width: 40px;
}

.map-skill span {
  width: 200px;
  height: 44px;
  line-height: 44px;
  color: #040505;
  font-size: 18px;
  font-family: "Myriadpro-Regular";
  background: #fff;
  display: block;
  border-radius: 20px;
  text-align: center;
  margin-left: 10px;
}

.disable-link {
  pointer-events: none;
}

.chart-circle-report-class {
  transform: rotate(-90deg);
  position: absolute;
  /* inset: 0px; */
  height: 180px;
  width: 170px;
  margin-left: 145px;
}

.shadow-chart-circle {
  -webkit-filter: drop-shadow(0px 1px 1px #70707070);
  filter: drop-shadow(0px 1px 1px #70707070);
  /* Similar syntax to box-shadow */
}

.map-skill img {
  position: absolute;
  top: -25px;
  left: -10px;
  width: 60px;
}

.pink-ab {
  position: absolute;
  bottom: 20px;
  right: 15px;
}

.pink-ab .__percent_unit {
  background: rgb(216, 20, 96);
  padding: 5px;
  border-radius: 50%;
  color: rgb(255, 255, 255);
  height: 45px;
  width: 45px;
  border: 6px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pink-ab img {
  height: 45px;
  width: 45px;
}

.student_exercise_item {
  background: #fff;
  border-radius: 20px;
  padding: 15px 30px 20px 15px;
  box-sizing: border-box;
  margin: 0 0 20px;
  width: 95%;
}

.student_exercise_item .level {
  margin: 0 0 30px;
}

.student_exercise_item .level span {
  padding: 8px 35px;
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
  font-size: 24px;
  line-height: 24px;
  font-family: "Myriadpro-Bold";
  color: #fff;
  border-radius: 20px;
  margin: 0 0 0 -10px;
}

.student_exercise_item_info {
  padding-bottom: 10px;
  border-bottom: 1px solid #656565;
}

.student_exercise_item_info h2 {
  font-size: 18px;
  line-height: 25px;
  font-family: "Myriadpro-Bold";
  color: #040505;
}

.student_exercise_item_info p {
  font-size: 18px;
  line-height: 25px;
  font-family: "Myriadpro-Regular";
  color: #040505;
}

.thumb-im {
  position: absolute;
  right: -53px;
  top: 0;
}

.student_exercise {
  padding: 0 80px 0 30px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.history {
  margin: 10px 10px 0;
}

.history p {
  color: #ad0a22;
  font-size: 18px;
  line-height: 22px;
  font-family: "Myriadpro-Bold";
}

.scre {
  margin-right: 20px;
}

.kh-title {
  margin: 0 0 20px;
}

.kh-title h2 {
  color: #000;
  font-size: 24px;
  font-family: "Myriadpro-Bold";
}

.student-khht .sunE-calendar {
}

.sunE-plan.khht-tkb,
.sunE-plan.khht-cn {
  padding-left: 0;
}

.khht-cn .plan-item {
  border-left: 20px solid #8dc63f;
}

.khht-tkb .check-work {
  color: #414042;
  font-family: "Myriadpro-Bold";
  line-height: 24px;
}

.khht-tkb .tiem {
  color: #939598;
  font-family: "Myriadpro-Bold";
  line-height: 24px;
}

.student-khht .sunE-calendar {
  margin: 0 0 40px;
}

.success span.flex-1 {
  color: #84c241;
  font-size: 12px;
  font-family: "Myriadpro-Bold";
  line-height: 30px;
  padding-left: 5px;
  background: none;
}

.sunE-container-box.student-khht {
  padding: 20px 20px 10px;
}

.student .w60 {
  width: 96px;
}

.student .tkb-item {
  width: 96px;
}

/*END STUDENT*/
/*CAI DAT*/
.box-setting-custom {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  margin: 0 0 10px;
}

.setting-title-blue {
  color: #00bbb5;
  font-size: 24px;
  font-family: "Myriadpro-SemiBold";
  line-height: 32px;
  margin: 0 0 15px;
}

.setting-on-off-box {
  margin: 0 0 1.2rem;
}

.setting-on-off-box p {
  color: #000;
  font-size: 18px;
  font-family: "Myriadpro-Semibold";
  line-height: 24px;
  margin: 0;
}

.setting-on-off-box span.btn {
  color: #00bbb5;
  font-size: 18px;
  font-family: "Myriadpro-Semibold";
  line-height: 24px;
  margin: 0;
  cursor: pointer;
}

.select-language {
  color: #00bbb5;
  font-size: 18px;
  font-family: "Myriadpro-Semibold";
  line-height: 24px;
  margin: 0;
  text-decoration: underline;
  cursor: pointer;
  border: none;
  outline: none;
  background: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-overflow: "";
}

.select-language::-ms-expand {
  display: none;
}

.setting-on-off-box input[type="number"] {
  width: 55px;
  height: 28px;
  border-radius: 10px;
  outline: none;
  box-sizing: border-box;
  text-align: center;
  color: #c2c2c2;
  border: 1px solid #c2c2c2;
}

.setting-on-off-box input[type="number"].active {
  color: #f7991f;
  border: 1px solid #00a69c;
}

.setting-on-off-box input[type="number"]::-webkit-inner-spin-button,
.setting-on-off-box input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

.w80 {
  width: 80px;
}

.ph10 {
  padding: 0 10px;
}

.mt-17 {
  margin-top: 17px;
}

/*END CAI DAT*/

/*STUDENT MORE*/
.mt-3 {
  margin-top: 3px;
}

.mt-9 {
  margin-top: 9px;
}

.student_class.class-index-box .class-index-box-img {
  width: 182px;
}

.student_class.class-index-box {
  width: calc(100% - 280px);
}

.student-class-no-item p {
  color: #0d0e0e;
  font-size: 24px;
  line-height: 26px;
  font-family: "Myriadpro-Semibold";
  padding-top: 20px;
}

.sunE-student-class-homework {
  padding: 20px 30px 20px 0;
  max-height: calc(100vh - 150px);
  overflow: auto;
}

.sunE-student-class-homework .sunE-giaotrinh-item {
  padding: 10px 20px;
  border-radius: 20px;
  background: #fff;
  margin: 0 0 15px;
}

.ico-checked {
  position: absolute;
  top: 5px;
  left: 0;
}

.progress {
  position: absolute;
  right: 20px;
  top: -10px;
}

.progress span {
  display: block;
  width: 74px;
  height: 22px;
  line-height: 22px;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  font-size: 13px;
  font-family: "Myriadpro-Bold";
  box-sizing: border-box;
}

.danger span {
  background: #dc4630;
}

.warning span {
  background: #ed8a22;
}

.success span {
  background: #36ae4a;
}

.w380 {
  width: 380px;
  margin: 0 auto 30px;
}

.show-hide-password {
  position: absolute;
  right: 15px;
  top: 12px;
  cursor: pointer;
}

.thanhtich-container {
  padding: 30px 0 10px;
}

.list-menu-custom.student {
  width: 35%;
}

.list-menu-custom.student .btn-gr {
  height: 70px;
}

.list-menu-custom.student .btn-gr.active {
  background-image: linear-gradient(to left, #00e1a0, #00b9b7);
}

.list-menu-custom.student .btn-gr-text p {
  line-height: 70px;
}

.thanhtich-online-box {
  width: 100%;
  box-sizing: border-box;
  height: calc(100vh - 17vh);
  overflow: auto;
  padding: 0 10px 0;
}

.bg-line-op {
  background-image: linear-gradient(to bottom, #258c96, #a6ffd9);
  border-radius: 20px;
  padding-bottom: 10px;
}

.thanhtich-box-content {
  padding: 0 10px 0 20px;
}

.width-height-thanhtich-box-content {
  width: 65%;
}

.box-skill-process {
  padding: 60px 10px 20px;
}

.mte-gr {
  background: #fff;
  height: 54px;
  width: 125px;
  border-radius: 27px;
  text-align: center;
  padding-left: 30px;
}

.mte-gr .mte-thumb {
  position: absolute;
  width: 65px;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d1d3d4;
  border: 5px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  top: -5px;
  left: -15px;
}

.mte-gr h2 {
  line-height: 28px;
  color: #2b3990;
  font-size: 29px;
  font-family: "Myriadpro-Bold";
  margin: 0;
  padding: 0;
}

.mte-gr p {
  line-height: 11px;
  color: #2b3990;
  font-size: 10px;
  font-family: "Myriadpro-Light";
  margin: 0;
  padding: 0;
}

.ml-15 {
  margin-left: 15px;
}

.skill-process-list {
  margin: 30px 0 0;
  padding: 20px 30px 10px 50px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}

.skill-process-item p.title {
  color: #fff;
  line-height: 24px;
  font-size: 18px;
  font-family: "Myriadpro-Regular";
  text-align: center;
}

.skill-process-item {
  margin: 0 0 20px;
}

.process-100 {
  width: 100%;
  height: 30px;
  border-radius: 15px;
  box-sizing: border-box;
  background: #fff;
  padding: 5px 5px 5px 42px;
}

.process-due {
  background-image: linear-gradient(to bottom, #febe3f, #ed228c);
  height: 20px;
  box-sizing: border-box;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.process-thumb {
  position: absolute;
  top: -24px;
  left: -20px;
}

.sco {
  width: 96px;
  height: 30px;
  border-radius: 15px;
  box-sizing: border-box;
  background: #fff;
  padding: 0 5px 0 12px;
  margin: 24px 0 0 10px;
}

.sco .slp {
  color: #2b3990;
  line-height: 30px;
  font-size: 24px;
  font-family: "Myriadpro-Bold";
}

.sco .slp-top {
  line-height: 10px;
  font-size: 12px;
  font-family: "Myriadpro-Bold";
  top: -10px;
  left: 3px;
}

.sco .slp-top.down {
  color: #be1e2d;
}

.sco .slp-top.up {
  color: #8dc63f;
}

.thanhtich-offline-box {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
}

.no-item-2 p {
  text-align: center;
  font-size: 24px;
  line-height: 24px;
  font-family: "Myriadpro-Light";
  color: #231f20;
  margin: 10px 0;
}

.title-k {
  font-size: 24px;
  line-height: 24px;
  font-family: "Myriadpro-SemiBold";
  color: #00a79d;
  margin: 0 0 20px;
  text-transform: uppercase;
}

.thanhtich-offline-content {
  padding: 20px 15px;
}

.gr-k p {
  text-align: left;
  font-size: 18px;
  line-height: 65px;
  font-family: "Myriadpro-Light";
  color: #231f20;
  margin: 0;
  padding: 0;
}

.gr-k span {
  display: block;
  font-size: 24px;
  line-height: 65px;
  font-family: "Myriadpro-Bold";
  color: #00a79d;
  margin: 0;
  padding: 0;
}

.gr-r {
  margin: 0 0 10px;
}

.gr-r p {
  text-align: left;
  font-size: 18px;
  line-height: 24px;
  font-family: "Myriadpro-Regular";
  color: #231f20;
  margin: 0;
  padding: 0;
}

.gr-r span {
  display: block;
  font-size: 24px;
  line-height: 28px;
  font-family: "Myriadpro-SemiBold";
  color: #00a79d;
  margin: 0;
  padding: 0;
}

.mb-30 {
  margin: 0 0 30px;
}

.gr-k span.btn {
  cursor: pointer;
  text-decoration: underline;
}

.sub-title-18 {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-family: "Myriadpro-SemiBold";
  color: #231f20;
  margin: 0 0 10px;
  padding: 0;
}

.bxh-info-student-box {
  background: rgba(172, 241, 228, 0.76);
  border-radius: 20px;
  padding: 20px;
  margin: 0 0 15px;
}

.img-avatar-k {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border: 3px solid #fff;
  overflow: hidden;
  margin-right: 20px;
}

.img-avatar-k img {
  width: 100%;
  height: 100%;
}

.bxh-info-student-box h3 {
  font-size: 24px;
  line-height: 28px;
  font-family: "Myriadpro-Regular";
  color: #231f20;
  margin: 0 0 10px;
  padding: 0;
}

.f-18 {
  font-size: 18px;
  line-height: 24px;
  color: #231f20;
}

p.text-center.f-18 {
  margin: 20px 0;
}

.box-top-k {
  background: #fff;
  border-radius: 20px;
  padding: 10px 20px;
}

.avt-top-k {
  margin: 0 auto;
}

.avt-top-k .ico_avt {
  position: absolute;
}

.avt-top-k img {
  z-index: 9;
}

.top-k-score {
  display: block;
  width: 80px;
  height: 28px;
  text-align: center;
  font-size: 16px;
  line-height: 28px;
  font-family: "Myriadpro-Bold";
  border-radius: 14px;
  margin: 0 auto 15px;
}

.top-k-item.s .avt-top-k .ico_avt,
.top-k-item.b .avt-top-k .ico_avt {
  top: 18px;
  left: 28px;
  width: 62px;
  height: 62px;
  border-radius: 31px;
  z-index: 8;
}

.top-k-item.s,
.top-k-item.b {
  width: 120px;
}

.top-k-item.v {
  width: 170px;
  margin: 0 15px;
}

.top-k-item.v .avt-top-k .ico_avt {
  top: 38px;
  left: 46px;
  width: 78px;
  height: 78px;
  border-radius: 39px;
  z-index: 8;
}

.top-k-item.s .top-k-score {
  background: #84b0ff;
}

.top-k-item.v .top-k-score {
  background-image: linear-gradient(45deg, #f7d200, #f7d200, #f7ba00, #f7a100);
}

.top-k-item.b .top-k-score {
  background-image: linear-gradient(
    to right,
    #b8b8b8,
    #cfcfcf,
    #ebeaea,
    #c0c0c0,
    #ebeaea
  );
}

.top-k-item p {
  text-align: center;
}

.student_bxh_list {
  max-height: calc(100vh - 400px);
  overflow: auto;
  padding-right: 10px;
}

.student_bxh_list .item-student .stt {
  line-height: 54px;
  font-size: 16px;
  font-family: "Myriadpro-Bold";
  width: 30px;
}

.student_bxh_list .item-student {
  background: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  margin: 0 0 10px;
}

.student_bxh_list .item-student .item-student-img {
  width: 54px;
  height: 54px;
  border-radius: 27px;
  background: #ccc;
  overflow: hidden;
  border: 2px solid #e9af38;
}

.student_bxh_list .item-student-name p {
  line-height: 54px;
  font-size: 16px;
}

.thanhtich-bxh-box {
  margin: 0 0 20px;
}

.student_bxh_list::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.student_bxh_list::-webkit-scrollbar-track {
  background: #bbcbc3;
  border-radius: 4px;
}

/* Handle */
.student_bxh_list::-webkit-scrollbar-thumb {
  background: #e8e803;
  border-radius: 4px;
}

.box-shadow-3 {
  box-shadow: 2px 3px 4px 0 rgb(21 27 38 / 15%);
}

.his-hd {
  width: 100%;
  background: #fff;
  border-radius: 20px;
  height: calc(100vh - 160px);
  padding: 20px 10px 20px 30px;
  /* overflow: auto; */
}

.his-hd .scrollbar-custom {
  height: calc(100vh - 200px);
  overflow: auto;
  padding-right: 10px;
}

.view_height_scroll_assessment_log_learning .scrollbar-custom {
  height: calc(100vh - 180px);
}

.b-26-black {
  line-height: 32px;
  font-size: 26px;
  font-family: "Myriadpro-Bold";
  margin: 15px 0 10px;
}

.his-item {
  margin: 0 0 10px;
  border-bottom: 1px solid #b5b5b5;
}

.his-item p {
  line-height: 31px;
  font-size: 18px;
  font-family: "Myriadpro-Light";
  padding: 0px 5px;
  white-space: normal;
  word-break: break-word;
}

.his-item p.hours {
  font-family: "Myriadpro-Bold";
  width: 100px;
}

.tv-thumb {
  width: 81px;
  height: 81px;
  border-radius: 20px;
  border: 5px solid #fff;
  overflow: hidden;
  position: absolute;
  left: -15px;
  top: -10px;
}

.tv-thumb img {
  width: 100%;
  height: 100%;
}

.tv-item {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  height: 62px;
  padding: 0 0 0 100px;
  margin: 0 0 30px !important;
}

.tv-item h2 {
  line-height: 62px;
  font-size: 18px;
  font-family: "Myriadpro-Bold";
  color: #221f1f;
}

.voice {
  width: 60px;
}

.tv-score span {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  font-size: 25px;
  font-family: "Myriadpro-Bold";
  background-image: linear-gradient(to right, #58be92, #00b7b5);
  text-align: center;
  margin: 0 10px 0 0;
  color: #fff;
}

.tuvung-container {
  padding: 30px 0 0;
}

.tuvung_list {
  max-height: calc(100vh - 200px);
  padding-top: 10px;
  overflow: auto;
}

.box-tv-info h2 {
  color: #221f1f;
  font-size: 18px;
  margin: 0 0 15px;
  font-family: "Myriadpro-Regular";
}

.box-tv-info p,
.box-tv-info span {
  color: #00a69c;
  font-size: 16px;
  font-family: "Myriadpro-Regular";
}

.tuvung .box-giaotrinh-gr {
  background: #fff;
  border-radius: 20px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 20px 20px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0 15px 0 80px;
  width: 100%;
}

.tuvung .box-giaotrinh-gr.active {
  background: #c3fdf3;
}

.tuvung .box-giaotrinh-gr .thumb {
  position: absolute;
  top: 14px;
  left: -20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccedeb;
  border: 3px solid #fff;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  box-shadow: 0 1px 8px 0 rgb(21 27 38 / 24%);
}

.bold {
  font-family: "Myriadpro-Bold" !important;
}

.sunE-giaotrinh-list {
  max-height: calc(100vh - 360px);
  overflow: auto;
}

.ov-auto {
  overflow: auto;
  scroll-behavior: thin;
  margin: 0 0 30px;
  padding-bottom: 10px;
}

.tv-giaotrinh-item {
  height: 150px;
  width: 100%;
  /* width: 310px; */
  border-radius: 20px;
  padding: 0 10px;
  margin: 0 20px 10px 0;
  cursor: pointer;
}

.tv-giaotrinh-item .img {
  height: 94px;
  border-radius: 20px;
  overflow: hidden;
  opacity: 0.5;
}

.tv-giaotrinh-item.active {
  background: #fff;
  width: 100%;
}

.tv-giaotrinh-item.active .img {
  width: 100%;
  height: 94px;
  opacity: 1;
}

.tv-giaotrinh-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sunE-container-box.tuvung {
  padding: 20px;
}

.tv-giaotrinh-item .flex-1 {
  padding: 0 20px;
}

.tv-giaotrinh-item p {
  color: #00bbb6;
  font-size: 17px;
  font-family: "Myriadpro-Bold";
}

.bangdiem-menu-gr span {
  color: #000000;
  font-size: 24px;
  font-family: "Myriadpro-Bold";
  padding: 0 0 5px;
  margin: 0 20px;
  cursor: pointer;
}

.bangdiem-menu-gr {
  margin: 0 0 30px;
}

.bangdiem-menu-gr span.active {
  border-bottom: 2px solid #f9b038;
}

.table-box-content table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 20px !important;
  border-style: hidden;
  /* hide standard table (collapsed) border */
  box-shadow: 0 0 0 1px #58595b;
  /* this draws the table border  */
}

.table-box-content th,
.table-box-content td {
  padding: 15px;
  text-align: center;
  font-size: 18px;
  font-family: "Myriadpro-Regular";
  color: #58595b;
  border: 1px solid #58595b;
}

.box-danhhieu-process {
  background: #fff;
  padding: 10px;
  border-radius: 20px;
  margin: 0 10px 30px 10px;
}

.top-t {
  background-image: linear-gradient(to right, #00e2a0, #00b9b7);
  height: 46px;
  border-radius: 23px;
  padding: 0 30px;
  margin: 0 0 20px;
  box-sizing: border-box;
}

.top-t p {
  font-size: 18px;
  font-family: "Myriadpro-Regular";
  color: #fff;
  line-height: 46px;
}

.process-k,
.process-info-k {
  display: flex;
}

.circle-k {
  width: 28px;
  height: 28px;
  background: #d1d3d4;
  border-radius: 14px;
  margin-left: -2px;
  z-index: 9;
  overflow: hidden;
}

.process-line {
  background: #00e2a0;
  width: 100%;
  height: 100%;
}

.process-h .circle-k {
  width: 12px;
  height: 12px;
  background: #d1d3d4;
  border-radius: 6px;
  margin-top: -1px;
  z-index: 9;
  overflow: hidden;
}

.circle-k.active {
  background: #00e2a0;
}

.line-k {
  width: 51px;
  height: 14px;
  margin-top: 7px;
  background: #d1d3d4;
  margin-left: -2px;
  z-index: 8;
}

.line-k.active {
  background: #00e2a0;
}

.process-h .line-k {
  width: 4px;
  height: 51px;
  background: #d1d3d4;
  margin-top: -1px;
  z-index: 8;
  margin-left: 2px;
}

.process-h .line-k.active {
  background: #00e2a0;
}

.process-info-k {
  margin-top: 10px;
}

.process-info-k .space {
  width: 79px;
  text-align: center;
}

.process-info-k .space p {
  font-size: 18px;
  font-family: "Myriadpro-Light";
  line-height: 18px;
}

.process-info-h .space {
  height: 59px;
  opacity: 0.5;
}

.process-info-h .space.active {
  opacity: 1;
}

.process-info-h .space p {
  font-size: 18px;
  font-family: "Myriadpro-Light";
  line-height: 24px;
  margin-right: 10px;
}

.top-h {
  margin: 30px 0 10px;
}

.top-h p {
  font-size: 18px;
  font-family: "Myriadpro-Light";
  line-height: 24px;
}

.process-info-h .space .scoe {
  padding-right: 8px;
}

.process-hz {
  padding: 0 30px;
}

.box-nhatkyhoctap-graph,
.box-nhatkyhoatdong {
  background: #fff;
  border-radius: 20px;
  padding: 10px;
  margin: 0 10px 30px 10px;
}

.box-nhatkyhoctap-graph,
.box-nhatkyhoatdong:last-child {
  margin: 30px 10px 0 10px;
}

.filter-box-nhatkyhoctap-graph {
  width: 150px !important;
}

.fix_text_cut_chart::after {
  background: none !important;
}
.box-s {
  padding: 0 5px 0 30px;
}

.box-s span {
  display: block;
  height: 36px;
  margin-top: 5px;
  border-radius: 18px;
  background: #fff;
  color: #00cbad;
  font-size: 18px;
  font-family: "Myriadpro-Light";
  line-height: 36px;
  padding: 0 5px 0 40px;
}

.box-s img {
  position: absolute;
  top: 5px;
  left: 5px;
}

.box-nhatkyhoctap-graph .bangdiem-menu-gr span {
  font-size: 18px;
  text-align: center;
  margin: 0;
  font-family: "Myriadpro-Regular";
}

.line-active {
  width: 80px;
  height: 2px;
  background: #f9b038;
  margin: 0 auto;
  display: none;
}

.btn-gr-menu {
  cursor: pointer;
}

.btn-gr-menu.active .line-active {
  display: block;
}

.box-nhatkyhoctap-graph .bangdiem-menu-gr .btn-gr-menu.active span {
  font-family: "Myriadpro-Bold";
}

.box-nhatkyhoctap-graph .bangdiem-menu-gr span.active {
  border-bottom: none;
}

.box-diem .top-o {
  background-image: linear-gradient(to right, #00e2a0, #00b9b7);
  border-radius: 28px;
  height: 56px;
  margin: 0 0 20px;
}

.box-diem .top-o p {
  font-size: 18px;
  line-height: 20px;
  text-align: center;
  margin: 0;
  font-family: "Myriadpro-Light";
  color: #fff;
}

.box-diem h2 {
  font-size: 45px;
  text-align: center;
  margin: 0;
  font-family: "Myriadpro-Bold";
  color: #00c0b2;
}

.box-diem {
  background: #fff;
  border-radius: 20px;
  padding: 10px;
  margin: 0 20px;
}

.box-diem-gr {
  margin: 0 10px 30px 10px;
}

.box-nhatkyhoatdong .box-s span {
  padding: 0 20px;
  cursor: pointer;
  box-sizing: border-box;
}

.his-item-gr p.time-hs {
  line-height: 31px;
  font-size: 24px;
  font-family: "Myriadpro-Light";
}

.box-nhatkyhoatdong .his-item .hours {
  width: 80px;
  margin: 10px;
}

.box-nhatkyhoatdong .his-hd {
  height: auto;
  min-height: 400px;
}

/*END STUDENT MORE*/
/*MORE CSS*/
.loading {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.48);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

/* Loading Side */
/* .loading-side {
   position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.48);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}  */

.loader {
  border: 4px solid #f1f1f1;
  border-radius: 50%;
  border-top: 4px solid #00b9b7;
  width: 40px;
  height: 40px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

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

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

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

.ico_dropdown {
  position: absolute;
  right: 5px;
  top: 5px;
}

.hide {
  display: none;
}

.err .select-styled {
  border: 2px solid #e22028;
}

.custom-select-content::after {
  content: "\f107";
  font-family: FontAwesome;
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  text-align: center;
  font-size: 28px;
  line-height: 44px;
  color: #636363;
  background-color: #fff;
  pointer-events: none;
  border-radius: 22px;
}

.custom-select-content.err {
  border: 2px solid #e22028;
  border-radius: 22px;
}

.custom-select {
  height: 44px;
  width: 100%;
  line-height: 44px;
  font-size: 16px;
  box-sizing: border-box;
  padding-left: 60px;
  border-radius: 22px;
  outline: none;
  flex: 1;
  cursor: pointer;
  display: flex;
  border: 1px solid #fff;
  box-shadow: 0 1px 15px 0 rgb(21 27 38 / 15%);
}

.custom-select option {
  color: #dedede;
}

.custom-select::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1em;
  background: #34495e;
  cursor: pointer;
  pointer-events: none;
  -webkit-transition: 0.25s all ease;
  -o-transition: 0.25s all ease;
  transition: 0.25s all ease;
}

.custom-select option[rel="hide"] {
  display: none;
}

.react-datepicker-wrapper {
  width: 100%;
}

.gr-gender.err .sunE-male-female {
  border: 2px solid #e22028;
}

.btn-back {
  font-family: "Myriadpro-Bold";
}

.btn_click_link {
  font-family: "Myriadpro-Bold";
  color: #3e3e3d;
  text-decoration: underline;
  cursor: pointer;
  font-size: 16px;
}

.menu-item .ico_active {
  display: none;
}

.menu-item.active img.ico_default {
  display: none;
}

.menu-item.active img.ico_active {
  display: block;
}

.form-sunE-button.btn-mr-custom {
  margin: 0;
}

.content-flex-end {
  align-items: flex-end;
  display: flex;
}

.sunE-create-class-content {
  padding-top: 40px;
}

.apdung-custom {
  background: #fff;
  border-radius: 29px;
  padding: 0 10px;
}

.apdung.apdung-custom label {
  margin: 15px 0 15px 15px;
  padding: 0 0 0 15px;
}

.apdung.apdung-custom .text-blue-main {
  padding-left: 20px;
  padding-right: 20px;
}

.apdung.apdung-custom .flex-1 img {
  margin: 18px 0 0 10px;
  width: 12px;
}

.select-custom-bg select {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  border: none;
  outline: none;
  text-align-last: center;
  box-shadow: 0 1px 8px 0 rgba(21, 27, 38, 0.15);
  font-size: 16px;
  font-family: "Myriadpro-SemiBold";
  padding-right: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Remove default arrow */
  color: #fff;
  background: url("./../images/icon/ico_dropdown_border_white.png") 98% / 30px
    no-repeat #00ceab;
  /* Add custom arrow */
}

.select-custom-bg select::-ms-expand {
  display: none;
  /* remove default arrow on ie10 and ie11 */
}

.select-custom-bg.err select {
  border: 2px solid #e22028;
}

.select-custom-bg select option {
  text-align: center;
}

.text-left select {
  text-align-last: left;
  padding-left: 40px;
}

.sunE-calendar .react-datepicker__day--selected {
  background: #fff !important;
  border: 2px solid #00a79d !important;
  border-radius: 50% !important;
  color: #404041 !important;
  padding-top: 3px !important;
  background-image: linear-gradient(to right, #fff, #fff);
}

.sunE-calendar .react-datepicker__day--today {
  border-radius: 25px !important;
  background-image: linear-gradient(to right, #00e1a0, #00b9b7) !important;
  color: #fff !important;
  border: none !important;
}

.sunE-calendar .react-datepicker__day--keyboard-selected,
.sunE-calendar .react-datepicker__month-text--keyboard-selected,
.sunE-calendar .react-datepicker__quarter-text--keyboard-selected,
.sunE-calendar .react-datepicker__year-text--keyboard-selected {
  background: #fff !important;
  color: black !important;
}

.buy-now {
  margin: 20px 0;
}

.sunE-main-title .form-sunE-button.btn-select-year {
  margin-right: 10px;
}

.btn-select-year button {
  padding: 0 65px;
}

.btn-select-year .ico_left {
  position: absolute;
  top: 8px;
  left: 10px;
  cursor: pointer;
}

.btn-select-year .ico_right {
  position: absolute;
  top: 8px;
  right: 10px;
  cursor: pointer;
}

.react-datepicker-popper {
  z-index: 12 !important;
}

.gt_list_hei {
  max-height: calc(100vh - 360px);
  padding: 0 15px;
  overflow: auto;
}

.no-gt p {
  font-size: 18px;
  margin: 20px 0 0;
}

.mg-20 {
  margin: 20px 0 !important;
}

.custom-select-no-bg .arrow {
  position: relative;
  z-index: 1000;
  width: 15px;
  height: auto;
  left: 94.8%;
  top: 1px;
}

.custom-select-no-bg .arrow.rotate180 {
  transform: rotate(180deg);
}

.custom-select-no-bg .select-styled {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  border: none;
  outline: none;
  text-align-last: left;
  box-shadow: 0 1px 8px 0 rgb(21 27 38 / 15%);
  font-size: 16px;
  font-family: "Myriadpro-Regular";
  padding-right: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(./../images/icon/ico_dropdown_s.png) 96% / 20px no-repeat #fff;
  color: #424242;
}

.custom-select-no-bg .select-styled.active {
  background: url(./../images/icon/ico_dropup.png) 96% / 20px no-repeat #fff;
}

.custom-select-no-bg.err .select-styled {
  border: 2px solid #e22028;
}

.custom-select-no-bg .select-styled {
  z-index: 10;
  text-align: left;
  padding-left: 60px;
}

.custom-select-no-bg .select-styled:after {
  display: none;
}

.custom-select-no-bg .select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #424242;
  width: 100%;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  border: none;
  background: #fff;
}

.select-custom-bg .select-options {
  padding: 20px 40px 0;
  top: 20px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.ico_icon_select {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 10;
}

.select-custom-bg .select {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
}

.select-custom-bg.err .select-styled {
  border: 2px solid #e22028;
}

.select-custom-bg .select-styled {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 40px;
}

.select-custom-bg .select-styled:after {
  top: 5px;
  right: 6px;
}

.select-custom-bg .select-options {
  border-radius: 20px;
}

.select-custom-bg .select-styled {
  z-index: 10;
  text-align: left;
  padding-left: 20px;
}

.select-custom-bg.text-center .select-styled {
  text-align: center;
  padding-left: 0;
}

.select-custom-bg .select-options {
  display: none;
  position: absolute;
  padding: 20px 40px 0;
  top: 20px;
  right: 0;
  left: 0;
  z-index: 9;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border-radius: 20px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.lcv.select-custom-bg .select-options li {
  text-align: left;
  text-indent: 0;
  font-size: 16px;
}

.lcv.select-custom-bg .select-options li .circle {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border: none;
  background: #8dc63f;
  margin: -2px 8px 0 0;
  display: inline-block;
}

.lcv.select-custom-bg .select-options li:nth-child(2) .circle {
  background: #fbb040;
}

.lcv.select-custom-bg .select-options li:nth-child(3) .circle {
  background: #c367f4;
}

.lcv.select-custom-bg .select-options li:nth-child(4) .circle {
  background: #C41C2C;
}

.lcv.select-custom-bg .select-options li:nth-child(5) .circle {
  background: #be1e2d;
}

.valid_to_input {
  margin: 11px 0 0 10px;
}

.valid_to_input input {
  border: none;
  outline: none;
  color: #00a79d;
  font-family: "Myriadpro-SemiBold";
  font-size: 18px;
  width: 94px;
  margin-right: 40px;
  background: none;
  height: 22px;
}

.custom-select-w {
  width: 380px;
}

.custom-select-w .select-styled {
  text-align-last: center;
  padding: 0;
}

.gt-sunE-hei {
  max-height: calc(100vh - 200px);
  overflow: auto;
  padding-left: 20px;
  padding-top: 10px;
}

.unit-list .uk-grid > * {
  padding-left: 25px;
}

.btn-more-info .show_ {
  /*margin: 18px 0 0 1px;*/
}

.text-trans {
  text-transform: uppercase;
}

.chk-custom-gr {
  margin-left: 0;
}

.chk-gr .chk-custom-gr {
  margin-left: 5px;
}

.chk-custom-gr input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.chk-custom-gr label {
  position: relative;
  cursor: pointer;
}

.chk-custom-gr label:before {
  content: "";
  -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid #ed8a22;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 12px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 3px;
  margin-top: -1px;
}

.chk-custom-gr input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: -8px;
  left: 10px;
  width: 8px;
  height: 22px;
  border: solid #84c241;
  border-width: 0 4px 4px 0;
  transform: rotate(37deg);
}

.wh20.chk-custom-gr label:before {
  padding: 9px;
}

.wh20.chk-custom-gr input:checked + label:after {
  top: -3px;
  left: 6px;
  width: 6px;
  height: 18px;
  border: solid #84c241;
  border-width: 0 3px 3px 0;
  transform: rotate(36deg);
}

.wh20.chk-custom-gr-selected input:checked + label:after {
  top: -6px;
  left: 8px;
}

.mt-20 {
  margin-top: 20px !important;
}

.sunE-class-list a {
  width: 100%;
}

.pad-center-large {
  padding: 0 160px !important;
}

.text-err-ai {
  color: red;
  text-decoration: line-through;
}

.text-fix-ai {
  color: green;
}

.have-explain {
  background-color: #ffe699;
}

.wh27 {
  width: 27px;
  height: 27px;
}

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  height: 1.7rem;
  line-height: 1.7rem !important;
  border: 1px solid rgb(255 255 255 / 0%);
}

.react-datepicker__day--selected {
  background-image: linear-gradient(to right, #fff, #fff) !important;
  color: #00b9b7 !important;
  border: 1px solid #00b9b7 !important;
}

.react-datepicker__week .react-datepicker__day--today {
  background-image: linear-gradient(to right, #00e1a0, #00b9b7) !important;
}

.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
  border-radius: 50% !important;
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
}

.react-datepicker__day--selected:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__year-text--selected:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--in-range:hover {
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
}

.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
  border: 1px solid #00b9b7;
  border-radius: 50% !important;
}

.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item--selected {
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
  color: white;
  font-weight: bold;
}

.react-datepicker__time-container
  .react-datepicker__time
  .react-datepicker__time-box
  ul.react-datepicker__time-list
  li.react-datepicker__time-list-item:hover {
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
}

.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
  font-weight: bold;
  color: #fff !important;
  border-radius: 50%;
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
}

.react-datepicker__day--selected.react-datepicker__day--today {
  color: #fff !important;
}

/*.react-datepicker__day.react-datepicker__day--today:hover,.react-datepicker__day--selected.react-datepicker__day:hover,.react-datepicker__day--selected.react-datepicker__day{
    border: none!important;
}*/
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
  border-radius: 8px !important;
  background-image: linear-gradient(to right, #00e1a0, #00b9b7);
  border: none;
  color: #fff !important;
}

.react-datepicker__month .react-datepicker__month-text:hover, .react-datepicker__month .react-datepicker__quarter-text:hover {
  border-radius: 8px !important;
  border: none !important;
}

.react-datepicker__month .react-datepicker__month-text, .react-datepicker__month .react-datepicker__quarter-text {
  width: auto !important;
}

.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {
  font-size: 1.6rem !important;
}

.react-datepicker__navigation {
  top: .8rem !important;
}

.react-datepicker__month {
  width: 180px !important;
}

.react-datepicker__month-wrapper {
  display: flex !important;
}

.react-datepicker__day--today, .react-datepicker__month-text--today, .react-datepicker__quarter-text--today, .react-datepicker__year-text--today {
  border-radius: 8px !important;
}

.react-datepicker__day--keyboard-selected {
  border-radius: 0;
  background-color: #fff !important;
  color: #000 !important;
}

.class-slect-time.mgh {
  margin: 8px 0 0;
}

.mb0 {
  margin-bottom: 0 !important;
}

.f20 {
  font-size: 20px !important;
}

.pad-t-80 {
  padding-top: 80px;
}

.mx-h {
  max-height: calc(100vh - 190px);
}

.sunE-container-box.giaotrinh.canhan.pad {
  padding: 20px 20px 10px;
}

ul.pagination {
  list-style: none;
  display: inline-block;
}

ul.pagination li {
  list-style: none;
  display: inline-block;
}

ul.pagination li a {
  display: block;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  text-align: center;
  line-height: 24px;
  border: none;
  font-family: "Myriadpro-Regular";
  font-size: 16px;
}

ul.pagination li.active a,
ul.pagination li:hover a {
  background: #00b9b7;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.sunE-container-box.giaotrinh.teacher-giaobai {
  padding: 20px 20px 10px;
}

.giaotrinh.teacher-giaobai .giaotrinh.filter .sunE-giaotrinh-resuft-filter {
  height: calc(100vh - 270px);
}

.giaotrinh.unit .sunE-giaotrinh-list.curriculum {
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding-top: 10px;
  padding-left: 15px;
}

.giaotrinh.unit .sunE-giaotrinh-list-teacher.curriculum {
  max-height: calc(100vh - 200px);
  overflow: auto;
  padding-top: 10px;
  padding-left: 15px;
}

.giaotrinh.unit.teacher-giaobai .unit-list {
  padding: 0 15px 0 30px;
}

.bd-l-blue {
  border-left: 3px solid #00bbb6;
}

.sunE-giaotrinh-list .uk-width-1-2 {
  margin-bottom: 15px;
}

.giaobai-support .uk-container {
  padding-left: 0;
  padding-right: 0;
}

.giaobai-detail .select-gr select {
  border-radius: 3px;
}

.giaobai-detail .underline {
  text-decoration: underline;
  font-family: "Myriadpro-Semibold";
}

.giaotrinh.unit .sunE-giaotrinh-list.curriculum {
  padding: 10px 32px 0 20px;
}

.giaotrinh.unit.teacher-giaobai .unit-list.uk-container {
  padding-top: 10px;
}

.diemdanh-cutom-select .select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 18px;
  font-family: "Myriadpro-Light";
  color: #84c241;
  width: 145px;
  height: 32px;
  line-height: 32px;
  border-radius: 17px;
  border: none;
  background: #fff;
  box-sizing: border-box;
  box-shadow: none;
}

.diemdanh-cutom-select .select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  width: 145px;
  height: 32px;
  line-height: 32px;
  /* transition: all 0.2s ease-in; */
  border-radius: 17px;
  font-size: 18px;
  text-align: left;
  padding-left: 20px;
  font-family: "Myriadpro-Light";
  z-index: 10;
  box-sizing: border-box;
}

.diemdanh-cutom-select .select-styled .line {
  position: absolute;
  right: 36px;
  top: 2px;
}

.diemdanh-cutom-select #intime.select-styled {
  border: 1px solid #84c241;
  color: #84c241;
}

.diemdanh-cutom-select #intime.select-styled .line {
  color: #84c241;
}

.diemdanh-cutom-select #late.select-styled {
  border: 1px solid #ed8a22;
  color: #ed8a22;
}

.diemdanh-cutom-select #late.select-styled .line {
  color: #ed8a22;
}

.diemdanh-cutom-select #absence_not_allowed.select-styled {
  border: 1px solid #be1e2d;
  color: #be1e2d;
}

.diemdanh-cutom-select #absence_not_allowed.select-styled .line {
  color: #be1e2d;
}

.diemdanh-cutom-select #absence_allowed.select-styled {
  border: 1px solid #be1e2d;
  color: #be1e2d;
}

.diemdanh-cutom-select #absence_allowed.select-styled .line {
  color: #be1e2d;
}

.diemdanh-cutom-select .select-styled:after {
  content: "";
  width: 18px;
  height: 9px;
  background: url(./../images/teacher/diemdanh/ico_dropdown_green.png) 96% /
    18px no-repeat transparent;
  position: absolute;
  top: 12px;
  right: 10px;
}

.diemdanh-cutom-select #late.select-styled:after {
  content: "";
  width: 18px;
  height: 9px;
  background: url(./../images/teacher/diemdanh/ico_dropdown_orange.png) 96% /
    18px no-repeat transparent;
  position: absolute;
  top: 12px;
  right: 10px;
}

.diemdanh-cutom-select #absence_not_allowed.select-styled:after,
.diemdanh-cutom-select #absence_allowed.select-styled:after {
  content: "";
  width: 18px;
  height: 9px;
  background: url(./../images/teacher/diemdanh/ico_dropdown_red.png) 96% / 18px
    no-repeat transparent;
  position: absolute;
  top: 12px;
  right: 10px;
}

.diemdanh-cutom-select .select-options {
  display: none;
  position: absolute;
  padding: 10px;
  top: calc(100% + 3px);
  right: 0;
  left: 0;
  z-index: 11;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border-radius: 20px;
  border: none;
  box-shadow: 0 1px 15px 0 rgb(21 27 38 / 15%);
  max-height: calc(100vh - 100px);
  overflow: auto;
}

.diemdanh-cutom-select .select-options li {
  margin: 0;
  text-indent: 0;
  transition: all 0.15s ease-in;
  border-bottom: none;
  text-align: center;
  padding: 5px 0;
  font-size: 18px;
  font-family: "Myriadpro-Regular";
}

.diemdanh-cutom-select .select-options li:nth-child(1) {
  color: #84c241;
}

.diemdanh-cutom-select .select-options li:nth-child(2) {
  color: #ed8a22;
}

.diemdanh-cutom-select .select-options li:nth-child(3) {
  color: #be1e2d;
}

.diemdanh-cutom-select .select-options li:nth-child(4) {
  color: #be1e2d;
}

.f-24 {
  font-size: 24px;
}

.score-bg-blue input {
  font-family: "Myriadpro-Bold";
  font-size: 24px;
  width: 38px;
  color: #00a69c;
  line-height: 24px;
  display: block;
  text-align: center;
  background: rgb(0 0 0 / 0%);
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.score-bg-blue input::-webkit-input-placeholder {
  /* Edge */
  color: rgb(0 166 156 / 30%);
  font-family: "Myriadpro-Bold";
}

.score-bg-blue input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgb(0 166 156 / 30%);
  font-family: "Myriadpro-Bold";
}

.score-bg-blue input::placeholder {
  color: rgb(0 166 156 / 30%);
  font-family: "Myriadpro-Bold";
}

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

/* Firefox */
.score-bg-blue input[type="number"] {
  -moz-appearance: textfield;
}

.menu-gr-right input[type="text"].btn {
  width: 100%;
  display: block;
  height: 48px;
  border-radius: 24px;
  background: rgb(0 203 173 / 30%);
  color: #231f20;
  font-size: 18px;
  line-height: 48px;
  margin: 0 0 10px;
  cursor: pointer;
  border: none;
  outline: none;
  box-sizing: border-box;
  padding: 0 30px;
  font-family: "Myriadpro-Regular";
}

.menu-gr-right input[type="text"].btn.name_kt {
  font-family: "Myriadpro-Italic";
}

.menu-gr-right input[type="text"].btn::-webkit-input-placeholder {
  /* Edge */
  color: #231f20;
}

.menu-gr-right input[type="text"].btn:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #231f20;
}

.menu-gr-right input[type="text"].btn::placeholder {
  color: #231f20;
}

.menu-gr-right .react-datepicker-wrapper input[type="text"] {
  width: 100%;
  display: block;
  height: 48px;
  border-radius: 24px;
  background: #b2ece8;
  color: #231f20;
  font-size: 18px;
  line-height: 48px;
  margin: 0 0 10px;
  cursor: pointer;
  border: none;
  outline: none;
  box-sizing: border-box;
  padding: 0 30px;
  font-family: "Myriadpro-Regular";
}

.btn-ob.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 100%;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
  border: none;
  background: #b2ece8;
}

.btn-ob .select-styled {
  background: #b2ece8;
  border-radius: 24px;
  color: #231f20;
  font-family: "Myriadpro-Regular";
  font-size: 18px;
  line-height: 48px;
  text-align: left;
  box-sizing: border-box;
  padding: 0 30px;
}

.btn-ob .select-styled:after {
  content: "";
  width: 24px;
  height: 14px;
  background: url(./../images/teacher/diemdanh/ico_dropdown_blue.png) 90% / 24px
    no-repeat transparent;
  position: absolute;
  top: 19px;
  right: 8px;
}

.btn-ob .select-styled.active:after {
  background: url(./../images/teacher/diemdanh/ico_dropup_blue.png) 90% / 24px
    no-repeat transparent;
}

.hoc-ky.btn-ob {
  z-index: 10;
}

.hoc-ky.btn-ob .select-options {
  z-index: 9;
}

.kiem-tra-mieng.btn-ob {
  z-index: 8;
}

.kiem-tra-mieng.btn-ob .select-options {
  z-index: 7;
}

.he-so.btn-ob {
  z-index: 6;
}

.he-so.btn-ob .select-options {
  z-index: 5;
}
.uk-modal {
  z-index: 99999;
}

.uk-modal .uk-modal-body {
  padding: 20px;
}

.medium-title.f-24 {
  margin: 0 0 25px;
}

.box-chart {
  margin: 0 0 20px;
}

.box-chart p {
  color: #000000;
  font-family: "Myriadpro-Regular";
  font-size: 18px;
}

.box-chart .w254 {
  width: 254px;
}

.box-bcht .calendar {
  margin: 0 auto 20px;
}

.list-schedule {
  max-height: calc(100vh - 160px);
  overflow: auto;
  padding-right: 10px;
}

.medium-title .chk-custom-gr label:before {
  margin-top: -4px;
}

.medium-title .wh20.chk-custom-gr input:checked + label:after {
  top: -10px;
}

.mex-box-height {
  height: calc(100vh - 340px);
  overflow: auto;
  padding-right: 10px;
}

.mex-info-box {
  background: #8ee4db;
  padding: 20px;
  margin: 0 0 30px 20px;
  border-radius: 20px;
}

.mex-info-box .send-name {
  position: absolute;
  top: 5px;
  left: 15px;
}

.mex-info-box.isMe {
  background: #fff;
  margin: 0 20px 30px 50px;
  padding: 30px 20px 20px;
}

.mex-info-box p {
  color: #221f1f;
  font-family: "Myriadpro-Light";
  font-size: 18px;
}

.mex-info-box span.time-send {
  position: absolute;
  bottom: -20px;
  right: 0;
  color: #58595b;
  font-family: "Myriadpro-Light";
  font-size: 12px;
}

.mex-info-box.isMe span.time-send {
  position: absolute;
  bottom: -20px;
  right: auto;
  left: 0;
  color: #58595b;
  font-family: "Myriadpro-Light";
  font-size: 12px;
}

.__checked_send_exam {
  font-size: 22px;
  font-weight: bold;
  margin: 10px;
  color: #84c241;
  align-items: center;
}

.__checked_send_exam img {
  margin: 0px 10px;
  height: 24px;
}

.__checked_send_exam_children img {
  margin: 0px 5px;
  height: 20px;
}

.__checked_send_exam_children {
  font-size: 16px;
  font-weight: bold;
  margin: 5px 10px;
  color: #84c241;
  align-items: center;
}

.pad20 {
  padding: 20px;
}

.react-datepicker-popper {
  z-index: 12;
}

.item-student-name .nx {
  max-width: 460px;
  display: block;
  font-family: "Myriadpro-Light" !important;
  /* padding-bottom: 30px; */
}

.btn-ob .select-options li {
  text-indent: 25px;
  border-bottom: 1px solid #d9d8d8;
  text-align: left;
}

.btn-ob .select-options {
  padding: 24px 25px 0;
}

.mex-box-height-2 {
  height: calc(100vh - 433px);
  overflow: auto;
  padding-right: 10px;
}

.send-mes {
  background: #fff !important;
  border: none;
}

.send-mes img {
  width: 24px;
}

.diemdanh-list-hs.pr-0 {
  padding-right: 0;
}

.checbox-right .chk-custom-gr label:before {
  margin-left: 15px;
  margin-right: 0;
}

.checbox-right .wh20.chk-custom-gr input:checked + label:after {
  left: auto;
  right: 5px;
  top: -6px;
}

/* Check box assigned */
.wh20.check-assigned input:checked + label:after {
  /* top: -5px; */
  top: -8px;
  left: 8px;
  height: 18px;
  border: solid #84c241;
  border-width: 0 3.7px 3.7px 0;
}

/* Check box student */
.wh20.check-select-student input:checked + label:after {
  /* top: -5px; */
  top: -6px;
  left: 8px;
  height: 18px;
  border: solid #84c241;
  border-width: 0 3.7px 3.7px 0;
}

/* Check box select all */
.checbox-right .wh20.check-select-student input:checked + label:after {
  left: auto;
  right: 2px;
  top: -8px;
}

.mes-avt {
  width: 42px;
  height: 42px;
  border-radius: 21px;
  overflow: hidden;
  border: 2px solid #e7c71d;
  position: absolute;
  left: -50px;
  top: 0;
}

.mes-avt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pr45 {
  padding-right: 45px;
}

.react-datepicker__day--outside-month {
  color: #7d7d7d !important;
}

.sunE-container-box.giaotrinh.unit {
  padding: 20px 20px 0;
}

.giaotrinh.unit.student .unit-list {
  padding: 0 25px 0 20px;
}

.giaotrinh.unit.student .info-item-desc h2 {
  color: #fff;
  text-align: left;
}

.giaotrinh.unit.student .unit-list .unit-giaotrinh-content.active {
  background: rgb(4 5 5 / 32%);
  border-top-right-radius: 35px;
  border-top-left-radius: 35px;
}

.giaotrinh.unit.student
  .unit-list
  .unit-giaotrinh-content.active
  .unit-more-info {
  border-bottom: none;
}

.msg-active {
  background: #c3fdf3;
}

.msg-seen.tinnhan-item h2 {
  font-family: "Myriadpro-Regular";
  color: #525252;
}

.msg-seen.tinnhan-item span {
  color: #525252;
}

.select-language.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 18px;
  color: #00bbb5;
  width: 100%;
  height: 24px;
  line-height: 24px;
  border-radius: 0;
  border: none;
  background: none;
  font-family: "Myriadpro-SemiBold";
}

.select-language .select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: none;
  width: 100%;
  height: 24px;
  line-height: 24px;
  border: none;
  transition: all 0.2s ease-in;
  border-radius: 0;
  color: #00bbb5;
  font-size: 16px;
  text-align: center;
  font-family: "Myriadpro-SemiBold";
  z-index: 10;
  text-decoration: underline;
}

.select-language .select-styled:after {
  content: "";
  width: 0;
  height: 0;
  background: none;
  position: absolute;
  top: 0;
  right: 0;
}

.select-language .select-options {
  width: 130px;
  display: none;
  position: absolute;
  padding: 10px 5px;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 9;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border-radius: 10px;
  border: none;
  box-shadow: 0 1px 15px 0 rgb(21 27 38 / 15%);
  max-height: auto;
  overflow: auto;
}

.select-language .select-options li {
  margin: 0;
  text-indent: 0;
  transition: all 0.15s ease-in;
  border-bottom: none;
  text-align: center;
  padding: 3px 0;
}

.student-search .search-custom {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}

.edit-profile-student button {
  padding: 0 20px 0 45px;
}

.edit-profile-student .ico_edit_profile {
  position: absolute;
  left: 15px;
  top: 8px;
}

.w25 {
  width: 25px;
}

.info-parent {
  margin: 20px 0 0;
}

.ph-add-gr h2 {
  color: #404041;
  font-size: 24px;
  line-height: 31px;
  font-family: "Myriadpro-Bold";
}

.btn-add-ph {
  cursor: pointer;
  margin: 0 0 0 40px;
}

.btn-add-ph span {
  color: #00b9b6;
  font-size: 18px;
  line-height: 25px;
  font-family: "Myriadpro-Regular";
  margin: 5px 0 0 10px;
}

.parent-info .avatar {
  width: 76px;
  height: 76px;
  border-radius: 38px;
  overflow: hidden;
  margin-right: 20px;
  border: 3px solid #fff;
  box-shadow: 0 1px 6px 0 rgba(21, 27, 38, 0.15);
}

.parent-info p {
  color: #231f20;
  font-size: 18px;
  line-height: 18px;
  font-family: "Myriadpro-Regular";
  margin: 20px 0 5px;
}

.parent-info span {
  color: #231f20;
  font-size: 18px;
  line-height: 25px;
  font-family: "Myriadpro-Light";
  margin: 0;
}

.avatar-edit-box.student {
  width: 186px;
  height: 186px;
}

.avatar-edit.student {
  padding-top: 20px;
}

.bg_edit_student_profile {
  position: absolute;
  top: 0;
  left: 0;
}

.radio-item {
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type="radio"] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 8px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 1px solid #404041;
  background-color: transparent;
  box-sizing: border-box;
}

.laplai label {
  font-family: "Myriadpro-Regular";
  font-size: 16px;
  color: #404041;
  display: unset;
  padding: 0;
  cursor: pointer;
}

.laplai p > input[type="radio"]:checked + *::before {
  border-color: #84c241;
}

.time-to.select-time input {
  background: no-repeat;
  box-shadow: none;
  color: #00a69c;
  font-size: 18px;
  font-family: "Myriadpro-SemiBold";
  margin: 11px 0 0 15px;
  cursor: pointer;
}

.apdung .time-to.select-time .ico_edit_time_to {
  cursor: pointer;
  position: absolute;
  left: 136px;
  top: 18px;
  margin: 0;
}

.sunE-container-box-UI {
  padding: 10px 0;
}

.sunE-container-box-UI.setting {
  padding: 0;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.bg-main-color-m {
  background-image: linear-gradient(to bottom, #e1fef0, #ffffff);
}

.w100 {
  width: 100%;
  box-sizing: border-box;
  display: block;
}

.img-cover {
  object-fit: cover;
}

.w100 img {
  width: 100%;
  height: 100%;
  display: block;
}

.gioithieu-info {
  padding: 0 25px 2rem;
}

.gioithieu-info p {
  line-height: 20px;
  color: #404041;
  font-size: 20px;
  font-family: "Myriadpro-Regular";
  padding-bottom: 20px;
}

.term-info {
  background: #fff;
  padding: 30px;
  border-radius: 20px;
  margin: 30px 0 0;
}

.term-info p {
  line-height: 24px;
  color: #404041;
  font-size: 18px;
  font-family: "Myriadpro-Regular";
  padding: 0 0 20px;
}

.btn-create-khk span {
  display: block;
  width: 110px;
  height: 38px;
  text-align: right;
  min-width: 110px;
  padding: 0 20px;
  line-height: 36px;
  box-sizing: border-box;
}

.btn-create-khk .ico_add_kh {
  position: absolute;
  top: 9px;
  left: 15px;
}

.btn-create-khk .ico_line_kh {
  position: absolute;
  top: 4px;
  left: 45px;
}

.line38 {
  line-height: 38px;
}

.time-to-khht-cn .ico_edit_time_to_khht {
  position: absolute;
  top: 2px;
  right: 0;
}

.bg-w-h-50 {
  height: 50px;
  background: #fff;
  border-radius: 25px;
  padding: 0 35px;
  margin-top: 20px;
}

.apdung .bg-w-h-50 label {
  margin: 0;
  line-height: 50px;
}

.mt-3 {
  margin-top: 3px;
}

.tong-hs {
  line-height: 24px;
  font-size: 18px;
  font-family: "Myriadpro-SemiBold";
  margin: 0 0 20px;
}

.custom-select-no-bg.one-line .select-styled {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.percent span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  line-height: 16px;
  font-family: "Myriadpro-Bold";
}

.collapse {
  position: relative;
}

.collapse .calendar {
  height: 110px;
  overflow: hidden;
}

.fullHeight.collapse .calendar {
  height: auto;
  overflow: initial;
}

.btn-collapse {
  position: absolute;
  bottom: -25px;
  left: calc(50% - 25px);
  width: 50px;
  height: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 1px 0 rgba(21, 27, 38, 0.15);
  cursor: pointer;
}

.btn-collapse img {
  margin-top: -3px;
}

.box-bcht-date-custom-hei.box-bcht {
  padding: 0;
  width: 498px;
}

.box-bcht-date-custom-hei .calendar {
  width: 100%;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.box-bcht-date-custom-hei .calendar .week-cell,
.box-bcht-date-custom-hei .calendar .day-cell {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(100% / 7 - 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  cursor: pointer;
  margin: 5px 15px;
}

.two-line {
  max-height: 58px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.thoikhoabieu.tb .valid_to_input {
  margin: 17px 0 0 10px;
}

.thoikhoabieu.tb .apdung .valid_to_input .react-datepicker-wrapper {
  width: 120px;
}

.thoikhoabieu.tb .apdung.apdung-custom .flex-1 img {
  margin: 2px 0 0 10px;
  width: 12px;
}

.sunE-plan.sunE-plan-list {
  padding-left: 0;
}

.lichngay-teacher .calendar {
  width: 100%;
}

.add_code_student-gr.w-custom {
  width: 500px;
}

.sunE-input-border-blue-gr .ico_class_po {
  top: 8px;
  left: 13px;
}

.slider-item-desc .item-top-title-main .text-light.two-line {
  padding: 0 20px;
}

.datlichnhac-input-gr .chk-custom-gr label:before {
  margin-right: 15px;
}

.tp-k .time-to.select-time input {
  margin: 6px 0 0 15px;
}

.apdung.tp-k .time-to.select-time .ico_edit_time_to {
  top: 14px;
}

.box-gr-sp,
.box-sp {
  background: #fff;
  padding: 30px 60px;
  border-radius: 20px;
}

.box-gr-sp-i {
  margin: 0 0 20px;
}

.box-gr-sp-i .mi {
  width: 60px;
  box-sizing: border-box;
}

.box-gr-sp-i .mi img {
  display: block;
}

.box-gr-sp-i p,
.box-sp p {
  font-size: 18px;
  line-height: 25px;
  font-family: "Myriadpro-Regular";
  color: #404041;
}

.hotline-sp {
  padding: 30px 0;
  border: 1px solid #404041;
  border-radius: 20px;
  margin-top: 30px;
}

.hotline-sp img {
  margin: 0 auto;
}

.hotline-sp span {
  font-size: 18px;
  line-height: 54px;
  font-family: "Myriadpro-Bold";
  color: #00a69c;
  text-transform: uppercase;
  display: block;
  text-align: center;
}

.support.sunE-container-box {
  padding: 50px;
}

.top-12-custom {
  margin-top: 12px;
}

.collapse .calendar {
  border-radius: 20px;
}

.one-line {
  overflow: hidden;
  /* display: -webkit-box;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical; */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* width: 300px; */
}

.one-line-break-word {
  white-space: normal;
  word-wrap: break-word;
}

.sunE-title-medium-p {
  font-size: 18px;
  line-height: 18px;
  margin: 0 0 15px;
  font-family: "Myriadpro-SemiBold";
}

.box-chart .dtb-sum {
  width: 100%;
  position: absolute;
  bottom: 10px;
  left: 0;
}

.box-chart .bdg-sum {
  width: 100%;
  position: absolute;
  bottom: 10px;
  left: 0;
}

.dtb-sum-slider {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.bdg-sum .w {
  width: 297px;
}

.dtb-sum .w {
  width: 307px;
}

.student-ab .box-detail-ab {
  top: 170px;
}

.dtb-sum-slider p {
  text-align: left;
}

.dtb-sum-slider .w {
  width: 234px;
}

.btn-zoom-img {
  cursor: pointer;
}

.box-video-project {
  height: 250px;
}

.box-video-project video {
  max-height: 250px;
}

.custom-4.slider-custom {
  max-width: 420px;
}

.custom-4.slider-custom .slick-arrow.slick-prev {
  left: -40px;
}

.custom-4.slider-custom .slick-arrow.slick-next {
  left: calc(100% + 9px);
}

.select-all-k {
  padding-bottom: 10px;
}

.box-graph-content canvas {
  width: 100% !important;
  min-height: 25rem !important;
}

.top-title-name {
  padding: 8px 20px;
  background: rgba(183, 243, 229, 0.6);
  border-radius: 5px;
  max-height: 59px;
}

.item-skill-top {
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-title-name p {
  font-size: 22px;
  line-height: 24px;
  font-family: "Myriadpro-SemiBold";
  color: #00a79d;
  text-align: center;
}

.student-khht .calendar {
  border-radius: 20px;
}

.taokehoach .input-gr textarea::placeholder,
.input-gr input::placeholder,
.input-gr select::placeholder {
  color: #8a8a8a !important;
}

.taokehoach .input-gr textarea::-ms-input-placeholder,
.input-gr input::-ms-input-placeholder,
.input-gr select::-ms-input-placeholder {
  color: #8a8a8a !important;
}

.taokehoach .input-gr textarea::-webkit-input-placeholder,
.input-gr input::-webkit-input-placeholder,
.input-gr select::-webkit-input-placeholder {
  color: #8a8a8a !important;
}

.mr-c {
  margin-right: 26px;
}

.giaotrinh.unit .sunE-giaotrinh-list.pr-25.pt-8 {
  padding: 8px 25px 0 20px;
}

.giaotrinh.unit.student .unit-list.pt-8 {
  padding: 8px 25px 0 20px;
}

.item-student-name span.pl-0 {
  padding-left: 0;
}

.flex-1 {
  flex: 1 !important;
}

.box-shadow-la {
  box-shadow: 0 2px 8px 0 rgb(21 27 38 / 40%) !important;
}

.collapse.showMonth .calendar {
  height: 165px;
}

.fullHeight.showMonth .calendar {
  height: auto;
}

.mes-box-send {
  resize: none;
  height: 54px;
  width: 100% !important;
  line-height: 32px;
  font-size: 16px;
  box-sizing: border-box;
  padding: 10px 20px 10px 20px;
  border-top-left-radius: 27px;
  border-bottom-left-radius: 27px;
  outline: none;
  border: 1px solid #fff;
  box-shadow: 0 1px 8px 0 rgb(21 27 38 / 15%);
  background: #fff;
  font-family: "Myriadpro-Regular";
}

.mes-box-send::-webkit-input-placeholder {
  /* Edge */
  font-family: "Myriadpro-Regular";
}

.mes-box-send:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  font-family: "Myriadpro-Regular";
}

.mes-box-send::placeholder {
  font-family: "Myriadpro-Regular";
}

.search-gr-p {
  height: 44px;
  box-sizing: border-box;
  margin: 30px 0 10px;
}

.box-btn-send {
  height: 54px;
  width: 54px;
  border-top-right-radius: 27px;
  border-bottom-right-radius: 27px;
  background: #fff;
}

.setting-on-off-box .box-shadow-2 {
  box-shadow: none;
}

.hcs {
  font-size: 18px;
  line-height: 18px;
  font-family: "Myriadpro-Bold";
  margin: 0 15px 0 5px;
}

.gr-r span.mr-5 {
  margin-right: 5px;
}

.box-s span {
  display: block;
  height: 36px;
  margin-top: 5px;
  border-radius: 18px;
  background: #fff;
  color: #00cbad;
  font-size: 18px;
  font-family: "Myriadpro-Light";
  line-height: 36px;
  padding: 0 5px 0 40px;
}

.box-s img {
  position: absolute;
  top: 5px;
  left: 5px;
}

.box-s .select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #00cbad;
  width: 150px;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  border: none;
  background: #fff;
  margin-top: 5px;
}

.box-s .select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  width: 150px;
  height: 36px;
  line-height: 36px;
  border: none;
  /* transition: all 0.2s ease-in; */
  border-radius: 18px;
  color: #00cbad;
  font-size: 16px;
  text-align: left;
  padding: 0 5px 0 40px;
  font-family: "Myriadpro-Light";
  z-index: 10;
}

.select-chart .select-styled {
  padding: 0 5px;
  text-align: center;
  width: 100%;
}

.box-s .select-options {
  display: none;
  position: absolute;
  padding: 24px 10px 0;
  top: 22px;
  right: 0;
  left: 0;
  z-index: 9;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border-radius: 24px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border: none;
  box-shadow: 0 1px 15px 0 rgb(21 27 38 / 15%);
  max-height: calc(100vh - 100px);
  overflow: auto;
}

.select-chart .select-options {
  top: 6px;
}

.box-s .select img {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 101;
}

.box-s .select-options li {
  margin: 0;
  text-indent: 0;
  transition: all 0.15s ease-in;
  border-bottom: none;
  text-align: center;
  color: #00cbad;
}

.gr-k .hs-dh {
  font-size: 29px;
  line-height: 65px;
  color: #fc9d24;
  font-family: "Myriadpro-Regular";
}

.tinnhan-item .avt.auto img {
  width: 29px;
  height: 24px;
  object-fit: cover;
}

.check-date-time-week {
  width: 400px;
  height: 44px;
  background: #fff;
  border-radius: 22px;
  box-sizing: border-box;
  padding: 0 15px;
  box-shadow: 1px 2px 4px 0 rgb(21 27 38 / 35%);
  margin: auto;
}

.check-date-time-week p {
  font-size: 20px;
  line-height: 44px;
  color: #414042;
  font-family: "Myriadpro-Regular";
}

.check-date-time-week img {
  width: 14px;
  cursor: pointer;
}

.search-gr-custom .box-shadow-2,
.search-custom,
._line_box {
  box-shadow: 2px 2px 4px 0 rgb(21 27 38 / 35%);
}

.img-bg-x {
  width: 216px;
  height: 287px;
  background-image: url("./../images/giaotrinh/bg_unit.png");
  background-repeat: no-repeat;
  background-position: center;
  object-fit: cover;
  display: flex;
  justify-content: center;
}

.__way_map {
  position: absolute;
  transform: translate(75%, 150%);
}

.__way_map_down {
  position: absolute;
  transform: translate(65%, 210%);
}

.img-bg-x .__avt_unit {
  border-radius: 50%;
  /* margin: 20px; */
  /* width: 120px; */
  /* height: 120px; */
  margin-top: 30px;
  width: 76%;
  height: 50%;
  object-fit: cover;
  margin-left: -8px;
}

.info-gr-popup.info-gr img {
  width: 30px;
  height: auto;
  margin: 0;
}

.info-gr-popup.info-gr .info-con p {
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 295px;
}

.info-gr-popup.info-gr .avta {
  width: 30px;
  height: 30px;
  border: 2px solid #e9af38;
  border-radius: 50%;
  overflow: hidden;
}

.info-gr-popup.info-gr .avta img {
  width: 100%;
  height: 100%;
}

.box-topic {
  background: #fff;
  padding: 15px;
  border-radius: 20px;
  margin: 0 0 30px;
}

.box-topic h2 {
  font-size: 18px;
  line-height: 135%;
  font-family: "Myriadpro-SemiBold";
}

.box-topic p {
  font-size: 18px;
  line-height: 135%;
  font-family: "Myriadpro-Regular";
}

._tb .title {
  background-color: rgb(172 241 228);
  border-radius: 10px;
}

._tb .title p {
  text-align: center;
  font-size: 18px;
  line-height: 135%;
  font-family: "Myriadpro-SemiBold";
  vertical-align: middle;
}

._class {
  width: 120px;
  margin-right: 10px;
  padding: 10px 0;
}

._date {
  width: 180px;
  margin-right: 10px;
  padding: 10px 0;
}

._score {
  margin-right: 10px;
}

._number {
  width: 140px;
  padding: 10px 0;
}

.pad100 {
  padding: 10px 0;
}

.mb-5 {
  margin-bottom: 5px;
}

.ml-2-5 {
  margin-left: 2.5px;
}

.mg-2-5-2 {
  margin: 0 2.5px;
}

.mr-2-5 {
  margin-right: 2.5px;
}

._detail {
  background: #fff;
  padding: 5px 10px;
}

._detail p {
  text-align: center;
  font-size: 18px;
  line-height: 26px;
  font-family: "Myriadpro-Regular";
  vertical-align: middle;
  max-height: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.list-details .item:first-child ._detail {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.list-details .item:last-child ._detail {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.homepage-teacher.sunE-container-box {
  padding: 30px 20px 20px;
}

.slider-class-see-report {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

.txt-desc {
  position: absolute;
  top: -5px;
  left: 25px;
  color: #d1d3d4;
}

.active .txt-desc {
  color: #000000;
}

.chk-gr .like,
.like-img .like {
  display: none;
}

.chk-gr .no_like,
.like-img .no_like {
  display: block;
}

.is_in_wishlist .like {
  display: block;
}

.is_in_wishlist .no_like {
  display: none;
}

.h-giaobai-support-list {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 220px);
  padding: 10px 35px 10px 20px;
}

.content_study_guide_container {
  max-height: calc(100vh - 130px);
}

.class-box-desc span.class-online,
.class-box-desc span.class-offline {
  font-size: 18px;
  font-family: "Myriadpro-SemiBold";
}

.input-gr .box-shadow-2 {
  box-shadow: 1px 2px 6px 0 rgb(21 27 38 / 35%);
}

.set-max-w {
  max-width: 414px;
}

.select-all-k.mg-top-0.flex-m {
  margin-right: 10px;
}

.sunE-container-box-UI.setting {
  background: #fff;
}

.tpm-r {
  margin-right: 33px;
}

.sunE-right-container.p0 {
  padding: 30px 20px 0;
}

.text-center.box-video-project.img-bg {
  max-height: 260px;
}

.text-center.box-video-project.img-bg img {
  max-width: 100%;
  height: 100%;
}

.mg-10-0 {
  margin: 10px 0 !important;
}

.ql-bt-dg .sunE-giaotrinh-item {
  margin: 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #c5c5c5;
}

.ql-bt-dg .sunE-giaotrinh-item:first-child {
  margin: 0 0 10px;
}

.ql-bt-dg .sunE-giaotrinh-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.sunE-giaotrinh-resuft-filter.ql-bt-dg {
  max-height: calc(100vh - 160px);
}

.file-support-list {
  overflow: auto;
  max-height: 240px;
  padding-right: 10px;
}

.pasd.sunE-container-box {
  padding: 30px 20px 0;
}

.ldjas
  .giaotrinh.teacher-giaobai
  .giaotrinh.filter
  .sunE-giaotrinh-resuft-filter {
  height: calc(100vh - 290px);
}

.laplai label.title-b {
  font-family: "Myriadpro-SemiBold";
  color: #000;
}

.center-flex-hz {
  display: flex;
  align-items: center;
}

.item-student-name.max-w-1 p {
  word-break: break-all;
}

.sunE-container-box.setting {
  padding: 10px 20px 10px;
}

.error-img {
  height: 26px;
}

.pad-t-30 {
  padding-top: 30px;
}

.sunE-calendar.student .calendar {
  width: 420px;
}

.sunE-calendar.student .calendar .week-cell,
.sunE-calendar.student .calendar .day-cell {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: calc(100% / 7 - 19px);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  cursor: pointer;
  margin: 5px 9px;
}

/*END MORE CSS*/

@media screen and (max-width: 768px) {
  .flex {
    display: block;
  }

  .sunE-container {
    width: 100%;
  }

  .disable-mobile {
    display: none;
  }

  .enable-mobile {
    display: block;
  }
}

.flex-m .class-slect-time .err label {
  color: #e22028;
}

.tinnhan-item .dot-active {
  width: 12px;
  height: 12px;
  background-color: #3578e5;
  border-radius: 50%;
  position: relative;
  top: 12px;
  left: 12px;
}

.msg-seen.tinnhan-item .dot-active {
  display: none;
}

video::-webkit-media-controls-volume-slider {
  display: none;
}

video::-webkit-media-controls-mute-button {
  display: none;
}

.popup-tag-edit {
  position: fixed;
  display: none;
  color: #000;
  background-color: #fff;
  padding: 3px 30px;
  border-radius: 17px;
  font-size: 16px;
  font-family: "Myriadpro-Regular";
  cursor: pointer;
  box-shadow: 1px 2px 4px 0 rgba(21, 27, 38, 0.4);
}

.ico_right_p5 {
  margin: 0 5px;
}

.no_select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input[type="text"]::-ms-reveal,
input[type="password"]::-ms-reveal,
input[type="text"]::-ms-clear,
input[type="password"]::-ms-clear {
  display: none;
}

.bg_auth {
  max-width: 100%;
}

.__overview_report {
  background: #fff;
  margin-top: 22px;
  border-radius: 18px;
  box-shadow: 1px 2px 4px 0 rgb(21 27 38 / 40%);
  padding: 30px 0px;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.__overview_info {
  margin-top: 30px;
  width: 240px;
}

.__count_std_completed {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #58595b;
  font-weight: bold;
}

.__count_std_completed h5 {
  font-size: 28px;
  color: #58595b;
  margin-left: 4px;
  font-weight: bold;
  margin-bottom: 5px;
}

.__item_note_chart {
  display: flex;
  align-items: center;
}

.__item_note_chart .__color_chart {
  height: 20px;
  width: 32px;
}

.__item_note_chart .__text_note {
  font-size: 16px;
  font-weight: bold;
  margin-left: 35px;
}

.__overview_chart {
  padding: 8px;
  border-radius: 50%;
  box-shadow: 1px 2px 4px 0 rgb(21 27 38 / 40%);
  height: 162px;
  width: 172px;
}

.__overview_chart .__chart {
  position: absolute;
  left: 0;
  right: 0px;
}

.btn-edit-class {
  display: flex;
  align-items: center;
}

.btn-edit-class img {
  margin-right: 10px;
}

.img-upload .__change_avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  opacity: 0.6;
  border-radius: 0px 0px 24px 24px;
  height: 63px;
  cursor: pointer;
}

.img-upload .__change_avatar img {
  height: 33px;
  margin-right: 24px;
}

.img-upload .__change_avatar p {
  font-size: 20px;
  line-height: 24px;
  color: #ffffff;
}

.form-sunE-button .btn-update-class {
  margin-top: 100px;
  padding: 0px 75px;
}

.__vertical-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.__vertical-center .__action_delete_class {
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  text-decoration-line: underline;
  color: #ef4444;
  margin-top: 32px;
}

.__body_confirm_delete_class {
  text-align: center;
}

.__body_confirm_delete_class .__title_confirm {
  font-weight: 600;
  font-size: 20px;
  line-height: 29px;
  color: #000000;
}

.__body_confirm_delete_class .__message_confirm {
  font-weight: 300;
  font-size: 18px;
  line-height: 22px;
  color: #000000;
  margin-top: 12px;
  margin-bottom: 18px;
}

.horizontal-item-between {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

.__input_note_rollup {
  border: none;
  width: 60%;
  border-radius: 8px;
  padding: 5px 10px;
  height: 22px;
  resize: none;
  margin: 0px -10px;
}

.__input_note_rollup:focus {
  outline: none;
  background: #f5f5f5;
  margin: 0px 0px;
}

.__input_note_exam_card {
  border: none;
  width: 90%;
  border-radius: 8px;
  padding: 5px 10px;
  height: 22px;
  resize: none;
  margin: 0px -10px;
}

.__input_note_exam_card:focus {
  outline: none;
  background: #f5f5f5;
  margin: 0px 0px;
}

.diemdanh-list-hs .chk-flex.ab-top-custom {
  position: absolute;
  top: 8px;
  right: 0px;
}

.diemdanh-list-hs .chk-flex.ab-top-custom .left-10 {
  margin-right: 10px;
}

.__text_remind_max {
  margin-top: 8px;
  font-style: italic;
}

.__max_add_schedule {
  font-style: italic;
  margin: 5px 15px;
}

.__calendar_log {
  margin-right: 16px;
}

.btn-disable-status {
  padding: 0 45px;
  height: 40px;
  line-height: 37px;
  border-radius: 20px;
  border: 2px solid #00a69c;
  font-size: 16px;
  color: #00a69c;
  background: #fff;
  font-family: "Myriadpro-SemiBold";
  box-sizing: content-box;
}

.btn-line-blue-status-all {
  padding: 0 47px;
  height: 44px;
  line-height: 37px;
  border-radius: 20px;
  border: none;
  font-size: 16px;
  background-image: linear-gradient(to right, #00b9b7, #00e1a0);
  color: #fff;
  font-family: "Myriadpro-SemiBold";
  min-width: 100px;
}

.uk-modal-dialog.__modal_confirm_delete_class {
  width: 390px;
}

.uk-modal-dialog {
  min-width: 420px;
  width: unset;
}

.__body_class {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}

.__body_class .__text_empty_data_home_page {
  width: 330px;
  font-size: 20px;
  font-family: "MyriadPro";
}

.__text_empty_curiclum_personal {
  font-size: 22px;
  font-family: "MyriadPro";
  text-align: center;
}

.__text_empty_curiclum_personal strong {
  color: #404041;
}

.__semibold {
  font-family: "MyriadPro-SemiBold" !important;
  color: #404041;
  font-size: 22px !important;
}

.__text_bold_lisence {
  font-family: "MyriadPro-SemiBold" !important;
  color: #404041;
  font-size: 18px !important;
}

.__fontnormal {
  font-family: "MyriadPro" !important;
}

.__text_empty_tutorial_guide {
  color: #707070;
  font-size: 20px;
  text-align: center;
  font-family: "MyriadPro";
}

.__horizontal_center {
  margin-top: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 68%;
  position: absolute;
}

.__horizontal_center_over {
  width: 100%;
}

.__horizontal_center .__text_empty,
strong {
  font-size: 20px;
  color: #707070;
  font-family: "MyriadPro-SemiBold";
  margin-top: 20px;
  text-align: center;
}

.tuvung-slider-custom {
  padding-bottom: 40px;
}

.align-items-baseline {
  align-items: baseline;
}

.position-relative {
  position: relative;
}

.__diamond_total {
  margin-left: 30px;
}

.__ico_diamond {
  position: absolute;
  left: -25px;
}

.__diamond_number {
  padding: 9.5px 15px 9.5px 30px;
  background-color: #e0e0e0;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

.white-space-nowrap {
  white-space: nowrap;
}

.__custom_percent {
  width: 60px;
  height: 60px;
}

.__custom_size_img {
  width: 60px;
  height: 60px;
}

.mr-5 {
  margin-left: 5px;
}

.font-family-bold {
  font-family: "MyriadPro-Bold" !important;
}

.justify-content-center {
  justify-content: center;
}

.__top_assess_rank {
  bottom: 0;
  width: 25px;
  height: 25px;
}

.font-weight-bold {
  font-weight: bold;
}

.horizontal-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.origin-vertical {
  display: flex;
  flex-direction: column;
}

.history-curriculum-student-page {
  max-height: calc(100vh - 130px);
  overflow: auto;
  margin-top: 30px;
}

.listview-history {
  background-color: #fff;
  box-shadow: 0px 0px 10px #ccc;
  border-radius: 10px;
  margin-left: 10%;
  margin-right: 10%;
  min-width: 360px;
  margin-top: 20px;
}

.listview_history_homepage {
  min-height: 216px;
  border-radius: 30px;
}

.listview-history .item-history-student {
  margin: 10px;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  margin-top: 0px;
}

.listview-history .item-history-student .view-score {
  font-size: 22px;
  background-color: #00a69c;
  border-radius: 6px;
  padding: 0px 15px;
  color: #fff;
  font-weight: 600;
}

.color-confirm-success {
  color: #00b7b5;
}

.color-confirm-success-2 {
  color: #0b9300;
}

.color-confirm-danger {
  color: #fc9d24;
}

.view-lession-detail {
  padding: 5px 20px;
  background-color: #fff;
  box-shadow: 0px 0px 10px #ccc;
  border-radius: 10px;
  margin-left: 10%;
  margin-right: 10%;
  min-width: 360px;
}

.mg-top-10 {
  margin-top: 10px;
}

.mr-top-1 {
  margin-top: 1rem;
}

.link-to-url {
  color: #00b7b5;
  text-decoration: underline;
}

.master-unit .group-tab-content {
  display: flex;
  background: #cfcfcf;
  border-radius: 30px;
  align-items: center;
}

.master-unit .group-tab-content .tab-item {
  padding: 0px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  height: 50px;
  cursor: pointer;
}

.master-unit .group-tab-content .active {
  background: linear-gradient(90deg, #00b9b6 0%, #00e0a1 96.16%);
  border-radius: 30px;
}

.master-unit .group-tab-content .tab-item img {
  margin-right: 10px;
}

.master-unit .listview-unit .item-data {
  padding: 10px;
  margin: 10px;
  background: #ffffff;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
}

.master-unit .listview-unit .item-data .item-body {
  border-bottom: 1px solid #787878;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.master-unit .listview-unit .item-data .item-body .type-lesstion {
  height: 40px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  padding: 8px 24px;
  color: #ffffff;
}

.master-unit .listview-unit .item-data .item-body .improvement {
  background: #f084ad;
}

.master-unit .listview-unit .item-data .item-body .user_looking_back {
  background: #978bf4;
}

.master-unit .listview-unit .item-data .item-body .status-lesstion {
  border: 1px dashed #bc202e;
  transform: rotate(2.98deg);
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  color: #bc202e;
  padding: 6px 24px;
  text-transform: uppercase;
}

.master-unit .listview-unit .item-data .item-body .fail {
  border: 1px dashed #bc202e;
  color: #bc202e;
}

.master-unit .listview-unit .item-data .item-body .pass {
  border: 1px dashed #37b34a;
  color: #37b34a;
}

.mg-left-10 {
  margin-left: 10px;
}

.master-unit .listview-unit .item-data .score {
  color: #ad0a22;
  font-size: 18px;
  line-height: 22px;
  font-family: "Myriadpro-Bold";
}

.master-unit .listview-unit {
  margin-top: 20px;
  height: calc(100vh - 180px);
  overflow: auto;
}

.master-unit .listview-unit .item-data .item-footer {
  padding: 0px 10px;
}

.listview-unit .text-empty {
  font-weight: 700;
  font-size: 32px;
  line-height: 38px;
  text-align: center;
  margin-top: 30px;
  color: #414042;
}

.btn-size-sm {
  min-width: 125px;
}

.space-around-content {
  justify-content: space-around;
}

.popup-filter-select-date input {
  text-align: center;
}

.box-content-writing-study-guide {
  background: #fff;
  border-radius: 20px;
  margin: 0 0 30px 20px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
}

.box-content-study-guide {
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
}

.content-study-guide {
  max-height: calc(100vh - 410px);
  max-width: 100%;
}

.quantity_from_teacher_choose {
  display: flex;
  justify-content: center;
  align-items: center;
  top: -14px;
  text-align: center;
  right: 0;
  color: #ffffff;
  background: red;
  border-radius: 50%;
  min-width: 30px;
  height: 30px;
  font-family: "MyriadPro";
  padding-top: 5px;
}

/* Home Page Student */
.homepage-teacher .sunE-box-slider .slick-dots li button:before {
  /* content: "\22C5" !important;
  font-size: 115px !important; */
  top: -10px !important;
}

.version-app {
  font-size: 14px;
  color: #565656
}

.manage-linking-container {
  margin-top: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.manage-linking-btn {
  height: 40px;
  width: 200px;
  border-radius: 20px;
  padding: 0;
}

.manage-linking-btn a {
  font-size: 16px;
  font-weight: 600;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-text-has-link a {
  color: #00CC83 !important;
  /* text-decoration: underline; */
}

.title-dot::before {
  content: "•";
  color: red;
  padding-right: .5em;
  font-size: 1.7rem;
}

.content-dot::before {
  content: "•";
  color: #000;
  padding-right: .5em;
  font-size: 1.2rem;
}

.profile-input-select {
  width: 33%;
}

.profile-input-select input {
  width: 100% !important;
  font-size: 16px !important;
  text-overflow: ellipsis;
}

.profile-input-select .icon_label {
  width: 20px !important;
  margin-right: 12px !important;
}

.text-view-detail-entrance {
  text-decoration: underline;
  font-size: 16px;
  color: #F29500;
  padding-top: 10px;
  margin-right: 16px;
  cursor: pointer;
}

.text-view-detail-entrance:hover {
  opacity: 0.4;
}

#keepReviewPersonal[type="checkbox"] {
  accent-color: #00a69c !important;
  }

.container-page-header {
  height: calc(100vh - var(--height-header));
  overflow: auto;
}

.container-page-sidebar {
  width: calc(100vw - var(--width-sidebar));
  overflow: auto;
}

.root-alert {
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}

.gap-16 {
  gap: 16px
}