h<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>NPP Hiệp Hồ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="anh/LogoAPP.jpg">
<style>
/* ===== BODY ===== */
body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    background: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

/* ===== NAVIGATION ===== */
nav {
    background: #333;
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 10px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.nav-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    padding: 8px 12px;
    transition: background 0.3s, color 0.3s;
    border-radius: 5px;
}

nav a:hover {
    background: #f2c94c;
    color: #333;
}

.nav-logo img {
    width: 150px;
    height: auto;
    display: block;
}

/* ===== SLIDER ===== */
header {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.slider {
    position: absolute;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(100%);
    transition: transform 0.6s ease;
}

.slide img {
    width: 100%;
    height: 100%;
}
/* SLIDER DOTS */
.dots {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    z-index: 3;
}

.dot {
    height: 10px;
    width: 10px;
    margin: 0 6px;
    display: inline-block;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.dot.active {
    background: #f2c94c;
    transform: scale(1.3);
}

/* ===== CONTAINER & SECTION ===== */
.container {
    padding: 10px 10px;
    max-width: auto;
    margin: 0 auto;
}

.section {
    background: white;
    margin-bottom: 30px;
    padding: 20px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ===== GIỚI THIỆU ===== */
#gioithieu h1 {
    font-size: 38px;
    color: #222;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
}

#gioithieu p {
    font-size: 18px;
    color: #555;
    text-align: center;
    margin: 10px 0;
}

.gioithieu-img img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    margin: 25px 0;
}

.gioithieu-text p {
    margin-bottom: 15px;
    text-align: justify;
    font-size: 17px;
    color: #444;
}

/* ===== SECTIONS H2 ===== */
.section h2 {
    font-size: 28px;
    margin-bottom: 15px;
    color: #222;
    text-align: center;
}

/* ===== LIST ===== */
.section ul {
    list-style: disc inside;
    font-size: 17px;
    color: #444;
    margin-left: 20px;
}

/* ===== FOOTER ===== */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
}



.subtitle-with-lines {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0 30px 0;
    gap: 15px; /* khoảng cách chữ và thanh */
}

