/*Add font ================================*/
/*-------------------item_detail----------------*/
.hotline-phone-ring-wrap {
  display: none;
}

#BactoTop {
  display: none !important;
}

#finish {
  max-width: 600px;
  margin: auto;
  text-align: center;
  display: none;
}
#finish .title {
  font-weight: 500;
  padding: 30px 45px;
  font-size: 24px;
}
@media (min-width: 769px) {
  #finish .title {
    font-size: 30px;
  }
}
@media (min-width: 1200px) {
  #finish .title {
    font-size: 36px;
  }
}
#finish .box_compelte {
  border-radius: 20px;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  padding: 35px 45px;
  text-align: left;
}
#finish .box_compelte .complete, #finish .box_compelte .keep {
  display: flex;
}
#finish .box_compelte .complete i, #finish .box_compelte .keep i {
  font-size: 24px;
  margin-right: 35px;
  color: #04457A;
}
#finish .box_compelte .complete .info p, #finish .box_compelte .keep .info p {
  font-size: 16px;
}
@media (min-width: 769px) {
  #finish .box_compelte .complete .info p, #finish .box_compelte .keep .info p {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  #finish .box_compelte .complete .info p, #finish .box_compelte .keep .info p {
    font-size: 20px;
  }
}
#finish .box_compelte .complete .info p:first-child, #finish .box_compelte .keep .info p:first-child {
  font-weight: 500;
  font-size: 18px;
}
@media (min-width: 769px) {
  #finish .box_compelte .complete .info p:first-child, #finish .box_compelte .keep .info p:first-child {
    font-size: 20px;
  }
}
@media (min-width: 1200px) {
  #finish .box_compelte .complete .info p:first-child, #finish .box_compelte .keep .info p:first-child {
    font-size: 24px;
  }
}
#finish .box_compelte .complete {
  margin-bottom: 70px;
  position: relative;
}
#finish .box_compelte .complete:before {
  content: "";
  height: 38px;
  width: 5px;
  border-radius: 5px;
  background: #B2B2B2;
  position: absolute;
  top: 100%;
  left: 8px;
}
#finish .box_compelte .complete i {
  color: #00E917;
}
#finish .box_compelte .group_button {
  display: flex;
  margin-top: 35px;
}
#finish .box_compelte .group_button a {
  flex: 1;
  border-radius: 10px;
  border: 1px solid #04457A;
  text-align: center;
  line-height: 50px;
  background: #04457A;
  color: #ffffff;
}
#finish .box_compelte .group_button a + a {
  margin-left: 24px;
  background: transparent;
  color: #000000;
}

div#result_detail.finished {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9;
}
div#result_detail.finished .container {
  height: 100%;
  display: flex;
}
div#result_detail.finished .box_result {
  margin: auto;
  padding: 40px;
  background: #296691;
  color: #ffffff;
  text-align: center;
  position: relative;
  width: 95%;
}
@media (min-width: 601px) {
  div#result_detail.finished .box_result {
    width: 85%;
  }
}
@media (min-width: 769px) {
  div#result_detail.finished .box_result {
    width: 65%;
  }
}
div#result_detail.finished .box_result:after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  border: 1px solid #ffffff;
  pointer-events: none;
}
div#result_detail.finished .box_result .box_header {
  text-align: center;
  font-weight: 700;
  color: #fff;
  position: relative;
  text-transform: uppercase;
  font-size: 26px;
  height: 65px;
  line-height: 65px;
}
@media (min-width: 601px) {
  div#result_detail.finished .box_result .box_header {
    font-size: 30px;
    height: 75px;
    line-height: 75px;
  }
}
div#result_detail.finished .box_result .box_header:after {
  content: "";
  position: absolute;
  bottom: 0;
  border-bottom: 2px solid #fd9800;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
}
div#result_detail.finished .box_result .box_content {
  margin-top: 30px;
}
div#result_detail.finished .box_result .box_content .title {
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-size: 24px;
}
@media (min-width: 601px) {
  div#result_detail.finished .box_result .box_content .title {
    font-size: 30px;
  }
}
@media (min-width: 769px) {
  div#result_detail.finished .box_result .box_content .title {
    font-size: 35px;
  }
}
div#result_detail.finished .box_result .box_content .correct, div#result_detail.finished .box_result .box_content .false {
  display: flex;
  justify-content: center;
  align-items: center;
}
div#result_detail.finished .box_result .box_content .correct h3, div#result_detail.finished .box_result .box_content .false h3 {
  text-transform: uppercase;
  display: inline-block;
  font-size: 20px;
}
@media (min-width: 601px) {
  div#result_detail.finished .box_result .box_content .correct h3, div#result_detail.finished .box_result .box_content .false h3 {
    font-size: 24px;
  }
}
@media (min-width: 769px) {
  div#result_detail.finished .box_result .box_content .correct h3, div#result_detail.finished .box_result .box_content .false h3 {
    font-size: 28px;
  }
}
div#result_detail.finished .box_result .box_content .correct .left, div#result_detail.finished .box_result .box_content .false .left {
  text-align: right;
  font-size: 16px;
}
div#result_detail.finished .box_result .box_content .correct .left .sup, div#result_detail.finished .box_result .box_content .false .left .sup {
  padding-right: 2px;
}
div#result_detail.finished .box_result .box_content .correct .right, div#result_detail.finished .box_result .box_content .false .right {
  color: #FFCE0B;
  font-weight: bold;
  text-align: left;
  padding-left: 5px;
  font-size: 20px;
}
@media (min-width: 601px) {
  div#result_detail.finished .box_result .box_content .correct .right, div#result_detail.finished .box_result .box_content .false .right {
    font-size: 24px;
  }
}
@media (min-width: 769px) {
  div#result_detail.finished .box_result .box_content .correct .right, div#result_detail.finished .box_result .box_content .false .right {
    font-size: 28px;
  }
}
div#result_detail.finished .box_result .box_content .col_r {
  max-width: 100%;
  display: block;
  background: transparent;
}
div#result_detail.finished .box_result .group_btn {
  justify-content: center;
  margin: 35px 0 25px;
}
@media (max-width: 600px) {
  div#result_detail.finished .box_result .group_btn {
    flex-wrap: wrap;
    padding-right: 0;
  }
}
div#result_detail.finished .box_result .group_btn a {
  background: #FF960B;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  border-radius: 5px;
  transition: 0.3s all;
  line-height: 39px;
  padding: 0 30px;
  flex: 0 0 100%;
  font-size: 16px;
}
@media (min-width: 601px) {
  div#result_detail.finished .box_result .group_btn a {
    font-size: 18px;
    flex: unset;
  }
}
@media (min-width: 769px) {
  div#result_detail.finished .box_result .group_btn a {
    padding: 0 50px;
    line-height: 49px;
    font-size: 20px;
  }
}
div#result_detail.finished .box_result .group_btn a + a {
  margin-top: 15px;
}
@media (min-width: 601px) {
  div#result_detail.finished .box_result .group_btn a + a {
    margin-left: 15px;
    margin-top: 0;
  }
}
div#result_detail.finished .box_result .group_btn a:hover {
  transition: 0.3s all;
  transform: translateY(-5px);
  box-shadow: 0 3px 5px 2px #4a3315;
}

#main_slide .slick-track .item a {
  padding-top: 27.45%;
}

.page_nav {
  background: #ffffff;
}

@media (max-width: 768px) {
  #ims-wrapper.additional {
    margin-top: 50px;
  }
}
#ims-wrapper.additional .page_nav {
  box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.16);
}
#ims-wrapper.additional .list_detail_practice {
  max-width: 600px;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.16);
  margin: 30px auto;
}
#ims-wrapper.additional .list_detail_practice .col_item {
  background: #ffffff;
}
#ims-wrapper.additional .list_detail_practice .item {
  background: #ffffff;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}
#ims-wrapper.additional .list_detail_practice .item .before {
  margin: auto;
  text-align: center;
}
@media (min-width: 601px) {
  #ims-wrapper.additional .list_detail_practice .item .before {
    min-width: 600px;
    max-width: 600px;
  }
}
#ims-wrapper.additional .list_detail_practice .item .before img {
  display: inline-block;
}
#ims-wrapper.additional .list_detail_practice .item .before h3 {
  font-size: 23px;
  font-weight: 500;
  margin-top: 15px;
}
#ims-wrapper.additional .list_detail_practice .item .before .card-body {
  padding: 8px 8px 15px 8px;
}
@media (min-width: 601px) {
  #ims-wrapper.additional .list_detail_practice .item .before .card-body {
    padding: 28px 28px 35px 28px;
  }
}
#ims-wrapper.additional .list_detail_practice .item .before .card-hint {
  font-size: 19px;
  color: #707070;
}
#ims-wrapper.additional .list_detail_practice .item .before .flash-card-footer-question {
  display: flex;
  align-items: center;
  padding: 0 8px 8px 8px;
}
@media (min-width: 601px) {
  #ims-wrapper.additional .list_detail_practice .item .before .flash-card-footer-question {
    padding: 0 28px 28px 28px;
  }
}
#ims-wrapper.additional .list_detail_practice .item .before .flash-card-footer-question .card-sound {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
}
@media (min-width: 601px) {
  #ims-wrapper.additional .list_detail_practice .item .before .flash-card-footer-question .card-sound {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
  }
}
@media (max-width: 600px) {
  #ims-wrapper.additional .list_detail_practice .item .before .flash-card-footer-question .card-sound .material-icons {
    font-size: 20px;
  }
}
#ims-wrapper.additional .list_detail_practice .item .before .flash-card-footer-question .show-explanation {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  margin-left: 15px;
  font-size: 14px;
  padding: 0 15px;
}
@media (min-width: 380px) {
  #ims-wrapper.additional .list_detail_practice .item .before .flash-card-footer-question .show-explanation {
    padding: 5px 15px;
  }
}
@media (min-width: 601px) {
  #ims-wrapper.additional .list_detail_practice .item .before .flash-card-footer-question .show-explanation {
    padding: 10px 35px;
    margin-left: 45px;
    font-size: 16px;
  }
}
#ims-wrapper.additional .list_detail_practice .item .before .flash-card-footer-question .show-explanation span {
  margin-left: 10px;
  font-size: 18px;
}
@media (min-width: 601px) {
  #ims-wrapper.additional .list_detail_practice .item .before .flash-card-footer-question .show-explanation span {
    font-size: 22px;
  }
}
#ims-wrapper.additional .list_detail_practice .item .after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  background: #ffffff;
  transform: rotateY(-180deg);
  transform-style: preserve-3d;
  transition: all 0.6s ease 0s;
  backface-visibility: hidden;
}
#ims-wrapper.additional .list_detail_practice .item .after .card-body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#ims-wrapper.additional .list_detail_practice .item .after .flash-card-footer-question {
  position: absolute;
  bottom: 28px;
  left: 28px;
}
#ims-wrapper.additional .list_detail_practice .item .after .flash-card-footer-question .card-sound {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
#ims-wrapper.additional .detail_practice.finished .main_title {
  margin-bottom: 0;
}
#ims-wrapper.additional .group_next_prev {
  text-align: center;
}
#ims-wrapper.additional .group_next_prev ul {
  background: #04457A;
  color: #ffffff;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
}
#ims-wrapper.additional .group_next_prev ul li.centent {
  line-height: 45px;
  font-size: 19px;
  padding: 0 45px;
}
#ims-wrapper.additional .group_next_prev ul li.btn-prev, #ims-wrapper.additional .group_next_prev ul li.btn-next {
  cursor: pointer;
}

