html {
    font-size: 14px;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}
h1 {
    font-size: 28.38px;
}
h2 {
    font-size: 25.23px;
}
h3 {
    font-size: 22.43px;
}
h4 {
    font-size: 19.93px;
}
h5 {
    font-size: 17.72px;
}
p {
    font-size: 16px;
}
.small {
    font-size: 13px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

header {
    background-color: #04509E;
}

.hero {
    background-image: url('hero-bg.jpg');
    background-size: cover;
    background-position: center;
}

li {
    list-style-type: none;
}

.card {
    border-radius: 8px;
}

.navbar-custom {
    background-color: #04509E; /* Màu xanh đậm */
    padding: 0;
    height: 70px;
}

    .navbar-custom .navbar-brand {
        color: #fff;
        font-size: 1.25rem;
        font-weight: bold;
    }

.header-right{
    align-items: center;
}

.section .container-fluid {
    padding-left: 35px;
    padding-right: 35px;
}

.navbar-custom img {
    height: 65px;
}

.navbar-custom .nav-link {
    color: #fff;
    font-weight: 500;
}

    .navbar-custom .nav-link:hover {
        color: #FFD700; /* Màu vàng */
    }

.navbar-custom .search-input {
    max-width: 200px;
}

.navbar-custom .btn-login {
    color: #fff;
    font-size: 1rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    text-align: left;
}

    .navbar-custom .btn-login:hover {
        color: #FFD700;
    }

.search {
    position: relative;
}

    .search i {
        position: absolute;
        right: 12px;
        top: 12px;
        color: #fff;
        font-weight: 300;
    }

.login-user {
    max-width: 140px;
}

    .login-user i.fas.fa-user {
        border: 1px solid #fff;
        border-radius: 50%;
        padding: 8px 9px;
        /*margin-right: 10px;*/
    }

/*.navigation nav .navbar-nav {
    margin-left: auto;
    margin-right: auto;
    height: 65px;
    max-width: max-content;
    align-items: center;
}*/

.navbar-expand-lg .navbar-collapse {
    align-items: center;
}

/*.navigation .navbar .navbar-nav li {
    position: relative;
    margin: 0px 15px;
    height: 100%;
}*/

    .navigation .navbar .navbar-nav li a {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        -webkit-transition: all 0.4s linear;
        transition: all 0.4s linear;
        display: flex;
        white-space: nowrap;
        height: 100%;
        -webkit-box-align: center;
        align-items: center;
        padding: 0;
    }

.navigation .navbar .navbar-nav > li > a.active,
.navigation .navbar .navbar-nav > li:hover > a {
    color: #167AC6;
}

.navigation .navbar .navbar-nav li .sub-menu {
    top: 110%;
    left: auto;
    background-color: #0070b8;
    width: 245px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
    z-index: 99;
}

.navigation .navbar .navbar-nav li.nav-li-right .sub-menu {
    right: 0;
    left: auto;
}

.navigation .navbar .navbar-nav li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    top: 100%;
  
}

.navigation nav .navbar-nav .nav-item .sub-menu {
    padding: 0;
    background: #04509E;
    border-top: 3px solid #FFD700;
}

.navigation .navbar .navbar-nav li .sub-menu li {
    margin-right: 0;
    margin-left: 0;
}

    .navigation .navbar .navbar-nav li .sub-menu li a {
        font-size: 14px;
        padding: 9px 15px;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        color: #fff;
        white-space: normal;
        text-transform: initial;
    }

        .navigation .navbar .navbar-nav li .sub-menu li a.active,
        .navigation .navbar .navbar-nav li .sub-menu li a:hover {
            /*padding-left: 20px;
                 color: #167AC6;*/
        }

.navbar .navbar-nav li .sub-menu{
    display:none;
}

.sub-nav-toggler {
    display: none;
}

.navigation .navbar .navbar-nav li .sub-menu > li:last-child a {
    border-bottom: 0;
}

.navbar .navbar-toggler {
    padding: 3px 8px;
    margin-top: 10px;
    -webkit-transform: all 0.4s linear;
    transform: all 0.4s linear;
}

    .navbar .navbar-toggler .icon-bar {
        width: 30px;
        height: 2px;
        background-color: #fff;
        display: block;
        margin: 5px 0;
        position: relative;
        -webkit-transition: all 0.4s linear;
        transition: all 0.4s linear;
    }

    .navbar .navbar-toggler.active .icon-bar:nth-of-type(1) {
        -webkit-transform: rotate(46deg);
        transform: rotate(46deg);
        top: 7px;
    }

    .navbar .navbar-toggler.active .icon-bar:nth-of-type(2) {
        opacity: 0;
    }

    .navbar .navbar-toggler.active .icon-bar:nth-of-type(3) {
        -webkit-transform: rotate(134deg);
        transform: rotate(134deg);
        top: -7px;
    }





