/*
 * Social icons dùng chung — footer inline + cụm ở section About Us.
 * Thứ tự ưu tiên (LinkedIn > Instagram > Facebook > YouTube) do PHP quyết, CSS chỉ lo hình thức.
 */

.social-icons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-sm);
}

.social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	transition: color var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.social-icon:hover,
.social-icon:focus-visible {
	color: var(--color-black);
	background: var(--color-gold);
	border-color: var(--color-gold);
}

/* ---------- Social ở section About Us ---------- */

/* Nút nằm TRÊN, dãy icon nằm DƯỚI.
   grid-template-columns: min-content → bề rộng cột = bề rộng tối thiểu của dãy icon
   (icon không co được), còn chữ trong nút thì xuống dòng theo. Nhờ vậy khung nút
   luôn RỘNG ĐÚNG BẰNG dãy logo bên dưới, dù sau này thêm/bớt mạng xã hội. */
.about-social {
	display: grid;
	grid-template-columns: min-content;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

/* Mặc định xám; bấm nút "Follow us on Social Media" thì hiện màu (JS thêm .is-revealed) */
.about-social__icons {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.social-icons--about .social-icon {
	border-color: transparent;
	color: var(--color-text-muted);
	transition: color var(--transition-base);
}

/* Bấm nút → mỗi icon hiện ĐÚNG màu thương hiệu của mạng đó (JS thêm .is-revealed) */
.about-social__icons.is-revealed .social-icon--linkedin  { color: #0a66c2; }
.about-social__icons.is-revealed .social-icon--instagram { color: #e4405f; }
.about-social__icons.is-revealed .social-icon--facebook  { color: #1877f2; }
.about-social__icons.is-revealed .social-icon--youtube   { color: #ff0000; }

.social-icons--about .social-icon:hover,
.social-icons--about .social-icon:focus-visible {
	color: var(--color-gold);
	background: transparent;
	border-color: transparent;
}

/* ---------- Social feeds live (Smash Balloon) ---------- */

/* Thu nhỏ + căn giữa để ảnh feed không quá lớn so với nhịp trang.
   !important cần thiết vì Smash Balloon đặt width inline trên #sb_instagram. */
.social-feed {
	max-width: 880px;
	margin-inline: auto;
	margin-bottom: var(--space-md);
}

.social-feed #sb_instagram,
.social-feed .fb_iframe_widget,
.social-feed .cff-wrapper {
	width: 100% !important;
	max-width: 100% !important;
}

.social-feed__label {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.ig-feed {
	min-height: 200px;
	margin-bottom: var(--space-md);
}

.ig-feed__hint {
	margin-top: var(--space-sm);
	padding: var(--space-xs) var(--space-sm);
	border: 1px dashed var(--color-border);
	font-size: var(--fs-small);
	color: var(--color-text-muted);
}