/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*# sourceMappingURL=style.css.map */

body, html {
    height: 100%;
}

.container {
    /* max-width: 980px; */
}

.page {
    padding-top: 40px;
    background-size: 100%;
    padding-bottom: 50px;
    background:#ddeaff;
    background-size: 100% auto;
}
@media (max-width: 768px){
    .page {
        padding: 20px 0;
    }
}

.left-question {
    /* border-radius: 2em; */
    background-color: #fff;
    height: 370px;
    margin-top: 10px;
    border: 1px solid #c2d9ff;
    text-align: center;
    border-radius: 8px;
}


.page-thi .container {
    padding-left: 0;
    padding-right: 0;
    min-height: 57.6vh;
}

@media (max-width: 991.98px){
    .left-question {
        height: auto!important;
        min-height: 100px
    }

    .page-thi .container {
        min-height: 69.6vh;
    }
}


.head-h2 {
    /* border-radius: 1em 1em 0 0; */
    padding: 10px 15px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    border-radius: 8px 8px 0 0;
    background: #0c61af;
}


.question-detail {
    font-size: 16px;
    padding: 15px 15px;
    font-weight: 500;
    text-align: left;
}

.choose {
    float: left;
    width: 80px;
    background-color: #52bdfe;
    height: 76px;
    border-radius: 8px 0 0 8px;
    line-height: 80px;
    font-size: 1.6rem!important;
    font-weight: bold!important;
    margin-right: 20px;
    color: #fff;
    text-align: center!important;
    text-transform: uppercase;
}
.choose.a {
    flex-shrink: 0;
    flex-basis: 80px;
    background:#bd0a0d;
}

