@charset "UTF-8";

html {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

input,
textarea,
select,
button {
    outline: none;
    border: none;
}

input {
    line-height: normal;
    border: none;
}

label,
button {
    cursor: pointer;
}

a {
    text-decoration: none !important;
}

img {
    display: block;
    max-width: 100%;
}

p {
    line-height: 22px;
}

audio,
canvas,
video {
    display: inline-block;
}

.bg-purple {
    background-color: #5b72ee;
}

.bg-orange {
    background-color: #f48c06;
}

.bg-blue {
    background-color: #29b9e7;
}

.bg-red {
    background-color: #f85a47;
}

.bg-green {
    background-color: #1d9200;
}

.bg-bluesky {
    background-color: var(--second-color);
}

:root {
    --section-spacing: 80px;
    --header-height: 3rem;
    --z-fixed: 999;
    /*Color mode HSL(hue, saturation, lightness)*/
    --first-color: hsl(230, 75%, 56%);
    --second-color: hsl(208, 92%, 54%);
    --title-color: hsl(230, 75%, 15%);
    --text-color: hsl(230, 12%, 40%);
    --body-color: hsl(230, 100%, 98%);
    --container-color: hsl(230, 100%, 97%);
    --border-color: hsl(230, 25%, 80%);
    --big-font-size: 1.5rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --tiny-font-size: .688rem;
}

@media screen and (min-width: 1150px) {
    :root {
        --big-font-size: 3rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --tiny-font-size: .75rem;
    }
}

@media screen and (max-width: 1279px) {
    :root {
        --section-spacing: 70px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --section-spacing: 50px;
    }
}

body {
    font-family: "Poppins", sans-serif;
    line-height: 1;
    color: #635f85;
    font-size: 16px;
}

.wrapper {
    max-width: 1260px;
    margin: 0 auto;
    background: transparent;
}

.container {
    max-width: 1260px;
    padding: 0 20px;
    margin-left: auto;
    margin-right: auto;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: 0;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    background-color: transparent;
    border-radius: .5rem;
    padding: 10px 20px;
    cursor: pointer;
}

.global-caption {
    font-weight: 500;
    font-size: 32px;
    line-height: 1.5;
    font-weight: bold;
    color: #f48c06;
}

.global-heading {
    color: #2f327d;
    font-weight: bold;
    margin-bottom: 20px;
}

.global-heading--huge {
    font-size: 50px;
    line-height: calc(56 / 50);
}

.global-heading--big {
    font-size: 40px;
    line-height: calc(50 / 40);
}

.global-heading--normal {
    font-size: 22px;
    line-height: calc(31.5 / 21);
    font-weight: 600;
}

.global-text {
    font-size: 16px;
    line-height: calc(26 / 16);
    color: #7f8ea1;
}

.grid {
    display: grid;
    gap: 1rem;
}

.btn {
    border-radius: 10px;
    padding: 15px 35px;
}

.btn--second {
    background-color: #f48c06;
    color: #fff;
}

.btn--primary {
    background-color: var(--second-color);
    color: white;
}

@media screen and (max-width: 767px) {
    .button {
        padding: 10px 20px;
        font-size: 14px;
    }

    .global-heading--big {
        font-size: 30px;
    }

    .global-text {
        font-size: 14px;
    }
}

.navigation {
    padding: 20px 15px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

    .navigation .toggle {
        margin-left: auto;
        display: none;
    }

.auth {
    display: flex;
    gap: 0 13px;
    margin-left: 20px;
}

.auth-cart, .auth-login, .auth-signup {
    display: none;
}

.menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0 20px;
    list-style: none;
    padding: 0 20px;
}

.menu-item {
    position: relative;
}

.menu-link {
    color: inherit;
    position: relative;
    transition: all 0.2s linear;
    display: block;
    white-space: nowrap;
}

    .menu-link:before {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        height: 2px;
        background-color: #ff7d00;
        width: 0;
        transition: all 0.2s linear;
    }

    .menu-link:hover {
        color: #ff7d00;
    }

        .menu-link:hover:before {
            width: 100%;
        }

.menu-link__active {
    color: #ff7d00;
}

    .menu-link__active:before {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        height: 2px;
        background-color: #ff7d00;
        width: 100%;
        transition: all 0.2s linear;
    }

.scrolled .header {
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
    position: fixed;
}

.fixed-top {
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
}

.header {
    padding: 15px 0;
    transition: all 0.5s;
    margin-bottom: 40px;
}

.header-logo {
    color: #635f85;
    font-size: 1.75rem;
}

.header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 25px;
    position: relative;
}

.header-content {
    width: 100%;
}

.header-heading {
    margin: 18px 0 25px;
}

.header-desc {
    margin-bottom: 50px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0 36px;
}

.watch-video {
    display: flex;
    align-items: center;
    gap: 0 36px;
    color: #2f327d;
    font-weight: 500;
}

.watch-icon {
    width: 59px;
    height: 59px;
    border-radius: 100rem;
    background-color: white;
    box-shadow: 0px 17px 25px rgba(140, 141, 146, 0.12);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dropdown {
    position: relative;
}

.dropdown__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown__icon {
    font-size: 1.3rem;
    transition: .5s;
}

.dropdown__menu {
    margin: 1rem 0 0 1rem;
    display: none;
    list-style: none;
}

.dropdown__item {
    margin: 1rem 0;
}

.dropdown:hover > .dropdown__menu {
    display: block;
}

.dropdown:hover .dropdown__icon {
    transform: rotate(180deg);
}

@media screen and (min-width: 1280px) {
    .header-image {
        transform: scale(1.2);
    }
}

@media screen and (min-width: 1024px) {
    .header-content {
        max-width: 496px;
    }
}

@media screen and (min-width: 768px) {
    .auth-cart, .auth-login, .auth-signup {
        display: block;
    }

    .dropdown {
        position: relative;
    }

    .dropdown__menu {
        position: fixed;
        margin: 8px 0 0 0;
        background: #fff;
        top: calc(var(--header-height) + 1rem);
        padding: .5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: .5rem;
    }

    .dropdown__item {
        list-style: none;
    }

        .dropdown__item a {
            color: #635f85;
        }

            .dropdown__item a:hover {
                color: #ff7d00;
            }
}

@media screen and (max-width: 1023px) {
    .auth {
        padding-left: 15px;
        margin-left: 0;
        margin-top: 25px;
    }

    .menu {
        margin: 0 auto;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px;
        flex-direction: column;
        background-color: white;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        z-index: 99999;
        align-items: stretch;
        transition: all 0.2s linear;
        transform: translateX(100%);
        padding-top: 20px;
    }

        .menu.is-show {
            transform: translateX(0);
        }

    .menu-link {
        padding: 15px;
    }

    .header-main {
        flex-direction: column;
    }

    .navigation .toggle {
        display: block;
        font-size: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .header {
        height: calc(var(--header-height) + 3rem);
    }

    .header-heading {
        font-size: 35px;
    }

    .header-actions {
        flex-direction: column;
        gap: 30px;
    }
}

/*=============== SEARCH ===============*/
.search {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-modal);
    background-color: rgba(10, 19, 67, 0.1);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 8rem 1.5rem 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s;
    z-index: 99999999;
}

.search__close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1.5rem;
    color: var(--title-color);
    cursor: pointer;
}

.auth .button {
    padding: 10px;
}

.nav {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__actions {
    display: flex;
    align-items: center;
    column-gap: 1rem;
    width: 100%;
    background: var(--second-color);
}

.nav__search {
    font-size: 1.25rem;
    cursor: pointer;
    transition: color .4s;
    color: #fff;
}

.search__form {
    display: flex;
    align-items: center;
    column-gap: .5rem;
    background-color: var(--container-color);
    box-shadow: 0 8px 32px rgba(10, 19, 67, 0.2);
    padding-inline: 1rem;
    border-radius: .5rem;
    transform: translateY(-1rem);
    transition: transform .4s;
}

.search__icon {
    font-size: 1.25rem;
    color: var(--title-color);
}

.search__input {
    width: 100%;
    padding-block: 1rem;
    background-color: var(--container-color);
    color: var(--text-color);
}

    .search__input::placeholder {
        color: var(--text-color);
    }

/* Show search */
.show-search {
    opacity: 1;
    pointer-events: initial;
}

    .show-search .search__form {
        transform: translateY(0);
    }

@media screen and (min-width: 767px) {
    .search {
        padding-top: 10rem;
    }

    .search__form {
        max-width: 450px;
        margin-inline: auto;
    }

    .search__close {
        width: max-content;
        top: 5rem;
        left: 0;
        right: 0;
        margin-inline: auto;
        font-size: 2rem;
    }

    .nav__actions {
        width: auto;
        background: none;
    }

    .nav__search {
        color: var(--second-color);
    }
}

.wetake {
    max-width: 1580px;
    padding: 0 15px;
    margin: 0 auto 160px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 67px;
}

    .wetake > * {
        width: 50%;
    }

.wetake-heading {
    font-weight: 500;
    font-size: 36px;
    line-height: 160%;
    margin-bottom: 30px;
}

    .wetake-heading span {
        color: #f48c06;
    }

.wetake-desc {
    color: #635f85;
    font-size: 24px;
    line-height: 180%;
    letter-spacing: 0.02em;
    margin-bottom: 30px;
}

.wetake-more {
    font-size: 22px;
    line-height: 180%;
    text-decoration: underline;
    color: #635f85;
}

.wetake-image {
    position: relative;
}

    .wetake-image img {
        border-radius: 1rem;
    }

.wetake-play {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 100rem;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.landing {
    padding-bottom: var(--section-spacing);
}

.landing-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 87px;
}

.landing-image {
    width: 100%;
    max-width: 600px;
}

    .landing-image img {
        border-radius: 1rem;
    }

.landing-content {
    flex: 1;
}

.landing .global-heading {
    max-width: 422px;
}

.landing .global-caption,
.landing .global-heading {
    margin-bottom: 25px;
}

.landing .global-text {
    margin-bottom: 37px;
}

@media screen and (max-width: 1023px) {
    .landing-container {
        gap: 30px;
        flex-direction: column;
    }

    .landing-image {
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.banner-img {
    margin-bottom: 30px;
}

    .banner-img img {
        border-radius: 10px;
    }

.intro {
    margin-bottom: 95px;
}

.intro-container {
    background: #ffffff;
    border-radius: 10px;
    padding: 37px 0;
    box-shadow: 0 42px 114px 0 rgba(13, 16, 37, 0.064);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 200px;
}

.intro-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 36.5px;
    font-size: 20px;
}

.intro-title {
    font-size: 25px;
    margin-bottom: 5px;
    line-height: calc(30 / 25);
}

.intro-text {
    line-height: calc(30 / 20);
}

@media screen and (min-width: 768px) {
    .intro-item:nth-child(2) {
        border-left: 2px solid #eeeff2;
        border-right: 2px solid #eeeff2;
    }
}

@media screen and (max-width: 767px) {
    .intro {
        margin-bottom: 50px;
    }

    .intro-container {
        grid-template-columns: 100%;
        padding: 30px;
        grid-gap: 50px 0;
    }

    .intro-item {
        flex-direction: column;
        gap: 20px 0;
        text-align: center;
    }
}

.work {
    padding-bottom: 50px;
}

.work-list {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 30px;
}

.work-item {
    word-break: break-word;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    box-shadow: 0px 12px 64px rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    gap: 0;
    flex: 1;
    transition: all 0.2s linear;
}

.work-top {
    position: relative;
}

.work-image {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.work-content {
    padding: 20px 20px 25px 20px;
    flex: 1;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

    .work-content p {
        margin-bottom: 20px;
        line-height: 22px;
    }

    .work-content .global-heading {
        text-align: center;
    }

    .work-content .button--primary {
        background-color: transparent;
        color: #a5b2c3;
        border: 1px solid;
    }

        .work-content .button--primary:hover {
            background-color: var(--second-color);
        }

.work-more {
    transition: all 0.2s linear;
    margin: auto auto 0;
}

.work-title {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 30px;
}

.work-desc {
    margin-bottom: 35px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
    word-break: break-word;
}

@media (hover: hover) {
    .work-item:hover {
        border-color: transparent;
        box-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.03);
    }

        .work-item:hover .work-more {
            border-color: #ff7d00;
            background-color: #ff7d00;
            color: white;
        }
}

@media screen and (max-width: 1023px) {
    .work {
        padding-top: 80px;
    }

    .work-list {
        display: grid;
        justify-content: flex-start;
        grid-auto-columns: 450px;
        grid-auto-flow: column;
        grid-gap: 0 50px;
        overflow: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: unset;
    }

        .work-list::-webkit-scrollbar {
            display: none;
            width: 0;
        }

        .work-list > * {
            scroll-snap-align: start;
        }

    .work-item {
        width: 100%;
    }
}

@media screen and (max-width: 479px) {
    .work-list {
        grid-auto-columns: 80%;
    }
}

.unprac {
    padding: 80px 20px 80px;
    margin-bottom: var(--section-spacing);
}

.unprac-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 26px;
}

.unprac-image {
    width: 100%;
    max-width: 600px;
}

    .unprac-image img {
        border-radius: 1rem;
    }

.unprac-content {
    max-width: 502px;
    width: 100%;
}

.unprac .global-heading {
    max-width: 443px;
    margin-bottom: 25px;
}

.unprac .global-caption {
    margin-bottom: 18px;
}

.unprac .global-text {
    margin-bottom: 34px;
}

@media screen and (max-width: 1023px) {
    .unprac {
        padding: 70px 0;
    }

    .unprac-container {
        flex-direction: column;
        gap: 30px;
    }

    .unprac-content {
        max-width: 100%;
    }
}

.feature {
    margin-bottom: var(--section-spacing);
}

.feature-header {
    text-align: center;
    margin-bottom: 78px;
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 34px;
}

.feature-item {
    border-radius: 17px;
    transition: all 0.2s linear;
}

    .feature-item:hover {
        background: #ffffff;
        box-shadow: 0px 46px 100px -31px rgba(0, 0, 0, 0.1);
    }

        .feature-item:hover .blog-title {
            color: #f4a11a;
        }

.feature-content {
    padding: 33px 23px;
}

.feature-image {
    height: 322px;
}

    .feature-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 1rem;
    }

.feature-img {
    display: flex;
    justify-content: center;
}

    .feature-img img {
        border-radius: 1rem;
    }

.feature-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    color: #2f327d;
    margin-bottom: 9px;
    transition: all 0.2s linear;
}

