:root {
    --white-color: #fff;
    --light-color: #fcfbf8;
    --dark-color: #000;
    --text-color: #333;
    --text-content-color: #666;
    --text-secondary-color: #888;
    --border-color: #bbb;
    --bs-primary: #30B4FB; /* Updated main color */
    --bs-primary-rgb: 48, 180, 251; /* Updated main color RGB */
    --bs-primary-darker: #05a4fa; /* Updated darker shade */
    --accent-color: #05a4fa;
    --link-meta: #aaa;
    --radius: 10px;
    --success-color: #82cd61;
    --success-color-darker: #65c23d;
    --danger-color: #ee2a36;
    --warning-color: #ffb606;
    --info-color: #00e8df;
}
/* ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: rgba(252, 0, 18, 0.1);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 0;
}
::-webkit-scrollbar-thumb {
    background-color: var(--theme-color);
    background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.3) 25%,
        transparent 20%,
        transparent 50%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.3) 75%,
        transparent 75%,
        transparent
    );
    border-radius: 0;
} */

html {
    font-size: 16px;
}
body {
    line-height: 1.5;
    /* color: var(--text-color); */
    /* font-family: var(--font-body); */
    position: relative;
}
/* .g-4, .gy-4 {
    --bs-gutter-y: 1.5rem;
}
.g-4, .gx-4 {
    --bs-gutter-x: 1.5rem;
}
.g-3, .gy-3 {
    --bs-gutter-y: 1rem;
}z
.g-3, .gx-3 {
    --bs-gutter-x: 1rem;
}
.g-2, .gy-2 {
    --bs-gutter-y: 0.5rem;
}
.g-2, .gx-2 {
    --bs-gutter-x: 0.5rem;
} */
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.cursor-pointer {
    cursor: pointer;
}
.grabbable {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
/* .offcanvas-end {
    width: 22rem;
}
header .offcanvas .offcanvas-header ~ .offcanvas-body {
    padding-top: 0;
} */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-heading);
}
a,
a:active {
    color: inherit;
    text-decoration: none;
    transition: all ease-in-out 0.3s;
}
a:hover {
    color: var(--bs-primary);
}
.link-meta {
    color: var(--link-meta);
}
a.link-meta:hover {
    color: var(--text-color);
    text-decoration: underline;
}
.text-heading {
    font-family: var(--font-heading);
}
.text-success {
    color: var(--success-color) !important;
}

.menu-divider {
    height: 1px;
    background-color: var(--border-color);
}

hr.double {
    background: transparent;
    border-top: 4px double var(--border-color);
    opacity: 1;
}
hr {
    background-color: var(--border-color);
    opacity: 1;
}

.sticky {
    position: sticky;
}
.sticky.top {
    top: 2rem;
}

.card {
    border-radius: var(--radius);
    border-color: var(--border-color);
}

.nav-tabs .nav-link {
    color: var(--text-secondary-color);
    font-weight: 500;
    border-radius: 0;
    border-color: transparent;
    background: transparent;
}
.nav-tabs .nav-link:hover {
    color: var(--bs-primary);
    border-color: transparent;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: transparent transparent var(--bs-primary);
    color: var(--bs-primary);
    box-shadow: inset 0 -1px 0 var(--bs-primary);
}

.user-avatar {
    border-radius: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    flex-shrink: 0;
    box-shadow: inset 0 0 1px #0002;
}

.navbar-light .navbar-brand {
    margin-right: 4rem;
}
.navbar-light .navbar-brand img {
    height: 50px;
}
.navbar-light .navbar-nav .nav-link {
    color: var(--text-color);
}
.navbar-light .navbar-nav .nav-link .icon-40 {
    border-radius: 100%;
    background: var(--light-color);
}

.search-topbar {
    position: relative;
    /* margin-left: 3rem; */
    /* border-left: 1px solid var(--border-color); */
}
.search-topbar input {
    padding: 0.75rem 3rem 0.75rem 1rem;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 5px;
    /* background: var(--light-color); */
    width: clamp(20vw, 300px, 40vw);
    max-width: 100%;
}
.search-topbar .btn-search {
    position: absolute;
    top: 0;
    right: 0.125rem;
    color: var(--text-color);
}
.topbar-result {
    max-height: 400px;
    overflow: auto;
    width: 100%;
    background: #fff;
    position: absolute;
    z-index: 9;
    top: 100%;
    margin-top: 4px;
    border-radius: var(--radius);
    box-shadow: 0 2px 4px #0001;
    padding: 0.5rem 0;
    opacity: 0;
    display: none;
}
.search-topbar input:focus ~ .topbar-result {
    animation: fadeInDown ease-in-out 300ms forwards;
    display: block;
}
.search-topbar input ~ .topbar-result:hover {
    display: block;
    opacity: 1;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, 2rem, 0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}
.topbar-result .result-list {
    margin-bottom: 1rem;
}
.topbar-result h6 {
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    padding: 0.5rem 1rem;
}
.topbar-result ul,
.topbar-result li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.topbar-result .result-item {
    display: flex;
    padding: 0.5rem 1rem;
    gap: 1rem;
}
.topbar-result .result-item div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.topbar-result .result-item img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius);
    object-fit: cover;
}

#offcanvasSearch {
    height: 5rem;
}
.formSearch-canvas {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.2rem;
}
.formSearch-canvas input {
    border: 0;
    outline: 0;
    font-size: 1.25rem;
    flex-grow: 1;
}

.canvas-menu-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 1.5rem;
}
.canvas-menu-list .item {
    display: flex;
    padding: 0.75rem;
    border-radius: var(--radius);
    background-color: transparent;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
    transition: ease-in-out 0.3s;
}
.canvas-menu-list .item i {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
}
.canvas-menu-list .item:hover {
    background-color: var(--light-color);
}
.canvas-menu-list + .divid-menu {
    font-size: 85%;
    font-family: var(--font-heading);
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.user-nav {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    line-height: 1.2;
}
.user-nav img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.icon-40 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    font-size: 1rem;
}
.icon-24 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    font-size: 0.8rem;
}

#hero-slider .item {
    position: relative;
    z-index: 1;
    color: #fff;
    height: 80vh;
    max-height: 650px;
    padding: 10vh 0;
    display: flex;
    align-items: center;
}
#hero-slider .item::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #0005;
}
#hero-slider .item img.hero-img {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}
#hero-slider .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 750px;
}
#hero-slider .hero-subTitle {
    font-size: clamp(14px, 4vw, 18px);
    margin-bottom: 2rem;
}
#hero-slider .hero-title {
    font-size: clamp(24px, 4vw, 50px);
    line-height: 1.2;
    margin-bottom: 3rem;
    font-family: var(--font-heading);
    font-weight: 700;
}
#hero-slider .hero-btns .btn {
    height: 50px;
    font-size: 16px;
    line-height: 1.25;
    text-transform: uppercase;
    padding: 1rem 1.5rem;
}
#hero-slider.owl-theme .owl-dots {
    margin-top: 0;
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}
#hero-slider.owl-theme .owl-dots .owl-dot span {
    height: 5px;
    width: 20px;
    margin: 2px 4px;
    background: #fff;
}
#hero-slider.owl-theme .owl-dots .owl-dot.active span {
    background-color: var(--accent-color);
}
.icon-box {
    display: flex;
    gap: 30px;
    border-radius: 15px;
    /* background: #fff;
    box-shadow: 0px 13px 30px 0px rgba(206, 211, 230, 0.3); */
    padding: 40px;
    margin: 0;
    transition: 0.4s;
}
.icon-box .icon-box-icon {
    width: 80px;
    flex-shrink: 0;
    transition: 0.4s;
    margin-bottom: -15px;
}
.icon-box .icon-box-heading {
    font-size: 24px;
    font-weight: 600;
    margin-top: -0.25em;
    margin-bottom: 12px;
    color: #fff;
}
.icon-box .icon-box-heading span {
    color: var(--bs-primary);
    transition: 0.4s;
}
.icon-box .icon-box-desc {
    margin-bottom: -0.3em;
    line-height: 1.75;
    color: #fff9;
}
.icon-box-grid .col-md-4 + .col-md-4 {
    border-left: 1px solid #fff4;
}
.icon-box.active {
    background-color: var(--bs-primary);
}
.icon-box.active * {
    color: #fff !important;
}
.icon-box.active .icon-box-icon {
    transform: rotateY(180deg);
}

