*{padding: 0;margin: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;}
body {
  padding-top: 80px; /* chừa chỗ cho menu cố định */
}
/* Thanh menu chính */
.navbar {
  background-color: #000;        /* nền đen */
  display: flex;
  justify-content:center;       /* căn giữa toàn bộ */
  align-items: center;
  padding: 20px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* Logo */
.logo img {
  height: 40px;
  margin-right:200px;            /* khoảng cách giữa logo và menu */
  object-fit: cover;
}

/* Menu chính */
.menu {
  display: flex;
  gap: 40px;                     /* khoảng cách giữa các mục menu */
  list-style: none;
}

/* Các mục menu */
.menu li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

/* Hiệu ứng hover */
.menu li a:hover {
  color: #c7a158;
}
.menu li{position: relative;}


/* ====== MENU CẤP 2 ====== */
.submenu {
  position: absolute;
  top: 108%; /* nằm ngay dưới menu cha */
  left: 0;
  background-color: #000000; /* nền đen nhẹ */
  list-style: none;
  padding: 10px 0;
  min-width: 220px;
  display: none; /* ẩn mặc định */
  flex-direction: column;
}

/* Hiện submenu khi hover vào menu cha */
.menu li:hover .submenu {
  display: flex;
}

/* Các mục trong submenu */
.submenu li a {
  display: block;
  padding: 16px 20px;
  color: white;
  font-size: 15px;
}

.submenu li a:hover {
   color:#c7a158; 
}


/* ------------NỐT HƯƠNG ĐẶC SẢN -----------*/
.not-huong {
  padding: 80px 100px;              /* Khoảng cách 2 bên + trên dưới */
  background-color: #fff;           /* Nền trắng */
}

.not-huong-container {
  display: flex;                    /* 2 cột: chữ trái – hình phải */
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;                        /* Khoảng cách giữa 2 phần */
}

/* CỘT TRÁI: PHẦN CHỮ */
.not-huong-text {
  flex: 1;
  text-align: left;
}

.not-huong-text h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #000;
  letter-spacing: 0.5px;            /* Giãn nhẹ giữa các chữ */
}

.not-huong-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 15px;
}

/* CỘT PHẢI: PHẦN HÌNH */
.not-huong-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;                 /* Giữ ảnh trong khung khi zoom */
  border-radius: 10px;              /* Bo góc khung */
  max-width: 400px;                 /* Giới hạn chiều rộng khung */
  height: auto;
  position: relative;
}

.not-huong-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* Ảnh luôn đầy khung */
  border-radius: 10px;
  transition: transform 0.5s ease;  /* Hiệu ứng zoom mượt */
  cursor: zoom-in;                  /* Hiện kính lúp khi hover */
}

.not-huong-image:hover img,
.not-huong-image:active img {
  transform: scale(1.2);            /* Zoom to ảnh trong khung */
}


/* RESPONSIVE — Khi xem trên điện thoại */
@media (max-width: 900px) {
  .not-huong-container {
    flex-direction: column;         /* Chuyển thành dọc */
    align-items: center;
    text-align: center;
  }

  .not-huong-image {
    order: -1;                      /* Cho hình lên trước phần chữ */
    margin-bottom: 30px;
    max-width: 90%;                 /* Giới hạn chiều rộng trên mobile */
  }

  .not-huong-text {
    width: 90%;
  }
}




/* -------TẦM NHÌN SỨ MỆNH-XEM THÊM --------*/
.vision-mission {
  background-color: #fff;
  padding: 30px 0;
  text-align: center;
}

/* DÀN 2 KHỐI NGANG */
.vm-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 200px; /* khoảng cách giữa 2 khối */
  flex-wrap: wrap; /* tự xuống dòng khi thu nhỏ */
}

/* MỖI KHỐI */
.vm-item {
  max-width: 400px;
  text-align: center;
}

/* ICON */
.vm-icon {
  width: 90px;
  height: auto;
  margin-bottom: 25px;
  transition: transform 0.4s ease;
}

/* PHÓNG TO NHẸ ICON KHI HOVER */
.vm-item:hover .vm-icon {
  transform: scale(1.08);
}

