@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root{
    color-scheme: light;
	--primary-color: #009142;
	--orange-color: #F97316;
	--orange-color2: #c75c11;
}
body,html{
	font-family: "Nunito", sans-serif;
	font-size: 1rem;
    background: #fff;
}

p{
    margin-bottom: 0
}
a, a:link, a:active, a:visited{
    color: var(--primary-color)
}
h1, h2, h3, h4, h5{
    color: var(--primary-color);
	font-family: "Nunito", sans-serif;
	font-size: 1.5rem
}

h1{
	font-size: 2rem
}
h2{
	font-size: 1.9rem
}
h3{
	font-size: 1.35rem
}
h4{
	font-size: 1.25rem
}
h5{
	font-size: 1.2rem
}
#particles-js{
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(../images/bg-home.jpg) no-repeat;
    background-size: cover;
    z-index: 0; /* Để nó nằm dưới các nội dung khác */
}
#footer-js{
position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.bg-home{
    
    min-height: 100vh;
padding-bottom: 2%;
    display: flex;
    align-items: center;
    z-index: 0;
    justify-content: center;
    position: relative
}

.bg-home .logo img{
    height: 90px;
    width: auto;

}
.bg-home .mobile-menu-toggle-btn{
    color: var(--orange-color);
    font-size: 2rem;
        display: inline-block;
}
.services-home{
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 70%;
    margin: 0 auto;
}
.services-home .info{
    display: flex;
    padding: 0;
    margin: 0;
    justify-content: center;
    color: #222;

    gap: 20px;

}
.services-home .info li, .services-home .info li a{
    display: flex;
    gap: 10px;
    align-items: center
}
.services-home .info li a{
    color: #222;
}
.bg-home .logo{
    margin: 0 auto;
    margin-bottom: 15px;
    display: inline-block
}
.services-home-box{
    display: flex;
    gap: 60px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;

    margin: 0 auto;
    flex-wrap: wrap;
}
.service-home{
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 calc(33.333% - 40px);
    text-align: center
}
.service-home h2{
        font-size: 1.2rem;
}
.service-home .img{
    border-radius: 50%;
    overflow: hidden;
    height: 200px;
    width: 200px;
    display: block;
    margin: 0 auto;
    border: 10px solid #fff;
    box-shadow: 0px 10px 17px 7px rgba(0,0,0,0.1);
    position: relative;
    transition: .25s;
}
.service-home:hover .img{
    box-shadow: 0px 10px 17px 17px rgba(0,0,0,0.15);
}
.service-home .img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
     transition: .25s;
}
.service-home:hover img{
    transition: .25s;
    transform: scale(1.1)
}
.zalo-qr{
    display: inline-block
}
.zalo-qr img{
    width: 120px;
    height: auto;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 auto;
    border: 1px solid #f5f5f5
}
.ringing-alo-ph-circle {
  width: 160px;
  height: 160px;
  top: 20px;
  left: 20px;
  position: absolute;
  background-color: transparent;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid rgba(30, 30, 30, 0.4);
  opacity: 0.1;
  -webkit-animation: ringing-alo-circle-anim 1.2s infinite ease-in-out;
  -moz-animation: ringing-alo-circle-anim 1.2s infinite ease-in-out;
  -ms-animation: ringing-alo-circle-anim 1.2s infinite ease-in-out;
  -o-animation: ringing-alo-circle-anim 1.2s infinite ease-in-out;
  animation: ringing-alo-circle-anim 1.2s infinite ease-in-out;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.ringing-alo-phone {
  background-color: transparent;
  width: 200px;
  height: 200px;
  cursor: pointer;
  z-index: 200000 !important;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -webkit-transition: visibility 0.5s;
  -moz-transition: visibility 0.5s;
  -o-transition: visibility 0.5s;
  transition: visibility 0.5s;
  right: 150px;
  top: 30px;
}

.ringing-alo-phone.ringing-alo-green .ringing-alo-ph-circle-fill {
  background-color: rgba(0, 175, 242, 0.5);
  opacity: 0.75 !important;
}

.ringing-alo-ph-circle-fill {
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  position: absolute;
  background-color: #000;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: 0.1;
  -webkit-animation: ringing-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -moz-animation: ringing-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -ms-animation: ringing-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -o-animation: ringing-alo-circle-fill-anim 2.3s infinite ease-in-out;
  animation: ringing-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.ringing-alo-ph-img-circle {
  width: 60px;
  height: 60px;
  top: 70px;
  left: 70px;
  position: absolute;
  background: rgba(30, 30, 30, 0.1)
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==")
    no-repeat center center;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: 0.7;
  -webkit-animation: ringing-alo-circle-img-anim 1s infinite ease-in-out;
  -moz-animation: ringing-alo-circle-img-anim 1s infinite ease-in-out;
  -ms-animation: ringing-alo-circle-img-anim 1s infinite ease-in-out;
  -o-animation: ringing-alo-circle-img-anim 1s infinite ease-in-out;
  animation: ringing-alo-circle-img-anim 1s infinite ease-in-out;
}

.ringing-alo-phone.ringing-alo-green .ringing-alo-ph-img-circle {
  background-color: #00aff2;
}

.ringing-alo-phone.ringing-alo-green .ringing-alo-ph-circle {
  border-color: #00aff2;
  opacity: 0.5;
}

.ringing-alo-phone.ringing-alo-green.ringing-alo-hover .ringing-alo-ph-circle,
.ringing-alo-phone.ringing-alo-green:hover .ringing-alo-ph-circle {
  border-color: #75eb50;
  opacity: 0.5;
}

.ringing-alo-phone.ringing-alo-green.ringing-alo-hover .ringing-alo-ph-circle-fill,
.ringing-alo-phone.ringing-alo-green:hover .ringing-alo-ph-circle-fill {
  background-color: rgba(117, 235, 80, 0.5);
  opacity: 0.75 !important;
}

.ringing-alo-phone.ringing-alo-green.ringing-alo-hover .ringing-alo-ph-img-circle,
.ringing-alo-phone.ringing-alo-green:hover .ringing-alo-ph-img-circle {
  background-color: #75eb50;
}

@-moz-keyframes ringing-alo-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: 0.1;
  }
  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.1;
  }
}

