.color-theme-olm-1 {
    --theme-color: #6868ad;
    --theme-color-rgb: 179,162,220;
    --theme-color-shade: #9293ba;
    --theme-color-tint: #a5a8da;
    --theme-color-one: #d77e70;
    --theme-color-two: #d65078;
    --theme-color-three: #ecc371;
    --theme-color-four: #85a1ac;
    --theme-color-five: #3e3f66 --theme-color-six:#ffedb3
}

.color-theme-olm-2 {
    --theme-color: #50509a;
    --theme-color-rgb: 179,162,220;
    --theme-color-shade: #5757b5;
    --theme-color-tint: #58589d;
    --theme-color-one: #bc594a;
    --theme-color-two: #d93d66;
    --theme-color-three: #f08e38;
    --theme-color-four: #5b6a6f;
    --theme-color-five: #3e3f66;
    --theme-color-six: #ffedb3;
    --them-color-seven: #df95a8
}
.olm-text-seven {
    color: var(--them-color-seven)
}
.btn:hover:not(.not-hover) {
    color: #fff
}
.olm-bg-one {
    background-color: var(--theme-color-one)
}

.olm-bg-two {
    background-color: var(--theme-color-two)
}

.olm-bg-three {
    background-color: var(--theme-color-three)
}

.olm-bg-four {
    background-color: var(--theme-color-four)
}

.olm-bg-five {
    background-color: var(--theme-color-five)!important
}

.olm-bg-six {
    background-color: var(--theme-color-six)!important
}
.olm-btn-one {
    background-color: var(--theme-color-one);
    border-color: var(--theme-color-one);
    color: #fff
}

.olm-btn-two {
    background-color: var(--theme-color-two);
    border-color: var(--theme-color-two);
    color: #fff
}

.olm-btn-three {
    background-color: var(--theme-color-three);
    border-color: var(--theme-color-three);
    color: #fff
}

.olm-btn-four {
    background-color: var(--theme-color-four);
    border-color: var(--theme-color-four);
    color: #fff!important
}
.olm-btn-outline-one {
    border-color: var(--theme-color-one)!important;
    color: var(--theme-color-one)!important
}

.olm-btn-outline-one:hover {
    background-color: var(--theme-color-one)!important;
    border-color: var(--theme-color-one)!important;
    color: #fff!important
}

.olm-btn-outline-two {
    border-color: var(--theme-color-two)!important;
    color: var(--theme-color-two)!important
}

.olm-btn-outline-two:hover {
    background-color: var(--theme-color-two)!important;
    border-color: var(--theme-color-two)!important;
    color: #fff!important
}

.olm-btn-outline-three {
    border-color: var(--theme-color-three)!important;
    color: var(--theme-color-three)!important
}

.olm-btn-outline-three:hover {
    background-color: var(--theme-color-three)!important;
    border-color: var(--theme-color-three)!important;
    color: #fff!important
}

.olm-btn-outline-four {
    border-color: var(--theme-color-four)!important;
    color: var(--theme-color-four)!important
}

.olm-btn-outline-four:hover {
    background-color: var(--theme-color-four)!important;
    border-color: var(--theme-color-four)!important;
    color: #fff!important
}

.olm-btn-outline-primary {
    border-color: var(--theme-color)!important;
    color: var(--theme-color)!important
}

.olm-btn-outline-primary:hover {
    background-color: var(--theme-color)!important;
    border-color: var(--theme-color)!important;
    color: #fff!important
}

.olm-kindergarten-text {
    color: var(--theme-color-one)!important
}

.olm-kindergarten-bg {
    background-color: var(--theme-color-one)!important
}

.olm-kindergarten-border {
    border-color: var(--theme-color-one)!important
}

.nav-tabs li a.active.olm-kindergarten-text {
    border-bottom: 2px solid var(--theme-color-one)!important;
    color: var(--theme-color-one)!important
}

.olm-primary-school-text {
    color: var(--theme-color-two)!important
}

