* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'roboto', sans-serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.8;
  z-index: 1111;
  background-color: black;
  width: 100%;
  height: 60px;
  transition: all 0.5s ease-in-out;
}

.menu_mobile {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 60px;
  background: linear-gradient(to right, #002c2f 40%, #023459);
  display: none;
}

.sticky {
  opacity: 1;
}

.menu_mobile .menu2 {
  display: none;
  background: linear-gradient(to right, #002c2f 40%, #023459);
}

.menu_mobile .menu2 .lii {
  border-bottom: 1px solid black;
}

.menu_mobile .menu2 a {
  display: flex;
  justify-content: center;
  height: 100%;
  color: aliceblue;
  text-decoration: none;
  font-size: 20px;
  line-height: 50px;
  padding: 0 15px;
}

.menu_mobile .container ul {
  list-style: none;
  height: 100%;
  z-index: 11;
}

.menu_mobile .logo {
  width: 80%;
  margin: 0 auto;
  height: 59px;
}

.menu_mobile .giong {
  display: flex;
}

.navbar {
  float: right;
  margin-top: 18px;
  font-size: 30px;
  color: white;
}

header .container {
  width: 80%;
  height: 60px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

header .logo {
  height: 60px;
  float: left;
}

header .logo a {
  display: block;
  height: 60px;
}

.logo img {
  width: 70px;
  height: 60px;
}

header .menu {
  height: 60px;
}

header .container>ul li a {
  color: aliceblue;
  text-decoration: none;
  font-size: 18px;
  line-height: 60px;
  padding: 3px 20px;
  background: linear-gradient(92deg, #F68712 0%, #ED0E64 100%);
  cursor: pointer;
  transition: 2s;
  border-radius: 1em;

}

/* header .menu>ul>li:nth-child(4) a{
  margin-left: 600px;
  background-color: #e20000;
  height: 50%;
} */
header .container .menu ul {
  list-style: none;
  display: flex;
  /* height: 100%; */
  z-index: 11;
}

header .container .menu>ul>li {
  height: 60px;
  padding: 0 15px;
  position: relative;
}

header .container ul li:nth-child(3):hover #nav {
  top: 60px;
  opacity: 1;
  transform: translate(0, 0);
}

header:hover {
  opacity: 1 !important;
}

header .container ul li:nth-child(2):hover #nav li:nth-child(1) {
  border-top: 1px solid #ED0E64;
}

header .container .menu ul li a {
  display: block;
  /* height: 100%; */
  color: aliceblue;
  text-decoration: none;
  font-size: 17px;
  line-height: 60px;
  padding: 0 10px;
  cursor: pointer;
  transition: 1s;
  /* background: linear-gradient(to right, #F68712 0%, #ED0E64 100%); 
    background-clip: text;
    color: transparent; */
}

header .container ul li a:hover {
  color: #000000;
  background: linear-gradient(92deg, #F68712 0%, #ED0E64 100%);
}

header #nav {
  top: 1000px;
  position: absolute;
  width: 235px;
  height: 100%;
  display: block;
  opacity: 0;
  transform: translateY(-10%);
  transition: transform linear 0.3s, opacity linear 0.3s;
}

header #nav li {
  background-color: black;
  border-bottom: 2px solid #ED0E64;
}

.kq {
  width: 76%;
  padding: 20px 0 0 0;
  margin: 0 auto;
  font-style: italic;

}

.filter {
  width: 77%;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 19.2% 19.2% 19.2% 19.2% 19.2%;
  column-gap: 1%;
  row-gap: 10px;
}

.filter .item {
  height: 86px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filter .item select,
.filter .item button {
  width: 100%;
  padding: 5px;
  border: none;
  outline: none;
  zoom: 1.4;
  background-color: transparent;
  border: 2px solid #ff5c5c;
}

.item button {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* .khung{
  margin-bottom: 100px;
} */
.dsgiongg {

  box-shadow: -2px 2px 5px gray, 0px 0px 1px gray;
  background-color: #f9f1f1;
  margin-top: 10px;
  margin: 0 auto;
}

.wrap .textt {
  height: 210px;
}

.dsgiongg .wrap {
  margin-top: 30px;
}

.dsgiong .wrap {
  margin-top: 30px;
}

.content1 {
  box-shadow: -1px 0px 2px gray, 0px 0px 1px gray;
  background-color: #f9f1f1;
  margin-top: 10px;
  padding: 10px 0;
}

.tieude {
  width: 77%;
  margin: 0 auto;
  padding: 15px 0 0 0;
}

.tieude p {
  background: linear-gradient(to right, #F68712 20%, #ED0E64 30%, #ED0E64 70%, #F68712 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
  font-style: italic;
  margin: 0 auto;
}
.tieude h1{
    background: linear-gradient(to right, #F68712 20%, #ED0E64 30%, #ED0E64 70%, #F68712 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}
.content1 h1 {
  background: linear-gradient(to right, #F68712 20%, #ED0E64 30%, #ED0E64 70%, #F68712 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
  /* background: linear-gradient(to right, #F68712 0%, #ED0E64 100%); 
background-clip: text;
color: transparent; */
  margin: 0 auto;
}

@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.dsgiong #list {
  display: flex;
  display: grid;
  column-gap: 1%;
  grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
  width: 1440px;
  /* padding-bottom: 25px; */
  margin: 0 auto;
  /* overflow-x: auto; */
}

.dsgiong #list2,
#listUb,
#listAb,
#listUt,
#listAt,
#listUn,
#listAn,
#list0 {
  display: flex;
  display: grid;
  column-gap: 1%;
  grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
  width: 1440px;
  padding-bottom: 25px;
  margin: 0 auto;
  /* overflow-x: auto; */
}

.dsgiong {
  display: flex;
  display: grid;
  column-gap: 1%;
  grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
  width: 1440px;
  /* padding: 10px 0; */
  margin: 0 auto;
  /* overflow-x: auto; */
}

.dsgiong h2 {
  background: linear-gradient(to right, #ED0E64 30%, #ED0E64 70%, #F68712 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  /* animation: textShine 5s ease-in-out infinite alternate; */
  text-align: center;
}

.wrap {
  float: left;
  width: 340px;
  /* border: 1.5px solid #ffff; */
  border-radius: 0.5rem;
  margin: 10px;
  padding: 0 5px;
  padding-top: 10px;
  box-shadow: -1px 2px 2px gray, 0px 0px 5px gray;
  padding: 10px 20px 0 20px;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #B9C0FF 100%);
}

.wrap audio {
  width: 100%;
  height: 30px;
}

.wrap p::first-letter {
  text-transform: uppercase;
}

.wrap p {
  font-size: 13px;
  line-height: 19px;
  margin: 12px 0;
  letter-spacing: 0.5px;
}

.wrap button {
  width: 97%;
}

.owl-stage-outer {
  margin-top: 60px;
  width: 100%;
  /* box-shadow: -2px 15px 20px gray, 0px 0px 0px gray; */
  padding-bottom: 15px;
}

.owl-carousel .owl-item {
  width: 100%;
  margin-top: 15px;
}

.owl-carousel .owl-item img {
  margin-top: 100px;
  display: block;
  border-radius: 1em;
  width: 100%;
  height: 423px;
  margin: 0 auto;
  box-shadow: -1px 1px 2px gray, 0px 0px 3px gray;
}

.owl-theme .owl-nav {
  display: none;
}

.owl-theme .owl-dots .owl-dot {
  margin: 5px;
}

/* -------------------------------- */
/*them nut call*/
:root {
  --phone-text-color: #f00;
  /* màu chữ */
  --phone-icon-color: coral;
  --phone-bg-color: #52bebd;
  /* màu nền nút gọi */
  --phone-text-bg-color: #eeeb7c;
  /* màu nền text */
  --phone-border-color: #47a862;
  /* màu vòng tròn */
  --phone-hover-color: #f86e00;
  /* màu vòng tròn re chuột */
  --phone-hover2-color: red;
  /* màu vòng tròn re chuột */
}

.fone {
  font-size: 19px;
  /* chữ cạnh nút gọi */
  color: var(--phone-text-color);
  line-height: 40px;
  font-weight: bold;
  padding-left: 48px;
  /* cách bên trái cho chữ */
  margin: 0 0;
}

.fix_tel {
  position: fixed;
  bottom: 15px;
  left: 18px;
  z-index: 9;
}

/* left 18px là cách bên trái 18px. nếu muốn cho nút gọi sang phải thay là right */
.fix_tel a {
  text-decoration: none;
  display: block;
}

.tel {
  background: var(--phone-text-bg-color);
  width: 205px;
  height: 40px;
  position: relative;
  overflow: hidden;
  background-size: 40px;
  border-radius: 28px;
  border: none
}

.ring-alo-phone {
  background-color: transparent;
  cursor: pointer;
  height: 80px;
  position: absolute;
  transition: visibility 0.5s ease 0s;
  visibility: hidden;
  width: 80px;
  z-index: 200000 !important;
}

.ring-alo-phone.ring-alo-show {
  visibility: visible;
}

.ring-alo-phone.ring-alo-hover,
.ring-alo-phone:hover {
  opacity: 1;
}

.ring-alo-ph-circle {
  animation: 1.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim;
  background-color: transparent;
  border: 2px solid rgba(30, 30, 30, 0.4);
  border-radius: 100%;
  height: 70px;
  left: 10px;
  opacity: 0.1;
  position: absolute;
  top: 12px;
  transform-origin: 50% 50% 0;
  transition: all 0.5s ease 0s;
  width: 70px;
}

.ring-alo-phone.ring-alo-active .ring-alo-ph-circle {
  animation: 1.1s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important;
}

.ring-alo-phone.ring-alo-static .ring-alo-ph-circle {
  animation: 2.2s ease-in-out 0s normal none infinite running ring-alo-circle-anim !important;
}

.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle,
.ring-alo-phone:hover .ring-alo-ph-circle {
  border-color: var(--phone-border-color);
  opacity: 0.5;
}

.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle,
.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle {
  border-color: var(--phone-hover2-color);
  opacity: 0.5;
}

.ring-alo-phone.ring-alo-green .ring-alo-ph-circle {
  border-color: var(--phone-border-color);
  opacity: 0.5;
}

.ring-alo-ph-circle-fill {
  animation: 2.3s ease-in-out 0s normal none infinite running ring-alo-circle-fill-anim;
  background-color: #000;
  border: 2px solid transparent;
  border-radius: 100%;
  height: 30px;
  left: 30px;
  opacity: 0.1;
  position: absolute;
  top: 33px;
  transform-origin: 50% 50% 0;
  transition: all 0.5s ease 0s;
  width: 30px;
}

.ring-alo-phone.ring-alo-hover .ring-alo-ph-circle-fill,
.ring-alo-phone:hover .ring-alo-ph-circle-fill {
  background-color: var(--phone-hover-color);
  opacity: 0.75 !important;
}

.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-circle-fill,
.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-circle-fill {
  background-color: var(--phone-hover-color);
  opacity: 0.75 !important;
}

.ring-alo-phone.ring-alo-green .ring-alo-ph-circle-fill {
  background-color: var(--phone-hover-color);
  opacity: 0.75 !important;
}

.ring-alo-ph-img-circle {
  animation: 1s ease-in-out 0s normal none infinite running ring-alo-circle-img-anim;
  border: 2px solid transparent;
  border-radius: 100%;
  height: 30px;
  left: 30px;
  opacity: 1;
  position: absolute;
  top: 33px;
  transform-origin: 50% 50% 0;
  width: 30px;
}

.ring-alo-phone.ring-alo-hover .ring-alo-ph-img-circle,
.ring-alo-phone:hover .ring-alo-ph-img-circle {
  background-color: var(--phone-text-bg-color);
}

.ring-alo-phone.ring-alo-green.ring-alo-hover .ring-alo-ph-img-circle,
.ring-alo-phone.ring-alo-green:hover .ring-alo-ph-img-circle {
  background-color: var(--phone-hover2-color);
}

.ring-alo-phone.ring-alo-green .ring-alo-ph-img-circle {
  background-color: var(--phone-bg-color);
}

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

  30% {
    opacity: 0.5;
    transform: rotate(0deg) scale(0.7) skew(1deg);
  }

  100% {
    opacity: 0.6;
    transform: rotate(0deg) scale(1) skew(1deg);
  }
}

@keyframes ring-alo-circle-img-anim {
  0% {
    transform: rotate(0deg) 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(0deg) scale(1) skew(1deg);
  }

  100% {
    transform: rotate(0deg) scale(1) skew(1deg);
  }
}

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

  50% {
    opacity: 0.2;
    transform: rotate(0deg) scale(1) skew(1deg);
  }

  100% {
    opacity: 0.2;
    transform: rotate(0deg) scale(0.7) skew(1deg);
  }
}

.ring-alo-ph-img-circle a img {
  padding: 1px 0 12px 1px;
  width: 30px;
  position: relative;
  top: -1px;
}

/* -------------end--------- */
.dichvu {
  margin-top: 15px;
  padding: 35px 5%;
  letter-spacing: 1.3px;
  /*box-shadow: -1px 0px 2px gray, 0px 0px 1px gray;*/
}

.timkiem {
  margin: 80px 0;
}

.dichvu .item {
  height: 0;
  margin-top: 45px;
}

.vv {
  margin-top: 50px;
  padding: 80px 0;
}

.dichvu p {
  text-align: center;
  font-size: 20px;
}

.dv {
  width: 90%;
  display: block;
  column-gap: 1%;
  grid-template-columns: 49% 49%;
  margin: 0 auto;
  padding: 20px 0;
  overflow: hidden;
}

.dv h3 {
  background: linear-gradient(to right, #F68712 20%, #ED0E64 30%, #ED0E64 70%, #F68712 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
  mix-blend-mode: difference;
  font-size: 13px;
  text-transform: uppercase;
}

.dv span {
  font-size: 13px;
  max-width: 360px;
  text-align: justify;
  margin: auto;
}

.dv .dv1 {
  float: left;
  width: 100%;
  height: auto !important;
  text-align: justify;
  line-height: 25px;
  padding: 20px 10px;
  margin: 0 5px;
}

.dv .dv1 img {
  margin: 5px;
  display: flex;
  margin: 0 auto;
  height: 50px;
}

/*  */

.container-ef {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
}

.text {
  position: relative;
  font-size: 2em;
  text-align: center;
  /* background: linear-gradient(to right, #F68712 0%, #ED0E64 100%); 
background-clip: text;
color: transparent; */
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: bold;
  padding: 5px;
}

.text span {
  background: linear-gradient(to right, #F68712 20%, #ED0E64 30%, #ED0E64 70%, #F68712 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
  /* color: #eb0000; */
  /* background: linear-gradient(to right, #F68712 0%, #ED0E64 100%);
    background-clip: text;
    color: transparent; */
  /*mix-blend-mode: difference;*/
}

/* .text:before{
content:"";
position: absolute;
top:0;
width:60px;
height: 100%;
background: rgba(0,0,0,0.2);
animation: thangcover 6s linear infinite;
} */
@keyframes thangcover {
  0% {
    left: 0;
  }

  50% {
    left: calc(100% - 60px);
  }

  100% {
    left: 0;
  }
}

/*  */
.danhsachgiong {
  width: 55%;
  margin: 0 auto;
  overflow-x: auto;
}

.danhsachgiong a {
  display: block;
  width: 100%;
}

.danhsachgiong a button {
  width: 100%;
  padding: 0;
}

.category {
  width: 47%;
  float: left;
  margin: 0 5px;
}

.gioithieu {
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  margin: 10px auto;
  margin-bottom: 50px;
  background-image: linear-gradient(180deg, #B9C0FF 0%, #F9FBFD 100%);
  padding: 25px 10px;
  box-shadow: -2px 0px 1px gray, 0px 0px 5px gray;
}

.text1 i {
  font-size: 11px;
}

/* .gioithieu{
  display: block;
}
.gioithieu .text1{
  width: 100%;
} */
.gioithieu .text1 {
  width: 100%;
  padding: 0 0 0 15%;
  line-height: 25px;
  margin: auto;
  letter-spacing: 1.3px;
}

.gioithieu .text1 h2 {
  background: linear-gradient(to right, #F68712 20%, #ED0E64 30%, #ED0E64 70%, #F68712 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
  font-size: 16px;
  text-transform: uppercase;
}

.gioithieu .text1 p {
  font-size: 14px;
  margin-top: 8px;
}

button {
  margin: 17px 5px;
  background: linear-gradient(92deg, #F68712 0%, #ED0E64 100%);
  color: black;
  border-radius: 10rem;
  border: none;
  position: relative;
  height: 50px;
  font-size: 1.2em;
  padding: 0 2em;
  cursor: pointer;
  transition: 800ms ease all;
  outline: none;
}

button:hover {
  background: #fff;
  color: #ED0E64;
}

button:before,
button:after {
  content: '';
  position: absolute;
  top: 0;
  right: 5%;
  height: 2px;
  width: 0;
  background: linear-gradient(92deg, #F68712 0%, #ED0E64 100%);
  transition: 400ms ease all;
}

button:after {
  right: 0;
  top: inherit;
  left: 5%;
  bottom: 0;
}

button:hover:before,
button:hover:after {
  width: 90%;
  transition: 800ms ease all;
}

.gioithieu .anh {
  margin: auto;
  display: flex;
  justify-content: center;
}

.gioithieu .anh img {
  zoom: 0.4;
}

.doitac {
  height: auto;
  background-color: rgb(255, 255, 255);
  width: 100%;
  border-top-right-radius: 4em;
  border-top-left-radius: 4em;
  box-shadow: 0px 2px 1px gray, 0px 0px 3px gray;
}


.doitac h2 {
  font-size: 30px;
  text-align: center;
  padding: 10px 0;
}

.lgdoitac {
  padding-left: 2%;
  margin: 0 auto;
  width: 960px;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
}

.doitac .img1 img {
  margin: 0 auto;
  width: 120px;
  height: 120px;
  object-fit: cover;
}

#footer {
  padding: 0 10%;
  padding-bottom: 1%;
  width: 100%;
  height: auto;
  background-image: linear-gradient(to right, #4a4862, #252a54, #2e2e72);
  letter-spacing: 1.5px;
}

#footer .content {
  display: flex;
}

#footer .logo2 {
  width: 33%;
  padding: 10px;
  color: #ffffff;

}

#footer .logo2 a {
  display: flex;
  justify-content: center;
  margin-top: 10%;
}

#footer .logo2 h3 {
  text-align: center;
  background: linear-gradient(to right, #F68712 20%, #ED0E64 30%, #ED0E64 70%, #F68712 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 300% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}

#footer .logo2 img {
  width: 130px;
  height: 130px;
}

#footer .lienhe p {
  margin: 30px 0;
  font-size: 13px;
}

#footer .lienhe {
  width: 33%;
  padding: 10px;
  padding-top: 40px;
  position: relative;
  color: #ffffff;
}

#footer .lienhe a {
  text-decoration: none;
  /* color: black; */
}

#footer .nhung {
  padding-top: 10px;
  width: 33%;
}

#footer h4 {
  text-align: center;
  margin-top: 5px;
  color: #fff;
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
  }

  10%,
  20% {
    -webkit-transform: scale(.9) rotate(-3deg);
    -ms-transform: scale(.9) rotate(-3deg);
    transform: scale(.9) rotate(-3deg)
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg)
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg)
  }

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

