#app {
    --f7-navbar-height: 36px;
    --f7-button-height: 30px
}

.page-home {
    overflow: hidden;
}

#div-main .page-home.mobile {
    padding: 0;
}

#div-main .page-home .dapan .col.col-md-6 {
    font-size: 11pt;
    /*padding: 10px 10px 2px 5px;*/
    text-align: justify;
    /*border-radius: 10px;*/
    border-bottom: solid 1px;
    border-image-source: -webkit-linear-gradient(left, #fff, #aaa, #fff);
    border-image-slice: 1;
}

#bt-nopbai-end {
    padding: 0;
    margin-left: 10px;
}

.ios .navbar .right{
    margin-left: 0;
}

#div-main .page-home .dapan {
    /*border-top: solid 1px #ccc;*/
    margin-top: 5px;
    overflow-y: auto;
}

.swiper-slide {
    -webkit-align-items: start !important;
    align-items: start !important;
}

    #div-main .page-home .noidungcauhoi p {
        font-size: 12pt;
        text-align: justify;
        margin: 0;
        color: #3a0000;
        font-weight: bold;
    }

#div-main .page-home .noidungcauhoi {
    box-shadow: inset 0 0 5px #043e63;
    padding: 10px;
    margin-top: 5px;
    overflow: hidden;
    min-height:150px;
    max-height:90vh;
}

    #div-main .page-home .noidungcauhoi div {
        margin-bottom: 5px;
        height: 100%;
        overflow-y: auto;
        width: 100%;
    }


button.bt-slider {
    border-radius: 5px;
    background: #0b649c;
    color: #fff;
    opacity: 1;
    text-align: center;
    width: 100%;
}

button.bt-slider-center {
    background: #aaa;
}

.navbar.navbar-large-transparent {
    --f7-bars-bg-color-rgb: rgb(3, 109, 107) !important;
    background: rgb(0, 113, 115);
    padding: 0;
}

.swiper-wrapper .dapan label {
    color: #003756;
    font-weight: bold;
}

.dapan img {
    max-width: max-content;
}

.div-radio-dapan {
    text-align: center;
    padding: 0;
}

.noidungcauhoi b {
    color: #005aff;
    font-size: 15pt;
}

#div-main .navbar .right {
    font-size: 9pt;
    text-align: right;
}


#div-left #div-cauhoi div.hidden {
    display: none;
}

.panel {
    max-width: 70%;
}

.navbar-inner .right div p {
    margin: 2px 0;
}

#div-left .block-title {
    color: #008488;
    font-size: 14pt;
    margin: 0;
}

#bt-xemlai.xemlai {
    background: #c03e07;
}

#div-nopbai {
    padding-top: 5px;
}

#bt-nopbai {
    padding: 3px 5px;
    max-width: max-content;
    background: #007173;
    color: #fff;
}

#div-fillter .col-fillter {
    padding-left: 10px;
    padding-top: 5px;
}

#div-left #div-parent-cauhoi {
    margin-top: 10px;
    border-top: solid 2px #ccc;
    border-image-source: -webkit-linear-gradient(left, #fff, #008488, #fff);
    border-image-slice: 1;
    margin-bottom: 5px;
    padding: 5px 0 0 0;
    height: calc(100% - 100px);
    max-height: 100%;
    overflow: auto;
}

#div-left {
    height: calc(100% - 100px);
    max-height: 100%;
}

#div-parent-cauhoi {
    overflow-y: auto;
}

span.sp-doanvan {
    color: #444;
}

button#bt-slider-left:hover, button#bt-slider-right:hover, button#bt-xemlai:hover {
    cursor: pointer;
}

#i-time{
    margin-left: 10px;
}

#div-viettest.mobile{
    padding: 0;
}

b.b-dapan-left {
    padding-left: 20%;
}

/*Kết quả làm bài*/
div#div-ketquabailam {
    overflow-y: auto;
    background: #666;
}

div#div-content-ketquabailam {
    height: auto;
    background: #fff;
    width: 90%;
    margin: 5px auto;
    padding: 15px 30px;
}

div#div-cauhoi-bailam {
    width: 85%;
    margin: 0 auto;
}

    div#div-content-ketquabailam p {
        margin: 5px 0;
    }