.subtitle-with-lines .line {
    flex: 0 0 150px; /* dài hơn trước */
    height: 3px;      /* mỏng hơn */
    border-radius: 3px; /* bo tròn */
    background: linear-gradient(to right, #FFD700, #FFF176); /* ngoài đậm → vào nhạt */
}

.subtitle-with-lines .line:last-child {
    background: linear-gradient(to left, #FFD700, #FFF176); /* bên phải đảo chiều */
}

.subtitle-with-lines .subtitle-text {
    font-size: 32px;      /* to hơn */
    font-weight: bold;
    color: #0f6338;       /* màu cam đậm nổi bật */
    text-align: center;
    white-space: nowrap;
}


/* Danh sách hỗ trợ: icon + bỏ dấu chấm */
.hotro-list {
    list-style: none !important; /* bắt buộc xóa bullet */
    padding-left: 0;
    font-size: 17px;
    color: #444;
    line-height: 1.6;
}

.hotro-list li {
    position: relative;
    padding-left: 35px; /* chừa chỗ cho icon */
    margin-bottom: 10px;
}

.hotro-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;  /* kích thước icon */
    height: 25px;
    background-image: url('anh/check.png'); /* icon check */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



/* ===== MOBILE ===== */
@media (max-width: 768px){

    /* HEADER SLIDER */
    header {
        height: 200px;
    }

    /* MENU */
    nav a {
        font-size: 10px;

    }

    .nav-logo img {
        width: 60px;
    }

    /* CONTAINER */
    .container {
        padding: 10px 10px;
    }

    .section {
        padding: 5px 15px;
    }

    /* GIỚI THIỆU */
    #gioithieu h1 {
        font-size: 20px;
    }

    #gioithieu p {
        font-size: 14px;
        
    }

    .subtitle-with-lines .subtitle-text {
        font-size: 20px;
        margin-top:-8px;
    }

    .subtitle-with-lines .line {
        flex: 0 0 80px; /* dài hơn trước */
        height: 1px;      /* mỏng hơn */
        border-radius: 3px; /* bo tròn */
        background: linear-gradient(to right, #FFD700, #FFF176);
        margin-top:-8px;
        
    }
    
    .subtitle-with-lines .line:last-child {
        background: linear-gradient(to left, #FFD700, #FFF176);
    }

}


.gioithieu-text {
  overflow: hidden;
  max-height: 150px; /* chiều cao rút gọn mặc định */
  transition: max-height 0.5s ease;
}

.gioithieu-text.expanded {
  max-height: 2000px; /* đủ lớn để hiển thị toàn bộ */
}

.btn-xemthem {
  display: block;
  margin: 20px auto 0 auto;
  padding: 10px 20px;
  background-color: #f2c94c;
  color: #333;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-xemthem:hover {
  background-color: #e0b800;
}



</style>
</head>

<body>


<div id="button-contact-vr">
  <div id="gom-all-in-one">

    <!-- Nút Zalo -->
    <div class="button-contact">
      <div class="phone-vr zalo">
        <div class="phone-vr-circle-fill"></div>
        <div class="phone-vr-circle-fill2"></div>
        <div class="phone-vr-circle-fill3"></div>
        <div class="phone-vr-img-circle">
          <a target="_blank" href="https://zalo.me/0982021966">
            <img src="anh/NutZalo.png" alt="Zalo">
          </a>
        </div>
      </div>
    </div>

    <!-- Nút Gọi điện -->
    <div class="button-contact">
      <div class="phone-vr call">
        <div class="phone-vr-circle-fill"></div>
        <div class="phone-vr-circle-fill2"></div>
        <div class="phone-vr-circle-fill3"></div>
        <div class="phone-vr-img-circle">
          <a href="tel:0982021966">
            <img src="anh/NutCall.png" alt="Phone">
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
#button-contact-vr {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
}
.button-contact {
  position: relative;
  margin-bottom: 15px;
}

/* Thu nhỏ toàn bộ nút */
.phone-vr {
  position: relative;
  width: 60px;
  height: 60px;
  transform: scale(0.8);
  transform-origin: center center;
}

/* Vòng tròn tĩnh */
.phone-vr-circle-fill {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 0;
}

/* Vòng 2 rung lắc */
.phone-vr-circle-fill2 {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  z-index: -1;
  animation: circle2-rattle 1.2s infinite ease-in-out;
}

/* Vòng 3 mờ bung ra/fade */
.phone-vr-circle-fill3 {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  z-index: -2;
  animation: circle3-fade 1.3s infinite ease-in-out;
}

/* Icon xoay trái-phải-trái rồi dừng */
.phone-vr-img-circle {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  animation: swing 0.6s infinite;
}
.phone-vr-img-circle img {
  width: 30px;
  height: 30px;
}

/* Keyframes icon xoay */
@keyframes swing {
  0% { transform: rotate(-15deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-15deg); }
  60% { transform: rotate(-15deg); }
  100% { transform: rotate(-15deg); }
}

/* Keyframes vòng 2 */
@keyframes circle2-rattle {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
  50%  { transform: translate(-50%, -50%) scale(1.1) rotate(5deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
}

/* Keyframes vòng 3 fade */
@keyframes circle3-fade {
  0%   { transform: translate(-50%, -50%) scale(0); opacity:0; }
  30%  { transform: translate(-50%, -50%) scale(1); opacity:0.4; }
  60%  { transform: translate(-50%, -50%) scale(1.2); opacity:0.2; }
  100% { transform: translate(-50%, -50%) scale(0); opacity:0; }
}

/* Màu riêng cho Zalo */
.phone-vr.zalo .phone-vr-circle-fill { background-color: #007fff; }
.phone-vr.zalo .phone-vr-circle-fill2 { background-color: rgba(0,127,255,0.3); }
.phone-vr.zalo .phone-vr-circle-fill3 { background-color: rgba(0,127,255,0.15); }
.phone-vr.zalo .phone-vr-img-circle { background-color: #007fff; }

/* Màu riêng cho Gọi điện */
.phone-vr.call .phone-vr-circle-fill { background-color: #e60808; }
.phone-vr.call .phone-vr-circle-fill2 { background-color: rgba(230,8,8,0.3); }
.phone-vr.call .phone-vr-circle-fill3 { background-color: rgba(230,8,8,0.15); }
.phone-vr.call .phone-vr-img-circle { background-color: #e60808; }
</style>







<!-- SLIDER -->
<header id="sliderArea">
    <div class="slider">
        <div class="slide"><img src="anh/Tieude1.jpg" draggable="false"></div>
        <div class="slide"><img src="anh/Tieude2.jpg" draggable="false"></div>
        <div class="slide"><img src="anh/Tieude3.jpg" draggable="false"></div>
        <div class="slide"><img src="anh/Tieude4.jpg" draggable="false"></div>
    </div>
    <div class="dots" id="dotsContainer"></div>
</header>

<!-- MENU -->
<nav>
  <div class="nav-flex">
    <a href="#gioithieu">Giới thiệu</a>
    <a href="#sanpham">Sản phẩm</a>
    <div class="nav-logo">
      <img src="anh/LogoHabeco.png" alt="Habeco Logo">
    </div>
    <a href="#hotro">Hỗ trợ quán</a>
    <a href="#lienhe">Liên hệ</a>
  </div>
</nav>

<!-- CONTENT -->
<div class="container">

<div id="gioithieu" class="section">
  <h1>NHÀ PHÂN PHỐI BIA HƠI HÀ NỘI</h1>
  
  <div class="subtitle-with-lines">
    <span class="line"></span>
    <span class="subtitle-text">HIỆP HỒ</span>
    <span class="line"></span>
  </div>

  <p><strong>Tự hào là nhà phân phối Bia Hơi Hà Nội số 1 trong khu vực, với hơn 15 năm kinh nghiệm phân phối bia hơi...</strong></p>

  <div class="gioithieu-img">
    <img src="anh/AnhGioiThieu.jpg" alt="Hội nghị khách hàng">
  </div>

  <div class="gioithieu-text collapsed" id="gioithieuText">
    <p>Trong suốt quá trình hoạt động, chúng tôi luôn đặt <strong>chất lượng sản phẩm</strong> và <strong>dịch vụ khách hàng</strong> lên hàng đầu. Mỗi dịp hội nghị khách hàng hay các buổi gặp gỡ đối tác, chúng tôi đều chia sẻ kinh nghiệm, lắng nghe nhu cầu và xây dựng mối quan hệ lâu dài, bền vững.</p>
    <p>Chúng tôi tự hào là cầu nối đưa <strong>Bia Hơi Hà Nội</strong> tới mọi quán bia nhỏ, giúp các chủ quán phục vụ khách hàng tốt hơn và tạo nên trải nghiệm uống bia tươi, mát, dễ chịu cho cộng đồng.</p>
    <p>Phần mở rộng này có thể bao gồm thêm nhiều thông tin khác về lịch sử, dịch vụ, sự kiện, khách hàng,…</p>
  </div>

  <button id="toggleGioiThieu" class="btn-xemthem">Xem thêm</button>
</div>


<script>
    const gioithieuText = document.getElementById('gioithieuText');
const toggleBtn = document.getElementById('toggleGioiThieu');

toggleBtn.addEventListener('click', () => {
    gioithieuText.classList.toggle('expanded');
    if(gioithieuText.classList.contains('expanded')){
        toggleBtn.textContent = "Thu gọn";
    } else {
        toggleBtn.textContent = "Xem thêm";
    }
});

// Tự ẩn khi scroll gần hết phần giới thiệu lên trên
window.addEventListener('scroll', () => {
    const sectionTop = gioithieuText.getBoundingClientRect().top;
    const sectionBottom = gioithieuText.getBoundingClientRect().bottom;
    
    // Nếu phần giới thiệu đã mở, nhưng người scroll gần hết phần trên (khoảng 100px)
    if(gioithieuText.classList.contains('expanded') && sectionTop > -100){
        gioithieuText.classList.remove('expanded');
        toggleBtn.textContent = "Xem thêm";
    }
});
</script>









<div id="sanpham" class="section">
  <h2>Sản Phẩm</h2>
  <p style="text-align:center; margin-bottom:30px;"> Chúng tôi chuyên phân phối các dòng bia tươi chính hãng, giao hàng nhanh trong ngày, phù hợp cho quán nhậu, nhà hàng và khách lẻ. </p>
  
  
  
  
  
  
  
  
<div class="product-row">
  <div class="product-image-circle">
    <img src="anh/SanphamKeg50L.png">
  </div>
  <div class="product-text">
    <h3>Bia Hơi Hà Nội</h3>
    <p>Vừa đủ cho quán nhỏ, dễ bảo quản, đảm bảo bia tươi.</p>
    <div class="toggle-btn">▼ Xem chi tiết</div>
  </div>

  <!-- ĐẶT Ở ĐÂY (CÙNG CẤP, KHÔNG NẰM TRONG TEXT) -->
  <div class="product-detail">
    <div class="detail-box">
      <p>• Dung tích: 50L</p>
      <p>• Bảo quản: 2–5°C</p>
      <p>• Hạn dùng: 7 ngày</p>
      <p>• Phù hợp: Quán bia, nhà hàng</p>
    </div>
  </div>
</div>





<div class="product-row reverse">

  <div class="product-image-circle">
    <img src="anh/SanphamKeg2L.png">
  </div>

  <div class="product-text">
    <h3>Bia Keg 2L</h3>
    <p>Cho khách lẻ hoặc phục vụ tại gia, tiện lợi và tiết kiệm.</p>

    <div class="toggle-btn">▼ Xem chi tiết</div>
  </div>

  <div class="product-detail">
    <div class="detail-box">
      <p>• Dung tích: 2L</p>
      <p>• Phù hợp: Gia đình, picnic</p>
      <p>• Tiện lợi mang đi</p>
    </div>
  </div>

</div>


<div class="product-row">

  <div class="product-image-circle">
    <img src="anh/SanphamChai1L.png">
  </div>

  <div class="product-text">
    <h3>Bia Chai 1L</h3>
    <p>Chai lớn cho nhóm uống, dễ bảo quản và phục vụ.</p>

    <div class="toggle-btn">▼ Xem chi tiết</div>
  </div>

  <div class="product-detail">
    <div class="detail-box">
      <p>• Dung tích: 1L</p>
      <p>• Dễ bảo quản</p>
      <p>• Phù hợp nhóm bạn</p>
    </div>
  </div>

</div>


<div class="product-row reverse">

  <div class="product-image-circle">
    <img src="anh/SanphamNon.png">
  </div>

  <div class="product-text">
    <h3>Bia Non</h3>
    <p>Bia nhẹ, thích hợp cho khách muốn thưởng thức lượng bia vừa phải.</p>

    <div class="toggle-btn">▼ Xem chi tiết</div>
  </div>

  <div class="product-detail">
    <div class="detail-box">
      <p>• Độ cồn thấp</p>
      <p>• Dễ uống</p>
      <p>• Phù hợp khách nhẹ đô</p>
    </div>
  </div>

</div>

<script>
const toggles = document.querySelectorAll('.toggle-btn');

toggles.forEach(btn => {
  btn.addEventListener('click', () => {

    const row = btn.closest('.product-row');
    const detail = row.querySelector('.product-detail');

    // 🔥 đóng tất cả trước
    document.querySelectorAll('.product-detail').forEach(d => {
      if(d !== detail) d.classList.remove('open');
    });

    document.querySelectorAll('.toggle-btn').forEach(b => {
      if(b !== btn) b.textContent = "▼ Xem chi tiết";
    });

    // toggle cái hiện tại
    detail.classList.toggle('open');

    if(detail.classList.contains('open')){
      btn.textContent = "▲ Thu gọn";
    } else {
      btn.textContent = "▼ Xem chi tiết";
    }

  });
});

window.addEventListener('scroll', () => {

  document.querySelectorAll('.product-row').forEach(row => {
    const detail = row.querySelector('.product-detail');
    const btn = row.querySelector('.toggle-btn');

    if(detail.classList.contains('open')){
      
      const rect = row.getBoundingClientRect();

      // nếu phần sản phẩm đã bị kéo lên gần khỏi màn hình
      if(rect.top > -50){
        detail.classList.remove('open');
        btn.textContent = "▼ Xem chi tiết";
      }

    }
  });

});

</script>

<style>

/* CHO PHÉP XUỐNG DÒNG */
.product-row {
  display: flex;
  flex-wrap: wrap; /* 🔥 quan trọng */
}

/* PHẦN CHI TIẾT */
.product-detail {
  width: 100%; /* 🔥 ép xuống dưới */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

/* khi mở */
.product-detail.open {
  max-height: 500px;
}

/* hộp nội dung */
.detail-box {
  margin-top: 15px;
  background: #fff;
  padding: 15px 20px;
  border-radius: 10px;
  border: 1px solid #eee;
  animation: fadeIn 0.4s ease;
}

/* animation mượt */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-10px);}
  to {opacity: 1; transform: translateY(0);}
}






.toggle-btn {
  margin-top: 10px;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  color: #b8860b;
  transition: 0.3s;
}

.toggle-btn:hover {
  color: #e0b800;
}

/* khi mở */
.product-detail.open {
  max-height: 300px;
}

/* xoay mũi tên */
.toggle-btn.active {
  transform: rotate(180deg);
}
.product-row {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 15px;
  padding: 20px 25px;               /* khoảng cách bên trong */
  border-radius: 15px;              /* bo góc */
  background: #fff9e6;              /* nền vàng nhạt dịu mắt */
  box-shadow: 0 6px 20px rgba(0,0,0,0.08); /* đổ bóng nhẹ nổi bật */
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-row:hover {
  transform: translateY(-5px);      /* hover nổi nhẹ */
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* Khi hover row, ảnh bên trong cũng zoom và có glow */
.product-row:hover .product-image-circle {
  transform: scale(1.05);                  /* zoom ảnh */
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6); /* glow */
}

/* Xóa hover riêng của img để tránh xung đột */
.product-image-circle img:hover {
  transform: none;
}
.product-row.reverse {
  flex-direction: row-reverse;
}

.product-image-circle img:hover {
  transform: scale(1.05);
  transition: transform 0.3s;
}

.product-image-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FFF176);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4); /* glow nhẹ */
  transition: transform 0.3s, box-shadow 0.3s;
}

.product-image-circle:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}

.product-image-circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-text {
  flex: 1;
}

.product-text h3 {
  font-size: 22px;
  color: #b8860b;    /* màu vàng nâu nổi bật trên nền nhạt */
  margin: 0 0 10px 0;
}

.product-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.6); /* nền mờ nhẹ */
  padding: 10px;
  border-radius: 8px;
}
/* Responsive mobile: vẫn zig-zag nhưng ảnh nhỏ + text thu gọn */
@media (max-width: 768px) {
  .product-row {
    gap: 15px;
    padding: 10px;
  }

  .product-image-circle {
    width: 100px;
    height: 100px;
  }

  .product-image-circle img {
    width: 100%;
    height: 100%;
  }

  .product-text h3 {
    font-size: 18px;
  }

  .product-text p {
    font-size: 14px;
    padding: 8px;
  }
}
</style>









