/* Removed duplicate SN Pro @font-face; use local fonts via /font.css */

img {
    max-width: 100%;
}

button {
    cursor: pointer;
}

strong {
    font-weight: 600;
}

.font_paytone_one {
    font-family: "Paytone One", serif;
    font-weight: 400;
    font-style: normal;
}

.text_primary {
    color: #FF7B00;
}

.attempt_wrap {
    font-family: 'SN Pro', sans-serif;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 400;
    background: url(/images/attempt/bg_attempt.jpg) no-repeat center center;
    background-size: cover;
    padding: 0 20px;
    min-height: 100vh;
}

.attempt_arena {
    font-family: 'SN Pro', sans-serif;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 400;
}

.preview_value .MJXc-TeX-math-I{
    font-family: 'SN Pro', sans-serif;
    font-style: normal;
}

.attempt_wrap svg {
    display: inline-block;
}

.katex .katex-html {
    line-height: 2.5;
}

.katex svg {
    display: block;
}

.attempt_wrap p {
    margin: 0 0 10px 0;
}

.attempt_main {
    padding: 40px;
    position: relative;
    box-shadow: 4px 0px 0px 0px #F9F2E2 inset, -4px 0px 0px 0px #F9F2E2 inset, 0px -4px 0px 0px #F9F2E2 inset, 0px 4px 0px 0px #F9F2E2 inset;
    border-radius: 24px;
    background: #DECFC2;
    margin-bottom: 30px;
}

.attempt_lesson_wrap .attempt_main {
    height: calc(100vh - 325px);
}

.attempt_main:before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 16px;
    bottom: 16px;
    border: 2px solid #775C44;
    box-shadow: 0px -4px 0px 0px #00000080, 0px 4px 0px 0px #FFFFFF, 4px 0px 0px 0px #FFFFFF, -4px 0px 0px 0px #FFFFFF;
    border-radius: 16px;
    background: #EBE5DD;
}

.attempt_wrap .MuiPaper-root {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
}

.attempt_action {
    text-align: center;
    padding: 20px;
}

.btn_preview {
    width: 234px;
    height: 70px;
    background: url(/images/attempt/btn_preview.png) no-repeat !important;
    background-size: cover;
    border: 0 !important;
    text-indent: -999px;
    overflow: hidden;
    cursor: pointer;
    max-height: none !important;
}

.attempt_content {
    position: relative;
    overflow: auto;
    color: #4D4D4D;
    max-height: calc(100vh - 385px);
}

.attempt_wrap_1 .attempt_content {
    min-height: calc(100vh - 385px);
    height: 100%;
}

.attempt_main button.close {
    width: 40px;
    height: 42px;
    background: url(/images/attempt/ic_close.png) no-repeat;
    background-size: cover;
    padding: 0;
    min-width: 40px;
    max-height: 42px;
    z-index: 1;
    text-indent: -9999px;
    position: absolute;
    right: -10px;
    top: -10px;
}

.question_number {
    display: inline-block;
    min-width: 64px;
    width: 64px;
    height: 64px;
    text-align: center;
    line-height: 64px;
    font-size: 34px;
    border-radius: 100%;
    position: relative;
    cursor: pointer;
}

.question_number svg {
    display: none;
}

.attempt_arena .question_number svg {
    display: block;
}

.attempt_arena .question_number {
    width: 54px;
    height: 54px;
    min-width: 54px;
    background: transparent !important;
}

.attempt_arena .question_number .number {
    position: absolute;
    font-size: 26px;
    color: #fff !important;
    top: calc(50% - 3px);
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 26px;
    z-index: 1;
}

.attempt_arena .question_number i {
    display: none;
}

.question_number span {
    line-height: 0;
}

.question_number.sm {
    zoom: 0.625;
}

.question_number .vector_1 {
    display: inline-block;
    width: 20px;
    height: 18px;
    background: url(/images/attempt/number/vector_1.svg) no-repeat;
    background-size: cover;
    position: absolute;
    left: 8px;
    top: 5px;
}

.question_number .vector_2 {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: url(/images/attempt/number/vector_2.svg) no-repeat;
    background-size: cover;
    position: absolute;
    left: 3px;
    top: 23px;
}

.question_number .vector_3 {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(/images/attempt/number/vector_3.svg) no-repeat;
    background-size: cover;
    position: absolute;
    right: 7px;
    bottom: 6px;
}

