/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Amatic SC",  sans-serif;
  --playfair-font: 'Playfair Display', serif;
  --nav-font: "Inter",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #212529; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #37373f; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #ce1212; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --pink-color: #F8BBD0; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #7f7f90;  /* The default color of the main navmenu links */
  --nav-hover-color: #ce1212; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #7f7f90; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #ce1212; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f2f2f2;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #1f1f24;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #37373f;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--default-font);
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
/* Tùy chỉnh thanh Header tổng thể */
.header {
    background: transparent;
    transition: all 0.5s;
    padding: 0;
}

#header {
    background-color: #ce1212 !important; /* Đỏ Thiên Hương */
    height: 70px;
}

#header .container {
    justify-content: flex-start !important; /* Ép Logo và Nav sát nhau bên trái */
}

/* Khối bao quanh menu màu đỏ */
.header-inner {
    background-color: #ce1212;
    padding: 0 1.25rem; /* ~20px trái phải cho thoáng */
    height: 5rem; /* 80px -> 5rem */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Đưa Logo về trái, Toggle về phải */
    position: relative;
    width: 100%;
}

/* Tùy chỉnh Logo */
.header .logo {
    z-index: 2;
}
.menu-text {
    font-family: var(--default-font) !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    text-transform: uppercase !important; /* Để viết hoa toàn bộ */
    letter-spacing: 0.1em !important; /* Tạo độ thoáng cho chữ */
}
/* Tùy chỉnh Menu Nav */
.navmenu ul {
    list-style: none;
    gap: 30px; /* Khoảng cách giữa các chữ */
}

.navmenu ul li a {
    color: #ffffff !important; /* Chữ trắng theo design */
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    text-decoration: none;
    transition: 0.3s;
}

.navmenu ul li a:hover, 
.navmenu ul li a.active {
    color: #ffdADA !important; /* Màu khi hover nhẹ */
}

.navmenu .dropdown ul li.dropdown:hover > ul {
        display: block;
        left: 100%; /* Đẩy sang phải 100% chiều rộng của menu cha */
        top: 0;
        margin-top: 0;
    }