header {
    transition: all 0.5s ease 0s;
    position: relative;
    z-index: 99999;
}
.navbar-default {
    transition: all 0.5s ease 0s;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.border-color-light-white {
    border-color: rgba(255, 255, 255, 0.1) !important;
}
.border-bottom {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.bg-secondary {
    --bs-bg-opacity: 1;
}
.top-search {
    padding: 10px 0;
    display: none;
}
header .navbar-expand-lg {
    justify-content: space-between;
}
.d-flex.search {
    height: 40px;
}
.navbar-default .container, .navbar-default .container-fluid {
    position: relative;
}
.login-user a {
    color: #fff;
    font-size: 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
@media screen and (min-width: 1400px) {
    .pe-xxl-2-9, .px-xxl-2-9 {
        padding: 7px 1rem;
    }
}
.align-items-center {
    align-items: center !important;
}
.menu_area {
    position: relative;
    z-index: 2;
}
    .menu_area .navbar-brand {
        transition: all 0.5s ease 0s;
        display: inline-block
    }

.navbar-nav li {
    list-style: none;
    -webkit-transition: background .3s ease;
    -ms-transition: background .3s ease;
    transition: background .3s ease
}

    .navbar-nav li.has-sub > a {
        position: relative
    }

    .navbar-nav li.has-sub a:hover {
        color: #fff
    }

    .navbar-nav li a {
        display: block;
        color: #9d9d9d;
        font-size: 17px;
        font-weight: 600;
        padding: 8px 42px 8px 32px
    }

.navbar-nav > li {
    margin-left: 10px;
    float: left;
    text-align: center;
    min-height: 72px;
}

    .navbar-nav > li.has-sub {
        padding-right: 13px
    }

    .navbar-nav > li > a {
        position: relative;
        display: block;
        font-size: 16px;
        font-weight: 700;
        padding: 21px 0.5rem;
        color: #0f313a;
        letter-spacing: 0.8px;
        -webkit-transition-duration: 500ms;
        -o-transition-duration: 500ms;
        transition-duration: 500ms
    }

.navbar-nav li.current > a,
.navbar-nav li.active > a {
    color: #F94735
}

.navbar-nav > li.has-sub > a:hover {
    color: #000
}

.navbar > ul > li.has-sub > a:hover:after {
    border-color: transparent #000 #000 transparent
}

.menu3 {
    left: 10px !important;
    top: 50% !important;
}

.navbar > ul > li.current > a:after {
    border-color: transparent #F94735 #F94735 transparent
}

.navbar-nav ul {
    position: absolute;
    left: -9999px
}

.navbar ul ul li {
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease
}

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

.navbar-nav li > ul {
    /*padding: 15px 0;*/
    margin: 0 0 0 10px;
    min-width: 225px;
    -webkit-box-shadow: 9px 11px 29px rgba(125, 138, 152, 0.15);
    -ms-box-shadow: 9px 11px 29px rgba(125, 138, 152, 0.15);
    -moz-box-shadow: 9px 11px 29px rgba(125, 138, 152, 0.15);
    box-shadow: 9px 11px 29px rgba(125, 138, 152, 0.15)
}

.navbar-nav li:hover > ul {
    left: auto
}

.navbar-nav > li.has-sub > ul {
    text-align: left;
    opacity: 0;
    margin-top: 10px;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

.navbar-nav > li.has-sub:hover > ul {
    margin-top: 0;
    opacity: 1
}

.navbar li > ul ul {
    margin-top: -39px;
    margin-left: 260px;
    min-width: 300px;
    max-width: 100%
}

    .navbar li > ul ul ul {
        margin-left: 175px;
        min-width: 130px
    }

.navbar ul ul li:last-child > a,
.navbar ul ul li.last-item > a {
    border-bottom: 0
}

/*.navbar ul ul li.has-sub > a:before {
    position: absolute;
    top: 19px;
    right: 20px;
    display: block;
    width: 2px;
    height: 8px;
    background: #9d9d9d;
    content: '';
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all 0.25s ease
}*/

.navbar ul ul > li.has-sub:hover > a:before {
    top: 17px;
    height: 0
}
@media (max-width: 1600px) {
    .navbar-nav > li.has-sub {
        padding-right: 0;
    }
    
    .navigation .navbar .navbar-nav li a {
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        -webkit-transition: all 0.4s linear;
        transition: all 0.4s linear;
        display: flex;
        white-space: nowrap;
        height: 100%;
        -webkit-box-align: center;
        align-items: center;
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        margin-right: 1rem;
    }
    .login-user a {
        color: #fff;
        font-size: 14px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        text-align: left;
    }

}
    @media screen and (min-width: 992px) {
        .header-style1 {
            box-shadow: none;
        }

            .header-style1 .navbar-default {
                -webkit-box-shadow: none;
                -ms-box-shadow: none;
                box-shadow: none;
            }

        header.scrollHeader .navbar-default {
            position: fixed;
            top: 0;
            z-index: 99;
            width: 100%;
            background: #04509E;
            left: 0;
            transition: all 0.2s ease 0s;
            -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
            animation: .95s ease 0s normal forwards 1 running headerAnimate
        }

        @keyframes headerAnimate {
            0% {
                margin-top: -150px
            }

            100% {
                margin-top: 0
            }
        }

        .wrapper-boxed .scrollHeader .navbar-default {
            left: 0;
            margin: 0 auto;
            max-width: 1200px;
            right: 0
        }

        .scrollHeader .navbar-brand img {
            transition-duration: 0.5s
        }

        .scrollHeader .navbar-header-custom {
            padding: 8px 0;
            transition-duration: 0.5s
        }

        .navbar-nav .megamenu {
            margin: 0;
            padding: 30px 15px;
            right: 0;
            width: 100%
        }

        .navbar .megamenu > li {
            margin: 0;
            float: left
        }

        .navbar .sub-title {
            color: #fff
        }

        .megamenu > li > ul {
            left: 0;
            margin: 0;
            min-width: auto;
            position: static;
            width: 100%
        }

        .navbar .megamenu li > ul {
            margin: 0;
            min-width: auto;
            padding: 0;
            -webkit-box-shadow: none;
            -ms-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none
        }

        .navbar .megamenu ul li {
            padding: 0
        }

            .navbar .megamenu ul li a {
                padding-left: 0;
                padding-right: 0
            }

        .navbar .megamenu li.has-sub > a:after,
        .navbar .megamenu li.has-sub > a:before {
            background: none
        }

        .navbar-nav li > ul {
            min-width: 270px
        }

        .scrollHeader .attr-nav > ul > li > a {
            padding: 21px 12px
        }

        .attr-nav > ul > li.dropdown ul.dropdown-menu {
            visibility: hidden;
            top: 66px;
            border-radius: 0;
            opacity: 0;
            left: -225px
        }

        .attr-nav > ul > li.dropdown:hover ul.dropdown-menu {
            margin-top: 0;
            opacity: 1;
            visibility: visible
        }

        .scrollHeader .attr-nav > ul > li.dropdown ul.dropdown-menu {
            top: 67px
        }

        .top-position {
            margin-top: -95px
        }

        .top-position1 {
            margin-top: -96px
        }

        .header-style1 {
            box-shadow: none
        }

            .header-style1 #top-bar {
                background: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.2)
            }

            .header-style1 .navbar-default {
                -webkit-box-shadow: none;
                -ms-box-shadow: none;
                box-shadow: none
            }

            .header-style1 .navbar-nav li.has-sub a:hover {
                color: #fff
            }

            .header-style1 .navbar-nav > li > a {
                color: #fff
            }

            .header-style1 .navbar-nav li.current > a {
                color: #F94735
            }

            .header-style1 .navbar-nav > li.has-sub > a:hover {
                color: #fff
            }

            .header-style1 .navbar > ul > li.has-sub > a:hover:after {
                border-color: transparent #fff #fff transparent
            }

            .header-style1 .navbar > ul > li.has-sub > a:after {
                border-color: transparent #fff #fff transparent
            }

            .header-style1 .navbar > ul > li.current > a:after {
                border-color: transparent #F94735 #F94735 transparent
            }

            .header-style1.scrollHeader .navbar-nav > li > a {
                color: white;
            }

            .header-style1.scrollHeader .navbar-nav > li.has-sub > a:hover {
                color: #000
            }

            .header-style1.scrollHeader .navbar > ul > li.has-sub > a:after {
                border-color: transparent #0f313a #0f313a transparent
            }

            .header-style1.scrollHeader .navbar-nav li.current > a {
                color: #F94735
            }

                .header-style1.scrollHeader .navbar-nav li.current > a:hover {
                    color: #F94735
                }

            .header-style1.scrollHeader .navbar > ul > li.current > a:after {
                border-color: transparent #F94735 #F94735 transparent
            }

            .header-style1 .attr-nav > ul > li > a {
                color: #fff
            }

            .header-style1.scrollHeader .attr-nav > ul > li > a {
                color: #0f313a
            }

        .header-style2 .navbar-default {
            box-shadow: none
        }

        .header-style2 .navbar-nav li a {
            color: #0f313a
        }

        .header-style2 .navbar-nav > li > a {
            color: #0f313a
        }

        .header-style2 .navbar-nav li > ul {
            background: #fff
        }

        .header-style2 .navbar ul ul li.active > a {
            color: #0f313a
        }

        .header-style2 .navbar-nav li.has-sub a:hover {
            color: #0f313a
        }

        .header-style2 .navbar-nav li.current > a {
            color: #F94735
        }

        .header-style2 .navbar .sub-title {
            color: #0f313a;
            font-weight: 800
        }

        .header-style2 .navbar-nav > li.has-sub > a:hover {
            color: #000
        }

        .header-style2 .navbar > ul > li.has-sub > a:hover:after {
            border-color: transparent #000 #000 transparent
        }

        .header-style2 .navbar > ul > li.has-sub > a:after {
            border-color: transparent #000 #000 transparent
        }

        .header-style2 .navbar > ul > li.current > a:after {
            border-color: transparent #F94735 #F94735 transparent
        }

        .header-style2.scrollHeader .navbar-nav > li > a {
            color: #0f313a
        }

        .header-style2.scrollHeader .navbar-nav > li.has-sub > a:hover {
            color: #000
        }

        .header-style2.scrollHeader .navbar > ul > li.has-sub > a:after {
            border-color: transparent #0f313a #0f313a transparent
        }

        .header-style2.scrollHeader .navbar-nav li.current > a {
            color: #F94735
        }

            .header-style2.scrollHeader .navbar-nav li.current > a:hover {
                color: #F94735
            }

        .header-style2.scrollHeader .navbar > ul > li.current > a:after {
            border-color: transparent #F94735 #F94735 transparent
        }

        .header-style3 .navbar-default {
            box-shadow: none
        }

        .header-style3 .navbar-nav li a {
            color: rgba(255, 255, 255, 0.85)
        }

        .header-style3 .navbar-nav > li > a {
            color: #fff
        }

        .header-style3 .navbar-nav li.active > a {
            color: #F94735
        }

        .header-style3 .navbar-nav > li > a:hover,
        .header-style3 .navbar-nav > li > a:active,
        .header-style3 .navbar-nav > li > a:focus {
            color: #F94735
        }

        .header-style3 .navbar-nav li > ul {
            background: #0f313a
        }

        .header-style3 .navbar ul ul li.active > a {
            color: #F94735
        }

        .header-style3 .navbar-nav li.has-sub a:hover {
            color: #F94735
        }

        .header-style3 .navbar-nav li.current > a {
            color: #F94735
        }

        .header-style3 .navbar .sub-title {
            color: rgba(255, 255, 255, 0.85);
            font-weight: 800
        }

        .header-style3 .navbar-nav > li.has-sub > a:hover {
            color: #F94735
        }

        .header-style3 .navbar > ul > li.has-sub > a:hover:after {
            border-color: transparent #F94735 #F94735 transparent
        }

        .header-style3 .navbar > ul > li.has-sub > a:after {
            border-color: transparent #fff #fff transparent
        }

        .header-style3 .navbar > ul > li.current > a:after {
            border-color: transparent #F94735 #F94735 transparent
        }

        .header-style3.scrollHeader .navbar-nav > li > a {
            color: #0f313a
        }

        .header-style3.scrollHeader .navbar-nav > li.has-sub > a:hover {
            color: #F94735
        }

        .header-style3.scrollHeader .navbar > ul > li.has-sub > a:after {
            border-color: transparent #0f313a #0f313a transparent
        }

        .header-style3.scrollHeader .navbar > ul > li.has-sub > a:hover:after {
            border-color: transparent #F94735 #F94735 transparent
        }

        .header-style3.scrollHeader .navbar-nav > li.active > a {
            color: #F94735
        }

        .header-style3.scrollHeader .navbar-nav li.current > a {
            color: #F94735
        }

            .header-style3.scrollHeader .navbar-nav li.current > a:hover {
                color: #F94735
            }

        .header-style3.scrollHeader .navbar > ul > li.current > a:after {
            border-color: transparent #F94735 #F94735 transparent
        }

        .header-style3.scrollHeader .attr-nav > ul > li > a {
            color: #0f313a
        }

        .header-style3 .attr-nav > ul > li > a {
            color: #fff
        }

        .menu_area-light .navbar-nav li a {
            color: #0f313a
        }

        .menu_area-light .navbar-nav > li > a {
            color: #fff
        }

        .menu_area-light .navbar ul ul li.active > a {
            color: #0f313a
        }

        .menu_area-light .navbar-nav li.has-sub a:hover {
            color: #0f313a
        }

        .menu_area-light .navbar-nav li.current > a {
            color: #F94735
        }

        .menu_area-light .navbar .sub-title {
            color: #0f313a
        }

        .menu_area-light .navbar-nav > li.has-sub > a:hover {
            color: #fff
        }

        .menu_area-light .navbar > ul > li.has-sub > a:hover:after {
            border-color: transparent #fff #fff transparent
        }

        .menu_area-light .navbar > ul > li.has-sub > a:after {
            border-color: transparent #fff #fff transparent
        }

        .menu_area-light .navbar > ul > li.current > a:after {
            border-color: transparent #F94735 #F94735 transparent
        }

        .menu_area-light.scrollHeader .navbar-nav > li > a {
            color: white;
        }

        .menu_area-light.scrollHeader .navbar-nav > li.has-sub > a:hover {
            color: #000
        }

        .menu_area-light.scrollHeader .navbar > ul > li.has-sub > a:after {
            border-color: transparent #0f313a #0f313a transparent
        }

        .menu_area-light.scrollHeader .navbar-nav li.current > a {
            color: #F94735
        }

            .menu_area-light.scrollHeader .navbar-nav li.current > a:hover {
                color: #F94735
            }

        .menu_area-light.scrollHeader .navbar > ul > li.current > a:after {
            border-color: transparent #F94735 #F94735 transparent
        }
    }

    @media screen and (max-width: 991px) {
        .navbar-header-custom {
            padding: 6px 0;
           /* margin: 0 auto;*/
        }

        .navbar-brand img {
            max-height: 70px
        }

        .header-right .d-flex.search {
            height: 35px;
        }

        .login-user {
            max-width: 120px;
        }

        .navbar-nav li > ul {
            -webkit-box-shadow: none;
            -ms-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none
        }

        .navbar-nav > li.has-sub > ul {
            opacity: 1;
            margin: 0;
            -webkit-box-shadow: none;
            -ms-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            -webkit-transition: all 0s ease;
            -ms-transition: all 0s ease;
            -moz-transition: all 0s ease;
            -o-transition: all 0s ease;
            transition: all 0s ease
        }

        .navbar li > ul ul {
            margin: 0;
            min-width: auto
        }

        .navbar-nav > li.has-sub {
            padding-right: 0
        }

        .navbar-nav > li > a {
            padding: 14px 20px;
            color: #0f313a;
            font-size: 15px;
            font-weight: 700
        }

            .navbar-nav > li > a:hover {
                opacity: 1
            }

        .navbar-nav li.has-sub a:hover {
            color: #0f313a
        }

        .navbar .sub-title {
            color: #0f313a
        }

        .navbar-nav {
            background: #04509E;
            -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
            -ms-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
            position: absolute;
            top: 121px;
            left: 0;
            width: 100%;
            transition-duration: 0;
            -ms-transition-duration: 0;
            -moz-transition-duration: 0;
            -webkit-transition-duration: 0;
            -o-transition-duration: 0;
            width: 100%;
            display: none;
            transition: none;
            -ms-transition: none;
            -moz-transition: none;
            -webkit-transition: none;
            -o-transition: none;
            margin-left: auto !important;
        }

            .navbar-nav li.active > a {
                opacity: 1
            }

            .navbar-nav ul {
                width: 100%;
                display: none;
                transition: none;
                -ms-transition: none;
                -moz-transition: none;
                -webkit-transition: none;
                -o-transition: none
            }

            .navbar-nav li {
                width: 100%;
                border-top: 1px solid #e6e6e6;
                position: relative;
                padding: 0;
                margin: 0;
                text-align: left
            }

        .navigation .navbar .navbar-nav li .sub-menu {
            width: 100%;
        }

        /*.navbar-nav ul li:hover {
            background: #f5f5f5
        }
*/
        .navbar-nav ul ul li {
            height: auto
        }

        .navbar-nav li:hover > ul > li {
            height: auto
        }

        .navbar ul li a {
            width: 100%;
            border-bottom: 0
        }

        .navbar ul ul {
            position: relative;
            left: 0;
            width: 100%;
            margin: 0;
            text-align: left;
            background: #f5f5f5;
            padding: 0
        }

            .navbar ul ul li {
                margin-bottom: 0;
                padding: 0;
                border-color: #e6e6e6
            }

                .navbar ul ul li a {
                    width: 100%;
                    border-bottom: 0;
                    color: #0f313a;
                    background: none;
                    padding: 10px 35px 10px 30px;
                    font-size: 16px;
                    font-weight: 600
                }

            .navbar ul ul ul li a {
                padding-left: 45px
            }

        .navbar > ul > li {
            float: none
        }

        .navbar-nav ul ul {
            position: relative;
            left: 0;
            width: 100%;
            margin: 0;
            text-align: left;
            background: #f5f5f5;
            padding: 0
        }

        .navbar > ul > li.has-sub > a:after,
        .navbar > ul > li.has-sub > a:before {
            display: none
        }

        .navbar ul ul > li.has-sub > a:after,
        .navbar ul ul > li.has-sub > a:before {
            display: none
        }

        .navbar-nav ul ul ul li.active a {
            border-left: none
        }

        .navbar-nav > ul > li.has-sub > ul > li.active > a,
        .navbar-nav > ul ul > li.has-sub > ul > li.active > a {
            border-top: none
        }

        .navbar li > ul ul ul {
            margin-left: 0;
            background: #fff
        }

        .navbar ul ul ul ul li a {
            padding-left: 55px
        }

        .navbar-nav .has-sub .has-sub .submenu-button {
            height: 43px
        }

            .navbar-nav .has-sub .has-sub .submenu-button:after {
                top: 19px
            }

            .navbar-nav .has-sub .has-sub .submenu-button:before {
                top: 15px
            }

        .navbar-toggler {
            background: #0f313a;
            width: 50px;
            height: 45px;
            padding: 0;
            border-radius: 0;
            position: absolute;
            right: 0;
            top: 62px;
            cursor: pointer;
            z-index: 12399994;
            border: none
        }

            .navbar-toggler:after {
                position: absolute;
                top: 23px;
                right: 15px;
                display: block;
                height: 10px;
                width: 28px;
                border-top: 2px solid #fff;
                border-bottom: 2px solid #fff;
                content: ""
            }

            .navbar-toggler:before {
                -webkit-transition: all .3s ease;
                -ms-transition: all .3s ease;
                transition: all .3s ease;
                position: absolute;
                top: 15px;
                right: 15px;
                display: block;
                height: 2px;
                width: 28px;
                background: #fff;
                content: ""
            }

            .navbar-toggler.menu-opened:after {
                -webkit-transition: all .3s ease;
                -ms-transition: all .3s ease;
                transition: all .3s ease;
                top: 23px;
                border: 0;
                height: 2px;
                width: 25px;
                background: #fff;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg)
            }

            .navbar-toggler.menu-opened:before {
                top: 23px;
                background: #fff;
                width: 25px;
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                transform: rotate(-45deg)
            }

        .navbar-nav .submenu-button {
            position: absolute;
            z-index: 99;
            right: 0;
            top: 0;
            display: block;
            height: 51px;
            width: 100%;
            cursor: pointer
        }

            .navbar-nav .submenu-button:after {
                position: absolute;
                top: 24px;
                right: 16px;
                width: 10px;
                height: 2px;
                display: block;
                background: #fff;
                content: ""
            }

            .navbar-nav .submenu-button:before {
                position: absolute;
                top: 20px;
                right: 20px;
                display: block;
                width: 2px;
                height: 10px;
                background: #fff;
                content: ""
            }

        .navbar-nav .has-sub.active > .submenu-button:before {
            display: none
        }

        .attr-nav {
            float: left;
            margin-right: 70px
        }

            .attr-nav > ul > li {
                display: inline-block
            }

                .attr-nav > ul > li.dropdown ul.dropdown-menu {
                    left: -193px;
                    top: 38px;
                    display: none !important
                }

                .attr-nav > ul > li.dropdown.show ul.dropdown-menu {
                    display: block !important
                }

                .attr-nav > ul > li > a {
                    padding: 0
                }

                    .attr-nav > ul > li > a span.badge {
                        right: -8px
                    }

        .top-position {
            margin-top: -72px
        }

        .top-position1 {
            margin-top: -73px
        }

        .header-style1 {
            box-shadow: none
        }

            .header-style1 #top-bar {
                display: none;
                background: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.35)
            }

            .header-style1 .navbar-default {
                -webkit-box-shadow: none;
                -ms-box-shadow: none;
                box-shadow: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.35)
            }

            .header-style1 .navbar-toggler {
                background: #04509E;
            }

                .header-style1 .navbar-toggler:after {
                    border-top: 2px solid #fff;
                    border-bottom: 2px solid #fff
                }

                .header-style1 .navbar-toggler:before {
                    background: #fff
                }

                .header-style1 .navbar-toggler.menu-opened:after {
                    background: #fff;
                    border-bottom: none
                }

                .header-style1 .navbar-toggler.menu-opened:before {
                    background: #fff
                }

            .header-style1 .attr-nav > ul > li > a {
                color: #fff
            }

        .header-style3 .attr-nav > ul > li > a {
            color: #fff
        }
    }

    .search-mobile {
        display: none;
    }

    @media (min-width: 1366px) {
        .navbar-expand-lg .navbar-nav .nav-link {
            padding-right: 0.8rem;
            padding-left: 0.8rem;
        }

        .navbar-custom img {
            height: 55px;
        }

        .navbar-custom .search-input {
            max-width: 150px;
            font-size: 13px;
        }

        .search i {
            right: 10px;
            top: 13px;
            font-size: 14px;
        }
    }

    .item-newshome .slick-slide {
        margin: 0 15px; /* Điều chỉnh giá trị này để tăng/giảm khoảng cách */
    }

    .item-newshome .slick-list {
        margin: 0 -15px; /* Đảm bảo slide không bị thu hẹp trong viewport */
    }

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

    .slide {
        position: relative;
        transition: 1s;
    }

        .slide .slide__img {
            width: 100%;
            height: auto;
            overflow: hidden;
        }

            .slide .slide__img img {
                max-width: 100%;
                height: auto;
                opacity: 1 !important;
                -webkit-animation-duration: 3s;
                animation-duration: 3s;
                transition: all 1s ease;
            }

        .slide .slide__content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

            .slide .slide__content.slide__content__left {
                left: 15%;
                transform: translate(-15%, -50%);
            }

            .slide .slide__content.slide__content__right {
                right: 15%;
                left: auto;
                transform: translate(5%, -50%);
            }

        .slide .slide__content--headings {
            color: #fff;
        }

            .slide .slide__content--headings h2 {
                font-size: 4.5rem;
                margin: 10px 0;
            }

            .slide .slide__content--headings .animated {
                transition: all 0.5s ease;
            }

            .slide .slide__content--headings .top-title {
                font-family: "Playball", cursive;
                font-size: 2.5rem;
            }

            .slide .slide__content--headings .title {
                font-size: 3.5rem;
            }

            .slide .slide__content--headings .button-custom {
                text-decoration: none;
                color: #333;
                padding: 1.2rem 2.5rem;
                font-size: 1.5rem;
            }

    .slider [data-animation-in] {
        opacity: 0;
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        transition: opacity 0.5s ease 0.3s;
        transition: 1s;
    }

    .slick-dotted .slick-slider {
        margin-bottom: 30px;
    }

    .slick-dots {
        position: absolute;
        bottom: 25px;
        list-style: none;
        display: block;
        text-align: center;
        padding: 0;
        margin: 0;
        width: 100%;
    }

        .slick-dots li {
            position: relative;
            display: inline-block;
            margin: 0 5px;
            padding: 0;
            cursor: pointer;
        }

            .slick-dots li button {
                border: 0;
                display: block;
                outline: none;
                line-height: 0px;
                font-size: 0px;
                color: transparent;
                padding: 5px;
                cursor: pointer;
                transition: all 0.3s ease;
            }

                .slick-dots li button:hover, .slick-dots li button:focus {
                    outline: none;
                }

    .simple-dots .slick-dots li {
        width: 20px;
        height: 20px;
    }

        .simple-dots .slick-dots li button {
            border-radius: 50%;
            background-color: white;
            opacity: 0.25;
            width: 20px;
            height: 20px;
        }

            .simple-dots .slick-dots li button:hover, .simple-dots .slick-dots li button:focus {
                opacity: 1;
            }

        .simple-dots .slick-dots li.slick-active button {
            color: white;
            opacity: 0.75;
        }

    .stick-dots .slick-dots li {
        height: 3px;
        width: 50px;
    }

        .stick-dots .slick-dots li button {
            position: relative;
            background-color: white;
            opacity: 0.25;
            width: 50px;
            height: 3px;
            padding: 0;
        }

            .stick-dots .slick-dots li button:hover, .stick-dots .slick-dots li button:focus {
                opacity: 1;
            }

        .stick-dots .slick-dots li.slick-active button {
            color: white;
            opacity: 0.75;
        }

            .stick-dots .slick-dots li.slick-active button:hover, .stick-dots .slick-dots li.slick-active button:focus {
                opacity: 1;
            }

    /* /////////// IMAGE ZOOM /////////// */
    @-webkit-keyframes zoomInImage {
        from {
            transform: scale3d(1, 1, 1);
            transition: 1s;
        }

        to {
            transform: scale3d(1.1, 1.1, 1.1);
            transition: 1s;
        }
    }

    @keyframes zoomInImage {
        from {
            transform: scale3d(1, 1, 1);
            transition: 1s;
        }

        to {
            transform: scale3d(1.1, 1.1, 1.1);
            transition: 1s;
        }
    }

    .zoomInImage {
        -webkit-animation-name: zoomInImage;
        animation-name: zoomInImage;
    }

    @-webkit-keyframes zoomOutImage {
        from {
            transform: scale3d(1.1, 1.1, 1.1);
            transition: 1s;
        }

        to {
            transform: scale3d(1, 1, 1);
            transition: 1s;
        }
    }

    @keyframes zoomOutImage {
        from {
            transform: scale3d(1.1, 1.1, 1.1);
            transition: 1s;
        }

        to {
            transform: scale3d(1, 1, 1);
            transition: 1s;
        }
    }

    .zoomOutImage {
        -webkit-animation-name: zoomOutImage;
        animation-name: zoomOutImage;
        transition: 1s;
    }

    .slick-nav {
        --active: #fff;
        --border: rgba(255, 255, 255, 0.12);
        width: 44px;
        height: 44px;
        position: absolute;
        cursor: pointer;
        top: calc(50% - 44px);
    }

        .slick-nav.prev-arrow {
            left: 3%;
            transform: scaleX(-1);
            z-index: 999;
        }

        .slick-nav.next-arrow {
            left: auto;
            right: 3%;
        }

        .slick-nav i {
            display: block;
            position: absolute;
            margin: -10px 0 0 -10px;
            width: 20px;
            height: 20px;
            left: 50%;
            top: 50%;
        }

            .slick-nav i:before, .slick-nav i:after {
                content: "";
                width: 10px;
                height: 2px;
                border-radius: 1px;
                position: absolute;
                left: 50%;
                top: 50%;
                background: var(--active);
                margin: -1px 0 0 -5px;
                display: block;
                transform-origin: 9px 50%;
            }

            .slick-nav i:before {
                transform: rotate(-40deg);
            }

            .slick-nav i:after {
                transform: rotate(40deg);
            }

        .slick-nav:before, .slick-nav:after {
            content: "";
            display: block;
            position: absolute;
            left: 1px;
            right: 1px;
            top: 1px;
            bottom: 1px;
            border-radius: 50%;
            border: 2px solid rgb(255 255 255 / 48%);
        }

        .slick-nav svg {
            width: 44px;
            height: 44px;
            display: block;
            position: relative;
            z-index: 1;
            color: var(--active);
            stroke-width: 2px;
            stroke-dashoffset: 126;
            stroke-dasharray: 126 126 0;
            transform: rotate(0deg);
        }

        .slick-nav.animate svg {
            -webkit-animation: stroke 1s ease forwards 0.3s;
            animation: stroke 1s ease forwards 0.3s;
        }

        .slick-nav.animate i {
            -webkit-animation: arrow 1.6s ease forwards;
            animation: arrow 1.6s ease forwards;
        }

            .slick-nav.animate i:before {
                -webkit-animation: arrowUp 1.6s ease forwards;
                animation: arrowUp 1.6s ease forwards;
            }

            .slick-nav.animate i:after {
                -webkit-animation: arrowDown 1.6s ease forwards;
                animation: arrowDown 1.6s ease forwards;
            }

    @-webkit-keyframes stroke {
        52% {
            transform: rotate(-180deg);
            stroke-dashoffset: 0;
        }

        52.1% {
            transform: rotate(-360deg);
            stroke-dashoffset: 0;
        }

        100% {
            transform: rotate(-180deg);
            stroke-dashoffset: 126;
        }
    }

    @keyframes stroke {
        52% {
            transform: rotate(-180deg);
            stroke-dashoffset: 0;
        }

        52.1% {
            transform: rotate(-360deg);
            stroke-dashoffset: 0;
        }

        100% {
            transform: rotate(-180deg);
            stroke-dashoffset: 126;
        }
    }

    @-webkit-keyframes arrow {
        0%, 100% {
            transform: translateX(0);
            opacity: 1;
        }

        23% {
            transform: translateX(17px);
            opacity: 1;
        }

        24%, 80% {
            transform: translateX(-22px);
            opacity: 0;
        }

        81% {
            opacity: 1;
            transform: translateX(-22px);
        }
    }

    @keyframes arrow {
        0%, 100% {
            transform: translateX(0);
            opacity: 1;
        }

        23% {
            transform: translateX(17px);
            opacity: 1;
        }

        24%, 80% {
            transform: translateX(-22px);
            opacity: 0;
        }

        81% {
            opacity: 1;
            transform: translateX(-22px);
        }
    }

    @-webkit-keyframes arrowUp {
        0%, 100% {
            transform: rotate(-40deg) scaleX(1);
        }

        20%, 80% {
            transform: rotate(0deg) scaleX(0.1);
        }
    }

    @keyframes arrowUp {
        0%, 100% {
            transform: rotate(-40deg) scaleX(1);
        }

        20%, 80% {
            transform: rotate(0deg) scaleX(0.1);
        }
    }

    @-webkit-keyframes arrowDown {
        0%, 100% {
            transform: rotate(40deg) scaleX(1);
        }

        20%, 80% {
            transform: rotate(0deg) scaleX(0.1);
        }
    }

    @keyframes arrowDown {
        0%, 100% {
            transform: rotate(40deg) scaleX(1);
        }

        20%, 80% {
            transform: rotate(0deg) scaleX(0.1);
        }
    }

    @media (min-width: 1700px) {
        .navbar-expand-lg .navbar-nav .nav-link {
            padding-right: 0.2rem;
            padding-left: 1.2rem;
            font-size: 18px;
        }

        .navbar-custom img {
            height: 65px;
        }

        .navbar-custom .search-input {
            max-width: 200px;
            font-size: 16px;
        }

        .search i {
            position: absolute;
            right: -5px;
            top: 13px;
            color: #fff;
            font-weight: 300;
        }
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(6, 1fr); /* 5 equal columns */
        gap: 10px; /* Spacing between grid items */
        padding: 10px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        border-radius: 50px;
    }

    .menu-pano .grid-item {
        color: white;
        text-align: center;
        padding: 10px 20px 5px;
        border-radius: 5px;
    }

        .menu-pano .grid-item img {
            padding-bottom: 15px;
            max-height: 50px;
        }

        .menu-pano .grid-item a {
            color: #000;
            text-decoration: none;
            font-size: 16px;
        }
    /* Responsive design */
    @media (max-width: 1200px) {
        .grid-container {
            grid-template-columns: repeat(4, 1fr); /* 4 columns */
        }
    }

    @media (max-width: 992px) {
        .grid-container {
            grid-template-columns: repeat(3, 1fr); /* 3 columns */
        }
        .login-user a {
            color: #fff;
            font-size: 14px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            text-align: left;
        }

    }

    @media (max-width: 768px) {
        .grid-container {
            grid-template-columns: repeat(2, 1fr); /* 2 columns */
        }
    }

    @media (max-width: 576px) {
        .grid-container {
            grid-template-columns: repeat(2, 1fr); /* 2 column */
        }
    }

    .intro-text {
        text-align: justify;
    }

        .intro-text h2 {
            color: #04509E;
            font-weight: 700;
            padding-bottom: 20px;
            line-height: 40px;
        }

        .intro-text p {
            color: #6D6E71;
        }

        .intro-text a {
            color: #231F20;
            text-decoration: none;
        }

    .feel-student .title {
        color: #04509E;
        font-weight: 700;
        padding-bottom: 30px;
    }

    .layer-vr360 {
        position: relative;
        background: url('../images/bg-vr360.svg') no-repeat;
        background-position: center;
        background-size: cover;
    }

        .layer-vr360 h2 {
            text-align: center;
            color: white;
            padding: 55px 0 25px 0;
            margin-bottom: 0;
            line-height: 40px;
            font-weight: 700;
        }

        .layer-vr360 p {
            text-align: center;
            color: white;
            padding-bottom: 15px;
        }

        .layer-vr360 a {
            text-align: center;
            color: #04509E;
            background: #fff;
            padding: 6px 25px;
            border-radius: 50px;
            display: inline-flex;
            align-items: center;
            font-weight: 600;
            font-size: 18px;
        }

    .link-vr360 {
        text-align: center;
    }

    .layer-vr360 img {
        width: 100%;
    }
    /*@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}*/
    .tools h2 {
        font-size: 20px;
        color: #003c84;
        margin-bottom: 10px;
    }

    .tools .btn {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 15px;
        margin-bottom: 10px;
        border-radius: 10px;
        color: #fff;
        gap: 10px;
    }

        .tools .btn img.icon {
            width: 24px;
            height: 24px;
            margin-right: 10px;
            gap: 20px;
        }

    .btn-blue {
        background-color: #0078d4;
    }

    .btn-orange {
        background-color: #ff8c00;
    }

    .btn-pink {
        background-color: #e91e63;
    }

    .btn-green {
        background-color: #4caf50;
    }

    .btn-purple {
        background-color: #673ab7;
    }

    .lienhe-image {
        width: 100%;
        height: auto;
    }
    /*phần nganh dao tao*/
    .news-home .card-body {
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        margin: 25px 0;
        padding: 0;
    }

    .news-home img {
        width: 100%;
        padding-bottom: 15px;
    }

    .news-home h2 {
        font-size: 18px;
        color: #04509E;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        -webkit-box-orient: vertical;
        text-align: justify;
    }

    .des-news {
        padding: 10px;
        min-height: 90px;
    }

    .news-home .link-details {
        color: #231F20;
        font-size: 13px;
        line-height: 40px;
        display: inline-block;
    }

    .testimonial-slider .testimonial-card {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding-right: 25px;
    }

    .testimonial-slider .circle {
        background-color: #27AAE1;
    }

    .testimonial-slider .circle {
        width: 153px;
        height: 153px;
        border-radius: 50%;
        flex-shrink: 0;
        position: relative;
        z-index: 2;
    }

        .testimonial-slider .circle img {
            border-radius: 50%;
        }

    .testimonial-slider .testimonial-content {
        flex-grow: 1;
        background: #fff;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        border-radius: 80px;
        padding: 15px 20px 15px 110px;
        position: absolute;
        z-index: 1;
        left: 65px;
        right: 30px;
        height: 130px;
    }

        .testimonial-slider .testimonial-content h5 {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .testimonial-slider .testimonial-content p {
            margin-bottom: 0;
            color: #333;
        }

        .testimonial-slider .testimonial-content .mota {
            padding-bottom: 6px;
            font-weight: 500;
            font-style: italic;
            font-size: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            overflow: hidden;
            -webkit-box-orient: vertical;
        }

        .testimonial-slider .testimonial-content .description {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
        }

    .testimonial-slider .quote-icon {
        top: 10px;
        right: 20px;
        font-size: 2rem;
        color: #007bff;
        position: absolute;
        z-index: 3;
        top: 0px;
        right: 50px;
    }

    .slick-dots {
        text-align: center;
        margin-top: 20px;
    }

        .slick-dots li button:before {
            font-size: 12px;
            color: #007bff;
        }

    .slick-prev,
    .slick-next {
        background-color: #007bff;
        border-radius: 50%;
        color: #fff;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /*phần nganh dao tao*/

    .section-title {
        color: #04509E;
        font-weight: bold;
        margin-bottom: 20px;
        font-size: 31px;
    }

    .subtitle {
        font-weight: bold;
        color: #ff7f00;
        margin-bottom: 15px;
    }

    .tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }

    .tab {
        padding: 3px 30px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #f1f1f1;
        color: #04509E;
        cursor: pointer;
        transition: all 0.3s;
    }

        .tab:hover {
            background-color: #04509E;
            color: #fff;
        }

    .btn-register {
        display: none;
        background-color: #ff8c00;
        color: #fff;
        padding: 10px 15px;
        font-size: 20px;
        border: none;
        font-weight: 700;
        border-radius: 15px;
        cursor: pointer;
        transition: background-color 0.3s;
        display: inline-flex;
        align-items: center;
    }

    .nganhdt .tab-conten .tabs a {
        background: #E6E7E8;
        color: #04509E;
        border-radius: 10px;
        padding: 3px 30px;
        cursor: pointer;
        font-size: 16px;
    }

        .nganhdt .tab-conten .tabs a.tab.active {
            background-color: #04509E;
            color: white;
        }

        .nganhdt .tab-conten .tabs a:hover {
            background-color: #04509E;
            color: white;
        }

    .btn-register:hover {
        background-color: #04509E;
        color: #fff;
    }
    /*    phan tin tuc*/
    .section-title {
        color: #04509E;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .list-nganhdt {
        padding-right: calc(var(--bs-gutter-x)* .5);
        padding-left: calc(var(--bs-gutter-x)* .5);
    }
    /*.tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.tab {
    padding: 0px 20px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f1f1f1;
    color: #0c62c2;
    cursor: pointer;
    transition: all 0.3s;
}

    .tab:hover {
        background-color: #0c62c2;
        color: #fff;
    }
*/
    ul {
        /*    list-style-type: none;*/
        padding-left: 0;
    }

    .item-newshome .slick-nav.next-arrow {
        left: auto;
        right: 1%;
        color: #ffffff;
    }

    .item-newshome .slick-nav.prev-arrow {
        left: 1%;
    }

    .item-newshome .slick-nav svg {
        color: #ffffff;
    }

    .item-newshome .slick-nav i {
        color: #ffffff;
    }

    .item-newshome .slick-nav {
        --active: #ffffff;
        --border: rgb(4 80 158 / 48%);
    }

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

        .news-title h3 {
            color: #04509E;
            font-weight: 700;
            margin: 0;
        }

        .news-title a {
            color: #231F20;
            font-weight: 500;
        }

    .news-item {
        padding-bottom: 25px;
        /*display: flex;*/
    }

        .news-item img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            object-fit: cover;
        }

    .news-item-title {
        font-weight: bold;
        margin-top: 10px;
    }


    .news-item p {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        color: #04509E;
        line-height: 1.5;
        text-align: justify;
    }

    .btn-view-all {
        background-color: #1C75BC;
        color: #fff;
        font-weight: bold;
        border: none;
        padding: 0px 20px;
        border-radius: 5px;
        margin-top: 20px;
    }

    a.btn-view-all {
        background: #1C75BC;
        padding: 10px 49px;
        border-radius: 15px;
    }

    .btn-view-all:hover {
        background-color: #04509E;
    }
    /*phần Media*/
    .section_title {
        color: #0c62c2;
        font-weight: bold;
        margin-bottom: 20px;
    }

    /*.news-item p {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    color: #0c62c2;
    line-height: 1.5;
}

.news-item {
    padding-bottom: 25px;
}

    .news-item a {
        text-decoration: none;
        color: black;
        font-size: 14px;
    }
    tab phần này dùng chung 
*/

    .media-section {
        padding: 20px;
    }

    .main-video {
        position: relative;
    }

        .main-video img {
            width: 100%;
            border-radius: 10px;
        }

    .video-description h4 {
        margin-top: 20px;
        color: #0c62c2;
    }

    .video-description p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        line-height: 1.5;
        max-height: calc(1.5em * 3);
        margin: 0;
        text-overflow: ellipsis;
        text-align: justify;
    }

    .video-list img {
        width: 80%;
        border-radius: 10px;
    }

    .video-list .video-item {
        margin-bottom: 20px;
    }

    .video-listright a {
        border: none;
        color: #04509E;
        text-align: justify;
    }

    .video-listright h6 {
        text-align: justify;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        overflow: hidden;
        -webkit-box-orient: vertical;
        color: #04509E;
    }

    .video-listright .text-primary {
        color: #231F20;
    }

    .video-fisrt .card-text {
        text-align: justify;
    }
    /*style footer*/
