/* ===== Nút lên đầu trang: vòng "năng lượng" đầy dần khi cuộn ===== */
#top-link.hg-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 50%;
	background: #fff !important;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--hg-text) 18%, transparent);
	color: var(--hg-primary) !important;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.9);
	transition: opacity .3s, visibility .3s, transform .3s, box-shadow .3s;
}
#top-link.hg-top.is-show { opacity: 1; visibility: visible; transform: none; }
#top-link.hg-top:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--hg-text) 26%, transparent); transform: translateY(-3px); }
#top-link.hg-top > i { display: none; } /* ẩn mũi tên cũ của Flatsome */

.hg-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hg-top-ring circle { fill: none; stroke-width: 3.5; }
.hg-top-track { stroke: color-mix(in srgb, var(--hg-primary) 14%, transparent); }
.hg-top-bar { stroke: var(--hg-primary); stroke-linecap: round; transition: stroke-dashoffset .1s linear, stroke .3s; }

.hg-top-arrow { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
#top-link.hg-top:hover .hg-top-arrow { transform: translateY(-2px); }

/* Cuộn hết trang: vòng đầy → chuyển xanh lá + nhịp sáng nhẹ */
#top-link.hg-top.is-full .hg-top-bar { stroke: var(--green-natural); }
#top-link.hg-top.is-full { color: var(--green-natural) !important; animation: hgTopPulse 1.6s ease-out 1; }
@keyframes hgTopPulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-natural) 45%, transparent); }
	100% { box-shadow: 0 0 0 14px transparent; }
}

@media (max-width: 549px) {
	#top-link.hg-top { right: 14px; bottom: 14px; width: 46px; height: 46px; }
	.hg-top-arrow { width: 18px; height: 18px; }
}