/* PS UX Builder Addons — Creative Link */

.ps-uxb-clink-wrap--center { text-align: center; }
.ps-uxb-clink-wrap--right { text-align: right; }
.ps-uxb-clink { --ps-cl-hover: #446084; --ps-cl-line: #446084; --ps-cl-size: 16px; --ps-cl-weight: 600; --ps-cl-thickness: 2px; position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--ps-cl-color, inherit); font-size: var(--ps-cl-size); font-weight: var(--ps-cl-weight); line-height: 1.4; text-decoration: none; transition: color .3s ease; }
.ps-uxb-clink--upper { text-transform: uppercase; letter-spacing: .06em; }
.ps-uxb-clink:hover { color: var(--ps-cl-hover); }
.ps-uxb-clink__text { position: relative; display: inline-block; }
.ps-uxb-clink__icon { display: inline-flex; line-height: 1; }

/* Gạch chân vẽ dần */
.ps-uxb-clink--draw-left .ps-uxb-clink__text::after,
.ps-uxb-clink--draw-center .ps-uxb-clink__text::after,
.ps-uxb-clink--draw-cross .ps-uxb-clink__text::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: var(--ps-cl-thickness); background: var(--ps-cl-line); transform: scaleX(0); transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.ps-uxb-clink--draw-left .ps-uxb-clink__text::after { transform-origin: left; }
.ps-uxb-clink--draw-center .ps-uxb-clink__text::after { transform-origin: center; }
.ps-uxb-clink--draw-cross .ps-uxb-clink__text::after { transform-origin: right; }
.ps-uxb-clink--draw-left:hover .ps-uxb-clink__text::after,
.ps-uxb-clink--draw-center:hover .ps-uxb-clink__text::after { transform: scaleX(1); }
.ps-uxb-clink--draw-cross:hover .ps-uxb-clink__text::after { transform-origin: left; transform: scaleX(1); }

/* Gạch ngang chữ */
.ps-uxb-clink--strike .ps-uxb-clink__text::after { content: ""; position: absolute; left: 0; top: 52%; width: 100%; height: var(--ps-cl-thickness); background: var(--ps-cl-line); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.ps-uxb-clink--strike:hover .ps-uxb-clink__text::after { transform: scaleX(1); }

/* Nền màu trượt lên */
.ps-uxb-clink--fill .ps-uxb-clink__text { padding: 0 .25em; z-index: 0; }
.ps-uxb-clink--fill .ps-uxb-clink__text::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--ps-cl-line); transition: height .3s ease; z-index: -1; }
.ps-uxb-clink--fill:hover .ps-uxb-clink__text::before { height: 100%; }
.ps-uxb-clink--fill:hover { color: #fff; }

/* Chữ trượt lên */
.ps-uxb-clink--slide-text .ps-uxb-clink__text { display: inline-grid; overflow: hidden; }
.ps-uxb-clink--slide-text .ps-uxb-clink__text > span { grid-area: 1 / 1; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.ps-uxb-clink--slide-text .ps-uxb-clink__text > span:last-child { transform: translateY(100%); color: var(--ps-cl-hover); }
.ps-uxb-clink--slide-text:hover .ps-uxb-clink__text > span:first-child { transform: translateY(-100%); }
.ps-uxb-clink--slide-text:hover .ps-uxb-clink__text > span:last-child { transform: translateY(0); }

/* Dấu ngoặc */
.ps-uxb-clink--bracket .ps-uxb-clink__text::before,
.ps-uxb-clink--bracket .ps-uxb-clink__text::after { position: absolute; top: 0; opacity: 0; color: var(--ps-cl-line); transition: opacity .3s ease, transform .3s ease; }
.ps-uxb-clink--bracket .ps-uxb-clink__text::before { content: "["; left: -.2em; transform: translateX(6px); }
.ps-uxb-clink--bracket .ps-uxb-clink__text::after { content: "]"; right: -.2em; transform: translateX(-6px); }
.ps-uxb-clink--bracket:hover .ps-uxb-clink__text::before,
.ps-uxb-clink--bracket:hover .ps-uxb-clink__text::after { opacity: 1; transform: translateX(0); }
.ps-uxb-clink--bracket .ps-uxb-clink__text { padding: 0 .55em; }

/* Mũi tên */
.ps-uxb-clink__arrow { position: relative; width: 18px; height: 2px; background: currentColor; transition: transform .3s ease; }
.ps-uxb-clink__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.ps-uxb-clink--arrow:hover .ps-uxb-clink__arrow { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
	.ps-uxb-clink, .ps-uxb-clink__text::after, .ps-uxb-clink__text::before, .ps-uxb-clink__arrow { transition: none; }
}