@-webkit-keyframes zoom {
  0% {
    transform: scale(.9)
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 15px transparent
  }

  100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 transparent
  }
}

@keyframes zoom {
  0% {
    transform: scale(.9)
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 15px transparent
  }

  100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 transparent
  }
}

.echbay-sms-messenger div.phonering-alo-zalo,
.echbay-sms-messenger div.phonering-alo-alo {
  background-color: #0084ff
}

#sdt {
  width: 222px;
  z-index: -1;
  margin: 0 !important;
  position: absolute;
  right: -411px;
  top: 20px;
  background-color: #0084ff;
  padding: 10px 10px 10px 0;
  border-radius: 10em !important;
  opacity: 0;
  transform: translateX(5%);
  transition: transform linear 0.5s, opacity linear 0.3s;
}

.echbay-sms-messenger div.phonering-alo-sms {
  background-color: #f60
}

#mail {
  width: 320px;
  z-index: -1;
  margin: 0 !important;
  position: absolute;
  right: -441px;
  top: 79px;
  background-color: #f60;
  padding: 10px 10px 10px 0;
  border-radius: 10em !important;
  opacity: 0;
  transform: translateX(2%);
  transition: transform linear 0.5s, opacity linear 0.3s;
}

.echbay-sms-messenger div.phonering-alo-messenger {
  background-color: #e60f1e
}

