@font-face {
    font-family: 'Hirosaki';
    src: url("../fonts/Hirosaki.ttf");
}

body {
    font-family: "Montserrat", serif;
    /* font-family: 'Hirosaki'; */
}

.footer {
}

.mainFooter {
    background: url(../images/bgfooter.jpg) no-repeat;
    background-size: cover;
    padding: 30px 0;
}
.aboutImg{    border-radius: 20px;
    overflow: hidden;}

.ftInfo {
    text-align: center;
}

    .ftInfo img {
    }

    .ftInfo h3 {
        /* font-family: 'Hirosaki'; */
        color: white;
        font-size: 24px;
        margin: 20px 0;
    }

    .ftInfo ul {
        list-style: none;
        color: white;
    }

        .ftInfo ul li {
            text-align: left;
            padding-left: 40px;
            /* font-family: 'Hirosaki'; */
            margin-bottom: 20px;
        }

            .ftInfo ul li a {
            }

            .ftInfo ul li:last-child {
                margin-bottom: 0;
            }

            .ftInfo ul li:nth-child(1) {
                background: url(../images/f1.png) left center no-repeat;
            }

            .ftInfo ul li:nth-child(2) {
                background: url(../images/f2.png) left center no-repeat;
            }

            .ftInfo ul li:nth-child(3) {
                background: url(../images/f3.png) left center no-repeat;
            }

.ftMenu {
    padding-top: 109px;
}

    .ftMenu h3 {
        /* font-family: 'Hirosaki'; */
        color: white;
        font-size: 20px;
        margin: 0 0 20px;
    }

    .ftMenu ul {
        padding: 0;
        list-style: none;
    }

        .ftMenu ul li {
            margin-bottom: 8px;
        }

            .ftMenu ul li a {
                font-size: 16px;
                display: block;
                color: white;
                /* font-family: 'Hirosaki'; */
                padding-left: 24px;
                position: relative;
                text-decoration: none;
            }

                .ftMenu ul li a:before {
                    position: absolute;
                    content: "";
                    width: 7px;
                    height: 7px;
                    background: white;
                    left: 4px;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    border-radius: 50%;
                }

.ftMenu {
}

    .ftMenu ul {
    }

        .ftMenu ul li:last-child {
            margin-bottom: 0;
        }

.ftForm {
    margin-top: 60px;
}

.ftHeadingForm {
    /* font-family: 'Hirosaki'; */
    color: white;
    font-size: 20px;
    margin: 0 0 15px;
}

.ftSocial {
}

    .ftSocial ul {
        list-style: none;
        padding: 0;
        display: flex;
        gap: 25px;
        margin: 20px 0;
    }

        .ftSocial ul li {
        }

            .ftSocial ul li a {
                width: 33px;
                height: 33px;
                display: block;
            }

            .ftSocial ul li:nth-child(1) a {
                background: url(../images/i1.png) no-repeat;
                background-size: 33px;
            }

            .ftSocial ul li:nth-child(2) a {
                background: url(../images/i2.png) no-repeat;
                background-size: 33px;
            }

            .ftSocial ul li:nth-child(3) a {
                background: url(../images/i3.png) no-repeat;
                background-size: 33px;
            }

.ftRegisterForm {
    position: relative;
    max-width: 277px;
}

#ftInput {
    width: 100%;
    height: 37px;
    border-radius: 5px;
    outline: none;
    border: none;
    padding: 10px;
    color: #909090;
    font-family: 'Hirosaki';
    font-size: 14px;
}

.ftButton {
    background: url(../images/IEmail.png);
    width: 27px;
    height: 23px;
    position: absolute;
    display: block;
    right: 10px;
    top: 8px;
    cursor: pointer;
}

.grBoxOther {
}

    .grBoxOther .item:nth-child(1) img {
        width: 140px
    }

.header {
    background: url(../images/bgHead.png) #860303 no-repeat;
    background-size: cover;
}

.comTitle {
    font-size: 36px;
    color: white;
    font-family: 'Hirosaki';
}

.comDescription {
    font-size: 20px;
    color: white;
    font-family: 'Hirosaki';
}

.comHead {
    display: flex;
    align-items: center;
    padding: 8px 0;
    gap: 15px;
}

.rightHead {
}

.grBoxHead {
    display: flex;
    gap: 40px;
}

    .grBoxHead .item {
        display: flex;
        gap: 30px;
        align-items: center;
    }

        .grBoxHead .item:nth-child(1) {
        }

        .grBoxHead .item:nth-child(2) {
        }

        .grBoxHead .item:nth-child(3) {
        }

        .grBoxHead .item .accBox {
        }

            .grBoxHead .item .accBox a {
                background: url(../images/iUser.png) no-repeat;
                padding-left: 60px;
                height: 48px;
                display: flex;
                align-items: center;
                color: white;
                /* font-family: 'Hirosaki'; */
                text-decoration: none;
            }

.iFlagBox {
    /* background: white; */
    display: block;
}

    .iFlagBox ul {
        margin-bottom: 0;
        display: flex;
        list-style: none;
        gap: 7px;
        background: white;
        padding: 6px 17px;
        border-radius: 5px;
        overflow: hidden;
    }

        .iFlagBox ul li {
            display: block;
        }

            .iFlagBox ul li a {
                display: block;
                width: 23px;
                height: 17px;
            }

            .iFlagBox ul li:nth-child(1) a {
                background: url(../images/flag1.png) no-repeat;
            }

            .iFlagBox ul li:nth-child(2) a {
                background: url(../images/flag2.png) no-repeat;
            }

.iSearchBox {
}

.searchBox {
    position: relative;
}

.searchBoxbtn {
    background: url(../images/iSearch.png) no-repeat;
    display: block;
    width: 19px;
    height: 19px;
    cursor: pointer;
}

.searchForm {
    position: absolute;
    right: calc(100% - 22px);
    top: 20px;
    display: none;
}

    .searchForm input {
        border: none;
        padding: 5px 10px;
        border-radius: 10px;
        overflow: hidden;
        outline: none;
        background: white;
        color: black;
    }

    .searchForm a {
        position: absolute;
        background: url(../images/search.png) no-repeat;
        width: 20px;
        height: 20px;
        right: 7px;
        background-size: 20px;
        top: 6px;
    }

.searchBox:hover .searchForm {
    display: block;
}

.headBottom {
    position: relative;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}


.headers3 .headers3-wrap {
    display: grid;
    grid-template-columns: 40% 1fr 40%;
    gap: 5px 15px;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
}

@media (max-width: 1024px) {
    .headers3 .headers3-wrap {
        grid-template-columns: 1fr 30%;
        padding: 0
    }
}

.headers3 .headers3-wrap > * {
    min-width: 0
}

.headers3 .headers3-wrap .headers3-left {
    position: relative
}

@media (max-width: 1024px) {
    .headers3 .headers3-wrap .headers3-left {
        position: initial;
        order: 2
    }
}

.headers3 .headers3-wrap .headers3-left form {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    max-width: 300px
}

    .headers3 .headers3-wrap .headers3-left form input {
        background: transparent;
        border: none;
        outline: none;
        padding: 0;
        box-shadow: none;
        background: #FFF;
        padding: 2.5px 15px;
        width: 100%;
        line-height: 1;
        color: var(--color1);
        border-bottom: 1px solid #f2f2f2
    }

@media (max-width: 1201px) {
    .headers3 .headers3-wrap .headers3-left form input {
        padding: 5px 15px
    }
}

@media (max-width: 480px) {
    .headers3 .headers3-wrap .headers3-left form input {
        padding-left: 0
    }
}

.headers3 .headers3-wrap .headers3-left form input::placeholder {
    color: var(--color1)
}

.headers3 .headers3-wrap .headers3-left form button[type="submit"] {
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    box-shadow: none
}

    .headers3 .headers3-wrap .headers3-left form button[type="submit"] i {
        font-size: 1.25rem;
        color: var(--color1)
    }

.headers3 .headers3-wrap .headers3-left form .tool-search-smart {
    min-width: 100%;
    top: 100%
}

    .headers3 .headers3-wrap .headers3-left form .tool-search-smart:before {
        left: 40px;
        right: initial
    }

.headers3 .headers3-wrap .headers3-left form .tool-search-overplay {
    top: 87.5px
}

@media (max-width: 1024px) {
    .headers3 .headers3-wrap .headers3-left form .tool-search-overplay {
        top: 115.5px;
        display: block !important
    }
}

@media (max-width: 1024px) {
    .headers3 .headers3-wrap .headers3-center {
        order: 1;
        grid-column: 1 / span 2
    }
}

.headers3 .headers3-wrap .headers3-center a {
    display: block;
    text-align: center
}

    .headers3 .headers3-wrap .headers3-center a img {
        max-height: 60px;
        width: auto
    }

