<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Header giống ảnh</title>
  <style>
    /* TẤT CẢ STYLE CHỈ ÁP DỤNG TRONG .header-container - KHÔNG ẢNH HƯỞNG TOÀN TRANG */
    .header-container {
      font-family: Arial, Helvetica, sans-serif;
      background: #f5f5f5;
    }
    .header-container .top-header {
      background: #90a4ae; /* Đổi từ cam sang màu xám hơi xanh (grayish) */
      color: #fff;
      padding: 40px 5%; /* Tăng padding thêm để phần xám cao hơn, logo to có không gian */
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      min-height: 160px; /* Tăng chiều cao tối thiểu để phù hợp logo lớn hơn */
    }
    .header-container .center-logo {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .header-container .logo-img {
      height: 120px; /* To hơn nữa - từ 90px lên 120px */
      width: auto;
      display: block;
    }
    .header-container .right-links {
      display: flex;
      align-items: center;
      gap: 30px;
      position: absolute;
      right: 5%; /* Đẩy sát góc phải tuyệt đối */
      top: 50%;
      transform: translateY(-50%);
    }
    .header-container .right-links a {
      color: #fff;
      text-decoration: none;
      display: flex;
      align-items: center;
    }
    .header-container .right-links img {
      height: 28px; /* Kích thước icon hợp lý */
      width: auto;
      filter: brightness(0) invert(1); /* Làm icon trắng để nổi trên nền xám */
      transition: opacity 0.3s;
    }
    .header-container .right-links a:hover img {
      opacity: 0.8;
    }
    .header-container .bottom-header {
      background: #121212; /* Đổi nền menu thành đen bóng (dark black) */
      padding: 15px 5%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.5); /* Tăng shadow để tạo cảm giác "bóng" hơn */
    }
    .header-container .bottom-nav {
      display: flex;
      gap: 40px;
    }
    .header-container .bottom-nav a {
      color: #e0e0e0; /* Đổi màu chữ menu sang xám nhạt để nổi trên nền đen */
      text-decoration: none;
      font-size: 16px;
      text-transform: uppercase; /* Viết hoa hết các link menu dưới */
      font-weight: 500;
    }
    .header-container .bottom-nav a:hover {
      color: #90a4ae; /* Hover chuyển sang màu xám hơi xanh để đồng bộ với phần top */
    }
    /* Responsive - chỉ áp dụng trong container */
    @media (max-width: 768px) {
      .header-container .top-header {
        padding: 25px 5%;
        min-height: 120px;
      }
      .header-container .logo-img {
        height: 90px; /* Trên mobile vẫn giữ kích thước hợp lý, to hơn bản cũ nhưng không quá lớn */
      }
      .header-container .right-links {
        gap: 20px;
        right: 5%;
      }
      .header-container .right-links img {
        height: 24px;
      }
      .header-container .bottom-nav {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .header-container .bottom-nav a {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  
  <div class="header-container">
    
    <div class="top-header">
      
      <div class="center-logo">
        <a href="/">
          <img src="https://egead.nyc3.cdn.digitaloceanspaces.com/1767755176863anouw1.webp
" alt="Makebesttoast Fashion" class="logo-img">
        </a>
      </div>
      
      <div class="right-links">
        <a href="/wishlist" title="Wishlist">
          <img src="https://cdn-icons-png.flaticon.com/512/1077/1077035.png" alt="Wishlist">
        </a>
        <a href="/cart" title="Cart">
          <img src="https://egead.nyc3.cdn.digitaloceanspaces.com/1766827756226o3jbf9.webp" alt="Cart">
        </a>
      </div>
    </div>
    
    <div class="bottom-header">
      <nav class="bottom-nav">
        <a href="/">HOME</a>
        <a href="/shop">PRODUCTS</a>
        <a href="/page/about-us">ABOUT US</a>
        <a href="/page/contact">CONTACT</a>
        <a href="/page/faqs">FAQS</a>
        <a href="/order-tracking">ORDER TRACKING</a>
      </nav>
    </div>
  </div>
</body>
</html>

My Wishlist

Your Wishlist is Empty

COMPANY

CONTACT INFORMATION

SUPPORT HOURS

ABOUT US

POLICIES

ACCEPTED PAYMENT METHODS

My Wishlist

Your Wishlist is Empty

SUBSCRIBE TO NEWSLETTER

COMPANY

CONTACT INFORMATION

SUPPORT HOURS

ABOUT US

POLICIES

ACCEPTED PAYMENT METHODS