:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #D190BB;
    --bs-secondary: #D190BB;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #957DAE;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-font-sans-serif: "Merriweather",  serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",        "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;

    /* Font variables */
    --primary-font: "Merriweather",  serif;
    --secondary-font: "Merriweather",  serif;
    --heading-font-weight: 700;
    --body-font-weight: 400;
}

/* Optimized font loading */
body {
    font-family: var(--primary-font);
     /* Ensures text remains visible during font loading */
    font-size: 14px;
}
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}
.mainSwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #f3f3f3;
    position: relative;
    height: 700px;
    max-height: 100vh;
}
.mainSwiper .swiper-slide .swiper-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}
.mainSwiper .content {
    position: absolute;
    z-index: 100;
    padding: 17px;
    width: 100%;
}
.mainSwiper .content h2,
.mainSwiper .content div,
.mainSwiper .content a {
    transform: translateY(20px);
    transition: all 0.6s ease-in-out;
    transition-delay: 0.8s;
    opacity: 0;
}
.mainSwiper .content h2.fade-down {
    color: #fff;
    text-transform: uppercase;
    width: 800px;
    max-width: 95%;
    font-size: 53px;
    line-height: 68px;
    margin: 0 auto;
    margin-bottom: 25px;
    transform: translateY(-30px);
    opacity: 0;
    transition:
        transform 0.8s ease,
        opacity 0.8s ease;
    font-family: "Merriweather", serif;
    letter-spacing: 2px;
}

