.button-container {
    display: flex;
    flex-direction: column;
}

.zalo-btn {
    /* CSS của nút "Zalo" */
    width: 50px; /* Độ rộng */
    height: 50px; /* Độ cao */
    line-height: 50px; /* Đảm bảo văn bản nằm chính giữa */
    text-align: center; /* Căn giữa văn bản */
    background-color: #0084ff; /* Màu xanh */
    color: #ffffff; /* Màu chữ */
    border: none; /* Không có đường viền */
    border-radius: 50%; /* Làm tròn thành hình tròn */
    cursor: pointer; /* Con trỏ tay khi di chuột qua */
    position: fixed; /* Định vị cố định */
    bottom: 140px; /* Khoảng cách từ dưới (60px cho nút Call, 20px cho khoảng cách giữa các nút) */
    right: 20px; /* Khoảng cách từ phải */
    transition: box-shadow 0.3s ease; /* Hiệu ứng khi di chuột qua */
    overflow: hidden; /* Ngăn chặn hiệu ứng sóng ra ngoài nút */
    z-index: 999; /* Đảm bảo nút hiển thị trên cùng */
    animation: pulse 1s infinite; /* Chớp nháy */
}


.call-btn {
    /* CSS của nút "Call" */
    width: 50px; /* Độ rộng */
    height: 50px; /* Độ cao */
    line-height: 50px; /* Đảm bảo văn bản nằm chính giữa */
    text-align: center; /* Căn giữa văn bản */
    background-color: #ff0000; /* Màu đỏ */
    color: #ffffff; /* Màu chữ */
    border: none; /* Không có đường viền */
    border-radius: 50%; /* Làm tròn thành hình tròn */
    cursor: pointer; /* Con trỏ tay khi di chuột qua */
    position: fixed; /* Định vị cố định */
    bottom: 85px; /* Khoảng cách từ dưới (60px cho nút Call, 20px cho khoảng cách giữa các nút) */
    right: 20px; /* Khoảng cách từ phải */
    transition: box-shadow 0.3s ease; /* Hiệu ứng khi di chuột qua */
    overflow: hidden; /* Ngăn chặn hiệu ứng sóng ra ngoài nút */
    z-index: 998; /* Đảm bảo nút hiển thị dưới nút Zalo */
    animation: pulse 1s infinite; /* Chớp nháy */
}

.chat-btn {
  
    background-color: #ee0808; /* Màu xanh */
    color: #ffffff; /* Màu chữ */
    border: none; /* Không có đường viền */
    right: 20px; /* Khoảng cách từ phải */
    cursor: pointer; /* Con trỏ tay khi di chuột qua */
    position: fixed; /* Định vị cố định */
    transition: box-shadow 0.3s ease; /* Hiệu ứng khi di chuột qua */
    overflow: hidden; /* Ngăn chặn hiệu ứng sóng ra ngoài nút */
    z-index: 999; /* Đảm bảo nút hiển thị trên cùng */
    animation: pulse 1s infinite; /* Chớp nháy */
}


/* Khi thu gọn, ẩn nội dung chatbot và hiển thị hình tròn */
#chatbox.collapsed {
    height: 40px;   /* Điều chỉnh kích thước cho đẹp */
    width: 40px;    
    overflow: hidden;
    border-radius: 50%;  /* Làm cho hình tròn */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007bff; /* Màu nền xanh dương */
    color: white; /* Màu chữ */
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Khi mở rộng, hiển thị nội dung đầy đủ */
#chatbox:not(.collapsed) {
    height: 400px;
    width: 250px;
}


.user-message {
    text-align: right;
    margin: 5px 0;
}

.user-message .message-content {
    display: inline-block;
    background-color: #007bff; 
    color: #e0f7fa;
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 70%;
}

.bot-message {
    text-align: left;
    margin: 5px 0;
}

.bot-message .message-content {
    display: inline-block;
    background-color: #f1f1f1;
    color: #333;
    padding: 8px 12px;
    border-radius: 10px;
    max-width: 70%;
}


/* Animation để chớp nháy */
@keyframes pulse {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0.9);
    }
}

/* Hiệu ứng khi di chuột qua */
.call-btn:hover {
    box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.5);
}
/* Hiệu ứng khi di chuột qua */
.zalo-btn:hover {
    box-shadow: 0 0 0 10px rgba(0, 132, 255, 0.5);
}