<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vitaphile</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap" rel="stylesheet">

<style>
:root{
  --ink:#232019;
  --paper:#faf8f4;
  --card:#ffffff;
  --champagne:#8a6a3d;
  --line:rgba(35,32,25,0.12);
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

body{
  font-family:'Jost',sans-serif;
}


/* =====================================================
   HEADER
===================================================== */

.site-header{
  position:relative;
  z-index:100;

  width:100%;

  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.header-inner{
  max-width:1410px;
  height:78px;

  margin:0 auto;
  padding:0 32px;

  display:flex;
  align-items:center;

  gap:32px;
}


/* =====================================================
   LOGO
===================================================== */

.logo{
  display:flex;
  align-items:center;

  flex-shrink:0;

  text-decoration:none;
}

.logo img{
  display:block;

  height:36px;
  width:auto;
  max-width:200px;

  object-fit:contain;
}


/* =====================================================
   DESKTOP NAV
===================================================== */

.main-nav{
  flex:1;
}

.main-nav ul{
  list-style:none;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:34px;

  margin:0;
  padding:0;
}

.main-nav a{
  position:relative;

  display:block;

  padding:5px 0;

  color:var(--ink);

  text-decoration:none;

  font-size:14.5px;
  font-weight:300;

  letter-spacing:.02em;
}

.main-nav a::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:1px;

  background:var(--champagne);

  transform:scaleX(0);
  transform-origin:left;

  transition:transform .2s ease;
}

.main-nav a:hover{
  color:var(--champagne);
}

.main-nav a:hover::after{
  transform:scaleX(1);
}


/* =====================================================
   HEADER ACTIONS
===================================================== */

.header-actions{
  display:flex;
  align-items:center;

  gap:6px;

  flex-shrink:0;
}

.icon-btn{
  position:relative;

  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--ink);

  text-decoration:none;

  border-radius:50%;
}

.icon-btn:hover{
  background:var(--line);
}

.icon-btn svg{
  width:19px;
  height:19px;
}

.icon-badge{
  position:absolute;

  top:1px;
  right:1px;

  min-width:16px;
  height:16px;

  padding:0 3px;

  display:flex;
  justify-content:center;
  align-items:center;

  border-radius:20px;

  background:var(--champagne);
  color:#fff;

  font-size:10px;
  font-weight:500;
}

.icon-badge[data-count="0"]{
  display:none;
}


/* =====================================================
   SHOP NOW
===================================================== */

.shop-now-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-left:8px;

  padding:10px 22px;

  background:var(--ink);
  color:#fff;

  border-radius:3px;

  text-decoration:none;

  font-size:13.5px;
  font-weight:400;

  letter-spacing:.04em;
}

.shop-now-btn:hover{
  background:var(--champagne);
}


/* =====================================================
   HAMBURGER
===================================================== */

.menu-toggle{
  display:none;

  width:44px;
  height:44px;

  padding:0;

  border:0;
  background:transparent;

  cursor:pointer;

  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:5px;
}

.menu-toggle span{
  display:block;

  width:21px;
  height:1.5px;

  background:var(--ink);

  pointer-events:none;
}


/* =====================================================
   MOBILE OVERLAY
===================================================== */

.mobile-overlay{
  position:fixed !important;

  top:0;
  left:0;
  right:0;
  bottom:0;

  width:100vw;
  height:100vh;

  background:rgba(0,0,0,.42);

  z-index:2147483646 !important;

  opacity:0;
  visibility:hidden;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}

.mobile-overlay.is-open{
  opacity:1;
  visibility:visible;
}


/* =====================================================
   MOBILE DRAWER
===================================================== */

.mobile-drawer{
  position:fixed !important;

  top:0;
  left:0;

  width:min(82vw,340px);
  height:100dvh;

  background:var(--paper);

  z-index:2147483647 !important;

  transform:translateX(-100%);

  transition:transform .32s cubic-bezier(.4,0,.2,1);

  overflow-y:auto;

  box-shadow:
    8px 0 30px rgba(0,0,0,.15);

  visibility:hidden;
}

.mobile-drawer.is-open{
  transform:translateX(0);
  visibility:visible;
}


/* =====================================================
   DRAWER TOP
===================================================== */

.drawer-header{
  height:72px;

  padding:0 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:1px solid var(--line);
}

.drawer-logo img{
  display:block;

  height:30px;
  width:auto;
  max-width:150px;
}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.drawer-close{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;

  border:0;
  background:transparent;

  cursor:pointer;

  position:relative;
}

.drawer-close::before,
.drawer-close::after{
  content:"";

  position:absolute;

  width:22px;
  height:1.5px;

  background:var(--ink);
}

.drawer-close::before{
  transform:rotate(45deg);
}