.feature-desc {
    font-size: 13px;
    line-height: 20px;
    color: #7f8ea1;
}

.feature .global-heading {
    max-width: 454px;
    margin: 0 auto 25px;
}

@media screen and (max-width: 1023px) {
    .feature-header {
        margin-bottom: 35px;
    }

    .feature-list {
        display: grid;
        justify-content: flex-start;
        grid-auto-columns: 300px;
        grid-auto-flow: column;
        grid-gap: 1.5rem;
        overflow: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 20px;
        padding: 20px;
        margin-left: -20px;
        grid-template-columns: unset;
    }

        .feature-list::-webkit-scrollbar {
            display: none;
            width: 0;
        }

        .feature-list > * {
            scroll-snap-align: start;
        }
}

.button {
    display: inline-block;
    font-size: 16px;
    color: #2f327d;
    padding: 15px 25px;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    background-color: transparent;
    line-height: normal;
    transition: all 0.2s linear;
}

.button--primary {
    color: white;
    background-color: var(--second-color);
}

.button--outline {
    border: 1px solid #e7e7e7;
    color: #7f8ea1;
}

.button:hover {
    background: #29b9e7;
}

.topbar {
    padding: 25px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-logo {
    flex-shrink: 0;
    color: white;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

    .topbar-right > * {
        flex-shrink: 0;
    }

.profile {
    display: block;
    width: 48px;
    height: 48px;
}

    .profile img {
        border-radius: 100rem;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.button-upload {
    height: 48px;
    --gap: 6px;
    --p: 0 16px;
}

.search-content {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 12px;
    flex: 0 1 260px;
    position: relative;
}

.search-content-input {
    background-color: #fafafa;
    flex: 1;
    border: none;
    border: 1px solid #eee;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s linear;
    padding: 12px 20px 14px 35px;
    border-radius: 8px;
}

    .search-content-input:focus {
        border-color: var(--first-color);
    }

.search-content-icon {
    position: absolute;
    left: 10px;
}

.courses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    container-type: inline-size;
    container-name: coursesHeader;
    margin-bottom: 20px;
}

.courses-content {
    display: none;
    transition: all 0.2s ease;
}

    .courses-content.current {
        display: inherit;
        transition: all 0.2s ease;
    }

.courses-tab {
    display: flex;
    white-space: nowrap;
}

.courses-tab-item {
    cursor: pointer;
    color: #635f85;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.43;
    padding: 10px;
    border-bottom: 1px solid #eee;
    transition: all 0.2s linear;
    margin-left: 20px;
    position: relative;
}

    .courses-tab-item:hover {
        color: #f48c06;
        border-bottom: 1px solid #f48c06;
    }

    .courses-tab-item.current {
        color: #ff7d00;
        border-bottom-color: currentColor;
        font-weight: 600;
    }

.courses-badge {
    position: absolute;
    right: -10px;
    top: 0;
    width: 15px;
    height: 15px;
    font-size: 9px;
    font-weight: normal;
    border-radius: 50%;
    background: var(--second-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.courses-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.courses-orderby {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 20px;
}

    .courses-orderby .select-aplphabet,
    .courses-orderby .select-intructor {
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

@container coursesHeader (max-width: 470px) {
    .courses-toggle p {
        display: none;
    }
}

.courses-main {
    container-type: inline-size;
    container-name: coursesMain;
}

.courses-item {
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 30px;
}

    .courses-item > * {
        padding: 20px;
    }

.courses-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.courses-item-main {
    border-top: 1px solid #f0f3f6;
    border-bottom: 1px solid #f0f3f6;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 20px;
    position: relative;
    overflow: hidden;
}

.courses-item-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

    .courses-item-footer .button {
        font-size: 14px;
    }

.courses-item-lessons {
    color: #a6a7b2;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 6px;
    font-size: 14px;
}

.courses-item-viewmore {
    border-radius: 8px;
    color: #f48c06;
    border: 1px solid currentColor;
    padding: 10px 15px;
    position: relative;
    transform: translateX(-50%);
    font-weight: 400;
    cursor: pointer;
    font-size: 14px;
}

    .courses-item-viewmore:hover {
        color: var(--second-color);
    }

.courses-item-heading {
    line-height: 1.5;
    font-size: 1rem;
}

    .courses-item-heading a {
        color: #635f85;
    }

        .courses-item-heading a:hover {
            color: #f48c06;
        }

.courses-item-desc {
    line-height: 1.5;
    font-weight: 400;
    font-size: 13px;
    margin-top: 16px;
}

.courses-image {
    flex: 0 0 152px;
    overflow: hidden;
    aspect-ratio: 1;
    width: 100%;
    position: relative;
}

    .courses-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

.courses-price {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #fcfcfd;
    background-color: var(--second-color);
    padding: 5px 16px;
    line-height: 20px;
    border-radius: 4px;
}

.courses-enrolled {
    position: absolute;
    bottom: 20px;
    left: 0;
}

.courses .button {
    font-size: 12px;
    padding: 5px 10px;
}

.courses-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.courses-author-verify {
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: 0;
}

.courses-author-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    position: relative;
}

    .courses-author-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 100rem;
    }

.courses-author-rating {
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 4px;
    gap: 4px;
    color: #a6a7b2;
}

.courses-date {
    color: #a6a7b2;
    font-weight: 400;
    font-size: .75rem;
}

.courses-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.courses-title {
    font-size: 22px;
    margin-bottom: 20px;
}

.courses-detail p {
    line-height: 22px;
    margin-bottom: 20px;
}

    .courses-detail p.bold {
        font-weight: 600;
    }

.courses .courses-content .content-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 25px 0;
}

.courses .courses-content .content-header {
    display: flex;
    justify-content: space-between;
    padding: 20px 10px;
    background-color: #f4f6fd;
    border-radius: 8px;
    margin-bottom: 20px;
}

    .courses .courses-content .content-header .header-lesson {
        font-size: 18px;
        font-weight: normal;
    }

.courses .courses-content .content-main {
    padding: 10px 20px;
}

    .courses .courses-content .content-main.collapse {
        transition: opacity 0.5s, display 0.5s allow-discrete;
        display: none;
    }

        .courses .courses-content .content-main.collapse.show {
            display: block;
            transition: opacity 0.5s, display 0.5s allow-discrete;
        }

.courses .courses-content .top-lesson {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.courses .courses-content .content-lesson p {
    margin-bottom: 10px;
    line-height: 22px;
}

.courses .courses-content .percent, .courses .courses-content .step {
    color: var(--second-color);
    font-weight: 600;
    padding-left: 20px;
}

.courses .courses-content .is-open {
    color: #2f327d;
}

.courses .courses-content .is-lock {
    color: #7f8ea1;
}

@container coursesMain (min-width: 500px) {
    .courses-item-main {
        flex-direction: row;
    }

    .courses-author-header {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 4px;
    }

    .courses-author-name {
        font-weight: 500;
    }

    .courses-author-rating {
        gap: 10px;
        margin: 0;
    }
}

@media screen and (min-width: 1280px) {
    .topbar-logo {
        display: none;
    }
}

@media screen and (max-width: 1279.98px) {
    .topbar {
        padding: 20px 24px;
    }

    .topbar-action,
    .search,
    .button-upload {
        display: none;
    }
}

.list-course {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
}

    .list-course .list-title {
        font-size: 22px;
        text-align: center;
    }

    .list-course .list-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .list-course .list-icon {
        width: 50px;
        height: 50px;
        border-radius: 100rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        font-size: 22px;
        color: #fff;
    }

.list-detail {
    margin-bottom: 20px;
}

    .list-detail li {
        padding: 10px 0;
        margin-left: 20px;
    }

.banner {
    background-color: #fff2e1;
    overflow: hidden;
    clip-path: ellipse(100% 100% at top);
    padding: 80px 0 80px;
    margin-bottom: 30px;
}

.banner-container {
    max-width: 1725px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.banner-top {
    padding-top: 60px;
    padding-bottom: 70px;
    display: flex;
    align-items: center;
}

.banner-buttons {
    margin-left: 80px;
    display: flex;
    align-items: center;
    gap: 0 34px;
}

.banner-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 37px;
}

    .banner-main .popular-list {
        grid-template-columns: repeat(auto-fit, minmax(470px, 1fr));
    }

.banner-heading {
    font-size: 54px;
    font-weight: bold;
    margin-bottom: 34px;
    line-height: calc(81 / 54);
    color: #f48c06;
}

    .banner-heading span {
        color: #252641;
    }

.banner-desc {
    font-size: 24px;
    line-height: 160%;
    margin-bottom: 52px;
    color: #2f327d;
}

.banner-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    gap: 0 40px;
}

    .banner-actions .btn--primary {
        padding: 22px 38px;
        background-color: var(--second-color);
        color: #fff;
        border-radius: 10px;
    }

.banner-image {
    position: relative;
    transform: translateY(200px);
}

/* ================== Badge CSS ========================*/
.badge {
    margin: 0;
    padding: 0;
    color: white;
    padding: 5;
    font-size: 12px;
    text-align: center;
    line-height: normal;
    text-transform: uppercase;
    background: #ed1b24;
}

    /* ================== Badge color CSS ========================*/
    .badge.red {
        background: #ed1b24;
    }

    .badge.orange {
        background: #fa7901;
    }

    .badge.pink {
        background: #ee2b8b;
    }

    .badge.blue {
        background: #00adee;
    }

    .badge.green {
        background: #b4bd00;
    }

    .badge::before, .badge::after {
        content: '';
        position: absolute;
        top: 0;
        margin: 0 -1px;
        width: 100%;
        height: 100%;
        background: inherit;
        min-width: 55px;
    }

    .badge::before {
        right: 100%;
    }

    .badge::after {
        left: 100%;
    }

/* ================== Badge Position CSS ========================*/
.top-left {
    position: absolute;
    top: 0;
    left: 0;
    -ms-transform: translateX(-30%) translateY(0%) rotate(-45deg);
    -webkit-transform: translateX(-30%) translateY(0%) rotate(-45deg);
    transform: translateX(-30%) translateY(0%) rotate(-45deg);
    -ms-transform-origin: top right;
    -webkit-transform-origin: top right;
    transform-origin: top right;
}

.top-right {
    position: absolute;
    top: 0;
    right: 0;
    -ms-transform: translateX(30%) translateY(0%) rotate(45deg);
    -webkit-transform: translateX(30%) translateY(0%) rotate(45deg);
    transform: translateX(30%) translateY(0%) rotate(45deg);
    -ms-transform-origin: top left;
    -webkit-transform-origin: top left;
    transform-origin: top left;
}

.bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    -ms-transform: translateX(-30%) translateY(0%) rotate(45deg);
    -webkit-transform: translateX(-30%) translateY(0%) rotate(45deg);
    transform: translateX(-30%) translateY(0%) rotate(45deg);
    -ms-transform-origin: bottom right;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
}

.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    -ms-transform: translateX(30%) translateY(0%) rotate(-45deg);
    -webkit-transform: translateX(30%) translateY(0%) rotate(-45deg);
    transform: translateX(30%) translateY(0%) rotate(-45deg);
    -ms-transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
}