/* Hiệu ứng mũi tên bên phải (Arrow decoration) */
.header-arrows {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    padding-left: 100px; /* Tạo khoảng trống bảo vệ để mũi tên không đè chữ */
    background: linear-gradient(to right, transparent, #ce1212 20%); /* Làm mờ phần tiếp giáp */
}


/* 1. Đẩy toàn bộ nội dung dồn về trái nhưng có khoảng đệm */
  .header-inner {
      background-color: #ce1212;
      padding: 0 0 0 40px; /* Chỉ để padding bên trái cho Logo */
      height: 80px; /* Tăng độ cao header cho thoáng */
      position: relative;
      display: flex;
      align-items: center;
  }

/* 2. Tạo khoảng cách giữa Logo và Menu */
.navmenu {
    margin-left: 35px; /* Đẩy Menu ra xa Logo */
    display: flex;
    align-items: center;
    height: 100%;
}

/* 3. Khoảng cách giữa các mục chữ trong Menu */
.navmenu ul {
    gap: 35px; /* Tạo khoảng trống giữa HOMEPAGE, ABOUT US... */
}

/* 4. Fix lại Mũi tên để không dính vào chữ */
.header-arrows {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    padding-left: 100px; /* Tạo khoảng trống bảo vệ để mũi tên không đè chữ */
    background: linear-gradient(to right, transparent, #ce1212 20%); /* Làm mờ phần tiếp giáp */
}

  .arrow-item {
      width: 60px;
      height: 80px;
      clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  }

  /* Màu sắc từng mũi tên */
  .arrow-1 {
      background-color: #ce1212; /* Cùng màu với nền menu để tạo dải dài */
      margin-left: -1px; /* Khử lằn ranh trắng nhỏ nếu có */
  }

  .arrow-2 {
    background-color: #800000; /* Đỏ đậm nhất */
    margin-left: auto; /* TỰ ĐỘNG đẩy mũi tên 3 và 4 về kịch lề phải */
  }

  .arrow-3 {
    margin-left: 2rem; /* TỰ ĐỘNG đẩy mũi tên 3 và 4 về kịch lề phải */
    background-color: #800000; /* Đỏ đậm nhất */
  }

  .arrow-4 {
    background-color: #800000; /* Đỏ đậm nhất */
    margin-left: 1rem; /* Khoảng cách vài px giữa arrow 3 và 4 theo ý bạn */
  }

/* Xử lý cho mobile */
@media (max-width: 1199px) {
    .header-inner {
        padding: 10px 20px;
    }
    .header-arrows {
        display: none;
    }
}

/* 3 cụm: Logo | Menu | Search+Lang trải đều full width */
@media (min-width: 1200px) {
    .header-inner {
        justify-content: space-between;
        gap: 1rem;
        padding: 0 2rem;
    }
    .navmenu {
        flex: 1;
        display: flex;
        justify-content: center;
        width: auto;
        margin-left: 0;
    }
    .navmenu .nav-main-links {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .header-right {
        flex-shrink: 0;
    }
}

/* Màn hình lớn hơn: tăng font theo độ phân giải */
@media (min-width: 1440px) {
    .header-inner {
        padding: 0 3rem;
    }
    .menu-text {
        font-size: 15px;
    }
}

@media (min-width: 1920px) {
    .header-inner {
        padding: 0 5rem;
    }
    .menu-text {
        font-size: 17px;
    }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  #header::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 150px;
        /* Tạo hình cắt vát mũi tên */
        background: #a00e0e; 
        clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
        z-index: -1;
  }

  .navmenu {
      display: flex;
      align-items: center;
      width: 100%; /* Đảm bảo navmenu chiếm hết chiều ngang còn lại */
      gap: 20px; /* ĐÂY LÀ KHOẢNG CÁCH GIỮA CÁC MŨI TÊN NHƯ DESIGN */
      margin-right: 0;   /* Đảm bảo không bị đẩy ngược lại */
  }

  .menu-main-part {
    background-color: #ce1212; /* Màu đỏ nền của menu */
    padding-left: 20px;
    height: 80px; /* Đảm bảo bằng chiều cao header */
    display: flex;
    align-items: center;
  }
  .menu-main-part ul {
    gap: 30px; /* Khoảng cách giữa các chữ */
    margin-right: 20px;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 9px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-mobile-background-color);
    font-size: 15px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--background-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: color-mix(in srgb, var(--background-color) 80%, black 50%);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Ẩn menu con mặc định */
.navmenu .dropdown ul {
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #ce1212;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-radius: 8px;
  min-width: 180px;
}

.navmenu .dropdown ul li.dropdown ul {
        left: 100%;
        top: 0;
        margin-top: 0;
        /* Dịch chuyển nhẹ sang trái để đè lên border của menu cha (nếu có) */
        margin-left: -2px; 
        padding-left: 10px; /* Tạo vùng đệm an toàn */
    }

    /* Kỹ thuật quan trọng: Tạo một lớp giả che phủ khoảng trống */
    .navmenu .dropdown ul li.dropdown ul::before {
        content: "";
        position: absolute;
        top: 0;
        left: -20px; /* Kéo dài vùng nhận diện hover sang bên trái */
        width: 20px;
        height: 100%;
        background: transparent;
        z-index: -1;
    }

/* Hover trên Desktop thì hiện */
@media (min-width: 1200px) {
  .navmenu ul li.dropdown {
    transition: none !important; /* Tắt transition khi đang mở để tránh rung */
  }
  .navmenu .dropdown:hover > ul {
    opacity: 1;
    visibility: visible;
    top: 100%; /* Có thể chỉnh nhích lên xuống tùy ý */
  }
}
/* Mobile Navigation */
@media (max-width: 74.9375rem) {
  .navmenu .dropdown ul.dropdown-active {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      width: 100% !important;
      background: rgba(255, 255, 255, 0.03); /* Tối hơn một chút để phân biệt */
      margin-top: 5px !important;
  }
  /* Menu con cấp 3 (Mì, Bún, Phở...) - Thụt lề vào trong */
  .navmenu .dropdown ul ul.dropdown-active {
      background: rgba(0, 0, 0, 0.2) !important; /* Nền đậm hơn để tạo chiều sâu */
      padding: 5px 0 !important;
      margin-top: 0 !important;
  }

  /* Chỉnh lại font size nhỏ dần theo cấp độ để dễ phân biệt */
  /* Cấp 2: Nội địa / Xuất khẩu */
  .navmenu ul.dropdown-active > li > a {
      font-size: 1.15rem !important; 
      color: rgba(255, 255, 255, 0.9) !important;
      font-weight: 500 !important;
      letter-spacing: 1px;
  }

  /* Cấp 3: Chi tiết sản phẩm */
  .navmenu ul ul.dropdown-active > li > a {
      font-size: 1rem !important;
      color: rgba(255, 255, 255, 0.6) !important;
      text-transform: none !important; /* Không viết hoa toàn bộ để dễ đọc */
      padding: 6px 0 !important;
  }

  /* Hiệu ứng mũi tên cho menu đa cấp */
  .navmenu .dropdown .dropdown.active > a .toggle-dropdown {
      transform: rotate(180deg);
      color: #ce1212;
  }

  /* Border bên trái mỏng để tạo cảm giác phân cấp (giống hình cây) */
  .navmenu ul ul.dropdown-active li {
      border-left: 2px solid rgba(206, 18, 18, 0.3); 
      margin-left: 10px;
      width: calc(100% - 20px) !important;
  }
  /* 0. ẨN GỐC */
  .navmenu {
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    position: fixed;
    inset: 0;
    z-index: 9998;
  }
  
  /* Sửa lỗi: Chỉ ẩn ul khi menu chưa active, 
     không dùng !important cho toàn bộ ul để menu con có thể hiện ra */
  .navmenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* 1. NỀN KHI MENU MỞ */
  body.mobile-nav-active .navmenu {
    visibility: visible;
    opacity: 1;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    backdrop-filter: blur(10px);
    overflow-y: auto; /* Cho phép cuộn nếu menu con quá dài */
  }

  body.mobile-nav-active .navmenu ul li {
      height: auto !important;
      min-height: fit-content;
      display: block !important;
      margin-bottom: 0;
  }

  /* 2. DANH SÁCH MENU CHÍNH */
  body.mobile-nav-active .navmenu > ul {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 5rem;
    padding-bottom: 2rem;
    width: 100%;
  }

  /* 3. DROPDOWN (MENU CON) */
  .navmenu .dropdown ul {
    display: none;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 0;
    margin-bottom: 10px;
    transform: translate3d(0, 0, 0); 
   backface-visibility: hidden;
  }

  /* Quan trọng nhất: Cho phép menu con hiển thị khi có class dropdown-active */
  .navmenu ul.dropdown-active {
      position: static !important; /* KHÔNG dùng absolute/fixed ở đây */
      display: flex !important;
      flex-direction: column;
      align-items: center;
      width: 100% !important;
      background: rgba(255, 255, 255, 0.05);
      margin-top: 10px !important;
      padding: 10px 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
      /* Xóa bỏ các thuộc tính có thể gây đè lớp */
      top: auto !important;
      left: auto !important;
  }

  body.mobile-nav-active .navmenu ul li > a {
      display: flex !important;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 10px 0;
  }

    /* Style cho các mục con bên trong */
    .navmenu ul.dropdown-active li {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 5px !important;
    }
    .navmenu ul.dropdown-active li a {
        font-size: 1.1rem !important;
        text-transform: none !important;
        color: rgba(255, 255, 255, 0.7) !important;
        padding: 8px 0 !important;
        transform: scale(1) !important; /* Không cho phóng to menu con */
    }

    /* Đảm bảo menu cha khi active (đang mở) có màu đỏ */
    .navmenu a.menu-text.active {
        color: #ce1212 !important;
    }

    /* Xoay mũi tên nếu bạn có thẻ i toggle */
    .navmenu a.active .toggle-dropdown {
        transform: rotate(180deg);
    }

  /* Hiển thị menu con khi li cha có class active */
  /* .navmenu .dropdown.active > ul {
    display: flex !important;
    flex-direction: column;
  } */
   .navmenu .dropdown.active > ul {
        display: flex !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

  /* 4. ĐIỀU CHỈNH CHỮ & MÀU ACTIVE */
  .navmenu ul li {
    width: 100%;
    display: flex; /* Sử dụng flex cho li */
    justify-content: center; /* Căn giữa thẻ a bên trong li */
    position: relative;
  }

  .navmenu ul li a {
    font-family: var(--default-font), sans-serif;
    color: #ffffff;
    font-size: 1.375rem;
    font-weight: 500;
    text-transform: uppercase;
    
    /* THAY ĐỔI QUAN TRỌNG TẠI ĐÂY */
    display: flex !important; /* Dùng flex thay cho inline-block */
    align-items: center;      /* Căn giữa icon và chữ theo chiều dọc */
    justify-content: center;   /* Căn giữa icon và chữ theo chiều ngang */
    
    padding: 0.625rem 0;
    transition: 0.3s;
    text-decoration: none;
    width: fit-content;        /* Thẻ a chỉ rộng bằng nội dung bên trong */
  }

  /* SỬA LỖI ACTIVE SAI: 
     Chỉ đổi màu đỏ cho link thực sự được active hoặc khi hover */
  .navmenu a.active,
  .navmenu li:not(.dropdown) a:hover,
  .navmenu .dropdown.active > a {
    color: #ce1212 !important;
  }

  /* Hiệu ứng phóng to nhẹ cho link không phải dropdown */
  .navmenu li:not(.dropdown) a:hover {
    transform: scale(1.1);
  }

  /* Mũi tên Dropdown */
  .toggle-dropdown {
    font-size: 1.2rem;
    line-height: 0;
    margin-left: 8px; /* Tạo khoảng cách giữa chữ và mũi tên */
    transition: 0.3s;
    display: inline-block;
  }
  .navmenu .dropdown.active > a .toggle-dropdown {
    transform: rotate(180deg);
  }

  /* Search trong mobile menu */
  .mobile-search-item {
    margin-top: 0.5rem !important;
    width: 80% !important;
    max-width: 320px;
  }
  .mobile-search-item .search-form {
    width: 100%;
    background: rgba(255,255,255,0.1);
    border-radius: 2rem;
    overflow: hidden;
    padding: 0 0.75rem;
  }
  .mobile-search-item .search-input {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.6rem 0.5rem;
    width: 100%;
    font-size: 0.95rem;
    outline: none;
  }
  .mobile-search-item .search-input::placeholder {
    color: rgba(255,255,255,0.5);
  }
  .mobile-search-item .search-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
  }

  /* Language trong mobile menu */
  .mobile-lang-item {
    margin-top: 0.75rem !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .mobile-lang-item > div {
    justify-content: center !important;
    width: 100% !important;
  }
  .mobile-lang-item .lang-link img {
    opacity: 0.6;
    transition: 0.2s;
    border-radius: 3px;
  }
  .mobile-lang-item .active-lang img {
    opacity: 1;
    box-shadow: 0 0 0 2px #fff;
  }

  /* 5. NÚT TOGGLE (X) */
  .mobile-nav-toggle {
    display: block;
    color: #ffffff;
    font-size: 2.25rem;
    z-index: 10000;
    position: fixed;
    top: 1.125rem;
    right: 1.25rem;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
/* 1. RESET & KHUNG CHUNG */
.footer {
    height: auto !important; /* Loại bỏ giới hạn chiều cao nếu có */
    padding: 60px 0 20px 0 !important;
    background-color: var(--background-color);
    font-size: 16px;
    padding-bottom: 40px !important;
}

.footer h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
    font-family: var(--playfair-font);
}

/* 2. TẦNG TRÊN (ADDRESS, INFO, TIME) */
.footer-top {
    margin-bottom: 30px;
}

.footer .icon {
    color: var(--accent-color);
    font-size: 24px;
    margin-right: 15px;
    flex-shrink: 0;
}

.footer-top p {
    margin-bottom: 5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* Đường kẻ phân cách giữa 2 tầng */
.footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 40px 0;
    opacity: 1;
}

/* 3. TẦNG DƯỚI (SOCIAL & E-COMMERCE) */
.footer-bottom h4 {
    margin-bottom: 25px;
}

/* Social Links bự và đều */
.footer .social-links a {
    width: 70px !important;
    height: 70px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff !important;
    margin-right: 15px;
    transition: 0.3s;
}

.footer .social-links a:hover {
    background: var(--accent-color);
    border-color: var(--accent-color) !important;
    transform: translateY(-3px);
}

/* Cụm Gian hàng dàn ngang */
.ecommerce-wrapper {
  display: flex;
  gap: 15px;
  justify-content:间-between;
  width: 100%;
  flex-wrap: wrap; /* Bắt buộc phải có để mobile tự nhảy dòng */
}

.ecom-item {
  flex: 1; /* Ép 3 ô bằng nhau */
  background: rgba(255, 255, 255, 0.05);
  padding: 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column; /* Icon trên, chữ dưới hoặc Icon trái chữ phải tùy fen, ở đây mình để row để tiết kiệm chiều cao */
  align-items: flex-start;
  transition: 0.3s;
}

.ecom-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-color);
}
.ecom-item {
  display: flex;
  flex-direction: row; 
  align-items: center;
}

.ecom-icon {
  width: 50px !important;
  height: 50px !important;
  display: inline-block; /* Quan trọng: Để div có thể nhận kích thước */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.ecom-info {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 
.ecom-icon {
    width: 48px !important; 
    height: 48px !important;
    margin-right: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
} */

.platform-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.region-btns {
  display: flex;
  flex-direction: column; /* Xếp dọc nút */
  gap: 5px;
}

.region-btns a {
  display: block;
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #fff !important;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

.region-btns a:hover {
    border-color: var(--accent-color);
    background: var(--accent-color);
    box-shadow: 0 4px 10px rgba(237, 28, 36, 0.3);
}

@media (max-width: 992px) {
  .ecommerce-wrapper {
    flex-wrap: wrap;
  }
  .ecom-item {
    flex: 1 1 calc(50% - 15px); /* Tablet hiện 2 cột */
  }
}

@media (max-width: 576px) {
  .ecom-item {
    flex: 1 1 100%; /* Mobile hiện 1 cột dọc */
  }
}

@media (max-width: 768px) {
  .ecommerce-wrapper {
    flex-direction: column; /* Ép xếp chồng dọc lên nhau */
  }
  
  .ecom-item {
    width: 100% !important;
  }
  
  /* Đảm bảo footer không bị giới hạn chiều cao */
  .footer {
    height: auto !important;
    overflow: visible !important;
  }
}

/* 4. COPYRIGHT */
.footer .copyright {
    padding-top: 30px;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    opacity: 0.6;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #8B0000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.preloader-logo {
  margin: 0 auto;
}

.preloader-logo {
  width: 340px;
  display: block;
  animation: preloader-pulse 1.6s ease-in-out infinite;
}

@keyframes preloader-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.95); }
}

/* Noodle strand animation */
.preloader-noodle {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  height: 40px;
  margin: 0 auto;
  transform: translateX(-20px);
}

.preloader-noodle span {
  display: block;
  width: 12px;
  border-radius: 6px;
  background: #ce1212;
  animation: preloader-noodle-wave 1s ease-in-out infinite;
}

.preloader-noodle span:nth-child(1) { animation-delay: 0s;    height: 20px; }
.preloader-noodle span:nth-child(2) { animation-delay: 0.15s; height: 20px; }
.preloader-noodle span:nth-child(3) { animation-delay: 0.3s;  height: 20px; }
.preloader-noodle span:nth-child(4) { animation-delay: 0.45s; height: 20px; }
.preloader-noodle span:nth-child(5) { animation-delay: 0.6s;  height: 20px; }

@keyframes preloader-noodle-wave {
  0%, 100% { height: 20px; background: #ce1212; }
  50%       { height: 55px; background: #ff6b35; }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 120px 0;
  text-align: center;
  position: relative;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 400;
  margin-bottom: 10px;
  font-family: var(--default-font);
}
.nav-tabs .nav-link.active, 
.nav-tabs .nav-item.show .nav-link {
    background-color: transparent !important; /* Xóa màu trắng */
    border: none !important;                 /* Xóa viền */
    color: inherit !important;               /* Giữ nguyên màu chữ */
}
.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  /* padding: 60px 0; */
  scroll-margin-top: 92px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 56px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 1.5rem;
  letter-spacing: 2px;
  font-weight: 800;
  padding: 0;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--playfair-font);
}

.section-title p {
  font-family: var(--playfair-font); /* Đảm bảo là Playfair Display */
  color: #ce1212;                /* Màu đỏ đặc trưng của thương hiệu */
  font-size: 31px;               /* To hơn một chút để tạo điểm nhấn */
  font-weight: 900;              /* Đẩy lên mức cao nhất để chữ dày và lực */
  text-transform: uppercase;     /* Viết hoa toàn bộ cho giống nhãn mác */
  letter-spacing: 1.5px;         /* Khoảng cách giữa các chữ rộng ra nhìn sẽ thoáng và sang */
  line-height: 1.2;
  margin-top: 15px;
}

/* .custom-text-title {
  text-shadow: 
    -2px -2px 0 #fff,  
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #fff,
     0px -2px 0 #fff,
     0px  2px 0 #fff,
    -2px  0px 0 #fff,
     2px  0px 0 #fff,
     3px  3px 5px rgba(0,0,0,0.3);
} */
.custom-text-title {
  color: #e23b3b; 
  -webkit-text-stroke: 4px #fff; 
  paint-order: stroke fill; 
  letter-spacing: 3px; 
  filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.2));
  font-weight: bold;
  text-transform: uppercase;

  /* CHÈN THÊM DÒNG NÀY ĐỂ HẾT BỊ NHÓI GÓC CHỮ N */
  stroke-linejoin: round; 
}

.section-title p .description-title {
  color: var(--accent-color);
}

.section-title p .description-about {
  color: var(--pink-color);
}
/*--------------------------------------------------------------
# Background Product Section
--------------------------------------------------------------*/
/*.background-home-bg {
    background-image: url('../img/banner-home-1.webp'); 
    background-image: url('../img/banner-1.webp'); 
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;  
}*/
/* Lớp bao ngoài để cố định vị trí của Logo */
  .header-logo-overlay {
      position: absolute;
      top: 0rem;       /* Cách mép trên 2rem */
      left: 52%;
      transform: translateX(-50%); /* Căn giữa chính xác */
      z-index: 10;     /* Đảm bảo nằm trên cùng */
  }

  /* Chỉnh size logo bự ra */
  .banner-logo {
      height: 20rem !important; /* Bạn có thể tăng lên 12rem, 15rem tùy ý */
      width: auto;
      filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.3)); /* Thêm bóng cho nổi bật trên background */
  }
  .header-logo-container {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 0rem; /* Đây là khoảng cách giữa LOGO và CHỮ SLOGAN */
      z-index: 10;
  }
  @media (max-height: 700px) {
    .banner-logo {
        height: 20rem !important; /* Thu nhỏ logo lại khi màn hình thấp */
    }
    .header-logo-container {
        margin-bottom: 1rem; /* Thu hẹp khoảng cách */
    }
  }
  /* Responsive cho Mobile */

