.question-table {
    max-width: 100%;
    width: 70%;
    margin: 0 auto;
}
.question-table td p{
    margin: 0;
    display: inline;
}
.question-table td, .question-table th {
    padding: 5px 10px;
    vertical-align: middle;
}

@media(max-width:767px){
    .question-table {
        width: 100%;
    }
}
.checkcontainer {
    display: inline-block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.checkcontainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkcontainer p {
    display: inline;
}

.checkcontainer .radiobtn {
    position: absolute;
    top: calc(50% - 11px);
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

.checkcontainer input:checked ~ .radiobtn {
    background-color: #2196F3;
}

.checkcontainer .radiobtn:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.checkcontainer .radiobtn:after {
    content: "";
    position: absolute;
    display: none;
}

.checkcontainer input:checked ~ .radiobtn:after {
    display: block;
}

.checkcontainer .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: none;
}

.checkcontainer input:checked ~ .checkmark {
    background-color: #2196F3;
}
.checkcontainer .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkcontainer .checkmark:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.checkcontainer input:checked ~ .checkmark:after {
    display: block;
}
.question-detail {
    font-size: 18px;
}

.question_guide_main {
    background-color: #D2DEF0 !important;
    font-size: 16px;
}

.book-question-title {
    margin-top: 45px;
    margin-bottom: 45px;
}
.book-question-title h1 {
    text-align: center;
    font-weight: bold;
    color: #3D69AD;
    text-transform: uppercase;
}
.book-question-sidebar > h3 {
    border: 1px #f2743e solid;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    text-transform: uppercase;
    font-weight: bold;
    background-color: #f2743e;
    color: #fff;
}
.list-book-answ ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.list-book-answ ul li {
    display: flex;
    flex: 0 0 calc(20% - 6px);
    max-width: 20%;
    justify-content: center;
    border: 1px #2d6ab2 solid;
    border-radius: 5px;
    font-weight: bold;
    font-size: 15px;
    background-color: #2d6ab2;
    color: #fff;
    cursor: pointer;
}
.list-book-answ ul li span {
    display: block;
    padding: 3px 0px;
}
.list-book-answ ul li.act,
.list-book-answ ul li:hover{
    background-color: #f2743e;
    border-color: #f2743e;
}




/*****Question List*****/
.contents-question-page {
    margin: 25px 0 0 0;
    font-size: 16px;
}
.extra-answer-vip-detail{
    margin-bottom: 20px;
}
.extra-question-desc .mjx-chtml,
.extra-item-info .mjx-chtml,
.extra-guide-detail .mjx-chtml,
.extra-answer-vip-detail .mjx-chtml,
.extra-practice-question-main .mjx-chtml{
    font-size: 120% !important;
}
.extra-answer-vip-detail {
    overflow-x: auto;
}
.extra-practice-question-items {
    margin-top: 0px;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}
.extra-question-answers {
    margin-bottom: 25px;
}
.extra-question-number {
    color: #333;
    font-size: 20px;
    font-weight: bold;
}
.extra-question-title {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    position: relative;
}
.extra-question-title .btn-feedback.btn-onclick {
    position: relative;
    z-index: 99;
    display: flex;
    margin-left: auto;
    align-items: center;
}
.extra-question-title .btn-feedback.btn-onclick img {
    width: 14px;
    height: 13px;
    margin-right: 5px;
}
.extra-question-title .level-question {
    margin-left: 10px;
}
.extra-question-answers > ul > li {
    display: flex;
    align-items: center;
    line-height: 50px;
}
.extra-item-num {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border: 1px #ddd solid;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
    line-height: 27px;
}
.extra-line-q.choosed,
.extra-question-answers > ul > li.choosed .extra-item-num,
.extra-item-num:hover{
    border-color:#167fc8;
    background-color:#167fc8;
    color: #FFF;
}
.extra-question-answers > ul {
    padding-left: 30px;
}
.extra-practice-question-items::after{
    content:"";
    position: absolute;
    background-color: #bfbfbf;
    width: 100%;
    height: 1px;
    left: 0px;
    right: 0px;
    bottom:0px;
    display: none;
}

.extra-question-desc p.has-img img {
    max-width: 65%;height: auto;
}
.extra-result .extra-question-desc p.has-img img {
    max-width: 100%;
}
.extra-question-lines {
    display: flex;
    align-items: center;
    margin: 15px 0;
    width: 100%;
    overflow: hidden;
}
.extra-question-lines-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}
.extra-question-lines-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: auto;
}
.extra-question-lines-left a, .extra-question-lines-left button {
    margin-right: 10px;
}

.extra-line-q-num {
    margin-right: 15px;font-style: italic;
}
.extra-line-q-num strong {
    padding-left: 8px;
}

.btn-finished-answer,
.extra-guide-question span,
.extra-next-question span {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #8AC53E;
    color: #fff;
    border-radius: 3px;
    padding: 5px 15px;
}
.extra-question-desc img {
    max-width: 450px;
    height: auto;
}
.extra-guide-question span{
    background-color: #EC8E01;
}
.extra-guide-question {
    margin-right: 20px;
}
.extra-title-info-box {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}
.extra-box {
    padding-top: 20px !important;
    position: relative;
    background-color: #f1f2f3;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 6px;
}

