/* CSS zalo and smax - Minimal fix */
.zalo-chat-widget {
  bottom: 90px !important;
  /* Đẩy icon Zalo lên cao */
  right: 15px !important;
  /* Cách lề phải một khoảng nhỏ */
  left: auto !important;
  z-index: 3001 !important; /* Cao hơn header (3000) */
}
.zalo-chat-box {
  max-height: 500px !important;
  /* Tăng chiều cao tối đa */
  overflow: visible !important;
  /* Ngăn chặn bị cắt mất */
}

/* Sửa lỗi Zalo trên trang sản phẩm desktop */
[data-template="product"] .zalo-chat-widget {
  position: fixed !important;
  bottom: 90px !important;
  right: 15px !important;
  left: auto !important;
  display: block !important;
  transform: none !important; /* Không thu nhỏ nút Zalo - giữ kích thước như trang chủ */
  z-index: 3001 !important; /* Cao hơn header (3000) */
}

/* Đảm bảo các element con của Zalo trong trang sản phẩm desktop không bị thu nhỏ */
[data-template="product"] .zalo-chat-widget iframe,
[data-template="product"] .zalo-chat-widget > div,
[data-template="product"] .zalo-chat-widget * {
  transform: none !important;
  scale: none !important;
}

/* Sửa lỗi chat box Zalo trên trang sản phẩm desktop */
[data-template="product"] .zalo-chat-box {
  position: fixed !important;
  right: 15px !important;
  bottom: 150px !important;
  left: auto !important;
  z-index: 3002 !important; /* Cao hơn Zalo widget (3001) */
  transform: none !important;
  max-height: 500px !important;
  overflow: visible !important;
}
/* Chỉ bọc riêng chữ "TÌM KIẾM" */
#searct-template .heading-page h1 {
  background: white;
  padding: 15px 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: inline-block;
  margin: 0;
}

#searct-template .heading-page {
  text-align: center;
  margin-bottom: 20px;
}

/* Bọc phần "Kết quả tìm kiếm cho..." */
#searct-template .group-top-search {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#searct-template .group-top-search {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

#searct-template .right-result-search {
  gap: 20px;
}


#footer {
  position: relative;
  z-index: 1;
}

.top-ft-wanda {
  position: relative;
}

#smax-chat-widget {
  position: fixed !important;
  bottom: 20px !important;
  /* Để nút Smax nằm thấp hơn Zalo */
  right: 15px !important;
  /* Cách lề phải một khoảng nhỏ */
  z-index: 3003 !important; /* Cao hơn header (3000), dưới Zalo (3001) */
}
@media (max-width: 768px) {
  #sm-chatbox-action {
    bottom: 40px !important;
    /* Đẩy nút lên cao hơn */
    right: 10px !important;
    /* Cách lề phải ngang với nút Zalo */
    z-index: 3003 !important; /* Cao hơn header (3000) */
    transform: scale(0.85) !important;
    /* Thu nhỏ nút Smax */
    transform-origin: bottom right !important;
    /* Scale từ góc dưới bên phải */
  }
  /* Thu nhỏ widget Smax */
  #smax-chat-widget {
    transform: scale(0.80) !important;
    transform-origin: bottom right !important;
    /* Scale từ góc dưới bên phải */
    right: 10px !important;
    /* Cách lề phải ngang với nút Zalo */
  }
}
@media (max-width: 768px) {
  .zalo-chat-widget {
    bottom: 110px !important;
    /* Vị trí mặc định */
    right: 10px !important;
    /* Cách lề phải một khoảng nhỏ */
    z-index: 3001 !important; /* Cao hơn header (3000) */
    transform: scale(0.90) !important;
    /* Thu nhỏ nút Zalo */
  }

  /* Sửa lỗi Zalo trên trang sản phẩm mobile */
  [data-template="product"] .zalo-chat-widget {
    position: fixed !important;
    bottom: 110px !important;
    right: 10px !important;
    left: auto !important;
    display: block !important;
    transform: scale(0.80) !important;
    /* Thu nhỏ nút Zalo trên mobile trang sản phẩm */
    transform-origin: bottom right !important;
    z-index: 3001 !important; /* Cao hơn header (3000) */
  }

  /* Sửa lỗi chat box Zalo trên mobile trang sản phẩm */
  [data-template="product"] .zalo-chat-box {
    position: fixed !important;
    right: 10px !important;
    bottom: 170px !important;
    left: auto !important;
    max-width: 300px !important;
    max-height: 400px !important;
    transform: none !important;
    z-index: 3002 !important; /* Cao hơn Zalo widget (3001) */
    overflow: visible !important;
  }

  /* Thu nhỏ icon Zalo - chỉ áp dụng cho trang khác, không áp dụng cho trang sản phẩm */
  .zalo-chat-widget:not([data-template="product"]) iframe,
  .zalo-chat-widget:not([data-template="product"]) > div {
    transform: scale(0.85) !important;
    transform-origin: bottom right !important;
  }

  /* Reset transform cho Zalo trong trang sản phẩm */
  [data-template="product"] .zalo-chat-widget iframe,
  [data-template="product"] .zalo-chat-widget > div {
    transform: none !important;
  }
}

