/* Cẩm nang (blog): dùng biến màu, chữ của site.css */
.bl{padding-bottom:40px}
.bl-cats{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 26px}
.bl-cats a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600;background:var(--card)}
.bl-cats a span{font-weight:500;color:var(--ink2);font-size:12px}
.bl-cats a:hover{border-color:var(--sea)}
.bl-cats a[aria-current=page]{background:var(--sea);border-color:var(--sea);color:var(--ivory)}.bl-cats a[aria-current=page] span{color:rgba(246,241,230,.75)}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bl-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.bl-ph{display:block;aspect-ratio:16/10;background:var(--nest,#EFE7D6);overflow:hidden}
.bl-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}.bl-card:hover .bl-ph img{transform:scale(1.03)}
.bl-noimg{display:block;width:100%;height:100%;background:url(/img/trang-tri/vong-to-yen.svg) no-repeat center/38% auto;opacity:.25}
.bl-tx{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.bl-cat{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--sea);text-decoration:none}
.bl-card h2,.bl-card h3{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.2;margin:0}
.bl-card h3{font-size:20px}
.bl-card h2 a,.bl-card h3 a{color:var(--ink);text-decoration:none}.bl-card h2 a:hover,.bl-card h3 a:hover{color:var(--sea)}
.bl-card p{margin:0;color:var(--ink2);font-size:14px;line-height:1.55}
.bl-meta{font-size:13px;color:var(--ink2);margin-top:auto}
.bl-first{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.bl-first .bl-ph{aspect-ratio:auto;min-height:320px}.bl-first .bl-tx{padding:28px 30px;justify-content:center}
.bl-first h2{font-size:34px}.bl-first p{font-size:15px}
.bl-pages{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:34px 0 0}
.bl-pages a,.bl-pages span{min-width:40px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;text-align:center;text-decoration:none;color:var(--ink);background:var(--card);font-size:14px}
.bl-pages span[aria-current]{background:var(--sea);border-color:var(--sea);color:var(--ivory);font-weight:700}.bl-pages span[aria-disabled]{color:var(--ink2);opacity:.6}
.bl-post{max-width:780px}
.bl-post header .h1{font-size:44px;line-height:1.12;margin-bottom:8px}
.bl-cover{margin:18px 0 26px}.bl-cover img{width:100%;height:auto;border-radius:16px;display:block;background:var(--nest,#EFE7D6)}
.bl-body{font-size:17px;line-height:1.75}
.bl-body h2{font-size:30px;margin:34px 0 10px}.bl-body h3{font-size:24px;margin:26px 0 8px}
.bl-body img{border-radius:12px}.bl-body figure{margin:18px 0}.bl-body figcaption{font-size:13px;color:var(--ink2)}
.bl-body table{border-collapse:collapse;width:100%;font-size:15px;display:block;overflow-x:auto}.bl-body th,.bl-body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.bl-body blockquote{margin:18px 0;padding:6px 18px;border-left:3px solid var(--gold);color:var(--ink2)}
.bl-body a{color:var(--sea)}
.bl-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-preview{background:#FFF4D6;border:1px solid #E8C770;border-radius:10px;padding:10px 14px;margin:14px 0 0;font-size:14px}
@media (max-width:900px){
  .bl-grid,.bl-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-first{grid-template-columns:1fr}.bl-first .bl-ph{min-height:0;aspect-ratio:16/10}.bl-first .bl-tx{padding:18px}.bl-first h2{font-size:26px}
}
@media (max-width:600px){
  .bl-grid,.bl-grid-3{grid-template-columns:1fr}
  .bl-post header .h1{font-size:32px}.bl-body{font-size:16px}.bl-body h2{font-size:25px}.bl-body h3{font-size:21px}
}