.attempt_content .question_content .head {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.attempt_content .question_content .head .question_number {
    margin-right: 16px;
}

.attempt_main .question_title {
    font-weight: 700;
    display: flex;
}

.ic_voice {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: url(/images/attempt/ic_voice.png) no-repeat;
    background-size: cover;
}

.ic_refresh {
    background: url(/images/attempt/ic_refresh.png) no-repeat;
    background-size: cover;
}

.ic_number_not-work {
    background: url(/images/attempt/ic_number_default.png) no-repeat;
    background-size: cover;
    width: 38px;
    height: 41px;
    display: inline-block;
}

.ic_number_is-work {
    background: url(/images/attempt/ic_number_is_work.png) no-repeat;
    background-size: cover;
    width: 38px;
    height: 41px;
    display: inline-block;
}

.ic_number_is-correct {
    background: url(/images/attempt/ic_number_is_correct.png) no-repeat;
    background-size: cover;
    width: 38px;
    height: 41px;
    display: inline-block;
}

.ic_number_is-wrong {
    background: url(/images/attempt/ic_number_is_wrong.png) no-repeat;
    background-size: cover;
    width: 38px;
    height: 41px;
    display: inline-block;
}

.nostyle {
    border: 0;
    padding: 0;
    min-width: auto;
    min-height: auto;
    height: auto;
    width: auto;
    background: transparent;
    cursor: pointer;
    font-size: unset;
    outline: none;
}

.head_action button {
    margin-left: 8px;
}

.head_action i {
    display: inline-block;
    width: 40px;
    height: 40px;
}

.bg_attempt > .MuiBackdrop-root {
    background: transparent;
}

.ic_attempt_back {
    display: inline-block;
    width: 80px;
    height: 86px;
    background: url(/images/attempt/ic_attempt_back.png) no-repeat;
    background-size: cover;
}

.ic_attempt_audio {
    display: inline-block;
    width: 80px;
    height: 86px;
    background: url(/images/attempt/ic_attempt_audio.png) no-repeat;
    background-size: cover;
}

.ic_play_audio {
    display: inline-block;
    width: 64px;
    height: 64px;
    background: url(/images/attempt/ic_play_audio.png) no-repeat;
    background-size: cover;
}

.ic_play_video {
    display: inline-block;
    width: 64px;
    height: 64px;
    background: url(/images/attempt/ic_play_video.png) no-repeat;
    background-size: cover;
}

.ic_video_play_control {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: url(/images/attempt/ic_video_play_control.png) no-repeat;
    background-size: cover;
}

.ic_speaker_high {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(/images/attempt/ic_speaker_high.png) no-repeat;
    background-size: cover;
}

.ic_keyboard {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(/images/attempt/ic_keyboard.png) no-repeat;
    background-size: cover;
}

.ic_sidebar_submit {
    display: inline-block;
    width: 160px;
    height: 80px;
    background: url(/images/attempt/ic_sidebar_submit.png) no-repeat center center;
    background-size: cover;
}

.ic {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.ic_play {
    background-image: url(/images/attempt/ic_play.png);
}

.ic_pause {
    background-image: url(/images/attempt/ic_pause.png);
}

.ic_backward {
    background-image: url(/images/attempt/ic_backward.png);
}

.ic_forward {
    background-image: url(/images/attempt/ic_forward.png);
}

.ic_volume_mute {
    background-image: url(/images/attempt/ic_volume_mute.png);
}

.ic_volume_low {
    background-image: url(/images/attempt/ic_volume_low.png);
}

.ic_volume_high {
    background-image: url(/images/attempt/ic_volume_high.png);
}

.ic_exit_fullscreen {
    background-image: url(/images/attempt/ic_exit_fullscreen.png);
}

.ic_fullscreen {
    background-image: url(/images/attempt/ic_fullscreen.png);
}

.ic_music_note {
    background-image: url(/images/attempt/ic_music_note.png);
}

.ic_giai_tich {
    background-image: url(/images/attempt/skills/ic_giai_tich.png);
}

.ic_hinh_hoc {
    background-image: url(/images/attempt/skills/ic_hinh_hoc.png);
}

.ic_dai_so {
    background-image: url(/images/attempt/skills/ic_dai_so.png);
}

.ic_dialog_1 {
    background-image: url(/images/attempt/dialog/ic_dialog_1.png);
}

.ic_dialog_2 {
    background-image: url(/images/attempt/dialog/ic_dialog_2.png);
}

.ic_dialog_3 {
    background-image: url(/images/attempt/dialog/ic_dialog_3.png);
}

.ic_dialog_4 {
    background-image: url(/images/attempt/dialog/ic_dialog_4.png);
}

.ic_next_button {
    background-image: url(/images/attempt/ic_next_button.png);
    width: 48px;
    height: 48px;
}

.question_content_structure,
.answer_series,
.question_answer {
    display: flex;
    justify-content: center;
}

.column_1,
.column_2,
.column_3 {
    flex-wrap: wrap;
}

.row_1 {
    flex-wrap: nowrap;
}

.answer_series .item, .question_answer .item {
    display: flex;
    justify-content: center;
}

.column_1 .item {
    width: 100%;
}

.column_2 .item {
    width: 50% !important;
}

.column_3 .item {
    width: 33.33% !important;
}

.column_1 .box_rounder.text-left,
.column_2 .box_rounder.text-left,
.column_3 .box_rounder.text-left {
    text-align: center;
}

.box_rounder {
    width: 100%;
    border: 2px solid #808080;
    border-radius: 24px;
    padding: 26px 24px;
    box-shadow: 0px 4px 0px 0px #FFFFFF inset, 0px -6px 0px 0px #00000040 inset;
    background: #FFFAF3;
    margin: 8px;
    cursor: pointer;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
}

.box_rounder.has_series {
    padding: 11px;
}

.box_rounder .box_cont {
    display: flex;
    justify-content: center;
    font-size: 20px;
    align-items: center;
}

.answer_number {
    background: #fff;
    border: 1px solid #808080;
    width: 24px;
    min-width: 24px;
    height: 24px;
    font-family: 'SN Pro', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    line-height: 24px;
    border-radius: 8px;
    margin: 0 16px 0 0;
}

.row_1 .answer_number {
    margin: 0 16px 0 0;
}

.answer_cont {
    width: 100%;
    text-align: left;
}

.box_rounder p {
    margin: 0;
}

.box_rounder:hover,
.box_rounder.active {
    border: 2px solid #FF7B00;
}

.box_rounder.active:before {
    content: "";
    position: absolute;
    left: -4px;
    right: -4px;
    top: -4px;
    bottom: -4px;
    background: #ffd7b2;
    z-index: -1;
    border-radius: 24px;
}

.box_rounder:hover .answer_number {
    border-color: #FF7B00;
}

.box_rounder.active .answer_number {
    background-color: #FF7B00;
    border-color: #FF7B00;
}

.box_rounder.active .answer_number span,
.box_rounder.is_wrong .answer_number span,
.box_rounder.is_correct .answer_number span {
    color: #fff;
}

button.box_rounder.is_correct {
    border-color: #047E49;
    background-color: #D3FFB1;
}

.box_rounder.is_correct .answer_number {
    background-color: #047E49;
    border-color: #047E49;
}

.box_rounder.is_correct:before {
    display: none;
}

.answer_image,
.answer_audio,
.answer_video {
    text-align: center;
}

.fullwidth {
    width: 100%;
}

.p-1 {
    margin: 5px;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.answer_image {
    border-radius: 24px;
    overflow: hidden;
    line-height: 0;
}

.video-container,
.image-container {
    max-width: 684px;
    margin: auto;
    overflow: hidden;
    line-height: 0;
    position: relative;
}

.audio-container {
    text-align: center;
}

.question_content_structure {
    padding: 0 64px;
}

.question_content_structure .item {
    padding: 12px;
}

.video-container .video_content {
    padding-top: 56.43%;
}

.video-container .play_control {
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.video-container .video_content .video {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-container .play_control.pause {
    opacity: 0;
    visibility: hidden;
}


.video-container:hover .play_control.pause {
    opacity: 1;
    visibility: visible;
}

.video-container .controls {
    width: 80%;
    position: absolute;
    left: 10%;
    bottom: 10px;
    z-index: 1;
    background: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    visibility: hidden;
    opacity: 0;
}

.video-container:hover .controls {
    visibility: visible;
    opacity: 1;
}

.video-container .controls .video_seek {
    width: calc(100% - 30px);
}

.video-container .controls .video_volume {
    width: 24px;
    cursor: pointer;
    position: relative;
}

.video-container .controls .video_volume input[type="range"] {
    position: absolute;
    transform: rotate(-90deg);
    left: -10px;
    bottom: 30px;
    width: 100px;
    visibility: hidden;
    opacity: 0;
}

.video-container .controls .video_volume.show_volume input[type="range"] {
    visibility: visible;
    opacity: 1;
}

.video-container .controls .video_seek input[type="range"] {
    width: 100%;
}

.fill_input {
    border: 1px solid #B3B3B3;
    min-height: 36px;
    min-width: 110px;
    border-radius: 40px;
    text-align: center;
    padding: 0 10px;
    background-color: #fff;
    margin: 5px 0;
}

.fill_input.input_fill_input {
    width: 110px;
    display: none;
    margin: 0;
}

.is_wrong {
    border-color: #FF6262 !important;
    background-color: #ffebeb !important;
}

.is_correct {
    border-color: #047E49 !important;
    background-color: #D3FFB1 !important;
}

.is_correct + .preview_value {
    border-color: #047E49 !important;
    background-color: #D3FFB1 !important;
}

.is_wrong + .preview_value {
    border-color: #FF6262 !important;
    background-color: #ffebeb !important;
}

.box_rounder.is_correct:before,
.box_rounder.is_wrong:before {
    display: none;
}

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

img.disabled,
.disabled img {
    filter: grayscale(100%);
}

.is_correct.disabled,
.is_wrong.disabled {
    opacity: 1;
}

.attempt_show_answer {
    margin-bottom: 24px;
}

.solution_title {
    font-size: 20px;
    font-weight: 700;
    color: #047e49;
    margin: 0;
}

ul.nostyle,
ol.nostyle,
.attempt_show_answer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.attempt_show_answer ul li > * {
    display: inline-block;
}

.attempt_show_answer ul li * {
    margin: 0;
}

.attempt_show_answer ul li > span {
    margin-right: 5px;
}

.attempt_show_answer ul li {
    display: flex;
    margin: 10px 0;
    align-items: center;
}

.attempt_matching {
    display: flex;
    justify-content: center;
}

.attempt_matching .item_right .preview_content_wrap {
    display: flex;
    justify-content: end;
}

.attempt_matching > .item {
    max-width: 395px;
    width: 100%;
    padding: 7px;
}

.matching_items {
    display: flex;
    flex-wrap: wrap;
}

.attempt_matching .item_right .matching_items {
    justify-content: right;
}

.matching_items .item {
    width: 100%;
    max-width: 348px;
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
}

.matching_number {
    border: 2px solid #808080;
    width: 94px;
    height: 48px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff;
    margin: 0 0 0 8px;
    order: 2;
}

.matching_content {
    width: calc(100% - 102px);
    box-shadow: 0px 4px 0px 0px #FFFFFF inset, 0px -6px 0px 0px #00000040 inset;
    border: 2px solid #808080;
    background: #FFFAF3;
    padding: 16px;
    border-radius: 24px;
    height: 180px;
    order: 1;
}

.matching_content .content {
    overflow-x: auto;
    overflow-y: auto;
    height: 100%;
}

.matching_content .content .structure_type_series,
.matching_content .content .structure_type_image,
.matching_content .content .structure_type_video,
.matching_content .content .structure_type_audio {
    height: 100%;
}

.matching_content .content .structure_type_series {
    display: flex;
}

.attempt_matching .item_right .matching_items .matching_number {
    order: 0;
    margin: 0 8px 0 0;
}

.matching_content .structure_image,
.matching_content .structure_audio,
.matching_content .structure_video {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.matching_content .content .structure_type_series .column_1 .item {
    justify-content: center;
}

.structure_text {
    text-align: left;
}

.item_left .matching_item.selected {
    margin-left: 33px;
}

.item_right .matching_item.selected {
    margin-right: 33px;
}

.matching_item.matching_correct .matching_content {
    background: #D3FFB1;
    border-color: #047E49;
}

.matching_item.matching_correct .matching_number {
    background-color: #047E49 !important;
    border-color: #047E49 !important;
}

.matching_item.matching_wrong .matching_content {
    background: #FFEBEB;
    border-color: #FF6262;
}

.matching_item.matching_wrong .matching_number {
    background-color: #FF6262 !important;
    border-color: #FF6262 !important;
}

.matching_item.matching_correct .matching_number span,
.matching_item.matching_wrong .matching_number span {
    color: #fff;
}

.logo {
    max-height: 100px;
}

.nav-header {
    min-height: 100px !important;
    margin-bottom: 20px;
}

.attempt_topic_box {
    position: relative;
}

.attempt_topic_box .content {
    height: 326px;
    box-shadow: 0px 6px 0px 0px #FFFFFF inset, 0px -8px 0px 0px #00000040 inset;
    border: 2px solid #333;
    border-radius: 24px;
    padding: 50px 20px 20px;
    width: 100%;
}

.attempt_topic_box .content > button.nostyle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.attempt_topic_box .head {
    max-width: 470px;
    width: 100%;
    position: absolute;
    padding: 0 15px;
    left: 50%;
    top: 0;
    transform: translate(-50%, -30%);
    text-align: center;
}

.attempt_topic_box .head .box {
    padding-top: 14.6%;
    position: relative;
}

.attempt_topic_box .head .box > div {
    position: absolute;
    width: 100%;
    padding: 0 10px;
    top: 42%;
    transform: translateY(-50%);
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    line-height: 18px;
}

.grid-cols-3 .attempt_topic_box .head .box > div {
    font-size: 16px;
}

.grid-cols-4 .attempt_topic_box .head {
    padding: 0 5px;
}

.grid-cols-4 .attempt_topic_box .head .box > div {
    font-size: 14px;
    line-height: 13px;
}

.attempt_topic_box.box_1 .head .box {
    background: url(/images/attempt/topic_box/box_1.png) no-repeat;
    background-size: cover;
}

.attempt_topic_box.box_2 .head .box {
    background: url(/images/attempt/topic_box/box_2.png) no-repeat;
    background-size: cover;
}

.attempt_topic_box.box_3 .head .box {
    background: url(/images/attempt/topic_box/box_3.png) no-repeat;
    background-size: cover;
}

.attempt_topic_box.box_4 .head .box {
    background: url(/images/attempt/topic_box/box_4.png) no-repeat;
    background-size: cover;
}

.attempt_topic_box.box_1 .content {
    border-color: #32AD70;
    background: #DCFFEE;
}

.attempt_topic_box.box_2 .content {
    border-color: #CA3939;
    background: #FFECEC;
}

.attempt_topic_box.box_3 .content {
    border-color: #7643CB;
    background: #F4EDFF;
}

.attempt_topic_box.box_4 .content {
    border-color: #47AFCF;
    background: #E2F8FF;
}

.content_scroll {
    max-height: 100%;
    overflow-y: auto;
}

.topic_answer_title {
    position: relative;
    text-align: center;
    margin-top: 20px;
}

.topic_answer_title span {
    position: relative;
    font-weight: 700;
    background: #EBE5DD;
    padding: 10px;
}

.topic_answer_title:before {
    content: "";
    height: 1px;
    background: #F2F2F2;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px);
}

.answer_box {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.topic_answer_item {
    padding: 8px;
    line-height: 0;
}

.answer_box .structure_video,
.answer_box .structure_audio,
.answer_box .structure_image {
    width: 156px;
    height: 156px;
    position: relative;
    padding: 5px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.answer_box .structure_image .image-container {
    height: 100%;
    border-radius: 18px;
}

.answer_box .structure_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qa_topic_solution .answer_box .structure_video,
.qa_topic_solution .answer_box .structure_audio,
.qa_topic_solution .answer_box .structure_image,
.content_scroll.answer_box .structure_video,
.content_scroll.answer_box .structure_audio,
.content_scroll.answer_box .structure_image {
    width: 90px;
    height: 90px;
}

.answer_box .structure_text {
    padding: 20px 30px;
    line-height: 1.4;
}

.answer_box button > .structure_type {
    border: 2px solid #808080;
    border-radius: 24px;
    background: #FFFAF3;
}

.structure_type.structure_type_text {
    border-radius: 99px;
}

.topic_answer_box {
    align-items: center;
}

.topic_answer_box .topic_answer_item .structure_type {
    border: 2px solid #808080;
    border-radius: 24px;
    background: #fff;
}

.topic_answer_box .topic_answer_item button.active > div {
    border-color: #FF7B00;
}

.topic_answer_box .topic_answer_item .structure_type.structure_type_text {
    border-radius: 99px;
}

.qa_topic_solution .answer_box {
    align-items: center;
}

.qa_topic_solution .structure_type {
    border: 2px solid #047E49;
    border-radius: 24px;
    background-color: #D3FFB1 !important;
}

.qa_topic_solution .structure_type.structure_type_text {
    border-radius: 99px;
}

.structure_audio a.nostyle,
.structure_video a.nostyle {
    line-height: 0;
}

.content_scroll .topic_answer {
    position: relative;
    z-index: 2;
}

.attempt_main .topic_answer button.close {
    width: 24px;
    height: 25px;
    min-width: 24px;
    max-height: 25px;
    top: -8px;
    right: -8px;
    cursor: pointer;
    z-index: 2;
}

.qa_topic_solution .item {
    display: flex;
    align-items: center;
}

.qa_topic_solution .item > span {
    min-width: 200px;
}

.qa_topic_solution .answer_box .box_item {
    margin: 4px;
}

.fill_select {
    border: 1px solid #FF7B00;
    border-radius: 40px;
    height: 40px;
    font-size: 20px;
    padding: 0 40px 0 10px;
    font-family: 'SN Pro', sans-serif;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url(/images/attempt/ic_arrow_down.svg);
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 24px;
    max-width: 260px;
}

.fill_button {
    display: inline-block;
    position: relative;
}

.fill_button button.close {
    border: 0;
    width: 24px;
    height: 25px;
    min-width: 24px;
    cursor: pointer;
}

.answer_box .structure_text p {
    margin: 0;
}

.topic_answer_item > button.topic_answer {
    height: 100%;
    opacity: 1;
}

.order_number {
    background: #dbe6ff;
    font-family: "Paytone One", serif;
    font-size: 40px;
    line-height: 40px;
    padding: 1px 10px 7px;
    min-width: 120px;
    text-align: center;
    border-radius: 16px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag_drop_order .topic_answer_item > button.topic_answer {
    max-width: 160px;
}

.drag_drop_order .structure_series .structure_image {
    width: 100%;
}

.drag_drop_order .structure_type.structure_type_text {
    border-radius: 24px;
    min-height: 80px;
}

.drag_drop_order .answer_box .structure_text {
    padding: 16px;
    min-width: 152px;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag_drop_order .structure_series.row_1 .structure_audio svg,
.drag_drop_order .structure_series.row_1 .structure_video svg {
    width: 100%;
}

.drag_drop_order .structure_series.row_1 .structure_type_text {
    display: flex;
    align-items: center;
}

.drag_drop_order .topic_answer_item {
    position: relative;
}

.drag_drop_order .topic_answer_item .close {
    width: 24px;
    height: 25px;
    min-width: 24px;
    right: 0;
    top: 0;
}

.topic_answer_item button.topic_answer > div {
    height: 100%;
}

.dialog_media .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded {
    border: 0;
    background: transparent;
}

.dialog_media .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded .video-container {
    max-width: 100%;
    border-radius: 0;
}

.dialog_media.video {
    max-width: 900px;
    width: 100%;
    margin: auto;
}

.dialog_media.audio {
    max-width: 532px;
    width: 100%;
}

.video_player {
    line-height: 0;
    position: relative;
    overflow: hidden;
}

.video_control {
    background: linear-gradient(180deg, rgba(8, 9, 13, 0) 0%, rgba(8, 9, 13, 0.9) 80.37%);
    padding: 16px 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.duration_time {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items: center;
}

.duration_time span {
    font-size: 16px;
    color: #fff;
    letter-spacing: 1px;
}

.duration_time i {
    display: block;
    margin: 0 5px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
}

.control_container {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.control_container button {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    text-align: center;
}

.control_container button i {
    width: 24px;
    height: 24px;
}

.video_player_container {
    width: 100%;
    height: 100%;
}

.video_loading {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF7B00;
    z-index: 11;
}

.dialog_media.audio .MuiPaper-root {
    max-width: 532px;
}

.popup_audio_player {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 16px;
}

.audio_banner {
    padding: 40px;
    text-align: center;
    border-radius: 16px;
}

.audio_banner i.ic {
    width: 60px;
    height: 60px;
}

.audio_title {
    margin: 24px 0 16px;
    text-align: center;
}

.audio_title h3 {
    font-size: 20px;
    margin: 0 0 8px;
}

.audio_title p {
    margin: 0;
}

.seek_container {
    display: flex;
    align-items: center;
}

.volume_control {
    position: relative;
}

.volume_control button {
    width: 48px;
    height: 48px;
    border: 0;
    outline: none;
    background: transparent;
    text-align: center;
    padding: 0;
}

.seek_container > input[type="range"] {
    width: calc(100% - 48px);
}

.volume_control input[type="range"] {
    width: 100px;
    transform: rotate(-90deg);
    position: absolute;
    left: -30px;
    bottom: 90px;
    opacity: 0;
    visibility: hidden;
}

.audio_control button {
    width: 48px;
    height: 48px;
    margin: 0 8px;
    border: 0;
    background: transparent;
    outline: none;
}

.audio_control {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.volume_control:hover input[type="range"] {
    opacity: 1;
    visibility: visible;
}

.control_container .right {
    display: flex;
}

.video_player_container .play_control {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    padding: 0;
    border: 0;
    background: transparent;
    z-index: 9;
}

.range_slider {
    width: 100%;
}

input[type="range"] {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    width: 100%;
    cursor: pointer;
    outline: none;
    border-radius: 15px;
    /*  overflow: hidden;  remove this line*/

    /* New additions */
    height: 4px;
    background: #E5E5E5;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
    /* removing default appearance */
    -webkit-appearance: none;
    appearance: none;
    /* creating a custom design */
    height: 20px;
    width: 20px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 10px 0 #0000003D;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
    height: 20px;
    width: 20px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 10px 0 #0000003D;
}

/* Hover, active & focus Thumb: Webkit */

input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgba(255, 85, 0, .1)
}

input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(255, 85, 0, .2)
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(255, 85, 0, .2)
}

/* Hover, active & focus Thumb: Firfox */

input[type="range"]::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(255, 85, 0, .1)
}

input[type="range"]:active::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(255, 85, 0, .2)
}

input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(255, 85, 0, .2)
}

.question_title .question_content_structure {
    padding: 0;
    font-weight: normal;
}

.question_answer.true_false {
    justify-content: flex-start;
}

.question_answer.true_false > .item {
    width: 182px;
    flex: none;
}

.structure_text p {
    margin: 0;
}

.MuiDataGrid-cell {
    min-height: 43px !important;
}

.MuiFormGroup-root span.MuiTypography-root {
    font-family: 'SN Pro', sans-serif;
    font-size: 16px;
    line-height: 20px;
}

.MuiFormGroup-root span.MuiButtonBase-root {
    padding: 8px;
}

.MuiFormGroup-root svg {
    fill: #fff;
}

.essay_answer {
    margin-top: 20px;
}

.essay_editor {
    border: 1px solid #B3B3B3;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 10px;
}

.essay_editor div > .cke {
    border-radius: 10px;
    border: 0;
}

.upload_form {
    font-family: 'SN Pro', sans-serif;
}

.upload_form p {
    color: #808080;
}

.upload_form .title {
    margin: 0;
    display: flex;
    justify-content: space-between;
    color: #4D4D4D;
    font-weight: 700;
    font-size: 20px;
}

.upload_form .sub_title {
    margin: 0;
}

.label_file {
    border: 2px dashed #FF7B00;
    padding: 24px;
    display: block;
    margin: 16px 0;
    border-radius: 8px;
    position: relative;
    text-align: center;
    cursor: pointer;
}

.label_file input {
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}

.label_file p {
    color: #808080;
    font-size: 14px;
}

.label_file p strong {
    font-size: 16px;
    font-weight: 600;
    color: #4D4D4D;
}

.upload_form .result ul li {
    padding: 16px;
    margin-top: 16px;
    border: 1px solid #F2F2F2;
    border-radius: 12px;
}

.upload_form .result .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.upload_form .result .info > .icon {
    width: 32px;
}

.upload_form .result .info .action {
    display: flex;
    width: 105px;
}

.upload_form .result .info > .cont {
    width: calc(100% - 137px);
    padding: 0 8px;
}

.upload_form .result .info > .action button {
    background: #E5E5E5;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    text-align: center;
    padding: 7px;
    margin-left: 5px;
}

.upload_form .result .info > .action svg {
    width: 16px;
    height: 16px;
}

.upload_form .result .info > .cont p {
    margin: 2px 0;
    font-size: 14px;
}

.upload_form .result .info > .cont .name {
    font-weight: 700;
    color: #4D4D4D;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.progress_bar {
    width: calc(100% - 40px);
    height: 8px;
    background: #F2F2F2;
    border-radius: 40px;
    position: relative;
}

.progress_bar .active {
    position: absolute;
    left: 0;
    height: 8px;
    background: #FF7B00;
    border-radius: 40px;
}

.upload_form p.error {
    color: #FF3B3B;
}

.upload_form p.success {
    color: #06C270;
}

.file_item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.file_item .cont {
    width: calc(100% - 32px);
    padding-left: 8px;
}

.file_item .cont p {
    margin: 2px 0;
}

.file_item .cont p.name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

ul.solution.des .answer_series.column_1 {
    max-width: 200px !important;
}

ul.solution.des .answer_series.column_2 {
    max-width: 400px !important;
}

ul.solution.des .answer_series.column_3 {
    max-width: 600px !important;
}

select.fill_select {
    margin: 5px 0;
}

.structure_series {
    display: flex !important;
    align-items: center;
}

.structure_image,
.structure_video,
.structure_audio {
    text-align: center;
}

.head_action {
    display: flex;
}

.drag_drop_answer > .answer_box {
    width: 100%;
    overflow: auto;
}

.drag_drop_answer > .answer_box.row {
    flex-wrap: nowrap !important;
}

.drag_drop_answer > .answer_box.row > li.item {
    flex: 1 0 0%;
    margin: 0;
}

.drag_drop_answer > .answer_box.row .box_rounder {
    padding: 5px;
}

.question_answer.true_false .box_cont {
    flex-wrap: nowrap !important;
}

.question_answer.true_false .box_cont .answer_number {
    margin: 0 !important;
}

.topic_answer_item button.topic_answer > .structure_type_text {
    display: flex;
    align-items: center;
}

.dropdown_custom {
    position: relative;
    background-color: #fff;
    margin: 5px 0;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    height: auto;
    max-width: 100%;
}

.dropdown_custom .is_answer {
    line-height: 40px;
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
    z-index: 2;
}

.dropdown_custom span.ul {
    position: absolute;
    left: 0;
    width: 287px;
    top: calc(100% + 4px);
    box-shadow: 0px 4px 16px 0px #00000029;
    padding: 16px 12px;
    border: 1px solid #E2E2E2;
    background: #fff;
    border-radius: 24px;
    z-index: 9;
    display: none;
}

.dropdown_custom.show span.ul {
    display: block;
}

.dropdown_custom span.ul span.li {
    display: block;
    cursor: pointer;
    padding: 10px 8px;
    border-radius: 16px;
    position: relative;
    overflow-x: auto;
}

.dropdown_custom span.ul span.li.active,
.dropdown_custom span.ul span.li:hover {
    background: #F2F2F2;
}

.dropdown_custom span.is_click {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.dropdown_custom span.ul span.li > .li_click {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.input-container {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    margin-bottom: 20px;
    background: white;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.math-input {
    height: 25px;
    width: 200px;
    padding: 2px 2px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: text;
    background: white;
    overflow-x: auto;
}

.button-container {
    display: flex;
    gap: 3px;
}

.btn_mathjax {
    width: 32px;
    height: 32px;
    cursor: pointer;
}

/* Popup styles */
.preview-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    min-width: 300px;
    max-width: 80%;
}

.preview-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.preview-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.close-button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
}

.preview-content {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.math-dialog-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.math-dialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    width: 90%;
    max-width: 450px;
}

.fill_input_wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 5px 0;
}

.fill_input_wrap .show_keyboard {
    position: absolute;
    bottom: 100%;
    right: 0;
    line-height: 0;
    padding: 0px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    border: 0;
    background: transparent;
}

.fill_input_wrap:hover .show_keyboard {
    opacity: 1;
    visibility: visible;
}

.fill_input_wrap .show_keyboard span {
    display: block;
    padding: 5px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 5px;
    position: relative;
}

.fill_input_wrap .show_keyboard span:after {
    content: "";
    border: 5px solid #fff;
    position: absolute;
    bottom: -4px;
    left: 3px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 0;
}

.attempt_header {
    display: flex;
    align-items: center;
    padding: 23px 0 28px;
    flex-wrap: wrap;
}

.attempt_sidebar {
    width: 210px;
    order: 2;
}

.attempt_container {
    width: 100%;
}

.attempt_sidebar + .attempt_container {
    order: 1;
    width: calc(100% - 210px) !important;
    padding-right: 40px;
}

.attempt_container_wrap .attempt_body .attempt_container {
    position: relative;
    width: 100%;
}

.attempt_account {
    position: relative;
    padding-left: 4px;
}

.attempt_account .name {
    height: 42px;
    padding: 9px 33px 7px 65px;
    background: linear-gradient(180deg, #FFAD39 0%, #FF6900 100%);
    border-radius: 30px;
    position: relative;
}

.attempt_account .name:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-shadow: 0px 2px 0px 0px #F9DE82 inset, 0px 5px 0px 0px #BF3D27;
    border-radius: 30px;
}

.attempt_account .name:after {
    content: "";
    position: absolute;
    left: -2px;
    right: -2px;
    top: -2px;
    bottom: -7px;
    border-radius: 30px;
    border: 2px solid #7F3D16;
}

.attempt_account .avatar {
    width: 64px;
    height: 64px;
    position: absolute;
    z-index: 1;
    border-radius: 100%;
    overflow: hidden;
    left: 0;
    border: 1px solid #fff;
    top: calc(50% - 28px);
}

.attempt_account .avatar img {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.attempt_account .name strong {
    color: #fff;
    letter-spacing: 0.15px;
    text-shadow: 1px 1px 0px #503522, -1px 1px 0px #503522, 1px -1px 0px #503522, -1px -1px 0px #503522;
    width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attempt_wrap.bg_attempt .MuiPaper-root {
    margin-top: 0;
    margin-bottom: 0;
    max-width: 1440px;
}

.attempt_container_wrap {
    max-width: 1440px;
    margin: auto;
}

.header_container {
    display: flex;
    align-items: center;
}

.header_container .back {
    width: 120px;
    padding-right: 40px;
}

.header_container .header_main {
    width: calc(100% - 120px);
}

.header_container .content {
    background: linear-gradient(180deg, #FFAD39 0%, #FF6900 100%);
    border-radius: 30px;
    padding: 14px 41px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateY(-7px);
    flex-wrap: wrap;
}

.header_container .content:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-shadow: 0px 4px 0px 0px #F9DE82 inset, 0px 12px 0px 0px #BF3D27;
    border-radius: 30px;
}

.header_container .content:after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -2px;
    bottom: -14px;
    border: 2px solid #7F3D16;
    border-radius: 30px;
}

.header_container .title_wrap span {
    color: #492405;
    font-weight: 700;
    font-size: 20px;
}

.header_container .title_wrap h3 {
    margin: 0;
    font-family: "Paytone One", serif;
    color: #fff;
    font-weight: 400;
    font-size: 26px;
    text-shadow: 1px 1px 0px #503522, -1px 1px 0px #503522, 1px -1px 0px #503522, -1px -1px 0px #503522;
}

.attempt_container_wrap .attempt_body {
    display: flex;
    padding: 40px 0 0;
    flex-wrap: wrap;
}

.attempt_sidebar_body {
    position: relative;
    padding: 24px 13px;
}

.attempt_sidebar_body:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-shadow: 4px 0px 0px 0px #F9F2E2 inset, -4px 0px 0px 0px #F9F2E2 inset, 0px -4px 0px 0px #F9F2E2 inset, 0px 4px 0px 0px #F9F2E2 inset;
    border-radius: 24px;
    background: #DECFC2;
}

.attempt_sidebar_body:after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    bottom: 8px;
    border: 2px solid #775C44;
    box-shadow: 0px -4px 0px 0px #00000080, 0px 4px 0px 0px #FFFFFF, 4px 0px 0px 0px #FFFFFF, -4px 0px 0px 0px #FFFFFF;
    border-radius: 16px;
    background: #EBE5DD;
}

.attempt_sidebar_body > * {
    position: relative;
    z-index: 1;
}

.header_countdown {
    background: #756E5C;
    padding: 4px 20px 6px 8px;
    border: 2px solid #7F3D16;
    border-radius: 99px;
    box-shadow: 0px 4px 4px 0px #00000040 inset;
}

.sidebar_countdown {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar_countdown .text {
    min-width: 60px;
}

.sidebar_countdown .text span {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.sidebar_countdown .text strong {
    font-size: 20px;
    color: #fff;
    letter-spacing: 0.15px;
    line-height: 28px;
}

.sidebar_action {
    padding-top: 20px;
    text-align: center;
}

.sidebar_nav {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    max-width: 140px;
    margin: auto;
    max-height: calc(100vh - 390px);
    overflow-y: auto;
    padding-left: 4px;
}

.sidebar_nav .item {
    padding: 2px;
}

.ic_countdown {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    margin-right: 16px;
    box-shadow: 0px 4px 0px 0px #7F3D16;
}

.ic_countdown:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #7A478B 0%, #4B98A6 32%, #4B98A6 70%, #7A478B 100%);
}

.ic_countdown:after {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    background: url(/images/attempt/ic_countdown.png) no-repeat center center;
    background-size: contain;
}

.sidebar_countdown > span {
    display: block;
    margin-right: 16px;
    font-family: "Paytone One", serif;
    font-size: 26px;
    color: #fff;
    text-shadow: 1px 1px 0px #502A03, -1px 1px 0px #502A03, 1px -1px 0px #502A03, -1px -1px 0px #502A03, -1px 3px 0px #502A03, 1px 3px 0px #502A03, -1px 0px 0px #502A03;
}

.header_main.review {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header_main.review .content {
    width: calc(100% - 120px);
    padding: 16px 60px 16px 75px;
}

.header_container .header_main.review .title_wrap h3 {
    color: #75400F;
    text-shadow: 0px 0px 0px #503522, -1px 0px 0px #503522, 0px -1px 0px #503522, 0px -1px 0px #503522;
    font-size: 34px;
}

.header_main.review .title_wrap {
    width: 150px;
}

.process_countdown {
    width: calc(100% - 300px);
    background: #756E5C;
    height: 40px;
    position: relative;
    border-radius: 99px;
    border: 2px solid #7F3D16;
    box-shadow: 0px 4px 4px 0px #00000040 inset;
}

.process_countdown .percent {
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    background: linear-gradient(90deg, #A9CD29 0%, #C8FF97 100%);
    border-radius: 99px;
}

.process_countdown .percent .icon {
    width: 62px;
    height: 62px;
    border: 1px solid #FFFAF3;
    position: absolute;
    display: block;
    right: -15px;
    top: -15px;
    z-index: 9;
    border-radius: 50%;
    box-shadow: 0px 4px 0px 0px #7F3D16;
}

.process_countdown .percent .icon .ic_countdown {
    margin: 0;
}

.process_countdown .percent:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 0;
    right: 0;
    height: 15px;
    background: #fff;
    opacity: 0.5;
    z-index: 1;
    border-radius: 99px;
}

.header_main.review .process_time {
    display: flex;
    width: 110px;
    margin-left: 40px;
}

.header_main.review .process_time span {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.header_main.review .process_time strong {
    font-family: "Paytone One", serif;
    font-size: 34px;
    line-height: 34px;
    color: #fff;
    letter-spacing: 0.25px;
    text-shadow: 1px 1px 0px #502A03, -1px 1px 0px #502A03, 1px -1px 0px #502A03, -1px -1px 0px #502A03, -1px 3px 0px #502A03, 1px 3px 0px #502A03, -1px 0px 0px #502A03;
}

.btn_audio i {
    position: relative;
}

.btn_audio.mute i:after {
    content: "";
    position: absolute;
    width: 18px;
    height: 19px;
    display: block;
    top: 14px;
    right: 18px;
    background: url(/images/attempt/ic_time_text.png) no-repeat center center;
    background-size: cover;
}

.dialog_attempt_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
}

.dialog_attempt_wrap.show {
    opacity: 1;
    visibility: visible;
}

.dialog_attempt_wrap .overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgb(0 0 0 / 50%);
    z-index: 9;
}

.dialog_attempt {
    max-width: 574px;
    width: 100%;
    position: relative;
}

.dialog_attempt.dialog {
    max-width: 443px;
}

.dialog_attempt .dialog_main {
    padding: 48px 24px;
    border: 2px solid #808080;
    background: #FFFAF3;
    position: relative;
    z-index: 99;
    border-radius: 90px;
    box-shadow: 0px 4px 0px 0px #FFFFFF inset, 0px -6px 0px 0px #00000040 inset;
}

.dialog_attempt:before {
    content: "";
    position: absolute;
    left: -16px;
    top: -16px;
    right: -16px;
    bottom: -16px;
    background: linear-gradient(180deg, #FFAD39 0%, #FF6900 100%);
    z-index: 11;
    border-radius: 100px;
    box-shadow: 0px 4px 0px 0px #F9DE82 inset, 0px 12px 0px 0px #BF3D27;
}

.dialog_attempt .content {
    text-align: center;
    margin-bottom: 32px;
}

.dialog_attempt .content strong {
    font-family: "Paytone One", serif;
    font-weight: normal;
    color: #4D4D4D;
    font-size: 26px;
    line-height: 32px;
    max-width: 283px;
    margin-bottom: 8px;
    display: inline-block;
}

.dialog_attempt .content p {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.15px;
    color: #4D4D4D;
    font-weight: 600;
}

.dialog_attempt .account {
    margin-bottom: 16px;
    background: #dbe6ff;
    border-radius: 8px;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
}

.dialog_attempt .account .avatar {
    margin: 16px;
    min-width: 64px;
    width: 64px;
    height: 64px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #fff;
}

.dialog_attempt .account .info {
    padding: 8px 16px 8px 0;
}

.dialog_attempt .account .info p {
    color: #4D4D4D;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 1.25px;
    font-weight: 600;
    margin: 8px 0;
}

.dialog_attempt .attempt_result {
    display: flex;
    justify-content: space-between;
    margin: 0 -8px 16px;
}

.dialog_attempt .attempt_result .item {
    background: #dbe6ff;
    border-radius: 8px;
    text-align: center;
    flex: 1;
    margin: 0 8px;
}

.dialog_attempt .attempt_result .head {
    height: 31px;
    background: #7670B3;
    border-radius: 8px;
}

.dialog_attempt .attempt_result .head span {
    font-size: 16px;
    line-height: 31px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.dialog_attempt .attempt_result .cont {
    height: 89px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog_attempt .attempt_result .cont strong {
    font-family: "Paytone One", serif;
    font-weight: 400;
    font-size: 32px;
    color: #fff;
    text-shadow: 2px 1px 0px #7670B3, -2px 1px 0px #7670B3, 2px -2px 0px #7670B3, 0px 2px 0px #7670B3, -1px -2px 0px #7670B3, -2px -1px 0px #7670B3;
}

.dialog_attempt .skill {
    background: #daf6ea;
    box-shadow: 0px -4px 0px 0px #80C5A7 inset;
    border-radius: 16px;
    padding: 30px 18px;
    margin-bottom: 32px;
}

.dialog_attempt .skill > strong {
    color: #333333;
    font-size: 26px;
    line-height: 32px;
    display: block;
    text-align: center;
}

.skill_data {
    display: flex;
    margin: 0 -10px;
    text-align: center;
}

.skill_data .item {
    padding: 0 10px;
    margin-top: 50px;
    position: relative;
    width: 33.33%;
}

.skill_data .item .cont {
    background: #fff;
    border-radius: 16px;
    height: 150px;
    padding: 40px 14px 30px;
}

.skill_data .item .cont strong {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 4px;
    display: block;
    text-align: center;
    color: #333333;
}

.skill_data .item .cont p {
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.2px;
    color: #666666;
}

.dialog_attempt button {
    display: block;
    margin: auto;
}

.btn_attempt_submit {
    width: 225px;
    height: 56px;
    position: relative;
    margin-bottom: 6px !important;
    background: linear-gradient(180deg, #FFAD39 0%, #FF6900 100%);
    border-radius: 99px;
    box-shadow: 0px 4px 0px 0px #F9DE82 inset, 0px 6px 0px 0px #BF3D27;
    border: 0;
    font-family: "Paytone One", serif;
    font-weight: 400;
    font-size: 20px;
    color: #fff;
    letter-spacing: 0.15px;
    text-shadow: 1px 2px 0px #502A03, -1px 2px 0px #502A03, 1px -1px 0px #502A03, -1px -1px 0px #502A03, -2px 0px 0px #502A03, -2px 1px 0px #502A03;
}

.btn_attempt_submit:after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -6px;
    border: 3px solid #7F3D16;
    border-radius: 60px;
}

.btn_attempt_submit.has_icon {
    padding-left: 37px;
}

.btn_attempt_submit.has_icon .ic {
    position: absolute;
    left: 6px;
    top: 6px;
}

.btn_attempt_submit:before {
    content: "";
    width: 13px;
    height: 8px;
    position: absolute;
    right: 6px;
    top: 9px;
    background: url(/images/attempt/ic_btn_highlight.png) no-repeat center center;
    background-size: cover;
}

.btn_attempt_cancel {
    font-family: "Paytone One", serif;
    font-weight: 400;
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.15px;
    margin-top: 24px !important;
    text-decoration: underline;
}

.skill_data .item .icon {
    position: absolute;
    width: 54px;
    height: 54px;
    left: calc(50% - 25px);
    top: -25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skill_data .item:nth-child(3n + 1) .icon {
    background: #32AD70;
}

.skill_data .item:nth-child(3n + 2) .icon {
    background: #005BA6;
}

.skill_data .item:nth-child(3n + 3) .icon {
    background: #FF8B25;
}

.skill_data .item .icon .ic {
    width: 32px;
    height: 32px;
}

.dialog_attempt > .ic {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 999;
}

.dialog_attempt > .ic.ic_dialog_1 {
    width: 420px;
    height: 199px;
    top: 31px;
}

.dialog_attempt > .ic.ic_dialog_2 {
    width: 259px;
    height: 209px;
    top: 22px;
    left: calc(50% - 33px);
}

.dialog_attempt > .ic.ic_dialog_4,
.dialog_attempt > .ic.ic_dialog_3 {
    width: 193px;
    height: 189px;
    top: 22px;
}

.attempt_main > * {
    position: relative;
}

.part_nav {
    margin: 0 0 40px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}

.part_nav li {
    list-style: none;
    margin: 0 8px 8px 0;
}

.part_nav button {
    padding: 0 24px;
    height: 60px;
    border-radius: 24px;
    background: #FFF7ED;
    border: 0;
    outline: none;
    font-size: 20px;
    letter-spacing: 0.15px;
}

.part_nav button.active,
.part_nav button:hover {
    background: #FF7B00;
    color: #fff;
}

.attempt_body > .attempt_sidebar .attempt_sidebar_body.sticky {
    max-height: calc(100vh - 213px);
    position: sticky;
    top: 10px;
}

.solution .structure_image {
    max-width: 200px;
}

.solution .structure_series.column_1 .structure_audio,
.solution .structure_series.column_1 .structure_video,
.solution .structure_series.column_1 .structure_image,
.solution .structure_series.column_1 .structure_text {
    text-align: center;
}

.question_content_structure.row_1 > .item {
    flex: 1 0;
}

.attempt_wrap_3 .attempt_container_wrap {
    height: auto;
}

.attempt_wrap_3 .attempt_container_wrap .attempt_body {
    max-height: none;
}

.des.drag_drop_in_order {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.des.drag_drop_in_order li {
    max-width: 160px;
    align-items: center;
}

.drag_drop_answer .answer_box .structure_video, .drag_drop_answer .answer_box .structure_audio, .drag_drop_answer .answer_box .structure_image {
    width: 100%;
    height: 100%;
    max-height: 570px;
}

.drag_drop_answer .answer_box .structure_image img {
    position: relative;
}

.drag_drop_answer .answer_cont {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar_countdown.not_question_title .text {
    display: flex;
    align-items: center;
    min-width: 120px;
}

.sidebar_countdown.not_question_title .text span {
    margin-right: 10px;
}

.attempt_wrap_3 .attempt_main .attempt_content {
    max-height: none;
    min-height: auto;
    overflow: inherit;
}

.attempt_wrap_3 .attempt_container {
    padding-bottom: 0 !important;
}

.result_title {
    box-shadow: 4px 0px 0px 0px #F9F2E2 inset, -4px 0px 0px 0px #F9F2E2 inset, 0px -4px 0px 0px #F9F2E2 inset, 0px 4px 0px 0px #F9F2E2 inset;
    padding: 8px;
    border-radius: 24px;
    text-align: center;
    background: #FFF7ED;
    color: #808080;
    font-family: "Paytone One", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: 0.15px;
    margin: 0 5px 25px;
}

.result_content {
    color: #417262;
    font-family: "Paytone One", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    line-height: 52px;
    text-align: center;
}

.attempt_main.hide {
    display: none;
}

.fill_input.audio, .fill_input.image {
    border-radius: 0;
    border: 0;
    background: transparent !important;
    position: relative;
}

.fill_input.image img {
    filter: none;
}

.fill_input.is_correct.image {
    overflow: hidden;
    border: 2px solid #047E49 !important;
    border-radius: 8px;
}

.fill_input.is_wrong.image {
    overflow: hidden;
    border: 2px solid #FF6262 !important;
    border-radius: 8px;
}

.fill_input.audio {
    transform: translateY(12px);
    width: 64px;
}

.fill_input.is_correct.audio svg rect {
    fill: #047E49;
}

.fill_input.is_wrong.audio svg rect {
    fill: #FF6262;
}

.fill_input.image {
    transform: translateY(-8px);
}

.fill_input.audio .structure_audio {
    position: absolute;
    left: calc(50% - 32px);
    top: calc(50% - 32px);
}

.fill_input.image .image-container {
    position: initial;
}

.fill_input.image .image-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.math-container.loading > .math-renderer {
    opacity: 0;
}

.math-container.loading {
    position: relative;
}

.math-container.loading .math-loading {
    position: absolute;
    width: 32px;
    height: 32px;
    left: calc(50% - 16px);
    top: calc(50% - 16px);
}

.attempt_solution .math-container {
    overflow-x: auto;
    overflow-y: hidden;
}

input.fill_input {
    font-size: 20px;
}

.header_action {
    display: none;
}

.show_sidebar {
    display: none;
}

.fill_input_wrap .preview_value {
    display: block;
    border: 1px solid #B3B3B3;
    min-width: 110px;
    max-width: 300px;
    border-radius: 40px;
    text-align: center;
    padding: 3px 10px;
    background-color: #fff;
    font-size: 20px;
    min-height: 36px;
    line-height: 28px;
    overflow-x: auto;
}

.attempt_wrap_2 .attempt_container_wrap {
    height: auto;
}

.attempt_wrap_2 .attempt_content,
.attempt_wrap_2 .attempt_container_wrap .attempt_body {
    max-height: none;
}

.sidebar_action .btn_attempt_submit {
    width: auto;
    padding: 10px 20px;
    font-size: 16px;
    height: auto;
}

.question_content {
    width: 100%;
}

.question_content_structure .item {
    width: 100%;
}

.dialog_attempt .attempt_result.is_essay {
    flex-wrap: wrap;
}

.dialog_attempt .attempt_result.is_essay .item {
    width: calc(50% - 16px);
    flex: none;
    margin-bottom: 16px;
}

.arena_choose_question .attempt_content,
.attempt_arena .attempt_content {
    max-height: none;
    overflow: inherit;
    min-height: auto;
}

.arena_choose_question .question_content_structure {
    padding: 0;
}

.arena_choose_question .question_content .head {
    color: #BF6D38;
    font-size: 16px;
    font-weight: 700;
}

.arena_choose_question .question_content .head * {
    font-weight: 700;
}

.number-text {
    color: #BF6D38;
    display: none;
}

.attempt_content .question_content .head .question_title {
    display: flex;
}

.arena_choose_question .question_number {
    display: none;
}

.arena_choose_question .head_action {
    display: none;
}

.arena_choose_question .fill_input_wrap .preview_value {
    border-color: #B3B3B3 !important;
    background-color: #fff !important;
}

.arena-sidebar {
    background: #FFEED7 url(/images/attempt/bg-sidebar.png) no-repeat center center;
    background-size: cover;
}

.stroke-title{
    -webkit-text-stroke: 1.5px #853522;
}

.ic_number_is-support:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 38px;
    border: 2px solid #FF3B3B;
    border-radius: 50%;
}

.ic_number_is-support:after {
    content: "SOS";
    width: 16px;
    height: 16px;
    font-size: 6px;
    font-weight: 700;
    color: #fff;
    background: #FF3B3B;
    border-radius: 50%;
    position: absolute;
    top: 0px;
    right: -3px;
    line-height: 16px;
}

.attempt_test .attempt_content {
    max-height: none;
    overflow: inherit;
}

.question-shadow {
    box-shadow: inset 0px 4px 0px 0px #FFFFFF, inset 0px -6px 0px 0px #00000040;
}

.btn-cate-show svg {
    transform: rotate(180deg);
}

.btn-cate-show.is-show svg {
    transform: rotate(0deg);
}

.btn-cate-show.is-show + .hidden {
    display: block;
}

.join-image {
    padding: 5px 10px;
    background: #ff8618;
    border: 0;
    border-radius: 4px;
    color: #fff;
    box-shadow: 0 0 3px 0 #ff8618;
    outline: none;
}

.is-joined.drag_drop_answer > .answer_box .box_rounder {
    padding: revert-layer;
    border-width: 0;
    border-radius: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

.is-joined.drag_drop_answer > .answer_box .box_rounder.is_correct,
.is-joined.drag_drop_answer > .answer_box .box_rounder.is_wrong {
    border-width: 1px;
}

.is-joined.drag_drop_answer > .answer_box > li.answer_item {
    margin: 0;
}

.is-joined.drag_drop_answer > .answer_box .box_rounder .structure_image {
    padding: 0;
}

.is-joined.drag_drop_answer > .answer_box .box_rounder .structure_image .image-container {
    border-radius: 0;
}

ul.solution.row {
    display: flex;
    gap: 10px;
}

.attempt_question {
    min-height: auto !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgb(0 0 0 / 50%) !important;
    display: flex;
    align-items: center;
    padding: 20px !important;
    justify-content: center;
}

.attempt_question .attempt_main {
    margin: 0 !important;
    height: auto !important;
}

.attempt_question .attempt_main .attempt_content {
    max-height: calc(100vh - 210px) !important;
}

.attempt_question .attempt_body {
    padding: 0 !important;
}

.attempt_question .question_number {
    display: none !important;
}

.drag_drop_answer > .answer_box.column {
    margin: 0 5px;
}

.drag_drop_answer .box_rounder {
    cursor: move;
    user-select: none;
}

.attempt_wrap_2:not(.review) .head .question_number{
    background-color: rgb(225, 225, 225) !important;
}

.attempt_wrap_2:not(.review) .head.is_work .question_number{
    background-color: rgb(255, 123, 0) !important;
}

.maze_mind .btn_refresh,
.maze_mind .question_number {
    display: none;
}

.maze_mind .qa_number {
    display: block !important;
}

.maze_mind .attempt_main {
    padding: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
}

.maze_mind .attempt_main:before{
    display: none;
}

@media (min-width: 540px) {
    .btn_preview_content{
        display: none;
    }

    .row_1 .box_rounder .box_cont {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        height: 100%;
    }

    .row_1 .box_rounder .box_cont .answer_cont {
        text-align: center;
    }

    .row_1 .box_rounder .box_cont .answer_number {
        margin: 0 0 16px;
    }
}

@media (max-width: 1199px) {
    .attempt_sidebar + .attempt_container {
        padding-right: 20px;
    }

    .header_container .back {
        width: 60px;
        padding-right: 0;
    }

    .header_container .back .ic_attempt_back {
        width: 60px;
        height: 64px;
    }

    .header_container .header_main {
        width: 100%;
        padding-left: 10px;
    }
}

@media (max-width: 767px) {
    .attempt_sidebar {
        order: 1;
        margin: auto;
    }

    .attempt_sidebar + .attempt_container {
        width: 100% !important;
        margin-top: 40px;
        padding: 0;
    }

    .header_container .header_main {
        padding: 0;
    }

    .header_container .back {
        position: absolute;
        top: 15px;
    }

    .attempt_header .attempt_sidebar {
        padding-left: 80px;
        text-align: center;
        width: 100%;
    }

    .attempt_container_wrap .attempt_body .attempt_container {
        order: 2;
    }

    .result_title {
        margin-bottom: 10px;
    }

    .attempt_body {
        padding-top: 10px !important;
    }

    .part_nav {
        margin-bottom: 10px;
    }

    .question_content_structure {
        padding: 0;
    }

    .attempt_main {
        padding: 30px;
    }

    .question_number.md {
        transform: scale(0.8);
        margin-right: 0px !important;
    }

    .attempt_lesson_wrap .attempt_container_wrap,
    .attempt_lesson_wrap .attempt_main {
        height: auto !important;
    }

    .attempt_lesson_wrap .attempt_content,
    .attempt_lesson_wrap .attempt_body {
        max-height: none;
    }

    .attempt_body .attempt_sidebar {
        position: fixed;
        right: 55px;
        z-index: 9;
        bottom: 20px;
        border-radius: 24px;
        opacity: 0;
        visibility: hidden;
    }

    .attempt_body .attempt_sidebar.active:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgb(0 0 0 / 20%);
    }

    .attempt_body .attempt_sidebar.active {
        opacity: 1;
        visibility: visible;
    }

    .show_sidebar {
        display: flex;
    }

    .attempt_body > .attempt_sidebar .attempt_sidebar_body.sticky {
        max-height: calc(100vh - 40px);
    }

    .sidebar_nav {
        max-height: calc(100vh - 150px);
    }

    .title_wrap {
        margin-bottom: 10px;
    }
}

@media (max-width: 529px) {
    .header_countdown {
        margin: 0;
    }

    .header_main .title_wrap {
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
    }

    .header_container .content {
        padding: 15px 15px 5px;
    }

    .qa_mutiple_choice .item.answer_item {
        width: 100% !important;
    }

    .topic_box {
        display: block;
        padding-right: 0;
    }

    .topic_answer_item {
        padding: 5px;
    }

    .answer_box .structure_text {
        padding: 10px 20px;
    }

    .qa_topic_solution .item > span {
        min-width: 60px;
    }

    .topic_answer_box {
        padding-top: 5px;
    }

    .drag_drop_order .topic_answer_item {
        width: 50%;
    }

    .drag_drop_order .topic_answer_item > button.topic_answer {
        max-width: 100%;
        width: 100%;
    }

    .drag_drop_order .answer_box .structure_text {
        padding: 10px;
        width: 100%;
        min-width: auto;
    }

    .drag_drop_answer .box_rounder {
        margin: 2px;
    }

    .question_answer.true_false > .item {
        width: 50%;
    }

    .attempt_header .attempt_sidebar {
        height: 44px;
    }

    .attempt_account {
        display: flex;
        justify-content: end;
    }

    .attempt_account .name {
        height: 36px;
        padding: 7px 45px 7px 20px;
        width: auto;
        max-width: 200px;
        font-size: 18px;
    }

    .attempt_account .name strong {
        padding: 0 2px;
    }

    .attempt_account .avatar {
        left: auto;
        right: 0;
        top: 0;
        width: 40px;
        height: 40px;
    }

    .header_container .back .ic_attempt_back {
        width: 40px;
        height: 43px;
    }

    .attempt_header {
        padding: 10px 0;
    }

    .header_container .back {
        width: 40px;
        top: 10px;
    }

    .attempt_sidebar + .attempt_container {
        margin-top: 20px;
    }

    .header_action {
        display: block;
        height: 50px;
    }

    .header_action_wrap {
        width: 100%;
        display: flex    ;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 1;
    }

    .header_countdown .ic_countdown {
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    .header_countdown .ic_countdown:after {
        width: 20px;
        height: 20px;
        left: calc(50% - 10px);
        top: calc(50% - 10px);
    }

    .sidebar_countdown.not_question_title .text {
        display: flex    ;
        align-items: center;
        min-width: 55px;
    }

    .sidebar_countdown .text span {
        display: none;
    }

    .header_action .ic_sidebar_submit {
        width: 100px;
        height: 50px;
    }

    .header_container .content {
        transform: none;
    }

    .mobile_sticky .header_action_wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
        background: rgb(107 158 187);
        padding: 5px 10px;
        box-shadow: 0 0 10px 0 #777;
    }

    .header_action button {
        line-height: 0;
    }

    .dialog_attempt:before {
        left: -10px;
        top: -10px;
        right: -10px;
        bottom: -10px;
    }

    .dialog_attempt {
        max-width: calc(100% - 40px) !important;
    }

    .dialog_attempt .dialog_main {
        padding: 20px 15px 25px;
        border-radius: 40px;
    }

    .dialog_attempt:before {
        border-radius: 40px;
    }

    .dialog_attempt > .ic.ic_dialog_1 {
        width: 280px;
        height: 125px;
        top: 5px;
    }

    .btn_attempt_submit {
        width: 200px;
        height: 49px;
        font-size: 18px;
    }

    .dialog_attempt .content strong {
        font-size: 22px;
        line-height: 28px;
    }

    .dialog_attempt .content p {
        font-size: 18px;
        line-height: 24px;
    }

    .attempt_matching > .item {
        max-width: 50%;
        width: 100%;
        padding: 0;
    }

    .matching_items .item {
        position: relative;
    }

    .matching_number {
        position: absolute;
        width: 40px;
        height: 30px;
        font-size: 14px;
        right: -20px;
        top: calc(50% - 35px);
        border: 1px solid #808080;
    }

    .item_right .matching_number {
        right: auto;
        left: -20px;
        top: calc(50% + 5px);
    }

    .matching_content {
        width: calc(100% - 20px);
        padding: 10px 5px;
        border-radius: 20px;
        height: 150px;
        font-size: 14px;
    }

    .item_right .matching_item {
        justify-content: right;
    }

    .matching_item.selected {
        margin: 0 !important;
    }

    .matching_item.selected .matching_number {
        background: #ff7b00 !important;
        border-color: #ff7b00 !important;
        color: #fff;
    }

    .dialog_attempt .account .avatar {
        min-width: 40px;
        width: 40px;
        height: 40px;
        margin: 10px;
    }

    .dialog_attempt .content {
        margin-bottom: 10px;
    }

    .dialog_main_scrollbar {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .question_answer.true_false .box_rounder {
        padding: 20px 15px;
    }

    .preview_content_wrap {
        position: relative;
    }

    .btn_preview_content {
        position: absolute;
        z-index: 1;
        bottom: 17px;
        width: 30px;
        height: 30px;
        line-height: 0px;
        text-align: center;
        left: calc(50% - 15px);
    }

    .btn_preview_content svg {
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    .matching_items .btn_preview_content {
        top: 10px;
        right: -14px;
        left: auto;
        border: 1px solid #333;
        border-radius: 8px;
        background: #fff;
    }

    .item_right .matching_items .btn_preview_content {
        top: auto;
        bottom: 10px;
        left: -14px;
    }

    .box_rounder .box_cont .answer_text {
        overflow-x: auto;
    }

    .row_1 {
        flex-wrap: wrap;
    }

    .drag_drop_answer > .answer_box li.item.answer_item {
        width: 100%;
        flex: auto;
    }

    .video_control {
        padding: 0 5px;
    }

    .video_player_container .play_control {
        top: calc(50% - 15px);
        left: calc(50% - 15px);
        width: 30px;
        height: 30px;
    }

    .ic_video_play_control {
        width: 30px;
        height: 30px;
    }

    #custom_ic_video_play_control {
        width: 50px;
        height: 50px;
    }

    .control_container button {
        width: 25px;
        height: 25px;
    }

    .control_container button i {
        width: 15px;
        height: 15px;
    }

    input[type="range"] {
        height: 2px;
    }

    /* Thumb: webkit */
    input[type="range"]::-webkit-slider-thumb {
        height: 10px;
        width: 10px;
    }

    /* Thumb: Firefox */
    input[type="range"]::-moz-range-thumb {
        height: 10px;
        width: 10px;
    }

    .volume_control input[type="range"]{
        width: 50px;
        left: -15px;
        bottom: 45px;
    }

    .duration_time span {
        font-size: 13px;
    }

    .duration_time i {
        font-size: 13px;
        line-height: 1;
    }

    .answer_box .structure_video, .answer_box .structure_audio {
        width: 60px;
        height: 60px;
    }

    .answer_box .structure_video svg, .answer_box .structure_audio svg {
        width: 30px;
        height: 30px;
    }

    .label_file{
        padding: 15px;
    }

    .label_file p strong{
        font-size: 14px;
    }

    .label_file p{
        font-size: 13px;
    }

    .attempt_lesson_wrap .header_countdown .sidebar_countdown > span {
        font-size: 17px;
        margin-right: 5px;
    }

    .attempt_lesson_wrap .header_countdown .sidebar_countdown .text strong {
        font-size: 17px;
    }

    .attempt_lesson_wrap .header_countdown .sidebar_countdown .text {
        min-width: 50px;
    }

    .dialog_attempt .attempt_result.is_essay .item {
        width: 100%;
    }

    .ic_next_button {
        width: 40px;
        height: 40px;
    }

    .attempt_topic_box .head .box > div {
        font-size: 14px !important;
        line-height: 1 !important;
    }
}