/* Popular */
/* align-items: start end center baseline stretch ;
  justify-content: start end center space-around space-between
  */
/* track-line: 1 -1 */
/* grid-template-columns: value value value ... n-value; */
/* grid-template-columns: 270px 270px 270px 270px;
  grid-template-columns: 25% 25% 25% 25%; */
/* grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(4, 1fr); */
/* grid-template-columns: 200px repeat(2, 1fr) 300px; */
/* grid-auto-flow: column; */
/* grid-auto-columns: 1fr; */
/* 1fr = fraction unit */
.popular-list {
    margin-bottom: 40px;
}
    .popular-list .items {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
        .popular-list .items .popular-item {
            flex: 1 1 250px;
            border-radius: 14px;
            overflow: hidden;
            background-color: white;
            box-shadow: 0px 12px 64px rgba(0, 0, 0, 0.06);
        }
ul.pagination {
    list-style: none;
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
        ul.pagination li a {
            color: #222;
            background-color: #fff;
            padding: 5px 10px;
            border-radius: 3px;
            box-shadow: 0px 12px 64px rgba(0, 0, 0, 0.06);
        }
            ul.pagination li.active a {
                color: #fff;
                background: #1e91f6;
            }

            .popular-label {
                display: inline-block;
                font-weight: 500;
                font-size: 12px;
                line-height: 15px;
                color: #fff;
                padding: 4px 18px;
                border-radius: 100rem;
                background-color: var(--second-color);
                position: absolute;
                right: 20px;
                bottom: 0;
                transform: translateY(50%);
            }

.popular-image {
    height: 235px;
    position: relative;
    margin-bottom: 20px;
}

.popular-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popular-content {
    padding: 10px 15px 15px;
}

.popular-time {
    color: var(--gray3);
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 8px;
    display: block;
}

.popular-title {
    color: var(--gray2);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 9px;
}

    .popular-title.center {
        text-align: center;
        margin-bottom: 30px;
    }

    .popular-title a {
        color: #635f85;
    }

        .popular-title a:hover {
            color: var(--second-color);
        }

.popular-top {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.popular-test {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex-direction: column;
}

.popular-icon {
    font-size: 48px;
    margin-bottom: 20px;
    color: #1d9200;
}

.popular-name {
    color: #635f85;
    font-size: 18px;
    line-height: 28px;
}

.popular-group {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--second-color);
    margin-bottom: 15px;
}

.popular-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    gap: 0 40px;
    margin-bottom: 20px;
}

.popular-review {
    font-size: 13px;
    line-height: 22px;
}

.popular-practice {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.popular-button {
    font-size: 14px;
    font-weight: 500;
    color: white;
    padding: 8px 30px;
    background-color: var(--second-color);
    text-decoration: none;
    border-radius: 8px;
    line-height: 17px;
    transition: all 0.2s linear;
    display: inline-block;
}

    .popular-button:hover {
        background-color: #f48c06;
    }

@media screen and (min-width: 1024px) {
    .popular-list {
        margin-bottom: 70px;
    }
}

.practice-video,
.practice-previous {
    border: 1px solid #7f8ea1;
    border-radius: 50%;
    padding: 8px;
    color: #635f85;
    font-size: 22px;
}

    .practice-video.active,
    .practice-previous.active {
        border-color: #f48c06;
        color: #f48c06;
    }

.course-title {
    line-height: 22px;
}

:root {
    --progress-bar-width: 90px;
    --progress-bar-height: 90px;
    --font-size: 20px;
}

.progress-test {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.circular-progress {
    width: var(--progress-bar-width);
    height: var(--progress-bar-height);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner-circle {
    position: absolute;
    width: calc(var(--progress-bar-width) - 30px);
    height: calc(var(--progress-bar-height) - 30px);
    border-radius: 50%;
    background-color: lightgrey;
}

.percentage {
    position: relative;
    font-size: var(--font-size);
    color: rgba(0, 0, 0, 0.8);
}

@media screen and (max-width: 800px) {
    :root {
        --progress-bar-width: 150px;
        --progress-bar-height: 150px;
        --font-size: 1.3rem;
    }
}

@media screen and (max-width: 500px) {
    :root {
        --progress-bar-width: 120px;
        --progress-bar-height: 120px;
        --font-size: 1rem;
    }
}

.pagination-page {
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: 40px;
}

    .pagination-page li {
        display: inline;
    }

        .pagination-page li a {
            display: inline-block;
            text-decoration: none;
            padding: 5px 10px;
            color: #000;
        }

        /* Active and Hoverable Pagination */
        .pagination-page li a {
            border-radius: 5px;
            -webkit-transition: background-color 0.3s;
            transition: background-color 0.3s;
        }

            .pagination-page li a.active {
                background-color: #f48c06;
                color: #fff;
            }

            .pagination-page li a:hover:not(.active) {
                background-color: var(--second-color);
                color: #fff;
            }

.container-dashboard {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    gap: 20px;
}

.sidebar {
    padding: 10px 10px;
    border: 1px solid #eee;
    border-radius: 10px;
}

@media screen and (max-width: 1200px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        bottom: 0;
        z-index: 9;
        transition: transform 0.25s linear;
        transform: translateX(-100%);
    }
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    --gap: 26px;
    list-style: none;
}

    .sidebar-menu:not(:last-child):after {
        content: "";
        display: block;
        height: 1px;
        margin-block: var(--gap);
    }

.sidebar-menu-heading {
    font-size: 13px;
    margin-bottom: 10px;
    color: #2f327d;
    padding-left: 20px;
}

.sidebar-menu-icon {
    flex: 0 0 24px;
}

.sidebar-menu-link {
    display: flex;
    align-items: center;
    color: #2f327d;
    gap: 10px;
    font-size: 14px;
    line-height: 143%;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 12px;
    transition: all 0.2s linear;
}

    .sidebar-menu-link:hover {
        background: var(--second-color);
        color: white;
    }

.sidebar-menu .active {
    background: var(--second-color);
    color: #fff;
    border-radius: 12px;
}

    .sidebar-menu .active a {
        color: #fff;
    }

.dashboard {
    margin-bottom: 160px;
    padding: 0 20px;
}

.dashboard-content {
    display: none;
}

    .dashboard-content.is-show.active {
        display: block;
    }

.dashboard-header {
    padding: 0 15px;
    margin: 0 auto 35px;
}

    .dashboard-header .global-heading {
        font-size: 20px;
        font-weight: 500;
    }

.dashboard-header__center {
    text-align: center;
}

.dashboard-list {
    max-width: 1500px;
    margin: 80px auto 50px;
    padding: 0 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
}

.dashboard-item {
    background: #ffffff;
    box-shadow: 0px 10px 5px rgba(38, 45, 118, 0.08);
    border-radius: 15px;
    padding: 0 15px 15px;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    text-align: center;
}

.dashboard-icon {
    width: 60px;
    height: 60px;
    border-radius: 100rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-30px);
    margin-bottom: 15px;
    font-size: 28px;
    color: #fff;
}

.dashboard-title {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--second-color);
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.dashboard-desc {
    font-size: 1rem;
    font-weight: 600;
    line-height: 180%;
    color: #635f85;
    margin-top: auto;
}

.dashboard-table__empty {
    align-items: center;
    text-align: center;
    padding: 50px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
}

    .dashboard-table__empty h3 {
        margin-bottom: 20px;
    }

.dashboard-purchase {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
}

.filter-option {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
    align-items: center;
}

.filter-control {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 160px;
    height: 35px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff7d00;
    -webkit-transition: .4s;
    transition: .4s;
    white-space: nowrap;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 7px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: var(--second-color);
}

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

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

/*------ ADDED CSS ---------*/
.on {
    display: none;
}

.on, .off {
    color: white;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    font-size: 14px;
    user-select: none;
}

input:checked + .slider .on {
    display: block;
}

input:checked + .slider .off {
    display: none;
}

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

    .slider.round:before {
        border-radius: 50%;
    }

.btn-reset, .btn-apply {
    padding: 10px 15px;
    border-radius: 10px;
    background-color: var(--second-color);
    display: block;
    transition: all 0.2s linear;
    color: #fff;
    cursor: pointer;
}

    .btn-reset:hover, .btn-apply:hover {
        background-color: #e7e7e7;
        color: #333;
    }

.table {
    display: table;
}

.table-head {
    display: table-header-group;
}

.row {
    display: table-row;
}

.column {
    display: table-cell;
}

.table {
    display: table;
    /* Defines a Table */
    font-size: 14px;
    border-bottom: 2px solid #dddddd;
    color: #333;
    margin: 10px 0;
    width: 100%;
}

.table-head {
    display: table-header-group;
    /* Defines a table header group */
}

    .table-head .column {
        /* Column inside the table-head */
        background: var(--second-color);
        color: #fff;
        border-right: 1px solid #ccc;
        border-bottom: none;
    }

        .table-head .column:first-child {
            border-top-left-radius: 10px 10px;
        }

        .table-head .column:last-child {
            border-top-right-radius: 10px 10px;
        }

        .table-head .column:hover {
            /* Column hover inside the table-head */
            background: #0094c5;
        }

.row {
    display: table-row;
    /* Defines a table row */
}

    .row .column:nth-child(1) {
        /* First column in a row */
        border-left: 1px solid #ccc;
    }

    .row:last-child .column {
        /* column in a last row */
        border-bottom: none;
    }

.column {
    display: table-cell;
    /* Defines a table cell */
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    line-height: 1.8em;
}

    .column:hover {
        background: #f9f9f9;
    }

/* Responsive table */
@media all and (max-width: 640px) {
    .table,
    .row,
    .column,
    .column:before {
        display: block;
        /* Converts a table, table row, table column and table column:before into a block element */
    }

        .table,
        .row .column:last-child {
            border-bottom: none;
        }

    .table-head {
        position: absolute;
        /* Hides table head but not using display none */
        top: -1000em;
        left: -1000em;
    }

    .row {
        border: 1px solid #ccc;
        border-top: 2px solid #dddddd;
        border-bottom: 2px solid #dddddd;
        margin: 20px 0;
    }

        .row .column:nth-child(1) {
            /* first column of the row */
            border-left: none;
        }

        .row .column:last-child {
            /* last column of the row */
            border-right: none;
        }

        .row:last-child .column,
        .column {
            /* Column in the last row and column */
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
        }

            .column:before {
                /* prints the value of data-label attribute before the column data */
                font-weight: bold;
                padding-right: 20px;
                font-size: 12px;
                content: " " attr(data-label) ":";
                /* call the attribute value of data-label and adds a string // */
            }
}

.dropdowndb {
    position: relative;
    background: #fff;
    border-radius: 10px;
}

.dropdowndb-list {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 10;
    border-radius: 12px;
    background-color: white;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    transform: translateY(20px);
}

    .dropdowndb-list:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 20px;
        transform: translateY(-100%);
        background-color: transparent;
        opacity: 0;
    }

.dropdowndb-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;
    border: 1px solid #ccc;
    color: #2f327d;
    cursor: pointer;
    overflow: hidden;
}

    .dropdowndb-select a {
        background: var(--second-color);
        padding: 10px 15px;
        color: #fff;
    }

        .dropdowndb-select a:hover {
            color: #ff7d00;
        }

