/* LH Contact Buttons v2 – speed-dial */
#lhcb{
	--spring:cubic-bezier(.34,1.56,.64,1);
	--lhcb-dot:calc(var(--lhcb-size,56px) * .86);
	position:fixed;
	bottom:calc(var(--lhcb-y,20px) + env(safe-area-inset-bottom,0px));
	z-index:var(--lhcb-z,9999);
	display:flex;flex-direction:column;
	gap:calc(var(--lhcb-gap,12px) + 8px);
	margin:0;padding:0;
	font-family:inherit;font-size:14px;line-height:1.2;
	-webkit-tap-highlight-color:transparent;
}
#lhcb *,#lhcb *::before,#lhcb *::after{box-sizing:border-box}
#lhcb.lhcb--right{right:var(--lhcb-x,16px);align-items:flex-end}
#lhcb.lhcb--left{left:var(--lhcb-x,16px);align-items:flex-start}

/* ---------- Backdrop ---------- */
#lhcb .lhcb-backdrop{
	position:fixed;inset:0;z-index:-1;
	opacity:0;pointer-events:none;
	background:radial-gradient(ellipse 110% 80% at var(--lhcb-ox,100%) 100%,rgba(24,14,9,.52),rgba(24,14,9,.18) 45%,transparent 75%);
	transition:opacity .45s ease;
}
#lhcb.is-open .lhcb-backdrop{opacity:1;pointer-events:auto}

/* ---------- List ---------- */
#lhcb .lhcb-list{
	list-style:none;margin:0;padding:0;
	display:flex;flex-direction:column;gap:var(--lhcb-gap,12px);
}
#lhcb.lhcb--right .lhcb-list{align-items:flex-end}
#lhcb.lhcb--left .lhcb-list{align-items:flex-start}

#lhcb .lhcb-li{
	--pad:calc((var(--lhcb-size,56px) - var(--lhcb-dot)) / 2);
	--din:calc(var(--k) * 75ms + 60ms);
	--dout:calc((var(--cnt) - 1 - var(--k)) * 45ms);
	margin:0;list-style:none;display:flex;
	opacity:0;visibility:hidden;pointer-events:none;
	transform:translateY(calc((var(--k) + 1) * (var(--lhcb-dot) + var(--lhcb-gap,12px)))) scale(.3);
	transition:
		transform .32s cubic-bezier(.55,0,.7,.3) var(--dout),
		opacity .22s ease var(--dout),
		visibility 0s linear calc(var(--dout) + .32s);
}
#lhcb.lhcb--right .lhcb-li{padding-right:var(--pad);transform-origin:100% 50%;justify-content:flex-end}
#lhcb.lhcb--left  .lhcb-li{padding-left:var(--pad);transform-origin:0 50%;justify-content:flex-start}

#lhcb.is-open .lhcb-li{
	opacity:1;visibility:visible;pointer-events:auto;transform:none;
	transition:
		transform .65s var(--spring) var(--din),
		opacity .25s ease var(--din),
		visibility 0s linear var(--din);
}

/* ---------- Item ---------- */
#lhcb .lhcb-item{
	display:inline-flex;align-items:center;gap:10px;
	text-decoration:none;color:inherit;background:none;border:0;box-shadow:none;outline:0;
}
#lhcb.lhcb--left .lhcb-item{flex-direction:row-reverse}

#lhcb .lhcb-dot{
	width:var(--lhcb-dot);height:var(--lhcb-dot);flex:none;
	display:grid;place-items:center;border-radius:50%;
	color:#fff;font-weight:700;font-size:calc(var(--lhcb-dot) * .27);line-height:1;letter-spacing:0;
	background-color:rgb(var(--rgb));
	background-image:radial-gradient(circle at 30% 22%,rgba(255,255,255,.32),transparent 62%);
	box-shadow:0 8px 20px -6px rgba(var(--rgb),.75),0 2px 6px rgba(0,0,0,.18);
	transition:transform .3s var(--spring),box-shadow .3s ease;
}
#lhcb .lhcb-dot svg{width:50%;height:50%;display:block;overflow:visible}
#lhcb .lhcb-item--fb .lhcb-dot svg{width:56%;height:56%}
#lhcb .lhcb-item--fb .lhcb-dot path+path{fill:rgb(var(--rgb))}
#lhcb .lhcb-item:hover .lhcb-dot,
#lhcb .lhcb-item:focus-visible .lhcb-dot{
	transform:scale(1.12);
	box-shadow:0 12px 26px -6px rgba(var(--rgb),.9),0 2px 6px rgba(0,0,0,.2);
}
#lhcb .lhcb-item:active .lhcb-dot{transform:scale(.94)}
#lhcb .lhcb-item:focus-visible .lhcb-dot{outline:3px solid rgba(var(--rgb),.45);outline-offset:3px}

/* Tooltip pill: "mở cuộn" từ nút tròn ra */
#lhcb .lhcb-tip{
	display:block;white-space:nowrap;
	padding:9px 16px;border-radius:999px;
	background:var(--lhcb-tipbg,#fff);color:var(--lhcb-tipfg,#2b1b14);
	font-weight:600;font-size:14px;line-height:1.2;
	box-shadow:0 6px 20px -6px rgba(0,0,0,.35),0 0 0 1px rgba(var(--main-rgb),.12);
	opacity:0;
	transition:clip-path .2s ease,opacity .15s ease,transform .2s ease;
}
#lhcb.lhcb--right .lhcb-tip{transform:translateX(18px);clip-path:inset(-36px -36px -36px 100%)}
#lhcb.lhcb--left  .lhcb-tip{transform:translateX(-18px);clip-path:inset(-36px 100% -36px -36px)}
#lhcb.is-open .lhcb-tip{
	opacity:1;transform:none;clip-path:inset(-36px);
	transition:
		clip-path .55s cubic-bezier(.22,1,.36,1) calc(var(--din) + .14s),
		opacity .2s ease calc(var(--din) + .14s),
		transform .55s cubic-bezier(.22,1,.36,1) calc(var(--din) + .14s);
}
#lhcb.is-open.lhcb--right .lhcb-item:hover .lhcb-tip{transform:translateX(-4px);transition:transform .25s ease}
#lhcb.is-open.lhcb--left  .lhcb-item:hover .lhcb-tip{transform:translateX(4px);transition:transform .25s ease}

