/*** Import *****/
@import url("loading-btn.css");
@import url("loading-group.css");

@import url("mona-alert.css");
@import url("jquery-confirm.min.css");
/*** End ****/

.blog-info-tag span:before {
  content: ",";
  position: absolute;
  bottom: 0.6rem;
  right: 0;
  height: 100%;
  font-size: 1.6rem;
  width: auto;
  padding-right: 0.5rem;
}

.blog-info-tag span {
  position: relative;
  display: inline-block;
  padding-right: 1rem;
}

.blog-info-tag span:last-child:before {
  display: none;
}

.wpcf7 form .wpcf7-response-output {
  border: 0;
  margin: 1.5rem 0;
  padding: 0;
  font-weight: bold;
  font-size: 1.2rem;
}

.wpcf7 form.sent .wpcf7-response-output {
  color: #46b450;
}

.wpcf7 form.invalid .wpcf7-response-output {
  color: red !important;
}

.wpcf7 form.invalid .wpcf7-not-valid-tip {
  color: red !important;
}

span.price-from {
  display: none;
}

#wp-admin-bar-wp-logo a img {
  max-width: 3.2rem;
}

.core-values-sect.deferred-render {
  display: none;
}

/*nguyenleeminhhieu*/

ul.breadcrumb-list span.separator {
  display: none;
}

input.mona-submit-hidden {
  display: none;
}

.mona-button-group {
  display: flex;
  align-items: center;
}

span.wpcf7-not-valid-tip {
  position: absolute;
  right: 5px;
  bottom: -20px;
  font-size: 12px;
}

.no-image img {
  object-fit: scale-down !important;
  width: 100% !important;
  height: 100% !important;
  background: #ccc;
}

.sec-news.sec-news-sticky .news-panel .b-row:not(:last-child) {
  margin-bottom: 2.4rem;
}

.mona-heading-unvs {
  height: 0;
  width: 0;
  opacity: 0;
}

.bnh-it .b-image video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.bnh-slider .swiper-slide.no-cnt.has-bg-video .b-image::before,
.bnh-slider .swiper-slide.no-cnt.has-bg-video .b-image::after {
  display: none !important;
}

.sform-form .form-list+.mona-button-group {
  margin-top: 2.4rem;
}

.single-teacher .mona-content :is(h1, h2, h3, h4, h5, h6) {
  --f-sz: clamp(1.7rem, calc(1.2984rem + 0.5738vw), 2.4rem);
  font-size: var(--f-sz);
  color: var(--color-pri);
  font-weight: 900;
  margin-bottom: 1.6rem;
}

.ez-toc-debug-messages {
  display: none !important;
}

body.admin-bar .hd {
  margin-top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .hd {
    margin-top: 46px;
  }
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  float: unset;
  width: 100%;
}

.woocommerce-account .acc-message a {
  text-decoration: underline;
  transition: 0.4s all;
}

.woocommerce-account .acc-message a:hover {
  color: var(--color-pri);
}

.acc-side .b-inner .b-head .avt-icon img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.acc-avt .b-inner .b-img .inner img {
  object-fit: cover;
}

form.woocommerce-EditAccountForm.edit-account .woocommerce-form-row {
  width: 100% !important;
}

form.woocommerce-EditAccountForm.edit-account .text {
  font-size: 1.6rem;
  font-weight: 600;
  color: #262626;
  display: block;
  margin-bottom: 0.4rem;
}

form.woocommerce-EditAccountForm.edit-account input {
  height: 4.8rem !important;
  padding: 0 1.6rem !important;
  background: #fff !important;
  --f-sz: clamp(1.5rem, calc(1.3279rem + 0.2459vw), 1.8rem);
  font-size: var(--f-sz) !important;
  font-weight: 500 !important;
  border-radius: 0.4rem !important;
  color: #404040 !important;
  outline: unset;
  border: unset;
  width: 100% !important;
}

form.woocommerce-EditAccountForm.edit-account .form-ip.col {
  margin-bottom: 0 !important;
}

.sform-form span.wpcf7-not-valid-tip {
  background: #fff;
  bottom: -20px;
  padding: 0 10px;
  text-align: center;
  right: 0;
  font-weight: bold;
  border-radius: 4px;
}

.sform-form form {
  position: relative;
}

.sform-form form .wpcf7-response-output {
  position: absolute;
  background: #fff;
  bottom: -10px;
  padding: 0 10px;
  text-align: center;
  right: 0;
  font-weight: bold;
  border-radius: 4px;
}

.ct-form .form-list {
  margin-bottom: 1rem;
}

.woocommerce div.product div.summary {
  width: 100%;
  margin: 0;
}

.crses-card .b-content .t-price {
  --f-sz: clamp(2.2rem, calc(1.6262rem + 0.8197vw), 3.2rem);
  font-size: var(--f-sz);
  font-weight: 900;
  color: #262626;
  display: flex;
  flex-direction: row-reverse;
  align-self: flex-start;
  align-items: flex-end;
}

.crses-card .b-content .t-price ins {
  text-decoration: unset;
}

.crses-card .b-content .t-price del {
  font-weight: 500;
  color: #737373;
  --f-sz: clamp(1.6rem, calc(1.3705rem + 0.3279vw), 2rem);
  font-size: var(--f-sz);
}

.woocommerce div.product div.images {
  float: unset;
  width: 100%;
}

.woocommerce-verification-required {
  text-align: center;
}

.woocommerce-verification-required .btn {
  margin: 1rem auto 0;
  max-width: 24rem;
  width: 100%;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: #29347f;
  color: #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border: unset;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
  display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: 4px;
  margin: 0;
  padding: 0 1em;
  border: unset;
}

.woocommerce-mini-cart__buttons {
  display: none;
}

.count.quantity input.qty {
  display: none !important;
}

.cmini-virtual .count.quantity .count-btn {
  display: none;
}

.count.quantity .count-number {
  min-width: 5rem;
  text-align: center;
}

.woocommerce table.shop_table th {
  background: #29347f;
  color: #fff;
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: #dc2626;
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: #29347f;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce #respond input#submit,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce a.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce button.button,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce input.button {
  color: #fff !important;
  background-color: #29347f;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:disabled[disabled]:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:disabled[disabled]:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:disabled[disabled]:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:disabled:hover,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce #respond input#submit.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce #respond input#submit:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce #respond input#submit:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce a.button.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce a.button:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce a.button:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce button.button.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce button.button:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce button.button:disabled[disabled]:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce input.button.disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce input.button:disabled:hover,
:where(body:not(.woocommerce-block-theme-has-button-styles)):where( :not(.edit-post-visual-editor)) .woocommerce input.button:disabled[disabled]:hover {
  background-color: #dc2626 !important;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: #dc2626 !important;
  color: #fff;
}

.woocommerce #content table.cart td.actions .input-text,
.woocommerce table.cart td.actions .input-text,
.woocommerce-page #content table.cart td.actions .input-text,
.woocommerce-page table.cart td.actions .input-text {
  max-width: 160px;
  width: 100%;
  height: 100% !important;
  padding: 0.618em 1em !important;
}

.woocommerce #content table.cart td.actions .coupon,
.woocommerce table.cart td.actions .coupon,
.woocommerce-page #content table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon {
  float: left;
  display: flex;
  flex-wrap: wrap;
}

.woocommerce a.remove {
  font-size: inherit;
  width: 2.4rem;
  height: 2.4rem;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.woocommerce a.remove:hover {
  color: #fff !important;
  background: var(--wc-red);
  color: #fff !important;
  background: var(--color-pri);
}

@media screen and (max-width: 768px) {
  .woocommerce table.cart td .count {
    margin-left: auto;
  }

  .woocommerce table.cart td a.remove {
    margin-left: auto;
  }

  .woocommerce #content table.cart td.actions .coupon,
  .woocommerce table.cart td.actions .coupon,
  .woocommerce-page #content table.cart td.actions .coupon,
  .woocommerce-page table.cart td.actions .coupon {
    width: 100%;
  }

  .woocommerce #content table.cart td.actions .input-text,
  .woocommerce table.cart td.actions .input-text,
  .woocommerce-page #content table.cart td.actions .input-text,
  .woocommerce-page table.cart td.actions .input-text {
    max-width: 100%;
    width: 50%;
    height: 100% !important;
    padding: 0.618em 1em !important;
  }

  .woocommerce #content table.cart td.actions .coupon .button.alt,
  .woocommerce #content table.cart td.actions .coupon .input-text+.button,
  .woocommerce table.cart td.actions .coupon .button.alt,
  .woocommerce table.cart td.actions .coupon .input-text+.button,
  .woocommerce-page #content table.cart td.actions .coupon .button.alt,
  .woocommerce-page #content table.cart td.actions .coupon .input-text+.button,
  .woocommerce-page table.cart td.actions .coupon .button.alt,
  .woocommerce-page table.cart td.actions .coupon .input-text+.button {
    float: right;
    width: 50%;
    max-width: 100%;
  }
}

.woocommerce-form-coupon-toggle {
  display: none;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2 {
  float: unset;
  width: 100%;
}

p#billing_country_field,
.woocommerce-page .col2-set .col-2,
#order_review_heading {
  display: none;
}

form.checkout .paym-box .cmini-item .t-gr {
  flex-direction: column;
  align-items: flex-start;
}

.paym-box .t-gr .t-price {
  --f-sz: clamp(1.5rem, calc(1.3279rem + 0.2459vw), 1.8rem);
  font-size: var(--f-sz);
  color: var(--color-pri);
  font-weight: 700;
}

.paym-box .t-gr .t-price del {
  --f-sz: 1.4rem;
  font-size: var(--f-sz);
  color: #525252;
  font-weight: 500;
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
  background: unset !important;
}

#add_payment_method #payment div.form-row,
.woocommerce-cart #payment div.form-row,
.woocommerce-checkout #payment div.form-row {
  display: none;
}

#add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
  border: unset !important;
}

section.woocommerce-bacs-bank-details,
.woocommerce ul.order_details,
.woocommerce-thankyou-order-received {
  display: none;
}

.odt .paym-box {
  margin-top: 1rem;
}

.odt-panel,
.odt-slider {
  min-height: 40vh;
}

.odt .odt-row:not(:last-child) {
  margin-bottom: 1rem;
}

.odt-row.has-paym-box .paym-box {
  min-height: 50rem;
}

.odt-row.has-paym-box .paym-box,
.odt-row.has-paym-box .paym-box .b-inner {
  height: 100%;
}

.odt-row.has-paym-box .paym-box .b-panel {
  margin: auto;
}

.paym-box .b-code img {
  width: 30rem;
  height: 100%;
}

.odt-row.has-paym-box .paym-box .b-img {
  max-width: 50rem;
}

.code-qr-information-item {
  display: none;
}

.code-qr-information-item.active {
  display: block;
}

select.select-bank-checkout {
  appearance: auto;
  border: 1px solid;
  padding: 0 1rem;
}

.qr-account-noqr {
  font-size: 2.4rem;
  padding: 1.6rem 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.woocommerce div.product form.cart {
  margin-bottom: 0 !important;
}

.woocommerce div.product form.cart.is-virtual .count.quantity {
  display: none;
}

.mona-add-to-cart-group {
  display: flex;
  gap: 0.5rem;
}

.mona-add-to-cart-group .count.quantity {
  max-width: max-content;
  width: 100%;
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
  top: 1.5em;
}

.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message .button {
  margin-left: auto !important;
}

.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.acc-side .b-inner .b-panel .t-list .t-link.is-active {
  color: #fff;
  background: var(--color-pri);
}

.doc-area {
  background: #fff;
  padding: 2.4rem;
  border-radius: 4px;
}

.doc-area .doc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doc-area .doc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
}