.full.practice_additional {
  background: #ffffff;
  padding-top: 20px;
  padding-bottom: 70px;
}
.full.practice_additional #allTest .main_title {
  font-weight: 500;
  display: block;
  color: #04457A;
  text-align: center;
  padding: 0 0 30px 0;
  font-size: 24px;
}
@media (min-width: 769px) {
  .full.practice_additional #allTest .main_title {
    font-size: 30px;
  }
}
@media (min-width: 1200px) {
  .full.practice_additional #allTest .main_title {
    font-size: 36px;
  }
}
.full.practice_additional #allTest .sub_title {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
  color: #ffffff;
  padding: 13px 25px 11px;
  background: #FF960B;
  border-radius: 15px 15px 0 0;
}
.full.practice_additional #allTest .other_title {
  text-align: center;
  font-weight: bold;
  color: #04457A;
  text-transform: uppercase;
  margin-bottom: 30px;
  font-size: 18px;
}
@media (min-width: 769px) {
  .full.practice_additional #allTest .other_title {
    font-size: 20px;
  }
}
.full.practice_additional #allTest .list_test .item {
  display: flex;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 13px;
  padding: 6px;
  font-size: 18px;
  font-weight: 500;
  padding-left: 15px;
  align-items: center;
  justify-content: space-between;
}
.full.practice_additional #allTest .list_test .item.watched {
  box-shadow: 0 2px 5px rgba(100, 185, 255, 0.8);
}
.full.practice_additional #allTest .list_test .item h3 {
  color: #2B82C9;
  position: relative;
  font-weight: 500;
}
.full.practice_additional #allTest .list_test .item h3:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #2B82C9;
  border-radius: 50%;
  margin-right: 10px;
}
.full.practice_additional #allTest .list_test .item .box_right a {
  background: #16A3B4;
  color: #ffffff;
  padding: 7px 13px;
  border-radius: 5px;
  display: inline-block;
  font-weight: 500;
}
@media (max-width: 480px) {
  .full.practice_additional #allTest .list_test .item .box_right a {
    font-size: 14px;
    padding: 5px 10px;
  }
}
.full.practice_additional #allTest .list_test .item .box_right span {
  width: 90px;
  display: inline-block;
  line-height: 41px;
  background: #FFECD3;
  color: #FF960B;
  border-radius: 5px;
  text-align: center;
  font-weight: 500;
}
@media (max-width: 480px) {
  .full.practice_additional #allTest .list_test .item .box_right span {
    width: 70px;
    font-size: 14px;
    line-height: 31px;
  }
}
.full.practice_additional #allTest .listOther a {
  font-size: 17px;
  border: 1px solid var(--color);
  display: flex;
  justify-content: space-between;
  margin-bottom: 13px;
  border-radius: 10px;
  line-height: 41px;
  padding-left: 13px;
}
.full.practice_additional #allTest .listOther a:last-child {
  margin-bottom: 0;
}
.full.practice_additional #allTest .listOther a span {
  background: var(--color);
  color: #ffffff;
  line-height: 41px;
  border-radius: 0 7px 7px 0;
  padding: 0 35px;
}
.full.practice_additional #allTest .box_main {
  display: flex;
  flex-wrap: wrap;
}
.full.practice_additional #allTest .box_main .col_left {
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
  padding: 10px;
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 769px) {
  .full.practice_additional #allTest .box_main .col_left {
    flex: 0 0 69.584%;
    max-width: 69.584%;
  }
}
.full.practice_additional #allTest .box_main .col_right {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 30px;
}
@media (min-width: 769px) {
  .full.practice_additional #allTest .box_main .col_right {
    flex: 0 0 30.416%;
    max-width: 30.416%;
    padding-left: 30px;
    margin-top: 0;
  }
}
.full.practice_additional .detail_practice .main_title {
  font-weight: 500;
  color: #04457A;
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
}
@media (min-width: 769px) {
  .full.practice_additional .detail_practice .main_title {
    font-size: 30px;
  }
}
@media (min-width: 1200px) {
  .full.practice_additional .detail_practice .main_title {
    font-size: 36px;
  }
}
.full.practice_additional .detail_practice .list {
  margin: auto;
}
@media (min-width: 601px) {
  .full.practice_additional .detail_practice .list {
    max-width: 70%;
  }
}
.full.practice_additional .detail_practice .list > div {
  display: flex;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  padding: 7px;
  line-height: 42px;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  padding-left: 15px;
}
@media (min-width: 601px) {
  .full.practice_additional .detail_practice .list > div {
    padding-left: 35px;
  }
}
.full.practice_additional .detail_practice .list > div span, .full.practice_additional .detail_practice .list > div select {
  background: #F6F6F6;
  text-align: center;
  box-shadow: inset 0px 2px 10px rgba(0, 0, 0, 0.15);
  border: 0;
  flex: 0 0 50%;
  max-width: 50%;
}
@media (min-width: 601px) {
  .full.practice_additional .detail_practice .list > div span, .full.practice_additional .detail_practice .list > div select {
    flex: 0 0 262px;
    max-width: 262px;
  }
}
.full.practice_additional .detail_practice .list > div span {
  line-height: 42px;
}
.full.practice_additional .detail_practice .list > div select {
  font-weight: 500;
  height: 42px;
}
.full.practice_additional .detail_practice .load {
  text-align: center;
  margin-top: 50px;
}
.full.practice_additional .detail_practice .load a {
  line-height: 50px;
  min-width: 262px;
  border-radius: 10px;
  background: #04457A;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
}
@media (min-width: 601px) {
  .full.practice_additional .detail_practice .load a {
    font-size: 18px;
  }
}
.full.practice_additional .detail_grama .main_title {
  text-align: center;
  font-weight: 500;
  color: #04457A;
  margin-bottom: 30px;
  font-size: 24px;
}
@media (min-width: 769px) {
  .full.practice_additional .detail_grama .main_title {
    font-size: 30px;
  }
}
@media (min-width: 1200px) {
  .full.practice_additional .detail_grama .main_title {
    font-size: 36px;
  }
}
.full.practice_additional .detail_grama table {
  table-layout: auto;
}

.full.practice {
  background: #ffffff;
  padding-top: 20px;
  padding-bottom: 70px;
}
@media (max-width: 768px) {
  .full.practice #ims-column {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.full.practice #ims-content {
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15);
  padding: 10px;
}
@media (max-width: 768px) {
  .full.practice #ims-content {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.full.practice #ims-content #allTest .main_title {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
  color: #ffffff;
  padding: 13px 25px 11px;
  background: #FF960B;
  border-radius: 15px 15px 0 0;
}
.full.practice #ims-content #allTest .list_test .item {
  display: flex;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 13px;
  padding: 6px;
  font-size: 18px;
  font-weight: 500;
  padding-left: 15px;
  align-items: center;
  justify-content: space-between;
}
.full.practice #ims-content #allTest .list_test .item h3 {
  color: #2B82C9;
  position: relative;
  font-weight: 500;
}
.full.practice #ims-content #allTest .list_test .item h3:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #2B82C9;
  border-radius: 50%;
  margin-right: 10px;
}
.full.practice #ims-content #allTest .list_test .item .box_right a {
  background: #16A3B4;
  color: #ffffff;
  padding: 7px 13px;
  border-radius: 5px;
  display: inline-block;
  font-weight: 500;
}
@media (max-width: 480px) {
  .full.practice #ims-content #allTest .list_test .item .box_right a {
    font-size: 14px;
    padding: 5px 10px;
  }
}
.full.practice #ims-content #allTest .list_test .item .box_right span {
  width: 90px;
  display: inline-block;
  line-height: 41px;
  background: #FFECD3;
  color: #FF960B;
  border-radius: 5px;
  text-align: center;
  font-weight: 500;
}
@media (max-width: 480px) {
  .full.practice #ims-content #allTest .list_test .item .box_right span {
    width: 70px;
    font-size: 14px;
    line-height: 31px;
  }
}
.full.practice .other_title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #04457A;
  text-transform: uppercase;
  margin-bottom: 20px;
  margin-top: 47px;
}
.full.practice .listOther a {
  font-size: 17px;
  border: 1px solid var(--color);
  display: flex;
  justify-content: space-between;
  margin-bottom: 13px;
  border-radius: 10px;
  line-height: 41px;
  padding-left: 13px;
}
.full.practice .listOther a:last-child {
  margin-bottom: 0;
}
.full.practice .listOther a span {
  background: var(--color);
  color: #ffffff;
  line-height: 41px;
  border-radius: 0 7px 7px 0;
  padding: 0 35px;
}

