:root {
    --maincolor: #103B7F;
    --maingreen: #06CB66;
    --lightgreen: #0AE977;
    --textcolor: #8490A3;
    --darkgrey: #9BABC5;
    --coolgray: #CAD3E0;
    --lighttext: #ADC1E2;
    --linecolor: #E8EDF2;
    --light: #F3F6FA;
    --white: #FFFFFF;
}

/*---------------------- Public Style ---------------------*/

body {
    background-color: var(--white);
    margin: 0;
    padding: 0;
    direction: rtl;
    overflow-x: hidden;
    scroll-behavior: smooth;
    text-align: right;
}

* {
    font-family: YekanBakh;
    outline: medium none !important;
    text-decoration: none !important;
}

.dana-font {
    font-family: Dana !important;
    -moz-font-feature-settings: "ss03";
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";
}

.font-weight-900 {
    font-weight: 900;
}

.font-weight-600 {
    font-weight: 600;
}

.font-weight-500 {
    font-weight: 500;
}

.container {
    max-width: 100%;
    padding: 0 200px;
}

::selection {
    background-color: var(--maincolor);
    color: var(--white);
}

/*---------------------- Colors ---------------------*/

.text-main {
    color: var(--maincolor);
}

.text-maingreen {
    color: var(--maingreen);
}

.text-lightgreen {
    color: var(--lightgreen);
}

.text-color {
    color: var(--textcolor);
}

.text-darkgray {
    color: var(--darkgrey);
}

.text-coolgray {
    color: var(--coolgray);
}

.text-lighttext {
    color: var(--lighttext);
}

.text-linecolor {
    color: var(--linecolor);
}

.text-light {
    color: var(--light);
}

.text-white {
    color: var(--white);
}

/*---------------------- /Colors ---------------------*/

/*---------------------- Backgrounds ---------------------*/

.bg-main {
    background-color: var(--maincolor);
}

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

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

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

.bg-darkgray {
    background-color: var(--darkgrey);
}

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

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

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

.bg-light {
    background-color: var(--light) !important;
}

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

/*---------------------- /Backgrounds ---------------------*/

/*---------------------- Font Sizes ---------------------*/