@-webkit-keyframes ringing-alo-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: 0.1;
  }
  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.1;
  }
}

@-o-keyframes ringing-alo-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: 0.1;
  }
  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.1;
  }
}

@keyframes ringing-alo-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: 0.1;
  }
  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.1;
  }
}

@-moz-keyframes ringing-alo-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.2;
  }
  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@-webkit-keyframes ringing-alo-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.2;
  }
  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@-o-keyframes ringing-alo-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.2;
  }
  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@keyframes ringing-alo-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.2;
  }
  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

@-moz-keyframes ringing-alo-circle-img-anim {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}

@-webkit-keyframes ringing-alo-circle-img-anim {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}

@-o-keyframes ringing-alo-circle-img-anim {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}

@keyframes ringing-alo-circle-img-anim {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }
  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}
.ring-box{
    position: fixed;
    right: 0;
    bottom: 0;
}







.hidden-md{
    display: none !important
}


.header{
	    position: sticky;
    top: 0;
    z-index: 999;
	background: #fff;
    backdrop-filter: blur(4px);
    padding: 10px 0;
    box-shadow: 0 0 4px 0 rgba(179, 179, 179, 0.5);
	margin-bottom: 30px;
}
.logo{
	display: block;
}
.logo img{
	width: 100%;
	height: auto
}
.header .row{
	display: flex;
	align-items: center;
}
.header-top .row{
	display: flex;
	align-items: center;
	color: #fff
}