@media (max-width: 768px) {
    .headers3 .headers3-wrap .headers3-center a img {
        max-height: 50px
    }
}

.headers3 .headers3-wrap .headers3-right {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    align-items: center;
    gap: 1.5rem;
    position: relative
}

@media (max-width: 1201px) {
    .headers3 .headers3-wrap .headers3-right {
        gap: 1.25rem
    }
}

@media (max-width: 1024px) {
    .headers3 .headers3-wrap .headers3-right {
        order: 3
    }
}

.headers3 .headers3-wrap .headers3-right > button {
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    box-shadow: none;
    position: relative
}

    .headers3 .headers3-wrap .headers3-right > button i {
        font-size: 1.25rem;
        color: var(--color1)
    }

    .headers3 .headers3-wrap .headers3-right > button[data-type="shop-menu-mobile-header"] {
        display: none
    }

    .headers3 .headers3-wrap .headers3-right > button[data-type="shop-customer-header"] {
        display: inline-block
    }

@media (max-width: 1201px) {
    .headers3 .headers3-wrap .headers3-right > button[data-type="shop-menu-mobile-header"] {
        display: inline-block
    }

    .headers3 .headers3-wrap .headers3-right > button[data-type="shop-customer-header"] {
        display: none
    }
}

.headers3 .headers3-wrap .headers3-right > button.has-count span {
    background: var(--color_main);
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #FFFFFF;
    position: absolute;
    top: -10px;
    right: -10px;
    border-radius: 999px;
    font-size: .9rem
}

.headers3 .headers3-wrap .headers3-bot {
    grid-column: 1 / span 3
}

@media (min-width: 1201px) {
    .headers3 .headers3-wrap .headers3-bot {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center
    }

        .headers3 .headers3-wrap .headers3-bot > nav {
            display: block;
            overflow-x: hidden;
            width: calc(100% - 60px)
        }

            .headers3 .headers3-wrap .headers3-bot > nav .menu0 {
                display: flex;
                flex-wrap: nowrap;
                justify-content: center;
                align-items: center;
                white-space: nowrap;
                min-width: fit-content;
                margin: 0;
            }

                .headers3 .headers3-wrap .headers3-bot > nav .menu0 .headers3-bot-menu-mob-head, .headers3 .headers3-wrap .headers3-bot > nav .menu0 .headers3-bot-menu-mob-foot {
                    display: none
                }

                .headers3 .headers3-wrap .headers3-bot > nav .menu0 > li {
                    padding: 0px 15px;
                    list-style: none;
                }

                    .headers3 .headers3-wrap .headers3-bot > nav .menu0 > li.active > a {
                        color: white;
                    }

                    .headers3 .headers3-wrap .headers3-bot > nav .menu0 > li:hover .menu1 {
                        opacity: 1;
                        visibility: visible;
                        transform: none;
                        list-style: none;
                        padding: 0;
                    }

                    .headers3 .headers3-wrap .headers3-bot > nav .menu0 > li > a {
                        font-size: 20px;
                        font-weight: 400;
                        letter-spacing: 0.5px;
                        color: white;
                        text-decoration: none;
                    }

                        .headers3 .headers3-wrap .headers3-bot > nav .menu0 > li > a:hover {
                            color: white;
                        }

                        .headers3 .headers3-wrap .headers3-bot > nav .menu0 > li > a span {
                            margin-left: 5px
                        }

                .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 {
                    position: absolute;
                    top: 100%;
                    left: auto;
                    background: #FFF;
                    z-index: 9;
                    min-width: 200px;
                    max-width: 200px;
                    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
                    visibility: hidden;
                    opacity: 0;
                    transform: translateY(-20px);
                    transition: all .25s ease;
                    border-top: 3px solid var(--color_main);
                    list-style: none;
                }

                    .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li {
                        position: relative
                    }

                        .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li.active > a {
                            color: var(--color_main)
                        }

                        .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li:not(:last-child) a {
                            border-bottom: 1px solid #EbEbEb;
                        }

                        .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li:hover .menu2 {
                            opacity: 1;
                            visibility: visible;
                            transform: none
                        }

                        .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li > a {
                            padding: 10px 10px;
                            transition: all .5s ease;
                            white-space: initial;
                            display: flex;
                            flex-wrap: nowrap;
                            justify-content: space-between;
                            align-items: center;
                            font-size: 15px;
                            color: black;
                            text-decoration: none;
                        }

                            .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li > a:hover {
                                color: black;
                                text-decoration: none;
                            }

                        .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li .menu2 {
                            position: absolute;
                            top: 0;
                            left: 100%;
                            background: #FFF;
                            min-width: 250px;
                            max-width: 250px;
                            box-shadow: 0 1px 5px rgba(0,0,0,0.15);
                            z-index: 9;
                            border-top: 3px solid var(--color_main);
                            visibility: hidden;
                            opacity: 0;
                            transform: translateX(20px);
                            transition: all .25s ease
                        }

                            .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li .menu2:not(:last-child) a {
                                border-bottom: 1px solid #EbEbEb
                            }

                            .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li .menu2 > li {
                                position: relative
                            }

                                .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li .menu2 > li:hover .menu3 {
                                    opacity: 1;
                                    visibility: visible;
                                    transform: none
                                }

                                .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li .menu2 > li > a {
                                    padding: 10px 20px;
                                    transition: all .5s ease;
                                    white-space: initial;
                                    display: flex;
                                    flex-wrap: nowrap;
                                    justify-content: space-between;
                                    align-items: center
                                }

                                    .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li .menu2 > li > a:hover {
                                        background: var(--color_main);
                                        color: var(--color2)
                                    }

                                .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li .menu2 > li .menu3 {
                                    position: absolute;
                                    top: 0;
                                    left: 100%;
                                    background: #FFF;
                                    min-width: 250px;
                                    max-width: 250px;
                                    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
                                    z-index: 9;
                                    border-top: 3px solid var(--color_main);
                                    visibility: hidden;
                                    opacity: 0;
                                    transform: translateX(20px);
                                    transition: all .25s ease
                                }

                                    .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li .menu2 > li .menu3:not(:last-child) a {
                                        border-bottom: 1px solid #EbEbEb
                                    }

                                    .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li .menu2 > li .menu3 > li > a {
                                        padding: 10px 20px;
                                        transition: all .5s ease;
                                        white-space: initial;
                                        display: flex;
                                        flex-wrap: nowrap;
                                        justify-content: space-between;
                                        align-items: center
                                    }

                                        .headers3 .headers3-wrap .headers3-bot > nav .menu0 .menu1 > li .menu2 > li .menu3 > li > a:hover {
                                            background: var(--color_main);
                                            color: var(--color2)
                                        }
}

