/* ============================================================
   An Thành Phát — Floating contact widget (modern, animated)
   Phone (green) + Zalo (brand blue), vertical stack bottom-right,
   double pulse ring on phone, slide-in tooltip on hover.
   ============================================================ */

#vt-bottom-bar,
#hotlinemaytinh { display: none !important; }

.cp-contact {
	position: fixed;
	right: 24px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	z-index: 9998;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* --- Button base --- */
.cp-contact__btn {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .12);
	transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s ease;
	cursor: pointer;
	isolation: isolate; /* let ::before / ::after stack below icon */
}
.cp-contact__btn:hover {
	transform: scale(1.1) translateY(-2px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .15);
	color: #fff;
}
.cp-contact__btn:active { transform: scale(1.02) translateY(0); }

/* --- Phone (call) — solid navy + double pulse ring + icon shake --- */
.cp-contact__btn--call {
	background: #0F2C5A;
}
.cp-contact__btn--call::before,
.cp-contact__btn--call::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid rgba(15, 44, 90, .55);
	pointer-events: none;
	z-index: -1;
}
.cp-contact__btn--call::before { animation: cp-pulse 2.4s ease-out infinite; }
.cp-contact__btn--call::after  { animation: cp-pulse 2.4s ease-out 1.2s infinite; }

@keyframes cp-pulse {
	0%   { transform: scale(1);    opacity: .75; }
	100% { transform: scale(1.65); opacity: 0; }
}

.cp-contact__btn--call .cp-contact__icon {
	transform-origin: 50% 70%;
	animation: cp-shake 3.2s ease-in-out infinite;
}
@keyframes cp-shake {
	0%, 60%, 100% { transform: rotate(0); }
	65%           { transform: rotate(-14deg); }
	70%           { transform: rotate(12deg); }
	75%           { transform: rotate(-10deg); }
	80%           { transform: rotate(8deg); }
	85%           { transform: rotate(-4deg); }
	90%           { transform: rotate(0); }
}

/* --- Zalo — solid navy + soft glow ring --- */
.cp-contact__btn--zalo {
	background: #0F2C5A;
}
.cp-contact__btn--zalo::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid rgba(15, 44, 90, .5);
	pointer-events: none;
	z-index: -1;
	animation: cp-pulse-zalo 2.8s ease-out infinite;
}
@keyframes cp-pulse-zalo {
	0%   { transform: scale(1);    opacity: .55; }
	100% { transform: scale(1.5);  opacity: 0; }
}

/* --- Icon --- */
.cp-contact__icon {
	width: 26px;
	height: 26px;
	color: #fff;
	position: relative;
	z-index: 2;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2));
}

/* Hide legacy ripple span */
.cp-contact__ripple { display: none; }

/* --- Tooltip slides in from the right --- */
.cp-contact__label {
	position: absolute;
	right: calc(100% + 14px);
	top: 50%;
	transform: translateY(-50%) translateX(10px);
	background: #fff;
	color: #1a1a1a;
	padding: 9px 16px;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.cp-contact__label::after {
	content: "";
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 7px solid transparent;
	border-left-color: #fff;
}
.cp-contact__label small {
	font-size: 11px;
	color: #6d6d6d;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 600;
	margin-bottom: 2px;
}
.cp-contact__label strong {
	font-size: 14px;
	font-weight: 700;
}
.cp-contact__btn--call .cp-contact__label strong { color: #0F2C5A; }
.cp-contact__btn--zalo .cp-contact__label strong { color: #0F2C5A; }

@media (hover: hover) {
	.cp-contact__btn:hover .cp-contact__label {
		opacity: 1;
		visibility: visible;
		transform: translateY(-50%) translateX(0);
	}
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
	.cp-contact__btn--call::before,
	.cp-contact__btn--call::after,
	.cp-contact__btn--zalo::before,
	.cp-contact__btn--call .cp-contact__icon { animation: none; }
}

/* Mobile: smaller buttons, hide tooltip */
@media (max-width: 768px) {
	.cp-contact { right: 14px; bottom: 14px; gap: 12px; }
	.cp-contact__btn { width: 52px; height: 52px; }
	.cp-contact__icon { width: 22px; height: 22px; }
	.cp-contact__label { display: none; }
}

/* Push widget up when sticky PDP cart bar is visible */
body:has(.cp-pdp__sticky.is-visible) .cp-contact { bottom: 88px; }
@media (max-width: 640px) {
	body:has(.cp-pdp__sticky.is-visible) .cp-contact { bottom: 82px; }
}