.header-top .row .col-md-6{
	display: flex;
	align-items: center;
	justify-content: flex-end
}
.header-top ul{
	display: flex;
	gap: 20px;
	padding: 0;
	margin-bottom: 0
}
.header-top a{
	color: #fff;
}
.header-top .fa{
	margin-right: 5px;
}
.row {
    margin-left: -15px;
    margin-right: -15px;
}
[class*=" col-"], [class^=col-] {
    padding-left: 15px;
    padding-right: 15px;
}
.header-top{
	padding: 10px 0;
    background: #5c6573;
}
.main-menu {
    padding: 0;
    margin: 0;
	    display: flex;
    justify-content: space-between;
}

.main-menu li {
    display: inline-block;
	position: relative;
}

.main-menu a {
    color: #333;
}

.main-menu>li>a {
    padding: 10px 5px;

    display: block;
    font-weight: 700;
    text-transform: uppercase;
    margin: 1px 0;
    color: var(--primary-color);
}

.main-menu>li>a:hover, .main-menu>li>a.current {
    color: var(--orange-color);
}

.main-menu .sub-menu {
    z-index: 999;
    position: absolute;
    width: 250px;
    max-width: none;
    padding: 0;
    border: 0;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 2px 10px -3px rgb(0 0 0 / 30%);
    display: block;
    visibility: hidden;
    opacity: 0;
    text-align: left;
    transform: translate(0, 10px);
    transition: opacity .2s ease-in, transform .2s ease-in, visibility .2s ease-in;
    border-radius: 10px;

}
.main-menu .sub-menu>li:first-child>a{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}
.main-menu .sub-menu>li:last-child>a{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}
.main-menu>li:hover .sub-menu {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity .2s ease-in, transform .2s ease-in, visibility .2s ease-in;
    visibility: visible;
}

.main-menu .sub-menu li {
    display: block;
    margin: 0;

}

.main-menu .sub-menu li a {
    display: block;
    background: #fff;
    color: #333;
    padding: 10px;
}

.main-menu .sub-menu li a:hover {
    background: var(--primary-color);
    font-weight: 400;
    text-decoration: none;
    color: #fff;
}
.main-menu .sub-menu2 {
    z-index: 999;
    position: absolute;
    width: 250px;
    max-width: none;
    padding: 0;
    border: 0;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 2px 10px -3px rgb(0 0 0 / 30%);
    display: block;
    visibility: hidden;
    opacity: 0;
    text-align: left;
    transform: translate(0, 10px);
    transition: opacity .2s ease-in, transform .2s ease-in, visibility .2s ease-in;
	left: 100%;
	top: 0;
    border-radius: 10px;
}

.main-menu .sub-menu li:hover .sub-menu2 {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity .2s ease-in, transform .2s ease-in, visibility .2s ease-in;
    visibility: visible;
}
.main-menu .sub-menu li a{
	padding: 10px 25px 10px 10px;
	position: relative
}
.main-menu .sub-menu li a .fa{
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%)
}
.main-menu .sub-menu2>li:first-child>a{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}
.main-menu .sub-menu2>li:last-child>a{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}
.block-box .block-head h2{
    font-size: 2rem;
	text-align: center;
	color: var(--primary-color);
	text-transform: uppercase;
	margin-bottom: 10px;
}
.block-box .block-head{
	margin-bottom: 30px;
    text-align: center
}
.block-box .subtitle{
	text-align: center;
    width: 70%;
    margin: 0 auto;
	font-size: 1.2rem;
	font-style: italic
}
.img-square, .img-4-3, .img-16-9{
	position: relative;
    display: block;
    overflow: hidden;

}
.img-square{
	padding-top: 100%;
}
.img-4-3{
	padding-top: 75%;
}
.img-16-9{
	padding-top: 52.65%;
}
.img-square img, .img-4-3 img, .img-16-9 img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover
}
.ctdt-box{
	border-radius: 20px;
    display: block;
    transition: .25s;
    background: #f5f5f5;
	overflow: hidden;
    margin-bottom: 30px;
        box-shadow: 0 0 23px #0a0a0a14;
    -moz-box-shadow: 0 0 23px #0a0a0a14;
    -webkit-box-shadow: 0 0 23px #0a0a0a14;
        border: 1px solid #e0e0e0;
}

