
.dv-contact-bar {
	position: fixed;
	right: 10px;
	top: 55%;
	transform: translateY(-50%);
	z-index: 9999;
	background: #fff;
	border: 2px solid #ffcc00; /* Viền vàng thương hiệu */
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.15);
	width: 75px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.dv-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 5px;
	text-decoration: none !important;
	border-bottom: 1px solid #f1f1f1;
	transition: all 0.3s ease;
}

.dv-item:last-child { border-bottom: none; }

.dv-item i {
	font-size: 22px;
	color: #333;
	margin-bottom: 4px;
}

.dv-item span {
	font-size: 11px;
	font-weight: 700;
	color: #444;
	text-transform: uppercase;
}

.dv-item img {
	width: 24px;
	height: 24px;
	margin-bottom: 4px;
}

/* Hiệu ứng khi Hover */
.dv-item:hover {
	background-color: #ffcc00;
}

/* --- KHU VỰC TẠO HIỆU ỨNG RUNG LẮC --- */

/* 1. Hotline: Lắc mạnh (Wiggle) */
.dv-item.hotline i {
	animation: dv-quick-wiggle 2s infinite;
}

/* 2. Fanpage: Nhảy nhịp tim (Pulse) */
.dv-item.fanpage i {
	animation: dv-pulse 2s infinite;
	animation-delay: 0.5s; /* Chạy lệch nhịp cho đẹp */
}

/* 3. Zalo: Lắc nhẹ qua lại (Swing) */
.dv-item.zalo img {
	animation: dv-swing 2s infinite;
	animation-delay: 1s;
}

/* 4. Garage: Nhảy lên xuống (Bounce) */
.dv-item.garage i {
	animation: dv-bounce 2s infinite;
	animation-delay: 1.5s;
}

/* --- ĐỊNH NGHĨA CÁC KEYFRAMES --- */

/* Hiệu ứng Lắc (Wiggle) */
@keyframes dv-quick-wiggle {
	0%, 100% { transform: rotate(0); }
	5%, 15%, 25% { transform: rotate(-15deg); }
	10%, 20%, 30% { transform: rotate(15deg); }
	35% { transform: rotate(0); }
}

/* Hiệu ứng Nhịp tim (Pulse) */
@keyframes dv-pulse {
	0%, 100% { transform: scale(1); }
	10%, 30% { transform: scale(1.2); }
	20% { transform: scale(1); }
}

/* Hiệu ứng Đu đưa (Swing) */
@keyframes dv-swing {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(15deg); }
	40% { transform: rotate(-10deg); }
	60% { transform: rotate(5deg); }
	80% { transform: rotate(-5deg); }
}

/* Hiệu ứng Nhảy (Bounce) */
@keyframes dv-bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-7px);}
	60% {transform: translateY(-4px);}
}

/* Ẩn text trên điện thoại */
@media (max-width: 767px) {
	.dv-contact-bar {
		right: 5px;
		width: 55px;
	}
	.dv-item span {
		display: none;
	}
	.dv-item {
		padding: 15px 5px;
	}
}