/*
Theme Name: Trong Nghia Foodking Premium
Theme URI: https://trongnghiafoodking.com
Author: Phan Đức Huy
Version: 4.1.0
Text Domain: trongnghia-foodking
*/

/* --- CẤU HÌNH GIAO DIỆN NỀN TẢNG CONTRAST LUXURY --- */
/* --- ÉP TOÀN BỘ NỀN HỆ THỐNG SANG TONE TRẮNG SÁNG CONTRAST --- */
html, body, main, #main, .main-content, #content {
    background-color: #fcfcfc !important; /* Màu trắng kem ngọc trai sang trọng */
    color: #1a1a1a !important; /* Chữ tối sâu tương phản cao */
}

/* Ép màu chữ tiêu đề h1, h2, h3 sang màu đen/tối để không bị lẫn vào nền trắng */
h1, h2, h3, h4, h5, h6, .product-title, .section-title {
    color: #111111 !important;
}

/* Giữ nguyên các khối nền tối làm điểm nhấn (Contrast) cho đẹp mắt */
.bg-[#111111], .bg-[#111], .bg-[#0c0c0c], .bg-[#050505], footer, #mini-cart-drawer {
    background-color: #111111 !important;
}
.bg-[#111111] *, .bg-[#111] *, .bg-[#0c0c0c] *, .bg-[#050505] *, footer *, #mini-cart-drawer * {
    color: #ffffff !important; /* Chữ trong khối tối bắt buộc hiển thị màu trắng */
}

/* Tùy chỉnh thanh cuộn hệ thống */
::-webkit-scrollbar {
    width: 6px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #b91c1c; /* Màu đỏ thương hiệu chủ đạo */
    border-radius: 10px;
}

/* Lớp phủ hỗ trợ hiệu ứng kính mờ tone sáng đổ bóng nhẹ */
.header-glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

/* Ẩn thanh cuộn mặc định của trình duyệt cho các khu vực cuộn ngang */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom scrollbar cho danh sách giỏ hàng trượt */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #111;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #b91c1c;
    border-radius: 4px;
}

/* --- SIDEBAR DANH MỤC DỌC PHONG CÁCH SEAFOOD PREMIUM --- */
.washibi-vertical-nav {
    background: #ffffff;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.02);
}

.washibi-vertical-item {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    color: #3b3b3b;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid #f5f7f8;
    transition: all 0.25s ease;
}

.washibi-vertical-item:last-child {
    border-bottom: none;
}

.washibi-vertical-item:hover {
    background: #fff5f5;
    color: #b91c1c;
    padding-left: 25px;
}

.washibi-vertical-icon {
    font-size: 16px;
    margin-right: 15px;
    width: 20px;
    text-align: center;
}

/* --- HIỆU ỨNG POP GIỎ HÀNG KHI THÊM SẢN PHẨM --- */
@keyframes cartBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.cart-pop-active {
    animation: cartBounce 0.4s ease-in-out;
}
<div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200/80 h-16 flex items-center justify-around z-50 md:hidden shadow-[0_-4px_20px_rgba(0,0,0,0.05)]">
    
    <a href="<?php echo home_url(); ?>" class="flex flex-col items-center justify-center text-gray-500 hover:text-brand-red space-y-1">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
        <span class="text-[9px] font-bold uppercase tracking-wider">Trang Chủ</span>
    </a>

    <a href="<?php echo esc_url(home_url('/san-pham/')); ?>" class="flex flex-col items-center justify-center text-gray-500 hover:text-brand-red space-y-1">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
        <span class="text-[9px] font-bold uppercase tracking-wider">Cửa Hàng</span>
    </a>

    <a href="tel:0333914909" class="flex flex-col items-center justify-center text-gray-500 hover:text-brand-red space-y-1">
        <svg class="w-5 h-5 text-red-600 animate-bounce" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.94.725l.548 2.2a1 1 0 01-.321.988l-1.305.98a10.582 10.582 0 004.872 4.872l.98-1.305a1 1 0 01.988-.321l2.2.548a1 1 0 01.725.94V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
        </svg>
        <span class="text-[9px] font-bold text-red-600 uppercase tracking-wider">Hotline</span>
    </a>

    <button onclick="toggleMiniCart()" class="flex flex-col items-center justify-center text-gray-500 hover:text-brand-red space-y-1 relative cursor-pointer">
        <div class="relative">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
            </svg>
            <span id="mobile-cart-badge" class="absolute -top-2 -right-2 bg-red-600 text-white text-[8px] font-black rounded-full w-4 h-4 flex items-center justify-center border border-white shadow-md">0</span>
        </div>
        <span class="text-[9px] font-bold uppercase tracking-wider">Giỏ Hàng</span>
    </button>
</div>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
    // Ép gài cập nhật thêm cả badge giỏ hàng dưới thanh điều hướng di động
    const nativeRenderMiniCart = window.renderMiniCart;
    if (typeof nativeRenderMiniCart === 'function') {
        window.renderMiniCart = function() {
            nativeRenderMiniCart();
            const mobileBadge = document.getElementById('mobile-cart-badge');
            const totalItems = washibiCart.reduce((sum, item) => sum + item.qty, 0);
            if (mobileBadge) mobileBadge.innerText = totalItems;
        };
        window.renderMiniCart(); // Chạy đồng bộ lần đầu
    }
});
</script>