/* style.css - Giao diện chung (Navbar trắng) */
body {
    background: #f0f2f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===== NAVBAR ===== */
.navbar-custom {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.navbar-brand {
    font-weight: 700;
    color: #1a202c !important;
}
.navbar-brand i {
    color: #4a6cf7;
}

.navbar-custom .navbar-nav .nav-link {
    color: #4a5568 !important;
    font-weight: 500;
    transition: all 0.2s;
    padding: 8px 16px;
    border-radius: 8px;
}
.navbar-custom .navbar-nav .nav-link:hover {
    color: #1a202c !important;
    background: #f7fafc;
}
.navbar-custom .navbar-nav .nav-link.active {
    color: #4a6cf7 !important;
    font-weight: 600;
    background: #ebf4ff;
}

/* Nút toggle (hamburger menu) */
.navbar-toggler {
    border-color: #cbd5e0;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== CARD CHUNG ===== */
.card-custom {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    padding: 30px;
    margin-bottom: 25px;
    border: 1px solid #e2e8f0;
}

/* ===== CONTAINER CHÍNH ===== */
.main-container {
    padding: 20px 0;
}

/* ===== NÚT BẤM ===== */
.btn-primary {
    background: #4a6cf7 !important;
    border-color: #4a6cf7 !important;
    color: #ffffff !important;
    font-weight: 600;
}
.btn-primary:hover {
    background: #3a5cd9 !important;
    border-color: #3a5cd9 !important;
}

.btn-outline-primary {
    color: #4a6cf7 !important;
    border-color: #4a6cf7 !important;
}
.btn-outline-primary:hover {
    background: #4a6cf7 !important;
    color: #ffffff !important;
}

/* ===== HIGHLIGHT BOX ===== */
.highlight-box {
    background: #fffbeb !important;
    border-left: 4px solid #f59e0b !important;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 15px 0;
}
.highlight-box i {
    color: #f59e0b !important;
    margin-right: 10px;
}

/* ===== BẢNG ===== */
.table th, .table td {
    padding: 8px 12px;
}
.table {
    font-size: 15px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 576px) {
    .card-custom {
        padding: 20px 15px;
    }
    .table-responsive {
        font-size: 13px;
    }
    .table th, .table td {
        padding: 6px 4px;
    }
    .navbar-brand {
        font-size: 18px;
    }
}