@media (max-width: 1201px) {
    .headers3 .headers3-wrap .headers3-bot {
        position: fixed;
        top: 0 !important;
        bottom: 0;
        left: 0;
        width: 320px !important;
        background-color: #FFF;
        z-index: 100;
        padding: 0 !important;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        touch-action: manipulation;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition: all .5s
    }

        .headers3 .headers3-wrap .headers3-bot.active {
            opacity: 1;
            visibility: visible;
            transform: translateX(0)
        }

        .headers3 .headers3-wrap .headers3-bot nav {
            height: 100%
        }

            .headers3 .headers3-wrap .headers3-bot nav .menu0 {
                height: 100%;
                display: flex;
                flex-direction: column
            }

                .headers3 .headers3-wrap .headers3-bot nav .menu0 li:not(:last-child) a {
                    border-bottom: 1px solid var(--color_bg)
                }

                .headers3 .headers3-wrap .headers3-bot nav .menu0 li a {
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    align-items: center;
                    padding: 7.5px 15px
                }

                    .headers3 .headers3-wrap .headers3-bot nav .menu0 li a.active span {
                        transform: rotate(90deg)
                    }

                    .headers3 .headers3-wrap .headers3-bot nav .menu0 li a span {
                        transition: all .5s;
                        font-size: 1.75rem;
                        line-height: 0;
                        width: 40px;
                        text-align: center;
                        display: block;
                        padding-left: 10px
                    }

                .headers3 .headers3-wrap .headers3-bot nav .menu0 > li.headers3-bot-menu-mob-head {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 15px;
                    margin-bottom: 10px;
                    border-bottom: 1px solid #DbDbDb;
                    min-height: 50px
                }

                    .headers3 .headers3-wrap .headers3-bot nav .menu0 > li.headers3-bot-menu-mob-head label {
                        font-size: 16px;
                        font-weight: bold;
                        margin: 0
                    }

                    .headers3 .headers3-wrap .headers3-bot nav .menu0 > li.headers3-bot-menu-mob-head button {
                        background: transparent;
                        border: none;
                        outline: none;
                        padding: 0;
                        box-shadow: none
                    }

                        .headers3 .headers3-wrap .headers3-bot nav .menu0 > li.headers3-bot-menu-mob-head button svg {
                            width: 15px;
                            height: 15px
                        }

                .headers3 .headers3-wrap .headers3-bot nav .menu0 > li.headers3-bot-menu-mob-foot {
                    padding: 15px 15px 5px;
                    margin-top: auto;
                    width: 100%;
                    height: 205px
                }

                    .headers3 .headers3-wrap .headers3-bot nav .menu0 > li.headers3-bot-menu-mob-foot form {
                        width: 100%;
                        position: relative
                    }

                        .headers3 .headers3-wrap .headers3-bot nav .menu0 > li.headers3-bot-menu-mob-foot form input {
                            background: transparent;
                            border: none;
                            outline: none;
                            padding: 0;
                            box-shadow: none;
                            background: #FFF;
                            border: 1px solid #DbDbDb;
                            padding: 0 55px 0 10px;
                            height: 35px;
                            width: 100%
                        }

                        .headers3 .headers3-wrap .headers3-bot nav .menu0 > li.headers3-bot-menu-mob-foot form button {
                            background: transparent;
                            border: none;
                            outline: none;
                            padding: 0;
                            box-shadow: none;
                            position: absolute;
                            top: 0;
                            right: 10px;
                            bottom: 0;
                            opacity: 0.5
                        }

                            .headers3 .headers3-wrap .headers3-bot nav .menu0 > li.headers3-bot-menu-mob-foot form button svg {
                                width: 20px;
                                height: 20px
                            }

                    .headers3 .headers3-wrap .headers3-bot nav .menu0 > li.headers3-bot-menu-mob-foot .shop-social a {
                        padding: 0
                    }

                .headers3 .headers3-wrap .headers3-bot nav .menu0 .menu1 {
                    display: none
                }

                    .headers3 .headers3-wrap .headers3-bot nav .menu0 .menu1 li a {
                        padding-left: 30px
                    }

                    .headers3 .headers3-wrap .headers3-bot nav .menu0 .menu1 .menu2 {
                        display: none
                    }

                        .headers3 .headers3-wrap .headers3-bot nav .menu0 .menu1 .menu2 li a {
                            padding-left: 45px
                        }

                        .headers3 .headers3-wrap .headers3-bot nav .menu0 .menu1 .menu2 .menu3 {
                            display: none
                        }

                            .headers3 .headers3-wrap .headers3-bot nav .menu0 .menu1 .menu2 .menu3 li a {
                                padding-left: 60px
                            }
}

.headMobile {
    display: none;
}

.headMobileBox {
    display: flex;
    padding: 10px 0;
    align-items: center;
    justify-content: space-between;
}

.mobiUser {
    background: url(../images/iUser.png) no-repeat;
    padding-left: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    background-size: 30px;
}

.mobiSearchBtn {
    background: url(../images/mobiSearch.png) no-repeat;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-size: 30px;
}

.contactPage {
    padding: 30px 0;
}

.box-info-contact {
    margin-bottom: 15px;
}

.box-info-contact, .box-send-contact {
    background: #F9F4E7;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 0px 6px 0px #d3d3d3;
}

.contact-form .input-group input, .contact-form .input-group textarea {
    color: black;
    height: 45px;
    width: 100%;
    font-weight: 500;
    padding: 8px 20px;
    background: #fff;
    border: 1px solid #5c5c5c;
    border-radius: 4px;
    box-shadow: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.contact-form .input-group {
    width: 100%;
    margin-bottom: 20px;
}

.btnContact {
    background: #7d0506;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 10px;
}

.contact-form .input-group input, .contact-form .input-group textarea {
    color: black;
    height: 45px;
    width: 100%;
    font-weight: 500;
    padding: 8px 20px;
    background: #fff;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    box-shadow: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.contact-form .input-group textarea {
    height: 90px;
}

.box-info-contact h2 {
    color: #860303;
}

.box-send-contact h2 {
    color: #860303;
}

.wrapbox-contact {
}

    .wrapbox-contact ul {
        margin: 0;
    }

        .wrapbox-contact ul li {
            margin-bottom: 10px;
        }

            .wrapbox-contact ul li:last-child {
                margin-bottom: 0;
            }

.message-box {
    color: #7d0506;
    margin: 0px 0 10px;
}

.box-info-contact, .box-send-contact {
    margin-bottom: 15px;
}

.banIDP1 {
}

    .banIDP1 img {
        width: 100%;
    }

.stAbout {
    padding: 40px 0;
    position: relative;
}

.aboutInfo {
    padding-top: 40px;
}

    .aboutInfo h2 {
        font-size: 20px;
    }

    .aboutInfo h3 {
        color: #860303;
        font-size: 40px;
    }

    .aboutInfo p {
        color: #565656;
    }

.aboutDesc {
}

.aboutHomeReadmore {
    background: #FCDB87;
    display: inline-block;
    padding: 12px 45px;
    border-radius: 33px;
    overflow: hidden;
    margin-bottom: 15px;
}

    .aboutHomeReadmore a {
        text-decoration: none;
        font-size: 20px;
        color: #860303;
    }

.aboutImg img {
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}

.line1 {
    background: url(../images/yen1.png) no-repeat;
    width: 105px;
    height: 87px;
    top: 0;
    position: absolute;
    left: calc(50% - 150px);
}

.line2 {
    background: url(../images/yen2.png) no-repeat;
    width: 161px;
    height: 133px;
    bottom: 20px;
    position: absolute;
    left: -85px;
}

.stAbout .container {
    position: relative;
}

.postHome {
    padding: 5px 0 75px;
}

.postHomeHeading {
    margin-bottom: 35px;
    text-align: center;
    color: #AB1D16;
    font-size: 48px;
}

.postHomeItem {
    box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 30%);
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 30px;
}

.postHomeThumb {
    height: 230px;
    overflow: hidden;
    position: relative;
}

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

.postHomeContent {
    padding: 20px 20px;
    background: white;
}

.postHomeTitle {
    margin-bottom: 12px;
}

    .postHomeTitle a {
        font-size: 20px;
        color: #000000;
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }

.postHomeDesc {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 14px;
    color: #5F5D5B;
    text-align: justify;
}

.postHomeRead {
    margin-top: 20px;
}

    .postHomeRead a {
        background: #7d0506;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 8px 10px;
        display: block;
        max-width: 120px;
        text-align: center;
        text-decoration: none;
    }

.postHomeItem:hover .postHomeContent {
    background: #F9F4E7;
}

.postHomeItem:hover .postHomeTitle a {
    color: #7d0506;
}

.postHomeReadAll {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0 0;
}

    .postHomeReadAll a {
        background: #FCDB87;
        display: inline-block;
        padding: 12px 45px;
        border-radius: 33px;
        overflow: hidden;
        margin-bottom: 0;
        text-decoration: none;
        font-size: 20px;
        color: #860303;
    }

.postHomeDate {
    background: #860303;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 8px 45px 8px 20px;
    color: white;
    font-size: 14px;
    border-top-right-radius: 35px;
display: none;
}

.postSign {
    padding: 40px 0;
}

.signBox {
    background: #F9F4E7;
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 3px;
    box-shadow: 0 0 3px #F9F4E7;
}

.postSignHeading {
    color: #860303;
    font-size: 1.8EM;
    margin-bottom: 10px;
}

.postSignDate {
    font-size: 0.9em;
    margin-bottom: 15px;
    display: none;
}

.postSignContent {
}

.postSignRelate {
}

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

.itemRelate {
}

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

    .background-img img {
        max-width: 100%;
        width: 100%;
    }

.box-article-detail {
    max-width: 860px;
    margin: 0 auto 30px;
}

.info-box {
}

    .info-box ul {
    }

        .info-box ul li {
        }

.post-navigation {
    border-top: 1px solid #8e8c8c;
    width: 100%;
    display: inline-block;
    font-size: 16px;
    padding: 15px 0 15px;
}

.articleToolbar-title span {
    color: #7d0506;
    margin-left: 10px;
}

.box-article-detail > div, .box-article-detail > p {
   
}

.info-box {
}

    .info-box h4 {
        color: #860303;
    }

.proPageHeading {
}

    .proPageHeading h1 {
        font-size: 1.8em;
    }

.proPage {
    padding: 40px 0;
    background: #F9F4E7;
}