/* Chuông điện thoại rung sau khi mở */
#lhcb.is-open .lhcb-item--call .lhcb-dot svg{animation:lhcbRing .9s ease calc(var(--din) + .45s) 1}
#lhcb .lhcb-item--call:hover .lhcb-dot svg{animation:lhcbRing .7s ease 1}

/* ---------- Main toggle ---------- */
#lhcb .lhcb-main{position:relative;width:var(--lhcb-size,56px);height:var(--lhcb-size,56px);flex:none}

#lhcb .lhcb-ring{
	position:absolute;inset:-7px;border-radius:50%;
	border:2px solid rgba(var(--main-rgb),.16);
	pointer-events:none;
	transition:transform .6s var(--spring);
}
#lhcb .lhcb-ring::before{
	content:"";position:absolute;inset:-2px;border-radius:50%;padding:2px;
	background:conic-gradient(rgba(var(--main-rgb),0),rgba(var(--main-rgb),.9) 28%,rgba(var(--main-rgb),0) 52%);
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;mask-composite:exclude;
	animation:lhcbSpin 3.2s linear infinite;
}
#lhcb.is-open .lhcb-ring{transform:scale(1.14)}

#lhcb .lhcb-pulse{
	position:absolute;inset:0;border-radius:50%;z-index:0;pointer-events:none;
	background:rgba(var(--main-rgb),.38);
	animation:lhcbPulse 2.8s cubic-bezier(.2,.6,.3,1) infinite;
}
#lhcb .lhcb-pulse--2{animation-delay:1.4s}
#lhcb.is-open .lhcb-pulse{animation:none;opacity:0}

#lhcb .lhcb-toggle{
	-webkit-appearance:none;appearance:none;
	position:relative;z-index:2;display:block;width:100%;height:100%;
	margin:0;padding:0;border:0;border-radius:50%;cursor:pointer;
	color:#fff;
	background-color:var(--lhcb-main,#2b1b14);
	background-image:radial-gradient(circle at 30% 22%,rgba(255,255,255,.22),transparent 60%);
	box-shadow:0 10px 24px -8px rgba(var(--main-rgb),.85),0 2px 8px rgba(0,0,0,.25);
	transition:transform .35s var(--spring);
}
#lhcb .lhcb-toggle:hover{transform:scale(1.07)}
#lhcb .lhcb-toggle:active{transform:scale(.92)}
#lhcb .lhcb-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px rgba(var(--main-rgb),.7)}

#lhcb .lhcb-ico{
	position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
	transition:transform .5s var(--spring),opacity .25s ease;
}
#lhcb .lhcb-ico svg{width:46%;height:46%;display:block;overflow:visible}

#lhcb .lhcb-ico--chat svg{animation:lhcbWiggle 4.5s ease-in-out 1.5s infinite;transform-origin:50% 60%}
#lhcb .lhcb-ico--chat circle{
	fill:var(--lhcb-main,#2b1b14);
	transform-box:fill-box;transform-origin:center;
	animation:lhcbType 4.5s ease-in-out infinite;
}
#lhcb .lhcb-ico--chat circle:nth-child(2){animation-delay:.12s}
#lhcb .lhcb-ico--chat circle:nth-child(3){animation-delay:.24s}

#lhcb .lhcb-ico--close{opacity:0;transform:rotate(-90deg) scale(.3)}
#lhcb .lhcb-ico--close path{
	fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;
	stroke-dasharray:1;stroke-dashoffset:1;
	transition:stroke-dashoffset .25s ease;
}
#lhcb.is-open .lhcb-ico--close{opacity:1;transform:none}
#lhcb.is-open .lhcb-ico--close path{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease .12s}
#lhcb.is-open .lhcb-ico--close path:nth-child(2){transition-delay:.26s}
#lhcb.is-open .lhcb-ico--chat{opacity:0;transform:rotate(90deg) scale(.3)}

/* ---------- Keyframes ---------- */
@keyframes lhcbSpin{to{transform:rotate(360deg)}}
@keyframes lhcbPulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.1);opacity:0}}
@keyframes lhcbWiggle{
	0%,14%,100%{transform:rotate(0)}
	3%{transform:rotate(-14deg)}6%{transform:rotate(12deg)}
	9%{transform:rotate(-8deg)}12%{transform:rotate(4deg)}
}
@keyframes lhcbType{
	0%,55%,100%{transform:translateY(0) scale(1)}
	65%{transform:translateY(-1.8px) scale(1.25)}
	75%{transform:translateY(0) scale(1)}
}
@keyframes lhcbRing{
	0%,100%{transform:rotate(0)}
	15%{transform:rotate(-18deg)}30%{transform:rotate(16deg)}
	45%{transform:rotate(-12deg)}60%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}
}

/* ---------- Mobile ---------- */
@media (max-width:480px){
	#lhcb .lhcb-tip{font-size:13px;padding:8px 14px}
}

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion:reduce){
	#lhcb *,#lhcb *::before,#lhcb *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}