p.p-cauhoi-view {
    font-weight: bold;
}

    p.p-cauhoi-view b {
        font-style: italic;
    }

p#p-mon-kq {
    text-align: center;
    padding-top: 20px;
    font-size: 15pt;
    font-weight: bold;
}

p#p-bai-kq {
    text-align: center;
    font-size: 17pt;
    font-weight: bold;
}

#div-content-ketquabailam.mobile{
    padding: 10px 5px;
    width: 95%;
}

#div-main .navbars {
    position: relative;
}

#div-main .navbar.navbar-large-transparent.navbar-current {
    position: relative;
}


/*Slidebar*/
#div-viettest .wrapper {
    display: block;
}

#div-viettest #div-left {
    min-width: 250px;
    position: absolute;
    display: none;
    z-index: 9999;
    background: #fff;
    
}

    #div-viettest #div-left.active {
        display: block !important;
        -webkit-animation: slide-right .5s ease-out;
        -moz-animation: slide-right .5s ease-out;
    }

#div-viettest .overlay {
    display: none;
    position: fixed;
    /* full screen */
    width: 100vw;
    height: 100vh;
    /* transparent black */
    background: rgba(0, 0, 0, 0.2);
    /* middle layer, i.e. appears below the sidebar */
    z-index: 998;
    opacity: 0;
    /* animate the transition */
    transition: all 0.5s ease-in-out;
}
    /* display .overlay when it has the .active class */
    #div-viettest .overlay.active {
        display: block;
        opacity: 1;
    }

#div-viettest #dismiss {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 5px;
    right: -10px;
    z-index: 2;
}


#div-cauhoi div {
    text-align: center;
    border-image-source: -webkit-linear-gradient(left, #fff, #a0a2a2, #fff);
    border-image-slice: 1;
    border-bottom: solid 1px;
    padding: 5px;
    cursor: pointer;
    display:flex;
}

    #div-cauhoi div a {
        border-radius: 10px;
        padding: 5px;
        width: 100%;
        justify-content: space-evenly;
        color: #000;
    }
        #div-cauhoi div a:hover {
            text-shadow: 1px 1px 3px gray;
            text-decoration: underline;
            background-color: #d2ffe7;
            background-image: linear-gradient(45deg, #d2ffe7 0%, #fff9d2 100%);
        }

    #div-cauhoi div a.dalam {
        color: #0381c7;
    }

    #div-cauhoi div a.xemlai {
        border: 1px solid #c03e07;
    }
        #div-cauhoi div a.thaydoi {
            color: #219C90;
        }

#div-cauhoi-bailam.mobile table{
    width: auto !important;
}

#br-thongbao-luubai {
    display: none;
}

#div-cauhoi-bailam span.dapan-chon {
    border: solid 2px;
    border-radius: 50%;
    padding: 0px 5px;
}

.noidungcauhoi img {
    width: auto !important;
    position: initial !important;
}

@-webkit-keyframes slide-right {
    0% {
    opacity: 0;
    /*-webkit-transform: translateX(-10%);*/
}

100% {
    opacity: 1;
    /*-webkit-transform: translateX(0);*/
}
}

@-moz-keyframes slide-right {
    0% {
        opacity: 0;
        /*-moz-transform: translateX(-10%);*/
    }

    100% {
        opacity: 1;
        /*-moz-transform: translateX(0);*/
    }
}

@media only screen and (min-width: 320px) {
    #br-thongbao-luubai {
        display: block;
    }

    #sp-thongbao-luubai {
        font-size: 7pt;
    }
}

@media only screen and (min-width: 568px) {
    #div-left {
        width: 95%;
        max-width: 95%;
    }

    #br-thongbao-luubai {
        display: none;
    }

}

@media only screen and (min-width: 768px) {
    #div-left {
        width: 85%;
        max-width: 85%;
    }
    #sp-thongbao-luubai {
        font-size: 11pt;

    }
}

@media only screen and (min-width: 1024px) {
    #div-left {
        width: 60%;
        max-width: 60%;
    }
}

@media only screen and (min-width: 1200px) {
    #div-left {
        width: 55%;
        max-width: 55%;
    }
}

