.color-theme-olm {
    --theme-color: #005292;
    --theme-color-rgb: 179, 162, 220;
    --theme-color-shade: #065eac;
    --theme-color-tint: #065eac;
    --theme-color-one: #bc594a;
    --theme-color-two:  #D93D66;
    --theme-color-three: #f48220;
    --theme-color-four: #5b6a6f;
    --theme-color-five: #3E3F66;
    --theme-color-six: #ffedb3;
    --theme-color-seven: #df95a8;
    --theme-color-eight: #eceff8;
}

.color-theme-df {
    --theme-color: #575791;
    --theme-color-rgb: 179, 162, 220;
    --theme-color-shade: #6E6EB8;
    --theme-color-tint: #6868AC;
    --theme-color-one: #bc695c;
    --theme-color-two: #D93D66;
    --theme-color-three: #F29849;
    --theme-color-four: #878f92;
    --theme-color-five: #3E3F66;
    --theme-color-six: #ffedb3
}

.olm-primary-border {
    border-color: var(--theme-color)
}

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

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

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

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

.olm-text-primary {
    color: var(--theme-color)
}

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

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

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

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

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

a.olm-text-link:hover:not(.not-hover),
a.olm-text-link:focus:not(.not-focus),
a.olm-text-link.active {
    color: var(--theme-color-five) !important
}

a.olm-text-primary:hover:not(.not-hover),
a.olm-text-primary:focus:not(.not-focus),
a.olm-text-primary.active {
    color: var(--theme-color-five) !important
}

.btn:hover:not(.not-hover) {
    color: #fff
}

.olm-bg-primary {
    background-color: var(--theme-color) !important;
    color: #fff !important
}

.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-primary {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
    color: #fff !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
}

.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 var(--theme-color-one) solid !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 var(--theme-color-two) solid !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 var(--theme-color-three) solid !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 var(--theme-color-four) solid !important;
    color: var(--theme-color-four) !important
}

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

.content-hot-news a {
    color: #fff !important
}

.home-icon-statistics {
    color: var(--theme-color-two)
}

.bg-header-box-fun-math {
    color: #fff !important;
    background-color: var(--theme-color-three) !important
}

.border-box-fun-math {
    border-color: var(--theme-color-three) !important
}

.bg-header-box-fun-literature {
    color: #fff !important;
    background-color: var(--theme-color-one) !important
}

.border-box-fun-literature {
    border-color: var(--theme-color-one) !important
}

.bg-header-box-fun-eng {
    color: #fff !important;
    background-color: var(--theme-color-two) !important
}

.border-box-fun-eng {
    border-color: var(--theme-color-two) !important
}

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

.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 {
    color: #fff;
    background-color: var(--theme-color) !important
}

#crumbs ul li a:hover {
    color: #fff;
    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) {
    color: #fff !important;
    text-decoration: none;
    background: var(--theme-color) !important
}

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

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

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

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

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

.qholder,
.itemx .quizx {
    border: 1px solid var(--theme-color-one) !important
}

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

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

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

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

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

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

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

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

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

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

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

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

.appHeader.scrolled.bg-primary .headerButton {
    color: var(--theme-color) !important
}

.appBottomMenu .item.active ion-icon {
    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 {
    color: var(--theme-color) !important;
    background: transparent;
    border-bottom-color: var(--theme-color) !important
}

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

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

@media print {
    .no-print {
        display: none
    }
    .itemx {
        margin-bottom: 5px;
        border: unset;
        padding: 0;
        border-radius: 0px
    }
}

@media (max-width: 1400px) {
    .coming-soon-card,
    .login-card {
        padding-top: 0px !important;
        padding-bottom: 0px !important
    }
}

body {
    font-family: Muli, sans-serif !important
}

label.required ::after {
    content: "*"
}

.cursor-pointer {
    cursor: pointer
}

.header-olm.header-sticky-olm {
    position: fixed;
    top: 0;
    z-index: 10
}

.xscore img {
    width: 10px
}

.main-wrap {
    overflow: unset;
    position: unset
}

.main-wrap .main-wrap-body {
    min-height: 100vh
}

.scroll-bar {
    scrollbar-color: #d4aa70 #e4e4e4;
    scrollbar-width: thin;
    overflow: auto
}

.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 {
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box
}

.form-control {
    height: 40px !important
}

textarea.form-control {
    height: auto !important
}

.comment-block {
    line-height: 1.6em
}

.comment-block .item {
    display: flex;
    align-items: flex-start;
    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 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px
}

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

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

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

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

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

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

.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
}

