h1,
h2,
h3,
h4,
p {
    color: #3f3f3f;
}

.fixed-element {
    transition: opacity 0.3s ease; /* Thời gian và hiệu ứng mượt mà có thể thay đổi */
    opacity: 1; /* Mặc định hiển thị */
}

.fixed-element.hidden {
    opacity: 0; /* Khi ẩn đi */
}

section.body .title-body .box-center .bg-active {
    position: absolute;
    background-color: #656565;
    height: 3.2vw;
    width: 12.7vw;
    border-radius: .5vw;
    bottom: -.8vw;
    left: -1.3vw;
}

.body-plan-edu .body-header {
    background-image: url("/libro/images/plan/edu/img-main-edu.png");
    margin: auto;
    max-width: 1400px;
    height: 880px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 1;
}


.bg-out-header {
    position: relative;
    background-color: #F6F7F7;
}


.bg-black-end {
    position: absolute;
    background-color: #af6262;
    height: 390px;
    width: 100%;
    bottom: 0;
}

.title-main {
    position: absolute;
    bottom: 258px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.title-main .title {
    width: 100%;
    display: flex;
    justify-content: center;
}

.title-main .title h2 {
    font-size: 30px;
    color: white;
    text-align: center;
    letter-spacing: 3px;
    letter-spacing: 6px;
}

.title-main .lorem p {
    width: 100%;
    display: flex;
    justify-content: center;
    color: white;
    font-size: 12px;
    letter-spacing: 1.2px;
}


.all-box-main {
    position: absolute;
    bottom: -2px;
    max-width: 950px;
    width: 100%;
    display: flex;
    justify-content: center;
    row-gap: 20px;
    column-gap: 40px;
}

.body-header .box-double-main {
    display: flex;
    width: 100%;
    justify-content: center;
}

.body-header .box-double-main .box {
    display: flex;
    background-color: white;
    width: 48%;
    border-radius: 30px;
    align-items: center;
    padding: 28px;
    border: 5px solid #cc7272;
    box-shadow: inset -4px -4px 5px 0px #bcbcbc;
}

.body-header .box-double-main .box.not-active {
    height: 195.6px;
}

.body-header .box-double-main .box.active {
    border: unset;
    box-shadow: unset;
    border-radius: 30px 30px 0 0;
    border-bottom: 37px solid white;
}

.body-header .box-double-main .box:hover {
    opacity: .8;
}


.body-header .box-double-main .box.active:hover {
    opacity: 1;
}


.body-header .box-double-main .box .box-logo {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 20px;
    width: 130px;
    height: 130px;
}


.body-header .box-double-main .box .box-logo img {
    width: 63%;
    margin: auto;
}

.body-header .box-double-main .box:last-child .box-logo img {
    width: 75%;
}

.body-header .box-double-main .box .box-title {
    display: flex;
    width: 65%;
    flex-wrap: wrap;
    margin-left: 30px;
}

.body-header .box-double-main .box .box-title h3 {
    font-size: 24px;
    line-height: 25px;
    margin-bottom: 15px;
}

.body-header .box-double-main .box .box-title p {
    font-size: 15px;
}

.body-plan-edu .section-1 {
    max-width: 950px;
    margin: auto;
}

.body-plan-edu .section-1 .all-box-number .box {
    display: flex;
    align-items: start;
    width: 31%;
    height: 147px;
    border-radius: 20px;
    padding: 20px 30px;
    background-color: #af6262;
    position: relative;

}

.body-plan-edu .section-1 .all-box-number {
    padding: 40px 0;
    padding-bottom: 60px;
}

.body-plan-edu .section-1 .all-box-number .all-box {
    display: flex;
    justify-content: space-between;
}

.body-plan-edu .section-1 .all-box-number .all-box .box .title h4 {
    display: flex;
    font-size: 24px;
    letter-spacing: 3px;
    line-height: 32px;
    color: white;
    z-index: 90;
    position: relative;
}

.body-plan-edu .all-box-number .all-box .box .number h4 {
    color: #c18a8a;
    font-size: 116.5px;
    display: flex;
    justify-content: end;
    letter-spacing: -4px;
    position: absolute;
    bottom: -24px;
    right: 11px;
}

.body-plan-edu .all-box-number .title-under-box {
    display: flex;
    justify-content: center;
    margin: 26px 0;
}

.body-plan-edu .all-box-number .title-under-box h4 {
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    color: #af6262;
}

.bg-pc-table-custom {
    background-color: #ffff !important;
}

.bg-body-pc-table-custom {
    padding-top: 50px;
}

section#footer .section-footer {
    background-color: #ebebeb;
}


