/* ID Contact Buttons – frontend */
.idcb {
	--idcb-size: 52px;
	--idcb-s: var(--idcb-size);
	--idcb-x: 20px;
	--idcb-y: 24px;
	--idcb-gap: 14px;
	--idcb-n: 1;
	--idcb-fab: #e53935;
	--idcb-bar-bg: #fff;
	--idcb-bar-text: #333;
	--idcb-r1: 12px;
	--idcb-r2: 24px;
	position: fixed;
	bottom: var(--idcb-y);
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--idcb-gap);
	margin: 0;
	padding: 0;
	font: 500 14px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	-webkit-tap-highlight-color: transparent;
}
.idcb *, .idcb *::before, .idcb *::after { box-sizing: border-box; }
.idcb--right { right: var(--idcb-x); }
.idcb--left { left: var(--idcb-x); align-items: flex-start; }
.idcb[data-mode="hidden"] { display: none !important; }
.idcb[data-device="m"] { --idcb-s: calc(var(--idcb-size) * .86); --idcb-gap: 12px; }

.idcb__list {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: var(--idcb-gap);
	margin: 0;
	padding: 0;
}

/* ---------- Nút ---------- */
.idcb__item {
	position: relative;
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none !important;
	outline: none;
	animation: idcb-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
	animation-delay: calc(var(--i, 0) * 70ms + .2s);
}
.idcb__btn {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--idcb-s);
	height: var(--idcb-s);
	border-radius: 50%;
	background: var(--idcb-c);
	color: #fff;
	box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .35);
	transition: scale .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.idcb__icon {
	display: flex;
	width: 54%;
	height: 54%;
	pointer-events: none;
}
.idcb__icon svg, .idcb__icon img { display: block; width: 100%; height: 100%; }
.idcb__icon svg { fill: currentColor; }
.idcb__icon img { object-fit: contain; }
.idcb__icon .idcb-ink-stroke { stroke: var(--idcb-c); }
.idcb__item--zalo .idcb__icon { width: 66%; height: 66%; }
.idcb__item--tiktok .idcb__icon { width: 60%; height: 60%; }

