.poster-button{position:relative;isolation:isolate}
.card-live-preview{position:absolute;left:0;top:0;width:500px;border:0;transform-origin:top left;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1;background:white}
.card-preview-ready .card-live-preview{opacity:1}
.poster-button::after{content:'Xem mẫu';position:absolute;z-index:2;bottom:12px;left:50%;transform:translateX(-50%);padding:7px 17px;border-radius:20px;background:#f44f78e8;color:#fff;font:600 13px/1.2 Inter,Arial,sans-serif;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none;box-shadow:0 2px 8px #0002}
.poster-button:hover::after,.poster-button:focus-visible::after{opacity:1}
@media(prefers-reduced-motion:reduce){.card-live-preview,.poster-button::after{transition:none}}
@media(hover:hover) and (pointer:fine){
.template-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;overflow:visible}
.template-card .poster-button{border-radius:7px 7px 0 0;overflow:hidden}
.template-card .card-meta{border-radius:0 0 7px 7px}
.template-card:hover,.template-card:focus-within{transform:translateY(-4px);box-shadow:0 9px 22px #54233818;border-color:#edbbca;z-index:2}
.template-row{padding-top:7px;padding-bottom:24px;margin-top:-5px;margin-bottom:-16px}
}
@media(prefers-reduced-motion:reduce){.template-card{transition:none!important}.template-card:hover,.template-card:focus-within{transform:none!important}}