/* Ẩn nút tăng/giảm trên tất cả các trình duyệt */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Ẩn nút tăng/giảm trên Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.info-title {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
}

.input-inform-transform {
    width: auto;
    max-width: 100%;
    margin-left: 20px;
    text-align: center;
}

.container-inform-transform {
    margin-bottom: 5px;
}

.info-title {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
}

.disabled {
    pointer-events: none; /* Ngăn click */
    opacity: 0.5; /* Làm mờ */
}

/* ========= Brand tokens (đỏ gradient theo logo) ========= */
:root {
    --primary-700: #b80000;
    --primary-600: #d01414;
    --primary-500: #e51e1e;
    --primary-400: #ff3a3a;
    --accent-500: #ffcc00;
    --text-900: #1b1b1f;
    --text-700: #2d2d33;
    --text-600: #5e5e69;
    --bg-50: #fafafa;
    --bg-100: #f5f5f7;
    --border-200: #e8e8ee;
    --shadow-md: 0 6px 18px rgba(0,0,0,.08);
    --shadow-lg: 0 14px 34px rgba(229,30,30,.18);
    --radius-lg: 16px;
    --gradient-primary: linear-gradient(135deg,var(--primary-500),var(--primary-700));
    --gradient-soft: linear-gradient(135deg, rgba(229,30,30,.06), rgba(184,0,0,.03));
}

/* ========= Nền trang ========= */
body {
    font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: radial-gradient(1100px 520px at 50% -5%, rgba(229,30,30,.08), transparent 60%), linear-gradient(#fff,#fff);
    color: var(--text-900);
}

/* ========= Card form ========= */
.card {
    border: 1px solid var(--border-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    background: #fff;
}

    .card::before {
        content: "";
        display: block;
        height: 4px;
        background: var(--gradient-primary);
    }

/* ========= Brand header ========= */
.brand {
    gap: 6px;
}

.brand-logo {
    width: 140px !important; /* kích thước phù hợp */
    height: auto !important;
    filter: drop-shadow(0 4px 10px rgba(229,30,30,.25));
}

.brand-title {
    margin: 0;
    color: var(--primary-600);
    font-weight: 800;
    letter-spacing: .3px;
}

.brand-subtitle {
    margin: 2px 0 0;
    color: var(--text-600);
    font-size: .95rem;
}

/* ========= Form controls ========= */
.form-label {
    font-weight: 600;
    color: var(--text-600);
}

.form-control, .form-select {
    border-radius: 12px;
    border: 1px solid var(--border-200);
    padding: 10px 14px;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--primary-500);
        box-shadow: 0 0 0 4px rgba(229,30,30,.15);
    }

/* icon con mắt */
.passwordInput .togglePasswordIcon {
    cursor: pointer;
    color: var(--primary-600);
    padding: 0 10px;
    transition: transform .15s ease, opacity .15s ease;
}

    .passwordInput .togglePasswordIcon:hover {
        transform: scale(1.07);
        opacity: .9;
    }

/* ========= Button chính (ghi đè inline cũ) ========= */
#registry, #verify-code {
    border: 0;
    border-radius: 12px;
    background: var(--gradient-primary) !important;
    box-shadow: var(--shadow-lg);
    font-weight: 700;
    letter-spacing: .2px;
    padding: 12px 16px;
}

    #registry:hover, #verify-code:hover {
        filter: brightness(1.04);
        transform: translateY(-1px);
    }

    #registry:active, #verify-code:active {
        transform: translateY(0);
    }

.disabled a, a.disabled {
    pointer-events: none;
    opacity: .75;
}

/* ========= Checklist điều kiện mật khẩu ========= */
ul.list-unstyled li .fa-circle-check {
    color: #22c55e !important;
}
/* JS sẽ đổi class */
ul.list-unstyled li .fa-circle-xmark {
    color: var(--primary-600) !important;
}

.text-danger {
    color: var(--primary-600) !important;
}

.text-success {
    color: #16a34a !important;
}

#username-section, #password-section, #confirm-password-section,
#phone-section, #fullname-section, #dob-section, #address-section,
#country-section, #work-postion-section, #email-contact-section {
    background: var(--gradient-soft);
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 14px;
}

/* Link quay lại */
a.btn-link.text-primary {
    color: var(--primary-600) !important;
}

    a.btn-link.text-primary:hover {
        color: var(--primary-700) !important;
        text-decoration: underline !important;
    }

/* ========= Dark mode tự động ========= */
@media (prefers-color-scheme: dark) {
    :root {
        --text-900: #f3f3f3;
        --text-700: #e1e1e6;
        --text-600: #c7c7cf;
/*        --bg-100: #121214;*/
        --border-200: #26262b;
    }

    body {
        background: linear-gradient(var(--bg-100), var(--bg-100));
    }

    .card {
        background: #17171a;
        border-color: var(--border-200);
    }

    .form-control, .form-select {
/*        background: #121214;*/
        color: var(--text-900);
        border-color: #2b2b30;
    }

    .brand-logo {
        filter: drop-shadow(0 6px 14px rgba(229,30,30,.35));
    }
}