/* TIÊU ĐỀ */
.vm-title {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 15px;
  letter-spacing: 0.3px;
}

/* NỘI DUNG MÔ TẢ */
.vm-text {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  margin: 0 auto;
  max-width: 350px;
}


/* BANNER */
/* Banner chính */
.banner {
  position: relative;
  max-width: 100%;
  height: 90vh;
  overflow: hidden;
}

/* Ảnh từng slide */
.slide {
  display: none;
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 
}

/* Slide đang hiển thị */
.active {
  display: block;
  animation: fadeEffect 1s ease-in-out;
}

/* Hiệu ứng mờ */
@keyframes fadeEffect {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* Nút điều hướng trái phải */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 12px;
  color: white;
  font-size: 20px;
  user-select: none;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.3s;
  z-index: 10;
}

.prev:hover, .next:hover {
  background: rgba(0, 0, 0, 0.6);
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

/* -------THÔNG TIN CỦA WEB NỐT HƯƠNG ĐẶC SẢN--------*/
.story-section {
  text-align: center;
  padding: 60px 100px;
}

.main-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 40px;
  color: #333;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.text-left {
  flex: 1;
  text-align: left;
  max-width: 500px;
}

.text-left h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

.text-left p {
  line-height: 1.5;
  font-size: 16px;
  margin-bottom: 20px;
  color: #555;
}

.image-center {
  flex: 1;
}

.image-center img {
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  object-fit: cover;
}

.text-right {
  flex: 1;
  text-align: left;
}

.text-right h2 {
  font-size: 20px;
  font-weight: 700;
}

.btn {
  background-color: #d6b8a6;
  border: none;
  color: white;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.btn:hover {
  background-color: #caa58f;
} 


.core-values {
  width: 100%;
  padding: 80px 0;
  position: relative;
}

.section-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #222;
  margin-bottom: 80px;
}



/* ---------THANG ĐO THÔNG TIN-------- */

.timeline {
  position: relative;         /* Giúp định vị phần tử con tuyệt đối (dấu tròn, đường giữa) */
  max-width: 1100px;          /* Giới hạn chiều rộng tối đa của toàn bộ timeline */
  margin: 80px auto;          /* Căn giữa timeline và tạo khoảng cách trên dưới */
  padding: 0 20px;            /* Thêm khoảng cách lề trong 2 bên */
}

/* -------- ĐƯỜNG DỌC Ở GIỮA TIMELINE -------- */
.timeline::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;                  /* Đặt đường ở giữa trang */
  transform: translateX(-50%);
  width: 3px;                 /* Độ dày của đường */
  background-color: #d2a074;  /* Màu vàng nâu */
}

/* -------- MỖI KHỐI NỘI DUNG (GỒM ẢNH + CHỮ) -------- */
.timeline-item {
  position: relative;
  margin: 60px 0;             /* Khoảng cách giữa các khối timeline */
  display: flex;              /* Sử dụng flex để sắp xếp ảnh và nội dung theo hàng ngang */
  align-items: center;        /* Căn giữa ảnh và chữ theo chiều dọc */
  justify-content: space-between;
}

/* -------- KHỐI BÊN TRÁI (ẢNH TRÁI – CHỮ PHẢI) -------- */
.timeline-item.left {
  flex-direction: row;        /* Ảnh nằm bên trái, chữ bên phải */
}
.timeline-item.left .image {
  width: 38%;                 /* Ảnh chiếm 38% chiều ngang */
}
.timeline-item.left .content {
  width: 45%;                 /* Nội dung chiếm 45% */
  text-align: left;           /* Căn chữ bên trái */
}

/* -------- KHỐI BÊN PHẢI (ẢNH PHẢI – CHỮ TRÁI) -------- */
.timeline-item.right {
  flex-direction: row-reverse;/* Đảo chiều: ảnh bên phải, chữ bên trái */
}
.timeline-item.right .image {
  width: 38%;
}
.timeline-item.right .content {
  width: 45%;
  text-align: right;          /* Căn chữ bên phải */
}

/* -------- DẤU TRÒN Ở GIỮA CÁC GIAI ĐOẠN -------- */
.timeline-item::before {
  content: '';
  position: absolute;
  top: 50%;                   /* Căn giữa theo chiều dọc */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: #d2a074;
  border-radius: 50%;
  z-index: 2;
}

