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

@import url("alpha-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.alpha-submit-hidden {
  display: none;
}

.alpha-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;
}

.alpha-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+.alpha-button-group {
  margin-top: 2.4rem;
}

.single-teacher .alpha-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;
}

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

.alpha-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 .alpha-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%; REMOVED - prevents shrinking when answer panel expands */
  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 .alpha-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 .alpha-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 .alpha-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 .alpha-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 .alpha-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 .alpha-replaced-content .me-question-wrap {
  margin-bottom: 0rem;
}

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

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

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

/* 1. Remove the slicing red border when explanation is active */
.takeItToReplacedJs.replaced-done .testQuestion.testReplacedQuestion:has(.alphaExplanationContent) {
  border-bottom: none !important;
}

/* 2. Format the Explanation Box to be an independent, safe-width block that pushes content down */
.takeItToReplacedJs.replaced-done .alpha-replaced-content .alphaExplanationContent {
  display: block;
  float: none;
  clear: both;
  margin-top: 10px;
  margin-bottom: 10px;

  /* Sizing that strictly Obeys container bounds to prevent horizontal scrollbars */
  margin-left: 0 !important;
  width: 100% !important;
  /* Force adherence to parent bound, completely stopping intrinsic table expansion */
  max-width: 350px !important;
  /* Cap it comfortably wide when in spacious non-table paragraphs */
  min-width: 0 !important;
  /* Allow shrinking in narrow columns */
  box-sizing: border-box !important;

  /* Visuals */
  background: #fdfdfd;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 15px 45px 15px 15px;
  text-align: justify;
  border: 1px solid #f0f0f0;
  white-space: normal !important;
  line-height: 1.6 !important;
  word-wrap: break-word;
  overflow-wrap: break-word !important;

  /* Ensure it overrides absolute defaults naturally */
  position: relative !important;
  right: auto;
  z-index: 10;
}

/* 3. Ensure contents inside the explanation also wrap normally — exclude the close button */
.takeItToReplacedJs.replaced-done .alpha-replaced-content .alphaExplanationContent *:not(.alpha-close-explanation-btn) {
  line-height: 1.6 !important;
  white-space: normal !important;
  height: auto !important;
  max-height: none !important;
  border: none !important;
  background: transparent !important;
}

.takeItToReplacedJs.replaced-done .alpha-replaced-content .alphaExplanationContent span.p,
.takeItToReplacedJs.replaced-done .alpha-replaced-content .alphaExplanationContent span.div {
  display: block !important;
  margin-bottom: 8px !important;
}

/* 4. Kill parent absolute positioning offsets & force block boundaries so it cannot overflow table cells
   EXCEPT for dragdrop and wordsFormat which have customized absolute tooltips defined in me-styles.css */
.takeItToReplacedJs.replaced-done .testQuestion.testReplacedQuestion:not(.me-question-dragdropFormat):not(.me-question-wordsFormat) .me-question-explanation:has(.alphaExplanationJs.active) {
  position: relative !important;
  left: 0 !important;
  transform: none !important;
  display: block !important;
  /* Force block to firmly hook into table cell limits */
  width: 100% !important;
  /* Use 100% of cell width as definitive container box */
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* Premium Mac-style Square Close Button for Explanations */
.alpha-close-explanation-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: system-ui, sans-serif !important;
  border: 1.5px solid #1a1a1a !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  z-index: 101 !important;
  box-sizing: border-box !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  outline: none !important;
  text-decoration: none !important;
}

.alpha-close-explanation-btn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35) !important;
  transform: none !important;
}

.alpha-close-explanation-btn:active {
  background: #dc2626 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: scale(0.95) !important;
}

/* Constrain child content dynamically to the newly formed block wrapper */
.takeItToReplacedJs.replaced-done .testQuestion.testReplacedQuestion:not(.me-question-dragdropFormat):not(.me-question-wordsFormat) .alpha-replaced-content .alphaExplanationContent {
  max-width: 100% !important;
}

/* TABLE SCROLL FIX: Override the above min-width if the explanation is inside a table cell.
   This allows narrow table columns (like Activities A, B, C...) to safely constrain the explanation
   without pushing the entire table's boundaries outward and causing horizontal scrollbars. */