.body-plan-edu .all-box-number .all-box-teacher {
    display: flex;
    justify-content: center;
    column-gap: 25px;
    border: 4.5px solid #af6262;
    border-radius: 20px;
    padding-bottom: 30px;
    padding-top: 16px;
}


.body-plan-edu .all-box-number .all-box-teacher .box-ch {
    display: flex;
    justify-content: center;
    width: 46.5%;
    flex-wrap: wrap;
}


.body-plan-edu .all-box-number .all-box-teacher .box-ch .title h3 {
    font-size: 24px;
    letter-spacing: 3.5px;
    color: #af6262;
    margin: 10px 0;
}

.body-plan-edu .all-box-number .all-box-teacher .box-ch .image img {
    width: 100%;
}

.body-plan-edu .title-red {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 22px 0;
    background-color: #af6262;
}


.body-plan-edu .title-red h3 {
    font-size: 24px;
    color: #ffff;
    letter-spacing: 2px;
}


.body-plan-edu .section-2 {
    max-width: 950px;
    margin: auto;
    padding: 46px 0;
    padding-bottom: 80px;
}

.body-plan-edu .section-2 .body-title-lorem .block {
    display: flex;
    justify-content: space-between;

}


.body-plan-edu .section-2 .body-title-lorem .line-radius-block {
    background-image: radial-gradient(circle, rgb(201, 201, 201) 12%, transparent 10%);
    background-position: bottom;
    background-size: 8px 22px;
    background-repeat: repeat-x;
    height: 15px;
    margin-top: 22px;
    margin-bottom: 20px;
}

.body-plan-edu .section-2 .body-title-lorem .block .title {
    width: 34%;
    display: flex;
    align-items: center;
}

.body-plan-edu .section-2 .body-title-lorem .block .title h4 {
    font-size: 24px;
    color: #af6262;
    line-height: 30px;

    border-left: 8.5px solid #af6262;
    padding: 5px 0;
    padding-left: 10px;
}


.body-plan-edu .section-2 .body-title-lorem .block .three-dot {
    width: 8%;
    display: flex;
    justify-content: start;
    align-items: center;
}


.body-plan-edu .section-2 .body-title-lorem .block .three-dot p {
    font-size: 24px;
    color: #af6262;
    letter-spacing: 2px;
}


.body-plan-edu .section-2 .body-title-lorem .block .lorem {
    width: 64%;
    display: flex;
    justify-content: start;
    align-items: center;
}

.body-plan-edu .section-2 .body-title-lorem .block .lorem p {
    font-size: 16px;
    letter-spacing: .5px;
    line-height: 30px;
}



.body-plan-edu .section-3 {
    background-color: #f6f7f7;
    padding: 50px 0;
    padding-bottom: 80px;
}

.body-plan-edu .section-3 .bg-gray-big-image {
    max-width: 100%;
    margin: auto;
}

.body-plan-edu .section-3 .bg-gray-big-image .title-img {
    display: flex;
    justify-content: center;
    margin-bottom: 46px;
}

.body-plan-edu .section-3 .bg-gray-big-image .title-img h4 {
    font-size: 24px;
    letter-spacing: -1px;
}


.body-plan-edu .section-3 .bg-gray-big-image .image {
    padding-left: 122px;
    overflow-x: scroll;
    position: relative;
    max-width: 1500px;
    margin: auto;
}

.body-plan-edu .section-3 .bg-gray-big-image .image img {
    width: 142%;
    margin-right: 50px;
}


.body-plan-edu .section-3 .bg-gray-big-image .image .logo-drag img {
    width: 12% !important;
    position: absolute;
    left: 660px;
    top: 32%;
}


.body-plan-edu .section-3 .bg-gray-big-image .image {
    overflow-x: scroll;
    padding-bottom: 20px;
}

.body-plan-edu .section-3 .bg-gray-big-image .image::-webkit-scrollbar {
    width: 100px !important;
    height: 0;
}

