/* Solo Media — style cho dynamic block. Dùng biến màu từ theme.json. */

:root {
	--solo-gold: var(--wp--preset--color--gold, #FDB813);
	--solo-ink: var(--wp--preset--color--ink, #1A1A1A);
	--solo-ink-900: var(--wp--preset--color--ink-900, #0F0F0F);
	--solo-muted: var(--wp--preset--color--muted, #A1A1A1);
	--solo-white: var(--wp--preset--color--white, #FFFFFF);
}

/* ---------- Lưới ---------- */
.solo-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(3, 1fr);
}
.solo-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.solo-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.solo-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .solo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .solo-grid { grid-template-columns: 1fr; } }

.solo-grid__heading,
.solo-related__heading {
	margin: 0 0 1.5rem;
	font-weight: 700;
}

/* ---------- Card ---------- */
.solo-card {
	background: var(--solo-ink);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .2s ease, border-color .2s ease;
}
.solo-card:hover { transform: translateY(-4px); border-color: var(--solo-gold); }
.solo-card__link { display: block; color: inherit; text-decoration: none; }
.solo-card__cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--solo-ink-900); }
.solo-card__img,
.solo-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.solo-card__tag {
	position: absolute; top: 10px; left: 10px;
	background: var(--solo-gold); color: var(--solo-ink-900);
	font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px;
}
.solo-card__body { padding: 1.25rem; }
.solo-card__kpi { margin-bottom: .5rem; }
.solo-card__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 .25rem; color: var(--solo-white); }
.solo-card__client { font-size: .85rem; color: var(--solo-muted); margin: 0 0 .5rem; }
.solo-card__summary { font-size: .9rem; color: var(--solo-muted); margin: 0 0 .75rem; line-height: 1.55; }
.solo-card__more { font-size: .85rem; font-weight: 600; color: var(--solo-gold); }

/* ---------- KPI ---------- */
.solo-kpi { display: flex; flex-direction: column; }
.solo-kpi__value { font-weight: 800; color: var(--solo-gold); line-height: 1; }
.solo-kpi__label { color: var(--solo-muted); }
.solo-kpi--card .solo-kpi__value { font-size: 1.4rem; }
.solo-kpi--card .solo-kpi__label { font-size: .8rem; }
.solo-kpi--band .solo-kpi__value { font-size: clamp(2rem, 4vw, 3rem); }
.solo-kpi--band .solo-kpi__label { font-size: .95rem; margin-top: .35rem; }

/* ---------- Dải KPI (single) ---------- */
.solo-kpi-band {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.5rem;
	padding: 2rem;
	background: var(--solo-ink);
	border-top: 2px solid var(--solo-gold);
	border-radius: 12px;
	text-align: center;
}
.solo-kpi-band .solo-kpi { align-items: center; }

/* ---------- Bối cảnh / Giải pháp ---------- */
.solo-cs { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
@media (max-width: 768px) { .solo-cs { grid-template-columns: 1fr; gap: 1.5rem; } }
.solo-cs__title { font-size: 1.25rem; font-weight: 600; margin: 0 0 .75rem; }
.solo-cs__solution .solo-cs__title { color: var(--solo-gold); }
.solo-cs__body { color: var(--solo-muted); line-height: 1.7; }
.solo-cs__body :where(p, li) { color: var(--solo-muted); }

/* ---------- Testimonial ---------- */
.solo-testimonial {
	margin: 0; padding: 2rem;
	background: var(--solo-ink);
	border-left: 3px solid var(--solo-gold);
	border-radius: 10px;
}
.solo-testimonial__quote { font-size: 1.2rem; line-height: 1.6; color: var(--solo-white); margin: 0 0 1.25rem; }
.solo-testimonial__cite { display: flex; align-items: center; gap: .85rem; font-style: normal; }
.solo-testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.solo-testimonial__meta { display: flex; flex-direction: column; }
.solo-testimonial__name { color: var(--solo-white); }
.solo-testimonial__title { color: var(--solo-muted); font-size: .85rem; }

/* ---------- Related ---------- */
.solo-related { margin-top: 3rem; }