.ctdt-box:hover .img-16-9 img{
    transition: .25s;
    transform: scale(1.1)
}
.ctdt-box .img-16-9 img{
    transition: .25s;
}
.ctdt-box:hover h3{
    color: #fff !important;
}
.ctdt-box .content{
	padding: 15px;
	
	text-align: center
}
.ctdt-box .des{
	-webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    color: #000;
    margin-bottom: 10px;
}
.ctdt-box:hover{
    color: #fff !important;
    transition: .25s;
    background: var(--primary-color)
}
.ctdt-box:hover .des{
    color: #fff !important;
    transition: .25s;

}
.btn{
    font-size: 1rem;
    height: 37px;
    
    border-radius: 8px;
    padding: 6px 18px;
    color: #fff !important;

    transition: .25s;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    gap: 10px;
}
.btn-green{
    background: var(--primary-color);
    border-color: var(--primary-color);
   
}
.btn-green:hover{
    background: var(--orange-color);
    border-color: var(--orange-color);
   
}
.btn-orange{
    background: var(--orange-color);
    border-color: var(--orange-color);
}
.btn-orange:hover{
    transition: .25s;
    background: var(--orange-color2);
    border-color: var(--orange-color2);
}
.ctdt-box .btn{
    display: flex;
    border-radius: 0;
    padding: 10px 20px;
}
.box-gt .row{
    display: flex;
    align-items: center;
    justify-content: center
}
.box-gt .btn{
    margin-top: 20px;
}
.box-gt h2{
    margin-bottom: 10px;
    color: var(--primary-color)
}
.box-gt .des{
    text-align: justify
}
.border-radius-10{
    border-radius: 10px;
    overflow: hidden
}
.block-box{
    margin-bottom: 30px;
}
.vsc-box{
    text-align: center;
}
.vsc-box h3{
    font-size: 1.3rem
}
.vsc-box .img-s{
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin-bottom: 10px;
    padding: 7px;
    overflow: hidden;
    position: relative;
        -webkit-box-shadow: 0 0 23px #0a0a0a33;
    display: inline-block
}
.vsc-box .img-square{
    border-radius: 50%;
}
.vsc-box .des{
    height: 92px;
}
.bg-white{
    position: relative;
    background: #fff;
    padding: 100px 0 30px;
}
.bg-gray{
    position: relative;
    background: #f3f3f3;
    padding: 100px 0 30px;
}
.bg-green{
    position: relative;
    background: #8BC34A;
    padding: 100px 0 30px;
}
.bg-green .block-head h2{
    color: #333
}
.bg-blue{
    position: relative;
    background: #5D6D7E;
    padding: 100px 0 30px;
}
.bg-blue2{
    position: relative;
    background: #005993;
    padding: 100px 0 30px;
    color: #fff;
}
.bg-blue2 .block-box .block-head h2{

    color: #fff;
}
.bg-yellow{
    position: relative;
    background: #F7DC6F;
    padding: 100px 0 30px;
}
.bg-pink{
    position: relative;
    background: #F1948A;
    padding: 100px 0 30px;
}
.b-green{
    background: #8BC34A;
}
.b-blue{
    background: #5D6D7E;
}
.b-yellow{
    background: #F7DC6F;
}
.b-pink{
    background: #F1948A;
}
.img-hd{

    cursor: pointer;
    position: relative;
}
.bg-pink .block-box .block-head h2{
    color: #E91E63
}
.img-hd:after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(180deg,rgba(255, 255, 255, 0) 65%, rgba(0, 0, 0, .5) 100%);
}
.img-hd img{
    transition: .25s
}
.img-hd:hover img{
    transform: scale(1.1);
    transition: .25s
}
.mrg-t-20{
    margin-top: 20px;
}
.readmore{
    color: var(--orange-color) !important;
    font-size: 1.3rem
}
.readmore:hover{
    color: var(--primary-color) !important;
}
.readmore .fa{
    margin-left: 5px;
}
.copyright {
    color: #dcdcdc;
    text-align: center
}
.copyright-box {
    position: relative;
    z-index: 1;
    padding: 20px 0;
    background: #181818
}
footer{
    padding: 60px 0 0;
    background: #222;
    color: #d2cece;
    position: relative
}
footer .zalo-qr img{
    width: 100%;
    height: auto;
}
.news-large .des{
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.news-large .img-16-9{
    border-radius: 8px;
}
.news-large h3{
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    margin: 10px 0;
    font-size: 1.5rem;
    line-height: 1.3
}
.news-list{
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.news-list .img{
    flex: 0 0 25%;
    overflow: hidden;
    
}
.news-list .img-4-3{
    border-radius: 6px;
}
.news-list .des{
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.news-list h3{
    font-size: 1rem;
     -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.3;
    margin-bottom: 5px;
}
.logo-footer{
    display: block;
    margin-bottom: 20px;
}
.logo-footer img{
    height: 70px;
    width: auto;
}
.footer-head h2{
    font-family: "Roboto Condensed", sans-serif;
    color: #fff;
    font-size: 1.5rem
}
.footer-head{
    margin-bottom: 15px;
}
footer ul, .menu-footer{
    list-style: square;
    padding-left: 15px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}
.social{
    display: flex;

    padding: 0;
    list-style: none;
    flex-direction: row;
    margin-top: 20px;
    justify-content: space-between;
}
.social img{
    height: 25px;
    width: auto
}
.menu-footer a{
    color: #d2cece;
}
.menu-footer a:hover{
    color: var(--primary-color);
}
.img-avatar{
    position: relative;
    overflow: hidden;

    padding-top: 120%;
}
.img-avatar img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .25s;
    object-fit: cover
}
.nv-box{
    overflow: hidden;
    border-radius: 10px;

        box-shadow: 0 0 23px #0a0a0a14;
    -moz-box-shadow: 0 0 23px #0a0a0a14;
    -webkit-box-shadow: 0 0 23px #0a0a0a14;
    border: 1px solid #ddd;
    background-color: #fff;
    text-align: center;
    position: relative
}
.nv-box .des{

    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 123;
    border-radius: 0 10px 0 0;
    overflow: hidden;
    background: #000;

}
.nv-box .des p{
    text-transform: uppercase;
    padding: 5px 20px;
    font-size: 0.85rem;
    color: #fff;
    background: var(--primary-color);
}
.nv-box:hover img{
    transition: .25s;
    transform: scale(1.1)
}
.nv-box .content{
    padding: 10px 15px;
    position: relative;
}
.nv-box h3{
    color: var(--primary-color);
    font-size: 1.2rem
}
.owl-nv .owl-nav{
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 30px));
    left: 0;
    right: 0;
}
.owl-nv.owl-carousel .owl-nav button.owl-prev, .owl-nv.owl-carousel .owl-nav button.owl-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #fff;
    background: var(--primary-color);
    opacity: 0.7;
    padding: 30px 12px !important;
    transition: .25s
}
.owl-nv.owl-carousel .owl-nav button.owl-prev:hover, .owl-nv.owl-carousel .owl-nav button.owl-next:hover{
    opacity: 1;
    transition: .25s
}
.owl-nv .owl-prev{
    left: 0
}
.owl-nv .owl-next{
    right: 0
}
.owl-nv  .owl-dots{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}
.owl-nv.owl-carousel button.owl-dot{
    background: #555;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block
}
.owl-nv.owl-carousel button.owl-dot.active{
    background: var(--primary-color)
}
.owl-nv.owl-carousel button.owl-dot:hover{
    background: var(--orange-color)
}
.gmap{
    display: flex;
    position: relative;
    z-index: 1;
    margin-top: 30px;
}
.gmap iframe{
    width: 100%;
    height: 300px;
}
.bg-reg{
    background: url(../images/bg-reg-math.jpg) no-repeat;
    background-size: cover;
    background-position: 0 bottom;
    padding: 100px 0;
    position: relative
}
.emini-talk .bg-reg{
    background: url(../images/bg-reg.jpg) no-repeat;
      background-size: cover;
    background-position: 0 bottom;
}
.nnll .bg-reg{
    background: url(../images/bg-r1eg.jpg) no-repeat;
      background-size: cover;
    background-position: 0 bottom;
}
.bg-reg .divider{
    z-index: 3;
}