.menuCategory {
    border: 2px solid #921710;
    background-color: #FFF;
    padding: 15px;
    border-radius: 5px;
}

    .menuCategory h2 {
        font-size: 1.6em;
        color: #860303;
        border-bottom: 2px solid #860303;
        padding-bottom: .75rem;
    }

    .menuCategory ul {
        margin: 0;
        list-style: none;
        padding: 0;
    }

        .menuCategory ul li {
        }

            .menuCategory ul li a {
                color: black;
                text-decoration: none;
                padding-left: 0;
                padding-right: 0;
                font-size: 1.1rem;
            }

                .menuCategory ul li a i {
                    margin-right: 5px;
                }

                .menuCategory ul li a:hover {
                }

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

.proHomeListRelate {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
}


.proHomeItem {
    box-shadow: 0px 0px 9px 0px hsl(0deg 0% 0% / 5%);
    display: block;
    border-radius: 10px;
    overflow: hidden;
    padding: 15px;
    text-align: center;
    background: white;
}

.proHomeThumb {
    height: 200px;
    width: 200px;
    overflow: hidden;
    margin: auto;
    margin-bottom: 5px;
    border-radius: 10px;
}

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

.proHomeContent {
}

.proHomeTitle {
}

    .proHomeTitle a {
        font-size: 20px;
        color: black;
        text-decoration: none;
        height: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin-bottom: 5px;
    }

.proHomePrice {
    display: grid;
    flex-wrap: wrap;
    justify-content: center;
    height: 54px;
}

.proHomeRead {
}

    .proHomeRead a {
        color: #565656;
        text-decoration: none;
    }

.proHomePrice {
}

    .proHomePrice .priceSale {
        display: block;
        color: #860303;
        font-size: 20px;
    }

    .proHomePrice .priceOld {
        color: #909090;
        text-decoration: line-through;
    }

.signProInfo {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    border-radius: 6px !important;
}

.proTab {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: white;
    border-radius: 5px;
    overflow: hidden;
    padding: 1.5rem !important;
}

.proTabContent {
}

.proTabContentHeading {
    font-size: 1.2rem;
    font-weight: bold;
    background: none;
    color: #000;
    border-bottom: 0;
}

.proCategoSign {
    color: #860303;
    margin-bottom: 10px;
}

    .proCategoSign .text {
        display: inline-block;
        font-size: 20px;
    }

    .proCategoSign a {
        text-decoration: none;
        color: black;
        font-size: 18px;
    }

.menuCategory {
}

    .menuCategory h2 {
    }

    .menuCategory ul {
    }

        .menuCategory ul li {
            margin-bottom: 12px;
        }

            .menuCategory ul li a {
            }

.proPageSign {
    padding: 40px 0;
    background: #F9F4E7;
}

.signProBox {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    background: white;
    padding: 1.5rem !important;
    border-radius: 5px;
    overflow: hidden;
}

.proTab {
    .signProBox

{
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    background: white;
    padding: 1.5rem !important;
    border-radius: 5px;
    overflow: hidden;
}

;
}

.proTabContent {
}

.proTabContentHeading {
}

.product-thumbnail a {
    width: 136px;
    height: 136px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-thumbnail .slick-current a {
    border-color: rgb(184, 111, 59) !important;
}

.product-thumbnail .slick-slide a {
    text-align: center;
    border-radius: 15px !important;
    display: inline-block;
    align-items: center;
    display: flex;
}

.product-thumbnail {
    margin-left: 6rem;
    margin-right: 6rem;
}

    .product-thumbnail .slick-slide img, .product-avatar .slick-slide img {
        display: inline-block;
        max-width: 100%;
        width: 100%;
    }

    .product-thumbnail a img {
        max-height: 100%;
    }

.product-avatar .slick-list {
    padding-left: 4rem;
    padding-right: 4rem;
}

.slick-prev,
.slick-next {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
    display: flex;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    background-color: #f2f3f4;
    z-index: 10;
    justify-content: center;
    /* text-indent: -999px; */
    font-size: 0;
}

.slick-prev {
    left: 0;
}

.slick-next {
    right: 0;
}

    .slick-prev:before,
    .slick-next:before {
        font-family: "Font Awesome 5 Pro";
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        color: #333;
        font-size: 2rem;
    }

.slick-prev:before {
    content: "\f104";
}

.slick-next:before {
    content: "\f105";
}

.slick-arrow-bottom {
    padding-bottom: 6rem;
}

.slick-arrow .slick-prev,
.slick-arrow .slick-next {
    left: 2rem;
    right: auto;
    width: auto;
    height: auto;
    padding: .35rem 1rem .5rem;
    border: 1px solid #000;
    border-radius: 0;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

    .slick-arrow .slick-prev:hover,
    .slick-arrow .slick-next:hover {
        background-color: #fff;
    }

    .slick-arrow .slick-prev:before,
    .slick-arrow .slick-next:before {
        font-family: "Font Awesome 5 Pro";
        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    }

    .slick-arrow .slick-prev:before {
        content: "\f104";
    }

    .slick-arrow .slick-next:before {
        content: "\f105";
    }

.slick-arrow-bottom .slick-prev,
.slick-arrow-bottom .slick-next {
    top: auto;
    bottom: 0;
    background: none;
}

.slick-arrow-bottom .slick-prev {
    left: 50%;
    transform: translateX(calc(-46% - 30px));
}

.slick-arrow-bottom .slick-next {
    left: auto;
    right: 50%;
    transform: translateX(calc(46% + 30px));
}

.slick-prev:before {
    content: "\f104";
}

.slick-prev:before, .slick-next:before {
    font-family: "FontAwesome";
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    color: #333;
    font-size: 20px;
    display: block;
}

.btn-addcart {
    background: #FCDB87;
    display: inline-block;
    padding: 12px 45px;
    border-radius: 33px;
    overflow: hidden;
    margin-bottom: 15px;
    font-size: 20px;
    color: #860303;
}

.ftSocialSign {
    display: inline-block;
}

    .ftSocialSign ul {
        display: flex;
        margin: 0;
        gap: 10px;
        padding: 0;
    }

        .ftSocialSign ul li {
            list-style: none;
        }

            .ftSocialSign ul li a {
                width: 33px;
                height: 33px;
                display: block;
            }

            .ftSocialSign ul li:nth-child(1) a {
                background: url(../images/b1.png) no-repeat;
                background-size: 33px;
            }

            .ftSocialSign ul li:nth-child(2) a {
                background: url(../images/b2.png) no-repeat;
                background-size: 33px;
            }

            .ftSocialSign ul li:nth-child(3) a {
                background: url(../images/b3.png) no-repeat;
                background-size: 33px;
            }

.product-share {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .product-share .text {
        color: #860303;
        font-size: 18px;
    }

.proTabContentHeading {
}

.proTabContentBox {
}

.proPageSign .accordion-header {
}

.proPageSign .accordion-button {
    color: #860303;
    background: #fcdb87;
    font-size: 20px;
    outline: none !important;
    border: none !important;
    !importan;
    !importa;
    !import;
    !impor;
    !impo;
    !imp;
    !im;
    !i;
    !;
    box-shadow: none !important;
    !importan;
    !importa;
    !import;
    !impor;
    !impo;
    !imp;
    !im;
    !i;
    !;
}

    .proPageSign .accordion-button::after {
    }

.proPageSign .accordion-item {
    margin-bottom: 30px;
}

.proSignTitle {
    margin: 10px 0;
    font-size: 2em;
}

.slick-slide {
    margin: 0 1rem;
}

.proSignRelateHeading {
    color: #860303;
    font-size: 25px;
    outline: none !important;
    margin-bottom: 20px;
}

.pageAbout1 {
    padding: 60px 0;
    position: relative;
}

.about1Title {
    color: #860303;
    font-size: 2em;
    margin-bottom: 10px;
}

.about1Content {
}

    .about1Content p {
        color: #565656;
    }

.about1Image {
}

    .about1Image img {
        max-width: 100%;
    }

.pageAbout2 {
    padding: 60px 0;
    background: #F9F4E7;
}

.pageAbout2Heading {
    color: #860303;
    font-size: 2em;
    margin-bottom: 10px;
}

.pageAbout2Image {
}

    .pageAbout2Image img {
        max-width: 100%;
    }

.pageAbout3 {
    padding: 40px 0;
}

.pageAbout3Heading {
    color: #860303;
    font-size: 2em;
    margin-bottom: 10px;
}

.pageAbout3Image {
}

    .pageAbout3Image img {
        max-width: 100%;
    }

.pageAbout3Content {
}

    .pageAbout3Content p {
    }

.pageAbout4 {
    padding: 60px 0;
    background: #F9F4E7;
}

.pageAbout4Heading {
    color: #860303;
    font-size: 2em;
    margin-bottom: 10px;
    text-align: center;
}

.pageAbout4Item {
    box-shadow: 0 28px 56px rgba(0, 0, 0, 0.05), 0 20px 20px rgba(0, 0, 0, 0.02);
    background: white;
    padding: 20px;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

.pageAbout4Thumb {
    text-align: center;
    margin-bottom: 10px;
}

    .pageAbout4Thumb img {
    }

.pageAbout4Content {
}

.pageAbout4Title {
    font-size: 1em;
}

.proOwlBox {
    background: #f9f4e7;
    padding: 55px 0 55px 294px;
    /* position: relative; */
    border-radius: 220px 0 0 220px;
}

.proCategory:after {
    position: absolute;
    content: "";
    height: 100%;
    width: calc(((100% - 1200px)/2) + var(--bs-gutter-x, .75rem));
    right: 0;
    background: #f9f4e7;
    top: 0;
}

.proCategory .container {
    /* position: relative; */
}

.proCategory {
    position: relative;
    overflow: hidden;
    margin: 70px 0;
}

.proHomeCategoryBox {
    position: absolute;
    width: 449px;
    height: 399px;
    background: #ab1d16;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 0px 200px 200px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    right: unset;
}

.proHomeCategoryBoxName {
    margin-bottom: 30px;
}

    .proHomeCategoryBoxName a {
        color: white;
        font-size: 2em;
        text-decoration: none;
    }

.proHomeCategoryRead {
}

    .proHomeCategoryRead a {
        background: #FCDB87;
        display: inline-block;
        padding: 12px 45px;
        border-radius: 33px;
        overflow: hidden;
        margin-bottom: 15px;
        text-decoration: none;
        font-size: 20px;
        color: #860303;
    }

.proCategory:nth-child(2n) {
}

    .proCategory:nth-child(2n) .col1 {
        order: 2;
    }

    .proCategory:nth-child(2n) .col2 {
        order: 1;
    }

    .proCategory:nth-child(2n) .col1 .proOwlBox {
    }

    .proCategory:nth-child(2n) .col2 .proOwlBox {
    }

    .proCategory:nth-child(2n):after {
        position: absolute;
        content: "";
        height: 100%;
        width: calc(((100% - 1200px) / 2) + var(--bs-gutter-x, .75rem));
        left: 0;
        background: #f9f4e7;
        top: 0;
    }

    .proCategory:nth-child(2n) .proOwlBox {
        background: #f9f4e7;
        padding: 55px 294px 55px 0;
        /* position: relative; */
        border-radius: 0 220px 220px 0;
    }

    .proCategory:nth-child(2n) .proHomeCategoryBox {
        position: absolute;
        width: 449px;
        height: 399px;
        background: #ab1d16;
        right: 0;
        top: 0;
        left: unset;
        bottom: 0;
        /* margin: 0 auto; */
        border-radius: 200px 0 0 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
    }

.mobiMenuBtn {
    background: url(../images/menuBar.png) no-repeat;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background-size: 30px;
}

.mobileSearchBox {
    padding: 8px 10px;
}

.mobileSearchForm {
    position: relative;
    border: 1px solid #8d1717;
    border-radius: 33px;
    overflow: hidden;
}

    .mobileSearchForm input {
        border: none;
        border-radius: 10px;
        padding: 8px 12px;
        width: 100%;
        height: 30px;
        overflow: hidden !important;
        !importan;
        !importa;
        !import;
        !impor;
        !impo;
        !imp;
        !im;
        !i;
        !;
        outline: none;
    }

    .mobileSearchForm a {
        background: url(../images/isearch2.png) no-repeat;
        display: block;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background-size: 30px;
        position: absolute;
        top: 0;
        right: 0;
    }

.userFormBox {
}

.userForm {
    padding: 2px 10px;
}

    .userForm a {
        color: #8d1717;
        font-size: 16px;
        text-align: center;
        display: block;
        text-decoration: none;
    }

.cartPage {
    padding: 40px 0;
}

#btncontinue {
    background: #e2e2e2;
}

#btnbuys {
    background: #c50e0e;
    color: white;
}

#btncancel {
    display: none;
}

.filter-list {
}

    .filter-list li {
    }

        .filter-list li input, .filter-list li textarea {
            /* border: 1px solid #efefef; */
            border-radius: 8px;
        }

#btneditcart {
    display: none;
}