.dropdowndb-prevent-select {
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
}

    .dropdowndb-prevent-select a {
        color: #ccc;
    }

.dropdowndb-item {
    padding: 10px 15px;
    border: 0;
}

    .dropdowndb-item .bx {
        padding-right: 10px;
    }

    .dropdowndb-item:hover {
        background-color: #f48c06;
        color: #fff;
        cursor: pointer;
    }

    .dropdowndb-item:first-child {
        border-radius: 8px;
    }

.dropdowndb:hover .dropdowndb-list {
    opacity: 1;
    visibility: visible;
}

.dropdowndb-icon {
    transition: all 0.2s ease;
    padding-right: 10px;
}

    .dropdowndb-icon:hover {
        transform: rotate(-180deg);
    }

.container-box {
    display: inline-block;
    text-align: left;
    padding-bottom: 32px;
    max-width: 880px;
    margin-left: 5%;
    margin-right: 5%;
}

.features {
    padding-top: 40px;
    padding-bottom: 64px;
    text-align: center;
}

.selector {
    padding-top: 24px;
    padding-bottom: 40px;
    display: flex;
}

.feature-bullet {
    display: flex;
}

.tab-cont {
    position: -webkit-sticky;
    position: sticky;
    top: 16px;
    flex: 1;
    max-width: 235px;
    background-color: #FFFFFF;
    height: 100%;
    border: 2px solid #F0F0F0;
    outline: 0;
    z-index: 1;
}

    .tab-cont button {
        display: flex;
        width: 235px;
        background-color: #FFFFFF;
        padding: 24px;
        color: #303132;
        font-family: sans-serif;
        font-weight: 200;
        font-size: 18px;
        line-height: 26px;
        text-align: left;
        border-color: transparent;
        border-bottom: 2px solid #F0F0F0;
        outline: 0;
    }

        .tab-cont button:hover {
            background-color: #F8F9FA;
            cursor: pointer;
        }

.tab-content {
    flex: 9;
    height: 100%;
    padding-left: 32px;
    animation: anime 1.5s;
    text-align: left;
    display: none;
    font-family: sans-serif;
}

    .tab-content.active {
        display: block;
    }

.tab-cont .but.active {
    background-color: #FFFFFF;
    color: #3A62CA;
    border-left: 3px solid #3A62CA;
    text-decoration: none;
    outline: 0;
    font-weight: 500;
}

@keyframes anime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media only screen and (max-width: 800px) {
    .tab-cont {
        display: flex;
        flex-direction: row;
        border: none;
    }

        .tab-cont .but.active {
            border-left: none;
            border-bottom: 4px solid #3A62CA;
        }

    .selector {
        flex-direction: column;
    }

    .tab-content {
        padding-left: 0;
    }
}

.blog {
    margin-bottom: var(--section-spacing);
}

.blog-header {
    text-align: center;
    margin-bottom: 78px;
}

.blog-banner {
    background-image: url("../images/home-banner.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    margin-bottom: 30px;
}

.blog-inner {
    height: 600px;
    margin: 0 auto;
    max-width: 650px;
    padding-inline-end: 0;
    padding-inline-start: 0;
    width: 100%;
    flex-shrink: 1;
    flex-wrap: nowrap;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
}

.blog-name {
    font-size: 48px;
    color: #fff;
    line-height: 50px;
    text-align: center;
}

.blog-content-detail {
    margin-bottom: 50px;
}

    .blog-content-detail p {
        margin-bottom: 20px;
    }

    .blog-content-detail img {
        width: 100%;
    }

.blog-author {
    text-align: right;
    color: #252323;
}

.blog-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 34px;
    margin-bottom: 50px;
}

.blog-item {
    border-radius: 17px;
    transition: all 0.2s linear;
}

    .blog-item:hover {
        background: #ffffff;
        box-shadow: 0px 46px 100px -31px rgba(0, 0, 0, 0.1);
    }

        .blog-item:hover .blog-title a {
            color: #2f327d;
        }

            .blog-item:hover .blog-title a:hover {
                color: #ff7d00;
            }

.blog-content {
    padding: 33px 23px;
}

.blog-image {
    height: 322px;
}

    .blog-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 17px 17px 0px 0px;
    }

.blog-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    color: #2f327d;
    margin-bottom: 9px;
    transition: all 0.2s linear;
}

.blog-desc {
    font-size: 13px;
    line-height: 20px;
    color: #7f8ea1;
}

.blog .global-heading {
    max-width: 454px;
    margin: 0 auto 25px;
}

@media screen and (max-width: 1023px) {
    .blog-header {
        margin-bottom: 35px;
    }

    .blog-list {
        display: grid;
        justify-content: flex-start;
        grid-auto-columns: 300px;
        grid-auto-flow: column;
        grid-gap: 1.5rem;
        overflow: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 20px;
        padding: 20px;
        margin-left: -20px;
        grid-template-columns: unset;
    }

        .blog-list::-webkit-scrollbar {
            display: none;
            width: 0;
        }

        .blog-list > * {
            scroll-snap-align: start;
        }
}

.about, .vocalulary {
    padding: 0 15px;
    max-width: 1330px;
    margin: 0 auto 160px;
}

.about-header, .vocalulary-header {
    text-align: center;
    max-width: 1110px;
    margin: 0 auto 80px;
}

.about-list, .vocalulary-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 100px;
}

.about-item, .vocalulary-item {
    position: relative;
}

.about-content, .vocalulary-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(23, 27, 65, 0.2);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    border-radius: 20px;
    text-align: center;
}

    .about-content p, .vocalulary-content p {
        margin-bottom: 20px;
    }

.about-work, .vocalulary-work {
    list-style: none;
    text-align: left;
}

    .about-work li, .vocalulary-work li {
        padding: 10px 0;
    }

.about-title, .vocalulary-title {
    font-weight: 600;
    font-size: 32px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.about-student, .vocalulary-student {
    background: rgba(35, 189, 238, 0.9);
    color: white;
    padding: 24px 40px;
}

.about .btn--outline, .vocalulary .btn--outline {
    color: white;
    padding: 24px 40px;
    border: 1px solid currentColor;
}

.review {
    margin-bottom: 200px;
    padding-bottom: 62px;
    position: relative;
}

    .review .global-heading--big {
        color: white;
        text-align: center;
    }

.review-dots1 {
    left: 53px;
    top: 0;
    transform: translate(0, -50%);
}

.review-heading {
    --heading-color: white;
    margin-bottom: 66px;
}

.review-main {
    background: linear-gradient(208.18deg, #67c3f3 9.05%, #5a98f2 76.74%);
    border-radius: 24px;
    padding: 64px 118px 80px;
    overflow: hidden;
    height: 350px;
}

.review-dots2 {
    right: 0;
    top: 0;
    transform: translate(20%, -20%);
}

.review-list.slick-slider {
    position: unset;
}

.review-content {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0 30px;
    color: white;
    align-items: center;
}

.review-customer {
    display: flex;
    align-items: center;
    gap: 0 29px;
}

.review-avatar {
    width: 141px;
    height: 141px;
    flex-shrink: 0;
}

    .review-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 4px solid white;
        border-radius: 100rem;
    }

.review-name {
    font-size: 22px;
    margin-bottom: 15px;
}

.review-job {
    font-size: 18px;
    font-weight: 400;
}

.review-desc {
    font-size: 19px;
    line-height: 158%;
    color: rgba(255, 255, 255, 0.9);
}

.review .slick-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0 18px;
}

    .review .slick-dots .slick-active button {
        opacity: 1;
    }

    .review .slick-dots button {
        width: 10px;
        height: 10px;
        border-radius: 100rem;
        background-color: #5b9bf3;
        font-size: 0;
        outline: none;
        border: 0;
        opacity: 0.3;
    }

.review .slick-arrow {
    position: absolute;
    bottom: 0;
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--second-color);
    font-size: 24px;
    left: 50%;
}

.review .slick-next {
    transform: translate(120px, 0);
    left: auto;
    right: 50%;
}

.review .slick-prev {
    transform: translate(-120px, 0);
}

@media screen and (max-width: 1023px) {
    .review {
        margin-bottom: 100px;
    }

    .review-main {
        padding: 40px 30px;
    }

    .review-heading {
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 767px) {
    .review-content {
        grid-template-columns: 1fr;
        grid-gap: 34px 0;
    }

    .review-avatar {
        width: 100px;
        height: 100px;
    }

    .review-customer {
        gap: 0 15px;
    }

    .review-name {
        font-size: 18px;
    }

    .review-desc, .review-job {
        font-size: 16px;
    }
}

.block {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 85px;
}

.block-caption {
    text-transform: uppercase;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    padding: 0 10px;
}

    .block-caption:before {
        left: 0;
        transform: translateX(-100%) translateY(-50%);
    }

    .block-caption:after {
        right: 0;
        transform: translateX(100%) translateY(-50%);
    }

    .block-caption:before, .block-caption:after {
        content: "";
        position: absolute;
        height: 2px;
        width: 30px;
        background-color: #ff7d00;
        top: 50%;
    }

.block-caption--left {
    padding-left: 40px;
    margin-bottom: 30px;
}

    .block-caption--left:after {
        display: none;
    }

    .block-caption--left:before {
        transform: none;
    }

.block-heading {
    font-size: 50px;
    line-height: 1.4;
    font-weight: 600;
}

    .block-heading span {
        display: block;
    }

.plan {
    padding-bottom: 100px;
}

.plan-list {
    display: flex;
    justify-content: space-between;
}

.plan-item {
    border: 1px solid #eee;
    border-radius: 20px;
    width: calc(33.33% - 30px);
    padding: 75px 25px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.2s linear;
}

@media (hover: hover) {
    .plan-item:hover {
        border-color: transparent;
        box-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.03);
    }

        .plan-item:hover .plan-start {
            background-color: #ff7d00;
            border-color: #ff7d00;
            color: white;
        }
}

.plan-name {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 25px;
    line-height: 28px;
}

.plan-time {
    margin-bottom: 25px;
}

.plan-price {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 30px;
    padding-bottom: 40px;
    border-bottom: 1px solid #eee;
}

.plan-symbol {
    vertical-align: top;
}

.plan-month {
    font-weight: 500;
    font-size: 40px;
}

.plan-desc {
    margin-bottom: 55px;
}

.plan-feature {
    font-size: 20px;
    margin-bottom: 35px;
    font-weight: 500;
}

.plan-feature-item {
    display: flex;
    align-items: center;
    color: #635f85;
    margin-bottom: 25px;
    font-weight: 300;
}

.plan-feature-title {
    padding-left: 10px;
}

.plan-feature-item:last-of-type {
    margin-bottom: 75px;
}

.plan-feature-icon {
    font-size: 20px;
    margin-right: 10px;
}

.plan-start {
    margin: auto auto 0;
    display: block;
    width: max-content;
    text-transform: capitalize;
}

.plan-label {
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    background-color: #ff858d;
    color: white;
    text-transform: capitalize;
    border-radius: 0 20px 0 20px;
    font-size: 14px;
}