.box_dang {
    border: 1px solid #e0e0e0;
}

.extra-title-info-box span{
    position: relative;
}
.extra-title-info-box::before {
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    background-color: #ccc;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
.extra-title-info-box span::before{
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    background-color: #167fc8;
    bottom: -13px;
    left: 0px;
    right: 0px;
}
.right-question {
    color: #f2743e;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 35px;
}
.book-question-file-download {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    font-size: 16px;
    text-transform: uppercase;
}
.book-question-file-download i {
    margin-right: 10px;
}
.book-question-file-download:hover *{
    color: #f2743e;
}
.box-modal-info {
    font-weight: normal;
    text-transform: none;
    font-size: 20px;
    text-align: center;
    color: #333;
    padding-top: 10px;
}
.box-modal-info p {
    font-weight: bold;
    color: #ff8800;
}
.book-view-course {
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    padding-bottom: 15px;
}
.book-view-course a {
    background-color: #06c;
    color: #fff;
    padding: 5px 20px;
    border-radius: 5px;
    font-size: 15px;
}
.book-question-teachers .teachers-inner > div {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.book-question-teachers table{
    border:none;
}
.book-question-teachers table td{
    border:1px #ddd solid;
}

.showbox-modal.modal{
    padding:0px;border-radius: 0px;
}
.showbox-md-body {
    padding: 15px;
}
.showbox-md-header {
    background-color: #2a6ab4;
    text-align: center;
    padding: 15px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.showbox-md-header h3 {
    margin: 0px;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 100%;
    display: flex;
}

.modal-content textarea {
    width: 100%;
}

.jquery-modal.blocker {
    z-index: 100;
}

.text-red {
    color: #e13535;
}

.btn-save {
    border: none !important;
    background: none;
}
.level-question {
    font-size: 16px;
}
.right-question h3 {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 5px;
}

.inline-input input {
    display: inline-block;
}
input.short-input {
    width: 200px;
    max-width: 100%;
}
.question-body {
    margin-bottom: 20px;
}
.question-desc {
    margin-bottom: 10px;
}

.exam-online-page .extra-question-item {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}
.exam-online-page .question-list .extra-question-item {
    border-radius: 0px;
    border: none;
    border-top: 1px dashed #ccc;
}
#book_questions_ts247 .contents-question-page {
    margin-top: 0;
}
#book_questions_ts247 .contents-question-page .radiobtn {
    display: none;
}

#book_questions_ts247 .contents-question-page .checkcontainer {
    padding-left: 0;
}

#book_questions_ts247 .answer_solution .checkcontainer .checkmark {
    background-color: #eee;
}


.extra-question-footer {
    margin-bottom: 20px;
}

.answer-box {
    padding: 5px;
    border: 1px dashed #e0e0e0;
    margin-bottom: 20px;
}
.answer-box.success {
    border: 1px dashed #008d4c;
    color: #008d4c;
}

.answer-box.error {
    border: 1px dashed #e13535;
    color: #e13535;
}
.answer-box li.correct {
    color: #008d4c;
}
.answer-box li.incorrect {
    color: #e13535;
}
.level-question.hidden{
    display: none;
}
.extra-question-body {
    margin-bottom: 10px;
}

.question-item .content-question p.has-img img,
.content-question .gcc_content p.has-img img {
    max-width: 65%;height: auto;
}
.question-item[data-questiontype="4"] .content-question ul li a.btn-onclick{
    display: flex;
}
.question-item[data-questiontype="4"] .content-question ul li a.btn-onclick > span:first-child {
    width: 27px;
    height: 27px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 27px;
    margin-right: 6px;
}
.question-item[data-questiontype="4"] .content-question ul li a.btn-onclick span.anserTest p {
    margin-bottom: 0px;
}
.question-item[data-questiontype="4"] .content-question ul li a.btn-onclick span.anserTest {
    margin-top: 5px;
}

