/* ==========================================================================
   Intracom - Contact | Frontend
   ========================================================================== */

#lhcd-widget,
#lhcd-widget *,
#lhcd-widget *::before,
#lhcd-widget *::after {
	box-sizing: border-box;
}

.lhcd-widget {
	position: fixed;
	bottom: var(--lhcd-y, 20px);
	z-index: 99998;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.4;
}

.lhcd-widget.lhcd-pos-right { right: var(--lhcd-x, 20px); }
.lhcd-widget.lhcd-pos-left  { left: var(--lhcd-x, 20px); }

/* ==========================================================================
   MẪU 1 — Popup danh sách kênh
   ========================================================================== */
.lhcd-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 20px 9px 9px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: #ffffff;
	color: #1f2937;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.lhcd-btn::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 999px;
	background: linear-gradient(120deg, var(--lhcd-g1), var(--lhcd-g2), var(--lhcd-g3), var(--lhcd-g1));
	background-size: 300% 300%;
	z-index: -1;
	animation: lhcd-flow 6s ease infinite;
	filter: saturate(1.1);
}

@keyframes lhcd-flow {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.lhcd-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.lhcd-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #1f2430;
	color: #ffffff;
	flex: 0 0 auto;
}

.lhcd-btn__icon svg { width: 20px; height: 20px; display: block; }

.lhcd-btn__label { white-space: nowrap; padding-right: 2px; }

.lhcd-btn__dot {
	position: absolute;
	top: -1px;
	right: -1px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ef4444;
	border: 2px solid #ffffff;
	box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
	animation: lhcd-pulse 1.8s infinite;
}

@keyframes lhcd-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
	70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Popup panel */
.lhcd-panel {
	position: absolute;
	bottom: calc(100% + 14px);
	width: 320px;
	max-width: calc(100vw - 32px);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.98);
	transform-origin: bottom right;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
	pointer-events: none;
}

.lhcd-pos-right .lhcd-panel { right: 0; transform-origin: bottom right; }
.lhcd-pos-left  .lhcd-panel { left: 0;  transform-origin: bottom left; }

.lhcd-widget.is-open .lhcd-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.lhcd-panel__inner {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
	overflow: hidden;
}

.lhcd-panel__arrow {
	position: absolute;
	bottom: -7px;
	width: 16px;
	height: 16px;
	background: #ffffff;
	transform: rotate(45deg);
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.08);
}

.lhcd-pos-right .lhcd-panel__arrow { right: 26px; }
.lhcd-pos-left  .lhcd-panel__arrow { left: 26px; }

.lhcd-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	text-decoration: none;
	color: #111827;
	border-bottom: 1px solid #eef0f2;
	transition: background 0.15s ease;
}

.lhcd-item:last-child { border-bottom: 0; }
.lhcd-item:hover { background: #f7f8fa; }

.lhcd-item__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: #ffffff;
	flex: 0 0 auto;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.lhcd-item__svg { width: 24px; height: 24px; display: block; }

.lhcd-item__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: 4px;
	background: transparent;
}

.lhcd-item__text { display: flex; flex-direction: column; min-width: 0; }
.lhcd-item__title { font-size: 15px; font-weight: 700; color: #1f2937; line-height: 1.3; }
.lhcd-item__sub { font-size: 12.5px; color: #9aa0a6; line-height: 1.35; margin-top: 2px; }

/* ==========================================================================
   MẪU 2 — Cột icon nổi + tooltip
   ========================================================================== */
.lhcd-tpl-icons .lhcd-float {
	list-style: none;
	margin: 0;
	padding: 8px;
	background: #ffffff;
	border-radius: 40px;
	box-shadow: 0 4px 12px rgba(78, 81, 83, 0.14);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lhcd-tpl-icons .lhcd-float > li { margin: 0; padding: 0; list-style: none; }

.lhcd-float__item {
	position: relative;
	display: block;
	width: 44px;
	height: 44px;
	text-decoration: none;
}

.lhcd-float__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10);
}

.lhcd-float__icon.is-image { background: transparent; }

.lhcd-tpl-icons .lhcd-float__icon .lhcd-item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0;
}

.lhcd-tpl-icons .lhcd-float__icon .lhcd-item__svg { width: 24px; height: 24px; }

/* Tooltip */
.lhcd-float__tip {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 300;
	text-transform: uppercase;
	color: #ffffff;
	white-space: nowrap;
	background: rgba(0, 0, 0, 0.8);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s linear, visibility 0.2s linear;
}

.lhcd-pos-right .lhcd-float__tip { right: calc(100% + 15px); }
.lhcd-pos-left  .lhcd-float__tip { left: calc(100% + 15px); }

.lhcd-float__tip::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border-width: 5px;
	border-style: solid;
}

.lhcd-pos-right .lhcd-float__tip::after {
	left: 100%;
	border-color: transparent transparent transparent rgba(0, 0, 0, 0.8);
}

.lhcd-pos-left .lhcd-float__tip::after {
	right: 100%;
	border-color: transparent rgba(0, 0, 0, 0.8) transparent transparent;
}

.lhcd-float__item:hover .lhcd-float__tip { visibility: visible; opacity: 1; }

/* Hiệu ứng dùng chung */
@keyframes lhcd-shake {
	0%, 100% { transform: rotate(0deg); }
	10%, 30%, 50%, 70%, 90% { transform: rotate(-15deg); }
	20%, 40%, 60%, 80% { transform: rotate(15deg); }
}

@keyframes lhcd-ring {
	0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.45); }
	70%  { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
	100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.lhcd-anim-pulse .lhcd-float__icon { animation: lhcd-ring 2s infinite; }

.lhcd-anim-shake .lhcd-float__icon img,
.lhcd-anim-shake .lhcd-float__icon svg {
	animation: lhcd-shake 2s infinite ease-in-out;
	will-change: transform;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 480px) {
	.lhcd-tpl-popup .lhcd-btn__label { display: none; }
	.lhcd-tpl-popup .lhcd-btn { padding: 9px; }
	.lhcd-panel { width: min(320px, calc(100vw - 24px)); }
}

/* ==========================================================================
   Giảm chuyển động — CHỈ tắt khi người dùng chọn "tôn trọng giảm chuyển động"
   (mặc định widget có class .lhcd-force-motion nên animation vẫn chạy).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.lhcd-widget:not(.lhcd-force-motion) .lhcd-btn::before,
	.lhcd-widget:not(.lhcd-force-motion) .lhcd-btn__dot,
	.lhcd-widget:not(.lhcd-force-motion) .lhcd-anim-pulse .lhcd-float__icon,
	.lhcd-widget:not(.lhcd-force-motion) .lhcd-anim-shake .lhcd-float__icon img,
	.lhcd-widget:not(.lhcd-force-motion) .lhcd-anim-shake .lhcd-float__icon svg {
		animation: none;
	}
	.lhcd-widget:not(.lhcd-force-motion) .lhcd-panel {
		transition: opacity 0.15s ease, visibility 0.15s;
	}
}