@charset "UTF-8";

/* 1. Thiết lập Font chữ đồng bộ 100% toàn bộ hệ thống (giống Title và Form Label) */
*, *::before, *::after, html, body, input, button, select, textarea, .btn, .nav-link, .navbar-brand, .form-control, .form-label, h1, h2, h3, h4, h5, h6 {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Nền xám đậm dịu mắt, không dùng đen tuyền */
body {
    background-color: #1e1e1e !important; 
    color: #e0e0e0 !important; /* Chữ trắng mờ (off-white) để không bị chói */
}

/* 2. Tiêu đề trang */
h1 {
    font-weight: 700;
}

/* 3. Chỉnh lại ô nhập liệu (Input) cho đồng bộ nền tối */
.form-control {
    background-color: #2b3035 !important; /* Nền ô nhập màu xám nhẹ */
    border: 1px solid #495057 !important;    /* Viền mờ */
    color: #ffffff !important;           /* Chữ gõ vào màu trắng */
}

.form-control:focus {
    background-color: #32383e !important;
    border-color: #ffc107 !important;    /* Viền vàng khi nhấn vào cho nổi bật */
    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25) !important;
    color: #fff !important;
}

/* 4. Định dạng liên kết và Header/Footer */
a {
    text-decoration: none !important;
    color: #aaa;
    transition: 0.2s ease-in-out;
}

a:hover {
    color: #ffc107 !important; /* Hover lên hiện màu vàng sáng */
}

/* Thanh Navigation Header */
.navbar-brand {
    letter-spacing: 0.5px;
}

.navbar .nav-link {
    font-size: 0.95rem;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.2s ease-in-out;
}

.navbar .nav-link:hover {
    color: #ffc107 !important;
}

.navbar .nav-link.active {
    color: #ffc107 !important;
}

/* Nút Submit tông Vàng chuyên nghiệp */
.btn-primary {
    background-color: #ffc107 !important;
    border: none !important;
    color: #121212 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background-color: #e0a800 !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

.red {
    color: #ff6b6b;
}

/* Tùy chỉnh thanh cuộn cho đồng bộ */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1e1e1e;
}
::-webkit-scrollbar-thumb {
    background: #3e3e3e;
    border-radius: 10px;
}

.form-control::placeholder {
    color: #8c959f !important;
    opacity: 1;
}