#footer-part {
    float: left;
    width: 100%;
/*    margin-bottom: -30px;*/
    background: #04509E;
}

    .bg_cover {
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }

    .our_location {
        position: relative;
        background: #04509E;
    }
    /*.our_location:before {
        left: 0;
        top: 0;
        content: " ";
        background: rgba(1, 60, 136, 0.66);
        position: absolute;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
    }*/

    .ftoplink {
        position: relative;
        overflow: hidden;
        padding-top: 20px;
    }

        .ftoplink .footertop-padding-left {
            padding-left: 0 !important;
            float: left;
        }

            .ftoplink .footertop-padding-left .navbar-brand {
                display: inline-block;
                width: 100%;
                margin-top: -20px;
            }

    .navbar-brand {
        padding: 0;
        height: auto;
    }

    .ftoplink .footertop-padding-left .img_logo-footer {
        width: 100%;
        float: left;
    }

    #MenuFooter {
        position: relative;
        overflow: hidden;
        float: right;
        padding-left: 10px;
    }

    .ftoplink .footertop-padding-right {
        padding-right: 0 !important;
    }

    #MenuFooter ul {
        list-style: none;
        color: #fff;
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
        grid-template-rows: repeat(2, 40px);
    }

    @media (min-width: 1400px) {
        #MenuFooter ul {
            grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
            grid-template-rows: repeat(2, 50px);
        }
    }

    #MenuFooter li {
        display: inline-flex;
        list-style: none;
        list-style: none;
        justify-content: space-between;
        align-items: center;
    }

    #MenuFooter a {
        color: #fff;
        line-height: 25px;
        -webkit-transition: all 0.4s linear;
        transition: all 0.4s linear;
    }

    .location_con .com_info {
         width: 90%; 
        float: left;
        border-color: rgba(255, 255, 255, 0.1);
        /* padding-right: 15px; */
        padding-top: 25px;
    }

    div.location_con .com_info dl {
        border-bottom: 1px solid;
        border-color: rgba(255, 255, 255, 0.1);
        height: 40px;
        overflow: hidden;
        font-size: 11pt;
        margin: 0;
    }

        div.location_con .com_info dl dt {
            float: left;
            color: #fff;
            font-weight: normal;
            text-align: left;
            /* width: 92px; */
            margin: 10px 6px 0 0;
        }

    .location_con dt i {
        font-size: 16px;
        width: 22px;
        padding-left: 2px;
        text-align: left;
    }

    div.location_con .com_info dl dd {
        float: left;
        color: #fff;
        margin: 0;
        margin-top: 10px;
        /* width: calc(100% - 150px); */
    }

    .footer-about {
        text-align: center;
    }

    .social-slogan {
        font-size: 20px;
        color: #fff;
        height: 46px;
        line-height: 65px;
        text-align: left;
        text-transform: uppercase;
        font-style: italic;
    }

    .footer-about ul {
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

        .footer-about ul li {
            display: inline-block;
            margin-left: 15px;
        }

            .footer-about ul li a {
                width: 50px;
                height: 50px;
                display: inline-block;
                line-height: 50px;
                font-size: 30px;
                color: #fff;
                text-align: center;
                /* background-color: #021d3a; */
                -webkit-transition: all 0.4s linear;
                transition: all 0.4s linear;
            }

                .footer-about ul li a.zalo {
                    background: url('../images/icon/zalo-icon.png') no-repeat;
                    background-size: contain;
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    margin-top: 5px;
                }

    .footer-link {
        overflow: hidden;
    }

    .support ul {
        float: left;
        width: 100%;
    }

    .footer-link ul li {
        line-height: 35px;
    }

        .footer-link ul li a {
            text-transform: uppercase;
            font-size: 16px;
            text-align: center;
            color: #fff;
            font-weight: 500;
            -webkit-transition: all 0.4s linear;
            transition: all 0.4s linear;
        }

    div.location_con .map {
        overflow: hidden;
        position: relative;
        padding: 30px 10px 3px 10px;
        /* background: #f5ebeb2e; */
    }

        div.location_con .map h5 {
            text-transform: uppercase;
            font-size: 16px;
            text-align: center;
            color: #fdfe00;
            font-weight: 600;
        }

    .map .content_item_maps {
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
    }

    p.name-branch.click-map {
        color: #fff;
        /* padding-right: 12px; */
        font-weight: 500;
        cursor: pointer;
    }

    #address-branch {
        color: #fdfe00;
        padding: 0 15px;
        min-height: 56px;
        font-weight: 400;
    }

    .footer-copyright {
        background-color: #213570;
        height: 45px;
        font-size: 11px;
        overflow: hidden;
    }

        .footer-copyright .copyright p {
            color: #fff;
            font-size: 11px;
        }

    .cc-ti .img-right {
        max-height: 650px;
        height: auto;
        width: auto;
    }

    .wTopLink h2 {
        color: #1C75BC;
        font-size: 30px;
        font-weight: 700;
        padding-bottom: 20px;
    }

    .wTopLink a {
        background: #d6456a;
        width: 100%;
        height: 80px;
        line-height: 52px;
        color: #fff;
        font-weight: bold;
        display: block;
        border-radius: 10px;
        padding-left: 63px;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
    }

    .wTopLink .link-1 {
        background: #2a95dd url(../Images/icon/icon_link_2.png) no-repeat;
        background-position-x: 15px;
        background-position-y: 0px;
        padding-left: 110px;
        background-size: 80px;
    }

    .wTopLink .link-2 {
        background: #ff9201 url(../Images/icon/icon_link_3.png) no-repeat;
        background-position-x: 10px;
        background-position-y: 0px;
        padding-left: 110px;
        background-size: 80px;
    }

    .wTopLink .link-3 {
        background: #DA1C5C url('../Images/icon/trac nghiem.png') no-repeat;
        background-position-x: 24px;
        background-position-y: 8px;
        padding-left: 110px;
        background-size: 52px;
    }

    .wTopLink .link-4 {
        background: #00A651 url('../Images/icon/Vr360.png') no-repeat;
        background-position-x: 24px;
        background-position-y: 8px;
        padding-left: 110px;
        background-size: 52px;
    }

    .wTopLink .link-5 {
        background: #7F3F98 url('../Images/icon/AI-Chatbot.png') no-repeat;
        background-position-x: 24px;
        background-position-y: 17px;
        padding-left: 110px;
        background-size: 60px;
    }

    /*phần datalist của media*/
    .title-box-stripe {
        margin: 0;
        background: url('../images/icon/icon_block_title.jpg') no-repeat;
        height: 41px;
        padding-left: 58px;
        line-height: 41px;
        width: 100%;
        clear: both;
    }

    .card {
        border: none; /* Remove border */
        box-shadow: none; /* Remove shadow */
    }

    .card-body {
        flex: 1 1 auto;
        padding: 10px 0px;
        color: var(--bs-card-color);
    }

    .card img {
        box-sizing: border-box;
        max-width: 100%;
        gap: 10px 20px;
    }
    /*.zoom:hover {
    transform: scale(1.1);*/ /* Phóng to 10% */
    /*transition: transform 0.3s ease;*/ /* Hiệu ứng chuyển đổi mượt mà */
    /*}*/
    .zoom:hover {
        transform: scale(1.03)
    }

    .zoom {
        transition: transform 0.3s ease;
        Chuẩn bị hiệu ứng chuyển đổi
    }

    .pagination-block {
        width: 100%;
        text-align: center;
        padding-bottom: 30px;
    }

        .pagination-block .page-numbers {
            width: 40px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            display: inline-block;
            color: #2196f4;
            font-size: 15px;
            font-weight: 600;
            border: 1px solid rgb(221, 221, 221);
            border-radius: 0;
            margin: 0 3px;
            padding: 0;
            -webkit-transition: all 0.3s ease 0s;
            -moz-transition: all 0.3s ease 0s;
            -ms-transition: all 0.3s ease 0s;
            -o-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
        }

            .pagination-block .page-numbers.current {
                background-color: #5a94d2;
                color: #fff;
            }

    .page_enabled {
        display: inline-block;
        height: 30px;
        min-width: 40px;
        line-height: 30px;
        text-align: center;
        text-decoration: none;
        border: 1px solid #dddddd;
        font-size: 15px;
        background: #fff;
        margin-right: 3px;
    }

        .page_enabled:hover {
            background: #f5f5f5;
        }

    .page_enabled {
        background: #fff;
    }

    .w-100 {
        width: 100% !important;
    }

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

    .breadcrumbs {
        padding: 20px 0px 15px;
        margin-bottom: 0;
        position: relative;
        overflow: hidden;
    }

        .breadcrumbs::after {
            clear: both;
            width: 100%;
            height: 1px;
        }

        .breadcrumbs a {
            color: #444;
        }

            .breadcrumbs a:after, .breadcrumbs a:before {
                border-right: 1px solid #ddd;
                border-top: 1px solid #ddd;
                content: "";
                display: inline-block;
                height: 17px;
                position: absolute;
                top: 3px;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                width: 17px;
                right: -8px;
            }

            .breadcrumbs a:before {
                left: -8px;
            }

        .breadcrumbs ul {
            font-size: 14px;
            color: #a3a3a3;
            margin: 0;
            padding: 0;
            list-style: none none;
        }

            .breadcrumbs ul li {
                height: 25px;
                line-height: 22px;
                border-top: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                position: relative;
                padding: 0 20px;
                float: left;
                margin-left: 4px;
                margin-bottom: 5px;
            }

                .breadcrumbs ul li:first-child {
                    padding-left: 10px;
                    border-left: 1px solid #ddd;
                    margin-left: 0;
                }

                .breadcrumbs ul li:not(:last-child) {
                    display: inline-block;
                    text-decoration: none;
                }

                .breadcrumbs ul li:first-child a:before {
                    display: none;
                }

                .breadcrumbs ul li:hover {
                    border-color: #ff5500;
                }

                    .breadcrumbs ul li:hover a:before, .breadcrumbs ul li:hover a:after {
                        border-color: #ff5500;
                    }

                .breadcrumbs ul li:last-child, .breadcrumbs ul li:last-child a:after, .breadcrumbs ul li:last-child a:before {
                    border-color: #ddd !important;
                }

    .tab.active {
        color: #fff;
        background: #04509E;
    }

        a:hover {
            color: #2196f4;
        }

    /*.card-body p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    overflow: hidden;
    -webkit-box-orient: vertical;
}*/

    .media h5 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        -webkit-box-orient: vertical;
    }

    .media p {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        overflow: hidden;
        -webkit-box-orient: vertical;
    }

    .card-body h2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        -webkit-box-orient: vertical;
        min-height: 45px;
        text-transform: initial;
    }

    .news-item .title {
        font-size: 1.25rem;
        font-weight: 600;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        overflow: hidden;
        -webkit-box-orient: vertical;
    }

    .link-details a:hover {
        background-color: #FFD700;
        color: white;
    }

    ul.share_buttons {
        margin: 0;
        padding: 0;
    }

        ul.share_buttons > li {
            list-style: none;
            margin: 0;
            padding: 0;
            float: left;
        }

            ul.share_buttons > li.plusone {
                max-width: 65px;
                margin: 0;
            }

            ul.share_buttons > li.fa_send {
                margin-right: 5px;
            }

    .fb_iframe_widget_fluid_desktop iframe {
        width: 100% !important;
    }

    .badge {
        display: inline-block;
        padding: 0.25em 0.4em;
        font-size: 75%;
        font-weight: 400;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: 0;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

        .badge:empty {
            display: none;
        }

    .badge-warning {
        color: #1b1b1b;
        background-color: #ffc107;
    }

    @media print {
        .badge {
            border: 1px solid #000;
        }
    }

    .badge {
        display: inline-block;
        min-width: 10px;
        padding: 3px 7px;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        line-height: 1;
        vertical-align: middle;
        white-space: nowrap;
        text-align: center;
        background-color: #777;
        border-radius: 5px;
        text-transform: capitalize;
        margin-left: 10px;
        position: absolute;
    }

    .badge-warning {
        background: url(https://ts.huit.edu.vn/Content/img/moi.gif) no-repeat 0 3px;
        background-color: transparent;
        background-size: 90% 90%;
        height: 25px;
        width: 25px;
        font-size: 1px;
        margin-left: 5px;
    }

    .posts-relate-content {
        clear: both;
        width: 100%;
        font-size: 14px;
        line-height: 18px;
        padding: 10px 0 0 30px;
        border-left: 1px solid #bdbdbd;
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;
    }

        .posts-relate-content p {
            color: #0066b3;
        }

        .posts-relate-content ul li a {
            color: #0066b3;
        }

        .posts-relate-content ul li {
            position: relative;
            line-height: 31px;
        }

            .posts-relate-content ul li:before {
                content: '';
                width: 5px;
                height: 5px;
                background: #757575;
                position: absolute;
                left: -12px;
                top: 14px;
                border-radius: 50%;
            }

            .posts-relate-content ul li a:hover {
                color: #0066b3;
            }

    @media (max-width: 568px) {
        .badge {
            position: relative;
            margin-left: 0;
        }
    }

    .widget {
        box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
        padding: 15px 6px;
        margin-bottom: 15px;
        border-radius: 9px;
    }

        .widget h3 {
            font-weight: 600;
        }
    /*phần media layout bên phải */
    .news-item-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        line-height: 1.5;
        max-height: calc(1.5em * 3);
        margin: 0;
    }

    .wTopLink_1 a {
        background: #d6456a;
        width: 100%;
        height: 52px;
        line-height: 52px;
        color: #fff;
        font-weight: bold;
        display: block;
        border-radius: 10px;
        padding-left: 50px;
        margin-bottom: 12px;
        font-size: 15px;
    }

        .wTopLink_1 a:hover {
            color: #ddd;
            text-decoration: none;
        }

    .wTopLink_1 .link-2 {
        background: #2a95dd url(https://ts.huit.edu.vn/Content/img/icon_link_2.png) no-repeat;
    }

    .wTopLink_1 .link-3 {
        background: #ff9201 url(https://ts.huit.edu.vn/Content/img/icon_link_3.png) no-repeat;
    }

    .wTopLink_1 .link-4 {
        background: #90278c url(https://ts.huit.edu.vn/Content/img/icon_link_4.png) no-repeat;
    }

    .wDaoTao_1 {
        padding: 8px;
        background-color: #f7f7f7;
    }

        .wDaoTao_1 a {
            background: #0070b8;
            width: 100%;
            height: 52px;
            line-height: 52px;
            color: #fff;
            font-weight: bold;
            display: block;
            text-align: left;
            margin-bottom: 12px;
            padding-left: 10px;
        }

            .wDaoTao_1 a:hover {
                color: #ddd;
                text-decoration: none;
            }

            .wDaoTao_1 a.link-1 {
                background: #00a69a;
            }

            .wDaoTao_1 a.link-2 {
                background: #0070b8;
            }

            .wDaoTao_1 a.link-3 {
                background: #018f45;
            }

            .wDaoTao_1 a.link-4 {
                background: #ed5a24;
            }

            .wDaoTao_1 a.link-5 {
                background: #2e3190;
            }

    .wThongBao {
        background-color: #f7f7f7;
    }

        .wThongBao .block-title-12 {
            padding-bottom: 8px;
        }

        .wThongBao .view-more {
            margin: 10px 0;
            float: right;
            background: none;
            color: red;
            text-decoration: underline;
        }

        .wThongBao .block-title-12 h4 {
            background: url(https://ts.huit.edu.vn/Content/img/icon_tb_title.jpg) no-repeat;
            padding-left: 56px;
            height: 37px;
            line-height: 37px;
            margin: 0;
            text-transform: capitalize;
        }

        .wThongBao .block-title-12 a {
            color: #ee0000;
        }

        .wThongBao h5 a:hover {
            color: #2196f4;
        }

        .wThongBao .card {
            /*background: url(https://ts.huit.edu.vn/Content/img/icon_tb_1.png) no-repeat 0 8px;*/
            padding-left: 20px;
            padding-right: 10px;
            padding-top: 0px;
        }

            .wThongBao .card:before {
                content: '';
                width: 6px;
                height: 6px;
                background: #04509e;
                position: absolute;
                left: 4px;
                top: 9px;
                border-radius: 50%;
            }

        .wThongBao h5 {
            font-weight: normal !important;
            font-size: 15px;
            text-align: justify;
        }

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    z-index: 1020;
}
.hide{
    display:none;
}

    .arcontactus-widget.right.arcontactus-message {
        right: 20px
    }

    .arcontactus-widget.right.arcontactus-message {
        bottom: 65px
    }

    .arcontactus-widget .arcontactus-message-button
    .pulsation {
        -webkit-animation-duration: 2s;
        animation-duration: 2s
    }

    .arcontactus-widget.md .arcontactus-message-button, .arcontactus-widget.md.arcontactus-message {
        width: 60px;
        height: 60px
    }

    .arcontactus-widget {
        opacity: 0;
        transition: .2s opacity
    }

        .arcontactus-widget * {
            box-sizing: border-box
        }

        .arcontactus-widget.left.arcontactus-message {
            left: 20px;
            right: auto
        }

        .arcontactus-widget.left .arcontactus-message-button {
            right: auto;
            left: 0
        }

        .arcontactus-widget.left .arcontactus-prompt {
            left: 80px;
            right: auto;
            transform-origin: 0 50%
        }

            .arcontactus-widget.left .arcontactus-prompt:before {
                border-right: 8px solid #FFF;
                border-top: 8px solid transparent;
                border-left: 8px solid transparent;
                border-bottom: 8px solid transparent;
                right: auto;
                left: -15px
            }

        .arcontactus-widget.left .messangers-block {
            right: auto;
            left: 0;
            -webkit-transform-origin: 10% 105%;
            -ms-transform-origin: 10% 105%;
            transform-origin: 10% 105%
        }

        .arcontactus-widget.left .callback-countdown-block {
            left: 0;
            right: auto
        }

            .arcontactus-widget.left .callback-countdown-block::before, .arcontactus-widget.left .messangers-block::before {
                left: 25px;
                right: auto
            }

        .arcontactus-widget.md .callback-countdown-block, .arcontactus-widget.md .messangers-block {
            bottom: 70px
        }

        .arcontactus-widget.md .arcontactus-prompt {
            bottom: 5px
        }

        .arcontactus-widget.md.left .callback-countdown-block:before, .arcontactus-widget.md.left .messangers-block:before {
            left: 21px
        }

        .arcontactus-widget.md.left .arcontactus-prompt {
            left: 70px
        }

        .arcontactus-widget.md.right .callback-countdown-block:before, .arcontactus-widget.md.right .messangers-block:before {
            right: 21px
        }

        .arcontactus-widget.md.right .arcontactus-prompt {
            right: 70px
        }

        .arcontactus-widget.md .arcontactus-message-button .pulsation {
            width: 74px;
            height: 74px
        }

        .arcontactus-widget.md .arcontactus-message-button .callback-state, .arcontactus-widget.md .arcontactus-message-button .icons {
            width: 40px;
            height: 40px;
            margin-top: -20px;
            margin-left: -20px
        }

        .arcontactus-widget.sm .arcontactus-message-button, .arcontactus-widget.sm.arcontactus-message {
            width: 50px;
            height: 50px
        }

        .arcontactus-widget.sm .callback-countdown-block, .arcontactus-widget.sm .messangers-block {
            bottom: 60px
        }

        .arcontactus-widget.sm .arcontactus-prompt {
            bottom: 0
        }

        .arcontactus-widget.sm.left .callback-countdown-block:before, .arcontactus-widget.sm.left .messangers-block:before {
            left: 16px
        }

        .arcontactus-widget.sm.left .arcontactus-prompt {
            left: 60px
        }

        .arcontactus-widget.sm.right .callback-countdown-block:before, .arcontactus-widget.sm.right .messangers-block:before {
            right: 16px
        }

        .arcontactus-widget.sm.right .arcontactus-prompt {
            right: 60px
        }

        .arcontactus-widget.sm .arcontactus-message-button .pulsation {
            width: 64px;
            height: 64px
        }

        .arcontactus-widget.sm .arcontactus-message-button .icons {
            width: 40px;
            height: 40px;
            margin-top: -20px;
            margin-left: -20px
        }

        .arcontactus-widget.sm .arcontactus-message-button .static {
            margin-top: -16px
        }

        .arcontactus-widget.sm .arcontactus-message-button .callback-state {
            width: 40px;
            height: 40px;
            margin-top: -20px;
            margin-left: -20px
        }

        .arcontactus-widget.active {
            opacity: 1
        }

        .arcontactus-widget .icons.hide, .arcontactus-widget .static.hide {
            opacity: 0;
            transform: scale(0)
        }

        .arcontactus-widget.arcontactus-message {
            z-index: 10000;
            right: 20px;
            bottom: 20px;
            position: fixed !important;
            height: 70px;
            width: 70px
        }

        .arcontactus-widget .arcontactus-message-button {
            width: 70px;
            position: absolute;
            height: 70px;
            right: 0;
            background-color: red;
            border-radius: 50px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            cursor: pointer
        }

            .arcontactus-widget .arcontactus-message-button p {
                font-family: Ubuntu,Arial,sans-serif;
                color: #fff;
                font-weight: 700;
                font-size: 10px;
                line-height: 11px;
                margin: 0
            }

            .arcontactus-widget .arcontactus-message-button .pulsation {
                width: 84px;
                height: 84px;
                background-color: red;
                border-radius: 50px;
                position: absolute;
                left: -7px;
                top: -7px;
                z-index: -1;
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                transform: scale(0);
                -webkit-animation: arcontactus-pulse 2s infinite;
                animation: arcontactus-pulse 2s infinite
            }

            .arcontactus-widget .arcontactus-message-button .icons {
                background-color: #fff;
                width: 44px;
                height: 44px;
                border-radius: 50px;
                position: absolute;
                overflow: hidden;
                top: 50%;
                left: 50%;
                margin-top: -22px;
                margin-left: -22px
            }

            .arcontactus-widget .arcontactus-message-button .static {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -19px;
                margin-left: -26px;
                width: 52px;
                height: 52px;
                text-align: center
            }

                .arcontactus-widget .arcontactus-message-button .static img {
                    display: inline
                }

                .arcontactus-widget .arcontactus-message-button .static svg {
                    width: 24px;
                    height: 24px;
                    color: #FFF
                }

            .arcontactus-widget .arcontactus-message-button.no-text .static {
                margin-top: -12px
            }

        .arcontactus-widget .pulsation:nth-of-type(2n) {
            -webkit-animation-delay: .5s;
            animation-delay: .5s
        }

        .arcontactus-widget .pulsation.stop {
            -webkit-animation: none;
            animation: none
        }

        .arcontactus-widget .icons-line {
            top: 10px;
            left: 12px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            position: absolute;
            -webkit-transition: cubic-bezier(.13,1.49,.14,-.4);
            -o-transition: cubic-bezier(.13,1.49,.14,-.4);
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
            -webkit-transform: translateX(30px);
            -ms-transform: translateX(30px);
            transform: translateX(30px);
            height: 24px;
            transition: .2s all
        }

        .arcontactus-widget .icons, .arcontactus-widget .static {
            transition: .2s all
        }

        .arcontactus-widget .icons-line.stop {
            -webkit-animation-play-state: paused;
            animation-play-state: paused
        }

        .arcontactus-widget .icons-line span {
            display: inline-block;
            width: 24px;
            height: 24px;
            color: red
        }

            .arcontactus-widget .icons-line span i, .arcontactus-widget .icons-line span svg {
                width: 24px;
                height: 24px
            }

            .arcontactus-widget .icons-line span i {
                display: block;
                font-size: 24px;
                line-height: 24px
            }

        .arcontactus-widget .icons-line img, .arcontactus-widget .icons-line span {
            margin-right: 40px
        }

        .arcontactus-widget .icons.hide .icons-line {
            transform: scale(0)
        }

        .arcontactus-widget .icons .icon:first-of-type {
            margin-left: 0
        }

        .arcontactus-widget .arcontactus-close {
            color: #FFF
        }

            .arcontactus-widget .arcontactus-close svg {
                -webkit-transform: rotate(180deg) scale(0);
                -ms-transform: rotate(180deg) scale(0);
                transform: rotate(180deg) scale(0);
                -webkit-transition: ease-in .12s all;
                -o-transition: ease-in .12s all;
                transition: ease-in .12s all;
                display: block
            }

            .arcontactus-widget .arcontactus-close.show-messageners-block svg {
                -webkit-transform: rotate(0) scale(1);
                -ms-transform: rotate(0) scale(1);
                transform: rotate(0) scale(1)
            }

        .arcontactus-widget .arcontactus-prompt, .arcontactus-widget .messangers-block {
            background: center no-repeat #FFF;
            box-shadow: 0 0 10px rgba(0,0,0,.6);
            width: 235px;
            position: absolute;
            bottom: 80px;
            right: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            padding: 14px 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 7px;
            -webkit-transform-origin: 80% 105%;
            -ms-transform-origin: 80% 105%;
            transform-origin: 80% 105%;
            -webkit-transform: scale(0);
            -ms-transform: scale(0);
            transform: scale(0);
            -webkit-transition: ease-out .12s all;
            -o-transition: ease-out .12s all;
            transition: ease-out .12s all;
            z-index: 10000
        }

            .arcontactus-widget .arcontactus-prompt:before, .arcontactus-widget .messangers-block:before {
                position: absolute;
                bottom: -7px;
                right: 25px;
                left: auto;
                display: inline-block !important;
                border-right: 8px solid transparent;
                border-top: 8px solid #FFF;
                border-left: 8px solid transparent;
                content: ''
            }

            .arcontactus-widget .arcontactus-prompt.show-messageners-block, .arcontactus-widget .messangers-block.show-messageners-block {
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1)
            }

        .arcontactus-widget .arcontactus-prompt {
            color: #787878;
            font-family: Arial,sans-serif;
            font-size: 16px;
            line-height: 18px;
            width: auto;
            bottom: 10px;
            right: 80px;
            white-space: nowrap;
            padding: 18px 20px 14px
        }

            .arcontactus-widget .arcontactus-prompt:before {
                border-right: 8px solid transparent;
                border-top: 8px solid transparent;
                border-left: 8px solid #FFF;
                border-bottom: 8px solid transparent;
                bottom: 16px;
                right: -15px
            }

            .arcontactus-widget .arcontactus-prompt.active {
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1)
            }

            .arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close {
                position: absolute;
                right: 6px;
                top: 6px;
                cursor: pointer;
                z-index: 100;
                height: 14px;
                width: 14px;
                padding: 2px
            }

                .arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close svg {
                    height: 10px;
                    width: 10px;
                    display: block
                }

            .arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing {
                border-radius: 10px;
                display: inline-block;
                left: 3px;
                padding: 0;
                position: relative;
                top: 4px;
                width: 50px
            }

                .arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div {
                    position: relative;
                    float: left;
                    border-radius: 50%;
                    width: 10px;
                    height: 10px;
                    background: #ccc;
                    margin: 0 2px;
                    -webkit-animation: arcontactus-updown 2s infinite;
                    animation: arcontactus-updown 2s infinite
                }

                    .arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div:nth-child(2) {
                        animation-delay: .1s
                    }

                    .arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div:nth-child(3) {
                        animation-delay: .2s
                    }

        .arcontactus-widget .messangers-block.sm .messanger {
            padding-left: 50px;
            min-height: 44px
        }

            .arcontactus-widget .messangers-block.sm .messanger span {
                height: 32px;
                width: 32px;
                margin-top: -16px
            }

                .arcontactus-widget .messangers-block.sm .messanger span svg {
                    height: 20px;
                    width: 20px;
                    margin-top: -10px;
                    margin-left: -10px
                }

        .arcontactus-widget .messanger {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin: 0;
            cursor: pointer;
            width: 100%;
            padding: 8px 20px 8px 60px;
            position: relative;
            min-height: 54px;
            text-decoration: none
        }

            .arcontactus-widget .messanger:hover {
                background-color: #EEE
            }

            .arcontactus-widget .messanger:before {
                background-repeat: no-repeat;
                background-position: center
            }

            .arcontactus-widget .messanger.facebook span {
                background: #0084ff
            }

            .arcontactus-widget .messanger.viber span {
                background: #7c529d
            }

            .arcontactus-widget .messanger.telegram span {
                background: #2ca5e0
            }

            .arcontactus-widget .messanger.skype span {
                background: #31c4ed
            }

            .arcontactus-widget .messanger.email span {
                background: #ff8400
            }

            .arcontactus-widget .messanger.contact span {
                background: #7eb105
            }

            .arcontactus-widget .messanger.call-back span {
                background: #54cd81
            }

            .arcontactus-widget .messanger span {
                position: absolute;
                left: 10px;
                top: 50%;
                margin-top: -20px;
                display: block;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background-color: #0084ff;
                margin-right: 10px;
                color: #FFF;
                text-align: center;
                vertical-align: middle
            }

                .arcontactus-widget .messanger span i, .arcontactus-widget .messanger span svg {
                    width: 24px;
                    height: 24px;
                    vertical-align: middle;
                    text-align: center;
                    display: block;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -12px;
                    margin-left: -12px
                }

                .arcontactus-widget .messanger span i {
                    font-size: 24px;
                    line-height: 24px
                }

            .arcontactus-widget .messanger p {
                margin: 0;
                font-family: Arial,sans-serif;
                font-size: 14px;
                color: rgba(0,0,0,.87)
            }

    @-webkit-keyframes arcontactus-pulse {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1
        }

        50% {
            opacity: .5
        }

        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0
        }
    }

    @media (max-width:468px) {
        .arcontactus-widget.opened.arcontactus-message, .arcontactus-widget.opened.left.arcontactus-message {
            width: auto;
            right: 20px;
            left: 20px
        }
    }

    @keyframes arcontactus-updown {
        0%, 100%, 43% {
            transform: translate(0,0)
        }

        25%, 35% {
            transform: translate(0,-10px)
        }
    }

    @-webkit-keyframes arcontactus-updown {
        0%, 100%, 43% {
            transform: translate(0 0)
        }

        25%, 35% {
            transform: translate(-10px 0)
        }
    }

    @keyframes arcontactus-pulse {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1
        }

        50% {
            opacity: .5
        }

        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0
        }
    }

    @-webkit-keyframes arcontactus-show-stat {
        0%, 100%, 20%, 85% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        21%, 84% {
            -webkit-transform: scale(0);
            transform: scale(0)
        }
    }

    @keyframes arcontactus-show-stat {
        0%, 100%, 20%, 85% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }

        21%, 84% {
            -webkit-transform: scale(0);
            transform: scale(0)
        }
    }

    @-webkit-keyframes arcontactus-show-icons {
        0%, 100%, 20%, 85% {
            -webkit-transform: scale(0);
            transform: scale(0)
        }

        21%, 84% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }
    }

    @keyframes arcontactus-show-icons {
        0%, 100%, 20%, 85% {
            -webkit-transform: scale(0);
            transform: scale(0)
        }

        21%, 84% {
            -webkit-transform: scale(1);
            transform: scale(1)
        }
    }

    .content-area .article-title {
        font-weight: 600;
    }

    .col-content .box-news img {
        margin-bottom: 1rem;
    }

    .col-content .box-news h3 {
        font-weight: 600;
        margin-bottom: 0.75rem;
        text-align: justify;
        text-transform: initial;
        font-size: 18px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        overflow: hidden;
        -webkit-box-orient: vertical;
        min-height: 70px;
    }

    .col-content .box-news .news-date {
        padding-bottom: 8px;
    }

    .col-content .box-news p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        overflow: hidden;
        -webkit-box-orient: vertical;
    }

    .video-listright .list-group-item {
        padding-top: 0;
    }

    /* Mobile */
    @media (max-width: 480px) {
        .navbar-custom .container-fluid {
            padding: 0 15px;
        }

        .navbar-custom .navbar-brand {
            max-width: 280px;
        }

        .testimonial-slider .testimonial-card {
            padding-right: 0;
        }

        .testimonial-slider .testimonial-content {
            left: 55px;
            right: 0px;
            height: 130px;
        }

        .testimonial-slider .circle {
            width: 146px;
            height: 146px;
        }

        .testimonial-slider .testimonial-content .mota {
            padding-bottom: 0;
            line-height: 25px;
        }

        .testimonial-slider .quote-icon {
            right: 16px;
        }

        .card-body h2 {
            -webkit-line-clamp: 3;
        }

        .ftoplink .footertop-padding-left .navbar-brand {
            width: 100%;
        }
    }

    /* Tablet */
    @media (min-width: 481px) and (max-width: 768px) {
        .navbar-custom .container-fluid {
            padding: 0 15px;
        }

        .navbar-custom .navbar-brand {
            max-width: 280px;
        }

        .testimonial-slider .testimonial-card {
            padding-right: 0;
        }

        .testimonial-slider .testimonial-content {
            left: 55px;
            right: 0px;
            height: 130px;
        }

        .testimonial-slider .circle {
            width: 146px;
            height: 146px;
        }

        .testimonial-slider .testimonial-content .mota {
            padding-bottom: 0;
            line-height: 25px;
        }

        .testimonial-slider .quote-icon {
            right: 16px;
        }

        .card-body h2 {
            -webkit-line-clamp: 3;
        }

        .ftoplink .footertop-padding-left .navbar-brand {
            width: 100%;
        }
    }

    /* Desktop */
    @media (min-width: 769px) and (max-width: 1200px) {
        .header-style1 {
            position: relative;
            height: auto;
        }
            .header-style1 .menu_area .navbar {
                position: relative;
            }
                .header-style1 .menu_area .navbar .navbar-header-custom {
                   /* position: absolute;
                    top: 0;*/
                }
                .header-style1 .menu_area .navbar ul.navbar-nav {
                    width: 100%;
                    display: block;
                    padding-top: 50px;
                    padding-left: 0;
                    padding-right: 0;
                    margin-left: 0 !important;
                    margin-right: 0;
                }
                .header-style1 .menu_area .navbar .header-right {
                    position: absolute;
                    top: 10px;
                    float: right;
                    text-align: right;
                    right: 0;
                }
        .layer-vr360 img {
            position: absolute;
            bottom:0;
            width: 550px;
        }

    }