#btnorder {
    background: #c50e0e;
    color: white;
    margin-top: 15px;
    border-radius: 5px;
    overflow: hidden;
}

#btncancelorder {
    display: none;
}

.regislistul {
    padding: 0;
    list-style: none;
}

    .regislistul .input-box {
        margin-bottom: 10px;
    }

        .regislistul .input-box input {
            border: 1px solid #ddd;
            background: white;
            outline: none !important;
            !importan;
            !importa;
            !import;
            !impor;
            !impo;
            !imp;
            !im;
            !i;
            !;
            box-shadow: none;
        }

    .regislistul .action_bottom {
    }

        .regislistul .action_bottom #btnregister {
            background: #FCDB87;
            display: inline-block;
            padding: 7px 18px;
            border-radius: 33px;
            overflow: hidden;
            margin-bottom: 15px;
            text-decoration: none;
            font-size: 16px;
            color: #860303;
            border: none;
        }

#btnlogin {
    background: #FCDB87;
    display: inline-block;
    padding: 7px 18px;
    border-radius: 33px;
    overflow: hidden;
    margin-bottom: 15px;
    text-decoration: none;
    font-size: 16px;
    color: #860303;
    border: none;
}

.logo {
    max-width: 140px;
}

    .logo img {
        max-width: 100%;
    }

.proSignPrice {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .proSignPrice .price-Sale-note {
        display: block;
        color: #860303;
        font-size: 20px;
    }

    .proSignPrice .price {
        color: #909090;
        text-decoration: line-through;
        font-size: 13px;
    }

.cartblock {
    padding: 40px 0;
}

.box_menu_user .name_student {
    font-size: 30px;
    color: white;
    margin-bottom: 15px;
    font-family: "Oswald", sans-serif;
}

.box_menu_user {
    /* transform: translate(0, -98px); */
}

    .box_menu_user ul {
        display: flex;
        align-items: center;
        list-style: none;
        padding: 0;
        margin: 0;
        gap: 10px;
    }

        .box_menu_user ul li {
            padding: 7px 20px;
            background: #ffffff;
            border-top-left-radius: .5em;
            border-top-right-radius: .5em;
            overflow: hidden;
            padding-left: 30px;
        }

            .box_menu_user ul li a {
                color: black;
                font-size: 1em;
                text-decoration: none;
            }

            .box_menu_user ul li:nth-child(1) {
                background: url(../images/online-learning.png) 8px center no-repeat #ededed;
                background-size: 18px;
            }

            .box_menu_user ul li:nth-child(2) {
                background: url(../images/setting_black.png) 8px center no-repeat #ededed;
                background-size: 18px;
            }

            .box_menu_user ul li:nth-child(3) {
                background: url(../images/key.png) 8px center no-repeat #ededed;
                background-size: 16px;
            }

            .box_menu_user ul li:nth-child(4) {
                background: url(../images/heart.png) 8px center no-repeat white;
                background-size: 18px;
                display: none;
            }

            .box_menu_user ul li:nth-child(5) {
                background: url(../images/shopping-cart.png) 8px center no-repeat white;
                background-size: 18px;
            }

            .box_menu_user ul li.active {
                background-color: #ab1d19;
            }

                .box_menu_user ul li.active a {
                    color: white;
                }

.usProfile {
    /* background: #FFF7F2; */
    padding-bottom: 40px;
}

.profileHeading {
    padding: 10px 15px 10px 15px;
    background: url(../images/setting.png) 8px center no-repeat #FCDB87;
    background-size: 25px;
    width: 100%;
    border-radius: 5px 5px 0 0;
    color: #AB1D16;
    /* font-family: "Oswald", sans-serif; */
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 1.2em;
}

.profileMain {
    padding: 20px;
    background: white;
    box-shadow: 0px 1px 4px 0px #00000029;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
}

.profileThumb {
}

.profileName {
    color: black;
}

    .profileName span {
        /* font-family: 'Kimberley'; */
        color: #ab1d16;
        font-weight: bold;
    }

.profileAddress {
    margin-bottom: 8px;
    padding-top: 2px;
}

    .profileAddress input {
    }

.profileGrField {
}

    .profileGrField input, .profileGrField select {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        margin-bottom: 10px;
        padding: 7px 12px;
        border-radius: .5em;
        border: 1px solid #bcbcbc;
        outline: none;
        color: #818181;
    }

.profileName {
    margin-bottom: 25px;
    margin-top: 8px;
}

.profileAddress input {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 10px;
    padding: 7px 12px;
    border-radius: .5em;
    border: 1px solid #bcbcbc;
    outline: none;
}

.profileGrField .btnregister {
    padding: 3px;
    border-radius: 40px;
    overflow: hidden;
    display: block;
    align-items: center;
    max-width: 179px;
    margin: auto;
    position: relative;
    text-align: center;
    text-decoration: none;
}

.bannerPageUser {
    /* background: #fff7f2; */
}

.checkP {
}

    .checkP input {
        width: auto;
        display: inline-block;
    }

.proField {
    margin-bottom: 3px;
}

    .proField .title {
        color: black;
        /* font-family: 'RobotoMono-Bold'; */
        font-size: .9em;
        font-weight: bold;
        margin-bottom: 4px;
    }

.prInput .bootstrap-select {
    width: 100% !important;
}

.activeCourse {
    padding: 0px 0;
}

.activeCourseBox {
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
}

.activeCourseHeading {
    padding: 10px 15px;
    background: #042050;
    width: 100%;
    border-radius: 5px 5px 0 0;
    /* font-family: 'Kimberley'; */
    font-family: "Oswald", sans-serif;
    color: white;
    text-transform: uppercase;
    overflow: hidden;
    font-weight: bold;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 1.2em;
    max-width: 500px;
}

.activeCourseDesc {
    padding: 20px;
    background: white;
    box-shadow: 0px 1px 4px 0px #00000029;
    border-bottom-left-radius: .5em;
    border-bottom-right-radius: .5em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

    .activeCourseDesc h4 {
        color: black;
        /* font-family: 'RobotoMono-Bold'; */
        font-size: 1em;
        margin-bottom: 4px;
        font-weight: 400;
        width: 100%;
        text-align: center;
    }

.activeCourseForm {
    margin-top: 10px;
}

    .activeCourseForm input {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        margin-bottom: 10px;
        padding: 7px 12px;
        border-radius: .5em;
        border: 1px solid #bcbcbc;
        outline: none;
        color: #818181;
    }

.btnActiveCourse {
    padding: 3px;
    border-radius: 40px;
    overflow: hidden;
    font-family: 'RobotoMono-Bold';
    display: block;
    align-items: center;
    max-width: 152px;
    margin: auto;
    position: relative;
    text-align: center;
}

    .btnActiveCourse span {
        padding: 5px 0px;
        display: block;
        border-radius: 21px;
        overflow: hidden;
        font-weight: 700;
        font-size: 16px;
        background: #042050;
        font-family: "Oswald", sans-serif;
        color: white;
    }

.titleProfile {
    width: 100%;
    border-radius: 5px 5px 0 0;
    font-family: "Oswald", sans-serif;
    color: black;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: .95em;
    margin-bottom: 10px;
}

.profileThumb .center {
    width: 100px;
    height: 130px;
    border-radius: 0.5em;
    overflow: hidden;
    margin-bottom: 5px;
}

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

.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
    height: 39px;
    line-height: 39px;
    border: 1px solid #B2B2B2;
    width: 100%;
    border-radius: 5px;
    padding: 0 15px;
    font-size: 18px;
    color: #818181;
    margin-bottom: 20px;
    background: white;
    outline: none !important;
}

.bootstrap-select > select.mobile-device:focus + .dropdown-toggle, .bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
    box-shadow: none !important;
}