.ts247-list-answer-truefalse {
    margin-bottom: 35px;
}
.ts-answer-row {
    border: 2px #ddd solid;
    border-bottom-width: 0px;
}
.ts-answer-row:last-child{
    border-bottom-width: 2px;
}
.ts-answer-row-wrap {
    display: flex;
    align-items: center;
    padding: 0px 0px;
}
.ts-answer-row-info {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 10px;
}
.ts-answer-row-info > p {
    margin-bottom: 0px;
    line-height: 25px;
}
.ts-answer-row-choose-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ts-answer-row-choose-wrap > div {
    padding: 7px;
    border-left: 2px #ddd solid;
}
.ts-answer-row-choose-wrap span {
    display: flex;
    width: 27px;
    height: 27px;
    border: 1px #ddd solid;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    line-height: 31px;
    cursor: pointer;
}
.ts-answer-row-choose-wrap span.ts-answer-choose.act,
.ts-answer-row-choose-wrap span:hover{
    background-color:#5aa2fb;border-color: #5aa2fb;color: #fff;
}
.ts-answer-row-info strong.num {
    padding-right: 6px;
}
.ts247-hidden{
    display: none !important;
}
.mb-btn-step {
    color: #fff!important;
    background-image: linear-gradient(#5aa2fb,#468de5);
    padding: 6px 15px;
    display: inline-block;
    margin: 15px 0;
    border-radius: 4px;
    border:none;
    font-weight: bold;
}

.type_image {
    margin-top: 25px;
    position: relative;
}
.type_text textarea {
    height: 150px;
    overflow-y: auto;
    font-size: 16px;
    width: 100%;
    background: 0 0;
    border: solid 1px #e2e2e2;
    border-radius: 6px;
    outline: 0 !important;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
}

.type_image .panigtor-image .thumnail-img {
    position: relative;
    width: 115px;
    overflow: hidden;
    text-align: center;
    display: inline-block;
    height: 120px;
    margin: 0 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 6px;
}

.type_image .panigtor-image .thumnail-img:first-child {
    margin-left: 0;
}
.type_image .panigtor-image .thumnail-img.active {
    border: 1px solid #0791f3;
}

.type_image .panigtor-image .thumnail-img img {
    height: 120px;
    width: auto;
}

.type_image .panigtor-image {
    margin-top: 15px;
    height: 140px;
    overflow-y: hidden;
    overflow-x: auto;
    margin-right: 130px;
}

.type_image .ad-rep-button {
    position: absolute;
    right: 0;
    bottom: 18px;
    width: 115px;
    height: 120px;
    border-radius: 6px;
}
.type_image .ad-rep-button i{
    padding-top: 42px;
    color: #ccc;
}
.extra-question-body img {
    max-width: 100%;
}
.exam_write {
    position: relative;
}
.exam_write .btn-submit-question {
    color: #fff;
    text-decoration: underline;
    background: #f76734;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 4px;
}

input.answer-text {
    color: #000;
    font-weight: 400;
    font-size: 16px;
}

#submit-exam-modall .modal-content {
    font-size: 16px;
    max-width: 550px;
}
.list-question-number {
    background-color: #fafafa;
    max-height: none;
}
.list-question-number.toggle_list_q ul{max-height: 280px}


.list-question-number ul {
    padding: 0 15px;
    max-height: 0px;
    overflow: auto;
    -webkit-transition: max-height 600ms ease-in;
    transition: max-height 600ms ease-in;
    height: auto;
    border: solid 1px #e2e2e2;
    border-top: none;
    border-radius: 0 0 5px 5px;
}
#exam_online_main_content .left {
    width: calc(100% - 320px);
    margin-right: 20px;
}

#exam_online_main_content .right {
    margin-top: 0px;
}

.answer_solution .mab5 {
    margin: 10px 0 10px 20px;
    border-radius: 10px;
    position: relative;
    padding: 0 10px;
}

.answer_solution .mab5.right-anwser .checkcontainer .radiobtn, .answer_solution .mab5.right-anwser .checkcontainer .checkmark{
    background-color: #3da844;
}
.answer_solution .checkcontainer.right-anwser .checkmark{
    background-color: #3da844;
}
.color-green {
    color: #3da844;
}

.answer_solution .checkcontainer {
    margin: 6px 0;
}

.answer_solution .mab5 i.fa {
    position: absolute;
    left: -10px;
    top: calc(50% - 7px);
}

.answer_solution .mab5.correct i.fa:before {
    content: "\f00c";
    color: #3da844;
}

.answer_solution .mab5.in-correct i.fa:before {
    content: "\f00d";
    color: red;
}
.answer_solution .answer-result {
    font-weight: bold;
    margin-top: 10px;
}
.answer_solution .answer-result.correct {
    color: #3da844;
}
.answer_solution .answer-result.in-correct {
    color: red;
}
.answer_solution .mab5.in-correct .checkcontainer input:checked ~ .radiobtn {
    background-color: red;
}

.answer_solution .answer-tr-item .checkcontainer {
    margin: 0 0 20px 0;
}

.answer_solution .answer-tr-item.correct .checkcontainer input:checked ~ .checkmark {
    background-color: #3da844;
}

.answer_solution .answer-tr-item.in-correct .checkcontainer input:checked ~ .checkmark {
    background-color: red;
}

.exam_short_write {
    margin-bottom: 15px;
}
.question-list .extra-question-item {
    padding: 20px 0 0 0;
}

.extra-question-guide {
    display: none;
    position: relative;
}
.extra-question-guide .btn-close {
    position: absolute;
    top: 4px;
    right: 5px;
    color: #bbb;
    padding: 2px;
    cursor: pointer;
    z-index: 2;
}
.hidden_item {
    display: none;
}

.body-result-2 {
    padding: 0;
    border: none;
}

