header {
  background: #fff;
}

#bioDeleteModalTitle {
  font-weight: 500;
  font-size: 1.2em;
}

#bioDeleteModalMessage {
  font-weight: 400;
  margin-bottom: 1em;
}

#bioDeleteModalCancelButton {
  height: 40px;
  border-radius: 15px;
  outline: none;
  background-color: #ffffff;
  border: 1px solid var(--space_gray);
  flex-grow: 1;
  color: var(--dark_gray);
}

#bioDeleteModalDeleteButton {
  height: 40px;
  border-radius: 15px;
  outline: none;
  background-color: var(--dark_red);
  border: none;
  flex-grow: 1;
  color: #ffffff;
}

.header__above {
  max-width: 90%;
  padding: 15px 0;
}

.header__back--home {
  color: #000;
  font-size: 24px;
  font-weight: 700;
}

.header__btn {
  gap: 20px;
}

.nav__list {
  max-width: 90%;
  gap: 32px;
  padding: 20px 0;
}

.nav--link {
  color: #464646;
  font-size: 18px;
  font-weight: 700;
}

.nav--link iconify-icon {
  margin-right: 7px;
}

.containerr {
  max-width: 100%;
  margin: auto;
}

.imgfluid {
  width: 100%;
  display: block;
}

/* header */
header {
  background: #fff;
  box-shadow: 4px 0 10px 0 rgba(0, 0, 0, 0.05);
}

.header__below {
  display: flex;
  height: 50px;
  align-items: center;
}

.academy__nav--list {
  display: flex;
  list-style: none;
  margin: 0 0 0 20px;
  padding: 20px 0;
}

.academy__nav--link {
  text-decoration: none;
  margin-right: 20px;
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  height: 100%;
}

