.vg-home-hero { position: relative; isolation: isolate; padding-block: var(--s10) var(--s12); }
.vg-home-hero--featured { display: grid; align-items: end; }
.vg-home-hero-art, .vg-home-hero-art::after { position: absolute; inset: 0; }
.vg-home-hero-art { z-index: -1; }
.vg-home-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.vg-home-hero-art::after {
  content: '';
  background: linear-gradient(180deg, transparent 5%, rgba(15, 31, 27, .35) 23%, rgba(15, 31, 27, .92) 55%, #101e1a 100%);
}
.vg-home-hero-art + .vg-wrap { padding-block-start: clamp(10rem, 42vw, 17rem); }
.vg-home-hero .vg-card--featured {
  display: block; max-width: 36rem; background: transparent; border: 0; padding: 0; color: inherit;
}
.vg-home-hero .vg-card-meta { gap: var(--s3); }
.vg-home-hero .vg-h1 { font-size: clamp(2rem, 5vw, 4rem); text-wrap: balance; }
.vg-home-hero .vg-card-meta > .vg-muted { color: var(--sand); }
.vg-home-hero .vg-button--outline { color: var(--on-dark); border-color: var(--sand); }
.vg-home-hero .vg-button--outline:hover { color: var(--forest); }
.vg-home-hero a:focus-visible { outline-color: var(--sand); }
.vg-home-hero-actions { margin-block-start: var(--s2); }
.vg-home-cards, .vg-home-genre-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-home-cards .vg-card--standard {
  max-width: none;
  padding: 0;
  gap: 0;
  grid-template-rows: auto 1fr;
}
.vg-home-cards .vg-card--standard .vg-cover {
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.vg-home .vg-card-cover-link { position: absolute; inset: 0; }
.vg-home .vg-card-cover-link:focus-visible { outline: 3px solid var(--ivory); outline-offset: -4px; box-shadow: inset 0 0 0 7px var(--midnight); }
.vg-home-cards .vg-card--standard .vg-card-meta { padding: var(--s3); }
.vg-home-cards .vg-card--standard .vg-card-title { font-size: clamp(1rem, 2vw, 1.4rem); }
.vg-personal-home .vg-personal-card,
.vg-home-recent .vg-card {
  grid-template-columns: clamp(5rem, 24vw, 7rem) minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
.vg-personal-home .vg-personal-card > .vg-cover,
.vg-home-recent .vg-card > .vg-cover {
  align-self: stretch;
  aspect-ratio: auto;
  border-start-start-radius: calc(var(--radius) - 1px);
  border-end-start-radius: calc(var(--radius) - 1px);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.vg-personal-home .vg-personal-card > .vg-stack,
.vg-home-recent .vg-card-meta { padding: var(--s4); }
.vg-home-cards .vg-card-title a { color: var(--forest); }
.vg-home :is(.vg-card-title, .vg-card-tags, .vg-personal-heading, .vg-personal-card .vg-h4) a,
.vg-home .vg-home-chapter { text-decoration: none; }
.vg-home :is(.vg-card-title, .vg-personal-heading, .vg-personal-card .vg-h4) a:hover,
.vg-home .vg-home-chapter:hover { color: var(--hover); }
.vg-home .vg-card-tags a:hover { background: var(--border); }
.vg-home-recent .vg-home-cards { grid-template-columns: minmax(0, 1fr); }
.vg-home-recent .vg-card-title { font-size: clamp(1.125rem, 2.4vw, 1.5rem); }
.vg-home-chapter { width: fit-content; max-width: 100%; }
.vg-home-ranking-panel {
  display: grid;
  align-items: start;
  gap: var(--s4) var(--s8);
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--surface);
}
.vg-home-ranking-intro { gap: var(--s2); }
.vg-home-ranking-intro p { color: var(--muted); }
.vg-home-ranking-list { list-style: none; margin: 0; padding: 0; }
.vg-home-ranking-list li + li { border-top: 1px solid var(--border); }
.vg-home-ranking-entry {
  display: grid;
  grid-template-columns: 1.75rem 2rem minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  color: var(--text);
  text-decoration: none;
}
.vg-home-ranking-entry:hover strong { color: var(--accent); text-decoration: underline; }
.vg-home-ranking-number { color: var(--accent); font-variant-numeric: tabular-nums; }
.vg-home-ranking-list li:first-child .vg-home-ranking-number { font-weight: 700; }
.vg-home-ranking-entry .vg-cover { font-size: .65rem; border-radius: .25rem; }
.vg-home-ranking-book { display: grid; min-width: 0; overflow-wrap: anywhere; }
.vg-home-ranking-link { justify-self: start; }
@media (min-width: 48rem) {
  .vg-home-ranking-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr); grid-template-rows: auto 1fr; }
  .vg-home-ranking-list, .vg-home-ranking-panel > p { grid-column: 2; grid-row: 1 / span 2; }
  .vg-home-ranking-link { grid-column: 1; grid-row: 2; }
}
.vg-home-genre-grid { list-style: none; margin: 0; padding: 0; }
.vg-home-genre {
  display: grid; height: 100%; min-height: 7rem; align-content: space-between; gap: var(--s2);
  color: var(--forest); text-decoration: none; background: var(--bg-secondary);
  transition: border-color var(--ease);
}
.vg-home-genre .vg-h3 { font-size: clamp(1rem, 2.5vw, 1.5rem); }
.vg-home-genre:hover { border-color: var(--accent); }
.vg-home-explore { border-bottom: 0; }
.vg-home-explore .vg-panel { background: var(--bg-secondary); padding: clamp(1.25rem, 5vw, 3rem); }
@media (min-width: 48rem) {
  .vg-home-hero--featured { align-items: center; min-height: clamp(30rem, 42vw, 44rem); }
  .vg-home-hero-art img { object-position: 75% center; }
  .vg-home-hero-art--cover img { object-position: center 30%; }
  .vg-home-hero-art::after {
    background: linear-gradient(90deg, rgba(15, 31, 27, .96), rgba(15, 31, 27, .78) 38%, rgba(15, 31, 27, .2) 64%, transparent 82%);
  }
  .vg-home-hero-art + .vg-wrap { padding-block-start: 0; }
  .vg-home-hero .vg-card--featured { max-width: min(36rem, 55%); }
  .vg-home-hero .vg-card-meta { gap: var(--s4); }
  .vg-home-cards, .vg-home-genre-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .vg-home-recent .vg-home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .vg-home-hero { padding-block: var(--s16); }
  .vg-home-cards, .vg-home-genre-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* UX/UI giai đoạn 2 — trang chủ */
.vg-home-hero .vg-card-count { color: var(--sand); }
.vg-home-hero .vg-card-count::before { color: var(--sand); }

.vg-home-updates { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--border); }
.vg-home-update {
  position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  gap: var(--s3); align-items: center; padding-block: var(--s3); border-bottom: 1px solid var(--border);
}
.vg-home-update-cover { width: 2.75rem; border-radius: .25rem; }
.vg-home-update-body { display: grid; gap: 0; min-width: 0; }
.vg-home-update-novel { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.vg-home-update-novel::after { content: ''; position: absolute; inset: 0; }
.vg-home-update-chapter {
  position: relative; z-index: 1; width: fit-content; max-width: 100%; padding-block: var(--s1);
  color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vg-home-update:hover .vg-home-update-novel, .vg-home-update-chapter:hover { color: var(--accent); text-decoration: underline; }
.vg-home-update-time { white-space: nowrap; font-variant-numeric: tabular-nums; }

.vg-home-genre-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.vg-home-genre { min-height: 5.5rem; }

@media (max-width: 47.999rem) {
  /* Picks and finished stories scroll sideways on phones instead of stacking. */
  .vg-home :is(.vg-home-picks, .vg-home-completed) .vg-home-cards {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 46%);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); scroll-padding-inline: var(--s4); padding-block-end: var(--s2);
  }
  .vg-home :is(.vg-home-picks, .vg-home-completed) .vg-home-cards::-webkit-scrollbar { display: none; }
  .vg-home :is(.vg-home-picks, .vg-home-completed) .vg-home-cards > * { scroll-snap-align: start; }
}
@media (min-width: 48rem) {
  .vg-home-updates { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); }
}

