.color-red {
  color: red;
}

main.pt-56 {
  min-height: 72.5vh;
}
span.fill-answer:before {
  content: attr(data-placeholder);
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #aaa;
  position: absolute;
  pointer-events: none;
}
.number-answer {
  display: inline-flex;
  border-radius: 6px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  margin-bottom: 4px;
}
.main-box-quetion .number-answer,
.content-fill-blank-answer .number-answer {
  border: none !important;
}
.fill-answer {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 50px;
  position: relative;
  width: auto;
  border: none;
  border-bottom: 1px solid #d37b00;
  height: 22px;
  color: #d37b00;
}
select.fill-answer {
  cursor: pointer;
}
.fill-answer:focus-visible {
  outline: none;
}
.fill-answer option[value=""] {
  display: none;
}
.common-select .n-base-selection .n-base-selection-label {
  border: 1px solid rgba(224, 227, 233, 1);
  height: 52px;
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 17px 35px 0 12px;
  font-size: 15px;
}

.common-select .n-base-selection .n-base-selection-overlay {
  top: 18px;
}

.n-base-selection .n-base-selection-label .n-base-selection-input {
  padding: 0;
}
.title-box-option .box-check-type .text {
  margin-top: 6px;
}
.header-form-setup-question {
  z-index: 2;
}
.question-mode-review .main-box-setup,
.question-mode-preview .main-box-setup {
  pointer-events: none;
}
.question-mode-review .main-box-setup .item-add-audio,
.question-mode-preview .main-box-setup .item-add-audio,
.question-mode-preview .select-choose-answer,
.question-mode-preview .type-fill-select .fill-answer {
  pointer-events: auto;
}
.question-mode-preview .bottom-box {
  display: none !important;
}
.flex-blank-question.answer-wrong .check-answer-wrong,
.flex-blank-question.answer-correct .check-answer-correct {
  position: absolute;
  right: 0;
}
.flex-blank-question.answer-wrong,
.flex-blank-question.answer-correct {
  padding-right: 20px;
  justify-content: left;
}
.question-mode-review .type-fill-select select {
  appearance: none; /* Loại bỏ kiểu mặc định */
  -webkit-appearance: none; /* Cho trình duyệt WebKit */
  -moz-appearance: none; /* Cho Firefox */
}

.exam-form .n-form-item {
  --n-label-height: 0 !important;
  --n-feedback-height: 0 !important;
}
.exam-form .appear-els {
  width: 100%;
}
.n-form-item-blank--error input {
  border-color: #d03050 !important;
}

.n-form-item-blank--error .appear-els {
  border-color: #d03050 !important;
}
.item-number-question.answer-waiting {
  background: #f4a21d;
  border-color: #f4a21d;
}
.item-number-question.answer-waiting .number {
  color: #fff;
}
.flex-blank-question.answer-correct,
.question-mode-review .type-fill-select .answer-correct {
  color: rgba(27, 189, 105, 1);
  border-color: rgba(27, 189, 105, 1);
}
.flex-blank-question.answer-wrong,
.question-mode-review .type-fill-select .answer-wrong {
  color: rgba(240, 64, 64, 1);
  border-color: rgba(240, 64, 64, 1);
}

.main-box-setup .invalid,
.style-box-setup .invalid {
  border: 1px dashed #f70434 !important;
}
.box-drag {
  cursor: move;
}
.icon-detele-hover {
  cursor: pointer;
}
.checked-none .checked-wrong,
.checked-none .checked-correct {
  display: none !important;
}
.column-answer .checked-correct,
.column-answer .checked-wrong {
  left: auto;
  top: 4px;
  right: 4px;
}
.box-fill-question-textarea .cke_textarea_inline {
  background: #fff !important;
}

.n-date-picker {
  height: 52px;
}
.n-date-picker .n-input {
  height: 100%;
}

.n-date-picker .n-input__input {
  padding: 10px 20px 0 0px;
}
.form-select-aes .n-date-picker .n-input__input {
  padding: 17px 35px 0 0px;
}

.form-select-aes .form-label {
  top: 16px;
  font-size: 16px;
}

.common-select .n-base-selection-input:focus + .form-label,
.common-select.selected .form-label {
  top: 1px;
  transform: scale(0.8);
  transform-origin: 0 50%;
  transition: all 0.4s;
  color: #858d9a;
  font-weight: 400;
  font-size: 15px;
}

.loading-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  min-height: 200px;
}

.loading-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 10, 10, 0.1);
}

.loading-container::after {
  content: "";
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.appear-els .form-select-aes,
.appear-els .n-select,
.appear-els .n-base-selection,
.appear-els .n-base-selection-tags {
  height: 100%;
}
.appear-els .n-tag {
  height: 22px;
}
.appear-els .n-base-selection .n-base-selection-tags {
  padding-top: 24px;
}
.appear-els .common-select .n-base-selection .n-base-selection-label {
  border: none !important;
}
.item-action-box .text-imt-action {
  width: 100%;
}
.btn-suggestion-mark {
  margin-right: 20px;
  font-size: 15px;
  color: rgba(65, 65, 168, 1);
  font-weight: 400;
}
.btn-suggestion-mark:hover {
  color: #f4a21d;
}
@media (max-width: 991px) {
  .content-popup-center {
    width: 100% !important;
  }
  .main-popup-center {
    width: 90% !important;
  }
}
@media (max-width: 576px) {
  .box-academic-year {
    display: none;
  }
}

@media (min-width: 1920px) {
  .course-detail-layout .sidebar-lesson {
    margin-left: -100px;
  }
}

/* @media (max-width: 1499px) {
  .course-detail-layout .sidebar-lesson  .nav-sidebar-mobile {
    background: #ffff;
    width: 38px;
    height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
  }
} */
