/* Cache bust: NEXT_PUBLIC_CLUB_CSS_VERSION trong .env */
/* Block T?ng quan trang ch? (4 c?t) ? t?ch kh?i home.css, ch? d?ng Next app */

/* ??? Home overview (4 c?t ? tin / s? ki?n / doanh nh?n / t?i tr?) ??? */
.home-overview-section {
  background: var(--surface-section-white);
  padding-block: clamp(1.75rem, 4.5vw, 3.25rem);
}

.overview-grid {
  display: grid;
  /* Tin t?c 30%; 3 c?t c?n l?i chia d?u 70% */
  grid-template-columns: minmax(0, 30fr) repeat(3, minmax(0, 23.333fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  align-items: stretch;
}

.overview-card {
  background: var(--surface-card);
  border: 1px solid var(--border-ui);
  border-radius: 0.65em;
  box-shadow: 0 0.06em 0.35em rgba(0, 0, 0, 0.04);
  padding: clamp(1rem, 2.4vw, 1.35rem);
  min-width: 0;
}

.overview-card--news {
  padding: clamp(1.05rem, 2.55vw, 1.12rem);
}

.overview-card:not(.overview-card--news) {
  padding: clamp(0.88rem, 2vw, 1.12rem);
}

.overview-card--members {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.member-slider {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.member-list__empty {
  margin: 0;
  flex: 1;
  font-size: clamp(0.78rem, 1.05vw, 0.88rem);
  line-height: 1.5;
  color: var(--text-muted);
}

.overview-card__header {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
  margin-bottom: clamp(0.85rem, 2vw, 1.15rem);
}

.overview-card__header--donation {
  margin-bottom: clamp(0.65rem, 1.5vw, 0.85rem);
}

.overview-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2rem, 4vw, 2.35rem);
  height: clamp(2rem, 4vw, 2.35rem);
  flex-shrink: 0;
  background: var(--brand-red-dark);
  color: #fff;
  border-radius: 0.28em;
}

.overview-card__icon--light {
  background: color-mix(in srgb, white 12%, transparent);
  color: #fff;
}

.overview-card__icon-fa {
  font-size: clamp(0.82rem, 1.45vw, 0.98rem);
  line-height: 1;
}

.overview-card__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: clamp(0.68rem, 1.05vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-red-dark);
  line-height: 1.25;
}

.overview-card__title--donation {
  color: #fff;
  letter-spacing: 0.07em;
}

.overview-card__link {
  flex-shrink: 0;
  font-size: clamp(0.62rem, 0.95vw, 0.72rem);
  font-weight: 500;
  color: var(--brand-red-accent);
  text-decoration: none;
  white-space: nowrap;
}

.overview-card__link:hover {
  text-decoration: underline;
}

.placeholder-img {
  background: color-mix(in srgb, var(--text-muted) 22%, #e4e0db);
  border-radius: 0.4em;
}

.placeholder-img--featured,
.news-featured__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: clamp(0.65rem, 1.8vw, 0.95rem);
  border-radius: 0.4em;
  object-fit: cover;
  object-position: center;
}

/* Tin ph? (item 2, 3) ? thumbnail c? d?nh, ?nh upload + placeholder */
.news-list__thumb {
  flex-shrink: 0;
  display: block;
  width: clamp(3.5rem, 4.2vw, 5.25rem);
  max-width: 5.25rem;
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 0.35em;
  overflow: hidden;
  box-sizing: border-box;
  object-fit: cover;
  object-position: center;
}

.placeholder-img.news-list__thumb,
.placeholder-img--thumb.news-list__thumb {
  background: color-mix(in srgb, var(--text-muted) 22%, #e4e0db);
}

.placeholder-img--thumb {
  flex-shrink: 0;
  border-radius: 0.35em;
}

/* Doanh nh?n ti?u bi?u ? avatar tr?n (?nh upload + placeholder) */
.member-avatar {
  flex-shrink: 0;
  width: clamp(3.5rem, 14vw, 4.5rem);
  height: clamp(3.5rem, 14vw, 4.5rem);
  min-width: clamp(3.5rem, 14vw, 4.5rem);
  min-height: clamp(3.5rem, 14vw, 4.5rem);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand-gold) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold-light) 55%, transparent);
  overflow: hidden;
  box-sizing: border-box;
}

