@charset "UTF-8";
/* Tách từ archive.php – chỉ tải trên template này (xem functions.php → pd_page_styles) */
.blog-filter-bar { display:flex; flex-direction:column; gap:14px; }
.blog-search-wrap { position:relative; max-width:420px; }
.search-icon {
  position:absolute; left:16px; top:50%;
  transform:translateY(-50%); pointer-events:none;
  color:var(--muted,#6b7280); display:block;   /* icon SVG giống ô tìm kiếm trang Dự án */
}
.blog-search-wrap:focus-within .search-icon { color:var(--navy,#1a2e4a); }
.blog-search-input {
  width:100%; padding:11px 40px 11px 40px;
  border:2px solid var(--off2,#e5e7eb); border-radius:50px;
  font-size:15px; color:var(--navy,#1a2e4a); background:var(--white,#fff);
  outline:none; transition:border-color .2s; box-sizing:border-box;
}
.blog-search-input:focus { border-color:var(--gold,#c9a84c); }
.blog-search-input, #pd-reset-search { font-family:inherit; } /* ô nhập/nút dùng font theme (trình duyệt mặc định dùng font hệ thống) */
.search-clear {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  font-size:13px; color:var(--muted,#6b7280); padding:4px; line-height:1;
}
.search-clear:hover { color:var(--navy,#1a2e4a); }
.filter-pills { display:flex; gap:8px; flex-wrap:wrap; }
.btn-load-more {
  padding:13px 36px; border:2px solid var(--gold,#c9a84c); border-radius:50px;
  background:transparent; color:var(--gold,#c9a84c);
  font-size:15px; font-weight:600; cursor:pointer; transition:background .2s,color .2s;
}
.btn-load-more:hover { background:var(--gold,#c9a84c); color:var(--white,#fff); }
.btn-load-more:disabled { opacity:.5; cursor:not-allowed; }
.blog-row-card-skeleton {
  display:flex; gap:20px; background:var(--white,#fff);
  border-radius:12px; overflow:hidden; margin-bottom:16px;
  animation:pulse 1.4s ease-in-out infinite;
}
.skel-img  { width:200px; min-height:140px; background:#e5e7eb; flex-shrink:0; }
.skel-body { flex:1; padding:20px; display:flex; flex-direction:column; gap:10px; }
.skel-line { background:#e5e7eb; border-radius:4px; height:14px; }
.skel-line.w60 { width:60%; } .skel-line.w80 { width:80%; } .skel-line.w40 { width:40%; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── Hàng "Chủ đề" (taxonomy chu-de) ── */
.topic-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.topic-pills__label { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted, #6b7280); margin-right: 4px; }
.topic-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 30px; font-size: 13px; font-weight: 600; color: var(--navy, var(--pdc-primary,#0a1628)); background: var(--white, #fff); border: 1.5px solid var(--off2, #e5e7eb); text-decoration: none; transition: .2s; }
.topic-pill:hover { border-color: var(--gold, var(--pdc-accent,#c9a227)); color: var(--navy, var(--pdc-primary,#0a1628)); }
.topic-pill.active { background: var(--gold, var(--pdc-accent,#c9a227)); border-color: var(--gold, var(--pdc-accent,#c9a227)); color: #fff; }
.topic-pill__count { font-size: 11px; opacity: .65; }
.topic-pills--sub .topic-pill { font-size: 12.5px; padding: 5px 12px; }