table .takeItToReplacedJs.replaced-done .testQuestion.testReplacedQuestion:not(.me-question-dragdropFormat):not(.me-question-wordsFormat) .alpha-replaced-content .alphaExplanationContent {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

table .takeItToReplacedJs.replaced-done .testQuestion.testReplacedQuestion:not(.me-question-dragdropFormat):not(.me-question-wordsFormat) .me-question-explanation:has(.alphaExplanationJs.active) {
  width: 100% !important;
}

/* UNIVERSAL TOOLTIP CLIPPING FIX:
   Instead of trying to center the 320px bubble (which causes left-side clipping when the input is near the left edge),
   we force the tooltip to ALWAYS align left and flow rightward.
   Specificity explicitly bumped with html body to override me-styles.css */
html body .me-question.me-question-dragdropFormat.me-question-evaluated .alphaExplanationContent,
html body .me-question.me-question-wordsFormat.me-question-evaluated .alphaExplanationContent {
  left: -10px !important;
  right: auto !important;
  transform: none !important;
  padding-right: 45px !important;
  /* Reserve space for the Mac-style close button */
}

/* Re-align tooltip arrow pointer to permanently point at the `?` icon sitting at left:0 */
html body .me-question.me-question-dragdropFormat.me-question-evaluated .alphaExplanationContent::after,
html body .me-question.me-question-wordsFormat.me-question-evaluated .alphaExplanationContent::after {
  left: 20px !important;
  right: auto !important;
  transform: none !important;
}

html body .me-question.me-question-dragdropFormat.me-question-evaluated .alphaExplanationContent::before,
html body .me-question.me-question-wordsFormat.me-question-evaluated .alphaExplanationContent::before {
  left: 18px !important;
  right: auto !important;
  transform: none !important;
}

/* SMART TOOLTIP CLIPPING FIXES */
.alpha-clip-left-fix {
  left: -10px !important;
  right: auto !important;
  transform: none !important;
}

.alpha-clip-left-fix::after {
  left: 20px !important;
  right: auto !important;
  transform: none !important;
}

.alpha-clip-left-fix::before {
  left: 18px !important;
  right: auto !important;
  transform: none !important;
}

.alpha-clip-right-fix {
  right: -10px !important;
  left: auto !important;
  transform: none !important;
}

.alpha-clip-right-fix::after {
  right: 20px !important;
  left: auto !important;
  transform: none !important;
}

.alpha-clip-right-fix::before {
  right: 18px !important;
  left: auto !important;
  transform: none !important;
}

/* 5. Fix structural z-index for split gutters (overlapping scrollbar fix) */
.gutter,
.gutter-horizontal,
.gutter-vertical,
.ui-split-handle,
.me-split-handle,
.test-panel-feedback-resizer,
.test-panel-feedback-resizer-answer {
  position: relative !important;
  z-index: 99999 !important;
}

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

.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .alphaTrue select,
.me-question.me-question-wordsFormat.me-question-evaluated .me-question-wrap .alphaFalse 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.alpha-content,
.me-question.me-question-speakFormat .t-question-label.alpha-content,
.me-question-speakFormat .t-question-label.alpha-highlightable-content,
.me-question.me-question-speakFormat .t-question-label.alpha-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 .alpha-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: none;
}

.acc-ans .b-part .b-ans-it .b-gr .t-ans {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.acc-ans .b-part .b-ans-it .b-gr .t-ans .t-txt.t-false {
  text-decoration: line-through;
  color: #999;
  font-weight: 400;
}

.acc-ans .b-part .b-ans-it .b-gr .t-ans .t-txt.t-answer {
  color: #e53e3e;
  font-weight: 600;
}

.acc-ans .b-part .b-ans-it .b-gr .t-ans .t-txt.t-true {
  color: #38a169;
  font-weight: 600;
}

.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%; REMOVED - prevents panel from expanding when resized */
}

.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-alpha-intelligence {
  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-alpha-intelligence:hover {
  background: #005a87;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 124, 186, 0.3);
}

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

.btn-alpha-intelligence.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;
}

/* White on black: đổi màu câu dịch xanh lá → vàng cho dễ đọc */
body.white-on-black .translation-panel .alpha-vietnamese-explanation {
  color: #ffff55 !important;
  border-left-color: #ffff55 !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 .alpha-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 .alpha-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 {
  /* Giới hạn z-index thấp để không nổi lên trên sidebar */
  position: relative !important;
  z-index: 1 !important;
}

/* Exam card thumbnails: natural size, auto height, no crop, no gray background */
.exq-it .b-image {
  overflow: hidden !important;
  border-radius: 8px 8px 0 0 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.exq-it .b-image .inner {
  width: 85% !important;
  display: block !important;
}

/* Portrait images: already handled by base .inner rule */
.exq-it .b-image.portrait-img .inner {
  width: 50% !important;
  margin: 0 auto !important;
}

.exq-it .b-image .inner img,
.exq-it .b-image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  position: static !important;
}


.exq-it .b-head {
  display: flex !important;
  flex-direction: column !important;
}

.exq-it .b-ctn {
  padding: 1.5rem !important;
  flex: 1 !important;
}

.exq-it .b-ctn .text {
  /* 1. Auto Fit: Chữ tự co giãn theo màn hình */
  font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
  line-height: 1.4 !important;
  margin-bottom: 0.8rem !important;

  /* 2. Căn lề đều hai bên (Justify) */
  text-align: -webkit-center !important;
  text-justify: inter-word;
  /* Giúp khoảng cách giữa các từ đều hơn */

  /* 3. Cho phép tự động xuống dòng (Wrap text) */
  display: block !important;
  -webkit-line-clamp: unset !important;
  /* Bỏ giới hạn 2 dòng */
  overflow: visible !important;
  height: auto !important;
  /* QUAN TRỌNG: Để khung tự nở theo chữ */
  white-space: normal !important;
  /* Đảm bảo chữ tự xuống dòng */
}

/* 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 content visibility handled by JS slideToggle */
.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 */

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

.alphaExamFilterResults.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ừ alphatheme 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;
}

/* Nhóm chuyên mục / thể loại filter: mỗi nhóm collapse riêng */
.alpha-filter-cat-subpanel.alpha-filter-cat-group,
.alpha-filter-examtype-subpanel.alpha-filter-examtype-group {
  margin-bottom: 0.4rem;
  border: 1px solid #ececf0;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafc;
}

.alpha-filter-cat-subpanel .alpha-filter-cat-group-head.filter-title,
.alpha-filter-examtype-subpanel .alpha-filter-examtype-group-head.filter-title {
  padding: 0.75rem 0.9rem;
  margin: 0;
  border-bottom: 1px solid #ececf0;
  background: #fff;
}

.alpha-filter-cat-subpanel .alpha-filter-cat-group-head .tt,
.alpha-filter-examtype-subpanel .alpha-filter-examtype-group-head .tt {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2d2a32;
  margin: 0;
}