.body-result-2 ul{
    padding: 10px 0;
    border-radius: 5px;
    border-top: solid 1px #e2e2e2;
}
.contents-question-page .answer_solution .extra-question-item {
    display: block;
}
.contents-question-page .answer_solution .extra-question-item.hidden_item {
    display: none;
}
.answer_solution a.btn {
    width: 100%;
    color: #333;
}
.st-container .right {
    padding: 15px;
}

#book_questions_ts247 .answer_solution .extra-question-item {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
}
.question-fill-in .extra-question-body {
    position: relative;
}

.question-fill-in .btn-submit-question {
    color: #fff;
    text-decoration: underline;
    background: #f76734;
    text-decoration: none;
    padding: 5px 10px 3px 10px;
    border-radius: 4px;
    position: absolute;
    left: 5px;
    bottom: -42px;
}
.question-fill-in .inline-input input {
    width: 24px;
}
.question-fill-in .fill-in-input {
    text-align: center;
}
.question-fill-in .fill-in-input.correct {
    border: 1px solid #3da844;
}

.question-fill-in .fill-in-input.in-correct {
    border: 1px solid red;
}

.question-fill-in {
    margin-bottom: 20px;
}

.summury-result .list-question-number ul li a {
    font-size: 14px;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 8px 7px;
    line-height: 30px;
}

.list-question-number ul li a.did_aw {
    background: #7db7ff;
    color:#fff;
}

.list-question-number ul li a.did_aw.aw_correct {
    background: #3da844;
}

