/* public/public-styles.css */

#mcb-contact-buttons-wrapper { /* Đổi từ #mcb-contact-buttons-container */
    position: fixed;
    z-index: 99999; /* Có thể tăng z-index nếu cần */
    display: flex;
    /* flex-direction và align-items sẽ được đặt bởi class vị trí dưới đây */
}

/* Vị trí */

.mcb-position-bottom-right {
    /* bottom: 25px; right: 25px; */ 
    align-items: flex-end;
    flex-direction: column-reverse;
}
.mcb-position-bottom-left {
    /* bottom: 25px; left: 25px; */ 
    align-items: flex-start;
    flex-direction: column-reverse;
}
.mcb-position-top-right {
    /* top: 25px; right: 25px; */ 
    align-items: flex-end;
    flex-direction: column;
}
.mcb-position-top-left {
    /* top: 25px; left: 25px; */
    align-items: flex-start;
    flex-direction: column;
}

.mcb-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px; /* Giữ nguyên kích thước nút bạn chọn, ví dụ 45px */
    height: 46px;
    border-radius: 50%;
    //box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
    transition: transform 0.2s ease-in-out, background-color 0.2s ease, box-shadow 0.2s ease; /* Thêm box-shadow vào transition */
    border: none!; /* Thêm để đảm bảo không có viền mặc định */
    padding: 0px !important; /* Thêm */
    cursor: pointer; /* Thêm */
}

.mcb-button:hover {
    transform: scale(1.1);
    box-shadow: 3px 3px 10px rgba(0,0,0,0.35); /* Tăng nhẹ bóng đổ khi hover */
}

.mcb-button img {
    width: 45px;  /* << SỬA LẠI: Icon phải nhỏ hơn nút */
    height: 45px; /* << SỬA LẠI */
    max-width: 100%; /* Đảm bảo không vượt quá kích thước nút cha */
    max-height: 100%;
    display: block;
    animation-name: mcb-icon-continuous-sway;
    animation-duration: 0.5s; /* Tăng thời gian để lắc chậm và mượt hơn, có thể điều chỉnh */
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite; /* Lặp lại vô hạn khi đang hiển thị */
}

/* ... (CSS cho màu sắc từng nút và responsive giữ nguyên như trước) ... */
.mcb-phone {//background-color: #2ecc71; }
.mcb-zalo { //background-color: #0068ff; }
.mcb-messenger { //background-color: #00000000; }
.mcb-tiktok { //background-color: #000000; }
.mcb-instagram {// background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}


@media (max-width: 768px) {
    /* Vị trí wrapper (sẽ bị inline style ghi đè nếu có offset X, Y) */
    .mcb-position-bottom-right { bottom: 15px; right: 15px; }
    .mcb-position-bottom-left { bottom: 15px; left: 15px; }
    .mcb-position-top-right { top: 15px; right: 15px; }
    .mcb-position-top-left { top: 15px; left: 15px; }

    #mcb-contact-buttons-wrapper {
        /* gap: 8px; */ /* Nếu bạn muốn dùng gap cho wrapper */
    }

    .mcb-button { /* Kích thước nút chung trên mobile */
        width: 43px;
        height: 43px;
    }

    .mcb-button img { /* Icon nút CON trên mobile */
        width: 26px;  /* << SỬA LẠI CHO NHỎ HƠN NÚT */
        height: 26px; /* << SỬA LẠI CHO NHỎ HƠN NÚT */
    }

    .mcb-master-button .mcb-icon-open { /* Icon nút TỔNG trên mobile */
        width: 28px;
        height: 28px;
    }

    /* Khoảng cách sub-buttons trên mobile */
    .mcb-sub-buttons {
        gap: 8px;
    }
    .mcb-position-bottom-right .mcb-sub-buttons,
    .mcb-position-bottom-left .mcb-sub-buttons {
        margin-bottom: 8px;
    }
    .mcb-position-top-right .mcb-sub-buttons,
    .mcb-position-top-left .mcb-sub-buttons {
        margin-top: 8px;
    }
}

/* Định nghĩa animation lắc lư tại chỗ liên tục */
@keyframes mcb-icon-continuous-sway {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(8deg);} /* Xoay sang phải một chút */
    50% {transform: rotate(0deg);} /* Trở về giữa */   
    75% {transform: rotate(-8deg);} /* Xoay sang trái một chút */    
    100% {transform: rotate(0deg);} /* Hoàn thành chu kỳ, trở về giữa */    
}

.mcb-master-button {
    /* Nút tổng có thể có màu nền riêng nếu muốn nổi bật hơn */
    //background-color: #e67e22; 
    /* Các style khác kế thừa từ .mcb-button */
    padding: 0px !important;
    border-radius: 50% !important;  
}

/* Icon Mở/Đóng của Nút Tổng (nếu bạn dùng 2 icon và JS để đổi display) */
.mcb-master-button .mcb-icon-open {
    display: block; 
    width: 46px;
    height: 46px; 
    object-fit: cover; 
}
.mcb-master-button .mcb-icon-close {
    display: none; /* Mặc định ẩn, JS sẽ bật lên nếu bạn triển khai */
}

/* --- Container Chứa Các Nút Con --- */
.mcb-sub-buttons {
    display: flex;
    flex-direction: inherit; /* Kế thừa hướng từ wrapper */
    align-items: inherit;    /* Kế thừa căn chỉnh từ wrapper */
    gap: 10px;               /* Khoảng cách giữa các nút con */
    list-style: none;
    padding: 0; /* Bỏ padding-top: 30px; ở đây nếu nó được định nghĩa ở trạng thái mở */
    margin: 0;
    max-height: 0;
    opacity: 0;
    visibility: hidden; 
    
    
    transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0s, /* max-height co lại ngay, trong 0.4s */
                opacity 0.3s ease-out 0.2s,  /* opacity bắt đầu giảm sau 0.2s, kéo dài 0.3s */
                                             /* (cho phép các nút con bắt đầu hiệu ứng trước) */
                visibility 0s linear 0.5s;   /* visibility chuyển thành hidden sau 0.5s (khi opacity đã về 0) */
    
    //transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    
    //transition: max-height 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
              //  opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) 0.05s, /* Điều chỉnh delay nếu cần cho lúc đóng */
               // visibility 0s linear 0.35s;
}

/* Khoảng cách giữa cụm nút con và nút tổng */
/* (Quan trọng để khi bung ra không bị chồng chéo hoặc quá sát) */
.mcb-position-bottom-right .mcb-sub-buttons,
.mcb-position-bottom-left .mcb-sub-buttons {
    margin-bottom: 10px;
}
.mcb-position-top-right .mcb-sub-buttons,
.mcb-position-top-left .mcb-sub-buttons {
    margin-top: 10px;
}


/* Trạng thái hiện của các nút con khi wrapper có class .mcb-is-open */
#mcb-contact-buttons-wrapper.mcb-is-open .mcb-sub-buttons {
	//padding-bottom: 20px; khoảng các nút tổng với cụm nút
    
    max-height: 400px; /* Đủ lớn để chứa các nút con */
    opacity: 1;
    visibility: visible;
    opacity: 1;
	transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) 0s, /* max-height mở ra ngay, trong 0.4s */
                opacity 0.2s ease-in 0s,  /* opacity tăng lên ngay, trong 0.2s */
                visibility 0s linear 0s;   /* visibility chuyển thành visible ngay */

    //transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
               // opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
               // visibility 0s linear 0s;               
} 

#mcb-contact-buttons-wrapper.mcb-is-open .mcb-sub-button {
    opacity: 1;
    transform: translateY(0);
}