.alpha-filter-cat-subpanel .alpha-filter-cat-group-body.filt-list,
.alpha-filter-examtype-subpanel .alpha-filter-examtype-group-body.filt-list {
  padding: 0.5rem 0.6rem 0.65rem;
  margin: 0;
  background: #fafafc;
}

.alpha-filter-cat-subpanel:last-child,
.alpha-filter-examtype-subpanel:last-child {
  margin-bottom: 0;
}

.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/Border moved to inner element to fix broken corners */
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      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;
      /* Move styling here to fix corner collision */
      background: #ffffff !important;
      background-clip: padding-box !important;
      border-radius: 1.2rem !important;
      border: 1px solid #f0f0f0 !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
      padding: 0 !important;
      overflow: hidden !important;
      /* Clip nested content arcs */
    }

    /* Desktop: wrapper remains transparent to allow nested corners to render correctly */
    body .exam-wrap.exam-with-sidebar .exam-sidebar,
    .exam-wrap.exam-with-sidebar .exam-sidebar,
    .exam-sidebar {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      width: 100% !important;
      max-width: 32rem !important;
      display: flex !important;
      position: sticky !important;
      top: 2rem !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;
    /* FIX: Share the top radius of the parent to prevent white-box hiding border-arc */
    border-top-left-radius: 1.2rem !important;
    border-top-right-radius: 1.2rem !important;
  }

  /* Ẩ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 #000000 !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: #616161 !important;
    background-color: #616161 !important;
    border: none !important;
    border: 1px solid #616161 !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: #fff !important;
    background: #616161 !important;
    background-color: #616161 !important;
    border: 1px solid #616161 !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: #ffff54 !important;
    background-color: #ffff54 !important;
    border: none !important;
    border: 1px solid #ffff54 !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;
    background-color: #ffff54 !important;
    border: 1px solid #ffff54 !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;
  }

}

/* ============================================
   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 .alphaExamFilterResults,
  .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: none;
  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;
  padding: 26.4px 24px 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 {
  flex: 1;
  font-size: 1.6rem;
  font-weight: 400;
  color: #000000;
}

.options-menu-check {
  font-size: 1.4rem;
  color: #000000;
  visibility: hidden;
  margin-left: 0;
  margin-right: 1.5em;
  flex-shrink: 0;
  width: 1.4rem;
  text-align: center;
}

.options-menu-option.active .options-menu-check {
  visibility: visible;
}

.options-menu-contrast-icon {
  width: 57px;
  height: 38px;
  display: block;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
  margin-left: 1.5em;
  flex-shrink: 0;
  object-fit: contain;
}

/* 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;
}

/* Override me-styles.css .exams-hd-act .btn-icon { margin: 0 !important } with higher specificity */
.exams-hd-act .btn-icon.btn-wifi-icon {
  margin-right: 7px !important;
}

.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: 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Ensure status messages are hidden when supposed to be */
.wifi-status-msg[style*="display: none"] {
  display: none !important;
}

/* 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;
}

/* Smooth linear spinner — keyframes compound translateZ(0) + rotate so
   the element stays on the GPU compositor layer throughout the animation.
   Without translateZ inside the keyframes, browser may drop the GPU layer
   between frames → sub-pixel jitter / wobble on Webkit. */
@keyframes spin {
  from { transform: translateZ(0) rotate(0deg); }
  to   { transform: translateZ(0) rotate(360deg); }
}

.fa-spin {
  animation: spin 2s linear infinite;
  transform-origin: 50% 50%;
  display: inline-block;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* KHÔNG đặt transform: translateZ(0) static ở đây vì sẽ override
     animation's transform → element đơ không xoay. GPU layer đã được
     activate qua will-change + backface-visibility. Keyframes tự
     include translateZ(0) trong rotate compound để giữ compositor layer. */
}

/* ============================================
   Navigation Buttons (Inspera Style)
   ============================================ */
.exams-controler.testQuestionController {
  display: flex;
  gap: 2.4px;
  align-items: center;
  justify-content: flex-end;
  right: 50px !important;
  margin-bottom: 20px;
  z-index: 50 !important;
}

.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: 3.6rem;
  box-shadow: none !important;
  outline: none !important;
}

.btn-nav i {
  color: #ffffff;
  display: block;
  -webkit-text-stroke: 2px currentColor !important;
}

.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 */
}

/* Guideline & Introduction Panel - Center all content */
.alpha-test-intro .ite-panel {
  align-items: center !important;
  text-align: center !important;
}

.alpha-test-intro .ite-panel .btn {
  margin-top: 1rem;
}

/* 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;
  font-size: 2.4rem !important;
  /* To gấp đôi - bằng icon mũi tên của nút Previous/Next */
}

/* Selector cụ thể cho FontAwesome icon */
.btn-submit-checkmark i.fa-check,
.btn-submit-checkmark i.fa-solid,
.btn-submit-checkmark .fa-check {
  font-size: 2.4rem !important;
}

/* 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;
    font-size: 1.6rem;
    /* Bằng với font-size của .btn-nav (previous/next) */
    -webkit-text-stroke: 2px currentColor !important;
  }
}

