/* Smart Contact Chat – frontend */
.scc {
	--scc-offset-x: 20px;
	--scc-offset-y: 24px;
	--scc-size: 54px;
	--scc-accent: #0a68ff;
	--scc-gap: 12px;
	--scc-btn: var(--scc-size);
	position: fixed;
	bottom: calc(var(--scc-offset-y) + env(safe-area-inset-bottom, 0px));
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--scc-gap);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1;
}
.scc--right { right: var(--scc-offset-x); }
.scc--left  { left: var(--scc-offset-x); }

.scc *, .scc *::before, .scc *::after { box-sizing: border-box; }

.scc__list {
	display: flex;
	flex-direction: column;
	gap: var(--scc-gap);
	margin: 0;
	padding: 0;
}

/* Nút */
.scc__btn,
.scc__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--scc-btn);
	height: var(--scc-btn);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #fff;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(15, 23, 42, .22), 0 2px 4px rgba(15, 23, 42, .12);
	transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease, visibility .25s;
	-webkit-tap-highlight-color: transparent;
}
.scc__btn:hover,
.scc__toggle:hover {
	transform: translateY(-2px) scale(1.06);
	box-shadow: 0 10px 24px rgba(15, 23, 42, .28), 0 3px 6px rgba(15, 23, 42, .14);
	color: #fff;
}
.scc__btn:focus-visible,
.scc__toggle:focus-visible {
	outline: 3px solid #fff;
	box-shadow: 0 0 0 6px var(--scc-accent);
}

.scc__icon,
.scc__toggle-icon {
	display: flex;
	width: 52%;
	height: 52%;
	pointer-events: none;
}
.scc__icon svg,
.scc__toggle-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Màu thương hiệu */
.scc__btn--phone     { background: #e8382d; }
.scc__btn--zalo      { background: #0068ff; }
.scc__btn--messenger { background: radial-gradient(circle at 25% 100%, #0099ff 0%, #a033ff 55%, #ff5280 85%, #ff7061 100%); }
.scc__btn--whatsapp  { background: #25d366; }
.scc__btn--zalo .scc__icon { width: 70%; height: 70%; }
.scc__btn--whatsapp .scc__icon { width: 56%; height: 56%; }

/* Nhãn chữ */
.scc__label {
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	transform: translate(8px, -50%);
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	color: #1f2937;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(15, 23, 42, .16);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.scc--left .scc__label {
	right: auto;
	left: calc(100% + 12px);
	transform: translate(-8px, -50%);
}
.scc__btn--phone .scc__label { color: #c62a20; font-variant-numeric: tabular-nums; }

.scc--labels-hover .scc__btn:hover .scc__label,
.scc--labels-hover .scc__btn:focus-visible .scc__label,
.scc--labels-always .scc__label,
.scc__btn--show-number .scc__label {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
	pointer-events: auto;
}
.scc--labels-never .scc__btn:not(.scc__btn--show-number) .scc__label { display: none; }

/* Hiệu ứng nút gọi */
.scc--animate .scc__btn--phone::before,
.scc--animate .scc__btn--phone::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #e8382d;
	z-index: -1;
	animation: scc-pulse 2s ease-out infinite;
}
.scc--animate .scc__btn--phone::after { animation-delay: 1s; }
.scc--animate .scc__btn--phone .scc__icon { animation: scc-ring 2s ease-in-out infinite; }

@keyframes scc-pulse {
	0%   { transform: scale(1); opacity: .45; }
	100% { transform: scale(1.7); opacity: 0; }
}
@keyframes scc-ring {
	0%, 50%, 100% { transform: rotate(0); }
	5%, 15%, 25% { transform: rotate(-14deg); }
	10%, 20%, 30% { transform: rotate(14deg); }
	35% { transform: rotate(0); }
}

/* Kiểu gom vào một nút */
.scc__toggle { background: var(--scc-accent); }
.scc__toggle-icon { position: absolute; transition: transform .25s ease, opacity .2s ease; }
.scc__toggle-icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.scc.is-open .scc__toggle-icon--open { opacity: 0; transform: rotate(90deg) scale(.6); }
.scc.is-open .scc__toggle-icon--close { opacity: 1; transform: none; }

.scc--toggle .scc__btn {
	transition-delay: calc((3 - var(--scc-i, 0)) * 40ms);
}
.scc--toggle:not(.is-open) .scc__btn {
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(.6);
	pointer-events: none;
}
.scc--toggle:not(.is-open) .scc__btn::before,
.scc--toggle:not(.is-open) .scc__btn::after { animation: none; }
.scc--toggle.is-open:not(.scc--labels-never) .scc__label {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
	pointer-events: auto;
}

/* Thiết bị */
@media (max-width: 767px) {
	.scc { --scc-btn: calc(var(--scc-size) * .88); --scc-gap: 10px; }
	.scc--hide-mobile { display: none !important; }
	.scc__label { font-size: 13px; padding: 7px 12px; }
	/* Màn hình cảm ứng không có hover: ẩn nhãn hover cho gọn */
	.scc--stack.scc--labels-hover .scc__btn:not(.scc__btn--show-number) .scc__label { display: none; }
}
@media (min-width: 768px) {
	.scc--hide-desktop { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.scc *, .scc *::before, .scc *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.scc { display: none !important; }
}