.pt-8 {
    padding-top: 80px;
}
.pb-8 {
    padding-bottom: 80px;
}
.pt-6 {
    padding-top: 60px;
}
.pb-6 {
    padding-bottom: 60px;
}

.section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 3rem;
    gap: 1rem;
}
.section-header.with-max-width {
    max-width: 680px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.section-heading {
    flex-grow: 1;
    line-height: 1.25;
}
.section-title {
    font-size: clamp(21px, 2vw, 28px);
    font-weight: 600;
}
.section-heading p {
    margin-bottom: 0;
    color: var(--text-secondary-color);
}
.section-header .tabs {
    display: flex;
    column-gap: 3rem;
    margin-top: 1.5rem;
}
.section-header .tabs a {
    padding: 5px 0;
    position: relative;
}
.section-header .tabs a:hover {
    color: var(--dark-color);
}
.section-header .tabs a::after {
    content: "";
    width: 0;
    height: 2px;
    background-color: var(--dark-color);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all ease-in-out 0.3s;
}
.section-header .tabs a.active::after,
.section-header .tabs a:hover::after {
    width: 100%;
}

.course-item {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 10px 20px 0px rgba(223, 234, 244, 0.5);
    transition: 0.4s ease-in-out;
}
.course-item .course-item-thumb {
    position: relative;
    margin-bottom: 20px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    display: block;
}

.course-item .course-item-thumb img {
    transition: 0.4s ease-in-out;
    width: 100%;
    height: auto;
    aspect-ratio: 330 / 250;
    object-fit: cover;
}
.course-item:hover .course-item-thumb img {
    transform: scale(1.1);
}
.course-item .course-item-thumb .tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--bs-danger);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    font-family: var(--body-font);
    padding: 5px 15px;
    border-radius: 999px;
}
.course-item .course-item-content {
    padding: 0 30px;
}
.course-item .course-item-rating {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 24px;
    font-family: var(--body-font);
    gap: 8px;
    margin-bottom: 10px;
}
.course-item .tutor-ratings-stars {
    color: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    gap: 1px;
}
.course-item .tutor-ratings-average {
    font-weight: 500;
}
.course-item .course-item-title {
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 54px;
}
.course-item .course-item-title a {
    color: var(--dark-color);
}
.course-item .course-item-title a:hover {
    color: var(--bs-primary);
}
.course-item .course-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 13px;
    border-bottom: 1px dashed #d0d7e3;
    margin-bottom: 15px;
}
.course-item .course-item-meta a,
.course-item .course-item-meta > div {
    font-size: 12px;
    line-height: 24px;
}

.course-item .course-item-author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    gap: 15px;
}

.course-item .course-item-teacher {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}
.course-item .course-item-content .course-item-teacher img {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    object-fit: cover;
}
.course-item .course-item-teacher .link-meta {
    font-size: 16px;
    font-weight: 600;
    color: var(--title-color);
}

/*====== Rick Text ======*/
.rick-text {
    line-height: 1.8;
    color: inherit;
}
.rick-text ul li {
    margin-bottom: 0.5rem;
    list-style-type: none;
}
.rick-text ul li::before {
    content: "\f058";
    position: absolute;
    font-family: "Font Awesome 6 Pro";
    color: var(--bs-primary);
    margin-left: -2rem;
}
.rick-text ul.list-dot li::before {
    content: "•";
    margin-left: -1.25rem;
    transform: scale(1.5) translateY(-5%);
}
.rick-text p {
    color: var(--text-content-color);
}

#section-cats {
    background: var(--title-color);
    padding: 6rem 0;
    position: relative;
    z-index: 1;
}
#section-cats::before {
    content: "";
    background: url("../images/bg-2.png") center / cover;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(0.5) brightness(0.35);
}
#section-cats .cat-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background-color: #fff2;
    color: var(--white-color);
    border-radius: 1rem;
    font-size: 18px;
    font-weight: 600;
    transition: ease-in-out 0.3;
}
#section-cats .cat-item i {
    font-size: 2rem;
    color: var(--bs-primary-darker);
}
#section-cats .cat-item:hover {
    background: #fff;
    color: var(--titile-color);
}

.leaderBoard {
    padding: 1rem 2.75rem;
    border-radius: var(--radius);
    background-color: var(--white-color);
    box-shadow: 2px 2px 50px 2px rgba(219, 237, 251, 0.5);
}
.leaderBoard .item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--border-color);
}
.leaderBoard .item:last-child {
    border: 0;
}
.leaderBoard .item .item-image img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border: 2px solid var(--border-color);
    border-radius: 100%;
}
.leaderBoard .item:first-child .item-image img {
    border-color: var(--accent-color);
}
.leaderBoard .item:nth-child(2) .item-image img {
    border-color: var(--bs-primary);
}
.leaderBoard .item:nth-child(3) .item-image img {
    border-color: var(--text-secondary-color);
}
.leaderBoard .item .item-content {
    flex-grow: 1;
}
.leaderBoard .item .item-name {
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.leaderBoard .item .item-meta {
    display: flex;
    gap: 2rem;
    font-size: 13px;
    color: var(--text-secondary-color);
}
.leaderBoard .item .item-meta i {
    color: var(--bs-primary);
    margin-right: 0.25rem;
}
.leaderBoard .item .item-score {
    border: 1px solid var(--bs-primary);
    padding: 0.5rem;
    line-height: 1.2;
    text-align: center;
    border-radius: var(--radius);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}
.leaderBoard .item .item-score .numb {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bs-primary);
}
.leaderBoard .item .item-score .small-text {
    font-size: 70%;
    color: var(--text-secondary-color);
}

.leaderBoard.course-result {
    padding: 0;
    box-shadow: none;
}
.leaderBoard.course-result .item:first-child {
    border-top: 1px solid var(--border-color);
}
.leaderBoard.course-result .item .item-image img {
    border-radius: var(--radius);
    border: 0;
}