/* -------- HÌNH ẢNH -------- */
.timeline-item .image img {
  width: 80%;                /* Ảnh chiếm toàn bộ khối .image */
  border-radius: 12px;        /* Bo góc ảnh mềm mại */
  transition: none;           /* Không thêm hiệu ứng hover */
}

/* -------- NỘI DUNG VĂN BẢN -------- */
.timeline-item .content {
  color: #444;
}
.timeline-item h3 {
  font-size: 22px;
  color: #222;
  margin-bottom: 10px;
  text-align: center;         /* Tiêu đề căn giữa trong khối chữ */
}
.timeline-item p {
  line-height: 1.7;
  font-size: 16px;
  text-align: justify;        /* Căn đều hai bên cho đẹp và dễ đọc */
}

/* -------- RESPONSIVE CHO MOBILE -------- */
@media (max-width: 768px) {
  .timeline::after { left: 10px; }  /* Dịch đường giữa qua bên trái một chút */
  .timeline-item {
    flex-direction: column !important; /* Ảnh và chữ xếp dọc trên điện thoại */
    text-align: center;
  }
  .timeline-item .image,
  .timeline-item .content {
    width: 100%;               /* Mỗi phần chiếm toàn bộ chiều ngang */
    text-align: center;
  }
  .timeline-item::before {
    left: 10px;
    transform: translateY(-50%);
  }
}  

