/* CSS Document */

:root {--color1:#cf8800; --color2: #0c6fad}
#lienhe-bottom {width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: var(--color2); position: fixed; bottom: 0; z-index: 999;}
#lienhe-bottom::before {content: ""; position: absolute; width: 100%; height: 100%;  opacity: 0.2; z-index: -1}
#lienhe-bottom a {text-decoration: none; color: #fff; width: 100%; text-align: center; font-family: inherit; display: block; text-transform: uppercase; font-weight: 700;}
#lienhe-bottom a:hover, #lienhe-bottom a:focus {text-decoration: none; outline: none}
#lienhe-bottom div {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center;width: 42px; height: 42px; background: var(--color1); margin: -21px auto 0; border-radius: 100%; position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center}
#lienhe-bottom div::after, #lienhe-bottom div::before {content: ""; position: absolute;top:50%;left:50%;transform: translate(-50%,-50%)}
#lienhe-bottom div::after {width: calc(100% + 8px); height: calc(100% + 8px); background: rgba(255,255,255,1); border-radius: 100%; z-index: -1}
#lienhe-bottom div::before {width: calc(100% + 18px); height: calc(100% + 18px); border-radius: 100%; z-index: -1; background: rgba(255,255,255,0.3); border: solid 1px rgba(255,255,255,0.4); -webkit-box-shadow: 2px 2px 15px 0 rgba(0,0,0,0.2); box-shadow: 2px 2px 15px 0 rgba(0,0,0,0.2); -webkit-backdrop-filter: saturate(150%) blur(5px); backdrop-filter: saturate(150%) blur(5px);}
#lienhe-bottom p {margin: 0; padding: 16px 0 5px;color:white;}
#lienhe-bottom svg {fill: #fff; width: 50%;}


#lienhe-bottom a:nth-child(2) div {-webkit-animation-duration: .6s;animation-duration: .6s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-direction: reverse; -webkit-animation-name: xin-chao; animation-name: xin-chao; animation-iteration-count: infinite;}

@keyframes xin-chao {
	0% {background: var(--color1)}
	50% {background: var(--color2)}
	100% {background: var(--color1)}
}
@-webkit-keyframes xin-chao {
	0% {background: var(--color1)}
	50% {background: var(--color2)}
	100% {background: var(--color1)}
}

#bot-icon-goidien {-webkit-animation-duration: 2s;animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-direction: reverse; -webkit-animation-name: nhin-cc; animation-name: nhin-cc; animation-iteration-count: infinite;}

@keyframes nhin-cc {0% {-webkit-transform: rotate(0); transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0);}
10% {-webkit-transform: rotate(-25deg); transform: rotate(-25deg); -ms-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg);}
20% {-webkit-transform: rotate(25deg); transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -o-transform: rotate(25deg);}
30% {-webkit-transform: rotate(-25deg); transform: rotate(-25deg); -ms-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg);}
40% {-webkit-transform: rotate(25deg); transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -o-transform: rotate(25deg);}
50% {-webkit-transform: rotate(0); transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0);}
100% {-webkit-transform: rotate(0); transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0);}}

@-webkit-keyframes nhin-cc {0% {-webkit-transform: rotate(0); transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0);}
10% {-webkit-transform: rotate(-25deg); transform: rotate(-25deg); -ms-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg);}
20% {-webkit-transform: rotate(25deg); transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -o-transform: rotate(25deg);}
30% {-webkit-transform: rotate(-25deg); transform: rotate(-25deg); -ms-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -o-transform: rotate(-25deg);}
40% {-webkit-transform: rotate(25deg); transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -o-transform: rotate(25deg);}
50% {-webkit-transform: rotate(0); transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0);}
100% {-webkit-transform: rotate(0); transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0);}}