#ims-wrapper {
  background: #F4F4F4;
}
#ims-wrapper.test {
  padding: 20px 0;
}
#ims-wrapper.test header, #ims-wrapper.test #main_slide, #ims-wrapper.test .page_nav, #ims-wrapper.test footer {
  display: none;
}
#ims-wrapper.test .full.practice {
  background: #F4F4F4;
}
#ims-wrapper.test #exam .this_right_answer {
  background: red;
}
#ims-wrapper.test #exam .box_content .welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#ims-wrapper.test #exam .box_content .welcome.fixed {
  position: fixed;
  background: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  left: 0;
  top: 0;
  z-index: 9;
  padding: 10px;
}
#ims-wrapper.test #exam .box_content .welcome > .container {
  display: flex;
  align-items: center;
}
#ims-wrapper.test #exam .box_content .welcome h1 {
  text-transform: capitalize;
}
#ims-wrapper.test #exam .box_content .welcome .countdown {
  margin-left: auto;
  font-weight: 600;
  color: #04457A;
  font-size: 32px;
}
#ims-wrapper.test #exam .box_content .welcome button {
  font-weight: 600;
  font-size: 18px;
  background: #044579;
  color: #ffffff;
  text-transform: uppercase;
  border-radius: 0;
  margin-left: 28px;
  padding: 6px 24px;
}

#allExam .header_title {
  text-align: center;
  font-weight: 600;
  color: #04457A;
  text-transform: uppercase;
  margin-bottom: 40px;
  font-size: 22px;
}
@media (min-width: 601px) {
  #allExam .header_title {
    font-size: 28px;
  }
}
@media (min-width: 992px) {
  #allExam .header_title {
    font-size: 34px;
  }
}
#allExam .header_title span {
  color: #FF960B;
}
#allExam .list_item, #allExam .list_group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width: 601px) {
  #allExam .list_item, #allExam .list_group {
    margin: 0 -8px;
  }
}
#allExam .list_item .item, #allExam .list_group .item {
  font-weight: 600;
  background: #ffffff;
  display: flex;
  align-items: center;
  transition: 0.3s all;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: 0.3s all;
  flex: 0 0 calc(50% - 10px);
}
#allExam .list_item .item:nth-child(2n), #allExam .list_group .item:nth-child(2n) {
  margin-right: 0;
}
@media (min-width: 601px) {
  #allExam .list_item .item, #allExam .list_group .item {
    flex: 0 0 calc(33.3333333333% - 20px);
    margin-bottom: 40px;
  }
  #allExam .list_item .item:nth-child(2n), #allExam .list_group .item:nth-child(2n) {
    margin-right: 20px;
  }
  #allExam .list_item .item:nth-child(3n), #allExam .list_group .item:nth-child(3n) {
    margin-right: 0;
  }
}
@media (min-width: 993px) {
  #allExam .list_item .item, #allExam .list_group .item {
    flex: 0 0 calc(25% - 20px);
  }
  #allExam .list_item .item:nth-child(2n), #allExam .list_item .item:nth-child(3n), #allExam .list_group .item:nth-child(2n), #allExam .list_group .item:nth-child(3n) {
    margin-right: 20px;
  }
  #allExam .list_item .item:nth-child(4n), #allExam .list_group .item:nth-child(4n) {
    margin-right: 0;
  }
}
#allExam .list_item .item:hover, #allExam .list_group .item:hover {
  transform: translateY(-5px);
  transition: 0.3s all;
}
#allExam .list_item .item .info, #allExam .list_group .item .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#allExam .list_item .item .info h3, #allExam .list_group .item .info h3 {
  transition: 0.3s all;
  padding: 7px 0 3px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  font-size: 22px;
}
@media (min-width: 601px) {
  #allExam .list_item .item .info h3, #allExam .list_group .item .info h3 {
    font-size: 28px;
  }
}
@media (min-width: 992px) {
  #allExam .list_item .item .info h3, #allExam .list_group .item .info h3 {
    font-size: 36px;
  }
}
#allExam .list_item .item .info .short, #allExam .list_group .item .info .short {
  flex: 0 0 100%;
  max-width: 100%;
}
#allExam .list_item .item .info .info_bot, #allExam .list_group .item .info .info_bot {
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 84px);
}
#allExam .list_item .item .info .info_bot .percent, #allExam .list_group .item .info .info_bot .percent {
  flex: 0 0 100%;
  margin-top: auto;
  text-align: center;
  padding: 0 15px;
}
#allExam .list_item .item .info .info_bot .percent div.per, #allExam .list_group .item .info .info_bot .percent div.per {
  border-radius: 25px;
  width: 100%;
  height: 16px;
  display: block;
  margin-bottom: 15px;
  background: #ffffff;
  overflow: hidden;
  position: relative;
}
#allExam .list_item .item .info .info_bot .percent div.per:after, #allExam .list_group .item .info .info_bot .percent div.per:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 25px;
  box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.16);
}
#allExam .list_item .item .info .info_bot .percent div.per .bg-color, #allExam .list_group .item .info .info_bot .percent div.per .bg-color {
  background-color: #e3a24a;
  background-image: url("../../../../../resources/images/percent.png");
  height: 16px;
  max-width: 100%;
  color: #000000;
  font-weight: 400;
  font-size: 15px;
  font-family: "Source Sans Pro";
}
#allExam .list_item .item .info .info_bot .percent div.per .bg-color span, #allExam .list_group .item .info .info_bot .percent div.per .bg-color span {
  margin-left: 10px;
  line-height: 1;
}
#allExam .list_item .item .info .info_bot .percent a, #allExam .list_group .item .info .info_bot .percent a {
  font-family: "Source Sans Pro";
  font-weight: 400;
  border-radius: 25px;
  box-shadow: 0 3px 15px;
  transition: 0.3s all;
  font-size: 16px;
  padding: 5px 20px;
}
@media (min-width: 601px) {
  #allExam .list_item .item .info .info_bot .percent a, #allExam .list_group .item .info .info_bot .percent a {
    font-size: 18px;
  }
}
@media (min-width: 992px) {
  #allExam .list_item .item .info .info_bot .percent a, #allExam .list_group .item .info .info_bot .percent a {
    padding: 10px 40px;
    font-size: 20px;
  }
}
#allExam .list_item .item .info .info_bot .percent a:hover, #allExam .list_group .item .info .info_bot .percent a:hover {
  transform: translateY(-5px);
  transition: 0.3s all;
}
#allExam .list_item .item .info .info_bot .percent a span, #allExam .list_group .item .info .info_bot .percent a span {
  color: #ffffff;
}
#allExam .list_item .item .info .short, #allExam .list_group .item .info .short {
  color: #000000;
  font-family: "Source Sans Pro";
  font-weight: 400;
  font-size: 16px;
  padding: 15px 10px;
}
@media (min-width: 601px) {
  #allExam .list_item .item .info .short, #allExam .list_group .item .info .short {
    padding: 15px 20px;
    font-size: 18px;
  }
}
@media (min-width: 992px) {
  #allExam .list_item .item .info .short, #allExam .list_group .item .info .short {
    font-size: 20px;
  }
}
#allExam .list_item .item .info .short p, #allExam .list_group .item .info .short p {
  position: relative;
}
#allExam .list_item .item .info .short p:before, #allExam .list_group .item .info .short p:before {
  content: "";
  background: #000000;
  display: inline-block;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-right: 10px;
}
@media (min-width: 601px) {
  #allExam .list_item .item .info .short p:before, #allExam .list_group .item .info .short p:before {
    width: 11px;
    height: 11px;
    margin-right: 15px;
  }
}
#allExam .list_group .item {
  flex: 0 0 calc(50% - 10px);
}
@media (min-width: 993px) {
  #allExam .list_group .item {
    flex: 0 0 calc(50% - 111px);
  }
}
@media (max-width: 600px) {
  #allExam .list_group .item {
    min-height: 240px;
  }
  #allExam .list_group .item img {
    height: 100%;
  }
}
#allExam .list_group .item:nth-child(2n) {
  margin-right: 0;
}

#listExam {
  overflow: hidden;
}
#listExam .header_title {
  text-align: center;
  color: #04457A;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-size: 18px;
}
@media (min-width: 992px) {
  #listExam .header_title {
    font-size: 20px;
  }
}
#listExam .list_item {
  text-align: center;
  font-family: "Roboto", sans-serif;
}
#listExam .list_item h3 {
  font-weight: 500;
  text-transform: uppercase;
  background: #DEEFFB;
  color: #04457A;
  margin-bottom: 15px;
  padding: 8px;
  border-radius: 10px;
  transition: 0.3s all;
  cursor: pointer;
}
@media (min-width: 992px) {
  #listExam .list_item h3 {
    font-size: 17px;
  }
}
#listExam .list_item h3:last-child {
  margin-bottom: 0;
}
#listExam .list_item h3:hover, #listExam .list_item h3.active {
  background: #04457A;
  color: #ffffff;
  transition: 0.3s all;
}
#listExam .list_item > a {
  font-family: "Source Sans Pro";
  font-weight: 300;
  font-size: 18px;
  text-decoration: underline;
}

.main_content {
  margin-top: 60px;
}
.main_content .content {
  background: #ffffff;
  border-radius: 15px;
  padding: 40px;
  font-size: 16px;
  color: #000000;
}
.main_content .content h2.title {
  font-weight: 600;
  font-size: 23px;
  color: #FF960B;
  margin-bottom: 40px;
}

.full.exam-buy {
  padding: 0 0 15px 0;
}

#detail .box {
  display: flex;
  margin-left: 10%;
  margin-right: 5%;
  align-items: center;
}
#detail .box .info_left {
  flex: 0 0 45%;
}
#detail .box .info_left .title {
  font-weight: 600;
  font-size: 36px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