/* Thêm style cho hình ảnh trang trí Tết */
.tet-decoration-widget {
  position: fixed !important;
  width: 200px;
  height: auto;
  bottom: -20px !important;
  /* Đặt từ lề dưới cùng đi lên */
  right: -50px !important;
  pointer-events: none;
  /* Chặn click */
  z-index: 3005 !important; /* Cao hơn header (3000), dưới chat buttons */
  opacity: 0.8;
  animation: float-tet 3s ease-in-out infinite;
}
@keyframes float-tet {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@media (max-width: 768px) {
  .tet-decoration-widget {
    width: 120px;
    height: auto;
    bottom: 30px !important;
    /* Điều chỉnh cho mobile, từ dưới cùng */
    right: -60px !important;
  }
}
/* Ảnh trang trí 2026horse.webp nằm sau 2 nút chat */
.tet-decoration-horse {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 3000; /* Thấp hơn Zalo (3001) và Smax (3003) để nằm phía sau */
  pointer-events: none;
  width: auto;
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.tet-decoration-horse img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-width: 220px;
  max-height: 220px;
}

@media (max-width: 768px) {
  .tet-decoration-horse {
    bottom: 50px;
    right: 0;
  }
  .tet-decoration-horse img {
    max-width: 150px;
    max-height: 150px;
  }
  
  /* Đẩy ảnh 2026horse lên khi nút "Thêm vào giỏ hàng" xuất hiện */
  .show-buy-mobile .tet-decoration-horse {
    bottom: 110px !important;
    transition: bottom 0.3s ease;
  }
}

/* Ảnh trang trí daulan.webp nằm sau nút Zalo */
.tet-decoration-on-zalo {
  position: fixed;
  bottom: 103px;
  right: 13px;
  z-index: 3004; /* Cao hơn Zalo (3001) để nằm phía trên */
  pointer-events: none;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tet-decoration-on-zalo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 768px) {
  .tet-decoration-on-zalo {
    bottom: 110px;
    right: 10px;
    width: 50px;
    height: 50px;
  }
}

/* Lantern sides under header */
.tet-lantern-side {
  position: fixed;
  top: 0;
  width: 260px;
  pointer-events: none;
  z-index: 2;
  opacity: 0; /* tránh CLS khi load, bật sau khi tính vị trí */
  transition: opacity 0.2s ease;
}
.tet-lantern-side img {
  width: 100%;
  height: auto;
  display: block;
  animation: none;
}
.tet-lantern-left {
  left: -40px;
}
.tet-lantern-right {
  right: -40px;
  transform: scaleX(-1);
}
@media (max-width: 1200px) {
  .tet-lantern-side {
    width: 120px;
    top: 130px;
  }
  .tet-lantern-left { left: -20px; }
  .tet-lantern-right { right: -20px; }
}
@media (max-width: 992px) {
  .tet-lantern-side {
    width: 90px;
    top: 120px;
  }
}
@media (max-width: 768px) {
  .tet-lantern-side {
    display: none;
  }
}

/* Floating cloud layer (behind content) */
.tet-cloud-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.tet-cloud-layer .cloud {
  position: absolute;
  opacity: 1;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));
  animation: cloud-drift 60s ease-in-out infinite;
}
.tet-cloud-layer .cloud-1 { top: 10%; left: 5%; width: 180px; animation-duration: 55s; animation-delay: -5s; }
.tet-cloud-layer .cloud-2 { top: 20%; right: 8%; width: 140px; animation-duration: 62s; animation-delay: -12s; }
.tet-cloud-layer .cloud-3 { top: 40%; left: 15%; width: 160px; animation-duration: 58s; animation-delay: -20s; }
.tet-cloud-layer .cloud-4 { top: 55%; right: 12%; width: 200px; animation-duration: 64s; animation-delay: -30s; }
.tet-cloud-layer .cloud-5 { top: 70%; left: 25%; width: 150px; animation-duration: 60s; animation-delay: -40s; }
.tet-cloud-layer .cloud-6 { top: 80%; right: 18%; width: 170px; animation-duration: 66s; animation-delay: -8s; }

@keyframes cloud-drift {
  0%   { transform: translateX(-6.25vw) translateY(0); }
  25%  { transform: translateX(0vw) translateY(-9px); }
  50%  { transform: translateX(6.25vw) translateY(-18px); }
  75%  { transform: translateX(0vw) translateY(-9px); }
  100% { transform: translateX(-6.25vw) translateY(0); }
}

/* Căn chỉnh cho mobile */
@media (max-width: 768px) {
  .tet-decoration-on-zalo {
    bottom: 125px !important;
    /* khớp với vị trí nút Zalo mobile */
    right: 15px !important;
    /* Điều chỉnh theo vị trí nút Zalo */
    width: 42px;
    /* Thu nhỏ theo tỷ lệ 0.85 */
    height: 42px;
  }

  /* Giảm số lượng mây trên mobile: ẩn xen kẽ các mây số 2-4-6 */
  .tet-cloud-layer .cloud-2,
  .tet-cloud-layer .cloud-4,
  .tet-cloud-layer .cloud-6 {
    display: none;
  }
}

