body.site-vuihoc_beta {
  margin: 0 !important;
  background-color: white !important;

}
nav, nav a {
 font-family: "Be Vietnam Pro", sans-serif !important;
}

.table>tbody>tr>td {
  border-top: none !important;
}

#layout_navigation {
  background-color: #f8f9fd !important;
}

#layout_footer {
  background-color: #f8f9fd !important;
}

#general-statistic-duo {
  font-family: "Be Vietnam Pro", sans-serif !important;
  /* background: #f2f4f8; */
  /* Header */
  /* // statistial-duo */
}

#general-statistic-duo .container-no-data {
  width: 100%;
  height: max-content;
  background: #3495fd;
  padding: 24px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* min-height: 100dvh; */
  padding-bottom: 0 !important;
}

#general-statistic-duo .container-no-data .title {
  color: white;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

#general-statistic-duo .container-no-data .no-data {
  border-radius: 16px;
  background: #fff;
  padding: 32px 30px;
  color: #000;
  text-align: center;
  font-size: 16px;
  width: 1140px;
  .img-bitu{
    width: 210px;
    height: 146px;
  }
}

#general-statistic-duo .container-no-data .container_date_week {
  width: 100%;
  max-width: 1140px;
}

#general-statistic-duo .container-no-data .no-data .text {
  display: flex;
  justify-content: center;
  line-height: 24px;
}

#general-statistic-duo .container-no-data .no-data .btn-home {
  border-radius: 4px;
  background: #ff6609;
  padding: 10px 16px;
  display: inline-block;
  color: #fff;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

#general-statistic-duo .contenner-duo {
  max-width: 1120px;
  margin: 0 auto;
}

#general-statistic-duo .container-section-duo {
  width: 100%;
  border-radius: 0px 0px 32px 32px;
  background: #3495fd;
  padding: 24px 0px;
}

#general-statistic-duo .container-section-duo .section-duo {
  max-width: 1120px;
  margin: 0 auto;
}

#general-statistic-duo .container-section-duo .section-duo .title {
  color: white;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

#general-statistic-duo .container-section-duo .section-duo .container-section {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;

  /* min-width:fit-content */
}

#general-statistic-duo .container-section-duo .section-duo .container_report {
  display: flex;
  flex-direction: row;
}

#general-statistic-duo .container-section-duo .section-duo .item_assiduity {
  width: 50%;
}

#general-statistic-duo .container-section-duo .section-duo .item_result {
  width: 50%;
}

#general-statistic-duo .container-section-duo .section-duo .container-result {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  border-radius: 16px;
  background: #fff;
  height: 336px;

  /* min-width:fit-content */
}

#general-statistic-duo #statistial-duo .lesson-statistics .statistical-tables {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 400;
}

#general-statistic-duo #statistial-duo .lesson-statistics .statistical-tables .table {
  width: 100%;
  border-collapse: collapse;
}

#general-statistic-duo .container-section-duo .section-duo .container-section .item-section {
  background: var(--common-white-focusVisible, rgba(255, 255, 255, 0.3));
  padding: 10px 16px;
  text-align: center;
  width: 128px;
  color: var(--primary-contrast, #fff);
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;

  /* min-width:fit-content */
}

#general-statistic-duo .container-section-duo .section-duo .teacher_study {
  /* margin-top: 16px; */
  display: flex;
  flex-direction: column;
}

#general-statistic-duo .container-section-duo .section-duo .study_teacher {
  /* padding: 16px; */
  border-radius: 16px;
  background: #fff;
  height: 164px;
}

#general-statistic-duo .container-section-duo .section-duo .study_teacher .container-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

#general-statistic-duo .container-section-duo .section-duo .study_teacher .container-icon .content-info {
  /* display: none; */
  position: absolute;
  top: calc(50% + 5px);
  /* Hiển thị ngay phía dưới icon */
  right: -375%;
  transform: translateX(-50%);
  min-width: 150px;

  min-height: 38px;
  height: auto;
  background: var(--text-primary, rgba(0, 0, 0, 0.87));
  color: white;
  font-size: 12px;
  padding: 0px 10px 10px 10px;
  border-radius: 8px;
}

#general-statistic-duo .container-section-duo .section-duo .container-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

#general-statistic-duo .container-section-duo .section-duo .container-icon .content-info {
  /* display: none; */
  position: absolute;
  top: calc(50% + 5px);
  /* Hiển thị ngay phía dưới icon */
  right: -375%;
  transform: translateX(-50%);
  min-width: 190px;
  min-height: 38px;
  height: auto;
  background: var(--text-primary, rgba(0, 0, 0, 0.87));
  color: white;
  font-size: 12px;
  padding: 0px 10px 10px 10px;
  border-radius: 8px;
}

#general-statistic-duo .container-section-duo .section-duo .container_study {
  margin-top: 8px;
  height: 164px !important;
}

#general-statistic-duo .container-section-duo .section-duo .container_study .construction {
  /* height: 164px!important; */
  padding: 16px;
  border-radius: 16px;
  background: #fff;
}

#general-statistic-duo .container-section-duo .section-duo .count_construction {
  height: 68px;
  display: flex;
  margin-top: 8px;
  flex-direction: column;
  justify-content: center;
}

#general-statistic-duo .container-section-duo .section-duo .count_construction .container_cup_interact {
  display: flex;
  align-items: center;
  flex-direction: row;
}

#general-statistic-duo .container-section-duo .section-duo .count_construction .item-cup {
  width: 100%;
  display: flex;
  justify-content: center;
  border-right: 1px solid #d9d9d9;
  align-items: center;
}

#general-statistic-duo .container-section-duo .section-duo .count_construction .item-interact {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#general-statistic-duo .container-section-duo .section-duo .container_study .container-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

#general-statistic-duo .container-section-duo .section-duo .container_study .container-icon .icon-info {
  color: red;
}

#general-statistic-duo .container-section-duo .section-duo .container_study .container-icon .content-info {
  /* display: none; */
  position: absolute;
  top: calc(50% + 5px);
  /* Hiển thị ngay phía dưới icon */
  right: -375%;
  transform: translateX(-50%);
  min-width: 150px;
  min-height: 35px;
  height: auto;
  background: var(--text-primary, rgba(0, 0, 0, 0.87));
  color: white;
  font-size: 12px;
  padding: 0px 10px 10px 10px;
  border-radius: 8px;
}