.box-reg{
    position: relative;
    z-index: 1;
    color: #fff;
}
.box-reg h2{
    color: #fff;
    font-size: 2rem;
    text-transform: uppercase
}
.box-reg .des{
    color: #fff;

}
.form-control{
    font-size: 1rem;

    height: 37px;
    border-radius: 8px;
    box-shadow: none
}
.box-reg{
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 70%;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .3);
    backdrop-filter: blur(5px);

    border: 1px solid #878686;
}
.box-reg .content, .box-reg .form-reg{
    flex: 0 0 50%;
}
.box-reg .btn{
    margin: 0 auto;
    width: fit-content;
}
.box-reg .content{
    padding: 30px;
}
.form-reg{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #dddddd91;
    padding: 30px;

}
.divider {
    position: absolute; 
    top: -1px;
    width: 100%;
    overflow: hidden;
    line-height: 0;  
}

.divider svg {
    position: relative;
    display: block;
    width: calc(100% + 50px); 
    height: 80px; 
}


.divider.bottom {
    top: auto;
    bottom: 0;
    transform: rotate(180deg);
}

.mobile-menu-bg {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: none;
}

.mobile-menu-wrap {
	width: 280px;
	position: fixed;
	top: 0;
	left: 0;
	width: 280px;
	height: 100%;
	background: var(--primary-color);
	z-index: 9999;
	visibility: hidden;
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
    padding: 10px;
}