@media screen and (max-width: 1023px) {
    .plan {
        padding-bottom: 80px;
    }

    .plan-list {
        display: grid;
        justify-content: flex-start;
        grid-auto-columns: 400px;
        grid-auto-flow: column;
        grid-gap: 0 50px;
        overflow: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: unset;
    }

        .plan-list::-webkit-scrollbar {
            display: none;
            width: 0;
        }

        .plan-list > * {
            scroll-snap-align: start;
            width: 100%;
        }
}

@media screen and (max-width: 479px) {
    .plan-list {
        grid-auto-columns: 80%;
    }
}

.book {
    padding-bottom: 50px;
}

.book-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 30px;
}

.book-item {
    padding: 40px 30px;
    border: 1px solid #e7e7e7;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    line-height: 1.4;
    transition: all 0.2s linear;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.book-more {
    transition: all 0.2s linear;
}

.book-image {
    margin-bottom: 35px;
    max-height: 115px;
}

.book-title {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 30px;
}

.book-desc {
    margin-bottom: 35px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
    word-break: break-word;
}

@media (hover: hover) {
    .book-item:hover {
        border-color: transparent;
        box-shadow: 0 0 50px 10px rgba(0, 0, 0, 0.03);
    }

        .book-item:hover .work-more {
            border-color: #ff7d00;
            background-color: #ff7d00;
            color: white;
        }
}

@media screen and (max-width: 1023px) {
    .book {
        padding-top: 80px;
    }

    .book-list {
        display: grid;
        justify-content: flex-start;
        grid-auto-columns: 450px;
        grid-auto-flow: column;
        grid-gap: 0 50px;
        overflow: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: unset;
    }

        .book-list::-webkit-scrollbar {
            display: none;
            width: 0;
        }

        .book-list > * {
            scroll-snap-align: start;
        }

    .book-item {
        width: 100%;
    }
}

@media screen and (max-width: 479px) {
    .book-list {
        grid-auto-columns: 80%;
    }
}

.user {
    position: relative;
}

.user__actions {
    margin-left: 80px;
}

.user__profile {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .25rem;
    cursor: pointer;
}

.user__image {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    justify-items: center;
}

    .user__image img {
        position: absolute;
        width: 38px;
        bottom: -1px;
    }

.user__names h3 {
    font-size: var(--normal-font-size);
    font-weight: var(--font-semi-bold);
}

.user__names span {
    display: block;
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
    text-align: right;
}

.user__list {
    position: absolute;
    top: 4.5rem;
    background-color: var(--second-color);
    box-shadow: 0 8px 16px rgba(16, 19, 25, 0.2);
    display: grid;
    row-gap: .25rem;
    padding: 1rem 1.25rem;
    border-radius: .25rem;
    z-index: 9;
    transform: translateY(-0.75rem);
    opacity: 0;
    transition: transform .4s, opacity .4s;
    pointer-events: none;
}

.user__link {
    color: #e7e7e7;
    display: flex;
    align-items: center;
    column-gap: 1rem;
    padding: .25rem 1.5rem .25rem .5rem;
    border-radius: .25rem;
    transition: background-color .4s;
}

    .user__link i {
        font-size: 1rem;
    }

    .user__link span {
        font-size: var(--small-font-size);
        font-weight: var(--font-medium);
    }

    .user__link:hover {
        background-color: #f4f6fd;
    }

.user__list::after {
    content: '';
    width: 16px;
    height: 16px;
    background-color: var(--second-color);
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    margin-inline: auto;
    rotate: -45deg;
}

/* Show dropdown */
.show-user .user__list {
    transform: translateY(0);
    opacity: 1;
    pointer-events: initial;
}

@media screen and (min-width: 1150px) {
    .user__profile {
        column-gap: 1rem;
    }

    .user__list {
        top: 3.5rem;
    }
}

@media screen and (min-width: 768px) {
    .user__actions {
        margin-left: 0;
    }
}

/*=============== LOGIN  ===============*/
.container {
    margin: 0 20px;
}

.header-form {
    align-items: center;
    padding: 3rem 0;
    margin: 0 auto;
}

    .header-form a {
        color: #f48c06;
        text-align: center;
        font-size: 3rem;
        display: block;
    }

        .header-form a:hover {
            color: #ff7d00;
        }

.login {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.login__blob {
    display: none;
}

.login__title {
    font-size: var(--big-font-size);
    color: var(--title-color);
    text-align: center;
    margin-bottom: 2rem;
}

.login__box {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--container-color);
    border-radius: 1rem;
}

.login__input {
    background: none;
    width: 100%;
    padding: 1.5rem 2.5rem 1.5rem 1.25rem;
    font-weight: var(--font-semi-bold);
    border: 3px solid transparent;
    border-radius: 1rem;
    z-index: 1;
    transition: border-color .4s;
}

    .login__input:autofill {
        transition: background-color 6000s, color 6000s;
    }

.login__label {
    position: absolute;
    left: 1.25rem;
    font-weight: var(--font-semi-bold);
    transition: transform .4s, font-size .4s, color .4s;
}

.login__icon {
    position: absolute;
    right: 1rem;
    font-size: 1.25rem;
    transition: color .4s;
}

.login__password {
    cursor: pointer;
    z-index: 10;
}

.login__forgot {
    display: block;
    width: max-content;
    margin: 1rem 0 0 auto;
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--text-color);
    transition: color .4s;
}

    .login__forgot:hover {
        color: var(--first-color);
    }

.login__button {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    background-color: var(--first-color);
    color: #e7e7e7;
    font-weight: var(--font-semi-bold);
    padding-block: 1.5rem;
    border-radius: 4rem;
    margin-block: 2rem;
    cursor: pointer;
    transition: background-color .4s, box-shadow .4s;
}

    .login__button:hover {
        background-color: var(--first-color-alt);
        color: #ff7d00;
        box-shadow: 0 8px 24px rgba(7, 87, 157, 0.3);
    }

.login__social {
    margin-bottom: 2rem;
}

.login__social-title {
    text-align: center;
    font-size: var(--small-font-size);
    font-weight: var(--font-semi-bold);
    color: var(--title-color);
    margin-bottom: 1rem;
}

.login__social-img {
    width: 1rem;
}

.login__social-links {
    display: flex;
    justify-content: center;
    column-gap: 1.5rem;
}

.login__social-link {
    width: 32px;
    height: 32px;
    background-color: var(--body-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: .5rem;
    display: grid;
    place-items: center;
    transition: transform .4s;
}

    .login__social-link:hover {
        transform: translateY(-0.25rem);
    }

.login__switch {
    text-align: center;
    font-size: var(--small-font-size);
}

    .login__switch button {
        background: none;
        color: #2f327d;
        font-size: var(--small-font-size);
        font-weight: var(--font-semi-bold);
        border: none;
        cursor: pointer;
        transition: color .4s;
    }

        .login__switch button:hover {
            color: #ff7d00;
        }

.login__back {
    display: flex;
    justify-content: space-evenly;
}

    .login__back a {
        color: #2f327d;
    }

        .login__back a:hover {
            color: #ff7d00;
        }

.login__access, .login__register {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    transition: transform .4s, opacity .4s .1s;
}

.login__register {
    transform: translateX(15rem);
    opacity: 0;
    pointer-events: none;
}

/* Input focus move up label */
.login__input:focus ~ .login__label {
    transform: translateY(-12px);
    font-size: var(--tiny-font-size);
}

.login__input:focus {
    padding-block: 2rem 1rem;
}

/* Input focus sticky top label */
.login__input:not(:placeholder-shown).login__input:not(:focus) ~ .login__label {
    transform: translateY(-12px);
    font-size: var(--tiny-font-size);
}

.login__input:not(:placeholder-shown).login__input:not(:focus) {
    padding-block: 2rem 1rem;
}

/* Input focus color */
.login__input:focus {
    border-color: var(--first-color);
}

    .login__input:focus ~ .login__label,
    .login__input:focus ~ .login__icon {
        color: var(--first-color);
    }

/* Show hide login & create account */
.active .login__access {
    transform: translateX(15rem);
    opacity: 0;
    pointer-events: none;
}

.active .login__register {
    transform: translateX(0);
    opacity: 1;
    pointer-events: initial;
}

.active .login__fogot-pass {
    transform: translateX(0);
    opacity: 1;
    pointer-events: initial;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
    .container {
        margin-inline: 1rem;
    }
}

/* For medium devices */
@media screen and (min-width: 540px) {
    .login__area {
        margin-inline: auto;
    }
}

@media screen and (min-width: 350px) and (max-height: 600px) {
    .login {
        height: 760px;
    }
}

/* For large devices */
@media screen and (min-width: 1150px) {
    .container {
        margin: 0 20px;
        margin-inline: auto;
    }

    .login__area {
        margin: initial;
    }

    .login__access, .login__register, .login__forgot-pass {
        width: 600px;
        margin: 0 auto;
    }

    .login__title {
        text-align: initial;
        margin-bottom: 3rem;
        text-align: center;
    }

    .login__button {
        margin-bottom: 3rem;
    }

    .login__group {
        grid-template-columns: repeat(2, 1fr);
    }

    .login__blob {
        display: block;
        height: 100vh;
        position: absolute;
        top: 0;
        right: 0;
    }

    .login__img {
        transform: translate(0rem, 0rem);
    }
}

.wrong-select {
    border-color: red !important;
    border-width: 2px !important;
    border-style: solid;
}

.wrong-text {
    color: red;
    font-weight: bold;
}

    .wrong-text > small{
        color: #333;
        font-weight: normal;
    }

    .correct-text {
        font-weight: bold;
        color: #1d9200;
    }

.wrong-question {
    background: red !important;
    color: #fff !important;
}

.correct-question {
    background: #1d9200 !important;
    color: #fff !important;
    border-width: 1px;
    border-style: solid;
}

.correct-select {
    border-color: #1d9200 !important;
    border-width: 2px !important;
}

.review-question .list-review {
    list-style: none;
}

.review-question .answer {
    padding: 10px 0;
}

    .review-question .answer::marker {
        font-weight: bold;
    }

.review-question .explain, .review-question .locate, .review-question .report {
    padding: 5px;
    border-radius: 5px;
    color: #1d9200;
    border: 1px solid #1d9200;
    font-size: 14px;
    margin-right: 10px;
}

.review-question .text-control {
    margin: 10px 0;
}

.locate.locate_explain {
    background: yellow;
}

.review-question .show-answer.hide {
    display: none;
}

.sticky-header {
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: #fff;
    z-index: 9991;
}

.sticky-audio {
    margin-top: 120px;
}

.sticky-main {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    font-size: 1.1rem;
    line-height: 1.5;
    padding: 0 20px;
    position: relative;
    margin-bottom: 150px;
    margin-top: 80px;
}

    .sticky-main .title-main,
    .sticky-main .title-question {
        text-align: center;
        margin: 20px 0;
    }

    .sticky-main .title-question {
        color: var(--second-color);
    }

    .sticky-main strong, .sticky-main p {
        margin-bottom: 10px;
        line-height: 24px;
    }

.sticky-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: var(--second-color);
}

    .sticky-title .bx {
        font-size: 48px;
        padding-right: 10px;
    }

.sticky-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

    .sticky-button a {
        display: block;
        padding: 8px;
        font-size: 24px;
        color: #f48c06;
        border-radius: 50%;
        border: 1px solid #eee;
        transition: all .5s ease-in-out;
    }

        .sticky-button a:hover {
            color: var(--second-color);
            border-color: var(--second-color);
        }

.sticky-footer {
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 9999;
}

.sticky-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /*always have atleast the height of viewport*/
    min-width: 100%;
    margin: 0;
    overflow: hidden;
    position: relative;
}