.olm-primary-school-bg {
    background-color: var(--theme-color-two)!important
}

.olm-primary-school-border {
    border-color: var(--theme-color-two)!important
}

.nav-tabs li a.active.olm-primary-school-text {
    border-bottom: 2px solid var(--theme-color-two)!important;
    color: var(--theme-color-two)!important
}

.olm-secondary-school-text {
    color: var(--theme-color-three)!important
}

.olm-secondary-school-bg {
    background-color: var(--theme-color-three)!important
}

.olm-secondary-school-border {
    border-color: var(--theme-color-three)!important
}

.nav-tabs li a.active.olm-secondary-school-text {
    border-bottom: 2px solid var(--theme-color-three)!important;
    color: var(--theme-color-three)!important
}

.olm-high-school-text {
    color: var(--theme-color-four)!important
}

.olm-high-school-bg {
    background-color: var(--theme-color-four)!important
}

.olm-high-school-border {
    border-color: var(--theme-color-four)!important
}

.nav-tabs li a.active.olm-high-school-text {
    border-bottom: 2px solid var(--theme-color-four)!important;
    color: var(--theme-color-four)!important
}

.sub-header {
    background-color: var(--theme-color-tint)
}

.attention-box {
    background-color: #fae5ea!important;
    border: 3px solid var(--theme-color-two)!important;
    border-radius: 5px!important;
    color: var(--theme-color-two)!important
}

.attention-box,.attention-box-2 {
    font-size: 18px;
    padding: 10px!important
}

.attention-box-2 {
    background-color: #f0f8ff!important;
    border: 3px solid #1e90ff!important;
    border-radius: 5px!important;
    color: #1e90ff!important
}
.home-icon-statistics {
    color: var(--theme-color-two)
}
.border-box-fun-math {
    border-color: var(--theme-color-three)!important
}
.border-box-fun-literature {
    border-color: var(--theme-color-one)!important
}
.border-box-fun-eng {
    border-color: var(--theme-color-two)!important
}

.badge-olm {
    background-color: var(--theme-color-one);
    color: #fff
}

.olm-logo span {
    padding-left: 3px
}

.olm-logo .o {
    color: var(--theme-color-one)
}

.olm-logo .l {
    color: var(--theme-color)
}

.olm-logo .m {
    color: var(--theme-color-two)
}

.olm-logo .v {
    color: var(--theme-color-three)
}

.olm-logo .n {
    color: var(--theme-color-four)
}

.olm-a:not(.active):hover {
    color: var(--theme-color)!important
}

#crumbs ul li a {
    background-color: var(--theme-color)!important
}

#crumbs ul li a:hover {
    background-color: var(--theme-color-three)!important
}

#crumbs ul li a:hover:after {
    border-left-color: var(--theme-color-three)!important
}

#crumbs ul li a:after {
    border-left-color: var(--theme-color)!important
}

.dropdown-item.active:not(.not-active),.dropdown-item:active:not(.not-active) {
    background: var(--theme-color)!important;
    color: #fff!important;
    text-decoration: none
}

.page-link {
    background-color: #fff;
    color: var(--theme-color)
}

.page-link.active,.page-link:focus:not(.not-focus),.page-link:hover:not(.not-hover) {
    color: var(--theme-color)!important
}

.page-item.active .page-link {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff
}

.page-item.active .page-link.active,.page-item.active .page-link:focus:not(.not-focus),.page-item.active .page-link:hover:not(.not-hover) {
    color: #fff!important
}

