.path-mod-cardbox .cardbox-flashcard-options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem !important;
    margin-top: 0.8rem !important;
    animation: fadeInUp 0.5s 
ease-out;
    max-width: 900px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.que .outcome, .que .comment{
    color: #8e662e;
    background-color: #9cd8fb !important;
    border-color: #9cd8fb !important;
}
@media (min-width: 769px) { 
  body#page-mod-quiz-attempt div.que .outcome {
      color: #8e662e !important;
      background-color: #9cd8fb !important;
      border-color: #9cd8fb !important;
      border-width: 2px !important;
      border-style: solid !important;
  }
}
/* ĐÁP ÁN ĐANG ĐƯỢC CHỌN*/
.highlight-answer {
  display: inline-flex;
  min-width: 50%;
  width: fit-content;
  box-sizing: border-box;

  border-radius: 4px;
  padding: 4px;
  background-color: #e6ffe6;
 border: 1px solid #33cc33 !important;
  transition: all 0.3s ease;
}
@media (max-width: 992px) {
    .main-responsive-menu .mean-bar .meanmenu-reveal {
        top: 4px;
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
    }
}
/* Ẩn banner trên course, quiz và cardbox */
.path-course .page-banner-area,
.path-mod-quiz .page-banner-area,
.path-mod-cardbox .page-banner-area {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media (max-width: 576px) {
  .container, .region-main, .quiz-content {
    max-width: 90% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}
@media (max-width: 480px) {
    .path-mod-cardbox .cardbox-flashcard-question-area {
        width: 110% !important;
        margin-left: -10px !important;
        padding-left: 0 !important;
        text-align: left !important;
    }
  .feedback img {
    max-width: 100% !important;
    height: auto;
    display: block;
  }
}
.incorrect {
  background-color: #ffe6e6 !important ; /* đỏ nhạt */
  border: 1px solid #ff4d4d !important ; /* viền đỏ */
  border-radius: 6px;
  padding: 4px 4px 24px 4px;
  margin-bottom: 8px;
}

/* Đúng - nền xanh nhạt, viền xanh */
.correct {
  background-color: #e6ffe6!important ; /* xanh nhạt */
  border: 1px solid #33cc33!important ; /* viền xanh */
  border-radius: 6px;
  padding: 4px 4px 24px 4px;
  margin-bottom: 8px;
}
#page.drawers .main-inner {
    margin-top: 0;
    margin-bottom: 2rem;
    padding: 0; 
}
#page.drawers {
    padding: 0;
    height: initial;
}
@media screen and (max-width: 768px) {
  #page-mod-quiz-attempt .que .formulation {
    width: 91vw;
    background-color: #e0f7fa;
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
    min-height: 200px;
    margin-top: 1px;
    position: relative;
    margin-left: -15px !important;
  }
#page-mod-quiz-review .que .formulation {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body#page-mod-quiz-attempt .que .outcome {
    color: #8e662e;
    background-color: #9cd8fb !important;
    border-color: #9cd8fb !important;
    width: 95vw;
    margin-right: 1px;
    margin-left: -22px;
    margin-bottom: 10px !important;
  }
}
/* =========================
   PHẦN CÂU HỎI
   ========================= */
/* Mặc định: tiếng Việt dùng Arial */
.que .qtext {
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  box-sizing: border-box;
  font-size: 17px !important;
  font-weight: 400 !important;
  font-family:  "Yu Mincho", "游明朝", "Noto Serif JP", sans-serif !important;
  line-height: 1.2;
  background-color: #ffff7a !important;
  border: 0.1px solid black !important;
  padding: 2px 4px;
}
.que .qtext * { 
   font-family:  "Yu Mincho", "游明朝", "Noto Serif JP", sans-serif !important;
  background-color: transparent !important; 
}
/* ==== Giao diện nút ==== */
button,
input[type="submit"],
.mod_quiz-next-nav,
.singlebutton .btn {
  font-size: 19px !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

/* ==== Tự động co nhỏ khi dùng điện thoại ==== */
@media (max-width: 600px) {
  .que .qtext,
  .que .answer {
    font-size: 17px !important;
  }

  button,
  input[type="submit"],
  .mod_quiz-next-nav,
  .singlebutton .btn {
    font-size: 14px !important;
  }
}

/* ==== Watermark cho trang làm bài và xem lại ==== */
body#page-mod-quiz-attempt::after,
body#page-mod-quiz-review::after {
  content: "3S JAPAN" !important;
  position: fixed !important;
  top: 50vh !important;
  left: 50vw !important;
  transform: translate(-50%, -50%) rotate(-30deg);
  display: block !important;
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  font-family:  "Yu Mincho", "游明朝", "Noto Serif JP", sans-serif !important;
  font-size: clamp(55px, 9vw, 150px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  color: rgba(255, 80, 160, 0.18) !important;

  z-index: 9999 !important;
  pointer-events: none !important;
  user-select: none !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* 💡 Trên mobile: thu nhỏ lại cho vừa màn */
@media (max-width: 768px) {
  #page-mod-quiz-attempt::before,
  #page-mod-quiz-review::before {
    font-size: 3em;                 /* nhỏ hơn để không che chữ */
    width: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
  }
}
.formulation.clearfix {
    background-color: #ffffff !important;
    color: #000 !important;
}
.highlight-answer {
  display: inline-flex;
  min-width: 50%;
  width: fit-content;
  box-sizing: border-box;

  border-radius: 4px;
  padding: 4px;
  background-color: #e6ffe6;
border: 1px solid #33cc33 !important;
  transition: all 0.3s ease;
}
element.style {
    min-height: 48px;
    height: auto;
}
.CodeMirror-wrap pre.CodeMirror-line, .CodeMirror-wrap pre.CodeMirror-line-like {
    word-wrap: break-word;
    white-space: pre-wrap;
    word-break: normal;
    height: auto;
}
.CodeMirror {
    width: 100% !important;
}

.CodeMirror-wrap {
    width: 100% !important;
}
.CodeMirror-code, 
.CodeMirror-line {
    width: 100% !important;
}