html, body {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-optical-sizing: auto;
}
.nav-fixed #layoutSidenav #layoutSidenav_content {
  /*background-image: url('../img/bg.jpg');*/
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
a:hover {text-decoration: none;}
textarea.form-control {line-height: 1.3}
.form-check-label {cursor: pointer;}
.cursor-poiter {cursor: pointer;}
.img-account-profile {
  height: 6rem;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
}
.litepicker .container__main {
  margin-top: 0.25rem;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15);
  overflow: hidden;
  border-radius: 0.35rem;
}
.editGiaoVien {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
}
.closeGiaoVien {
  position: absolute;
  top: 6px;
  right: 6px;
}
.hoverEditGiaoVien:hover .editGiaoVien {
  display: flex;
}
.submit-sticky {
  top: 5.125rem;
}
.input-group>.input-group-text~.select2-container--bootstrap-5 .select2-selection {
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  color: #69707a;
}
.file-block {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.file-block span {
  margin: 3px 10px;
}
.file-block span.file-delete {
  margin-left: 0;
}
.file-block .size {
  margin-left: auto;
  margin-right: 0;
  min-width: 100px;
}
#loading {
  display: none;
  z-index: 1060;
  background-color: rgba(0,0,0,.5);
}
#loading>div {
  padding: 20px;
  user-select: none;
  -webkit-user-select: none;
}
#loading #progress {min-width:200px;}
.progress-text {color: #fff;}
#datatableDiemDanh tr>td:nth-child(1) {width: 30%}
#datatableDiemDanh tr>td:nth-child(3) {width: 30%}
#datatableDiemDanh tr>td:nth-child(3) {width: 40%}
#timeTableCard th, #timeTableCard td {text-align: center;position: relative;}
#timeTableCard td:hover .showUpdateBookingModal,
#timeTableCard td:hover .bottom-right,
#timeTableCard td:hover .deleteBookingBtn,
#timeTableCard td:hover .showBookingModal,
#checkLickPhong td:hover .showthemLichDotXuatModal,
#checkLickPhong td:hover .showUpdateLichBtn,
#checkLickPhong td:hover .deleteLichBtn {display: inline-flex;}
#timeTableCard td:hover {background: #f8f8f8;/*border-width: 3px;border-color: #0061f2;*/}
.showUpdateBookingModal, .bottom-right, .deleteBookingBtn, .showBookingModal, .showthemLichDotXuatModal, .showUpdateLichBtn, .deleteLichBtn {display: none;}
.showUpdateBookingModal.alwayShow, .bottom-right.alwayShow, .deleteBookingBtn.alwayShow, .showBookingModal.alwayShow {display: inline-flex;}
.bottom-right {bottom: 5px;right: 5px;}
#hocvien-detail p {margin-bottom: 6px;line-height: 1.3;}
#hocvien-detail td {padding: 5px 0}
#tab5 .format-number, #tab12 .format-number {width:60px;padding:6px;}
.ghichu {padding: 6px;}
.timeline-scroll {max-height: 480px;overflow-x: hidden;overflow-y: overlay;}
.timeline-scroll::-webkit-scrollbar {width: 0.75rem;}
.timeline-scroll::-webkit-scrollbar-thumb {border-radius: 10rem;border-width: 0.2rem;border-style: solid;background-clip: padding-box;background-color: rgba(33, 40, 50, 0.2);border-color: transparent;}
.timeline-scroll::-webkit-scrollbar-button {width: 0;height: 0;display: none;}
.timeline-scroll::-webkit-scrollbar-corner {background-color: transparent;}
.timeline-scroll::-webkit-scrollbar-track {background: #f8f8f8;}

.sidenav .sidenav-menu .nav {padding-bottom: 15px;}
.sidenav-footer-content {
  overflow: hidden;
}
.side-user-roles {
  display: inline-flex;
  overflow-y: auto;
  width: 100%;
  padding-bottom: 6px;
}
.side-user-roles::-webkit-scrollbar {height: 0.75rem;}
.side-user-roles::-webkit-scrollbar-thumb {border-radius: 10rem;border-width: 0.2rem;border-style: solid;background-clip: padding-box;background-color: rgba(33, 40, 50, 0.2);border-color: transparent;}
.side-user-roles::-webkit-scrollbar-button {width: 0;height: 0;display: none;}
.side-user-roles::-webkit-scrollbar-corner {background-color: transparent;}
.side-user-roles::-webkit-scrollbar-track {background: #f8f8f8;}
.side-user-roles span {margin-right: 6px;}
.side-user-roles span:last-child {margin-right: 0;}
.page-header-content .btn {margin: 3px 0}
.cosoSticky {z-index: 1;top: -17px !important;}
.roomSticky {z-index: 2;top: -5px !important;}
.removeDiemSingle, .removeDiemSingleToanKhoa {left: -23px;top:50%;transform: translateY(-50%);display: none;}
td:hover .removeDiemSingle, td:hover .removeDiemSingleToanKhoa {display: block}
.table-nowrap th,
.table-nowrap td {white-space: nowrap;}
#datatablesTKB * {font-size: 14px}
#datatablesTKB thead {
  position: sticky;
  top: 0;
  background-color: white; /* hoặc màu nền bảng */
  z-index: 1;
}

.note-container {
  position: relative;
  width: 100px;
}

.comment-container {
  position: relative;
  width: 400px;
}

.comment-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.comment-text.expanded {
  white-space: normal;
}

.comment-toggle {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.85em;
  color: #007bff;
  cursor: pointer;
  user-select: none;
}

.sticky-thead th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
}
.sticky-thead th::after, .sticky-thead-1 th::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: #e0e5ec;
  z-index: 11;
}