::-webkit-scrollbar {
    width: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(208.18deg, #67c3f3 9.05%, #5a98f2 76.74%);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.resizable-x,
.resizable-y {
    display: flex;
    overflow: hidden;
}

.resizable-x {
    max-height: calc(100vh - 210px);
    overflow: auto;
    margin-bottom: 20px;
}

.resizable-y {
    flex-direction: column;
}

.resizer-x,
.resizer-y {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px;
    border-radius: 10px;
    border: 0 1px 0 solid;
}

.resizer-x {
    z-index: 2;
    cursor: col-resize;
}

    .resizer-x::before,
    .resizer-x::after {
        content: "";
        width: 2px;
        height: 16px;
        margin: 2px;
        background: #b40a0a;
    }

.resizer-y {
    z-index: 1;
    cursor: row-resize;
    flex-direction: column;
}

    .resizer-y::before,
    .resizer-y::after {
        content: "";
        width: 10px;
        height: 2px;
        margin: 2px;
    }

.resizer-left,
.resizer-right {
    overflow-y: scroll;
}

    .resizer-left p,
    .resizer-right p {
        white-space: normal;
        overflow: hidden;
    }

.overlay {
    position: absolute;
    top: -300px;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 999;
}

    .overlay:target {
        visibility: visible;
        opacity: 1;
        top: 0px;
    }

.popup {
    margin: 70px auto;
    padding: 30px;
    background: #fff;
    border-radius: 5px;
    width: 50%;
    position: relative;
    transition: all 1.5s ease-in-out;
}

    .popup.submit {
        align-items: center;
        text-align: center;
        width: 30%;
    }

        .popup.submit .icmess {
            font-size: 68px;
            margin-bottom: 30px;
        }

    .popup .content {
        margin-top: 20px;
    }

    .popup h2 {
        text-align: center;
        margin-bottom: 30px;
    }

    .popup .close {
        position: absolute;
        top: 20px;
        right: 30px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
    }

        .popup .close:hover {
            color: orange;
            transform: rotate(90deg);
        }

.question-wrong {
    margin: 30px 0;
}

.question-owner {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

    .question-owner .readonly {
        border: 1px solid #ccc;
        background: #eee;
        border-radius: 5px;
        width: 100%;
        padding: 20px;
    }

.question-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.question-col {
    flex: 1;
}

/* input-styles */
.input-styles {
    position: relative;
    display: block;
    margin: 25px auto;
}

    .input-styles span {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 15px;
        color: #333;
        font-size: 14px;
        pointer-events: none;
        transition: all 0.2s linear;
    }

    .input-styles textarea {
        width: 100%;
        background-color: #fafafa;
        border-radius: 8px;
        padding: 15px;
        border: none;
        outline: none;
        border: 1px solid transparent;
        transition: all 0.2s linear;
    }

        .input-styles textarea:not(:placeholder-shown) + span,
        .input-styles textarea:focus + span {
            /* display: none; */
            top: 0;
            left: 10px;
            background-color: white;
            display: inline-block;
            padding: 5px;
        }

        .input-styles textarea:focus {
            border-color: #f62682;
            background-color: transparent;
        }

.select-question {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.search-test {
    max-width: 500px;
    margin: 25px auto;
    position: relative;
}

    .search-test .isearch {
        position: absolute;
        top: 16px;
        left: 15px;
    }

.search-test-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
}

.search-test-input {
    background-color: #fafafa;
    border-radius: 8px;
    padding: 15px;
    padding-left: 35px;
    border: none;
    outline: none;
    border: 1px solid transparent;
    transition: all 0.2s linear;
}

    .search-test-input:focus {
        border-color: #2979ff;
        background-color: transparent;
    }

aside.sidebar-note {
    -webkit-box-flex: 0;
    -webkit-flex: 0;
    -moz-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
    display: none;
    -webkit-transform: translateX(500px);
    -moz-transform: translateX(500px);
    -ms-transform: translateX(500px);
    transform: translateX(500px);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    -moz-transition: transform .2s, -moz-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s, -moz-transform .2s;
}

    aside.sidebar-note.active {
        display: flex;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 200px;
        -moz-box-flex: 0;
        -ms-flex: 0 0 200px;
        flex: 0 0 200px;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        transition: visibility 0.3s, opacity 0.3s, backdrop-filter 0.3s;
    }

.block-dom {
    width: calc(100% - 350px);
    height: 100%;
    opacity: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
}

.sidebar-content {
    width: 350px;
    padding: 5px 20px;
    background: #fff;
    outline: 1px solid #ccc;
    border-radius: 4px 0 0 4px;
    overflow-y: scroll;
    transition: right 0.3s ease-in-out, opacity 0.3s ease-in-out;
    scroll-behavior: smooth;
}

    .sidebar-content::-webkit-scrollbar {
        width: 10px;
    }

    .sidebar-content::-webkit-scrollbar-track {
        border-radius: 8px;
        box-shadow: inset 0 0 5px #ccc;
    }

    .sidebar-content::-webkit-scrollbar-thumb {
        background-color: var(--slate-400);
    }

        .sidebar-content::-webkit-scrollbar-thumb:hover {
            background-color: var(--slate-300);
        }

.sidebar-note.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    user-select: auto;
    -mox-user-select: auto;
}

.sidebar-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-note.show .sidebar-content {
    opacity: 1;
    right: 0;
}

.close-sidebar {
    background: none;
    z-index: 102;
    font-size: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: 0;
}

    .close-sidebar .bx:hover {
        color: orange;
        transform: rotate(90deg);
    }

.list-noted .title-note {
    font-weight: 500;
    text-align: center;
}

.list-noted .lists {
    padding: 20px;
}

    .list-noted .lists li {
        display: flex;
        justify-content: space-between;
        list-style: decimal;
        padding: 10px;
        align-items: center;
    }

    .list-noted .lists a {
        color: #3b57e3;
    }

        .list-noted .lists a:hover {
            color: var(--second-color);
        }

.list-noted .item-list {
    max-width: 400px;
    margin: 0 auto;
    position: relative;
}

.list-noted .item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    margin: 10px 0;
    background: white;
    border-radius: 5px;
    transition: background-color 0.2s;
}

    .list-noted .item:hover {
        background-color: #f8f9fa;
    }

.list-noted .item-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    cursor: pointer;
    background: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    user-select: none;
    position: relative;
}

    .list-noted .item-icon:hover .toggle-el {
        opacity: 1;
    }

    .list-noted .item-icon:hover {
        background: #0056b3;
    }

.list-noted .item-text {
    flex: 1;
    padding: 5px;
}

.list-noted .sub-text {
    padding: 10px 0;
    font-size: 14px;
}

.list-noted .context-menu {
    top: 40%;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 120px;
}

.list-noted .context-menu-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

    .list-noted .context-menu-item:last-child {
        border-bottom: none;
    }

    .list-noted .context-menu-item:hover {
        background-color: #f8f9fa;
    }

    .list-noted .context-menu-item.edit {
        color: #007bff;
    }

    .list-noted .context-menu-item.delete {
        color: #dc3545;
    }

.list-noted .edit-form {
    display: none;
    margin-top: 10px;
    flex: 0 0 300px;
}

.list-noted .edit-input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
}

.list-noted .edit-buttons {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.list-noted .btn {
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.2s;
}

.list-noted .btn-save {
    background: #28a745;
    color: white;
}

    .list-noted .btn-save:hover {
        background: #218838;
    }

.list-noted .btn-cancel {
    background: #6c757d;
    color: white;
}

    .list-noted .btn-cancel:hover {
        background: #5a6268;
    }

.list-noted .confirm-dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.list-noted .confirm-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    min-width: 300px;
    line-height: 30px;
}

