<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Demo</title>
<style>
  
  /* ===== HEADER ===== */
  .site-header{
  
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:100;
  }
  .header-inner{
    max-width:1410px;
    margin:0 auto;
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }

  .logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .logo img{
    height:44px;
    width:auto;
    display:block;
  }

  nav.main-nav{
    flex:1;
    display:flex;
    justify-content:center;
  }
  nav.main-nav ul{
    list-style:none;
    display:flex;
    gap:36px;
    margin:0;
    padding:0;
  }
  nav.main-nav a{
    text-decoration:none;
    color:var(--ink);
    font-size:15px;
    font-weight:500;
    letter-spacing:0.02em;
    padding:8px 2px;
    position:relative;
    transition:color .2s ease;
  }
  nav.main-nav a::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:2px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
  }
  nav.main-nav a:hover{ color:var(--accent); }
  nav.main-nav a:hover::after{ transform:scaleX(1); }
  nav.main-nav a:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px;
    border-radius:2px;
  }

  .header-actions{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .icon-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border:none;
    background:none;
    color:var(--ink);
    border-radius:50%;
    cursor:pointer;
    text-decoration:none;
    transition:background .2s ease;
  }
  .icon-btn svg{
    width:22px;
    height:22px;
  }
  .icon-btn:hover{ background:#f1f1f1; }
  .icon-btn:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }

  .icon-badge{
    position:absolute;
    top:2px;
    right:2px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:#e02424;
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:16px;
    text-align:center;
  }
  .icon-badge[data-count="0"]{ display:none; }

  .shop-now-btn{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    color:#fff;
    background:var(--accent);
    font-size:14px;
    font-weight:600;
    padding:10px 22px;
    border-radius:999px;
    white-space:nowrap;
    margin-left:8px;
    transition:opacity .2s ease;
  }
  .shop-now-btn:hover{ opacity:.85; }

  /* Mobile toggle */
  .menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:6px;
  }
  .menu-toggle span{
    width:24px;
    height:2px;
    background:var(--ink);
    display:block;
  }

  @media (max-width: 860px){
    nav.main-nav{
      position:absolute;
      top:100%;
      left:0;
      right:0;
      background:var(--bg);
      border-bottom:1px solid var(--line);
      display:none;
      padding:16px 24px;
    }
    nav.main-nav.open{ display:block; }
    nav.main-nav ul{
      flex-direction:column;
      gap:16px;
    }
    .header-actions{ gap:2px; }
    .shop-now-btn{
      padding:8px 16px;
      font-size:13px;
      margin-left:4px;
    }
    .icon-btn{ width:36px; height:36px; }
    .menu-toggle{ display:flex; order:3; }
    .header-inner{ position:relative; flex-wrap:wrap; }
  }
</style>
</head>
<body>

<header class="site-header">
  <div class="header-inner">

    <a href="/" class="logo" aria-label="Trang chủ">
      <img src="https://spacing.nyc3.cdn.digitaloceanspaces.com/1784883482144lo5xr0.png" alt="Logo cửa hàng">
    </a>

    <nav class="main-nav" id="mainNav">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/shop">Shop</a></li>
        <li><a href="/page/about-us">About Us</a></li>
        <li><a href="/contact">Contact Us</a></li>
        <li><a href="/page/order-tracking">Order Tracking</a></li>
      </ul>
    </nav>

    <div class="header-actions">

        
      </a>

      <a href="/wishlist" class="icon-btn" aria-label="Wishlist">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <span class="icon-badge" data-count="0">0</span>
      </a>

      <a href="/cart" class="icon-btn" aria-label="Cart">
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M3 4h2l1.4 10.5a2 2 0 0 0 2 1.7h8.6a2 2 0 0 0 2-1.6L21 8H6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
          <circle cx="10" cy="20" r="1.4" fill="currentColor"></circle>
          <circle cx="17" cy="20" r="1.4" fill="currentColor"></circle>
        </svg>
        <span class="icon-badge" data-count="0">0</span>
      </a>

      <a href="/shop" class="shop-now-btn">Shop now</a>
    </div>

    <button class="menu-toggle" id="menuToggle" aria-label="Mở menu" aria-expanded="false" aria-controls="mainNav">
      <span></span><span></span><span></span>
    </button>

  </div>
</header>

<script>
  const toggle = document.getElementById('menuToggle');
  const nav = document.getElementById('mainNav');
  toggle.addEventListener('click', () => {
    const isOpen = nav.classList.toggle('open');
    toggle.setAttribute('aria-expanded', isOpen);
  });
</script>

</body>
</html>

English

German

Australia

Spanish

Portuguese

Canada

French

Italian

Japanese

Korean

Vietnamese

Contact us for any questions, support, or inquiries. We are here to help with your shopping experience.

beritau

Contact us

United States

Summary at a Glance

Send Us a Message