#general-statistic-duo .container-section-duo .section-duo .container_study .video_learning {
  /* height: 164px; */
  padding: 16px;
  border-radius: 16px;
  background: #fff;
}

#general-statistic-duo .container-section-duo .section-duo .text_first {
  color: var(--primary-main, #ff6609);
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

#general-statistic-duo .container-section-duo .section-duo .text_last {
  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

#general-statistic-duo .container-section-duo .section-duo .container-result .header-duo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(230, 233, 244, 0.5);
  border-radius: 8px;
  padding: 8px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
}

#general-statistic-duo .container-section-duo .section-duo .container-result .container-subject {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
  border-bottom: 1px solid #ddd;
}

#general-statistic-duo .container-section-duo .section-duo .container-result .container_table_subject :last-child {
  border-bottom: 0;
}

#general-statistic-duo .container-section-duo .section-duo .container-result .container-subject .item-subject {
  width: 33%;
}

#general-statistic-duo .container-section-duo .section-duo .container-result .header-duo .item-header {
  width: 33%;

}

.active_section {
  background: var(--primary-contrast, #fff) !important;
  border-radius: var(--borderRadius, 4px);
  color: #ff6609 !important;
}

#general-statistic-duo #header {
  background: linear-gradient(135deg, #2ca1ff 0%, #8493ff 100%);
  padding-bottom: 100px;
}

#general-statistic-duo #header .header-content {
  color: #fff;
  padding: 24px 0px;
  /* Logo */
  /* Thông tin học viên */
  /* Không có dữ liệu */
}

#general-statistic-duo #header .header-content .logo {
  text-align: center;
  /* Title */
}

#general-statistic-duo #header .header-content .logo .subtitle {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 400;
}

#general-statistic-duo #header .header-content .logo .title {
  margin-top: 24px;
  font-size: 24px;
  font-weight: 600;
}

#general-statistic-duo #header .header-content .infor-student {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
}

#general-statistic-duo #header .header-content .infor-student .left {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#general-statistic-duo #header .header-content .infor-student .left .avatar {
  /* padding: 8px; */
  object-fit: cover;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* border: 1px solid #fff; */
}

#general-statistic-duo #header .header-content .infor-student .m-0.text-sm {
  white-space: nowrap;
  min-width: 84px;
}

#general-statistic-duo #statistial-duo {
  /* margin-top: 10px;
  padding: 30px 0px; */
  /* border-radius: 16px; */
  background: #fff;
  /* padding-bottom: 24px; */
}

#general-statistic-duo #statistial-duo .lesson-statistics {
  border-radius: 16px;
  /* border: 1px solid #ddd; */
  padding: 16px 0px;
  color: #000;
  margin-top: 8px;
}

#general-statistic-duo #statistial-duo .lesson-statistics .title {
  font-size: 24px;
  font-weight: 600;
}

#general-statistic-duo #statistial-duo .lesson-statistics .topic {
  line-height: 150%;
}

#general-statistic-duo #statistial-duo .lesson-statistics .text-class {
  color: var(--text-primary, rgba(0, 0, 0, 0.87));
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.active_class {
  border: 1px solid var(--Subjects-Match---Ton, #ff793f) !important;
  background: #fff !important;
  align-items: center;

  .title_class {
    padding: 4px 8px;
    color: white !important;
    background: #ff793f;
    width: max-content;
    font-weight: 400;
    border-radius: 3px;
  }

  .date_class {
    color: var(--text-primary, rgba(0, 0, 0, 0.87)) !important;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }
}

#general-statistic-duo #statistial-duo .lesson-statistics .list_class {
  display: flex;
  /* flex-wrap: wrap; */
  gap: 16px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

#general-statistic-duo #statistial-duo .lesson-statistics .class_container {
  cursor: pointer;
  margin-top: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  /* background: rgba(230, 233, 244, 0.5); */
  border: 1px solid rgba(230, 233, 244, 0.5);
  padding: 8px;
  max-width: fit-content;
  align-items: start;
  min-width: fit-content;

  .title_class {
    /* color: #fca219; */
    text-align: left;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    border-radius: 50px;
    background: rgba(255, 102, 9, 0.15);
    color: var(--Texts-Light-Primary, rgba(0, 0, 0, 0.87));
    padding: 0 8px;
  }

  .date_class {
    margin-top: 8px;
    color: var(--text-disabled, rgba(0, 0, 0, 0.38));
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    min-width: max-content;
  }
}

#general-statistic-duo #statistial-duo .lesson-statistics .date-time {
  color: #666;
  font-size: 14px;
  font-weight: 400;
}

#general-statistic-duo #statistial-duo .lesson-statistics .understand-applied {
  margin-top: 24px;
  border-radius: 16px;
  background: #def;
  padding: 16px;
}

#general-statistic-duo #statistial-duo .lesson-statistics .understand-applied .title {
  font-weight: 400;
  line-height: 150%;
  font-size: 14px;
  color: var(--text-primary, rgba(0, 0, 0, 0.87));
}

#general-statistic-duo #statistial-duo .lesson-statistics .awards {
  margin-top: 24px;
  font-size: 20px;
  text-align: center;
}

#general-statistic-duo #statistial-duo .lesson-statistics .awards .top {
  color: #00cc60;
  font-size: 24px;
}

#general-statistic-duo #statistial-duo .lesson-statistics .statistical-tables {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 400;
}

#general-statistic-duo #statistial-duo .lesson-statistics .statistical-tables .table {
  width: 100%;
  border-collapse: collapse;
}

#general-statistic-duo #statistial-duo .lesson-statistics .statistical-tables .table tr {
  font-size: 14px;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
}

#general-statistic-duo #statistial-duo .lesson-statistics .statistical-tables .table tr:last-child {
  border-bottom: 0;
}

#general-statistic-duo #statistial-duo .lesson-statistics .statistical-tables .table tr td {
  font-size: 16px;
  padding: 8px 0;
  vertical-align: inherit;
}

#general-statistic-duo #statistial-duo .teacher-comment {
  border-top: 4px solid #e6e9f4;
  padding: 16px 0px;
  /* margin-top: 16px; */
  /* .scale-15 {
    transform: scale(1.5);
    width: 150%;
 }
  */
}

#general-statistic-duo #statistial-duo .teacher-comment .title {
  font-size: 18px;
  font-weight: 600;
}

#general-statistic-duo #statistial-duo .teacher-comment .text {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
}

#general-statistic-duo #statistial-duo .teacher-comment .comment {
  font-size: 14px;
  /* font-weight: 600; */
}