.choose.b {
    background-image: linear-gradient(150deg, #c91818, #ff4040)
}

.choose.c {
    background-image: linear-gradient(150deg, #d9534f, #e16561)
}

.choose.d {
    background-image: linear-gradient(150deg, #ff7e00, #ffa247)
}

.select-swap {
    vertical-align: middle;
    padding-top: 10px;
}

.swatch-element {
    display: ;
    position: relative;
    vertical-align: bottom;
    background: #fff;
    /* border-radius: 1.5em 0 1.5em 0; */
    width: 100%;
    margin-bottom: 16px;
    border-radius: 8px;
}

.select-swap input {
    display: none;
}

.select-swap img {
    width: 22px;
    display: inline-block;
    border-radius: 100%;
    vertical-align: middle;
}

.swatch-element label {
    display: block;
    width: ;
    height: ;
    line-height: 20px;
    position: relative;
    padding-right: 15px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #333;
    display: flex;
    flex-direction: center;
    align-items: center;
    border: 1px solid #c2d9ff;
    border-radius: 8px;
}

.swatch-element.color label.sd {}

input[type=checkbox]:checked+label {
    background: transparent;
}

.size-choose {
    color: #fff;
    margin-top: 10px;
}

.color-inline {
    font-size: 16px;
    font-family: OpenSans-Semibold;
}

.choose-detail input[type=checkbox]:checked+label {
    background: #d8e9f5;
    width: 100%;
   /* height: 80px;*/
    /* border-radius: 1.5em 0 1.5em 0; */
    border: 2px solid #5ea8dc;
    margin-top: 0;
}

.answer-icon-check {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #0cb519;
    font-size: 24px;
    display: none;
}

.question-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    text-align: center;
    line-height: 28px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    float: left;
    margin-right: 10px;
    margin-top: 10px;
    border: 1px solid #0079ce;
    background-color: #1486d6;
}

.btn_question span.active {
    border: 2px solid #ef3434;
    background-color: #ff4343;
}

.btn_question span.checked {
       background-color: #44ad15;
    border-color: #2b8e03;
}

.next.button {
    border-radius: 5px;
    height: 40px;
    background: #4682d3;
    font-weight: bold;
    padding: 8px 15px;
    font-size: 15px;
    border: 1px solid #4682d3;
    color: #fff;
    margin-top: 20px;
}

.end.button {
    border: none;
    border-radius: 5px;
    height: 40px;
    background: #d10000;
    font-weight: bold;
    padding: 8px 15px;
    font-size: 15px;
    border: 1px solid #d10000;
    color: #fff;
    margin-top: 20px
}

.the-end {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-direction: center;
    flex-direction: center;
    align-items: center;
    -webkit-align-items: center;
    -webkit-flex-wrap: wrap;
    /* Safari */
    flex-wrap: wrap;
}

.heading-h1 {
    font-size: 20px;
    color: #d10000;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.sticky-time {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50px;
    height: 50px;
    border: 1px solid #343a40;
    border-radius: 50%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: fixed;
    z-index: 1030;
    top: 150px;
    right: 3%;
    background-color: #fff;
}

.sticky-time__number {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #dd2328;
    position: absolute;
    top: 35px;
    right: 3%;
    font-weight: bold;
    font-size: 20px;
}

.thi {
    border: none;
    border-radius: 10px;
    height: 50px;
    background-image: linear-gradient(0deg, #00aeef, #0097d6);
    font-weight: bold;
    padding: 10px 20px;
    font-size: 18px;
    border: 2px solid #fff;
    color: #fff;
    position: absolute;
    bottom: 60px;
    left: 45%;
    width: 150px;
}

.wrap-thi {
    max-width: 1100px;
    margin: 0 auto;
}

.img-thi {
    /**
    margin: 0 auto;
    background: url(../images/cuocthi1.png) no-repeat center center fixed;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;***/
  margin: 0 auto;
  text-align: center;
  padding: 0 15px
}

.img-thi img, .button-thi img {
 
}

.wrapbutton-thi {
    /* background-color: #ffeed4; */
    /**background: url(images/exams/cuocthi1_03.jpg) repeat-x #fcefc5;**/
    /* max-width: 1100px; */
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}

.wrapbutton-thi {
    /***display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content:         center;
  flex-direction: center;
  align-items: center;
  -webkit-align-items: center;****/
  margin-bottom: 40px;
  margin-top: 40px;
}

.wrap-thele {
    margin-top: 30px;
    background-color: #fff;
    border-radius: 20px;
    margin: auto;
    padding: 30px 25px;
    text-align: center;
    border: 1px solid #e5f4ff;
    display: -webkit-flex;
    /* Safari */
    /* display: flex; */
    flex-direction: column;
    -webkit-justify-content: center;
    /* Safari */
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    max-width: 850px;
}

.wrap-thele h2 {
    color: #d10000;
    font-weight: bold;
    font-size: 20px;
    padding-bottom: 20px;
}

.button-thi {
    border-radius: 10px;
    height: 50px;
    /* background-image: linear-gradient(0deg, #0097d6, #00aeef); */
    background: #d10000;
    font-weight: bold;
    padding: 10px 20px;
    font-size: 18px;
    color: #fff;
    border: none;
}

.wrap-thele .the-le {
    margin: auto;
    margin-bottom: 10px;
    text-align: left;
    font-weight: 500;
    max-width: 800px;
}

.ketqua {
    padding: 20px;
    background-color: #fff;
}

.h2-ketqua {
    font-weight: bold;
    text-align: center;
    padding-bottom: 15px;
    color: #dc0101;
    /* padding-top: 30px; */
    font-size: 24px;
    font-style: italic;
    line-height: 1.4
}

.table thead th {
    border-top: none;
}

.dung {
    color: #168800;
}

.sai {
    color: #e80000;
}

.text-right {
    float: right;
}

.text-left {
    float: left;
}

.tonghop {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    padding-bottom: 10px;
    text-align: center;
    display: flex;
     display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    align-content: stretch;
}


.tonghop .tongdiem {
    color: #0066b3;
    text-align: center;
    display: flex;
     display: -webkit-inline-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    align-content: stretch;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 15px;
}


.tongthoigian {
    width: 50%;
    color: #333;
}

.tonghop span {
    color: #d10000;
    font-size: 16px;
}

.hoanthanh {
    border: none;
    border-radius: 8px;
    background: #d10000;
    font-weight: bold;
    padding: 10px 25px;
    font-size: 18px;
    border: 2px solid #fff;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 200px;
}

.tongdiem_num {
    border: none;
    border-radius: 8px;
    background: #006ab4;
    font-weight: bold;
    line-height: 56px;
    font-size: 18px;
    border: 2px solid #fff;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 60px;
    width: 160px;
}
@media (max-width: 480px){
    .header-kq.vnpt{
        margin-top: 0;
    }
    .h2-ketqua{
        font-size: 18px;
        padding-bottom: 10px
    }
    .tonghop {
         /* flex-wrap: nowrap; */
    }
    .ketqua_wrap{
        padding: 15px;
    }
    .tonghop .tongdiem {
         margin-left: 10px;
        margin-right: 10px;
        font-size: 14px;
    }
    .tongdiem_num{
        height: 43px;
        width: 140px;
        line-height: 40px;

        font-size: 16px;
    }
}

.tongdiem_num.time_test{
    background:#dc0101;
}
.table>thead>tr>th {
    text-align: center;
}

.person-count {
    margin-bottom: 15px;
    color: #fff;
    font-size: 18px;
}

.the-end .control {
    text-align: right;
}

.person-count input[type="number"] {
    color: #ea3030;
    font-weight: 500;
}

.wrap-ketquathi {
    /* border-radius: 20px; */
    margin: auto;
    padding: 25px 0px;
    text-align: center;
    /* box-shadow: 0px 0px 8px #888; */
}

.ketqua-thi-ketqua .row {
    width: 100%
}

.wrap-thele.ketqua-thi-ketqua {
    box-shadow: 0px 0px 4px #ddd;
    padding: 10px;
    border-radius: 10px;
}

.wrap-ketquathi.tonghop-kq {
    padding: 10px 0px;
}

.page.page-ketqua {
    padding-top: 20px;
}

.page.page-ketqua {
    background: #fff;
    padding-bottom: 30px;
    background-size: 100% auto;
}

.vnpt{
  text-align: center;
      border: 1px solid #0066b3;
    padding: 5px 10px;
    border-radius: 10px;
    margin-top: 20px;


@media (max-width: 768px) {
    .header-kq {
        /* float: left !important; */
        margin-top: 10px;
    }
}

.page-ketqua img {
    max-width: 100%;
}

@media (max-width: 768px) {
    .tonghop .tongdiem {
        width: 100%;
    }
}

.end-quiz{
    margin-top: 50px;
}

.question_cauhoiphu .left-question{

}
.end-quiz{
    margin-top: 30px;
}
.dapan-upper{
    text-transform: uppercase;
}
textarea:focus{
    border: 1px solid #d83a3a;
}