<div id="hotro" class="section">
  <h2>Hỗ trợ mở quán</h2>

  <!-- Tiêu đề phụ -->
<ul class="hotro-list">
    <li>Chất lượng đảm bảo 100% từ nhà máy bia.</li>
    <li>Chính sách hỗ trợ tốt nhất thị trường, đầu tư trang thiết bị từ A đến Z.</li>
    <li>Giá tốt nhất theo quy định của nhà máy.</li>
    <li>Giao hàng tận nơi, hàng ngày, không hạn chế số lượng, hết gọi là có.</li>
    <li>Tư vấn chuyển giao kỹ thuật ủ và chắt rót bia.</li>
    <li>Tặng bia khai trương, cốc vại truyền thống, ô, áo, khay thương hiệu Habeco.</li>
    <li>Trang thiết bị hiện đại đảm bảo chất lượng bia luôn tươi mới tới tay khách hàng.</li>
    <li>Cho mượn tủ bảo quản bia đời mới thương hiệu Đức Minh…</li>
    <li>Biển quảng cáo nhận diện thương hiệu của Bia Hơi Hà Nội.</li>
    <li>Cho mượn bàn ghế ngồi uống bia và dụng cụ chiết rót.</li>
</ul>

</div>
</div>

<div id="lienhe" class="section contact-section">
  <div class="contact-box">
    <div class="contact-info">
      <h3>TỔNG ĐẠI LÝ BIA HƠI HÀ NỘI - HIỆP HỒ</h3>
      <p>🏠 <strong>Địa chỉ cũ:</strong> Vân Hội, Tam Dương, Vĩnh Phúc</p>
      <p>🏠 <strong>Địa chỉ mới:</strong> Vân Hội, Hội Thịnh, Phú Thọ</p>
      <p>📞 <strong>SĐT:</strong> 0982.02.1966 - 0977.966.971</p>
      <p>✉️ <strong>Email:</strong> DongDanhHiep@gmail.com</p>
      <p>🌐 <strong>Website:</strong> <a href="http://DaiLyBiaHaNoi.vn" target="_blank">DaiLyBiaHaNoi.vn</a></p>
    </div>

    <div class="contact-extra">
      <div class="map-container">
        <iframe 
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3724.123456789!2d105.589432!3d21.308765!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135abc123456789%3A0xabcdef1234567890!2s123%20Tr%E1%BA%A7n%20Ph%C3%BA%2C%20V%C4%83n%20Ph%C3%BAc!5e0!3m2!1svi!2s!4v1691234567890!5m2!1svi!2s" 
          style="border:0; border-radius:10px;" allowfullscreen="" loading="lazy"></iframe>
      </div>
      <div class="image-container">
        <img src="anh/fb-page.jpg" alt="Facebook" />
      </div>
    </div>
  </div>


