.exercise-frame > .col-9,
.exercise-frame > .col-3  {
  padding-right: 0;
  padding-left: 0;
}

.exercise-frame {
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.10);
}

.exercise-wrapper {
  padding: 24px 24px 44px 24px;
  gap: 20px;
  border-radius: 12px 0px 12px 12px;
  background: rgba(236, 233, 233, 0.315);
}

.exercise-header {
  align-items: center;
  gap: 32px;
  align-self: stretch;
}

.exercise-header-title {
  flex: 1 0 0;
  color: var(--Blue, #004DA9);
  font-size: 20px;
  font-weight: 500;
  line-height: 130%;
}

.exercise-header-number {
  color: var(--Neutral12, var(--color-base-white, #FFF));
  font-size: 24px;
  font-weight: 600;
  line-height: 130%;
}

.exercise-question {
  gap: 20px;
}

.exercise-text {
  align-self: stretch;
  color: var(--Neutral03, #333);
  font-size: 24px;
  font-weight: 500;
  line-height: 130%;
}

.exercise-content {
  gap: 52px;
}

.exercise-anwser {
  width: 45%;
}

.exercise-choice-text {
  padding: 16px 24px;
  align-items: flex-start;
  border-radius: 4px;
  border: 1px solid var(--Neutral09, #CCC);
  background: #FFF;
}

.exercise-choice-text.active {
  background-image: url('../../../public/img/tutor/choose_grade.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  border: 1px solid #FA841A;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
}

.exercise-choice-text {
  cursor: pointer;
}

input[type="checkbox"]:checked {
  accent-color: var(--red-main);
  cursor: pointer;
}

.exercise-info-header {
  gap: 16px;
  padding: 16px 32px 16px 16px;
  align-self: stretch;
  border-radius: 0px 50px 0px 0px;
  background: #004DA9;
}

.exercise-info-header span {
  color: var(--Neutral12, var(--color-base-white, #FFF));
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
}

.exercise-info-body {
  padding: 52px 24px 44px 24px;
  gap: 80px;
  border-radius: 0px 0px 4px 0px;
}

.exercise-info-content {
  padding: 0 20px;
  color: var(--Primary, #757575);
  font-size: 20px;
  line-height: 130%;
}

.btn-exercise-action {
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  border-radius: 10px;
  border: 1px solid var(--New-red, #CC3A3D);
  background: #FFF;
}

.btn-exercise-action span {
  color: var(--New-red, #CC3A3D);
  font-size: 18px;
  line-height: 100%;
}

.btn-exercise-action:hover {
  background: var(--New-red, #CC3A3D);
}
.btn-exercise-action:hover span {
  color: #FFF;
}

.btn-exercise-action.disabled {
  border: 1px solid var(--New-red, #CC3A3D);
  background: #CC3A3D;
  opacity: 1;
}

.btn-exercise-action.disabled span {
  color: #FFF;
}

.textAnswer{
  border:none;
  padding: 12px 24px;
  background-color: white;
  border-left:solid 2px red;
  border-radius: 0px;
}

/* .exercise-choice-text > #preview > #setText > div {
  display: flex;
} */

.exercise-choice-text > #preview > #setText > div > span > .MathJax > svg {
  max-width: 100%;
}

.complete-content {
  max-width: 485px;
  gap: 52px;
}

.complete-message {
  color: var(--Secondary, #111624);
  text-align: center;
  font-family: "Sigmar One";
  font-size: 36px;
  text-transform: uppercase;
}

.complete-score {
  color: var(--New-red, #CC3A3D);
  text-align: center;
  font-family: "Sigmar One";
  font-size: 32px;
  text-transform: uppercase;
}

.complete-accumulated span {
  color: var(--Secondary, #111624);
  text-align: center;
  font-family: "Sigmar One";
  font-size: 24px;
  text-transform: uppercase;
}

.btn-view-result {
  top: 55%;
  transform: translateY(0);
  left: 44%;
  padding: 0.75rem 1.5rem;
  border-radius: 35px;
  color: #fff;
  border: 1px solid var(--red-main);
  background-color: var(--red-main);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.btn-view-result:hover {
  color: var(--red-main);
  background-color: #fff;
}

.btn-view-result:hover path {
  stroke: var(--red-main);
}

.btn-result-navigate {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.btn-result {
  font-size: 14px;
  border-radius: 10px;
  padding: 10px 16px;
  background: var(--White-Smoke, #F3F3F3);
}

.btn-result:hover {
  background: #eceaea;
}

.test-result-question-explain {
  border-radius: 10px;
}

.exercise-choice-text > #preview > #setText > div > img,
.exercise-question img {
  width: 100%;
  height: auto;
}
.table_tabular {
  margin: 10px 0px;
  overflow-x: scroll !important;
  scrollbar-color: red transparent;
  scrollbar-width: auto; 
  scrollbar-width: thin;
}

/* Thanh cuộn luôn hiển thị trên trình duyệt WebKit (Chrome, Edge, Safari) */
.table_tabular::-webkit-scrollbar {
  height: 10px; /* Độ cao thanh cuộn ngang */
  display: block !important; /* Luôn hiển thị thanh cuộn */
}

.table_tabular::-webkit-scrollbar-thumb {
  background: red; /* Màu của phần cuộn */
  border-radius: 5px;
}

.table_tabular::-webkit-scrollbar-thumb:hover {
  background: darkred; /* Màu khi hover */
}

.table_tabular::-webkit-scrollbar-track {
  background: #f0f0f0; /* Màu nền track */
}