#general-statistic-duo #statistial-duo .teacher-comment .comment li {
  list-style-type: "-";
  padding-inline-start: 8px;
  line-height: 160%;
}

#general-statistic-duo #statistial-duo .teacher-comment .comment li::marker {
  color: #000;
  font-size: 20px;
  font-weight: 400;
}

#general-statistic-duo #statistial-duo .teacher-comment .comment .desire {
  color: #000;
  font-size: 14px;
  font-weight: 400;
}

#general-statistic-duo #statistial-duo .your-moment {
  border-top: 4px solid #e6e9f4;
  padding: 16px 0px;
  color: #000;
}

#general-statistic-duo #statistial-duo .your-moment .full-image-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

#general-statistic-duo #statistial-duo .your-moment .full-image-container .image-container {
  width: 640px;
  height: 360px;
  /* border: 1px solid gray; */
  background: #999;
  border-radius: 16px;
  position: relative;
}

#general-statistic-duo #statistial-duo .your-moment .full-image-container .image-container .icon-close {
  position: absolute;
  z-index: 10;
  top: 16px;
  right: 16px;
  cursor: pointer;
  background: #fff;
  border-radius: 999px;
  padding: 4px;
}

#general-statistic-duo #statistial-duo .your-moment .full-image-container .image-container .image {
  border-radius: 16px;
  width: inherit;
  object-fit: contain;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  /* border: 1px solid #ddd;
  */
}

#general-statistic-duo #statistial-duo .your-moment ::-webkit-scrollbar {
  height: 6px;
  width: 4px;
  border: 1px solid #d5d5d5;
}

#general-statistic-duo #statistial-duo .your-moment ::-webkit-scrollbar-track {
  background-color: #fff;
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

#general-statistic-duo #statistial-duo .your-moment ::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px #000 4d;
  background: #bebebe;
  border-radius: 10px;
}

#general-statistic-duo #statistial-duo .your-moment ::-webkit-scrollbar-thumb:hover {
  background: #9e9e9e;
}

#general-statistic-duo #statistial-duo .your-moment .title {
  font-size: 18px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.87);
}

#general-statistic-duo #statistial-duo .your-moment .slide {
  margin-top: 24px;
  display: flex;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 6px;
}

#general-statistic-duo #statistial-duo .your-moment .three-item {
  width: max-content;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px;
  position: relative;
}

#general-statistic-duo #statistial-duo .your-moment .slide span {
  max-width: 288px;
  height: 162px;
  border-radius: 16px;
  background: #999;
}

#general-statistic-duo #statistial-duo .your-moment .slide .item-slide {
  width: 20%;
  width: 288px;
  /* height: 162px; */
  border-radius: 16px;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  /* border: 1px solid #ddd; */
}

#general-statistic-duo #statistial-duo .your-moment .pre-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 999px;
  padding: 4px;
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#general-statistic-duo #statistial-duo .your-moment .pre-next img {
  filter: invert(42%) sepia(89%) saturate(1950%) hue-rotate(353deg) brightness(104%) contrast(106%);
}

#general-statistic-duo #statistial-duo .your-moment .pre-next:hover {
  background: #ff6609 !important;
}

#general-statistic-duo #statistial-duo .your-moment .pre-next:hover img {
  filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(24deg) brightness(108%) contrast(101%) !important;
}

#general-statistic-duo #statistial-duo .your-moment .pre {
  transform: translateY(-50%) rotate(180deg);
  left: -16px;
}

#general-statistic-duo #statistial-duo .your-moment .next-pre-full-image .pre {
  transform: translateY(-50%) rotate(180deg);
  left: -66px !important;
}

#general-statistic-duo #statistial-duo .your-moment .next {
  right: -16px;
}

#general-statistic-duo #statistial-duo .your-moment .next-pre-full-image .next {
  right: -66px !important;
}

#general-statistic-duo #statistial-duo .your-moment .pagination {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

#general-statistic-duo #statistial-duo .your-moment .pagination .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
}

#general-statistic-duo #statistial-duo .your-moment .pagination .active {
  background: #ff6609 !important;
}

#general-statistic-duo #statistial-duo .tasks-after-class {
  border-top: 4px solid #e6e9f4;
  padding: 16px 0px;
  color: #000;
}

#general-statistic-duo #statistial-duo .tasks-after-class .title {
  font-size: 16px;
  font-weight: 600;
}

#general-statistic-duo #statistial-duo .tasks-after-class .title-homework {
  color: var(--text-primary, rgba(0, 0, 0, 0.87));
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}

#general-statistic-duo #statistial-duo .tasks-after-class .item-homework {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  background: #fff7ed;
  padding: 8px 16px;
  margin-bottom: 12px;
}

#general-statistic-duo #statistial-duo .tasks-after-class .item-homework .icon-checked {
  width: 20px;
  height: 20px;
}

#general-statistic-duo #statistial-duo .tasks-after-class .item-homework .point {
  white-space: nowrap;
  color: #00cc60;
  font-size: 16px;
  font-weight: 400;
}

#general-statistic-duo #statistial-duo .tasks-after-class .item-homework .do-now {
  white-space: nowrap;
}