.sticky-thead-1 th {
  position: sticky;
  top: 48.8px;
  background-color: white;
  z-index: 10;
}

.sticky-column {
  position: sticky;
  left: 0;
  z-index: 9;
  background-color: white!important;
}
.sticky-column::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #e0e5ec; /* hoặc màu bạn muốn cho "border" */
  z-index: 10;
}
/*Comments*/
.font-xs {
    font-size: 13px;
}
.font-heading {
  font-family: "Quicksand", sans-serif;
  color: #253D4E;
  font-weight: 700;
  line-height: 1.2;
}
.text-brand {
  color: #2a68ac !important;
}
.comments-area {
  background: transparent;
  border-top: 1px solid #ececec;
  padding: 30px 0;
  margin-top: 0;
}

.comments-area .comment-list {
  padding-bottom: 15px;
}

.comments-area .comment-list .single-comment {
  margin: 0 0 15px 0;
  border: 1px solid #f2f2f2;
  border-radius: 15px;
  padding: 20px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  box-shadow: 1px 1px 3px -1px #ccc;
  position: relative;
  overflow: hidden;
}

#product-comments .comments-area .comment-list .single-comment:not(.ms-4) {
  border-left: 3px solid #4dadf6;
}
#product-comments .comments-area .comment-list .single-comment.ms-4 {
  background-color: #f8f8f8;
}

.comments-area .avatar {
  width: 80px;
  height: 80px;
  border: 1px solid #dedede;
  box-shadow: 1px 1px 6px 0px #e6e6e6;
}
.comments-area .desc a {
  display: flex;
  align-items: center;
}
.comments-area .desc {
  width: calc(100% - 100px);
}

.comments-area .comment-list .single-comment .comment-control {
  position: absolute;
  bottom: -28px;
  right: 6px;
  opacity: 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.comments-area .comment-list .single-comment .comment-control .btn {
  padding: 3px 9px;
  border-radius: 25px;
}

.comments-area .comment-list .single-comment:hover .comment-control {
  opacity: 1;
  bottom: 6px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
@media (max-width: 767px) {
  .comments-area .comment-list .single-comment .comment-control {
    opacity: 1;
    bottom: 6px;
  }
  .comments-area .avatar-blank,
  .comments-area .avatar {
    width: 50px;
    height: 50px;
  }
  .comments-area .comment-list .single-comment {
    padding: 10px;
    border-radius: 5px;
  }
  .comments-area .desc {
    width: calc(100% - 60px);
  }
}

.comments-area .comment-list .single-comment:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.comments-area p {
  font-size: 16px !important;
}

.comments-area h4 {
  margin-bottom: 35px;
  color: #2a2a2a;
  font-size: 18px;
}
.avatar-blank {
  width: 80px;
  height: 80px;
  border: 1px solid #2196f3; /* màu xanh dương viền */
  box-shadow: 1px 1px 6px 0px #b3e5fc; /* xanh nhạt */
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: #42a5f5; /* fallback */
  background: -webkit-linear-gradient(left, #42a5f5 0%, #80d6ff 100%);
  background: linear-gradient(to right, #42a5f5 0%, #80d6ff 100%);
  color: #ffffff; /* chữ trắng cho nổi bật */
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 30px;
  font-family: "Quicksand", sans-serif;
}
.is-hidden {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.is-shown {
  max-height: 500px; /* hoặc giá trị đủ lớn chứa nội dung */
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

#classListTable th, #classListTable td {
  /*white-space: nowrap;*/
}
#classListTable_wrapper .dt-length {display: flex}
#classListTable_wrapper label[for=dt-length-0] {margin-left: 10px}
#classListTable_wrapper .dt-layout-table {margin-top: 20px!important}

#ClassFilter .input-group {
  text-overflow: ellipsis;
  flex-wrap: nowrap;
  overflow: hidden;
  max-width: 100%;
}

@media (max-width: 767px) {
  .page-header-content > .row > div:nth-child(2) {
    flex-wrap: nowrap;
    display: flex;
    overflow: auto;
  }
  .page-header-content > .row > div:nth-child(2) > * {
    white-space: nowrap;
    margin-right: 10px;
  }

  .page-header-content > .row > div:nth-child(2) > *:last-child {
    margin-right: 0;
  }

  .class-tabs-navbar {
    overflow: auto;
    height: 75px;
  }

  .class-tabs-navbar .nav-tabs {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .class-tabs-navbar .nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 35px;
    border: 1px solid transparent;
    margin: 0 6px;
  }
  .class-tabs-navbar .nav-link.active {
    border: 1px solid #ccc;
    border-bottom-color: #ccc!important;
  }
}