.academy__nav--link:hover {
  background: linear-gradient(163deg, #8d4df3 0%, #0120d4 98.99%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-bottom: 2px solid rgb(104, 111, 187);
}

/* end header */

/* section quality */
.quality {
  max-width: 90%;
  margin: auto;
}

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

.quality__content--item {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.item--icon-course {
  background-color: rgba(208, 241, 255, 1);
  border-radius: 20px;
  margin-right: 10px;
}

.icon--course {
  padding: 20px;
  font-size: 35px;
  color: rgba(0, 131, 190, 1);
}

.item--info-course {
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 5px;
}

.info-quantity-course {
  color: #0083be;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  margin-top: 3px;
}

.item--icon-student {
  background-color: rgba(212, 233, 218, 1);
  border-radius: 20px;
  margin-right: 10px;
}

.icon-student {
  padding: 20px;
  font-size: 35px;
  color: rgba(33, 108, 54, 1);
}

.item--info-student {
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 5px;
}

.info-quantity-student {
  color: #216c36;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: 3px;
}

.item--icon-sales {
  border-radius: 20px;
  background: #f6e0bf;
  margin-right: 10px;
}

.icon-sales {
  padding: 20px;
  font-size: 35px;
  color: rgba(210, 131, 12, 1);
}

.item--info-sales {
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 5px;
}

.info-quantity-sales {
  color: #d2830c;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: 3px;
}

.item--icon-evaluate {
  border-radius: 20px;
  background: #cecaff;
  margin-right: 10px;
}

.icon-evaluate {
  padding: 20px;
  font-size: 35px;
  color: rgba(101, 62, 163, 1);
}

.item--info-evaluate {
  color: #000;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 5px;
}

.info-quantity-evaluate {
  color: #653ea3;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: 3px;
}

/* end section quality */

/* my__product */
.my__customer {
  margin: auto 30px;
}

.product--content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid rgba(70, 70, 70, 1);
}

.product--content-title {
  color: #000;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.product--content-btn {
  border-radius: 5px;
  border: 1px solid #808190;
  background: rgba(250, 250, 250, 0);
  color: #808190;
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 700;
  text-transform: uppercase;
  padding: 10px 20px;
}

.customer--content-created__course {
  border-radius: 10px;
  background: #fff;
  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
  margin: 20px 0;
}

.created__course {
  padding: 20px;
}

.created__course--title {
  color: #000;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}

.created__course--formact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.group {
  display: flex;
  line-height: 28px;
  align-items: center;
  position: relative;
  max-width: 100%;
}

.ipt-search {
  width: 200px;
  height: 40px;
  line-height: 28px;
  padding: 0 1rem 0 2.5rem;
  outline: none;
  border-radius: 5px;
  border: 1px solid #808190;
  background: #fff;
  color: #0d0c22;
  transition: 0.3s ease;
}

.no-data {
  color: red;
  font-weight: 700;
  text-align: center;
}

.no-data-detail {
  color: red !important;
  font-weight: 400;
  font-style: italic;
}

.ipt-search::placeholder {
  color: #9e9ea7;
}

.ipt-search:focus {
  outline: none;
  background-color: #fff;
}

.icon {
  position: absolute;
  left: 1rem;
  color: #9e9ea7;
  width: 1rem;
  height: 1rem;
}

.created__course--act {
  display: flex;
  align-items: center;
  gap: 24px;
}

.div__slt--ipt {
  display: flex;
  gap: 10px;
}

.slt-inputType-form {
  width: 50%;
  border-radius: 5px;
  color: gray;
  padding: 0 5px;
}

.slt-inputType-form option {
  color: black;
  padding: 5px;
}

.created--course-total {
  margin: 0;
}

.selected__data {
  display: flex;
  gap: 10px;
  align-items: center;
}

.btn__primary {
  border: none;
  border-radius: 5px;
  border: 1px solid #808190;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 700;
  padding: 7px 15px;
  color: #808190;
}

.div__btn {
  display: flex;
  gap: 10px;
}

.btn-icon {
  font-size: 18px;
}

.btn-export {
  font-size: 20px;
}

.course--action-btn {
  display: flex;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #808190;
  background: #fff;
  color: #808190;
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 700;
  padding: 7px 15px;
}

.course--action-btn iconify-icon {
  margin-left: 2px;
}

/* === */
/* hành động */
/* drop menu hành động */
.popup-action {
  --burger-line-width: 1.125em;
  --burger-line-height: 0.125em;
  --burger-offset: 0.625em;
  --burger-bg: rgba(0, 0, 0, 0.15);
  --burger-color: #333;
  --burger-line-border-radius: 0.1875em;
  --burger-diameter: 2.125em;
  --burger-btn-border-radius: calc(var(--burger-diameter) / 2);
  --burger-line-transition: 0.3s;
  --burger-transition: all 0.1s ease-in-out;
  --burger-hover-scale: 1.1;
  --burger-active-scale: 0.95;
  --burger-enable-outline-color: var(--burger-bg);
  --burger-enable-outline-width: 0.125em;
  --burger-enable-outline-offset: var(--burger-enable-outline-width);
}

.popup-action {
  display: inline-block;
  text-rendering: optimizeLegibility;
  position: relative;
}

.popup-action .aipt-checkbox {
  display: none;
}

.dropdown-content-act {
  display: block;
  transform: scale(var(--nav-default-scale));
  visibility: hidden;
  opacity: 0;
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 4px 5px 1px rgba(0, 0, 0, 0.15);
  top: 40px;
  right: 0;
  left: var(--nav-position-left);
  transition: var(--burger-transition);
  background: #fff;
  width: 220px;

  /* ✅ THÊM DÒNG NÀY */
  z-index: 9999;
}


.dropdown-content-act ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.top,
.middle,
.bottom {
  display: flex;
  align-items: center;
  border: none;
  background-color: white;
  color: #1d1b20;
  font-size: 16px;
  font-weight: 400;
  width: 100%;
  padding: 12px 10px;
}

.top {
  border-radius: 10px 10px 0 0;
}

.bottom {
  border-radius: 0 0 10px 10px;
}

.drop--act button iconify-icon {
  margin-right: 7px;
}

.drop--act button:hover {
  background-color: #e4e4e4;
}

.course--action-btn:focus:not(:hover) {
  outline-color: var(--burger-enable-outline-color);
  outline-offset: var(--burger-enable-outline-offset);
}

.popup-action .aipt-checkbox:checked ~ nav {
  transform: scale(var(--nav-active-scale));
  visibility: visible;
  opacity: 1;
}

/*end drop menu hành độhng */
/* end hành động */
/* === */

/* ==== */
/* bộ lọc */
.course--filter-btn {
  display: flex;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #808190;
  background: #fff;
  color: #808190;
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 700;
  padding: 7px 15px;
  margin: 0 7px;
}

.course--filter-btn iconify-icon {
  margin-right: 2px;
}

.btn__modal {
  background: var(
      --Primary-gradient-color,
      linear-gradient(163deg, #8d4df3 0%, #0120d4 98.99%)
  ) !important;
  border: none;
  border-radius: 5px;
}

/* modal */
.modal-body-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 0;
  margin: 0 -10px;
  padding: 0 12px;
  /* Để tạo không gian giữa các cột */
}

.modal-contentt {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  color: var(--bs-modal-color) !important;
  pointer-events: auto !important;
  background-color: var(--bs-modal-bg) !important;
  background-clip: padding-box !important;
  /* border: var(--bs-modal-border-width) solid var(--bs-modal-border-color); */
  /* border-radius: var(--bs-modal-border-radius); */
  outline: 0 !important;
}

.form__item {
  padding: 0 10px;
  /* Tạo không gian giữa các cột */
  width: 50%;
  /* Đặt chiều rộng mặc định cho mỗi input là 50% */
}

/* Các style CSS khác cho giao diện */
.lbl-data {
  font-weight: bold;
  font-size: 18px;
  color: rgba(70, 70, 70, 1);
}

.ipt-data {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid rgba(128, 129, 144, 1);
  border-radius: 5px;
  box-sizing: border-box;
  /* Đảm bảo padding và border được tính vào chiều rộng */
}

.modal-dialog {
  max-width: 750px !important;
}

.btn__change {
  text-align: center;
  margin: 15px 0;
}

.btn__save {
  border: none;
  width: 100%;
  border-radius: 5px;
  background-color: #603fe8;
  color: rgba(255, 255, 255, 1);
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 700;
  padding: 10px 0;
}

/*// form up file*/

.ipt-uploadCSV {
  max-width: 190px;
  display: none;
}

.label-file {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 250px;
  border-radius: 10px;
  border: 1px dashed var(--gray-3, #808190);
  align-items: center;
  text-align: center;
  padding: 5px;
  color: #404040;
  cursor: pointer;
}

.upload-csv {
  border-radius: 10px;
  background: var(
      --Primary-gradient-color,
      linear-gradient(163deg, #8d4df3 0%, #0120d4 98.99%)
  );
  color: white;
  font-size: 18px;
  padding: 15px 25px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.btn-importCSV {
  border-radius: 5px;
  background: #d9d9d9;
  border: none;
  color: #808190;
  font-size: clamp(14px, 2vw, 15px);
  font-style: normal;
  font-weight: 700;
}

.desc-uploadCSV {
  color: #464646;
  font-weight: 400;
  font-size: 18px;
  font-style: italic;
}

.link-form {
  font-weight: 700;
  text-decoration: underline;
}

.course--add-link {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  border: none;
  color: rgba(255, 255, 255, 1);
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 700;
  padding: 7px 15px;
  cursor: pointer;
}

.course--add-link iconify-icon {
  margin-right: 2px;
}

/* drop filter */
.popup-filter {
  --burger-line-width: 1.125em;
  --burger-line-height: 0.125em;
  --burger-offset: 0.625em;
  --burger-bg: rgba(0, 0, 0, 0.15);
  --burger-color: #333;
  --burger-line-border-radius: 0.1875em;
  --burger-diameter: 2.125em;
  --burger-btn-border-radius: calc(var(--burger-diameter) / 2);
  --burger-line-transition: 0.3s;
  --burger-transition: all 0.1s ease-in-out;
  --burger-hover-scale: 1.1;
  --burger-active-scale: 0.95;
  --burger-enable-outline-color: var(--burger-bg);
  --burger-enable-outline-width: 0.125em;
  --burger-enable-outline-offset: var(--burger-enable-outline-width);
}

.popup-filter {
  display: inline-block;
  text-rendering: optimizeLegibility;
  position: relative;
}

.popup-filter .ipt-checkbox {
  display: none;
}

.course--filter-btn {
  display: flex;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #808190;
  background: #fff;
  color: #808190;
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 700;
  padding: 7px 15px;
  margin: 0 7px;
}

.popup-window-filter {
  width: 500px;
  transform: scale(var(--nav-default-scale));
  visibility: hidden;
  opacity: 0;
  position: absolute;
  border-radius: 15px;
  background: #fff;
  box-shadow: 4px 4px 7px 7px rgba(0, 0, 0, 0.05);
  top: calc(
      var(--burger-diameter) + var(--burger-enable-outline-width) +
      var(--burger-enable-outline-offset)
  );
  left: var(--nav-position-left);
  right: 0;
  transition: var(--burger-transition);
}

.popup-window-filter ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.course--filter-btn:focus:not(:hover) {
  outline-color: var(--burger-enable-outline-color);
  outline-offset: var(--burger-enable-outline-offset);
}

.popup-filter .ipt-checkbox:checked ~ nav {
  transform: scale(var(--nav-active-scale));
  visibility: visible;
  opacity: 1;
}

.drop--filter-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 7px 15px;
}

.drop--filter-row h2 {
  color: #000;
  font-size: 14px;
  font-weight: 700;
}

.drop--filter-item {
  width: 100%;
}

.form__desc {
  color: #000;
  font-size: 14px;
  font-weight: 400;
}

.line {
  border: 1px solid rgba(128, 129, 144, 1);
  margin: 10px 0;
}

.created__course--filter:hover .drop--filter {
  display: block;
}

.free,
.latest {
  margin: 10px 0;
}

.pay-fee,
.oldest {
  margin-bottom: 10px;
}

/* end drop filter */
/* end bộ lọc */
/* ==== */

/* table */
.created__course--table {
  margin-top: 20px;
}

.bgr-btn {
  background: linear-gradient(163deg, #8d4df3 0%, #0120d4 98.99%);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: auto;
}

table thead tr {
  border-radius: 20px;
}

th {
  background: #f6f6f6;
  color: rgba(70, 70, 70, 1);
  font-weight: bold;
  margin: 0;
}

.title__table {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.title__table iconify-icon {
  margin-left: 7px;
}

td,
th {
  padding: 20px 10px;
  border: none;
  text-align: left;
  font-size: clamp(14px, 2vw, 16px);
}

tbody tr {
  border-bottom: 1px solid black;
}

td p {
  margin: 0;
  overflow: hidden;
}

.tbody--evaluate {
  display: flex;
  align-items: center;
  margin: 0;
  color: #464646;
  text-align: justify;
  font-size: 18px;
  font-weight: 400;
}

.tbody--name,
.tbody--learning {
  color: #464646;
  text-align: justify;
  font-size: 18px;
  font-weight: 400;
  max-width: 350px;
  white-space: nowrap; /* Ngăn ngừa xuống dòng */
  overflow: hidden; /* Ẩn phần dư thừa */
  text-overflow: ellipsis; /* Hiển thị dấu (...) */
}

.tbody--student,
.tbody--price {
  color: #464646;
  text-align: justify;
  font-size: 18px;
  font-weight: 400;
}

.tbody--evaluate iconify-icon {
  margin-left: 7px;
  color: rgb(253, 209, 62);
}

.ipt-error {
  color: red;
  font-weight: bold;
}

/* end my__product */

/* danh sách lộ trình  */
.learning--action-btn {
  display: flex;
  border-radius: 5px;
  border: 1px solid #808190;
  background: #fff;
  color: #808190;
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 700;
  padding: 7px 15px;
}

.learning--action-btn iconify-icon {
  margin-right: 2px;
}

.tbody--tag {
  color: #000;
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 500;
  display: flex;
  align-items: center;
  border-radius: 25px;
  background: #f6f6f6;
  padding: 10px 15px;
  width: 60%;
}

.tbody--tag svg {
  margin-right: 7px;
}

/* dots  action*/
.popup {
  display: inline-block;
  text-rendering: optimizeLegibility;
  position: relative;
}

.popup .dots {
  display: none;
}

.burger {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background: var(--burger-bg);
  width: var(--burger-diameter);
  height: var(--burger-diameter);
  border-radius: var(--burger-btn-border-radius);
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: var(--burger-transition);
  outline: var(--burger-enable-outline-width) solid transparent;
  outline-offset: 0;
}

.popup-window {
  transform: scale(var(--nav-default-scale));
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: var(--nav-padding-y) var(--nav-padding-x);
  background: var(--nav-bg);
  font-family: var(--nav-font-family);
  color: var(--nav-text-color);
  border-radius: var(--nav-border-radius);
  box-shadow: var(--nav-shadow-width) var(--nav-shadow-color);
  border: var(--nav-border-width) solid var(--nav-border-color);
  top: calc(
      var(--burger-diameter) + var(--burger-enable-outline-width) +
      var(--burger-enable-outline-offset)
  );
  left: var(--nav-position-left);
  right: 0;
  transition: var(--burger-transition);
  width: 180px;
  z-index: 100;
}

.popup-window legend {
  padding: var(--nav-title-padding-y) var(--nav-title-padding-x);
  margin: 0;
  color: var(--nav-title-color);
  font-size: var(--nav-title-size);
  text-transform: uppercase;
}

.popup-window-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 5px 1px rgba(0, 0, 0, 0.15);
}

.popup-window-btn {
  outline: none;
  width: 100%;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  color: #000;
  padding: 10px;
  margin: 5px 0;
  border-radius: 10px;
  white-space: nowrap;
  cursor: pointer;
}

.popup-window-btn span iconify-icon {
  font-weight: bold;
  margin-right: 7px;
}

/* .edit {
  margin: 20px 0;
} */
/* actions */

.popup-window ul button:hover,
.popup-window ul button:focus-visible {
  color: var(--nav-button-hover-text-color);
  background: var(--gray-5, #e4dede);
}

.burger:hover {
  transform: scale(var(--burger-hover-scale));
}

.burger:active {
  transform: scale(var(--burger-active-scale));
}

.burger:focus:not(:hover) {
  outline-color: var(--burger-enable-outline-color);
  outline-offset: var(--burger-enable-outline-offset);
}

.popup .dots:checked + .burger span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.popup .dots:checked + .burger span:nth-child(2) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

.popup .dots:checked + .burger span:nth-child(3) {
  transform: translateX(
      calc(var(--burger-diameter) * -1 - var(--burger-line-width))
  );
}

.popup .dots:checked ~ nav {
  transform: scale(var(--nav-active-scale));
  visibility: visible;
  opacity: 1;
}

/* paginate */
.paginate {
  margin-top: 10px;
}

.paginationn {
  display: flex;
  gap: 20px;
  font-size: clamp(14px, 2vw, 15px);
  justify-content: center;
  align-items: center;
}

.page-link {
  border: none;
  color: #000 !important;
}

.activee {
  border-radius: 15px !important;
  background: var(--gray-4, #d9d9d9) !important;
  padding: 7px 15px;
}

.left,
.right {
  display: flex;
  background-color: rgba(246, 246, 246, 1);
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.center {
  letter-spacing: 2px;
}

.selected-count {
  font-size: 22px;
}

.form-search {
  width: 50%;
}



@media screen and (max-width: 1024px) {
  .tbody--name,
  .tbody--learning {
    font-size: 15px;
    max-width: 220px;
  }

  .tbody--student,
  .tbody--price,
  .tbody--evaluate {
    /* color: #464646; */
    /* text-align: justify; */
    font-size: 15px;
    /* font-weight: 400; */
  }

  td,
  th {
    font-size: clamp(14px, 2vw, 15px);
    max-width: 180px;
  }

  .top,
  .middle,
  .bottom {
    font-size: 14px;
  }

  .tbody--tag {
    width: 116px;
  }

  .btn__primary {
    border: none;
    border-radius: 5px;
    border: 1px solid #808190;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 15px;
    color: #808190;
  }

  .selected-count {
    font-size: 18px;
    text-align: center;
  }

  .selected__data {
    display: flex;
    gap: 15px;
    align-items: center;
  }

  .course--add-link {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 1);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 15px;
    cursor: pointer;
  }
}

.form-date-filter input[type="date"] {
	font-size: 14px;
	padding: 4px 8px;
}


@media screen and (max-width: 768px) {
  .sidebar-header {
    margin-top: 0;
  }

  .academy__nav--link {
    font-size: clamp(14px, 2vw, 15px);
  }

  .item--info-course,
  .item--info-student,
  .item--info-sales,
  .item--info-evaluate {
    font-size: clamp(14px, 2vw, 15px);
  }

  .info-quantity-course,
  .info-quantity-student,
  .info-quantity-sales,
  .info-quantity-evaluate {
    font-size: 20px;
  }

  .product--content-title {
    font-size: 24px;
  }

  .product--content-btn {
    font-size: 14px;
  }

  .created__course--title {
    font-size: 20px;
  }

  .course--add-link,
  .course--filter-btn,
  .course--action-btn,
  .learning--action-btn {
    font-size: 15px;
  }

  .ipt-search {
    width: 200px;
    height: 35px;
  }

  td,
  th {
    font-size: 14px;
    max-width: 118px;
    white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
  }

  .td-email {
    white-space: nowrap; /* Ngăn chữ xuống dòng */
    overflow: hidden; /* Ẩn phần vượt quá kích thước khung */
    text-overflow: ellipsis; /* Hiển thị dấu "..." */
  }

  .tbody--tag {
    width: 100px;
    font-size: 13px;
  }

  .btn__primary {
    display: flex;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #808190;
    background: #fff;
    color: #808190;
    font-size: 12px;
    font-weight: 700;
    padding: 0 15px;
  }

  .btn__modal {
    background: var(
        --Primary-gradient-color,
        linear-gradient(163deg, #8d4df3 0%, #0120d4 98.99%)
    ) !important;
    border-radius: 5px;
    display: flex;
    align-items: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
    /* padding: 7px 15px; */
    border: none;
    height: 39px;
  }

  .activee {
    border-radius: 15px !important;
    background: var(--gray-4, #d9d9d9) !important;
    padding: 5px 15px;
  }

  .created__course--formact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
  }

  .course--add-link {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 1);
    font-weight: 700;
    padding: 2px 15px;
    cursor: pointer;
  }

  .selected__data span {
    font-size: 14px;
    font-weight: 600;
  }

  .selected__data span strong {
    font-size: 14px;
    font-weight: 600;
  }
}

@media screen and (max-width: 430px) {
  .created__course--formact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px 0;
  }

  .academy__nav--link {
    font-size: 9px;
  }

  .quality__content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .icon--course,
  .icon-student,
  .icon-sales,
  .icon-evaluate {
    padding: 12px;
    font-size: 26px;
  }

  .item--info-course,
  .item--info-student,
  .item--info-sales,
  .item--info-evaluate {
    font-size: 14px;
  }

  .info-quantity-course,
  .info-quantity-student,
  .info-quantity-sales,
  .info-quantity-evaluate {
    font-size: 18px;
  }

  .product--content-title {
    font-size: 18px;
  }

  .product--content-btn {
    font-size: 10px;
  }

  .created__course--title {
    font-size: 14px;
  }

  .course--add-link,
  .course--filter-btn,
  .learning--action-btn {
    font-size: 10px;
  }

  .dropdown-content-act {
    left: 0;
    z-index: 1000;
  }

  .course--table_main {
    overflow-x: scroll;
    overflow-y: hidden;
  }

  .form-search {
    width: 100%;
  }

  .ipt-search {
    width: 100%;
    height: 30px;
  }

  td,
  th {
    font-size: 14px;
    max-width: 118px;
    white-space: nowrap;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
  }

  .tbody--tag {
    width: 100px;
    font-size: 13px;
  }

  .created__course--act {
    display: flex;
    justify-content: flex-end;
  }

  .btn__primary {
    display: flex;
    align-items: center;
    border-radius: 5px;
    border: 1px solid #808190;
    background: #fff;
    color: #808190;
    font-size: 8px;
    font-weight: 700;
    padding: 0 15px;
  }

  .btn__modal {
    background: var(
        --Primary-gradient-color,
        linear-gradient(163deg, #8d4df3 0%, #0120d4 98.99%)
    ) !important;
    border-radius: 5px;
    display: flex;
    align-items: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 15px;
    border: none;
    height: 39px;
  }

  .btn__modal {
    background: var(
        --Primary-gradient-color,
        linear-gradient(163deg, #8d4df3 0%, #0120d4 98.99%)
    ) !important;
    border-radius: 5px;
    display: flex;
    align-items: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
    padding: 7px 15px;
    border: none;
    height: 39px;
  }

  .nav--link {
    padding-left: 20px;
  }


  .activity-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 10px;
    border-left: 4px solid #8d4df3;
    background: #f9f9f9;
  }

  .activity-checkbox {
    align-self: flex-start;
    margin-top: 5px;
  }

  .activity-content {
    margin-left: 0;
    width: 100%;
  }

  .activity-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .activity-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    word-break: break-word;
  }

  .activity-type {
    margin: 5px 0 0 0;
    font-size: 12px;
    border-radius: 10px;
    padding: 3px 8px;
  }

  .activity-time {
    font-size: 13px;
    color: #888;
  }

  .activity-details {
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
  }

  .activity-detail-item {
    font-size: 14px;
    color: #444;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .activity-detail-item iconify-icon {
    font-size: 16px;
    color: #8d4df3;
  }

  .date-header {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
    gap: 4px;
  }

  .date-label {
    font-size: 16px;
    font-weight: bold;
  }

  .activity-count {
    font-size: 13px;
    background: #eee;
    padding: 4px 10px;
    border-radius: 8px;
  }
}

/* Pagination styles */
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 5rem;
  margin: 3rem;
  border-radius: 0.6rem;
  background: #ffffff;
  box-shadow: 0 0.8rem 2rem rgba(#5a6181, 0.05);
}

.page__numbers,
.page__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
  cursor: pointer;
}

.page__numbers {
  width: 40px;
  height: 40px;
  border-radius: 0.4rem;
}

.page__numbers:hover {
  color: #8d4df3;
}

.page__numbers.activee {
  color: #ffffff;
  background: linear-gradient(163deg, #8d4df3 0%, #0120d4 98.99%);
  font-weight: 600;
}

/*modal detail*/
.row__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.lbl-dataDetail {
  font-size: 18px;
  font-weight: bold;
  /*color: gray;*/
}

.txt-detail {
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 500;
  color: rgba(70, 70, 70, 1);
}

/* Activity Timeline Styles */
.activity-timeline {
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.activity-date-group {
  margin-bottom: 30px;
}

.date-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.date-label {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-right: 10px;
}

.activity-count {
  font-size: 14px;
  color: #666;
  background: #f5f5f5;
  padding: 4px 10px;
  border-radius: 12px;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}

.activity-item:hover {
  transform: translateX(5px);
  background: #f0f2f5;
}

.activity-item::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: linear-gradient(163deg, #8d4df3 0%, #0120d4 98.99%);
  border-radius: 2px;
}

.activity-content {
  flex: 1;
  margin-left: 15px;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.activity-title {
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

.activity-time {
  font-size: 13px;
  color: #666;
}

.activity-details {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.activity-detail-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #555;
}

.activity-detail-item iconify-icon {
  margin-right: 5px;
  color: #8d4df3;
}

.activity-type {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 10px;
}

.activity-type.academy {
  background: #e3f2fd;
  color: #1976d2;
}

.activity-type.bio {
  background: #e8f5e9;
  color: #2e7d32;
}

.activity-type.facebook {
  background: #e8eaf6;
  color: #3f51b5;
}

.activity-type.crm {
  background: #fff3e0;
  color: #f57c00;
}

.activity-type.manual {
  background: #f3e5f5;
  color: #7b1fa2;
}

/* Checkbox styles */
.activity-checkbox {
  margin-right: 15px;
  margin-top: 5px;
}

/* Responsive styles */
@media screen and (max-width: 768px) {
  .activity-timeline {
      padding: 15px;
  }

  .activity-item {
      padding: 12px;
  }

  .activity-title {
      font-size: 14px;
  }

  .activity-details {
      flex-direction: column;
      gap: 5px;
  }

  .date-label {
      font-size: 16px;
  }


  .activity-timeline {
    padding: 12px;
  }

  .activity-date-group {
    margin-bottom: 20px;
  }

  .date-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
  }

  .date-label {
    font-size: 16px;
    font-weight: 600;
    color: #111;
  }

  .activity-count {
    font-size: 13px;
    color: #666;
    background: #f0f0f0;
    padding: 4px 8px;
    border-radius: 6px;
  }

  .activity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .activity-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 12px;
    gap: 8px;
  }

  .activity-checkbox {
    margin: 0;
    transform: scale(1.1);
    align-self: flex-start;
  }

  .activity-content {
    margin-left: 0;
    width: 100%;
  }

  .activity-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .activity-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    word-break: break-word;
  }

  .activity-type {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 10px;
    background-color: #f0f0f0;
    color: #333;
    margin-top: 2px;
  }

  .activity-time {
    font-size: 12px;
    color: #888;
    font-style: italic;
  }

  .activity-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .activity-detail-item {
    font-size: 14px;
    color: #444;
    display: flex;
    align-items: center;
    gap: 6px;
    word-break: break-word;
  }

  .activity-detail-item iconify-icon {
    font-size: 16px;
    color: #8d4df3;
  }
}