.box-timecount-exam,.box-timecount-practice {
    background: #a0aede!important;
    background: radial-gradient(ellipse at center,#a0aede,#a0aede)!important;
    border: 1px solid #a0aede!important;
    color: var(--theme-color)!important
}

.itemx .quizx,.qholder {
    border: 1px solid #ccc!important
}

.school-nav-tabs li a.active {
    border-bottom: 2px solid var(--theme-color)!important;
    color: var(--theme-color)!important
}

.olm-tabs li a {
    color: #495057!important
}

.olm-tabs li a.active {
    border-bottom: 2px solid var(--theme-color)!important;
    color: var(--theme-color)!important
}

.title-category {
    border-left: 4px solid var(--theme-color)!important
}

.olm-alert-primary {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff
}

.olm-alert-one {
    background-color: var(--theme-color-one);
    border-color: var(--theme-color-one);
    color: #fff
}

.olm-alert-two {
    background-color: var(--theme-color-two);
    border-color: var(--theme-color-two);
    color: #fff
}

.olm-alert-three {
    background-color: var(--theme-color-three);
    border-color: var(--theme-color-three);
    color: #fff
}

.olm-alert-four {
    background-color: var(--theme-color-four);
    border-color: var(--theme-color-four);
    color: #fff
}

.olm-alert-five {
    background-color: var(--theme-color-five);
    border-color: var(--theme-color-five);
    color: #fff
}

.form-group .input-wrapper.active .label {
    color: var(--theme-color)!important
}

.form-group .form-control:focus:not(.not-hover) {
    border-bottom-color: var(--theme-color)!important;
    box-shadow: inset 0 -1px 0 0 var(--theme-color)!important
}

.appBottomMenu .item.active ion-icon,.appHeader.scrolled.bg-primary .headerButton {
    color: var(--theme-color)!important
}

.profileBox {
    background-color: var(--theme-color)!important
}

.extraHeader.page-home {
    background-color: var(--theme-color-three)
}

.appHeader.scrolled.bg-primary.is-active {
    background-color: var(--theme-color-tint)!important
}

.nav-tabs.lined .nav-item .nav-link.active {
    background: transparent;
    border-bottom-color: var(--theme-color)!important;
    color: var(--theme-color)!important
}

.box-timecount-practice .timecount-exam {
    color: var(--theme-color)!important
}

.box-timecount-exam .timecount-exam {
    color: var(--theme-color-five)!important
}

.custom-nav-pills .nav-link.active,.custom-nav-pills .show>.nav-link {
    background-color: #f7f8fa!important;
    color: var(--theme-color)!important
}

.timeline-badge.primary {
    background-color: #fff!important
}

.wizard li.active span.round-tab {
    background: var(--theme-color)!important;
    border-color: var(--theme-color)!important
}

.wizard .nav-tabs>li.active>a i {
    color: var(--theme-color)!important
}

.custom-list-group .list-group-item:hover {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    color: #fff
}

.custom-list-group .list-group-item.active {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    color: var(--theme-color);
    font-size: 20px;
    font-weight: 700
}
.webview-nav-link.active {
    background-color: #fff;
    border-bottom: 3px solid var(--theme-color)!important;
    border-left: none;
    border-right: none;
    border-top: none;
    border-color: var(--theme-color)!important;
    color: var(--theme-color)!important
}

.webview-nav-link {
    color: var(--theme-color-four)!important
}

@media print {
    .no-print {
        display: none
    }

    .itemx {
        border: unset;
        border-radius: 0;
        margin-bottom: 5px;
        padding: 0
    }
}

@media (max-width: 1400px) {
    .coming-soon-card,.login-card {
        padding-bottom:0!important;
        padding-top: 0!important
    }
}
label.required :after {
    content: "*"
}
.xscore img {
    width: 10px
}
.main-wrap .main-wrap-body {
    min-height: 100vh
}
.scroll-bar:hover::-webkit-scrollbar {
    display: block
}

.scroll-bar::-webkit-scrollbar {
    display: none;
    width: 12px
}

.scroll-bar::-webkit-scrollbar-track {
    border-radius: 10px
}

.scroll-bar::-webkit-scrollbar-thumb {
    background-clip: content-box;
    border: 2px solid transparent;
    border-radius: 10px
}
.comment-block {
    line-height: 1.6em
}

.comment-block .item {
    align-items: flex-start;
    display: flex;
    margin-bottom: 30px
}

.comment-block .item:last-child {
    margin-bottom: 0
}

.comment-block .item .avatar {
    margin-right: 14px
}

.comment-block .item .in {
    width: 100%
}

.comment-block .item .comment-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px
}