.image-container img {
    pointer-events: none; /* Ngăn chặn ảnh nhận sự kiện mousedown */
    outline: unset !important;
}

.body-plan-edu .section-3 .bg-gray-big-image .image::-webkit-scrollbar-track {
    background: #f1f1f1;
}


.body-plan-edu .section-3 .bg-gray-big-image .image::-webkit-scrollbar-thumb {
    background: #888;
}


.body-plan-edu .section-3 .bg-gray-big-image .image::-webkit-scrollbar-thumb {
    background: #b1b1b1;
    border-radius: 20px;
}


@media (max-width: 1399px) {
    section.body .title-body .box-center .bg-active {
        position: absolute;
        background-color: #656565;
        height: 47px;
        width: 175px;
        border-radius: .8vw;
        bottom: -11px;
        left: -20px;
    }
}

@media (max-width: 670px) {
    .body-plan-edu .body-header {
        background-image: url(/libro/images/plan/edu/img-main-edu-sp.png);
        height: 165vw;
        width: 100%;
    }

    .title-main {
        bottom: 82vw;
    }

    .title-main .title h2 {
        font-size: 4.7vw;
        letter-spacing: .5vw;
        margin-bottom: 2vw;
    }

    .title-main .lorem p {
        font-size: 2.4vw;
        letter-spacing: .5vw;
    }

    .all-box-main {
        column-gap: 4vw;
        bottom: -.2vw;
    }

    .body-header .box-double-main .box {
        width: 42vw;
        border-radius: 3vw;
        padding: 3vw;
        flex-wrap: wrap;
    }

    .body-header .box-double-main .box .box-title {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .body-header .box-double-main .box .box-logo {
        display: flex;
        flex-direction: column;
        padding: 2vw;
        border-radius: 2vw;
        width: 36vw;
        height: 36vw;
        box-shadow: 4px 4px 2px 2px #d7d6d6;
    }

    .body-header .box-double-main .box .box-logo img {
        width: 56%;
    }

    .body-header .box-double-main .box:last-child .box-logo img {
        width: 63%;
    }

    .body-header .box-double-main .box .box-title h3 {
        font-size: 4vw;
        line-height: 5vw;
        margin-bottom: 2.5vw;
        margin-top: 4vw;
        text-align: center;
    }

    .body-header .box-double-main .box .box-title p {
        font-size: 2.7vw;
        letter-spacing: .1vw;
        margin-bottom: 3vw;
        padding-left: 1vw;
    }


    .body-header .box-double-main .box {
        border: unset;
        width: 42vw;
        box-shadow: unset;
    }

    section#footer .section-footer {
        height: auto;
        background-color: #3f3f3f;
        flex-wrap: wrap;
        flex-direction: column;
    }


    .body-header .box-double-main .box.not-active {
        height: 69.5vw;
    }

    .body-header .box-double-main .box.active {
        border: unset;
        box-shadow: unset;
        border-radius: 3vw 3vw 0 0;
        border-bottom: 5.2vw solid white;
    }

    .body-plan-edu .section-1 .all-box-number {
        padding: 5.5vw 0;
        padding-bottom: 16vw;
    }

    .body-plan-edu .section-1 .all-box-number .all-box {
        flex-wrap: wrap;
        row-gap: 3vw;
        padding: 0 5vw;
    }

    .body-plan-edu .section-1 .all-box-number .all-box .box {
        width: 100%;
    }

    .all-box-number .box {
        display: flex;
        align-items: start;
        width: 31%;
        height: 18vw;
        border-radius: 3vw;
        padding: 3vw 6.5vw;
        background-color: #5b779b;
        position: relative;
    }

    .body-plan-edu .section-1 .all-box-number .box {
        width: 31%;
        height: 19vw;
        border-radius: 3vw;
        padding: 3vw 6.5vw;
    }

    .body-plan-edu .section-1 .all-box-number .all-box .box .title h4 {
        display: flex;
        font-size: 4.5vw;
        letter-spacing: .6vw;
        line-height: 6vw;
    }

    .body-plan-edu .all-box-number .all-box .box .number h4 {
        font-size: 20vw;
        display: flex;
        justify-content: end;
        letter-spacing: -1vw;
        position: absolute;
        bottom: -4vw;
        right: 5vw;
    }

    .body-plan-edu .all-box-number .title-under-box {
        margin: 4.5vw 0;
    }

    .body-plan-edu .all-box-number .title-under-box h4 {
        font-size: 3.8vw;
        line-height: 6.5vw;
        letter-spacing: -.06vw;
        padding: 0 7vw;
        text-align: start;
    }

    section.body .bg-body-pc-table {
        background-color: #f6f7f7 !important;
    }

    .bg-body-pc-table-custom {
        padding-top: 8vw;
        background-color: #ffff !important;
    }


    section.body .title-body .box-center .bg-active {
        height: 8vw;
        width: 44vw;
        border-radius: 1vw;
        bottom: 46.5vw;
        left: 28vw;
    }

    .body-plan-edu .all-box-number .all-box-teacher {
        flex-wrap: wrap;
    }

    .body-plan-edu .all-box-number .all-box-teacher .box-ch {
        width: 100%;
        padding: 0 5vw;
    }

    .body-plan-edu .all-box-number .all-box-teacher {
        column-gap: 0;
        border: .9vw solid #af6262;
        border-radius: 3vw;
        padding-bottom: 6vw;
        padding-top: 3vw;
        row-gap: 0;
        width: 90vw;
        margin: auto;
    }

    .body-plan-edu .all-box-number .all-box-teacher .box-ch .title h3 {
        font-size: 5vw;
        letter-spacing: .5vw;
        color: #af6262;
        margin: 1vw 0;
    }

    .line-radius-bottom {
        background-image: radial-gradient(circle, rgb(201, 201, 201) 11%, transparent 10%);
        background-size: 1vw 5vw;
        height: 3vw;
        width: 99%;
        margin-top: 4vw;
        margin-bottom: 3vw;
    }

    .body-plan-edu .title-red h3 {
        font-size: 4.5vw;
        letter-spacing: .8vw;
    }

    .body-plan-edu .title-red {
        width: 100%;
        padding: 6.5vw 0;
    }

    .body-plan-edu .section-2 {
        padding: 8vw 7vw;
        padding-bottom: 13vw;
    }

    .body-plan-edu .section-2 .body-title-lorem .block {
        flex-wrap: wrap;
    }

    .body-plan-edu .section-2 .body-title-lorem .block .title {
        width: 100%;
    }

    .body-plan-edu .section-2 .body-title-lorem .block .title h4 {
        font-size: 6.5vw;
        color: #af6262;
        line-height: 7.5vw;
        border-left: 2vw solid #af6262;
        padding: 1.5vw 0;
        padding-left: 3vw;
    }

    .body-plan-edu .section-2 .body-title-lorem .block .lorem {
        width: 100%;
        margin-top: 4vw;
    }

    .body-plan-edu .section-2 .body-title-lorem .block .lorem p {
        font-size: 3.2vw;
        letter-spacing: 0vw;
        line-height: 6vw;
    }

    .body-plan-edu .section-2 .body-title-lorem .line-radius-block {
        background-image: radial-gradient(circle, rgb(201, 201, 201) 10%, transparent 10%);
        background-size: 1.2vw 5vw;
        height: 3vw;
        width: 100%;
        margin-top: 6vw;
        margin-bottom: 5vw;
    }

    .body-plan-edu .section-3 .bg-gray-big-image .title-img h4 {
        font-size: 5vw;
        letter-spacing: -0.2vw;
    }

    .body-plan-edu .section-3 .bg-gray-big-image .title-img {
        width: 77vw;
        margin: auto;
        margin-bottom: 6vw;
    }

    .body-plan-edu .section-3 .bg-gray-big-image .image {
        padding: 0 5vw;
        overflow-x: scroll;
    }

    .body-plan-edu .section-3 .bg-gray-big-image .image img {
        width: 370%;
        margin-right: 5vw;
    }

    .body-plan-edu .section-3 {
        padding: 6vw 0;
        padding-bottom: 12vw;
    }

    .body-plan-edu .section-3 .bg-gray-big-image .image .logo-drag img {
        width: 27% !important;
        position: absolute;
        left: 36%;
        top: 32%;
    }
}

@media (min-width: 1400px) {
    .body-plan-edu .section-3 .bg-gray-big-image .image .logo-drag img {
        width: 13% !important;
        position: absolute;
        left: 45%;
        top: 31%;
    }
}