:root {
    /* Brand Colors */
    /* Primary – Vàng kim */
    --brand-primary: #A67B5B; /* Gold */
    --brand-primary-hover: #8B6243;
    /* Dark / nền header */
    --brand-dark: #0B1C2D; /* Navy đậm */
    /* Background */
    --brand-bg: #F7F6F2; /* Trắng ngà */
    /* Text */
    --brand-text: #2F2F2F;
    --brand-text-muted: #6B7280;
    /* Border / shadow */
    --brand-border: #E5E2D8;
    --brand-shadow: rgba(0, 0, 0, 0.08);
    /* Status */
    --brand-success: #1E7F5C;
    --brand-danger: #C0392B;
    --brand-warning: #F1C40F;
    /* Layout Colors */
    --border-color: #d9dee3;
    --auth-bg: #f5f5f9;
    --card-bg: #ffffff;
    --text-main: #435971;
    --text-muted: #697a8d;
}

/* Custom Component Classes */
.text-brand {
    color: var(--brand-primary) !important;
}

.btn-brand {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
    transition: all 0.2s ease-in-out;
}

    .btn-brand:hover {
        background-color: var(--brand-primary-hover) !important;
        filter: brightness(90%);
    }

.auth-card {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem var(--brand-primary-light);
}

/* Tùy chỉnh cụm input-group */
.input-group {
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    overflow: hidden; /* Đảm bảo góc bo tròn không bị con đè lên */
}

    /* Khi người dùng click vào bất kỳ đâu trong cụm input */
    .input-group:focus-within {
        border-color: var(--brand-primary) !important;
        box-shadow: 0 0 0 0.25rem var(--brand-primary-light);
    }

    /* Loại bỏ border mặc định của bootstrap bên trong group */
    .input-group .form-control,
    .input-group .input-group-text {
        border: none !important;
        background-color: transparent; /* Đồng nhất màu nền */
    }

        .input-group .form-control:focus {
            box-shadow: none !important; /* Tắt shadow mặc định của input đơn lẻ */
        }

    /* Đường kẻ dọc phân cách nhẹ giữa icon và input (tùy chọn) */
    .input-group .input-group-text {
        border-right: 1px solid #f0f0f0 !important;
        color: var(--text-muted);
    }

/* Tùy chỉnh cụm Checkbox Lưu đăng nhập */
.form-check-remember {
    display: flex;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

    .form-check-remember .form-check-input {
        width: 1.3rem;
        height: 1.3rem;
        margin-top: 0;
        cursor: pointer;
        border: 1px solid var(--border-color);
    }

        .form-check-remember .form-check-input:checked {
            background-color: var(--brand-primary);
            border-color: var(--brand-primary);
        }

    .form-check-remember .form-check-label {
        font-size: 1.1rem;
        font-weight: 500;
        margin-left: 10px;
        color: var(--text-main);
        cursor: pointer;
        user-select: none;
    }

    .form-check-remember .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem var(--brand-primary-light);
        border-color: var(--brand-primary);
    }

.swal2-shown {
    overflow: auto !important;
    padding-right: 0 !important;
}