/* PUstudio: Popup + Vintage Corner Styles */
/* Corner widget */.vintage-corner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  text-align: center;
  z-index: 3009; /* Cao hơn overlay Tết (3008) */
}
/* Ẩn text đếm ngược mặc định, chỉ hiển thị trên trang chủ */
.vintage-corner {
  display: none !important;
}
/* Chỉ hiển thị text đếm ngược trên trang chủ */
body.template-index .vintage-corner {
  display: inline-block !important;
}
.record {
  width: 110px;
  height: 110px;
  background: url('lixi.webp') center/contain no-repeat;
  border-radius: 12px;
  position: relative;
  animation: lixi-sway 2s ease-in-out infinite;
  transform-origin: 50% 100%;
  border: none;
  box-shadow: none;
  cursor: pointer;
}
.record::before {
  content: '';
  display: none;
}
.record::after {
  content: '';
  display: none;
}
@keyframes spin {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}
.vinyl-text {
  background: #f2e7d5;
  padding: 6px 12px;
  border: 2px solid #c98648;
  border-radius: 30px;
  margin-top: 10px;
  font-family: 'Segoe UI'
  , Arial
  , sans-serif;
  color: #ac2c2a;
  text-shadow: none;
  pointer-events: none;
  /* Không chặn click phía sau */
}
/* Arrow hint pointing to record button */
.arrow-hint {
  position: absolute;
  left: 120px;
  bottom: 60px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 10px;
  border-radius: 16px;
  font-family: 'Segoe UI'
  , Arial
  , sans-serif;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(255, 69, 0, 0.6);
  cursor: default;
  user-select: none;
  z-index: 3009; /* Cao hơn overlay Tết (3008) */
  pointer-events: none;
  /* Không chặn click phía sau */
}

/* Overlay */
.tet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeIn 0.5s ease;
}