<style>

.contact-section {
    background: url('anh/AnhLienHe.png') no-repeat center center;
    background-size: cover;
    color: #fff;
    padding: 20px;           
    margin: 0;               
    border-radius: 0;        
    box-shadow: none;        
    width: 100vw;            
    max-width: 100%;         
    box-sizing: border-box;  
}

.contact-section h2 {
  text-align: center;
  font-size: 22px;
  margin-bottom: 8px;
}

.contact-note {
  text-align: center;
  font-size: 16px;
  margin-bottom: 15px;
  font-style: italic;
  color: #ffd700;
}

.contact-box {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.contact-info {
  flex: 1 1 300px;
  font-size: 15px;
}

.contact-info h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #ffd700;
}

.contact-info p {
  margin: 3px 0;
  line-height: 1.4;
}

.contact-info a {
  color: #fff;
  text-decoration: underline;
}

.contact-extra {
  flex: 1 1 300px;
  display: flex;
  gap: 10px;
  align-items: stretch; /* map + ảnh cao bằng nhau */
}

.map-container, .image-container {
  flex: 1 1 50%;
}

.map-container iframe, .image-container img {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  object-fit: cover;
}

/* Responsive mobile */
@media (max-width:768px){
  .contact-box {
    flex-direction: row;
    gap: 10px;
  }

  .contact-info {
    flex: 1 1 100%;
    margin-bottom: 10px;
  }

  .contact-extra {
    flex-direction: row;
    gap: 5px;
  }

  .map-container iframe, .image-container img {
    height: 140px;
  }

  .contact-section h2 {
    font-size: 18px;
  }

  .contact-note {
    font-size: 14px;
  }
}