.menu-dropdown.header-user {
    top: 145% !important;
    right: 0px !important
}

.menu-dropdown.header-noti {
    top: 145% !important;
    right: -8px !important;
    min-height: 50px !important
}

.footer-wrapper p {
    font-size: 16px !important;
    width: 100% !important
}

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

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

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

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

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

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

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

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

#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-right-radius: 0;
    border-bottom-left-radius: 0
}

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

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

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

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

#accordion-course .collapsible-link[aria-expanded='true']::before {
    transform: rotate(180deg)
}

.hand {
    cursor: pointer
}

.main-hot-news {
    width: 98%;
    overflow: hidden;
    height: auto;
    font-size: 1.5em
}

.main-hot-news .inner-hot-news {
    position: relative
}

.main-hot-news .inner-hot-news>div {
    white-space: nowrap;
    position: absolute
}

.main-hot-news .inner-hot-news p {
    margin: 0
}

.h-fit {
    height: fit-content
}

.font-tieuhoc {
    font-family: TieuHoc
}

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

#crumbs ul li {
    display: inline
}

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

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

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

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

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

#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 {
    content: "";
    border-top: 20px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid #f3f6ab;
    position: absolute;
    right: -20px;
    top: 0;
    z-index: 1
}

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

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

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

.tabs-1 {
    display: flex
}

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

.tabs-1>ul>li {
    display: inline-block;
    padding: 0.6em 0.8em;
    position: relative;
    margin: 0 0.5px 0 -4px
}

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

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

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

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

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

.tabs-1>ul>li:hover:after,
.tabs-1>ul>li:focus:after {
    box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.2), inset 1px 1px 1px rgba(0, 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: -0.5em
}

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

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

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

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

.sticky-top {
    top: 128px !important
}

/*Tenant*/
@media only screen and (max-width: 992px) {
    .tenant-navbar {
        direction: rtl;
    }

    #navbarNavDropdown {
        margin-left: 0px !important;
    }

    #navbarNavDropdown li {
        direction: ltr !important;
    }

    .img-logo {
        top: -0.5rem !important;
    }

    .navbar-toggler {
        margin-top: 1rem;
    }
}

@media (min-width: 992px) {
    .d-lg-flex {
        display: flex !important;
    }
}

/* .header-wrapper {
    min-height: 95px;
} */

.img-logo {
    /* position: absolute; */
    width: 110px;
    top: 0;
}

#navbarNavDropdown {
    margin-left: 110px;
}

.lbl-a-danh-muc {
    font-size: 22px !important;
}

.lbl-danh-muc {
    display: none;
}

.info-overview {
    background-color: var(--theme-color);
}

.shadow-cube-one {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 3px 0px;
}

.bg-one {
    background-color: var(--theme-color);
}

.img-logo {
    width: 3rem;
}

.nav-content:first-child {
    margin: 0;
}

.school-sidebar {
    top: 4rem !important;
}

.distance-with-body {
    height: 4rem !important;
}

/* margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px; */

.img-logo2 {
    position: relative !important;
}

.h-110 {
    height: 110% !important;
}

.top-banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 11em;
}

.d-flex-child-center {
    justify-content: center;
    align-items: center;
    height: 100%;
}

.breadcrumb-item .img-logo {
    width: 2.2em !important;
}

.news-carousel .post-inner {
}

.news-carousel .post-head {
    padding: 0 0 10px;
    border-bottom: 2px solid var(--theme-color-one);
}

.news-carousel .post-head .title {
    color: #000;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 25px;
    padding: 0;
    margin: 0;
    display: inline-block;
}

.news-carousel .post-body {
    padding: 30px 0;
}

.news-carousel .post-body .item {
}

.news-carousel .post-body .item article {
}

.news-carousel .post-body .item article figure {
    position: relative;
    margin: 0 0 1rem;
}

.news-carousel .post-body .item article figure img {
    width: 100%;
    height: 215px;
}

.news-carousel .post-body .item article figure .post-category {
    position: absolute;
    left: 15px;
    top: 15px;
    clear: both;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    margin-bottom: 7px;
    padding: 0px 8px;
    background-color: var(--theme-color-three);
    letter-spacing: 0.5px;
    line-height: 18px;
}

.news-carousel .post-body .item article figure .post-info h3 {
    font-size: 19px;
}

.news-carousel .post-body .item article figure .post-info p {
    color: #777;
}