/********************** đổi màu background **********************/
.flash-glowing {
	animation: glowing 1000ms infinite;
}

@keyframes glowing {
	0% {
		background-color: #4371a3;
		box-shadow: 0 0 5px rgb(67 113 163 / 20%);
	}

	50% {
		background-color: #55acee;
		box-shadow: 0 0 20px rgb(85 172 238 / 50%);
	}

	100% {
		background-color: #4371a3;
		box-shadow: 0 0 5px rgb(67 113 163 / 20%);
	}
}


/********************** đổi màu border invalid **********************/
.flash-border-invalid {
	animation: flash-border-invalid 1000ms infinite;
}

@keyframes flash-border-invalid {
	0% {
		border-color: var(--bs-danger);
		box-shadow: 0 0 5px rgb(220 53 69 / 20%);
	}

	50% {
		border-color: #ff4d5a;
		box-shadow: 0 0 20px rgb(255 77 90 / 50%);
	}

	100% {
		border-color: var(--bs-danger);
		box-shadow: 0 0 5px rgb(220 53 69 / 20%);
	}
}



/********************** nhịp tim đập **********************/
.heartbeat {
	animation: heartbeat 1.5s ease-in-out infinite;
}

/* Định nghĩa keyframes cho hiệu ứng tim đập */
@keyframes heartbeat {

	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.95);
	}
}


/********************** scale **********************/
.animation-zoom {
	animation: animation-zoom 0.5s;
}

@keyframes animation-zoom {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
}

.animation-zoom-out {
	animation: animation-zoom-out 0.5s;
}

@keyframes animation-zoom-out {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.9);
	}

	100% {
		transform: scale(1);
	}
}


/********************** Badge chớp tắt **********************/
.badge-blink {
    display: inline-block;
    padding: 5px 15px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    border-radius: var(--gtt-border-radius);
    text-transform: uppercase;
    animation: blink 1s infinite;
    text-align: center;
}
@keyframes blink {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.7;
	}
}