/* Trang dự án — MPE Mall. Token 1:1 design-system.html §9.
   Primary --brand-navy · Secondary --brand-green · Accent --brand-lime ·
   Link --brand-blue · Heading navy · Text/Muted/Surface/Border xám. Weights 400/600/700. */
:root{
  --pj-navy:#1F5D8F; --pj-navy-hover:#174A72; --pj-navy-soft:#EDF4F9;
  --pj-green:#2B86A9; --pj-green-hover:#226B87; --pj-green-soft:#EDF7FA;
  --pj-lime:#48AFC6; --pj-blue:#3B9FC0;
  --pj-success:#15803D; --pj-success-soft:#ECFDF3;
  --pj-border:#EAECF0; --pj-text:#344054; --pj-muted:#667085; --pj-surface:#F8FAFC;
  --pj-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.pj-wrap{background:#fff; padding:0 0 48px; font-family:var(--pj-font); color:var(--pj-text); font-size:14px; line-height:1.5;}
/* Hero */
.pj-hero{background:linear-gradient(135deg,#1F5D8F 0%,#2B86A9 100%); color:#fff; border-radius:14px; padding:36px 32px; margin:24px 0 28px;}
.pj-hero .kicker{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:rgba(255,255,255,.16); border-radius:999px; padding:5px 12px; margin-bottom:12px;}
.pj-hero h1{margin:0 0 10px; font-size:28px; line-height:1.25; font-weight:700; color:#fff;}
.pj-hero p{margin:0; max-width:720px; font-size:14px; opacity:.92;}
.pj-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px;}
.pj-stats .stat{background:rgba(255,255,255,.12); border-radius:10px; padding:12px 14px;}
.pj-stats .stat b{display:block; font-size:22px; font-weight:700;}
.pj-stats .stat span{font-size:13px; opacity:.85;}
/* Filter */
.pj-filter{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; align-items:center;}
.pj-filter .lbl{font-size:12px; font-weight:700; color:var(--pj-navy); text-transform:uppercase; letter-spacing:.04em; margin-right:4px;}
.pj-filter button{font-family:var(--pj-font); font-size:13px; font-weight:600; border:1px solid var(--pj-border); background:#fff; color:var(--pj-text); border-radius:999px; padding:7px 14px; cursor:pointer;}
.pj-filter button.active{background:var(--pj-navy); border-color:var(--pj-navy); color:#fff;}
/* Cards */
.pj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pj-card{border:1px solid var(--pj-border); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column;}
.pj-card .img{aspect-ratio:16/10; overflow:hidden; background:var(--pj-surface); position:relative; display:block;}
.pj-card .img img{width:100%; height:100%; object-fit:cover; display:block;}
.pj-card .tag{position:absolute; top:10px; left:10px; background:var(--pj-navy); color:#fff; font-size:12px; font-weight:700; border-radius:999px; padding:4px 11px;}
.pj-card .body{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.pj-card h3{margin:0; font-size:16px; line-height:1.25; font-weight:700; color:var(--pj-navy);}
.pj-card h3 a{color:inherit; text-decoration:none;}
.pj-card .loc{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--pj-muted);}
.pj-card .loc i[data-lucide], .pj-card .loc svg{width:15px; height:15px; color:var(--pj-blue); flex-shrink:0;}
.pj-card .go{margin-top:auto; padding-top:6px; font-size:13px; font-weight:700; color:var(--pj-blue); text-decoration:none; display:inline-flex; align-items:center; gap:6px;}
.pj-card .go:hover{text-decoration:underline;}
/* Spotlight */
.pj-spot{margin-top:36px; border:1px solid var(--pj-border); border-radius:14px; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.pj-spot .img{min-height:300px; background:var(--pj-surface);}
.pj-spot .img img{width:100%; height:100%; object-fit:cover; display:block;}
.pj-spot .body{padding:28px; background:var(--pj-navy-soft);}
.pj-spot .kicker{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--pj-green); margin-bottom:8px;}
.pj-spot h2{margin:0 0 10px; font-size:22px; line-height:1.25; font-weight:700; color:var(--pj-navy);}
.pj-spot p{font-size:14px; line-height:1.65; margin:0 0 12px;}
.pj-spot ul{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:8px; font-size:14px;}
.pj-spot li{display:flex; gap:8px; align-items:flex-start;}
.pj-spot li::before{content:"✓"; flex-shrink:0; color:var(--pj-success); font-weight:700;}
.pj-spot .pj-btn.primary{background:var(--pj-navy); border-color:var(--pj-navy); color:#fff;}
.pj-spot .pj-btn.primary:hover{background:var(--pj-navy-hover);}
/* CTA */
.pj-cta{margin-top:36px; background:linear-gradient(135deg,#1F5D8F 0%,#2B86A9 100%); border-radius:14px; padding:32px 28px; text-align:center; color:#fff;}
.pj-cta h2{margin:0 0 8px; font-size:22px; font-weight:700; color:#fff;}
.pj-cta p{margin:0 auto 20px; max-width:640px; font-size:14px; color:rgba(255,255,255,.9);}
.pj-cta .pj-cta-btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0; padding:0; max-width:none;}
.pj-cta .pj-btn.primary{background:#fff; border-color:#fff; color:var(--pj-navy);}
.pj-cta .pj-btn.primary:hover{background:var(--pj-navy-soft);}
.pj-cta .pj-btn.ghost{background:transparent; border-color:#fff; color:#fff;}
.pj-cta .pj-btn.ghost:hover{background:rgba(255,255,255,.14);}
.pj-btn{max-width:100%;}
.pj-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; border-radius:10px; font-size:14px; font-weight:700; font-family:var(--pj-font); padding:10px 22px; text-decoration:none; cursor:pointer; border:1px solid var(--pj-navy); white-space:nowrap;}
.pj-btn.primary{background:var(--pj-navy); color:#fff;}
.pj-btn.primary:hover{background:var(--pj-navy-hover);}
.pj-btn.ghost{background:#fff; color:var(--pj-navy);}
.pj-btn.ghost:hover{background:var(--pj-navy-soft);}
@media (max-width:1024px){
  .pj-grid{grid-template-columns:repeat(2,1fr);}
  .pj-spot{grid-template-columns:1fr;}
  .pj-stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .pj-grid{grid-template-columns:1fr;}
  .pj-hero{padding:26px 20px;}
  .pj-hero h1{font-size:22px;}
}
/* Hiện nút "Danh mục sản phẩm" trên header: theme mặc định ẩn (chỉ hiện khi sticky hoặc body.archive) */
#header .menu-header__category{display:list-item!important;}