/* Large Screens */
@media (min-width: 1201px) {
}
.divA4-content {
    height: 100vh;
    max-height: 100vh;
}
.login-user .btn-login i {
    margin-bottom: 4px;
}
.section {
    overflow: hidden;
}

button.news-type {
    margin-left: 10px;
    border-radius: 25px;
    background: #1c75bd;
    padding: 0px 10px;
    color: #fff;
    border: none;
}
.header-nav-icon {
    display: none;
}
.bpHeightFull {
    height: 100%;
}
.bpFabImage {
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-width: 100%;
    display: block;
    vertical-align: middle;
    box-sizing: border-box;
    margin: 0;
    padding: 8px;
    border: 0 solid;
}
div#AIchatbot {
    z-index: 9998;
    position: fixed;
    bottom: .5rem !important;
    left: 3.3rem !important;
    height: 4rem;
    width: 4rem;
    border-radius: 9999px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.footer-huit {
    background: #0066b3;
    color: #fff;
    font-size: 14px;
}

    .footer-huit a {
        color: #fff;
        text-decoration: none
    }

        .footer-huit a:hover {
            text-decoration: underline
        }

.social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #fff;
    font-size: 18px
}

.yt {
    background: #ff0000
}

.ig {
    background: #f77737
}

.zalo {
    background: #0068ff
}