#detail .box .info_left .title span {
  display: block;
}
#detail .box .info_left .time, #detail .box .info_left .curriculum, #detail .box .info_left .register {
  font-weight: 300;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 18px;
}
#detail .box .info_left .time span, #detail .box .info_left .curriculum span, #detail .box .info_left .register span {
  margin-right: 10px;
  font-size: 25px;
  color: #04457A;
}
#detail .box .info_right {
  flex: 0 0 55%;
  background: #ffffff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  padding: 35px 39px;
  border-radius: 15px;
  position: relative;
}
#detail .box .info_right .info_price {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-right: -10px;
}
#detail .box .info_right .info_price .discount {
  position: absolute;
  font-weight: bold;
  font-size: 25px;
  background: #FF960B;
  color: #ffffff;
  font-weight: bold;
  top: 0;
  left: 35px;
  padding: 18px 7px 23px;
}
#detail .box .info_right .info_price .discount:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 12px solid #ffffff;
  border-left: 32px solid transparent;
  border-right: 32px solid transparent;
}
#detail .box .info_right .info_price .price {
  font-weight: 400;
  color: #383838;
  font-size: 30px;
  text-decoration: line-through;
  line-height: 1.3;
}
#detail .box .info_right .info_price .price sup {
  font-size: 60%;
}
#detail .box .info_right .info_price .price_buy {
  font-weight: bold;
  color: #04457A;
  font-size: 50px;
  line-height: 1;
  margin-left: 20px;
}
#detail .box .info_right .info_price .price_buy sup {
  font-size: 60%;
  right: 10px;
}
#detail .box .info_right .add_cart .btn_add_cart_now {
  display: block;
  width: 100%;
  height: 60px;
  font-weight: 300;
  font-size: 25px;
  background: transparent;
  border-radius: 10px;
  border: 2px solid #04457A;
  margin-bottom: 20px;
  margin-top: 35px;
  color: #04457A;
  transition: 0.3s all;
}
#detail .box .info_right .add_cart .btn_add_cart_now:hover {
  transition: 0.3s all;
  transform: translateY(-5px);
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15);
  color: #FF960B;
  border: 2px solid #FF960B;
}
#detail .box .info_right .add_cart .btn_add_cart {
  display: block;
  width: 100%;
  height: 60px;
  font-weight: 300;
  font-size: 25px;
  background: transparent;
  border-radius: 10px;
  border: 2px solid #04457A;
  margin-bottom: 5px;
  background: #04457A;
  color: #ffffff;
  transition: 0.3s all;
}
#detail .box .info_right .add_cart .btn_add_cart:hover {
  transition: 0.3s all;
  transform: translateY(-5px);
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
  border: 2px solid #FF960B;
  background: #FF960B;
}

.full.exam.detail {
  background: var(--bg-exam) center center no-repeat;
  background-size: cover;
  padding: 0;
}
.full.exam.detail #container {
  display: flex;
  align-items: center;
}

#exam {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}
@media (max-width: 600px) {
  #exam #create_audio_here audio {
    width: 90%;
  }
}
#exam #create_audio_here audio {
  margin: 10px auto;
}
@media (min-width: 601px) {
  #exam #create_audio_here audio {
    margin: 30px auto;
  }
}
#exam #create_audio_here audio::-webkit-media-controls-timeline {
  background-color: #00c1c0;
  color: #00c1c0;
}
#exam .box_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#exam .box_content ::-webkit-scrollbar {
  width: 10px;
}
#exam .box_content ::-webkit-scrollbar-track {
  background: #ffffff;
}
#exam .box_content ::-webkit-scrollbar-thumb {
  background: #ADADAD;
  border: 1.5px solid #ffffff;
}
#exam .box_content .welcome {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}
@media (min-width: 993px) {
  #exam .box_content .welcome {
    margin-bottom: 40px;
  }
}
#exam .box_content .welcome h1 {
  font-weight: 600;
  color: #04457A;
  text-transform: uppercase;
  font-size: 24px;
}
@media (min-width: 601px) {
  #exam .box_content .welcome h1 {
    font-size: 30px;
  }
}
@media (min-width: 1025px) {
  #exam .box_content .welcome h1 {
    font-size: 34px;
  }
}
#exam .box_content .welcome .time {
  font-weight: 300;
  font-size: 34px;
  color: #383838;
  padding: 7px 0 19px;
}
#exam .box_content .welcome .time p {
  font-weight: 500;
}
#exam .box_content .welcome .time ul {
  display: inline-block;
  text-align: left;
  font-size: 24px;
}
#exam .box_content .welcome .time ul li {
  color: #000000;
}
#exam .box_content .welcome .time ul li::marker {
  color: #ff960b;
}
#exam .box_content .col_l {
  background: #ffffff;
  background-size: 100% 100%;
  height: 100%;
  justify-content: center;
  position: relative;
  z-index: 1;
  border-radius: 0 0 15px 15px;
  padding-bottom: 25px;
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 993px) {
  #exam .box_content .col_l {
    flex: 0 0 67.5%;
    max-width: 67.5%;
  }
}
#exam .box_content .col_l .listAll .tabpart .question_inner {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0;
}
#exam .box_content .col_l .listAll .tabpart .question_inner.show {
  display: block;
}
#exam .box_content .col_l .inner {
  text-align: center;
  position: relative;
  padding-top: 51px;
  overflow-y: hidden;
}
#exam .box_content .col_l .inner .view-uncheck {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #86C4F6;
  display: flex;
  justify-content: space-between;
  padding: 0 25px;
  font-size: 17px;
}
@media (min-width: 601px) {
  #exam .box_content .col_l .inner .view-uncheck {
    font-size: 20px;
  }
}
#exam .box_content .col_l .inner .view-uncheck.checked {
  background: #18132c;
  color: #ffffff;
}
#exam .box_content .col_l .inner .view-uncheck.checked .checkbox:after {
  content: "\f00c";
  font-family: "Font Awesome 5 Pro";
  color: #000000;
  font-weight: 600;
  font-size: 17px;
}
#exam .box_content .col_l .inner .view-uncheck * {
  font-weight: bold;
  line-height: 40px;
}
@media (min-width: 601px) {
  #exam .box_content .col_l .inner .view-uncheck * {
    line-height: 51px;
  }
}
#exam .box_content .col_l .inner .view-uncheck .checkbox-wrap {
  display: flex;
  align-items: center;
}
#exam .box_content .col_l .inner .view-uncheck .checkbox {
  width: 30px;
  height: 30px;
  background: #fff;
  box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.07);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 8px;
}
#exam .box_content .col_l .inner ul.list_part {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
}
#exam .box_content .col_l .inner ul.list_part li {
  flex: 0 0 calc(14.2857142857% - 10px);
  background: #E2E2E2;
  padding: 4px 0;
}
#exam .box_content .col_l .inner ul.list_part li.active {
  background: #FF960B;
  color: #ffffff;
  padding: 6px 0 2px;
  font-weight: 600;
}
#exam .box_content .col_l .inner .box_around {
  margin-top: 66px;
  padding: 0 22px;
}
#exam .box_content .col_l .inner .box_around .part.cur {
  box-shadow: 0 0 5px rgba(255, 150, 11, 0.75);
}
#exam .box_content .col_l .inner .box_around .step {
  display: flex;
  align-items: center;
  text-align: left;
  margin-bottom: 74px;
}
#exam .box_content .col_l .inner .box_around .step:last-child {
  margin-bottom: 0;
}
#exam .box_content .col_l .inner .box_around .step:nth-child(2n) .img {
  order: 1;
  margin-right: 0;
  margin-left: 31px;
}
#exam .box_content .col_l .inner .box_around .step:nth-child(2n) .content {
  order: 0;
}
#exam .box_content .col_l .inner .box_around .step .title {
  font-family: "MyriadPro-Semibold";
  font-size: 25px;
  color: #383838;
}
#exam .box_content .col_l .inner .box_around .step .img {
  flex: 0 0 230px;
  margin-right: 35px;
}
#exam .box_content .col_l .inner .box_around .step .content ul {
  list-style: none;
  font-weight: 300;
  font-size: 18px;
  color: #383838;
  padding: 0;
}
#exam .box_content .col_l .inner .box_around .step .content ul li {
  line-height: 2;
  position: relative;
  padding-left: 1.2rem;
}
#exam .box_content .col_l .inner .box_around .step .content ul li:after {
  content: "";
  position: absolute;
  background: #FF960B;
  width: 7px;
  height: 7px;
  left: 0;
  top: 15px;
  border-radius: 50%;
}
#exam .box_content .col_l .intro {
  font: 400 29px/1 "Baloo 2", cursive;
  text-transform: uppercase;
  color: #fff;
  background: url("../../../../../resources/images/btn-intro.png") center center no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  padding: 0.5rem 1.9em;
}
@media (min-width: 1200px) {
  #exam .box_content .col_l .intro {
    font-size: 29px;
    padding: 1rem 2.9em;
  }
}
#exam .box_content .col_l h1 {
  font: 700 30px/1 "Baloo 2", cursive;
  color: #00164A;
  padding: 10px 0;
}
@media (min-width: 768px) {
  #exam .box_content .col_l h1 {
    padding: 20px 0;
  }
}
@media (min-width: 1200px) {
  #exam .box_content .col_l h1 {
    font-size: 60px;
    padding: 3rem 0;
  }
}
#exam .box_content .col_l .note {
  font: 400 18px/150% "Baloo 2", cursive;
  color: #00164A;
}
@media (min-width: 1200px) {
  #exam .box_content .col_l .note {
    font-size: 25px;
  }
}
#exam .box_content .col_l .info {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  margin: 0 -7px;
}
@media (min-width: 992px) {
  #exam .box_content .col_l .info {
    padding: 30px 15px;
  }
}
@media (min-width: 1200px) {
  #exam .box_content .col_l .info {
    padding: 3rem 0;
  }
}
#exam .box_content .col_l .info .btn {
  font: 700 16px/150% "Baloo 2", cursive;
  text-align: center;
  color: #00164A;
  background: rgba(255, 255, 255, 0.8);
  border: 0;
  border-radius: 50px;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16);
  width: 100%;
  padding: 10px;
  margin: 0 7px;
}
@media (min-width: 1200px) {
  #exam .box_content .col_l .info .btn {
    font-size: 30px;
    padding: 1.1rem 1rem;
  }
}
.listApp {
  display: block;
  text-align: left;
  color: #ff980f;
  margin-bottom: 10px;
}
@media (min-width: 993px) {
  .listApp {
    display: none;
  }
}
.listApp .material-icons {
  font-size: 30px;
}