.list-noted .confirm-buttons {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.list-noted .btn-confirm {
    background: #dc3545;
    color: white;
}

    .list-noted .btn-confirm:hover {
        background: #c82333;
    }

.list-noted .toggle-el {
    transition: all 0.2s ease;
    opacity: 0;
    position: absolute;
    right: -1rem;
    bottom: -5rem;
    z-index: 99999;
}

.list-noted input[type="checkbox"].hide-input:checked + .toggle-el {
    height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.list-noted input.hide-input {
    position: absolute;
    left: -999em;
}

.list-noted label.toggle {
    text-align: center;
    display: inline-block;
    cursor: pointer;
    font-size: 1rem;
    border-radius: 3px;
    user-select: none;
}

.answer-group {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.choose-answer {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.radio-question [type="radio"]:checked,
.radio-question [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

    .radio-question [type="radio"]:checked + label,
    .radio-question [type="radio"]:not(:checked) + label {
        position: relative;
        padding-left: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        color: #666;
    }

        .radio-question [type="radio"]:checked + label:before,
        .radio-question [type="radio"]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border: 1px solid #ddd;
            border-radius: 100%;
            background: #fff;
        }

        .radio-question [type="radio"]:checked + label:after,
        .radio-question [type="radio"]:not(:checked) + label:after {
            content: '';
            width: 10px;
            height: 10px;
            background: var(--second-color);
            position: absolute;
            top: 4px;
            left: 4px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        .radio-question [type="radio"]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        .radio-question [type="radio"]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

.tabs {
    display: flex;
    width: 100%;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ddd;
}

.tab {
    padding: 15px 25px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
    flex: 1;
    text-align: center;
}

    .tab:hover {
        background-color: #e5e5e5;
    }

    .tab.active {
        background-color: #4a90e2;
        color: white;
    }

.content-container {
    position: relative;
}

.tab-content {
    display: none;
    padding: 0 20px;
}

    .tab-content.active {
        display: block;
    }

.tab-title {
    margin-bottom: 20px;
    color: #333;
    font-size: 20px;
    border-bottom: 2px solid #4a90e2;
    padding-bottom: 10px;
}

.form-container {

}
    .form-container input, .form-container select {
        max-width: 110px;
        min-width: 70px;
        margin-left: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 5px;
    }
        .form-container input[type="text"] {
            text-align: center;
        }
        .form-container input[type="text"]::placeholder {
            text-align: center;
            color: var(--second-color);
            font-weight: 600;
        }

        .form-container input[type="radio"],
        .form-container input[type="checkbox"] {
            min-width: auto;
            display: inline-block;
            width: 18px;
            height: 18px;
            padding: 2px;
            background-clip: content-box;
            border: 1px solid #d5d5d5;
            background-color: transparent;
            border-radius: 50%;
            cursor: pointer;
            margin: 0;
        }

    .form-container .question_title {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        gap: 10px;
    }

        .form-container .question_title h6 {
            font-size: 16px;
        }

        .form-container .question_title .question-number {
            margin-left: 0;
            margin-right: 5px;
        }

    .form-container .question_block {
        margin: 20px;
    }

    .form-container .option_item span {
        padding-left: 10px;
    }

    .form-container .question_item {
        display: contents;
    }

.form-group {
    margin-bottom: 10px;
    padding: 0 20px;
}

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
        color: #555;
    }

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
}

    .form-control:focus {
        border-color: #4a90e2;
        outline: none;
        box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }

.navigation-question {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    border-top: 1px solid #eee;
    background: #fff;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 45px;
    z-index: 9999;
}

.nav-button {
    background-color: #4a90e2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: 500;
}

    .nav-button:hover {
        background-color: #3a7bc8;
    }

    .nav-button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }

.item-indicators {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 15px;
}

.action-button {
    position: fixed;
    right: 50px;
    bottom: 65px;
    z-index: 99999;
}

.action-link {
    position: fixed;
    bottom: 75px;
    left: 50px;
    z-index: 9999;
    color: var(--second-color);
}

    .action-link:hover {
        color: #f48c06;
    }

.navigation-btn {
    background: var(--second-color);
    color: #fff;
    padding: 8px 20px;
    border-radius: 5px;
}

    .navigation-btn:hover {
        background: #ccc;
        color: #333;
    }

    .navigation-btn:disabled {
        background: #ccc;
    }

.indicator {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #eee;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    color: #333;
    font-size: 12px;
    font-weight: bold;
}

    .indicator.active {
        background-color: #4a90e2;
        color: #fff;
    }

    .indicator.answered {
        background-color: #29b9e7;
        color: #fff;
    }

.select-container {
    position: relative;
}

    .select-container:after {
        content: "▼";
        font-size: 12px;
        position: absolute;
        right: 10px;
        top: 10px;
        color: #666;
        pointer-events: none;
    }

select.form-control {
    appearance: none;
    padding-right: 30px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .checkbox-group input {
        width: 16px;
        height: 16px;
    }

.form-question {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
}

    .form-question .example {
        display: flex;
        justify-content: space-between;
        max-width: 50%;
        text-align: center;
    }

.list-question {
    padding: 20px;
}

    .list-question li {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        justify-content: space-between;
    }

.item-questions .items-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-questions .item, .item-questions .question_item {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 15px 10px;
}

    .item-questions .item:hover, .item-questions .question_item:hover {
        background-color: #f9f9f9;
        transform: translateY(-2px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .item-questions .question_item.active {
        border: 2px solid #4a90e2;
        background-color: #e6f2ff;
    }

    .item-questions .item.active {
        border: 2px solid #4a90e2;
        background-color: #e6f2ff;
    }

.item-questions .item-header {
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.item-questions .item-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-questions .checkbox.style-checkbox {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .item-questions .checkbox.style-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

        .item-questions .checkbox.style-checkbox input:checked ~ .checkbox__checkmark {
            background-color: var(--second-color);
        }

            .item-questions .checkbox.style-checkbox input:checked ~ .checkbox__checkmark:after {
                opacity: 1;
            }

    .item-questions .checkbox.style-checkbox:hover input ~ .checkbox__checkmark {
        background-color: #eee;
    }

    .item-questions .checkbox.style-checkbox:hover input:checked ~ .checkbox__checkmark {
        background-color: var(--second-color);
    }

    .item-questions .checkbox.style-checkbox:hover input ~ .checkbox__body {
        color: var(--second-color);
    }

    .item-questions .checkbox.style-checkbox .checkbox__checkmark {
        position: absolute;
        top: 1px;
        left: 0;
        height: 22px;
        width: 22px;
        background-color: #ccc;
        transition: background-color 0.25s ease;
        border-radius: 11px;
    }

        .item-questions .checkbox.style-checkbox .checkbox__checkmark:after {
            content: "";
            position: absolute;
            left: 9px;
            top: 5px;
            width: 5px;
            height: 10px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            opacity: 0;
            transition: opacity 0.25s ease;
        }

    .item-questions .checkbox.style-checkbox .checkbox__body {
        line-height: 1.4;
        font-size: 16px;
        transition: color 0.25s ease;
    }

.item-questions .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .item-questions .box select {
        background-color: #0563af;
        color: white;
        padding: 12px;
        width: 250px;
        border: none;
        font-size: 20px;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
        -webkit-appearance: button;
        appearance: button;
        outline: none;
    }

    .item-questions .box select {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
    }

    .item-questions .box::before {
        content: "\f13a";
        font-family: FontAwesome;
        position: absolute;
        top: 0;
        right: 0;
        width: 20%;
        height: 100%;
        text-align: center;
        font-size: 28px;
        line-height: 45px;
        color: rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.1);
        pointer-events: none;
    }

    .item-questions .box:hover::before {
        color: rgba(255, 255, 255, 0.6);
        background-color: rgba(255, 255, 255, 0.2);
    }

    .item-questions .box select option {
        padding: 30px;
    }

.question_item.active select,
.question_item.active input,
.question_item.active input[type="radio"],
.question_item.active input[type="checkbox"] {
    border: 2px solid #4a90e2;
    background: #e6f2ff;
}

.question_item .option_item {
    margin: 5px 5px 5px;
}

    .question_item .option_item:has(input[type="radio"]),
    .question_item .option_item:has(input[type="checkbox"]) {
        display: flex;
        gap: 10px;
        align-items: center;
        counter-increment: option;
    }
        .question_item .option_item:has(input[type="radio"]) .panel_option,
        .question_item .option_item:has(input[type="checkbox"]) .panel_option {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #dfdfdf;
            font-size: 12px;
            font-weight: bold;
            color: #294563;
            border-radius: 50%;
            flex-shrink: 0;
            position: relative;
            padding: 0;
        }
        .question_item .option_item:has(input[type="radio"]) .panel_option::before,
        .question_item .option_item:has(input[type="checkbox"]) .panel_option::before {
            content: counter(option, upper-alpha);
            font-weight: 600;
        }

.question_item.active .option_item {
    background: #e6f2ff;
    margin: 5px 5px 5px;
}

.number-question {
    border-radius: 50%;
    background: var(--second-color);
    font-size: 11px;
    width: 30px;
    height: 30px;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-right: 2px;
}

.breadcrumbs {
    display: flex;
    padding: 10px 20px;
    background-color: #fafafa;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #666;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

    .breadcrumb-item:not(:last-child)::after {
        content: "›";
        margin: 0 10px;
        color: #999;
    }

    .breadcrumb-item.active {
        color: #4a90e2;
        font-weight: bold;
    }

.highlight {
    background-color: #ffffcc;
}

table.result {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
}

    table.result td, table.result th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

@keyframes highlightFade {
    from {
        background-color: #ffffcc;
    }

    to {
        background-color: transparent;
    }
}

.container-audio {
    position: fixed;
    left: 0;
    right: 0;
    top: 58px;
    width: 100%;
    background: #fff;
    z-index: 998;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

    .container-audio .container {
        width: 100%;
        max-width: none;
    }

.result {
    font-size: 1.1rem;
    line-height: 1.5;
    padding: 0px;
    position: relative;
    margin-top: 15px;
}

.result-title {
    margin-bottom: 20px;
}

.result-test {
    background: #f2f2f2;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    white-space: nowrap;
}

.result-header {
    align-items: center;
    text-align: center;
}

.result-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
}

.result-name {
    margin-bottom: 30px;
}

.result .score-title {
    font-size: 42px;
    margin-bottom: 20px;
    text-align: center;
}

.result .list-result {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30px;
}

    .result .list-result .item-result {
        border: 3px solid #ccc;
        border-radius: 50%;
        align-items: center;
        width: 200px;
        height: 200px;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        color: #fff;
    }

        .result .list-result .item-result .bx {
            font-size: 32px;
        }

.result .result-action {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.result .button--outline:hover {
    color: #fff;
}

.leader-list {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

    .leader-list .item-leader {
        width: 100%;
        max-width: calc(100% / 3 - 1rem);
        display: flex;
        gap: 30px;
        align-items: center;
        background: #fff;
        border-radius: 8px;
        padding: 20px;
    }

    .leader-list .leader-detail {
        display: flex;
        align-items: center;
    }

        .leader-list .leader-detail .bx {
            font-size: 20px;
        }

            .leader-list .leader-detail .bx.rank1 {
                color: #f48c06;
            }

            .leader-list .leader-detail .bx.rank2 {
                color: #29b9e7;
            }

            .leader-list .leader-detail .bx.rank3 {
                color: #6c7578;
            }

            .leader-list .leader-detail .bx.rank4 {
                color: #afb2b3;
            }

    .leader-list .medal {
        position: relative;
    }

        .leader-list .medal .avatar-leader {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 50%;
        }

    .leader-list .leader-name {
        margin-bottom: 10px;
    }

    .leader-list .rating {
        display: flex;
        justify-content: space-around;
        gap: 30px;
        font-size: 13px;
    }

        .leader-list .rating .number {
            background: #f48c06;
            color: #fff;
            border-radius: 5px;
            padding: 3px 5px;
        }

            .leader-list .rating .number.two {
                background: #29b9e7;
            }

            .leader-list .rating .number.three {
                background: #6c7578;
            }

        .leader-list .rating .band {
            background: #1d9200;
            color: #fff;
            border-radius: 5px;
            padding: 3px 5px;
        }

    .leader-list .leader-score {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

        .leader-list .leader-score .score {
            font-weight: bold;
        }

        .leader-list .leader-score .time-score {
            font-size: 14px;
            color: #AAA;
        }

.body-reading {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.container-reading {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    width: 1000px;
    text-align: center;
}

    .container-reading .title-reading {
        font-size: 38px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        margin-bottom: 30px;
    }

    .container-reading h4 {
        margin-bottom: 20px;
    }

    .container-reading .audio-form {
        margin-bottom: 30px;
    }

    .container-reading .i-timer {
        font-size: 48px;
        display: inline-block;
    }

#popupConfirmStart .content {
    text-align: center;
}

.timer {
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
    .timer small {
        display: block;
        font-size: 18px;
        font-weight: 400;
        margin: 15px 0;
    }

    .timer.warning {
        color: #ff6b6b;
        animation: pulse 1s infinite;
    }

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.question-reading {
    font-size: 1.5rem;
    color: #555;
    margin-bottom: 30px;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    border: 1px solid #f5f5f5;
    position: relative;
}

    .question-reading.general {
        text-align: left;
    }

        .question-reading.general .bx {
            padding-right: 10px;
        }

        .question-reading.general p {
            line-height: 22px;
            margin-bottom: 10px;
            font-size: 16px;
        }

.controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.btn-reading {
    padding: 15px 30px;
    font-size: 1.1rem;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.record-btn {
    background: linear-gradient(45deg, #ff6b6b, #ee5a52);
    color: white;
}

    .record-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(238, 90, 82, 0.3);
    }

    .record-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.stop-btn {
    background: linear-gradient(45deg, #4ecdc4, #44a08d);
    color: white;
}

    .stop-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(78, 205, 196, 0.3);
    }

.next-btn {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
}

    .next-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    }

.recording-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff6b6b;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }

    51%, 100% {
        opacity: 0.3;
    }
}

.recordings {
    margin-top: 30px;
}

.recording-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.05);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
}

    .recording-item audio {
        flex: 1;
        margin: 0 15px;
    }

.download-btn {
    background: linear-gradient(45deg, #ffa726, #ff9800);
    color: white;
    padding: 8px 16px;
    font-size: 0.9rem;
}

    .download-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 15px rgba(255, 167, 38, 0.3);
    }

.question-counter {
    background: rgba(102, 126, 234, 0.1);
    padding: 8px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #667eea;
    position: relative;
    font-size: 25px;
}

.container-begin {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 800px;
    width: 90%;
}

#audio {
    display: block;
    text-align: center;
    margin: 0 auto 20px;
}

#mic-button {
    font-size: 60px;
    color: #555;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
    position: relative;
    margin-bottom: 30px;
}

    #mic-button.recording {
        margin-right: 5px;
        content: "";
        color: #c86478;
        animation: fading 1s infinite;
        transition: all 0.3s;
    }

.timer-display {
    font-size: 4rem;
    font-weight: bold;
    padding: 20px;
    border-radius: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.timer-expired {
    color: #ff4757;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.question-section {
    margin: 30px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
}

.question-text {
    font-size: 1.5rem;
    line-height: 28px;
    margin-bottom: 20px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.multi-button {
    background: linear-gradient(45deg, #ff6b6b, #ee5a52);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    margin: 10px;
    min-width: 200px;
}

    .multi-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    }

    .multi-button:active {
        transform: translateY(0);
    }

    .multi-button.next-part {
        background: linear-gradient(45deg, #4ecdc4, #44a08d);
    }

    .multi-button.reset {
        background: linear-gradient(45deg, #ffa726, #ff7043);
    }

    .multi-button.next-question {
        background: linear-gradient(45deg, #667eea, #764ba2);
    }

.video-section {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.video-container {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

video {
    width: 300px;
    height: 200px;
    object-fit: cover;
}

.video-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.9rem;
}

.webrtc-controls {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.control-button {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .control-button:hover {
        background: rgba(255, 255, 255, 0.3);
    }

.status, #status-mirco {
    margin: 15px 0;
    font-size: 1.1rem;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-weight: 600;
    color: #667eea;
}

.time-remain {
    font-size: 28px;
    display: flex;
    gap: 10px;
    color: #f48c06;
}

    .time-remain .time-left, .time-remain .bx {
        font-weight: bold;
        color: #1d9200;
    }

.writing-test {
    min-height: 300px;
    max-height: 500px;
    height: 60vh;
    box-shadow: none;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: #635f85;
}

    .writing-test:focus {
        border: 1px solid #f48c06;
    }

.word-count {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}

.accordionTitle {
    margin: 20px 0;
    align-items: center;
    display: flex;
    justify-content: center;
    color: #f48c06;
}

    .accordionTitle .bx {
        padding-right: 5px;
    }

.accordionItem {
    position: relative;
}

    .accordionItem .summaryText {
        position: absolute;
        right: 30px;
        top: 20px;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
    }

    .accordionItem .badgeWord {
        background: #1d9200;
        padding: 5px;
        border-radius: 5px;
    }

.accordionItemHeading {
    cursor: pointer;
    margin: 0px 0px 10px 0px;
    padding: 10px;
    background: #29b9e7;
    color: #fff;
    border-radius: 5px;
}

.close .accordionItemContent {
    height: 0px;
    transition: height 4s ease-out;
    -webkit-transform: scaleY(0);
    -o-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
}

.open .accordionItemContent {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 0px 0px 10px 0px;
    -webkit-transform: scaleY(1);
    -o-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: top;
    -o-transform-origin: top;
    -ms-transform-origin: top;
    transform-origin: top;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -o-transition: -o-transform 0.4s ease;
    -ms-transition: -ms-transform 0.4s ease;
    transition: transform 0.4s ease;
}

.open .accordionItemHeading {
    margin: 0px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #f48c06;
    color: #fff;
}

.textarea-group {
    position: relative;
    margin-bottom: 30px;
    background: rgba(102, 126, 234, 0.05);
    border-radius: 15px;
    padding: 20px;
    border: 2px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s ease;
}

    .textarea-group textarea {
        width: 100%;
        max-height: 500px;
        height: 60vh;
        padding: 15px;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        font-size: 16px;
        font-family: inherit;
        resize: vertical;
        transition: all 0.3s ease;
        background: white;
    }

        .textarea-group textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

    .textarea-group:hover {
        border-color: rgba(102, 126, 234, 0.3);
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.1);
    }

.textarea-label {
    font-weight: 600;
    color: #667eea;
    margin-bottom: 10px;
    display: block;
    font-size: 1.1rem;
}

.word-counter {
    position: absolute;
    top: 15px;
    right: 20px;
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
    animation: fadeIn 0.3s ease;
}

#highlight-box {
    display: none;
    position: absolute;
    border-radius: 5px;
    background: #1d9200;
    display: flex;
    padding: 0;
    align-items: center;
    gap: 8px;
    z-index: 1500;
    border: 1px solid #1d9200;
    display: none;
    font-size: 0;
    white-space: nowrap;
}

    #highlight-box::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        top: -5px;
        left: 15%;
        margin-left: -5px;
        border-width: 0 5px 5px 5px;
        border-bottom-color: #1d9200;
    }

    #highlight-box button {
        background: transparent;
        border: none;
        color: white;
        padding: 5px 10px;
        margin: 2px;
        cursor: pointer;
    }

        #highlight-box button:hover {
            text-decoration: underline;
        }

.highlight {
    background: yellow;
}

/* Hộp nhập ghi chú */
#note-box {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 99;
}

    #note-box textarea {
        width: 250px;
        height: 100px;
        border: 1px solid #ccc;
        padding: 10px;
        margin: 15px 0;
    }

    #note-box .call-action {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    #note-box button {
        background: none;
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 5px;
    }

.note {
    color: red;
    margin-left: 5px;
    text-decoration: underline;
    background: none;
}

#delete-box {
    background: #1d9200;
    color: white;
    padding: 5px;
    border-radius: 5px;
    z-index: 1000;
    border: 1px solid #1d9200;
    display: flex;
    gap: 20px;
}

    #delete-box::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        top: -5px;
        left: 15%;
        margin-left: -5px;
        border-width: 0 5px 5px 5px;
        border-bottom-color: #1d9200;
    }

    #delete-box button {
        background: transparent;
        color: #fff;
    }

        #delete-box button:hover {
            text-decoration: underline;
        }