/* Đảm bảo bộ lọc collection trên mobile nằm trên header và overlay Tết */
@media (max-width: 991px) {
  /* QUAN TRỌNG: Bộ lọc phải cao hơn TẤT CẢ - giống theme Christmas */
  body > .sidebar-colection,
  .sidebar-colection {
    z-index: 999999 !important; /* Giống theme Christmas - cao nhất */
    position: fixed !important;
    pointer-events: auto !important; /* Đảm bảo có thể tương tác */
    isolation: isolate; /* Tạo stacking context riêng */
    top: 0 !important;
    left: 0 !important;
    width: 320px !important;
    height: 100vh !important;
  }
  
  /* Overlay của bộ lọc collection (#site-overlay và .modal-backdrop) - phải dưới bộ lọc nhưng trên header và popup */
  #site-overlay,
  .filter-active .modal-backdrop {
    z-index: 999998 !important; /* Dưới .sidebar-colection (999999) nhưng cao hơn header và popup */
    pointer-events: auto !important; /* Cho phép click để đóng */
    position: fixed !important;
  }
  
  /* QUAN TRỌNG: Khi bộ lọc mở, header và topbar PHẢI nằm dưới bộ lọc */
  #wd-shoes-scofiled.filter-active #header,
  body.filter-active #header,
  body.template-collection.filter-active #header,
  body.position-cart-loop-right.filter-active #header,
  .filter-active #header,
  .filter-active .topbar-banner {
    z-index: 3000 !important; /* Thấp hơn bộ lọc và overlay */
    position: relative !important; /* Không tạo stacking context mới */
  }
  
  /* Đảm bảo popup và overlay không che bộ lọc */
  .filter-active .tet-overlay,
  .filter-active .tet-popup-image {
    z-index: 99999 !important; /* Thấp hơn bộ lọc (100001) */
  }
  
  /* Đảm bảo container và row không tạo stacking context che bộ lọc */
  .filter-active .container,
  .filter-active .row {
    position: static !important;
    z-index: auto !important;
  }
  
  /* Khi bộ lọc mở, đảm bảo overlay Tết và popup không che bộ lọc */
  #wd-shoes-scofiled.filter-active ~ .tet-overlay,
  body.filter-active .tet-overlay,
  body.template-collection.filter-active .tet-overlay,
  .filter-active .tet-overlay {
    z-index: 99999 !important; /* Thấp hơn bộ lọc (100001) */
    pointer-events: none !important; /* Không tương tác khi bộ lọc mở */
  }
  
  /* Đảm bảo popup image không che bộ lọc */
  .filter-active .tet-popup-image {
    z-index: 99999 !important; /* Thấp hơn bộ lọc (100001) */
    pointer-events: none !important;
  }
  
  /* Body element với class filter-active không được tạo stacking context che bộ lọc */
  body#wd-shoes-scofiled.filter-active,
  body.template-collection.filter-active,
  body.position-cart-loop-right.filter-active {
    overflow: hidden; /* Giữ overflow hidden nhưng không ảnh hưởng z-index */
  }
  
  /* Đảm bảo bộ lọc và tất cả phần tử con có thể tương tác */
  .sidebar-colection,
  .sidebar-colection *,
  .sidebar-colection .wrap-filter,
  .sidebar-colection .box_sidebar,
  .sidebar-colection .shop-sidebar {
    pointer-events: auto !important;
  }
  
  /* Đảm bảo wrap-filter và box_sidebar cũng có z-index cao */
  .sidebar-colection .wrap-filter {
    z-index: 100001 !important;
    pointer-events: auto !important;
  }
  
  .sidebar-colection .box_sidebar {
    z-index: 100001 !important;
    pointer-events: auto !important;
  }
  
  /* Nút đóng bộ lọc phải cao hơn bộ lọc */
  .sidebar-colection .close-filter {
    z-index: 100002 !important;
    pointer-events: auto !important;
  }
  
  /* Màng đen (#site-overlay và .modal-backdrop) cho phép click để đóng bộ lọc nhưng không che bộ lọc */
  #site-overlay,
  .filter-active .modal-backdrop {
    pointer-events: auto !important;
    z-index: 999998 !important; /* Thấp hơn bộ lọc (999999) */
    position: fixed !important;
  }
  
  /* Đảm bảo bộ lọc luôn có thể tương tác dù có màng đen - đặc biệt khi ở ngoài body */
  body > .sidebar-colection,
  #wd-shoes-scofiled.filter-active .sidebar-colection,
  body.filter-active .sidebar-colection,
  .template-collection.filter-active .sidebar-colection,
  .sidebar-colection {
    pointer-events: auto !important;
    z-index: 999999 !important; /* Giống theme Christmas */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 320px !important;
    height: 100vh !important;
  }
  
  /* Đảm bảo sidebar-colection không bị ảnh hưởng bởi parent container/row */
  .filter-active .container .row .sidebar-colection,
  .filter-active .collection-body .container .sidebar-colection,
  .filter-active .col-md-3.sidebar-colection,
  .filter-active .col-sm-12.sidebar-colection,
  body > .sidebar-colection {
    position: fixed !important;
    z-index: 999999 !important;
    top: 0 !important;
    left: 0 !important;
    width: 320px !important;
    height: 100vh !important;
  }
  
  /* Ngăn header và topbar che bộ lọc khi filter-active */
  .filter-active #header,
  .filter-active .topbar-banner {
    z-index: 3000 !important;
    position: relative !important;
  }
  
  /* Đảm bảo nút đóng có z-index cao */
  .sidebar-colection .close-filter {
    z-index: 100002 !important;
  }
}
.tet-overlay.fadeout {
  animation: fadeOut 0.5s ease forwards;
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.tet-popup-image {
  background: linear-gradient(135deg, #d0a862 0%, #f3d283 50%, #d0a862 100%);
  color: #fff;
  text-align: center;
  padding: 32px 22px;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
  max-width: 460px;
  width: 92%;
  position: relative;
  animation: popupIn 0.8s ease;
}
.tet-popup-image.popupout {
  animation: popupOut 0.8s ease forwards;
}
/* Responsive sizing */
@media (min-width: 768px) {
  .tet-popup-image {
    max-width: 700px;
  }
}
@media (max-width: 767px) {
  .tet-popup-image {
    max-width: 340px;
  }
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 10;
  background: #fff;
  color: #ff416c;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.close-btn:hover {
  background: #ffebee;
}
.close-countdown {
  position: absolute;
  top: 12px;
  right: 50px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.9);
  color: #ff416c;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Segoe UI'
  , Arial
  , sans-serif;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  display: none;
}

.popup-image {
  width: 100%;
  border-radius: 15px;
  margin: 20px 0;
  animation: gentlePulse 4s ease-in-out infinite;
  box-shadow: 0 0 30px rgba(255, 69, 0, 0.6);
  position: relative;
  z-index: 3;
}
.popup-title {
  font-size: 26px;
  color: #d0a862;
  font-family: 'Segoe UI'
  , Tahoma
  , Geneva
  , Verdana
  , sans-serif;
  text-shadow: 2px 2px 4px rgba(109, 18, 16, 0.5);
  position: relative;
  z-index: 3;
}
@media (max-width: 768px) {
  .popup-title {
    font-size: 22px;
    /* Đẩy tiêu đề xuống một chút để không đè lên countdown 8s trên mobile */
    margin-top: 26px;
  }
}
.popup-subtext {
  font-size: 16px;
  color: #ffefd5;
  margin-top: 10px;
  font-family: 'Poppins'
  , 'Segoe UI'
  , sans-serif;
  position: relative;
  z-index: 3;
}
@media (max-width: 768px) {
  .popup-subtext {
  font-size: 14px;
  }
}

@keyframes gentlePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes popupIn {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes popupOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.7);
    opacity: 0;
  }
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Mobile tweaks */
@media (max-width: 767px) {
  .record {
    width: 70px;
    height: 70px;
    border-width: 0;
    box-shadow: none;
    bottom: 35px;
    animation: lixi-sway 1.6s ease-in-out infinite;
  }
  .vinyl-text {
    padding: 3px 6px;
    border-width: 2px;
    border-radius: 22px;
    font-size: 11px;
    position: relative;
    bottom: 35px;
  }
  .arrow-hint {
    left: 70px;
    bottom: 90px;
    font-size: 10px;
    padding: 4px 8px;
  }
  /* Khi menu mobile mở, ẩn các nút popup để không che menu */
  body.overflow-hidden .vintage-corner {
    display: none !important;
  }
  /* Hoặc điều chỉnh z-index thấp hơn menu mobile nếu muốn giữ hiển thị */
  body.overflow-hidden .vintage-corner .record,
  body.overflow-hidden .vintage-corner .arrow-hint {
    z-index: 3009 !important; /* Cao hơn overlay Tết (3008) */
  }
}

