/* Làm viền khung input, select, textarea đậm hơn */
input.form-control,
select.form-select,
textarea.form-control,
.select2-selection {
    border: 0.5px solid #444 !important; /* viền đậm */
    border-radius: 6px;                 /* bo góc đẹp */
}

/* Khi rê chuột vào khung */
input.form-control:hover,
select.form-select:hover,
textarea.form-control:hover,
.select2-selection:hover {
    border-color: #000 !important; /* đậm hẳn */
}

/* Khi click vào nhập (focus) */
input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus,
.select2-selection--single .select2-selection__rendered:focus,
.select2-selection:focus {
    border-color: #007bff !important;  /* màu xanh nhấn mạnh */
    box-shadow: 0 0 4px rgba(0,123,255,0.5) !important; /* hiệu ứng sáng */
    font-weight: 600 !important;       /* chữ đậm hơn khi nhập */
}



/* Nền tổng thể sáng hơn */
body {
    background-color: #f5f7fb;
}

/* Các khối trắng (form, box, card…) nổi hơn, bo góc */
.card, .panel, .box, .panel-default {
    border-radius: 12px;
    border: 1px solid #e3e6ec;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}


/* Khoảng cách giữa các dòng form */
.form-group {
    margin-bottom: 14px;
}

/* Label nhỏ, gọn, kiểu dashboard hiện đại */
.form-group label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 4px;
}



/* Ô nhập và dropdown */
input.form-control,
select.form-select,
textarea.form-control,
.select2-selection {
    border: 2px solid #d1d5db !important;  /* viền vừa phải */
    border-radius: 8px !important;
    background: #f9fafb;
    transition: all 0.15s ease;
}

/* Hover: viền đậm hơn */
input.form-control:hover,
select.form-select:hover,
textarea.form-control:hover,
.select2-selection:hover {
    border-color: #9ca3af !important;
}

/* Focus: xanh DVMXH + đổ bóng nhẹ */
input.form-control:focus,
select.form-select:focus,
textarea.form-control:focus,
.select2-selection:focus,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
    background: #ffffff;
}



/* Nút chính */
.btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: none;
    border-radius: 999px;
    padding: 10px 28px;
    font-weight: 700;
    letter-spacing: 0.03em;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
    text-transform: uppercase;
}

/* Hover: hơi nổi lên 1 tí */
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.45);
    opacity: 0.96;
}

/* Khi bấm giữ */
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}