.col_r {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow-y: auto;
  margin: -5px 0;
  display: none;
  border-radius: 0;
  background: #F4F4F4;
  width: 100%;
  max-width: 95%;
  padding: 10px;
}
@media (min-width: 401) {
  .col_r {
    max-width: 85%;
  }
}
@media (min-width: 601px) {
  .col_r {
    max-width: 50%;
  }
}
@media (min-width: 993px) {
  .col_r {
    padding: 0;
    height: 100%;
    flex: 0 0 31%;
    max-width: 31%;
    display: block;
    background: transparent;
  }
}
.col_r .group_part {
  margin-top: 5px;
  padding-top: 42px;
}
@media (min-width: 769px) {
  .col_r .group_part {
    padding: 5px;
    padding-top: 51px;
  }
}
.col_r .group_part .colpart {
  background: #ffffff;
  border-radius: 0 0 15px 15px;
  margin-bottom: 10px;
  padding: 19.5px 20px 25px 28px;
}
.col_r .group_part .colpart .type {
  line-height: 51px;
  position: absolute;
  background: #FF960B;
  color: #ffffff;
  padding-left: 29px;
  text-transform: uppercase;
  font-size: 18px;
  left: 10px;
  top: 10px;
  right: 10px;
}
@media (min-width: 769px) {
  .col_r .group_part .colpart .type {
    font-size: 20px;
    left: 5px;
    top: 5px;
    right: 5px;
  }
}
.col_r .group_part .colpart:last-child {
  margin-bottom: 0;
}
.col_r .group_part .colpart.active {
  box-shadow: 0 0 5px 2px rgb(255, 150, 11);
}
.col_r .group_part .colpart .title {
  font-size: 18px;
  font-weight: 600;
  color: #383838;
  margin-bottom: 20px;
}
.col_r .group_part .colpart .list_qae {
  display: flex;
  flex-wrap: wrap;
}
.col_r .group_part .colpart .list_qae .item {
  flex: 0 0 calc(16.6666666667% - 6px);
  margin-bottom: 6px;
  margin-right: 6px;
  text-align: center;
  border: 1px solid #383838;
  font-size: 21.58px;
  line-height: 42.66px;
}
.col_r .group_part .colpart .list_qae .item.view {
  background: #ffeed7;
}
.col_r .group_part .colpart .list_qae .item.view .qae {
  background: #ffeed7;
}
.col_r .group_part .colpart .list_qae .item.active {
  position: relative;
}
.col_r .group_part .colpart .list_qae .item.active:after {
  content: "\f00c";
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  font-size: 30px;
  position: absolute;
  color: #0073cf;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0px 0px 2px #000000;
}
.col_r .group_part .colpart .list_qae .item.selected {
  background: rgb(255, 150, 11);
  color: #ffffff;
}
.col_r .group_part .colpart .list_qae .item.exam {
  position: absolute;
  opacity: 0;
  width: calc(16.6666666667% - 14px);
  visibility: hidden;
}
.col_r .type-list {
  background: #ffffff;
  border-radius: 20px;
  margin-top: 20px;
  padding: 19.5px 20px 25px 28px;
}
.col_r .type-list .type-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}
.col_r .type-list .type-list-item:hover {
  text-decoration: underline;
}
.col_r .type-list .type-list-item .text {
  font-size: 18px;
}
.col_r .type-list .type-list-item.active .type-list-radio:before {
  position: absolute;
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #34F30F;
  top: 3px;
  left: 3px;
}
.col_r .type-list .type-list-item .type-list-radio {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid #B2B2B2;
  cursor: pointer;
  margin-right: 10px;
  position: relative;
}

.group_btn {
  display: flex;
  justify-content: flex-end;
  padding-right: 25px;
}

#clickprev, #prevItem {
  text-align: right;
  cursor: pointer;
  margin-left: 10px;
}
#clickprev span, #prevItem span {
  display: inline-block;
  margin: auto;
  background: #ff960b;
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
}
@media (min-width: 601px) {
  #clickprev span, #prevItem span {
    font-size: 18px;
  }
}
#clickprev span i, #prevItem span i {
  font-weight: 500;
  font-size: 16px;
  margin-top: 4px;
}

#clickme, #clickview {
  text-align: right;
  cursor: pointer;
  margin-left: 10px;
}
#clickme span, #clickview span {
  display: inline-block;
  margin: auto;
  background: #ff960b;
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
}
@media (min-width: 601px) {
  #clickme span, #clickview span {
    font-size: 18px;
  }
}
#clickme span i, #clickview span i {
  font-weight: 500;
  font-size: 16px;
  margin-top: 4px;
}

#start_exam {
  text-align: center;
  display: none;
  cursor: pointer;
}
#start_exam span {
  display: inline-block;
  margin: auto;
  background: #ff960b;
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 18px;
}
#start_exam span i {
  font-weight: 500;
  font-size: 16px;
  margin-top: 4px;
}

.btn-exam {
  color: #fff;
  background: #FF960B;
  background-size: contain;
  width: 100%;
  max-width: 190px;
  font-weight: 600;
  padding: 5px 0;
  box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.1);
  border-radius: 0;
}
@media (min-width: 768px) {
  .btn-exam {
    font-size: 20px;
  }
}

.swal2-container .jbox-notice {
  padding: 40px;
}
.swal2-container #swal2-title {
  font-weight: 500;
  font-size: 22px;
}
@media (min-width: 1024px) {
  .swal2-container #swal2-title {
    font-size: 24px;
  }
}
@media (min-width: 1200px) {
  .swal2-container #swal2-title {
    font-size: 30px;
  }
}
.swal2-container .swal2-actions {
  padding: 0;
}
.swal2-container .swal2-styled.swal2-confirm, .swal2-container .swal2-styled.swal2-deny {
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
  background-color: #04457A !important;
  background-size: 100% 100% !important;
  box-shadow: none;
  min-width: 165px;
  padding: 0;
  border-radius: 25px !important;
  font-size: 16px;
  min-height: 35px;
}
@media (min-width: 601px) {
  .swal2-container .swal2-styled.swal2-confirm, .swal2-container .swal2-styled.swal2-deny {
    min-height: 40px;
    font-size: 20px;
  }
}
.swal2-container .swal2-styled.swal2-confirm:focus, .swal2-container .swal2-styled.swal2-deny:focus {
  box-shadow: none;
  outline: 0;
}
.swal2-container .swal2-styled.swal2-cancel {
  background: url("../../../../../resources/images/close.png") center center no-repeat !important;
  background-size: contain !important;
  width: 40px;
  height: 30px;
  position: absolute;
  top: -10%;
  right: -3%;
}
.swal2-container .swal2-styled.swal2-cancel:focus {
  box-shadow: none;
  outline: 0;
}

.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
  background: rgba(0, 0, 0, 0.7) !important;
}