.background-home-bg {
    background-image: url('../img/banner-1.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    /* Sử dụng min-height linh hoạt */
    min-height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    /* CHỐNG TRÀN: Rất quan trọng để không đè lên section dưới */
    overflow: hidden; 
}

/* Tùy chỉnh cho tấm hình chữ */
.custom-slogan {
    max-width: 100%; /* Để hình chữ không quá to, chiếm 80% chiều ngang */
    height: auto;
    /* Đổ bóng nhẹ phía sau tấm hình chữ để nó nổi bật khỏi nền ảnh banner */
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.4));
    transition: transform 0.3s ease;
}

/* Hiệu ứng khi di chuột vào (tùy chọn) */
.custom-slogan:hover {
    transform: scale(1.02);
}

/* Lớp phủ mờ (Overlay) - Nếu banner quá rối làm khó nhìn chữ, hãy bật cái này */
.background-home-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.1); /* Phủ nhẹ một lớp tối 10% */
    z-index: 1;
}

.product-slogan-overlay {
    z-index: 2; /* Đảm bảo hình chữ nằm trên lớp phủ mờ */
    text-align: center;
    margin-top: -15%;
}

/* Thêm lớp phủ mờ (Overlay) nếu chữ bị khó đọc trên nền ảnh */
/* .background-home-bg::before {
    content: "";
    position: absolute;
    inset: 0;
      z-index: 1;
}
 */

.background-product-bg {
    background-image: url('../img/banner-product-1.webp'); 
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: 60rem;
    display: flex;
    align-items: center;
    /* Đảm bảo khối này luôn nằm dưới, không có margin âm */
    margin-top: 0;
}

/* Thêm lớp phủ mờ (Overlay) nếu chữ bị khó đọc trên nền ảnh */
.background-product-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /* Chống đè sự kiện chuột */
    pointer-events: none; 
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 60vh;
  position: relative;
  padding: 60px 0;
  display: flex;
  align-items: center;
}

.hero h1 {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
}

.hero p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 5px 0 30px 0;
  font-size: 20px;
  font-weight: 400;
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 12px 28px;
  border-radius: 50px;
  transition: 0.5s;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
