/* Trang lưu trữ Khuyến mãi: hero dùng chuẩn .vf-hero (components.css), file này chỉ lo danh sách. */
.vf-promo__list { padding-block: var(--block-py); }
.vf-promo__grid { display: grid; gap: var(--space-6); }
.vf-promo-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.vf-promo-card__thumb { display: block; aspect-ratio: 3 / 2; }
.vf-promo-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-promo-card__body { padding: var(--space-5); }
.vf-promo-card__title { margin: 0 0 var(--space-2); font-size: var(--text-xl); line-height: var(--leading-snug); }
.vf-promo-card__title a { color: var(--color-text-primary); text-decoration: none; }
.vf-promo-card__title a:hover { color: var(--color-brand-primary); }
.vf-promo-card__body p { margin: 0 0 var(--space-3); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.vf-promo-card__more { font-weight: var(--font-bold); text-decoration: none; }
.vf-promo__empty { max-width: var(--container-narrow); }
.vf-promo__empty h2 { margin: 0 0 var(--space-3); font-size: var(--text-2xl); font-weight: var(--font-semibold); }
.vf-promo__empty p { margin: 0; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
@media (min-width: 768px) { .vf-promo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vf-promo__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vf-promo-badge { display: inline-block; margin-bottom: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full, 999px); background: var(--color-brand-light); color: var(--color-brand-primary); font-size: var(--text-sm); font-weight: var(--font-bold); }
.vf-promo-badge--ended { background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.vf-promo-single__cover { margin: 0 0 var(--space-8); }
.vf-promo-single__cover img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.vf-promo-single__body { padding-block: var(--block-py); }
.vf-promo-single__body .vf-prose { max-width: var(--container-narrow); }
.vf-promo-single__back { display: inline-block; margin-top: var(--space-8); font-weight: var(--font-bold); text-decoration: none; }
.vf-promo-single__back:hover, .vf-promo-single__back:focus { text-decoration: underline; }
.vf-promo-card__body .vf-promo-card__benefit { color: var(--color-brand-primary); margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-brand-primary); line-height: var(--leading-snug); }
.vf-promo-card__body .vf-promo-card__meta { font-size: var(--text-sm); }
.vf-promo-facts { display: grid; gap: var(--space-3); margin: 0 0 var(--space-8); }
.vf-promo-facts__item { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.vf-promo-facts__item--benefit { background: var(--color-brand-light); border-color: transparent; }
.vf-promo-facts dt { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-promo-facts dd { margin: 0; font-size: var(--text-lg); font-weight: var(--font-bold); line-height: var(--leading-snug); }
.vf-promo-facts__item--benefit dd { color: var(--color-brand-primary); font-size: var(--text-xl); }
.vf-promo-facts a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.vf-promo-single__conditions { max-width: var(--container-narrow); margin: 0 0 var(--space-8); }
.vf-promo-single__conditions h2 { margin: 0 0 var(--space-3); font-size: var(--text-xl); }
.vf-promo-single__conditions ul { margin: 0; padding-left: var(--space-5); line-height: var(--leading-relaxed); }
.vf-promo-single__note { max-width: var(--container-narrow); margin: var(--space-6) 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); }
.vf-promo-single__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 768px) { .vf-promo-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }