/* --- UFM COLOR PALETTE --- */
:root {
    --ufm-blue: #0054a6; /* Xanh dương đậm chuẩn UFM */
    --ufm-yellow: #ffde00; /* Vàng tươi (lấy từ nút giỏ hàng) */
    --ufm-text-on-blue: #ffffff;
    --ufm-text-on-yellow: #004b93; /* Chữ xanh đậm dùng trên nền vàng */
}

/* 1. Navbar nền xanh */
.bg-ufm {
    background-color: var(--ufm-blue) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Thêm bóng đổ nhẹ cho sang */
}

/* 2. Style cho Logo */
.ufm-logo {
    height: 45px;
    width: 45px;
    object-fit: contain;
    background-color: white; /* Logo UFM nền trong suốt cần lót trắng mới nổi trên nền xanh */
    border-radius: 50%;
    padding: 2px;
    margin-right: 12px;
    border: 2px solid white; /* Viền trắng bao quanh logo */
}

/* 3. Style Nút Check-in (Màu Vàng) */
.btn-ufm-cta {
    background-color: var(--ufm-yellow);
    color: var(--ufm-text-on-yellow) !important; /* QUAN TRỌNG: Chữ xanh trên nền vàng */
    font-weight: 800; /* Chữ đậm hơn */
    border-radius: 50px; /* Bo tròn pill giống hình mẫu */
    padding: 8px 24px;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    text-transform: uppercase;
    font-size: 0.9rem;
}

    .btn-ufm-cta:hover {
        background-color: #e6c800;
        transform: translateY(-2px); /* Hiệu ứng nổi lên khi rê chuột */
        box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    }

/* 4. Link trên Menu */
.nav-link-ufm {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500;
    transition: color 0.2s;
}

    .nav-link-ufm:hover {
        color: var(--ufm-yellow) !important; /* Hover chuyển màu vàng */
    }

/* 5. Phần User Info bên phải */
.user-profile-section {
    border-left: 1px solid rgba(255,255,255,0.2); /* Đường kẻ ngăn cách nhẹ */
    padding-left: 15px;
    margin-left: 15px;
}

/* --- UFM COMPONENT STYLES --- */

/* 1. Tùy biến ô nhập liệu (Form Control) */
.form-control:focus {
    border-color: var(--ufm-blue); /* Viền xanh UFM khi nhập */
    box-shadow: 0 0 0 0.25rem rgba(0, 84, 166, 0.25); /* Bóng mờ xanh */
}

/* 2. Card chuẩn UFM */
.card-ufm {
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Bóng nhẹ sang trọng */
    border-radius: 12px; /* Bo góc mềm mại */
    overflow: hidden;
}

.card-header-ufm {
    background-color: var(--ufm-blue);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    padding: 15px 20px;
    border-bottom: 3px solid var(--ufm-yellow); /* Viền vàng điểm nhấn dưới header */
}

/* 3. Tiêu đề trang */
.page-title-ufm {
    color: var(--ufm-blue);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
    border-left: 5px solid var(--ufm-yellow);
    padding-left: 15px;
}