.fb {
    background: #1877f2
}

.tt {
    background: #000
}
.footer1 {
    border-right: 1px solid #fff;
    padding-right: 30px;
}
.footer2 {
    padding-left: 30px;
}
    .footer2 h6, .footer3 h6 {
        color: white;
    }
    .footer2 p {
        color: #fff;
        padding-left: 7px;
    }

.footer1 .icon-social {
    align-items: center;
    justify-content: space-around;
}
.social-icon.zalo {
    width: 40px;
    height: 40px;
    background: url('/images/icon/zalo-icon.png') no-repeat center;
    background-size: contain;
}

footer {
    width: 100%;
    float: inline-end;
}
.layer-about .title {
    color: #EF4136;
    text-align: left;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 32px;
    padding-bottom: 10px;
}
.intro-text h2 {
    color: #0066b3;
    font-size: 25px;
    font-weight: 700;
    padding-bottom: 0px;
}
.partner-slider-wrapper {
    position: relative;
}
    /* Arrow base */
    .partner-slider-wrapper .slick-prev,
    .partner-slider-wrapper .slick-next {
        width: 40px;
        height: 40px;
        background: #99CCFF;
        border-radius: 50%;
        z-index: 999;
        pointer-events: auto;
        transition: background 0.3s ease;
    }

    /* Position */
    .partner-slider-wrapper .slick-prev {
        left: -50px;
    }

    .partner-slider-wrapper .slick-next {
        right: -50px;
    }

        /* Hover */
        .partner-slider-wrapper .slick-prev:hover,
        .partner-slider-wrapper .slick-next:hover {
            background: #0066cc;
        }

        /* REMOVE default slick icon */
        .partner-slider-wrapper .slick-prev::before,
        .partner-slider-wrapper .slick-next::before {
            font-size: 0;
            opacity: 1;
        }

        /* Font Awesome arrows */
        .partner-slider-wrapper .slick-prev::after,
        .partner-slider-wrapper .slick-next::after {
            font-weight: 900;
            font-size: 16px;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    .partner-slider-wrapper .slick-prev::after {
        content: "\f053"; /* chevron-left */
    }

    .partner-slider-wrapper .slick-next::after {
        content: "\f054"; /* chevron-right */
    }



/*  * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    } */


a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

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

/* .container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 25px 15px 0 15px;
        position: relative;
    } */
/* --- 4. HERO SECTION --- */
.hero {
    width: 100%;
}

.hero-img {
    width: 100%;
    height: 675px;
    display: block;
}

.short-courses {
    overflow: visible !important;
}


.hero1 {
    width: 100%;
}

.hero1-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}