.cartPage {
    padding: 40px 0;
}

.commentMessage {
    margin-bottom: 5px;
}

.commentBox {
}

.commentForm {
}

.commentUser {
    display: flex;
    gap: 30px;
    align-items: center;
}

.commentContent {
    width: 100%;
    max-height: 90px;
}

    .commentContent #strContent {
        width: 100%;
        border: none;
        border-bottom: 3px solid #595959;
        max-height: 90px;
        font-size: 16px;
        color: #595959 !important;
        font-family: 'RobotoMono-Bold';
        padding-bottom: 5px;
        outline: none;
    }

        .commentContent #strContent::placeholder {
            color: #595959 !important;
            font-family: 'RobotoMono-Bold';
        }

    .commentContent #send {
        margin-top: 10px;
        text-align: right;
        justify-content: end;
        display: grid;
    }

        .commentContent #send span {
            padding: 5px 10px;
            border-radius: 30px;
            overflow: hidden;
            font-weight: 700;
            font-size: 16px;
            background: #042050;
            color: white;
            display: block;
            max-width: 100px;
            text-align: center;
            cursor: pointer;
        }

.commentThumb {
    width: 107px;
    height: 107px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 0.5em;
    position: relative;
}

    .commentThumb .box1 {
        background: #042050;
        padding: 6px;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .commentThumb .box2 {
        width: 100%;
        height: 100%;
    }

    .commentThumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
        overflow: hidden;
    }

.commentList {
}

.commItem {
    margin-top: 50px;
}

.commItemUser {
    display: flex;
    gap: 38px;
}

.commItemThumb {
    width: 107px;
    height: 107px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 0.5em;
    position: relative;
}

    .commItemThumb .box1 {
        background: #042050;
        padding: 6px;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .commItemThumb .box2 {
        width: 100%;
        height: 100%;
    }

    .commItemThumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
        overflow: hidden;
    }

.commItemContent {
    padding-left: 30px;
    position: relative;
    width: 100%;
}

    .commItemContent .box3 {
        padding: 21px 74px;
        background: #EBEBEB;
        position: relative;
    }

.commItemDescription {
    font-size: 16px;
    color: #595959;
    font-family: 'RobotoMono-Bold';
}

.commItemName {
    color: #000000;
    font-size: 24px;
    font-family: 'RobotoMono-Bold';
    margin-bottom: 7px;
}

.commItemStar {
    margin-bottom: 10px;
}

    .commItemStar span {
        height: 22px;
        background: url(../images/iStarPro.png) no-repeat;
        overflow: hidden;
        display: block;
    }

.commItemContent:before {
    content: "";
    position: absolute;
    width: 55PX;
    height: 50PX;
    border-left: 50px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 0px solid transparent;
    border-top: 50px solid #EBEBEB;
    left: -10px;
    top: 0;
    border-radius: 5px;
    /* background: url(../images/tamgiac.png); */
}

