/* ============ DANH MỤC — NỘI DUNG ============ */
.cat{background:var(--bg);padding:72px var(--gutter) 88px;display:flex;flex-direction:column;gap:40px;align-items:flex-start;}
.cat__body{display:flex;gap:32px;align-items:flex-start;width:100%;}

/* ---- Sidebar ---- */
.side{width:258px;flex:none;display:flex;flex-direction:column;gap:24px;align-items:stretch;}
.side__box{
  display:flex;flex-direction:column;align-items:stretch;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.side__title{
  padding:16px 20px;background:var(--ink);
  font-size:13.5px;font-weight:500;letter-spacing:.54px;color:#fff;text-transform:uppercase;
}
.side__link{
  display:flex;align-items:center;padding:13px 20px;
  border:1px solid var(--line);margin-top:-1px;
  font-size:14.5px;font-weight:500;color:var(--ink);
  transition:background-color .18s ease, color .18s ease;
}
.side__link:hover{background:var(--bg-alt);color:var(--brand);}
.side__link.is-active{background:var(--brand-soft);color:var(--brand);}

.side__cta{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  padding:22px 20px;background:var(--brand);border-radius:10px;color:#fff;
}
.side__cta-label{font-size:15.5px;font-weight:500;}
.side__cta-text{font-size:13px;line-height:1.5;}
.side__cta-tel{font-size:22px;font-weight:700;}
.side__cta-tel:hover{text-decoration:underline;}

/* ---- Cột sản phẩm ---- */
.cat__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:22px;align-items:flex-start;}
.cat__bar{display:flex;align-items:center;width:100%;}
.cat__count{flex:1;min-width:0;font-size:14px;color:var(--ink-soft);}
.cat__sort{
  display:flex;align-items:center;gap:8px;padding:9px 14px;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;
  font-size:13.5px;color:var(--ink);white-space:nowrap;
}
.cat__sort:hover{border-color:var(--brand);}
.cat__sort svg{width:12px;height:12px;flex:none;}

.cat__grid{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;width:100%;}
.ccard{
  width:300px;display:flex;flex-direction:column;align-items:stretch;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.16);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ccard:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.2);}
/* ảnh cắt nền trắng -> contain (xem readme) */
.ccard__img{width:100%;aspect-ratio:800/500;flex:none;object-fit:contain;padding:14px;background:var(--bg);}
.ccard__body{flex:1;display:flex;flex-direction:column;padding:16px 18px 18px;}
.ccard__name{font-size:16.5px;font-weight:700;line-height:1.3;color:var(--ink);text-align:center;}

/* ============ BÀI VIẾT DANH MỤC ============ */
.art{background:var(--bg-alt);padding:76px var(--gutter) 88px;display:flex;flex-direction:column;align-items:center;}
.art__inner{width:920px;max-width:100%;display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.art__eyebrow{font-size:13px;font-weight:700;letter-spacing:1.3px;color:var(--brand);text-transform:uppercase;}
.art__title{font-size:30px;font-weight:700;line-height:1.28;color:var(--ink);}
.art__lead{font-size:16px;line-height:1.7;color:var(--ink-soft);}
.art p{font-size:15.5px;line-height:1.72;color:var(--ink-soft);}

/* tiêu đề mục + gạch đỏ 44×3 */
.art__h3{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:12px;}
.art__h3 h3{font-size:22px;font-weight:700;line-height:1.2;color:var(--ink);}
.art__h3::after{content:"";width:44px;height:3px;background:var(--brand);border-radius:2px;}

/* hình minh hoạ + chú thích */
.art figure{width:100%;margin:0;padding:8px 0;display:flex;flex-direction:column;gap:8px;align-items:center;}
.art figure img{width:100%;height:430px;object-fit:contain;border-radius:12px;background:var(--bg);}
.art figure img.is-photo{object-fit:cover;}
.art figcaption{width:100%;font-size:13px;font-style:italic;color:var(--muted);text-align:center;}

/* danh sách ưu điểm */
.plus{display:flex;gap:12px;align-items:flex-start;width:100%;}
.plus__ic{width:18px;height:18px;flex:none;margin-top:2px;}
.plus__title{font-size:15.5px;font-weight:700;color:var(--ink);}
.plus__text{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-top:2px;}

/* bảng thông số */
.spectable{width:100%;border-collapse:collapse;border-radius:10px;overflow:hidden;}
.spectable th{
  padding:12px 20px;background:var(--ink);
  font-size:14px;font-weight:700;color:#fff;text-align:left;
}
.spectable td{padding:12px 20px;font-size:14.5px;color:var(--ink-soft);}
.spectable tbody tr:nth-child(odd){background:var(--bg-alt);}
.spectable tbody tr:nth-child(even){background:var(--bg);}
.spectable td:first-child{font-weight:700;color:var(--ink);}
.art__note{font-size:13px;font-style:italic;color:var(--muted);}

/* khối liên hệ cuối bài */
.art__contact{
  width:100%;margin-top:12px;padding:24px 26px;
  background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
.art__contact-title{font-size:15.5px;font-weight:700;color:var(--ink);}
.art__contact p{font-size:14.5px;line-height:1.65;}
.art__contact a{color:var(--brand);font-weight:700;}
.art__contact a:hover{text-decoration:underline;}

/* === RESP-PAGE (auto) === */
@media (max-width:1024px){
  .cat__body{flex-direction:column;}
  .side{width:100%;}
  .ccard{width:calc(50% - 12px);}
  .art__inner{width:100%;}
}
@media (max-width:600px){
  .ccard{width:100%;}
  .cat__bar{flex-direction:column;align-items:flex-start;gap:12px;}
  .art__title{font-size:24px;line-height:1.3;}
  .art figure img{height:240px;}
  .spectable th,.spectable td{padding:10px 12px;font-size:13px;}
}
/* === END RESP-PAGE === */