.hdcb {
	--hdcb-size: var(--hdcb-size-d, 56px);
	--hdcb-gap: 12px;          /* khoảng cách giữa các icon */
	--hdcb-icon-scale: 52%;    /* kích thước icon SVG so với nút */
	--hdcb-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	position: fixed;
	bottom: var(--hdcb-bottom, 24px);
	z-index: 9990; /* thấp hơn popup Elementor (9999) */
	display: flex;
	flex-direction: column;
	gap: var(--hdcb-gap);
	font-family: var(--hdcb-font, inherit);
	line-height: 1.3;
}

.hdcb--right {
	right: var(--hdcb-side, 24px);
	align-items: flex-end;
}

.hdcb--left {
	left: var(--hdcb-side, 24px);
	align-items: flex-start;
}

.hdcb .hdcb__list {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: var(--hdcb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hdcb .hdcb__item {
	margin: 0;
	padding: 0;
	list-style: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	transition-delay: calc(var(--i, 0) * 30ms);
}

.hdcb:not(.is-open) .hdcb__item {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.85);
	pointer-events: none;
	transition-delay: 0s;
}

/* Nút kênh + nút bong bóng.
   Lặp class .hdcb.hdcb để thắng CSS mặc định của theme (Hello Elementor tô nền #c36 cho button khi hover/focus)
   và Global Style của Elementor Kit — khóa mọi trạng thái, không cần !important. */
.hdcb .hdcb__toggle {
	--hdcb-item-bg: var(--hdcb-bg, #0068ff);
}

.hdcb.hdcb .hdcb__link,
.hdcb.hdcb .hdcb__link:hover,
.hdcb.hdcb .hdcb__link:focus,
.hdcb.hdcb .hdcb__link:active,
.hdcb.hdcb .hdcb__link:visited,
.hdcb.hdcb .hdcb__toggle,
.hdcb.hdcb .hdcb__toggle:hover,
.hdcb.hdcb .hdcb__toggle:focus,
.hdcb.hdcb .hdcb__toggle:active {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--hdcb-size);
	height: var(--hdcb-size);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	outline: none;
	background: var(--hdcb-item-bg, #6b7280);
	color: #fff;
	font-size: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: var(--hdcb-shadow);
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.hdcb.hdcb .hdcb__toggle--static {
	cursor: default;
}

.hdcb.hdcb .hdcb__link:hover,
.hdcb.hdcb .hdcb__toggle:not(.hdcb__toggle--static):hover {
	transform: scale(1.08);
}

.hdcb.hdcb .hdcb__link:focus-visible,
.hdcb.hdcb .hdcb__toggle:focus-visible {
	outline: 2px solid var(--hdcb-item-bg);
	outline-offset: 3px;
}

.hdcb .hdcb-icon {
	width: var(--hdcb-icon-scale);
	height: var(--hdcb-icon-scale);
	display: block;
}

/* Ảnh tùy chỉnh phủ kín nút tròn */
.hdcb .hdcb__img {
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Icon trong nút bong bóng: đổi qua lại giữa icon chat và dấu X */
.hdcb .hdcb__toggle-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease, transform 0.25s ease;
}

.hdcb .hdcb__toggle-icon--close {
	opacity: 0;
	transform: rotate(-90deg);
}

.hdcb.is-open .hdcb__toggle:not(.hdcb__toggle--static) .hdcb__toggle-icon--open {
	opacity: 0;
	transform: rotate(90deg);
}

.hdcb.is-open .hdcb__toggle .hdcb__toggle-icon--close {
	opacity: 1;
	transform: none;
}

/* Tooltip tên kênh khi rê chuột */
.hdcb .hdcb__tooltip {
	position: absolute;
	top: 50%;
	padding: 6px 10px;
	border-radius: 6px;
	background: #1f2937;
	color: #fff;
	font-size: var(--hdcb-tip-size, 13px);
	font-weight: var(--hdcb-font-weight, 500);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity 0.2s ease, visibility 0.2s;
}

.hdcb--right .hdcb__tooltip {
	right: calc(100% + 10px);
}

.hdcb--left .hdcb__tooltip {
	left: calc(100% + 10px);
}

@media (hover: hover) {
	.hdcb .hdcb__link:hover .hdcb__tooltip,
	.hdcb .hdcb__link:focus-visible .hdcb__tooltip {
		opacity: 1;
		visibility: visible;
	}
}

/* Chữ chào (CTA) */
.hdcb__main {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hdcb--left .hdcb__main {
	flex-direction: row-reverse;
}

.hdcb .hdcb__cta {
	max-width: 240px;
	padding: 8px 14px;
	border-radius: 8px;
	background: var(--hdcb-cta-bg, #fff);
	color: var(--hdcb-cta-color, #1f2937);
	font-size: var(--hdcb-cta-size, 14px);
	font-weight: var(--hdcb-font-weight, 500);
	box-shadow: var(--hdcb-shadow);
}

/* Hiệu ứng: bong bóng đang đóng → hiệu ứng ở bong bóng; chế độ Mở sẵn / Hiện thẳng → hiệu ứng lần lượt từng kênh */
.hdcb--fx-shake:not(.is-open) .hdcb__toggle,
.hdcb--fx-shake.is-open:not(.hdcb--mode-bubble) .hdcb__link {
	animation: hdcb-shake 3s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * 0.2s);
}

.hdcb--fx-pulse:not(.is-open) .hdcb__toggle,
.hdcb--fx-pulse.is-open:not(.hdcb--mode-bubble) .hdcb__link {
	animation: hdcb-pulse 2s ease-out infinite;
	animation-delay: calc(var(--i, 0) * 0.2s);
}

@keyframes hdcb-shake {
	0%, 14%, 100% { transform: rotate(0); }
	2%, 6%, 10% { transform: rotate(-14deg); }
	4%, 8%, 12% { transform: rotate(14deg); }
}

@keyframes hdcb-pulse {
	0% { box-shadow: var(--hdcb-shadow), 0 0 0 0 color-mix(in srgb, var(--hdcb-item-bg) 55%, transparent); }
	70% { box-shadow: var(--hdcb-shadow), 0 0 0 14px transparent; }
	100% { box-shadow: var(--hdcb-shadow), 0 0 0 0 transparent; }
}

/* Breakpoint mobile — khớp với mobile của Elementor */
@media (max-width: 767px) {
	.hdcb {
		--hdcb-size: var(--hdcb-size-m, 48px);
		--hdcb-gap: 10px;
	}

	.hdcb .hdcb__item--hide-mobile {
		display: none;
	}

	.hdcb .hdcb__cta {
		max-width: 60vw;
	}
}

@media (min-width: 768px) {
	.hdcb .hdcb__item--hide-desktop {
		display: none;
	}
}

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

@media print {
	.hdcb {
		display: none;
	}
}