/* --- Mẫu 3: Phong cách Neumorphism --- */
.btn-update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 30px;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #555;
    margin-bottom: 1%;
   
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
   
}

/* Hiệu ứng khi hover: làm cho nút trông phẳng hơn */
.btn-update:hover {
    color: #007bff;
}

/* Hiệu ứng khi nhấn: làm cho nút trông bị lõm vào */
.btn-update:active {
    color: #007bff;
    box-shadow: 
        inset -5px -5px 10px #ffffff,
        inset 5px 5px 10px #d1d9e6;
}

/* Hiệu ứng xoay icon */
.btn-update:active .fa-arrows-rotate {
    transform: rotate(360deg);
    transition: transform 0.5s;
}

/* Cần đặt màu nền cho body để hiệu ứng đẹp nhất */
/* --- Mẫu 3: Phong cách Neumorphism - Chế độ tối --- */
body.dark-theme .btn-update {
    color: #e0e0e0; /* Màu chữ sáng hơn */
   
    
}

/* Hiệu ứng khi hover trong chế độ tối */
body.dark-theme .btn-update:hover {
    color: #00ff9d; /* Màu chữ khi hover, tương tự các link khác */
}

/* Hiệu ứng khi nhấn trong chế độ tối: làm cho nút trông bị lõm vào */
body.dark-theme .btn-update:active {
    color: #00ff9d;
    box-shadow: 
        inset -5px -5px 10px rgba(40, 40, 40, 0.5),
        inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* Cập nhật màu của icon khi đang xử lý */
body.dark-theme .btn-update:disabled {
    color: #b0b0b0;
}