/*Mobile*/
@media only screen and (max-width: 1200px) {
    #div-left {
        width: 60%;
        max-width: 60%;
    }
}

@media only screen and (max-width: 1024px) {
    #div-left {
        width: 70%;
        max-width: 70%;
    }
}

@media only screen and (max-width: 768px) {
    #div-left {
        width: 80%;
        max-width: 80%;
    }
}

@media only screen and (max-width: 568px) {
    #div-left {
        width: 90%;
        max-width: 90%;
    }

    #br-thongbao-luubai{
        display: block;
    }

    #sp-thongbao-luubai {
        font-size: 7pt;
    }
}

.tracnghiem-swiper {
    height: 100%;
}

.swiper-wrapper {
    height: 100%;
}

.owl-stage-outer {
    height: 100%;
}

.owl-stage {
    height: 100%;
}

.owl-item {
    height: 100%;
    padding: 1px 3px;
}

.tvslider {
    display: grid;
    height: 100%;
    grid-row-gap: 5px;
}

.dapanzone {
    border: 1px solid #0b649c;
    border-radius: 10px;
    min-height: 120px;
    width: 100%;
    overflow: auto;
    background: white !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

.swiper-slide {
    height: 100%;
}

[contenteditable][placeholder]:empty:before {
    content: attr(placeholder);
    position: absolute;
    color: gray;
    background-color: transparent;
}

.tv-imgloading {
    background-color: #f4f9fa36;
}

.tv-dapan {
    border-bottom: 1px solid transparent;
    border-radius: 10px;
    user-select: none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 0px;
    width: 100%;
    overflow-wrap: anywhere;
}

    .tv-dapan:hover {
        border-bottom: 1px solid #32a1ce;
    }

.tv-dapan-chon {
    border-left: 2px solid green;
}

.tv-cauhoi {
    border: 1px solid #0b649c;
    border-radius: 10px;
    padding: 7px;
    margin-top: 5px;
    overflow: auto;
    min-height: 150px;
    width: 100%;
    margin-bottom: 3px;
    overflow-wrap: break-word;
    background: white !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

*:focus {
    outline: none;
}

.tv-radio-tn {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    height: 30px;
    width: 30px;
    transition: all 0.5s ease-out 0s;
    background: gray;
    border: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0.5rem;
    outline: none;
    position: relative;
    z-index: 1000;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    box-shadow: inset 1px 1px 1px black;
}

    .tv-radio-tn.radio {
        border-radius: 50%;
        font-size: 18px !important;
        line-height: 30px;
        text-align: center;
    }

    .tv-radio-tn:checked {
        background: #32a1ce;
        font-weight: 600;
        text-shadow: 2px 2px 3px #343a40;
        box-shadow: 2px 2px 3px #055accad;
    }

        .tv-radio-tn:checked::before {
           
        }

        .tv-radio-tn:checked::after {
            -webkit-animation: click-wave 0.8s;
            -moz-animation: click-wave 0.8s;
            animation: click-wave 0.8s;
        }

.tv-da-A::before {
    content: 'A';
}

.tv-da-B::before {
    content: 'B';
}

.tv-da-C::before {
    content: 'C';
}

.tv-da-D::before {
    content: 'D';
}
#divMenuBar span {
    white-space: nowrap;
}
span {
    white-space: pre-wrap;
}

.tv-da {
    border: 1px solid lightgray;
    border-radius: 50px;
    min-width: 30px;
    min-height: 30px;
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    user-select: none;
    box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    cursor:pointer;
    margin-right:10px;
}

    .tv-da:hover {
        border: 1px solid;
        box-shadow: 1px 1px 4px -2px;
    }
.doanvan-chon {
    color: blue !important;
    font-weight: bold;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

.panel-close {
    border: 1px solid transparent;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-weight: 700;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .slider.chualam:before {
        width: 52px !important;
        content: "Chưa chọn";
        font-size: 10px !important;
        font-weight: 400;
        align-content: center;
        text-align: center;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 25px;
    }
.switch-head {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 10px;
    font-weight: bold;
    flex-wrap: nowrap;
    text-wrap: nowrap;
}