.testimonials {
    position: relative;
}
.testimonials-item {
    text-align: center;
}
.testimonials-quote {
    margin-bottom: 30px;
}
.testimonials-quote img {
    width: 80px !important;
    height: 80px !important;
}
.testimonials-item .testimonials-title {
    padding: 0.75rem 0 1rem;
    font-size: 1.2;
}
.testimonials-item .testimonials-content {
    font-size: 20px;
    line-height: 1.75;
    /* font-weight: 600; */
    font-family: var(--title-font);
    color: var(--title-color);
    margin-top: -0.4em;
    margin-bottom: 40px;
    /* padding-bottom: 31px;
    border-bottom: 1px solid #d0dbe9; */
}
.testimonials-item .testimonials-footer {
    /* display: flex;
    justify-content: space-between; */
}
.testimonials-item .testimonials-author {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}
.testimonials-item .testimonials-author .testimonials-author-img {
    height: 120px;
    width: 120px;
    border-radius: 10rem;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonials-item .testimonials-author .name {
    font-size: 24px;
    font-weight: 600;
}
.testimonials-item .testimonials-author .desig {
    margin-bottom: 11px;
    font-weight: 400;
    display: block;
    color: var(--bs-primary);
}
.testimonials-item .testi-box_review {
    margin-bottom: 40px;
}
.testimonials.owl-theme .owl-nav {
    position: absolute;
    right: 50%;
    bottom: 8.375rem;
    display: flex;
    transform: translateX(50%);
    gap: 240px;
}
.testimonials.owl-theme .owl-nav [class*="owl-"] {
    display: inline-flex;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: var(--white-color);
    color: var(--bs-primary);
    box-shadow: 0px 0px 20px -5px rgb(0 0 0 / 30%);
    transition: ease-in-out 0.3s;
}
.testimonials.owl-theme .owl-nav [class*="owl-"]:hover {
    background-color: var(--bs-primary);
    color: var(--white-color);
}

/*===== FOOTER =====*/
footer {
    background-color: #111;
    color: var(--text-secondary-color);
    font-size: 0.875rem;
    font-family: var(--body-font);
}
footer a {
    color: var(--text-secondary-color);
}
footer a:hover {
    color: var(--white-color);
}
.footer-brand {
    margin-bottom: 2rem;
}
.footer-list {
    margin-bottom: 2rem;
}
.footer-list.ps-0 {
    list-style-type: none;
}
.footer-list .list-item {
    margin-bottom: 0.75rem;
}
.footer-list .list-item i {
    height: 24px;
    width: 24px;
    flex-shrink: 0;
    text-align: center;
    line-height: 24px;
    color: var(--bs-primary);
    margin-right: 0.5rem;
}
.footer-widget-title {
    color: var(--white-color);
    font-size: 1.35rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}
.sub-footer {
    padding: 2rem 0;
    border-top: 1px solid var(--text-color);
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.sub-footer .socials {
    display: flex;
    gap: 2rem;
}
.sub-footer .btn-b2top {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
}

.breadcrumb {
    font-size: 90%;
    margin-bottom: 0;
    line-height: 1.75rem;
    font-weight: 500;
}
.breadcrumb .breadcrumb-item.active {
    color: var(--text-secondary-color);
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "\f054";
    font-family: "Font Awesome 6 Pro";
    font-weight: 700;
}
.page-title-wrapper {
    padding-top: 2.5rem;
}
.page-title-wrapper .page-title {
    margin: 0;
    line-height: 1.3em;
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.page-title-wrapper.with-image {
    padding: 6rem 0;
    background: var(--light-color) url("../images/bg-breadcumb.png") center /
        cover;
    position: relative;
    z-index: 1;
}
.page-title-wrapper.with-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0008;
}
.page-title-wrapper.with-image .page-title {
    color: #fff;
    font-size: clamp(1.5rem, 3vw, 2.75rem);
    position: relative;
    z-index: 1;
    padding-left: 1.5rem;
    border-left: 4px solid var(--bs-primary);
}

.count-item {
    padding: 2rem 1.5rem;
    background-color: var(--white-color);
    border-style: solid;
    border-width: 0px 0px 4px 0px;
    border-color: var(--white-color);
    border-radius: var(--radius);
    box-shadow: 0px 0px 10px -5px rgb(0 0 0 / 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: ease-in-out 0.2s;
}
.count-item i {
    font-size: 3.5rem;
    margin: 1.5rem;
}
.count-item .numb {
    font-size: 2.4rem;
    line-height: 1;
    font-weight: bold;
    font-family: var(--font-heading);
    margin-bottom: 0.5rem;
}
.count-item .text {
    color: var(--text-secondary-color);
}
.count-item:hover {
    border-color: inherit;
}
.ceo-quote {
    display: flex;
    gap: 2rem;
}
.teacher-item {
    margin-bottom: 2rem;
}
.teacher-item .avatar {
    width: 12rem;
    height: 12rem;
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    border-radius: 100%;
    margin: 0 auto 1.25rem;
    overflow: hidden;
}
.teacher-item .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    object-fit: cover;
}
.teacher-item .name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}
.teacher-item .desc {
    height: 3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
    color: var(--text-secondary-color);
}
.teacher-item .meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-secondary-color);
}
.teacher-item .meta i {
    color: var(--bs-primary);
}

.post-item .post-item-thumb {
    margin-bottom: 1.35rem;
}
.post-item .post-item-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.post-item .post-item-title {
    margin-top: 1rem;
}
.post-item .post-item-desc {
    margin: 1rem 0 0.5rem;
}

.pagination {
    gap: 0.5rem;
}
.page-link {
    padding: 0.5rem 1rem;
    border-radius: var(--radius) !important;
    color: var(--text-secondary-color);
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-item.active .page-link,
.page-link:hover {
    background-color: var(--bs-primary);
    color: var(--white-color);
    border-color: var(--bs-primary);
}

.single-course-page {
    font-family: var(--body-font);
}
.single-course-page .single-course-header {
    background: url("../images/bg-2.png") center/ cover, var(--text-color);
    color: var(--white-color);
    padding: 5rem 0 4rem;
}
.single-course-header .course-title {
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #fff;
    line-height: 1.3;
    margin-bottom: 1.5rem;
}
.single-course-header .course-desc {
    color: #fff;
    opacity: 0.75;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}
.single-course-header .course-meta {
    display: flex;
    align-items: center;
    line-height: 1.3;
    font-weight: 500;
}
.single-course-header .course-meta label {
    font-size: 85%;
    color: #fff;
    opacity: 0.75;
    font-weight: 400;
}
.single-course-header .course-author {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding-right: 1.75rem;
}
.single-course-header .course-author img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    object-fit: cover;
}
.single-course-header .course-category,
.single-course-header .course-review {
    padding: 0 1.75rem;
    border-left: 1px solid var(--text-secondary-color);
}
.review-stars-rated {
    position: relative;
}
.review-stars-rated .review-stars {
    color: var(--text-secondary-color);
    white-space: nowrap;
}
.review-stars-rated .review-stars.filled {
    color: var(--bs-primary);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.single-course-page .course-description .field {
    padding-top: 7rem;
    margin-top: -7rem;
    margin-bottom: 2rem;
}
.single-course-page .course-description .field .title {
    text-transform: uppercase;
    margin-bottom: 0.67rem;
}

/*===== Course Details =====*/
.course-right {
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
    top: 0.5rem;
    padding: 0.5rem;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-top: -20rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 5px #0001;
}
.course-right .course-thumbnail {
    position: relative;
    padding-top: 60%;
    background-color: var(--dark-color);
    overflow: hidden;
    border-radius: var(--radius);
}
.course-right .course-thumbnail::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0005;
    position: absolute;
    z-index: 1;
}
.course-right .course-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.single-course-page .course-payment {
    margin: 1.5rem 1rem;
}
.single-course-page .course-payment .price {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 2rem;
}
.single-course-page .course-payment .btn,
.single-course-page .course-trial .btn {
    text-transform: uppercase;
    padding: 1rem;
    letter-spacing: 1px;
}
.course-right .course-info {
    margin: 2rem 1rem 1rem;
}
.course-right .course-info ul,
.exam-info ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 0;
}
.course-right .course-info ul li,
.exam-info ul li {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.5rem 0;
    gap: 1rem;
}
.course-right .course-info ul li i,
.exam-info ul li i {
    text-align: center;
    line-height: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--bs-primary);
}
.course-right .course-info ul li .label,
.exam-info ul li .label {
    color: var(--text-secondary-color);
}
.course-right .course-info ul li .value,
.exam-info ul li .value {
    font-weight: 500;
    flex-grow: 1;
    text-align: right;
}
.course-right .social-share {
    position: relative;
    display: flex;
    justify-content: center;
    margin: -0.5rem 1rem 0;
}
.course-right .social-share::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
}
.social-share-list {
    background-color: var(--white-color);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.social-share-list a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
    width: 2rem;
    background-color: var(--text-color);
    color: var(--white-color);
    border-radius: 100%;
}
.social-share-list a:hover {
    opacity: 0.8;
}
.social-share-list a.facebook {
    background-color: #3b5998;
}
.social-share-list a.twitter {
    background-color: #00aced;
}
.social-share-list a.pinterest {
    background-color: #cb2027;
}
.social-share-list a.linkedin {
    background-color: #0a66c2;
}
.social-share-list a.instagram {
    background: linear-gradient(
        135deg,
        #5542d4 0%,
        #e1225c 51.04%,
        #ffc154 100%
    );
}
.course-right .course-trial {
    margin: 1rem;
}

