/* CẤU HÌNH MÀU SẮC TẠI ĐÂY */
:root {
  --color-main: #27ae60; /* Xanh lá đậm (Hợp mệnh) */
  --color-active: #1e8449; /* Xanh khi nhấn (Đậm hơn chút) */
  --color-messenger: #0084ff;
  --color-hotline: #2ecc71;
}

.circular-menu-wrapper {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 9999;
}

.main-btn {
  width: 60px;
  height: 60px;
  background: var(--color-main);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(39, 174, 96, 0.4);
  position: relative;
  z-index: 2;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hiệu ứng sóng lan tỏa màu xanh */
.main-btn::before {
  content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%;
  background: var(--color-main); animation: pulse-green 2s infinite; z-index: -1;
}

.menu-item {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: absolute;
  top: 6px; left: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.menu-item img { width: 100%; height: 100%; border-radius: 50%; }
.menu-item svg { width: 24px; height: 24px; }

/* Màu các nút con */
.item-1 { background: #fff; } 
.item-3 { background: var(--color-hotline); }

/* Trạng thái mở menu (Bung ra hướng đồng hồ) */
.active .item-1 { opacity: 1; transform: translate(-80px, -20px); }    /* 10h */
.active .item-3 { opacity: 1; transform: translate(0, -90px); }       /* 12h */

/* Xoay icon và đổi màu khi mở */
.active .main-btn { 
  transform: rotate(135deg); 
  background: var(--color-active);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

@keyframes pulse-green {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

.btn-icon { width: 34px; height: 34px; display: flex; }

/* Mobile tối ưu */
@media (max-width: 768px) {
  .circular-menu-wrapper { right: 30px; bottom: 30px; }
  .active .item-1 { transform: translate(-70px, -15px); }
  .active .item-3 { transform: translate(0, -80px); }
}