.box_question {
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding: 10px;
  margin-top: 10px;
}
@media (min-width: 769px) {
  .box_question {
    padding: 2rem;
    padding-right: 10px;
    margin-top: 2rem;
  }
}
.box_question::-webkit-scrollbar {
  width: 5px;
  background-color: transparent;
  border-radius: 5px;
}
.box_question::-webkit-scrollbar-thumb {
  background-color: #F5F5F5;
  border-radius: 5px;
}
.box_question::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: transparent;
  border-radius: 5px;
}
.box_question .box_question-header {
  font: 400 18px/150% "BerlinSansFB";
  text-align: center;
  color: #000;
  background: #fff;
  border: 3px solid #18EFED;
  border-radius: 50px;
  padding: 20px;
  margin-bottom: 30px;
}
@media (min-width: 992px) {
  .box_question .box_question-header {
    font-size: 29px;
  }
}
.box_question .box_question-content {
  color: #00164A;
}
.box_question .btn_sub {
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.multichoice .img-descript .img {
  max-width: 500px;
  padding-bottom: 20px;
  margin: auto;
}
.multichoice .img-descript .img img {
  border: 5px solid #fff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}
.multichoice .img-descript .descript {
  font: 400 20px/150% "Baloo 2", cursive;
  text-align: justify;
  color: #00164A;
  padding-bottom: 20px;
}
.multichoice .img-descript .descript p {
  padding: 5px 0;
}
.multichoice .question_inner {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 20px;
  display: none;
}
@media (min-width: 601px) {
  .multichoice .question_inner {
    margin-bottom: 20px;
  }
}
@media (min-width: 992px) {
  .multichoice .question_inner {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 40px;
  }
}
.multichoice .question_inner.text {
  flex: 0 0 100%;
  max-width: 100%;
}
.multichoice .question_inner.has-pic.active {
  display: flex;
}
.multichoice .question_inner.has-pic {
  flex: 0 0 100%;
  max-width: 100%;
  flex-wrap: wrap;
}
.multichoice .question_inner.has-pic .question_index {
  flex: 0 0 100%;
  max-width: 100%;
}
.multichoice .question_inner.has-pic .img {
  margin-bottom: 15px;
}
@media (min-width: 992px) {
  .multichoice .question_inner.has-pic .img {
    flex: 1 1 auto;
  }
}
.multichoice .question_inner.has-pic .list_item {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 992px) {
  .multichoice .question_inner.has-pic .list_item .item {
    text-align: left;
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
  }
  .multichoice .question_inner.has-pic .list_item .item + .item {
    margin-top: 10px;
  }
  .multichoice .question_inner.has-pic .list_item .item .box_image {
    margin: 0 15px;
    order: 2;
  }
  .multichoice .question_inner.has-pic .list_item .item .box_check {
    order: 1;
  }
  .multichoice .question_inner.has-pic .list_item .item .box_check .answer-radio {
    display: none;
  }
  .multichoice .question_inner.has-pic .list_item .item .box_check .answer-radio-label {
    font: 700 20px/150% "Baloo 2", cursive;
    color: #00164A;
    padding-left: 40px;
    padding-right: unset;
    position: relative;
  }
  .multichoice .question_inner.has-pic .list_item .item .box_check .answer-radio-label:before, .multichoice .question_inner.has-pic .list_item .item .box_check .answer-radio-label:after {
    content: "";
    position: absolute;
  }
  .multichoice .question_inner.has-pic .list_item .item .box_check .answer-radio-label:before {
    border: 2px solid #00164A;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    top: 0;
    left: 0;
  }
  .multichoice .question_inner.has-pic .list_item .item .box_check .answer-radio-label:after {
    background: url("../../../../../resources/images/checked.png") center center no-repeat;
    background-size: contain;
    width: 34px;
    height: 22px;
    top: 0;
    left: 8px;
    opacity: 0;
    transition: 300ms ease-in-out;
  }
  .multichoice .question_inner.has-pic .list_item .item .box_check input:checked + label:after {
    opacity: 1;
  }
}
.multichoice .question_inner.active {
  display: block;
}
.multichoice .question_inner.active.hide {
  display: none;
}
.multichoice .question_inner.active.show {
  display: block;
}
.multichoice .question_inner.show {
  display: block;
}
.multichoice .question_inner .destitlewrap {
  width: 100%;
}
@media (max-width: 600px) {
  .multichoice .question_inner .destitlewrap img {
    max-height: 250px;
  }
}
.multichoice .question_inner .short, .multichoice .question_inner .note_exam, .multichoice .question_inner .title {
  text-align: left;
  margin-bottom: 1rem;
  font-size: 16px;
}
.multichoice .question_inner .short table, .multichoice .question_inner .note_exam table, .multichoice .question_inner .title table {
  width: 100% !important;
}
.multichoice .question_inner .title {
  font-weight: bold;
  font-size: 20px;
}
.multichoice .question_inner .itemvideo {
  margin-bottom: 2rem;
}
.multichoice .question_inner .itemvideo:last-child {
  margin-bottom: 0;
}
.multichoice .question_inner .question_index {
  font-weight: 600;
  text-align: left;
  color: #383838;
  margin-bottom: 5px;
  font-size: 18px;
}
@media (min-width: 601px) {
  .multichoice .question_inner .question_index {
    font-size: 20px;
  }
}
.multichoice .question_inner .list_item {
  display: flex;
  flex-wrap: wrap;
}
.multichoice .question_inner .list_item .item {
  text-align: center;
  flex: 1 1;
}
.multichoice .question_inner .list_item .item:first-child {
  margin-top: 0;
}
.multichoice .question_inner .list_item .item.text {
  text-align: left;
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 10px;
}
.multichoice .question_inner .list_item .item label {
  margin-bottom: 0;
}
.multichoice .question_inner .list_item .item .box_image {
  width: 100%;
  max-width: 129px;
  max-height: 129px;
  margin: auto;
  margin-bottom: 15px;
}
.multichoice .question_inner .list_item .item .box_image .image {
  border: 1px solid #4A5843;
  width: 100%;
  padding-top: 100%;
  position: relative;
}
.multichoice .question_inner .list_item .item .box_image .image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.multichoice .question_inner .list_item .item .box_check .answer-radio {
  display: none;
}
.multichoice .question_inner .list_item .item .box_check .answer-radio-label {
  font: 700 20px/150% "Baloo 2", cursive;
  color: #00164A;
  padding-right: 40px;
  position: relative;
}
.multichoice .question_inner .list_item .item .box_check .answer-radio-label:before, .multichoice .question_inner .list_item .item .box_check .answer-radio-label:after {
  content: "";
  position: absolute;
}
.multichoice .question_inner .list_item .item .box_check .answer-radio-label:before {
  border: 2px solid #00164A;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  top: 0;
  right: 0;
}
.multichoice .question_inner .list_item .item .box_check .answer-radio-label:after {
  background: url("../../../../../resources/images/checked.png") center center no-repeat;
  background-size: contain;
  width: 34px;
  height: 22px;
  top: 0;
  right: -8px;
  opacity: 0;
  transition: 300ms ease-in-out;
}
.multichoice .question_inner .list_item .item .box_check input:checked + label:after {
  opacity: 1;
}
.multichoice .question_inner .list_item .item .box_text .answer-radio {
  display: none;
}
.multichoice .question_inner .list_item .item .box_text .answer-radio-label {
  font-size: 18px;
  color: #383838;
  text-align: center;
  cursor: pointer;
}
.multichoice .question_inner .list_item .item .box_text .answer-radio-label span.option {
  display: inline-block;
  position: relative;
  min-width: 27px;
}
@media (min-width: 601px) {
  .multichoice .question_inner .list_item .item .box_text .answer-radio-label span.option {
    min-width: 31px;
  }
}
.multichoice .question_inner .list_item .item .box_text .answer-radio-label span.option:after, .multichoice .question_inner .list_item .item .box_text .answer-radio-label span.option:before {
  content: "";
  position: absolute;
}
.multichoice .question_inner .list_item .item .box_text .answer-radio-label span.option span {
  display: inline-block;
  position: relative;
  font-weight: 600;
  margin-right: 5px;
  font-size: 18px;
  min-width: 27px;
}
@media (min-width: 601px) {
  .multichoice .question_inner .list_item .item .box_text .answer-radio-label span.option span {
    font-size: 20px;
    min-width: 31px;
  }
}
.multichoice .question_inner .list_item .item .box_text .answer-radio-label span.option:before {
  border: 2px solid #383838;
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 27px;
  height: 27px;
}
@media (min-width: 601px) {
  .multichoice .question_inner .list_item .item .box_text .answer-radio-label span.option:before {
    width: 31px;
    height: 31px;
  }
}
.multichoice .question_inner .list_item .item .box_text .answer-radio-label span.option:after {
  background: url("../../../../../resources/images/checked.png") center center no-repeat;
  background-size: contain;
  width: 34px;
  height: 22px;
  top: 50%;
  transform: translateY(-50%);
  right: 100%;
  opacity: 0;
  transition: 300ms ease-in-out;
}
.multichoice .question_inner .list_item .item .box_text input:checked + label span {
  z-index: 99;
  position: relative;
}
.multichoice .question_inner .list_item .item .box_text input:checked + label span.option:before {
  background: #FF960B;
  border: 2px solid #FF960B;
  opacity: 1;
}
.multichoice .question_inner .list_item .item .box_text input:checked + label span.option span {
  color: #ffffff;
}

.gapfill_with_answer {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.gapfill_with_answer .box_l, .gapfill_with_answer .box_r {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 15px;
}
@media (min-width: 992px) {
  .gapfill_with_answer .box_l, .gapfill_with_answer .box_r {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.gapfill_with_answer .img-descript {
  display: block;
}
.gapfill_with_answer .img-descript .img {
  max-width: 500px;
  padding-bottom: 20px;
  margin: auto;
}
.gapfill_with_answer .img-descript .img img {
  border: 5px solid #fff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}
.gapfill_with_answer .img-descript .descript {
  font: 400 20px/150% "Baloo 2", cursive;
  text-align: justify;
  color: #00164A;
  padding-bottom: 20px;
}
.gapfill_with_answer .img-descript .descript p {
  padding: 5px 0;
}
.gapfill_with_answer .list_question {
  text-align: left;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 15px;
}
.gapfill_with_answer .list_question .question_inner {
  font: 400 14px/1 "Baloo 2", cursive;
}
@media (min-width: 992px) {
  .gapfill_with_answer .list_question .question_inner {
    font-size: 22px;
  }
}
.gapfill_with_answer .list_question .question_inner .type {
  font: 700 14px/150% "Baloo 2", cursive;
}
@media (min-width: 992px) {
  .gapfill_with_answer .list_question .question_inner .type {
    font-size: 22px;
  }
}
.gapfill_with_answer .list_question .question_inner:not(.example) + :not(.example) .type {
  display: none;
}
.gapfill_with_answer .list_question .question_inner.example + .example .type {
  display: none;
}
.gapfill_with_answer .list_question .question_inner + .question_inner {
  padding-top: 15px;
}
.gapfill_with_answer .list_question .question_inner .fill_in_box {
  font: 400 14px/1 "Baloo 2", cursive;
  text-align: center;
  line-height: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed #00164A;
  border-radius: 0;
  max-width: 120px;
  max-height: 18px;
  padding: 0;
}
@media (min-width: 992px) {
  .gapfill_with_answer .list_question .question_inner .fill_in_box {
    font-size: 22px;
  }
}

.gapfill_suggest .list_question {
  font: 400 14px/1 "Baloo 2", cursive;
  text-align: justify;
  padding-top: 15px;
}
@media (min-width: 992px) {
  .gapfill_suggest .list_question {
    font-size: 22px;
  }
}
.gapfill_suggest .list_question .fill_in_box {
  font: 400 14px/1 "Baloo 2", cursive;
  text-align: center;
  line-height: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed #00164A;
  border-radius: 0;
  max-width: 120px;
  max-height: 18px;
  padding: 0;
}
@media (min-width: 992px) {
  .gapfill_suggest .list_question .fill_in_box {
    font-size: 22px;
  }
}

.gapfill .list_question {
  font: 400 14px/1 "Baloo 2", cursive;
  text-align: justify;
  padding-top: 15px;
}
@media (min-width: 992px) {
  .gapfill .list_question {
    font-size: 22px;
  }
}
.gapfill .list_question .fill_in_box {
  font: 400 14px/1 "Baloo 2", cursive;
  text-align: center;
  line-height: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed #00164A;
  border-radius: 0;
  max-width: 120px;
  max-height: 18px;
  padding: 0;
}
@media (min-width: 992px) {
  .gapfill .list_question .fill_in_box {
    font-size: 22px;
  }
}

.matching_letter .img-descript {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -15px;
}
.matching_letter .img-descript .img {
  flex: 1 1;
  min-width: 50%;
  padding: 15px;
  margin: auto;
}
.matching_letter .img-descript .img img {
  border: 5px solid #fff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}
.matching_letter .img-descript .group_img {
  flex: 1 1;
  min-width: 50%;
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  margin: 0 -15px;
}
.matching_letter .img-descript .group_img .img-small {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 15px;
}
.matching_letter .img-descript .group_img .img-small .thumbnail {
  width: 100%;
  padding-top: 62%;
  position: relative;
  overflow: hidden;
}
.matching_letter .img-descript .group_img .img-small .thumbnail img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.matching_letter .img-descript .group_img .img-small .label {
  font: 700 12px/150% "Baloo 2", cursive;
  text-transform: uppercase;
  text-align: center;
  display: block;
  margin-top: 15px;
}
@media (min-width: 992px) {
  .matching_letter .img-descript .group_img .img-small .label {
    font-size: 18px;
  }
}
.matching_letter .img-descript .descript {
  font: 400 20px/150% "Baloo 2", cursive;
  text-align: justify;
  color: #00164A;
  flex: 100%;
  max-width: 100%;
  padding: 0 15px;
  padding-bottom: 20px;
}
.matching_letter .img-descript .descript p {
  padding: 5px 0;
}
.matching_letter .list_question {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
@media (min-width: 992px) {
  .matching_letter .list_question {
    margin: 0 -30px;
  }
}
.matching_letter .list_question .question_inner {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 10px;
}
@media (min-width: 992px) {
  .matching_letter .list_question .question_inner {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 10px 30px;
  }
}
.matching_letter .list_question .question_inner .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.matching_letter .list_question .question_inner .item .img {
  flex: 0 0 110px;
  max-width: 110px;
}
.matching_letter .list_question .question_inner .item .name {
  font: 500 16px/normal "Baloo 2", cursive;
  text-transform: uppercase;
  text-align: left;
  flex: 1 1;
  max-height: 10vh;
  padding: 0 15px;
  overflow-y: auto;
}
@media (min-width: 992px) {
  .matching_letter .list_question .question_inner .item .name {
    font-size: 22px;
  }
}
.matching_letter .list_question .question_inner .item .name::-webkit-scrollbar {
  width: 5px;
  background-color: transparent;
  border-radius: 5px;
}
.matching_letter .list_question .question_inner .item .name::-webkit-scrollbar-thumb {
  background-color: #F5F5F5;
  border-radius: 5px;
}
.matching_letter .list_question .question_inner .item .name::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: transparent;
  border-radius: 5px;
}
.matching_letter .list_question .question_inner .item input {
  font: 700 16px/150% "Baloo 2", cursive;
  text-transform: uppercase;
  text-align: center;
  color: #00164A;
  background: #fff;
  border: 3px solid #18EFED;
  border-radius: 50px;
  flex: 0 0 73px;
  width: 73px;
  height: 37px;
}
@media (min-width: 992px) {
  .matching_letter .list_question .question_inner .item input {
    font-size: 22px;
  }
}

.write_yes_no {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.write_yes_no .box_l, .write_yes_no .box_r {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 15px;
}
@media (min-width: 992px) {
  .write_yes_no .box_l, .write_yes_no .box_r {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.write_yes_no .img-descript {
  display: block;
}
.write_yes_no .img-descript .img {
  max-width: 500px;
  padding-bottom: 20px;
  margin: auto;
}
.write_yes_no .img-descript .img img {
  border: 5px solid #fff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}
.write_yes_no .img-descript .descript {
  font: 400 20px/150% "Baloo 2", cursive;
  text-align: justify;
  color: #00164A;
  padding-bottom: 20px;
}
.write_yes_no .img-descript .descript p {
  padding: 5px 0;
}
.write_yes_no .list_question {
  text-align: left;
}
.write_yes_no .list_question .question_inner {
  font: 400 14px/1 "Baloo 2", cursive;
}
@media (min-width: 992px) {
  .write_yes_no .list_question .question_inner {
    font-size: 22px;
  }
}
.write_yes_no .list_question .question_inner .type {
  font: 700 14px/150% "Baloo 2", cursive;
}
@media (min-width: 992px) {
  .write_yes_no .list_question .question_inner .type {
    font-size: 22px;
  }
}
.write_yes_no .list_question .question_inner:not(.example) + :not(.example) .type {
  display: none;
}
.write_yes_no .list_question .question_inner.example + .example .type {
  display: none;
}
.write_yes_no .list_question .question_inner + .question_inner {
  padding-top: 15px;
}
.write_yes_no .list_question .question_inner .fill_in_box {
  font: 400 14px/1 "Baloo 2", cursive;
  text-transform: uppercase;
  text-align: center;
  line-height: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed #00164A;
  border-radius: 0;
  max-width: 120px;
  max-height: 18px;
  padding: 0;
}
@media (min-width: 992px) {
  .write_yes_no .list_question .question_inner .fill_in_box {
    font-size: 22px;
  }
}

.check_right_wrong .list_question .question_inner {
  max-width: 690px;
  margin: auto;
}
.check_right_wrong .list_question .question_inner + .question_inner {
  margin-top: 20px;
}
@media (min-width: 992px) {
  .check_right_wrong .list_question .question_inner + .question_inner {
    margin-top: 50px;
  }
}
.check_right_wrong .list_question .question_inner .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.check_right_wrong .list_question .question_inner .item .img {
  flex: 0 0 32%;
  max-width: 220px;
}
.check_right_wrong .list_question .question_inner .item .img img {
  border: 5px solid #fff;
  width: 100%;
  height: auto;
}
.check_right_wrong .list_question .question_inner .item .name {
  font: 700 18px/150% "Baloo 2", cursive;
  text-transform: uppercase;
  text-align: left;
  flex: 1 1;
  padding: 0 15px;
}
@media (min-width: 992px) {
  .check_right_wrong .list_question .question_inner .item .name {
    font-size: 25px;
  }
}
.check_right_wrong .list_question .question_inner .item .ul-select {
  font: 700 16px/150% "Baloo 2", cursive;
  text-transform: uppercase;
  text-align: center;
  color: #00164A;
  background: #fff;
  border: 3px solid #18EFED;
  border-radius: 50px;
  flex: 0 0 25%;
  max-width: 185px;
  height: 60px;
}
@media (min-width: 992px) {
  .check_right_wrong .list_question .question_inner .item .ul-select {
    font-size: 22px;
  }
}
.check_right_wrong .list_question .question_inner .item .ul-select li {
  background: #fff;
  border-radius: 50px;
  height: 100%;
}
.check_right_wrong .list_question .question_inner .item .ul-select li.init {
  display: flex;
  align-items: center;
  justify-content: center;
}
.check_right_wrong .list_question .question_inner .item .ul-select li.init .select input {
  display: none;
}
.check_right_wrong .list_question .question_inner .item .ul-select li.init .select label {
  display: none;
}
.check_right_wrong .list_question .question_inner .item .ul-select li.init .select input:checked + label {
  display: block;
}
.check_right_wrong .list_question .question_inner .item .ul-select li:not(init) {
  position: relative;
}
.check_right_wrong .list_question .question_inner .item .ul-select li:not(init) label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.check_right_wrong .list_question .question_inner .item .ul-select li .tick {
  background: url("../../../../../resources/images/checked.png") center center no-repeat;
  background-size: contain;
  width: 58px;
  height: 37px;
}
.check_right_wrong .list_question .question_inner .item .ul-select li .cross {
  background: url("../../../../../resources/images/cross.png") center center no-repeat;
  background-size: contain;
  width: 42px;
  height: 42px;
}

.dragdrop .half {
  display: flex;
  flex-wrap: wrap;
}
.dragdrop .half .box_l, .dragdrop .half .box_r {
  flex: 0 0 100%;
  max-width: 100%;
}
@media (min-width: 992px) {
  .dragdrop .half .box_l, .dragdrop .half .box_r {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
.dragdrop .half .box_l {
  max-width: 500px;
  padding: 0 30px;
  margin: auto;
}
@media (min-width: 992px) {
  .dragdrop .half .box_l {
    order: 2;
  }
}
.dragdrop .half .box_l .list_fill .item_fill {
  flex: 0 0 auto;
  max-width: 50%;
}
@media (min-width: 992px) {
  .dragdrop .half .box_r {
    order: 1;
  }
}
.dragdrop .full .box_l .list_fill {
  padding-top: 0;
  padding-bottom: 20px;
  margin: 0 -20px;
}
.dragdrop .full .box_l .list_fill .item_fill {
  flex: 0 0 auto;
  margin: 5px;
}
.dragdrop .box_l {
  position: relative;
  z-index: 1;
}
.dragdrop .box_l .list_fill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 30px;
  margin: -30px;
  min-height: 58px;
}
.dragdrop .box_l .list_fill .item_fill {
  font: 500 16px/1 "Baloo 2", cursive;
  border: 2px dashed #00164A;
  min-width: 112px;
  min-height: 33px;
  flex: 0 0 40%;
  max-width: 40%;
  padding: 10px 20px;
  margin: 5px;
}
@media (min-width: 992px) {
  .dragdrop .box_l .list_fill .item_fill {
    font-size: 26px;
  }
}
.dragdrop .box_r {
  position: relative;
}
.dragdrop .box_r .list_cell .item_cell {
  font: 500 12px/1 "Baloo 2", cursive;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  border: 2px dashed #00164A;
  border-radius: 50px;
  min-width: 72px;
  min-height: 27px;
  position: absolute;
  transition: transform 0.3s ease 0s, background-color 0.3s ease 0s;
}
@media (min-width: 992px) {
  .dragdrop .box_r .list_cell .item_cell {
    font-size: 17px;
  }
}
.dragdrop .box_r .list_cell .item_cell .item_fill:not(.text-transparent) {
  color: #fff;
  background: linear-gradient(to right, #FF5F29, #FFA506);
}
.dragdrop .item_fill {
  font: 500 12px/1 "Baloo 2", cursive;
  text-align: center;
  background: var(--bg);
  border-radius: 50px;
  min-width: 72px;
  min-height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 992px) {
  .dragdrop .item_fill {
    font-size: 16px;
  }
}

.write_paragraph .img-descript .group_img {
  flex: 1 1;
  min-width: 50%;
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  margin: 0 -30px;
}
.write_paragraph .img-descript .group_img .img-small {
  flex: 1 1 auto;
  min-width: 25%;
  padding: 15px 30px;
}
.write_paragraph .img-descript .group_img .img-small .thumbnail {
  border: 4px solid #fff;
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
}
.write_paragraph .img-descript .group_img .img-small .thumbnail img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.write_paragraph .img-descript .group_img .img-small .label {
  font: 700 12px/150% "Baloo 2", cursive;
  text-transform: uppercase;
  text-align: center;
  display: block;
  margin-top: 15px;
}
@media (min-width: 992px) {
  .write_paragraph .img-descript .group_img .img-small .label {
    font-size: 18px;
  }
}
.write_paragraph .question_inner {
  background: #EBFCFF;
  border-radius: 25px;
  padding: 20px;
}
.write_paragraph .question_inner .require {
  font: 500 22px/150% "Baloo 2", cursive;
  color: #00164A;
  text-align: left;
  padding-bottom: 10px;
  padding-right: 65px;
  position: relative;
}
.write_paragraph .question_inner .require .count {
  position: absolute;
  top: 0;
  right: 0;
}
.write_paragraph .question_inner textarea {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 6"><circle cx="3" cy="3" r="1" fill="rgba(0,22,74,0.9)" /></svg>') 0 1em/4px 1.5em transparent;
  border: 0;
  width: 100%;
  min-height: 180px;
}

.word_ordering .list_question {
  font: 500 16px/150% "Baloo 2", cursive;
}
@media (min-width: 992px) {
  .word_ordering .list_question {
    font-size: 22px;
  }
}
.word_ordering .list_question .question_inner {
  display: flex;
  align-items: center;
  padding: 30px 0;
}
.word_ordering .list_question .question_inner .img {
  flex: 0 0 25%;
  max-width: 25%;
}
.word_ordering .list_question .question_inner .box_answer {
  flex: 1 1 auto;
  height: 70px;
  padding: 0 15px;
}
@media (min-width: 992px) {
  .word_ordering .list_question .question_inner .box_answer {
    padding: 0 45px;
  }
}
.word_ordering .list_question .question_inner .box_answer input {
  font-size: 24px;
  text-align: center;
  background: #fff;
  border: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.word_ordering .list_question .question_inner .word_shuffle {
  background: url("../../../../../resources/images/book.png") center center no-repeat;
  background-size: contain;
  flex: 0 0 30%;
  max-width: 30%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 19.4%;
  margin: 0 -5px;
  position: relative;
}
.word_ordering .list_question .question_inner .word_shuffle .char {
  width: 15%;
  padding-top: 15%;
  position: absolute;
  opacity: 0;
  transition: 300ms ease-in-out;
}
.word_ordering .list_question .question_inner .word_shuffle .char span {
  border: 2px solid #010308;
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}

.gapfill_selectbox .list_question {
  font: 500 18px/150% "Baloo 2", cursive;
  text-align: justify;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 25px;
  padding: 3.5% 5.5%;
}
@media (min-width: 992px) {
  .gapfill_selectbox .list_question {
    font-size: 22px;
  }
}
.gapfill_selectbox .list_question .question_inner {
  padding: 5px 0;
}
.gapfill_selectbox .list_question select {
  font-weight: 700;
  text-align: center;
  color: #00164A;
  border: 2px solid #18EFED;
  border-radius: 50px;
  min-width: 130px;
  margin: 10px 0;
}

.gapfill_dragdrop_word .list_fill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 30px;
  margin: -30px;
  min-height: 58px;
}
.gapfill_dragdrop_word .list_fill .item_fill {
  font: 500 16px/1 "Baloo 2", cursive;
  background: #fff;
  border-radius: 50px;
  flex: 0 0 auto;
  min-width: 18%;
  min-height: 33px;
  padding: 10px 20px;
  margin: 5px;
}
@media (min-width: 992px) {
  .gapfill_dragdrop_word .list_fill .item_fill {
    font-size: 26px;
  }
}
.gapfill_dragdrop_word .list_question {
  text-align: justify;
  padding: 3% 5%;
}
.gapfill_dragdrop_word .list_question .question_inner {
  font: 400 14px/150% "Baloo 2", cursive;
}
@media (min-width: 992px) {
  .gapfill_dragdrop_word .list_question .question_inner {
    font-size: 22px;
  }
}
.gapfill_dragdrop_word .list_question .question_inner .item_cell {
  font: 500 12px/1 "Baloo 2", cursive;
  text-align: center;
  border-bottom: 1px dashed #00164A;
  min-width: 120px;
  min-height: 27px;
  display: inline-block;
}
@media (min-width: 992px) {
  .gapfill_dragdrop_word .list_question .question_inner .item_cell {
    font-size: 17px;
  }
}

.gapfill_autofill_letters .answer-pool {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.gapfill_autofill_letters .answer-pool .item {
  flex: 0 0 50%;
  min-width: 50%;
  display: table;
  padding: 9px 23px;
}
.gapfill_autofill_letters .answer-pool .item span {
  font: 400 14px/150% "Baloo 2", cursive;
  text-align: left;
  background: #fff;
  border-radius: 50px;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  padding: 10px 25px;
}
@media (min-width: 992px) {
  .gapfill_autofill_letters .answer-pool .item span {
    font-size: 22px;
  }
}
.gapfill_autofill_letters .list_question {
  text-align: left;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #fff;
  border-radius: 25px;
  padding: 25px 30px;
  margin: 20px 23px 0;
}
.gapfill_autofill_letters .list_question .question_inner {
  font: 400 14px/1 "Baloo 2", cursive;
}
@media (min-width: 992px) {
  .gapfill_autofill_letters .list_question .question_inner {
    font-size: 22px;
  }
}
.gapfill_autofill_letters .list_question .question_inner .type {
  font: 700 14px/150% "Baloo 2", cursive;
}
@media (min-width: 992px) {
  .gapfill_autofill_letters .list_question .question_inner .type {
    font-size: 22px;
  }
}
.gapfill_autofill_letters .list_question .question_inner:not(.example) + :not(.example) .type {
  display: none;
}
.gapfill_autofill_letters .list_question .question_inner.example + .example .type {
  display: none;
}
.gapfill_autofill_letters .list_question .question_inner.example .fill_in_box {
  border-bottom: 1px dashed #00164A;
  max-width: unset;
  max-height: unset;
}
.gapfill_autofill_letters .list_question .question_inner + .question_inner {
  padding-top: 15px;
}
.gapfill_autofill_letters .list_question .question_inner .name::first-letter {
  font-weight: 700;
}
.gapfill_autofill_letters .list_question .question_inner .fill_in_box {
  font: 400 14px/1 "Baloo 2", cursive;
  text-transform: uppercase;
  text-align: center;
  line-height: 100%;
  background: transparent;
  padding: 0;
}
@media (min-width: 992px) {
  .gapfill_autofill_letters .list_question .question_inner .fill_in_box {
    font-size: 22px;
  }
}
.gapfill_autofill_letters .list_question .question_inner .fill_in_box input {
  text-align: center;
  text-transform: uppercase;
  border: 1px dashed #00164A;
  border-radius: 50px;
  max-width: 128px;
  max-height: 38px;
  padding: 5px 10px;
}

.speaking .box_record {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.speaking .box_record .question {
  background: #fff;
  border-radius: 50px;
  flex: 0 0 50%;
  max-width: 50%;
  display: flex;
  align-items: center;
}
.speaking .box_record .question span {
  font: 700 14px/1 "Baloo 2", cursive;
  white-space: nowrap;
  padding-left: 20px;
  margin-right: auto;
}
@media (min-width: 992px) {
  .speaking .box_record .question span {
    font-size: 18px;
  }
}
.speaking .box_record .question audio {
  width: 337px;
  height: 41px;
  margin: 0;
}
.speaking .box_record .record {
  font: 700 14px/1 "Baloo 2", cursive;
  text-transform: uppercase;
  color: #fff;
  background: radial-gradient(circle, #ffc80c 20%, #ff8902 70%);
  flex: 0 0 30%;
  max-width: 30%;
  border-radius: 50px;
  display: flex;
  align-items: center;
}
@media (min-width: 992px) {
  .speaking .box_record .record {
    font-size: 17px;
  }
}
.speaking .box_record .record span {
  padding-left: 16px;
}
.speaking .box_record .btn {
  flex: 0 0 6.9%;
  max-width: 6.9%;
  padding: 0;
}

.img-descript {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -15px;
}
.img-descript .img {
  flex: 1 1;
  min-width: 50%;
  padding: 15px;
  margin: auto;
}
.img-descript .img img {
  border: 5px solid #fff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}
.img-descript .group_img {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  margin: 0 -7px;
}
@media (min-width: 992px) {
  .img-descript .group_img {
    flex: 1 1;
    min-width: 50%;
  }
}
.img-descript .group_img .img-small {
  flex: 1 1 auto;
  min-width: 25%;
  padding: 7px;
}
.img-descript .group_img .img-small .thumbnail {
  width: 100%;
  padding-top: 55%;
  position: relative;
  overflow: hidden;
}
.img-descript .group_img .img-small .thumbnail img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.img-descript .group_img .img-small .label {
  font: 400 12px/150% "Baloo 2", cursive;
  text-transform: uppercase;
  text-align: center;
  background: #fff;
  border-radius: 50px;
  display: block;
  margin-top: 15px;
}
@media (min-width: 992px) {
  .img-descript .group_img .img-small .label {
    font-size: 18px;
  }
}
.img-descript .descript {
  font: 400 20px/150% "Baloo 2", cursive;
  text-align: justify;
  color: #00164A;
  flex: 100%;
  max-width: 100%;
  padding: 0 15px;
  padding-bottom: 20px;
}
.img-descript .descript p {
  padding: 5px 0;
}

audio {
  border-radius: 50px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  width: 100%;
  max-width: 434px;
  display: block;
  margin: auto;
  margin-bottom: 45px;
  height: 40px;
}
@media (min-width: 601px) {
  audio {
    height: 53px;
  }
}
audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel {
  background-color: #fff;
  color: #000;
}
audio::-webkit-media-controls-timeline {
  background: #00EFF1;
  border-radius: 50px;
  padding: 0;
  margin: 0 10px;
}

.ul-select li {
  z-index: 2;
}
.ul-select li:not(.init) {
  float: left;
  width: 100%;
  display: none;
}
.ul-select li.init {
  cursor: pointer;
}

.text-transparent {
  color: transparent;
}/*# sourceMappingURL=cambridge_practice.css.map */