/* blog.css — trang /blog với 3 view: Danh sách · Lưới bìa · Kệ sách.
   Kế thừa mxh-tokens.css. Dùng CHUNG một bộ item, đổi layout bằng class ở khung ngoài. */
.bwrap{max-width:1120px; margin:0 auto; padding:40px 22px 74px}
.bhead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 24px}
.bh{font-family:var(--mxh-disp,Georgia,serif); font-weight:800; font-size:clamp(32px,5vw,48px); margin:0; line-height:1.1}
.bsub{color:var(--mxh-ink-soft,#4c3f26); margin:6px 0 0}

/* Thanh chuyển view */
.bviews{display:inline-flex; border:1px solid rgba(32,24,10,.28); border-radius:999px; overflow:hidden; background:var(--mxh-paper-hi,#f5edcf)}
.bviews button{appearance:none; border:0; background:transparent; font-family:var(--mxh-serif,Georgia,serif); font-size:14px; font-weight:600; color:var(--mxh-ink-soft,#4c3f26); padding:9px 15px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; line-height:1}
.bviews button+button{border-left:1px solid rgba(32,24,10,.18)}
.bviews button.active{background:var(--mxh-ink,#20180a); color:var(--mxh-paper-hi,#f5edcf)}
.bviews svg{width:15px; height:15px; flex:none}
.bcount{margin:24px 0 20px; font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--mxh-gold-ink,#6d5216)}

/* Item dùng chung */
.bitem{text-decoration:none; color:var(--mxh-ink,#20180a)}
.bi-cover{overflow:hidden; background:var(--mxh-paper-lo,#e5d3a2)}
.bi-cover img{width:100%; height:100%; object-fit:cover; display:block}
.bi-cat{font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mxh-gold-ink,#6d5216)}
.bi-title{font-family:var(--mxh-disp,Georgia,serif); font-weight:700; line-height:1.24}
.bi-date{font-style:italic; color:var(--mxh-ink-soft,#4c3f26)}
.shelf-plank{display:none}

/* ===================== VIEW: DANH SÁCH ===================== */
.view-list .bgrid{display:block}
.view-list .bi-cover{display:none}
.view-list .bitem{display:grid; grid-template-columns:1fr auto; gap:4px 18px; padding:17px 2px; border-bottom:1px solid rgba(32,24,10,.16)}
.view-list .bi-cat{grid-column:1}
.view-list .bi-title{grid-column:1; font-size:22px}
.view-list .bi-date{grid-column:2; grid-row:1/3; align-self:center; font-size:15px; white-space:nowrap}
.view-list .bitem:hover .bi-title{color:var(--mxh-burg,#6b2230)}
@media(max-width:600px){ .view-list .bi-date{grid-column:1; grid-row:auto; align-self:auto} }

/* ===================== VIEW: LƯỚI BÌA ===================== */
.view-grid .bgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:26px}
.view-grid .bitem{display:flex; flex-direction:column; background:var(--mxh-paper-hi,#f5edcf); border:1px solid rgba(32,24,10,.14); border-radius:10px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease}
.view-grid .bitem:hover{transform:translateY(-4px); box-shadow:0 16px 32px -14px rgba(32,24,10,.45)}
.view-grid .bi-cover{aspect-ratio:3/2}
.view-grid .bi-cat{margin:15px 16px 0}
.view-grid .bi-title{margin:6px 16px 0; font-size:19px}
.view-grid .bi-date{margin:9px 16px 17px; font-size:14px}

/* ===================== VIEW: KỆ SÁCH ===================== */
.view-shelf .bgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:40px 28px}
.view-shelf .bitem{display:flex; flex-direction:column; align-items:center; text-align:center}
.view-shelf .bi-cover{width:100%; aspect-ratio:3/2; border-radius:4px 4px 0 0; border:1px solid rgba(32,24,10,.22); border-bottom:0; box-shadow:0 12px 18px -10px rgba(32,24,10,.55); transition:transform .18s ease}
.view-shelf .shelf-plank{display:block; width:100%; height:10px; border-radius:0 0 4px 4px; background:linear-gradient(180deg,var(--mxh-gold-d,#a5822f),#6d4d1e); box-shadow:0 8px 12px -5px rgba(32,24,10,.5)}
.view-shelf .bi-cat{margin:15px 0 0}
.view-shelf .bi-title{margin:5px 0 0; font-size:17px}
.view-shelf .bi-date{margin:6px 0 0; font-size:13px}
.view-shelf .bitem:hover .bi-cover{transform:translateY(-4px)}