@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

@font-face {
    font-family: "PlusJakartaSans Bold";
    src: url("../fonts/PlusJakartaSans-Bold.ttf");
}
@font-face {
    font-family: "PlusJakartaSans ExtraBold";
    src: url("../fonts/PlusJakartaSans-ExtraBold.ttf");
}
@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SFPRODISPLAYREGULAR.OTF");
}

@font-face {
    font-family: "SF Pro Display Bold";
    src: url("../fonts/SFPRODISPLAYBOLD.OTF");
}

@font-face {
    font-family: "Signika SC";
    src: url("../fonts/SignikaSC.ttf");
}

body {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    color: #404041;
}

.SFProDisplay {
    font-family: "SF Pro Display";
}

ul.menu-header-pc li:nth-child(5) a {
    color: #e94444;
    -webkit-text-stroke-width: 1;
    -webkit-text-stroke-color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.about-home-text p {
    margin-bottom: 30px;
}

.about-home-img::before {
    content: "";
    position: absolute;
    top: -20.36px;
    left: -20.36px;
    width: 100%;
    height: 92%;
    background: #e7f5ff;
    z-index: -1;
}

header.sticky {
    position: fixed !important;
    width: 100%;
    background-color: #fff;
    left: 0px;
    top: 0px;
    transform: none;
    transition: top 0.3s; /* Add smooth transition effect */
    z-index: 999;
}

.section-about::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 360px;
    height: 250px;
    background: url(../img/bg-before-title.svg);
}

.section-customer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    width: 168px;
    height: 399px;
    background: url(../img/ab-1.svg);
}

.section-customer::after {
    content: "";
    position: absolute;
    right: 0;
    top: 28%;
    width: 168px;
    height: 399px;
    background: url(../img/ab-2.svg);
}

.course-home-img:after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 50%;
    width: 90%;
    height: 50%;
    background: #b2ebff;
    transform: translateX(-50%);
    z-index: 0;
    border-radius: 20px;
}

.section-course::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: #defffe;
    z-index: -1;
    height: 70%;
}

#scrollUp {
    transition: 0.3s;
    position: fixed;
    bottom: 62px;
    right: 10px;
    cursor: pointer;
    z-index: 99999;
    width: 35px;
    height: 35px;
}

.listAddress ul {
    color: white;
    line-height: 32px;
}

.clamp {
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
}

.clamp1 {
    -webkit-line-clamp: 1;
}

.clamp2 {
    -webkit-line-clamp: 2;
}

.clamp3 {
    -webkit-line-clamp: 3;
}

.clamp4 {
    -webkit-line-clamp: 4;
}

.clamp5 {
    -webkit-line-clamp: 5;
}

.listChildCategory a.active,
.listChildCategory a:hover {
    background: #d1fae5;
    border-color: #d1fae5 !important;
    color: #10b981;
    font-weight: 700 !important;
}

.box_content ul {
    list-style: disc;
    padding-left: 20px;
}
@media (min-width: 768px) {
    .bg-title-1 {
        background: url(../img/bg-title.svg);
        background-size: 100% 100%;
    }

    .bg-title-2 {
        background: url(../img/bg-title-2.png) center no-repeat;
        background-size: contain;
    }

    .bg-title-3 {
        background: url(../img/bg-title-3.svg) center no-repeat;
        background-size: contain;
    }

    .bg-title-4 {
        background: url(../img/bg-title-4.svg) center no-repeat;
        background-size: contain;
    }
}