<!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>

Classic Leather Skinny Belt

Classic Leather Belt with Silver Buckle

Leather Belt with Silver Buckle

Rhinestone Buckle Leather Belt

Classic Leather Belt with Golden Buckle

Leather Belt with Golden Buckle

Leather Skinny Belt with Buckle

English

German

Australia

Spanish

Portuguese

Canada

French

Italian

Japanese

Korean

Vietnamese

Shop our collection of unique handmade products, arts, t-shirts, stickers, clothes and gifts designed by independent artists.

beritau

Contact us

United States

Filters

Product Type