/* =========================================================================
   lifood-extra.css — CHỈ bổ sung hành vi đóng/mở panel (thay cho state JS của
   prototype SPA) và khôi phục hiệu ứng :hover (vốn là thuộc tính style-hover
   trong bản thiết kế). KHÔNG thay đổi bất kỳ giá trị màu/cỡ/spacing nào của
   thiết kế gốc. Nạp SAU lifood.css để thắng các quy tắc display ở @media.
   ========================================================================= */

/* Mobile menu: ẩn mặc định, hiện khi có .is-open (ghi đè cả rule display:block
   !important ở @media 820px của thiết kế nhờ nạp sau + cùng độ đặc hiệu). */
.lf-mobmenu { display: none !important; }
.lf-mobmenu.is-open { display: block !important; }

/* Mega-menu danh mục (nút "Danh mục sản phẩm") */
.lf-megamenu { display: none; }
.lf-megamenu.is-open { display: block; }

/* Bảng nhóm Zalo nổi */
.lf-zalo-panel { display: none; }
.lf-zalo-panel.is-open { display: block; }

/* Hover icon mạng xã hội ở footer (thay cho style-hover của prototype) */
.lf-social { transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.lf-social:hover { transform: translateY(-3px); color: #fff; }
.lf-social.lf-fb:hover { background: #1877F2; border-color: #1877F2; }
.lf-social.lf-ig:hover { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); border-color: transparent; }
.lf-social.lf-tt:hover { background: #010101; border-color: #25F4EE; }
.lf-social.lf-yt:hover { background: #FF0000; border-color: #FF0000; }

/* Hover thẻ sản phẩm (trong prototype do state React điều khiển) — tái tạo bằng
   :hover với cùng "ngôn ngữ" hover của thiết kế (catTiles: translateY -6, scale 1.06). */
.lf-pcard:hover { transform: translateY(-6px); box-shadow: 0 18px 32px -16px rgba(10, 48, 73, .30); border-color: #CFE0E6; }
.lf-pcard:hover img { transform: scale(1.06) !important; }
.lf-pcard:hover .lf-pcard-add { opacity: 1 !important; transform: translateY(0) !important; }

/* Hover tile danh mục nổi bật (accent theo từng danh mục qua biến --accent). */
.lf-cattile:hover { transform: translateY(-6px); box-shadow: 0 18px 32px -16px rgba(10, 48, 73, .30); border-color: var(--accent) !important; }
.lf-cattile:hover .lf-cattile-icon { transform: scale(1.06); }

/* Tab lọc (Mực / Tôm-Cá…): trạng thái active — cùng giá trị chip của thiết kế. */
.lf-tab.is-active { border-color: #0E9CA8 !important; background: #0E9CA8 !important; color: #fff !important; }

/* Tile phương thức thanh toán (radio ẩn; active theo :has(:checked)). */
.lf-pay-tile { display: flex; align-items: center; gap: 12px; border: 1.5px solid #DDE7EA; background: #fff; border-radius: 12px; padding: 13px 16px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: #3B525E; }
.lf-pay-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
.lf-pay-tile:has(input:checked) { border-color: #0E9CA8; background: #F2F8F9; color: #0A7A84; }
.lf-pay-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C4D5DB; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.lf-pay-tile:has(input:checked) .lf-pay-dot { border-color: #0E9CA8; }
.lf-pay-dot-inner { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.lf-pay-tile:has(input:checked) .lf-pay-dot-inner { background: #0E9CA8; }

/* Nút chọn dạng radio (form khách sỉ: loại hình / nhu cầu). */
.lf-choice { border: 1.5px solid #DDE7EA; background: #fff; color: #5D7481; font-weight: 600; font-size: 13px; padding: 9px 15px; border-radius: 10px; cursor: pointer; display: inline-flex; }
.lf-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.lf-choice:has(input:checked) { border-color: #0E9CA8; background: #EAF7F8; color: #0A7A84; }

/* Nội dung bài viết tin tức (content HTML) — khớp style thiết kế news detail. */
.lf-article p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.8; color: #3B525E; }
.lf-article h2 { margin: 30px 0 12px; font-size: 21px; font-weight: 800; color: #0A3049; line-height: 1.3; }
.lf-article blockquote { margin: 24px 0; padding: 18px 24px; background: #EAF7F8; border-left: 4px solid #0E9CA8; border-radius: 0 12px 12px 0; font-size: 16px; line-height: 1.65; color: #0A5560; font-style: italic; font-weight: 500; }

/* Accordion FAQ (dùng <details>) — ẩn marker mặc định, xoay chevron khi mở. */
.lf-faq-item summary::-webkit-details-marker { display: none; }
.lf-faq-item summary::marker { content: ''; }
.lf-faq-item[open] .lf-faq-chev { transform: rotate(180deg); }

/* Menu tài khoản: luôn hiện (kể cả mobile) để chuyển mục — dạng list. */
.lf-accmenu { display: block !important; }

/* Con trỏ cho các link điều hướng dạng nút. */
.lf-navlink { cursor: pointer; }

/* ============================================================
   MÀN HÌNH RẤT NHỎ (≤400px, vd Galaxy S9 360px)
   Thiết kế cho header wrap: hàng 1 = logo + actions, hàng 2 = ô tìm kiếm.
   Ở 360px, hamburger(40)+logo(46)+actions(256)+gap = 376 > 360 nên actions
   bị rớt xuống thành 3 hàng. Thu gọn vừa đủ để giữ đúng bố cục 2 hàng.
   ============================================================ */
@media (max-width: 400px) {
  .lf-header-inner { gap: 8px !important; padding: 10px !important; }
  .lf-actions { gap: 5px !important; }
  .lf-hamb { width: 34px !important; height: 34px !important; }
  /* bỏ icon tròn 📞, GIỮ số hotline (phần khách cần) */
  .lf-hotline > div:first-child { display: none !important; }
  .lf-toggle { padding: 2px !important; }
  .lf-toggle a { padding: 4px 7px !important; }
}

/* ------------------------------------------------------------
   HÀNG TAB LỌC (Mực ống / Mực trứng… · Tôm / Cá / Ngao sò ốc…)
   Màn nhỏ làm chip cuối rớt xuống hàng 2. Cho cuộn ngang một hàng
   thay vì xuống dòng — giống hàng lọc danh mục ở trang cửa hàng.
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .lf-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* IE/Edge cũ */
    -webkit-overflow-scrolling: touch;
  }
  .lf-tabs::-webkit-scrollbar { display: none; }
  .lf-tabs > * { flex: 0 0 auto !important; }
}

/* Máy rất nhỏ (≤345px, vd iPhone SE đời đầu): thu gọn thêm chút để header vẫn 1 hàng. */
@media (max-width: 345px) {
  .lf-header-inner { gap: 6px !important; padding: 8px !important; }
  .lf-actions { gap: 4px !important; }
  .lf-toggle a { padding: 4px 5px !important; font-size: 9px !important; }
  .lf-hotline > div:last-child > div:last-child { font-size: 10.5px !important; }
}

/* ------------------------------------------------------------
   CHI TIẾT SP — hàng "số lượng + Thêm vào giỏ + Mua ngay"
   Thiết kế yêu cầu GIỮ 1 HÀNG trên mobile. Ở 360px nút chỉ rộng 105px
   mà chữ cần 102px (dư 3px) -> máy nào render font rộng hơn là chữ tràn
   ra ngoài viền nút. Thu ô số lượng + giảm cỡ chữ để có khoảng dư an toàn.
   ------------------------------------------------------------ */
@media (max-width: 400px) {
  /* Thiết kế dùng selector button[style*="..."] (0,2,1) nên phải nâng độ ưu tiên
     bằng cách lặp thuộc tính: button[data-qty][data-qty] = (0,3,1). */
  .lf-pd button[data-qty][data-qty] { width: 24px !important; font-size: 16px !important; }
  .lf-pd #pd-qty#pd-qty { width: 26px !important; font-size: 13px !important; }
  .lf-pd button[data-buy][data-buy] { font-size: 11px !important; padding: 0 4px !important; min-width: 0 !important; white-space: nowrap !important; }
  /* "Thêm vào giỏ" dài hơn "Mua ngay" -> chia chỗ theo tỉ lệ thay vì 50/50,
     để chữ luôn dư chỗ kể cả khi font dự phòng rộng hơn. */
  .lf-pd button[data-buy="cart"][data-buy] { flex: 1.45 1 0 !important; }
  .lf-pd button[data-buy="now"][data-buy]  { flex: 1 1 0 !important; }
}

/* Nội dung mô tả sản phẩm lấy từ lifood.vn: ảnh không tràn, có khoảng thở. */
.lf-pd-desc img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 12px 0; }
.lf-pd-desc h2, .lf-pd-desc h3, .lf-pd-desc h4 { font-size: 16px; font-weight: 800; color: #0A3049; margin: 18px 0 8px; }
.lf-pd-desc ul, .lf-pd-desc ol { margin: 8px 0 8px 18px; padding: 0; }
.lf-pd-desc li { margin: 4px 0; }
.lf-pd-desc p { margin: 0 0 10px; }
.lf-pd-desc table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.lf-pd-desc th, .lf-pd-desc td { border: 1px solid #E2EAEE; padding: 8px 10px; text-align: left; }

/* ------------------------------------------------------------
   DANH MỤC NỔI BẬT — màn nhỏ
   Giữ đúng bố cục thiết kế: 6 ô vừa 1 hàng, KHÔNG cuộn ngang.
   Chỉ thu chữ và giới hạn tên tối đa 2 dòng (trước bị 3 dòng).
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .lf-cat-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 9px !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 380px) {
  .lf-cat-name { font-size: 8px !important; }
}

/* ------------------------------------------------------------
   THẺ SẢN PHẨM — giá và giá gạch phải NẰM CÙNG 1 DÒNG
   Khung thẻ ở 360px chỉ rộng ~129px; giá 18px + giá gạch 13px vượt quá
   nên bị rớt xuống dòng 2, trông lệch. Thu cỡ chữ + cấm xuống dòng.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   THẺ SẢN PHẨM — GIÁ + GIÁ GẠCH LUÔN 1 DÒNG (mọi khổ)

   Thẻ "Sản phẩm liên quan" ở desktop xếp 6 cột, mỗi thẻ chỉ ~187px. Giá
   175.000đ + giá gạch 235.000đ bị flex-wrap:wrap cho xuống dòng -> hàng giá
   cao gấp đôi -> thẻ đó cao hơn 24px, cả hàng khập khiễng.

   Cấm xuống dòng ở MỌI khổ. Giá bán giữ nguyên (ưu tiên), giá gạch co lại +
   ... nếu gặp sản phẩm giá tiền triệu quá dài. Nhãn GIÁ SỈ nằm ở dòng riêng
   trong markup nên không bị ảnh hưởng.
   ------------------------------------------------------------ */
.lf-pcard [style*="align-items:baseline"] { flex-wrap: nowrap !important; min-width: 0; gap: 6px !important; }
.lf-pcard [style*="align-items:baseline"] > span:first-child { flex: 0 0 auto; white-space: nowrap; }
.lf-pcard span[style*="line-through"] { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 480px) {
  /* Cho xuống dòng, NHƯNG chỉ nhãn "GIÁ SỈ" được rớt xuống (xem luật flex-basis
     bên dưới). Trước đây dùng nowrap + overflow:hidden nên khi có nhãn thì hàng
     cần 162px mà chỉ có 148px -> nhãn bị CẮT CỤT mất 15px chứ không phải xuống
     dòng. Giá + giá gạch vẫn nằm cùng dòng vì đủ chỗ (~121px/148px). */
  .lf-pcard [style*="align-items:baseline"] {
    flex-wrap: nowrap !important;
    gap: 5px !important;
    min-width: 0;
  }
  /* giá và giá gạch: không co, không xuống dòng giữa chừng */
  .lf-pcard [style*="align-items:baseline"] > span:not(.lf-si-badge) { flex: 0 0 auto; }
  /* Nhãn GIÁ SỈ nay nằm ở dòng riêng trong markup, không còn trong hàng giá. */
  .lf-pcard [style*="align-items:baseline"] > span:first-child { font-size: 13.5px !important; }
  .lf-pcard span[style*="line-through"][style*="line-through"] { font-size: 9.5px !important; white-space: nowrap; }
  /* nới chỗ: giảm padding ngang phần thông tin trong thẻ để hàng giá đủ rộng */
  .lf-pcard > div[style*="padding:12px 14px"] { padding-left: 9px !important; padding-right: 9px !important; }
}

/* ------------------------------------------------------------
   ẢNH TRONG NỘI DUNG (mô tả sản phẩm + bài viết tin tức)

   Ảnh kéo từ WordPress có bề rộng rất chênh nhau: đo 934 ảnh thì
   225px -> 2560px. Để nguyên thì mỗi ảnh hiện một cỡ, bài viết
   trông "cái bé cái to". Ảnh có width cứng (vd width="1657") còn
   ÉP CẢ CỘT GIÃN RA làm tràn ngang trang.

   Cho tất cả về CÙNG một bề rộng 560px, căn giữa:
     >=560px  (75% số ảnh) -> thu nhỏ lại, vẫn nét
     450-559  (13%)        -> phóng tối đa 1,24 lần, không nhận ra
     300-449  (11%)        -> phóng 1,25-1,87 lần, hơi mềm
     <300px   (2%, 20 ảnh) -> mềm rõ hơn, nhưng bản gốc trên
                              lifood.vn cũng chỉ có bấy nhiêu
   ------------------------------------------------------------ */
.lf-article img,
.lf-pd-desc img {
  display: block;
  width: 100% !important;
  max-width: 560px !important;
  height: auto !important;
  margin: 16px auto;
  border-radius: 10px;
}
.lf-article table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.lf-article pre, .lf-article code { white-space: pre-wrap; word-break: break-word; }
.lf-article { min-width: 0; overflow-wrap: anywhere; }

/* Cột lưới "1fr + cột cố định": 1fr KHÔNG co xuống dưới min-content, nên nội dung
   rộng (ảnh, bảng, chuỗi dài) sẽ đẩy cả trang. minmax(0,1fr) cho phép co lại.
   Đặt bằng CSS thay vì sửa inline style, để không phá các selector [style*=...]
   mà bản thiết kế đang dùng.

   CHỈ áp dụng từ 821px trở lên. Dưới mốc đó bản thiết kế (lifood.css) đã thu về
   1 cột; nếu để luật này chạy ở mọi khổ, nó thắng về độ ưu tiên và ép giữ 2 cột
   trên điện thoại -> cột cố định 380px tràn ra ngoài màn hình. */
@media (min-width: 821px) {
  .lf-ndetail [style*="1fr 320px"] { grid-template-columns: minmax(0, 1fr) 320px !important; }
  .lf-rdetail [style*="300px 1fr"] { grid-template-columns: 300px minmax(0, 1fr) !important; }
  .lf-cart-grid[style*="1fr 380px"] { grid-template-columns: minmax(0, 1fr) 380px !important; }
}

/* ------------------------------------------------------------
   THANH PHÂN TRANG TRÊN MÀN HÌNH NHỎ
   Để flex tự xuống dòng thì 3 khối (chọn số dòng / mũi tên / dòng đếm) rơi
   thành 3 hàng rời rạc, chiếm nhiều chỗ dọc và trông lộn xộn.
   Xếp lại bằng grid thành 2 hàng gọn:
       hàng 1:  ⏮ ‹ [1] › ⏭            (thứ hay bấm nhất, để giữa)
       hàng 2:  Hiển thị [N] ...... 1 - 6 trong 22
   Thứ tự thẻ con trong HTML là: form(chọn số dòng) → div(mũi tên) → div(đếm).
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .lf-pagebar {
    display: grid !important;
    grid-template-columns: auto auto;
    grid-template-areas: "dieuhuong dieuhuong" "chon dem";
    align-items: center;
    gap: 12px 8px !important;
    font-size: 12px !important;
    padding: 12px 2px !important;
  }
  .lf-pagebar > form { grid-area: chon; justify-self: start; }
  .lf-pagebar > div:nth-of-type(1) { grid-area: dieuhuong; justify-self: center; }
  .lf-pagebar > div:nth-of-type(2) { grid-area: dem; justify-self: end; text-align: right; }
  /* thu nút & chữ cho vừa màn nhỏ */
  .lf-pagebar select { font-size: 12px !important; padding: 5px 8px !important; }
  .lf-pagebar a[title] { width: 30px !important; height: 30px !important; }
  .lf-pagebar input[type="number"] { width: 46px !important; height: 30px !important; }
}

/* Máy rất hẹp (≤360px): bỏ chữ "Hiển thị", ô chọn tự nói lên điều đó. */
@media (max-width: 360px) {
  .lf-pagebar label { display: none !important; }
  .lf-pagebar { gap: 10px 6px !important; font-size: 11.5px !important; }
}

/* Nút Zalo nổi: đưa xuống sát đáy màn hình.
   Bản thiết kế ghim bottom:108px ở khổ <=600px (lifood.css / lifood-compat.css),
   nên inline style bottom:20px không thắng được. Lặp lại thuộc tính để đủ độ ưu
   tiên đè cả hai luật đó (chúng đều dùng !important). */
@media (max-width: 600px) {
  div[style*="z-index:96"][style*="z-index:96"] { bottom: 16px !important; }
}

/* ------------------------------------------------------------
   NÚT LÊN ĐẦU TRANG (partials/back-to-top)
   Góc TRÁI dưới — góc phải đã có nút Zalo + toast.
   Ẩn hẳn khỏi luồng bấm khi chưa hiện (pointer-events:none) để không
   chắn mất thứ nằm dưới nó.
   ------------------------------------------------------------ */
#lf-totop {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 95;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* Xanh giống nút Nhóm Zalo (#0068FF) để dễ nhận ra đây là nút nổi, bấm được. */
  border: none;
  background: #0068FF;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 26px -10px rgba(0, 104, 255, .75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
#lf-totop.is-on { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
#lf-totop:hover { background: #0055D4; }

@media (max-width: 600px) {
  /* thẳng hàng với nút Zalo bên phải (left:12px / bottom:16px) */
  #lf-totop { left: 12px; bottom: 16px; width: 40px; height: 40px; font-size: 18px; }
}

/* Giảm chuyển động: bỏ hiệu ứng trượt, NHƯNG vẫn giữ transform vì nó gánh việc
   nhấc nút khỏi chân trang — đặt transform:none ở đây là nút lại che chữ. */
@media (prefers-reduced-motion: reduce) {
  #lf-totop { transition: opacity .2s ease, visibility .2s; }
}

/* ------------------------------------------------------------
   HÀNG SẢN PHẨM LUÔN ĐẦY — không để ô trống ở hàng cuối

   Lưới gốc dùng auto-fill: số cột tự đổi từ 1 đến 6 tuỳ bề rộng màn hình.
   Vì vậy KHÔNG con số "mỗi trang" cố định nào chia hết cho mọi trường hợp
   (vd 16 sản phẩm / 5 cột = 3 hàng đầy + 1 ô lẻ; 6 / 5 = 1 ô lẻ).

   Cách xử lý: ghim số cột vào đúng những giá trị CHIA HẾT số sản phẩm mỗi trang.
   Không ẩn sản phẩm nào, không cần JavaScript.

   Cửa hàng — mỗi trang 16/32/64/100, ước chung: 1, 2, 4  -> dùng 4 / 2 / 1 cột
   Liên quan — mỗi trang 6/12/24,       ước chung: 1, 2, 3, 6 -> dùng 6 / 3 / 1 cột
   (desktop 6 cột = đúng MỘT hàng đầy cho 6 sản phẩm liên quan)
   ------------------------------------------------------------ */
/* (số cột nay do khối "LƯỚI THẺ" ở cuối file quản lý chung) */

/* Dưới 600px KHÔNG cần luật riêng: bản thiết kế đã ép 2 cột
   (div[style*="minmax(200px,1fr)"] trong lifood.css / lifood-compat.css, độ ưu
   tiên (0,1,1) cao hơn class ở đây nên có viết cũng không thắng). 2 cột chia hết
   cả 16/32/64/100 lẫn 6/12/24 -> hàng vẫn luôn đầy. */

/* ------------------------------------------------------------
   CHI TIẾT SP — DẢI ẢNH NHỎ 1 HÀNG + KHUNG XEM ẢNH LỚN
   Trước đây 14 ảnh nhỏ xếp lưới 4 cột = 4 hàng, đẩy phần mua hàng
   xuống rất sâu. Đổi thành một hàng cuộn ngang, có 2 mũi tên.
   ------------------------------------------------------------ */
.lf-pd-strip { position: relative; display: flex; align-items: center; }

.lf-pd-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;                /* Firefox */
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px;                          /* chừa chỗ cho viền ảnh đang chọn */
}
.lf-pd-thumbs::-webkit-scrollbar { display: none; }

.lf-pd-thumbs .lf-pd-thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #EEF3F5;
  border: 2px solid #E2EAEE;
  scroll-snap-align: start;
  transition: border-color .15s ease;
}
.lf-pd-thumbs .lf-pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Mũi tên hai bên — chỉ hiện khi dải ảnh thật sự cuộn được (JS gắn .lf-co-cuon) */
.lf-pd-nav {
  display: none;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0 2px;
  border-radius: 50%;
  border: 1px solid #DDE7EA;
  background: #fff;
  color: #0A7A84;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -8px rgba(10, 48, 73, .5);
}
.lf-pd-strip.lf-co-cuon .lf-pd-nav { display: flex; }
.lf-pd-nav:disabled { opacity: .35; cursor: default; }
.lf-pd-nav:not(:disabled):hover { background: #0E9CA8; color: #fff; border-color: #0E9CA8; }

/* ---- Khung xem ảnh lớn ---- */
.lf-lb {
  position: fixed;
  inset: 0;
  z-index: 200;                          /* trên cả nút Zalo (96) và nút lên đầu (95) */
  background: rgba(6, 24, 36, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .18s ease;
}
.lf-lb.is-on { opacity: 1; }
.lf-lb[hidden] { display: none; }

.lf-lb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  user-select: none;
}

.lf-lb-close, .lf-lb-nav {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.lf-lb-close { top: 16px; right: 16px; width: 42px; height: 42px; font-size: 18px; }
.lf-lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; }
.lf-lb-prev { left: 16px; }
.lf-lb-next { right: 16px; }
.lf-lb-close:hover, .lf-lb-nav:hover { background: rgba(255, 255, 255, .3); }

.lf-lb-count {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #DCEBFF;
  font-size: 13px;
  font-weight: 600;
  background: rgba(0, 0, 0, .35);
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;   /* "1 / 14 · chạm để xem tiếp" không bị bẻ 2 dòng */
  max-width: calc(100vw - 24px);
}

@media (max-width: 600px) {
  .lf-pd-thumbs .lf-pd-thumb { width: 62px; height: 62px; }
  .lf-lb { padding: 10px; }
  .lf-lb-nav { width: 40px; height: 40px; font-size: 25px; }
  .lf-lb-prev { left: 6px; }
  .lf-lb-next { right: 6px; }
  .lf-lb-close { top: 10px; right: 10px; width: 38px; height: 38px; }
  .lf-lb-count { font-size: 11.5px; padding: 4px 11px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-lb { transition: none; }
}

/* ------------------------------------------------------------
   "BÀI VIẾT LIÊN QUAN" (cuối trang tin tức & công thức)

   Lưới gốc repeat(auto-fill, minmax(250px,1fr)) và bản thiết kế KHÔNG có luật
   riêng cho khổ nhỏ, nên ở điện thoại 360px chỉ lọt 1 cột -> mỗi thẻ rộng 336px,
   cao 300px, to quá mức cần thiết cho một khối phụ.

   Ghim số cột theo ước của 4 (số bài lấy về) để hàng luôn đầy:
     >1000px  -> 4 cột
     <=1000px -> 2 cột
   ------------------------------------------------------------ */
/* (số cột nay do khối "LƯỚI THẺ" ở cuối file quản lý chung) */

/* Màn nhỏ: thu chữ trong thẻ cho cân với bề rộng ~162px */
@media (max-width: 600px) {
  .lf-related-posts { gap: 12px !important; }
  .lf-related-posts h3 { font-size: 13px !important; line-height: 1.35 !important; }
  .lf-related-posts p { font-size: 11.5px !important; }
  /* Dòng "ngày · N phút đọc": thẻ hẹp làm cụm từ bị bẻ giữa chừng
     ("5 phút / đọc"). Cho xuống dòng theo TỪNG CỤM, không bẻ trong cụm. */
  .lf-related-posts span { white-space: nowrap; }
  .lf-related-posts span:first-child { flex: 0 0 auto; }
  .lf-related-posts div[style*="display:flex"][style*="font-size:12px"] { flex-wrap: wrap; gap: 4px 10px !important; }
}

/* ============================================================================
   LƯỚI THẺ — HÀNG LUÔN ĐẦY, HÀNG CUỐI CĂN GIỮA

   Vấn đề: lưới gốc dùng auto-fill nên số cột đổi theo bề rộng (1 đến 6). Không
   con số "mỗi trang" nào chia hết cho mọi trường hợp, nên luôn có lúc hàng cuối
   trơ vài ô trống.

   Cách xử lý gồm 2 phần:

   1) GHIM số cột vào ước của số mục mỗi trang -> mọi trang ĐẦY tuyệt đối:
        cửa hàng        16/32/64/100  -> 4 cột | 2 cột (<=1000px)
        SP liên quan    6/12/24       -> 6 cột | 3 cột
        tin tức         12/24/48/96   -> 3 cột | 2 cột
        công thức       12/24/48/96   -> 4 cột | 2 cột
        combo           12/24/48      -> 3 cột | 2 cột
        bài viết l.quan 4 bài         -> 4 cột | 2 cột

   2) TRANG CUỐI vẫn lẻ vì tổng số mục không chia hết (vd 187 bài / 12 = dư 7).
      Chuyện này bình thường, KHÔNG cần xử lý gì thêm: cứ để các thẻ dồn trái
      như mọi danh sách khác. (Đã thử căn giữa hàng cuối nhưng chủ dự án thấy
      không cần thiết.)

   flex-basis tính chính xác: N thẻ + (N-1) khoảng cách = 100%.
   ============================================================================ */
.lf-shop-grid,
.lf-related-grid,
.lf-related-posts,
.lf-ngrid,
.lf-rgrid,
.lf-combogrid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

/* --- khổ lớn (>1000px) --- */
.lf-shop-grid    > * { flex: 0 0 calc((100% - 3 * 16px) / 4); }   /* gap 16 */
.lf-related-grid > * { flex: 0 0 calc((100% - 5 * 16px) / 6); }   /* gap 16 */
.lf-related-posts > * { flex: 0 0 calc((100% - 3 * 18px) / 4); }  /* gap 18 */
.lf-ngrid        > * { flex: 0 0 calc((100% - 2 * 18px) / 3); }   /* gap 18 */
.lf-rgrid        > * { flex: 0 0 calc((100% - 3 * 18px) / 4); }   /* gap 18 */
.lf-combogrid    > * { flex: 0 0 calc((100% - 2 * 20px) / 3); }   /* gap 20 */

/* --- khổ nhỏ (<=1000px): tất cả về 2 cột, riêng SP liên quan 3 cột --- */
@media (max-width: 1000px) {
  .lf-shop-grid    > * { flex-basis: calc((100% - 16px) / 2); }
  .lf-related-grid > * { flex-basis: calc((100% - 2 * 16px) / 3); }
  .lf-related-posts > * { flex-basis: calc((100% - 18px) / 2); }
  .lf-ngrid        > * { flex-basis: calc((100% - 18px) / 2); }
  .lf-rgrid        > * { flex-basis: calc((100% - 18px) / 2); }
  .lf-combogrid    > * { flex-basis: calc((100% - 20px) / 2); }
}

/* --- điện thoại (<=600px): SP liên quan cũng về 2 cột cho khỏi bé quá --- */
@media (max-width: 600px) {
  .lf-related-grid > * { flex-basis: calc((100% - 16px) / 2); }
}

/* ------------------------------------------------------------
   Khung "1fr + cột phụ" ở khổ NHỎ (trang danh sách tin tức: 1fr 300px)

   Bản thiết kế thu về 1 cột ở <=820px, nhưng "1fr" = minmax(auto,1fr) nên
   KHÔNG co xuống dưới min-content: đo được cột 399.75px nằm trong khung 320px
   -> tràn ngang 70px trên máy 360px.

   Cho các con min-width:0 để chúng được phép co lại. Không dùng !important nên
   không đụng độ với luật thu 1 cột của thiết kế.
   ------------------------------------------------------------ */
div[style*="1fr 300px"] > *,
div[style*="1fr 320px"] > *,
div[style*="1fr 380px"] > * { min-width: 0; }

/* ------------------------------------------------------------
   Thẻ bài NỔI BẬT ở trang tin tức / công thức (.lf-nfeat, .lf-rfeat)

   Thiết kế để mobile là "150px 1fr" (ảnh nhỏ bên trái + chữ bên phải). Trên máy
   360px thì cột chữ chỉ còn 150px, trừ padding 32px hai bên chỉ còn ~86px cho
   chữ -> tiêu đề, mô tả và dòng ngày tháng đều bị cắt cụt.

   Thu padding hay giảm cỡ chữ chỉ chữa phần ngọn. Xếp DỌC (ảnh trên, chữ dưới)
   cho chữ dùng trọn 320px mới hết cắt và dễ đọc.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  /* Thiết kế dùng a.lf-nfeat[style] (0,2,1) + !important -> phải cùng độ ưu
     tiên và nạp sau mới thắng; viết .lf-nfeat (0,1,0) là thua. */
  a.lf-nfeat[style],
  a.lf-rfeat[style],
  .lf-nfeat[style][style],
  .lf-rfeat[style][style] { grid-template-columns: 1fr !important; }
  .lf-nfeat > div:last-child,
  .lf-rfeat > div:last-child { padding: 16px !important; gap: 10px !important; }
  .lf-nfeat h2,
  .lf-rfeat h2 { font-size: 18px !important; line-height: 1.28 !important; }
  .lf-nfeat p,
  .lf-rfeat p { font-size: 13px !important; line-height: 1.5 !important; }
}

/* "1fr" = minmax(auto,1fr) không co dưới min-content -> cho các con co được. */
.lf-nfeat > *,
.lf-rfeat > * { min-width: 0; }

/* ------------------------------------------------------------
   Nhãn "GIÁ SỈ" trong thẻ sản phẩm

   Nhãn nằm cùng hàng với giá; màn hẹp làm nó bị bóp lại rồi CHỮ BÊN TRONG
   xuống dòng thành "GIÁ / SỈ" (2 dòng), thẻ trông cao lệch hẳn so với thẻ bên
   cạnh. Cấm xuống dòng và không cho co — nhãn chỉ có 6 ký tự, luôn vừa.
   Nếu hàng giá thật sự chật thì phần giá gạch ngang co lại trước (luật ở trên).
   ------------------------------------------------------------ */
.lf-si-badge {
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  word-break: keep-all;
}

/* Màn rất hẹp: thu nhãn cho nhẹ chỗ, vẫn giữ 1 dòng */
@media (max-width: 420px) {
  .lf-si-badge { font-size: 9px !important; padding: 2px 4px !important; letter-spacing: 0 !important; }
}

/* Máy hẹp nhất (<=380px): sản phẩm giá tiền triệu ("1.062.000₫" + "1.180.000₫")
   cần 136px mà hàng giá chỉ có 129px -> giá gạch rớt xuống dòng. Thu cỡ chữ
   vừa đủ bù 7px, các thẻ khác không đổi vì vốn đã dư chỗ. */
@media (max-width: 380px) {
  .lf-pcard [style*="align-items:baseline"] > span:first-child { font-size: 12.5px !important; }
  .lf-pcard span[style*="line-through"][style*="line-through"] { font-size: 9px !important; }
}

/* ------------------------------------------------------------
   ẢNH TRONG NỘI DUNG — RIÊNG MÀN HÌNH PC (>=821px)

   Trên PC cột nội dung rộng 820px nhưng ảnh bị chặn ở 560px và căn giữa, nên:
   - thụt vào 130px mỗi bên so với mép chữ -> nhìn lệch, không thẳng khối
   - ảnh gốc 2048px chỉ hiển thị ở 0.27x, phí gần hết độ nét

   Cho ảnh rộng bằng đúng cột chữ và thẳng mép trái/phải với chữ, giống cách
   lifood.vn trình bày. Điện thoại KHÔNG đổi: ở đó cột vốn hẹp hơn 560px nên
   ảnh đã vừa khít sẵn.
   ------------------------------------------------------------ */
@media (min-width: 821px) {
  .lf-article img,
  .lf-pd-desc img {
    max-width: 100% !important;
    margin: 20px 0 !important;
  }
}

/* Mô tả sản phẩm: cho phép ngắt chuỗi dài (mã hàng, size "10/12/14/16/18/20/22")
   để không đẩy trang rộng ra. Trang chi tiết SP đang tràn ngang 6px vì việc này
   — lỗi có sẵn, không liên quan cỡ ảnh. */
.lf-pd-desc { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------
   NÚT LIÊN HỆ / ĐẶT SỈ ở trang chi tiết sản phẩm
   Trước đây là 2 khối phẳng, nặng, icon emoji 📞 bị xoay trông xấu.
   Làm lại: cao hơn, bo tròn mềm, có chiều sâu (gradient + bóng theo màu nút)
   và nhấc nhẹ khi rê chuột.
   ------------------------------------------------------------ */
.lf-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 13px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.lf-cta svg { flex: 0 0 auto; }
.lf-cta:hover { transform: translateY(-2px); }
.lf-cta:active { transform: translateY(0); }

/* Gọi báo giá — cam thương hiệu, là hành động chính */
.lf-cta-call {
  background: linear-gradient(135deg, #FF6242, #EE4A2C);
  box-shadow: 0 14px 26px -12px rgba(238, 74, 44, .75);
}
.lf-cta-call:hover { box-shadow: 0 18px 30px -12px rgba(238, 74, 44, .85); }

/* Đặt sỉ qua Zalo — xanh Zalo (#0068FF) cho khách nhận ra ngay là kênh Zalo */
.lf-cta-zalo {
  background: linear-gradient(135deg, #1A82FF, #0068FF);
  box-shadow: 0 14px 26px -12px rgba(0, 104, 255, .7);
}
.lf-cta-zalo:hover { box-shadow: 0 18px 30px -12px rgba(0, 104, 255, .8); }

@media (prefers-reduced-motion: reduce) {
  .lf-cta { transition: box-shadow .16s ease; }
  .lf-cta:hover { transform: none; }
}

/* Thẻ "Sản phẩm liên quan" xếp 6 cột nên hẹp hơn thẻ cửa hàng (~187px). Cỡ giá
   18/13px làm giá gạch bị cắt "…". Thu còn 15.5/11px để giá bán + giá gạch (kể
   cả tiền triệu "1.062.000đ / 1.180.000đ") vừa gọn 1 dòng, không cắt. Chỉ áp
   cho lưới này — thẻ cửa hàng rộng hơn vẫn giữ cỡ gốc. */
.lf-related-grid .lf-pcard [style*="align-items:baseline"] > span:first-child { font-size: 15.5px !important; }
.lf-related-grid .lf-pcard span[style*="line-through"] { font-size: 11px !important; }

/* ================= HEADER DÍNH TOP TRÊN MOBILE =================
   Trên mobile (≤820px) topbar + navbar xanh đã ẩn, chỉ còn thanh header trắng
   (logo · menu ☰ · giá lẻ/sỉ · giỏ hàng). Ghim nó cố định trên cùng để khách
   cuộn xem sản phẩm bên dưới vẫn thao tác được ngay (tìm, đổi giá, mở giỏ). */
/* Thanh tìm kiếm riêng chỉ dành cho mobile — desktop ẩn (desktop dùng ô inline
   trong header). */
.lf-searchbar-mobile { display: none; }

/* Ghim top khi cuộn — áp dụng CẢ PC lẫn mobile.
   PC: header (logo · tìm kiếm · giá lẻ/sỉ · hotline · giỏ hàng) + navbar xanh
       dính chung một khối.
   Mobile: navbar ẩn nên chỉ còn hàng 1 header + menu xổ (ô tìm tách ra ngoài). */
.lf-stickyhead {
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: 0 4px 14px -8px rgba(10, 48, 73, .35);
}

/* Từ lúc bỏ dòng "Hot:", header không còn cần cao 97px nữa — thứ cao nhất chỉ
   là logo 64px, còn ô tìm/giỏ hàng ~44px nên dư khoảng trống, nhìn thô. Thu
   logo + padding cho thanh gọn lại (~70px), nhất là khi thanh này dính cố định
   nên mỗi pixel thừa là vĩnh viễn ăn chỗ xem sản phẩm. */
@media (min-width: 821px) {
  .lf-header-inner { padding-top: 10px !important; padding-bottom: 10px !important; }
  .lf-header .lf-logo { height: 50px !important; }
}

/* Khi đã cuộn xuống (JS gắn .is-scrolled): thu gọn thanh menu xanh, chỉ còn
   thanh header ở top cho thoáng màn hình.
   Lưu ý: KHÔNG đặt overflow:hidden ở trạng thái thường — .lf-megamenu là
   absolute top:100% nên sẽ bị cắt. Chỉ bật overflow lúc đã thu gọn (menu đóng). */
@media (min-width: 821px) {
  .lf-navbar {
    max-height: 120px;
    transition: max-height .22s ease, opacity .22s ease;
  }
  .lf-stickyhead.is-scrolled .lf-navbar {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
}

/* Đã bỏ dòng "Hot: ..." nên ô tìm kiếm giờ là con DUY NHẤT của .lf-search
   -> khớp luôn cả :first-child lẫn :last-child. Hai file CSS thiết kế đang ẩn
   `.lf-search > div:last-child` (vốn để ẩn dòng Hot trên mobile) sẽ ẩn NHẦM ô
   tìm kiếm. Bật lại tường minh (file này nạp sau nên thắng). */
@media (max-width: 820px) {
  /* Nhắm theo CLASS thay vì :last-child — vì JS gợi ý sẽ chèn thêm panel làm
     con cuối, khiến :last-child trỏ nhầm. */
  .lf-search > .lf-search-box { display: flex !important; }

  /* Đã có gợi ý tự sổ + link "Xem tất cả" nên nút "🔍 Tìm" thành thừa trên
     mobile -> ẩn để ô nhập rộng hơn. Vẫn tìm được bằng phím Enter. */
  .lf-search .lf-search-box button[type="submit"] { display: none !important; }
  /* Thay bằng kính lúp bên trái cho khách nhận ra đây là ô tìm kiếm. */
  .lf-search-ico {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 2px 0 12px;
  }
  .lf-search .lf-search-box input { padding-left: 8px !important; padding-right: 14px !important; }
}

/* Desktop không cần kính lúp (đã có nút "🔍 Tìm"). */
.lf-search-ico { display: none; }

/* Vùng nội dung do trình soạn thảo (rich text) sinh ra — chuẩn hoá khoảng cách
   để nhìn y như lúc còn là text trơn: bỏ margin thừa ở thẻ đầu/cuối. */
.lf-rich > :first-child { margin-top: 0; }
.lf-rich > :last-child { margin-bottom: 0; }
.lf-rich p { margin: 0 0 12px; }
.lf-rich ul, .lf-rich ol { margin: 0 0 12px; padding-left: 22px; }
.lf-rich li { margin: 0 0 5px; }
.lf-rich h2, .lf-rich h3 { margin: 18px 0 10px; font-weight: 800; color: #0A3049; }
.lf-rich a { color: #0A7A84; text-decoration: underline; }

/* Dropdown chọn phạm vi tìm ("Tất cả" / SP HN / SP HCM / Công thức / Tin tức).
   Giữ đúng dáng khối "Tất cả ▾" cũ. Ẩn trên mobile cho ô nhập rộng — lúc đó
   mặc định tìm theo ngữ cảnh trang đang xem. */
.lf-search-scope {
  flex: 0 0 auto;
  /* Bề rộng do JS đo theo chữ đang chọn (coVuaChu) để không thừa khoảng trống
     trước mũi tên. Đây chỉ là mức dự phòng khi chưa có JS. */
  max-width: 160px;
  border: none;
  outline: none;
  background: #F2F8F9;
  color: #0A7A84;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 0 8px 0 12px;
  border-right: 1px solid #DDEBED;
  cursor: pointer;
}
@media (max-width: 820px) {
  .lf-search-scope { display: none !important; }
}

/* ===== Danh mục sản phẩm trong menu mobile (lưới 2 cột) ===== */
.lf-mobcats { margin-bottom: 12px; }
.lf-mobcats-title {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0A7A84;
  padding: 4px 2px 8px;
}
.lf-mobcats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.lf-mobcat {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #E2EAEE;
  border-radius: 11px;
  background: #F8FBFC;
  color: #0A3049;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  min-width: 0;
}
.lf-mobcat:active { background: #EAF3F5; }
.lf-mobcat img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 auto; }
.lf-mobcat-emoji { font-size: 17px; width: 26px; text-align: center; flex: 0 0 auto; line-height: 1; }
.lf-mobcat span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ===== Panel gợi ý tìm kiếm (sổ ngay dưới ô tìm) =====
   Đặc hiệu cao + !important để thắng rule `.lf-search > div:last-child
   { display:none }` của 2 file CSS thiết kế (panel là con cuối của form). */
.lf-search .lf-suggest { display: none !important; }
.lf-search .lf-suggest.is-open { display: block !important; }
.lf-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #DDEBED;
  border-radius: 12px;
  box-shadow: 0 18px 40px -16px rgba(10, 48, 73, .45);
  overflow-y: auto;
  max-height: min(70vh, 460px);
  z-index: 80;
  text-align: left;
}
.lf-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  text-decoration: none;
  color: #102A38;
  border-bottom: 1px solid #F0F5F6;
}
.lf-suggest-item:last-child { border-bottom: none; }
.lf-suggest-item:hover,
.lf-suggest-item.is-active { background: #F2F8F9; }
.lf-suggest-item img,
.lf-suggest-noimg {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 8px;
  background: #EEF3F5;
}
.lf-suggest-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lf-suggest-name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.lf-suggest-price { font-size: 13px; font-weight: 800; color: #EE4A2C; }
.lf-suggest-all {
  display: block;
  padding: 10px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #0A7A84;
  background: #F2F8F9;
  text-decoration: none;
}
.lf-suggest-all:hover, .lf-suggest-all.is-active { background: #E4F1F3; }
.lf-suggest-empty { padding: 14px 12px; font-size: 13px; color: #8397A0; text-align: center; }

/* Thanh tìm mobile không nằm trong vùng dính -> cần z-index để panel nổi trên
   danh sách sản phẩm bên dưới. */
.lf-searchbar-mobile { position: relative; z-index: 55; }

@media (max-width: 820px) {
  /* Bỏ ô tìm inline khỏi header (khỏi vùng dính); hiện thanh tìm riêng bên dưới. */
  .lf-search--desktop { display: none !important; }
  .lf-searchbar-mobile {
    display: block;
    background: #fff;
    border-bottom: 1px solid #E2EAEE;
  }
  /* Logo nhỏ lại chút khi ghim để thanh gọn, chừa nhiều chỗ cho sản phẩm. */
  .lf-header .lf-logo { height: 46px !important; }
  /* Menu dài hơn màn hình thì tự cuộn trong nó, không tràn ra ngoài. */
  .lf-mobmenu.is-open { max-height: calc(100vh - 72px); overflow-y: auto; }
}

/* Nhãn "MENU" dưới icon ☰ — chỉ hiện ở thanh gọn lúc đã cuộn. */
.lf-hamb-label { display: none; }

/* ===== MOBILE: cuộn xuống -> thu gọn thành 1 hàng [☰ MENU][ô tìm][giỏ hàng] =====
   Lấy bố cục kiểu trang TMĐT lớn: bỏ logo/giá lẻ-sỉ/hotline cho thoáng, ô tìm
   kiếm nhảy vào giữa thanh dính để khách tìm hàng ngay khi đang lướt. */
@media (max-width: 820px) {
  .lf-stickyhead.is-scrolled .lf-header-inner {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 7px 12px !important;
  }
  .lf-stickyhead.is-scrolled .lf-logo-wrap,
  .lf-stickyhead.is-scrolled .lf-toggle,
  .lf-stickyhead.is-scrolled .lf-hotline { display: none !important; }

  /* Ô tìm kiếm vào giữa thanh, giãn hết chỗ trống.
     min-width:0 để thắng inline min-width:260px (nếu không sẽ tràn ngang). */
  .lf-stickyhead.is-scrolled .lf-search--desktop {
    display: flex !important;
    flex: 1 1 auto !important;
    order: 1 !important;
    min-width: 0 !important;
  }
  .lf-stickyhead.is-scrolled .lf-actions { order: 2 !important; margin-left: 0 !important; }

  /* Giỏ hàng gọn lại: chỉ icon + số, bỏ chữ "Giỏ hàng". */
  .lf-stickyhead.is-scrolled .lf-cart-text { display: none !important; }
  .lf-stickyhead.is-scrolled .lf-cart { padding: 9px 11px !important; gap: 6px !important; }

  /* ☰ và chữ MENU xếp dọc. */
  .lf-stickyhead.is-scrolled .lf-hamb {
    flex-direction: column !important;
    gap: 1px !important;
    line-height: 1 !important;
    font-size: 16px !important;
    width: 42px !important;
    height: 40px !important;
  }
  .lf-stickyhead.is-scrolled .lf-hamb-label {
    display: block;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
  }
}

/* ===================== TRANG BẢNG BÁO GIÁ ===================== */
.lf-pl-chip {
  border: 1px solid #DDEBED; background: #F2F8F9; color: #0A7A84;
  font-family: inherit; font-weight: 600; font-size: 13px;
  padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.lf-pl-chip:hover { background: #E4F1F3; }
.lf-pl-chip.is-active { background: #0E9CA8; color: #fff; border-color: #0E9CA8; }
.lf-pl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 2px; }

/* Bộ lọc tình trạng hàng — chip nhỏ, chữ nhỏ, ngay dưới ô tìm */
.lf-pl-stockfilter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.lf-pl-sflabel { font-size: 12px; color: #8397A0; font-weight: 600; }
.lf-pl-sfchip {
  border: 1px solid #E2EAEE; background: #fff; color: #5D7481;
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px; cursor: pointer;
}
.lf-pl-sfchip:hover { background: #F2F8F9; }
.lf-pl-sfchip.is-active { background: #0A3049; color: #fff; border-color: #0A3049; }

.lf-pl-group { margin-top: 24px; }
.lf-pl-grouphead { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.lf-pl-groupicon { font-size: 20px; }
.lf-pl-grouphead h2 { margin: 0; font-size: 18px; font-weight: 800; color: #0A3049; }
.lf-pl-groupcount { font-size: 11.5px; color: #5D7481; background: #E8F0F1; padding: 2px 9px; border-radius: 999px; }

/* --n = số cột giá (2 hoặc 3) do controller đặt trên #lf-pl-list. */
.lf-pl-thead {
  display: grid; grid-template-columns: 1fr repeat(var(--n, 3), 128px); gap: 8px;
  padding: 9px 16px; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: #7C929B; background: #F2F8F9;
  border: 1px solid #E2EAEE; border-radius: 12px 12px 0 0;
}
.lf-pl-thead span:not(:first-child) { text-align: right; }

.lf-pl-item {
  display: grid; grid-template-columns: 1fr repeat(var(--n, 3), 128px); gap: 8px;
  align-items: center; padding: 11px 16px; background: #fff;
  border: 1px solid #E9EFF0; border-top: none;
}
.lf-pl-item:last-child { border-radius: 0 0 12px 12px; }
.lf-pl-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lf-pl-stt {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: #EEF3F5;
  color: #7C929B; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.lf-pl-title { font-size: 14px; font-weight: 600; color: #102A38; line-height: 1.3; }
.lf-pl-unit { font-size: 11.5px; color: #93A6AE; margin-top: 1px; }
.lf-pl-stock {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: #C0392B;
  background: #FDECEA; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}
.lf-pl-cell { text-align: right; font-size: 14px; white-space: nowrap; }
.lf-pl-cell b { color: #0A3049; font-weight: 700; }
.lf-pl-hl b { color: #EE4A2C; font-weight: 800; }
.lf-pl-lbl { display: none; }

.lf-pl-searchbox input::placeholder { color: #9DB0B7; }

/* Mobile: tên trên (chiếm cả hàng), các ô giá thành 1 hàng dưới có nhãn từng ô */
@media (max-width: 700px) {
  .lf-pl-thead { display: none; }
  .lf-pl-item {
    grid-template-columns: repeat(var(--n, 3), 1fr);
    gap: 9px 7px; padding: 12px; border-radius: 12px; border-top: 1px solid #E9EFF0; margin-bottom: 8px;
  }
  .lf-pl-name { grid-column: 1 / -1; }
  .lf-pl-cell {
    text-align: center; background: #F5FAFB; border-radius: 10px; padding: 8px 4px;
  }
  .lf-pl-hl { background: #FFF1EC; }
  .lf-pl-lbl { display: block; font-size: 10px; color: #8397A0; font-weight: 600; margin-bottom: 2px; }
  .lf-pl-cell b { font-size: 13.5px; }
}

/* ===== Menu xổ trên thanh nav (Giới thiệu · Báo giá) ===== */
.lf-navdrop { position: relative; display: flex; align-items: stretch; }
.lf-navdrop-menu {
  position: absolute; top: 100%; left: 0; min-width: 210px;
  background: #fff; border-top: 3px solid #0A3049; border-radius: 0 0 12px 12px;
  box-shadow: 0 18px 34px -16px rgba(10, 48, 73, .45);
  padding: 6px; z-index: 60;
  display: none;
}
.lf-navdrop:hover .lf-navdrop-menu,
.lf-navdrop:focus-within .lf-navdrop-menu { display: block; }
.lf-navdrop-menu a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: #102A38; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.lf-navdrop-menu a:hover { background: #F2F8F9; color: #0A7A84; }

/* Màn 821–1200px (tablet ngang, laptop nhỏ): thanh nav cần ~1187px nên bị WRAP
   xuống 2-3 dòng và đè lên nội dung. Thu gọn padding/cỡ chữ để luôn vừa 1 hàng.
   KHÔNG dùng overflow-x:auto vì sẽ cắt mất menu xổ (.lf-navdrop-menu nằm trong). */
@media (min-width: 821px) and (max-width: 1200px) {
  .lf-navbar .lf-navlink { padding: 13px 7px !important; font-size: 13px !important; }
  .lf-navbar [data-toggle="megamenu"] { padding: 13px 11px !important; font-size: 13px !important; gap: 7px !important; }
}

/* Dải hẹp hơn nữa (821–1000px): thu tối đa để vẫn đủ 1 hàng, không đè nội dung. */
@media (min-width: 821px) and (max-width: 1000px) {
  .lf-navbar > div { gap: 3px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .lf-navbar .lf-navlink { padding: 13px 4px !important; font-size: 12px !important; }
  .lf-navbar [data-toggle="megamenu"] { padding: 13px 8px !important; font-size: 12px !important; gap: 5px !important; }
}