/* PS UX Builder Addons — Thẻ bài viết dùng chung (Nhóm B) */

.ps-uxb-post {
	--ps-post-accent: #446084;
	--ps-post-radius: 8px;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--ps-post-bg, transparent);
	border-radius: var(--ps-post-radius);
	overflow: hidden;
}

.ps-uxb-post__thumb { position: relative; display: block; overflow: hidden; background: rgba(15, 27, 43, .06); border-radius: inherit; }
.ps-uxb-post__thumb img,
.ps-uxb-post__image { display: block; width: 100%; height: auto; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.ps-uxb-post__thumb--1-1 { aspect-ratio: 1 / 1; }
.ps-uxb-post__thumb--4-3 { aspect-ratio: 4 / 3; }
.ps-uxb-post__thumb--3-2 { aspect-ratio: 3 / 2; }
.ps-uxb-post__thumb--16-9 { aspect-ratio: 16 / 9; }
.ps-uxb-post__thumb--21-9 { aspect-ratio: 21 / 9; }
.ps-uxb-post__thumb--3-4 { aspect-ratio: 3 / 4; }
.ps-uxb-post__thumb[class*="ps-uxb-post__thumb--"] img { width: 100%; height: 100%; object-fit: cover; }

.ps-uxb-post__badge-wrap { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.ps-uxb-post__badge { display: inline-flex; align-items: center; max-width: 100%; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 5px 16px rgba(15, 27, 43, .12); color: var(--ps-post-accent) !important; font-size: .66rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.ps-uxb-post--compact .ps-uxb-post__badge-wrap,
.ps-uxb-post--row .ps-uxb-post__badge-wrap { top: clamp(5px, calc(var(--ps-pl-thumb, 90px) * .08), 12px); left: clamp(5px, calc(var(--ps-pl-thumb, 90px) * .08), 12px); gap: clamp(3px, calc(var(--ps-pl-thumb, 90px) * .04), 6px); max-width: calc(100% - clamp(10px, calc(var(--ps-pl-thumb, 90px) * .16), 24px)); }
.ps-uxb-post--compact .ps-uxb-post__badge,
.ps-uxb-post--row .ps-uxb-post__badge { max-width: 100%; padding: clamp(3px, calc(var(--ps-pl-thumb, 90px) * .055), 5px) clamp(5px, calc(var(--ps-pl-thumb, 90px) * .11), 10px); font-size: clamp(.5rem, calc(var(--ps-pl-thumb, 90px) * .0073), .66rem); letter-spacing: clamp(.03em, calc(var(--ps-pl-thumb, 90px) * .0009), .08em); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.ps-uxb-post__badge:hover { background: var(--ps-post-accent); color: #fff !important; filter: brightness(1.04); }
.ps-uxb-post__cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: .65em; }
.ps-uxb-post__cats .ps-uxb-post__badge { padding: 4px 9px; border-color: rgba(68, 96, 132, .18); background: rgba(68, 96, 132, .08); box-shadow: none; color: var(--ps-post-accent) !important; }
@supports (background: color-mix(in srgb, #000 10%, #fff)) {
	.ps-uxb-post__cats .ps-uxb-post__badge { border-color: color-mix(in srgb, var(--ps-post-accent) 20%, transparent); background: color-mix(in srgb, var(--ps-post-accent) 9%, transparent); }
}

.ps-uxb-post__body { flex: 1 1 auto; min-width: 0; padding-top: .7em; }
.ps-uxb-post--no-image .ps-uxb-post__body { padding-top: 0; }
.ps-uxb-post__title { margin: 0 0 .35em; font-size: var(--ps-post-card-title-size, var(--ps-post-title-size, 1.05rem)); line-height: 1.35; color: var(--ps-post-title, inherit); }
.ps-uxb-post__title a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size .3s ease, color .2s ease; }
.ps-uxb-post__title a:hover { color: var(--ps-post-accent); background-size: 100% 1px; }
.ps-uxb-post[style*="--ps-post-clamp"] .ps-uxb-post__title a { display: -webkit-box; -webkit-line-clamp: var(--ps-post-clamp, 2); -webkit-box-orient: vertical; overflow: hidden; }

.ps-uxb-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .8rem; color: var(--ps-post-meta, rgba(90, 102, 118, .95)); }
.ps-uxb-post__meta > * { display: inline-flex; align-items: center; gap: 5px; }
.ps-uxb-post__meta a { color: inherit; text-decoration: none; }
.ps-uxb-post__meta a:hover { color: var(--ps-post-accent); }
.ps-uxb-post__avatar { width: 22px; height: 22px; border-radius: 50%; }
.ps-uxb-post__excerpt { margin: .55em 0 0; font-size: .92rem; line-height: 1.6; }
.ps-uxb-post__more { display: inline-block; margin-top: .6em; font-size: .88rem; font-weight: 700; color: var(--ps-post-accent); text-decoration: none; }
.ps-uxb-post__more:hover { text-decoration: underline; }

/* Bố cục: ảnh trái, chữ phải */
.ps-uxb-post--compact,
.ps-uxb-post--row { flex-direction: row; align-items: flex-start; gap: 12px; }
.ps-uxb-post--compact .ps-uxb-post__thumb,
.ps-uxb-post--row .ps-uxb-post__thumb { flex: 0 0 var(--ps-pl-thumb, 90px); width: var(--ps-pl-thumb, 90px); }
.ps-uxb-post--compact .ps-uxb-post__body,
.ps-uxb-post--row .ps-uxb-post__body { padding-top: 0; }
.ps-uxb-post--compact .ps-uxb-post__title,
.ps-uxb-post--row .ps-uxb-post__title { font-size: var(--ps-post-card-title-size, var(--ps-post-title-size, .96rem)); }

.ps-uxb-post--text .ps-uxb-post__body { padding-top: 0; }

/* Bài lớn */
.ps-uxb-post--feature .ps-uxb-post__title { font-size: var(--ps-post-feature-title-size, var(--ps-post-title-size, 1.6rem)); }
.ps-uxb-post--feature .ps-uxb-post__excerpt { font-size: 1rem; }

/* Dạng ảnh nền + chữ đè lên */
.ps-uxb-post--overlay { height: 100%; }
.ps-uxb-post--overlay .ps-uxb-post__thumb { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-uxb-post--overlay .ps-uxb-post__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-uxb-post--overlay .ps-uxb-post__body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 24px; color: #fff; }
.ps-uxb-post--overlay .ps-uxb-post__title,
.ps-uxb-post--overlay .ps-uxb-post__meta,
.ps-uxb-post--overlay .ps-uxb-post__excerpt { color: #fff; }
.ps-uxb-post--overlay .ps-uxb-post__title a:hover { color: #fff; }
.ps-uxb-post--overlay::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10, 16, 26, .82) 0%, rgba(10, 16, 26, .35) 45%, rgba(10, 16, 26, 0) 75%); }
.ps-uxb-post--overlay .ps-uxb-post__badge-wrap { top: 18px; left: 18px; }

/* Số thứ tự */
.ps-uxb-post__number { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: var(--ps-pl-number, 20px); font-weight: 700; line-height: 1; }

/* Tiêu đề khối */
.ps-uxb-post-heading { display: flex; align-items: center; margin-bottom: 1em; font-size: var(--ps-post-heading-size, 1.15rem); font-weight: 700; line-height: 1.3; }
.ps-uxb-post-heading span { display: inline-flex; align-items: center; gap: 8px; }
.ps-uxb-post-heading--bar { padding-left: 12px; border-left: 4px solid var(--ps-post-accent); }
.ps-uxb-post-heading--under { padding-bottom: .5em; border-bottom: 2px solid rgba(15, 27, 43, .1); }
.ps-uxb-post-heading--under span { position: relative; }
.ps-uxb-post-heading--under span::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-.5em - 2px); height: 2px; background: var(--ps-post-accent); }
.ps-uxb-post-heading--fill span { padding: 6px 14px; border-radius: 4px; background: var(--ps-post-accent); color: #fff; }

.ps-uxb-post-empty { margin: 0; padding: 18px; border: 1px dashed rgba(15, 27, 43, .18); border-radius: 8px; text-align: center; opacity: .75; }

/* Vòng quay chờ AJAX */
.ps-uxb-spinner { display: inline-block; width: 26px; height: 26px; border: 2px solid rgba(15, 27, 43, .18); border-top-color: var(--ps-post-accent, #446084); border-radius: 50%; animation: psUxbSpin .8s linear infinite; }

@keyframes psUxbSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.ps-uxb-post__image, .ps-uxb-post__title a { transition: none; }
	.ps-uxb-spinner { animation-duration: 2s; }
}