#general-statistic-duo #statistial-duo .tasks-after-class .remind {
  margin-top: 24px;
  font-size: 14px;
  /* font-style: italic; */
  font-weight: 400;
}
#general-statistic-duo .container-report-duo {
  border-radius: 0px 0px 16px 16px;
  background: rgba(52, 149, 253, 0.20);
  padding-top: 100px;
  margin-top: -84px;
  padding-bottom: 16px;
}
#general-statistic-duo .container-report-duo .report-duo {
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 padding-left: 16px;
 /* padding: 0px 16px 0px 0px; */
}
#general-statistic-duo .container-report-duo .report-duo .title_report_duo {
  color: #3495FD;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
 }
 #general-statistic-duo .container-report-duo .report-duo  .container_question {
   display: flex;
  width: 50%;
 }
 #general-statistic-duo .container-report-duo .report-duo  .container_question .item_question{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--devider, rgba(0, 0, 0, 0.12));
  color: var(--text-primary, rgba(0, 0, 0, 0.87));
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  width: 100%;
  line-height: 150%;
  min-width: 244px;
  padding: 8px;
  margin-right: 16px;
  cursor: pointer;
}
.modal_report {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  min-height: 220px;
  z-index: 9999;
  background-color: #fff;
  border-radius: 5px;
  padding: 16px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  min-width: 300px;
  /* max-width: 80%;
  max-height: 80%; */
  overflow: auto;
  .title_modal_report{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title{
      color: var(--text-primary, rgba(0, 0, 0, 0.87));
      text-align: center;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 150%;
    }
  }
  .note_report{
    color: var(--text-secondary, rgba(0, 0, 0, 0.60));
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-top: 16px;
  }
  .container_content_report{
    gap: 8px;
    margin-top:16px;
    display: flex;
    flex-wrap: wrap;
    .item_content_report{
      cursor: pointer;
      border-radius: var(--borderRadius, 4px);
      border: 1px solid var(--devider, rgba(0, 0, 0, 0.12));
      background: #FFF;
      color: var(--text-secondary, rgba(0, 0, 0, 0.60));
      text-align: center;
      padding: 4px 8px;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      gap:8px;
      margin-right: 8px;
    }
  }
  .btn_report{
    width: 100%;
    border: none;
    padding: 8px;
    border-radius: var(--borderRadius, 4px);
    background: var(--Primary-Orange-100, #FF6609);
    color: var(--Accessible-Colors-White, #FFF);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    margin-top:16px;
  }
}
textarea {
  border-radius: 8px;
  border: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
  min-height: 200px;
  width: 100%;
  padding: 10px; /* Thêm padding để giữ khoảng cách giữa nội dung và khung viền */
  font-size: 16px; /* Font size có thể điều chỉnh tùy thích */
}
.title_thanks{
  color: var(--text-primary, rgba(0, 0, 0, 0.87));
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  margin-top: 16px;
  line-height: 150%;

}
.feedback_thanks{
  color: var(--text-secondary, rgba(0, 0, 0, 0.60));
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  max-width: 350px;
  margin-top: 16px;
  line-height: 20px;
}
.active_rating {
  background: #ffe3d1  !important;
  color: #FF6609 !important;
  border: 1px solid #FF6609 !important;
  border-radius:4px !important ;
}
.container_weekday {
  text-align: center;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #fff;
  padding: 10px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
  cursor: pointer;
}

.text-regular-table {
  color: var(--text-secondary, rgba(0, 0, 0, 0.60));
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.btn-home-mobile {

  border-radius: 4px;
  background: #ff6609;
  padding: 10px 16px;
  display: none;
  color: #fff;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.padding_container {
  padding: 16px;
}

.box_no_data {
  margin-top: 100px;
}

.box_count {
  height: 68px;
  margin-top: 16px;
  text-align: center;
  padding-top: 0px !important;
}

.box_table {
  max-height: 136px;
  overflow-y: auto;
}

.top_count b {
  color: #00cc60;
  font-size: 24px;
}

.text-unit {
  color: var(--text-secondary, rgba(0, 0, 0, 0.60));
  font-size: 14px;
  margin-top: 2px;
  min-width: fit-content;
}

.column_unit {
  max-width: 150px;
  display: flex;
  justify-content: center;
}

.text-topic {
  color: var(--text-primary, rgba(0, 0, 0, 0.87));

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.cursor-pointer {
  cursor: pointer;
}

.disabled {
  cursor: not-allowed;
  opacity: 0.2;
  pointer-events: none;
}
.box-no-data {
  min-height: 336px;
  background: white;
  border-radius: 16px;

  .box_count {
    margin-top: 100px;
  }
}
.container_video{
  position: absolute;
  background: rgba(0, 0, 0, 0.68);  
  width: 100%;
  height: 100%;
  top: 0;
  /* opacity: 0.5; */
  border-radius: 15px;
  .container_lesson{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}
.text-content{
  color: var(--Accessible-Colors-White, #FFF);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; 
  padding:0px 24px;
}
.btn_lesson{
  color:white;
  padding:8px 16px;
  border-radius: 8px;
  background: var(--primary-main, #FF6609);
  margin-top:24px;
  width:max-content;
  cursor:pointer;
}
.max-w-250{
  max-width: 250px;
}
.max-w-400{
  max-width: 400px;
}
.awards{
  img{
    height: 84px;
    width: 84px;
  }
}
.m-0 {
  margin: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.p-0 {
  padding: 0;
}

.pt-2 {
  padding-top: 8px;
}

.pl-2 {
  padding-left: 8px;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.gap-12 {
  gap: 2px;
}

.gap-1 {
  gap: 4px;
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 12px;
}

.gap-4 {
  gap: 16px;
}

.gap-8 {
  gap: 32px;
}

.h-100{
  height:100%;
}
.w-100{
  width: 100%;
}

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

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

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

.justify-between {
  justify-content: space-between;
}

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

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

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

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

.text-xs {
  font-size: 12px;
}

.text-sm {
  font-size: 14px;
}

.text-base {
  font-size: 16px;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600 !important;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-xs {
  font-weight: 100;
}

.font-light {
  font-weight: 300;
}

.text-white {
  color: white;
}

.text-black {
  color: #000;
}

.text-orange {
  color: #ff6609;
}

.text-grey {
  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
}
.text-grey-light {
  color: rgba(0, 0, 0, 0.87)
}

.text-bold-table {
  color: rgba(0, 0, 0, 0.87);
  font-size: 14px !important;
  font-style: normal;
  font-weight: 500;
}

.text-cup {
  font-size: 28px;
  color: #ff6609;
  font-weight: 500;
  margin-right: 2px;
}

.text-interact {
  color: var(--text-secondary, rgba(0, 0, 0, 0.60));
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-top: 5px
    /* margin-bottom: 4px; */
}

.title_learn_teacher {
  color: var(--text-primary, rgba(0, 0, 0, 0.87));
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;/
}

.text-title-interact {
  color: var(--primary-contrast, #fff);

  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.text-title-interact-desktop {
  color: var(--primary-contrast, #fff);
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
}
.text-title-interact-mobile {
display: none;
}

.border-maths {
  border: 1px solid #FF793F !important;;
}

.border-english {
  border:  1px solid #0395EE !important;;
}

.border-vietnamese {
  border: 1px solid #FFA804 !important;;
}

.border-khtn {
  border: 1px solid #7594E2 !important;; 
}

.border-physics {
  border:  1px solid #5E5CE6 !important;;
}

.border-chemistry {
  border:  1px solid #FFCC00 !important;;
}
.border-sinh-hoc {
  border:  1px solid #3CA031 !important;;
}
.border-dhqg-hanoi {
  border:  1px solid #008141 !important;;
}
.border-dhqg-hcm {
  border:  1px solid #28306A !important;;
}
.border-dgtd-dhbk {
  border:  1px solid #23549D !important;;
}

.bg-maths-2 {
  background: rgba(255, 102, 9, 0.15) !important ;
}

.bg-english-2 {
  background: rgba(3, 149, 238, 0.15) !important;
}
.bg-dhqg-hanoi-2 {
  background: rgba(0, 129, 65, 0.15) !important;;
}
.bg-dhqg-hcm-2 {
  background: rgba(40, 48, 106, 0.15) !important;
}
.bg-dgtd-dhbk-2 {
  background: rgba(35, 84, 157, 0.15) !important;
}

.bg-vietnamese-2 {
  background: rgba(255, 168, 4, 0.15) !important;
}

.bg-khtn-2 {
  background: rgba(117, 148, 226, 0.15) !important;
}

.bg-physics-2 {
  background: rgba(94, 92, 230, 0.15) !important;
}

.bg-chemistry-2 {
  background: rgba(255, 204, 0, 0.15) !important;
}
.bg-sinh-hoc-2 {
  background: rgba(60, 160, 49, 0.15) !important;
}

.bg-maths-3 {
  background: rgba(255, 102, 9, 0.10) !important ;
}

.bg-english-3 {
  background: rgba(3, 149, 238, 0.10) !important;
}
.bg-dhqg-hanoi-3 {
  background: rgba(0, 129, 65, 0.10) !important;;
}
.bg-dhqg-hcm-3 {
  background: rgba(40, 48, 106, 0.10) !important;
}
.bg-dgtd-dhbk-3 {
  background: rgba(35, 84, 157, 0.10) !important;
}
.bg-vietnamese-3 {
  background: rgba(255, 168, 4, 0.10) !important;
}

.bg-khtn-3 {
  background: rgba(117, 148, 226, 0.10) !important;
}

.bg-physics-3 {
  background: rgba(94, 92, 230, 0.10) !important;
}

.bg-chemistry-3 {
  background: rgba(255, 204, 0, 0.10) !important;
}
.bg-sinh-hoc-3 {
  background: rgba(60, 160, 49, 0.10) !important;
}

.bg-maths {
  background: #FF6609 !important ;
}

.bg-english {
  background: #0395EE !important;
}

.bg-vietnamese {
  background: #FFA804 !important;
}

.bg-khtn {
  background: #7594E2 !important;
}

.bg-physics {
  background: #5E5CE6 !important;
}

.bg-chemistry {
  background: rgba(255, 204, 0) !important;
}
.bg-sinh-hoc {
  background: #3CA031 !important;;
}
.bg-dhqg-hanoi {
  background: #008141 !important;;
}
.bg-dhqg-hcm {
  background: #28306A !important;;
}
.bg-dgtd-dhbk {
  background: #23549D !important;
}
.bg-sinh-hoc-active {
  color: white  !important;
  background: #3CA031 !important;
}
.bg-dhqg-hanoi-active {
  color: white  !important;
  background: #008141 !important;
}
.bg-dhqg-hcm-active {
  color: white  !important;
  background: #28306A !important;
}
.bg-dgtd-dhbk-active {
  color: white  !important;
  background: #23549D!important;
}
.bg-maths-active {
  color: white  !important;
  background: rgba(255, 102, 9, 1) !important;
}

.bg-english-active {
  color: white  !important;
  background: rgba(3, 149, 238, 1) !important;
}

.bg-vietnamese-active {
  color: white  !important;
  background: rgba(255, 168, 4, 1) !important;
}

.bg-khtn-active {
  color: white  !important;
  background: rgba(117, 148, 226, 1) !important;
}

.bg-physics-active {
  color: white  !important;
  background: rgba(94, 92, 230, 1) !important;
}

.bg-chemistry-active {
  color: white  !important;
  background: rgba(255, 204, 0, 1 ) !important;
}

.bg-sinh-hoc-gradient {
  background-image: linear-gradient(#86b380, #3CA031);
}
.bg-dhqg-hanoi-gradient {
  background-image: linear-gradient(#1e8a54, #008141);
}
.bg-dhqg-hcm-gradient {
  background-image: linear-gradient(#4b5180, #28306A);
}
.bg-dgtd-dhbk-gradient {
  background-image: linear-gradient(rgb(92, 96, 133), #23549D);
}
.bg-maths-gradient {
  background-image: linear-gradient(rgb(245, 145, 83), rgba(255, 102, 9, 1));
}

.bg-english-gradient {
  background-image: linear-gradient(rgb(72, 167, 226), rgba(3, 149, 238, 1));
}

.bg-vietnamese-gradient {
  background-image: linear-gradient(rgb(236, 185, 89), rgba(255, 168, 4, 1));
}

.bg-khtn-gradient {
  background-image: linear-gradient(rgb(151, 169, 214), rgba(117, 148, 226, 1));
}

.bg-physics-gradient {
  background-image: linear-gradient(rgb(134, 133, 224), rgba(94, 92, 230, 1));
}

.bg-chemistry-gradient {
  background-image: linear-gradient(rgb(240, 222, 149), rgba(255, 204, 0, 1 ));
}

.date_active {
  color: var(--Texts-Light-Secondary, rgba(60, 60, 67, 0.68)) !important;
}

.icon_arr_left {
  cursor: pointer;
  top: 25%;
  position: absolute;
  left: -5%;
}

.icon_arr_right {
  cursor: pointer;
  top: 30%;
  position: absolute;
  right: -5%;
  box-shadow:0px 4px 4px rgba(0, 0, 0, 0.10) ;
  width: 40px;
  height: 40px;
  border-radius: 50%
 
}
.icon_right {
  position: absolute;
  transform: translate(9px, 12px);
}  
.icon_footer{
  display: none;
}
.truncate-text-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

}
.pt-175 {
  padding-top: 175px;
}
.ml-4{
  margin-left: 16px;

}
.mb-1 {
  margin-bottom: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-6 {
  margin-bottom: 24px;
}

.mt-1 {
  margin-top: 4px;
}

.mr-1 {
  margin-right: 4px;
}

.mr-2 {
  margin-right: 8px;
}

.mr-3 {
  margin-right: 12px;
}
.mr-4 {
  margin-right: 16px;
}
.mr-6 {
  margin-right: 24px;
}

.mr-8 {
  margin-right: 32px;
}

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

.mt-3 {
  margin-top: 12px;
}

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

.mt-50 {
  margin-top: 50px;
}

.mt-6 {
  margin-top: 24px;
}

.pb-6 {
  padding-bottom: 24px;
}
.ml-6 {
  margin-left: 24px;
}
.w-full {
  width: 100%;
}
.w-33{
  width: 33%;
}
.w-50 {
  width: 50%;
}

.w-auto {
  width: auto;
}
.max-w-480 {
  max-width: 480px;
}
.h-full {
  height: 100%;
}

.text-xl {
  font-size: 20px !important;
}

.text-2xl {
  font-size: 24px !important;
}

.h-screen-nodata {
  min-height: 100dvh;
  padding-bottom: 0 !important;
}

.res-img {
  width: 35%;
}

.res-img.cup {
  max-width: 24px;
  max-height: 24px;
}

.relative {
  position: relative;
}
.flex-grow{
  flex-grow: 1;
}
.absolute {
  position: absolute;
}

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.p-4 {
  padding: 16px;
}

.h-68 {
  height: 68px;
}

.border-right {
  border-right: 1px solid #d9d9d9;
}

.border-bottom-vertical {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.img-bitu-empty{
  display: none;
}

#general-statistic-duo .container-section-duo .section-duo .container_report_vip {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  color:white;  
  gap:24px;
}
#general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_assiduity{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap:8px;
}
#general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_assiduity .teacher_study{
  border-radius: 16px;
  background: #FFF;
  display: flex;
  padding: 12px 16px;
  flex-direction: column;
  min-height:132px;
  flex-grow:1;
}
#general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_assiduity .teacher_study .container_teacher_study{
  display: flex;
  flex-direction: column;
  height: 100%;
}
#general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_assiduity .construction{
  border-radius: 16px;
  background: #FFF;
  display: flex;
  padding: 12px 16px;
  flex-direction: column;
  min-height:132px;
  flex-grow:1;
}
#general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_assiduity .construction .container_cup_interact{ 
display: flex;
align-items: center;
/* justify-content: space-between; */
/* margin-top:12px; */
width: 100%;
    .item-cup{
      display:flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #d9d9d9;
      width:50%;
    }
    .item-interact{
      display:flex;
      align-items: center;
      justify-content: center;
      width:50%;
    }
}
#general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_assiduity .teacher_study .count_lesson{
 display:flex;
 align-items: center;
 justify-content: center;
 margin:0 auto;
 height:100%;
 .text_first_lesson{
  color: var(--primary-main, #FF6609);
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
 }
 .text_last_lesson{
  margin-top:4px;
  color: var(--text-secondary, rgba(0, 0, 0, 0.60));
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
 }
}



#general_statistics {
  position: relative;
}
#general_statistics::after {
  content: "";
  height: 169px;
  width: 1px;
  background: #0000001F;
  right: -15px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}




#general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_result{
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap:8px
}
#general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_result .container_result{
  border-radius: 16px;
  background: #FFF;
  display: flex;
  padding: 12px 16px;
  flex-direction: column;
  min-height:132px;
  gap:8px;
  flex-grow:1
}
#general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_result .container_result .count_result{
 text-align: center;
 margin-top: 12px;
 padding: 8px 0px;
 .text_first_result{
  color: var(--primary-main, #FF6609);
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
 }
 .text_last_result{
  color: var(--text-secondary, rgba(0, 0, 0, 0.60));
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
 }
}
#general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_result .container_result .container_text_empty{
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  }
#general-statistic-duo  .container-section-duo .section-duo .container_report_vip .item_result .container_result .header-duo {
  margin-top:12px;
  color: var(--text-secondary, rgba(0, 0, 0, 0.60));
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(230, 233, 244, 0.5);
  border-radius: 8px;
  padding: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
#general-statistic-duo .container-section-duo .section-duo  .container-subject-report {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
  border-bottom: 1px solid #ddd;
}
#general-statistic-duo .container-section-duo .section-duo  .container_table_subject :last-child {
  border-bottom: 0;
}
.text-note {
  font-size: 14px;
}
/* // Respponsive */
@media screen and (min-width: 768px) and (max-width:1025px) {
  #general-statistic-duo .container-section-duo .section-duo {
    padding: 0px 16px;
  }
}
@media screen and (max-width: 768px) {
  #general-statistic-duo .container-section-duo .section-duo .container_report_vip {
    /* display: none; */
    flex-direction: column;
    gap:0px;
  }
  .img-bitu-empty{
    display: block;
    width: 175px;
    height: 120px;
  }
  
  .text-title-interact-desktop{
    display: none;
  }
  .text_first_result{
    font-size: 20px !important;
   }
   .text_last_result{
    font-size: 14px !important;  
   }
  .text-title-interact-mobile {
    display: block;
    margin-bottom: 12px;
    color: var(--primary-contrast, #FFF);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /
    }
  .text-cup {
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
  }
  .column_unit {
    width: 33%;
   display: table-cell;
   padding-left: 8px !important;
  }
  .column_title{
    width: 33%;
  }
  .text-note{
    font-size: 10px;
  }
  .text-interact {
    color: var(--text-secondary, rgba(0, 0, 0, 0.6));
    font-size: 14px;
    /* margin-bottom: 4px; */
  }

  .padding_container {
    padding: 12px 12px 0px 12px;
  }

  .box_table {
    max-height: none;
    height: auto;
  }

  .text-unit {
    font-size: 12px;
    margin-top: 2px;
  }

  .text-base {
    font-size: 14px;
  }
  .text_first_lesson {
    font-size: 20px !important;
  }
  .text_last_lesson {
    font-size: 14px !important;
  
  }
/* 
  .text-sm {
    font-size: 12px;
  } */

  .box_count {
    height: 48px;
    margin-top: 8px;
    padding-top: 8px !important;
  }

  .box-no-data {
    min-height: 0px;
    background: white;
    border-radius: 16px;

    .box_count {
      margin-top: 15px;
    }

    .study_teacher {
      width: 100% !important;
    }

    .container_study {
      width: 0% !important;
    }
  }

  .icon_arr_left {
    display: none;
  }

  .title_learn_teacher {
    font-size: 14px;
  }

  .icon_arr_right {
    display: none;
  }

  .pt-175 {
    padding-top: 25px;
  }

  .top_count b {
    color: #00cc60;
    font-size: 18px;
  }

  .text-bold-table {
    color: var(--text-primary, rgba(0, 0, 0, 0.87));
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
  }

  .text-regular-table {
    color: var(--text-secondary, rgba(0, 0, 0, 0.60));
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }

  .text-2xl {
    font-size: 16px !important;
    min-width: max-content !important;
    margin-top: 3px;
  }

  .text-xl {
    font-size: 16px !important;
  }

  .subtitle {
    font-size: 12px !important;
    margin-top: 8px !important;
  }

  .infor-student {
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: block !important;
  }

  .infor-student .left .avatar,
  .infor-student .right .avatar {
    display: none !important;
  }

  .infor-student .left .flex.gap-2 p,
  .infor-student .right .flex.gap-2 p {
    font-size: 12px !important;
  }

  .infor-student .left .flex.gap-2 b,
  .infor-student .right .flex.gap-2 b {
    font-size: 14px !important;
  }

  .infor-student .left .flex.gap-3,
  .infor-student .right .flex.gap-3 {
    gap: 8px !important;
  }

  .infor-student .m-0.text-sm {
    min-width: 60px !important;
  }

  .infor-student .right {
    margin-top: 8px;
  }

  .no-data {
    padding: 16px !important;
  }

  .no-data .text {
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .container_weekday {
    padding: 6px 12px;
  }

  .no-data .img-bitu {
    /* width: 100% !important; */
  }
  .left_loading {
    width: 100%!important;
    padding: 10px;
  }
  .chat_loading{
    min-width: 0px !important;
    width: 100%;
  }
  .bottom_left_loading{
    .left{
      width:95% !important;
    };
    .right{
      display:none;
    }
  }
  .right_loading{
    display: none;
  }
  .no-data .btn-home {
    padding: 10px 16px !important;
    font-size: 16px !important;
    /* display: none !important; */
  }

  .btn-home-mobile {
    display: inline-block;
    padding: 10px 16px !important;
    font-size: 16px !important;
  }
  .modal-content {
    width: 90%;
    top: 42%;
  }

  #statistial-duo {
    padding: 0px !important;
    margin-top: 24px !important;
  }

  #general-statistic-duo .container-no-data .no-data {
    width: auto;
  }

  #general-statistic-duo .container-no-data {
    min-height: 100dvh;
    padding: 16px;
  }

  #general-statistic-duo .container-no-data .title {
    display: none;
  }

  #general-statistic-duo .container-section-duo .section-duo {
    padding: 0px 16px;
  }

  #general-statistic-duo .container-section-duo .section-duo .container_report {
    display: flex;
    flex-direction: column;
  }

  #general-statistic-duo .container-section-duo .section-duo .item_assiduity {
    width: 100%;
  }

  #general-statistic-duo .container-section-duo .section-duo .item_result {
    width: 100%;
    margin-top: 16px;
  }

  #general-statistic-duo .container-section-duo .section-duo .teacher_study {
    /* margin-top: 16px; */
    display: flex;
    flex-direction: row;
  }

  #general-statistic-duo .container-section-duo .section-duo .study_teacher {
    width: 50%;
    height: 152px;
    margin-right: 8px;
  }

  #general-statistic-duo .container-section-duo .section-duo .container_study {
    width: 50%;
    height: 154px !important;
    margin-top: 0px;
  }

  #general-statistic-duo .container-section-duo .section-duo .text_first {
    color: var(--primary-main, #ff6609);
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
  }

  #general-statistic-duo #statistial-duo .lesson-statistics .class_container {
    min-width: 195px;
    margin: 16px 0px;
  }

  #general-statistic-duo .container-section-duo .section-duo .title {
    display: none !important;
  }

  #general-statistic-duo .container-section-duo .section-duo .container-result .header-duo {
    margin-top: 0px !important;
    font-size: 12px;
  }

  .container-subject {
    .item-subject {
      font-size: 14px;
    }
  }

  #general-statistic-duo #statistial-duo .lesson-statistics .list_class {
    display: flex;
    justify-content: start;
    flex-wrap: nowrap;
    max-width: max-content;
    overflow-x: scroll;
    gap: 12px;

  }

  #general-statistic-duo .container-section-duo .section-duo .text_last {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }

  #general-statistic-duo #statistial-duo .lesson-statistics .class_container .title_class {
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
  }

  #general-statistic-duo .container-section-duo .section-duo .count_construction {
    margin-top: 0px;
  }

  #general-statistic-duo #statistial-duo .teacher-comment {
    margin-top: 16px;
  }

  #general-statistic-duo #statistial-duo .tasks-after-class .title {
    font-size: 16px !important;
    font-weight: 600;
  }

  #general-statistic-duo .container-section-duo .section-duo .container_study .construction {
    /* height: 164px!important; */
    padding: 12px;
  }

  #general-statistic-duo .container-section-duo .section-duo .count_construction .container_cup_interact {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
  }

  #general-statistic-duo .container-section-duo .section-duo .count_construction .item-cup {
    width: 100%;
    display: flex;
    justify-content: center;
    border-right: none;
    align-items: center;
  }

  #general-statistic-duo .container-section-duo .section-duo .count_construction .item-interact {
    /* margin-top:8px; */
    align-items: end;
  }

  #general-statistic-duo .container-section-duo .section-duo .container-result {
    height: auto;
    min-height: 200px;
  }

  #general-statistic-duo .container-section-duo .section-duo .container-result .container-subject {
    padding: 8px;
  }

  #statistial-duo .lesson-statistics {
    padding: 0px !important;
    margin-top: 0px;
  }

  #statistial-duo .lesson-statistics .understand-applied {
    margin-top: 16px !important;
  }

  #statistial-duo .lesson-statistics .understand-applied .title {
    margin-top: 0 !important;
    font-size: 14px !important;
  }

  #statistial-duo .lesson-statistics .understand-applied ul {
    font-size: 14px !important;
  }

  #general-statistic-duo #statistial-duo .your-moment .pre-next {
    display: none !important;
  }

  #statistial-duo .lesson-statistics .awards {
    font-size: 16px !important;
  }

  #statistial-duo .lesson-statistics .awards .top {
    font-size: 20px !important;
  }

  #statistial-duo .statistical-tables {
    font-size: 14px !important;
  }

  #statistial-duo .statistical-tables td {
    padding: 8px;
    font-size: 14px !important;
  }

  #statistial-duo .teacher-comment .title,
  #statistial-duo .teacher-comment .text {
    font-size: 16px !important;
  }

  #statistial-duo .teacher-comment .comment,
  #statistial-duo .teacher-comment .desire {
    font-size: 14px !important;
  }

  #statistial-duo .tasks-after-class,
  #statistial-duo .teacher-comment {
    padding: 16px 0px !important;
  }

  #statistial-duo .your-moment {
    padding: 16px 0px !important;
  }

  #statistial-duo .your-moment .full-image-container .image-container {
    width: 320px !important;
    height: 180px !important;
  }

  #statistial-duo .your-moment .full-image-container .image-container .icon-close {
    padding: 4px;
    width: 24px;
    height: 24px;
  }

  #statistial-duo .slide {
    margin-top: 16px !important;
  }

  #general-statistic-duo #statistial-duo .your-moment .three-item {
    width: 100% !important;
    left: 0 !important;
    transform: translateX(0%) !important;
    padding: 0 !important;
  }

  #statistial-duo .slide .item-slide {
    min-width: 240px !important;
  }

  #statistial-duo .title-homework {
    font-size: 14px !important;
  }

  #statistial-duo .item-homework {
    padding: 8px !important;
  }

  #statistial-duo .item-homework .icon-checked {
    width: 14px !important;
    height: 14px !important;
  }

  #statistial-duo .remind,
  #statistial-duo .text-base {
    font-size: 14px !important;
  }
  #statistial-duo .do-now,
  #statistial-duo .point {
    font-size: 12px !important;
  }
  #statistial-duo .mt-6 {
    margin-top: 16px !important;
  }
  #general-statistic-duo .container-report-duo .report-duo {
    flex-direction: column;
    align-items: start;
    padding-left: 0px;
    padding-right: 16px;
  }
  #general-statistic-duo .container-report-duo .report-duo .container_question .item_question {
    min-width: 50%;
    width: 100%;
  }
  #general-statistic-duo .container-report-duo .report-duo  .container_question {
   margin-top: 16px;
   width: 100%;
  }
  #general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_assiduity .teacher_study{
    /* min-height: 0px; */
    width: 50%;
    flex-grow: 1;
  }
  #general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_assiduity {
   flex-direction: row;
   width: auto;
  }
  #general-statistic-duo .container-section-duo .section-duo .item_result {
    width: auto;
  }
  #general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_assiduity .construction {
    width: 50%;
  }
  #general-statistic-duo .container-section-duo .section-duo .container_report_vip .item_assiduity .construction .container_cup_interact{ 
  flex-direction: column;
  .item-cup{
    border-right:none
  }
  .item-interact{
    width: auto;
  }
    }



  .title {
    font-size: 20px !important;
  }

  .res-img {
    width: 85%;
    display: block;
  }

  .res-img .cup-small {
    width: 60% !important;
    /* margin-top: 3px !important; */
  }

  .scale-15 {
    display: block;
    width: 60%;
  }

  .icon_footer {
    display: flex;
  }
  #general_statistics::after {
    content: "";
    height: 1px;
    width: 90%;
    background: #0000001F;
    top: calc(100% + 16px);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .chat_loading .left_loading .top_left_loading{
    margin-right: 0;
  }
  .chat_loading .left_loading .bottom_left_loading .left {
    margin-right: 0;
  }
}
@media screen and (max-width: 1120px) and (min-width:768px) {
  .container-no-data{
   min-height: 100dvh !important;
   
  }
  .general-statistic-duo{
    width: 100%!important;
  }
  #general-statistic-duo .container-report-duo .report-duo .container_question .item_question {
    min-width: 160px;
  }
  #general-statistic-duo .container-no-data .container_date_week {
    padding: 0px 16px;
  }
}