.course-description .accordion {
    padding: 0 1.35rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background-color: var(--white-color);
    counter-reset: section;
}
.course-description .accordion-button {
    padding: 1rem 0.25rem;
    color: var(--text-color);
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-weight: 600;
}
.course-description .accordion-button::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
    margin-right: 1rem;
}
.course-description .accordion-button:focus {
    box-shadow: none;
}
.course-description .accordion-button::after {
    margin: 0 1rem 0 0;
    order: -1;
    filter: hue-rotate(-15deg) brightness(1.5);
}
.course-description .accordion-button:not(.collapsed) {
    background-color: var(--white-color);
    box-shadow: none;
}
.course-description .accordion .accordion-body {
    padding: 0;
    counter-reset: lesson;
}
.course-description .accordion ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.course-description .accordion ul li {
    margin-bottom: 0;
    padding: 0.65rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid var(--border-color);
}
.course-description .accordion ul li::before {
    display: none;
}
.course-description .accordion ul li .icon {
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--accent-color);
}
.course-description .accordion ul li span {
    flex-grow: 1;
    color: var(--text-content-color);
}
.course-description .accordion ul li span::before {
    counter-increment: lesson;
    content: "Bài " counter(lesson);
    margin-right: 1rem;
    color: var(--text-secondary-color);
    display: inline-block;
    /* min-width: 5.25rem; */
    font-size: 80%;
}
.course-description .accordion ul li .btn-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    padding: 0;
    font-size: 85%;
    flex-shrink: 0;
}
.course-description .teacher {
    display: flex;
    gap: 2rem;
}
.course-description .teacher .avatar img {
    width: 8rem;
    height: 8rem;
    border-radius: 100%;
    object-fit: cover;
}
.single-course-footer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--white-color);
    box-shadow: 0 0 3px #0001;
    z-index: -1;
    transform: translateY(-150%);
    transition: ease-in-out 0.3s;
}
.single-course-footer.show {
    z-index: 1;
    transform: translateY(0);
}
.single-course-footer .course-payment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem 0;
}
.single-course-footer .course-payment .course-price {
    font-size: 0.85rem;
}
.single-course-footer .course-payment .course-price .price {
    font-size: 1.5rem;
}
.single-course-footer .course-payment .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
}
.single-course-footer .anchors {
    flex-grow: 1;
    display: flex;
    gap: 1.5rem;
}
.single-course-footer .anchors a {
    padding: 1rem 0;
    line-height: 2.5rem;
    font-weight: 500;
    box-shadow: inset 0 3px 0 var(--white-color);
}
.single-course-footer .anchors a.active {
    box-shadow: inset 0 3px 0 var(--bs-primary);
}

/*===== PROFILE =====*/
.profile-page .profile-cover {
    height: 300px;
    position: relative;
}
.profile-page .profile-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-page .profile-cover .btn {
    position: absolute;
    z-index: 3;
    bottom: 1rem;
    right: 1rem;
}
.profile-left {
    /* position: -webkit-sticky;
    position: sticky; */
    position: relative;
    z-index: 2;
    top: 1rem;
    margin-bottom: 2rem;
}
.profiel-user {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 2rem;
    box-shadow: 0 1px 5px #0001;
    padding: 2.75rem 2.5rem 2rem;
    text-align: center;
}
.profile-page .profile-cover ~ .profile-content .profile-left .profiel-user {
    margin-top: -8rem;
}
.profile-page
    .profile-cover
    ~ .profile-content
    .profile-left.is_stuck
    .profiel-user {
    margin-top: 0;
}

.profiel-user .avatar {
    width: 11rem;
    margin: 0 auto 1.25rem;
    position: relative;
}
.profiel-user .avatar button {
    position: absolute;
    bottom: 0;
    right: 1rem;
}
.profiel-user .avatar img {
    width: 11rem;
    height: 11rem;
    border-radius: 100%;
    object-fit: cover;
    padding: 0.66rem;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
}
.profiel-user h1 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.profiel-user .desc {
    font-size: 90%;
    color: var(--text-secondary-color);
    margin-bottom: 1rem;
}
.profiel-user .social-share-list {
    margin-bottom: 1rem;
    justify-content: center;
}
.profiel-user .meta {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    color: var(--text-content-color);
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--border-color);
}
.profiel-user .meta i {
    color: var(--bs-primary);
    margin-right: 0.25rem;
}
.profiel-user .profile-btn .btn {
    font-size: 90%;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 1rem;
}
.profile-menu {
    padding-left: 1.25rem;
    border-left: 1px solid var(--border-color);
    margin-bottom: 2rem;
}
.profile-menu .canvas-menu-list .item {
    padding: 0.75rem 0;
    position: relative;
}
.profile-menu .canvas-menu-list .item i {
    color: var(--text-secondary-color);
}
.profile-menu .canvas-menu-list .item::before {
    content: "";
    height: 1.5rem;
    width: 2px;
    position: absolute;
    left: -1.25rem;
    background: var(--bs-primary);
    opacity: 0;
    transition: ease-in-out 0.3s;
}
.profile-menu .canvas-menu-list .item.active::before {
    opacity: 1;
}
.profile-menu .canvas-menu-list .item.active i {
    color: var(--bs-primary);
}

.friend-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.35rem;
    border: 1px solid var(--light-color);
    border-radius: var(--radius);
    overflow: hidden;
}
.friend-item:hover {
    box-shadow: 0 1px 4px #00000005;
    /* transform: translateY(-3px); */
}
.friend-item img {
    width: 40px;
    height: 40px;
}
.friend-item > span {
    flex-grow: 1;
    overflow: hidden;
}
.friend-item > span > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*===== DATATABLE =====*/
.dataTables_wrapper {
    /* border: 1px solid var(--border-color);
    border-radius: var(--radius); */
    /* font-size: 0.9rem; */
    /* min-width: 45rem; */
}
div.dataTables_wrapper .dtT_filter {
    margin: 1rem 0;
    box-shadow: 0 1px 3px #0001;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate {
    margin: 1rem !important;
}
div.dataTables_wrapper div.dataTables_filter {
    flex-grow: 1;
    text-align: start;
}
div.dataTables_wrapper div.dtT_filter label {
    font-weight: 600;
    display: flex;
    align-items: center;
}
div.dataTables_wrapper div.dtT_filter input {
    /* display: block;
    margin: 0.5rem 0 0;
    border-color: var(--border-color); */
    border: 0;
    flex-grow: 1;
}
div.dataTables_wrapper div.dataTables_info {
    padding: 0;
    color: var(--text-secondary-color);
}
table.dataTable {
    border-radius: var(--radius) var(--radius) 0 0;
    border: 1px solid var(--border-color);
    margin-bottom: 0 !important;
    border-bottom: 0;
}
div.dataTables_wrapper table.dataTable ~ .dtT_filter {
    margin-top: 0;
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}

table.dataTable thead th {
    border-top: 1px solid var(--border-color);
}
table.dataTable thead th,
table.dataTable tbody th,
table.dataTable tbody td {
    padding: 1rem;
}
table.dataTable.stripe > tbody > tr.odd > *,
table.dataTable.display > tbody > tr.odd > * {
    box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 1%);
}
table.dataTable.display > tbody > tr.odd > .sorting_1,
table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {
    box-shadow: inset 0 0 0 9999px rgb(0 0 0 / 3%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--radius);
    border-color: var(--border-color);
    transition: all ease-in-out 0.3s;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary-darker);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: var(--bs-primary-darker);
    border-color: var(--bs-primary-darker);
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--bs-primary);
}
.modal.dtr-bs-modal .modal-body {
    padding: 0;
}
.modal.dtr-bs-modal .table tr:last-child > td {
    border-bottom: 0;
}
div.dtr-bs-modal table.table tr td {
    padding: 0.75rem 1rem;
}