.drawer-close::after{
  transform:rotate(-45deg);
}


/* =====================================================
   DRAWER NAV
===================================================== */

.drawer-nav{
  padding:15px 24px 25px;
}

.drawer-nav ul{
  list-style:none;

  margin:0;
  padding:0;
}

.drawer-nav li{
  margin:0;
  padding:0;
}

.drawer-nav a{
  display:block;

  width:100%;

  padding:15px 2px;

  border-bottom:1px solid var(--line);

  color:var(--ink);

  text-decoration:none;

  font-size:16px;
  font-weight:300;

  letter-spacing:.02em;
}

.drawer-nav a:hover{
  color:var(--champagne);
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:900px){

  .site-header{
    position:relative;
    z-index:100;
  }

  .header-inner{
    height:70px;

    padding:0 14px;

    display:grid;

    grid-template-columns:44px minmax(0,1fr) 44px;

    align-items:center;

    gap:0;
  }


  /* HAMBURGER TRÁI */

  .menu-toggle{
    display:flex;

    justify-self:start;

    width:44px;
    height:44px;
  }


  /* LOGO GIỮA */

  .logo{
    justify-self:center;
  }

  .logo img{
    height:29px;
    max-width:145px;
  }


  /* NAV DESKTOP ẨN */

  .main-nav{
    display:none !important;
  }


  /* ACTION PHẢI */

  .header-actions{
    justify-self:end;

    width:44px;

    display:flex;
    justify-content:flex-end;

    gap:0;
  }

  .wishlist-btn{
    display:none !important;
  }

  .shop-now-btn{
    display:none !important;
  }

  .cart-btn{
    width:44px;
    height:44px;
  }
}


/* =====================================================
   DESKTOP: KHÔNG HIỆN DRAWER
===================================================== */

@media(min-width:901px){

  .mobile-drawer,
  .mobile-overlay{
    display:none !important;
  }

}
</style>
</head>


<body>




<header class="site-header">

  <div class="header-inner">


    

    <button
      type="button"
      class="menu-toggle"
      id="menuToggle"
      aria-label="Open menu"
    >
      <span></span>
      <span></span>
      <span></span>
    </button>


    

    <a href="/" class="logo">

      <img
        src="https://spacing.nyc3.cdn.digitaloceanspaces.com/1784707077821cc5rct.png"
        alt="Vitaphile"
      >

    </a>


    

    <nav class="main-nav">

      <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="/page/contact">Contact Us</a>
        </li>

        <li>
          <a href="/page/order-tracking">Order Tracking</a>
        </li>

      </ul>

    </nav>


    

    <div class="header-actions">


      

      <a
        href="/wishlist"
        class="icon-btn wishlist-btn"
        aria-label="Wishlist"
      >

        <svg
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >

          <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 cart-btn"
        aria-label="Cart"
      >

        <svg
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >

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

  </div>

</header>




<div
  class="mobile-overlay"
  id="mobileOverlay"
></div>




<aside
  class="mobile-drawer"
  id="mobileDrawer"
>


  

  <div class="drawer-header">


    <a
      href="/"
      class="drawer-logo"
    >

      <img
        src="https://spacing.nyc3.cdn.digitaloceanspaces.com/1784707077821cc5rct.png"
        alt="Vitaphile"
      >

    </a>


    <button
      type="button"
      class="drawer-close"
      id="drawerClose"
      aria-label="Close menu"
    ></button>


  </div>


  

  <nav class="drawer-nav">

    <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="/page/contact">Contact Us</a>
      </li>

      <li>
        <a href="/page/order-tracking">Order Tracking</a>
      </li>

    </ul>

  </nav>

</aside>




<script>
(function(){

  const menuToggle =
    document.getElementById('menuToggle');

  const drawer =
    document.getElementById('mobileDrawer');

  const overlay =
    document.getElementById('mobileOverlay');

  const closeButton =
    document.getElementById('drawerClose');


  function openMenu(){

    drawer.classList.add('is-open');

    overlay.classList.add('is-open');

    document.body.style.overflow = 'hidden';

  }


  function closeMenu(){

    drawer.classList.remove('is-open');

    overlay.classList.remove('is-open');

    document.body.style.overflow = '';

  }


  menuToggle.addEventListener(
    'click',
    openMenu
  );


  closeButton.addEventListener(
    'click',
    closeMenu
  );


  overlay.addEventListener(
    'click',
    closeMenu
  );


  /* đóng khi bấm link */

  drawer
    .querySelectorAll('a')
    .forEach(function(link){

      link.addEventListener(
        'click',
        closeMenu
      );

    });


  /* phím ESC */

  document.addEventListener(
    'keydown',
    function(event){

      if(event.key === 'Escape'){
        closeMenu();
      }

    }
  );


})();
</script>


</body>
</html>