/* CLINIC-SCOPE: module:UILogin */
/* Tách từ khối <style> trong Views/Login/Login.cshtml (01/10/2026). Nạp bằng <link> đặt ĐÚNG vị trí khối cũ để thứ tự ưu tiên không đổi. */
/* Container bao ngoài */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-family: sans-serif;
    color: #333;
}

    /* Ẩn checkbox mặc định xấu xí */
    .checkbox-wrapper input {
        display: none;
    }

    /* Tạo ô checkbox mới bằng label */
    .checkbox-wrapper label {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color:var(--main-color)
    }

        /* Tạo cái ô vuông */
        .checkbox-wrapper label::before {
            content: "";
            width: 18px;
            height: 18px;
            border: 2px solid #ccc;
            border-radius: 4px; /* Bo góc nhẹ cho hiện đại */
            margin-right: 10px;
            transition: all 0.2s ease; /* Hiệu ứng mượt */
        }

    /* Khi hover vào label */
    .checkbox-wrapper:hover label::before {
        border-color: #007bff; /* Đổi màu viền khi di chuột vào */
    }

    /* Khi đã check */
    .checkbox-wrapper input:checked + label::before {
        background-color: #007bff;
        border-color: #007bff;
        /* Dấu tick (sử dụng unicode hoặc background image) */
        content: "\2713";
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: bold;
    }