@media (max-width: 2560px){
    .tab-text-first {
      margin-left: -2.3rem !important;
    }
    .tab-text-third {
      margin-left: -9rem !important;
    }
    .tab-text-four {
      margin-left: -8rem !important;
    }
    .tab-text-second {
      margin-left: -7.2rem !important;
    }
}
@media (max-width: 1920px){
    .search-wrapper {
        padding: 10px 20px;
    }
    .search-input {
        width: 100%;
    }
    .search-input:focus {
        width: 100%;
    }
    .tab-text-first {
      margin-left: -4rem !important;
    }
    .tab-text-third {
      margin-left: -11rem !important;
    }
    .tab-text-four {
      margin-left: -8rem !important;
    }
    .tab-text-second {
      margin-left: -8.2rem !important;
    }
}
@media (max-width: 1700px){
    .tab-text-first {
      margin-left: 2.5rem !important;
    }
    .tab-text-third {
      margin-left: -1.5rem !important;
    }
    .tab-text-four {
      margin-left: -0rem !important;
    }
    .tab-text-second {
      margin-left: -1.2rem !important;
    }
}
@media (max-width: 1440px){
    .tab-text-first {
      margin-left: 2rem !important;
    }
    .tab-text-third {
      margin-left: -3rem !important;
    }
    .tab-text-four {
      margin-left: -1rem !important;
    }
    .tab-text-second {
      margin-left: -2.2rem !important;
    }
}
@media (max-width: 1024px) {
    .d-md-block {
        display: none !important;
    }
    
    .tab-text-first {
      margin-left: 7.2rem  !important;
    }
    .line-break-mobile { 
      margin-left: 7.5rem  !important;
    }
    .tab-text-third {
      margin-left: 10rem !important;
    }
    .tab-text-four {
      margin-left: 10.2rem !important;
    }
    .about-desc {
      /* Tạo vạch đỏ bên trái nếu bạn muốn giống ảnh mẫu */
      padding-left: 0px !important; /* Khoảng cách từ vạch đỏ đến chữ */
      text-align: justify; /* Căn đều hai bên để trông chuyên nghiệp */
    }
    .product-banner-tabs.custom-mobile-bg {
        background-image: url('../img/banner-menu-cate-mobile.webp') !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        min-height: 30rem !important;
        height: 76rem !important;
        /* Ép nằm trên 1 hàng duy nhất */
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: nowrap !important; /* QUAN TRỌNG: Ngăn không cho xuống dòng */
        
        justify-content: flex-start !important; 
        align-items: flex-end !important; 
        padding-bottom: 2rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        border: none !important;
    }

    .product-banner-tabs.custom-mobile-bg .nav-item {
        flex: 1 !important; /* Chia 4 cột bằng nhau, mỗi cột là 1 dải màu */
        height: 100% !important; /* Chiều cao chiếm trọn banner */
        max-width: 20% !important;
        height: 15rem !important;
        display: flex;
        align-items: center;
        position: relative; /* Làm gốc tọa độ cho hitbox */
        margin-right: 0.8rem;
        justify-content: flex-end !important
    }

  .product-banner-tabs.custom-mobile-bg .nav-link {
      position: absolute; /* Phải có absolute để không đẩy các nút khác */
      bottom: 0;
      height: 25rem;
      margin-left:1.5rem !;
      /* TĂNG CHIỀU RỘNG */
      width: 160% !important; /* Tăng lên 180% hoặc 200% để phủ rộng sang phải */
      
      /* NGHIÊNG VÙNG BẤM */
      /* translateX: căn giữa nút */
      /* skewX: nghiêng nút (thường từ -10deg đến -15deg sẽ khớp dải màu) */
      transform: translateX(-40%) skewX(-12deg) !important; 
      transform-origin: bottom center; /* Nghiêng từ gốc là đáy nút */

      left:-30%;
      min-width: unset !important;
      /* padding: 0.5rem 0 !important; */
      background: transparent !important;
      border: none !important;
      display: flex !important; /* Dùng flex để dễ căn chữ */
      flex-direction: column;
      padding-left: 27% !important;
      padding-bottom: 6.5rem !important;
      /* justify-content: flex-end; */
      /* Căn chữ dạt sang trái của khung nút bự */
      align-items: flex-start !important;  
      z-index: 1;
  }
    .product-banner-tabs.custom-mobile-bg .tab-text {
        color: #ffffff !important;
        font-weight: 800 !important;
        /* margin-top: 20rem !important; */
        text-align: left;
        /* Hạ size chữ xuống một chút để "BÚN - PHỞ - HỦ TIẾU" không bị vỡ khung */
        font-size: 2.5rem !important; 
        text-transform: uppercase;
        transform: skewX(12deg) rotate(0.01deg) !important;
        transform-origin: center center !important;        
        text-align: center;
        display: block;
        line-height: 1.1;
        white-space: normal; /* Cho phép chữ tự xuống dòng bên trong nút */
        text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
        pointer-events: none; /* Để sự kiện click xuyên qua text vào button */
    }

    .custom-menu-mobile {
        margin-right: 2.5rem !important;
    }
    .custom-menu-mobile-next {
        margin-right: 3.8rem !important;
    }
    /* Vạch active thu nhỏ lại cho cân đối */
    .product-banner-tabs.custom-mobile-bg .nav-link.active .tab-text::after {
        content: "";
        display: block;
        width: 1rem; 
        height: 0.125rem;
        background: #ffffff;
        margin: 0.3rem auto 0;
    }
    .background-home-bg {
        /* ĐỔI ẢNH TẠI ĐÂY */
        background-image: url('../img/banner-mobile.webp') !important;
        
        /* Giữ các thuộc tính chiều cao bạn đã fix */
        min-height: 77rem !important; 
        height: auto;
        
        /* Đảm bảo ảnh mobile hiển thị đúng vị trí mong muốn */
        background-position: center center;
    }

    .background-product-bg {
        /* 1. Đổi sang ảnh mobile riêng cho product */
        background-image: url('../img/banner-product-mobile.webp') !important;
        
        /* 2. KHẮC PHỤC LỖI LẤN WIDTH: 
           Sử dụng 100% để ảnh vừa khít chiều ngang, 'auto' để chiều cao tự cân đối */
        background-size: 100% auto !important; 
        
        /* 3. Đưa ảnh lên sát trên cùng để thấy rõ sản phẩm */
        background-position: top center !important; 
        
        /* 4. Giảm chiều cao tối thiểu cho Mobile (S24 Ultra sẽ không bị kéo dãn ảnh) */
        min-height: 22rem !important; 
        height: 113rem;
        
        /* 5. Giữ cho trải nghiệm cuộn mượt mà */
        background-attachment: scroll;
        background-repeat: no-repeat;
        
        /* Thêm màu nền (nếu ảnh mobile của bạn có nền trắng/xám) để không lộ khoảng trống */
        background-color: #f8f8f8; 
        
        position: relative;
    }

    /* Đảm bảo lớp phủ Overlay không đè mất chi tiết ảnh */
    .background-product-bg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.1); /* Làm tối nhẹ để chữ nổi lên nếu cần */
    }
    .about-background-product-bg {
        /* 1. Đổi sang ảnh mobile để tỉ lệ dọc nhìn đẹp hơn */
        background-image: url('../img/banner-about-us-mobile.webp') !important; 
        
        /* 2. Ép hình hiển thị: 'cover' sẽ lấp đầy khung, 'center' lấy phần giữa */
        background-size: cover;
        background-position: center;

        /* 3. Đưa padding về rem: 80px -> 5rem | 40px -> 2.5rem */
        /* Giảm một nửa để mobile nhìn cân đối hơn */
        padding: 2.5rem 0 !important; 
        
        /* 4. Đảm bảo ảnh không bị méo và cuộn mượt */
        background-attachment: scroll;
        min-height: auto; /* Để chiều cao tự nhảy theo nội dung chữ bên trong */
    }

    /* 5. Chỉnh lại Overlay cho Mobile */
    .about-background-product-bg::before {
        /* Chuyển sang gradient dọc (180deg) để dễ đọc chữ trên màn hình hẹp */
        /* background: linear-gradient(180deg, rgba(139, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%); */
    }

    /* 6. Chỉnh nội dung bên trong (Container) nếu cần */
    .about-background-product-bg .container {
        padding-left: 1.25rem;  /* ~20px */
        padding-right: 1.25rem; /* ~20px */
    }
}
@media (max-width: 992px) {
    .background-home-bg {
        /* ĐỔI ẢNH TẠI ĐÂY */
        background-image: url('../img/banner-mobile.webp') !important;
        
        /* Giữ các thuộc tính chiều cao bạn đã fix */
        min-height: 45rem !important; 
        height: auto;
        
        /* Đảm bảo ảnh mobile hiển thị đúng vị trí mong muốn */
        background-position: center center;
    }

    .background-product-bg {
        /* 1. Đổi sang ảnh mobile riêng cho product */
        background-image: url('../img/banner-product-mobile.webp') !important;
        
        /* 2. KHẮC PHỤC LỖI LẤN WIDTH: 
           Sử dụng 100% để ảnh vừa khít chiều ngang, 'auto' để chiều cao tự cân đối */
        background-size: 100% auto !important; 
        
        /* 3. Đưa ảnh lên sát trên cùng để thấy rõ sản phẩm */
        background-position: top center !important; 
        
        /* 4. Giảm chiều cao tối thiểu cho Mobile (S24 Ultra sẽ không bị kéo dãn ảnh) */
        min-height: 22rem !important; 
        height: 87rem;
        
        /* 5. Giữ cho trải nghiệm cuộn mượt mà */
        background-attachment: scroll;
        background-repeat: no-repeat;
        
        /* Thêm màu nền (nếu ảnh mobile của bạn có nền trắng/xám) để không lộ khoảng trống */
        background-color: #f8f8f8; 
        
        position: relative;
    }

    /* Đảm bảo lớp phủ Overlay không đè mất chi tiết ảnh */
    .background-product-bg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.1); /* Làm tối nhẹ để chữ nổi lên nếu cần */
    }
    .about-background-product-bg {
        /* 1. Đổi sang ảnh mobile để tỉ lệ dọc nhìn đẹp hơn */
        background-image: url('../img/banner-about-us-mobile.webp') !important; 
        
        /* 2. Ép hình hiển thị: 'cover' sẽ lấp đầy khung, 'center' lấy phần giữa */
        background-size: cover;
        background-position: center;

        /* 3. Đưa padding về rem: 80px -> 5rem | 40px -> 2.5rem */
        /* Giảm một nửa để mobile nhìn cân đối hơn */
        padding: 2.5rem 0 !important; 
        
        /* 4. Đảm bảo ảnh không bị méo và cuộn mượt */
        background-attachment: scroll;
        min-height: auto; /* Để chiều cao tự nhảy theo nội dung chữ bên trong */
    }

    /* 5. Chỉnh lại Overlay cho Mobile */
    .about-background-product-bg::before {
        /* Chuyển sang gradient dọc (180deg) để dễ đọc chữ trên màn hình hẹp */
        /* background: linear-gradient(180deg, rgba(139, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%); */
    }

    /* 6. Chỉnh nội dung bên trong (Container) nếu cần */
    .about-background-product-bg .container {
        padding-left: 1.25rem;  /* ~20px */
        padding-right: 1.25rem; /* ~20px */
    }
}
@media (max-width: 768px) {
    .custom-photo-position {
      margin-left: calc(-57vw + 50%) !important; 
    }
    .d-md-block {
        display: none !important;
    }
    
    .tab-text-first {
      margin-left: 6.2rem  !important;
    }
    .line-break-mobile { 
      margin-left: 5.2rem  !important;
    }
    .tab-text-third {
      margin-left: 6rem !important;
    }
    .tab-text-four {
      margin-left: 6.2rem !important;
    }
    
    .about-desc {
      /* Tạo vạch đỏ bên trái nếu bạn muốn giống ảnh mẫu */
      padding-left: 0px !important; /* Khoảng cách từ vạch đỏ đến chữ */
      text-align: justify; /* Căn đều hai bên để trông chuyên nghiệp */
    }
    .product-banner-tabs.custom-mobile-bg {
        background-image: url('../img/banner-menu-cate-mobile.webp') !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        min-height: 30rem !important;
        height: 55rem !important;
        /* Ép nằm trên 1 hàng duy nhất */
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: nowrap !important; /* QUAN TRỌNG: Ngăn không cho xuống dòng */
        
        justify-content: flex-start !important; 
        align-items: flex-end !important; 
        padding-bottom: 2rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        border: none !important;
    }

    .product-banner-tabs.custom-mobile-bg .nav-item {
        flex: 1 !important; /* Chia 4 cột bằng nhau, mỗi cột là 1 dải màu */
        height: 100% !important; /* Chiều cao chiếm trọn banner */
        max-width: 20% !important;
        height: 15rem !important;
        display: flex;
        align-items: center;
        position: relative; /* Làm gốc tọa độ cho hitbox */
        margin-right: 0.8rem;
        justify-content: flex-end !important
    }

  .product-banner-tabs.custom-mobile-bg .nav-link {
      position: absolute; /* Phải có absolute để không đẩy các nút khác */
      bottom: 0;
      height: 25rem;
      
      /* TĂNG CHIỀU RỘNG */
      width: 145% !important; /* Tăng lên 180% hoặc 200% để phủ rộng sang phải */
      
      /* NGHIÊNG VÙNG BẤM */
      /* translateX: căn giữa nút */
      /* skewX: nghiêng nút (thường từ -10deg đến -15deg sẽ khớp dải màu) */
      transform: translateX(-40%) skewX(-12deg) !important; 
      transform-origin: bottom center; /* Nghiêng từ gốc là đáy nút */

      left:-30%;
      min-width: unset !important;
      /* padding: 0.5rem 0 !important; */
      background: transparent !important;
      border: none !important;
      display: flex !important; /* Dùng flex để dễ căn chữ */
      flex-direction: column;
      padding-left: 27% !important;
      padding-bottom: 6.5rem !important;
      /* justify-content: flex-end; */
      /* Căn chữ dạt sang trái của khung nút bự */
      align-items: flex-start !important;  
      z-index: 1;
  }
    .product-banner-tabs.custom-mobile-bg .tab-text {
        color: #ffffff !important;
        font-weight: 800 !important;
        /* margin-top: 20rem !important; */
        text-align: left;
        /* Hạ size chữ xuống một chút để "BÚN - PHỞ - HỦ TIẾU" không bị vỡ khung */
        font-size: 1rem !important; 
        text-transform: uppercase;
        transform: skewX(12deg) rotate(0.01deg) !important;
        transform-origin: center center !important;        
        text-align: center;
        display: block;
        line-height: 1.1;
        white-space: normal; /* Cho phép chữ tự xuống dòng bên trong nút */
        text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
        pointer-events: none; /* Để sự kiện click xuyên qua text vào button */
    }

    .custom-menu-mobile {
        margin-right: 2.5rem !important;
    }
    .custom-menu-mobile-next {
        margin-right: 3.8rem !important;
    }
    /* Vạch active thu nhỏ lại cho cân đối */
    .product-banner-tabs.custom-mobile-bg .nav-link.active .tab-text::after {
        content: "";
        display: block;
        width: 1rem; 
        height: 0.125rem;
        background: #ffffff;
        margin: 0.3rem auto 0;
    }
    .background-home-bg {
        /* ĐỔI ẢNH TẠI ĐÂY */
        background-image: url('../img/banner-mobile.webp') !important;
        
        /* Giữ các thuộc tính chiều cao bạn đã fix */
        min-height: 45rem !important; 
        height: auto;
        
        /* Đảm bảo ảnh mobile hiển thị đúng vị trí mong muốn */
        background-position: center center;
    }

    .background-product-bg {
        /* 1. Đổi sang ảnh mobile riêng cho product */
        background-image: url('../img/banner-product-mobile.webp') !important;
        
        /* 2. KHẮC PHỤC LỖI LẤN WIDTH: 
           Sử dụng 100% để ảnh vừa khít chiều ngang, 'auto' để chiều cao tự cân đối */
        background-size: 100% auto !important; 
        
        /* 3. Đưa ảnh lên sát trên cùng để thấy rõ sản phẩm */
        background-position: top center !important; 
        
        /* 4. Giảm chiều cao tối thiểu cho Mobile (S24 Ultra sẽ không bị kéo dãn ảnh) */
        min-height: 22rem !important; 
        height: 85rem;
        
        /* 5. Giữ cho trải nghiệm cuộn mượt mà */
        background-attachment: scroll;
        background-repeat: no-repeat;
        
        /* Thêm màu nền (nếu ảnh mobile của bạn có nền trắng/xám) để không lộ khoảng trống */
        background-color: #f8f8f8; 
        
        position: relative;
    }

    /* Đảm bảo lớp phủ Overlay không đè mất chi tiết ảnh */
    .background-product-bg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.1); /* Làm tối nhẹ để chữ nổi lên nếu cần */
    }
    .about-background-product-bg {
        /* 1. Đổi sang ảnh mobile để tỉ lệ dọc nhìn đẹp hơn */
        background-image: url('../img/banner-about-us-mobile.webp') !important; 
        
        /* 2. Ép hình hiển thị: 'cover' sẽ lấp đầy khung, 'center' lấy phần giữa */
        background-size: cover;
        background-position: center;

        /* 3. Đưa padding về rem: 80px -> 5rem | 40px -> 2.5rem */
        /* Giảm một nửa để mobile nhìn cân đối hơn */
        padding: 2.5rem 0 !important; 
        
        /* 4. Đảm bảo ảnh không bị méo và cuộn mượt */
        background-attachment: scroll;
        min-height: auto; /* Để chiều cao tự nhảy theo nội dung chữ bên trong */
    }

    /* 5. Chỉnh lại Overlay cho Mobile */
    .about-background-product-bg::before {
        /* Chuyển sang gradient dọc (180deg) để dễ đọc chữ trên màn hình hẹp */
        /* background: linear-gradient(180deg, rgba(139, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%); */
    }

    /* 6. Chỉnh nội dung bên trong (Container) nếu cần */
    .about-background-product-bg .container {
        padding-left: 1.25rem;  /* ~20px */
        padding-right: 1.25rem; /* ~20px */
    }
}
@media (max-width: 450px) {
    .header-logo-container-mb {
      margin-left: 1.5rem !important;
    }
    .background-product-bg {
        /* 1. Đổi sang ảnh mobile riêng cho product */
        background-image: url('../img/banner-product-mobile.webp') !important;
        
        /* 2. KHẮC PHỤC LỖI LẤN WIDTH: 
           Sử dụng 100% để ảnh vừa khít chiều ngang, 'auto' để chiều cao tự cân đối */
        background-size: 100% auto !important; 
        
        /* 3. Đưa ảnh lên sát trên cùng để thấy rõ sản phẩm */
        background-position: top center !important; 
        
        /* 4. Giảm chiều cao tối thiểu cho Mobile (S24 Ultra sẽ không bị kéo dãn ảnh) */
        min-height: 22rem !important; 
        height: 45rem !important;
        
        /* 5. Giữ cho trải nghiệm cuộn mượt mà */
        background-attachment: scroll;
        background-repeat: no-repeat;
        
        /* Thêm màu nền (nếu ảnh mobile của bạn có nền trắng/xám) để không lộ khoảng trống */
        background-color: #f8f8f8; 
        
        position: relative;
    }
}
/* --- DÀNH CHO DÒNG MÀN HÌNH TRUNG BÌNH (iPhone 13/14, S23) --- */
@media (max-width: 430px){
    .product-banner-tabs.custom-mobile-bg {
      height: 38rem !important;  
    }
    .background-product-bg {
        /* 1. Đổi sang ảnh mobile riêng cho product */
        background-image: url('../img/banner-product-mobile.webp') !important;
        
        /* 2. KHẮC PHỤC LỖI LẤN WIDTH: 
           Sử dụng 100% để ảnh vừa khít chiều ngang, 'auto' để chiều cao tự cân đối */
        background-size: 100% auto !important; 
        
        /* 3. Đưa ảnh lên sát trên cùng để thấy rõ sản phẩm */
        background-position: top center !important; 
        
        /* 4. Giảm chiều cao tối thiểu cho Mobile (S24 Ultra sẽ không bị kéo dãn ảnh) */
        min-height: 35rem !important; 
        height: 47rem !important;
        
        /* 5. Giữ cho trải nghiệm cuộn mượt mà */
        background-attachment: scroll;
        background-repeat: no-repeat;
        
        /* Thêm màu nền (nếu ảnh mobile của bạn có nền trắng/xám) để không lộ khoảng trống */
        background-color: #f8f8f8; 
        
        position: relative;
    }
    .tab-text-first {
      margin-left: 0.4rem !important;
    }
    .tab-text-third {
      margin-left: 1rem !important;
    }
    .tab-text-four {
      margin-left: 0.8rem !important;
    }
    .line-break-mobile {
      margin-left: 0.5rem !important;
    }
}
@media (max-width: 415px){
    .background-product-bg {
        /* 1. Đổi sang ảnh mobile riêng cho product */
        background-image: url('../img/banner-product-mobile.webp') !important;
        
        /* 2. KHẮC PHỤC LỖI LẤN WIDTH: 
           Sử dụng 100% để ảnh vừa khít chiều ngang, 'auto' để chiều cao tự cân đối */
        background-size: 100% auto !important; 
        
        /* 3. Đưa ảnh lên sát trên cùng để thấy rõ sản phẩm */
        background-position: top center !important; 
        
        /* 4. Giảm chiều cao tối thiểu cho Mobile (S24 Ultra sẽ không bị kéo dãn ảnh) */
        min-height: 35rem !important; 
        height: 45rem !important;
        
        /* 5. Giữ cho trải nghiệm cuộn mượt mà */
        background-attachment: scroll;
        background-repeat: no-repeat;
        
        /* Thêm màu nền (nếu ảnh mobile của bạn có nền trắng/xám) để không lộ khoảng trống */
        background-color: #f8f8f8; 
        
        position: relative;
    }
    .tab-text-first {
      margin-left: 0.4rem !important;
    }
    .tab-text-third {
      margin-left: 0.7rem !important;
    }
    .tab-text-four {
      margin-left: 0.5rem !important;
    }
    .line-break-mobile {
      margin-left: 0rem !important;
    }
}
@media (max-width: 390px) {
    .background-product-bg {
        /* 1. Đổi sang ảnh mobile riêng cho product */
        background-image: url('../img/banner-product-mobile.webp') !important;
        
        /* 2. KHẮC PHỤC LỖI LẤN WIDTH: 
           Sử dụng 100% để ảnh vừa khít chiều ngang, 'auto' để chiều cao tự cân đối */
        background-size: 100% auto !important; 
        
        /* 3. Đưa ảnh lên sát trên cùng để thấy rõ sản phẩm */
        background-position: top center !important; 
        
        /* 4. Giảm chiều cao tối thiểu cho Mobile (S24 Ultra sẽ không bị kéo dãn ảnh) */
        min-height: 22rem !important; 
        height: 42.5rem !important;
        
        /* 5. Giữ cho trải nghiệm cuộn mượt mà */
        background-attachment: scroll;
        background-repeat: no-repeat;
        
        /* Thêm màu nền (nếu ảnh mobile của bạn có nền trắng/xám) để không lộ khoảng trống */
        background-color: #f8f8f8; 
        
        position: relative;
    }
    .tab-text-first {
      margin-left: 0rem !important;
    }
    .tab-text-third {
        margin-left: 0.7rem !important;
    }
    .tab-text-four {
        margin-left: -0.1rem !important;
    }
    .line-break-mobile {
      margin-left: -0.1rem !important;
    }
}
/* --- DÀNH CHO DÒNG MÀN HÌNH NHỎ (iPhone SE, các máy đời cũ) --- */
@media (max-width: 375px) {
    .background-product-bg {
        /* 1. Đổi sang ảnh mobile riêng cho product */
        background-image: url('../img/banner-product-mobile.webp') !important;
        
        /* 2. KHẮC PHỤC LỖI LẤN WIDTH: 
           Sử dụng 100% để ảnh vừa khít chiều ngang, 'auto' để chiều cao tự cân đối */
        background-size: 100% auto !important; 
        
        /* 3. Đưa ảnh lên sát trên cùng để thấy rõ sản phẩm */
        background-position: top center !important; 
        
        /* 4. Giảm chiều cao tối thiểu cho Mobile (S24 Ultra sẽ không bị kéo dãn ảnh) */
        min-height: 22rem !important; 
        height: 41rem !important;
        
        /* 5. Giữ cho trải nghiệm cuộn mượt mà */
        background-attachment: scroll;
        background-repeat: no-repeat;
        
        /* Thêm màu nền (nếu ảnh mobile của bạn có nền trắng/xám) để không lộ khoảng trống */
        background-color: #f8f8f8; 
        
        position: relative;
    }
    .tab-text-first {
      margin-left: 0rem !important;
    }
    .tab-text-third {
        margin-left: 0.4rem !important;
    }
    .tab-text-four {
        margin-left: -0.2rem !important;
    }
    .line-break-mobile {
      margin-left: -0.6rem !important;
    }
}

