.g-contact-item { text-decoration: none !important; transition: 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.g-icon-wrapper { width: 50px; height: 50px; border-radius: 50%; background: #ffffffdb; display: flex; align-items: center; justify-content: center; padding: 2px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); border: 1px solid transparent; position: relative; z-index: 2; box-sizing: border-box; }
.g-icon-wrapper img { width: 100%; height: 100%; object-fit: contain; }
.g-icon-text { font-size: 11px; font-family: sans-serif; white-space: nowrap; font-weight: normal; margin-top: 5px; text-align: center; }

@keyframes g-shake-strong { 0%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-10deg); } 20%, 40% { transform: rotate(12deg); } }

.g-pulse-green .g-icon-wrapper { animation: g-shake-strong 1.5s infinite, pulse-green 1.5s infinite; border: 1px solid #4caf50; }
.g-pulse-blue .g-icon-wrapper { animation: g-shake-strong 1.5s infinite, pulse-blue 1.5s infinite; border: 1px solid #0072ff;}
.g-pulse-yellow .g-icon-wrapper { animation: g-shake-strong 1.5s infinite, pulse-yellow 1.5s infinite; border: 1px solid #fbbc05;}
.g-pulse-cyan .g-icon-wrapper { animation: g-shake-strong 1.5s infinite, pulse-cyan 1.5s infinite; border: 1px solid #00c6ff;}
.g-pulse-lightgreen .g-icon-wrapper { animation: g-shake-strong 1.5s infinite, pulse-lightgreen 1.5s infinite; border: 1px solid #56ab2f;}

@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(76, 175, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } }
@keyframes pulse-blue { 0% { box-shadow: 0 0 0 0 rgba(0, 114, 255, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(0, 114, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 114, 255, 0); } }
@keyframes pulse-yellow { 0% { box-shadow: 0 0 0 0 rgba(251, 188, 5, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(251, 188, 5, 0); } 100% { box-shadow: 0 0 0 0 rgba(251, 188, 5, 0); } }
@keyframes pulse-cyan { 0% { box-shadow: 0 0 0 0 rgba(0, 198, 255, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(0, 198, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 198, 255, 0); } }
@keyframes pulse-lightgreen { 0% { box-shadow: 0 0 0 0 rgba(86, 171, 47, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(86, 171, 47, 0); } 100% { box-shadow: 0 0 0 0 rgba(86, 171, 47, 0); } }

/* CỘT DỌC */
.g-layout-vertical { position: fixed; display: flex; flex-direction: column; gap: 8px; z-index: 9999999; }
.g-layout-vertical .g-icon-text { padding: 3px 8px; border-radius: 12px; }

/* THANH NGANG (v22: nền tách ra .lb-bar-bg để khoét tròn quanh nút Gọi, giữ nguyên màu / gradient / độ trong suốt) */
.g-layout-bar { position: fixed; bottom: 15px; left: 10%; right: 10%; width: 80%; height: 58px; display: flex; justify-content: space-around; align-items: center; padding: 0 10px; z-index: 9999999; box-sizing: border-box; }
.g-layout-bar .lb-bar-bg { position: absolute; inset: 0; border-radius: 30px; z-index: 0; pointer-events: none; }
.g-layout-bar.lb-mb-classic { filter: drop-shadow(0 6px 10px rgba(0,0,0,.22)); }
.g-layout-bar .g-contact-item { top: -15px; z-index: 1; }
.g-layout-bar .lb-empty { flex: 0 0 55px; }
.g-layout-bar .g-icon-wrapper { width: 55px; height: 55px; background: #fff; }
.g-layout-bar .g-icon-text { margin-top: 3px; }
/* Mẫu mặc định: nút Gọi nhô 2/3, thanh khoét tròn ôm 1/3 dưới nút, mép thanh thẳng */
.lb-mb-classic .lb-bar-bg { -webkit-mask: radial-gradient(circle at 50% -10px, transparent 0 35px, #000 36px); mask: radial-gradient(circle at 50% -10px, transparent 0 35px, #000 36px); }
.lb-mb-classic .g-item-center { top: 0; align-self: stretch; width: 84px; flex: 0 0 84px; }
.lb-mb-classic .g-item-center .g-icon-wrapper { position: absolute; left: 50%; top: -41px; margin-left: -29px; width: 62px; height: 62px; background: #fff; border: 1px solid #4caf50 !important; padding: 2px; }
.lb-mb-classic .g-item-center .g-icon-text { position: absolute; left: 0; right: 0; bottom: 7px; margin: 0; font-weight: 700; }
.lb-mb-classic.lb-n5 { left: 2%; right: 2%; width: 96%; padding: 0 16px; }
.lb-mb-classic.lb-n5 .lb-bar-bg { -webkit-mask: radial-gradient(circle at 50% -10px, transparent 0 33px, #000 34px); mask: radial-gradient(circle at 50% -10px, transparent 0 33px, #000 34px); }
.lb-mb-classic.lb-n5 .g-icon-wrapper, .lb-mb-classic.lb-n5 .lb-empty { width: 48px; height: 48px; flex-basis: 48px; }
.lb-mb-classic.lb-n5 .g-item-center .g-icon-wrapper { width: 58px; height: 58px; margin-left: -25px; top: -39px; }
.lb-mb-classic.lb-n5 .g-icon-text { font-size: 10.5px; }
.lb-mb-classic.lb-n5 .g-item-center .g-icon-text { bottom: 11px; }
/* Icon SVG vẽ sẵn & số điện thoại (chỉ một số mẫu hiện) */
.g-icon-wrapper svg.lb-svg { width: 100%; height: 100%; display: block; }
.g-contact-item .lb-num { display: none; }
.g-contact-item .lb-l, .g-contact-item .lb-num { line-height: 1.15; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@keyframes lb-shine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@keyframes lb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes lb-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1); } 45% { transform: scale(1.06); } }

@media (min-width: 768px) { .g-container-mb { display: none !important; } }
@media (max-width: 767px) { .g-container-pc { display: none !important; } }

.lion-loader { border: 3px solid #f3f3f3; border-top: 3px solid #ff4b2b; border-radius: 50%; width: 18px; height: 18px; animation: lion-spin 1s linear infinite; display: inline-block; vertical-align: middle; margin-right: 8px; }
@keyframes lion-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.g-pop-ol { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 10000001; backdrop-filter: blur(3px); }
.g-pop-ct { background: #fff; padding: 25px; border-radius: 20px; width: 93%; max-width: 600px; position: relative; text-align: center; }

/* v22.2: mọi nút có viền tròn theo màu nút + rung lắc + sóng lan tỏa (giống bản cũ). Màu lấy từ biến --lb-c gắn trên từng nút */
.lb-fx .g-icon-wrapper { border: 2px solid var(--lb-c, #4caf50) !important; border-radius: 50%; animation: g-shake-strong 1.5s infinite, lb-pulse 1.5s infinite; }
@keyframes lb-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lb-c, #4caf50) 70%, transparent); } 70% { box-shadow: 0 0 0 15px color-mix(in srgb, var(--lb-c, #4caf50) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* Icon đồng nhất: ảnh / SVG luôn nằm gọn trong vòng tròn, không méo */
.g-icon-wrapper img, .g-icon-wrapper svg.lb-svg { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; display: block; }
/* Chữ dưới nút trên thanh điện thoại đậm 800 */
.g-layout-bar .g-icon-text, .g-layout-bar .g-icon-text .lb-l { font-weight: 800; }