.echbay-sms-messenger {
  width: 45px
}

.echbay-sms-messenger a {
  line-height: 45px;
  color: transparent;
  display: block;
}

.echbay-sms-messenger {
  display: block
}

.echbay-sms-messenger div.phonering-alo-zalo {
  display: block
}

.echbay-sms-messenger div.phonering-alo-alo {
  background-image: url(http://codfe.com/wp-content/uploads/2020/08/call.png);
}

.echbay-sms-messenger div.phonering-alo-sms {
  background-image: url(http://codfe.com/wp-content/uploads/2020/08/mail.png);
  background-color: #f60;
  background-size: 60%;
}

.echbay-sms-messenger div.phonering-alo-zalo {
  background-image: url(http://codfe.com/wp-content/uploads/2020/08/zalo.png);
}

.echbay-sms-messenger div.phonering-alo-messenger {
  background-image: url(https://inkythuatso.com/uploads/thumbnails/800/2021/10/logo-messenger-inkythuatso-2-01-30-15-48-06.jpg);
  background-color: #ffffff;
}

.echbay-sms-messenger div {
  margin: 14px 0;
  background: #0084FF center no-repeat;
  background-size: 70%;
  border-radius: 50%;
  box-shadow: 0 3px 10px #888;
}

.echbay-sms-messenger {
  text-align: center;
  right: 20px;
  position: fixed;
  color: #fff;
  bottom: 15%;
  z-index: 10;
}

/* liên hệ */
h1 {
  line-height: 40px;
}

.span {
  display: flex;
}