/* --- Định nghĩa transition-delay cho từng nút con --- */
.mcb-sub-button:nth-child(1) { transition-delay: 0.05s; }
.mcb-sub-button:nth-child(2) { transition-delay: 0.10s; } /* Thêm số 0 cho dễ nhìn */
.mcb-sub-button:nth-child(3) { transition-delay: 0.15s; }
.mcb-sub-button:nth-child(4) { transition-delay: 0.20s; }
.mcb-sub-button:nth-child(5) { transition-delay: 0.25s; }
.mcb-sub-button:nth-child(6) { transition-delay: 0.30s; } /* Thêm cho nút thứ 6 */
.mcb-sub-button:nth-child(7) { transition-delay: 0.35s; } /* Thêm cho nút thứ 7 */
.mcb-sub-button:nth-child(8) { transition-delay: 0.40s; } /* Thêm cho nút thứ 8 */
.mcb-sub-button:nth-child(9) { transition-delay: 0.45s; } /* Thêm cho nút thứ 9 */
.mcb-sub-button:nth-child(10) { transition-delay: 0.50s; } /* Thêm cho nút thứ 10 */
/* --- Nút Con (Sub Button) --- */
.mcb-sub-button {
    /* Bạn có thể làm nút con nhỏ hơn một chút nếu muốn */
    /* width: 40px; */
    /* height: 40px; */
    display: flex;
    align-items: center;
    justify-content: center;
  
    opacity: 0;
    /* Các nút sẽ bay lên từ vị trí thấp hơn một chút (nếu flex-direction là column-reverse) */
    transform: translateY(20px); /* Điều chỉnh giá trị này để có hiệu ứng bay lên vừa ý */

    /* Khai báo các thuộc tính sẽ được transition */
    transition-property: opacity, transform;
    transition-duration: 0.3s; /* Thời gian cho mỗi nút con thực hiện animation */
    transition-timing-function: ease-out;
    /* transition-delay sẽ được định nghĩa riêng cho từng nút con ở dưới */
    
}


/* @keyframes mcb-icon-subtle-wiggle bạn đã có: */
@keyframes mcb-icon-subtle-wiggle {
    0% { transform: translate(0, 0) rotate(0deg); }
    5% { transform: translate(0px, 0) rotate(10deg); }
    10% { transform: translate(0px, 0) rotate(-10deg); }
    15% { transform: translate(0px, 0) rotate(10deg); }
    20% { transform: translate(0px, 0) rotate(0deg); }
    100% { transform: translate(0, 0) rotate(0deg); } /* 80% đứng yên */
}

.mcb-sub-button:hover img { /* Chỉ icon của nút CON lắc khi hover */
    animation-name: mcb-icon-subtle-wiggle; /* Dùng keyframes đã sửa */
    animation-duration: 0.7s; /* Thời gian lắc */
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1; /* Chạy 1 lần khi hover */
}

/* Style riêng cho các nút tùy chỉnh nếu cần,
   thường thì chúng sẽ kế thừa từ .mcb-button và .mcb-sub-button */
.mcb-custom-button {
    /* Nút tùy chỉnh không có màu nền cụ thể vì chúng dùng ảnh */
    /* background-color: transparent; */ /* Có thể không cần nếu ảnh đã che phủ */
}

.mcb-custom-button img {
    /* Đảm bảo ảnh tùy chỉnh hiển thị đúng kích thước và không bị méo */
    /* Các thuộc tính width, height, max-width, max-height đã được kế thừa từ .mcb-button img */
    object-fit: cover; /* Giúp ảnh không bị méo, có thể là 'contain' tùy ý bạn */
}