.list-question-number ul li a.did_aw.aw_not_correct {
    background: #e35c27;
}
.list-question-number ul li.active a {
    border: 1px solid #4c99f7;
}
.list-question-number ul li a.did_aw.aw_correct_quarter {
    background: conic-gradient(from 0deg, #3da844 0% 25%, #e35c27 25% 100%);
    border: 1px solid #ccc;
}
.list-question-number ul li a.did_aw.aw_correct_half {
    background: conic-gradient(from 0deg, #3da844 0% 50%, #e35c27 50% 100%);
    border: 1px solid #ccc;
}
.list-question-number ul li a.did_aw.aw_correct_three_quarters {
    background: conic-gradient(from 0deg, #3da844 0% 75%, #e35c27 75% 100%);
    border: 1px solid #ccc;
}

.exam_part {display: flex;margin-top: 20px;margin-bottom: 20px;}
.exam_part li {width: 33%;text-align: center;font-size: 18px;border-radius: 8px;background: #c8e2ff;padding: 10px;margin: 0 10px;color: #464646;}
.exam_part li p {margin-bottom: 0;}

.section_pri .left{width:735px!important}
.section_pri .right{width:400px!important;background:#fff}

.body-result{border:2px solid #e35c27;border-radius:10px;padding:10px}
.body-result .total_point{display:inline-block;vertical-align:middle}
.body-result p{margin:0}
.body-result .total_point:first-child{padding:0 30px;text-align:center}
.body-result .total_point:last-child{border-left:1px solid #ccc;padding-left:10px}
.body-result .total_point:last-child p{margin-bottom:8px}

.body-result-right {background:#ecf5ff;border-radius:10px;margin-top:10px;padding:10px}
.body-result-right .total_point p{display:inline-block;width:48%;vertical-align:text-top;text-align:center}
.body-result-right .total_point p:last-child{border-left:1px solid #ccc}
.exam_comment{max-width:500px}
.body-result-right .sum-result{text-align:center}
.result-question .sum-result span{margin-left:0!important}

.answer_result_footer{background:#2d69b3;margin-bottom:20px;margin-top:25px}
.answer_result_footer button{border-radius:4px;border:none;background:#fff;padding:7px 15px;margin:5px 7px;font-size:14px}

.type_image,.type_image_admin{margin-top:15px;position:relative}
.type_image .panigtor-image,.type_image_admin .panigtor-image{margin-top:15px;height:140px;overflow-y:hidden;overflow-x:auto;margin-right:130px}
.type_image .panigtor-image::-webkit-scrollbar,.type_image_admin .panigtor-image::-webkit-scrollbar{height:8px}
.type_image .panigtor-image::-webkit-scrollbar-track,.type_image_admin .panigtor-image::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:4px}
.type_image .panigtor-image::-webkit-scrollbar-thumb,.type_image_admin .panigtor-image::-webkit-scrollbar-thumb{border-radius:4px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5);background:#c5c5c5}
.type_image .panigtor-image .thumnail-img,.type_image_admin .panigtor-image .thumnail-img{position:relative;width:115px;overflow:hidden;text-align:center;display:inline-block;height:120px;margin:0 10px;border:1px solid #ccc;cursor:pointer;border-radius:6px}
.type_image .panigtor-image .thumnail-img img,.type_image_admin .panigtor-image .thumnail-img img{height:120px;width:auto}
.type_image .ad-rep-button,.type_image_admin .ad-rep-button{position:absolute;right:0;bottom:18px;width:115px;height:120px;border-radius:6px}
.type_image .ad-rep-button i,.type_image_admin .ad-rep-button i{padding-top:42px;color:#ccc}
.type_image .ad-rep-button:hover,.type_image_admin .ad-rep-button:hover{border:1px solid #f96935!important}
.type_image .ad-rep-button:hover i,.type_image_admin .ad-rep-button:hover i{color:#f96935}
.type_image .panigtor-image .thumnail-img:first-child,.type_image_admin .panigtor-image .thumnail-img:first-child{margin-left:0}
.type_image .panigtor-image .thumnail-img.active,.type_image_admin .panigtor-image .thumnail-img.active{border:1px solid #0791f3}
.panigtor-image .thumnail-img i{z-index:99999999999;position:absolute;right:0;border:1px solid #f96935;padding:1px 2px 2px 3px;background:#f96935;color:#fff}

.block-show-img{height:280px;overflow-y:auto;border:1px solid #ccc;padding:10px;display:flex;align-items:center}
.block-show-img img{width:auto;margin:auto}
.block-show-img::-webkit-scrollbar{width:6px}
.block-show-img::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:2px}
.block-show-img::-webkit-scrollbar-thumb{border-radius:2px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)}
.txtNotifi-result-page{
    margin-top: 15px;
    padding-left: 46px;
    background: url(../images/new.png) no-repeat left center / 35px;
}
.block-action>a {
    margin-top: 5px;
    width: auto;
    min-width: auto;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}

.question-item {
    display: block;
    overflow: hidden;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px dotted #bfbfbf !important;
}

.level-question {
    margin-left: 5px;
    width: 120px;
    height: 24px;
    padding: 0 0 0 10px;
    display: inline-block;
    line-height: 24px;
    background-repeat: no-repeat
}

.level-question.level-1 {
    background-image: url(../images/bg-level-1.png);
    color: #f1a65b
}

.level-question.level-2 {
    background-image: url(../images/bg-level-2.png);
    color: #329942
}

.level-question.level-3 {
    background-image: url(../images/bg-level-3.png);
    color: #b0c84f
}

.level-question.level-4 {
    background-image: url(../images/bg-level-4.png);
    color: #af7dc7
}

.question_point {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 54px 24px;
    display: inline-block;
    width: 54px;
    height: 24px;
    text-align: center;
    margin-left: 4px;
    line-height: 24px;
}
.point-lv-1{
    color:#f1a65b;
    background-image: url(../images/point-lv-1.png);
}
.point-lv-2{
    color:#329942;
    background-image: url(../images/point-lv-2.png);
}
.point-lv-3{
    color:#b0c84f;
    background-image: url(../images/point-lv-3.png);
}
.point-lv-4{
    color:#af7dc7;
    background-image: url(../images/point-lv-4.png);
}

.btn-feedback,.btn-save{color:#a3a3a3}
.btn-feedback span{margin-left:2px}
.btn-feedback:hover,.btn-save:hover{text-decoration:underline;color:#395694}
.btn-feedback img.hover,.btn-feedback:hover img.not-hover{display:none}
.btn-feedback:hover img.hover{display:inline-block}
.btn-save i{color:#a3a3a3;font-size:15px}


.process-exam-mb {
    z-index: 99999;
    height: 25px;
    font-size: 18px;
    margin-bottom: 15px;
    border-radius: 8px;
    background: #f96935;
    padding: 0px 10px 0 30px;
    color: #464646;
    display: none;
    position:absolute;
    right:-5px;
    top:-32px
}

.process-exam-mb img {
    position: absolute;
    left: -3px;
    top: -4px
}


.list-question-number {
    background-color: #fafafa;
    overflow: auto;
}

.type_text textarea::-webkit-scrollbar-thumb, .list-question-number::-webkit-scrollbar-thumb {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
}

.list-question-number .title-list-q {
    font-size: 18px;
    background: #e2e2e2;
    padding: 10px 0 6px;
    cursor: pointer;
    margin-bottom: 0px;
    border-radius: 6px 6px 0 0;
}

.list-question-number .title-list-q:after {
    float: right;
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f107";
    margin: 0 25px 0 -25px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    font-size: 18px;
    line-height: 20px;
}


.list-question-number li {
    display: inline-block;
    float: left;
}

.list-question-number ul li a {
    font-size: 16px;
    color: #757677;
    background: #f0efef;
    min-width: 30px;
    height: 30px;
    display: inline-block;
    margin: 8px 4px;
    border-radius: 50%;
    text-align: center;
    border: 1px solid #ccc;
    line-height: 30px;
}
.process-exam {
    font-size: 18px;
    margin-bottom: 15px;
    border-radius: 8px;
    background: #f96935;
    padding: 10px 10px 3px;
    margin-top: 20px;
    color: #464646;
}
.header-exam {
    margin: 0 15px;
}

.submit-exam {
    color: #fff !important;
    background-image: linear-gradient(#5aa2fb, #468de5);
    padding: 5px 28px;
    display: inline-block;
    margin: 15px 0;
    border-radius: 4px;
}

.list-question-number ul li a.has_done {
    background: #7db7ff;
    border: 1px solid #4c99f7;
    color: #fff;
}

.type_write a.img i, .type_write a.img_admin i {
    background: #f2f2f2;
    font-size: 18px;
    padding: 6px 5px 4px 4px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ccc;
}

.type_write a.img span, .type_write a.img_admin span {
    padding: 4px 4px 4px 13px;
    background-image: url(../images/bg-1.png);
    background-repeat: no-repeat;
}

.btn-inline {
    margin: 0 5px;
    border: none !important;
    background: none;
    cursor: pointer;
}
.exam-online-page .right {
    position: sticky;
    top: 0px;
}

#rank_hideshow{float:right;height:25px;margin:-5px 0 0;display:block;width:30px;transform:rotate(180deg);background:url(data:image/png;base64,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) no-repeat center}
#rank_hideshow.active{transform:rotate(0deg);transition:all .4s}
#rank_content{display:none}
#rank_content.active{display:block}

.btn-onclick {
    cursor: pointer;
}

.btn-inline {
    margin: 0 5px;
    border: none !important;
    background: none;
    cursor: pointer;
}
.btn {
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}
.btn-primary {
    background-color: #3c8dbc;
    border-color: #367fa9;
    color: #fff;
}
.btn-success {
    background-color: #00a65a;
    border-color: #008d4c;
    color: #fff;
}
.btn-default {
    border-color: #ccc;
    background-color: #fff;
}

.detail-simple-note {
    background: rgba(240, 206, 87, 0.2);
    padding: 30px 30px 15px 15px;
    margin-bottom: 15px;
    border-radius: 6px;
    position: relative;
    display: block;
    overflow-x: auto;
}
.detail-simple-note h3 {
    font-weight: bold;
    margin-top: -20px;
}
.note-item {
    font-size: 16px;
    position: relative;
}

span.btnEditNote {
    position: absolute;
    display: inline-block;
    right: 40px;
    top: 10px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}
.btnDeleteNote {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}
.btnEditNote, .btnDeleteNote {
    font-size: 0px !important;
}
.blockCommentReact {
    background: #f1f2f3;
    padding: 10px 10px 1px 10px;
    margin-bottom: 15px;
    position: relative;
}

.exam-online-page .question-list .extra-question-item:first-child {
    border-top: none;
}

.page-exam-online-dgnl .extra-question-item.parent-item > .extra-question-body{
    display: block;
}

.page-exam-online-dgnl .extra-question-item.parent-item > .extra-question-body > div > .question-desc, .exam-online-page-dgtd-bk .extra-question-item.parent-item > .extra-question-body > div > .question-desc{
    flex: 48%;
    margin-right: 2%;
    background-color: #faebd7;
    padding: 10px;
    border-radius: 7px;
}

.page-exam-online-dgnl .extra-question-item.parent-item > .extra-question-body > .question-list, .exam-online-page-dgtd-bk .extra-question-item.parent-item > .extra-question-body > .question-list{
    flex: 50%;
}

.question-drag-drop .answer-items {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 20px;
    min-height: 64px;
}

.question-drag-drop .drag-item{
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px 8px;
    cursor: move;
    display: inline-block;
    line-height: 24px;
    background-color: #f0efef;
    color: #272727;
    font-weight: normal;
}


.question-drag-drop .answer-items .drag-item {
    margin: 5px;
}
.question-drag-drop .question-content {
    line-height: 42px;
    padding: 20px 0;
}
.question-drag-drop .question-content .input-answer-item{
    display: inline-block;
    min-width: 100px;
    margin: 0 3px;
    text-align: center;
    min-height: 32px;
    border: 1px dashed #ccc;
    border-radius: 4px;
    padding: 1px;
    vertical-align: middle;
    line-height: 1em;
}
.question-drag-drop .question-content .input-answer-item.answered{
    min-width: 10px;
}

.question-drag-drop .question-content .input-answer-item.ui-droppable-hover {
    border: 1px dashed #6e6b6b;
}

.question-drag-drop .question-content .input-answer-item.input-large{
    min-width: 300px;
}

.question-drag-drop .question-content .input-answer-item.correct {
    border: 2px solid #3da844;
}
.question-drag-drop .question-content .input-answer-item.incorrect {
    border: 2px solid red;
}
.question-drag-drop .ui-draggable-dragging {
    max-width: 300px;
    white-space: nowrap;       
    overflow: hidden;          
    text-overflow: ellipsis;   
}
.page-exam-online-dgnl .extra-question-item.parent-item > .extra-question-body > div > .question-desc.sticky {
    margin-right: 0;
    padding: 0;
}
.page-exam-online-dgnl .extra-question-item.parent-item > .extra-question-body > div > .question-desc.sticky .content {
    padding: 10px;
}
.content-expandable.collapsed {
    overflow: auto;
    max-height: 250px;
}
.question-desc .toggle-button {
    display: block;
    width: 120px;
    margin: 0 auto;
    position: absolute;
    left: calc(50% - 60px);
    height: 25px;
    border-radius: 10px;
    bottom: -17px;
}
.scrollbar-thin::-webkit-scrollbar{width:6px; height: 6px;}
.scrollbar-thin::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);border-radius:2px}
.scrollbar-thin::-webkit-scrollbar-thumb{border-radius:2px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.5)}

.table-catalog {
    border-collapse: collapse;
    box-shadow: none;
    margin-bottom: 20px;
}
.table-catalog th, .table-catalog td {
    border: 1px solid #ccc;
    vertical-align: middle;
}
.table-catalog th {
    background-color: #0791f3;
    color: #fff;
    font-weight: bold;;
}
.table-catalog td span{
    display: block;
}

.table-catalog td.wrong {
    background-color: #e16704;
}

.puzzle-container {
    margin-bottom: 10px;
    display: flex;
    gap: 40px;
}
.puzzle-question {
    background-color: #d7eaff; 
    color: #000;
    padding: 10px 20px;
    position: relative;
    font-size: 16px;
    flex-basis: 50%;
}
.puzzle-question .text p {
    display: inline;
}

/* Mảnh ghép bên phải */
.puzzle-question::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #d7eaff;
    border-radius: 50%;
    z-index: 1;
}

.puzzle-answer {
    background-color: #d7eaff; 
    color: #000;
    padding: 10px 20px;
    position: relative;
    font-size: 16px;
    flex-basis: calc(50% - 40px);
    cursor: pointer;
}

/* Mảnh ghép bên phải */
.puzzle-answer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    z-index: 1;
}

.puzzle-answer-table {
    background-color: #d7eaff; 
    color: #000;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 0;
    margin: 0 auto;
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 0;
}
.puzzle-answer-table .puzzle-answer-item {
    flex-basis: 100%;
    padding: 3px 5px;
}

.puzzle-answer-table .puzzle-answer-item .answer p{
    display: inline;
}

.puzzle-answer-item.disable {
    color: #969494;
}
#question-connect-modal .puzzle-answer-table{
    width: 100%;
    background-color: #fff;
    padding: 0;
}
#question-connect-modal .puzzle-answer-item {
    cursor: pointer;
    border-radius: 6px;
}

#question-connect-modal .puzzle-answer-item:hover {
    background-color: #d7eaff;
}

.question-sort .question-answer {
    position: relative;
}

.question-sort .question-answer .puzzle-question.disable, .question-sort .question-answer .puzzle-question.disable::after{
    background-color: #ccc;
}

.question-sort .puzzle-answer-table {
    display: none;
}

.question-sort .question-answer::after {
    position: absolute;
    content: "\f178";
    font-family: FontAwesome;
    font-size: 22px;
    width: 22px;
    height: 22px;
    display: block;
    text-align: center;
    line-height: 22px;
    color: #000;
    left: calc(50% + 13px);
    top: calc(50% - 11px);
    z-index: 10;
}
.puzzle-answer.correct {
    background-color: #97c587;
}

.puzzle-answer.in-correct {
    background-color: #e7893d;
}

.tab-content-item {
    margin-bottom: 15px;
    display: none;
}
.tab-content-item.active {
    display: block;
}
.type_write .btn.active {
    color: #fff;
    background-image: linear-gradient(#5aa2fb, #468de5);
    border-color: transparent;
}
.answer-text-box {
    border: 1px solid #ccc;
    border-radius: 6px;
    height: 160px;
    width: 100%;
}
.drop_zone {
    position: relative;
    padding: 15px;
    border: 1px solid #ccc;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
    text-align: center;
    border-radius: 6px;
}
.drop_zone label {
    padding: 8px 10px;
    display: inline-block;
    border-radius: 5px;
    background-color: #3c8dbc;
    border-color: #367fa9;
    color: #fff;
    font-size: 20px;
    line-height: 1em;
    cursor: pointer;
}
.btn-primary:hover,.btn-primary:active,.btn-primary.hover{background-color:#367fa9}

.drop_zone input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.drop_zone.is-dragover {
    background-color: #929191;
}

.panigtor-files {
    margin-top: 20px;
}
p.message {
    margin-top: 10px;
    font-size: 14px;
    font-style: italic;
    color: #434141;
}
.panigtor-files.image {
    display: flex;
    gap: 10px;
}
.panigtor-files .thumnail-img {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 6px;
}
.panigtor-files .thumnail-img img {
    height: 100%;
    max-width: 100%;
}
.panigtor-files .thumnail-img i {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    cursor: pointer;
}
.audio-preview {
    display: flex;
    gap: 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    position: relative;
    margin-bottom: 10px;
}
.audio-preview audio{
    height: 40px;
}
.audio-preview span{
    display: block;
    padding: 8px 0;
    width: 40%;
    overflow: hidden;
}

.audio-preview i{
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 9px;
    right: 10px;
    cursor: pointer;
}
.record_zone {
    padding: 30px 25px;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 6px; 
}
.record_zone .btn-start.recording{
    background-color: #d9534f;
    color: white;
    animation: pulse 1s infinite;
    border: none;
}

.question-inline-fill .inline_input {
    border-radius: 5px;
    text-align: center;
    font-weight: 600;
    color: #000;
    margin: 0 5px 4px;
    padding: 2px 4px;
    font-size: 14px;
}
.question-inline-fill .inline_input.correct {
    border: #008d4c solid 2px;
    color: #008d4c;
}
.question-inline-fill .inline_input.in-correct {
    border: #dd4b39 solid 2px;
    color: #dd4b39;
}
.parent-item .inline_link {
    color: #000;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 4px;
    height: 26px;
    min-width: 100px;
    display: inline-block;
    text-align: center;
    line-height: 18px;
    box-sizing: border-box;
}
.mobile_upload_zone {
    padding: 15px;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 6px;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(217, 83, 79, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(217, 83, 79, 0);
  }
}

.btn-alert {
    background-color: #dd4b39;
    border-color: #d73925;
    color: #fff;
}
.btn.disabled, .btn[disabled] {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    opacity: .65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

@media (max-width: 767px) {
    .contents-question-page .extra-question-item {
        display: none;
    }
    .contents-question-page .extra-question-item.active {
        display: block;
    }

    .extra-question-item.parent-item .extra-question-body {
        flex-direction: column;
    }

    .process-exam {
        position: fixed;
        top: 20px;
        right: 10px;
        width: 120px;
    }
    .process-exam-mb {
        display: inline-block;
    }
    .modal-content {
        background: #fff;
        border-radius: 4px;
        position: initial;
    }
    .extra-title-info-box span::before {
        bottom: -10px;
    }
    .exam-online-page .right {
        position: relative;
    }
    .st-container .right {
        padding: 5px;
    }
    .level-question {
        height: 26px;
    }
    .extra-question-item {
        background-color: #fff;
        padding: 5px;
    }
    .support_guide h3 {
        text-transform: uppercase;
        border: 1px solid #e3e3e3;
        font-size: 16px;
        padding: 10px 10px 6px;
        font-weight: 700;
        background-color: #e3e3e3;
        color: #2f69b3;
        margin-bottom: 10px;
    }
    .support_guide.bottom20 {
        border: 1px solid #e0e0e0;
        padding-bottom: 12px;
    }
    .bottom10 {
        margin-bottom: 10px !important;
    }
    .magr10 {
        margin-right: 10px !important;
    }
    .fl {
        float: left !important;
    }
    .support_guide ul.form {
        display: block;
        overflow: hidden;
        width: auto;
    }
    .center {
        text-align: center !important;
    }
    .s14 {
        font-size: 14px !important;
    }
    .support_guide hr {
        margin: 3px 0;
        display: block;
        border-bottom: 1px solid #999;
        border-top: 1px solid #fff;
        border-left: 0;
        border-right: 0;
    }
    .support_guide hr {
        border-bottom: 1px solid #ddd;
    }
    .support_guide ul.form li label {
        float: left;
        margin-right: 2%;
        width: 36%;
        font-size: 16px;
    }
    .support_guide ul.form li .filltext {
        float: left;
        width: 55%;
        font-size: 16px;
    }
    .support_guide .img48 {
        width: 24px;
        height: 24px;
    }

    .support_guide .btn_greens, .support_guide .btn_blue {
        border: 1px #2f69b3 solid;
        padding: 9px 5px !important;
        box-shadow: none;
        background: #2f69b3;
        color: #fff;
        border-radius: 3px;
        font-weight: 700;
        line-height: 18px;
        font-size: 18px;
    }
    .support_guide .btn_greens {
        background: #529839;
        border: 1px #529839 solid;
    }
    .bg_gray {
        background: #f6f7f8;
        padding: 15px;
    }
    .btn_red2 {
        background: #e9573e;
        color: #fff;
        font-weight: 700;
        border: 0;
        border-radius: 0;
        padding: 8px 10px;
    }
    #book_questions_ts247 .contents-question-page {
        margin-top: 0 !important;
    }
    .book-question-title {
        margin: 20px 0;
    }
    #book_questions_ts247 {
        padding: 10px;
    }
    #book_questions_ts247 .contents-question-page .extra-question-item {
        display: block;
    }
    #book_questions_ts247 .extra-practice-question-items {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #book_questions_ts247 .extra-question-lines-left .btn {
        margin-bottom: 0;
        padding: 3px 5px;
        font-size: 12px;
        font-weight: 400;
        border-radius: 6px;
        line-height: 25px;
    }
    .book-question-sidebar {
        padding: 0 5px;
    }
    .book-question-sidebar > h3 {
        margin-bottom: 15px;
    }
    .book-question-teachers {
        padding: 0 10px;
    }
    .hidden-md {
        display: none !important;
    }
    .puzzle-container {
        gap: 30px;
    }
    .puzzle-answer {
        flex-basis: calc(50% - 30px);
    }
    .puzzle-answer-table {
        width: 100%;
    }
    .question-sort .question-answer::after {
        top: calc(50% - 11px);
        content: "\f061";
        font-size: 14px;
        width: 14px;
    }
    .page-exam-online-dgnl .extra-question-item.parent-item > .extra-question-body > div > .question-desc.sticky {
        position: relative;
    }
}