/* --- 5. FLOATING ICON BAR --- */
.icon-bar-section {
    position: relative;
    margin-top: 20px;
    z-index: 10;
    margin-bottom: 50px;
}

.icon-bar {
    background: white;
    border-radius: 50px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-around;
    padding: 30px 10px;
}

.icon-item {
    text-align: center;
    flex: 1;
    border-right: 1px solid #eee;
    cursor: pointer;
    transition: 0.3s;
}

    .icon-item:last-child {
        border-right: none;
    }

    .icon-item:hover {
        transform: translateY(-3px);
    }

    .icon-item i {
        font-size: 28px;
        color: #0099ff;
        margin-bottom: 8px;
        display: block;
    }

.icon-img {
    width: auto;
    height: auto;
    max-height: 55px;
    text-align: center;
    margin-bottom: 10px;
}

.icon-item a {
    display: flex;
    flex-direction: column;
    align-items: center; /* căn giữa ngang */
    justify-content: center; /* căn giữa dọc */
    text-decoration: none;
    height: 100%;
}

.icon-item span {
    font-size: 18px;
    font-weight: 500;
    color: var(--deep-blue);
}

/* --- 6. VIRTUAL TOUR --- */
.virtual-tour {
    background-image: url('/Images/Layout.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; /* 👈 QUAN TRỌNG */
    min-height: auto; /* 👈 để ảnh có chiều cao */
    padding: 160px 0;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    /* Lớp phủ màu xanh trong suốt */
    .virtual-tour::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(4, 80, 158, 0.75); /* 👈 quan trọng */
        z-index: 1;
    }

    /* Nội dung luôn nằm trên overlay */
    .virtual-tour > * {
        position: relative;
        z-index: 2;
    }

.v-content {
    position: relative;
    z-index: 2;
}

.v-title {
    font-size: 32px;
    color: azure;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.v-desc {
    font-size: 18px;
    padding-top: 32px;
    /* max-width: 800px; */
    margin: 0 auto 25px;
    color: #fff;
}

.btn-tour {
    background: white;
    color: #04509E;
    padding: 5px 30px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 18px;
    display: inline-block;
}

/* --- 7. INTRO SECTION --- */
.intro-section {
    padding: 60px 0;
}

.section-header {
    text-align: left;
    margin-bottom: 30px;
}

/* .sec-title-main {
                color: #EF4136;
                font-size: 32px;
                font-weight: 700;
                text-transform: uppercase;
            } */

.sec-sub-title {
    color: var(--primary-blue);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.intro-grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 20px;
    align-items: center;
}

.intro-text p {
    text-align: justify;
    margin-bottom: 20px;
    font-size: 18px;
    color: #000;
}

.intro-text a {
    color: #fff;
    text-decoration: none;
}

.btn-blue {
    background: var(--primary-blue);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: bold;
}

.intro-img-box {
    position: relative;
}

    .intro-img-box img {
        width: 100%;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
        border-radius: 20px;
        position: relative;
        z-index: 2;
        background: #fff; /* Thêm nền trắng cho ảnh png trong suốt */
        border: 1px solid #eee;
    }


.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    cursor: pointer;
}

    .play-btn i {
        color: #EF4136;
        font-size: 18px;
        margin-left: 3px;
    }

/* --- 8. WHY CHOOSE US --- */
.why-us {
    position: relative;
    padding: 60px 0;
    text-align: center;
    background-position: center bottom;
    overflow: hidden;
}

    .why-us::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url('/Images/LayoutChungToi.png') center bottom / cover no-repeat;
        opacity: 0.2; /* Độ mờ ảnh */
        z-index: 0;
    }

    /* Nội dung nằm trên ảnh */
    .why-us > * {
        position: relative;
        z-index: 1;
    }