@keyframes lixi-sway {
  0%   { transform: translateX(0px) rotate(0deg); }
  10%  { transform: translateX(6px) rotate(4deg); }
  20%  { transform: translateX(-6px) rotate(-4deg); }
  30%  { transform: translateX(6px) rotate(4deg); }
  40%  { transform: translateX(0px) rotate(0deg); }
  100% { transform: translateX(0px) rotate(0deg); }
}
/* Liquid Glass Effect cho các nút trong header */
.header-group-icon .group-icon-item {
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
  padding: 6px 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

/* Shine effect cho liquid glass */
.header-group-icon .group-icon-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}

/* Hiệu ứng hover */
.header-group-icon .group-icon-item:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(255,255,255,0.2);
}

.header-group-icon .group-icon-item:hover::before {
  left: 100%;
}

/* Icon bên trong */
.header-group-icon .box-icon svg,
.header-group-icon .box-icon img {
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.6));
}

/* Đảm bảo hiệu ứng liquid glass hiển thị rõ ràng trên mobile */
@media (max-width: 768px) {
  .header-group-icon .group-icon-item {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 
      0 8px 32px rgba(0,0,0,0.12),
      inset 0 1px 0 rgba(255,255,255,0.4);
  }
}
/* Giữ các nút header luôn nằm trên một hàng */
.header-group-icon {
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 6px;
  /* Tạo khoảng cách nhẹ giữa các nút */
}

/* Ngăn icon bị phình to do padding */
.header-group-icon .group-icon-item {
  flex-shrink: 0;
  /* Không co lại hoặc xuống dòng */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 6px 8px;
  /* Giữ gọn kích thước */
  box-sizing: border-box;
  /* Tránh cộng padding vào width */
}

/* (Removed) Lantern treo trên các nút header */

/* Tối ưu riêng cho màn hình nhỏ */
@media (max-width: 1400px) {
  .header-group-icon .group-icon-item {
    padding: 4px 6px;
    font-size: 12px;
  }
}
@media (max-width: 1160px) {
  .header-group-icon .group-icon-item {
    padding: 0;
    font-size: 10px;
  }
}
@media (max-width: 1000px) {
  .header-group-icon .group-icon-item {
    padding: 0;
    font-size: 7px;
  }
}

/* Điều chỉnh vị trí các nút floating khi nút "Thêm vào giỏ hàng" xuất hiện */
@media (max-width: 767px) {
  /* Khi nút "Thêm vào giỏ hàng" xuất hiện, đẩy các nút lên trên */
  .show-buy-mobile .fixed-action-btn {
    bottom: 225px !important;
    /* Đẩy nút SMS/Zalo lên trên */
    transition: bottom 0.3s ease;
  }

  .show-buy-mobile .back-to-top {
    bottom: 220px !important;
    /* Đẩy nút back to top lên trên */
    transition: bottom 0.3s ease;
  }

  /* Điều chỉnh vị trí Zalo chat widget */
  .show-buy-mobile .zalo-chat-widget {
    bottom: 170px !important;
    /* Đẩy Zalo widget lên trên */
    transition: bottom 0.3s ease;
  }

  /* Điều chỉnh vị trí Smax chat widget */
  .show-buy-mobile #smax-chat-widget {
    bottom: 100px !important;
    /* Đẩy Smax widget lên trên */
    transition: bottom 0.3s ease;
  }

  .show-buy-mobile #sm-chatbox-action {
    bottom: 120px !important;
    /* Đẩy Smax action button lên trên */
    transition: bottom 0.3s ease;
  }

  /* Điều chỉnh vị trí trang trí Tết trên Zalo */
  .show-buy-mobile .tet-decoration-on-zalo {
    bottom: 185px !important;
    /* Đẩy trang trí lên theo Zalo */
    transition: bottom 0.3s ease;
  }

}

/* Ẩn text của nút giỏ hàng trên mobile, chỉ hiển thị icon */
@media (max-width: 768px) {
  .header-cart .box-text {
    display: none !important;
  }

  /* Đảm bảo nút giỏ hàng vẫn có kích thước phù hợp khi chỉ có icon */
  .header-cart .group-icon-item {
    min-width: 40px;
    padding: 8px;
  }
}

