/* =======================================================
   BẢNG MÀU THƯƠNG HIỆU BLOOMBOOST (Tùy chỉnh Bootstrap)
   ======================================================= */
:root {
    --coffee-dark: #3E2723; /* Nâu cà phê rang đậm */
    --coffee-primary: #5D4037; /* Nâu chủ đạo */
    --coffee-accent: #D7CCC8; /* Kem sữa macchiato */
    --warm-bg: #FAF8F5; /* Nền trắng ngà ấm áp */
    --text-main: #4E342E; /* Chữ nâu xám dịu mắt */
}

/* =======================================================
   CÀI ĐẶT TOÀN CỤC (GLOBAL) VÀ FIX LỖI FOOTER
   ======================================================= */
body {
    background-color: var(--warm-bg);
    color: var(--text-main);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    /* Flexbox layout để đẩy footer xuống sát đáy màn hình */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Dãn phần nội dung chính ra để chiếm hết không gian trống */
.container {
    flex: 1;
}

/* Gỡ bỏ ghim mặc định của template, cho footer tự động trôi xuống đáy */
.footer {
    position: static !important;
    margin-top: auto;
}

/* =======================================================
   GHI ĐÈ MÀU SẮC BOOTSTRAP THÀNH MÀU THƯƠNG HIỆU
   ======================================================= */
.text-primary {
    color: var(--coffee-primary) !important;
}

.bg-primary {
    background-color: var(--coffee-primary) !important;
}

/* Nút bấm chính (Call to Action) */
.btn-primary {
    background-color: var(--coffee-primary);
    border-color: var(--coffee-primary);
    transition: all 0.3s ease;
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--coffee-dark);
        border-color: var(--coffee-dark);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(93, 64, 55, 0.3);
    }

/* Nút Outline (Ví dụ: Quay lại cửa hàng) */
.btn-outline-primary {
    color: var(--coffee-primary);
    border-color: var(--coffee-primary);
}

    .btn-outline-primary:hover {
        background-color: var(--coffee-primary);
        color: white;
    }

/* =======================================================
   TINH CHỈNH CÁC THÀNH PHẦN UI/UX
   ======================================================= */

/* Thanh Điều Hướng (Navbar) */
.navbar {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px); /* Hiệu ứng kính mờ Glassmorphism */
    border-bottom: 1px solid var(--coffee-accent) !important;
}

.navbar-brand {
    letter-spacing: 1px;
}

/* Thẻ Sản Phẩm (Cards) - Hiệu ứng lơ lửng */
.product-card {
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: white;
}

    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(62, 39, 35, 0.1) !important;
    }

/* Huy hiệu (Badges) */
.badge-roast {
    background-color: var(--coffee-dark) !important;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Tùy chỉnh thanh cuộn (Scrollbar) cho đẹp mắt */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--warm-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--coffee-accent);
    border-radius: 10px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--coffee-primary);

    }

/* ========================================================
   SỬA LỖI ẢNH BANNER CHE MẤT MENU DROPDOWN (Z-INDEX)
======================================================== */
header {
    position: relative !important;
    z-index: 1050 !important; /* Đẩy thanh Header lên lớp cao nhất */
}

.navbar {
    position: relative !important;
    z-index: 1050 !important;
}

/* Hạ độ nổi của các banner xuống lớp đáy để không cản trở chuột */
.admin-banner {
    z-index: 0 !important;
}