.font-size-10 {
    font-size: 10px;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-13 {
    font-size: 13px;
}

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

.font-size-16 {
    font-size: 16px;
}

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

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

.font-size-22 {
    font-size: 22px;
}

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

.font-size-26 {
    font-size: 26px;
}

.font-size-28 {
    font-size: 28px;
}

.font-size-30 {
    font-size: 30px;
}

/*---------------------- /Font Sizes ---------------------*/

/*---------------------- Border Radius ---------------------*/

.rounded-2 {
    border-radius: 2px;
}

.rounded-4 {
    border-radius: 4px;
}

.rounded-6 {
    border-radius: 6px;
}

.rounded-8 {
    border-radius: 8px;
}

.rounded-10 {
    border-radius: 10px;
}

.rounded-12 {
    border-radius: 12px;
}

.rounded-14 {
    border-radius: 14px;
}

.rounded-16 {
    border-radius: 16px;
}

.rounded-18 {
    border-radius: 18px;
}

.rounded-20 {
    border-radius: 20px;
}

.rounded-22 {
    border-radius: 22px;
}

.rounded-24 {
    border-radius: 24px;
}

.rounded-26 {
    border-radius: 26px;
}

.rounded-28 {
    border-radius: 28px;
}

.rounded-30 {
    border-radius: 30px;
}

.rounded-lg {
    border-radius: 500px;
}

.rounded-circle {
    border-radius: 100%;
}

/*---------------------- /Border Radius ---------------------*/

/*---------------------- Border Colors ---------------------*/

.border-color-100 {
    border-color: var(--linecolor);
    background-clip: padding-box;
}

.border-style-dashed {
    border-style: dashed;
}

/*---------------------- /Border Colors ---------------------*/

/*---------------------- Box Shadows ---------------------*/

.bsh-main {
    box-shadow: 0 0 20px rgb(30, 30, 30, 0.06);
}

/*---------------------- /Box Shadows ---------------------*/

/*---------------------- Margins ---------------------*/

.mg-0 {
    margin: 0;
}

.mg-5 {
    margin: 5px;
}

.mg-10 {
    margin: 10px;
}

.mg-15 {
    margin: 15px;
}

.mg-20 {
    margin: 20px;
}

.mg-25 {
    margin: 25px;
}

.mg-30 {
    margin: 30px;
}

.mg-40 {
    margin: 40px;
}

/*---------------------- Margin X ---------------------*/

.mgx-0 {
    margin-right: 0;
    margin-left: 0;
}

.mgx-2 {
    margin-right: 2px;
    margin-left: 2px;
}

.mgx-5 {
    margin-right: 5px;
    margin-left: 5px;
}

.mgx-10 {
    margin-right: 10px;
    margin-left: 10px;
}

.mgx-15 {
    margin-right: 15px;
    margin-left: 15px;
}

.mgx-20 {
    margin-right: 20px;
    margin-left: 20px;
}

.mgx-25 {
    margin-right: 25px;
    margin-left: 25px;
}

.mgx-30 {
    margin-right: 30px;
    margin-left: 30px;
}

.mgx-40 {
    margin-right: 40px;
    margin-left: 40px;
}

/*---------------------- /Margin X ---------------------*/

/*---------------------- Margin Y ---------------------*/

.mgy-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.mgy-5 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.mgy-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mgy-15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.mgy-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mgy-25 {
    margin-top: 25px;
    margin-bottom: 25px;
}

.mgy-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.mgy-40 {
    margin-top: 40px;
    margin-bottom: 40px;
}

/*---------------------- /Margin Y ---------------------*/

/*---------------------- Margin Top ---------------------*/

.mgt-0 {
    margin-top: 0;
}

.mgt-5 {
    margin-top: 5px;
}

.mgt-10 {
    margin-top: 10px;
}

.mgt-15 {
    margin-top: 15px;
}

.mgt-20 {
    margin-top: 20px;
}

.mgt-25 {
    margin-top: 25px;
}

.mgt-30 {
    margin-top: 30px;
}

.mgt-40 {
    margin-top: 40px;
}

/*---------------------- /Margin Top ---------------------*/

/*---------------------- Margin Bottom ---------------------*/

.mgb-0 {
    margin-bottom: 0;
}

.mgb-5 {
    margin-bottom: 5px;
}

.mgb-10 {
    margin-bottom: 10px;
}

.mgb-15 {
    margin-bottom: 15px;
}

.mgb-20 {
    margin-bottom: 20px;
}

.mgb-25 {
    margin-bottom: 25px;
}

.mgb-30 {
    margin-bottom: 30px;
}

.mgb-40 {
    margin-bottom: 40px;
}

/*---------------------- /Margin Bottom ---------------------*/

/*---------------------- Margin Right ---------------------*/

.mgr-0 {
    margin-right: 0;
}

.mgr-5 {
    margin-right: 5px;
}

.mgr-10 {
    margin-right: 10px;
}

.mgr-15 {
    margin-right: 15px;
}

.mgr-20 {
    margin-right: 20px;
}

.mgr-25 {
    margin-right: 25px;
}

.mgr-30 {
    margin-right: 30px;
}

.mgr-40 {
    margin-right: 40px;
}

/*---------------------- /Margin Right ---------------------*/

/*---------------------- Margin Left ---------------------*/

.mgl-0 {
    margin-left: 0;
}

.mgl-5 {
    margin-left: 5px;
}

.mgl-10 {
    margin-left: 10px;
}

.mgl-15 {
    margin-left: 15px;
}

.mgl-20 {
    margin-left: 20px;
}

.mgl-25 {
    margin-left: 25px;
}

.mgl-30 {
    margin-left: 30px;
}

.mgl-0 {
    margin-left: 0;
}

.mgl-5 {
    margin-left: 5px;
}

.mgl-10 {
    margin-left: 10px;
}

.mgl-15 {
    margin-left: 15px;
}

.mgl-20 {
    margin-left: 20px;
}

.mgl-25 {
    margin-left: 25px;
}

.mgl-40 {
    margin-left: 40px;
}

/*---------------------- /Margin Left ---------------------*/

/*---------------------- /Margins ---------------------*/

/*---------------------- Paddings ---------------------*/

.pd-0 {
    padding: 0;
}

.pd-5 {
    padding: 5px;
}

.pd-10 {
    padding: 10px;
}

.pd-15 {
    padding: 15px;
}

.pd-20 {
    padding: 20px;
}

.pd-25 {
    padding: 25px;
}

.pd-30 {
    padding: 30px;
}

.pd-30 {
    padding: 30px;
}

/*---------------------- Padding X ---------------------*/

.pdx-0 {
    padding-right: 0;
    padding-left: 0;
}

.pdx-5 {
    padding-right: 5px;
    padding-left: 5px;
}

.pdx-10 {
    padding-right: 10px;
    padding-left: 10px;
}

.pdx-15 {
    padding-right: 15px;
    padding-left: 15px;
}

.pdx-20 {
    padding-right: 20px;
    padding-left: 20px;
}

.pdx-25 {
    padding-right: 25px;
    padding-left: 25px;
}

.pdx-30 {
    padding-right: 30px;
    padding-left: 30px;
}

.pdx-40 {
    padding-right: 40px;
    padding-left: 40px;
}

/*---------------------- /Padding X ---------------------*/

/*---------------------- Padding Y ---------------------*/

.pdy-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.pdy-5 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.pdy-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pdy-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.pdy-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.pdy-25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.pdy-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.pdy-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

/*---------------------- /Padding Y ---------------------*/

/*---------------------- Padding Top ---------------------*/

.pdt-0 {
    padding-top: 0;
}

.pdt-5 {
    padding-top: 5px;
}

.pdt-10 {
    padding-top: 10px;
}

.pdt-15 {
    padding-top: 15px;
}

.pdt-20 {
    padding-top: 20px;
}

.pdt-25 {
    padding-top: 25px;
}

.pdt-30 {
    padding-top: 30px;
}

.pdt-40 {
    padding-top: 40px;
}

/*---------------------- /Padding Top ---------------------*/

/*---------------------- Padding Bottom ---------------------*/

.pdb-0 {
    padding-bottom: 0;
}

.pdb-5 {
    padding-bottom: 5px;
}

.pdb-10 {
    padding-bottom: 10px;
}

.pdb-15 {
    padding-bottom: 15px;
}

.pdb-20 {
    padding-bottom: 20px;
}

.pdb-25 {
    padding-bottom: 25px;
}

.pdb-30 {
    padding-bottom: 30px;
}

.pdb-40 {
    padding-bottom: 40px;
}

/*---------------------- /Padding Bottom ---------------------*/

/*---------------------- Padding Right ---------------------*/

.pdr-0 {
    padding-right: 0;
}

.pdr-5 {
    padding-right: 5px;
}

.pdr-10 {
    padding-right: 10px;
}

.pdr-15 {
    padding-right: 15px;
}

.pdr-20 {
    padding-right: 20px;
}

.pdr-25 {
    padding-right: 25px;
}

.pdr-30 {
    padding-right: 30px;
}

.pdr-40 {
    padding-right: 40px;
}

/*---------------------- /Padding Right ---------------------*/

/*---------------------- Padding Left ---------------------*/

.pdl-0 {
    padding-left: 0;
}

.pdl-5 {
    padding-left: 5px;
}

.pdl-10 {
    padding-left: 10px;
}

.pdl-15 {
    padding-left: 15px;
}

.pdl-20 {
    padding-left: 20px;
}

.pdl-25 {
    padding-left: 25px;
}

.pdl-30 {
    padding-left: 30px;
}

.pdl-40 {
    padding-left: 40px;
}

/*---------------------- /Padding Left ---------------------*/

/*---------------------- /Paddings ---------------------*/

/*---------------------- Tooltip ---------------------*/

.tooltip-inner {
    background-color: var(--dark);
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 6px;
}

.tooltip .arrow::before {
    border-bottom-color: var(--dark);
    border-top-color: var(--dark);
}

/*---------------------- /Tooltip ---------------------*/

/*---------------------- Popover ---------------------*/

.popover {
    border-radius: 12px;
    font-size: 12px;
    background-color: var(--white);
    border: none;
    box-shadow: 0 0 20px rgb(30, 30, 30, 0.1);
    ;
}

.popover-header {
    background-color: var(--maincolor);
    color: var(--white);
    border-radius: 12px 12px 0 0;
    font-size: 14px;
    padding: 10px;
    text-align: center;
}

.popover .arrow::before {
    border-color: rgba(30, 30, 30, 0.03);
}

.popover .popover-body {
    color: var(--white);
}

.popover .subsytem-list {
    margin: 0;
    padding: 5px 15px;
    color: var(--dark);
}

/*---------------------- /Popover ---------------------*/

/*---------------------- Common -----------------------*/

img {
    max-width: 100%;
}

.ltr {
    direction: ltr;
}

/*---------------------- /Common -----------------------*/

/*---------------------- Header Main ---------------------*/

.header-main {
    position: relative;
    z-index: 9999;
    background: #fff;
}

    .header-main .header-top {
        padding: 20px 0 15px;
        border-bottom: 1px solid var(--linecolor);
    }

        .header-main .header-top .icon-calendar {
            position: relative;
            top: -2px;
        }

        .header-main .header-top .welcome {
            font-weight: 600;
        }

        .header-main .header-top .tel-number,
        .header-main .header-menu .tel-number {
            position: relative;
            margin-right: 20px;
            padding-right: 20px;
        }

            .header-main .header-top .tel-number::after,
            .header-main .header-menu .tel-number::after {
                content: "";
                width: 1px;
                height: 15px;
                background-color: var(--linecolor);
                position: absolute;
                top: 2px;
                right: 0;
            }

        .header-main .header-top .tel-link {
            padding-bottom: 3px;
        }

            .header-main .header-top .tel-link > span {
                transition: all 0.4s;
            }

            .header-main .header-top .tel-link:hover > span {
                color: var(--maingreen);
            }

            .header-main .header-top .tel-link > i {
                transition: all 0.4s;
            }

            .header-main .header-top .tel-link:hover > i {
                margin-left: 10px;
            }

    .header-main .header-menu {
        position: relative;
        padding: 30px 0;
    }

        .header-main .header-menu::after {
            content: "";
            background-color: var(--white);
            height: 25px;
            width: 100%;
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            box-shadow: 0px 20px 25px -10px rgba(0, 0, 0, 0.20);
            z-index: 99999;
        }

        .header-main .header-menu .logo-site {
            position: relative;
            z-index: 999999;
        }

            .header-main .header-menu .logo-site::before {
                content: "";
                background: url('../images/site/flag.png') no-repeat center center / cover;
                width: 390px;
                height: 140px;
                position: absolute;
                top: -30px;
                right: 0;
                z-index: 5;
            }

        .header-main .header-menu .logo-image {
            position: relative;
            width: 80px;
            z-index: 10;
        }

        .header-main .header-menu .logo-text {
            position: relative;
            z-index: 10;
            line-height: 1.4;
        }

    .header-main .navbar-main-afash {
        position: relative;
        margin: 0 40px;
        z-index: 999999;
        flex: 1;
    }

        .header-main .navbar-main-afash .left-top {
            display: none !important;
        }

        .header-main .navbar-main-afash .list-menu {
            position: relative;
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            z-index: 10;
        }

            .header-main .navbar-main-afash .list-menu .item-menu {
                position: relative;
                padding: 0 20px 0 40px;
                flex-shrink: 0;
            }

                .header-main .navbar-main-afash .list-menu .item-menu:not(.has-children) {
                    padding: 0 20px;
                }

                .header-main .navbar-main-afash .list-menu .item-menu:first-child {
                    padding-right: 0;
                }

                .header-main .navbar-main-afash .list-menu .item-menu::after {
                    content: "";
                    width: 1px;
                    height: 60px;
                    background-color: var(--linecolor);
                    position: absolute;
                    left: 0;
                    top: 0;
                }

                .header-main .navbar-main-afash .list-menu .item-menu:last-child::after {
                    display: none;
                }

                .header-main .navbar-main-afash .list-menu .item-menu.has-children::before {
                    content: "\e90e";
                    font-family: 'icomoon';
                    transform: rotate(-45deg);
                    font-size: 20px;
                    color: var(--coolgray);
                    position: absolute;
                    top: -5px;
                    left: 10px;
                    z-index: 10;
                    transition: all 0.4s;
                }

                .header-main .navbar-main-afash .list-menu .item-menu:hover::before {
                    color: var(--maincolor);
                    transform: rotate(180deg);
                }

                .header-main .navbar-main-afash .list-menu .item-menu .link-menu {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    text-align: right;
                    font-family: Dana;
                    font-size: 15px;
                    font-weight: bold;
                    color: var(--maincolor);
                    transition: all 0.4s;
                }

                .header-main .navbar-main-afash .list-menu .item-menu:hover .link-menu {
                    color: var(--lightgreen);
                }

                .header-main .navbar-main-afash .list-menu .item-menu .link-menu > i {
                    margin-bottom: 15px;
                    font-size: 20px;
                    transition: all 0.4s;
                }

                .header-main .navbar-main-afash .list-menu .item-menu:hover .link-menu > i {
                    color: var(--lightgreen);
                }

                .header-main .navbar-main-afash .list-menu .item-menu .submenu-list {
                    display: flex;
                    flex-direction: column;
                    opacity: 0;
                    visibility: hidden;
                    transition: 0.3s ease;
                    position: absolute;
                    background: #103b7f;
                    padding: 15px 13px;
                    border-radius: 15px;
                    z-index: 1022;
                    top: 75px;
                    right: 0;
                    left: -148px;
                }

                .header-main .navbar-main-afash .list-menu .item-menu.active .submenu-list {
                    opacity: 1;
                    visibility: visible;
                    top: 85px;
                }

                .header-main .navbar-main-afash .list-menu .item-menu .submenu-list::before {
                    content: "";
                    position: absolute;
                    background-image: url("../images/site/before-sub-menu.svg") !important;
                    background-position: center center;
                    background-repeat: no-repeat;
                    width: 26px;
                    top: -17px;
                    height: 40px;
                    right: 41px;
                    z-index: 1022;
                    box-shadow: none;
                }

                .header-main .navbar-main-afash .list-menu .item-menu .submenu-list li {
                    width: 100%;
                    border-bottom: 1px solid #1d498f;
                    border-left: none;
                    padding-bottom: 0;
                }

                    .header-main .navbar-main-afash .list-menu .item-menu .submenu-list li:last-child {
                        border: none;
                    }

                    .header-main .navbar-main-afash .list-menu .item-menu .submenu-list li a {
                        color: var(--lighttext);
                        font-size: 12px;
                        font-weight: 600;
                        padding: 10px 0;
                        width: 100%;
                        display: flex;
                        justify-content: right;
                        transition: all 0.4s;
                    }

                        .header-main .navbar-main-afash .list-menu .item-menu .submenu-list li a:hover {
                            color: var(--white);
                        }

    .header-main .register-site {
        position: relative;
        z-index: 999999;
    }

        .header-main .register-site::before {
            content: "";
            width: 20px;
            height: 60px;
            background-color: var(--linecolor);
            position: absolute;
            top: 0;
            background-color: var(--white);
            box-shadow: -12px 0px 20px -7px rgba(0, 0, 0, 0.3);
            right: -60px;
        }

        .header-main .register-site .box-icon {
            width: 50px;
            height: 50px;
            box-shadow: 0px 5px 15px 0px rgba(10, 233, 119, 0.25);
            transition: all 0.4s;
        }

        .header-main .register-site .box-icon-menu {
            display: none !important;
            box-shadow: 0px 4px 15px -2px rgba(26, 87, 184, 0.40);
        }

        .header-main .register-site:hover .box-icon {
            background-color: var(--maincolor);
            box-shadow: 0px 4px 15px -2px rgba(26, 87, 184, 0.40);
        }

        .header-main .register-site .title-register strong {
            font-size: 19px;
            transition: all 0.4s;
        }

        .header-main .register-site:hover .title-register strong {
            color: var(--lightgreen);
        }

/*---------------------- /Header Main ---------------------*/

/*---------------------- Content Main ---------------------*/

.content-main {
    position: relative;
}

    .content-main .site-search {
        background-color: var(--light);
        padding: 30px 0;
        position: absolute;
        top: 0;
        z-index: 999;
        width: 100%;
        box-shadow: 0px 10px 25px -10px rgba(0, 0, 0, 0.1);
        display: none;
    }

        .content-main .site-search .all-search {
            display: flex;
            justify-content: center;
            position: relative;
            padding-right: 45px;
        }

            .content-main .site-search .all-search .closer-search {
                position: absolute;
                right: 0;
                top: 15px;
                color: var(--coolgray);
                cursor: pointer;
                transition: all 0.4s;
            }

                .content-main .site-search .all-search .closer-search:hover {
                    color: var(--darkgrey);
                }

                .content-main .site-search .all-search .closer-search i {
                    font-size: 25px;
                }

    .content-main .show-search {
        visibility: visible;
        opacity: 1;
    }

    .content-main .site-search i {
        font-size: 18px;
    }

    .content-main .site-search .search-go i {
        font-size: 22px;
    }

    .content-main .site-search .search-input {
        width: 100%;
        position: relative;
    }

        .content-main .site-search .search-input input {
            width: 100%;
            padding: 15px 20px;
            border-radius: 15px;
            border: none;
            color: var(--maincolor);
        }

            .content-main .site-search .search-input input::placeholder {
                font-size: 14px;
                font-weight: 500;
            }

    .content-main .site-search .search-go {
        position: absolute;
        color: var(--maingreen);
        left: 20px;
        top: 16px;
    }

/*---------------------- Notification Special ---------------------*/

.content-main .notify-special {
    padding: 20px 0;
}

    .content-main .notify-special .title-box {
        position: relative;
        z-index: 10;
    }

        .content-main .notify-special .title-box > svg {
            position: relative;
            top: -1px;
        }

    .content-main .notify-special .news-container {
        overflow: hidden;
        width: 100%;
        display: flex;
        position: absolute;
    }

    .content-main .notify-special .list-marquee {
        /* display: flex; */
        /* width: 100%; */
        /*position: absolute;
        overflow: hidden;
        -webkit-animation: marquee 15s linear infinite;
        animation: marquee 20s linear(0 0%, 1 100%) infinite;
        right: 0;*/
        /* display: inline-block; */
        white-space: nowrap;
        animation: marquee2 25s linear infinite; /* Adjust duration as needed */
    }

        .content-main .notify-special .list-marquee:hover {
            animation-play-state: paused;
        }

        .content-main .notify-special .list-marquee .item-mrq {
            /*position: relative;
            float: right;
            margin: 0;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex-shrink: 0;*/
            display: inline-block;
            /* margin-right: 30px; */ /* Adjust spacing between news items */
            position: relative;
            white-space: nowrap;
            flex-shrink: 0;
            /* top: 8px; */
            margin-bottom: 0;
        }

            .content-main .notify-special .list-marquee .item-mrq::after {
                content: "";
                display: inline-block;
                background-color: var(--linecolor);
                width: 6px;
                height: 6px;
                border-radius: 100%;
                /* right: -24px; */
                /* top: 10px; */
                margin: 0 10px 0 15px;
                /* position: absolute; */
            }

            .content-main .notify-special .list-marquee .item-mrq:last-child::after {
                display: none;
            }

            .content-main .notify-special .list-marquee .item-mrq > a {
                color: var(--darkgrey);
                font-size: 12px;
                font-weight: 600;
                transition: all 0.4s;
            }

                .content-main .notify-special .list-marquee .item-mrq > a:hover {
                    color: var(--maingreen);
                }

    .content-main .notify-special .row::before {
        content: "";
        width: 200px;
        height: 20px;
        background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
        position: absolute;
        left: 0;
        top: 7px;
        z-index: 20;
    }

@-webkit-keyframes marquee {
    0% {
        right: 0;
    }

    100% {
        right: -100%;
    }
}

@keyframes marquee {
    0% {
        right: 0;
    }

    100% {
        right: -100%;
    }
}

@keyframes marquee2 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%); /* Adjust distance based on the container's width */
    }
}