.mainSwiper .content div.fade-up,
.mainSwiper .content div.fade-down {
    line-height: 28px;
    margin-bottom: 30px;
    transition: all 0.6s ease-in-out;
    transition-delay: 0.8s;
}
.mainSwiper .content a.fade-up {
    transition-delay: 0.6s;
}
.mainSwiper .swiper-slide-active .fade-up {
    opacity: 1;
    transform: translateY(0);
}
.mainSwiper .swiper-slide-active .swiper-slide-bg {
}
.mainSwiper .content .des {
    color: #fff;
    max-width: 100%;
    width: 800px;
    margin: 0 auto;
    margin-bottom: 40px;
    max-width: 90% !important;
}
.mainSwiper .content .des p {
    font-size: 18px;
    line-height: 38px;
}
.mainSwiper .swiper-slide:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.58;
    z-index: 1;
}
.mainSwiper .content h2,
.mainSwiper .content .des {
    animation-fill-mode: both;
    animation-name: bdFadeInDown;
}
.mainSwiper .swiper-slide-active .content h2,
.mainSwiper .swiper-slide-active .content .des,
.mainSwiper .swiper-slide-active .content a {
    animation-duration: 1.8s;
    opacity: 1;
}
.mainSwiper .content h2.fade-down.active {
    transform: translateY(0);
    opacity: 1;
}
.main-menu {
}
.logo {
    padding: 0;
}
.logo img {
    height: 70px;
}
.navbar-light .navbar-nav .nav-link {
    font-family: "Merriweather", serif;
    color: #494849 !important;
    font-weight: 600;
    padding: 15px 25px;
    font-size: 17px;
    letter-spacing: 1.5px;
}
.navbar-right {
}
.navbar-light .navbar-right .nav-link {
    font-weight: 500;
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
}
.navbar-light .navbar-right .nav-link i {color: var(--bs-primary) !important;}
.btn-main{background-color: var(--bs-dark);position: relative;z-index: 100;border-radius: 30px;padding: 8px 47px;color: #fff;font-family: "Merriweather", serif;font-size: 16px;}
.btn-main:hover{
}
.gioithieu{padding-top: 70px;padding-bottom: 70px;}
.gioithieu_title{margin-bottom: 30px;}
.gioithieu_title .sub{color: var(--bs-primary);font-weight: 500;position: relative;}
.gioithieu_title .sub:after{content:"";width: 70px;position: absolute;left: 110%;height: 1px;background-color: var(--bs-primary);top: 14px;}
.gioithieu_title .text{font-family: "Merriweather", serif;letter-spacing: 2px;font-size: 32px;margin-top: 5px;}
.gioithieu_content{line-height: 26px;margin-bottom: 40px;font-size: 14px;}
.gioithieu_img{width: 100%;display: block;margin: 0px auto;max-height: 100%;object-fit: contain;margin-bottom: 10px;border-radius: 20px 20px 0 0;}
.gioithieu_video{
    display: block;
    width: 100%;
    height: 350px;
    position: relative;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    margin-bottom: 30px;
}
.gioithieu_video:before{content:"";width: 100%;position: absolute;height: 100%;background-color: #000;opacity: 0.4;}
.gioithieu_video i{width: 55px;height: 55px;text-align: center;background-color: #ffffffe8;line-height: 55px;border-radius: 50%;color: var(--bs-pink);font-size: 21px;}
.gioithieu_video i:after{content:"";display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-color: inherit;border-radius: inherit;-webkit-animation: pulse-animation 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;animation: pulse-animation 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;z-index: -1;}
.gioithieu_video_img{width: 100%;height: 100%;object-fit: cover;}
.khoahoc{padding-top: 50px;padding-bottom: 50px;background-color: #f2f2f2;}
.khoahoc_title{margin-bottom: 30px;}
.khoahoc_title .sub{color: var(--bs-primary);font-weight: 500;position: relative;}
.khoahoc_title .sub:after{content:"";width: 70px;position: absolute;left: 110%;height: 1px;background-color: var(--bs-primary);top: 14px;}
.khoahoc_title .text{font-family: "Merriweather", serif;letter-spacing: 2px;font-size: 32px;margin-top: 5px;font-weight: 500;}
.khoahoc_item{
}
.khoahoc_img{
}
.khoahoc_img img{width: 100%;height: 280px;border-radius: 10px;object-fit: cover;}
.khoahoc_content{background-color: #fff;width: 90%;margin: 0px auto;padding: 20px;border-radius: 20px;margin-top: -30px;z-index: 10;position: relative;text-align: center;box-shadow: 1px 1px 10px 1px #9b9b9b57;}
.khoahoc_content .text{font-family: "Merriweather", serif;letter-spacing: 2px;font-size: 24px;margin-bottom: 15px;font-weight: 600;}
.khoahoc_content .text a{text-decoration: none;color: #000;}
.khoahoc_content .text a:hover{
}
.khoahoc_des{font-size: 13px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.khoahoc_des p{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.khoahoc_item .btn-main{padding: 5px 18px;font-size: 14px;display: inline-block;}
.khoahoc_item .btn-main:hover{
}
.tintuc{padding-top: 50px;padding-bottom: 50px;}
.tintuc_title{margin-bottom: 30px;}
.tintuc_title .sub{color: var(--bs-primary);font-weight: 500;position: relative;}
.tintuc_title .sub:after{content:"";width: 70px;position: absolute;left: 110%;height: 1px;background-color: var(--bs-primary);top: 14px;}
.tintuc_title .text{
    font-family: "Merriweather", serif;
    letter-spacing: 2px;
    font-size: 38px;
    margin-top: 5px;
}
.tintuc_item{border: 1px solid #ddd;border-radius: 10px;overflow: hidden;}
.tintuc_img{
}
.tintuc_img img{width: 100%;height: 300px;object-fit: cover;}
.tintuc_content{padding: 20px;}
.tintuc_content .text{font-family: "Merriweather", serif;letter-spacing: 1.8px;font-size: 18px;margin-bottom: 20px;}
.tintuc_content .text a{color: #000;text-decoration: none;font-family: "Merriweather", serif;font-weight: 600;}
.tintuc_content .text a:hover{
}
.tintuc_des{font-size: 14px;color: #555555;margin-bottom: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.tintuc_item .btn-main{font-size: 14px;padding: 7px 19px;}
.tintuc_item .btn-main:hover{
}
.contact{padding-top: 50px;padding-bottom: 50px;background-color: #f2f2f2;position: relative;}
.contact_title{margin-bottom: 30px;text-align: center;}
.contact_title .sub{color: var(--bs-primary);font-weight: 500;position: relative;padding-bottom: 6px;margin-bottom: 10px;display: inline-block;}
.contact_title .sub:after{content:"";width: 70px;position: absolute;left: 0;height: 1px;background-color: var(--bs-primary);bottom: 0;right: 0;margin: 0px auto;}
.contact_title .text{font-family: "Merriweather", serif;letter-spacing: 2px;font-size: 38px;margin-top: 5px;}
.contact_form{
}
.contact_form input{border: 1px solid var(--bs-primary);height: 43px;border-radius: 5px;padding: 5px 22px;font-size: 14px;}
.contact_form select{border: 1px solid var(--bs-primary);height: 43px;padding: 5px 22px;border-radius: 5px;font-size: 14px;}
.contact_bg{position: absolute;left: 0;top: 0;width: 45%;height: 100%;object-fit: cover;}
.contact_form textarea{height: 120px;border: 1px solid var(--bs-primary);padding: 5px 22px;border-radius: 5px;}
.giangvien{padding-top: 50px;padding-bottom: 50px;}
.giangvien_title{margin-bottom: 50px;}
.giangvien_title .text{font-family: "Merriweather", serif;letter-spacing: 2px;font-size: 38px;margin-top: 5px;text-align: center;}
.giangvien_item{position: relative;min-height: 150px;background-color: #fff;padding-bottom: 50px;}
.giangvien_img{width: 157px;height: 160px;border-radius: 50%;overflow: hidden;position: absolute;left: 8px;border: 4px solid var(--bs-primary);}
.giangvien_img img{width: 100%;height: 100%;object-fit: cover;}
.giangvien_content{
}
.giangvien_des{padding: 22px;min-height: 180px;border-radius: 14px;box-shadow: 1px 1px 10px 1px #cccc;font-size: 17px;line-height: 26px;margin-bottom: 24px;font-family: "Merriweather", serif;font-style: italic;padding-left: 185px;}
.giangvien_item .text{font-size: 19px;font-weight: 700;}
.giangvien_item .sub{font-size: 14px;font-family: "Merriweather", serif;font-style: italic;color: #373636;}
footer{background-color: #6f415f;padding-top: 50px;padding-bottom: 20px;color: #ffff;}
#button {
  display: inline-block;
  background-color: var(--bs-primary);
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  text-decoration: none;
}
#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.5em;
  line-height: 44px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}
.page-item.active .page-link{background-color: var(--bs-secondary);border: 1px solid var(--bs-secondary);}
.page-link{color: #706d6d;}
.head_page{background-size: cover;padding-top: 50px;padding-bottom: 50px;position: relative;background-position: center;}
.head_page:before{content:"";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: var(--bs-dark);opacity: 0.5;}
.head_page_content{position: relative;z-index: 1;}
.title_page{font-family: "Merriweather", serif;color: #fff;letter-spacing: 1.5px;font-weight: 600;}
.breadcrumb{
}
.breadcrumb a, .breadcrumb span{color: #fff;text-decoration: none;}
.breadcrumb-item.active{color: #fff;}
.breadcrumb-item+.breadcrumb-item::before{color: #fff;}
.news-detail{/* box-shadow: 1px 1px 10px 1px #cccccc96; */border-radius: 10px;padding: 15px;}
.blog-detail-img{width: 100%;height: auto;}
.news-detail .head{
}
.news-detail .head .tag{color: var(--bs-dark);text-decoration: none;}
.news-detail .head .tag i{
}
.news-detail .head .chiase{
}
.news-detail .head .chiase a{color: var(--bs-dark);text-decoration: none;display: inline-block;margin-left: 10px;}
.news-detail .title{font-family: "Merriweather", serif;color: #494849 !important;margin-bottom: 30px;font-size: 28px;font-weight: 500;border-bottom: 1px solid var(--bs-primary);padding-bottom: 10px;}
.blog-details{font-size: 14px;line-height: 24px;}
.blog-details img{
}
.blog-details h2, .blog-details h3{
    font-family: "Merriweather", serif;
    color: #2d2d2d !important;
    margin-bottom: 10px;
    margin-top: 30px;
    font-weight: 700;
    font-size: 22px;
}
@media (min-width: 500px) {
  .content {
    width: 43%;
  }
  #button {
    margin: 30px;
  }
}
.iframe-f{margin-bottom: 10px;}
.iframe-f iframe{height: 250px;}
.thongtinkhoahoc{background-color: #6f415e;padding: 15px;border-radius: 15px;color: #fff;margin-bottom: 30px;}
.thongtinkhoahoc table{
}
.thongtinkhoahoc table{margin-bottom: 0;}
.thongtinkhoahoc table tr td{color: #fff;font-family: "Merriweather", serif;font-size: 17px;padding-top: 10px;padding-bottom: 10px;}
@media (max-width: 575.98px) {
    .giangvien_img{
        top: 0;
        width: 120px;
        height: 120px;
        margin: 0px auto;
        left: 0;
        right: 0;
    }
    .giangvien_des{
        padding-left: 0;
        padding-top: 131px;
        text-align: center;
    }
    .contact_bg{
        display: none;
    }
    .navbar-toggler{
        background-color: var(--bs-primary);
        border: none;
        padding: 5px 10px;
        color: var(--bs-dark) !important;
    }
    .navbar-light .navbar-nav .nav-link{
        font-size: 14px;
        padding-left: 13px;
        padding-right: 13px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .mainSwiper .content h2.fade-down{
        font-size: 30px;
        line-height: 38px;
    }
    .mainSwiper .swiper-slide{
        height: 400px;
    }
    .khoahoc_content{
        padding: 20px 10px;
    }
    .khoahoc_content .text{
        font-size: 18px;
    }
    .gioithieu_video{
        width: 125px;
        height: 125px;
    }
    .tintuc_content .text{
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .tintuc_content{
        padding: 10px;
    }
    .container, .container-md, .container-sm{
        max-width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link{
        font-size: 14px;
        padding-left: 13px;
        padding-right: 13px;
    }
    .mainSwiper .content h2.fade-down{
        font-size: 42px;
    }
    .mainSwiper .swiper-slide{
        height: 400px;
    }
    .khoahoc_content{
        padding: 20px 10px;
    }
    .khoahoc_content .text{
        font-size: 18px;
    }
    .gioithieu_video{
        width: 125px;
        height: 125px;
    }
    .tintuc_content .text{
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .tintuc_content{
        padding: 10px;
    }
    .container, .container-md, .container-sm{
        max-width: 100%;
    }
}
@media (min-width: 992px) and (max-width: 1024px) {
    .navbar-light .navbar-nav .nav-link{
        font-size: 14px;
        padding-left: 13px;
        padding-right: 13px;
    }
    .mainSwiper .content h2.fade-down{
        font-size: 48px;
    }
    .mainSwiper .swiper-slide{
        height: 500px;
    }
    .khoahoc_content{
        padding: 20px 10px;
    }
    .khoahoc_content .text{
        font-size: 18px;
    }
    .gioithieu_video{
        width: 150px;
        height: 150px;
    }
    .tintuc_content .text{
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .tintuc_content{
        padding: 10px;
    }
}
@media (min-width: 1025px) and (max-width: 1199.98px) {
    .container, .container-lg, .container-md, .container-sm{
        max-width: 100%;
    }
    .navbar-light .navbar-nav .nav-link{
        
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .gioithieu_video{
    }
    .navbar-light .navbar-nav .nav-link {
        padding: 15px 18px;
        font-size: 16px;
    }
}
@media (min-width: 1400px) {
}
@keyframes bdFadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes pulse-animation {
    0% {
        transform: scale(1);
        opacity: .6;
    }
    40% {
        transform: scale(1.3);
        opacity: .6;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}