/* 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;
  }

  @media (max-width: 768px) {

    /* =========================================
     0) HEIGHT VARS
     ========================================= */
    .sec-exp-history {
      --history-mobile-fit-height: calc(110dvh - 240px);
    }

    /* Trang test bình thường (không có .sec-exp-history) */
    body.single-set_of_question {
      --history-mobile-fit-height: calc(110dvh - 240px);
    }

    /* =========================================
     1) 2-PANEL WRAPPER (History + Single)
     ========================================= */
    .sec-exp-history .test-panel-feedback-flex-with-answer,
    body.single-set_of_question .test-panel-feedback-flex-with-answer {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;

      height: var(--history-mobile-fit-height) !important;
      max-height: var(--history-mobile-fit-height) !important;
      min-height: 0 !important;

      overflow: hidden !important;
      align-items: stretch !important;
      /* chống collapse panel dưới */
    }

    /* =========================================
     2) TOP PANEL = CONTENT (Reading) / AUDIO (Listening)
     GIỮ Y CHANG: wrapper tự scroll
     ========================================= */
    .sec-exp-history .test-panel-feedback-flex-with-answer .test-panel-feedback-wrap.test-panel-feedback-content,
    body.single-set_of_question .test-panel-feedback-flex-with-answer .test-panel-feedback-wrap.test-panel-feedback-content,
    .sec-exp-history .test-panel-feedback-flex-with-answer .test-panel-feedback-wrap.test-panel-feedback-audio,
    body.single-set_of_question .test-panel-feedback-flex-with-answer .test-panel-feedback-wrap.test-panel-feedback-audio {
      display: flex !important;
      flex-direction: column !important;

      flex: 1 1 0 !important;
      min-height: 0 !important;

      overflow-y: auto !important;
      /* ✅ y chang reading gốc */
      -webkit-overflow-scrolling: touch;
    }

    /* Nếu trong content/audio có left/right thì đừng tạo scroll con */
    .sec-exp-history .test-panel-feedback-wrap.test-panel-feedback-content .test-panel-feedback-left,
    .sec-exp-history .test-panel-feedback-wrap.test-panel-feedback-content .test-panel-feedback-right,
    body.single-set_of_question .test-panel-feedback-wrap.test-panel-feedback-content .test-panel-feedback-left,
    body.single-set_of_question .test-panel-feedback-wrap.test-panel-feedback-content .test-panel-feedback-right,
    .sec-exp-history .test-panel-feedback-wrap.test-panel-feedback-audio .test-panel-feedback-left,
    .sec-exp-history .test-panel-feedback-wrap.test-panel-feedback-audio .test-panel-feedback-right,
    body.single-set_of_question .test-panel-feedback-wrap.test-panel-feedback-audio .test-panel-feedback-left,
    body.single-set_of_question .test-panel-feedback-wrap.test-panel-feedback-audio .test-panel-feedback-right {
      width: 100% !important;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }

    /* Hide resizers */
    .sec-exp-history .test-panel-feedback-resizer,
    .sec-exp-history .test-panel-feedback-resizer-answer,
    body.single-set_of_question .test-panel-feedback-resizer,
    body.single-set_of_question .test-panel-feedback-resizer-answer {
      display: none !important;
    }

    /* =========================================
     3) BOTTOM PANEL = ANSWER / EXPLANATION
     FIX Listening bị co (33px): bắt buộc display:flex + min-height:0
     ========================================= */
    .sec-exp-history .test-panel-feedback-flex-with-answer .test-panel-feedback-wrap-answer,
    body.single-set_of_question .test-panel-feedback-flex-with-answer .test-panel-feedback-wrap-answer {
      display: flex !important;
      flex-direction: column !important;

      flex: 1 1 0 !important;
      min-height: 0 !important;

      overflow: hidden !important;
      align-self: stretch !important;
    }

    .sec-exp-history .test-panel-feedback-wrap-answer .test-panel-feedback-answer,
    body.single-set_of_question .test-panel-feedback-wrap-answer .test-panel-feedback-answer {
      height: 100% !important;
      max-height: 100% !important;
      min-height: 0 !important;

      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    /* =========================================
     4) KILL OUTER SCROLL (an toàn hơn fixed body)
     ========================================= */
    html:has(.test-panel-feedback-flex-with-answer),
    body:has(.test-panel-feedback-flex-with-answer) {
      height: 110dvh !important;
      overflow: hidden !important;
    }

    /* Nếu wrapper ngoài cùng còn tạo scroll */
    body:has(.test-panel-feedback-flex-with-answer) .exams-main-wrap,
    body:has(.test-panel-feedback-flex-with-answer) .wrap-panel-test {
      overflow: hidden !important;
    }

    /* =========================================
     5) OPTION: nếu bạn vẫn muốn y chang code gốc (fixed body)
     BẬT cái này lên thì comment block (4) bên trên lại.
     ========================================= */
    /*
  body:has(.sec-exp-history),
  body.single-set_of_question:has(.test-panel-feedback-flex-with-answer){
    overflow:hidden !important;
    height:100vh !important;
    position:fixed !important;
    width:100% !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;
  }

  /* Fix for score display: bypass JS counter */
  .t-num-static {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.5;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: inherit;
    display: inline-block;
  }
}

/* =====================================================
   DRAG-HORIZONTAL / DRAG-VERTICAL — GLOBAL (all viewports)
   These rules must be OUTSIDE @media to apply on desktop
   ===================================================== */