/* Responsive cho Mobile: Quy đổi điểm gãy 992px -> 62rem */

.hero .btn-get-started:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  color: var(--default-color);
  font-weight: 500;
}

.hero .btn-watch-video i {
  color: var(--accent-color);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero .btn-watch-video:hover {
  color: var(--accent-color);
}

.hero .btn-watch-video:hover i {
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero p {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 13px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about-background-product-bg {
    background-image: url('../img/banner-about-us.webp'); 
    background-size: cover;
    background-position: center;
    position: relative;
    width: 100%;
    /* Dùng padding thay vì min-height để đảm bảo khoảng cách trên dưới đều nhau */
    padding: 80px 0; 
    overflow: hidden;
}

/* Quan trọng: Để nội dung nổi lên trên lớp phủ */
.about-background-product-bg .container {
    position: relative;
    z-index: 2;
}

/* Sửa lại overlay cho đúng tên class và bao phủ toàn bộ */
.about-background-product-bg::before {
    content: "";
    position: absolute;
    /* Sử dụng inset: 0 hoặc top/left 0 đều được nhưng phải đảm bảo thẻ cha là relative */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* Gradient màu đỏ Thiên Hương sang đen */
    /* background: linear-gradient(90deg, rgba(139, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 100%); */
    
    /* Z-index cực kỳ quan trọng */
    z-index: 1; 
    
    /* Đảm bảo không bắt dính sự kiện chuột để người dùng vẫn click được nút bên dưới */
    pointer-events: none; 
}

/* Tiêu đề có gạch đứng bên trái */
.become-title {
    color: #ffffff !important;
    font-family: var(--default-font);
    border-left: 3px solid #ce1212; /* Màu đỏ thương hiệu */
    padding-left: 15px;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.5rem;
    padding: 0;

}
.photo-frame img {
    /* Đảm bảo ảnh không bị bo góc trái để cảm giác dính chặt vào lề màn hình */
    border-radius: 0 15px 15px 0; 
}
.ps-lg-5 {
    padding-left: 3rem !important;
}
/* Khung ảnh Polaroid */
.photo-frame {
    width: 100%;
    margin-left: 0;
    margin-bottom: 10rem;
}

.photo-frame img {
    width: 100%;
    height: auto;
    display: block;
}

/* Nút Read More */
.btn-read-more {
    background-color: #ce1212;
    color: white !important;
    padding: 10px 35px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

.btn-read-more:hover {
    background-color: #e01616;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.row-full-left {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* .custom-photo-position {
    position: relative;
    transform: translateY(-20px); 
    padding-left: 0 !important; 
} */

.custom-photo-position {
    position: relative;
    transform: translateY(-20px);
    padding-left: 0 !important;
    
    /* ĐẨY SÁT LỀ TRÁI MÀN HÌNH */
    /* Căn lại margin-left âm để lấn qua khỏi container */
    margin-left: calc(-34vw + 50%); 
    width: auto; 
}

/* Màu chữ mô tả */
.about-desc p {
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.6;
    
}
/* Hiệu ứng nâng nhẹ khung ảnh khi di chuột vào (tùy chọn) */
.photo-frame:hover {
    transform: translateY(-10px) rotate(-1deg);
}

.about h3 {
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 20px;
}

.about .book-a-table {
  text-align: center;
  border: 4px solid color-mix(in srgb, var(--default-color), transparent 30%);
  padding: 22px;
}

.about .book-a-table h3 {
  font-family: var(--default-font);
  margin: 0 0 0 0;
  font-size: 24px;
}

.about .book-a-table p {
  color: var(--accent-color);
  font-weight: 500;
  font-size: 28px;
  margin: 0;
}

.about .fst-italic {
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 0 0 10px 30px;
  position: relative;
}

.about .content ul i {
  position: absolute;
  font-size: 20px;
  left: 0;
  top: -3px;
  color: var(--accent-color);
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .pulsating-play-btn {
  position: absolute;
  left: calc(50% - 47px);
  top: calc(50% - 47px);
}

.title-about {
    color: #ffffff;
    font-weight: bold;
}

.description-about {
    color: #ffffff; /* Mã màu bạn đã chọn */
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 1px;
    display: block;
    margin-top: 10px;
    font-style: italic;
}

.about .content h3 {
    font-size: 1.6rem;
    border-left: 5px solid #ce1212; /* Tạo điểm nhấn bên trái tiêu đề nội dung */
    padding-left: 15px;
}

.about .section-title p {
    margin-bottom: 0;
}
.about-desc {
    /* Tạo vạch đỏ bên trái nếu bạn muốn giống ảnh mẫu */
    padding-left: 25px !important; /* Khoảng cách từ vạch đỏ đến chữ */
    text-align: justify; /* Căn đều hai bên để trông chuyên nghiệp */
}

.about-desc h3 {
  font-weight: 700; 
  color: #37373f; 
  margin-bottom: 20px;
}

.about-desc p {
  color: #5f5f68; 
  line-height: 1.8;
  text-indent: 0;
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.why-us .why-box {
  color: var(--contrast-color);
  background: var(--accent-color);
  padding: 30px;
}

.why-us .why-box h3 {
  color: var(--contrast-color);
  font-family: var(--default-font);
  font-weight: 700;
  font-size: 34px;
  margin-bottom: 30px;
}

.why-us .why-box p {
  margin-bottom: 30px;
}

.why-us .why-box .more-btn {
  display: inline-block;
  background: color-mix(in srgb, var(--contrast-color), transparent 85%);
  padding: 8px 40px 10px 40px;
  color: var(--contrast-color);
  transition: all ease-in-out 0.4s;
  border-radius: 50px;
}

.why-us .why-box .more-btn i {
  font-size: 14px;
}

.why-us .why-box .more-btn:hover {
  color: var(--accent-color);
  background: var(--surface-color);
}

.why-us .icon-box {
  background-color: var(--surface-color);
  text-align: center;
  padding: 40px 30px;
  width: 100%;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.why-us .icon-box i {
  color: var(--accent-color);
  font-size: 32px;
  margin-bottom: 30px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  transition: 0.3s;
}

.why-us .icon-box h4 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 30px 0;
  font-family: var(--default-font);
}

.why-us .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.why-us .icon-box:hover i {
  color: var(--contrast-color);
  background: var(--accent-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
  position: relative;
}

.stats img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.stats:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 40%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.stats .container {
  position: relative;
  z-index: 3;
}

.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  font-size: 48px;
  display: block;
  color: var(--default-color);
  font-weight: 700;
}

.stats .stats-item p {
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/*--------------------------------------------------------------
# Menu Section
--------------------------------------------------------------*/
.menu .nav-tabs {
  border: none;
  margin-bottom: 40px;
}

.menu .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;      
    padding: 15px 30px; 
    border-radius: 50px; 
    color: #333; 
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px;
}



@media (max-width: 575px) {
  .menu .nav-link {
    margin: 0 10px;
    padding: 10px 0;
  }
}

.menu .nav-link i {
  padding-right: 15px;
  font-size: 48px;
}

.menu .nav-link h4 {
    font-size: 0.9rem; /* Tăng cỡ chữ */
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    font-family: var(--default-font);
}

@media (max-width: 575px) {
  .menu .nav-link h4 {
    font-size: 16px;
  }
  .menu .nav-tabs {
    flex-direction: column; /* Trên mobile rất nhỏ, nên để các nút xếp chồng lên nhau */
    align-items: center;
  }
  .menu .nav-link {
    width: 90%; /* Nút chiếm gần hết chiều ngang màn hình cho dễ bấm */
  }
}

.menu .nav-link:hover {
    color: #ffffff !important;           /* ĐỔI CHỮ SANG TRẮNG */
    transform: scale(1.05);              /* Làm ô bự lên một chút khi hover */
    box-shadow: 0 5px 15px rgba(206, 18, 18, 0.4);
}

.menu .nav-link.active {
    transform: scale(1.08); /* Nút đang chọn sẽ bự hơn các nút khác */
}

.menu .nav-link.active h4 {
    color: #fff !important;
    font-family: var(--default-font);
}

.menu .tab-content .tab-header {
  padding: 30px 0;
}

.menu .tab-content .tab-header p {
  font-size: 14px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 0;
}

.menu .tab-content .tab-header h3 {
  font-size: 48px;
  font-weight: 700;
  color: var(--accent-color);
}

.menu .tab-content .tab-header h4 {
  font-size: 40px;
  font-weight: 600;
  color: var(--accent-color);
  font-family: var(--default-font);
}

.menu .tab-content .menu-item {
  text-align-last: center;
}

.menu .tab-content .menu-item .menu-img {
  padding: 0 60px;
  margin-bottom: 15px;
}

.menu .tab-content .menu-item h4 {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 5px;
  font-family: var(--default-font);
}

.menu .tab-content .menu-item .ingredients {
  font-family: var(--nav-font);
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 5px;
}

.menu .tab-content .menu-item .price {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-color);
}

/* Tùy chỉnh khung chứa Swiper */
.custom-menu-swiper {
  padding: 1.25rem 0.625rem 3.125rem 0.625rem; /* 20px 10px 50px 10px */
  width: 100%;
  overflow: hidden;
}

.event-item {
    width: 100% !important;
    height: 25rem !important; /* 400px */
    border-radius: 0.938rem; /* 15px */
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.875rem; /* 30px */
    background-color: #f8f8f8;
}

.event-item:hover {
    transform: scale(1.02);
}

/* Tùy chỉnh từng thẻ Slide */
.custom-menu-swiper .event-item {
    background-size: 70% auto; /* Thu nhỏ hình ảnh lại còn 70% chiều ngang */
    background-position: center 30%;
    background-repeat: no-repeat;
    background-color: #fff;
    border: 0.063rem solid rgba(0,0,0,0.05);
    box-shadow: 0 0.938rem 2.188rem rgba(0, 0, 0, 0.1); /* 0 15px 35px */    
    transition: all 0.3s ease;
    padding: 1.875rem;
    position: relative;
    border-radius: 0.938rem; /* Bo góc cho chuyên nghiệp */
    overflow: hidden;
    justify-content: flex-end; /* Đẩy nội dung xuống đáy */
    height: 25rem; /* Bắt buộc phải có chiều cao để justify-content hoạt động */
    padding-bottom: 0.938rem; /* Khoảng cách từ chữ đến mép đáy ô */
}

#menu {
    /* Tạo hiệu ứng chuyển màu từ xám nhạt sang trắng để không bị chói mắt */
    position: relative;
    overflow: hidden;
}

/* Thêm một họa tiết chìm (vân chìm) để tăng tính cao cấp */
#menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); /* Họa tiết hình khối nhỏ mờ */
    opacity: 0.4;
    pointer-events: none;
}

.custom-menu-swiper .event-item:hover {
    transform: translateY(-10px); /* Nhấc card lên */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    background-color: #ffffff;
    background-size: 75% auto;
    border-color: #ce1212;
}

.product-info {
    width: 100%;
    padding: 20px;
    color: #fff;
    text-align: center;
}

.product-info h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
}

.icon-shop {
    background: #fff;
    padding: 6px;
    border-radius: 8px;
}

.custom-menu-swiper .event-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.2) 0%, transparent 14%);
    z-index: 1;
}

