#main-footer .container {
background-color: var(--primary-color);padding-top: 40px;
}
#main-footer, #main-footer a {
color: white
}
#main-footer #copyright  {
margin:0; padding-top: 5px; text-align: center;
}
#main-footer .container .col-4 {
text-align: justify;
}
#main-footer .container .col-4 iframe {
width: 100%; max-height: 350px
}
.social-icons {
padding:0; margin-left: 0
}
.social-icons img {
height: 16px 
}
.social-icons li {
list-style: none; margin-right: 5px; display: inline-block; vertical-align: top
}
.social-icons li a {
display: flex;border-radius: 5px; align-items: center; text-decoration: none;  justify-content: center;
width: 40px; height: 26px
}
.social-icons li a i {
display: table; margin: auto; color: white
}
.social-fanpage a{
background-color: #2196F3
}
.social-ins a{
background: #4cff6a
}
.social-tw a{
background-color: #5cb7ff
}
.social-ytb a{
background-color: #DD4B39
}
.social-zalo a {
background-color: #00a9d3
}
.social-call a {
background-color: #e8944c
}
.social-mess a {
background-color: #2196f3
}
.social-tiktok a {
background-color: black;
}
#site-footer .back-top {
display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;
position: fixed;width: 40px;height: 40px;
right: 2vw;bottom: 10px;border-radius: 100%; background-color: #1F71B5;border:outset #1F71B5;
color:white; opacity: .3
}
#site-footer .thong-bao {
display: flex;
align-items: center;
}
#site-footer .thong-bao a.bct_img img {
height: 70px; 
margin-top: 15px;
}
#site-footer .thong-bao a img {
height: 35px;
margin-left: 15px;
}
#site-footer .back-top i {
display: table;clear: both;margin:0 auto;font-weight: bold;font-size:16pt;margin-top:2px;
line-height: 18px; color:white;
}
#site-footer .back-top span {
display: table;width:30px;height:30px;margin:0 auto;font-size:13px;color:white;
}
#site-footer .back-top:hover {
text-decoration: none;opacity: 1; transition: .8s
}
#mes-icon, #zalo-icon {
position: fixed; bottom: 60px; right: 2vw; width: 45px; height: auto; z-index: 99;
-webkit-animation: mes 2s linear infinite;
animation: mes 2s linear infinite;
}
#zalo-icon {
right: 2vw;
bottom: 139px;
}
#mes-icon:after, #zalo-icon:after {
content:'';display:block; position: absolute;width: 0;height: 0;border-radius: 100%;z-index: -1;
border:solid 8px #2196f394;padding:40%;-webkit-box-sizing: content-box;box-sizing: content-box; left: 50%;top:50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-animation: mespad 4s linear infinite;
animation: mespad 4s linear infinite
}
@-webkit-keyframes mes {
0% { -webkit-transform: rotateZ(0); transform: rotateZ(0); }
5% { -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg); }
10% { -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); }
15% { -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg); }
20% { -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); }
25% { -webkit-transform: rotateZ(0); transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); transform: rotateZ(0); }
}
@keyframes mes {
0% { -webkit-transform: rotateZ(0); transform: rotateZ(0); }
5% { -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg); }
10% { -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); }
15% { -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg); }
20% { -webkit-transform: rotateZ(-20deg); transform: rotateZ(-20deg); }
25% { -webkit-transform: rotateZ(0); transform: rotateZ(0); }
100% { -webkit-transform: rotateZ(0); transform: rotateZ(0); }
}
@-webkit-keyframes mespad {
0% { padding:35%; opacity: 1;border-width: 8px }
20% { padding:50%; opacity: 1 }
40% { padding:65%; }
60% { padding:80%;opacity: .4; border-width: 0px }
100% { padding:80%;opacity: .4;border-width: 0px }
}
@keyframes mespad {
0% { padding:35%; opacity: 1;border-width: 8px }
20% { padding:50%; opacity: 1 }
40% { padding:65%; }
60% { padding:80%;opacity: .4; border-width: 0px }
100% { padding:80%;opacity: .4;border-width: 0px }
}
ul#menu-menu-footer {
display: flex;
list-style: none;
flex-wrap: wrap;
max-width: 100% ;
padding-inline-start: 0px;
margin-block-start: 0em;
margin-block-end: 0em;
justify-content: center;
}
ul#menu-menu-footer li a {
margin-right: 15px;
font-size: 14px;
font-weight: bold;
color: white;
}
ul#menu-menu-footer li:after {
content: '|';
}
ul#menu-menu-footer li:last-child:after {
content: '';
}
ul#menu-menu-footer li {
margin-left: 5px ;
} #site-footer .more_phone {
padding: 0; margin:0; list-style: none;
}
#site-footer .more_phone i {
font-size: 1.1em; margin-right: .3em;
}
#site-footer .col_info {
margin-right: 0;
}
.hotline-phone-ring-wrap {
position: fixed;
bottom: 20px;
left: 0;
z-index: 998;
}
.hotline-phone-ring {
position: relative;
visibility: visible;
background-color: transparent;
width: 95px;
height: 95px;
cursor: pointer;
z-index: 11;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: visibility 0.5s;
-o-transition: visibility 0.5s;
transition: visibility 0.5s;
left: 0;
bottom: 0;
display: block;
}
.hotline-phone-ring-circle {
width: 85px;
height: 85px;
top: 10px;
left: 10px;
position: absolute;
background-color: transparent;
border-radius: 100%;
border: 2px solid #e60808;
-webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0.5;
}
.hotline-phone-ring-circle-fill {
width: 55px;
height: 55px;
top: 25px;
left: 25px;
position: absolute;
background-color: rgba(230, 8, 8, 0.7);
border-radius: 100%;
border: 2px solid transparent;
-webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.hotline-phone-ring-img-circle {
background-color: #e60808;
width: 33px;
height: 33px;
top: 37px;
left: 37px;
position: absolute;
background-size: 20px;
border-radius: 100%;
border: 2px solid transparent;
-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.hotline-phone-ring-img-circle .pps-btn-img {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.hotline-phone-ring-img-circle .pps-btn-img img {
width: 20px;
height: 20px;
}
.hotline-bar {
position: absolute;
background: rgba(230, 8, 8, 0.75);
height: 40px;
width: 190px;
line-height: 40px;
border-radius: 3px;
padding: 0 10px;
background-size: 100%;
cursor: pointer;
-o-transition: all 0.8s;
transition: all 0.8s;
-webkit-transition: all 0.8s;
z-index: 9;
-webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.1);
border-radius: 50px !important;
right: 33px;
bottom: 37px;
}
.hotline-bar > a {
color: #fff;
text-decoration: none;
font-size: 15px;
font-weight: bold;
text-indent: 15px;
display: block;
letter-spacing: 1px;
line-height: 40px;
}
.hotline-bar > a:hover,
.hotline-bar > a:active {
color: #fff;
}
@-webkit-keyframes phonering-alo-circle-anim {
0% {
-webkit-transform: rotate(0) scale(0.5) skew(1deg);
transform: rotate(0) scale(0.5) skew(1deg);
opacity: 0.1;
}
30% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.5;
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
opacity: 0.1;
}
}
@keyframes phonering-alo-circle-anim {
0% {
-webkit-transform: rotate(0) scale(0.5) skew(1deg);
transform: rotate(0) scale(0.5) skew(1deg);
opacity: 0.1;
}
30% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.5;
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
opacity: 0.1;
}
}
@-webkit-keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
opacity: 0.6;
}
100% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
}
@keyframes phonering-alo-circle-fill-anim {
0% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
opacity: 0.6;
}
100% {
-webkit-transform: rotate(0) scale(0.7) skew(1deg);
transform: rotate(0) scale(0.7) skew(1deg);
opacity: 0.6;
}
}
@-webkit-keyframes phonering-alo-circle-img-anim {
0% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
}
10% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
transform: rotate(-25deg) scale(1) skew(1deg);
}
20% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
transform: rotate(25deg) scale(1) skew(1deg);
}
30% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
transform: rotate(-25deg) scale(1) skew(1deg);
}
40% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
transform: rotate(25deg) scale(1) skew(1deg);
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
}
}
@keyframes phonering-alo-circle-img-anim {
0% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
}
10% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
transform: rotate(-25deg) scale(1) skew(1deg);
}
20% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
transform: rotate(25deg) scale(1) skew(1deg);
}
30% {
-webkit-transform: rotate(-25deg) scale(1) skew(1deg);
transform: rotate(-25deg) scale(1) skew(1deg);
}
40% {
-webkit-transform: rotate(25deg) scale(1) skew(1deg);
transform: rotate(25deg) scale(1) skew(1deg);
}
50% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
}
100% {
-webkit-transform: rotate(0) scale(1) skew(1deg);
transform: rotate(0) scale(1) skew(1deg);
}
}