.center-title {
    /* text-align: center; */
    margin-bottom: 10px;
    color: #EF4136;
    font-size: 32px;
    font-weight: bold;
    /* text-transform: uppercase; */
}

.center-desc {
    /* max-width: 800px; */
    margin: 0 auto 40px;
    font-size: 18px;
    color: #000;
}

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

.card-home {
    background: white;
    border-radius: 20px;
    padding: 20px;
    overflow: hidden;
    box-shadow: 7px 4px 8px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%; /* QUAN TRỌNG */
}

.card-img {
    height: 180px;
    width: 100%;
    object-fit: cover;
    /* object-fit: contain; /* Đổi thành contain để logo không bị cắt */ */
    /* padding: 20px; */
    background: #fff;
    border-bottom: 1px solid #eee;
}

.card-body {
    padding: 20px 0px;
    display: flex;
    flex-direction: column;
    flex: 1; /* chiếm phần còn lại */
}

    .card-body .read-more {
        margin-top: auto; /* ĐẨY XUỐNG DƯỚI */
        align-self: flex-start; /* GÓC TRÁI */
        font-size: 14px;
        color: #000;
        text-decoration: none;
    }

.card-h {
    color: #0066b3;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 24px;
}

.card-p {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* số dòng */
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.6em * 3); /* fallback */
}

.read-more {
    font-size: 12px;
    /* color: #EF4136; */
}

/* --- 9. TRAINING PROGRAMS --- */
.training-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.training-left-img {
    width: 40%;
    position: relative;
}

    .training-left-img img {
        width: 100%;
        border-radius: 10px;
        /* background: #f9f9f9; */
    }

.training-right {
    width: 55%;
}

.program-box {
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.p-icon {
    font-size: 24px;
    color: var(--primary-blue);
    margin-right: 20px;
    width: 30px;
}

.p-content h4 {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--deep-blue);
    /* text-transform: uppercase; */
    font-size: 15px;
    margin-bottom: 8px;
    font-weight: 800;
}

.p-content ul {
    padding-left: 15px;
}

.p-content li {
    font-size: 18px;
    color: #555;
    margin-bottom: 5px;
    list-style-type: disc;
}

/* --- 10. ADMISSION BANNER --- */
.admission-bar {
    background: var(--primary-blue);
    padding: 25px 0;
    color: white;
}

.adm-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
}

.adm-head {
    display: flex;
    align-items: center;
}

.adm-num {
    font-size: 50px;
    font-weight: 900;
    color: var(--yellow);
    line-height: 1;
    margin-right: 10px;
}

.adm-text-head {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
    /* text-transform: uppercase; */
}

    .adm-text-head small {
        font-size: 10px;
        background: var(--yellow);
        color: var(--deep-blue);
        padding: 2px 5px;
        border-radius: 3px;
    }

.adm-step {
    display: flex;
    align-items: center;
}

.step-n {
    background: white;
    color: var(--primary-blue);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 16px;
    border-radius: 5px;
    margin-right: 10px;
    flex-shrink: 0;
}

.step-d {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
}

/* --- 11. SHORT COURSE & NEWS --- */
.short-courses {
    padding: 40px 0;
}

.sc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 50px 0px;
}

.sc-item {
    border: 1px solid #eee;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.sc-title {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--primary-blue);
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 10px;
}

.sc-desc {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
    height: 40px;
    overflow: hidden;
}

.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

    .news-header h3 {
        color: var(--primary-blue);
        font-size: 32px;
        border-left: 4px solid var(--primary-blue);
        padding-left: 10px;
    }



/* --- 12. PARTNERS & FOOTER --- */
.cta-box {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    text-align: center;
    padding: 40px 0;
    position: relative;
    overflow: visible !important;
}

.btn-register {
    background: linear-gradient(to right, #2980b9, #0099ff);
    color: white;
    padding: 12px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 800;
    /* text-transform: uppercase; */
    box-shadow: 0 5px 15px rgba(0,153,255,0.4);
}

.partner-slider-wrapper {
    position: relative;
    align-items: center;
    overflow: visible !important;
}

    .partner-slider-wrapper .slick-prev,
    .partner-slider-wrapper .slick-next {
        pointer-events: auto;
    }

    .partner-slider-wrapper .slick-slide a {
        pointer-events: auto;
    }

/*    .partner-logos {
            width: 100%;
        }

            .partner-logos .slick-track {
                display: flex !important;
            }

            .partner-logos .slick-slide {
                height: auto;
                display: flex !important;
                justify-content: center;
                align-items: center;
            } */

.partner-item {
    width: 25%; /* QUAN TRỌNG */
    padding: 10px;
    box-sizing: border-box;
}

    .partner-item img {
        width: 100%;
        height: 80px;
        object-fit: contain;
    }

.f-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 30px;
}

.f-logo {
    background: white;
    padding: 5px;
    display: inline-block;
    border-radius: 5px;
    margin-bottom: 20px;
}

.f-title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 20px;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
}

.f-list li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.f-list i {
    margin-right: 10px;
    width: 15px;
}

.copyright {
    background: #002244;
    text-align: center;
    padding: 15px 0;
    font-size: 12px;
    color: #aaa;
}
/* --- CSS CHO 3 PHẦN CẦN SỬA --- */

/* 1. TRAINING PROGRAMS (Chương trình đào tạo) */
.training {
    padding: 30px 0 0 0;
    background: #fff;
}

.training-container {
    display: flex;
    align-items: flex-start; /* Căn hàng trên cùng */
    justify-content: space-between;
    gap: 30px;
}

.training-left-img {
    width: 36%;
}

    .training-left-img img {
        width: 100%;
        height: 725px;
        border-radius: 15px; /* Bo góc ảnh */
        /* box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
        /* Xử lý hiển thị logo thay cho ảnh người */
        object-fit: contain;
        /* background: #f8f9fa; */
    }

.training-right {
    width: 58%;
}

