/* =====================================================================
   Catalog bảng giá — COPY NGUYÊN style.css của template gốc do chủ dự án
   cung cấp (bang-gia-catalog/style.css). KHÔNG đổi bất kỳ giá trị màu/cỡ/
   khoảng cách nào. Thay đổi DUY NHẤT: thêm tiền tố `.lf-cat` vào mọi
   selector để CSS template không đụng vào giao diện chung của website
   (template dùng selector trần: body, header, footer, h1, select…).
   ===================================================================== */
.lf-cat{
  --ink:#16202b; --ink2:#5b6875; --line:#e3e8ee; --bg:#f6f7f9; --card:#fff;
  --navy:#1f3864; --navy2:#2e5c8a; --gold:#c9a227; --red:#c0392b; --green:#1f6f43;
  --radius:14px;
}
.lf-cat *{box-sizing:border-box}
.lf-cat{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.lf-cat .wrap{max-width:1280px;margin:0 auto}

/* Nền header dùng ĐÚNG gradient thương hiệu sẵn có của website (giống hero các
   trang khác) thay cho màu navy của template, cho đồng bộ toàn site. */
.lf-cat header{background:linear-gradient(120deg,#0A3049,#0A7A84 60%,#0E9CA8);color:#fff;padding:26px 20px 20px}
.lf-cat h1{margin:0 0 4px;font-size:26px;letter-spacing:.2px}
.lf-cat .sub{margin:0;opacity:.85;font-size:13.5px}
.lf-cat .stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:14px;font-size:13px}
.lf-cat .stats b{font-size:19px;display:block;font-weight:700}
.lf-cat .stats span{opacity:.8}

/* top: chừa chỗ cho thanh header dính của website (template gốc là trang
   riêng nên dùng top:0). Giá trị = chiều cao thanh header khi đã cuộn. */
.lf-cat .toolbar{position:sticky;top:71px;z-index:20;background:#fff;border-bottom:1px solid var(--line);
  padding:12px 20px;box-shadow:0 1px 6px rgba(20,30,45,.05)}
.lf-cat .tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lf-cat input[type=search],.lf-cat select{border:1px solid var(--line);border-radius:9px;padding:9px 12px;
  font-size:14px;background:#fff;color:var(--ink);outline:none;font-family:inherit}
.lf-cat input[type=search]{flex:1;min-width:220px}
.lf-cat input[type=search]:focus,.lf-cat select:focus{border-color:var(--navy2);box-shadow:0 0 0 3px rgba(46,92,138,.13)}

.lf-cat .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.lf-cat .chip{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:999px;
  padding:6px 13px;font-size:12.5px;cursor:pointer;transition:.13s;white-space:nowrap;font-family:inherit}
.lf-cat .chip:hover{border-color:var(--navy2);color:var(--navy)}
.lf-cat .chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}

/* Sửa lệch: rule .count của template ghi đè margin:0 auto của .wrap nên dòng
   "Hiển thị N/N" dán mép trái khi màn rộng hơn 1280px (lưới thì căn giữa).
   Đổi sang auto + padding 20px -> khoảng cách y hệt cũ, nhưng thẳng hàng lưới. */
.lf-cat .count{color:var(--ink2);font-size:13px;margin:16px auto 0;padding:0 20px}
.lf-cat main{max-width:1280px;margin:0 auto;padding:10px 20px 60px}
.lf-cat .grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

.lf-cat .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.lf-cat .card:hover{box-shadow:0 8px 22px rgba(20,30,45,.11);transform:translateY(-2px);border-color:#cfd8e3}
.lf-cat .ph{background:#fafbfc;height:170px;display:flex;align-items:center;justify-content:center;
  padding:10px;border-bottom:1px solid var(--line);cursor:zoom-in}
.lf-cat .ph img{max-width:100%;max-height:100%;object-fit:contain}
.lf-cat .body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.lf-cat .body h2,.lf-cat .body p{margin:0}
.lf-cat .nm{font-weight:650;font-size:14px;line-height:1.35;min-height:38px}
.lf-cat .pr{display:flex;align-items:baseline;gap:7px}
.lf-cat .le{color:var(--red);font-weight:800;font-size:19px}
.lf-cat .per{color:var(--ink2);font-size:12px}
.lf-cat .th{font-size:12.5px;color:var(--green);font-weight:600}
.lf-cat .th .muted{color:var(--ink2);font-weight:400}
.lf-cat .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.lf-cat .tag{background:#f1f4f8;color:var(--ink2);border-radius:6px;padding:3px 8px;font-size:11px}
.lf-cat .tag.g{background:#fdf6e3;color:#8a6d0b}
.lf-cat .empty{text-align:center;color:var(--ink2);padding:60px 20px}

.lf-cat #lb{position:fixed;inset:0;background:rgba(12,18,26,.85);display:flex;align-items:center;
  justify-content:center;z-index:50;padding:24px;cursor:zoom-out}
.lf-cat #lb[hidden]{display:none}
.lf-cat #lb img{max-width:92vw;max-height:82vh;border-radius:10px;background:#fff;padding:8px}
.lf-cat #lb p{position:absolute;bottom:22px;color:#fff;font-size:15px;text-align:center;width:100%;margin:0}

.lf-cat footer{padding:0 20px 40px;color:var(--ink2);font-size:12.5px}

@media(max-width:640px){
  .lf-cat .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .lf-cat .ph{height:130px}.lf-cat .le{font-size:17px}.lf-cat h1{font-size:20px}
}
/* mobile: thanh header dính của website thấp hơn desktop */
@media(max-width:820px){ .lf-cat .toolbar{top:56px} }
@media print{.lf-cat .toolbar,.lf-cat #lb{display:none!important}.lf-cat .card{break-inside:avoid}}

/* ===== Tinh chỉnh riêng cho MOBILE (desktop giữ nguyên template) =====
   Template gốc là trang riêng trên máy tính; trên điện thoại 12 chip nhóm xổ
   thành 7 hàng đẩy sản phẩm xuống quá sâu, 2 ô chọn mỗi cái chiếm 1 hàng. */
@media (max-width: 640px) {
  /* Ô tìm full hàng; 2 ô chọn chia đôi cùng 1 hàng */
  .lf-cat .tools { gap: 8px; }
  .lf-cat input[type=search] { flex: 1 0 100%; min-width: 0; }
  .lf-cat .tools select { flex: 1 1 0; min-width: 0; }

  /* Chips cuộn ngang 1 hàng thay vì xổ 7 hàng (giống hàng lọc ở trang cửa hàng) */
  .lf-cat .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .lf-cat .chips::-webkit-scrollbar { display: none; }
  .lf-cat .chip { flex: 0 0 auto; }

  /* Nhãn nhóm dài (vd "Nem – Chả – Thịt chế biến") gọn lại cho khỏi tràn thẻ */
  .lf-cat .tag { font-size: 10.5px; padding: 3px 7px; }
  .lf-cat .nm { font-size: 13.5px; min-height: 34px; }
  .lf-cat .count { margin-top: 12px; }

  /* Khối tiêu đề: chữ nhỏ lại cho gọn màn hình, 4 số liệu vừa 1 hàng
     (trước "310.000 đ" bị rớt xuống hàng 2). */
  .lf-cat header { padding: 18px 16px 16px; }
  .lf-cat h1 { font-size: 17px; line-height: 1.25; }
  .lf-cat .sub { font-size: 11.5px; line-height: 1.45; }
  .lf-cat .stats { gap: 12px; margin-top: 11px; font-size: 11px; }
  .lf-cat .stats b { font-size: 15px; }
  .lf-cat .stats span { font-size: 10px; }
}

/* ===== Phân trang (thêm mới — template gốc đổ hết 1 lần) =====
   Dùng đúng bộ màu/bo góc của template để không lạc phong cách. */
.lf-cat .pager{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:22px}
.lf-cat .pg-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lf-cat .pg{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:9px;
  min-width:36px;padding:7px 11px;font-size:13px;cursor:pointer;transition:.13s;font-family:inherit}
.lf-cat .pg:hover:not(:disabled){border-color:var(--navy2);color:var(--navy)}
.lf-cat .pg.is-cur{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.lf-cat .pg:disabled{opacity:.45;cursor:not-allowed}
.lf-cat .pg-dots{color:var(--ink2);padding:0 2px}
.lf-cat .pg-per{display:flex;align-items:center;gap:7px;color:var(--ink2);font-size:12.5px;white-space:nowrap}
.lf-cat .pg-per select{padding:7px 10px;font-size:12.5px}

@media (max-width: 640px){
  .lf-cat .pager{justify-content:center}
  .lf-cat .pg{min-width:32px;padding:6px 9px;font-size:12.5px}
  .lf-cat .pg-per{font-size:12px}
}