/* Ẩn floating buttons khi success add to cart modal hiện lên - Chỉ dùng CSS */
@media (max-width: 767px) {
  /* Ẩn các nút floating khi body có class active-success */
  body.active-success .zalo-chat-widget,
  body.active-success #smax-chat-widget,
  body.active-success #sm-chatbox-action,
  body.active-success .back-to-top,
  body.active-success .tet-decoration-on-zalo,
  body.active-success .tet-decoration-horse {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Đảm bảo modal có z-index cao hơn */
  body.active-success .modal-backdrop.add-cart-mb {
    z-index: 3010 !important; /* Cao hơn overlay Tết (3008) */
  }

  body.active-success #success-add-cart-mobile {
    z-index: 3011 !important; /* Cao hơn modal backdrop (3010) */
  }

  /* Ẩn floating buttons khi modal backdrop có các class này */
  .modal-backdrop.fade.js-backdrop.open-quickview.in ~ .zalo-chat-widget,
  .modal-backdrop.fade.js-backdrop.open-quickview.in ~ #smax-chat-widget,
  .modal-backdrop.fade.js-backdrop.open-quickview.in ~ #sm-chatbox-action,
  .modal-backdrop.fade.js-backdrop.open-quickview.in ~ .back-to-top,
  .modal-backdrop.fade.js-backdrop.open-quickview.in ~ .tet-decoration-on-zalo,
  .modal-backdrop.fade.js-backdrop.open-quickview.in ~ .tet-decoration-horse {
    display: none !important;
  }

  /* Hoặc khi modal backdrop hiện lên */
  body:has(.modal-backdrop.fade.js-backdrop.open-quickview.in) .zalo-chat-widget,
  body:has(.modal-backdrop.fade.js-backdrop.open-quickview.in) #smax-chat-widget,
  body:has(.modal-backdrop.fade.js-backdrop.open-quickview.in) #sm-chatbox-action,
  body:has(.modal-backdrop.fade.js-backdrop.open-quickview.in) .back-to-top,
  body:has(.modal-backdrop.fade.js-backdrop.open-quickview.in) .tet-decoration-on-zalo,
  body:has(.modal-backdrop.fade.js-backdrop.open-quickview.in) .tet-decoration-horse {
    display: none !important;
  }

  /* Ẩn floating buttons khi success add to cart modal backdrop hiện lên */
  body:has(.modal-backdrop.add-cart-mb.in) .zalo-chat-widget,
  body:has(.modal-backdrop.add-cart-mb.in) #smax-chat-widget,
  body:has(.modal-backdrop.add-cart-mb.in) #sm-chatbox-action,
  body:has(.modal-backdrop.add-cart-mb.in) .back-to-top,
  body:has(.modal-backdrop.add-cart-mb.in) .tet-decoration-on-zalo,
  body:has(.modal-backdrop.add-cart-mb.in) .tet-decoration-horse {
    display: none !important;
  }

  /* Backup selector cho success modal */
  .modal-backdrop.add-cart-mb.in ~ .zalo-chat-widget,
  .modal-backdrop.add-cart-mb.in ~ #smax-chat-widget,
  .modal-backdrop.add-cart-mb.in ~ #sm-chatbox-action,
  .modal-backdrop.add-cart-mb.in ~ .back-to-top,
  .modal-backdrop.add-cart-mb.in ~ .tet-decoration-on-zalo,
  .modal-backdrop.add-cart-mb.in ~ .tet-decoration-horse {
    display: none !important;
  }

  /* Đảm bảo chức năng đẩy nút lên trên vẫn hoạt động khi KHÔNG có active-success */
  body.show-buy-mobile:not(.active-success) .zalo-chat-widget {
    bottom: 170px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: bottom 0.3s ease;
  }

  body.show-buy-mobile:not(.active-success) #sm-chatbox-action {
    bottom: 120px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: bottom 0.3s ease;
    /* Fix lệch logo và text khi bị đẩy lên */
    transform: scale(0.85) !important;
    transform-origin: bottom right !important;
    position: fixed !important;
    right: 10px !important;
    /* Đảm bảo căn chỉnh đúng */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.show-buy-mobile:not(.active-success) .back-to-top {
    bottom: 220px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: bottom 0.3s ease;
  }

  body.show-buy-mobile:not(.active-success) #smax-chat-widget {
    bottom: 80px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: bottom 0.3s ease;
    /* Fix lệch logo và text khi bị đẩy lên */
    transform: scale(0.80) !important;
    transform-origin: bottom right !important;
    position: fixed !important;
    right: 10px !important;
    /* Đảm bảo căn chỉnh đúng */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.show-buy-mobile:not(.active-success) .tet-decoration-on-zalo {
    bottom: 185px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: bottom 0.3s ease;
  }

  body.show-buy-mobile:not(.active-success) .tet-decoration-horse {
    bottom: 120px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: bottom 0.3s ease;
  }

  /* Backup: Reset transform nếu vẫn bị lệch */
  body.show-buy-mobile:not(.active-success) #sm-chatbox-action * {
    transform: none !important;
    position: relative !important;
  }

  body.show-buy-mobile:not(.active-success) #smax-chat-widget * {
    transform: none !important;
    position: relative !important;
  }
}

.tet-falling-flower {
  position: fixed;
  pointer-events: none;
  z-index: 10;
  /* Animation sẽ được tạo động bởi JavaScript */
  will-change: transform, opacity;
  display: block;
  line-height: 1;
  user-select: none;
  top: -100px;
  /* Tối ưu hiệu năng cho animation mượt */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Footer side flowers */
.tet-footer-flower {
  position: absolute;
  top: auto;
  bottom: 0;
  width: 160px;
  pointer-events: none;
  z-index: 0;
}
.tet-footer-flower img {
  width: auto;
  height: 160px;
  display: block;
  object-fit: contain;
}
.tet-footer-flower-left {
  left: 0;
}
.tet-footer-flower-right {
  right: 0;
  transform: scaleX(-1);
}
@media (max-width: 1024px) {
  .tet-footer-flower {
    width: 130px;
  }
  .tet-footer-flower img { height: 130px; }
}
@media (max-width: 768px) {
  .tet-footer-flower {
    display: none;
  }
}

.tet-falling-flower img {
  transform-origin: 50% 50%;
  display: block;
}

@keyframes lantern-float {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0);
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100vh) translateX(20px);
  }
}