</style>



<script>
const slidesSP = document.querySelectorAll('.sanpham-slide');
let indexSP = 0;

function showSlideSP(i) {
    slidesSP.forEach((s, idx) => {
        s.classList.remove('active');
        if(idx === i) s.classList.add('active');
    });
    indexSP = i;
}

document.querySelector('.sanpham-next').addEventListener('click', () => {
    showSlideSP((indexSP + 1) % slidesSP.length);
});

document.querySelector('.sanpham-prev').addEventListener('click', () => {
    showSlideSP((indexSP - 1 + slidesSP.length) % slidesSP.length);
});

// Swipe mobile
let startXSP = 0;
const carousel = document.querySelector('.sanpham-carousel');
carousel.ontouchstart = e => startXSP = e.touches[0].clientX;
carousel.ontouchend = e => {
    let diff = e.changedTouches[0].clientX - startXSP;
    if(Math.abs(diff) > 50){
        if(diff < 0) showSlideSP((indexSP + 1) % slidesSP.length);
        else showSlideSP((indexSP - 1 + slidesSP.length) % slidesSP.length);
    }
}
</script>




<script>
const slides = document.querySelectorAll('.slide');
const dotsContainer = document.getElementById('dotsContainer');
let index = 0;

/* TẠO DOT */
slides.forEach((_, i) => {
    const dot = document.createElement('span');
    dot.className = 'dot' + (i === 0 ? ' active' : '');
    dot.onclick = () => show(i);
    dotsContainer.appendChild(dot);
});