.comment-block .item .comment-header .title {
    margin: 0;
    padding-right: 10px
}

.comment-block .item .comment-footer {
    align-content: flex-start;
    display: flex;
    margin-top: 10px
}

.comment-block .item .comment-footer .comment-button {
    align-content: center;
    display: flex;
    margin-right: 14px
}

.comment-block .item .comment-footer .comment-button i.icon,.comment-block .item .comment-footer .comment-button ion-icon {
    font-size: 18px;
    line-height: 1em;
    margin-right: 5px
}

.comment-box {
    padding: 24px 16px;
    text-align: center
}

.comment-box .imaged {
    margin: 0 auto 10px
}

.comment-box .card-title {
    margin: 0
}

.comment-box .text {
    margin-top: 6px
}

.modal>.modal-content>.close {
    font-size: 1.8rem;
    top: 14px
}

#back-to-group-modal {
    font-size: 1.2rem
}
.footer-wrapper p {
    font-size: 16px!important;
    width: 100%!important
}

.sidebar-list-grade li a {
    align-items: center;
    color: #444;
    display: flex;
    font-size: 15px;
    height: 45px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    white-space: nowrap
}

.sidebar-list-grade li a,.sidebar-list-grade li a span {
    font-weight: 600;
    line-height: 28px;
    transition: all .2s ease
}

.sidebar-list-grade li a span {
    font-size: 16px;
    margin-right: auto;
    padding-right: 10px
}

.sidebar-list-grade li a.active {
    background: linear-gradient(135deg,var(--theme-color),var(--theme-color-shade))!important;
    border-radius: 5px;
    color: #fff
}

.sidebar-list-grade li a i {
    font-size: 10px;
    position: relative;
    top: 1px
}

.sidebar-right-list-grade li a {
    align-items: center;
    color: #444;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    height: 45px;
    line-height: 28px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    transition: all .2s ease;
    white-space: nowrap
}

.sidebar-right-list-grade li a span {
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    margin-right: auto;
    padding-right: 10px;
    transition: all .2s ease
}

.sidebar-right-list-grade li a {
    padding-left: 0
}

.sidebar-right-list-grade li a i {
    font-size: 16px;
    margin-right: 10px;
    position: relative;
    top: 1px
}

#accordion-course>.card:not(:first-of-type) {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

#accordion-course>.card:not(:last-of-type) {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

#accordion-course h3,#accordion-course h5 {
    cursor: pointer
}

#accordion-course .collapsible-link:before {
    background: #333;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    right: 0;
    top: calc(50% - 1px);
    transition: all .3s;
    width: 14px
}

#accordion-course .collapsible-link:after {
    background: #333;
    content: "";
    display: block;
    height: 14px;
    position: absolute;
    right: 6px;
    top: calc(50% - 7px);
    transition: all .3s;
    width: 2px
}

#accordion-course .collapsible-link[aria-expanded=true]:after {
    transform: rotate(90deg) translateX(-1px)
}

#accordion-course .collapsible-link[aria-expanded=true]:before {
    transform: rotate(180deg)
}
.h-fit {
    height: -moz-fit-content;
    height: fit-content
}

.font-tieuhoc {
    font-family: TieuHoc
}

#crumbs ul {
    display: inline-flex;
    height: auto;
    list-style: none;
    margin-bottom: 10px;
    white-space: nowrap;
    width: 100%
}

#crumbs ul li {
    display: inline
}

#crumbs ul li:first-child a {
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    padding: 0 0 0 17px
}

#crumbs ul li:first-child a:before {
    display: none
}

#crumbs ul li:last-child a {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding-right: 20px
}

#crumbs ul li:last-child a:after {
    display: none
}

