<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact - Beluckyman</title>
<style>
/* Tất cả style chỉ áp dụng cho .contact-page */
.contact-page * {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.contact-page body {
    background-color: #f7f7f7;
    color: #333;
}

/* HEADER */
.contact-page header {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
}

.contact-page header h1 {
    font-size: 24px;
    font-weight: bold;
}

/* HERO */
.contact-page .hero {
    background-color: #e2e8f0;
    text-align: center;
    padding: 60px 20px;
}

.contact-page .hero h2 {
    font-size: 36px;
    font-weight: bold;
}

/* MAIN SECTION */
.contact-page .main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

/* CONTACT INFO */
.contact-page .contact-info {
    flex: 1 1 300px;
}

.contact-page .contact-info h3 {
    font-size: 28px;
    margin-bottom: 20px;
}

.contact-page .contact-info p {
    margin-bottom: 10px;
    line-height: 1.6;
}

.contact-page .contact-info strong {
    font-weight: bold;
}

/* CONTACT FORM */
.contact-page .contact-form {
    flex: 1 1 300px;
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.contact-page .contact-form h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.contact-page .contact-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}

.contact-page .contact-form input,
.contact-page .contact-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.contact-page .contact-form textarea {
    resize: vertical;
    height: 100px;
}

.contact-page .contact-form button {
    width: 100%;
    padding: 14px;
    background-color: #000;
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-page .contact-form button:hover {
    background-color: #222;
}

/* MAP */
.contact-page .map-container {
    margin-top: 20px;
    flex: 1 1 100%;
}

.contact-page .map-container iframe {
    width: 100%;
    border: 0;
    border-radius: 12px;
    height: 300px;
}

/* FOOTER */
.contact-page footer {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 30px 20px;
    margin-top: 40px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .contact-page .main {
        flex-direction: column;
    }
}
</style>
</head>
<body>

<div class="contact-page">

    
    <header>
        <h1></h1>
    </header>

    
    <section class="hero">
        <h2>Contact Us</h2>
    </section>

    
    <section class="main">

        
        <div class="contact-info">
            <h3>Get in Touch</h3>
            <p>Do you have any questions about our company or services? Please fill out the form and we will respond as soon as possible.</p>
            <p><strong>Address:</strong> TDP Hai, Hải Sơn, Đồ Sơn, Hải Phòng
</p>
            <p><strong>Email:</strong> customersuccess@mallshoppa.com</p>
            <p><strong>Support Time:</strong> 9:00 AM – 5:00 PM (EST) (Mon – Fri)</p>

            
            <div class="map-container">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d18367.467610448257!2d106.78025356325134!3d20.71822511381362!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x314a6c3d94d1a0e3%3A0xba17f411a73535e0!2zSOG6o2kgU8ahbiwgxJDhu5MgU8ahbiwgSOG6o2kgUGjDsm5nLCBWaeG7h3QgTmFt!5e1!3m2!1svi!2s!4v1768357303742!5m2!1svi!2s" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>

        
        <div class="contact-form">
            <h3>Send Us a Message</h3>
            <form action="https://formspree.io/f/mldpqpwz" method="POST">
                <label for="name">Your Name</label>
                <input type="text" id="name" name="name" placeholder="Enter your name" required>

                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" placeholder="Enter your email" required>

                <label for="message">Message</label>
                <textarea id="message" name="message" placeholder="Write your message" required></textarea>

                <button type="submit">Send Message</button>
            </form>
        </div>

    </section>

  

</div>

</body>
</html>

<!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>
    /* ================= SCOPE HEADER ONLY ================= */
    .header-container {
      font-family: Arial, Helvetica, sans-serif;
      background: #f5f5f5;
    }
    /* ---------- TOP HEADER ---------- */
    .header-container .top-header {
      background: #ffffff;
      color: #333;
      padding: 35px 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      min-height: 140px;
    }
    .header-container .center-logo {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .header-container .logo-img {
      height: 105px;
      width: auto;
      display: block;
    }
    .header-container .right-links {
      display: flex;
      align-items: center;
      gap: 25px;
      position: absolute;
      right: 5%;
      top: 50%;
      transform: translateY(-50%);
    }
    .header-container .right-links a {
      text-decoration: none;
      display: flex;
      align-items: center;
    }
    .header-container .right-links img {
      height: 26px;
      width: auto;
      transition: opacity 0.3s;
    }
    .header-container .right-links a:hover img {
      opacity: 0.8;
    }
    /* ---------- BOTTOM HEADER (XANH DƯƠNG ĐẬM TỐI) ---------- */
    .header-container .bottom-header {
      background: #001f3f; /* Đổi từ đen sang xanh dương đậm tối (dark navy) */
      padding: 12px 5%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }
    .header-container .bottom-nav {
      display: flex;
      gap: 35px;
    }
    .header-container .bottom-nav a {
      color: #ffffff;
      text-decoration: none;
      font-size: 15.5px;
      text-transform: uppercase;
      font-weight: 500;
      transition: color 0.3s;
    }
    .header-container .bottom-nav a:hover {
      color: #cccccc; /* Giữ nguyên hover xám nhạt cho đẹp trên nền tối */
    }
    /* ---------- RESPONSIVE ---------- */
    @media (max-width: 768px) {
      .header-container .top-header {
        padding: 20px 5%;
        min-height: 110px;
      }
      .header-container .logo-img {
        height: 80px;
      }
      .header-container .right-links {
        gap: 18px;
      }
      .header-container .right-links img {
        height: 22px;
      }
      .header-container .bottom-nav {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
      }
      .header-container .bottom-nav a {
        font-size: 13.5px;
      }
    }
  </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/1768355889091wf4wt9.webp"
               alt="chairgoods 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/17670027564040dodj2.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>

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.

Mallshoppa

Contact us

United States