@media screen and (max-width: 1170px) {
  .contenner-duo {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 16px !important;
  }

  #general-statistic-duo #statistial-duo .your-moment .three-item {
    width: 100% !important;
  }

}



/* -------------------------------loading----------------------- */
.skeleton-img, .skeleton-avatar, .tweet-footer, .tweet-text, .tweet-header {
  -webkit-animation: skeleton 1s ease-in-out forwards infinite;
          animation: skeleton 1s ease-in-out forwards infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

@-webkit-keyframes skeleton {
0% {
  opacity: 0.2;
  transform: translateY(6px) scale(0.98);
}
85%, 100% {
  opacity: 1;
  transform: translateY(0px) scale(1);
}
}

@keyframes skeleton {
0% {
  opacity: 0.2;
  transform: translateY(6px) scale(0.98);
}
85%, 100% {
  opacity: 1;
  transform: translateY(0px) scale(1);
}
}
.general_loading{
    background: #3495fd;
}
.chat_loading{
    min-width: 1120px;
    
    .left_loading{
        width: 50%;
        .top_left_loading{
        background:white;
 
        height:200px;
        margin-right:16px;
        border-radius: 10px;
        }
        .bottom_left_loading{
            display: flex;
            .left{
                margin-top:16px;
                width: 50%;
                background:white;
                border-radius: 10px;
                height:184px;
                margin-right:16px;
            }
            .right{
                margin-top:16px;
                width: 45%;
                background:white;
                border-radius: 10px;
                height:184px;
            }
        }
    }
    .right_loading{
        background:white;
        width: 50%;
        height:400px;
        border-radius: 10px;
    }
   /* display: flex;
    justify-content: center;
    align-items: center; */
}
.tweet-content {
  margin-left: calc(48px + 10px);
}
.tweet-header {
  transform-origin: bottom;
}
.tweet-text {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.tweet-footer {
  display: flex;
  margin-top: 1rem;
  transform-origin: bottom;
  -webkit-animation-delay: 400ms;
      animation-delay: 400ms;
}

.skeleton {
  background-color: #15202B;
}
.skeleton-avatar {
  width: 48px;
  height: 48px;
  background-color: #E5E5EA;
  border-radius: 100%;
  float: left;
}
.skeleton-line {
  height: 1rem;
  background-color: #E5E5EA;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}
.skeleton-line.heading {
  height: 1.5rem;
  margin-bottom: 0.8rem;
}
.skeleton-img {
  height: 200px;
  background-color: #E5E5EA;
  border-radius: 0.75rem;
  margin-top: 1.5rem;
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.skeleton-button {
  display: block;
  width: 26px;
  height: 26px;
  background-color: #E5E5EA;
  flex-shrink: 0;
}
.skeleton-button:not(:last-child) {
  margin-right: 2rem;
}
.skeleton-button.rounded {
  border-radius: 100%;
}

.dropdown_arrow_top::after{
  content: "";
  /* arrow top */
  position: absolute;
  top: -10px;
  right: 16px;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #272B30;
}