#crumbs ul li a {
    background: #f3f6ab;
    color: #fff;
    display: block;
    float: left;
    font-size: 20px;
    margin: 0 10px 0 0;
    padding: 0 10px 0 30px;
    position: relative;
    text-align: center;
    text-decoration: none
}

#crumbs ul li a:hover {
    background: #357dfd;
    color: #fff
}

#crumbs ul li a:hover:after {
    border-left-color: #357dfd;
    color: #fff
}

#crumbs ul li a:after {
    border-bottom: 15px solid transparent;
    border-left: 20px solid #f3f6ab;
    right: -20px;
    z-index: 1
}

#crumbs ul li a:after,#crumbs ul li a:before {
    border-top: 20px solid transparent;
    content: "";
    position: absolute;
    top: 0
}

#crumbs ul li a:before {
    border-bottom: 20px solid transparent;
    border-left: 20px solid #fff;
    left: 0
}

#crumbs ul li a .bc-logo {
    height: 28px;
    left: 3px;
    margin-right: 5px;
    top: 2px;
    width: 35px
}

#crumbs ul li a div {
    max-width: 19vw;
    overflow: hidden;
    text-overflow: ellipsis
}

.tabs-1 {
    display: flex
}

.tabs-1>ul {
    border-bottom: 1px solid rgba(0,0,0,.2);
    font-weight: 500;
    padding: 0;
    position: relative;
    z-index: 1
}

.tabs-1>ul>li {
    display: inline-block;
    margin: 0 .5px 0 -4px;
    padding: .6em .8em;
    position: relative
}

.tabs-1>ul>li:after,.tabs-1>ul>li:before {
    opacity: 0;
    transition: .3s ease
}

.tabs-1>ul>li.active:after,.tabs-1>ul>li.active:before,.tabs-1>ul>li:focus:after,.tabs-1>ul>li:focus:before,.tabs-1>ul>li:hover:after,.tabs-1>ul>li:hover:before {
    opacity: 1
}

.tabs-1>ul>li.active:focus:before,.tabs-1>ul>li.active:hover:before,.tabs-1>ul>li:before {
    border-radius: 100px/10px;
    bottom: 0;
    box-shadow: 0 2px 3px rgba(22,195,255,.5);
    content: "";
    left: 5px;
    position: absolute;
    right: 5px;
    top: 50%;
    z-index: -1
}

.tabs-1>ul>li.active:focus:after,.tabs-1>ul>li.active:hover:after,.tabs-1>ul>li:after {
    background: #fafafa;
    bottom: -6px;
    box-shadow: inset 3px 3px 3px rgba(22,195,255,.5),inset 1px 1px 1px rgba(0,0,0,.3);
    content: "";
    height: 12px;
    left: 50%;
    margin-left: -6px;
    position: absolute;
    transform: rotate(45deg);
    width: 12px
}

.tabs-1>ul>li:focus:before,.tabs-1>ul>li:hover:before {
    box-shadow: 0 2px 3px rgba(0,0,0,.2)
}

.tabs-1>ul>li:focus:after,.tabs-1>ul>li:hover:after {
    box-shadow: inset 3px 3px 3px rgba(0,0,0,.2),inset 1px 1px 1px rgba(0,0,0,.3)
}

.tabs-1>ul>li:focus a {
    text-decoration: underline
}

.tabs-1>ul>li:focus {
    outline: none
}

.tabs-1>ul>li a {
    color: #444;
    text-decoration: none
}

.tabs-1>ul>li a:focus {
    outline: none
}

.tabs-1>ul>li a span {
    position: relative;
    top: -.5em
}

#question-static {
    margin: 0 auto;
    max-width: 70%;
    padding-left: 0
}

.hover-zoom-img {
    height: 60px;
    width: 60px
}

.hover-zoom-img:hover {
    height: 100px;
    width: 100px
}

.olm-ads {
    margin-bottom: 10px;
    margin-top: 10px
}

.sticky-top {
    top: 85px
}
.link-underline:hover {
    text-decoration: underline!important
}