/* Theme Trắng Xám Minimalist - Tailwind Style Variables (Full 2025 - Hover nút đen nhạt, viền nút trắng đậm dày) */
:root {
    --primary-color: #000000; /* Đen chính */
    --primary-hover: #1f1f1f; /* Hover nút đen nhạt hơn */
    --primary-light: #f3f4f6; /* Nền hover nút trắng */
    --primary-text: #ffffff; /* Text trắng trên nút đen */
    --secondary-color: #6b7280; /* Xám trung cho viền nút trắng */
    --accent-color: #000000;
    --border-color: #e5e7eb; /* Border xám nhạt */
    --bg-primary: #ffffff; /* Trắng card/modal */
    --bg-secondary: #f9fafb; /* Xám rất nhạt nền body */
    --text-primary: #111827; /* Đen đậm text */
    --text-secondary: #6b7280; /* Xám text phụ */
}

* {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--border-color);
}

body {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    line-height: inherit;
}

/* Container */
.menu-container {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Navbar */
.navbar {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.navbar-brand, .nav-link, .dropdown-item {
    color: var(--text-primary) !important;
    font-weight: 500;
}

.nav-link:hover, .dropdown-item:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary-color) !important;
}

/* Button - Full override */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Nút đen (Đăng Ký) - hover nhạt hơn */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--primary-text);
    border: 2px solid var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important; /* Nhạt hơn khi di chuột */
    border-color: var(--primary-hover) !important;
    color: var(--primary-text) !important;
}

/* Nút trắng (Đăng Nhập) - viền đậm dày hơn */
.btn-outline-primary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--secondary-color) !important; /* Viền xám đậm #6b7280, dày 2px */
    font-weight: 600;
}

.btn-outline-primary:hover {
    background-color: var(--primary-light) !important; /* Nền nhạt khi hover */
    border-color: var(--primary-color) !important; /* Viền đen khi hover */
    color: var(--primary-color) !important;
}

/* Form input */
.form-control {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
}

.form-control:focus {
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(107,114,128,0.15) !important;
}

/* Modal */
.modal-content {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.modal-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

/* Text */
.display-4, h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 700;
}

.lead {
    color: var(--text-secondary);
}

/* Card */
.card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Bỏ hết hiệu ứng xanh */
*, *::before, *::after {
    outline: none !important;
    box-shadow: none !important;
}

*:focus-visible {
    outline: 2px solid var(--primary-hover) !important;
}
/* Trạng thái mặc định: viền đậm */
.remember-black {
    border: 2px solid #555 !important;
    background-color: #fff !important;
}

/* Khi hover (nhẹ hơn) */
.remember-black:hover {
    border-color: #333 !important;
}

/* Khi focus / active: giữ viền đậm, không xanh */
.remember-black:focus,
.remember-black:active {
    border-color: #333 !important;
    box-shadow: none !important;
}

/* Khi tích: nền đen */
.remember-black:checked {
    background-color: #000 !important;
    border-color: #000 !important;
}

/* Khi tích + focus vẫn đen */
.remember-black:checked:focus,
.remember-black:checked:active {
    box-shadow: none !important;
}

/* Tick trắng */
.remember-black:checked::before {
    filter: brightness(0) invert(1);
}


/* Bắt buộc nền trắng cho toàn bộ slider và card */
body,
.slider-wrapper,
.slider-track,
.card {
    background-color: white !important;
}

/* Nếu muốn chữ và icon màu mặc định */
.card,
.card * {
    color: inherit !important;
}