.fileListGroup {
}

    .fileListGroup h4 {
        background-image: linear-gradient(to bottom, #5f5050, #513e3e, #432d2c, #351d1b, #280d06);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 1.2em;
        font-family: "Oswald", sans-serif;
        text-align: left;
        padding: 10px 0 5px;
        display: block;
        margin-bottom: 4px;
    }

    .fileListGroup ul {
        padding-left: 0;
        list-style: none;
    }

        .fileListGroup ul li {
        }

            .fileListGroup ul li a {
                font-size: 16px;
                display: block;
                padding-left: 15px;
                position: relative;
            }

                .fileListGroup ul li a:before {
                    content: "";
                    background: #007bff;
                    width: 5px;
                    height: 5px;
                    position: absolute;
                    left: 3px;
                    border-radius: 50%;
                    top: 2px;
                    bottom: 0;
                    margin: auto;
                }

.commentNumber {
    font-size: 24px;
    color: #000000;
    margin-bottom: 27px;
    font-family: 'RobotoMono-Bold';
}

.btnApDung {
    background: #B2B2B2;
    width: 100%;
    padding: 0;
    line-height: 43px !important;
    outline: none;
    border: none;
    color: white;
}

.camList {
}

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

.msg_error {
    color: red;
}

.ttdh {
    color: black;
}

    .ttdh table td {
        padding: 5px;
        color: black;
    }

.ghit {
}

.prdimg {
    float: unset !important;
    display: inline-block;
    width: 100px;
}

.itghslg {
    display: none;
}
.ghct {
    display: inline-block;
    text-align: left;
}
    .ghct p {
        margin-bottom: 5px;
    }
.itghtt {
    float: unset!important;
    color: red;
}
.video-container{

}
.video-container {
    position: relative;
       padding-bottom: 35.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    /*DeskTop*/
    a.button-social-login.button-social-login-google, .widget-area a.button-social-login.button-social-login-google, .social-badge.social-badge-google {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        line-height: 2.5em;
        height: 2.5em;
        font-size: 100%;
        font-family: inherit;
        font-weight: 700;
        overflow: hidden;
        white-space: nowrap;
        border: 1px solid #333;
        color: #fff;
        background: #333;
        padding: 0 .7em 0 0;
        margin: 6px 0;
        border-radius: 2px;
        box-sizing: content-box;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
        text-decoration: none;
        background: #f00 !important;
        border-color: #f00 !important;
        margin-right: 20px;
    }

a.button-social-login.button-social-login-facebook, .widget-area a.button-social-login.button-social-login-facebook, .social-badge.social-badge-facebook {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 2.5em;
    height: 2.5em;
    font-size: 100%;
    font-family: inherit;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid #333;
    color: #fff;
    background: #333;
    padding: 0 .7em 0 0;
    margin: 6px 0;
    border-radius: 2px;
    box-sizing: content-box;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    text-decoration: none;
    background: #3b5998;
    border-color: #3b5998;
}

.button-social-login i, .widget-area .widget a.button-social-login i, a.button-social-login i, button.button-social-login i, input.button-social-login i {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 100%;
    width: 2.5em;
    height: 2.5em;
    padding: 0;
    margin-right: .7em;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 1.8em 1.8em;
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
}



.dflex {
    display: flex
}

.btnregister span {
    padding: 11px 0px;
    display: block;
    border-radius: 30px;
    overflow: hidden;
    font-weight: 700;
    font-size: 16px;
    background: #fcdb87;
    color: #AB1D16;
}

.box-manager {
    margin-bottom: 30px;
    padding: 40px 0;
}

.header_user {
    padding: 10px 15px;
    background: #ffc653b0;
    font-family: "Oswald", sans-serif;
    width: 100%;
    color: #051f4f;
    border-radius: 5px 5px 0 0;
    font-size: 1.6em;
}

    .header_user i {
        margin-right: 10px;
        font-size: 20px;
    }

.box-layout {
    border-radius: 0 0 5px 5px;
    width: 100%;
    background: white;
    padding: 20px;
    box-shadow: 1px 3px 8px 0.5px rgb(0 0 0 / 15%);
}


    .box-layout .box-layout-content p {
        padding: 5px 0;
    }

#pnforget .btnForget {
    display: inline-block;
    max-width: 120px;
    width: 100%;
    padding: 0px 0;
    text-align: center;
    border-radius: 0.5em;
    color: white;
    font-size: 0.9em;
    font-family: "Oswald", sans-serif;
    font-weight: bold;
    height: 40px;
    line-height: unset;
    background: #042050;
    border: none;
}

.fotgetMess {
    margin-top: 5px;
}

.crSignDetail {
}

.crSignBox1 {
    padding: 60px 0;
    background: url(../images/bannerCourse.jpg) center center no-repeat;
    background-size: cover;
}

.crSignInfo {
    display: flex;
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.crSignInfoGr1 {
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;
    gap: 15px;
}

.crSignInfoGr2 {
}

.crSignInfoAvavatar {
    position: relative;
}

    .crSignInfoAvavatar img {
        max-width: 100%;
    }

.crSignInfo div {
}

.crSignInfoGr1Heading {
    font-size: 1.3em;
    color: white;
    font-family: "Oswald", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}



.crSignInfoGr1Content {
    height: 193px;
}

.crSignInfoGr1ContentBox {
    display: grid;
    transform: translate(35px, 0px);
    position: absolute;
    z-index: 1;
}

.crSignInfoGr1ContentBox1Gr {
}

.crSignInfoGr1ContentBox1Heading {
    color: #FDC656;
    font-size: 1.8em;
    font-family: "Oswald", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-bottom: 15px;
}

.crSignInfoGr1ContentBox1Gr {
    background: rgb(0 0 0 / 80%);
    padding: 17px 50px;
    border-right: 17px solid #FDC656;
}

    .crSignInfoGr1ContentBox1Gr .item {
        color: white;
    }

        .crSignInfoGr1ContentBox1Gr .item strong {
            margin-left: 5px;
        }

.crSignInfoGr1ContentBox1GrContent {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
    display: grid;
}

    .crSignInfoGr1ContentBox1GrContent strong {
    }

        .crSignInfoGr1ContentBox1GrContent strong span {
            color: #FDC656;
        }

.crSignInfoGr1ContentBox1GrButton {
    display: flex;
    gap: 20px;
    transform: translate(0px, -5px);
}

.crSignInfoGr1ContentBox1GrButton1 {
    width: 200px;
    background: #D9D9D9;
    display: flex;
    align-items: center;
    height: 68px;
    max-width: 270px;
    flex-wrap: wrap;
    font-family: "Oswald", sans-serif;
    padding: 0px 15px;
}

    .crSignInfoGr1ContentBox1GrButton1 .price1 {
        width: 100%;
        text-align: left;
        font-size: 22px;
        font-weight: bold;
        color: #042050;
    }

    .crSignInfoGr1ContentBox1GrButton1 .price2 {
        width: 100%;
        text-align: left;
        color: #636363;
        text-decoration: line-through;
        font-size: 15px;
    }

.crSignInfoGr1ContentBox1GrButton2 {
    background: #FDC656;
    width: 211px;
    height: 68px;
}

    .crSignInfoGr1ContentBox1GrButton2 a {
        font-size: 22px;
        font-weight: bold;
        color: #042050;
        font-family: "Oswald", sans-serif;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

.crSignInfoAvavatar .crSignInfoPlay {
    background: url(../images/playvideosign.png) center center no-repeat;
    width: 123px;
    height: 123px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    cursor: pointer;
}

.gvDetailsProBlock {
    padding: 50px 0;
    margin: 50px 0;
    position: relative;
    background: #EBF0FF;
}

.tabProContainer {
}

    .tabProContainer .stAbout {
        padding: 39px 0;
    }

.aboutHeadingPro {
    position: relative;
    background: #FDC656;
    display: inline-flex;
    align-items: center;
    height: 43px;
    padding: 0 36px;
    color: #042050;
    font-weight: bold;
    font-family: "Oswald", sans-serif;
    transform: translate(0px, -61px);
    text-transform: uppercase;
}

    .aboutHeadingPro span {
    }

        .aboutHeadingPro span:before {
            content: "";
            background: #FDC656;
            opacity: .5;
            width: 25px;
            height: 43px;
            position: absolute;
            top: 0;
            left: calc(100% + 15px);
        }

        .aboutHeadingPro span:after {
            content: "";
            background: #FDC656;
            opacity: .2;
            width: 25px;
            height: 43px;
            position: absolute;
            top: 0;
            left: calc(100% + 60px);
        }


.tabProContainer .aboutImage img {
    transform: translate(0, -54px);
}

#noi-dung-khoa-hoc {
}

    #noi-dung-khoa-hoc .proTabDefaultHeading {
        color: #000000;
        margin: 15px 0;
        font-family: "Oswald", sans-serif;
        font-size: 20px;
        display: flex;
        align-items: center;
        text-transform: uppercase;
        font-weight: bold;
    }

.ListProDeCrouse {
    margin-bottom: 20px;
}

.ListProDeCrouseHeading {
    background: url(../images/iPlayVideoCourse0.png) no-repeat #042050;
    background-position-x: calc(100% - 20px);
    background-position-y: center;
    /*   border-radius: 20px;*/
    padding: 21px 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .ListProDeCrouseHeading h2 {
        margin: 0;
        font-family: "Oswald", sans-serif;
        font-size: 20px;
        display: flex;
        align-items: center;
        color: #FDC656;
        gap: 17px;
        text-transform: uppercase;
    }

    .ListProDeCrouseHeading span {
        font-size: 24px;
    }

.ListProDeItem {
    margin-top: 15px;
    padding: 5px 46px;
    background: url(../images/iPlayVideoCourse.png) #D9D9D9 no-repeat;
    background-position-x: calc(100% - 20px);
    background-position-y: center;
    /* border-radius: 20px; */
    display: flex;
    justify-content: space-between;
}

    .ListProDeItem span {
        font-size: 16px;
        color: #595959;
        height: 44px;
        display: flex;
        font-family: "Oswald", sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        align-items: center;
    }

        .ListProDeItem span:nth-child(1) {
        }

        .ListProDeItem span:nth-child(2) {
            /*     background: url(../images/iTime.png) no-repeat;
            padding-left: 50px;*/
        }

.crSignDescription {
    padding: 52px 0;
    background: #E3DEDE;
    margin-bottom: 40px;
}

.crSignDescriptionBox {
    align-items: center;
    display: flex;
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    gap: 40px;
}

    .crSignDescriptionBox .box1 {
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: wrap;
        display: flex;
        gap: 15px;
        color: #042050;
        margin: 10px 0;
        font-family: "Oswald", sans-serif;
        font-size: 1.8em;
        display: flex;
        text-transform: uppercase;
        font-weight: bold;
    }

    .crSignDescriptionBox .box2 {
        flex: 1 1;
        flex-direction: column;
        display: flex;
    }

        .crSignDescriptionBox .box2 ul {
            padding-left: 19px;
            margin: 0;
        }

            .crSignDescriptionBox .box2 ul li {
                margin-bottom: 10px;
                color: #042050;
            }

                .crSignDescriptionBox .box2 ul li:last-child {
                    margin-bottom: 0;
                }

#popupContract {
}

.popupContract {
    bottom: 0;
    left: 0;
    overflow-x: auto;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0 !important;
    z-index: 9999;
    display: none;
    max-width: 450px;
    margin: auto;
}

.popupContractBox {
    background: white;
    border: 2px solid #002051;
    border-radius: 5px;
    padding: 20px 30px 30px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 475px;
}

.popupContractForm {
}

    .popupContractForm input {
        width: 100%;
        height: 35px;
        border: 1px solid #dddddd;
        padding: 5px 10px;
        margin-bottom: 10px;
        outline: none;
        font-size: 14px;
    }

.popupContractContent {
}

    .popupContractContent h5 {
        text-align: center;
        font-size: 1em;
        color: black;
    }

    .popupContractContent ul {
        padding-left: 19px;
    }

        .popupContractContent ul li {
        }

            .popupContractContent ul li a {
            }

    .popupContractContent img {
    }

.popupContractSubMit {
}

    .popupContractSubMit a {
        max-width: 140px;
        width: 100%;
        background: #002051;
        display: block;
        padding: 8px 14px;
        text-align: center;
        border-radius: 10px;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        margin: auto;
        cursor: pointer;
    }

        .popupContractSubMit a:hover {
        }

.popupContract.active {
    display: block;
}

.popupContractHeading {
    PADDING: 10px 0;
    text-align: center;
    font-size: 1.4em;
    color: #042050;
    text-transform: uppercase;
    font-weight: bold;
    font-family: "Oswald", sans-serif;
    line-height: unset;
}


.backdrop__body-backdrop___1rvky {
    position: fixed;
    opacity: 0;
    width: 100%;
    left: 0;
    top: 0 !important;
    right: 0;
    bottom: 0;
    background-color: #363636;
    z-index: 9;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

    .backdrop__body-backdrop___1rvky.active {
        visibility: visible;
        opacity: 0.5;
    }

.popupClose {
    position: absolute;
    width: 27px;
    height: 15px;
    right: 0;
    top: 8px;
    z-index: 9999;
}

    .popupClose span {
        cursor: pointer;
    }

.regisBox {
}

    .regisBox input {
        width: 100%;
        margin-bottom: 8px;
        height: 40px;
        border: 1px solid #efefef;
        padding: 8px 10px;
        display: block;
        outline: none;
    }

    .regisBox #btnRegis {
        background: #042050;
        max-width: 130px;
        margin: 0 auto;
        color: white;
        font-weight: bold;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        border-radius: 8px;
        margin-bottom: 30px;
    }

.crSignInfoProcess {
    max-width: 130px;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    text-align: center;
}

    .crSignInfoProcess span:nth-child(1) {
        background: #FDC656;
        color: #042050;
        padding: 5px 10px;
        font-weight: bold;
        font-family: "Oswald", sans-serif;
        font-size: 20px;
    }

    .crSignInfoProcess span:nth-child(2) {
        color: white;
        font-weight: bold;
        transform: translate(0px, -15px);
        font-size: 39px;
        font-family: "Oswald", sans-serif;
    }

.crSignBox2 {
    padding: 40px 0;
}

.ifLesThumb {
    flex: 2 1 auto;
    /* flex-direction: column; */
    /* justify-content: space-between; */
    /* flex-wrap: wrap; */
    display: block;
    /* gap: 15px; */
}

.changeCourseVideo {
}

.infoLesson {
    display: flex;
    -js-display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

.ifLesTitle {
    margin-bottom: 10px;
}

    .ifLesTitle span {
        text-transform: uppercase;
        font-weight: bold;
        color: #595959;
    }

.crSignBox3 {
}

.ifDescription {
}

.pro1Heading {
}

.fileListGroup {
}

    .fileListGroup ul {
    }

        .fileListGroup ul li {
        }

            .fileListGroup ul li a {
            }

.crSignBox4 {
}

.asideLesson {
}

.asideLessonHeading {
    color: #042050;
    font-family: "Oswald", sans-serif;
    font-weight: bold;
    font-size: 1.6em;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.lesItem {
    margin-bottom: 20px;
}

.lesItemContent {
}

.lesItemTitle {
    background: url(../images/playopa.png) no-repeat #E3E3E3;
    background-position-x: calc(100% - 20px);
    background-position-y: center;
    padding: 21px 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .lesItemTitle a {
        margin: 0;
        font-family: "Oswald", sans-serif;
        font-size: 20px;
        display: flex;
        align-items: center;
        color: #636363;
        gap: 17px;
        text-transform: uppercase;
        font-weight: bold;
    }

    .lesItemTitle:hover {
        background: url(../images/iPlayVideoCourse0.png) no-repeat #042050;
        background-position-x: calc(100% - 20px);
        background-position-y: center;
    }

        .lesItemTitle:hover a {
            color: #FDC656;
        }

.crSignBox5 {
    padding: 40px 0;
}

.ifLesContent {
    flex: 1 1 auto;
}

.changeCourseVideo {
}

    .changeCourseVideo img {
        max-width: 100%;
    }

.ifLesDescription {
    padding: 5px 0;
    color: black;
    font-size: 14px;
}

.ifLesThumb iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    border: none;
    overflow: hidden;
}

.infoLessonHeading {
    background: #042050;
    gap: 12px;
    width: 45%;
    position: relative;
    font-size: 32px;
    height: 65px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: #FDC656;
    font-size: 1.2em;
    font-family: "Oswald", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    overflow: visible;
    text-overflow: ellipsis;
    margin-bottom: 15px;
}

    .infoLessonHeading:before {
        content: "";
        background: #042050;
        opacity: 0.5;
        width: 30px;
        height: 65px;
        position: absolute;
        top: 0;
        left: calc(100% + 15px);
        visibility: visible;
    }

    .infoLessonHeading:after {
        content: "";
        background: #042050;
        opacity: .2;
        width: 30px;
        height: 65px;
        position: absolute;
        top: 0;
        left: calc(100% + 60px);
    }

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

.btnFinishK {
}

.logo {
    max-width: 128px;
}

    .logo img {
        max-width: 100%;
    }

.btnFinishK a {
    background: #042050;
    max-width: 220px;
    text-align: center;
    font-weight: bold;
    color: #fdc656;
    padding: 10px 20px;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    cursor: pointer;
}

.btnFinishK.active a {
    background: #fdc656;
    color: #042050;
}

.crSignInfoGr1ContentBox1GrButton3 a {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    font-family: "Oswald", sans-serif;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #042050;
    padding: 5px 20px;
    background-image: linear-gradient(to right, #0f4ecb, #143cb3, #142b9c, #101a85, #0a066f);
}
/*Desktop*/
@media (max-width: 48em) {
    .proHomeTitle a {
        font-size: 17px;
    }

    .proCategory:nth-child(2n) .col2 .proOwlBox {
        border-radius: 10px;
    }

    .proHomeCategoryBoxName a {
        color: #AB1D16;
        font-size: 2em;
        text-decoration: none;
    }

    .proHomeCategoryBoxName {
        margin-bottom: 10px;
    }

    .proHomeCategoryBox {
        position: relative;
        width: 100%;
        height: auto;
        background: none !important;
        margin: auto;
        border-radius: 0px 200px 200px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .proCategory .proOwlBox {
        background: #f9f4e7;
        padding: 10px;
        /* position: relative; */
        border-radius: 10px;
    }

    .proCategory:nth-child(2n) .proOwlBox {
        background: #f9f4e7;
        padding: 10px;
        /* position: relative; */
        border-radius: 0 220px 220px 0;
    }

    .proCategory:nth-child(2n) .proHomeCategoryBox {
        position: relative;
        width: 100%;
        height: auto;
        background: none !important;
        margin: auto;
        border-radius: 0px 200px 200px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        flex-direction: column;
    }

    .proHomeItem {
        padding: 10px;
    }

    .proOwlBox {
        background: #f9f4e7;
        padding: 15PX 10PX;
        position: relative;
        border-radius: 10px;
    }

    .pageAbout4Item {
        height: auto;
        margin-bottom: 10px;
    }

    .aboutInfo h3 {
        color: #860303;
        font-size: 30px;
    }

    .postHomeHeading {
        font-size: 30px;
    }

    .line2 {
        display: none;
    }

    .line1 {
        top: -80px;
        left: calc(100% - 125px);
    }

    .proHomeList {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 30px;
    }

    .proHomeListRelate {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 30px;
    }

    .product-thumbnail {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1.5rem;
    }

        .product-thumbnail a {
            width: 100%;
            height: 85px;
            padding: 0.5rem !important;
        }

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

    .comInfo {
        display: none;
    }

    .headMain {
        display: none;
    }

    .headMobile {
        display: block;
    }

    .logoMobile {
    }


        .logoMobile img {
            max-width: 125px;
        }

    .grHeadMobi {
        display: flex;
        gap: 10px;
        align-items: center;
    }

        .grHeadMobi .item {
        }

            .grHeadMobi .item a {
            }
}

#pagination {
    text-align: center;
    font-size: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

    #pagination span {
    }

    #pagination a {
        color: black;
        text-decoration: none;
    }

        #pagination a:hover {
        }