.mobile-menu-wrap.animate {
	transition: all 0.25s ease;
}

.mobile-menu-wrap .logo {
	text-align: center;
	padding: 10px;
}

.mobile-menu-wrap .logo img {
	height: 40px;
	width: auto;
}

.mobile-menu-wrap .menu {

	height: calc(100vh - 170px);
	overflow: auto;
}

.mobile-menu-wrap .mfooter {
	background-color: #fff;
	height: 30px;
	padding: 10px;
	text-align: center;
	color: #777;
}

.mobile-menu-toggle-btn {
	cursor: pointer;
	background: none;
    padding: 5px 10px;
	text-align: center;
	font-size: 30px;
	display: none;
	color: #fff;
	z-index: 999;

}

.mobile-menu-toggle-btn:hover {
	background: none;
}



	.mobile-menu-toggle-btn {
		display: inline-block;
		vertical-align: middle;
	}

	.open-menu .mobile-menu-bg {
		display: block;
	}

	.open-menu .mobile-menu-wrap {
		visibility: visible;
		transform: translateX(0px);
		-webkit-transform: translateX(0px);
		-moz-transform: translateX(0px);
		-ms-transform: translateX(0px);
		-o-transform: translateX(0px);
	}

.danh-sach {
	border: 2px solid #000;
	padding: 10px;
	background: #f3f3f3;
	margin-bottom: 20px;
	border-radius: 6px;

}

.danh-sach .fa {
	margin-right: 10px;
}

.head-danh-sach {
	background: none;
	border: none;
	width: 100%;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
	font-size: 16px;
	padding: 5px 0;
}

.js-toc {
	margin-bottom: 10px;
	max-height: 400px;
	overflow-y: auto;
}

ol.toc-list {
	padding-left: 20px;
	list-style-type: decimal;
	margin-bottom: 0;
	margin-bottom: 5px;
}

ol.toc-list:last-child {
	margin-bottom: 0
}

ol.toc-list>li:last-child {
	margin-bottom: 0
}

