.vg-library-header {
  padding-block: clamp(var(--s6), 4vw, var(--s12));
  background: linear-gradient(120deg, var(--surface) 35%, var(--bg-secondary));
  border-bottom: 1px solid var(--border);
}
.vg-library-intro { display: grid; gap: var(--s2); }
.vg-library-intro .vg-h1 { color: var(--forest); }
.vg-library-intro .vg-overline { color: var(--accent); }
.vg-library-search { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: end; max-width: 46rem; }
.vg-library-search > label { flex: 1 1 12rem; min-width: 0; }
.vg-library-search input[type=search] { min-height: 48px; }
.vg-library-suggestions .vg-button { background: var(--bg-secondary); }
.vg-library-layout { display: grid; min-width: 0; gap: var(--s6); padding-block: var(--s8) var(--s16); }
.vg-library-results, .vg-library-sidebar { min-width: 0; }
.vg-library-results { align-content: start; }
.vg-library-filter-form summary { padding-block: var(--s2); cursor: pointer; font-weight: 700; color: var(--forest); }
.vg-library-filter-form details + details { border-top: 1px solid var(--border); }
.vg-library-options { max-height: 14rem; overflow: auto; }
.vg-library-options label { display: flex; align-items: center; gap: var(--s2); min-height: 40px; }
.vg-library-options input { accent-color: var(--forest); flex: none; }
.vg-library-toolbar { gap: var(--s3); padding-block-end: var(--s4); border-bottom: 1px solid var(--border); }
.vg-library-toolbar > .vg-row { justify-content: space-between; }
.vg-library-sort { min-width: 0; }
.vg-library-sort select { min-height: 44px; max-width: 100%; font: inherit; color: inherit; border: 1px solid var(--control-border); background: var(--surface); border-radius: var(--radius); padding: var(--s2); }
/* View switch reads as one segmented control. */
.vg-library-view { gap: 0; padding: 2px; border: 1px solid var(--control-border); border-radius: var(--radius); }
.vg-library-view .vg-nav-item { min-height: 40px; border-radius: calc(var(--radius) - 2px); }
.vg-library-cards { display: grid; gap: clamp(var(--s2), 1.4vw, var(--s4)); }
.vg-library-cards--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-library-cards .vg-card { padding: var(--s2); gap: var(--s2); }
.vg-library-cards--grid .vg-card { max-width: none; grid-template-rows: auto 1fr; }
.vg-library-cards .vg-cover { border-radius: calc(var(--radius) - var(--s1)); }
.vg-library-cards .vg-card-meta { padding: var(--s1); }
.vg-library-cards .vg-card-title {
  display: block;
  overflow: visible;
  font-size: clamp(1rem, .85rem + .5vw, 1.25rem);
}
.vg-library-cards .vg-card-title a { color: var(--forest); text-decoration: none; }
.vg-library-cards .vg-card-title a:is(:hover, :focus-visible) { text-decoration: underline; }
.vg-library-cards .vg-card-labels { gap: var(--s1) var(--s2); }
.vg-library-cards--grid .vg-card-labels:not(:empty) { display: grid; justify-items: start; }
.vg-library-cards .vg-card-tags { gap: var(--s1); }
.vg-library-cards .vg-card-tags .vg-badge {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 1rem;
  font-size: .75rem;
  line-height: 1.3;
  text-decoration: none;
}
.vg-library-cards .vg-card-tags .vg-badge:is(:hover, :focus-visible) { background: var(--bg-secondary); text-decoration: underline; }
.vg-library-cards--list .vg-card {
  grid-template-columns: clamp(4.5rem, 15%, 8rem) minmax(0, 1fr);
  align-items: start;
  padding: var(--s3);
  gap: var(--s3);
}
.vg-dialog-capable .vg-site [data-vg-open].vg-library-filter-trigger, .vg-site.vg-site-nav-ready .vg-library-filter-trigger { display: none; }
.vg-library-pagination { padding-block-start: var(--s4); }
.vg-library-drawer.vg-dialog { position: fixed; inset: auto 0 0; width: min(100%, 38rem); height: auto; max-height: 85dvh; margin: 0 auto; overflow: auto; overscroll-behavior: contain; }
.vg-library-drawer .vg-library-sidebar-title { display: none; }
.vg-library-drawer .vg-library-filter-form { margin-block-start: var(--s3); margin-block-end: env(safe-area-inset-bottom, 0px); }
@media (max-width: 39.999rem) {
  .vg-library-sort { flex-basis: 100%; gap: var(--s2); }
  .vg-library-view .vg-nav-item { padding-inline: var(--s3); }
}
@media (max-width: 63.999rem) {
  .vg-dialog-capable .vg-library-sidebar, .vg-library-ready .vg-library-sidebar { display: none; }
  .vg-dialog-capable .vg-site .vg-library [data-vg-open].vg-library-filter-trigger,
  .vg-site.vg-site-nav-ready .vg-library-ready .vg-library-filter-trigger { display: inline-flex; }
}
@media (min-width: 40rem) {
  .vg-library-cards--grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
}
@media (min-width: 64rem) {
  .vg-library-layout { grid-template-columns: clamp(15rem, 22vw, 17rem) minmax(0, 1fr); }
}

/* UX/UI giai đoạn 2 — thẻ lưới dùng chung kiểu với trang chủ */
.vg-library-cards--grid .vg-card { padding: 0; gap: 0; }
.vg-library-cards--grid .vg-cover { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.vg-library-cards--grid .vg-card-meta { padding: var(--s3); }
.vg-library-cards--grid .vg-card-labels:not(:empty) { display: flex; }
.vg-library-cards .vg-card-tags .vg-badge:is(:hover, :focus-visible) { text-decoration: none; }