/* วิดีโอสอนการใช้งาน BK POS (YouTube Playlist) · pos.html · notes/pos-playlist/add_playlist.py · 2026-10-19 */
.pospl-player{position:relative;max-width:960px;margin:0 auto;border-radius:18px;overflow:hidden;background:#0b1220;box-shadow:0 18px 40px -26px rgba(15,23,42,.55)}
.pospl-player::before{content:"";display:block;padding-top:56.25%}
.pospl-facade,.pospl-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pospl-facade{display:block;color:#fff;text-decoration:none;cursor:pointer}
.pospl-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .2s}
.pospl-facade:hover img,.pospl-facade:focus-visible img{opacity:1}
.pospl-play{position:absolute;left:50%;top:50%;width:76px;height:54px;margin:-27px 0 0 -38px;border-radius:16px;background:#e00;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.pospl-play svg{width:32px;height:32px}
.pospl-badge{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(11,18,32,.82);font-size:14px;font-weight:700}
.pospl-badge svg{width:18px;height:18px}
.pospl-facade:focus-visible{outline:3px solid #f59e0b;outline-offset:-3px}
.pospl-actions{margin:14px 0 0;text-align:center}
.pospl-all{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:12px;border:1.5px solid #e00;color:#c00;font-weight:800;text-decoration:none;background:#fff}
.pospl-all:hover{background:#fff1f1}
@media (max-width:599px){.pospl-player{border-radius:12px}.pospl-play{width:62px;height:44px;margin:-22px 0 0 -31px}.pospl-badge{font-size:13px;right:8px;bottom:8px}.pospl-all{width:100%}}