/* ======= CardTable ========= */
table.dataTable.cardTable {
    border: 0;
    margin-bottom: 1rem !important;
    font-size: 0.9rem;
}
table.dataTable.cardTable thead {
    display: none;
}
table.dataTable.cardTable tbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
table.dataTable.cardTable tbody tr {
    display: flex;
    flex-direction: column;
    height: auto !important;
    padding: 0.5rem 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 1px 3px #0001;
    overflow: hidden;
}
table.dataTable.cardTable.stripe > tbody > tr.odd > *,
table.dataTable.cardTable.display > tbody > tr.odd > * {
    box-shadow: none;
}
table.dataTable.cardTable tbody tr td:before {
    content: attr(data-label) ":";
    color: #888;
}
table.dataTable.cardTable tbody tr td {
    padding: 0.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
table.dataTable.cardTable tbody tr td.image {
    order: -2;
    padding: 0 0 0.5rem !important;
    margin-top: -0.5rem;
}
table.dataTable.cardTable tbody tr td.image::before {
    display: none;
}
table.dataTable.cardTable tbody tr td.image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
table.dataTable.cardTable tbody tr td:nth-child(2) {
    order: -1;
    font-size: 1.15rem;
    font-weight: 600;
    font-family: var(--font-heading);
}
table.dataTable.cardTable tbody tr td:nth-child(2)::before {
    display: none;
}
table.dataTable.cardTable tbody tr td .user-avatar {
    width: 48px;
}
table.dataTable.cardTable tbody tr td small,
table.dataTable.cardTable tbody tr td .small {
    font-size: 0.85rem;
    font-weight: normal;
    font-family: var(--font-body);
}
table.dataTable.cardTable tbody tr td .badge {
    display: inline-flex;
    align-items: center;
}
div.dataTables_wrapper table.dataTable.cardTable ~ .dtT_filter {
    border: 0;
    box-shadow: none;
    justify-content: center;
}
div.dataTables_wrapper
    table.dataTable.cardTable
    ~ .dtT_filter
    > .dataTables_length {
    display: none;
}

.image-upload {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--link-meta);
    padding-top: 66%;
    background-color: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.image-upload i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.image-upload input {
    opacity: 0;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.curriculum-content {
    counter-reset: section;
}
.curriculum-content .section-numb:before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}
.curriculum-content .curriculum-box {
    counter-reset: lesson;
    background-color: var(--white-color);
    border-radius: var(--radius);
    border: 1px dashed var(--border-color);
    padding: 1.5rem;
    height: auto !important;
}
.baihoc-numb:before {
    counter-increment: lesson;
    content: "Bài " counter(section) "." counter(lesson);
}
.curriculum-content .curriculum-box .l-2 {
    display: none;
}
.curriculum-content .curriculum-box .grabbable {
    background-color: var(--light-color);
    border-radius: var(--radius);
}

/* Select 2 */
.select2-container {
    display: block;
    position: relative;
    /* z-index: 1061; */
    /* width: 100% !important; */
    /* padding: 0.5rem 2.25rem 0.5rem 0.75rem */
}
body > .select2-container {
    position: relative;
    z-index: 1061;
}
.select2-container--default .select2-selection--single {
    padding: 0.75rem 2.25rem 0.75rem 1rem;
    height: auto;
    border-color: #ced4da;
    border-radius: var(--radius);
    outline: none;
}
.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    line-height: inherit;
    color: var(--text-color);
    padding-left: 0;
}
.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    top: 10px;
    right: 10px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--border-color);
    border-radius: var(--radius);
    outline: none;
    padding: 0.25rem 0.75rem;
}

.question-type-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
.question-type-text:after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    width: 100%;
    border-bottom: 4px double var(--border-color);
}
.question-type-text > div {
    margin: 0;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--bs-primary);
    padding: 0 1rem;
    background: var(--white-color);
}

.form-footer {
    display: flex;
    gap: 1rem;
    border-top: 4px double var(--border-color);
    padding: 1.5rem 0;
}

.noicau-content {
    counter-reset: noicau;
}
.noicau-content .noicau-item {
    align-items: flex-end;
    margin-bottom: 1rem;
}
.noicau-content .noicau-item .form-label.counter:before {
    counter-increment: noicau;
    content: "Câu: " counter(noicau);
}

.caudientu-content {
    counter-reset: caudientu;
}
.caudientu-content .caudientu-item {
    align-items: flex-end;
    margin-bottom: 1rem;
}
.caudientu-content .caudientu-item .form-label.counter:before {
    counter-increment: caudientu;
    content: "Câu: " counter(caudientu);
}

.tdt-content {
    counter-reset: dientu;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.tdt-content .tdt-item {
    position: relative;
}
.tdt-content .tdt-item:before {
    counter-increment: dientu;
    content: counter(dientu) ".";
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-weight: 600;
    font-size: 80%;
}
.tdt-content .tdt-item input {
    padding-left: 2.5rem;
}

/* ===== LEARNING PAGE ===== */
.learning-page {
    min-height: 100vh;
    background-color: #222;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.learning-page .page-header {
    background-color: var(--bs-primary);
    color: var(--white-color);
    padding: 0 1.5rem;
    display: flex;
    flex-shrink: 0;
}
.learning-page .page-header h1 {
    padding: 1rem 0;
    margin-right: auto;
}
.learning-page .page-header .close {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.35rem;
    background-color: #fff1;
    color: var(--white-color);
}
.learning-page .page-content .player-wrapper,
.learning-page .page-content .documents-wrapper {
    height: 100%;
    overflow: hidden;
}
.learning-page .page-content .video-box,
.learning-page .page-content .slide-box {
    position: relative;
    /*overflow: hidden;*/
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    background-color: var(--dark-color);
}
.learning-page .card {
    background-color: #111;
    color: var(--white-color);
    height: 100%;
    border-color: var(--text-color);
}
.learning-page .card .card-header {
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--bs-primary);
    font-size: 1rem;
}
.learning-page .card .card-header i {
    margin-right: 0.5rem;
    color: var(--accent-color);
}
.learning-page .card .card-body {
    height: 100%;
    overflow: auto;
}
.learning-page .lesson-pag {
    display: flex;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--text-color);
    color: var(--white-color);
    align-items: center;
}
.learning-page .lesson-pag .btn {
    flex-shrink: 0;
}
.learning-page .lesson-pag div.btn {
    cursor: default;
    width: 100%;
    flex-shrink: 1;
}

.list-download {
    list-style-type: none;
    padding: 0;
}
.list-download li {
    padding: 0.75rem 0;
}
.list-download li a {
    display: flex;
    gap: 1rem;
}
.list-download li a i {
    color: var(--bs-primary);
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 100%;
    background-color: var(--text-color);
}

.learning-page .aside {
    position: relative;
    flex-shrink: 0;
    width: 400px;
    height: 100%;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    color: var(--white-color);
    background-color: #111;
}
.learning-page .aside .aside-header {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.learning-page .aside .aside-header .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 1rem 1rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    font-size: 85%;
    border: 0;
}
.learning-page .aside .aside-header .nav-link i {
    font-size: 1.2rem;
}

.learning-page .aside .aside-header .nav-link:hover {
    color: var(--white-color);
}
.learning-page .aside .aside-header .nav-link.active {
    color: var(--accent-color);
    box-shadow: inset 0 -2px 0 var(--accent-color);
}
.learning-page .aside .aside-body {
    height: 100%;
    overflow: auto;
}
.user-list .user-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--text-color);
    line-height: 1.3;
}
.user-list .user-item:last-child {
    border-bottom: 0;
}
.learning-page .aside .search {
    padding: 1rem;
    border-bottom: 1px solid var(--text-color);
}
.learning-page .aside input {
    background-color: #222;
    border: 0;
    outline: none;
    box-shadow: none;
    color: var(--white-color);
}
.learning-page .aside .comment-wrapper {
    height: 100%;
    position: relative;
}
.learning-page .aside .my-comment {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--text-color);
}
.comment-list {
    padding: 0 1rem;
}
.comment-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--text-color);
    font-size: 0.9rem;
}
.comment-item .comment-reply-list .my-reply,
.comment-item .comment-reply-list .comment-item {
    padding: 1.5rem 0 0;
    border: 0;
}
.comment-item a.like:hover,
.comment-item a.liked {
    color: #dc3545;
}

.learning-page .accordion {
    border-radius: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
    counter-reset: section;
}
.learning-page .accordion-button::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
    margin-right: 0.5rem;
}
.learning-page .accordion .accordion-item {
    background-color: transparent;
}
.learning-page .accordion-button {
    background-color: #ffffff05;
    color: var(--text-secondary-color);
    padding: 0.75rem 1rem;
    box-shadow: none;
    outline: none;
    font-size: 14px;
    font-family: var(--body-font);
}
.learning-page .accordion-button:not(.collapsed),
.learning-page .accordion-button:hover {
    background-color: transparent;
    color: var(--white-color);
}
.learning-page .accordion .accordion-body {
    padding: 0 1rem;
    counter-reset: lesson;
    font-size: 0.9rem;
}
.learning-page .accordion ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.learning-page .accordion .accordion-body ul li {
    border-top: 1px solid var(--text-color);
    padding: 0.75rem 0;
    color: var(--text-secondary-color);
}
.learning-page .accordion .accordion-body ul li a::before {
    counter-increment: lesson;
    content: "Bài " counter(section) "." counter(lesson);
    margin-right: 0.5rem;
    display: inline-block;
    width: 2.5rem;
    font-size: 80%;
    opacity: 0.75;
}
.learning-page .course-description .accordion ul li span::before {
    min-width: auto;
    margin-right: 0.5rem;
}