.vocalulary {
    margin-bottom: 0;
}

.vocalulary-main {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
.vocalulary-full {
    width: 100%;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
}
.vocalulary-left, .vocalulary-right {
    width: 50%;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
}

.vocalulary .search-content {
    margin-bottom: 30px;
}

    .vocalulary .search-content input.search-content-input {
        opacity: 1;
        visibility: visible;
        display: block;
    }

.vocalulary-detail {
    line-height: 30px;
}

    .vocalulary-detail h4 {
        margin-bottom: 20px;
    }

.vocalulary-title {
    text-align: center;
}

.vocalulary-define, .vocalulary-exam {
    padding-top: 20px;
    border-top: 1px solid #eee;
}

    .vocalulary-define p, .vocalulary-exam p {
        margin-bottom: 10px;
    }

.vocalulary .btn {
    background: transparent;
    border: 1px solid #eee;
    color: #1babbb;
    cursor: pointer;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
    opacity: 0.8;
    transition: all 0.4s;
}

    .vocalulary .btn:hover {
        transform: translateY(-5px);
        opacity: 1;
    }

.vocalulary .list-vocal ul {
    list-style: none;
}

.vocalulary .list-vocal li {
    margin: 10px 0 0 20px;
    list-style: circle;
    cursor: pointer;
}

.active-tabs {
    padding: 10px;
    position: relative;
    margin: 20px auto;
}

    .active-tabs input {
        opacity: 0;
        display: none;
        visibility: hidden;
    }

        .active-tabs input:checked + label {
            color: #29b9e7;
            border: 1px solid #29b9e7;
            opacity: 1;
            transform: translateY(-5px);
        }

.tabs-container {
    position: relative;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #eee;
}

.tab-1,
.tab-2,
.tab-3,
.tab-4 {
    opacity: 0;
    display: none;
    transition: all 0.4s;
}

.btn-1:checked ~ .tabs-container .tab-1,
.btn-2:checked ~ .tabs-container .tab-2,
.btn-3:checked ~ .tabs-container .tab-3,
.btn-4:checked ~ .tabs-container .tab-4 {
    position: relative;
    display: block;
    top: 0;
    left: 0;
    opacity: 1;
}

.sound {
    position: relative;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 20px;
}

    .sound .bx {
        font-size: 32px;
    }

    .sound a {
        color: var(--second-color);
    }

#player-container #play-pause {
    cursor: pointer;
    text-indent: -999999px;
    height: 40px;
    width: 40px;
    padding: 12px 18px;
    z-index: 2;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
    background-repeat: no-repeat !important;
    background-position: center;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    background-color: gainsboro;
}

.play {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMiAyNHYtMjRsMjAgMTItMjAgMTJ6Ii8+PC9zdmc+);
}

.pause {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTAgMjRoLTZ2LTI0aDZ2MjR6bTEwLTI0aC02djI0aDZ2LTI0eiIvPjwvc3ZnPg==) !important;
}

.none {
    display: none !important;
}

li.MsoNormal {
    display: flex;
    justify-content: start;
    gap: 20px;
    align-items: center;
    margin-bottom: 10px;
}

.MsoNormal .question_item {
    flex: 1 1 auto;
}

.timeline__content {
    white-space: normal;
}

remove-item {
    position: absolute;
    top: 10px;
    right: 10px;
    color: red;
    cursor: pointer;
}

.custom_button {
    background-color: #ddd;
    color: #333;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 5px;
    display: inline-block;
    border: 1px solid #ddd;
}

.meaning_item {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #fafafa;
    position: relative;
}

    .meaning_item input, .meaning_item select {
        width: 100%;
        background-color: #fff;
        padding: 10px 10px 5px 10px;
        outline: none;
        border: 1px solid #d1d1d1;
        margin-bottom: 5px;
    }

.input-styles input {
    width: 100%;
    background-color: #fafafa;
    border-radius: 8px;
    padding: 15px;
    border: none;
    outline: none;
    border: 1px solid transparent;
    transition: all 0.2s linear;
}

    .input-styles input:not(:placeholder-shown) + span,
    .input-styles input:focus + span {
        /* display: none; */
        top: 0;
        left: 10px;
        background-color: white;
        display: inline-block;
        padding: 5px;
    }

    .input-styles input:focus {
        border-color: #f62682;
        background-color: transparent;
    }

#search_note {
    width: 100%;
}

#note-box {
    z-index: 9999;
}

    #note-box textarea {
        height: 60px;
        margin: 0;
    }

    #note-box .call-action {
        justify-content: right;
        gap: 5px;
    }

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}
.note-editor.note-frame, .note-editor.note-airframe{
    border: none !important;
}

.list-stories {
    position: relative;
    width: 100%;
    padding: 10px 10px 0 10px;
}

    .list-stories .story_item {
        cursor: pointer;
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
        color: #2f327d;
    }

.story_details {
    position: relative;
    width: 100%;
    padding: 10px 10px 0 10px;
}

    .story_details h3 {
        text-align: center;
        margin-bottom: 10px;
        color: #2f327d;
    }

    .story_details .items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

        .story_details .items .story_detail{
            position: relative;
            width: 100%;
            border: 1px solid #f5f5f5;
            border-radius: 5px;
            padding: 10px;
        }
            .story_details .items .story_detail a {
                display: block;
                color: #0d6efd;
                font-weight: 500;
                margin-bottom: 10px;
            }
.hidden {
    display: none;
}
.dictations{

}

    .dictations .dictation_nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
        .dictations .dictation_nav button{
            padding: 6px 15px;
        }
.overlay_transcript,
.input_text {
    font-size: 18px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 100%;
    min-height: 80px;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
.input_text {
    position: relative;
    background: transparent;
    color: black;
    resize: none;
    outline: none;
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}
.overlay_transcript {
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    pointer-events: none;
}
    .dictations audio {
        height: 32px;
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }
    .dictations .actions {
        margin-top: 10px;
    }
        .dictations .actions button {
            color: #fff;
            background-color: #0d6efd;
            border-radius: 5px;
            border: 1px solid #0d6efd;
            padding: 8px 10px;
            font-weight: 400;
        }

    .dictations .wrapper {
        position: relative;
    }

        .dictations .wrapper .overlay_transcript {
            position: absolute;
            top: 0;
            overflow-wrap: break-word;
            border-bottom: none;
            border-color: rgba(0, 0, 0, 0);
            color: rgba(0, 0, 0, 0);
            width: 100% !important;
            border-width: 1px !important;
            border-style: solid !important;
            padding: 30px 10px 20px 10px !important;
            margin-bottom: 4px !important;
        }
        .dictations .wrapper .wrong {
            text-decoration: underline;
            text-decoration-color: orange;
            text-decoration-thickness: 3px;
        }
.result .result_first {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
    .result .result_first i.bx-alert-triangle {
        color: #f0ad4e;
    }
    .result .result_first:has(.bx-check) {
        color: #198754;
        font-weight: 600;
    }
.result .transcript_text{
    color: #000;
}

    .result .transcript_text span {
        color: #198754;
        font-weight: 600;
    }

.success {
    background-color: #28a745;
    color: #fff;
}
.error {
    background-color: red;
    color: #fff;
}
.ai_speak {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 11px;
}

    .ai_speak i {
        font-size: 20px;
        color: #ee5a52;
    }

.question_item{
    position: relative;
}
.question_content {
    opacity: 0;
}
    .question_content *{
        line-height: 30px;
    }
    .question_content ul {
        list-style: none;
    }
    .fade-text {
        opacity: 0;
        animation: fadeIn 1s ease-in-out forwards;
    }
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.question_item ul {
    list-style: decimal;
    padding-left: 40px;
    font-size: 14px;
    margin: 20px 0;
    text-align: left;
}

    .question_item ul li {
        cursor: pointer;
        padding: 5px;
        color: #1e91f6;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
.question_item h3 {
    text-align: center;
    margin: 30px 0 15px 0;
}
.transcript {
    position: relative;
    text-align: center;
    padding: 15px;
}

    .transcript a {
        display: flex;
        font-size: 18px;
        color: #e01511;
        justify-content: center;
        align-items: center;
    }

    .transcript .transcript_text {
        color: #f48c06;
        font-size: 14px;
        text-align: left;
        line-height: 20px;
        padding: 15px;
    }