/*---------------------- /Notification Special ---------------------*/

/*---------------------- Slideshow ---------------------*/

.content-main .slideshow-main .swiper-container {
    width: 100%;
    padding: 10px 200px 40px;
}

.content-main .slideshow-main .swiper-slide {
    position: relative;
    height: 480px;
    transition: all 0.2s;
}

    .content-main .slideshow-main .swiper-slide.swiper-slide-active::before,
    .content-main .slideshow-main .swiper-slide.swiper-slide-active::after {
        content: "";
        width: 600px;
        height: 250px;
        transform: rotate(-3deg);
        background: rgba(119, 119, 119, 0.50);
        box-shadow: 0px 20px 30px 0px rgba(119, 119, 119, 0.50);
        z-index: 10;
        position: absolute;
        bottom: 20px;
        left: 10px;
    }

    .content-main .slideshow-main .swiper-slide.swiper-slide-active::after {
        transform: rotate(3deg);
        left: auto;
        right: 10px;
    }

    .content-main .slideshow-main .swiper-slide.swiper-slide-prev,
    .content-main .slideshow-main .swiper-slide.swiper-slide-next {
        opacity: 0.09;
        filter: grayscale(100%);
    }

    .content-main .slideshow-main .swiper-slide > a {
        position: relative;
        background-color: var(--linecolor);
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        overflow: hidden;
        z-index: 20;
    }

        .content-main .slideshow-main .swiper-slide > a::after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            box-shadow: 0px -218px 148px -3px rgba(0, 0, 0, 0.30) inset;
            z-index: 30;
        }

    .content-main .slideshow-main .swiper-slide figure {
        height: 100%;
    }

    .content-main .slideshow-main .swiper-slide .image-slide {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.content-main .slideshow-main .swiper-slider-next::after,
.content-main .slideshow-main .swiper-slider-prev::after {
    content: "\e90e";
    font-family: 'icomoon';
    font-size: 80px;
    color: var(--white);
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.3));
    transition: all 0.4s;
}