.page-bg {
    background: var(--light-color) url("../images/bg-login.jpg") no-repeat
        center / cover;
    min-height: calc(100vh - 75px);
}
.authenForm a {
    /* text-decoration: underline; */
    font-weight: 500;
    color: var(--bs-primary);
}

/* ======= Q&A ======== */
.qa-item {
    display: flex;
    gap: 2rem;
    color: var(--text-color) !important;
    margin-top: 1.25rem;
}
.qa-item .qa-content {
    flex-grow: 1;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.qa-item .qa-meta span {
    margin-right: 1rem;
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 80%;
    font-weight: 600;
}
.qa-item .qa-meta span i {
    color: var(--bs-primary);
    margin-right: 0.5rem;
}
.qa-item .qa-countAction .question-like,
.qa-item .qa-countAction .answer-like {
    margin-right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 5rem;
    border: 1px solid var(--border-color);
    font-size: 90%;
    font-weight: 500;
    padding: 0.5rem 1rem;
}

.qa-item.fixlayout {
    display: block;
}

.question-delete,
.answer-delete {
    margin-right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 5rem;
    border: 1px solid var(--border-color);
    font-size: 90%;
    font-weight: 500;
    padding: 0.5rem 1rem;
}

.question-singlge-page .q-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.question-singlge-page .q-meta > div {
    padding-right: 1rem;
    margin: 0.5rem 0;
}
.question-singlge-page .q-meta > div + div {
    padding-left: 1rem;
    border-left: 1px solid var(--border-color);
}
.question-singlge-page .q-meta > div label {
    font-size: 80%;
    color: var(--text-secondary-color);
}
.question-singlge-page .q-meta > div .value {
    font-weight: 500;
}
.question-singlge-page .ur_ans {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

/* ========= Exam ========= */
.timer-box {
    background-color: rgba(238, 42, 54, 0.08);
    color: var(--danger-color);
    padding: 1rem;
    border-radius: var(--radius);
    text-align: center;
}
.timer-box .label {
    font-size: 80%;
    text-transform: uppercase;
    font-weight: 600;
}
.timer-box .timer-countdown {
    font-weight: 700;
    margin-bottom: 0;
    font-family: inherit;
}
.exam-page .accordion-button {
    /* color: var(--text-color); */
    font-weight: 500;
}
.exam-page .accordion-button:focus {
    box-shadow: none;
}
.exam-page .accordion-button:not(.collapsed) {
    color: var(--white-color);
    background-color: var(--bs-primary);
}
.exam-page .accordion-button:not(.collapsed)::after {
    filter: brightness(100);
}
.exam-page .accordion-item {
    border-color: var(--border-color);
}
.exam-page .accordion-item:first-of-type {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}
.exam-page .accordion-item:last-of-type {
    border-bottom-right-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.exam-page .listQuestion {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.exam-page .listQuestion a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    color: var(--link-meta);
    font-weight: 500;
}
.exam-page .listQuestion a:not(.current, .done):hover {
    color: var(--text-color);
    border-color: var(--link-meta);
}
.exam-page .listQuestion a.done {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
.exam-page .listQuestion a.current {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
    color: var(--white-color);
}
.exam-page .listQuestion a.correct {
    border-color: var(--success-color);
    color: var(--success-color);
}
.exam-page .listQuestion a.wrong {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.exam-page .questions-section {
    padding-bottom: 1rem;
}
.exam-page .question-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}
.exam-page .questions-section:last-child .question-item:last-child {
    margin-bottom: 0;
}
.exam-page .question-label {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
}
.exam-page .question-label .question-num {
    font-weight: 600;
    padding: 0.3rem 0.6rem 0.2rem;
    border-radius: var(--radius);
    color: var(--white-color);
    background-color: var(--bs-primary);
    margin-right: 1rem;
}
.exam-page .question-note:before {
    content: "*";
    color: var(--danger-color);
    margin-right: 0.3rem;
}
.exam-page .question-content .list-choices {
    list-style-position: inside;
}
.exam-page .question-content .list-choices .item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
}
.exam-page .question-content .list-choices .item input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}
.exam-page .question-content .list-choices .item label {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    cursor: pointer;
}
.exam-page .question-content .list-choices .item label:before {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    /* content: "\f00c";
    font-family: "Font Awesome 6 Pro"; */
    font-weight: 900;
    font-size: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--white-color);
    /* color: var(--white-color); */
    transition: ease-in-out 0.2s;

    content: "A";
    font-family: var(--font-heading);
    color: var(--text-color);
}
.exam-page .question-content .list-choices .item:nth-child(2) label:before {
    content: "B";
}
.exam-page .question-content .list-choices .item:nth-child(3) label:before {
    content: "C";
}
.exam-page .question-content .list-choices .item:nth-child(4) label:before {
    content: "D";
}
.exam-page .question-content .list-choices .item:nth-child(5) label:before {
    content: "E";
}
.exam-page .question-content .list-choices .item:nth-child(6) label:before {
    content: "F";
}
.exam-page .question-content .list-choices .item:nth-child(7) label:before {
    content: "G";
}
.exam-page .question-content .list-choices .item:nth-child(8) label:before {
    content: "H";
}

.exam-page
    .question-content
    .list-choices
    .item
    input[type="radio"]
    ~ label:before {
    border-radius: 100%;
}
.exam-page .question-content .list-choices .item input:checked ~ label:before {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--white-color);
}
.exam-page .question-content .list-choices.type-words {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}
.exam-page .question-content .list-choices.type-words .item {
    border: 0;
    padding: 0;
}
.exam-page .question-content .list-choices.type-words .item label {
    gap: 0.75rem;
}
.exam-page .question-content .sentent-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}
.exam-page .question-content .left .sentent-item:before {
    content: "A";
    font-family: var(--font-heading);
    font-weight: bold;
}
.exam-page .question-content .left .sentent-item:nth-child(2)::before {
    content: "B";
}
.exam-page .question-content .left .sentent-item:nth-child(3)::before {
    content: "C";
}
.exam-page .question-content .left .sentent-item:nth-child(4)::before {
    content: "D";
}
.exam-page .question-content .left .sentent-item:nth-child(5)::before {
    content: "E";
}
.exam-page .question-content .left .sentent-item:nth-child(6)::before {
    content: "F";
}
.exam-page .question-content .left .sentent-item:nth-child(7)::before {
    content: "G";
}
.exam-page .question-content .left .sentent-item:nth-child(8)::before {
    content: "H";
}

.exam-page .question-content .sentent-item span {
    flex-grow: 1;
}
.exam-page .question-content .sentent-item select {
    border: 0;
    outline: 0;
    min-width: 2.5rem;
    font-weight: bold;
    font-family: var(--font-heading);
    color: var(--bs-primary);
}
.exam-page .question-content .sentences .item {
    padding: 1rem 0 1rem 0.66rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.exam-page .question-content .sentences .item:before {
    content: "A";
    font-family: var(--font-heading);
    font-weight: bold;
}
.exam-page .question-content .sentences .item:nth-child(2)::before {
    content: "B";
}
.exam-page .question-content .sentences .item:nth-child(3)::before {
    content: "C";
}
.exam-page .question-content .sentences .item:nth-child(4)::before {
    content: "D";
}
.exam-page .question-content .sentences .item:nth-child(5)::before {
    content: "E";
}
.exam-page .question-content .sentences .item:nth-child(6)::before {
    content: "F";
}
.exam-page .question-content .sentences .item:nth-child(7)::before {
    content: "G";
}
.exam-page .question-content .sentences .item:nth-child(8)::before {
    content: "H";
}

.exam-page .question-content .list-choices input:disabled ~ label:before,
.exam-page .question-content .form-control {
    background-color: #e9ecef;
}
/* True false */
.exam-page .question-content .list-choices-tf .item {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
}

.exam-page .question-content .list-choices-tf .item .true-false-options {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.exam-page
    .question-content
    .list-choices-tf
    .item
    .true-false-options
    input[type="radio"] {
    display: none;
}

.exam-page
    .question-content
    .list-choices-tf
    .item
    .true-false-options
    .true-false-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    font-size: 16px;
    font-weight: 500;
}

.exam-page
    .question-content
    .list-choices-tf
    .item
    .true-false-options
    .true-false-label::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background-color: white;
    transition: background-color 0.3s, border-color 0.3s;
}

