/*
<div class="XVNET-social-icons" style="--custom-left: auto; --custom-right: 10px; --custom-bottom: 5%; --custom-top: auto;">
		<a href="https://www.facebook.com" target="_blank" class="facebook" style="--bg-color: #000000;--bg-image:url(https://mangxuyenviet.vn/assets/images/icon-social/btn_zalo.png)"></a>
        <a href="https://www.facebook.com" target="_blank" class="facebook"></a>
        <a href="https://www.tiktok.com" target="_blank" class="tiktok"></a>
        <a href="https://www.instagram.com" target="_blank" class="instagram"></a>
        <a href="tel:+123456789" class="call"></a>
        <a href="https://wa.me/123456789" target="_blank" class="whatsapp"></a>
        <a href="https://twitter.com" target="_blank" class="twitter"></a>
        <a href="https://www.youtube.com" target="_blank" class="youtube"></a>
        <a href="https://t.me/username" target="_blank" class="telegram"></a>
        <a href="https://www.pinterest.com" target="_blank" class="pinterest"></a>
        <a href="https://www.wechat.com" target="_blank" class="wechat"></a>
        <a href="https://www.linkedin.com" target="_blank" class="linkedin"></a>
        <a href="https://www.threads.net" target="_blank" class="threads"></a>
    </div>



*/ 
        .XVNET-social-icons {
            position: fixed;
            left: var(--custom-left, auto);    /* Nếu không có, mặc định là auto */
			right: var(--custom-right, auto);  /* Nếu không có, mặc định là auto */
			top: var(--custom-top, auto);      /* Nếu không có, mặc định là auto */
			bottom: var(--custom-bottom, 5%);  /* Nếu không có, mặc định là 5% */
            /*transform: translateY(-50%);*/
            display: flex;
            flex-direction: column;
            gap: 10px;
			z-index:10;
        }
        .XVNET-social-icons a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;
            text-decoration: none;
            position: relative;
            /*animation: pulse 2s infinite, zoom-outer 2000ms infinite;*/
        }
        .XVNET-social-icons a:hover {
            
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
            /*animation: shake 0.3s infinite;
			transform: scale(1.1);*/
        }
        .XVNET-social-icons .facebook { background-color: var(--bg-color, #1877F2); }
        .XVNET-social-icons .tiktok { background-color: var(--bg-color, #000); }
        .XVNET-social-icons .instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
        .XVNET-social-icons .call { background-color: var(--bg-color, #cf0c0c); }
        .XVNET-social-icons .whatsapp { background-color: var(--bg-color, #25D366); }
        .XVNET-social-icons .twitter { background-color: var(--bg-color, #1DA1F2); }
        .XVNET-social-icons .youtube { background-color: var(--bg-color, #e83f3a); }
        .XVNET-social-icons .telegram { background-color: var(--bg-color, #0088cc); }
        .XVNET-social-icons .pinterest { background-color: var(--bg-color, #E60023); }
        .XVNET-social-icons .wechat { background-color: var(--bg-color, #09b83e); }
        .XVNET-social-icons .linkedin { background-color: var(--bg-color, #0077b5); }
        .XVNET-social-icons .threads { background-color: var(--bg-color, #000); }
        .XVNET-social-icons .mail { background-color: var(--bg-color, #cf0c0c); }
        .XVNET-social-icons .zalo { background-color: var(--bg-color, #0068ff); }
        .XVNET-social-icons .messenger { background-color: var(--bg-color, #0084ff); }
        .XVNET-social-icons .viber { background-color: var(--bg-color, #6f3faa); }
        .XVNET-social-icons .skype { background-color: var(--bg-color, #00AFF0); }
        
        .XVNET-social-icons a::before {
            content: "";
            display: block;
            width: 30px;
            height: 30px;
            background-size: contain;
            background-repeat: no-repeat;
			
			/*animation: shake-small 0.3s infinite;*/
        }
        .XVNET-social-icons .facebook::before { background-image: var(--bg-image, url('https://mangxuyenviet.vn/assets/images/icon-social/facebook-app-symbol.png')); }
        .XVNET-social-icons .tiktok::before { background-image: var(--bg-image, url('https://mangxuyenviet.vn/assets/images/icon-social/tiktok.png')); }
        .XVNET-social-icons .instagram::before { background-image: var(--bg-image, url('https://cdn-icons-png.flaticon.com/512/2111/2111463.png')); }
        .XVNET-social-icons .call::before { background-image: var(--bg-image, url('https://mangxuyenviet.vn/assets/images/icon-social/phone-call.png')); }
        .XVNET-social-icons .whatsapp::before { background-image: var(--bg-image, url('https://mangxuyenviet.vn/assets/images/icon-social/whatsapp.png')); }
        .XVNET-social-icons .twitter::before { background-image: var(--bg-image, url('https://cdn-icons-png.flaticon.com/512/5968/5968830.png')); }
        .XVNET-social-icons .youtube::before { background-image: var(--bg-image, url('https://mangxuyenviet.vn/assets/images/icon-social/ytb.png')); }
        .XVNET-social-icons .telegram::before { background-image: var(--bg-image, url('https://cdn-icons-png.flaticon.com/512/2111/2111646.png')); }
        .XVNET-social-icons .pinterest::before { background-image: var(--bg-image, url('https://cdn-icons-png.flaticon.com/512/145/145808.png')); }
        .XVNET-social-icons .wechat::before { background-image: var(--bg-image, url('https://cdn-icons-png.flaticon.com/512/2111/2111630.png')); }
        .XVNET-social-icons .linkedin::before { background-image: var(--bg-image, url('https://cdn-icons-png.flaticon.com/512/174/174857.png')); }
        .XVNET-social-icons .threads::before { background-image: var(--bg-image, url('https://cdn-icons-png.flaticon.com/512/5968/5968896.png')); }
        .XVNET-social-icons .mail::before { background-image: var(--bg-image, url('https://mangxuyenviet.vn/assets/images/icon-social/email.png')); }
        .XVNET-social-icons .zalo::before { background-image: var(--bg-image, url('https://mangxuyenviet.vn/assets/images/icon-social/btn_zalo.png')); }
        .XVNET-social-icons .messenger::before { background-image: var(--bg-image, url('https://mangxuyenviet.vn/assets/images/icon-social/messenger.png'));}
        .XVNET-social-icons .viber::before { background-image: var(--bg-image, url('https://mangxuyenviet.vn/assets/images/icon-social/viber.png'));width: 45px;height: 45px;}
        .XVNET-social-icons .skype::before { background-image: var(--bg-image, url('https://mangxuyenviet.vn/assets/images/icon-social/skype.png?v=1'));}

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
            }
            50% {
                box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
            }
        }

        @keyframes shake {
            0% { transform: translateX(0); }
            25% { transform: translateX(-2px); }
            50% { transform: translateX(2px); }
            75% { transform: translateX(-2px); }
            100% { transform: translateX(2px); }
        }
		
        @keyframes shake-small {
            0% { transform: translateX(0); }
            20% { transform: translateX(-0.5px); }
            40% { transform: translateX(0.5px); }
            60% { transform: translateX(-0.5px); }
            80% { transform: translateX(0.5px); }
            100% { transform: translateX(-0.5px); }
        }
	 @keyframes zoom-outer {
	  0% {
		transform: translate3d(0, 0, 0) scale(1);
		box-shadow:
		  0 0 0 0em rgba(7, 174, 213, 0),
		  0em 1px 2px rgba(0, 0, 0, 0.2);
	  }
	  33.3333% { 
		transform: translate3d(0, 0, 0) scale(1.1);
		box-shadow:
		  0 0 0 0em rgba(7, 174, 213, 0.1),
		  0em 1px 2px rgba(0, 0, 0, 0.8);
	  }
	  66.6666% {
		transform: translate3d(0, 0, 0) scale(1);
		box-shadow:
		  0 0 0 30px rgba(7, 174, 213, 0),
		  0em 1px 2px rgba(0, 0, 0, 0.5);
	  } 
	  100% {
		transform: translate3d(0, 0, 0) scale(1);
		box-shadow:
		  0 0 0 0em rgba(7, 174, 213, 0),
		  0em 1px 2px rgba(0, 0, 0, 0.2);
	  }
	}
	
.call{visibility:hidden;}
		
@media (max-width:768px)		{
	.call{visibility: visible;}
	
	.XVNET-social-icons a {
		width: 40px;
		height: 40px;
	}
	.XVNET-social-icons a::before {
		width: 24px;
		height: 24px;
	}
}