/* Bảng xếp hạng trên trang chủ */
.vg-home-board-head { display: grid; gap: var(--s4); margin-block-end: var(--s5); }
.vg-home-board-intro { display: grid; gap: var(--s1); }
.vg-home-board-tabs {
  display: flex; gap: var(--s1); padding: 3px; width: fit-content; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; background: var(--bg-secondary); border-radius: 999px;
}
.vg-home-board-tabs::-webkit-scrollbar { display: none; }
.vg-home-board-tab {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--s4);
  border-radius: 999px; color: var(--text-secondary); font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap;
}
.vg-home-board-tab:hover { color: var(--accent); }
.vg-home-board-tab[aria-selected=true] { background: var(--surface); color: var(--forest); box-shadow: 0 1px 3px rgb(23 29 27 / .14); }
.vg-home-board-panel:focus { outline: none; }

.vg-home-board-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--s6); }
.vg-home-board-item {
  position: relative; display: grid; grid-template-columns: 2rem 2.75rem minmax(0, 1fr); gap: var(--s3);
  align-items: center; padding-block: var(--s3); border-bottom: 1px solid var(--border);
}
.vg-home-board-rank { font: 700 1.125rem/1 var(--serif); color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.vg-home-board-item:nth-child(-n+3) .vg-home-board-rank { color: var(--accent); }
.vg-home-board-cover { width: 2.75rem; border-radius: .25rem; }
.vg-home-board-body { display: grid; gap: 2px; min-width: 0; }
.vg-home-board-title { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.vg-home-board-title::after { content: ''; position: absolute; inset: 0; }
.vg-home-board-item:hover .vg-home-board-title { color: var(--accent); text-decoration: underline; }
.vg-home-board-metric { color: var(--success); }
.vg-home-board-item:not(.vg-home-board-item--lead) .vg-home-board-body > .vg-small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* The leader gets a larger card with its cover. */
.vg-home-board-item--lead {
  grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s4); align-items: end;
  padding: var(--s4); margin-block-end: var(--s2); border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(135deg, var(--surface), var(--bg-secondary));
}
.vg-home-board-item--lead .vg-home-board-rank {
  position: absolute; z-index: 1; inset: var(--s2) auto auto var(--s2); padding: var(--s1) var(--s2);
  border-radius: .375rem; background: var(--forest); color: var(--on-dark) !important; font-size: 1rem;
}
.vg-home-board-item--lead .vg-home-board-cover { grid-column: 1; grid-row: 1; width: 6.5rem; border-radius: calc(var(--radius) - 2px); box-shadow: 0 6px 18px rgb(23 29 27 / .18); }
.vg-home-board-item--lead .vg-home-board-body { gap: var(--s1); }
.vg-home-board-item--lead .vg-home-board-title { font: 600 clamp(1.25rem, 3vw, 1.75rem)/1.25 var(--serif); letter-spacing: -.02em; }
.vg-home-board-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-block-start: var(--s4); }

@media (min-width: 48rem) {
  .vg-home-board-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  /* Leader on the left across three rows; ranks 2–6 run down two columns beside it. */
  .vg-home-board-list { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); grid-auto-flow: column; }
  .vg-home-board-item--lead { grid-row: 1 / span 3; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); margin-block-end: 0; align-self: stretch; align-items: center; }
  .vg-home-board-item--lead .vg-home-board-cover { width: 100%; }
  .vg-home-board-list--single { grid-template-columns: minmax(0, 36rem); }
}