.exam-page
    .question-content
    .list-choices-tf
    .item
    .true-false-options
    input[type="radio"]:checked
    + .true-false-label::before {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.exam-page
    .question-content
    .list-choices-tf
    .item
    .true-false-options
    input[type="radio"]:checked
    + .true-false-label {
    background-color: #e6f0ff;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
/* =========== Feed =========== */
.f-single {
    padding: 1.5rem;
    background: var(--white-color);
    border-radius: var(--radius);
    box-shadow: 0px 4px 24px rgba(45, 52, 54, 0.1);
    margin-bottom: 1.5rem;
}
.f-single .f-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
.f-single .f-header .f-author {
    flex-grow: 1;
    display: flex;
    gap: 1rem;
    align-items: center;
}
.f-single .f-header .dropdown-menu {
    border-radius: var(--radius);
    border-color: var(--border-color);
    margin-top: 0.5rem;
}
.f-single .f-header .dropdown-menu li {
    margin: 0 0.5rem;
}
.f-single .f-header .dropdown-item {
    padding: 0.75rem 1.5rem 0.75rem 0.5rem;
    border-radius: var(--radius);
    color: var(--text-content-color);
}
.f-single .f-header .dropdown-item:hover {
    background-color: var(--light-color);
    color: var(--text-color);
}
.f-single .f-header .dropdown-item:active {
    background-color: var(--bs-primary);
    color: var(--white-color);
}
.f-single .f-header .dropdown-menu li .dropdown-item i {
    width: 1.5rem;
    text-align: center;
    margin-right: 1rem;
}
.f-single .f-header .f-acts {
    flex-shrink: 0;
}
.f-single .f-text {
    line-height: 1.75;
    margin-bottom: 1rem;
    max-width: 40rem;
    color: var(--text-content-color);
}
.f-single .f-media {
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}
.f-single .btn-like {
    font-weight: 500;
    padding: 0.3rem 0.65rem 0.15rem;
    background: transparent;
    border-radius: 2rem;
    border: 1px solid var(--border-color);
}
.f-single .btn-like i {
    color: var(--danger-color);
    font-weight: 400;
}
.f-single .btn-like.liked,
.f-single .btn-like:hover {
    color: var(--danger-color);
}
.f-single .btn-like.liked i {
    font-weight: 900;
}
.f-single .f-count {
    display: flex;
    align-items: center;
    /* margin-bottom: 1.5rem; */
}
.f-single .my-comment {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.f-single .my-comment input {
    padding: 0.6rem 1rem;
}
.f-single .comment-list {
    padding: 0;
}
.f-single .comment-item {
    padding-bottom: 0;
    border-bottom: 0;
}
.f-single .comment-item .comment-text {
    color: var(--text-content-color);
}
.f-single .comment-item .comment-content {
    flex-grow: 1;
}
.f-single .comment-item .comment-content .comment-content-box {
    display: inline-block;
    padding: 1rem;
    border-radius: var(--radius);
    background: #f5f8fa;
    margin-bottom: 0.75rem;
}
.f-single .comment-item .comment-reply-list .my-reply,
.f-single .comment-item .comment-reply-list .comment-item {
    padding-top: 1rem;
}
.f-single .comment-item .comment-reply-list .my-reply {
    display: none;
}
.f-single .comment-item .comment-reply-list .my-reply input {
    max-width: 25rem;
}
.f-single .f-course {
    margin-bottom: 1rem;
}
.f-single .f-course .course-item:hover {
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
    color: var(--text-color);
}
.f-single .f-course .course-item:hover .course-item-meta {
    border-color: var(--border-color);
}
.f-single .f-course .course-item .col-md-6 > div {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.f-single .f-images {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 1.5rem;
}
.f-single .f-images img {
    object-fit: cover;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    max-height: 450px;
}
.f-images a {
    position: relative;
    width: 100%;
}
.f-images a span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0008;
    color: #fff;
    border-radius: 5px;
}

.users-group {
    display: flex;
    align-items: center;
}
.users-group img {
    box-shadow: 0 0 0 2px var(--white-color);
    margin-left: -0.5rem;
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.media .media-file {
    max-width: 600px;
    width: 100%;
    display: block;
    border-radius: var(--radius);
}
.media.stuck {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 16rem;
    transform: translateY(50%);
    animation: fade-in-up 0.5s ease forwards;
    z-index: 9;
}
.media button {
    position: absolute;
    z-index: 1;
    background: #0008;
    right: 0.25rem;
    top: 0.25rem;
    color: #fff !important;
    display: none;
}
.media.stuck button {
    display: block;
}
.media.removed button {
    display: none;
}
.media.stuck.removed {
    position: static;
    width: 100%;
    transform: translateY(0%);
}

/* ========= Notifications ========= */
.noti-list-header {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-width: 1px 0;
    padding: 0.75rem 0;
    margin: 0 0.75rem;
    margin-bottom: 0.75rem;
}
.noti-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: ease-in-out 0.3s;
    cursor: pointer;
    color: var(--text-content-color);
}
.noti-item .noti-author img {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
}
.noti-item .noti-date {
    font-size: 0.9em;
    color: var(--text-secondary-color);
    margin-top: 0.25rem;
}
.noti-item .noti-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 1rem;
    background: transparent;
    flex-shrink: 0;
    margin-top: 0.5rem;
}
.noti-item:hover {
    background-color: var(--light-color);
}
.noti-item.new .noti-date {
    color: var(--bs-primary);
    font-weight: 500;
}
.noti-item.new .noti-dot {
    background-color: var(--bs-primary);
}

/*============ Calendar =========== */

.calendar-page {
    background: var(--white-color) url(../images/bg-login.jpg) no-repeat center /
        cover;
}

html .body-content-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display: block;
    z-index: 4;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}
html .body-content-overlay.show {
    visibility: visible;
    transition: all 0.3s ease;
    opacity: 1;
    background-color: rgba(34, 41, 47, 0.2);
    border-radius: 0.1785rem;
}
.app-calendar .card-body {
    padding: 1.5rem;
}

.form-check {
    display: block;
    min-height: 1.45rem;
    padding-left: 1.785rem;
    margin-bottom: 0;
}
.form-check .form-check-input {
    float: left;
    margin-left: -1.785rem;
}
.form-check-input {
    width: 1.285rem;
    height: 1.285rem;
    margin-top: 0.0825rem;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #d8d6de;
    appearance: none;
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.form-check-danger .form-check-input:checked {
    border-color: var(--danger-color);
    background-color: var(--danger-color);
}
.form-check-warning .form-check-input:checked {
    border-color: var(--warning-color);
    background-color: var(--warning-color);
}
.form-check-success .form-check-input:checked {
    border-color: var(--success-color);
    background-color: var(--success-color);
}
.form-check-info .form-check-input:checked {
    border-color: #00cfe8;
    background-color: #00cfe8;
}
.bg-light-primary {
    background: rgba(48, 180, 251, 0.12) !important;
    color: var(--bs-primary) !important;
}
.bg-light-danger {
    background: rgba(234, 84, 85, 0.12) !important;
    color: var(--danger-color) !important;
}
.bg-light-warning {
    background: rgba(255, 159, 67, 0.12) !important;
    color: var(--warning-color) !important;
}
.bg-light-success {
    background: rgba(40, 199, 111, 0.12) !important;
    color: var(--success-color) !important;
}
.bg-light-info {
    background: rgba(0, 207, 232, 0.12) !important;
    color: var(--info-color) !important;
}
.fc-h-event {
    border-color: rgba(0, 0, 0, 0.05);
    transition: none;
}
form input.error,
form input.error:focus {
    border-color: var(--danger-color) !important;
}
form .error:not(input) {
    width: 100%;
    font-size: 0.857rem;
    color: var(--danger-color);
}
.form-control:focus {
    box-shadow: none;
}

/*========== Thêm Bà i Thi ==========*/

.questions-content {
    counter-reset: section;
}
.questions-content .section-numb:before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}
.questions-content .questions-box {
    background-color: var(--white-color);
    border-radius: var(--radius);
    border: 1px dashed var(--border-color);
    padding: 1.5rem;
    height: auto !important;
}
.exam-body {
    counter-reset: question;
}
.exam-body .questions-content .questions-box .cauhoi-numb:before {
    counter-increment: question;
    content: "Câu " counter(question);
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-content-color);
    font-size: 90%;
    width: 60px;
    flex-shrink: 0;
    display: inline-block;
}
.btn.add-section {
    border: 1px dashed var(--border-color);
}