/* Nền thương hiệu (khi giữ màu mặc định) */
.idcb__item--messenger.is-brand .idcb__btn { background: linear-gradient(45deg, #0099ff 0%, #a033ff 55%, #ff5280 85%, #ff7061 100%); }
.idcb__item--lazada.is-brand .idcb__btn { background: linear-gradient(135deg, #ffa200 0%, #ff5a00 32%, #f7007c 68%, #6f1de0 100%); }
.idcb__item--lazada.is-brand .idcb__icon .idcb-ink-stroke { stroke: #f7007c; }
.idcb__icon .idcb-ink { fill: var(--idcb-c); }

@media (hover: hover) {
	.idcb__item:hover .idcb__btn { scale: 1.1; box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .45); }
}
.idcb__item:focus-visible .idcb__btn,
.idcb__toggle:focus-visible .idcb__btn { outline: 3px solid var(--idcb-c); outline-offset: 3px; }

.idcb__label, .idcb__pill { display: none; }

/* ---------- Kiểu FLOAT (nút nổi xếp dọc) ---------- */
.idcb[data-mode="float"] .idcb__label {
	display: block;
	position: absolute;
	top: 50%;
	right: calc(100% + 14px);
	padding: 7px 12px;
	border-radius: 8px;
	background: #1f2937;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(8px, -50%);
	transition: opacity .2s, transform .25s, visibility .2s;
}
.idcb[data-mode="float"] .idcb__label::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -5px;
	border: 5px solid transparent;
	border-left-color: #1f2937;
}
.idcb--left[data-mode="float"] .idcb__label { right: auto; left: calc(100% + 14px); transform: translate(-8px, -50%); }
.idcb--left[data-mode="float"] .idcb__label::after { left: auto; right: 100%; border-left-color: transparent; border-right-color: #1f2937; }
@media (hover: hover) {
	.idcb--tips[data-mode="float"] .idcb__item:hover .idcb__label { opacity: 1; visibility: visible; transform: translate(0, -50%); }
}
.idcb--tips[data-mode="float"] .idcb__item:focus-visible .idcb__label { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.idcb[data-mode="float"] .idcb__item.has-pill .idcb__label { display: none; }

/* Viên hotline hiển thị số điện thoại */
.idcb[data-mode="float"] .idcb__pill {
	display: flex;
	align-items: center;
	position: absolute;
	z-index: -1;
	top: 50%;
	right: calc(var(--idcb-s) / 2);
	height: calc(var(--idcb-s) * .74);
	padding: 0 calc(var(--idcb-s) / 2 + 12px) 0 18px;
	border-radius: 999px;
	background: var(--idcb-c);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .3px;
	white-space: nowrap;
	box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .35);
	transform: translateY(-50%);
	transform-origin: right center;
	animation: idcb-pill .6s .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.idcb--left[data-mode="float"] .idcb__pill {
	right: auto;
	left: calc(var(--idcb-s) / 2);
	padding: 0 18px 0 calc(var(--idcb-s) / 2 + 12px);
	transform-origin: left center;
}
.idcb[data-device="m"][data-mode="float"] .idcb__pill { font-size: 14px; }

/* ---------- Kiểu FAB (1 nút gộp, bấm để mở) ---------- */
.idcb__toggle { display: none; }
.idcb[data-mode="fab"] .idcb__toggle {
	--idcb-c: var(--idcb-fab);
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	animation: idcb-in .55s .2s cubic-bezier(.34, 1.56, .64, 1) both;
}
.idcb--left[data-mode="fab"] .idcb__toggle { flex-direction: row; }
.idcb__toggle .idcb__icon {
	position: absolute;
	width: 46%;
	height: 46%;
	transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.idcb__toggle .idcb__icon--close { opacity: 0; transform: rotate(-90deg) scale(.4); }
.idcb.is-open .idcb__toggle .idcb__icon--open { opacity: 0; transform: rotate(90deg) scale(.4); }
.idcb.is-open .idcb__toggle .idcb__icon--close { opacity: 1; transform: none; }
.idcb[data-mode="fab"]:not(.is-open) .idcb__toggle .idcb__btn { animation: idcb-pulse 1.8s infinite; }
.idcb[data-mode="fab"]:not(.is-open) .idcb__toggle .idcb__icon--open { animation: idcb-wiggle 3s 1s infinite; }
.idcb__toggle-label {
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	color: #1f2937;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
	transition: opacity .2s, transform .25s;
}
.idcb.is-open .idcb__toggle-label { opacity: 0; transform: scale(.8); pointer-events: none; }

.idcb[data-mode="fab"] .idcb__list { padding-right: calc((var(--idcb-size) - var(--idcb-s) * .88) / 2); }
.idcb--left[data-mode="fab"] .idcb__list { padding-right: 0; padding-left: calc((var(--idcb-size) - var(--idcb-s) * .88) / 2); }
.idcb[data-mode="fab"] .idcb__item {
	flex-direction: row-reverse;
	gap: 10px;
	animation: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px) scale(.5);
	transition: opacity .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1), visibility .2s;
	transition-delay: calc((var(--idcb-n) - 1 - var(--i, 0)) * 40ms);
}
.idcb--left[data-mode="fab"] .idcb__item { flex-direction: row; }
.idcb[data-mode="fab"].is-open .idcb__item { opacity: 1; visibility: visible; transform: none; }
.idcb[data-mode="fab"] .idcb__btn { width: calc(var(--idcb-s) * .88); height: calc(var(--idcb-s) * .88); }
.idcb[data-mode="fab"] .idcb__toggle .idcb__btn { width: var(--idcb-size); height: var(--idcb-size); }
.idcb[data-mode="fab"] .idcb__label {
	display: block;
	padding: 6px 12px;
	border-radius: 8px;
	background: #fff;
	color: #1f2937;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

/* ---------- Kiểu BAR (thanh cố định dưới đáy – mobile) ---------- */
.idcb[data-mode="bar"] {
	--idcb-r1: 6px;
	--idcb-r2: 10px;
	left: 0;
	right: 0;
	bottom: 0;
	align-items: stretch;
	gap: 0;
	padding: 0 4px env(safe-area-inset-bottom, 0);
	border-radius: 16px 16px 0 0;
	background: var(--idcb-bar-bg);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, .12);
	animation: idcb-bar-in .45s cubic-bezier(.22, 1, .36, 1) both;
}
.idcb[data-mode="bar"] .idcb__list {
	flex-direction: row;
	gap: 0;
	padding: 10px 0 8px;
	overflow-x: auto;
	scrollbar-width: none;
}
.idcb[data-mode="bar"] .idcb__list::-webkit-scrollbar { display: none; }
.idcb[data-mode="bar"] .idcb__item {
	flex: 1 0 64px;
	flex-direction: column;
	justify-content: flex-start;
	gap: 5px;
	min-width: 0;
	padding: 0 2px;
	animation-name: idcb-up;
}
.idcb[data-mode="bar"] .idcb__btn {
	width: 40px;
	height: 40px;
	box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .35);
}
.idcb[data-mode="bar"] .idcb__label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	color: var(--idcb-bar-text);
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.idcb[data-mode="bar"] .idcb__item:active .idcb__btn { scale: .9; }
body.idcb-bar-on { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- Hiệu ứng ---------- */
.idcb--anim-pulse .is-anim .idcb__btn,
.idcb--anim-shake .is-anim .idcb__btn {
	animation: idcb-pulse 1.8s infinite;
	animation-delay: calc(var(--i, 0) * .3s);
}
.idcb--anim-shake .is-anim .idcb__icon { animation: idcb-shake 1.6s infinite; }
/* Nút gọi luôn rung chuông khi có bật hiệu ứng */
.idcb:not(.idcb--anim-none) .idcb__item--phone .idcb__icon { animation: idcb-shake 1.6s infinite; }
.idcb--anim-bounce .is-anim .idcb__btn {
	animation: idcb-bounce 2.4s infinite;
	animation-delay: calc(var(--i, 0) * .25s + .8s);
}

@keyframes idcb-in {
	from { opacity: 0; transform: translateY(18px) scale(.5); }
	to { opacity: 1; transform: none; }
}
@keyframes idcb-up {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}
@keyframes idcb-bar-in {
	from { transform: translateY(100%); }
	to { transform: none; }
}
@keyframes idcb-pill {
	from { opacity: 0; transform: translateY(-50%) scaleX(.3); }
	to { opacity: 1; transform: translateY(-50%) scaleX(1); }
}
@keyframes idcb-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--idcb-c) 60%, transparent),
			0 0 0 0 color-mix(in srgb, var(--idcb-c) 35%, transparent);
	}
	75%, 100% {
		box-shadow: 0 0 0 var(--idcb-r1) transparent, 0 0 0 var(--idcb-r2) transparent;
	}
}
@keyframes idcb-shake {
	0%, 50%, 100% { transform: rotate(0); }
	5%, 15%, 25%, 35% { transform: rotate(-16deg); }
	10%, 20%, 30%, 40% { transform: rotate(16deg); }
}
@keyframes idcb-wiggle {
	0%, 20%, 100% { rotate: 0deg; }
	4%, 12% { rotate: -12deg; }
	8%, 16% { rotate: 12deg; }
}
@keyframes idcb-bounce {
	0%, 30%, 55%, 100% { transform: translateY(0); }
	15% { transform: translateY(-12px); }
	42% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
	.idcb--rm, .idcb--rm *, .idcb--rm *::before, .idcb--rm *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

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