ol.toc-list a {
	width: 100%;
	background: linear-gradient(to right, #ddd 50%, #f3f3f3 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all.25s ease;
	padding: 3px;
	display: inline-block;
}

ol.toc-list .is-active-link {
	background-position: left bottom;
}

ol.toc-list>li>a {
	font-weight: 700;
	color: #000
}

ol.toc-list>li>ol.toc-list>li>a {
	font-weight: 400
}

.is-position-fixed {
	position: fixed !important;
	top: 50px;
	z-index: 999
}

.is-position-fixed .js-toc {
	height: auto !important;
	width: 200px !important;
	visibility: visible !important;
	transition: .25s;
	visibility: hidden;
}

.picaso {
	transition: .25s;
}

.transition--300 {
	transition: all 300ms ease-in-out;
}

.btn-danh-sach-close {
	border: none;
	background: none;
	position: absolute;
	top: 13px;
	right: 0;
	width: 40px;
	padding: 0;
	display: none;
}

.btn-danh-sach-show {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	border: 2px solid #000;
	padding: 10px;
	background: #f3f3f3;
	line-height: 1;
	border-radius: 7px;
	z-index: 9;
	display: none;
	opacity: .7;
	transform: .25s
}

.btn-danh-sach-show:hover {
	opacity: 1;
	transform: .25s
}

.is-position-fixed .btn-danh-sach-close,
.is-position-fixed .btn-danh-sach-show {
	display: block;
}
.news-detail{
    line-height: 1.8
}
.news-detail h1{
    font-size: 2rem
}
.news-detail .hometext{
	margin-bottom: 20px;
}
.news-bodyhtml h1, .news-bodyhtml h2, .news-bodyhtml h3, .news-bodyhtml h4, .news-bodyhtml h5{
	color: var(--primary-color)
}
.news-bodyhtml h2{
    font-size: 1.4rem
}
.news-bodyhtml h3{
    font-size: 1.3rem
}.news-bodyhtml h4{
    font-size: 1.2rem
}.news-bodyhtml h5{
    font-size: 1.1rem
}
.news-bodyhtml ul{
    list-style: square
}
.bodytext p{
    margin-bottom: 10px !important;
}
.news-bodyhtml h1:before, .news-bodyhtml h2:before, .news-bodyhtml h3:before, .news-bodyhtml h4:before, .news-bodyhtml h5:before, .news-bodyhtml h6:before {
    display: block;
    content: " ";
    height: 15px;
    margin-top: -15px;
    visibility: hidden;
}
.news-bodyhtml b, .news-bodyhtml strong{
    color: #F44336
}
.dividerr{
    margin: 30px 0;
    width: 100%;
    height: 1px;
    background: #ddd;
    display: inline-block
}
.news-grid{
    margin-bottom: 30px;
}
.news-grid .img-4-3{
    border-radius: 8px;
    overflow: hidden
}
.news-grid h3{
        font-size: 1.2rem;
     -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.3;
    margin-bottom: 5px;
    margin-top: 5px;
}
.news-grid .des {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.photo-grid{
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 0 23px #0a0a0a14;
    -moz-box-shadow: 0 0 23px #0a0a0a14;
    -webkit-box-shadow: 0 0 23px #0a0a0a14;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    text-align: center;
}
.photo-grid .content {
    padding: 10px 15px;
}
.photo-grid h3{
        -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.photo-grid .des{
        -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
.photo-grid .img-4-3{
    border-radius: 0
}
.album_description{
    padding: 20px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    margin-bottom: 30px;
    border-radius: 10px;
}
.mrg-lr-0{
    margin-left: 0;
    margin-right: 0;
}
.pdd-lr-0{
    padding-left: 0;
    padding-right: 0
}
.slider-box{
    margin-top: -30px;
    margin-bottom: 0
}
.p-t-30{
    padding-top: 30px;
}
.headerSearch {
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    z-index: 999;
    box-shadow: 0 0 23px #0a0a0a14;
    -moz-box-shadow: 0 0 23px #0a0a0a14;
    -webkit-box-shadow: 0 0 23px #0a0a0a14;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px); 
    transition: all 0.3s ease-in-out;
}

/* Khi có class "active" thì hiện ra */
.headerSearch.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.headerSearch .input-group {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 5px;
    overflow: hidden; /* Để bo góc cái input-group */
}
.btn-search-toggle{
    font-size: 1.5rem;
    background: none;
    border: none;
    height: 37px;
}
.btn-search-toggle:hover{
    color: var(--orange-color)
}
.header-mobile{
    display: none !important
}
.header-desk{
    display: block !important;
}
.dc-mn-mobile{
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #fff
}
.dc-mn-mobile a{
    color: #fff;
}
.dc-mn-mobile li , .dc-mn-mobile a{
    display: flex;
    align-items: center;
    gap: 10px;
}
.content-box {
    display: inline-block
}

/* Phần này mặc định ẩn đi */
.extra-content {
    display: none; 
    padding: 30px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #ffffff7d;
    border-radius: 20px;
    line-height: 1.7;
    width: 70%;
    margin: 0 auto;
    text-align: justify;
    margin-bottom: 10px;
    box-shadow: 0px 10px 17px 7px rgba(0, 0, 0, 0.1);

}
.read-more-btn{
    color: var(--primary-color);
    background: none;
    border: none;
    display: inline-block;
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 10px;
    font-size: 1.2rem;
        margin: 0 auto;
    animation: nhapNhay 1s infinite ease-in-out;
}
.arrow-wrapper {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--orange-color)
}


.arrow-wrapper.rotate {
    transform: rotate(180deg);
}


.my-arrow {
    display: block;
    animation: nhapNhay 1s infinite ease-in-out;
}

@keyframes nhapNhay {
    0% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(4px); opacity: 0.5; }
    100% { transform: translateY(0); opacity: 1; }
}
.extra-content ul{
    list-style: square
}
.extra-content p{
    margin-bottom: 7px;
}
.extra-content p:last-child{
    margin-bottom: 0
}
.emini-talk .vsc-box .img-square{
    border-radius: 0;

    background: none
}
.emini-talk .vsc-box .img-square img{
    object-fit: contain
}
.emini-talk .vsc-box .img-s{
    border-radius: 0;
    height: 80px;
    width: 80px;
    box-shadow: none;
        padding: 0;
    background: none
}
.cn-box{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
    margin-top: 70px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 0 23px #0a0a0a14;
    -moz-box-shadow: 0 0 23px #0a0a0a14;
    -webkit-box-shadow: 0 0 23px #0a0a0a14;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #444;
}
.cn-box h3{
    font-size: 1rem;
    color: #333;
}
.cn-box .img-avatar{
    border-radius: 50%;
    flex: 0 0 120px;
        margin: 0 auto;
    margin-top: -90px;
    padding-top: 0;
    height: 120px;
    width: 120px;
    border: 3px solid #ddd;
    position: relative
}
.cn-box .img-avatar img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cn-box .des{
    font-style: italic;
    position: relative;
    padding-left: 40px;
    margin-bottom: 5px;
}
.cn-box .des:before{
    content: '';
    height: 30px;
    width: 30px;
    display: inline-block;
    background: url(../images/quote.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
}
.rotate-180{
    transform: rotate(180deg);
}
#group-2-home{
    display: none
}
.back-service-home{
    background: none;
    border: none;
    color: #E91E63;
    font-size: 1rem;
    position: absolute;
    top: 0;
    left: 100%;
    white-space: nowrap;
}
.block-right{
        padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
}
#gallery .img-hd{
        border: 1px solid #fff;
}
.loading-ajax{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0000006b;
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    transition: .25s;
    opacity: 0
}
.loading-ajax h2{
    color: #FFEB3B
}
.loading-ajax.active{
    display: flex;
    transition: .25s;
    opacity: 1;
}
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--orange-color);
}