.custom-menu-swiper .event-item h3 {
    margin-top: auto;
    margin-bottom: 0;
    width: 100%;
    font-size: 1.0rem; 
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    transition: 0.3s;
}

/* Đưa nội dung lên trên lớp phủ */
.custom-menu-swiper .event-item .price,
.custom-menu-swiper .event-item .description {
    position: relative;
    color: #333;
    z-index: 2;
    padding: 0 20px 20px 20px;
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    transition: 0.3s;
}

.custom-menu-swiper .event-item:hover h3 {
    color: #ffc107; /* Đổi màu nhẹ khi hover */
    
}

.custom-menu-swiper .event-item .price {
    font-weight: bold;
    color: #F8BBD0; /* Màu hồng bạn đã chọn */
    font-size: 1.5rem;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item .testimonial-content {
  border-left: 3px solid var(--accent-color);
  padding-left: 30px;
}

.testimonials .testimonial-item .testimonial-img {
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0 0 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 30px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Events Section
--------------------------------------------------------------*/
.events .container-fluid {
  padding: 0;
}

.events .event-item {
  background-size: cover;
  background-position: cente;
  min-height: 600px;
  padding: 30px;
}

@media (max-width: 575px) {
  .events .event-item {
    min-height: 500px;
  }
}

.events .event-item:before {
  content: "";
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  inset: 0;
}

.events .event-item h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #ffffff;
  position: relative;
}

.events .event-item .price {
  color: #ffffff;
  border-bottom: 2px solid var(--accent-color);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  position: relative;
}

.events .event-item .description {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
}

.events .swiper-wrapper {
  height: auto;
}
.swiper-wrapper {
    display: flex !important;
}
.tab-pane.active .swiper-slide {
    opacity: 1 !important;
    visibility: visible !important;
}
.swiper-slide {
    visibility: visible !important;
    opacity: 1 !important;
}
.events .swiper-pagination {
  margin-top: 20px;
  position: relative;
}
.custom-menu-swiper .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
}
@media (min-width: 48rem) and (max-width: 74.938rem) {
    .custom-menu-swiper .swiper-slide {
        /* slidesPerView: 2 */
        width: calc(50% - 0.938rem) !important;
        flex-shrink: 0 !important;
        margin-right: 0.938rem;
    }
}
@media (min-width: 75rem) { 
    .custom-menu-swiper .swiper-slide {
        /* slidesPerView: 3 */
        width: calc(33.333% - 1rem) !important; 
        flex-shrink: 0 !important;
        margin-right: 0.938rem; /* 15px */
    }
}
.events .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.events .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Chefs Section
--------------------------------------------------------------*/
.chefs .team-member {
  background-color: var(--surface-color);
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  transition: 0.3s;
}

.chefs .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.chefs .team-member .member-img:after {
  position: absolute;
  content: "";
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 100%;
  background-color: var(--surface-color);
  -webkit-mask: url("../img/team-shape.svg") no-repeat center bottom;
  mask: url("../img/team-shape.svg") no-repeat center bottom;
  -webkit-mask-size: contain;
  mask-size: contain;
  z-index: 1;
}

.chefs .team-member .social {
  position: absolute;
  right: -100%;
  top: 30px;
  opacity: 0;
  border-radius: 4px;
  transition: 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 60%);
  z-index: 2;
}

.chefs .team-member .social a {
  transition: color 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin: 15px 12px;
  display: block;
  line-height: 0;
  text-align: center;
}

.chefs .team-member .social a:hover {
  color: var(--default-color);
}

.chefs .team-member .social i {
  font-size: 18px;
}

.chefs .team-member .member-info {
  padding: 10px 15px 20px 15px;
}

.chefs .team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
  font-family: var(--default-font);
}

.chefs .team-member .member-info span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.chefs .team-member .member-info p {
  font-style: italic;
  font-size: 14px;
  padding-top: 15px;
  line-height: 26px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.chefs .team-member:hover {
  transform: scale(1.08);
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.chefs .team-member:hover .social {
  right: 8px;
  opacity: 1;
}

/*--------------------------------------------------------------
# Book A Table Section
--------------------------------------------------------------*/
.book-a-table .reservation-img {
  min-height: 500px;
  background-size: cover;
  background-position: center;
}

.book-a-table .reservation-form-bg {
  background: color-mix(in srgb, var(--default-color), transparent 97%);
}

.book-a-table .php-email-form {
  padding: 30px;
}


.book-a-table .php-email-form input[type=text],
.book-a-table .php-email-form input[type=email],
.book-a-table .php-email-form input[type=number],
.book-a-table .php-email-form input[type=date],
.book-a-table .php-email-form input[type=time],
.book-a-table .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 20%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.book-a-table .php-email-form input[type=text]:focus,
.book-a-table .php-email-form input[type=email]:focus,
.book-a-table .php-email-form input[type=number]:focus,
.book-a-table .php-email-form input[type=date]:focus,
.book-a-table .php-email-form input[type=time]:focus,
.book-a-table .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.book-a-table .php-email-form input[type=text]::placeholder,
.book-a-table .php-email-form input[type=email]::placeholder,
.book-a-table .php-email-form input[type=number]::placeholder,
.book-a-table .php-email-form input[type=date]::placeholder,
.book-a-table .php-email-form input[type=time]::placeholder,
.book-a-table .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.book-a-table .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 14px 60px;
  transition: 0.4s;
  border-radius: 4px;
}

.book-a-table .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
Để đưa toàn bộ CSS hiện tại của bạn về đơn vị rem (giúp giao diện co giãn tốt hơn theo kích thước font hệ thống) và nâng cấp cái khung đỏ "rớt chữ" thành kiểu sang trọng, mềm mại hơn, mình đã tối ưu lại như sau:

Dưới đây là mã CSS đã được quy đổi (1rem = 16px) và tinh chỉnh hiệu ứng:

CSS

<style>
/* Cấu trúc chung của Gallery */
.gallery {
  overflow: hidden;
}

.gallery .swiper-wrapper {
  height: auto;
}

/* Pagination: Quy đổi 20px -> 1.25rem */
.gallery .swiper-pagination {
  margin-top: 1.25rem;
  position: relative;
}

/* Bullets: Quy đổi 12px -> 0.75rem */
.gallery .swiper-pagination .swiper-pagination-bullet {
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  border: 0;
  width: 0.75rem;
  height: 0.75rem;
  opacity: 1;
}

.gallery .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
  opacity: 1;
}

.gallery .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease; /* Thêm độ mượt khi trượt */
}

