.div-scroll-warp {

    position: absolute;

    z-index: 9999;

    top: 1000px;

    right: 20px;

}



.div-scroll-warp.position-fixed {

    position: fixed;

    top: 160px !important;

    right: 1%;

}



#ontopBtn {

    position: fixed;

    bottom: 20px;

    left: 1%;

    z-index: 99;

    background-color: var(--bs-main55-color);

    color: var(--bs-color-white);

    padding: 5px 10px;

    border: none;

    border-radius: 30px;

    cursor: pointer;

    font-size: 32px;

    transition: background-color .5s;

}



#ontopBtn:hover {

    background-color: var(--bs-main-color);

}



.position-fixed ul li.bg-pink a figure img,.bg-pinks a figure img{

    width: 46px;

    margin: auto;

    display: block;

}



figure {

    width: 100% !important;

}



.page-template-default .div-scroll-warp {

    position: fixed;

    top: 330px;

}



.page-template .div-scroll-warp,

.page-template-default .div-scroll-warp,

.letmein-template-default .div-scroll-warp {

    top: 210px;

    position: fixed;

    right: 20px;

}



.div-scroll-warp ul {

    display: inline-block;

    margin: 0;

    padding: 7px 5px;

    background-color: var(--bs-main-header-color);

    border: 3px solid var(--bs-color-white);

    border-radius: 45px;

    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    width: 80px;

    list-style-type: none;

    animation: spread 4s .7s ease-in-out infinite;

    transform-origin: 50% 4px;

}



@keyframes spread {

    0% {

        box-shadow: 0 0 0 0 rgb(0 176 179);

    }

    1% {

        box-shadow: 0 0 0 2px rgb(0 176 179 / 90%);

    }

    3% {

        box-shadow: 0 0 0 4px rgb(0 176 179 / 80%);

    }

      5% {

          box-shadow: 0 0 0 6px rgb(0 176 179 / 70%);

      }

      7% {

          box-shadow: 0 0 0 8px rgb(0 176 179 / 60%);

      }

      9% {

          box-shadow: 0 0 0 10px rgb(0 176 179 / 50%), 0 0 0 0 #fff0;

      }

      11% {

          box-shadow: 0 0 0 12px rgb(0 176 179 / 40%), 0 0 0 4px rgb(0 176 179 / 20%);

      }

      13% {

          box-shadow: 0 0 0 14px rgb(0 176 179 / 30%), 0 0 0 6px rgb(0 176 179 / 20%);

      }

      15% {

          box-shadow: 0 0 0 16px rgb(0 176 179 / 20%), 0 0 0 8px rgb(0 176 179 / 20%);

      }

      17% {

          box-shadow: 0 0 0 18px rgb(0 176 179 / 10%), 0 0 0 10px rgb(0 176 179 / 20%);

      }

      19% {

          box-shadow: 0 0 0 20px #fff0, 0 0 0 18px #fff0;

      }

      21% {

          box-shadow: 0 0 0 0 #b06428;

      }

      23% {

          box-shadow: 0 0 0 2px rgb(0 176 179 / 90%);

      }

      25% {

          box-shadow: 0 0 0 4px rgb(0 176 179 / 80%);

      }

      27% {

          box-shadow: 0 0 0 6px rgb(0 176 179 / 70%);

      }

      29% {

          box-shadow: 0 0 0 8px rgb(0 176 179 / 60%);

      }

      31% {

          box-shadow: 0 0 0 10px rgb(0 176 179 / 50%), 0 0 0 0 #fff0;

      }

      33% {

          box-shadow: 0 0 0 12px rgb(0 176 179 / 40%), 0 0 0 4px rgb(0 176 179 / 20%);

      }

      35% {

          box-shadow: 0 0 0 14px rgb(0 176 179 / 30%), 0 0 0 6px rgb(0 176 179 / 20%);

      }

      37% {

          box-shadow: 0 0 0 16px rgb(0 176 179 / 20%), 0 0 0 8px rgb(0 176 179 / 20%);

      }

      39% {

          box-shadow: 0 0 0 18px rgb(0 176 179 / 10%), 0 0 0 10px rgb(0 176 179 / 20%);

      }

      41% {

          box-shadow: 0 0 0 20px #fff0, 0 0 0 18px #fff0;

      }

      43% {

          box-shadow: 0 0 0 0 #fff0;

      }

      100% {

          box-shadow: 0 0 0 0 #fff0;

      }

}



/* List items and hover effects */

.div-scroll-warp ul li.bg-pink {

    padding: 7px 0;

    background: none;

    border-bottom: 1px dashed #b6bdc6;

}



.div-scroll-warp ul li a {

    cursor: pointer;

    color: #25282b;

    text-decoration: none;

}



.div-scroll-warp ul li a:hover h6 {

    color: #0073e6;

}



.div-scroll-warp ul li a figure.opacity-9 {

    width: 41px;

    height: 41px;

    margin: 0 auto;

    opacity: 0.9;

}



.div-scroll-warp ul li a h6 {

    text-align: center;

    color: var(--bs-color-white);

    line-height: 1.15;

    font-size: 12px;

    margin: 2px 0 0;

}



.icon-whatsapp-img:hover,.icon-zalo-img:hover,.icon-viber-img:hover,.icon-hotline-img:hover,.icon-fb-img:hover,.icon-price-img:hover {

    border: 3px solid #88ef88;

    border-radius: 20px;

    background: #88ef88;

}