.center-title {
    color: #EF4136; /* Màu cam tiêu đề */
    font-size: 32px;
    font-weight: 700;
    /* text-transform: uppercase; */
    /* text-align: center; /* Căn giữa tiêu đề */ */ margin-bottom: 30px;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.program-box {
    display: flex;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    transition: 0.3s;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

/*   .program-box:hover {
                    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
                    border-color: #0066cc;
                } */

.p-icon {
    font-size: 24px;
    color: #0056b3; /* Xanh đậm icon */
    margin-right: 20px;
    margin-top: 5px; /* Căn chỉnh icon với dòng đầu */
    width: 30px;
    text-align: center;
}

.p-content h4 {
    color: #1a72c9; /* Xanh đen tiêu đề */
    font-size: 26px;
    font-weight: 700;
    /* text-transform: uppercase; */
    margin-bottom: 8px;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.p-content ul {
    margin: 0;
    padding-left: 20px;
}

.p-content li {
    font-size: 20px;
    color: #000;
    font-weight: 600;
    margin-bottom: 5px;
    list-style-type: disc; /* Dấu chấm tròn đầu dòng */
}

/* 2. ADMISSION BAR (Phương thức xét tuyển) */
.admission-bar {
    background-color: #0066cc; /* Nền xanh dương chuẩn */
    padding: 25px 0;
    color: #fff;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.adm-grid {
    display: grid;
    /* Chia cột: Cột đầu to hơn cho tiêu đề, 4 cột sau đều nhau */
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 15px;
    align-items: center;
}

.adm-head {
    display: flex;
    align-items: center;
}

.adm-num {
    font-size: 60px; /* Số 04 to */
    font-weight: 900;
    color: #ffcc00; /* Màu vàng */
    line-height: 1;
    margin-right: 15px;
}

.adm-text-head {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    /* text-transform: uppercase; */
}

    .adm-text-head small {
        display: inline-block;
        background: #ffcc00;
        color: #003366;
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 4px;
        margin-top: 3px;
        font-weight: 700;
    }

.adm-step {
    display: flex;
    align-items: center;
}

.step-n {
    width: 35px;
    height: 35px;
    background: #fff;
    color: #0066cc;
    font-weight: 900;
    font-size: 18px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    flex-shrink: 0; /* Không bị co lại */
}

.step-d {
    font-size: 12px;
    line-height: 1.3;
    font-weight: 400;
}

/* 3. SHORT COURSES & NEWS (Tin tức & Khóa học) */
.short-courses {
    /* padding: 60px 0; */
    background: #fff;
}
/* Grid cho khóa học ngắn hạn */
.sc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Cột */
    gap: 30px;
    margin-bottom: 50px;
}

.sc-item {
    border: 1px solid #eee;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    background: #fff;
}

.sc-title {
    color: #0056b3;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.sc-desc {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

.btn-blue {
    display: inline-block;
    background: #0056b3;
    color: #fff;
    padding: 8px 25px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    transition: 0.3s;
}

    .btn-blue:hover {
        background: #004494;
        color: #fff;
    }

/* Header tin tức */
.news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

    .news-header h3 {
        font-size: 32px;
        color: #0056b3;
        font-weight: 700;
        /* Đường gạch đứng màu xanh bên trái */
/*        border-left: 5px solid #0056b3;*/
        padding-left: 15px;
        margin: 0;
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    }

/* video */
.video-wrapper {
    position: relative;
    padding-bottom: 350px;
    height: 0;
    overflow: hidden;
    border-radius: 24px;
    background: #000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* Grid tin tức (3 cột) */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.news-item img {
    width: 100%;
    height: 180px;
    /* Xử lý logo trong khung ảnh tin tức */
    /* object-fit: contain; */
    background: #f4f4f4;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #eee;
}

.news-item h5 {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
    min-height: 42px; /* Đảm bảo các dòng đều nhau */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

    .news-item h5:hover {
        color: #0056b3;
        cursor: pointer;
    }

.news-date {
    font-size: 12px;
    color: #888;
}

/* CTA & Partners */
.cta-box {
    text-align: center;
    /* border-top: 1px solid #eee; /* Đường kẻ ngăn cách */ */ padding-top: 40px;
}

.btn-register {
    background: linear-gradient(90deg, #0056b3, #0099ff);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 28px;
    font-weight: 700;
    /* text-transform: uppercase; */
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
    display: inline-block;
}

    .btn-register:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 86, 179, 0.4);
    }

.short-courses-wrap {
    width: 100%;
    background: #f4f4f4;
}

.news-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.news-item {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease;
}

    .news-item:hover {
        transform: translateY(-4px);
    }

    .news-item img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

.news-content {
    padding: 16px;
}

    .news-content h3 {
        font-size: 16px;
        color: #0b4fa3;
        line-height: 1.5;
        margin: 0 0 12px;
    }

.news-detail {
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

    .news-detail:hover {
        text-decoration: underline;
    }

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

.card-new {
    background: white;
    /* border-radius: 10px; */
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 100%; /* QUAN TRỌNG */
}

.card-img-new {
    width: 100%;
    height: 300px; /* BẮT BUỘC */
    object-fit: cover; /* Cắt ảnh cho vừa khung */
    background: #fff;
    border-bottom: 1px solid #eee;
    display: block;
}

.card-body-new {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-h-new {
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 24px;
}

.card-p-new {
    font-size: 20px;
    color: #04509E;
    font-weight: 600;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* GIỚI HẠN 2 DÒNG */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-height: 4.2em; /* 2 dòng */
}

.read-more-new {
    font-size: 12px;
    /* color: #EF4136; */
}

/* đúng class đang dùng trong HTML */
.card-body-new .read-more {
    margin-top: auto; /* LUÔN ĐẨY XUỐNG DƯỚI */
    align-self: flex-start;
    font-size: 14px;
    color: #555;
    text-decoration: none;
}

.program-box ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

    .program-box ul li {
        position: relative;
        padding-left: 16px;
    }

        .program-box ul li::marker {
            content: "";
        }

        .program-box ul li::before {
            content: "-";
            position: absolute;
            left: 0;
            font-weight: bold;
        }

/* =========================================
                   RESPONSIVE: TABLET (768px - 1199px)
                   ========================================= */
@@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        width: 100%;
        padding: 20px;
    }
    /* Hero Image - Chiều cao tự động để không bị méo */
    .hero-img {
        height: auto;
        min-height: 400px;
        object-fit: cover;
    }
    /* Intro Section - Giữ 2 cột nhưng ảnh nhỏ hơn */
    .intro-grid {
        gap: 30px;
    }

    .intro-img-box img {
        border-radius: 20px 0 20px 0;
    }

    .icon-item span {
        font-size: 14px;
        font-weight: 500;
        color: var(--deep-blue);
    }

    .v-title {
        font-size: 26px;
        line-height: 36px;
        color: azure;
        font-weight: 700;
        /* text-transform: uppercase; */
        margin-bottom: 10px;
    }

    .v-desc {
        font-size: 18px;
        padding: 32px 0;
        /* max-width: 800px; */
        margin: 0 auto 25px;
        color: #fff;
    }

    .sec-title-main {
        color: #EF4136;
        font-size: 26px;
        font-weight: 700;
        /* text-transform: uppercase; */
    }

    .intro-grid {
        display: grid;
        grid-template-columns: 1fr; /* Chỉ 1 cột duy nhất */
        gap: 40px; /* Khoảng cách giữa phần chữ và phần ảnh */
    }
    /* Why Us & News - Chuyển từ 3 cột sang 2 cột */
    .card-grid,
    .news-grid,
    .card-grid-new {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    /* Training Section - Xếp chồng lên nhau (Ảnh trên, chữ dưới) */
    .training-container {
        flex-direction: column;
    }

    .training-left-img,
    .training-right {
        width: 100%;
        padding: 15px;
    }


    .training-left-img {
        display: flex; /* Sử dụng Flexbox */
        justify-content: center; /* Để căn giữa ảnh */
        margin-bottom: 20px; /* Cách phần chữ bên dưới ra một chút */
    }

        .training-left-img img {
            height: auto;
            object-fit: cover;
            /* --- CODE THU NHỎ --- */
            width: 70%; /* Ảnh chỉ chiếm 70% chiều rộng màn hình */
            max-width: 400px; /* Giới hạn không cho ảnh to quá 400px */
        }
    /* Admission Bar - Chuyển thành 2 hàng */
    .adm-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cột */
    }

    .adm-head {
        grid-column: span 2; /* Tiêu đề chiếm hết chiều ngang */
        justify-content: center;
        margin-bottom: 20px;
    }
    /* Short Courses */
    .sc-grid {
        gap: 20px;
    }

    .center-title {
        color: #EF4136;
        font-size: 26px;
        font-weight: 700;
        /* text-transform: uppercase; */
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .p-content h4 {
        color: #1a72c9;
        font-size: 22px;
        font-weight: 700;
        /* text-transform: uppercase; */
        margin-bottom: 8px;
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .p-content li {
        font-size: 18px;
        color: #000;
        font-weight: 600;
        margin-bottom: 5px;
        list-style-type: disc;
    }
}

/* =========================================
                   RESPONSIVE: MOBILE (Dưới 767px)
                   ========================================= */
@@media (max-width: 767px) {
    .container {
        width: 100%;
        padding: 15px;
    }
    /* --- Global Font Size --- */
    .center-title,
    .sec-title-main {
        font-size: 24px; /* Giảm kích thước tiêu đề */
        text-align: center;
    }

    .sec-sub-title {
        font-size: 18px;
        text-align: center;
    }

    .section-header {
        text-align: center;
    }
    /* --- Hero Section --- */
    .hero-img {
        height: auto;
        min-height: 250px;
        object-fit: cover;
    }

    .hero1-img {
        height: auto;
        object-fit: contain;
    }
    /* --- Icon Bar --- */
    .icon-bar {
        flex-wrap: wrap; /* Cho phép rớt dòng */
        border-radius: 15px;
    }

    .icon-item {
        flex: 0 0 50%; /* Mỗi item chiếm 50% (2 cột) */
        border-right: none;
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }

        .icon-item:last-child {
            flex: 0 0 100%; /* Icon cuối nằm giữa */
            border-bottom: none;
        }
    /* --- Intro Section --- */
    .intro-grid {
        grid-template-columns: 1fr; /* 1 cột */
        gap: 30px;
    }

    .intro-text p {
        text-align: left;
    }

    .intro-img-box {
        order: -1; /* Đưa ảnh lên trên chữ nếu muốn, hoặc bỏ dòng này */
    }
    /* --- Why Us & News Cards --- */
    .card-grid,
    .news-grid,
    .card-grid-new,
    .sc-grid {
        grid-template-columns: 1fr; /* 1 cột duy nhất */
        gap: 20px;
    }

    .card-img,
    .card-img-new,
    .news-item img {
        height: auto; /* Chiều cao tự động */
    }
    /* --- Training Programs --- */
    .training {
        padding: 30px 0;
    }

    .training-container {
        flex-direction: column;
    }

    .training-left-img,
    .training-right {
        width: 100%;
        padding: 15px;
    }

    .training-left-img {
        margin-bottom: 20px;
    }

        .training-left-img img {
            height: auto; /* Reset chiều cao cứng */
            max-height: 300px;
        }

    .program-box {
        flex-direction: column; /* Icon trên, chữ dưới */
        align-items: center;
        text-align: center;
    }

    .p-icon {
        margin-right: 0;
        margin-bottom: 10px;
        font-size: 30px;
    }

    .p-content ul {
        text-align: left; /* List vẫn căn trái cho dễ đọc */
        padding-left: 20px;
    }
    /* --- Admission Bar (Thanh xét tuyển) --- */
    .admission-bar {
        padding: 20px 0;
    }

    .adm-grid {
        grid-template-columns: 1fr; /* Xếp chồng dọc 1 cột */
        gap: 15px;
    }

    .adm-head {
        flex-direction: column;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.3);
        padding-bottom: 15px;
        margin-bottom: 10px;
    }

    .adm-num {
        margin-right: 0;
        margin-bottom: 5px;
        font-size: 50px;
    }

    .adm-step {
        background: rgba(255,255,255,0.1); /* Thêm nền nhẹ cho dễ nhìn */
        padding: 10px;
        border-radius: 8px;
    }
    /* --- Short Courses & News Header --- */
    .news-header {
        /* flex-direction: column; */
        align-items: flex-start;
    }

        .news-header a {
            margin-top: 10px;
            align-self: flex-end;
        }
    /* --- Partners --- */
    .partner-logos {
        gap: 20px;
    }

        .partner-logos img {
            height: 60px; /* Logo nhỏ lại */
        }
    /* --- Footer & CTA --- */
    .cta-box h4 {
        font-size: 20px !important; /* Ghi đè size chữ */
    }

    .btn-register {
        width: 100%;
        font-size: 18px; /* Giảm size chữ nút */
        padding: 12px;
    }

    .v-title {
        font-size: 22px;
        color: azure;
        line-height: 28px;
        font-weight: 700;
        /* text-transform: uppercase; */
        margin-bottom: 10px;
    }

    .v-desc {
        font-size: 18px;
        padding-top: 32px;
        /* max-width: 800px; */
        margin: 0 auto 25px;
        color: #fff;
    }

    .intro-text p {
        text-align: justify;
        margin-bottom: 20px;
        font-size: 16px;
        color: #000;
    }

    .p-content h4 {
        color: #1a72c9;
        font-size: 22px;
        font-weight: 700;
        /* text-transform: uppercase; */
        margin-bottom: 8px;
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .p-content li {
        font-size: 16px;
        color: #000;
        font-weight: 600;
        margin-bottom: 5px;
        list-style-type: disc;
    }
}
.block-video {
    align-items: center;
    display: flex;
    justify-content: end;
}
.text-dk {
    color: #EF4136;
    margin: 30px auto;
    font-weight: 700;
    font-size: 28px;
    text-align: center;
}