.content-main .slideshow-main .swiper-slider-next:hover::after,
.content-main .slideshow-main .swiper-slider-prev:hover::after {
    color: var(--maingreen);
}

.content-main .slideshow-main .swiper-slider-next,
.content-main .slideshow-main .swiper-slider-prev {
    top: 45%;
}

.content-main .slideshow-main .swiper-slider-next {
    left: auto;
    right: 80px;
    transform: scaleX(-1);
}

.content-main .slideshow-main .swiper-slider-prev {
    right: auto;
    left: 80px;
}

.content-main .slideshow-main .arrow-bottom {
    background: url('../images/site/curve.svg') no-repeat bottom center / 230px;
    width: 230px;
    height: 80px;
    position: absolute;
    transform: scaleY(-1);
    bottom: -5px;
    right: 0;
    left: 0;
    z-index: 50;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--maincolor);
    padding-top: 30px;
    transition: all 0.4s;
}

    .content-main .slideshow-main .arrow-bottom:hover {
        color: var(--maingreen);
    }

/*---------------------- /Slideshow ---------------------*/

/*---------------------- News Special ---------------------*/

.content-main .news-special {
    position: relative;
    margin-top: 50px;
}

    .content-main .news-special .view-all,
    .content-main .news-special .view-all > i {
        transition: all 0.4s;
    }

        .content-main .news-special .view-all:hover {
            color: var(--maingreen);
        }

            .content-main .news-special .view-all:hover > i {
                margin-right: 10px;
            }

        .content-main .news-special .view-all .font-size-12 {
            font-size: 13px;
        }

    .content-main .news-special .swiper-news {
        margin-top: 10px;
        padding-left: 100px;
    }

        .content-main .news-special .swiper-news .item-news {
            position: relative;
            padding: 40px;
            transition: all 0.4s;
        }

        .content-main .news-special .swiper-news:hover .item-news {
            filter: grayscale(1) opacity(0.8);
        }

        .content-main .news-special .swiper-news .item-news:hover {
            filter: grayscale(0) opacity(1);
        }

        .content-main .news-special .swiper-news .item-news::after {
            content: "";
            width: 40px;
            height: 100%;
            background-color: var(--white);
            box-shadow: -17px 0px 30px -17px rgba(0, 0, 0, 0.20);
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            z-index: 0;
        }

    .content-main .news-special .item-news .image-news {
        position: relative;
        display: block;
        width: 100%;
        height: 250px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0px 3px 8px -1px rgba(0, 0, 0, 0.20);
        z-index: 20;
    }

        .content-main .news-special .item-news .image-news > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.4s;
        }

    .content-main .news-special .item-news:hover .image-news > img {
        filter: brightness(110%);
    }

    .content-main .news-special .item-news .info-news {
        position: relative;
        z-index: 20;
    }

    .content-main .news-special .item-news .title-news > a {
        height: 55px;
        overflow: hidden;
        transition: all 0.4s;
    }

    .content-main .news-special .item-news:hover .title-news > a {
        color: var(--maingreen);
    }

    .content-main .news-special .item-news .desc-news {
        line-height: 28px;
        margin: 0 0 50px;
        height: 115px;
        overflow: hidden;
    }

    .content-main .news-special .swiper-news-next,
    .content-main .news-special .swiper-news-prev {
        position: absolute;
        width: 400px;
        height: 90%;
        top: 10%;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: rgba(255, 255, 255, 0.80);
        box-shadow: 17px 0px 14px -17px rgba(0, 0, 0, 0.10);
        left: -200px;
        right: auto;
    }

        .content-main .news-special .swiper-news-next::after,
        .content-main .news-special .swiper-news-prev::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.30);
            backdrop-filter: blur(3.5px);
        }

        .content-main .news-special .swiper-news-next > i,
        .content-main .news-special .swiper-news-prev > i {
            position: relative;
            margin-right: 30px;
            font-size: 40px;
            color: var(--maincolor);
            z-index: 99;
            transition: all 0.4s;
        }

        .content-main .news-special .swiper-news-next:hover > i,
        .content-main .news-special .swiper-news-prev:hover > i {
            color: var(--maingreen);
        }

    .content-main .news-special .swiper-news-prev {
        display: none;
    }