/* Popup Tết: nền đỏ, khung vàng, decor mây + coin không đè text */
.tet-popup-image {
  position: relative;
  background: #ac2c2a;
  padding: 8px;
  border-radius: 18px;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.45);
  overflow: visible;
}

.tet-popup-inner {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  border: 3px solid #ffd75a;
  padding: 16px 18px 14px;
  background: rgba(0, 0, 0, 0.04);
}

/* Hiệu ứng cho text trong popup (tiêu đề, mô tả, countdown) */
.tet-popup-inner .popup-title,
.tet-popup-inner .popup-subtext,
.tet-popup-inner #autoCloseCountdown {
  max-height: 200px;
  overflow: hidden;
  transition:
    max-height 0.25s ease,
    opacity 0.25s ease,
    transform 0.25s ease,
    margin 0.25s ease,
    padding 0.25s ease;
  transform-origin: top center;
}

/* Khi mở form ưu đãi: chạy hiệu ứng thu nhỏ + mờ rồi thu gọn chiều cao
   để text gần như biến mất khỏi layout sau animation */
.tet-popup-inner.offer-mode .popup-title,
.tet-popup-inner.offer-mode .popup-subtext,
.tet-popup-inner.offer-mode #autoCloseCountdown {
  opacity: 0;
  transform: scale(0.9) translateY(-4px);
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Khi chưa mở form ưu đãi: giảm padding đáy để bớt trống dưới nút */
.tet-popup-inner:not(.offer-mode) {
  padding-bottom: 10px;
}

/* Form để lại thông tin nhận ưu đãi trong popup */
.tet-offer-btn {
  margin-top: 14px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #ffd75a 0%, #f4b731 50%, #ffd75a 100%);
  color: #ac2c2a;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tet-offer-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.tet-offer-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.tet-offer-form {
  /* Trạng thái ẩn: không chiếm chiều cao, không đẩy nút lên */
  margin-top: 0;
  padding: 0;
  border-radius: 12px;
  background: transparent;
  border: 0;
  /* Ẩn bằng animation thay vì display để có hiệu ứng cuộn mượt */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(12px);
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.tet-offer-form.is-visible {
  margin-top: 14px;
  padding: 12px 12px 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 215, 122, 0.5);
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

.tet-offer-title {
  font-size: 15px;
  font-weight: 700;
  color: #ffd75a;
  text-align: left;
  margin-bottom: 10px;
}

.tet-offer-form-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tet-offer-field {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.tet-offer-field label {
  font-size: 13px;
  font-weight: 600;
  color: #ffe9a8;
  margin-bottom: 4px;
}

.tet-offer-field input,
.tet-offer-field textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 7px 9px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  outline: none;
}

.tet-offer-field input::placeholder,
.tet-offer-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.tet-offer-field input:focus,
.tet-offer-field textarea:focus {
  border-color: #ffd75a;
  box-shadow: 0 0 0 1px rgba(255, 215, 90, 0.7);
}

.tet-offer-submit {
  margin-top: 4px;
  width: 100%;
  border-radius: 999px;
  border: none;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(135deg, #f97316 0%, #dc2626 50%, #b91c1c 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tet-offer-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.tet-offer-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  .tet-offer-btn {
    font-size: 14px;
    padding: 9px 12px;
  }

  .tet-offer-title {
    font-size: 14px;
  }

  .tet-offer-field input,
  .tet-offer-field textarea {
    font-size: 12px;
    padding: 6px 8px;
  }

  .tet-offer-submit {
    font-size: 13px;
    padding: 8px 10px;
  }

  /* Thu nhỏ nút close trên mobile để không che ảnh */
  .close-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    font-size: 18px;
    top: 8px;
    right: 10px;
  }
}

.tet-popup-decor,
.tet-popup-coin {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.tet-popup-decor img,
.tet-popup-coin img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Mây dưới: nằm dưới, tràn ra ngoài khung vàng */
.tet-popup-decor-bottom {
  left: 20%;
  bottom: -30px;
  transform: translateX(-20%);
}

.tet-popup-decor-bottom img {
  width: 50%;
  max-width: 200px;
}

/* Mây trên: nằm trên, có thể tràn nhẹ ra ngoài */
.tet-popup-decor-top {
  right: 10%;
  top: -30px;
  transform: translateX(20%);
}

.tet-popup-decor-top img {
  width: 55%;
  max-width: 220px;
}

/* Coin sát viền vàng */
.tet-popup-coin-1 {
  top: -5px;
  left: -7px;
}

.tet-popup-coin-2 {
  top: 0px;
  right: 120px;
}

.tet-popup-coin-3 {
  bottom: -18px;
  left: 4%;
}

.tet-popup-coin-4 {
  bottom: -4px;
  right: 4%;
}

.tet-popup-coin img {
  width: 42px;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.45));
}

