/* =========================================================
   BẾP SINH — products.css
   Category banner, filters, product grid, pagination
   ========================================================= */

.cat-banner{
  position:relative; min-height:280px; display:flex; align-items:center;
  background:var(--bs-green-900); color:#fff; overflow:hidden;
}
.cat-banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35;}
.cat-banner .inner{position:relative; z-index:2;}
.cat-banner h1{color:#fff; font-size:clamp(26px,3.6vw,40px);}
.cat-banner p{color:#DCEEE4; max-width:560px; margin-top:12px;}
.cat-banner .count{margin-top:16px; font-size:13px; color:#9FDABE; font-weight:700; text-transform:uppercase; letter-spacing:.06em;}

.category-chips{display:flex; gap:10px; flex-wrap:wrap; padding:22px 0; border-bottom:1px solid var(--bs-gray-200);}
.category-chips a{
  padding:9px 18px; border:1px solid var(--bs-gray-200); border-radius:24px;
  font-size:13px; font-weight:600; color:var(--bs-ink-soft);
}
.category-chips a.active,.category-chips a:hover{background:var(--bs-green-700); border-color:var(--bs-green-700); color:#fff;}

.products-layout{display:grid; grid-template-columns:280px 1fr; gap:36px; padding-top:36px;}

.filter-panel{border:1px solid rgba(146,159,143,0.18); border-radius:20px; padding:26px; align-self:start; position:sticky; top:calc(var(--header-h) + 20px); background:#fff; box-shadow:0 14px 32px rgba(11,58,43,0.06);}
.filter-panel h3{font-size:13px; text-transform:uppercase; letter-spacing:.12em; margin-bottom:20px; color:var(--bs-green-700);}
.filter-group{margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--bs-gray-200);}
.filter-group:last-child{border-bottom:none; margin-bottom:0;}
.filter-group h4{font-size:12.5px; font-weight:700; color:var(--bs-ink); margin-bottom:12px; text-transform:uppercase; letter-spacing:.04em;}
.filter-option{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13.5px; color:var(--bs-ink-soft); cursor:pointer;}
.filter-option input{accent-color:var(--bs-green-700); width:15px; height:15px;}
.filter-option span.n{margin-left:auto; color:var(--bs-gray-400); font-size:12px;}
.price-inputs{display:flex; align-items:center; gap:8px;}
.price-inputs input{width:100%; padding:8px 10px; border:1px solid var(--bs-gray-200); border-radius:3px; font-size:13px;}

.products-toolbar{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:20px; flex-wrap:wrap;
}
.result-count{font-size:14px; color:var(--bs-ink-soft); font-weight:600;}
.sort-select{
  display:flex; align-items:center; gap:10px; font-size:14px;
}
.sort-select select{
  min-width:220px;
  padding:10px 38px 10px 14px; border:1px solid rgba(146,159,143,0.3); border-radius:14px;
  appearance:none; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%2342504A"/></svg>') no-repeat right 14px center;
  box-shadow:inset 0 2px 4px rgba(11,58,43,0.05);
}

.products-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px;}
.products-grid .product-card{height:100%;}


.pagination{display:flex; justify-content:center; gap:6px; margin-top:44px;}
.pagination a,.pagination span{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--bs-gray-200); border-radius:3px; font-size:13.5px; color:var(--bs-ink-soft);
}
.pagination a:hover,.pagination .active{background:var(--bs-green-700); border-color:var(--bs-green-700); color:#fff;}

/* Article grid (News page reuses this) */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.article-card .thumb{aspect-ratio:16/10; overflow:hidden; margin-bottom:14px; border-radius:3px;}
.article-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s;}
.article-card:hover .thumb img{transform:scale(1.05);}
.article-card .meta{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--bs-green-700); font-weight:700; margin-bottom:8px;}
.article-card h3{font-size:16.5px; line-height:1.4;}
.article-card p{font-size:13.5px; color:var(--bs-ink-soft); margin-top:8px;}
.article-card .date{font-size:12px; color:var(--bs-gray-400); margin-top:10px;}