/* === Visual mode: .me-question-group-feedback === */
.me-question-group-feedback.drag-horizontal {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.me-question-group-feedback.drag-horizontal .me-question-heading {
  order: -2 !important;
  width: 100% !important;
}

.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-feedback.drag-horizontal .me-question-group-flex {
  order: 3 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.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 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.me-question-group-feedback.drag-horizontal .me-question-drag-item.testDragGroupItem {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.me-question-group-feedback.drag-horizontal .me-question {
  order: 1 !important;
}

.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;
}

.me-question-group-feedback.drag-horizontal .me-question-group-flxcnt>.me-question-group-content {
  order: 1 !important;
  width: 100% !important;
}

.me-question-group-feedback.drag-horizontal .me-question-group-flxcnt>.me-question-group-flex {
  order: 2 !important;
  width: 100% !important;
}

/* === Non-visual mode: .me-question-group-wrapper === */
.me-question-group-wrapper.drag-horizontal {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.me-question-group-wrapper.drag-horizontal .me-question-group-left {
  width: 100% !important;
  flex: none !important;
}

.me-question-group-wrapper.drag-horizontal .me-question-group-right {
  width: 100% !important;
  flex: none !important;
}

.me-question-group-wrapper.drag-horizontal .me-question-group-flex {
  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 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.me-question-group-wrapper.drag-horizontal .me-question-drag-item.testDragGroupItem {
  flex: 0 0 auto !important;
}

/* === Visual mode: drag-vertical === */
.me-question-group-feedback.drag-vertical {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.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: 10px 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

.me-question-group-feedback.drag-vertical .me-question-group-flxcnt {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 5px !important;
}

/* === Non-visual mode: drag-vertical wrapper === */
.me-question-group-wrapper.drag-vertical {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.me-question-group-wrapper.drag-vertical .me-question-group-left {
  width: 100% !important;
  flex: none !important;
}

.me-question-group-wrapper.drag-vertical .me-question-group-right {
  width: 100% !important;
  flex: none !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 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

/* === Allow text highlight inside drag items ===
   draggable=true on parent div blocks user-select by default.
   Restore text selection ability like 14-FEB version. */
.me-question-drag-item.testDragGroupItem .text,
.me-question-drag-item.testDragItems .text {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

/* === NO JUSTIFY for MCQ and dragdrop questions in test panel right ===
   Reading passage (left) keeps justify; question/answer panel (right) uses left-align.
   Applies to: defaultFormat (MCQ/radio/checkbox), dragdropFormat, wordsFormat. */
.test-panel-feedback-right .alpha-content,
.test-panel-feedback-right .alpha-content p,
.test-panel-feedback-right .alpha-highlightable-content,
.test-panel-feedback-right .alpha-highlightable-content p,
.test-panel-feedback-right .me-question-content,
.test-panel-feedback-right .me-question-content p,
.me-question-defaultFormat .alpha-content,
.me-question-defaultFormat .alpha-content p,
.me-question-defaultFormat .t-question,
.me-question-defaultFormat .t-question p,
.me-question-defaultFormat .me-question-in4r,
.me-question-defaultFormat .me-question-in4r p,
.me-question-dragdropFormat .alpha-content,
.me-question-dragdropFormat .alpha-content p,
.me-question-dragdropFormat .t-question,
.me-question-dragdropFormat .t-question p,
.me-question-wordsFormat .alpha-content,
.me-question-wordsFormat .alpha-content p,
.me-question-wordsFormat .t-question,
.me-question-wordsFormat .t-question p {
  text-justify: auto !important;
}

/* === Ẩn drag items pool trong view lịch sử / xem chi tiết đáp án ===
   JS adds body.is-history-mode when URL has ?history= param (me-test.js).
   Also covers sec-exp-history standalone page. */
body.is-history-mode .me-question-drag,
body.is-history-mode .me-question-drag.testDragGroupItems,
body.sec-exp-history .me-question-drag,
body.sec-exp-history .me-question-drag.testDragGroupItems {
  display: none !important;

}

/* =====================================================
   GLOBAL FIX: padding-bottom for content panels
   The same rule exists inside @media (max-width:1024px) at ~line 6845,
   but that only applies on mobile. This duplicate applies on ALL screens.
   ===================================================== */
body:not(.sec-exp-history) .test-panel-feedback-left,
body:not(.sec-exp-history) .test-panel-feedback-right {
  padding-bottom: 80px !important;
}

/* IMPORTANT: Override text-align to respect editor alignment attributes */
.alpha-content [align="center"],
.alpha-content [style*="text-align: center"],
.alpha-content [style*="text-align:center"],
.alpha-highlightable-content [align="center"],
.alpha-highlightable-content [style*="text-align: center"],
.alpha-highlightable-content [style*="text-align:center"] {
  text-align: center !important;
}

.alpha-content [align="right"],
.alpha-content [style*="text-align: right"],
.alpha-content [style*="text-align:right"],
.alpha-highlightable-content [align="right"],
.alpha-highlightable-content [style*="text-align: right"],
.alpha-highlightable-content [style*="text-align:right"] {
  text-align: right !important;
}

.alpha-content [align="left"],
.alpha-content [style*="text-align: left"],
.alpha-content [style*="text-align:left"],
.alpha-highlightable-content [align="left"],
.alpha-highlightable-content [style*="text-align: left"],
.alpha-highlightable-content [style*="text-align:left"] {
  text-align: left !important;
}

/* 1. Force absolute centering for all banner text containers */
.bnh-wrap,
.bnh-wrap .bnh-head,
.bnh-wrap .bnh-head .b-head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2. Subtitle (Tiêu đề phụ) - Ensure center alignment */
.bnh-wrap .bnh-head .b-head span.txt,
.bnh-wrap .bnh-head .b-head span:first-child {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
  float: none !important;
}

/* 3. Main Title (Tiêu đề chính) - Absolute center and single line on desktop */
.bnh-wrap .bnh-head .t-text {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
}

@media screen and (min-width: 1200px) {
  .bnh-wrap .bnh-head .t-text {
    white-space: nowrap !important;
    /* No wrap on desktop */
    width: auto !important;
    /* Let it define its own width but keep centered by parent flex */
    max-width: none !important;
  }
}

/* 4. Description centering */
.bnh-wrap .t-des {
  display: block !important;
  width: 100% !important;
  max-width: 800px !important;
  /* Optional: limit width for readability */
  margin: 1rem auto !important;
  text-align: center !important;
}

/* 5. Image centering */
.bnh-wrap .bnh-image {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 2rem auto !important;
}

.bnh-wrap .bnh-image .inner-img,
.bnh-wrap .bnh-image .inner-img img {
  margin: 0 auto !important;
  display: block !important;
}

/* ===== EXAM LIST PAGE FIXES ===== */

/* 2. Breadcrumb alignment: align left edge with filter sidebar column (same 40px as content) */
.page-exam-list .breadcrumb-wrapper .container {
  max-width: 100% !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* ============================================
   UNIFIED PAGE HEADER BANNER
   ============================================ */
.page-header-banner {
  padding: 1rem 0 2rem 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.page-header-banner .t-title {
  font-size: 3.2rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-transform: none;
  /* Keep original casing */
}

/* Dark Mode support */
.ae-dark-mode .page-header-banner {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.ae-dark-mode .page-header-banner .t-title {
  color: #fff !important;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .page-header-banner {
    padding: 0.5rem 0 1.5rem 0;
  }

  .page-header-banner .t-title {
    font-size: 2.4rem !important;
  }
}

/* Hide explanation close button for multiple-choice questions */
.me-question-defaultFormat .alpha-close-explanation-btn {
  display: none !important;
}

/* Alignment fix for pages with container-fluid */
.page-exam-list .page-header-banner {
  padding-left: 0;
  padding-right: 0;
}

/* Chrome: drawer/overlay translateX(110%) vẫn hit-test vùng layout gốc → chặn
   search + burger trên header (Safari dùng vị trí sau transform nên không lỗi). */
.mobile:not(.open),
.mobile-overlay:not(.open) {
  pointer-events: none !important;
  visibility: hidden !important;
}
.mobile.open,
.mobile-overlay.open {
  pointer-events: auto !important;
  visibility: visible !important;
}
.hd-search-box:not(.open) {
  pointer-events: none !important;
}
.hd-search-box.open {
  pointer-events: auto !important;
}
@media screen and (max-width: 1200px) {
  .hd-act {
    position: relative;
    z-index: 2;
  }
  .hd-burger,
  .hd-search.searchJS,
  .hd-act .hd-ctr,
  .alpha-skin-toggle,
  .ae-dark-mode-toggle-header {
    position: relative;
    z-index: 3;
    pointer-events: auto !important;
    touch-action: manipulation;
    cursor: pointer;
    flex-shrink: 0;
    display: flex !important;
  }
  .ae-dark-mode-toggle-header,
  .hd-act .ae-dark-mode-toggle.ae-dark-mode-toggle-header {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 32px;
    min-width: 32px;
    height: 32px;
    flex: 0 0 32px;
    box-sizing: border-box;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
  }
  .col-right .hd-group,
  .col-right .hd-act {
    overflow: visible !important;
    flex-wrap: nowrap !important;
  }
  /* Mobile: chỉ dark mode, ẩn skin toggle (desktop không đổi) */
  .hd-act .alpha-skin-toggle {
    display: none !important;
  }
  .hd-act .ae-dark-mode-toggle-header {
    display: flex !important;
    order: 10;
  }
  .hd-act .hd-search.searchJS { order: 11; }
  .hd-act .hd-cart { order: 12; }
  .hd-act .btn-login { order: 13; }
  .hd-act .hd-btn { order: 14; }
  .hd-act #hamburger,
  .hd-act .hd-burger { order: 15; }
  .hd-burger .burger,
  .hd-burger .hamburger,
  .hd-search.searchJS .icon,
  .hd-ctr .icon {
    pointer-events: none;
  }
}

@media screen and (min-width: 1201px) {
  .hd-act .ae-dark-mode-toggle-header,
  .hd-act .alpha-skin-toggle,
  .hd-act .hd-search.searchJS,
  .hd-act .hd-cart,
  .hd-act .btn-login,
  .hd-act .hd-btn,
  .hd-act #hamburger,
  .hd-act .hd-burger {
    order: unset;
  }
  .hd-act .alpha-skin-toggle {
    display: flex !important;
  }
}

/* Account /thong-tin/ — avatar upload box (flat only), full width dưới form */
html:not(.theme-skeuo) .acc-panel--profile .acc-profile-side .acc-avt-box {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}
.acc-panel--profile .acc-avt-box__head {
  margin-bottom: 16px;
  text-align: center;
}
.acc-panel--profile .acc-avt-box__head .text {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  color: #262626;
  margin-bottom: 4px;
}
.acc-panel--profile .acc-avt-box__desc {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.45;
  color: #6b7280;
}
.acc-panel--profile .acc-avt-box .acc-avt {
  max-width: none;
  margin: 0;
  width: 100%;
}
.acc-panel--profile .acc-avt-box .acc-avt .b-img {
  width: 120px;
  max-width: 120px;
  flex: 0 0 120px;
}
.acc-panel--profile .acc-avt-box .acc-avt .b-img .inner {
  width: 120px;
  height: 120px;
  padding-top: 0;
  aspect-ratio: 1 / 1;
}
.acc-panel--profile .acc-profile-side {
  margin-top: 2.4rem;
}

/* Lưu thông tin — chữ + mũi tên cùng một hàng (flat + skeuo) */
.acc-panel--profile .acc-info .alphaSubmitButton[type="submit"],
.acc-panel--profile .acc-info .btn.invert[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  width: fit-content !important;
  max-width: 100% !important;
}
.acc-panel--profile .acc-info .alphaSubmitButton .loading-area-text,
.acc-panel--profile .acc-info .btn.invert .loading-area-text {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.8rem !important;
  white-space: nowrap !important;
  width: auto !important;
}
.acc-panel--profile .acc-info .alphaSubmitButton .loading-area-text .inner,
.acc-panel--profile .acc-info .btn.invert .loading-area-text .inner {
  display: inline !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.acc-panel--profile .acc-info .alphaSubmitButton .loading-area-text .icon,
.acc-panel--profile .acc-info .btn.invert .loading-area-text .icon {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Avatar — cột căn giữa; nút Tải lên rộng bằng dòng hint */
.acc-panel--profile .acc-avt-box .acc-avt .b-inner {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.6rem;
  width: 100%;
}
.acc-panel--profile .acc-avt-box .acc-avt .b-ctn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  text-align: center;
}
.acc-panel--profile .acc-avt-box .acc-avt label.t-gr {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}
.acc-panel--profile .acc-avt-box .acc-avt .t-text {
  width: 100%;
  text-align: center;
  margin: 0;
}

/* Lịch sử account — search pill phẳng, không lồng input box */
html:not(.ae-dark-mode):not(.theme-skeuo) body .acc-panel .acc-head .acc-ctr,
html:not(.ae-dark-mode):not(.theme-skeuo) body .acc-panel .acc-head #formHistory,
html:not(.ae-dark-mode):not(.theme-skeuo) body .acc-panel .acc-head .acc-skill-history-form {
  flex: 1 1 320px;
  max-width: 380px;
  min-width: 240px;
}
html:not(.ae-dark-mode):not(.theme-skeuo) body .acc-panel .acc-head .acc-search {
  width: 100% !important;
  min-height: 44px;
  padding: 0 16px 0 18px !important;
  border-radius: 999px !important;
}
html:not(.ae-dark-mode):not(.theme-skeuo) body .acc-panel .acc-search .b-gr {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html:not(.ae-dark-mode):not(.theme-skeuo) body .acc-panel .acc-search input[type="search"] {
  flex: 1;
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
html:not(.ae-dark-mode):not(.theme-skeuo) body .acc-table-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}
html:not(.ae-dark-mode):not(.theme-skeuo) body .acc-per-page-form {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
html:not(.ae-dark-mode):not(.theme-skeuo) body .acc-per-page-select {
  min-width: 118px;
  height: 40px;
  padding: 0 34px 0 14px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  appearance: none;
  -webkit-appearance: none;
}
/* ─── Header avatar (flat): bo tròn ───────────────────────────────────────────
   Ảnh avatar gốc là ảnh VUÔNG → header hiện nguyên khung vuông quanh mặt
   (mobile lộ rõ). Bo tròn ảnh + khung .icon, áp cả light lẫn dark; skeuo có
   style riêng nên loại trừ. Ảnh có thể là img.avatar hoặc canvas (protected). */
html:not(.theme-skeuo) .hd-act .btn-login .icon {
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html:not(.theme-skeuo) .hd-act .btn-login .icon img,
html:not(.theme-skeuo) .hd-act .btn-login .icon canvas {
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
}

/* Avatar header (flat) v2: BỎ HẲN khung nút vuông quanh avatar (viền đen light /
   nền đỏ dark, mobile lộ rõ) — chỉ còn hình tròn trần. :has(img|canvas) = chỉ áp
   khi đã đăng nhập (nút chứa avatar); nút "Đăng nhập" chưa login giữ khung. */
html:not(.theme-skeuo) .hd-act .btn-login:has(.icon img),
html:not(.theme-skeuo) .hd-act .btn-login:has(.icon canvas),
html:not(.theme-skeuo) .hd-act .btn.btn-login:has(.icon img),
html:not(.theme-skeuo) .hd-act .btn.btn-login:has(.icon canvas) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  outline: 0 !important;
}
html:not(.theme-skeuo) .hd-act .btn-login .icon:has(img),
html:not(.theme-skeuo) .hd-act .btn-login .icon:has(canvas) {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html:not(.theme-skeuo) .hd-act .btn-login .icon img,
html:not(.theme-skeuo) .hd-act .btn-login .icon canvas {
  width: 100%;
  height: 100%;
}

/* ═══ Nút «Gửi lại» + thông báo mật khẩu tạm ở my-account (chuỗi Woo 10.x mới) ═══
   .button của theme bóp nút thành khối vuông: chữ «Gửi lại» vỡ 2 dòng, dính sát câu
   nhắc; dark mode còn bị sơn đỏ chói. Chỉnh cả 3 chế độ: sáng / dark flat / dark skeuo. */
.woocommerce-notices-wrapper .woocommerce-info a.button.wc-forward {
  display: inline-block;
  float: none;
  width: auto;
  white-space: nowrap;
  padding: 6px 16px;
  margin: 0 12px 0 0;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: baseline;
}
/* Dark flat: dark-mode.css sơn .button đỏ !important → đè lại bằng xanh đêm dịu */
html.ae-dark-mode .woocommerce-notices-wrapper .woocommerce-info a.button.wc-forward {
  background: #2E3D55 !important;
  color: #EAF1FF !important;
  border: 1px solid rgba(160, 190, 255, .35) !important;
}
html.ae-dark-mode .woocommerce-notices-wrapper .woocommerce-info a.button.wc-forward:hover {
  background: #3A4C6A !important;
}
/* Dark skeuo (nền gỗ): pill nâu da có viền sáng nhẹ cho hợp tông */
html.ae-dark-mode.theme-skeuo .woocommerce-notices-wrapper .woocommerce-info a.button.wc-forward {
  background: linear-gradient(180deg, #4A3B2C, #33281C) !important;
  color: #F3E9D7 !important;
  border: 1px solid rgba(255, 235, 200, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .35) !important;
}
html.ae-dark-mode.theme-skeuo .woocommerce-notices-wrapper .woocommerce-info a.button.wc-forward:hover {
  background: linear-gradient(180deg, #55452F, #3D2F20) !important;
}
/* Skeuo SÁNG (nền gỗ vàng): .button theme thành navy chữ xanh đậm khó đọc →
   pill Aqua bóng chữ trắng cho hợp tông iOS6 (dark skeuo đã có luật riêng ở trên). */
html.theme-skeuo:not(.ae-dark-mode) .woocommerce-notices-wrapper .woocommerce-info a.button.wc-forward {
  background: linear-gradient(180deg, #7FB3EE 0%, #4D84D2 48%, #3A6FBE 52%, #2F63AE 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #2A5A9C !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 3px rgba(0, 0, 0, .28) !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .28);
}
html.theme-skeuo:not(.ae-dark-mode) .woocommerce-notices-wrapper .woocommerce-info a.button.wc-forward:hover {
  background: linear-gradient(180deg, #8FBEF4 0%, #5A90DB 48%, #4479C8 52%, #386CB8 100%) !important;
}
/* ═══ Khung thông báo WooCommerce (error / info / message) — redesign 4 chế độ ═══
   Mặc định theme để thanh xám trơ + icon lệch. Đổi thành card bo góc có viền màu
   ngữ nghĩa (đỏ lỗi / xanh dương tin / xanh lá ok), ăn cả dark flat + skeuo. */
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce > .woocommerce-error,
.woocommerce > .woocommerce-info,
.woocommerce > .woocommerce-message {
  border-radius: 10px;
  border-top-width: 0;
  border-left: 4px solid transparent;
  position: relative;
  padding: 14px 18px 14px 52px; /* chừa chỗ icon trái */
  margin: 0 0 18px;
  line-height: 1.55;
  /* KHÔNG display:flex — text node thành flex-item riêng làm nút bay góc, icon rớt dòng */
}
/* icon notice (::before) — neo giữa trái cho MỌI skin, hết đè chữ */
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce > .woocommerce-error::before,
.woocommerce > .woocommerce-info::before,
.woocommerce > .woocommerce-message::before {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%);
  margin: 0 !important;
}
.woocommerce-notices-wrapper .woocommerce-error .button,
.woocommerce-notices-wrapper .woocommerce-info .button,
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce > .woocommerce-error .button,
.woocommerce > .woocommerce-info .button,
.woocommerce > .woocommerce-message .button {
  float: none !important;
  margin: 0 10px 0 0 !important;
  vertical-align: baseline;
}
.woocommerce-notices-wrapper .woocommerce-error, .woocommerce > .woocommerce-error {
  background: #FDF1F1; border-left-color: #D64545; color: #7C2B2B;
}
.woocommerce-notices-wrapper .woocommerce-info, .woocommerce > .woocommerce-info {
  background: #F0F6FD; border-left-color: #3B76C4; color: #274E7E;
}
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce > .woocommerce-message {
  background: #F0FAF2; border-left-color: #3E9E5B; color: #245C36;
}
/* Dark flat */
html.ae-dark-mode .woocommerce-notices-wrapper .woocommerce-error, html.ae-dark-mode .woocommerce > .woocommerce-error {
  background: #3A2226 !important; border-left-color: #E06A6A !important; color: #F3C9C9 !important;
}
html.ae-dark-mode .woocommerce-notices-wrapper .woocommerce-info, html.ae-dark-mode .woocommerce > .woocommerce-info {
  background: #1F2C40 !important; border-left-color: #6EA8E8 !important; color: #CFE1F8 !important;
}
html.ae-dark-mode .woocommerce-notices-wrapper .woocommerce-message, html.ae-dark-mode .woocommerce > .woocommerce-message {
  background: #1F3527 !important; border-left-color: #5FBF7D !important; color: #CBEBD5 !important;
}
/* Dark skeuo (nền gỗ tối): tông nâu ấm, chữ kem */
html.ae-dark-mode.theme-skeuo .woocommerce-notices-wrapper .woocommerce-error, html.ae-dark-mode.theme-skeuo .woocommerce > .woocommerce-error {
  background: #3B2620 !important; border-left-color: #E07B5F !important; color: #F5D9CB !important;
}
html.ae-dark-mode.theme-skeuo .woocommerce-notices-wrapper .woocommerce-info, html.ae-dark-mode.theme-skeuo .woocommerce > .woocommerce-info {
  background: #33301F !important; border-left-color: #D9B96A !important; color: #F0E6C8 !important;
}
html.ae-dark-mode.theme-skeuo .woocommerce-notices-wrapper .woocommerce-message, html.ae-dark-mode.theme-skeuo .woocommerce > .woocommerce-message {
  background: #2C3722 !important; border-left-color: #9CBF6A !important; color: #E2EFCB !important;
}