.fux-tiktok {
	--fux-tiktok-max-width: 420px;
	--fux-tiktok-radius: 14px;
	--fux-tiktok-ratio: 9 / 16;
	--fux-tiktok-ratio-fallback: 177.7778%;
	--fux-tiktok-caption-size: 14px;
	--fux-tiktok-caption-gap: 10px;
	--fux-tiktok-caption-color: inherit;
	display: block;
	width: 100%;
	max-width: var(--fux-tiktok-max-width);
	margin: 0;
}

.fux-tiktok--align-left {
	margin-right: auto;
	margin-left: 0;
}

.fux-tiktok--align-center {
	margin-right: auto;
	margin-left: auto;
}

.fux-tiktok--align-right {
	margin-right: 0;
	margin-left: auto;
}

.fux-tiktok__player {
	position: relative;
	width: 100%;
	aspect-ratio: var(--fux-tiktok-ratio);
	overflow: hidden;
	background: #000;
	border-radius: var(--fux-tiktok-radius);
	isolation: isolate;
}

.fux-tiktok__frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

.fux-tiktok--shadow-small .fux-tiktok__player {
	box-shadow: 0 5px 16px rgb(0 0 0 / 14%);
}

.fux-tiktok--shadow-medium .fux-tiktok__player {
	box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
}

.fux-tiktok--shadow-large .fux-tiktok__player {
	box-shadow: 0 18px 48px rgb(0 0 0 / 28%);
}

.fux-tiktok__caption {
	margin-top: var(--fux-tiktok-caption-gap);
	font-size: var(--fux-tiktok-caption-size);
	line-height: 1.55;
	color: var(--fux-tiktok-caption-color);
	overflow-wrap: anywhere;
}

.fux-tiktok__caption > :first-child {
	margin-top: 0;
}

.fux-tiktok__caption > :last-child {
	margin-bottom: 0;
}

.fux-tiktok--caption-left .fux-tiktok__caption {
	text-align: left;
}

.fux-tiktok--caption-center .fux-tiktok__caption {
	text-align: center;
}

.fux-tiktok--caption-right .fux-tiktok__caption {
	text-align: right;
}

.fux-tiktok-placeholder {
	width: 100%;
	min-height: 160px;
	padding: 28px 20px;
	border: 1px dashed #9ca3af;
	border-radius: 12px;
	background: #f8fafc;
	color: #475569;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	display: grid;
	place-items: center;
}

@supports not (aspect-ratio: 1 / 1) {
	.fux-tiktok__player {
		height: 0;
		padding-top: var(--fux-tiktok-ratio-fallback);
	}
}

/* Facebook/tiktok video — nhiều video trong một element, responsive và tải theo yêu cầu. */
.fux-social { width: 100%; min-width: 0; container-type: inline-size; }
.fux-social .fux-social__more { display:block; min-height:44px; margin:24px auto 0; padding:10px 24px; border:1px solid var(--fux-accent); border-radius:var(--fux-button-radius); background:var(--fux-button-bg); color:var(--fux-button-fg); font:inherit; cursor:pointer; text-transform:none; }
.fux-social .fux-social__more:hover { filter:brightness(.92); }
.fux-social .fux-social__more:focus-visible { outline:3px solid var(--fux-accent); outline-offset:3px; }
.fux-social__list {
	display: grid;
	grid-template-columns: repeat(var(--fux-cols, 3), minmax(0, 1fr));
	gap: var(--fux-gap, 20px);
	align-items: start;
}
.fux-social__list > * { min-width: 0; }
.fux-social__list > .fux-tiktok { width: 100%; }
.fux-social--stack .fux-social__list { grid-template-columns: minmax(0, 1fr); }
.fux-social--scroll .fux-social__list {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 4px 2px 20px;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--fux-accent) var(--fux-background);
}
.fux-social--scroll .fux-social__list > * {
	flex: 0 0 calc((100% - (var(--fux-cols, 3) - 1) * var(--fux-gap, 20px)) / var(--fux-cols, 3));
	margin: 0;
	scroll-snap-align: start;
}
.fux-tiktok .fux-social__source {
	display: flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 6px; color: var(--fux-text);
	font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.fux-tiktok .fux-social__load {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	width: 100%; height: 100%; min-height: 44px; margin: 0; padding: 20px;
	border: 1px solid var(--fux-border); border-radius: inherit; background: var(--fux-background); color: var(--fux-text);
	font: inherit; line-height: 1.5; text-transform: none; letter-spacing: normal;
	white-space: normal; cursor: pointer; box-shadow: none;
}
.fux-social__load > span { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--fux-accent); border-radius: var(--fux-button-radius); background:var(--fux-button-bg); color:var(--fux-button-fg); }
.fux-social__load > small { max-width: 190px; color: inherit; font-size: 12px; font-weight: 400; }
.fux-tiktok .fux-social__load:hover { background: var(--fux-background); color: var(--fux-text); }
.fux-tiktok .fux-social__load:hover > span { filter:brightness(.92); }
.fux-tiktok [hidden] { display: none !important; }
.fux-tiktok :is(button, a, iframe):focus-visible,
.fux-social__list:focus-visible { outline: 3px solid var(--fux-accent); outline-offset: 3px; }
@media (max-width: 849px) {
	.fux-social__list { --fux-cols: var(--fux-tablet, 2); }
}
@media (max-width: 549px) {
	.fux-social__list { --fux-cols: var(--fux-mobile, 1); }
	.fux-social--scroll .fux-social__list > * { flex-basis: calc(88% / var(--fux-mobile, 1)); }
}
@container (max-width: 420px) {
	.fux-social__list { grid-template-columns: minmax(0, 1fr); }
	.fux-social--scroll .fux-social__list > * { flex-basis: 88%; }
}