.bvjw-footer-social-network img:hover{

    border: 3px solid var(--bs-main-color);

    background: var(--bs-main-color);

}



p.div-zalo-qr-wrap-title,p.div-what-sapp-qr-wrap-title,p.div-viber-qr-wrap-title{

    color: var(--bs-color-white);

    padding: 5px 0 0 0;
    
    margin-bottom: 0;

}



p.div-what-sapp-qr-wrap-title,p.div-viber-qr-wrap-title{

    color: var(--bs-main-color);

}



/* QR Code Wrappers */

.div-scroll-warp .div-viber-qr-wrap,.div-scroll-warp .div-whatsapp-qr-wrap {

    left: -160px;

    top: 240px;

    border: 8px solid var(--bs-main-color);

    display: none;

}



.div-viber-qr-wrap,.div-whatsapp-qr-wrap {

    border: 1px solid var(--bs-main-color);

}



.div-scroll-warp ul li .div-zalo-qr-wrap,.div-scroll-warp ul li .div-viber-qr-wrap,.div-scroll-warp ul li .div-whatsapp-qr-wrap {

    position: absolute;

    top: 0;

    left: -250px;

    width: 250px;

    padding: 10px;

    background-color: var(--bs-main-color);

    border-radius: 8px;

    display: none;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.4s ease, visibility 0.4s ease;

    z-index: 10;

}



.div-scroll-warp ul li .div-viber-qr-wrap,.div-scroll-warp ul li .div-whatsapp-qr-wrap {

    background-color: var(--bs-color-white);

}



.div-scroll-warp ul li:hover .div-zalo-qr-wrap,.div-scroll-warp ul li:hover .div-viber-qr-wrap,.div-scroll-warp ul li:hover .div-whatsapp-qr-wrap {

    display: block;

    opacity: 1;

    visibility: visible; 

}



.div-scroll-warp ul li:hover .div-zalo-qr-wrap,.div-scroll-warp ul li:hover .div-viber-qr-wrap,.div-scroll-warp ul li:hover .div-whatsapp-qr-wrap {

    top: 240px;

    left: -275px;

    transform: translateY(-50%);

}



.div-zalo-qr-wrap img,.div-whatsapp-qr-wrap img,.div-viber-qr-wrap img {

    width: 100%;

}



.div-scroll-warp ul li .div-hot-line-wrap {

    position: absolute;

    top: 0;

    right: 100%;

    width: 260px;

    padding: 10px;

    background-color: var(--bs-main-color);

    border-radius: 8px;

    display: none;

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.4s ease, visibility 0.4s ease;

    z-index: 10;

}



.div-scroll-warp ul li .div-hot-line-wrap  .div-hot-linep-wrap-content a{

    color: var(--bs-color-white);

}



.div-scroll-warp ul li:hover .div-hot-line-wrap {

    display: block;

    opacity: 1;

    visibility: visible; 

}



.div-scroll-warp ul li:hover .div-hot-line-wrap {

    top: 430px;

    right: 100%;

    transform: translateY(-50%);

}



.div-hot-linep-wrap-content a{

    color: var(--bs-color-white);

}



.div-scroll-warp ul li:hover .div-hot-line-wrap {

    top: 40px;

}



.div-scroll-warp ul li:hover .div-zalo-qr-wrap{

   top: 260px; 

}



.div-scroll-warp ul li:hover .div-whatsapp-qr-wrap {

    left: -290px;

    top: 330px;

}



.div-scroll-warp ul li:hover .div-viber-qr-wrap {

    left: -290px;

    top: 360px;

}



.div-scroll-warp .div-whatsapp-qr-wrap {

    display: none;

}



.div-scroll-warp ul li:hover .div-whatsapp-qr-wrap {

    display: block;

}



.div-scroll-warp ul li .div-zalo-qr-wrap::after,.div-scroll-warp ul li .div-viber-qr-wrap::after,

.div-scroll-warp ul li .div-whatsapp-qr-wrap::after,.div-scroll-warp ul li .div-hot-line-wrap::after {

    content: "";

    position: absolute;

    right: -5px;

    top: 50%;

    transform: translateY(-50%) rotate(45deg);

    width: 10px;

    height: 10px;

    background-color: var(--bs-main-color);

    z-index: 11;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}



.div-scroll-warp ul li .div-viber-qr-wrap::after,.div-scroll-warp ul li .div-whatsapp-qr-wrap::after {

    right: -13px;

}



.div-scroll-warp ul li .div-zalo-qr-wrap::before,.div-scroll-warp ul li .div-viber-qr-wrap::before,

.div-scroll-warp ul li .div-whatsapp-qr-wrap::before,.div-scroll-warp ul li .div-hot-line-wrap::before{

    content: "";

    position: absolute;

    right: -25px;

    top: 0;

    width: 55px;

    height: 200px;

    background-color: #ffffff00;

    z-index: 9;

}



.div-zalo-qr-wrap img {

    width: 100%;

}



.div-scroll-warp .div-whatsapp-qr-wrap {

    display: none;

}



.div-scroll-warp .div-line-qr-wrap {

    display: none;

}



.maintopbtn img {

    width: 30px;

    display: block;

    margin: 10px auto;

    text-align: center;

    cursor: pointer;

}