/*---------------------- /News Special ---------------------*/

/*---------------------- Banners ---------------------*/

.content-main .banners-site {
    margin: 60px 0 150px;
}

    .content-main .banners-site .row {
        margin: 0 -20px;
    }

    .content-main .banners-site .box-banner {
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-bottom: 4px solid;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .content-main .banners-site .box-banner a {
            z-index: 9;
        }

        .content-main .banners-site .box-banner::after {
            content: "";
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 100%;
            filter: blur(25px);
            left: -80px;
            bottom: -140px;
        }

        .content-main .banners-site .box-banner.box-green::after {
            background: #06CB66;
        }

        .content-main .banners-site .box-banner.box-blue::after {
            background: rgba(6, 82, 203, 0.50);
        }

        .content-main .banners-site .box-banner.box-green {
            background-color: var(--lightgreen);
            box-shadow: 0px 4px 15px -2px rgba(4, 214, 107, 0.40);
            border-color: #04D66B;
        }

        .content-main .banners-site .box-banner.box-blue {
            background-color: var(--maincolor);
            box-shadow: 0px 4px 15px -2px rgba(26, 87, 184, 0.40);
            border-color: #1A57B8;
        }

        .content-main .banners-site .box-banner.box-red {
            background-color: #d5824e;
            box-shadow: 0px 4px 15px -2px rgba(4, 214, 107, 0.40);
            border-color: #d5824e;
        }

        .content-main .banners-site .box-banner .info-banner {
            position: relative;
            padding: 30px 40px;
            z-index: 50;
        }

        .content-main .banners-site .box-banner .title-bnr > i {
            font-size: 45px;
        }

        .content-main .banners-site .box-banner .title-texts {
            line-height: 30px;
        }

        .content-main .banners-site .box-banner.box-green .desc-bnr {
            opacity: 0.5;
        }

        .content-main .banners-site .box-banner .btn-view-banner {
            width: 150px;
            height: 40px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s;
        }

        .content-main .banners-site .box-banner.box-green .btn-view-banner {
            background-color: #06CB66;
        }

        .content-main .banners-site .box-banner.box-blue .btn-view-banner {
            background-color: #1A57B8;
        }

        .content-main .banners-site .box-banner.box-green .btn-view-banner:hover {
            background-color: var(--white);
            color: var(--maingreen);
        }

        .content-main .banners-site .box-banner.box-blue .btn-view-banner:hover {
            background-color: var(--white);
            color: var(--maincolor);
        }

    .content-main .banners-site .list-posters {
        position: relative;
        z-index: 20;
        left: -80px;
    }

    .content-main .banners-site .item-col {
        transform: rotate(-30deg);
        margin: 10px;
        height: 300px;
    }

    .content-main .banners-site .box-poster {
        position: relative;
        width: 118px;
        height: 165px;
        border-radius: 15px;
        border: 2px solid var(--white);
        overflow: hidden;
        margin: 10px;
        flex-shrink: 0;
    }

    .content-main .banners-site .item-col:nth-child(1) .box-poster {
        -webkit-animation: scrolltop 15s linear infinite;
        animation: scrolltop 15s linear infinite;
    }

    .content-main .banners-site .item-col:nth-child(2) .box-poster {
        -webkit-animation: scrollbottom 15s linear infinite;
        animation: scrollbottom 15s linear infinite;
    }

    .content-main .banners-site .box-poster > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

@-webkit-keyframes scrolltop {
    0% {
        top: 0;
    }

    100% {
        top: -100%;
    }
}

@keyframes scrolltop {
    0% {
        top: 0;
    }

    100% {
        top: -100%;
    }
}

@-webkit-keyframes scrollbottom {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

@keyframes scrollbottom {
    0% {
        top: 0;
    }

    100% {
        top: 100%;
    }
}

/*---------------------- /Banners ---------------------*/

/*---------------------- Cities Province ---------------------*/

.content-main .cities-province .list-cities .item-cts path,
.content-main .cities-province .list-cities .item-cts .name-cts {
    transition: all 0.4s;
}

.content-main .cities-province .list-cities .item-cts:hover path,
.content-main .cities-province .list-cities .item-cts.active path {
    fill: var(--lightgreen);
}

.content-main .cities-province .list-cities .item-cts:hover .name-cts,
.content-main .cities-province .list-cities .item-cts.active .name-cts {
    color: var(--maincolor);
    font-weight: bold;
}

.content-main .cities-province .list-statistics .count-stat {
    width: 100px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.content-main .cities-province .map-cities .item-city .shape-city,
.content-main .cities-province .map-cities .item-city .name-city {
    transition: all 0.4s;
}

.content-main .cities-province .map-cities .item-city:hover .shape-city,
.content-main .cities-province .map-cities .item-city.active .shape-city {
    fill: var(--lightgreen);
}

.content-main .cities-province .map-cities .item-city:hover .name-city,
.content-main .cities-province .map-cities .item-city.active .name-city {
    fill: var(--maincolor);
}

.content-main .cities-province .box-map {
    position: relative;
    padding-right: 70px;
}

    .content-main .cities-province .box-map::before {
        content: "";
        width: 600px;
        height: 600px;
        border-radius: 100%;
        background-color: var(--light);
        position: absolute;
        z-index: 0;
    }

    .content-main .cities-province .box-map svg {
        position: relative;
        z-index: 50;
    }

    .content-main .cities-province .box-map .first-circle {
        width: 700px;
        height: 700px;
        border-radius: 100%;
        border: 1px solid var(--linecolor);
        position: absolute;
        z-index: 0;
        -webkit-animation: firstRotation 50s linear infinite;
        animation: firstRotation 50s linear infinite;
    }

        .content-main .cities-province .box-map .first-circle > i {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            background-color: var(--white);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            -webkit-animation: firstRotationChild 10s infinite;
            animation: firstRotationChild 10s infinite;
        }

        .content-main .cities-province .box-map .first-circle .icon-map-marker {
            top: 150px;
            right: 25px;
            transform: rotate(30deg);
            color: var(--maincolor);
        }

        .content-main .cities-province .box-map .first-circle .icon-marker {
            bottom: 20px;
            right: 165px;
            transform: rotate(-60deg);
            color: var(--lightgreen);
        }

        .content-main .cities-province .box-map .first-circle .icon-globe {
            bottom: 160px;
            left: 22px;
            color: var(--maincolor);
        }

        .content-main .cities-province .box-map .first-circle .icon-map {
            top: 6px;
            left: 200px;
            transform: rotate(30deg);
            color: var(--maincolor);
        }

    .content-main .cities-province .box-map .second-circle {
        width: 800px;
        height: 800px;
        border-radius: 100%;
        border: 1px solid var(--linecolor);
        position: absolute;
        z-index: 0;
        -webkit-animation: secondRotation 40s linear infinite;
        animation: secondRotation 40s linear infinite;
    }

        .content-main .cities-province .box-map .second-circle > i {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            background-color: var(--white);
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            -webkit-animation: secondRotationChild 10s infinite;
            animation: secondRotationChild 10s infinite;
        }

        .content-main .cities-province .box-map .second-circle .icon-phone-call {
            top: 9px;
            right: 225px;
            transform: rotate(15deg);
            color: var(--lightgreen);
        }

        .content-main .cities-province .box-map .second-circle .icon-info {
            bottom: 275px;
            right: -6px;
            transform: rotate(-30deg);
            color: var(--maincolor);
        }

        .content-main .cities-province .box-map .second-circle .icon-book-alt {
            bottom: -9px;
            left: 290px;
            transform: rotate(-15deg);
            color: var(--maincolor);
        }

        .content-main .cities-province .box-map .second-circle .icon-apps {
            top: 258px;
            left: -2px;
            transform: rotate(30deg);
            color: var(--lightgreen);
        }

@-webkit-keyframes firstRotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes firstRotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes secondRotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes secondRotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes firstRotationChild {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes firstRotationChild {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes secondRotationChild {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes secondRotationChild {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/*---------------------- /Cities Province ---------------------*/

/*---------------------- Learning Site ---------------------*/

.content-main .learning-site {
    margin-top: 100px;
}

    .content-main .learning-site .row {
        margin: 0 -20px;
    }

    .content-main .learning-site .box-details {
        background: linear-gradient(270deg, #114EAB 0%, #0F3C82 52.20%, #0B47A5 100%);
        border-radius: 15px;
        padding: 50px 60px;
        overflow: hidden;
    }

        .content-main .learning-site .box-details .learning-icons {
            position: relative;
        }

            .content-main .learning-site .box-details .learning-icons::before {
                content: "";
                width: 300px;
                height: 300px;
                border-radius: 100%;
                background: #0652CB;
                filter: blur(50px);
                position: absolute;
                z-index: 0;
            }

            .content-main .learning-site .box-details .learning-icons .image-icon {
                position: relative;
                width: 230px;
                z-index: 10;
            }

    .content-main .learning-site .learning-info .title-lrn .workshop {
        width: 108px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 3px;
    }

    .content-main .learning-site .learning-info .desc-lrn {
        line-height: 22px;
    }

    .content-main .learning-site .learning-info .item-inf {
        position: relative;
        padding: 10px 0;
    }

        .content-main .learning-site .learning-info .item-inf::after {
            content: "";
            width: 89.5%;
            height: 1px;
            background-color: var(--white);
            opacity: 0.2;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .content-main .learning-site .learning-info .item-inf:last-child::after {
            display: none;
        }

        .content-main .learning-site .learning-info .item-inf > i {
            width: 20px;
            text-align: center;
        }

    .content-main .learning-site .learning-info .btn-register {
        width: 100%;
        height: 50px;
        border-radius: 10px;
        border-bottom: 3px solid #04D66B;
        background: var(--lightgreen);
        box-shadow: 0px 6px 25px -2px rgba(11, 42, 91, 0.80);
        color: var(--maincolor);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 900;
        margin-top: 20px;
        transition: all 0.4s;
    }

        .content-main .learning-site .learning-info .btn-register:hover {
            background-color: var(--white);
            box-shadow: none;
        }

    .content-main .learning-site .questions-learning .view-all,
    .content-main .learning-site .questions-learning .view-all > i {
        transition: all 0.4s;
    }

        .content-main .learning-site .questions-learning .view-all:hover {
            color: var(--maingreen);
        }

            .content-main .learning-site .questions-learning .view-all:hover > i {
                margin-right: 10px;
            }

    .content-main .learning-site .questions-learning .row {
        margin: 0;
    }

    .content-main .learning-site .list-questions {
        list-style: none;
    }

        .content-main .learning-site .list-questions .item-qst {
            cursor: pointer;
            margin-top: 15px;
            transition: all 0.4s;
        }

            .content-main .learning-site .list-questions .item-qst.active {
                background-color: var(--maincolor) !important;
            }

            .content-main .learning-site .list-questions .item-qst .head-qst,
            .content-main .learning-site .list-questions .item-qst .title-qst,
            .content-main .learning-site .list-questions .item-qst .view-answer {
                transition: all 0.4s;
            }

            .content-main .learning-site .list-questions .item-qst .head-qst {
                position: relative;
                padding: 16px 20px;
            }

            .content-main .learning-site .list-questions .item-qst.active .head-qst {
                padding: 25px 20px;
            }

            .content-main .learning-site .list-questions .item-qst .head-qst::after {
                content: "";
                width: 0;
                height: 1px;
                background: linear-gradient(90deg, rgba(14, 64, 143, 0.00) 0%, #255CB1 100%);
                position: absolute;
                bottom: 0;
                right: 20px;
                opacity: 0;
                visibility: hidden;
                transition: all 0.8s;
            }

            .content-main .learning-site .list-questions .item-qst.active .head-qst::after {
                width: 94%;
                opacity: 1;
                visibility: visible;
            }

            .content-main .learning-site .list-questions .item-qst.active .title-qst {
                color: var(--white);
            }

            .content-main .learning-site .list-questions .item-qst.active .view-answer {
                display: none !important;
                opacity: 0;
                visibility: hidden;
            }

            .content-main .learning-site .list-questions .item-qst .answer-box {
                padding: 20px 20px 20px 80px;
                display: none;
                opacity: 0;
                visibility: hidden;
                transition: all 0.4s;
            }

            .content-main .learning-site .list-questions .item-qst.active .answer-box {
                display: block;
                opacity: 1;
                visibility: visible;
            }

            .content-main .learning-site .list-questions .item-qst .answer-box .text-ans {
                line-height: 22px;
            }

            .content-main .learning-site .list-questions .item-qst .answer-box .ans {
                width: 40px;
                height: 20px;
                border-radius: 6px;
                background-color: var(--lightgreen);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                font-weight: 900;
                color: var(--maincolor);
                margin-left: 2px;
            }

/*---------------------- /Learning Site ---------------------*/

/*---------------------- /Content Main ---------------------*/

/*---------------------- Footer Main ---------------------*/

.footer-main {
    position: relative;
    margin-top: 150px;
}

    .footer-main .logo-footer {
        position: relative;
        width: 290px;
        height: 150px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: -105px;
        right: 130px;
    }

        

        .footer-main .logo-footer .box-logo {
            background: url('../images/site/curve.svg') no-repeat bottom center / 290px;
            width: 100%;
            height: 100%;
            z-index: 99;
            padding-top: 40px;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .footer-main .logo-footer::before {
            content: "";
            width: 150px;
            height: 100px;
            border-radius: 500px;
            background: #1A57B8;
            filter: blur(30px);
            position: absolute;
            z-index: 10;
            bottom: -30px;
        }

        .footer-main .logo-footer .img-logo {
            width: 80px;
        }

    /*---------------------- Footer Info ---------------------*/

    .footer-main .footer-info {
        position: relative;
        width: 100%;
        padding: 100px 0;
        background-color: var(--maincolor);
        overflow: hidden;
    }

        .footer-main .footer-info .container {
            position: relative;
            z-index: 10;
        }

        .footer-main .footer-info::before,
        .footer-main .footer-info::after {
            content: "";
            width: 700px;
            height: 700px;
            border-radius: 100%;
            background: #1A57B8;
            filter: blur(200px);
            position: absolute;
            z-index: 1;
        }

        .footer-main .footer-info::before {
            left: -550px;
            bottom: -200px;
        }

        .footer-main .footer-info::after {
            right: -550px;
            top: -200px;
        }

        .footer-main .footer-info .about-text .site-address {
            text-transform: uppercase;
            transition: all 0.4s;
        }

            .footer-main .footer-info .about-text .site-address:hover {
                color: var(--lightgreen);
            }

        .footer-main .footer-info .btn-more-col,
        .footer-main .footer-info .btn-more-col > i {
            transition: all 0.4s;
        }

            .footer-main .footer-info .btn-more-col:hover {
                color: var(--lightgreen) !important;
                text-shadow: 0 0 20px rgba(4, 214, 107, 0.3);
            }

                .footer-main .footer-info .btn-more-col:hover > i {
                    margin-right: 5px;
                    color: var(--white);
                }

        .footer-main .footer-info .about-text .logo-text {
            line-height: 1.4;
        }

        .footer-main .footer-info .about-text .desc-about {
            line-height: 30px;
        }

        .footer-main .footer-info .about-map .map-box {
            position: relative;
            width: 100%;
            height: 290px;
            border-radius: 15px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .footer-main .footer-info .about-map .map-box .image-map {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transform: scale(1.3);
            }

            .footer-main .footer-info .about-map .map-box .map-marker {
                position: absolute;
                z-index: 10;
            }

            .footer-main .footer-info .about-map .map-box .view-map {
                width: 50px;
                height: 50px;
                border-radius: 10px;
                background-color: var(--lightgreen);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0px 3px 3px 0px rgba(38, 43, 58, 0.10);
                position: absolute;
                bottom: 15px;
                right: 15px;
                z-index: 10;
                font-size: 25px;
                color: var(--white);
            }

        .footer-main .footer-info .contact-section .contact-links {
            position: relative;
        }

            .footer-main .footer-info .contact-section .contact-links::before,
            .footer-main .footer-info .contact-section .contact-links::after {
                content: "";
                width: 1px;
                height: 100%;
                background: #15448D;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
            }

            .footer-main .footer-info .contact-section .contact-links::after {
                left: 1px;
                background: #103570;
            }

        .footer-main .footer-info .contact-section .list-links {
            list-style: none;
            direction: rtl;
        }

            .footer-main .footer-info .contact-section .list-links .item-link {
                display: block;
                margin-top: 12px;
                color: var(--lighttext);
                text-align: right;
                font-size: 13px;
                font-weight: normal;
                transition: all 0.4s;
            }

                .footer-main .footer-info .contact-section .list-links .item-link:hover {
                    color: var(--lightgreen);
                    text-shadow: 0 0 20px rgba(4, 214, 107, 0.5);
                    font-weight: 600;
                }

        .footer-main .footer-info .contact-section .divider {
            margin: 20px 0;
            border-color: var(--white);
            opacity: 0.08;
        }

        .footer-main .footer-info .contact-section .list-social {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

            .footer-main .footer-info .contact-section .list-social .item-sc {
                position: relative;
                font-size: 20px;
                font-weight: normal;
                margin-right: 20px;
                color: var(--lighttext);
                text-align: center;
                transition: all 0.4s;
            }

                .footer-main .footer-info .contact-section .list-social .item-sc:hover {
                    color: var(--lightgreen);
                    text-shadow: 0 0 20px var(--lightgreen);
                }

                .footer-main .footer-info .contact-section .list-social .item-sc .name-sc {
                    position: absolute;
                    flex-shrink: 0;
                    font-size: 0;
                    bottom: 0;
                    right: -15px;
                    width: 50px;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.4s;
                }

                .footer-main .footer-info .contact-section .list-social .item-sc:hover .name-sc {
                    font-size: 10px;
                    bottom: -12px;
                    opacity: 1;
                    visibility: visible;
                    color: var(--white);
                }

.contact-info .list-info .item-inf .contact-item {
    transition: all 0.3s;
}

    .contact-info .list-info .item-inf .contact-item:hover {
        color: #ffffff;
    }

/*---------------------- /Footer Info ---------------------*/
/*---------------------- Footer Copyright ---------------------*/
.footer-main .footer-copyright {
    width: 100%;
    background: #0E3675;
    box-shadow: 0px 4px 20px -10px rgba(0, 0, 0, 0.20) inset;
}

    .footer-main .footer-copyright .box-copyright {
        position: relative;
        padding: 10px 0;
        overflow: hidden;
    }

    .footer-main .footer-copyright .copyright-sec {
        position: relative;
        padding: 30px 0;
        background: #0E3675;
        z-index: 99;
    }

        .footer-main .footer-copyright .copyright-sec::after {
            content: "";
            width: 400px;
            height: 100px;
            background: linear-gradient(270deg, #0E3675 0%, rgba(14, 54, 117, 0.00) 100%);
            position: absolute;
            right: 100%;
            top: 15px;
            z-index: 10;
        }

    .footer-main .footer-copyright .link-company {
        transition: all 0.4s;
        position: relative;
    }

        .footer-main .footer-copyright .link-company::after {
            content: "";
            width: 0px;
            position: absolute;
            height: 2px;
            right: 50%;
            left: 50%;
            bottom: -7px;
            background: rgb(255 255 255);
            transition: all 0.3s ease 0s;
        }

        .footer-main .footer-copyright .link-company:hover {
            color: var(--white);
            font-weight: 600;
        }

            .footer-main .footer-copyright .link-company:hover::after {
                width: 100%;
                left: 0px;
                right: 0px;
            }

    .footer-main .footer-copyright .important-links {
        position: absolute;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        left: 0;
        direction: ltr;
        -webkit-animation: marqueeleft 15s linear infinite;
        animation: marqueeleft 15s linear infinite;
    }

        .footer-main .footer-copyright .important-links:hover {
            animation-play-state: paused;
        }

        .footer-main .footer-copyright .important-links .item-imp {
            margin-right: 50px;
        }

            .footer-main .footer-copyright .important-links .item-imp > img {
                height: 50px;
                filter: grayscale(1) brightness(200%) opacity(0.2);
                transition: all 0.4s;
            }

            .footer-main .footer-copyright .important-links .item-imp:hover > img {
                filter: none;
            }

@-webkit-keyframes marqueeleft {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}

@keyframes marqueeleft {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}

/*---------------------- /Footer Copyright ---------------------*/

/*---------------------- /Footer Main ---------------------*/

/*---------------------- Responsives ---------------------*/

@media only screen and (min-width:1700px) and (max-width: 1800px) {
    .container {
        padding: 0 100px;
    }

    .content-main .slideshow-main .swiper-container {
        padding: 10px 100px 40px;
    }

    .content-main .slideshow-main .swiper-slider-prev {
        left: 150px;
    }

    .content-main .slideshow-main .swiper-slider-next {
        right: 150px;
    }

    .content-main .learning-site .box-details {
        padding: 50px 30px;
    }

    .footer-main .logo-footer {
        right: 30px;
    }
}

@media only screen and (min-width:1300px) and (max-width: 1700px) {
    .container {
        padding: 0 30px;
    }

    .header-main .register-site::before {
        right: -40px;
    }

    .content-main .slideshow-main .swiper-container {
        padding: 10px 100px 40px;
    }

    .content-main .slideshow-main .swiper-slider-prev {
        left: 150px;
    }

    .content-main .slideshow-main .swiper-slider-next {
        right: 150px;
    }

    .content-main .news-special .swiper-news .item-news {
        padding: 20px;
    }

    .content-main .cities-province .box-map {
        padding-right: 0;
    }

    .content-main .learning-site .box-details {
        padding: 50px 30px;
    }

    .footer-main .logo-footer {
        right: -40px;
    }
}

/*---------------------- /Responsives ---------------------*/