.popup-title {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.popup-subtext {
  color: #fff;
}

@media (max-width: 767px) {
  .tet-popup-image {
    padding: 6px;
    border-radius: 14px;
  }

  .tet-popup-inner {
    padding: 12px 12px 14px;
    border-radius: 12px;
  }

  /* Điều chỉnh vị trí và kích thước cloud dưới trên mobile */
  .tet-popup-decor-bottom {
    left: 10%;
    bottom: -15px;
    transform: translateX(-15%);
  }

  .tet-popup-decor-bottom img {
    width: 35%;
    max-width: 90px;
  }

  /* Điều chỉnh vị trí và kích thước cloud trên trên mobile */
  .tet-popup-decor-top {
    right: 5%;
    top: -15px;
    transform: translateX(15%);
  }

  .tet-popup-decor-top img {
    width: 40%;
    max-width: 110px;
  }

  /* Điều chỉnh vị trí và kích thước coin trên mobile */
  .tet-popup-coin-1 {
    top: -2px;
    left: -4px;
  }

  .tet-popup-coin-2 {
    top: 2px;
    right: 60px;
  }

  .tet-popup-coin-3 {
    bottom: -10px;
    left: 2%;
  }

  .tet-popup-coin-4 {
    bottom: -2px;
    right: 2%;
  }

  .tet-popup-coin img {
    width: 22px;
  }
}

/* Product Card Styling - Tết Theme */
.product-block.item {
  background-color: #f2e7d5;
  border: 2px solid #c98648;
  border-radius: 8px;
  padding: 8px; /* giảm nhẹ để thẻ thấp hơn */
}

.product-block .product-detail {
  background-color: #f2e7d5;
  padding: 0 6px;
}

/* Trạng thái sản phẩm nằm cùng hàng với số sao đánh giá - canh lề trái */
.product-block .product-detail .d-flex.d-flex-center {
  gap: 8px;
  flex-wrap: nowrap !important; /* Đảm bảo không wrap xuống dòng */
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 4px;
  overflow: hidden; /* Xử lý overflow */
}

.product-block .product-detail .d-flex.d-flex-center .prod_label {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap; /* Không xuống dòng */
}

/* Đảm bảo sao đánh giá không bị wrap */
.product-block .product-detail .d-flex.d-flex-center .haravan-product-reviews-badge {
  flex-shrink: 0;
  white-space: nowrap;
}

.product-block .box-pro-prices {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.product-block .pro-price {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('culture_price.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 44px;
  padding: 6px 16px;
  width: 100%;
  margin: 0;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Giảm chiều cao thẻ sản phẩm */

.product-block .pro-price span:first-child {
  color: #ac2c2a;
  font-size: 15px; /* Giảm thêm để không bị che bởi 2 chấm tròn */
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
}

.product-block .pro-price del.compare-price {
  color: #c98648;
  font-size: 11px; /* Giảm thêm để không bị che bởi 2 chấm tròn */
  margin-left: 0;
  text-decoration: line-through;
  white-space: nowrap;
}

/* Đảm bảo giá luôn chiếm toàn bộ hàng đầu tiên */
.product-block .box-pro-prices .pro-price {
  width: 100%;
  flex-basis: 100%;
  order: 1;
}

/* Các trạng thái nằm ngang và canh giữa ở hàng thứ 2 */
.product-block .box-pro-prices .prod_label {
  text-align: center;
  margin: 0 3px;
  order: 2;
  flex-basis: auto;
}

/* Khi có nhiều trạng thái, chúng sẽ tự động nằm ngang nhờ inline-block */
.product-block .box-pro-prices .prod_label + .prod_label {
  margin-left: 5px;
}

/* Ảnh sản phẩm: giảm tỷ lệ khung để thẻ thấp hơn */
.product-block .product-img {
  padding: 4px;
}
.product-block .product-img > a:before {
  padding-bottom: 88%;
}

/* Giảm font chữ của thẻ sản phẩm trên mobile */
@media (max-width: 767px) {
  /* Tên sản phẩm */
  .product-block .product-detail .pro-name,
  .product-block .product-detail .pro-name a {
    font-size: 13px !important;
    line-height: 1.3;
  }

  /* Giá sản phẩm - giảm nhiều để nằm trong khung trên mobile */
  .product-block .pro-price span:first-child {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* Giá so sánh - giảm nhiều để nằm trong khung trên mobile */
  .product-block .pro-price del.compare-price {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  /* Trạng thái sản phẩm - vừa đủ để đọc và nằm cùng hàng với sao */
  .product-block .prod_label {
    font-size: 9px !important;
    padding: 2px 5px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    flex-shrink: 0;
  }

  /* Đánh giá sao - vừa đủ để đọc và nằm cùng hàng */
  .product-block .haravan-product-reviews-badge {
    font-size: 10px !important;
    transform: scale(0.9);
    transform-origin: left center;
    flex-shrink: 0;
  }

  /* Container chứa sao và trạng thái - đảm bảo không wrap */
  .product-block .product-detail .d-flex.d-flex-center {
    flex-wrap: nowrap !important;
    gap: 5px !important;
    overflow: hidden;
  }

  /* Menu submenu mobile: bọc text với hiệu ứng liquid glass */
  .list-submenu--mobile li a span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.15),
      0 2px 4px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(
      135deg,
      rgba(172, 44, 42, 0.25) 0%,
      rgba(172, 44, 42, 0.15) 100%
    );
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
  }

  /* Hiệu ứng ánh sáng phản chiếu cho liquid glass */
  .list-submenu--mobile li a span::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    transition: left 0.5s ease;
  }

  .list-submenu--mobile li a:hover span::before,
  .list-submenu--mobile li a.active span::before {
    left: 100%;
  }
}