.payment-content .payment-row {
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
    font-weight: 500;
    /* background: var(--light-color); */
    margin-bottom: 0.75rem;
}
.payment-content .payment-row label {
    font-size: 0.8em;
    color: var(--text-secondary-color);
}
.payment-content .payment-row .value {
    font-size: 1.15em;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.errorPage {
    min-height: calc(100vh - 75px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ?search */
.searchResult-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: var(--radius);
}
.searchResult-item .user-avatar {
    width: 60px;
    height: 60px;
}
.searchResult-item .searchResult-item-content {
    flex-grow: 1;
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}
.searchResult-item .searchResult-title {
    font-weight: bold;
    font-size: 1.1rem;
}
.searchResult-item .meta {
    display: flex;
}
.searchResult-item .meta > div {
    padding: 0 1rem;
    border-left: 1px solid #eee;
}
.searchResult-item .meta label {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
}
.searchResult-item .meta .value {
    font-weight: 500;
    color: var(--bs-primary);
}
.navbar.navbar-expand.fixed-top {
    z-index: 9;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 1px 3px #0001;
    animation: fadeInUp ease-in-out 300ms forwards;
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, -2rem, 0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

@media (max-width: 991px) {
    /* .learning-page .page-content .player-wrapper, */
    .learning-page .page-content .documents-wrapper {
        min-height: 300px !important;
    }

    .course-right {
        margin-top: 0;
    }
    .learning-page .page-body {
        display: block;
        overflow: auto;
    }
    .learning-page .page-content {
        display: block;
        height: auto;
    }
    .learning-page .page-content .video-box,
    .learning-page .page-content .slide-box {
        padding-top: 0%;
    }
    .learning-page .page-body .aside {
        width: 100%;
    }

    .bottom-nav {
        display: flex;
        background: #fff;
        box-shadow: 0 -1px 1px #0001;
        position: fixed;
        z-index: 10;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    .bottom-nav a {
        flex-grow: 1;
        padding: 0.75rem 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        justify-content: center;
        align-items: center;
        color: var(--text-secondary-color);
        min-height: 65px;
        position: relative;
        transition: ease-in-out 0.2s;
        outline: 0;
        box-shadow: none;
    }
    .bottom-nav a:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--bs-primary);
        transform: scale(0);
        transition: ease-in-out 0.2s;
    }
    .bottom-nav a.active::after,
    .bottom-nav a.active:hover::after {
        transform: scale(1);
    }
    .bottom-nav a i {
        font-size: 1.25rem;
    }
    .bottom-nav a.active i,
    .bottom-nav a:hover i {
        font-weight: 900 !important;
        color: var(--bs-primary);
    }
    .bottom-nav a span {
        font-size: 80%;
        display: none;
    }
}
@media (max-width: 767px) {
    .learning-page .page-content .player-wrapper,
    .learning-page .page-content .documents-wrapper {
        /* height: 300px !important;
        display: flex; */
    }

    .navbar-light .navbar-brand {
        margin-right: 0;
    }
    .navbar-light .navbar-brand img {
        height: 40px;
    }
    .sub-footer {
        flex-direction: column;
    }
    .sub-footer .btn-b2top {
        right: 2rem;
        top: -5rem;
    }
    .single-course-page .single-course-header {
        padding: 3rem 0;
        padding-top: 5rem;
    }
    .course-description .accordion-button {
        font-size: 0.9rem;
    }
    .course-description .accordion-button::before {
        width: 0px;
        opacity: 0;
        margin-right: 0;
    }
    .course-description .accordion ul li span::before {
        min-width: auto;
        margin-right: 0.5rem;
    }
    .course-description .teacher {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    .single-course-footer {
        transform: translateY(100%);
        top: auto;
        bottom: 0;
        z-index: 2 !important;
    }

    /* ====== Fix Mobile App ====== */

    .page-bg {
        min-height: calc(100% - 65px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .auth-page {
        background: #fff;
    }
    .auth-page .card {
        border: 0;
        background: transparent;
    }
    .auth-page .count-item {
        /* flex-direction: row; */
        padding: 1rem;
        background-color: var(--bs-primary);
        color: #fff;
        border: 0;
        justify-content: baseline;
    }
    .auth-page .count-item i {
        /* font-size: 2rem;
        font-weight: 900;
        margin: 1rem; */
        display: none;
    }

    .breadcrumbs-wrapper {
        display: none;
    }
    .breadcrumbs-wrapper ~ [class$="-page"] .section-header:not(.notres) {
        padding: 0 0.75rem;
        background: #fff;
        height: 65px;
        z-index: 10;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 1px 1px #0001;
        align-items: center;
        flex-wrap: nowrap;
    }
    .breadcrumbs-wrapper
        ~ [class$="-page"]
        .section-header:not(.notres)
        .section-title {
        margin-bottom: 0;
        font-size: 18px;
    }
    .breadcrumbs-wrapper ~ [class$="-page"] .section-header:not(.notres) p {
        display: none;
    }

    .breadcrumbs-wrapper ~ [class$="-page"] .section-header:not(.notres) .btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    .profile-page .col-lg-8 .f-single {
        margin-right: calc(var(--bs-gutter-x) * -0.5);
        margin-left: calc(var(--bs-gutter-x) * -0.5);
    }
    .f-single {
        margin-bottom: 0.5rem;
        border-radius: 0;
        padding: 1rem;
    }
    .calendar-page .container-lg {
        padding-left: 0;
        padding-right: 0;
    }

    nav.customNavMobile {
        position: sticky;
        top: 65px;
        z-index: 9;
        background: #fff;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding: 0.5rem 0;
    }

    .curriculum-content .curriculum-box {
        padding: 0 0 1.5rem;
        border-radius: 0;
        border: 0;
        border-bottom: 4px double var(--bs-orange);
    }

    /* ======== Calendar ========= */
    .fc .fc-toolbar .fc-toolbar-title {
        font-size: 1.2rem;
    }
    .fc
        .fc-toolbar.fc-header-toolbar
        .fc-toolbar-chunk:first-child
        .fc-button-group:first-child {
        display: none;
    }
}

@media (max-width: 575px) {
    div.dataTables_wrapper div.dataTables_info {
        display: none;
    }
}

#offcanvasPageContent .offcanvas-body {
    padding: 0;
}
#offcanvasPageContent iframe {
    display: block;
    border: 0;
    width: 100%;
    height: 100%;
}

.tox-tinymce {
    border-color: var(--border-color) !important;
    border-radius: var(--radius) !important;
}
.tox:not([dir="rtl"]) .tox-toolbar__group:not(:last-of-type),
.tox .tox-statusbar {
    border-color: var(--border-color) !important;
}
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23eee'/%3E%3C/svg%3E")
        left 0 top 0 #fff !important;
}

/* ========= Custom Dropzone ========= */
/* Ensure the .dz-preview container uses flexbox */

.dz-image {
    display: none;
}

.dz-size {
    display: none;
}

.dz-error-message {
    display: none;
}

.dz-error-mark {
    display: none;
}

.dz-success-mark {
    display: none;
}

.dz-processing {
    color: red;
}

.dz-success {
    color: green;
}

.dz-default {
    padding-bottom: 1rem;
    padding-top: 1rem;
}

dz-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 0.5rem;
}
.dz-filename {
    flex-grow: 1;
}
.dz-remove {
    background: none;
    border: none;
    color: red;
    cursor: pointer;
}
.dz-remove::after {
    font-weight: 900;
    font-size: 1.2rem;
    color: red;
    margin-left: 0.5rem;
}

/* Loading processing */
#loading-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.spinner {
    border: 8px solid var(--light-grey, #f3f3f3); /* Light grey */
    border-top: 8px solid var(--bs-primary, #3498db); /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 767px) {
    .learning-page .page-header {
        position: fixed;
        width: 100%;
        z-index: 10;
    }
    .learning-page .page-body {
        padding-top: 80px;
    }
    .learning-page #video-box {
        position: fixed !important;
        top: 80px;
        width: 100%;
        z-index: 9;
    }
    .learning-page .player-wrapper:before {
        content: "";
        display: block;
        padding-top: calc(57% + 56px);
    }
}