const dots = document.querySelectorAll('.dot');

/* HIỂN THỊ SLIDE */
function show(i) {
    slides.forEach((s, idx) => {
        if (idx === i) s.style.transform = 'translateX(0)';
        else if (idx < i) s.style.transform = 'translateX(-100%)';
        else s.style.transform = 'translateX(100%)';
    });
    document.querySelector('.dot.active')?.classList.remove('active');
    dots[i].classList.add('active');
    index = i;
}

show(0);

/* AUTO SLIDE */
setInterval(() => {
    show((index + 1) % slides.length);
}, 4000);

/* SWIPE MOBILE */
let startX = 0;
const sliderArea = document.getElementById('sliderArea');
sliderArea.ontouchstart = e => startX = e.touches[0].clientX;
sliderArea.ontouchend = e => {
    let diff = e.changedTouches[0].clientX - startX;
    if (Math.abs(diff) > 50) {
        show(diff < 0 
            ? (index + 1) % slides.length 
            : (index - 1 + slides.length) % slides.length
        );
    }
};

/* DRAG MOUSE */
let isDown = false;
let startX_mouse = 0;
sliderArea.addEventListener('mousedown', e => {
    isDown = true;
    startX_mouse = e.clientX;
});
document.addEventListener('mouseup', e => {
    if (!isDown) return;
    isDown = false;
    let diff = e.clientX - startX_mouse;
    if (Math.abs(diff) > 50) {
        show(diff < 0 
            ? (index + 1) % slides.length 
            : (index - 1 + slides.length) % slides.length
        );
    }
});
</script>
</body>
</html>