.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.justify-content-center { -webkit-box-pack: center !important; justify-content: center !important; }
.align-items-center { -webkit-box-align: center !important; align-items: center !important; }

@media (min-width: 992px) {

  .m-lg-1 { margin: 0.25rem !important; }
  .mt-lg-1, .my-lg-1 { margin-top: 0.25rem !important; }
  .mr-lg-1, .mx-lg-1 { margin-right: 0.25rem !important; }
  .mb-lg-1, .my-lg-1 { margin-bottom: 0.25rem !important; }
  .ml-lg-1, .mx-lg-1 { margin-left: 0.25rem !important; }

  .p-lg-2 { padding: 0.5rem !important; }
  .pt-lg-2, .py-lg-2 { padding-top: 0.5rem !important; }
  .pr-lg-2, .px-lg-2 { padding-right: 0.5rem !important; }
  .pb-lg-2, .py-lg-2 { padding-bottom: 0.5rem !important; }
  .pl-lg-2, .px-lg-2 { padding-left: 0.5rem !important; }

}

.phone-box, .zalo-box, .fb-box { width: 44px; height: 44px; line-height: 44px; border-radius: 30px; display: inline-block; background: black; border: 2px solid white; position: relative; }
.phone-box img, .zalo-box img, .fb-box img { max-width: 25px; }
.phone-box svg, .zalo-box svg, .fb-box svg { fill: rgb(255, 255, 255); }
.phone-box:hover, .zalo-box:hover, .fb-box:hover { transform: translateY(-5px); }
.play0 { animation: 1.5s ease 0s infinite normal none running play0; }
@keyframes play0 { 
  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); }
}
.fix-phone { position: fixed; bottom: 0px; z-index: 9; right: 0px; display: flex; border-top-left-radius: 20px; justify-content: center; align-items: center; background-color: var(--mainColor); top: inherit !important; }
@media (min-width: 992px) {
  .fix-phone::before { content: ""; position: absolute; height: 15px; width: 20px; bottom: -1px; left: -20px; border-radius: 0px 0px 30px; box-shadow: 10px 0 0 0 var(--mainColor); pointer-events: none; }
}
/* @media (max-width: 991px) {
  .fix-phone { overflow: hidden; position: fixed; bottom: 55px; left: 50%; transform: translate(-50%) scale(1); border-radius: 6px; background: rgb(255, 255, 255); z-index: 9; box-shadow: rgba(45, 52, 58, 0.1) 0px 0px 2px 2px; opacity: 0; visibility: hidden; transition: 0.7s; top: inherit !important; }
  .fix-phone.fix-phone.active { animation-name: contact_bar; animation-duration: 0.7s; opacity: 1; pointer-events: auto; visibility: visible; z-index: 11; }
} */
.fix-phone img { height: 44px; }
.fix-phone { position: fixed; bottom: 0px; z-index: 9; right: 0px; display: flex; border-top-left-radius: 20px; justify-content: center; align-items: center; background-color: black; top: inherit !important; }
@keyframes play0 { 
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}
.play0 { animation: 0.5s ease-in-out 0s infinite normal none running play0; }
/* @media (max-width: 991px) {
  .fix-phone { display: none; }
} */

@media (max-width: 991px) {
  .fix-phone {
    overflow: hidden;
    position: fixed;
    bottom: 55px;
    left: 50%;
    transform: translate(-50%) scale(1);
    border-radius: 6px;
    background: rgb(255, 255, 255);
    z-index: 9;
    box-shadow: rgba(45, 52, 58, 0.1) 0px 0px 2px 2px;
    opacity: 0;
    visibility: hidden;
    transition: 0.7s;
    top: inherit !important;
  }
  .fix-phone.active {
    animation-name: contact_bar;
    animation-duration: 0.7s;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    z-index: 11;
  }
}