#gallery {
  padding: 60px 0;
}

/* Media Query: Quy đổi 992px -> 62rem */
@media (min-width: 62rem) {
  .gallery .swiper-wrapper {
    padding: 2.5rem 0; /* 40px -> 2.5rem */
  }

  .gallery .swiper-slide-active .btn-view-more {
        /* Giữ nút rõ ràng hơn trên nền trắng của slide active */
        box-shadow: 0 0.25rem 0.75rem rgba(150, 48, 44, 0.3);
    }

  /* Nâng cấp Slide Active: Sang xịn mịn */
  .gallery .swiper-slide-active {
    text-align: center;
    background: #ffffff; /* Nền trắng sạch sẽ */
    z-index: 10;
    transform: scale(1.2); /* Phóng to làm tâm điểm */
    
    /* Thay border thô bằng bo góc và đổ bóng (Shadow) */
    border-radius: 1.25rem; /* 20px */
    padding: 0.9375rem; /* ~15px - tạo khoảng thở cho ảnh */
    
    /* Hiệu ứng bóng đỏ đặc trưng của Thiên Hương mờ ảo */
    box-shadow: 0 1.25rem 3.125rem rgba(150, 48, 44, 0.15), 
                0 0.5rem 1.25rem rgba(0, 0, 0, 0.05);
    
    /* Nếu bạn vẫn muốn có viền nhẹ, hãy dùng viền mảnh hơn */
    border: 0.125rem solid rgba(150, 48, 44, 0.2); /* ~2px */
    
    /* Quan trọng: Bỏ transition: none để hiệu ứng phóng to mượt hơn */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* Responsive cho mobile: Quy đổi về rem */
@media (max-width: 61.9375rem) {
.gallery .swiper-slide-active {
    transform: scale(1.1);
    padding: 0.5rem;
    z-index: 10; /* Đảm bảo slide active nằm trên các slide khác */
  }

  /* 1. Hiện lớp nền mờ cho slide đang active */
  .gallery .swiper-slide-active .gallery-item-wrapper::before {
    opacity: 1 !important;
  }

  /* 2. Hiện nút XEM CHI TIẾT cho slide đang active */
  .gallery .swiper-slide-active .gallery-action {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  /* 3. Đảm bảo các slide không active thì ẩn nút */
  .gallery .swiper-slide:not(.swiper-slide-active) .gallery-action {
    opacity: 0 !important;
  }
}
/* .gallery-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
} */

.swiper-button-next,
.swiper-button-prev {
    color: #c92127 !important; /* Đổi màu đỏ thương hiệu */
    background: rgba(255, 255, 255, 0.8); /* Nền trắng mờ hình tròn */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Chỉnh kích thước biểu tượng bên trong mũi tên */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px !important;
    font-weight: bold;
}
.gallery-item-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px; /* Bo góc nhẹ cho giống hình mẫu */
}
.product-direct-link {
    display: block;
    width: 100%;
    height: 100%;
}
.gallery-item-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Màu đen mờ */
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.gallery-action {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8); /* Ban đầu hơi nhỏ lại */
    z-index: 2;
    opacity: 0; /* Mặc định ẩn đi */
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
}
.gallery-item-wrapper:hover::before {
    opacity: 1; /* Hiện lớp nền mờ */
}

.gallery-item-wrapper:hover .gallery-action {
    opacity: 1; /* Hiện nút */
    transform: translate(-50%, -50%) scale(1); /* Phóng to về kích thước chuẩn */
}

.gallery-item-wrapper:hover img {
    transform: scale(1.05); /* Phóng to nhẹ ảnh */
    filter: brightness(0.9); /* Hơi tối lại một chút cho chuyên nghiệp */
}

.gallery-item-wrapper img {
    transition: all 0.4s ease;
    cursor: pointer;
}
.gallery-action, .gallery-item-wrapper::before {
    display: none !important;
}
/* 
.gallery-action {
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
} */

.btn-view-more {
    background: var(--accent-color, #ce1212);
    color: #ffffff !important;
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem; /* ~12px */
    font-weight: 700;
    border-radius: 2rem;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.btn-view-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
#contact {
    /* Tạo hiệu ứng chuyển màu từ xám nhạt sang trắng để không bị chói mắt */
    background: linear-gradient(135deg, #eeeeee 0%, #f8f8f8 100%);
    position: relative;
    padding: 60px 0;
    overflow: hidden;
}

.contact .info-item {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 20px 30px;
}

.contact .info-item .icon {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  margin-right: 15px;
}

.contact .info-item h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 5px 0;
  font-family: var(--default-font);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item .social-links a {
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  margin: 4px 6px 0 0;
  transition: 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.contact .info-item .social-links a:hover {
  color: var(--accent-color);
}

.contact .php-email-form {
  background-color: var(--surface-color);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-top: 30px;
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--surface-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.tab-content > .tab-pane {
    display: block !important; /* Luôn giữ layout */
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.tab-content > .active {
    height: auto !important;
    visibility: visible;
}
.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Menu Product
--------------------------------------------------------------*/


/* Container tổng - Thu nhỏ chiều cao lại */
.product-banner-container {
    position: relative;
    width: 100%;
    max-width: 80rem; /* ~1280px */
    margin: 0 auto;
    overflow: hidden;
    /* Tăng từ 20rem lên 28rem để có không gian đẩy chữ xuống */
    height: 50rem; 
}

.main-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh không bị méo khi thu nhỏ container */
    display: block;
}

/* Lớp phủ chứa chữ */
.tab-typography-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%; /* Tăng diện tích vùng chứa chữ */
    display: flex;
    align-items: flex-end; /* Cố định chữ nằm sát đáy */
    background: linear-gradient(transparent, rgba(0,0,0,0.2)); /* Thêm bóng đổ nhẹ để nổi chữ */
}

.tab-typography-overlay .nav {
    display: flex;
    width: 100%;
    padding-bottom: 2.5rem; /* Khoảng cách từ chữ đến mép dưới cùng của hình */
    margin: 0;
    border: none !important;
}

.tab-typography-overlay .nav-item {
    flex: 1;
    list-style: none;
    text-align: center;
}

/* --- ĐỊNH DẠNG CHỮ LỚN HƠN --- */
nav-link {
    background: transparent !important;
    border: none !important;
    width: 100%;
    height: 100%;
    outline: none !important;
    box-shadow: none !important;
}

/* .tab-text {
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
} */

.product-banner-tabs {
    display: flex !important;
    height: 450px; /* Chỉnh theo chiều cao banner desktop của bạn */
    position: relative;
    overflow: hidden;
    align-items: stretch;
}

.product-banner-tabs .nav-item {
    flex: 1;
    display: flex;
    position: relative;
    z-index: 1;
}

.product-banner-tabs .nav-link.btn-item-1 {
  padding-right: 27% !important;
}
.product-banner-tabs .nav-link.btn-item-3 {
  margin-left: -2.5rem;
  align-items: flex-start;
  z-index: 10;
}
.product-banner-tabs .btn-item-2 {
  margin-left: 2rem;
  padding-right: 13rem !important;
}
.product-banner-tabs .nav-link.btn-item-4 {
  padding-left: 2rem !important;
}

.product-banner-tabs .nav-link {
    width: 140% !important; /* Độ rộng để lấn dải màu */
    height: 250% !important;
    position: absolute;
    bottom: 0;
    left: 40%;
    
    /* Nghiêng khung hình chữ nhật thành hình bình hành */
    transform: translateX(-50%) skewX(-15deg) !important; 
    transform-origin: bottom center;

    display: flex !important;
    flex-direction: column;
    /* align-items: flex-start !important; */
    
    /* Đẩy chữ sang trái và xuống dưới */
    /* padding-left: 20% !important;  */
    padding-bottom: 3rem !important; /* Desktop cần khoảng cách đáy lớn hơn */
    
    background: transparent !important;
    border: none !important;
    transition: all 0.3s ease;
}

.tab-text-first {
  margin-left: 2.7rem;
}
.tab-text-second {
  margin-left: -1.2rem;
}

.tab-text-third {
  margin-left: -1rem;
}
/* .tab-text-four {
  margin-left: 90%;
} */



@media (min-width: 1600px) {

  .product-banner-tabs {
    display: flex !important;
    width: 100%;
    height: 65rem !important; /* Chiều cao banner */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 !important;
    margin: 0 auto;
    border: none !important;
    align-items: flex-end; /* Đẩy các nút xuống dưới đáy dải màu */
  }
  .product-banner-tabs .nav-link.btn-item-1 {
    padding-right: 0 !important;
  }
}

@media (min-width: 2500px) {
    .product-banner-tabs .nav-link.btn-item-1 {
      padding-right: 0 !important;
    }
}
/* Hiệu ứng khi hover hoặc active trên Desktop */
/* .product-banner-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
} */

.product-banner-wrapper {
    width: 100vw !important;         /* Lấy toàn bộ chiều rộng trình duyệt */
    position: relative;
    left: 50%;
    transform: translateX(-50%);     /* Căn giữa lại khối sau khi kéo rộng */
    
    background-size: cover;          /* Hoặc 100% 100% để ép ảnh giãn hết ngang */
    background-position: center;
    background-repeat: no-repeat;
    
    /* Xử lý khoảng trống trắng nếu có */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}
.banner-title-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%); /* -60% để hơi nhích lên trên một chút, nhường chỗ cho menu */
    z-index: 1;
    width: 40%; /* Chỉnh độ lớn của ảnh chữ (ví dụ 40% chiều rộng banner) */
    text-align: center;
}
.banner-title-top {
    position: absolute;
    top: 2%;
    left: 54%;
    transform: translateX(-50%); /* Chỉ cần căn giữa ngang, không cần dọc */
    z-index: 1;
    width: 35%; /* Độ lớn của chữ Migra */
    text-align: center;
}
.banner-text-img {
    max-width: 100%;
    height: auto;
    /* Hiệu ứng mờ ảo nếu muốn */
    filter: drop-shadow(0 0.5rem 1rem rgba(0,0,0,0.4));
}

@media (max-width: 768px) {
      .header-logo-overlay {
          top: 1rem;
      }
      .banner-logo {
          height: 12rem !important; /* Mobile để nhỏ lại cho đỡ choán màn hình */
      }
      .banner-title-top {
          position: absolute;
          top: 2%;
          left: 54%;
          transform: translateX(-50%);
          z-index: 1;
          width: 51%;
          text-align: center;
      }
      .section-title p {
        font-family: var(--playfair-font);
        color: #ce1212;
        font-size: 21px;
        font-weight: 1000;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        line-height: 1.2;
        margin-top: 15px;
      }
      .photo-frame {
        margin-bottom: 0rem !important;
      }
 }

/* Đảm bảo body không bị xuất hiện thanh cuộn ngang do 100vw */
body {
    overflow-x: hidden;
}

.product-banner-tabs .tab-text {
    margin-top: auto !important;
    
    /* QUAN TRỌNG: Khử nghiêng để chữ MÌ, PHỞ đứng thẳng */
    transform: skewX(15deg) !important; 
    
    display: block;
    color: #fff;
    font-weight: bold;
    font-size: 1.7rem; /* Chữ desktop to hơn */
    text-transform: uppercase;
    white-space: nowrap;
}

.tab-text-about {
  font-size: 1rem;
}
/* --- HIỆU ỨNG KHI ACTIVE --- */
.nav-link.active .tab-text {
    opacity: 1;
    transform: scale(1.15); /* Phóng to chữ khi được chọn */
    color: #FFFFFF !important;
}

/* Gạch chân theo rem */
.nav-link.active .tab-text::after {
    content: '';
    display: block;
    width: 2rem;
    height: 0.2rem;
    background: #FFFFFF;
    margin: 0.5rem auto 0;
}
/* Hover effect */
.nav-link:hover .tab-text {
    opacity: 1;
}
.nav-link:focus, 
.nav-link:active,
.nav-link:hover {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.product-banner-tabs {
    display: flex !important;
    width: 100%;
    height: 45rem; /* Chiều cao banner */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0 !important;
    margin: 0 auto;
    border: none !important;
    align-items: flex-end; /* Đẩy các nút xuống dưới đáy dải màu */
}

.product-banner-tabs .nav-item {
    flex: 1;
    height: 40%; /* Chỉ cho nút bấm chiếm phần diện tích phía dưới */
    display: flex;
    align-items: center;
    justify-content: center;
}

.d-md-none {
    display: none !important;
}
.custom-menu-mobile {
    margin-right: 2.5rem !important;
}
.custom-menu-mobile-next {
    margin-right: 3.8rem !important;
}
/* CHO MOBILE (Dưới 768px) */

@media (max-width: 47.938rem) {
    .d-md-block {
        display: none !important;
    }
    
    /* Hiện bản mobile */
    .d-block {
        display: block !important;
    }
    .tab-text-third {
      margin-left: 0.5rem;
    }
    .line-break-mobile {
      margin-left: -0.2rem;
    }
    
    .about-desc {
      /* Tạo vạch đỏ bên trái nếu bạn muốn giống ảnh mẫu */
      padding-left: 0px !important; /* Khoảng cách từ vạch đỏ đến chữ */
      text-align: justify; /* Căn đều hai bên để trông chuyên nghiệp */
    }
    .product-banner-tabs.custom-mobile-bg {
        background-image: url('../img/banner-menu-cate-mobile.webp') !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        min-height: 30rem !important;
        height: 34rem;
        /* Ép nằm trên 1 hàng duy nhất */
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: nowrap !important; /* QUAN TRỌNG: Ngăn không cho xuống dòng */
        
        justify-content: flex-start !important; 
        align-items: flex-end !important; 
        padding-bottom: 2rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        border: none !important;
    }

    .product-banner-tabs.custom-mobile-bg .nav-item {
        flex: 1 !important; /* Chia 4 cột bằng nhau, mỗi cột là 1 dải màu */
        height: 100% !important; /* Chiều cao chiếm trọn banner */
        max-width: 20% !important;
        height: 15rem !important;
        display: flex;
        align-items: center;
        position: relative; /* Làm gốc tọa độ cho hitbox */
        margin-right: 0.8rem;
        justify-content: flex-end !important
    }

  .product-banner-tabs.custom-mobile-bg .nav-link {
      position: absolute; /* Phải có absolute để không đẩy các nút khác */
      bottom: 0;
      height: 25rem;
      
      /* TĂNG CHIỀU RỘNG */
      width: 145% !important; /* Tăng lên 180% hoặc 200% để phủ rộng sang phải */
      
      /* NGHIÊNG VÙNG BẤM */
      /* translateX: căn giữa nút */
      /* skewX: nghiêng nút (thường từ -10deg đến -15deg sẽ khớp dải màu) */
      transform: translateX(-40%) skewX(-12deg) !important; 
      transform-origin: bottom center; /* Nghiêng từ gốc là đáy nút */

      left:-30%;
      min-width: unset !important;
      /* padding: 0.5rem 0 !important; */
      background: transparent !important;
      border: none !important;
      display: flex !important; /* Dùng flex để dễ căn chữ */
      flex-direction: column;
      padding-left: 27% !important;
      padding-bottom: 6.5rem !important;
      /* justify-content: flex-end; */
      /* Căn chữ dạt sang trái của khung nút bự */
      align-items: flex-start !important;  
      z-index: 1;
  }
    .product-banner-tabs.custom-mobile-bg .tab-text {
        color: #ffffff !important;
        font-weight: 800 !important;
        /* margin-top: 20rem !important; */
        text-align: left;
        /* Hạ size chữ xuống một chút để "BÚN - PHỞ - HỦ TIẾU" không bị vỡ khung */
        font-size: 1rem !important; 
        text-transform: uppercase;
        transform: skewX(12deg) rotate(0.01deg) !important;
        transform-origin: center center !important;        
        text-align: center;
        display: block;
        line-height: 1.1;
        white-space: normal; /* Cho phép chữ tự xuống dòng bên trong nút */
        text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
        pointer-events: none; /* Để sự kiện click xuyên qua text vào button */
    }

    .custom-menu-mobile {
        margin-right: 2.5rem !important;
    }
    .custom-menu-mobile-next {
        margin-right: 3.8rem !important;
    }
    /* Vạch active thu nhỏ lại cho cân đối */
    .product-banner-tabs.custom-mobile-bg .nav-link.active .tab-text::after {
        content: "";
        display: block;
        width: 1rem; 
        height: 0.125rem;
        background: #ffffff;
        margin: 0.3rem auto 0;
    }
}
@media (max-width: 768px) or (max-width: 1024px) {
  .d-block {
       display: block !important;
  }
  .product-banner-tabs .nav-link {
    height: 300% !important;
  }
}
@media (max-width: 1024px) {
  .d-block {
       display: block !important;
  }
  .product-banner-tabs .nav-link {
    height: 300% !important;
  }
}

.bi-tiktok, .bi-shopee {
    display: inline-block;
    width: 1rem; /* Khớp với size rem bạn đang dùng */
    height: 1rem;
    vertical-align: -0.125em;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.bi-tiktok, .bi-shopee {
    display: inline-block;
    width: 1.25rem;       /* Độ rộng icon (khớp với size font bạn dùng) */
    height: 1.25rem;      /* Chiều cao icon */
    background-repeat: no-repeat;
    background-size: contain;   /* Giúp ảnh tự co giãn vừa khít khung */
    background-position: center;
    vertical-align: middle;     /* Căn giữa dòng với chữ hoặc các icon khác */
    line-height: 1;
}

/* Gán đường dẫn ảnh của bạn */
.bi-tiktok {
    background-image: url('../img/tik-tok.png');
}

.shopee{
    background-image: url('../img/shopee-icon.webp'); 
}

/* Nếu bạn muốn icon nhỏ lại một chút khi nằm trong link tròn */
.social-links a i {
    font-size: 1.25rem; 
}


.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-right: 10px;
    text-decoration: none;
    transition: 0.3s;
}

/* 2. Thiết lập cho icon TikTok và Shopee */
.bi-tiktok, .bi-shopee {
    display: block;
    width: 20px;  /* Kích thước icon bên trong vòng tròn */
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 3. Gán đường dẫn ảnh (Quan trọng: Kiểm tra lại tên file) */
.bi-tiktok {
    background-image: url('../img/tik-tok.png'); /* Đảm bảo file là tik-tok.png */
}

.bi-shopee {
    background-image: url('../img/shopee.png'); /* File túi xách bạn vừa gửi */
    /* Nếu icon Shopee màu đen khó thấy trên nền tối, hãy thêm filter trắng */
    filter: brightness(0) invert(1); 
}

/* 4. Hiệu ứng hover cho đẹp */
.social-links a:hover {
    border-color: #C22D21; /* Màu đỏ khi rê chuột vào */
    background: rgba(194, 45, 33, 0.1);
}

.social-links {
    gap: 0.75rem; /* Khoảng cách giữa các icon */
}

.social-icon {
    display: block;
    width: 2.5rem;  /* ~40px */
    height: 2.5rem; /* ~40px */
    filter: brightness(1.2) saturate(1.2);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-3px);
    filter: brightness(1.1); /* Sáng lên nhẹ khi hover */
}

/* Đổ hình cụ thể cho từng class */
.facebook {
    background-image: url('/frontend/img/facebook-icon.png');
}

.tiktok {
    background-image: url('/frontend/img/tiktok-icon.webp');
}

.shopee {
    background-image: url('/frontend/img/shopee-icon.webp');
}

.youtube {
    background-image: url('/frontend/img/youtube-icon.png');
}

.facebook {
    background-image: url('/frontend/img/facebook-icon.png');
}

.lazada {
    background-image: url('/frontend/img/lazada-icon.png');
}

/* Tùy chỉnh cho Search trên Menu */
.search-wrapper {
    padding-left: 20px;
    display: flex;
    align-items: center;
}

.search-form {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 2px 10px;
    transition: all 0.3s ease;
}

.search-input {
    border: none;
    background: transparent;
    outline: none;
    padding: 5px;
    font-size: 14px;
    width: 110px; /* Độ rộng mặc định */
    transition: width 0.4s ease;
}

/* Hiệu ứng khi nhấn vào ô tìm kiếm sẽ dài ra */
.search-input:focus {
    width: 150px;
}

.search-btn {
    border: none;
    background: transparent;
    color: #dc3545; /* Màu đỏ đặc trưng của THF */
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 5px;
}

.search-btn:hover {
    color: #a71d2a;
}

/* Làm trắng chữ gợi ý (placeholder) */
.search-input::placeholder {
    color: rgba(255, 255, 255, 0.8) !important; /* Màu trắng độ trong suốt 80% */
    opacity: 1; /* Cần thiết cho Firefox */
}

/* Hỗ trợ cho các trình duyệt cũ hơn */
.search-input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
}

.search-input::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Đảm bảo chữ khi người dùng gõ vào cũng là màu trắng */
.search-input {
    color: white !important;
}

/* Đổi màu icon kính lúp thành trắng luôn cho đồng bộ trên nền đỏ */
.search-btn i {
    color: white !important;
}

.language-selector {
    display: flex;
    align-items: center;
    gap: 10px; /* Khoảng cách giữa 2 lá cờ */
}
.lang-link {
    transition: transform 0.3s ease;
    opacity: 0.6;
    display: inline-block;
    line-height: 1;
}
.lang-link:hover, .lang-link.active {
    opacity: 1;
    transform: scale(1.1);
}
.lang-link img {
    width: 28px; /* Tăng kích thước từ 22px lên 28px */
    height: auto;
    border-radius: 3px;
    transition: all 0.3s ease;
    /* Tạo viền trắng mảnh để tách khỏi nền đỏ của Menu */
    border: 1.5px solid rgba(255, 255, 255, 0.8); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Fix cho mobile */
@media (max-width: 1199px) {
    .language-selector {
        justify-content: flex-start;
        margin-top: 10px;
        border-top: 1px solid #eee;
    }
}
.lang-link.active-lang {
    opacity: 1;
    filter: brightness(1.2); /* Làm sáng rực lên khi hover */
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
.lang-link.active-lang img {
    opacity: 1 !important;
    filter: brightness(1.2) contrast(1.1); /* Tăng độ sáng và tương phản */
    transform: scale(1.15); /* Phóng to nhẹ */
    border: 2px solid #ffffff !important;
  
    
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    z-index: 5;
}

/* Lá cờ không chọn: Mờ đi */
.lang-link.inactive-lang img {
    opacity: 0.6; /* Làm mờ nhẹ */
    filter: brightness(0.9); /* Giảm độ sáng một chút để làm nền */
}

.lang-link.inactive-lang:hover img {
    opacity: 1;
    filter: brightness(1.2); /* Làm sáng rực lên khi hover */
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}