/* --------MENU NGANG TRANG CHỦ CỦA SẢN PHẨM----------*/
   /* phần chứa toàn bộ */
    .menu-section{
      text-align:center;
      padding:100px 20px 60px;
      background:#fff;
    }

    .main-menu-title{
      font-size:32px;
      font-weight:700;
      color:#2c2c2c;
      text-transform:uppercase;
      margin-bottom:50px;
      display:inline-block;
      position:relative;
      letter-spacing:1px;
    }
    .main-menu-title::after{
      content:"";
      position:absolute;
      left:50%;
      bottom:-12px;
      transform:translateX(-50%);
      width:60%;
      height:3px;
      background:#d6b8a6;
      border-radius:2px;
    }

    /* layout 2 cột */
    .menu-container{
      display:flex;
      justify-content:center;
      gap:70px;
      flex-wrap:wrap;
      align-items:flex-start;
    }

    .menu-item{
      width:400px;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
    }

    /* tiêu đề trên ảnh (nằm phía trên, cách ảnh 14px) */
    .menu-title{
      font-size:22px;
      font-weight:600;
      color:#333;
      margin-bottom:14px;
    }

    /* hộp ảnh */
    .image-box{
      width:100%;
      height:380px;
      overflow:hidden;
      border-radius:12px;
      margin:0;
      position:relative;
      box-shadow:0 6px 16px rgba(0,0,0,0.08);
      background:#eee;
    }

    .image-box img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:transform 0.8s cubic-bezier(0.25,0.1,0.25,1);
      transform:scale(1);
    }

    .image-box:hover img{
      transform:scale(1.15);
    }

    /* khung chứa nút để căn đều và khống chế kích thước nút */
    .btn-wrap{
      width:100%;
      display:flex;
      justify-content:center;
      margin-top:18px;
    }

    .btn-xemthem{
      display:inline-block;
      padding:12px 28px;
      background:#d6b8a6;
      color:#fff;
      text-decoration:none;
      border-radius:6px;
      font-size:15px;
      transition:background .25s ease,transform .18s ease;
      min-width:130px; /* cùng kích thước */
      text-align:center;
    }
    .btn-xemthem:hover{background-color: #caa58f;}

    

    /* responsive nhỏ */
    @media (max-width:880px){
      .menu-container{gap:30px}
      .menu-item{width:320px}
      .image-box{height:300px}
    }
    @media (max-width:520px){
      .menu-container{flex-direction:column;gap:28px}
      .menu-item{width:92%}
      .image-box{height:240px}
      .main-menu-title{font-size:24px}
    }


    textarea {
        height: 100px;
    }

    button {
        width: 100%;
        padding: 16px;
        font-size: 20px;
        color: #fff;
        border: none;
        cursor: pointer;
        border-radius: 40px;
        background: linear-gradient(to right, #c3896c, #d7b69b);
    }

    /* ẨN DÒNG XANH ĐÁNG GHÉT */
    .message {
        display: none;
    }

    /* POPUP SUCCESS */
    .popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        justify-content: center;
        align-items: center;
    }


    /* LIÊN HỆ */
    contact-info {
      width: 80%;
      margin: 80px auto; 
    }

    .contact-info h2 {
      text-align: center;
      font-size: 26px;
      font-weight: 600;
      letter-spacing: 0.5px;
      margin-bottom: 35px;
    }

    .info-item { 
      display: flex;
      align-items: flex-start;
      margin-bottom: 16px;
    }

    .info-item .icon {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background-color: #000;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 23px;
      margin-right: 20px;
      flex-shrink: 0;
    }

    .info-item .text {
      flex: 1;
      line-height: 1.4;
    }

    .info-item strong {
      display: block;
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 3px;
    }

    .info-item p {
      font-size: 16px;
      margin: 0;
    }
    

    /* Mobile responsive */
    @media (max-width: 768px) {
      .contact-info {
        width: 90%;
      }
      .info-item {
        flex-direction: column;
        align-items: flex-start;
      }
      .info-item .icon {
        margin-bottom: 10px;
      }
    }

/* ---------------------FOOTER -------------------*/
 footer{
    background:#000;
    padding:40px 70px 20px;
    width: 100%;
    margin-top: 40px;
  }

  .footer-grid{
    display:grid;
    grid-template-columns: 200px 220px 1fr 320px;
    gap:30px;
    align-items:start;
    margin-bottom: 15px;
  }

  /* Cột logo */
  .col-logo img{
    width:130px;
    display:block;
    object-fit:cover;
    filter:none; /* bỏ invert để hiện màu thật */
  }

  .col h3{
    font-size:16px;
    letter-spacing:0.6px;
    margin-bottom:14px;
    text-transform:uppercase;
    font-weight:700;
    color:#fff;
  }

  .list-links, .email-support{list-style:none;padding:0;margin:0;}
  .list-links li, .email-support li{margin-bottom:13px;}

  .list-links a, .email-support a{
    color:#fff;text-decoration:none;
    display:flex;align-items:center;gap:10px;font-size:15px;
    transition:color .18s ease;
  }
  .list-links a i, .email-support a i{
    width:18px;height:18px;
    display:inline-flex;align-items:center;justify-content:center;
    transform:translateX(0);
    transition: transform .18s ease, color .18s ease;
    color:#fff;
    font-size:12px;
  }
  .list-links a:hover, .email-support a:hover{color:#ffcc00;}
  .list-links a:hover i, .email-support a:hover i{transform:translateX(6px);color:#ffcc00;}

  .address p{
    color:#fff;
    font-size:15px;
    line-height:1.7;
    margin-bottom:11px;
  }
  .address .subheading{
    margin-top:9px;
    font-weight:700;
    font-size:14px;
   
    color:#fff;
  }

  /* Mạng xã hội */
  .socials{display:flex;gap:12px;margin-bottom:18px;}
  .socials a{
    width:44px;height:44px;border-radius:50%;
    border:1px solid #fff;display:inline-flex;align-items:center;justify-content:center;
    color:#fff;text-decoration:none;font-size:18px;transition:.18s;
  }
  .socials a:hover{background:#fff;color:#000;}

  .subscribe p{font-size:15px;margin-bottom:14px;color:#fff;line-height:1.6;}

  .copyright{
    text-align:center;margin-top:9px;padding-top:18px;
    border-top:1px solid rgba(255,255,255,0.06);
    color:#ffffff;font-size:14px;
    font-size: 16px;
  }

  @media (max-width:1100px){
    .footer-grid{grid-template-columns: 1fr 1fr;row-gap:30px;}
    .copyright{font-size:13px}
  }
  @media (max-width:620px){
    footer{padding:30px 20px}
    .footer-grid{grid-template-columns:1fr;gap:20px}
    .col-logo img{width:140px}
  }