img.member-avatar {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}

.placeholder-img--avatar {
  width: clamp(3.5rem, 14vw, 4.5rem);
  height: clamp(3.5rem, 14vw, 4.5rem);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand-gold) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold-light) 55%, transparent);
}

.placeholder-img--donation {
  width: min(72%, 11.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--brand-gold);
  margin-inline: auto;
}

.news-featured__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.news-featured__link:hover .news-featured__headline {
  color: var(--brand-red-accent);
}

.news-featured__headline {
  margin: 0 0 0.45em;
  font-size: clamp(0.85rem, 1.35vw, 1rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--text-primary);
}

.overview-card--news .news-featured__headline {
  font-size: clamp(0.9rem, 1.45vw, 1.05rem);
}

.news-featured__excerpt {
  margin: 0 0 clamp(0.85rem, 2vw, 1.1rem);
  font-size: clamp(0.72rem, 1.1vw, 0.85rem);
  line-height: 1.55;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: 3.1em;
  overflow: hidden;
}

.overview-card:not(.overview-card--news) .overview-card__title {
  font-size: clamp(0.64rem, 0.98vw, 0.76rem);
}

.overview-card:not(.overview-card--news) .overview-card__icon {
  width: clamp(1.85rem, 3.6vw, 2.15rem);
  height: clamp(1.85rem, 3.6vw, 2.15rem);
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 1.8vw, 0.95rem);
}

.news-list__item {
  display: flex;
  gap: clamp(0.55rem, 1.5vw, 0.75rem);
  align-items: flex-start;
}

.news-list__body {
  min-width: 0;
}

.news-list__title {
  margin: 0 0 0.25em;
  font-size: clamp(0.72rem, 1.1vw, 0.84rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 2.8em;
  overflow: hidden;
}

.news-list__date {
  font-size: clamp(0.62rem, 0.95vw, 0.72rem);
  color: var(--text-muted);
}

.event-list {
  list-style: none;
  margin: 0 0 clamp(1rem, 2.5vw, 1.35rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1.1rem);
}

.event-item {
  display: flex;
  gap: clamp(0.65rem, 1.8vw, 0.9rem);
  align-items: flex-start;
}

.event-date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: clamp(2.85rem, 18%, 3.35rem);
  padding: 0.4em 0.35em;
  background: var(--surface-muted-band);
  border-radius: 0.4em;
  border: 1px solid var(--border-ui);
}

.event-date__day {
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 800;
  line-height: 1;
  color: var(--brand-red-dark);
}

.event-date__ym {
  font-size: clamp(0.58rem, 0.9vw, 0.68rem);
  font-weight: 600;
  color: var(--brand-red-accent);
  margin-top: 0.2em;
}

.event-item__body {
  min-width: 0;
}

.event-item__title {
  margin: 0 0 0.35em;
  font-size: clamp(0.74rem, 1.12vw, 0.86rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
}

.event-item__meta {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0;
  font-size: clamp(0.65rem, 1vw, 0.75rem);
  color: var(--text-muted);
}

.event-item__pin {
  flex-shrink: 0;
  color: var(--brand-red-accent);
  font-size: clamp(0.78rem, 1.05vw, 0.88rem);
  line-height: 1;
}

.overview-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.65em 1em;
  font-family: var(--font-sans);
  font-size: clamp(0.65rem, 1vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0.4em;
  border: none;
  cursor: pointer;
  text-align: center;
}

.overview-btn--events {
  color: #fff;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-red-accent) 85%, #b83025) 0%,
    var(--brand-red-dark) 100%
  );
  box-shadow: 0 0.12em 0.35em rgba(0, 0, 0, 0.12);
}

.overview-btn--events:hover {
  filter: brightness(1.05);
}