.doc-area .doc-bottom .t-gr {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.doc-area .doc-top .t-gr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doc-area .doc-bottom .t-gr .txt:first-child,
.doc-area .doc-top .t-gr .txt:first-child {
  font-weight: 700;
}

.doc-area .doc-bottom {
  flex-wrap: wrap;
  gap: 1rem;
}

.doc-area .doc-bottom>*:not(.icon) {
  width: calc(50% - 0.5rem) !important;
}

.doc-area .doc-bottom .t-gr:last-child {
  width: 100% !important;
}

.doc-area .doc-bottom .t-gr .woocommerce-MyAccount-downloads-file {
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .woocommerce .woocommerce-order-downloads .col {
    width: 50% !important;
  }
}

@media screen and (max-width: 600px) {
  .woocommerce .woocommerce-order-downloads .col {
    width: 100% !important;
  }
}

.std-it.active .b-inner {
  background: #dfe7fa;
}

.std-it.disabled {
  opacity: 0.5;
  pointer-events: none;
}

header.disable {
  display: none;
}

.acc-ans .t-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.is-loading-exam .crs-block {
  min-height: 20rem;
}

.is-loading-exam.loading .crs-block {
  opacity: 0.5;
  pointer-events: none;
}

.lswd-thumbnail .noThumb .inner img {
  object-fit: contain !important;
}

.woocommerce-tabs.wc-tabs-wrapper {
  display: none !important;
}

/* alpha edu */
/* Căn giữa dọc cho nhóm số và tiêu đề trong dashboard/history */
.acc-score .b-item .b-inner {
  display: flex;
  align-items: center;
}

.acc-score .b-item .b-inner .t-gr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Responsive đảm bảo luôn giữa ở mobile */
@media (max-width: 768px) {
  .acc-score .b-item .b-inner {
    justify-content: center;
  }
}

main.page-contact .ct-form .wpcf7-spinner {
  margin: 0;
}

.phone-gr {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crs-dl .crs-dl-it,
.crs-head .b-tab .t-link {
  cursor: pointer;
}

.crs-head .b-tab .t-link:has(input:checked) {
  color: var(--color-pri);
}

.crs-head .b-tab .t-link:has(input:checked)::before {
  width: 100%;
}

.crs-dl .crs-dl-it:has(input:checked) {
  color: #fff;
  border-color: var(--color-pri);
  background: var(--color-pri);
}

.sec-sct .sct-form form .wpcf7-form-control-wrap {
  width: 100%;
}

.sec-sct .sct-form .form-gr input {
  height: 100%;
}

.sec-sct .sct-form .mona-button-group {
  position: relative;
}

.sec-sct .sct-form .wpcf7-spinner {
  position: absolute;
  z-index: 2;
  right: -12px;
  bottom: 12px;
}

.sec-sct .sct-form .form-gr input {
  width: 100%;
  height: 100%;
}

.sec-sct .sct-form span.wpcf7-not-valid-tip {
  position: absolute;
  right: 0px;
  bottom: -5px;
  font-size: 12px;
}

.popup .wpcf7-spinner {
  margin: 0 !important;
}

.popup .popup-overlay {
  background-color: rgb(0 0 0 / 65%);
}

.select2-search.select2-search--dropdown {
  display: block !important;
}

.select2-container .select2-dropdown .select2-search input {
  background-color: #ccc;
}

.news-it .t-des {
  display: none;
}

main.page-home .hsf-form .wpcf7-spinner {
  margin: 0;
}

main.page-home .hdt-it .b-img img {
  object-fit: cover;
}

.test-panel-feedback-wrap:not(.test-panel-feedback-audio) {
  display: flex;
  /* gap: 10px; */
  width: 100%;
  height: 100%;
  /* justify-content: space-between; */
}

/* .test-panel-feedback-wrap:not(.test-panel-feedback-audio) .test-panel-feedback-left,
.test-panel-feedback-wrap:not(.test-panel-feedback-audio) .test-panel-feedback-right {
    overflow-y: auto;
    height: calc(100vh - 21rem);
    flex: 1;
 
} */

/* .test-panel-feedback-wrap:not(.test-panel-feedback-audio)
    .test-panel-feedback-left {
    flex: 2;
    background: #fff;
  }
  
  .test-panel-feedback-wrap:not(.test-panel-feedback-audio)
    .test-panel-feedback-right {
    flex: 1;
    background: #fff;
  } */

.test-panel-feedback-wrap:not(.test-panel-feedback-audio) .test-panel-feedback-resizer {
  cursor: ew-resize;
  width: 1rem;
  background-color: #ccc;
  flex-shrink: 0;
  align-self: stretch;
}

.test-panel-feedback-wrap.test-panel-feedback-audio {
  display: flex;
  gap: 1rem;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

@media screen and (max-width: 800px) {
  .test-panel-feedback-wrap:not(.test-panel-feedback-audio) {
    flex-direction: column;
  }

  .test-panel-feedback-wrap:not(.test-panel-feedback-audio) .test-panel-feedback-left,
  .test-panel-feedback-wrap:not(.test-panel-feedback-audio) .test-panel-feedback-right {
    overflow: unset;
    width: 100%;
    height: 100%;
    min-width: 100%;
  }
}

.test-panel-feedback-wrap.test-panel-feedback-audio {
  flex-direction: column;
}

.processRecord .record-control .testRecordStart {
  opacity: 0.65;
  pointer-events: none;
}

/* Đã di chuyển lên trên */

.takeItToReplacedJs.replaced-done .mona-replaced-content .me-question-heading .t-text {
  display: none;
}

/* Loại bỏ background và padding của số câu hỏi - chỉ để số in đậm */
.takeItToReplacedJs.replaced-done .mona-replaced-content .me-question-heading .t-num,
.me-question-heading.t-head-number .t-num {
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #000000 !important;
  border-radius: 0 !important;
  font-weight: bold !important;
}

/* Sửa layout để số câu hỏi và nội dung cùng dòng, cách nhau 1 space */
.takeItToReplacedJs.replaced-done .mona-replaced-content .me-question-in4r,
.me-question-in4r {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
}

.takeItToReplacedJs.replaced-done .mona-replaced-content .me-question-heading,
.me-question-heading.t-head-number {
  display: inline-block !important;
  margin-right: 1rem !important;
  /* 1 space giữa số và nội dung */
  margin-bottom: 0 !important;
  vertical-align: baseline !important;
}

.takeItToReplacedJs.replaced-done .mona-replaced-content .me-question-in4r-content,
.me-question-in4r-content {
  display: inline-block !important;
  flex: 1 !important;
  vertical-align: baseline !important;
}

/* Align đáp án ngang với số câu hỏi (span.t-num) - như Inspera demo */
/* Đáp án phải bắt đầu từ vị trí của số câu hỏi (theo đường đỏ) */
/* Tính toán: negative margin để đưa đáp án về vị trí của số câu hỏi */
/* LƯU Ý: Loại trừ các input fields (box blank) khỏi rule này */
.me-question-in4r-content .me-question-recheck,
.me-question-in4r-content .exams-main-recheck,
.me-question-in4r-content .me-recheck-block {
  margin-left: calc(-1 * (2.5rem + 1rem)) !important;
  /* Negative của (width số câu hỏi + margin-right) để align với số */
  margin-top: 0.8rem !important;
  /* Khoảng cách nhỏ từ câu hỏi xuống đáp án */
  padding-left: 0 !important;
}

/* Loại trừ các input fields (box blank) khỏi margin-left negative - giữ nguyên vị trí */
.me-question-in4r-content .me-question-input-wrapper,
.me-question-in4r-content .me-question-input,
.me-question-in4r-content .me-question-drog,
.me-question-in4r-content .me-question-drog.testDragBox,
.me-question-in4r-content .me-question-drog.testDragGroupBox {
  margin: 0 0.1rem !important;
  /* Restore margin để fix spacing không đều */
}

.takeItToReplacedJs.replaced-done .mona-replaced-content .me-question-wrap {
  margin-bottom: 0rem;
}

.takeItToReplacedJs.replaced-done .mona-replaced-content .meqb-tab {
  margin-bottom: 0rem;
}

.takeItToReplacedJs.replaced-done .mona-replaced-content .meqb-tab .meqb-tab-btn {
  font-size: 1.4rem;
}

.takeItToReplacedJs.replaced-done .mona-replaced-content .me-tab-question {
  margin-top: 0rem;
  background-color: #FFF;
}

.takeItToReplacedJs.replaced-done .mona-replaced-content .monaExplanationContent {
  position: absolute;
  right: 0;
  z-index: 10;
}

.takeItToReplacedJs.replaced-done .mona-replaced-content .me-question {
  display: inline-flex;
}

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaTrue select,
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .monaFalse select {
  appearance: none;
}

.replaced-visible {
  display: none;
}

.takeItToReplacedJs.replaced-done .testQuestion.testReplacedQuestion .replaced-visible {
  display: block;
}

.takeItToReplacedJs.replaced-done .testQuestion.testReplacedQuestion .replaced-unvisible {
  display: none;
}

.takeItToReplacedJs.replaced-done .testQuestion.testReplacedQuestion .me-question-explanation {
  flex-shrink: 0;
  display: flex;
  width: 2rem;
  place-content: center;
}

.takeItToReplacedJs.replaced-done .testQuestion.testReplacedQuestion .me-question-in4r-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.me-question-drag.testDragGroupItems {
  flex-direction: column;
  align-content: flex-start;
  width: max-content;
  margin: auto;
}

.me-question-drag-item.testDragGroupItem {
  text-align: left;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  font-weight: 900 !important;
  width: auto !important;
  /* Auto resize fit content khi chưa kéo vào ô đáp án */
  min-width: auto !important;
  max-width: 100%;
  /* Cho phép co lại để fit content nhưng không vượt quá 100% */
}

.me-question-drag-item.testDragGroupItem:hover {
  border-color: #000000;
  background-color: #f5f5f5;
}

.me-question-drag-item.testDragGroupItem .text,
.me-question-drag-item.testDragGroupItem * {
  color: #000000;
  font-weight: 900 !important;
}

.me-question-drag-item.testDragGroupItem.disabled {
  pointer-events: none;
  opacity: 0;
}

.exams-ques-item .b-ans {
  width: max-content;
  font-weight: 400 !important;
}

.box-ans.answer-incandcorrect {
  position: relative;
  width: 3.2rem;
  height: 2.8rem;
  flex-shrink: 0;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.box-ans.answer-incandcorrect::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #28a745 50%, #dc3545 50%);
}

.box-ans.answer-incandcorrect .correct,
.box-ans.answer-incandcorrect .incorrect {
  position: absolute;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
}

.box-ans.answer-incandcorrect .correct {
  left: 2px;
  top: -5px;
}

.box-ans.answer-incandcorrect .incorrect {
  right: 2px;
  bottom: -5px;
}

.exams-part-list:has(.exams-ques-item:only-child) {
  display: none;
}

.me-question-speakFormat .me-question-in4r-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Fix video và t-question-label căn giữa trong speaking test */
/* Toàn bộ container (số câu hỏi + nội dung) căn giữa */
.me-question-speakFormat .me-question-in4r,
.me-question.me-question-speakFormat .me-question-in4r {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  /* Baseline để số câu hỏi thẳng hàng với dòng đầu tiên của text */
  width: 100% !important;
  gap: 0.4rem !important;
  /* Số câu hỏi sát ngay text câu hỏi */
}

/* Số câu hỏi đứng trước tiêu đề text câu hỏi, thẳng hàng với dòng đầu tiên */
.me-question-speakFormat .me-question-heading,
.me-question.me-question-speakFormat .me-question-heading {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  flex-shrink: 0 !important;
  /* Không co lại */
  display: inline-flex !important;
  align-items: baseline !important;
  padding-top: 0 !important;
  vertical-align: baseline !important;
}

/* Ẩn số câu hỏi nếu không có text (chỉ có video) */
.me-question-speakFormat .me-question-in4r:not(:has(.t-question-label)) .me-question-heading,
.me-question.me-question-speakFormat .me-question-in4r:not(:has(.t-question-label)) .me-question-heading {
  display: none !important;
}

/* Đảm bảo t-num thẳng hàng với text */
.me-question-speakFormat .me-question-heading .t-num,
.me-question.me-question-speakFormat .me-question-heading .t-num {
  vertical-align: baseline !important;
  line-height: inherit !important;
}

/* Ẩn bookmark button trong speaking test */
.me-question-speakFormat .me-question-bookmark,
.me-question.me-question-speakFormat .me-question-bookmark {
  display: none !important;
}

/* Căn giữa nội dung câu hỏi (text + video) */
.me-question-speakFormat .me-question-in4r-content,
.me-question.me-question-speakFormat .me-question-in4r-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  /* Align top để text bắt đầu từ top */
  /* KHÔNG text-align: center để giữ nguyên format text từ backend */
  width: auto !important;
  flex: 0 0 auto !important;
}

.me-question-speakFormat .t-question,
.me-question.me-question-speakFormat .t-question {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  /* Container căn giữa, nhưng KHÔNG force text-align để giữ nguyên format text từ backend */
  width: 100%;
  max-width: 100%;
}

/* Text content giữ nguyên format như backend, container căn giữa nhưng text format giữ nguyên */
.me-question-speakFormat .t-question-label,
.me-question.me-question-speakFormat .t-question-label,
.me-question-speakFormat .t-question-label.mona-content,
.me-question.me-question-speakFormat .t-question-label.mona-content,
.me-question-speakFormat .t-question-label.mona-highlightable-content,
.me-question.me-question-speakFormat .t-question-label.mona-highlightable-content,
.me-question-speakFormat .t-question-description,
.me-question.me-question-speakFormat .t-question-description {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  vertical-align: baseline !important;
  /* KHÔNG force text-align để giữ nguyên format text từ backend */
  /* Text sẽ hiển thị theo format tự nhiên từ backend (có thể là justify, left, hay format khác) */
}

/* Chỉ căn giữa video container */
.me-question-speakFormat .t-question video,
.me-question.me-question-speakFormat .t-question video,
.me-question-speakFormat .speaking-intro-video,
.me-question.me-question-speakFormat .speaking-intro-video {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100%;
}

.exams-main-record .record-wrap {
  flex-direction: column;
  align-items: center;
}

.acc-table tbody tr td .t-status.is-eval {
  color: #2f4e32;
  background: #aef8cd;
  border-color: #28ff7e;
}

.vlg .mona-content.vlg-answer {
  white-space: pre-wrap;
}

.fb-vlg .vlg-score {
  padding: 2.4rem;
  margin-bottom: 2.4rem;
}

.fb-vlg .vlg-score .t-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fb-vlg .fb-part-name {
  min-width: 5rem;
  display: inline-block;
  text-align: center;
  background: #000;
  border-radius: 6px;
  color: #FFF;
  font-weight: bold;
  font-size: 12px;
  padding: 0.4rem 0.8rem;
}

.main-test-exam.sec-exp-history .exam-container {
  width: 100%;
}

.acc-ans .b-part .b-ans-it .b-gr .t-ans .t-txt {
  text-transform: uppercase;
}

.fb-vlg-question .b-head {
  background: #000;
}

.fb-vlg-question .txt {
  color: #FFF !important;
}

.fb-vlg-question .icon::before,
.fb-vlg-question .icon::after {
  background: #FFF !important;
}

.vlg-colapse .b-colapse-pannel .b-content {
  font-size: 14px !important;
  padding: 0 1.6rem;
}

.test-panel-feedback-flex-with-answer {
  display: flex;
  gap: 1rem;
}

.test-panel-feedback-flex-with-answer .test-panel-feedback-wrap-answer {
  background: #fff;
  padding: 1.6rem;
  border-radius: 6px;
  max-width: 30%;
}

.test-panel-feedback-flex-with-answer .test-panel-feedback-answer {
  height: calc(100vh - 24rem);
  overflow-y: auto;
}

.test-panel-feedback-flex-with-answer .test-panel-feedback-answer-title {
  font-weight: 700;
  --f-sz: clamp(1.7rem, calc(1.2984rem + 0.5738vw), 2.4rem);
  font-size: var(--f-sz);
  margin-bottom: 2.4rem;
}

@media screen and (max-width: 1200px) {
  .test-panel-feedback-right {
    height: calc(100vh - 16rem);
  }

  .test-panel-feedback-flex-with-answer {
    flex-direction: column;
  }

  .test-panel-feedback-flex-with-answer .test-panel-feedback-wrap-answer {
    max-width: 100%;
  }
}

@media screen and (min-width:1200px) {
  .test-panel-feedback-wrap.test-panel-feedback-audio .me-question-group-flxcnt {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
  }

  .test-panel-feedback-wrap.test-panel-feedback-audio .me-question-group-flxcnt>* {
    flex: 1
  }
}

.me-question-dragdropFormat .testDragText {
  min-height: 2rem;
  min-width: 5rem;
  display: block;
  text-align: center;
  line-height: 1.5;
}

/* Đảm bảo text trong dragdrop box hiển thị đúng */
.me-question-drog .testDragText {
  display: inline-block;
  vertical-align: middle;
}

.me-question-group-flxcnt {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

/* FIX: Strong alignment for default drag-drop layout (No-toggle) */
.me-question-group-feedback:not(.drag-horizontal):not(.drag-vertical) .me-question-group-flxcnt {
  gap: 15px !important;
  justify-content: flex-start !important;
  align-items: center !important;
  /* Centered vertical alignment */
  flex-wrap: wrap !important;
  /* Allow wrapping on mobile */
}

.me-question-group-feedback:not(.drag-horizontal):not(.drag-vertical) .me-question-drag.testDragGroupItems {
  display: flex !important;
  /* Ensure it is a flexbox */
  flex-direction: column !important;
  align-content: flex-start !important;
  width: max-content !important;
  margin: 0 !important;
  margin-right: auto !important;
  /* Explicitly requested */

  /* Reset others to be safe */
  align-self: flex-start !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.me-question-group-feedback:not(.drag-horizontal):not(.drag-vertical) .me-question-group-flxcnt>.me-question-group-flex {
  display: flex !important;
  /* Ensure parent works */
  flex-direction: column !important;
  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: fit-content !important;
  margin-left: 0 !important;
  align-items: flex-start !important;
}

.me-question-group-feedback:not(.drag-horizontal):not(.drag-vertical) .me-question-group-flxcnt>.me-question-group-content {
  flex: 0 1 auto !important;
  width: fit-content !important;
  max-width: 500px !important;
  margin-right: 0 !important;
}

/* Nút Phân tích bài nói - Phiên bản đơn giản */
.btn-speechsuper {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px auto;
  background: #000;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-width: 150px;
}

.btn-speechsuper:hover {
  background: #005a87;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 124, 186, 0.3);
}

.btn-speechsuper:active {
  transform: translateY(0);
}

.btn-speechsuper.loading {
  opacity: 0.6;
  cursor: not-allowed;
}

/* CHỈ ĐỔI MÀU CHỮ CHO ĐOẠN VĂN VÀ CÂU HỎI + SỬA OBSCURE BOXES */

/* White on Black - chỉ đổi màu chữ trắng */
.testQuestionExam.contrast-wb,
.testQuestionExam.contrast-wb * {
  border-color: #ffffff !important;
}

/* Theo inspector: set màu primaries khi body có white-on-black */
body.white-on-black .main-test-exam {
  --color-pri: #ffff55 !important;
}

/* Side panel headings và buttons theo inspector */
/* Đổi background sidebar contrast sang đen trong dark mode */
body.white-on-black .side-fixed.side-dark-mode,
body.white-on-black .side-fixed.side-dark-mode .side-fixed-wrap,
body.white-on-black .side-fixed.side-dark-mode .side-fixed-wrap .b-panel {
  background-color: #000000 !important;
  background: #000000 !important;
}

body.yellow-on-black .side-fixed.side-dark-mode,
body.yellow-on-black .side-fixed.side-dark-mode .side-fixed-wrap,
body.yellow-on-black .side-fixed.side-dark-mode .side-fixed-wrap .b-panel {
  background-color: #000000 !important;
  background: #000000 !important;
}

body.white-on-black .side-fixed.side-dark-mode .side-fixed-wrap .b-panel .b-head {
  color: #ffffff !important;
}

body.white-on-black .side-fixed-wrap .theme-btn,
body.white-on-black .side-fixed.side-dark-mode .side-fixed-wrap .font-btn {
  color: #ffffff !important;
}

body.white-on-black .side-fixed.side-dark-mode .side-fixed-wrap .theme-btn.active,
body.white-on-black .side-fixed.side-dark-mode .side-fixed-wrap .font-btn.active {
  background: #353535 !important;
}

/* Mobile Vocab Toggle trong b-panel */
.b-panel-vocab {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.b-panel-vocab .b-head {
  margin-bottom: 1.2rem;
}

.vocab-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.6rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-radius: 4px;
}

.vocab-mobile-toggle:hover {
  background-color: #f5f5f5;
}

.vocab-mobile-text {
  flex: 1;
  font-size: 1.6rem;
  color: #333;
  margin-right: 1.2rem;
}

/* Mobile Vocab Switch - Giống desktop */
.b-panel-vocab .vocab-toggle-switch {
  position: relative;
  width: 5rem;
  height: 3rem;
  background-color: #e0e0e0;
  border-radius: 1.5rem;
  margin-left: auto;
  cursor: pointer;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}

.b-panel-vocab .vocab-mobile-toggle.active .vocab-toggle-switch,
.b-panel-vocab.active .vocab-toggle-switch {
  background-color: #4CAF50;
}

.b-panel-vocab .vocab-switch-slider {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 2.4rem;
  height: 2.4rem;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.b-panel-vocab .vocab-mobile-toggle.active .vocab-switch-slider,
.b-panel-vocab.active .vocab-switch-slider {
  transform: translateX(2rem);
}

/* White on Black mode cho mobile vocab toggle */
body.white-on-black .vocab-mobile-toggle {
  color: #ffffff;
}

body.white-on-black .vocab-mobile-text {
  color: #ffffff !important;
}

body.white-on-black .vocab-mobile-toggle:hover {
  background-color: #1a1a1a;
}

body.yellow-on-black .vocab-mobile-toggle {
  color: #FFFF54;
}

body.yellow-on-black .vocab-mobile-text {
  color: #FFFF54 !important;
}

body.yellow-on-black .vocab-mobile-toggle:hover {
  background-color: #1a1a1a;
}

/* Fix nút thoát và nút điều hướng trong White on Black mode */
body.white-on-black .side-close,
body.white-on-black .side-close .close,
body.white-on-black .side-close .icon,
body.white-on-black .closeNoteMark,
body.white-on-black .closeNoteMark .close,
body.white-on-black .closeNoteMark .icon,
/* Đã xóa - nút sideCloseQues phải có nền trắng giống closeDarkMode */
/* Override để đảm bảo nền trắng trong white-on-black */
body.white-on-black .side-fixed.sidePanelQues.active .sideCloseQues,
body.white-on-black .side-fixed.sidePanelQues.open .sideCloseQues,
body.white-on-black .side-fixed.active .sideCloseQues,
body.white-on-black .exams-side.side-fixed.active .sideCloseQues {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
}

/* Nút close của menu contrast trong white on black - nền trắng, không viền đen */
body.white-on-black .side-fixed.side-dark-mode .closeDarkMode,
body.white-on-black .side-fixed.panelDarkMode .closeDarkMode,
body.white-on-black .closeDarkMode,
body.white-on-black .closeDarkMode .close,
body.white-on-black .closeDarkMode .icon {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  border: 1px solid #ffffff !important;
  /* Viền trắng hoặc không viền */
}

/* Đảm bảo nút close luôn hiển thị trong contrast mode khi sidebar active */
body.white-on-black .catexams-side.side-fixed.active .side-close,
body.white-on-black .catexams-side.side-fixed.active .catexams-side-head .side-close,
body.yellow-on-black .catexams-side.side-fixed.active .side-close,
body.yellow-on-black .catexams-side.side-fixed.active .catexams-side-head .side-close {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.white-on-black .catexams-side.side-fixed.active .side-close i,
body.white-on-black .catexams-side.side-fixed.active .catexams-side-head .side-close i,
body.yellow-on-black .catexams-side.side-fixed.active .side-close i,
body.yellow-on-black .catexams-side.side-fixed.active .catexams-side-head .side-close i {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
}

body.yellow-on-black .catexams-side.side-fixed.active .side-close,
body.yellow-on-black .catexams-side.side-fixed.active .catexams-side-head .side-close {
  background-color: #FFFF54 !important;
  color: #000000 !important;
  border: 1px solid #FFFF54 !important;
}

body.yellow-on-black .catexams-side.side-fixed.active .side-close i,
body.yellow-on-black .catexams-side.side-fixed.active .catexams-side-head .side-close i {
  color: #000000 !important;
}

/* Fix nút Previous/Next trong White on Black mode */
body.white-on-black .testPrev,
body.white-on-black .testNext,
body.white-on-black .testPrev .icon,
body.white-on-black .testNext .icon,
body.white-on-black .testPrev i,
body.white-on-black .testNext i {
  background-color: #616161 !important;
  background: #616161 !important;
  color: #ffffff !important;
  border: 1px solid #616161 !important;
}

/* Scrollbar thumb màu vàng trong WB như inspector */
body.white-on-black ::-webkit-scrollbar-thumb {
  background: #9d9d99 !important;
}

/* WB: số trong tiêu đề câu hỏi - không có background, chỉ chữ trắng in đậm */
body.white-on-black .takeItToReplacedJs.replaced-done .mona-replaced-content .me-question-heading .t-num,
body.white-on-black .me-question-heading.t-head-number .t-num {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: bold !important;
}

/* YB: số trong tiêu đề câu hỏi - không có background, chỉ chữ vàng in đậm */
body.yellow-on-black .takeItToReplacedJs.replaced-done .mona-replaced-content .me-question-heading .t-num,
body.yellow-on-black .me-question-heading.t-head-number .t-num {
  background: transparent !important;
  background-color: transparent !important;
  color: #FFFF54 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: bold !important;
}

/* Chỉ các box drag-drop và select cần nền xám, chữ trắng (giữ nguyên cho select và recheck) */
.testQuestionExam.contrast-wb select,
.testQuestionExam.contrast-wb .me-words-select,
.testQuestionExam.contrast-wb .me-recheck-item {
  background-color: #707070 !important;
  color: #ffffff !important;
}

/* me-question-drag-item (list of headings) trong White on Black - giống Inspera: nền đen, border trắng, text trắng */
.testQuestionExam.contrast-wb .me-question-drag-item,
.testQuestionExam.contrast-wb .testDragItems {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  /* Viền trắng như Inspera */
  border-radius: 2px !important;
}

.testQuestionExam.contrast-wb .me-question-drag-item .text,
.testQuestionExam.contrast-wb .testDragItems .text {
  color: #ffffff !important;
}

/* Input fields (fill-in-the-blank) trong White on Black mode - giống Inspera: nền đen, border solid trắng, số trắng */
.testQuestionExam.contrast-wb .me-question-input {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  /* Viền solid trắng như Inspera */
  border-radius: 2px !important;
  /* Bo góc nhẹ */
}

/* Số trong input boxes trong White on Black - màu trắng */
.testQuestionExam.contrast-wb .me-question-input-wrapper .me-question-blank-number,
.testQuestionExam.contrast-wb .me-question-drog.testDragBox .me-question-blank-number,
.testQuestionExam.contrast-wb .me-question-drog.testDragGroupBox .me-question-blank-number {
  color: #ffffff !important;
}

/* Dragdrop boxes trong White on Black mode - giống Inspera: nền đen, border trắng, text trắng */
.testQuestionExam.contrast-wb .me-question-drog,
.testQuestionExam.contrast-wb .me-question-drog.testDragBox,
.testQuestionExam.contrast-wb .me-question-drog.testDragGroupBox {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  /* Viền trắng như Inspera */
  border-radius: 2px !important;
  /* Bo góc nhẹ */
}

/* Yellow on Black - chỉ đổi màu chữ vàng */
.testQuestionExam.contrast-yb,
.testQuestionExam.contrast-yb * {
  color: #FFFF54 !important;
  border-color: #FFFF54 !important;
}

/* Chỉ các box drag-drop và select cần nền xám, chữ vàng (giữ nguyên cho select và recheck) */
html .testQuestionExam.contrast-yb select,
html .testQuestionExam.contrast-yb .me-words-select,
html .testQuestionExam.contrast-yb .me-recheck-item {
  background-color: #4a4a1d !important;
  background: #4a4a1d !important;
  color: #FFFF54 !important;
}

/* me-question-drag-item (list of headings) trong Yellow on Black - giống Inspera: nền đen, border vàng, text vàng */
html .testQuestionExam.contrast-yb .me-question-drag-item,
html .testQuestionExam.contrast-yb .testDragItems {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #FFFF54 !important;
  border: 1px solid #FFFF54 !important;
  /* Viền vàng như Inspera */
  border-radius: 2px !important;
}

html .testQuestionExam.contrast-yb .me-question-drag-item .text,
html .testQuestionExam.contrast-yb .testDragItems .text {
  color: #FFFF54 !important;
}

/* Input fields (fill-in-the-blank) trong Yellow on Black mode - giống Inspera: nền đen, border solid vàng, số vàng */
html .testQuestionExam.contrast-yb .me-question-input {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #FFFF54 !important;
  border: 1px solid #FFFF54 !important;
  /* Viền solid vàng như Inspera */
  border-radius: 2px !important;
  /* Bo góc nhẹ */
}

/* Số trong input boxes trong Yellow on Black - màu vàng */
html .testQuestionExam.contrast-yb .me-question-input-wrapper .me-question-blank-number,
html .testQuestionExam.contrast-yb .me-question-drog.testDragBox .me-question-blank-number,
html .testQuestionExam.contrast-yb .me-question-drog.testDragGroupBox .me-question-blank-number {
  color: #FFFF54 !important;
}

/* Dragdrop boxes trong Yellow on Black mode - giống Inspera: nền đen, border vàng, text vàng */
html .testQuestionExam.contrast-yb .me-question-drog,
html .testQuestionExam.contrast-yb .me-question-drog.testDragBox,
html .testQuestionExam.contrast-yb .me-question-drog.testDragGroupBox {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #FFFF54 !important;
  border: 1px solid #FFFF54 !important;
  /* Viền vàng như Inspera */
  border-radius: 2px !important;
  /* Bo góc nhẹ */
}

/* Các ô số (01, 02, 03...) trong Yellow on Black - CHỈ SỬA Ô SỐ NHỎ */
.testQuestionExam.contrast-yb *[style*="#f9841a"]:not(.me-question-heading):not(.question-title),
.testQuestionExam.contrast-yb .t-num:not(.me-question-heading .t-num),
.testQuestionExam.contrast-yb span[style*="#f9841a"],
.testQuestionExam.contrast-yb div[style*="#f9841a"] {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
  border: 1px solid #000000 !important;
}

/* FORCE WHITE BACKGROUND cho tất cả ô số - độ ưu tiên cao nhất */
html .testQuestionExam.contrast-yb *[style*="#f9841a"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
}

/* CHỈ SỬA CÁC NÚT CHẾ ĐỘ HIGHLIGHT VÀ CHẾ ĐỘ TỪ VỰNG - CHỈ WHITE ON BLACK */
html .testQuestionExam.contrast-wb .head-control-item.tabBtn {
  background-color: #616161 !important;
  background: #616161 !important;
  color: #ffffff !important;
  border: 1px solid #616161 !important;
}

/* Fix alignment cho các nút highlight và vocabulary - chỉ căn chỉnh đơn giản */
.head-control-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

.head-control-item.tabBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 !important;
  text-align: center !important;
}

/* Set màu #44474d cho hai nút highlight và vocabulary chỉ trong yellow on black */
.testQuestionExam.contrast-yb .head-control-item.tabBtn {
  background-color: #44474d !important;
  background: #44474d !important;
  color: #ffffff !important;
  border: 1px solid #44474d !important;
}

/* 1. Hộp chứa span.me-question-heading.t-head-number: trả về mặc định (transparent) trong yellow on black */
.testQuestionExam.contrast-yb .me-question-heading.t-head-number {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 2. CHỈ span.t-num độc lập (ô số nhỏ) trong yellow on black: nền VÀNG (#FFFF54) + chữ ĐEN */
html .testQuestionExam.contrast-yb span.t-num:not(.me-question-heading span.t-num),
html .testQuestionExam.contrast-yb .t-num:not(.me-question-heading .t-num) {
  background-color: #FFFF54 !important;
  background: #FFFF54 !important;
  color: #000000 !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  border: 1px solid #FFFF54 !important;
}

/* 3. Override mọi màu chữ bên trong ô số để đảm bảo là TRẮNG */
html .testQuestionExam.contrast-yb span.t-num:not(.me-question-heading span.t-num) *,
html .testQuestionExam.contrast-yb .t-num:not(.me-question-heading .t-num) * {
  color: #ffffff !important;
}

/* 2. span.me-question-drog.testDragGroupBox - giống Inspera: dashed border khi trống, solid khi có nội dung */
span.me-question-drog.testDragGroupBox {
  border: 1px dashed #666666 !important;
  /* Viền xám đậm dashed */
  background: #ffffff !important;
  color: #000000 !important;
  border-radius: 2px !important;
  /* Bo góc nhẹ */
}

span.me-question-drog.testDragGroupBox.active {
  border: 1px solid #666666 !important;
  /* Viền xám đậm solid khi active */
  background: #ffffff !important;
  border-radius: 2px !important;
  /* Bo góc nhẹ */
}

/* 2. span.me-question-drog.testDragGroupBox - WB: nền đen, border trắng solid, YB: nền đen, border vàng solid */
.testQuestionExam.contrast-wb span.me-question-drog.testDragGroupBox {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  /* Viền trắng solid như Inspera */
  border-radius: 2px !important;
  /* Bo góc nhẹ */
}

.testQuestionExam.contrast-wb span.me-question-drog.testDragGroupBox.active {
  border: 1px solid #ffffff !important;
  /* Viền trắng solid khi active */
}

.testQuestionExam.contrast-yb span.me-question-drog.testDragGroupBox {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #FFFF54 !important;
  border: 1px solid #FFFF54 !important;
  /* Viền vàng solid như Inspera */
  border-radius: 2px !important;
  /* Bo góc nhẹ */
}

.testQuestionExam.contrast-yb span.me-question-drog.testDragGroupBox.active {
  border: 1px solid #FFFF54 !important;
  /* Viền vàng solid khi active */
}

/* Target các class có background màu cam - ĐỔI THÀNH VÀNG */
.testQuestionExam.contrast-yb .me-mask-box::before,
.testQuestionExam.contrast-yb .me-recheck-radio::before,
.testQuestionExam.contrast-yb .me-recheck-check::before {
  background-color: #FFFF54 !important;
}

/* Đổi màu cam thành vàng trong yellow-on-black */
.testQuestionExam.contrast-yb *[style*="#f9841a"],
.testQuestionExam.contrast-yb *[style*="#FF6428"],
.testQuestionExam.contrast-yb *[style*="#ff6428"] {
  background-color: #FFFF54 !important;
  background: #FFFF54 !important;
  color: #000000 !important;
}

/* Đảm bảo text trong dragdrop boxes có màu đúng trong dark mode */
.testQuestionExam.contrast-wb .me-question-drog .testDragText,
.testQuestionExam.contrast-wb .me-question-drog .text {
  color: #ffffff !important;
  /* Text trắng trong white on black */
}

.testQuestionExam.contrast-yb .me-question-drog .testDragText,
.testQuestionExam.contrast-yb .me-question-drog .text {
  color: #FFFF54 !important;
  /* Text vàng trong yellow on black */
}

.testQuestionExam.contrast-yb .me-mask-item .me-mask-input:checked~.me-mask-box,
.testQuestionExam.contrast-yb .me-recheck-item .me-recheck-input:checked~.me-recheck-radio,
.testQuestionExam.contrast-yb .me-recheck-item .me-recheck-input:checked~.me-recheck-check {
  border-color: #FFFF54 !important;
}

/* 2b. Force MÀU CAM cho toàn bộ chữ bên trong ô số nhỏ (ưu tiên cao) */
html body .testQuestionExam.contrast-yb span.t-num:not(.me-question-heading span.t-num),
html body .testQuestionExam.contrast-yb .t-num:not(.me-question-heading .t-num) {
  color: #f9841a !important;
}

html body .testQuestionExam.contrast-yb span.t-num:not(.me-question-heading span.t-num) *,
html body .testQuestionExam.contrast-yb .t-num:not(.me-question-heading .t-num) * {
  color: #000000 !important;
}

/* 2c. Yellow on Black: Ép toàn bộ chữ trong t-text và t-num thành VÀNG (#FFFF54) */
html body .testQuestionExam.contrast-yb span.t-text,
html body .testQuestionExam.contrast-yb .t-text,
html body .testQuestionExam.contrast-yb span.t-num,
html body .testQuestionExam.contrast-yb .t-num {
  color: #FFFF54 !important;
}

html body .testQuestionExam.contrast-yb span.t-text *,
html body .testQuestionExam.contrast-yb .t-text *,
html body .testQuestionExam.contrast-yb span.t-num *,
html body .testQuestionExam.contrast-yb .t-num * {
  color: #FFFF54 !important;
}

/* 2d. Nền ô số nhỏ là VÀNG #FFFF54 để tương phản với chữ CAM */
html .testQuestionExam.contrast-yb span.t-num:not(.me-question-heading span.t-num),
html .testQuestionExam.contrast-yb .t-num:not(.me-question-heading .t-num) {
  background-color: #FFFF54 !important;
  background: #FFFF54 !important;
  border: 1px solid #00000033 !important;
}

/* Fix me-question-part-label border in contrast modes */
html.contrast-wb .testQuestionExam .me-question-part-label {
  border-bottom-color: rgba(255, 255, 255, 0.3) !important;
}

html.contrast-yb .testQuestionExam .me-question-part-label {
  border-bottom-color: rgba(255, 255, 84, 0.3) !important;
}

/* Black on White - keep default subtle border và background màu #f1f2ec */
.testQuestionExam .me-question-part-label {
  border-bottom-color: rgba(0, 0, 0, 0.05) !important;
  background-color: #f1f2ec !important;
}

/* Audio player contrast fixes */
/* Black on White - keep original red color (no override) */

/* White on Black mode - white audio player for visibility */
.testQuestionExam.contrast-wb .testing-audio-player {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}

.testQuestionExam.contrast-wb .testing-audio-player i {
  color: #000000 !important;
  opacity: 1 !important;
  filter: none !important;
  display: inline-block;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Yellow on Black mode - yellow audio player for visibility */
.testQuestionExam.contrast-yb .testing-audio-player {
  background-color: #FFFF54 !important;
  color: #000000 !important;
  border: 1px solid #FFFF54 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
}

.testQuestionExam.contrast-yb .testing-audio-player i {
  color: #000000 !important;
  opacity: 1 !important;
  filter: none !important;
  display: inline-block;
  font-size: 16px !important;
  line-height: 1 !important;
}

/* Audio progress and time visibility in dark modes */
/* White on Black mode */
.testQuestionExam.contrast-wb .testing-audio-time {
  color: #ffffff !important;
}

.testQuestionExam.contrast-wb .testing-audio-progress {
  background-color: rgba(255, 255, 255, 0.2) !important;
  opacity: 1 !important;
  filter: none !important;
}

.testQuestionExam.contrast-wb .testing-audio-progress .line {
  background-color: #ffffff !important;
}

/* Yellow on Black mode */
.testQuestionExam.contrast-yb .testing-audio-time {
  color: #FFFF54 !important;
}

.testQuestionExam.contrast-yb .testing-audio-progress {
  background-color: rgba(255, 255, 84, 0.2) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Đảm bảo cả biến thể class testAudioBtn đều rõ ràng trong dark modes */
.testQuestionExam.contrast-wb .testing-audio,
.testQuestionExam.contrast-yb .testing-audio,
.testQuestionExam.contrast-wb .testAudioBtn,
.testQuestionExam.contrast-yb .testAudioBtn {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Icon SVG nếu có */
.testQuestionExam.contrast-wb .testing-audio-player svg,
.testQuestionExam.contrast-wb .testing-audio-player svg path,
.testQuestionExam.contrast-yb .testing-audio-player svg,
.testQuestionExam.contrast-yb .testing-audio-player svg path {
  fill: #000000 !important;
  stroke: #000000 !important;
  opacity: 1 !important;
}

/* Đảm bảo icon FontAwesome luôn hiển thị rõ */
.testQuestionExam.contrast-wb .testing-audio-player .fa-solid,
.testQuestionExam.contrast-yb .testing-audio-player .fa-solid {
  color: #000000 !important;
}

.testQuestionExam.contrast-yb .testing-audio-progress .line {
  background-color: #FFFF54 !important;
}

/* Audio Button Animation Fix */
/* Mặc định hiển thị PLAY, ẩn PAUSE */
.testAudioBtn .fa-play {
  display: inline-block;
}

.testAudioBtn .fa-pause {
  display: none;
}

/* Trạng thái đang phát: hiển thị PAUSE, ẩn PLAY */
.testAudioBtn.is-playing .fa-play {
  display: none;
}

.testAudioBtn.is-playing .fa-pause {
  display: inline-block;
}

/* Đảm bảo ở dark modes không bị override bởi icon-level rules */
.testQuestionExam.contrast-wb .testing-audio-player .fa-play,
.testQuestionExam.contrast-yb .testing-audio-player .fa-play,
.testQuestionExam.contrast-wb .testing-audio-player .fa-pause,
.testQuestionExam.contrast-yb .testing-audio-player .fa-pause {
  display: inline-block;
}

.testQuestionExam.contrast-wb .testAudioBtn:not(.is-playing) .fa-pause,
.testQuestionExam.contrast-yb .testAudioBtn:not(.is-playing) .fa-pause {
  display: none !important;
}

.testQuestionExam.contrast-wb .testAudioBtn.is-playing .fa-play,
.testQuestionExam.contrast-yb .testAudioBtn.is-playing .fa-play {
  display: none !important;
}

/* Màu chữ cho nhãn phần câu hỏi trong contrast modes */
.testQuestionExam.contrast-wb .me-question-part-label {
  color: #ffffff !important;
}

.testQuestionExam.contrast-yb .me-question-part-label {
  color: #FFFF54 !important;
}

/* Fix side note panel trong contrast modes - đen thuần */
body.white-on-black .side-fixed.side-note-mark {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #000000 !important;
}

body.white-on-black .side-fixed.side-note-mark .side-fixed-wrap,
body.white-on-black .side-fixed.side-note-mark .b-panel {
  background-color: #000000 !important;
  background: #000000 !important;
}

body.white-on-black .side-fixed.side-note-mark .b-head {
  color: #ffffff !important;
}

body.white-on-black .side-fixed.side-note-mark .side-close,
body.white-on-black .side-fixed.side-note-mark .side-close .close,
body.white-on-black .side-fixed.side-note-mark .side-close .icon {
  background-color: #616161 !important;
  background: #616161 !important;
  color: #ffffff !important;
  border: 1px solid #616161 !important;
}

body.yellow-on-black .side-fixed.side-note-mark {
  background-color: #000000 !important;
  background: #000000 !important;
  border: 1px solid #000000 !important;
}

body.yellow-on-black .side-fixed.side-note-mark .side-fixed-wrap,
body.yellow-on-black .side-fixed.side-note-mark .b-panel {
  background-color: #000000 !important;
  background: #000000 !important;
}

body.yellow-on-black .side-fixed.side-note-mark .b-head {
  color: #FFFF54 !important;
}

body.yellow-on-black .side-fixed.side-note-mark .side-close,
body.yellow-on-black .side-fixed.side-note-mark .side-close .close,
body.yellow-on-black .side-fixed.side-note-mark .side-close .icon {
  background-color: #FFFF54 !important;
  background: #FFFF54 !important;
  color: #000000 !important;
  border: 1px solid #FFFF54 !important;
}

/* Fix nút close trong Yellow on Black mode */
body.yellow-on-black .side-close,
body.yellow-on-black .side-close .close,
body.yellow-on-black .side-close .icon,
/* Đảm bảo nút close của menu contrast hiển thị trong contrast mode */
body.yellow-on-black .side-fixed.side-dark-mode .closeDarkMode,
body.yellow-on-black .side-fixed.panelDarkMode .closeDarkMode,
body.yellow-on-black .closeDarkMode,
body.yellow-on-black .closeDarkMode .close,
body.yellow-on-black .closeDarkMode .icon,
body.yellow-on-black .closeNoteMark,
body.yellow-on-black .closeNoteMark .close,
body.yellow-on-black .closeNoteMark .icon,
/* Đã xóa - nút sideCloseQues phải có nền trắng giống closeDarkMode */
/* Override để đảm bảo nền trắng trong yellow-on-black */
body.yellow-on-black .side-fixed.sidePanelQues.active .sideCloseQues,
body.yellow-on-black .side-fixed.sidePanelQues.open .sideCloseQues,
body.yellow-on-black .side-fixed.active .sideCloseQues,
body.yellow-on-black .exams-side.side-fixed.active .sideCloseQues {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ffffff !important;
}

/* Box Part 1 - CHỈ WHITE ON BLACK */
.testQuestionExam.contrast-wb .exam-quick-part {
  background-color: #616161 !important;
  background: #616161 !important;
  color: #ffffff !important;
  border: 1px solid #616161 !important;
}

/* WB: force generic buttons background to #616161 for visibility - CHỈ TRONG EXAM CONTENT */
html .testQuestionExam.contrast-wb .btn {
  background-color: #616161 !important;
  background: #616161 !important;
  color: #ffffff !important;
}

/* Icon inside drag group info button */
html .testQuestionExam.contrast-wb .me-question-drog i {
  background-color: #ffffff !important;
  color: #000000 !important;
}

html .testQuestionExam.contrast-yb .me-question-drog i {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* REMOVED: CSS này đang override và set nền trắng, đã fix ở trên với nền đen */

/* REMOVED: CSS này đang override và set nền trắng, đã fix ở trên với nền đen */

/* Exam Filter Sidebar Styles - Redesigned */
.exam-with-sidebar {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.exam-sidebar {
  width: 100%;
  max-width: 32rem;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 1.2rem;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 2rem;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
}

/* Đảm bảo sidebar active có z-index cao để luôn nằm trên các icon trong đề thi */
.exam-sidebar.sidebar-active {
  z-index: 10000 !important;
  overflow: visible !important;
  /* QUAN TRỌNG: Để nút floating không bị che */
}

.exam-sidebar.sidebar-active .catexams-side.side-fixed {
  z-index: 10000 !important;
}

/* Đảm bảo các icon trong đề thi không nổi lên trên sidebar - giới hạn z-index */
.exam-list .exq-it,
.exam-list .exq-it .icon,
.exam-list .exq-it .par-gr,
.exam-list .exq-it .par-gr .icon,
.exam-list .exq-it .b-inner,
.exam-list .exq-it .b-head,
.exam-list .exq-it .b-bot {
  position: relative !important;
  z-index: 1 !important;
  /* Giới hạn z-index thấp để không nổi lên trên sidebar */
}

/* FORCE: Đảm bảo exam-sidebar luôn có styling ở desktop - override mọi rule khác - TRIỆT ĐỂ */
@media screen and (min-width: 1025px) {

  html body .exam-wrap.exam-with-sidebar .exam-sidebar,
  body .exam-wrap.exam-with-sidebar .exam-sidebar,
  .exam-wrap.exam-with-sidebar .exam-sidebar,
  html body .exam-sidebar,
  body .exam-sidebar,
  .exam-sidebar {
    width: 100% !important;
    max-width: 32rem !important;
    min-width: auto !important;
    display: flex !important;
    position: sticky !important;
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border-radius: 1.2rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    top: 2rem !important;
    align-self: flex-start !important;
  }

  /* Đảm bảo sidebar content luôn hiển thị trên desktop */
  html body .exam-wrap.exam-with-sidebar .exam-sidebar .catexams-side.side-fixed,
  body .exam-wrap.exam-with-sidebar .exam-sidebar .catexams-side.side-fixed,
  .exam-wrap.exam-with-sidebar .exam-sidebar .catexams-side.side-fixed,
  html body .exam-sidebar .catexams-side.side-fixed,
  body .exam-sidebar .catexams-side.side-fixed,
  .exam-sidebar .catexams-side.side-fixed {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: auto !important;
  }
}

/* Đảm bảo exam-sidebar luôn có viền và box-shadow ở desktop - FORCE với specificity cao */
@media screen and (min-width: 1025px) {

  body .exam-wrap.exam-with-sidebar .exam-sidebar,
  .exam-wrap.exam-with-sidebar .exam-sidebar,
  .exam-sidebar:not([style*="width: 0"]) {
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border-radius: 1.2rem !important;
    background: #ffffff !important;
    width: 100% !important;
    max-width: 32rem !important;
    display: flex !important;
    position: sticky !important;
  }
}

.exam-content {
  flex: 1;
  min-width: 0;
}

.exam-filter {
  display: flex;
  flex-direction: column;
}

/* Filter Header */
.filter-header {
  padding: 2rem 2rem 1.5rem;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.filter-header-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

/* Filter Search */
.filter-search {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  box-sizing: border-box;
  width: 100%;
}

.filter-search-wrapper {
  display: flex;
  gap: 0.8rem;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.filter-search-input {
  flex: 1;
  min-width: 0;
  padding: 1.2rem 1.4rem;
  border: 2px solid #e0e0e0;
  border-radius: 0.8rem;
  font-size: 1.4rem;
  outline: none;
  transition: all 0.3s;
  background: #fff;
  color: #333;
  min-height: 4.8rem;
  box-sizing: border-box;
}

.filter-search-input:focus {
  border-color: #8701ca;
  box-shadow: 0 0 0 3px rgba(135, 1, 202, 0.1);
}

.filter-search-input::placeholder {
  color: #999;
}

.filter-search-btn {
  width: 4.8rem;
  height: 4.8rem;
  min-width: 4.8rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e0e0e0;
  border-radius: 0.8rem;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  color: #666;
  font-size: 1.6rem;
  box-sizing: border-box;
}

.filter-search-btn:hover {
  background: #8701ca;
  border-color: #8701ca;
  color: #fff;
  transform: scale(1.05);
}

.filter-search-btn:active {
  transform: scale(0.95);
}

.filter-refresh-btn {
  width: 4.8rem;
  height: 4.8rem;
  min-width: 4.8rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e0e0e0;
  border-radius: 0.8rem;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
  color: #666;
  font-size: 1.6rem;
  box-sizing: border-box;
}

.filter-refresh-btn:hover {
  background: #f5f5f5;
  border-color: #8701ca;
  color: #8701ca;
  transform: rotate(180deg) scale(1.05);
}

.filter-refresh-btn:active {
  transform: rotate(180deg) scale(0.95);
}

/* Filter Groups */
.filter-group {
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.filter-group:last-child {
  border-bottom: none;
}

.filter-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1.6rem 2rem;
  font-weight: 600;
  font-size: 1.5rem;
  color: #8701ca;
  user-select: none;
  transition: all 0.3s;
  background: #fff;
  border: none;
  width: 100%;
  text-align: left;
}

.filter-title:hover {
  background: #fafafa;
}

.filter-title i {
  transition: transform 0.3s ease;
  font-size: 1.4rem;
  color: #8701ca;
  flex-shrink: 0;
  margin-left: 1rem;
}

.filter-title[data-toggle="filter"] i.fa-chevron-up {
  transform: rotate(180deg);
}

.filter-content {
  display: none;
  padding: 0 2rem 1.8rem;
  flex-direction: column;
  gap: 0.6rem;
  overflow: hidden;
}

.filter-content.active {
  display: flex;
  padding: 0 2rem 1.8rem;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  cursor: pointer;
  padding: 0.8rem 0;
  font-size: 1.4rem;
  color: #333;
  transition: color 0.2s;
  position: relative;
  user-select: none;
  line-height: 1.5;
}

.filter-checkbox:hover {
  color: #333;
}

/* Đảm bảo checkbox input vẫn có thể click được dù bị ẩn */
.filter-checkbox input[type="checkbox"],
.filter-checkbox input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 2.2rem;
  width: 2.2rem;
  z-index: 1;
}


/* Custom checkbox styling - Design như hình thứ 2 */
.checkbox-custom {
  position: relative;
  display: inline-block;
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid #ddd;
  border-radius: 0.8rem;
  background: #fff;
  transition: all 0.3s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.filter-checkbox:hover .checkbox-custom {
  border-color: #4A90E2;
  background: #f8f9fa;
}

.filter-checkbox input[type="checkbox"]:checked~.checkbox-custom,
.filter-checkbox input[type="radio"]:checked~.checkbox-custom {
  background: #4A90E2;
  border-color: #4A90E2;
}

.filter-checkbox input[type="checkbox"]:checked~.checkbox-custom::after,
.filter-checkbox input[type="radio"]:checked~.checkbox-custom::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 0.6rem;
  height: 1.2rem;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  display: block;
}

.filter-checkbox input[type="checkbox"]:focus~.checkbox-custom,
.filter-checkbox input[type="radio"]:focus~.checkbox-custom {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
}

.checkbox-label {
  flex: 1;
  line-height: 1.5;
  cursor: pointer;
}

.filter-term-item {
  margin-bottom: 0.8rem;
}

.filter-term-item:last-child {
  margin-bottom: 0;
}

.filter-term-children {
  margin-left: 2.4rem;
  margin-top: 0.6rem;
  padding-left: 1.2rem;
  border-left: 2px solid #f0f0f0;
}

.filter-term-sub-children {
  margin-left: 2.4rem;
  margin-top: 0.6rem;
  padding-left: 1.2rem;
  border-left: 2px solid #e8e8e8;
}

.filter-checkbox-child {
  font-size: 1.3rem;
  color: #666;
}

.filter-checkbox-sub-child {
  font-size: 1.2rem;
  color: #777;
}

.filter-empty {
  padding: 2rem 0;
  color: #999;
  font-style: italic;
  text-align: center;
  font-size: 1.3rem;
}

/* Sidebar không có scrollbar - hiển thị tất cả nội dung */

.monaExamFilterResults.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.monaExamFilterResults.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem;
  height: 4rem;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #8701ca;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Sidebar Floating và Mobile Responsive */
.side-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.side-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

/* Ẩn overlay sideOverlayQues - không cần overlay che content */
.side-overlay.sideOverlayQues {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ẩn head-control-test (highlight/vocabulary menu) mặc định - chỉ hiện khi bật từ options menu */
/* Đảm bảo không ảnh hưởng đến translation-controller và tabPanel */
.head-control-test {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.head-control-test.vocab-mode-enabled {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Đảm bảo translation-controller và tabPanel vẫn hoạt động bình thường khi tắt vocab mode */
.translation-controller {
  display: block !important;
}

/* TabPanel: ẩn mặc định, chỉ hiện khi có class 'open' */
.translation-controller .tabPanel {
  display: none !important;
}

.translation-controller .tabPanel.open {
  display: block !important;
}

.side-overlay.sideOverlayQues.active {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.catexams-side.side-fixed {
  position: relative;
  width: 100%;
  height: auto;
  background: transparent;
  /* Trong suốt, dùng background của exam-sidebar */
  border-radius: 0;
  /* Không có border-radius riêng, dùng của exam-sidebar */
  box-shadow: none;
  /* Không có box-shadow riêng, dùng của exam-sidebar */
  transition: transform 0.3s ease;
}

.catexams-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2rem;
  border-bottom: 1px solid #e8e8e8;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
  position: sticky !important;
  /* Sticky để luôn hiển thị khi scroll */
  top: 0 !important;
  overflow: visible !important;
  /* Đảm bảo nút close không bị cắt */
  z-index: 99998 !important;
  /* Z-index cao để luôn nằm trên menu */
}

.catexams-side-head .tt {
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.side-close,
.side-open {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 1.4rem;
  color: #666;
  pointer-events: auto;
  z-index: 10;
  flex-shrink: 0;
}

.side-close:hover,
.side-open:hover {
  background: #f0f0f0;
  color: #333;
  border-color: #d0d0d0;
}

/* KHÔNG ẩn global - chỉ ẩn nút close của filter sidebar (catexams-side) */
/* Các nút close khác (closeDarkMode, closeNoteMark, sideCloseQues) hoạt động bình thường */

/* Đảm bảo nút close của menu contrast LUÔN hiển thị khi menu mở */
.side-fixed.side-dark-mode.active .closeDarkMode,
.side-fixed.panelDarkMode.active .closeDarkMode,
.side-fixed.side-dark-mode .closeDarkMode,
.side-fixed.panelDarkMode .closeDarkMode {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: 1.2rem !important;
  right: 1.2rem !important;
  z-index: 10003 !important;
  width: 3.6rem !important;
  height: 3.6rem !important;
  min-width: 3.6rem !important;
  min-height: 3.6rem !important;
  border-radius: 0 !important;
  /* Vuông như bản gốc */
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #000 !important;
  /* Viền đen giống closeNoteMark */
  box-shadow: none !important;
}

/* Override cho white-on-black: nền xám, viền xám giống closeNoteMark */
body.white-on-black .side-fixed.side-dark-mode.active .closeDarkMode,
body.white-on-black .side-fixed.panelDarkMode.active .closeDarkMode,
body.white-on-black .side-fixed.side-dark-mode .closeDarkMode,
body.white-on-black .side-fixed.panelDarkMode .closeDarkMode {
  background: #616161 !important;
  background-color: #616161 !important;
  border: 1px solid #616161 !important;
  /* Viền xám giống closeNoteMark */
}

.side-fixed.side-dark-mode.active .closeDarkMode i,
.side-fixed.panelDarkMode.active .closeDarkMode i,
.side-fixed.side-dark-mode .closeDarkMode i,
.side-fixed.panelDarkMode .closeDarkMode i {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #000 !important;
  font-size: 1.6rem !important;
  font-weight: bold !important;
}

/* Đảm bảo icon X trong white on black có màu trắng để nổi bật trên nền xám */
/* VÀ remove text-shadow trắng mà user report */
/* FIX: Remove white background box around icon */
body.white-on-black .side-fixed.side-dark-mode .closeDarkMode i,
body.white-on-black .side-fixed.panelDarkMode .closeDarkMode i,
body.white-on-black .closeDarkMode i,
body.white-on-black .side-fixed.side-dark-mode .closeDarkMode i::before,
body.white-on-black .side-fixed.panelDarkMode .closeDarkMode i::before,
body.white-on-black .closeDarkMode i::before {
  color: #ffffff !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Fix cho Yellow on Black: Nền vàng #FFFF54, Viền vàng, Icon đen, bỏ viền trắng icon */
body.yellow-on-black .side-fixed.side-dark-mode.active .closeDarkMode,
body.yellow-on-black .side-fixed.panelDarkMode.active .closeDarkMode,
body.yellow-on-black .side-fixed.side-dark-mode .closeDarkMode,
body.yellow-on-black .side-fixed.panelDarkMode .closeDarkMode {
  background: #FFFF54 !important;
  background-color: #FFFF54 !important;
  border: 1px solid #FFFF54 !important;
}

body.yellow-on-black .side-fixed.side-dark-mode .closeDarkMode i,
body.yellow-on-black .side-fixed.panelDarkMode .closeDarkMode i,
body.yellow-on-black .closeDarkMode i,
body.yellow-on-black .side-fixed.side-dark-mode .closeDarkMode i::before,
body.yellow-on-black .side-fixed.panelDarkMode .closeDarkMode i::before,
body.yellow-on-black .closeDarkMode i::before {
  color: #000000 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Đảm bảo nút close của note menu luôn hiển thị */
.side-fixed.side-note-mark.active .closeNoteMark,
.side-fixed.panelNoteMark.active .closeNoteMark,
.side-fixed.side-note-mark .closeNoteMark,
.side-fixed.panelNoteMark .closeNoteMark {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  /* Phục hồi style gốc từ monatheme 3 september - nút vuông đen */
  position: absolute !important;
  top: 1.2rem !important;
  right: 1.2rem !important;
  z-index: 10003 !important;
  width: 3.6rem !important;
  height: 3.6rem !important;
  min-width: 3.6rem !important;
  min-height: 3.6rem !important;
  border-radius: 0 !important;
  /* Vuông như bản gốc, không bo tròn */
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #000 !important;
  box-shadow: none !important;
}

.side-fixed.side-note-mark.active .closeNoteMark i,
.side-fixed.panelNoteMark.active .closeNoteMark i,
.side-fixed.side-note-mark .closeNoteMark i,
.side-fixed.panelNoteMark .closeNoteMark i {
  color: #000 !important;
  /* Icon đen như bản gốc */
  font-size: 1.6rem !important;
}

/* Đảm bảo nút close của question sidebar chỉ hiển thị BÊN TRONG sidebar khi mở */
/* Áp dụng cho cả desktop và mobile - GIỐNG Y CHANG nút closeDarkMode */
/* FIX: Target đúng selector - sidePanelQues là parent của sideCloseQues */
.side-fixed.sidePanelQues.active .sideCloseQues,
.side-fixed.sidePanelQues.open .sideCloseQues,
.side-fixed.active .sideCloseQues,
.exams-side.side-fixed.active .sideCloseQues,
.side-fixed-wrap.exams-side.active .sideCloseQues,
.side-fixed.side-fixed-wrap.active .sideCloseQues {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: 1.2rem !important;
  right: 1.2rem !important;
  z-index: 10003 !important;
  width: 3.6rem !important;
  height: 3.6rem !important;
  min-width: 3.6rem !important;
  min-height: 3.6rem !important;
  border-radius: 0 !important;
  /* Vuông như bản gốc */
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid #fff !important;
  /* Giống closeDarkMode */
  box-shadow: none !important;
}

.side-fixed.sidePanelQues.active .sideCloseQues i,
.side-fixed.sidePanelQues.open .sideCloseQues i,
.side-fixed.sidePanelQues.active .sideCloseQues .icon,
.side-fixed.sidePanelQues.open .sideCloseQues .icon,
.side-fixed.active .sideCloseQues i,
.exams-side.side-fixed.active .sideCloseQues i,
.side-fixed-wrap.exams-side.active .sideCloseQues i,
.side-fixed.side-fixed-wrap.active .sideCloseQues i {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #000 !important;
  font-size: 1.6rem !important;
  font-weight: bold !important;
  /* Giống closeDarkMode */
}

/* Override cho white-on-black: nền trắng, không viền đen - GIỐNG Y CHANG closeDarkMode */
body.white-on-black .side-fixed.sidePanelQues.active .sideCloseQues,
body.white-on-black .side-fixed.sidePanelQues.open .sideCloseQues,
body.white-on-black .side-fixed.active .sideCloseQues,
body.white-on-black .exams-side.side-fixed.active .sideCloseQues,
body.white-on-black .side-fixed-wrap.exams-side.active .sideCloseQues,
body.white-on-black .side-fixed.side-fixed-wrap.active .sideCloseQues {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: none !important;
  border: 1px solid #ffffff !important;
  /* Viền trắng hoặc không viền */
}

/* Đảm bảo icon X trong white on black có màu đen - GIỐNG Y CHANG closeDarkMode */
body.white-on-black .side-fixed.sidePanelQues.active .sideCloseQues i,
body.white-on-black .side-fixed.sidePanelQues.open .sideCloseQues i,
body.white-on-black .side-fixed.sidePanelQues.active .sideCloseQues .icon,
body.white-on-black .side-fixed.sidePanelQues.open .sideCloseQues .icon,
body.white-on-black .side-fixed.active .sideCloseQues i,
body.white-on-black .exams-side.side-fixed.active .sideCloseQues i,
body.white-on-black .side-fixed-wrap.exams-side.active .sideCloseQues i,
body.white-on-black .side-fixed.side-fixed-wrap.active .sideCloseQues i {
  color: #000000 !important;
}

/* Override cho yellow-on-black: nền trắng, không viền vàng - GIỐNG Y CHANG closeDarkMode */
body.yellow-on-black .side-fixed.sidePanelQues.active .sideCloseQues,
body.yellow-on-black .side-fixed.sidePanelQues.open .sideCloseQues,
body.yellow-on-black .side-fixed.active .sideCloseQues,
body.yellow-on-black .exams-side.side-fixed.active .sideCloseQues,
body.yellow-on-black .side-fixed-wrap.exams-side.active .sideCloseQues,
body.yellow-on-black .side-fixed.side-fixed-wrap.active .sideCloseQues {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: none !important;
  border: 1px solid #ffffff !important;
  /* Viền trắng hoặc không viền */
}

/* Đảm bảo icon X trong yellow on black có màu đen - GIỐNG Y CHANG closeDarkMode */
body.yellow-on-black .side-fixed.sidePanelQues.active .sideCloseQues i,
body.yellow-on-black .side-fixed.sidePanelQues.open .sideCloseQues i,
body.yellow-on-black .side-fixed.sidePanelQues.active .sideCloseQues .icon,
body.yellow-on-black .side-fixed.sidePanelQues.open .sideCloseQues .icon,
body.yellow-on-black .side-fixed.active .sideCloseQues i,
body.yellow-on-black .exams-side.side-fixed.active .sideCloseQues i,
body.yellow-on-black .side-fixed-wrap.exams-side.active .sideCloseQues i,
body.yellow-on-black .side-fixed.side-fixed-wrap.active .sideCloseQues i {
  color: #000000 !important;
}

/* ẨN nút sideCloseQues khi nằm NGOÀI sidebar hoặc sidebar chưa mở */
/* FIX: Exclude sidePanelQues khi active/open */
.side-fixed:not(.active):not(.open):not(.sidePanelQues) .sideCloseQues,
.side-fixed.sidePanelQues:not(.active):not(.open) .sideCloseQues,
.side-fixed-wrap>.sideCloseQues,
.exams-side>.sideCloseQues:not(.side-fixed.active .sideCloseQues):not(.side-fixed.open .sideCloseQues),
div.side-close.sideCloseQues:not(.side-fixed.sidePanelQues.active .sideCloseQues):not(.side-fixed.sidePanelQues.open .sideCloseQues) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* FIX: ẨN HOÀN TOÀN nút close của trang lọc đề thi (catexams-side) - KHÔNG hiển thị ở bất kỳ chế độ nào */
.catexams-side.side-fixed .side-close,
.catexams-side.side-fixed.active .side-close,
.catexams-side.side-fixed .catexams-side-head .side-close,
.catexams-side.side-fixed.active .catexams-side-head .side-close,
body .catexams-side.side-fixed .side-close,
body .catexams-side.side-fixed.active .side-close,
body .catexams-side.side-fixed .catexams-side-head .side-close,
body .catexams-side.side-fixed.active .catexams-side-head .side-close,
html body .catexams-side.side-fixed .side-close,
html body .catexams-side.side-fixed.active .side-close,
html body .catexams-side.side-fixed .catexams-side-head .side-close,
html body .catexams-side.side-fixed.active .catexams-side-head .side-close,
body.white-on-black .catexams-side.side-fixed .side-close,
body.white-on-black .catexams-side.side-fixed.active .side-close,
body.yellow-on-black .catexams-side.side-fixed .side-close,
body.yellow-on-black .catexams-side.side-fixed.active .side-close {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.catexams-side.side-fixed .side-close i,
.catexams-side.side-fixed.active .side-close i,
.catexams-side.side-fixed .catexams-side-head .side-close i,
.catexams-side.side-fixed.active .catexams-side-head .side-close i {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Đã xóa các rule override - nút close của catexams-side đã được ẩn hoàn toàn ở trên */

/* Mobile/Tablet: LUÔN HIỆN NÚT ĐỎ */
@media screen and (max-width: 1024px) {
  .side-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Desktop: ẩn nút floating */
@media screen and (min-width: 1025px) {
  .side-open {
    display: none !important;
  }
}

.side-close:hover,
.side-open:hover {
  background: #f0f0f0;
  color: #333;
}

.side-close i,
.side-open i {
  font-size: 1.4rem;
}

.catexams-side-inner {
  padding: 2rem;
  max-height: none !important;
  /* Hiển thị hết, không giới hạn chiều cao */
  overflow-y: visible !important;
  /* Hiển thị hết, không cần scroll */
  height: auto !important;
  /* Tự động fit nội dung */
}

/* Autoresize cho sidebar inner trên mobile/tablet - hiển thị hết */
@media screen and (max-width: 1024px) {
  .catexams-side.side-fixed.active .catexams-side-inner {
    max-height: none !important;
    /* Hiển thị hết, không giới hạn chiều cao */
    overflow-y: visible !important;
    /* Hiển thị hết, không cần scroll */
    overflow-x: hidden !important;
    padding: 1.6rem;
    height: auto !important;
    /* Tự động fit nội dung */
  }

  /* Collapse body - hiển thị hết categories, không scroll */
  .catexams-side.side-fixed.active .collapse-body,
  .catexams-side.side-fixed.active .collapse-item.active .collapse-body {
    max-height: none !important;
    /* Không giới hạn chiều cao */
    overflow: visible !important;
    /* Hiển thị hết, không cần scroll */
    overflow-y: visible !important;
    /* Hiển thị hết, không cần scroll */
    height: auto !important;
    /* Tự động fit nội dung */
  }
}

.catexams-filt-search {
  margin-bottom: 2rem;
}

.catexams-filt-search .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  /* Cân đối khoảng cách dưới bằng khoảng cách trên (2rem) */
}

.catexams-filt-search .head .tt {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.reuse-btn-reset {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #666;
}

.reuse-btn-reset:hover {
  background: #f0f0f0;
  color: #333;
}

.reuse-inner {
  position: relative;
}

.reuse-input {
  position: relative;
  display: flex;
  align-items: center;
}

.reuse-input input {
  width: 100%;
  padding: 1rem 4rem 1rem 1.2rem;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  font-size: 1.3rem;
  transition: all 0.3s ease;
}

.reuse-input input:focus {
  outline: none;
  border-color: #8701ca;
  box-shadow: 0 0 0 3px rgba(135, 1, 202, 0.1);
}

.reuse-btn {
  position: absolute;
  right: 0.8rem;
  width: 3.2rem;
  height: 3.2rem;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.3s ease;
}

.reuse-btn:hover {
  color: #8701ca;
}

.catexams-filt {
  margin-top: 2rem;
}

.catexams-filt-item {
  margin-bottom: 1.6rem;
}

.collapse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.collapse-head:hover {
  color: #8701ca;
}

.collapse-head .tt {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.collapse-head .icon {
  transition: transform 0.3s ease;
}

.collapse-item.active .collapse-head .icon {
  transform: rotate(180deg);
}

.collapse-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  display: none;
}

.collapse-item.active .collapse-body,
.collapse-body.active {
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}

/* Show hết categories, không cần scroll */
.collapse-body.active {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0;
}

.collapse-body.active::-webkit-scrollbar {
  width: 6px;
}

.collapse-body.active::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.collapse-body.active::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.collapse-body.active::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.filt-list {
  padding: 1rem 0;
}

.filt-item {
  margin-bottom: 0.8rem;
}

.mask-radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  gap: 1.2rem;
  position: relative;
  user-select: none;
}

.mask-radio-label:hover {
  background: #f8f9fa;
}

/* Ẩn checkbox input mặc định */
.mask-radio-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
  margin: 0;
  z-index: 1;
}

/* Custom checkbox styling - đẹp và cân đối */
.mask-radio-label .checkbox-custom {
  position: relative;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  border: 2px solid #ddd;
  border-radius: 6px;
  background: #fff;
  transition: all 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 0;
}

.mask-radio-label:hover .checkbox-custom {
  border-color: #8701ca;
  background: #f8f9fa;
}

.mask-radio-input:checked~.checkbox-custom {
  background: #8701ca;
  border-color: #8701ca;
}

.mask-radio-input:checked~.checkbox-custom::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%) rotate(45deg);
  width: 0.5rem;
  height: 1rem;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  display: block;
}

.mask-radio-input:focus~.checkbox-custom {
  outline: none;
  box-shadow: 0 0 0 3px rgba(135, 1, 202, 0.15);
}

.filt-txt {
  font-size: 1.4rem;
  color: #333;
  flex: 1;
  line-height: 1.5;
  cursor: pointer;
  position: relative;
  padding-left: 0;
}

.mask-radio-input:checked~.filt-txt {
  color: #8701ca;
  font-weight: 600;
}

.filter-term-children {
  margin-left: 2rem;
  margin-top: 0.8rem;
  padding-left: 1.2rem;
  border-left: 2px solid #f0f0f0;
}

.filter-term-sub-children {
  margin-left: 2rem;
  margin-top: 0.6rem;
  padding-left: 1.2rem;
  border-left: 2px solid #e8e8e8;
}

/* Tablet và Mobile Responsive */
@media screen and (max-width: 1024px) {
  .exam-with-sidebar {
    flex-direction: column;
    gap: 0 !important;
    /* Remove gap to avoid extra space from hidden sidebar */
  }

  /* CHỈ ẩn khi sidebar không active - dùng class thay vì :has() */
  .exam-sidebar:not(.sidebar-active) {
    width: 0 !important;
    position: relative;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Đảm bảo không có blank box - ẩn hoàn toàn sidebar khi không active */
  .exam-sidebar:not(.sidebar-active) .catexams-side.side-fixed {
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .side-overlay {
    display: block;
    z-index: 9999 !important;
    /* Tăng cao để luôn nằm trên các icon trong đề thi */
  }

  .side-overlay.active {
    z-index: 9999 !important;
    /* Tăng cao để luôn nằm trên các icon trong đề thi */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Ẩn nút close trên mobile/tablet - NHƯNG hiển thị khi sidebar active */
  .catexams-side.side-fixed:not(.active) .side-close.hidden,
  .catexams-side.side-fixed:not(.active) .side-close {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .catexams-side.side-fixed {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    right: auto !important;
    width: 90% !important;
    max-width: 450px !important;
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    /* Không giới hạn chiều cao, hiển thị hết */
    z-index: 10000 !important;
    /* Tăng cao để luôn nằm trên các icon trong đề thi */
    border-radius: 0;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
    transition: left 0.3s ease;
    overflow-y: visible !important;
    /* Hiển thị hết, không scroll */
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
    background: #fff !important;
    display: none !important;
    flex-direction: column !important;
  }

  /* Đảm bảo sidebar ẩn hoàn toàn trên tablet/mobile khi không active - không có blank box */
  .catexams-side.side-fixed:not(.active) {
    left: -100% !important;
    right: auto !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    display: none !important;
    transform: translateX(-100%) !important;
    position: absolute !important;
    top: -9999px !important;
  }

  /* Đảm bảo không có blank box ở tất cả các size - triệt để - chỉ áp dụng cho mobile/tablet */
  @media screen and (max-width: 1024px) {
    .exam-sidebar:not(.sidebar-active) .catexams-side.side-fixed {
      position: absolute !important;
      left: -9999px !important;
      width: 0 !important;
      height: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      overflow: hidden !important;
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translateX(-100%) !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      box-shadow: none !important;
    }
  }

  /* Mobile/Tablet: ẩn exam-sidebar container khi sidebar không active - dùng class thay vì :has() */
  @media screen and (max-width: 1024px) {
    .exam-sidebar:not(.sidebar-active) {
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      flex-shrink: 0 !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }

    .exam-sidebar:not(.sidebar-active) .catexams-side.side-fixed {
      position: absolute !important;
      left: -9999px !important;
      width: 0 !important;
      height: 0 !important;
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    /* CRITICAL OVERRIDE: Nút .side-open PHẢI LUÔN HIỆN, bất kể parent .exam-sidebar có class gì */
    .exam-sidebar .side-open,
    .exam-sidebar:not(.sidebar-active) .side-open,
    body .exam-sidebar .side-open,
    html body .exam-sidebar .side-open,
    .exam-sidebar:not(.sidebar-active)>.side-open {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      position: fixed !important;
      z-index: 2000 !important;
      left: 0 !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
    }
  }

  @media screen and (min-width: 1025px) {

    /* Desktop: reset exam-sidebar về trạng thái bình thường - fix box trắng nhưng giữ styling đẹp */
    /* QUAN TRỌNG: Phải override tất cả rules trước đó - FORCE với specificity cao nhất */
    html body .exam-wrap.exam-with-sidebar .exam-sidebar,
    body .exam-wrap.exam-with-sidebar .exam-sidebar,
    .exam-wrap.exam-with-sidebar .exam-sidebar,
    html body .exam-sidebar,
    body .exam-sidebar,
    .exam-sidebar {
      width: 100% !important;
      max-width: 32rem !important;
      min-width: auto !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: visible !important;
      display: flex !important;
      flex-direction: column !important;
      position: sticky !important;
      top: 2rem !important;
      align-self: flex-start !important;
      flex-shrink: 0 !important;
      background: #ffffff !important;
      border-radius: 1.2rem !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
      /* Giữ box-shadow đẹp */
      border: 1px solid #f0f0f0 !important;
      /* Giữ border đẹp */
      height: auto !important;
      box-sizing: border-box !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    /* Desktop: sidebar hiển thị bình thường - giữ styling đẹp */
    html body .exam-sidebar .catexams-side.side-fixed,
    body .exam-sidebar .catexams-side.side-fixed,
    .exam-sidebar .catexams-side.side-fixed {
      position: relative !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      width: 100% !important;
      height: auto !important;
      min-height: auto !important;
      max-height: none !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      transform: none !important;
      z-index: auto !important;
      box-shadow: none !important;
      /* Không có box-shadow riêng, dùng của exam-sidebar */
      border-radius: 0 !important;
      /* Không có border-radius riêng, dùng của exam-sidebar */
      background: transparent !important;
      /* Trong suốt, dùng background của exam-sidebar */
      border: none !important;
      /* Không có border riêng, dùng của exam-sidebar */
      padding: 0 !important;
      margin: 0 !important;
    }

    /* Desktop: đảm bảo exam-sidebar luôn có viền và styling đẹp - force override với specificity cao nhất */
    body .exam-wrap.exam-with-sidebar .exam-sidebar,
    .exam-wrap.exam-with-sidebar .exam-sidebar,
    .exam-sidebar {
      border: 1px solid #f0f0f0 !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
      border-radius: 1.2rem !important;
      background: #ffffff !important;
      width: 100% !important;
      max-width: 32rem !important;
      display: flex !important;
      position: sticky !important;
    }

    /* Desktop: ẩn overlay */
    .side-overlay {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      z-index: -1 !important;
    }

    /* Desktop: ẩn nút floating */
    .exam-sidebar .side-open {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
  }

  /* Sidebar active - hiện từ bên trái (từ nút floating) và autoresize */
  .catexams-side.side-fixed.active {
    left: 0 !important;
    right: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: flex !important;
    width: 90% !important;
    max-width: 450px !important;
    height: auto !important;
    min-height: auto !important;
    /* Auto height để fit nội dung */
    max-height: none !important;
    /* Không giới hạn chiều cao, hiển thị hết */
    transform: translateX(0) !important;
    position: fixed !important;
    z-index: 10000 !important;
    /* Tăng cao để luôn nằm trên các icon trong đề thi */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    will-change: transform !important;
    overflow-y: visible !important;
    /* Hiển thị hết, không scroll */
    overflow-x: visible !important;
    /* Đảm bảo nút close không bị cắt */
  }

  /* Đảm bảo head không che nút close */
  .catexams-side.side-fixed.active .catexams-side-head {
    overflow: visible !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Mobile: sidebar chỉ 30% khu vực và auto fit text - fix box trắng */
  @media screen and (max-width: 1024px) {
    .catexams-side.side-fixed.active {
      width: 30% !important;
      max-width: 30% !important;
      min-width: 280px !important;
      position: fixed !important;
      z-index: 10000 !important;
      /* Tăng cao để luôn nằm trên các icon trong đề thi */
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
      min-height: auto !important;
      /* Auto height để fit nội dung */
      max-height: none !important;
      /* Không giới hạn chiều cao, hiển thị hết */
      overflow-y: visible !important;
      /* Hiển thị hết, không scroll */
      overflow-x: hidden !important;
    }

    /* Đảm bảo không có box trắng đằng sau - chỉ khi sidebar không active */
    .exam-sidebar:not(:has(.catexams-side.side-fixed.active)) {
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
    }
  }

  .catexams-side-head {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
  }

  /* ẨN HOÀN TOÀN nút close của filter sidebar (catexams-side) - KHÔNG hiển thị ở bất kỳ chế độ nào */
  /* Các nút close khác (closeDarkMode, closeNoteMark, sideCloseQues) hoạt động bình thường */
  .catexams-side.side-fixed .side-close,
  .catexams-side.side-fixed.active .side-close,
  .catexams-side.side-fixed .catexams-side-head .side-close,
  .catexams-side.side-fixed.active .catexams-side-head .side-close,
  body .catexams-side.side-fixed .side-close,
  body .catexams-side.side-fixed.active .side-close,
  body.white-on-black .catexams-side.side-fixed.active .side-close,
  body.yellow-on-black .catexams-side.side-fixed.active .side-close {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .catexams-side.side-fixed .side-close i,
  .catexams-side.side-fixed.active .side-close i,
  .catexams-side.side-fixed .catexams-side-head .side-close i,
  .catexams-side.side-fixed.active .catexams-side-head .side-close i {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Đảm bảo các nút close khác LUÔN hoạt động bình thường */
  .closeDarkMode,
  .closeNoteMark,
  .sideCloseQues {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Đảm bảo nút close của question sidebar (exams-side) LUÔN hiển thị khi mở - CẢ DESKTOP VÀ MOBILE */
  /* GIỐNG Y CHANG nút closeDarkMode */
  /* FIX: Target đúng selector - sidePanelQues là parent */
  .side-fixed.sidePanelQues.active .sideCloseQues,
  .side-fixed.sidePanelQues.open .sideCloseQues,
  .exams-side.side-fixed.active .sideCloseQues,
  .side-fixed-wrap.exams-side.active .sideCloseQues,
  .side-fixed.side-fixed-wrap.exams-side.active .sideCloseQues,
  html body .exams-side.side-fixed.active .sideCloseQues,
  body .exams-side.side-fixed.active .sideCloseQues {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 1.2rem !important;
    right: 1.2rem !important;
    z-index: 10003 !important;
    width: 3.6rem !important;
    height: 3.6rem !important;
    min-width: 3.6rem !important;
    min-height: 3.6rem !important;
    background: #fff !important;
    border: 1px solid #fff !important;
    /* Giống closeDarkMode */
    box-shadow: none !important;
    border-radius: 0 !important;
    /* Vuông như bản gốc */
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .side-fixed.sidePanelQues.active .sideCloseQues i,
  .side-fixed.sidePanelQues.open .sideCloseQues i,
  .side-fixed.sidePanelQues.active .sideCloseQues .icon,
  .side-fixed.sidePanelQues.open .sideCloseQues .icon,
  .exams-side.side-fixed.active .sideCloseQues i,
  .side-fixed-wrap.exams-side.active .sideCloseQues i,
  .side-fixed.side-fixed-wrap.exams-side.active .sideCloseQues i,
  html body .exams-side.side-fixed.active .sideCloseQues i,
  body .exams-side.side-fixed.active .sideCloseQues i {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #000 !important;
    font-size: 1.6rem !important;
    font-weight: bold !important;
    /* Giống closeDarkMode */
  }

  /* Override cho white-on-black: nền trắng, không viền đen - GIỐNG Y CHANG closeDarkMode */
  body.white-on-black .side-fixed.sidePanelQues.active .sideCloseQues,
  body.white-on-black .side-fixed.sidePanelQues.open .sideCloseQues,
  body.white-on-black .exams-side.side-fixed.active .sideCloseQues,
  body.white-on-black .side-fixed-wrap.exams-side.active .sideCloseQues,
  body.white-on-black .side-fixed.side-fixed-wrap.exams-side.active .sideCloseQues,
  body.white-on-black html body .exams-side.side-fixed.active .sideCloseQues,
  body.white-on-black body .exams-side.side-fixed.active .sideCloseQues {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    border: 1px solid #ffffff !important;
    /* Viền trắng hoặc không viền */
  }

  /* Đảm bảo icon X trong white on black có màu đen - GIỐNG Y CHANG closeDarkMode */
  body.white-on-black .side-fixed.sidePanelQues.active .sideCloseQues i,
  body.white-on-black .side-fixed.sidePanelQues.open .sideCloseQues i,
  body.white-on-black .side-fixed.sidePanelQues.active .sideCloseQues .icon,
  body.white-on-black .side-fixed.sidePanelQues.open .sideCloseQues .icon,
  body.white-on-black .exams-side.side-fixed.active .sideCloseQues i,
  body.white-on-black .side-fixed-wrap.exams-side.active .sideCloseQues i,
  body.white-on-black .side-fixed.side-fixed-wrap.exams-side.active .sideCloseQues i,
  body.white-on-black html body .exams-side.side-fixed.active .sideCloseQues i,
  body.white-on-black body .exams-side.side-fixed.active .sideCloseQues i {
    color: #000000 !important;
  }

  /* Override cho yellow-on-black: nền trắng, không viền vàng - GIỐNG Y CHANG closeDarkMode */
  body.yellow-on-black .side-fixed.sidePanelQues.active .sideCloseQues,
  body.yellow-on-black .side-fixed.sidePanelQues.open .sideCloseQues,
  body.yellow-on-black .exams-side.side-fixed.active .sideCloseQues,
  body.yellow-on-black .side-fixed-wrap.exams-side.active .sideCloseQues,
  body.yellow-on-black .side-fixed.side-fixed-wrap.exams-side.active .sideCloseQues,
  body.yellow-on-black html body .exams-side.side-fixed.active .sideCloseQues,
  body.yellow-on-black body .exams-side.side-fixed.active .sideCloseQues {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    border: 1px solid #ffffff !important;
    /* Viền trắng hoặc không viền */
  }

  /* Đảm bảo icon X trong yellow on black có màu đen - GIỐNG Y CHANG closeDarkMode */
  body.yellow-on-black .side-fixed.sidePanelQues.active .sideCloseQues i,
  body.yellow-on-black .side-fixed.sidePanelQues.open .sideCloseQues i,
  body.yellow-on-black .side-fixed.sidePanelQues.active .sideCloseQues .icon,
  body.yellow-on-black .side-fixed.sidePanelQues.open .sideCloseQues .icon,
  body.yellow-on-black .exams-side.side-fixed.active .sideCloseQues i,
  body.yellow-on-black .side-fixed-wrap.exams-side.active .sideCloseQues i,
  body.yellow-on-black .side-fixed.side-fixed-wrap.exams-side.active .sideCloseQues i,
  body.yellow-on-black html body .exams-side.side-fixed.active .sideCloseQues i,
  body.yellow-on-black body .exams-side.side-fixed.active .sideCloseQues i {
    color: #000000 !important;
  }

  /* Đảm bảo các nút close khác LUÔN hiển thị - KHÔNG bị ảnh hưởng bởi rules trên */
  .closeDarkMode,
  .closeNoteMark,
  .sideCloseQues,
  .side-fixed.side-dark-mode .closeDarkMode,
  .side-fixed.panelDarkMode .closeDarkMode,
  .side-fixed.side-note-mark .closeNoteMark,
  .side-fixed.panelNoteMark .closeNoteMark {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body .catexams-side.side-fixed.active .side-close i,
  html body .catexams-side.side-fixed.active .catexams-side-head .side-close i,
  body .catexams-side.side-fixed.active .side-close i,
  body .catexams-side.side-fixed.active .catexams-side-head .side-close i,
  .catexams-side.side-fixed.active .side-close i,
  .catexams-side.side-fixed.active .catexams-side-head .side-close i {
    font-size: 1.6rem !important;
    color: #dc2626 !important;
    font-weight: bold !important;
    display: block !important;
  }

  /* Hover chỉ áp dụng cho filter sidebar */
  .catexams-side.side-fixed.active .side-close:hover {
    background: #f0f0f0 !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Icon của filter sidebar */
  .catexams-side.side-fixed.active .side-close i {
    font-size: 1.4rem !important;
    color: #666 !important;
  }

  .catexams-side.side-fixed.active .side-close:hover i {
    color: #333 !important;
  }

  /* Đảm bảo icon của các nút close khác hiển thị */
  .closeDarkMode i,
  .closeNoteMark i,
  .sideCloseQues i {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Nút floating - đặt ngoài sidebar để luôn hiện */
  /* CRITICAL FIX: Nút phải LUÔN HIỆN bất kể .exam-sidebar có class gì */
  .exam-sidebar .side-open,
  .exam-sidebar:not(.sidebar-active) .side-open,
  body .exam-sidebar .side-open,
  html body .exam-sidebar .side-open {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    border-radius: 0 10px 10px 0 !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #fff !important;
    z-index: 2000 !important;
    box-shadow: 2px 0 15px rgba(220, 38, 38, 0.4) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
  }

  .exam-sidebar .side-open:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
    box-shadow: 2px 0 20px rgba(220, 38, 38, 0.5) !important;
    transform: translateY(-50%) scale(1.05) !important;
  }

  .side-open i {
    font-size: 1.6rem;
    pointer-events: none;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* Khi sidebar mở: nút đỏ quay ngược lại (rotate 180deg) - JavaScript sẽ set left position */
  .catexams-side.side-fixed.active~.side-open,
  .exam-sidebar:has(.catexams-side.side-fixed.active) .side-open {
    /* Không set left ở đây, để JavaScript tính toán chính xác */
    transform: translateY(-50%) rotate(180deg) !important;
    border-radius: 10px 0 0 10px !important;
    box-shadow: -2px 0 15px rgba(220, 38, 38, 0.4) !important;
    z-index: 1002 !important;
  }

  .catexams-side.side-fixed.active~.side-open:hover,
  .exam-sidebar:has(.catexams-side.side-fixed.active) .side-open:hover {
    box-shadow: -2px 0 20px rgba(220, 38, 38, 0.5) !important;
  }

  @media screen and (max-width: 768px) {
    .exam-sidebar .side-open {
      width: 4rem !important;
      height: 4rem !important;
    }
  }

  .catexams-side-inner {
    padding: 1.6rem;
    flex: 1;
    overflow-y: visible !important;
    /* Hiển thị hết, không cần scroll */
    overflow-x: hidden;
    min-height: 0;
    height: auto !important;
    /* Tự động fit nội dung */
    max-height: none !important;
    /* Không giới hạn chiều cao */
  }

  /* Autoresize cho sidebar inner - hiển thị hết nội dung */
  .catexams-side.side-fixed.active .catexams-side-inner {
    max-height: none !important;
    /* Không giới hạn chiều cao */
    height: auto !important;
    /* Tự động fit nội dung */
    overflow-y: visible !important;
    /* Hiển thị hết, không cần scroll */
  }

  /* Collapse body - hiển thị hết categories */
  .collapse-body {
    max-height: none !important;
    /* Không giới hạn chiều cao */
    overflow-y: visible !important;
    /* Hiển thị hết, không cần scroll */
    height: auto !important;
    /* Tự động fit nội dung */
  }

  .collapse-body.active {
    max-height: none !important;
    /* Không giới hạn chiều cao */
    overflow-y: visible !important;
    /* Hiển thị hết, không cần scroll */
    height: auto !important;
    /* Tự động fit nội dung */
  }

  .exam-content {
    width: 100%;
  }

  .filter-content {
    display: flex;
  }
}

@media screen and (max-width: 768px) {
  .side-open {
    width: 4rem !important;
    height: 4rem !important;
  }

  /* Mobile: sidebar chỉ 30% khu vực và auto fit text */
  .catexams-side.side-fixed.active {
    width: 30% !important;
    max-width: 30% !important;
    min-width: 280px !important;
  }

  /* Fix layout: Cân đối padding giống desktop */
  .catexams-side.side-fixed.active .catexams-side-inner {
    padding: 2rem !important;
    font-size: 1.3rem !important;
    max-height: none !important;
    /* Hiển thị hết, không giới hạn chiều cao */
    overflow-y: visible !important;
    /* Hiển thị hết, không cần scroll */
    height: auto !important;
    /* Tự động fit nội dung */
  }

  .catexams-side.side-fixed.active .catexams-side-head {
    padding: 1.6rem 2rem !important;
  }

  .catexams-side.side-fixed.active .catexams-side-head .tt {
    font-size: 1.6rem !important;
    /* Match desktop font size for balance */
  }

  .catexams-side.side-fixed.active .filt-txt {
    font-size: 1.2rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Reset margin-top vì đã có padding cân đối */
  .catexams-filt-search {
    margin-top: 0 !important;
  }

  /* Mobile: hiện tối đa 2 cột (1 hàng 2 đề) - giống mẫu "Đề thi" */
  .exam-list.row .col.col-4 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Đảm bảo nút floating luôn hiện trên mobile - màu đỏ, bên trái */
  .catexams-side.side-fixed:not(.active)~.side-open,
  .exam-sidebar:not(:has(.catexams-side.side-fixed.active)) .side-open {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 4rem !important;
    height: 4rem !important;
    border-radius: 0 10px 10px 0 !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    box-shadow: 2px 0 15px rgba(220, 38, 38, 0.4) !important;
  }

  /* Đảm bảo nút close hiện rõ trên mobile - override mọi rule khác kể cả class hidden */
  .catexams-side.side-fixed.active .side-close,
  .catexams-side.side-fixed.active .side-close.hidden,
  .catexams-side.side-fixed.active .catexams-side-head .side-close,
  .catexams-side.side-fixed.active .catexams-side-head .side-close.hidden,
  .exam-sidebar.sidebar-active .catexams-side.side-fixed.active .side-close,
  .exam-sidebar.sidebar-active .catexams-side.side-fixed.active .catexams-side-head .side-close {
    display: flex !important;
    width: 3.6rem !important;
    height: 3.6rem !important;
    top: 1.2rem !important;
    right: 1.2rem !important;
    z-index: 10003 !important;
    /* Cao hơn sidebar để luôn hiện trên */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: #fff !important;
    border: 2px solid #dc2626 !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
    position: absolute !important;
    /* Dùng absolute thay vì fixed để nằm trong sidebar */
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }

  /* Override màu cho contrast mode */
  body.white-on-black .catexams-side.side-fixed.active .side-close,
  body.white-on-black .catexams-side.side-fixed.active .catexams-side-head .side-close {
    background: #616161 !important;
    border: 2px solid #ffffff !important;
  }

  body.white-on-black .catexams-side.side-fixed.active .side-close i {
    color: #ffffff !important;
  }

  body.yellow-on-black .catexams-side.side-fixed.active .side-close,
  body.yellow-on-black .catexams-side.side-fixed.active .catexams-side-head .side-close {
    background: #FFFF54 !important;
    border: 2px solid #FFFF54 !important;
  }

  body.yellow-on-black .catexams-side.side-fixed.active .side-close i {
    color: #000000 !important;
  }

  .catexams-side.side-fixed.active .side-close i,
  .catexams-side.side-fixed.active .side-close.hidden i,
  .catexams-side.side-fixed.active .catexams-side-head .side-close i {
    font-size: 1.6rem !important;
    color: #dc2626 !important;
    font-weight: bold !important;
  }
}

/* ============================================
   CRITICAL FIX: NÚT ĐỎ PHẢI LUÔN HIỆN TRÊN MOBILE
   Đặt ở cuối file để override mọi rule khác
   NÚT ĐÃ ĐƯỢC DI CHUYỂN RA NGOÀI .exam-sidebar TRONG HTML
   ============================================ */
@media screen and (max-width: 1024px) {

  /* Nút .side-open giờ nằm ngoài .exam-sidebar, nên không bị ảnh hưởng bởi parent */
  html body .exam-wrap.exam-with-sidebar .side-open,
  body .exam-wrap.exam-with-sidebar .side-open,
  .exam-wrap.exam-with-sidebar .side-open,
  html body .side-open,
  body .side-open,
  .side-open {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    min-width: 4.5rem !important;
    min-height: 4.5rem !important;
    border-radius: 0 10px 10px 0 !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #fff !important;
    z-index: 99999 !important;
    box-shadow: 2px 0 15px rgba(220, 38, 38, 0.4) !important;
    transition: all 0.3s ease !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    /* QUAN TRỌNG: Override parent's visibility/opacity */
    clip: auto !important;
    clip-path: none !important;
  }

  @media screen and (max-width: 768px) {

    html body .exam-sidebar .side-open,
    body .exam-sidebar .side-open,
    .exam-sidebar .side-open {
      width: 4rem !important;
      height: 4rem !important;
      min-width: 4rem !important;
      min-height: 4rem !important;
    }
  }

  /* Khi sidebar mở: nút quay 180 độ và dính vào cạnh sidebar */
  html body .exam-wrap.exam-with-sidebar:has(.exam-sidebar.sidebar-active) .side-open,
  body .exam-wrap.exam-with-sidebar:has(.exam-sidebar.sidebar-active) .side-open,
  .exam-wrap.exam-with-sidebar:has(.exam-sidebar.sidebar-active) .side-open,
  html body .exam-wrap.exam-with-sidebar:has(.catexams-side.side-fixed.active) .side-open,
  body .exam-wrap.exam-with-sidebar:has(.catexams-side.side-fixed.active) .side-open,
  .exam-wrap.exam-with-sidebar:has(.catexams-side.side-fixed.active) .side-open,
  /* Thêm selector trực tiếp */
  .exam-sidebar.sidebar-active .side-open,
  .catexams-side.side-fixed.active~.side-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(-50%) rotate(180deg) !important;
    border-radius: 10px 0 0 10px !important;
    box-shadow: -2px 0 15px rgba(220, 38, 38, 0.4) !important;
    z-index: 99999 !important;
    /* Z-index cao nhất */
    pointer-events: auto !important;
    position: fixed !important;
    /* left sẽ được JavaScript set, nhưng set default để không bị mất */
    /* top: 50% !important; */
  }
}

/* ============================================
   FIX: Breadcrumb Spacing Balance (Top vs Bottom)
   ============================================ */
.page-exam-list .breadcrumb-wrapper {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
  margin-bottom: 0 !important;
  border: none !important;
}

.page-exam-list .breadcrumb,
.page-exam-list .breadcrumb-list {
  margin: 0 !important;
  padding: 0 !important;
}

.page-exam-list .sec-exam {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.page-exam-list .sec-exam .container {
  padding-top: 0 !important;
}

/* Fix sideOpenQues - CHỈ hiện ở mobile/tablet, ẩn khi sidebar active */
/* Desktop: ẩn hoàn toàn */
@media screen and (min-width: 1025px) {
  .side-open.sideOpenQues {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Mobile/Tablet: hiện nút bên phải */
@media screen and (max-width: 1024px) {
  .side-open.sideOpenQues {
    position: fixed !important;
    right: 0 !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4rem !important;
    height: 4rem !important;
    min-width: 4rem !important;
    min-height: 4rem !important;
    border-radius: 10px 0 0 10px !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #fff !important;
    z-index: 99999 !important;
    box-shadow: -2px 0 15px rgba(220, 38, 38, 0.4) !important;
    transition: all 0.3s ease !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .side-open.sideOpenQues:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
    box-shadow: -2px 0 20px rgba(220, 38, 38, 0.5) !important;
    transform: translateY(-50%) scale(1.05) !important;
  }

  /* Khi sidebar question mở: ẨN nút, không overlay */
  .side-fixed.active~.side-open.sideOpenQues,
  .exam-wrap:has(.side-fixed.active) .side-open.sideOpenQues,
  .side-fixed.side-fixed.active~.side-open.sideOpenQues,
  /* Thêm các case mới dựa trên hình ảnh user cung cấp */
  .side-fixed.open~.side-open.sideOpenQues,
  .side-fixed.main-test-exam.open~.side-open.sideOpenQues,
  body:has(.side-fixed.open) .side-open.sideOpenQues,
  html body .side-open.sideOpenQues.hidden,
  .side-open.sideOpenQues[style*="display: none"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

.page-exam-list .exam-wrap.exam-with-sidebar {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Force remove top spacing for content on mobile */
@media screen and (max-width: 1024px) {

  .page-exam-list .exam-content,
  .page-exam-list .monaExamFilterResults,
  .page-exam-list .exam-list {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* Fix mobile sidebar search spacing balance */
@media screen and (max-width: 1024px) {
  .catexams-filt-search .head {
    margin-bottom: 2rem !important;
  }
}

/* ============================================
   FIX: Test Exam Issues
   ============================================ */

/* 2. Hide footer on test result/feedback pages */
.sec-exp-history footer,
.main-test-exam.sec-exp-history footer,
body:has(.sec-exp-history) footer,
body:has(.main-test-exam) footer.ft {
  display: none !important;
}

/* ============================================
   FIX: Word Count và Textarea trong Dark Mode
   ============================================ */

/* Yellow on Black: Word count box và textarea background đen, text vàng */
.testQuestionExam.contrast-yb .me_textarea_block .me_textarea_top {
  background-color: #000000 !important;
  background: #000000 !important;
  border-color: #FFFF54 !important;
}

.testQuestionExam.contrast-yb .me_textarea_block .me_textarea_top .wordNumber {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #FFFF54 !important;
}

.testQuestionExam.contrast-yb .me-question-essay .me_textarea_block textarea {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #FFFF54 !important;
  border-color: #FFFF54 !important;
}

/* White on Black: Word count box đen, số từ màu trắng, textarea background đen */
.testQuestionExam.contrast-wb .me_textarea_block .me_textarea_top {
  background-color: #000000 !important;
  background: #000000 !important;
  border-color: #ffffff !important;
}

.testQuestionExam.contrast-wb .me_textarea_block .me_textarea_top .wordCount {
  color: #ffffff !important;
}

.testQuestionExam.contrast-wb .me_textarea_block .me_textarea_top .wordCount * {
  color: #ffffff !important;
}

.testQuestionExam.contrast-wb .me_textarea_block .me_textarea_top .wordNumber {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
}

.testQuestionExam.contrast-wb .me_textarea_block .me_textarea_top .wordNumber * {
  color: #ffffff !important;
}

.testQuestionExam.contrast-wb .me-question-essay .me_textarea_block textarea {
  background-color: #000000 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Yellow on Black: Word count label màu vàng */
.testQuestionExam.contrast-yb .me_textarea_block .me_textarea_top .wordCount {
  color: #FFFF54 !important;
}

.testQuestionExam.contrast-yb .me_textarea_block .me_textarea_top .wordCount * {
  color: #FFFF54 !important;
}

/* Yellow on Black: Word count ở dưới ô (writing) - màu vàng */
/* Yellow on Black: Word count ở dưới ô (writing) - màu vàng, không in đậm, cùng font size */
.testQuestionExam.contrast-yb .me-question-essay .me_textarea_block .wordCount {
  color: #FFFF54 !important;
  font-weight: normal !important;
  font-size: 1.6rem !important;
}

.testQuestionExam.contrast-yb .me-question-essay .me_textarea_block .wordCount .wordNumber {
  color: #FFFF54 !important;
  font-weight: normal !important;
  font-size: inherit !important;
}

/* White on Black: Word count ở dưới ô (writing) - màu trắng, không in đậm, cùng font size */
.testQuestionExam.contrast-wb .me-question-essay .me_textarea_block .wordCount {
  color: #ffffff !important;
  font-weight: normal !important;
  font-size: 1.6rem !important;
}

.testQuestionExam.contrast-wb .me-question-essay .me_textarea_block .wordCount .wordNumber {
  color: #ffffff !important;
  font-weight: normal !important;
  font-size: inherit !important;
}

/* Yellow on Black: Viền textarea vàng khi focus */
.testQuestionExam.contrast-yb .me-question-essay .me_textarea_block .me_textarea_bottom .me_textarea {
  border-color: #FFFF54 !important;
}

.testQuestionExam.contrast-yb .me-question-essay .me_textarea_block .me_textarea_bottom .me_textarea:focus {
  border-color: #FFFF54 !important;
}

/* White on Black: Viền textarea trắng khi focus */
.testQuestionExam.contrast-wb .me-question-essay .me_textarea_block .me_textarea_bottom .me_textarea {
  border-color: #ffffff !important;
}

.testQuestionExam.contrast-wb .me-question-essay .me_textarea_block .me_textarea_bottom .me_textarea:focus {
  border-color: #ffffff !important;
}

/* ============================================
   FIX: Đổi background xám thành đen cho test-panel-wrap và header Part 1/Part 2
   ============================================ */

/* White on Black: Đổi background test-panel-wrap và me-question-part-label thành đen */
.testQuestionExam.contrast-wb .test-panel-wrap {
  background-color: #000000 !important;
  background: #000000 !important;
}

.testQuestionExam.contrast-wb .me-question-part-label {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* Yellow on Black: Đổi background test-panel-wrap và me-question-part-label thành đen */
.testQuestionExam.contrast-yb .test-panel-wrap {
  background-color: #000000 !important;
  background: #000000 !important;
}

.testQuestionExam.contrast-yb .me-question-part-label {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* ============================================
   FIX: Đổi background xám thành đen cho textarea (chỉ textarea, không phải input/select/drag-drop)
   ============================================ */

/* White on Black: Đổi background xám thành đen cho textarea (chỉ textarea) */
.testQuestionExam.contrast-wb .me_textarea_block .me_textarea_top,
.testQuestionExam.contrast-wb .me_textarea_block,
.testQuestionExam.contrast-wb .me_textarea_bottom {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* Yellow on Black: Đổi background xám thành đen cho textarea (chỉ textarea) */
.testQuestionExam.contrast-yb .me_textarea_block .me_textarea_top,
.testQuestionExam.contrast-yb .me_textarea_block,
.testQuestionExam.contrast-yb .me_textarea_bottom {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* ============================================
   FIX: Writing Test - Căn chỉnh khoảng cách bên phải của essay box bằng với bên trái của resizer
   ============================================ */

/* Đảm bảo padding-right của test-panel-feedback-right (essay box) bằng với padding-left của test-panel-feedback-left (khoảng cách với resizer) */
.test-panel-feedback-wrap:not(.test-panel-feedback-audio) .test-panel-feedback-right {
  padding-right: 2.4rem !important;
  /* Bằng với padding-left của test-panel-feedback-left */
}

/* ============================================
   FIX: Writing Test - Dời word count ra dưới ô (ngoài textarea), auto resize textarea, ẩn số câu hỏi và bookmark, viền textarea
   ============================================ */

/* Word count nằm dưới ô textarea, bên ngoài (như Inspera) - Cùng font size, màu đen, không in đậm */
.me-question-essay .me_textarea_block .wordCount {
  text-align: right;
  margin-top: 8px;
  font-size: 1.6rem;
  color: #000000;
  font-weight: normal;
  padding-right: 4px;
}

.me-question-essay .me_textarea_block .wordCount .wordNumber {
  font-weight: normal;
  color: #000000;
  font-size: inherit;
}

/* Textarea auto resize theo nội dung */
.me-question-essay .me_textarea_block .me_textarea_bottom {
  position: relative;
}

.me-question-essay .me_textarea_block .me_textarea_bottom .me_textarea {
  width: 100%;
  min-height: 191px;
  /* Kích thước mặc định như Inspera */
  height: 191px;
  resize: none;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1.6;
  padding: 12px;
  border: 1px solid #000000;
  /* Viền đen mặc định */
  border-radius: 4px;
  transition: border-color 0.2s ease;
}

/* Viền xanh khi focus (như Inspera) */
.me-question-essay .me_textarea_block .me_textarea_bottom .me_textarea:focus {
  outline: none;
  border-color: #007bff;
  /* Viền xanh khi focus */
}

/* Ẩn số câu hỏi và bookmark trong writing (tất cả writing questions) */
/* Selector cho writing question - ẩn toàn bộ heading khi có essay question */
.me-question[class*="essayFormat"] .me-question-heading.t-head-number,
.me-question.me-question-essayFormat .me-question-heading.t-head-number,
.me-question.me-question-essayFormat-testQuestion .me-question-heading.t-head-number,
.me-question.me-question-essayFormat-testPanel .me-question-heading.t-head-number {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Ẩn từng phần tử riêng lẻ để chắc chắn */
.me-question[class*="essayFormat"] .me-question-heading.t-head-number .t-num,
.me-question[class*="essayFormat"] .me-question-heading.t-head-number .me-question-bookmark,
.me-question.me-question-essayFormat .me-question-heading.t-head-number .t-num,
.me-question.me-question-essayFormat .me-question-heading.t-head-number .me-question-bookmark,
.me-question.me-question-essayFormat-testQuestion .me-question-heading.t-head-number .t-num,
.me-question.me-question-essayFormat-testQuestion .me-question-heading.t-head-number .me-question-bookmark,
.me-question.me-question-essayFormat-testPanel .me-question-heading.t-head-number .t-num,
.me-question.me-question-essayFormat-testPanel .me-question-heading.t-head-number .me-question-bookmark {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Đảm bảo textarea auto resize khi có nội dung */
.me-question-essay .me_textarea_block .me_textarea_bottom .me_textarea {
  box-sizing: border-box;
}

/* ============================================
   BOOKMARK BUTTON STYLING
   ============================================ */

.me-question-bookmark {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  margin-left: 0.5rem;
  color: #999;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  position: relative;
  top: -0.1rem;
}

.me-question-bookmark:hover {
  color: #ff0000;
  transform: scale(1.1);
}

.me-question-bookmark.active {
  color: #ff0000;
}

.me-question-bookmark:disabled {
  cursor: default;
  opacity: 0.7;
}

.me-question-bookmark:disabled:hover {
  transform: none;
}

.me-question-bookmark i {
  font-size: 1.4rem;
  line-height: 1;
}

.me-question-bookmark .fa-regular {
  display: inline-block;
}

.me-question-bookmark .fa-solid {
  display: none;
}

.me-question-bookmark.active .fa-regular {
  display: none;
}

.me-question-bookmark.active .fa-solid {
  display: inline-block;
}

/* Bookmark trong contrast modes */
.testQuestionExam.contrast-wb .me-question-bookmark {
  color: #ffffff;
}

.testQuestionExam.contrast-wb .me-question-bookmark:hover,
.testQuestionExam.contrast-wb .me-question-bookmark.active {
  color: #F8BF0E;
}

.testQuestionExam.contrast-yb .me-question-bookmark {
  color: #FFFF54;
}

.testQuestionExam.contrast-yb .me-question-bookmark:hover,
.testQuestionExam.contrast-yb .me-question-bookmark.active {
  color: #ff0000;
}

/* ============================================
   BOOKMARK IN NAVIGATION BAR (SIDEBAR)
   Bookmark icon nghiêng như hình demo, gắn vào số câu hỏi, không làm đẩy layout
   ============================================ */

.exams-ques-item {
  position: relative;
}

/* Bookmark indicator - Icon nghiêng như hình demo (khoảng 25-30 độ), gắn vào góc trên bên phải */
.bookmark-indicator {
  position: absolute;
  top: -6px;
  right: -2px;
  z-index: 10;
  width: 14px;
  height: 18px;
  pointer-events: none;
  transform: rotate(25deg);
}

.bookmark-indicator i {
  color: #ff0000;
  font-size: 14px;
  line-height: 1;
  display: block;
  transform: rotate(-25deg);
  /* Counter-rotate icon để icon thẳng lại */
  width: 100%;
  height: 100%;
}

/* Xóa các pseudo-element của bookmark-red-arrow (không cần arrow và viền) */
.bookmark-red-arrow::after,
.bookmark-red-arrow::before {
  display: none !important;
}

/* Bookmark trong dark mode - Đồng bộ màu vàng với nút bookmark trong câu hỏi */
.testQuestionExam.contrast-wb .bookmark-indicator i,
body.white-on-black .bookmark-indicator i {
  color: #F8BF0E !important;
}

.testQuestionExam.contrast-yb .bookmark-indicator i,
body.yellow-on-black .bookmark-indicator i {
  color: #FFFF54 !important;
}

/* ============================================
   Options Menu - New Design
   ============================================ */

/* Base styles for Options Menu - Full Screen */
.side-fixed.side-options-menu.panelOptionsMenu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  z-index: 10000;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  flex-direction: column;
  box-shadow: none;
  overflow-y: auto;
}

.side-fixed.side-options-menu.panelOptionsMenu.active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Options Menu Views */
.options-menu-view {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.options-menu-view.active {
  display: flex;
}

/* Options Menu Header */
.options-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  border-bottom: none;
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  box-sizing: border-box;
}

.options-menu-title {
  font-size: 2rem;
  font-weight: 600;
  color: #000000;
  margin: 0;
  flex: 1;
  text-align: center;
}

.options-menu-back {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  color: #000000;
  font-size: 1.6rem;
  position: absolute;
  left: 2rem;
  z-index: 10;
}

.options-menu-back i {
  font-size: 1.4rem;
}

.options-menu-back:hover {
  opacity: 0.7;
}

/* Options Menu List - Container box nhỏ ở giữa */
.options-menu-list {
  overflow-y: auto;
  padding: 0;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding-left: 1em;
  padding-right: 1em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Options Menu Item (Main Menu) - Theo reference inspera */
.options-menu-item {
  display: flex;
  align-items: center;
  padding: 26.4px 61.6px 26.4px 35.2px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  background: #ffffff;
  min-height: 74.8px;
  width: 100%;
  box-sizing: border-box;
}

.options-menu-item:hover {
  background-color: #f5f5f5;
}

/* Go to submission page - Riêng biệt, có border */
.options-menu-item-submission {
  background: #E31837;
  color: #ffffff;
  border: 1px solid #E31837;
  border-radius: 4px;
  margin-bottom: 1em;
}

.options-menu-item-submission:hover {
  background: #c0142d;
  border-color: #c0142d;
}

/* Bật chế độ tra từ vựng - Có viền và bọc giống Contrast/Text size */
.options-menu-item-vocab {
  margin-top: 1.5em;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.options-menu-item-vocab .options-menu-item {
  border-radius: 4px;
  border: none;
  margin: 0;
}

/* Vocab Toggle Switch - Giống iOS switch */
.vocab-toggle-switch {
  position: relative;
  width: 5rem;
  height: 3rem;
  background-color: #e0e0e0;
  border-radius: 1.5rem;
  margin-left: auto;
  cursor: pointer;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}

.options-menu-item-vocab.active .vocab-toggle-switch {
  background-color: #4CAF50;
}

.vocab-switch-slider {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 2.4rem;
  height: 2.4rem;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.options-menu-item-vocab.active .vocab-switch-slider {
  transform: translateX(2rem);
}

.options-menu-icon-vocab {
  color: #333;
  font-size: 1.8rem;
  margin-right: 1.2rem;
  width: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.options-menu-check-vocab {
  color: #333;
  font-size: 1.6rem;
  margin-left: auto;
  display: none;
}

/* Options Menu Group - Box chứa Contrast và Text size */
.options-menu-group {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.options-menu-group .options-menu-item {
  border-bottom: none;
  border-radius: 0;
}

.options-menu-group .options-menu-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.options-menu-group .options-menu-item:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Divider giữa Contrast và Text size */
.options-menu-divider {
  height: 1px;
  background: #e8e8e8;
  margin: 0;
  width: 100%;
}

.options-menu-icon {
  font-size: 1.2em;
  margin-right: 1em;
  width: 1.2857142857em;
  text-align: center;
  color: inherit;
  flex-shrink: 0;
}

/* Custom Contrast Icon - Nửa trắng, nửa xám */
.options-menu-icon-contrast {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, #c1c1c1 50%, #c1c1c1 100%);
  border: 1px solid #c1c1c1;
  flex-shrink: 0;
  margin-right: 1em;
}

/* Text Size Icon - Màu xám nhạt */
.options-menu-icon-text-size {
  color: #c1c1c1 !important;
}

.options-menu-text {
  flex: 1;
  font-size: 1.6rem;
  font-weight: 400;
  color: inherit;
}

.options-menu-arrow {
  font-size: 1.4rem;
  color: inherit;
  margin-left: 1.6rem;
}

/* Options Menu Option (Submenu) - Trong box đẹp như inspera */
.options-menu-list .options-menu-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26.4px 16px 26.4px 35.2px;
  cursor: pointer;
  border-bottom: 1px solid #e8e8e8;
  transition: background-color 0.2s ease;
  background: #ffffff;
  position: relative;
  min-height: 74.8px;
  width: 100%;
  box-sizing: border-box;
}

.options-menu-list .options-menu-option:last-child {
  border-bottom: none;
}

.options-menu-option:hover {
  background-color: #f5f5f5;
}

/* Container box cho submenu options */
.options-menu-contrast .options-menu-list,
.options-menu-text-size .options-menu-list {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 1em;
  padding: 0;
}

.options-menu-contrast .options-menu-list .options-menu-option,
.options-menu-text-size .options-menu-list .options-menu-option {
  border-bottom: 1px solid #e8e8e8;
  border-radius: 0;
}

.options-menu-contrast .options-menu-list .options-menu-option:first-child,
.options-menu-text-size .options-menu-list .options-menu-option:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.options-menu-contrast .options-menu-list .options-menu-option:last-child,
.options-menu-text-size .options-menu-list .options-menu-option:last-child {
  border-bottom: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.options-menu-option-text {
  font-size: 1.6rem;
  font-weight: 400;
  color: #000000;
}

.options-menu-check {
  font-size: 1.4rem;
  color: #000000;
  display: none;
  margin-left: auto;
  margin-right: 0;
  flex-shrink: 0;
}

.options-menu-option.active .options-menu-check {
  display: block;
}

/* Close Button for Options Menu - Theo reference inspera (far right) */
.side-fixed.side-options-menu .closeOptionsMenu {
  position: absolute !important;
  top: 20px !important;
  right: 16px !important;
  z-index: 10003 !important;
  width: auto !important;
  height: auto !important;
  min-width: auto !important;
  min-height: auto !important;
  border-radius: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer;
  padding: 0 !important;
  margin-left: 0 !important;
}

.side-fixed.side-options-menu .closeOptionsMenu i {
  color: #000 !important;
  font-size: 2rem !important;
  font-weight: normal !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.side-fixed.side-options-menu .closeOptionsMenu:hover i {
  opacity: 0.7 !important;
}

.side-fixed.side-options-menu .closeOptionsMenu:focus,
.side-fixed.side-options-menu .closeOptionsMenu:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
}

/* White on Black Mode */
body.white-on-black .side-fixed.side-options-menu.panelOptionsMenu {
  background: #000000;
}

body.white-on-black .options-menu-header {
  border-bottom: none;
}

body.white-on-black .options-menu-title {
  color: #ffffff;
}

body.white-on-black .options-menu-back {
  color: #ffffff;
}

body.white-on-black .options-menu-item {
  background: #000000;
  border-bottom-color: #333333;
  color: #ffffff;
}

body.white-on-black .options-menu-group {
  background: #000000;
  border-color: #333333;
}

body.white-on-black .options-menu-divider {
  background: #333333;
}

body.white-on-black .options-menu-icon-contrast {
  background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, #c1c1c1 50%, #c1c1c1 100%);
  border-color: #c1c1c1;
}

body.white-on-black .options-menu-icon-text-size {
  color: #c1c1c1 !important;
}

body.white-on-black .options-menu-item:hover {
  background-color: #1a1a1a;
}

body.white-on-black .options-menu-item[data-submenu="submission"] {
  background: #E31837;
  color: #ffffff;
}

body.white-on-black .options-menu-item[data-submenu="submission"]:hover {
  background: #c0142d;
}

body.white-on-black .options-menu-option {
  background: #000000;
  border-bottom-color: #333333;
}

body.white-on-black .options-menu-option:hover {
  background-color: #1a1a1a;
}

body.white-on-black .options-menu-contrast .options-menu-list,
body.white-on-black .options-menu-text-size .options-menu-list {
  background: #000000;
  border-color: #333333;
}

body.white-on-black .options-menu-contrast .options-menu-list .options-menu-option,
body.white-on-black .options-menu-text-size .options-menu-list .options-menu-option {
  border-bottom-color: #333333;
}

body.white-on-black .options-menu-option-text {
  color: #ffffff;
}

body.white-on-black .options-menu-check {
  color: #ffffff;
}

body.white-on-black .side-fixed.side-options-menu .closeOptionsMenu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.white-on-black .side-fixed.side-options-menu .closeOptionsMenu i {
  color: #ffffff !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

body.white-on-black .side-fixed.side-options-menu .closeOptionsMenu:focus,
body.white-on-black .side-fixed.side-options-menu .closeOptionsMenu:active,
body.white-on-black .side-fixed.side-options-menu .closeOptionsMenu:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.white-on-black .options-menu-header .closeOptionsMenu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Yellow on Black Mode */
body.yellow-on-black .side-fixed.side-options-menu.panelOptionsMenu {
  background: #000000;
}

body.yellow-on-black .options-menu-header {
  border-bottom: none;
}

body.yellow-on-black .options-menu-title {
  color: #FFFF54;
}

body.yellow-on-black .options-menu-back {
  color: #FFFF54;
}

body.yellow-on-black .options-menu-item {
  background: #000000;
  border-bottom-color: #333333;
  color: #FFFF54;
}

body.yellow-on-black .options-menu-group {
  background: #000000;
  border-color: #333333;
}

body.yellow-on-black .options-menu-divider {
  background: #333333;
}

body.yellow-on-black .options-menu-icon-contrast {
  background: linear-gradient(to right, #FFFF54 0%, #FFFF54 50%, #c1c1c1 50%, #c1c1c1 100%);
  border-color: #c1c1c1;
}

body.yellow-on-black .options-menu-icon-text-size {
  color: #c1c1c1 !important;
}

body.yellow-on-black .options-menu-item:hover {
  background-color: #1a1a1a;
}

body.yellow-on-black .options-menu-item[data-submenu="submission"] {
  background: #E31837;
  color: #ffffff;
}

body.yellow-on-black .options-menu-item[data-submenu="submission"]:hover {
  background: #c0142d;
}

body.yellow-on-black .options-menu-option {
  background: #000000;
  border-bottom-color: #333333;
}

body.yellow-on-black .options-menu-option:hover {
  background-color: #1a1a1a;
}

body.yellow-on-black .options-menu-contrast .options-menu-list,
body.yellow-on-black .options-menu-text-size .options-menu-list {
  background: #000000;
  border-color: #333333;
}

body.yellow-on-black .options-menu-contrast .options-menu-list .options-menu-option,
body.yellow-on-black .options-menu-text-size .options-menu-list .options-menu-option {
  border-bottom-color: #333333;
}

body.yellow-on-black .options-menu-option-text {
  color: #FFFF54;
}

body.yellow-on-black .options-menu-check {
  color: #FFFF54;
}

body.yellow-on-black .side-fixed.side-options-menu .closeOptionsMenu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.yellow-on-black .side-fixed.side-options-menu .closeOptionsMenu i {
  color: #FFFF54 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

body.yellow-on-black .side-fixed.side-options-menu .closeOptionsMenu:focus,
body.yellow-on-black .side-fixed.side-options-menu .closeOptionsMenu:active,
body.yellow-on-black .side-fixed.side-options-menu .closeOptionsMenu:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.yellow-on-black .options-menu-header .closeOptionsMenu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Active state for options */
body.white-on-black .options-menu-option.active,
body.yellow-on-black .options-menu-option.active {
  background-color: #2a2a2a;
}

/* Font Size Styles */
body.regular-font .testQuestionExam {
  font-size: 1.6rem;
}

body.large-font .testQuestionExam {
  font-size: 1.8rem;
}

body.extra-large-font .testQuestionExam {
  font-size: 2rem;
}

body.regular-font .testQuestionExam p,
body.regular-font .testQuestionExam li,
body.regular-font .testQuestionExam span {
  font-size: 1.6rem;
}

body.large-font .testQuestionExam p,
body.large-font .testQuestionExam li,
body.large-font .testQuestionExam span {
  font-size: 1.8rem;
}

body.extra-large-font .testQuestionExam p,
body.extra-large-font .testQuestionExam li,
body.extra-large-font .testQuestionExam span {
  font-size: 2rem;
}

/* Font Size Styles for Options Menu - Match với text size */
/* Regular Font (1.6rem) - Default */
body.regular-font .options-menu-title {
  font-size: 2rem;
}

body.regular-font .options-menu-text,
body.regular-font .options-menu-option-text,
body.regular-font .options-menu-back {
  font-size: 1.6rem;
}

body.regular-font .options-menu-arrow {
  font-size: 1.4rem;
}

body.regular-font .options-menu-check {
  font-size: 1.4rem;
}

/* Large Font (1.8rem) */
body.large-font .options-menu-title {
  font-size: 2.25rem;
  /* Tỷ lệ tương ứng với 2rem -> 2.25rem */
}

body.large-font .options-menu-text,
body.large-font .options-menu-option-text,
body.large-font .options-menu-back {
  font-size: 1.8rem;
}

body.large-font .options-menu-arrow {
  font-size: 1.575rem;
  /* Tỷ lệ tương ứng với 1.4rem -> 1.575rem */
}

body.large-font .options-menu-check {
  font-size: 1.575rem;
}

/* Extra Large Font (2rem) */
body.extra-large-font .options-menu-title {
  font-size: 2.5rem;
  /* Tỷ lệ tương ứng với 2rem -> 2.5rem */
}

body.extra-large-font .options-menu-text,
body.extra-large-font .options-menu-option-text,
body.extra-large-font .options-menu-back {
  font-size: 2rem;
}

body.extra-large-font .options-menu-arrow {
  font-size: 1.75rem;
  /* Tỷ lệ tương ứng với 1.4rem -> 1.75rem */
}

body.extra-large-font .options-menu-check {
  font-size: 1.75rem;
}

/* ============================================
   Options Menu - Mobile Responsive
   ============================================ */

/* Đảm bảo menu dark mode ẩn mặc định (chỉ hiện khi có class active) */
.side-fixed.side-dark-mode.panelDarkMode {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.side-fixed.side-dark-mode.panelDarkMode.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Đảm bảo menu options ẩn mặc định (chỉ hiện khi có class active) */
.side-fixed.side-options-menu.panelOptionsMenu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.side-fixed.side-options-menu.panelOptionsMenu.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Mobile vs Desktop Menu Toggle
   Mobile: Hiện menu contrast cũ, Ẩn menu options mới
   Desktop: Ẩn menu contrast cũ, Hiện menu options mới */
@media (max-width: 1024px) {

  /* Ẩn menu options mới trên mobile - luôn ẩn */
  .side-fixed.side-options-menu.panelOptionsMenu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .side-fixed.side-options-menu.panelOptionsMenu.active {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Hiện menu contrast cũ trên mobile (chỉ khi có class active) */
  .side-fixed.side-dark-mode.panelDarkMode {
    display: none !important;
  }

  .side-fixed.side-dark-mode.panelDarkMode.active {
    display: block !important;
  }

  /* Đảm bảo body và content vẫn có thể scroll khi menu contrast active trên mobile */
  /* Không lock scroll cho body khi menu contrast mở */
  body.panelDarkMode-active,
  body.no-scroll:not(.popup-open) {
    overflow: auto !important;
    position: relative !important;
  }

  /* Đảm bảo content có thể scroll khi menu contrast active */
  .panelDarkMode.active~*,
  body .testQuestionExam,
  body .exams-main,
  body .exams-main-body {
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }
}

/* Desktop: Hiện menu options mới, Ẩn menu contrast cũ */
@media (min-width: 1025px) {

  /* Hiện menu options mới trên desktop (chỉ khi có class active) */
  .side-fixed.side-options-menu.panelOptionsMenu {
    display: none !important;
  }

  .side-fixed.side-options-menu.panelOptionsMenu.active {
    display: block !important;
  }

  /* Ẩn menu contrast cũ trên desktop - luôn ẩn, kể cả khi có active */
  .side-fixed.side-dark-mode.panelDarkMode {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .side-fixed.side-dark-mode.panelDarkMode.active {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 768px) {

  /* Options Menu Header - Mobile */
  .options-menu-header {
    padding: 16px;
    max-width: 100%;
  }

  .options-menu-title {
    font-size: 1.8rem;
  }

  /* Options Menu List - Mobile */
  .options-menu-list {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Options Menu Item - Mobile */
  .options-menu-item {
    padding: 20px 16px;
    min-height: 60px;
  }

  /* Close Button - Mobile */
  .side-fixed.side-options-menu .closeOptionsMenu {
    top: 16px !important;
    right: 16px !important;
  }

  .side-fixed.side-options-menu .closeOptionsMenu i {
    font-size: 1.8rem !important;
  }

  /* Options Menu Group - Mobile */
  .options-menu-group {
    margin-top: 0;
  }

  /* Ensure touch targets are large enough và có thể click được */
  .OpenSideDarkMode,
  .btn-icon.OpenSideDarkMode {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Đảm bảo menu Options hiển thị trên mobile */
  .side-fixed.side-options-menu.panelOptionsMenu {
    z-index: 10000 !important;
  }
}

@media (max-width: 480px) {
  .options-menu-header {
    padding: 12px;
  }

  .options-menu-title {
    font-size: 1.6rem;
  }

  .options-menu-list {
    padding-left: 12px;
    padding-right: 12px;
  }

  .options-menu-item {
    padding: 16px 12px;
    min-height: 56px;
  }

  .side-fixed.side-options-menu .closeOptionsMenu {
    top: 12px !important;
    right: 12px !important;
  }

  /* Đảm bảo nút OpenSideDarkMode click được trên mobile nhỏ */
  .OpenSideDarkMode,
  .btn-icon.OpenSideDarkMode {
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 99999 !important;
    /* Tăng z-index để cao hơn overlay */
    pointer-events: auto !important;
    position: relative !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    touch-action: manipulation !important;
  }

  /* Đảm bảo không có overlay nào che nút contrast trên mobile */
  .side-overlay {
    z-index: 998 !important;
  }

  .OpenSideDarkMode,
  .btn-icon.OpenSideDarkMode {
    z-index: 99999 !important;
  }
}

/* ============================================
   WiFi Icon Button
   ============================================ */
.btn-wifi-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #000;
  font-size: 1.6rem;
  transition: opacity 0.2s ease;
}

.btn-wifi-icon:hover {
  opacity: 0.7;
}

.btn-wifi-icon.offline {
  color: red !important;
  opacity: 1 !important;
}

.wifi-status-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
  font-weight: 600;
  color: #333;
  padding: 0 10px;
}

.wifi-status-msg i {
  font-size: 2rem;
}

/* Make b-group flex to align testing-qw-group and status messages horizontally */
.b-group {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap;
}

/* Ensure status messages are visible when shown */
.wifi-status-msg[style*="display: flex"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.status-reconnecting span {
  color: #333;
}

.wifi-status-msg.status-disconnected {
  color: red;
}

/* Push elements aside when messages are visible */
.wifi-status-msg {
  white-space: nowrap;
}

/* Spinner animation if not using fa-spin */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.fa-spin {
  animation: spin 2s linear infinite;
}

/* ============================================
   Navigation Buttons (Inspera Style)
   ============================================ */
.exams-controler.testQuestionController {
  display: flex;
  gap: 2.4px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.btn-nav {
  width: 55.88px;
  height: 55.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  background: #4C4C4C;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  padding: 0;
  margin: 0;
  border-radius: 0;
  font-size: 1.6rem;
  box-shadow: none !important;
  outline: none !important;
}

.btn-nav i {
  color: #ffffff;
  display: block;
}

.btn-nav:hover:not(:disabled) {
  background: #245e82;
}

.btn-nav:focus:not(:disabled) {
  outline: none;
  background: #245e82;
}

.btn-nav:disabled,
.btn-nav.disable {
  opacity: 0.4;
  cursor: not-allowed;
  background: #E0E0E0 !important;
  color: #9E9E9E !important;
  pointer-events: none;
}

.btn-nav-prev {
  margin-right: 2.4px;
}

.btn-nav-next {
  background: #000000;
}

.btn-nav-next:hover:not(:disabled):not(.disable),
.btn-nav-next:focus:not(:disabled):not(.disable) {
  background: #245e82;
}

.btn-nav-next:disabled,
.btn-nav-next.disable {
  background: #E0E0E0 !important;
  color: #9E9E9E !important;
}

/* ============================================
   Submit Button in Sidebar - Checkmark Style (Overlay trên navigation bar)
   ============================================ */
.exams-side.side-fixed-wrap {
  position: relative;
}

.exams-side-wrapper.testQuestionItemExam {
  /* Restore lại như ban đầu - không thay đổi layout */
  width: 100%;
  height: 100%;
}

.exams-side-submit {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0;
  border: none;
  z-index: 10;
  display: flex;
  align-items: center;
  /* Căn giữa theo chiều dọc với navigation bar */
  justify-content: center;
}

.btn-submit-checkmark {
  width: 80px;
  /* Dài ra hình chữ nhật */
  height: 100%;
  /* Chiều cao bằng với exams-side-wrapper */
  min-height: 55.2px;
  display: flex;
  align-items: center;
  /* Căn giữa icon check */
  justify-content: center;
  background: #4C4C4C;
  color: #ffffff;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
  margin: 0;
  font-size: 1.8rem;
  vertical-align: middle;
  /* Căn giữa theo chiều dọc */
}

/* Submit button cho mobile - ẩn trên desktop */
.btn-submit-mobile {
  display: none;
}

.btn-submit-checkmark:hover {
  background: #245e82;
}

.btn-submit-checkmark:focus {
  outline: none;
  background: #245e82;
}

.btn-submit-checkmark:disabled,
.btn-submit-checkmark.popup-open-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #4C4C4C;
}

.btn-submit-checkmark i {
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

/* Desktop: Nút submit cùng chiều cao với navigation bar (theo design với thanh đỏ) */
@media screen and (min-width: 1025px) {
  .exams-side-submit {
    top: 0;
    /* Cùng vị trí với navigation bar */
    bottom: 0;
    /* Cùng vị trí với navigation bar */
    height: 100%;
    /* Cùng chiều cao với navigation bar */
    display: flex;
    align-items: center;
    /* Căn giữa theo chiều dọc */
    justify-content: center;
  }

  .btn-submit-checkmark {
    height: 100%;
    align-items: center;
    /* Đảm bảo icon check căn giữa */
    justify-content: center;
    display: flex;
  }

  .btn-submit-checkmark i {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
}

/* Dark mode styles for navigation buttons - White on Black (Inspera Style) */
body.white-on-black .btn-nav {
  background: #C1C1C1 !important;
  /* Light gray như hình Inspera */
  color: #000000 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Bỏ tất cả pseudo-elements và outline có thể tạo ô xám */
body.white-on-black .btn-nav::before,
body.white-on-black .btn-nav::after {
  display: none !important;
  content: none !important;
}

body.white-on-black .btn-nav:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

body.white-on-black .btn-nav i {
  color: #000000 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Bỏ màu xám xung quanh icon chevron trong white-on-black */
body.white-on-black .btn-nav i.fa-chevron-right,
body.white-on-black .btn-nav i.fa-chevron-left {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Bỏ pseudo-elements của FontAwesome có thể tạo background xám */
body.white-on-black .btn-nav i.fa-chevron-right::before,
body.white-on-black .btn-nav i.fa-chevron-left::before,
body.white-on-black .btn-nav i.fa-chevron-right::after,
body.white-on-black .btn-nav i.fa-chevron-left::after {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.white-on-black .btn-nav:hover:not(:disabled):not(.disable),
body.white-on-black .btn-nav:focus:not(:disabled):not(.disable) {
  background: #245e82 !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

body.white-on-black .btn-nav:hover:not(:disabled):not(.disable) i,
body.white-on-black .btn-nav:focus:not(:disabled):not(.disable) i {
  color: #ffffff !important;
}

body.white-on-black .btn-nav:disabled,
body.white-on-black .btn-nav.disable {
  background: #E0E0E0 !important;
  color: #9E9E9E !important;
  opacity: 0.4;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

body.white-on-black .btn-nav-next {
  background: #4C4C4C !important;
  /* Darker gray như hình Inspera */
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Bỏ tất cả pseudo-elements và outline có thể tạo ô xám cho nút next */
body.white-on-black .btn-nav-next::before,
body.white-on-black .btn-nav-next::after {
  display: none !important;
  content: none !important;
}

body.white-on-black .btn-nav-next:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

body.white-on-black .btn-nav-next i {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Bỏ màu xám xung quanh icon chevron-right trong white-on-black */
body.white-on-black .btn-nav-next i.fa-chevron-right {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Bỏ pseudo-elements của FontAwesome có thể tạo background xám */
body.white-on-black .btn-nav-next i.fa-chevron-right::before,
body.white-on-black .btn-nav-next i.fa-chevron-right::after {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.white-on-black .btn-nav-next:hover:not(:disabled):not(.disable),
body.white-on-black .btn-nav-next:focus:not(:disabled):not(.disable) {
  background: #245e82 !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

body.white-on-black .btn-nav-next:disabled,
body.white-on-black .btn-nav-next.disable {
  background: #E0E0E0 !important;
  color: #9E9E9E !important;
}

body.yellow-on-black .btn-nav {
  background: #4C4C4C !important;
  color: #FFFF54 !important;
  border: none !important;
  box-shadow: none !important;
}

body.yellow-on-black .btn-nav i {
  color: #FFFF54 !important;
}

body.yellow-on-black .btn-nav:hover:not(:disabled):not(.disable),
body.yellow-on-black .btn-nav:focus:not(:disabled):not(.disable) {
  background: #245e82 !important;
  color: #FFFF54 !important;
}

body.yellow-on-black .btn-nav:disabled,
body.yellow-on-black .btn-nav.disable {
  background: #E0E0E0 !important;
  color: #9E9E9E !important;
  opacity: 0.4;
}

body.yellow-on-black .btn-nav-next {
  background: #000000 !important;
  color: #FFFF54 !important;
  border: none !important;
  box-shadow: none !important;
}

body.yellow-on-black .btn-nav-next i {
  color: #FFFF54 !important;
}

body.yellow-on-black .btn-nav-next:disabled,
body.yellow-on-black .btn-nav-next.disable {
  background: #E0E0E0 !important;
  color: #9E9E9E !important;
}

/* Dark mode styles for submit checkmark button */
body.white-on-black .btn-submit-checkmark {
  background: #4C4C4C;
  color: #ffffff;
}

body.white-on-black .btn-submit-checkmark:hover:not(:disabled) {
  background: #245e82;
}

body.white-on-black .btn-submit-checkmark i {
  color: #ffffff;
}

body.yellow-on-black .btn-submit-checkmark {
  background: #4C4C4C;
  color: #FFFF54;
}

body.yellow-on-black .btn-submit-checkmark:hover:not(:disabled) {
  background: #245e82;
}

body.yellow-on-black .btn-submit-checkmark i {
  color: #FFFF54;
}

/* ============================================
   Header mới với Test Candidate ID và Timer
   ============================================ */
/* Ẩn timer cũ */
.testing-qw-time {
  display: none !important;
}

/* Logo container - logo custom, logo IELTS, và Test Candidate ID/Timer nằm cùng hàng */
.hd-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* Khoảng cách giữa logo custom và logo IELTS */
}

.hd-logo .ielts-logo-header {
  height: 2.4rem;
  /* Kích thước logo IELTS */
  width: auto;
  display: block;
}

/* Container cho Test Candidate ID và Timer - nằm ngay sau logo IELTS */
.hd-test-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-left: 0.5rem;
  /* Khoảng cách sát sau logo IELTS */
}

/* Test taker ID styling - in đậm như hình demo */
.test-candidate-id {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

/* Số ID màu đỏ */
.test-taker-id-number {
  color: #d3262e;
}

/* Timer mới nằm dưới Test Candidate ID */
.exams-hd-timer-new {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.exams-hd-timer-new .timer-display {
  display: flex;
  align-items: baseline;
  font-size: 1.4rem;
  line-height: 1.2;
}

.exams-hd-timer-new .timer-minutes {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  /* Đảm bảo số không bị nhảy */
  margin-right: 0.3rem;
  transition: color 0.3s ease;
}

.exams-hd-timer-new .timer-text {
  font-weight: 400;
}

/* Timer warning khi còn <= 2 phút - màu đỏ, in đậm và nhấp nháy */
.exams-hd-timer-new .timer-minutes.timer-warning {
  color: #d3262e !important;
  font-weight: 700 !important;
  animation: timerBlink 1s ease-in-out infinite !important;
}

/* Cả "minutes remaining" cũng nhấp nháy khi còn <= 2 phút */
.exams-hd-timer-new .timer-display.timer-warning .timer-text {
  color: #d3262e !important;
  animation: timerBlink 1s ease-in-out infinite !important;
  font-weight: 700 !important;
}

@keyframes timerBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* ============================================
   Mobile: Submit Button trong exams-controler
   Desktop: Submit Button trong sidebar (overlay)
   ============================================ */

/* Mobile & tablet/narrow desktop: Ẩn submit button trong sidebar, hiện trong exams-controler */
@media screen and (max-width: 1279px) {

  /* Ẩn submit button trong sidebar */
  .exams-side-submit {
    display: none !important;
  }

  /* Hiện submit button trong exams-controler */
  .btn-submit-mobile {
    display: flex !important;
    width: 55.88px;
    height: 55.2px;
    min-height: 55.2px;
  }
}

/* Desktop rộng: Ẩn submit button trong exams-controler, hiện trong sidebar */
@media screen and (min-width: 1280px) {

  /* Ẩn submit button trong exams-controler */
  .btn-submit-mobile {
    display: none !important;
  }

  /* Hiện submit button trong sidebar */
  .exams-side-submit {
    display: inline-flex !important;
  }
}

/* Ẩn hoàn toàn nút back-to-top trên trang làm bài thi (mọi kỹ năng, mọi thiết bị) */
body.single-set_of_question .back-to-top,
body.single-set_of_question .backToTop {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================
   FINAL VISUAL FIXES FOR HISTORY VIEW (v4.5.333)
   ============================================ */

/* 1. Desktop: Hide "x" button */
@media screen and (min-width: 1025px) {

  body .sideCloseQues,
  .sec-exp-history .sideCloseQues,
  .sec-exp-history .side-fixed .sideCloseQues,
  .sec-exp-history .side-fixed.open .sideCloseQues,
  .sec-exp-history .side-fixed.active .sideCloseQues {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* 2. Mobile: Overlay & Visibility Fixes */
@media screen and (max-width: 1024px) {

  /* Sidebar: Drawer style on the RIGHT, below header */
  .sec-exp-history .side-fixed.sidePanelQues {
    z-index: 99999 !important;
    position: fixed !important;
    top: 100px !important;
    left: auto !important;
    right: 0 !important;
    width: 85% !important;
    max-width: 320px !important;
    bottom: 0 !important;
    background: #fff !important;
    overflow-y: auto !important;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1) !important;
    border-top-left-radius: 10px !important;
  }

  /* X button - UPPER RIGHT CORNER OF DRAWER (absolute positioning) */
  .sec-exp-history .side-fixed.sidePanelQues .sideCloseQues {
    z-index: 100000 !important;
    display: flex !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 35px !important;
    height: 35px !important;
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .sec-exp-history .side-fixed.sidePanelQues .sideCloseQues i,
  .sec-exp-history .side-fixed.sidePanelQues .sideCloseQues .icon {
    font-size: 16px !important;
    color: #333333 !important;
  }

  /* Navigation Buttons - Vertical Middle Align with Part Header */
  .sec-exp-history .exams-controler.testQuestionController {
    display: flex !important;
    position: fixed !important;
    top: 70px !important;
    /* Moved HIGHER for better alignment */
    left: auto !important;
    right: 15px !important;
    z-index: 9999 !important;
    background: transparent !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    pointer-events: none !important;
    border: none !important;
    width: auto !important;
    bottom: auto !important;
  }


}

/* ==========================================
   FIX Bug 1, 2, 3: Force-Visible CSS for Button Visibility Control
   MOBILE ONLY - Do not apply on desktop (min-width: 1025px)
   ==========================================*/

/* Mobile/Tablet only - force visible class */
@media screen and (max-width: 1024px) {

  /* Force visible class - overrides any hide/display:none */
  .sideOpenQues.force-visible {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .btn-icon.toggleExamNote.force-visible {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* FIX Bug 3 Regression: Fix toggleExamNote overlap and touch target */
  .toggleExamNote,
  .btn-icon.toggleExamNote {
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    position: relative !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    touch-action: manipulation !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Ensure hidden-by-js class works if we need it - applies everywhere */
.hidden-by-js {
  display: none !important;
}

/* ==========================================
   FIX: Sync Close Button Border Colors for All Contrast Modes
   closeDarkMode and closeNoteMark should have MATCHING borders
   ==========================================*/

/* Black on White (default) - Black border */
.closeDarkMode,
.closeNoteMark,
.side-close.closeDarkMode,
.side-close.closeNoteMark {
  border: 1px solid #000 !important;
  background: #fff !important;
}

.closeDarkMode i,
.closeNoteMark i {
  color: #000 !important;
}

/* White on Black - Gray/White border */
body.white-on-black .closeDarkMode,
body.white-on-black .closeNoteMark,
body.white-on-black .side-close.closeDarkMode,
body.white-on-black .side-close.closeNoteMark,
body.white-on-black .side-fixed .closeDarkMode,
body.white-on-black .side-fixed .closeNoteMark,
body.white-on-black .side-fixed.panelDarkMode .closeDarkMode,
body.white-on-black .side-fixed.panelNoteMark .closeNoteMark {
  border: 1px solid #616161 !important;
  background: #616161 !important;
}

body.white-on-black .closeDarkMode i,
body.white-on-black .closeNoteMark i {
  color: #fff !important;
}

/* Yellow on Black - Yellow border */
body.yellow-on-black .closeDarkMode,
body.yellow-on-black .closeNoteMark,
body.yellow-on-black .side-close.closeDarkMode,
body.yellow-on-black .side-close.closeNoteMark,
body.yellow-on-black .side-fixed .closeDarkMode,
body.yellow-on-black .side-fixed .closeNoteMark,
body.yellow-on-black .side-fixed.panelDarkMode .closeDarkMode,
body.yellow-on-black .side-fixed.panelNoteMark .closeNoteMark {
  border: 1px solid #FFFF54 !important;
  background: #FFFF54 !important;
}

body.yellow-on-black .closeDarkMode i,
body.yellow-on-black .closeNoteMark i {
  color: #000 !important;
}

/* ==========================================
   FIX Next/Prev Icons: Support for fa-arrow-left/right in Contrast Modes
   Duplicate rules from fa-chevron to ensure clean display
   ==========================================*/

/* White on Black - Clean up background/borders for arrow icons */
body.white-on-black .btn-nav i.fa-arrow-right,
body.white-on-black .btn-nav i.fa-arrow-left {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.white-on-black .btn-nav i.fa-arrow-right::before,
body.white-on-black .btn-nav i.fa-arrow-left::before,
body.white-on-black .btn-nav i.fa-arrow-right::after,
body.white-on-black .btn-nav i.fa-arrow-left::after {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Specific cleanup for btn-nav-next */
body.white-on-black .btn-nav-next i.fa-arrow-right {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body.white-on-black .btn-nav-next i.fa-arrow-right::before,
body.white-on-black .btn-nav-next i.fa-arrow-right::after {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* HISTORY VIEW: Only icon styling, use original button size */
.sec-exp-history .exams-controler.testQuestionController .btn-nav i {
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

/* GLOBAL FIX: Apply to ALL exam pages (live exam, history, etc.) */
/* Only change icon size, keep original button size */
.exams-controler .btn-nav i,
.testQuestionController .btn-nav i,
.btn-nav i.fa-arrow-left,
.btn-nav i.fa-arrow-right {
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  -webkit-text-stroke: 2px currentColor !important;
  text-stroke: 2px currentColor !important;
}

/* LIVE TEST: Add padding at bottom of content panels to prevent nav buttons from covering content */
/* Exclude history view (.sec-exp-history) */
body:not(.sec-exp-history) .test-panel-feedback-left,
body:not(.sec-exp-history) .test-panel-feedback-right {
  padding-bottom: 80px !important;
}

/* Drag-drop horizontal layout - triggered by ACF toggle in Question Group taxonomy */
/* When ON: Instructions on top, drag options HORIZONTAL row in middle, questions at bottom */
/* Layout matches realielts: heading -> instructions -> drag options (horizontal) -> questions */

/* Make the feedback container stack vertically */
.me-question-group-feedback.drag-horizontal {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Question heading - stays at VERY TOP with lowest order */
.me-question-group-feedback.drag-horizontal .me-question-heading {
  order: -2 !important;
  width: 100% !important;
}

/* Instructions/content - after heading, order 2 */
.me-question-group-feedback.drag-horizontal .me-question-group-content.testing-content {
  order: 2 !important;
  width: 100% !important;
  margin-bottom: 5px !important;
}

/* me-question-group-flex container - needs to be column and allow reordering children */
.me-question-group-feedback.drag-horizontal .me-question-group-flex {
  order: 3 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Drag-drop items container - HORIZONTAL ROW at TOP of flex (before questions) */
/* Use negative order to move it above the question items */
.me-question-group-feedback.drag-horizontal .me-question-drag.testDragGroupItems {
  order: -1 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 15px 0 !important;
  padding: 0 15px 15px 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.me-question-group-feedback.drag-horizontal .me-question-group-content p:last-child {
  margin-bottom: 0 !important;
}

/* Individual drag items - auto fit content */
.me-question-group-feedback.drag-horizontal .me-question-drag-item.testDragGroupItem {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Questions stay in their natural order (positive, after drag items) */
.me-question-group-feedback.drag-horizontal .me-question {
  order: 1 !important;
}

/* Also apply to non-visual mode wrapper */
.me-question-group-wrapper.drag-horizontal {
  display: flex !important;
  flex-direction: column !important;
}

.me-question-group-wrapper.drag-horizontal .me-question-group-left {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.me-question-group-wrapper.drag-horizontal .me-question-group-content.testing-content {
  order: 1 !important;
  width: 100% !important;
  margin-bottom: 5px !important;
}

.me-question-group-wrapper.drag-horizontal .me-question-group-flex {
  order: 2 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.me-question-group-wrapper.drag-horizontal .me-question-drag.testDragGroupItems {
  order: -1 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 15px 0 !important;
  padding: 0 15px 15px 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.me-question-group-wrapper.drag-horizontal .me-question-group-content p:last-child {
  margin-bottom: 0 !important;
}

.me-question-group-wrapper.drag-horizontal .me-question-drag-item.testDragGroupItem {
  flex: 0 0 auto !important;
}

.me-question-group-wrapper.drag-horizontal .me-question {
  order: 1 !important;
}

/* KEY FIX: Override .me-question-group-flxcnt wrapper created by JS */
/* This wrapper normally uses flex-direction: row causing side-by-side layout */
/* When drag-horizontal is active, switch to column layout */
.me-question-group-feedback.drag-horizontal .me-question-group-flxcnt {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}

/* Content (instructions like "Complete the sentences...") on top */
.me-question-group-feedback.drag-horizontal .me-question-group-flxcnt>.me-question-group-content {
  order: 1 !important;
  width: 100% !important;
}

/* Questions + drag items container below */
.me-question-group-feedback.drag-horizontal .me-question-group-flxcnt>.me-question-group-flex {
  order: 2 !important;
  width: 100% !important;
}

/* ===== DRAG-VERTICAL LAYOUT ===== */
/* Similar to horizontal but drag items stack in a COLUMN instead of row */
/* When ON: heading -> content -> drag options (vertical column) -> questions */

/* Make the feedback container stack vertically */
.me-question-group-feedback.drag-vertical {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Question heading - stays at VERY TOP */
.me-question-group-feedback.drag-vertical .me-question-heading {
  order: -2 !important;
  width: 100% !important;
}

/* Instructions/content */
.me-question-group-feedback.drag-vertical .me-question-group-content.testing-content {
  order: 2 !important;
  width: 100% !important;
  margin-bottom: 5px !important;
}

/* me-question-group-flex container */
.me-question-group-feedback.drag-vertical .me-question-group-flex {
  order: 3 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Drag-drop items container - VERTICAL COLUMN (one per row) */
.me-question-group-feedback.drag-vertical .me-question-drag.testDragGroupItems {
  order: -1 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 0 15px 0 !important;
  padding: 0 15px 15px 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.me-question-group-feedback.drag-vertical .me-question-group-content p:last-child {
  margin-bottom: 0 !important;
}

/* Individual drag items - auto width, left aligned */
.me-question-group-feedback.drag-vertical .me-question-drag-item.testDragGroupItem {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
}

/* Questions stay in their natural order */
.me-question-group-feedback.drag-vertical .me-question {
  order: 1 !important;
}

/* Override flxcnt wrapper for vertical layout */
.me-question-group-feedback.drag-vertical .me-question-group-flxcnt {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 5px !important;
}

/* Content on top in flxcnt */
.me-question-group-feedback.drag-vertical .me-question-group-flxcnt>.me-question-group-content {
  order: 1 !important;
  width: 100% !important;
}

/* Questions + drag items container below in flxcnt */
.me-question-group-feedback.drag-vertical .me-question-group-flxcnt>.me-question-group-flex {
  order: 2 !important;
  width: 100% !important;
}

/* Also apply to non-visual mode wrapper */
.me-question-group-wrapper.drag-vertical {
  display: flex !important;
  flex-direction: column !important;
}

.me-question-group-wrapper.drag-vertical .me-question-group-left {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.me-question-group-wrapper.drag-vertical .me-question-group-content.testing-content {
  order: 1 !important;
  width: 100% !important;
  margin-bottom: 5px !important;
}

.me-question-group-wrapper.drag-vertical .me-question-group-flex {
  order: 2 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.me-question-group-wrapper.drag-vertical .me-question-drag.testDragGroupItems {
  order: -1 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 0 15px 0 !important;
  padding: 0 15px 15px 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.me-question-group-wrapper.drag-vertical .me-question-group-content p:last-child {
  margin-bottom: 0 !important;
}

.me-question-group-wrapper.drag-vertical .me-question-drag-item.testDragGroupItem {
  flex: 0 0 auto !important;
  width: auto !important;
}

.me-question-group-wrapper.drag-vertical .me-question {
  order: 1 !important;
}