<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pure Navigation Menu</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --an-nav-bg: #ffffff;
            --an-text-main: #0f172a;
            --an-text-accent: #6366f1; 
            --an-border-light: #f1f5f9;
            --an-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: var(--an-font-family);
        }

        /* Khung ghim đầu trang */
        .an-header-wrapper {
            
            border-bottom: 1px solid var(--an-border-light);
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
        }

        /* Bố cục căn giữa toàn bộ thanh điều hướng trên PC */
        .an-nav-inner {
            max-width: 1200px;
            height: 75px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: center; /* Căn menu ra chính giữa */
            align-items: center;
            position: relative;
        }

        /* Cấu trúc danh sách menu chính (PC) */
        .an-menu-core {
            display: flex;
            align-items: center;
            list-style: none;
            gap: 40px;
        }

        .an-menu-link {
            text-decoration: none;
            color: #475569;
            font-size: 15px;
            font-weight: 600;
            padding: 10px 0;
            display: block;
            position: relative;
            transition: color 0.25s ease;
        }

        .an-menu-link:hover {
            color: var(--an-text-accent);
        }

        /* Hiệu ứng gạch chân chạy từ giữa ra */
        .an-menu-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 16px;
            height: 2px;
            background-color: var(--an-text-accent);
            border-radius: 4px;
            opacity: 0;
            transform: translateX(-50%) scaleX(0.5);
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        .an-menu-link:hover::after {
            opacity: 1;
            transform: translateX(-50%) scaleX(1);
        }

        /* Nút Hamburger (Mobile) - Đặt tuyệt đối về góc phải khi ở trên di động */
        .an-trigger-hamburger {
            display: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f8fafc;
            border: none;
            cursor: pointer;
            position: absolute;
            right: 20px;
            z-index: 1001;
            transition: background-color 0.2s ease;
        }

        .an-trigger-hamburger:hover {
            background-color: #f1f5f9;
        }

        /* Biểu tượng dấu gạch ngang */
        .an-burger-icon {
            position: absolute;
            left: 11px;
            top: 19px;
            width: 18px;
            height: 2px;
            background-color: var(--an-text-main);
            transition: background-color 0.2s ease;
        }

        .an-burger-icon::before,
        .an-burger-icon::after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--an-text-main);
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .an-burger-icon::before { top: -6px; }
        .an-burger-icon::after { top: 6px; }

        /* Lớp nền phủ tối mờ (Overlay) */
        .an-screen-overlay {
            position: fixed;
            inset: 0;
            background-color: rgba(15, 23, 42, 0.3);
            backdrop-filter: blur(4px);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        /* --- RESPONSIVE MOBILE --- */
        @media (max-width: 768px) {
            .an-nav-inner {
                justify-content: flex-start; /* Trả về mặc định để không lỗi layout */
                height: 60px;
            }

            .an-trigger-hamburger {
                display: block;
            }

            /* Menu trượt từ bên phải vào */
            .an-menu-center {
                position: fixed;
                top: 0;
                right: -100%;
                width: 280px;
                height: 100vh;
                background-color: #ffffff;
                padding: 90px 24px 30px 24px;
                z-index: 1000;
                box-shadow: -10px 0 40px rgba(15, 23, 42, 0.08);
                transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .an-menu-core {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
            }

            .an-menu-link {
                font-size: 16px;
                color: var(--an-text-main);
                padding: 14px 16px;
                border-radius: 10px;
                background-color: #f8fafc;
            }

            .an-menu-link:hover {
                background-color: #f1f5f9;
            }

            .an-menu-link::after {
                display: none;
            }

            /* Trạng thái mở menu */
            body.menu-open .an-menu-center {
                right: 0;
            }

            body.menu-open .an-screen-overlay {
                opacity: 1;
                visibility: visible;
            }

            /* Biến đổi hiệu ứng dấu X */
            body.menu-open .an-burger-icon {
                background-color: transparent;
            }

            body.menu-open .an-burger-icon::before {
                transform: translateY(6px) rotate(45deg);
            }

            body.menu-open .an-burger-icon::after {
                transform: translateY(-6px) rotate(-45deg);
            }
        }
    </style>
</head>
<body>

<header class="an-header-wrapper">
    <div class="an-nav-inner">

        
        <nav class="an-menu-center">
            <ul class="an-menu-core">
                <li><a class="an-menu-link" href="/">Home</a></li>
                <li><a class="an-menu-link" href="/shop">Shop</a></li>
                <li><a class="an-menu-link" href="/page/about-us">About Us</a></li>
                <li><a class="an-menu-link" href="/page/contact-us">Contact Us</a></li>
                <li><a class="an-menu-link" href="/page/order-tracking">Order Tracking</a></li>
            </ul>
        </nav>

        
        <button class="an-trigger-hamburger" id="anMenuBtn" aria-label="Open Navigation">
            <span class="an-burger-icon"></span>
        </button>

    </div>
</header>


<div class="an-screen-overlay" id="anOverlay"></div>

<script>
    const anMenuBtn = document.getElementById('anMenuBtn');
    const anOverlay = document.getElementById('anOverlay');

    function toggleNavigation() {
        document.body.classList.toggle('menu-open');
    }

    function deactivateNavigation() {
        document.body.classList.remove('menu-open');
    }

    anMenuBtn.addEventListener('click', toggleNavigation);
    anOverlay.addEventListener('click', deactivateNavigation);

    window.addEventListener('resize', () => {
        if (window.innerWidth > 768) {
            deactivateNavigation();
        }
    });
</script>

</body>
</html>