.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  min-height: 0;
}

.member-item {
  display: flex;
  gap: clamp(0.65rem, 1.65vw, 0.95rem);
  align-items: center;
}

.member-item__body {
  min-width: 0;
}

.member-item__name {
  margin: 0 0 0.15em;
  font-size: clamp(0.92rem, 1.35vw, 1.08rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-primary);
}

.member-item__role,
.member-item__field {
  margin: 0;
  font-size: clamp(0.65rem, 1vw, 0.76rem);
  line-height: 1.45;
  color: var(--text-muted);
}

.member-pagination {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: clamp(0.85rem, 2vw, 1.1rem);
}

.member-pagination__dot {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-gold) 35%, var(--surface-muted-band));
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.member-pagination__dot:hover {
  background: color-mix(in srgb, var(--brand-gold) 75%, var(--surface-muted-band));
}

.member-pagination__dot.is-active {
  background: var(--brand-red-dark);
  transform: scale(1.15);
}

.donation-card {
  position: relative;
  border: none;
  border-radius: 0.85em;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 0.2em 1.1em rgba(0, 0, 0, 0.14);
  background: linear-gradient(
    165deg,
    #7a1520 0%,
    var(--brand-red-dark) 42%,
    #2d0506 100%
  );
}

.donation-card__inner {
  position: relative;
  color: #fff;
}

.donation-card__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  align-items: start;
}

.donation-card__lead {
  margin: 0 0 clamp(0.85rem, 2vw, 1.1rem);
  font-size: clamp(0.78rem, 1.2vw, 0.92rem);
  line-height: 1.5;
  text-align: left;
  color: color-mix(in srgb, white 92%, var(--brand-gold));
}

.donation-card__figure {
  --donation-photo-size: min(48vw, 11.5rem);
  display: flex;
  justify-content: center;
  margin-bottom: clamp(0.85rem, 2vw, 1.1rem);
}

/* ?nh upload ? c?ng khung tr?n nhu placeholder */
.donation-card__photo {
  display: block;
  width: var(--donation-photo-size);
  height: var(--donation-photo-size);
  min-width: var(--donation-photo-size);
  min-height: var(--donation-photo-size);
  max-width: var(--donation-photo-size);
  max-height: var(--donation-photo-size);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 3px solid var(--brand-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold-light) 55%, transparent);
}

.overview-btn--donation {
  max-width: 16rem;
  margin-inline: auto;
  margin-bottom: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--brand-red-dark);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-gold) 28%, #fff8e4) 0%,
    var(--brand-gold) 45%,
    color-mix(in srgb, var(--brand-gold) 78%, #8a5a12) 100%
  );
  border: 1px solid color-mix(in srgb, var(--brand-gold) 55%, #6b4a0a);
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.15);
}

.overview-btn--donation:hover {
  filter: brightness(1.04);
}

.donation-bank {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}

.donation-bank__row {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  font-size: clamp(0.65rem, 0.98vw, 0.76rem);
  line-height: 1.45;
  color: color-mix(in srgb, white 94%, var(--brand-gold));
}

.donation-bank__icon {
  flex-shrink: 0;
  margin-top: 0.12em;
  color: var(--brand-gold-light);
  opacity: 0.95;
  font-size: clamp(0.85em, 2.4vw, 0.98em);
  line-height: 1;
  width: 1.15em;
  text-align: center;
}

.donation-qr {
  position: relative;
  width: clamp(2.65rem, 14vw, 3.65rem);
  height: clamp(2.65rem, 14vw, 3.65rem);
  flex-shrink: 0;
  justify-self: end;
  align-self: end;
  aspect-ratio: 1;
  border-radius: 0.3em;
  object-fit: cover;
  object-position: center;
  background: linear-gradient(135deg, #f2f0ed 0%, #d8d4cf 100%);
  border: 2px solid color-mix(in srgb, white 55%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand-red-accent) 25%, transparent);
}

/* Responsive ? d?ng b? home.css (992px / 640px) */
@media (max-width: 992px) {
  .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}