/* S4 Contact Widget — nut lien he noi (Zalo, Messenger, Phone).
 * Style: nut TRON, cung mau xanh primary, halo trang ben ngoai (giong screenshot brand).
 */

.s4cw{
	position:fixed;
	bottom:24px;
	z-index:9990;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:16px;
	pointer-events:none;
}
.s4cw--right{ right:24px; }
.s4cw--left { left:24px;  }

.s4cw__btn{
	pointer-events:auto;
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:56px;
	height:56px;
	padding:0;
	border-radius:50%;
	background:#8C1C2B;                         /* do do S4 */
	color:#ffffff;
	text-decoration:none;
	font-family:inherit;
	font-size:0;                                /* an chu neu khong bat show_labels */
	line-height:1;
	box-shadow:
		0 0 0 4px rgba(255,255,255,.85),        /* halo trang sat nut */
		0 0 0 5px rgba(140,28,43,.35),          /* vien mo xa */
		0 10px 24px rgba(7,26,61,.22);
	transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.s4cw__btn:hover,
.s4cw__btn:focus-visible{
	transform:translateY(-2px) scale(1.03);
	background:#6E1522;
	color:#ffffff;
	text-decoration:none;
	outline:none;
}
.s4cw__btn:focus-visible{
	box-shadow:
		0 0 0 4px rgba(255,255,255,.9),
		0 0 0 6px rgba(140,28,43,.55),
		0 12px 26px rgba(7,26,61,.28);
}

.s4cw__icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	width:30px;
	height:30px;
}
.s4cw__icon svg{ width:100%; height:100%; display:block; }

/* Hien chu ben canh nut -> nut chuyen sang hinh pill */
.s4cw--with-labels .s4cw__btn{
	width:auto;
	height:52px;
	min-width:52px;
	padding:0 18px 0 14px;
	border-radius:999px;
	gap:10px;
	font-size:14px;
	font-weight:700;
}
.s4cw--with-labels .s4cw__icon{ width:24px; height:24px; }
.s4cw__text{ white-space:nowrap; }
.s4cw:not(.s4cw--with-labels) .s4cw__text{
	position:absolute; width:1px; height:1px; overflow:hidden;
	clip:rect(0 0 0 0); clip-path:inset(50%); border:0; padding:0; margin:-1px;
}

/* Mobile: nut nho hon */
@media (max-width:600px){
	.s4cw{ bottom:16px; gap:12px; }
	.s4cw--right{ right:14px; }
	.s4cw--left { left:14px;  }
	.s4cw__btn{ width:50px; height:50px; }
	.s4cw__icon{ width:26px; height:26px; }
}

@media (prefers-reduced-motion:reduce){
	.s4cw__btn{ transition:none; }
	.s4cw__btn:hover,
	.s4cw__btn:focus-visible{ transform:none; }
}