.sy-videojs-player { --player-accent: var(--sy-coral, #ff7854); --player-accent-text: #000000; --player-background: #071727; --player-poster: none; --player-skip-background: #071727; --player-skip-text: #ffffff; --player-ad-background: #071727; --player-ad-text: #ffffff; position: relative; overflow: hidden; border: 0; border-radius: 8px; background: #000; color: #fff; font-family: var(--sy-font, "Noto Sans Thai", sans-serif); }
.sy-videojs-host { aspect-ratio: 16 / 9; width: 100%; }
.sy-videojs-host[inert] .vjs-big-play-button { display: none; }
.sy-videojs-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; color: #fff; font-size: 14px; pointer-events: none; }
.sy-videojs-wordmark { font-size: 25px; font-weight: 800; color: white; letter-spacing: -.8px; background: #071727; padding: 2px 8px; border-radius: 4px; }
.sy-videojs-wordmark span { color: #ff7854; }
.sy-videojs-cover > [role="status"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sy-videojs-player .sy-videojs-play { width: 68px; height: 68px; min-height: 68px; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; padding: 18px; background: rgb(0 0 0 / 70%); color: #fff; box-shadow: none; pointer-events: auto; }
.sy-videojs-play svg { display: block; width: 32px; height: 32px; }
.sy-videojs-player .video-js { font-family: inherit; font-weight: var(--sy-control-font-weight, 400); color: #f8fafc; background: var(--player-background); }
.sy-videojs-player .vjs-poster { background-color: var(--player-background); }
.sy-videojs-player .vjs-control-bar { inset: auto 12px 6px; width: auto; height: 40px; background: transparent; z-index: 3; transition: opacity 180ms ease, transform 180ms ease; }
.sy-videojs-player .sy-player-engaged.vjs-controls-enabled .vjs-control-bar { display: flex; visibility: visible; }
.sy-videojs-player .vjs-control-bar::before { content: ""; position: absolute; inset: -64px -12px -6px; background: linear-gradient(transparent, rgb(0 0 0 / 82%)); z-index: -1; pointer-events: none; }
.sy-videojs-player .vjs-button { width: 40px; min-width: 40px; height: 40px; border-radius: 5px; transition: background-color 140ms ease, transform 140ms ease; }
.sy-videojs-player .vjs-button:hover { background: rgb(255 255 255 / 10%); }
.sy-videojs-player .vjs-button:active { transform: scale(.93); }
.sy-videojs-player .vjs-button > .vjs-icon-placeholder::before { line-height: 40px; }
.sy-videojs-player .vjs-time-control { position: absolute; top: -28px; height: 24px; padding: 0; min-width: 44px; font-size: 11px; line-height: 24px; font-variant-numeric: tabular-nums; }
.sy-videojs-player .vjs-current-time, .sy-videojs-player .vjs-duration { display: block; }
.sy-videojs-player .vjs-current-time { left: 0; text-align: left; }
.sy-videojs-player .vjs-duration { right: 0; text-align: right; }
.sy-videojs-player .vjs-remaining-time, .sy-videojs-player .vjs-time-divider { display: none; }
.sy-videojs-player .vjs-custom-control-spacer { display: block; flex: 1; }
.sy-videojs-player .vjs-progress-control { position: absolute; top: -28px; left: 52px; right: 52px; width: auto; height: 24px; min-width: 0; }
.sy-videojs-player .vjs-progress-control .vjs-progress-holder { margin: 0; height: 3px; transition: height 140ms ease; background: rgb(255 255 255 / 26%); }
.sy-videojs-player .vjs-progress-control:hover .vjs-progress-holder, .sy-videojs-player .vjs-progress-control:focus-within .vjs-progress-holder { height: 5px; }
.sy-videojs-player .vjs-load-progress, .sy-videojs-player .vjs-load-progress div { background: rgb(255 255 255 / 26%); }
.sy-videojs-player .vjs-play-progress::before { font-size: 10px; top: -.35em; opacity: 0; transition: opacity 140ms ease; }
.sy-videojs-player .vjs-progress-control:hover .vjs-play-progress::before, .sy-videojs-player .vjs-progress-control:focus-within .vjs-play-progress::before { opacity: 1; }
.sy-videojs-player .vjs-play-progress, .sy-videojs-player .vjs-volume-level { background: var(--player-accent); }
.sy-videojs-player .vjs-big-play-button { border: 1px solid rgb(255 255 255 / 12%); background: rgb(0 0 0 / 70%); color: #fff; border-radius: 50%; width: 2.2em; height: 2.2em; margin-left: -1.1em; margin-top: -1.1em; line-height: 2.2em; }
.sy-videojs-player .video-js:hover .vjs-big-play-button, .sy-videojs-player .video-js .vjs-big-play-button:focus { background: rgb(0 0 0 / 85%); color: #fff; }
.sy-videojs-player .vjs-paused.vjs-has-started .vjs-big-play-button { display: block; }
.sy-videojs-player .vjs-volume-panel { display: flex; align-items: center; }
.sy-videojs-player .vjs-volume-panel.vjs-volume-panel-horizontal { width: 114px; }
.sy-videojs-player .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { width: 64px; height: 40px; opacity: 1; visibility: visible; margin-right: 10px; }
.sy-videojs-player .vjs-volume-bar.vjs-slider-horizontal { width: 54px; margin: 18px 5px; }
.sy-videojs-player .vjs-volume-level { background: #fff; }
.sy-videojs-player .vjs-has-started.sy-player-menu-open .vjs-control-bar, .sy-videojs-player .vjs-has-started:focus-within .vjs-control-bar { visibility: visible; opacity: 1; transform: none; }
.sy-videojs-player .vjs-user-inactive.vjs-playing:not(.sy-player-menu-open):not(:focus-within) .vjs-control-bar { opacity: 0; transform: translateY(4px); }
.sy-videojs-player .sy-player-quality-toggle, .sy-videojs-player .sy-player-speed-toggle { width: auto; min-width: 52px; padding: 0 10px; font: 400 12px/40px var(--sy-font, sans-serif); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.sy-videojs-player .sy-player-menu { position: absolute; z-index: 6; right: 12px; bottom: 78px; width: 212px; max-width: calc(100% - 24px); max-height: calc(100% - 90px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 8px; background: #191919; color: #fff; box-shadow: 0 8px 30px rgb(0 0 0 / 35%); font-size: 13px; animation: sy-player-menu-in 150ms ease-out; }
.sy-player-menu-title { padding: 7px 10px 9px; color: #bfc3c9; font-size: 12px; }
.sy-player-menu-note { margin: 0; padding: 8px 10px 12px; color: #e5e7eb; line-height: 1.5; }
.sy-videojs-player .sy-player-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: #fff; font: 400 13px/1.5 var(--sy-font, sans-serif); text-align: left; cursor: pointer; transition: background-color 120ms ease; }
.sy-videojs-player .sy-player-menu button:hover, .sy-videojs-player .sy-player-menu button:focus-visible { background: #303030; }
.sy-videojs-player .sy-player-menu button[aria-checked="true"] { color: #fff; background: #303030; }
.sy-videojs-player .sy-player-menu button[aria-checked="true"]::after { content: "✓"; color: #fff; }
.sy-player-logo { position: absolute; z-index: 2; width: var(--logo-width, 96px); max-width: 28%; max-height: 64px; pointer-events: none; }
.sy-player-logo img { display: block; width: 100%; max-height: 64px; object-fit: contain; }
.sy-player-logo a { display: block; pointer-events: auto; }
.sy-player-logo[data-position^="top"] { top: 16px; }
.sy-player-logo[data-position^="bottom"] { bottom: 90px; }
.sy-player-logo[data-position$="left"] { left: 16px; }
.sy-player-logo[data-position$="right"] { right: 16px; }
.sy-player-ad-active .sy-player-logo { visibility: hidden; }
.sy-player-gesture { position: absolute; z-index: 4; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgb(0 0 0 / 70%); color: #fff; opacity: 0; pointer-events: none; }
.sy-player-gesture svg { width: 30px; height: 30px; fill: currentColor; }
@keyframes sy-player-menu-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.sy-videojs-player .vjs-slider:focus, .sy-videojs-player button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; box-shadow: 0 0 0 2px #000; }
.sy-videojs-error { color: #ad321e; font-size: 14px; }
.sy-videojs-player .sy-player-ad-controls { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sy-videojs-player .sy-player-ad-controls .sy-button { display: inline-flex; align-items: center; justify-content: center; position: absolute; pointer-events: auto; min-height: 44px; padding: 9px 14px; gap: 8px; border: 1px solid currentColor; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: var(--sy-control-font-weight, 400); line-height: 1.4; box-shadow: 0 2px 10px rgb(0 0 0 / 20%); }
.sy-videojs-player .sy-player-ad-controls .sy-player-visit { background: var(--player-ad-background); color: var(--player-ad-text); }
.sy-videojs-player .sy-player-ad-controls .sy-player-skip { background: var(--player-skip-background); color: var(--player-skip-text); }
.sy-videojs-player .sy-player-ad-controls .sy-button:hover:not(:disabled) { filter: none; text-decoration: underline; text-underline-offset: 3px; }
.sy-videojs-player .sy-videojs-play:hover:not(:disabled), .sy-videojs-player .sy-player-resume:hover:not(:disabled), .sy-videojs-player .sy-player-retry:hover:not(:disabled) { filter: none; }
.sy-videojs-player .sy-videojs-play, .sy-videojs-player .vjs-big-play-button, .sy-videojs-player .sy-player-ad-controls .sy-button, .sy-videojs-player .sy-player-resume, .sy-videojs-player .sy-player-retry { transition: none; }
.sy-videojs-player .sy-player-visit { top: 16px; right: 16px; }
.sy-videojs-player .sy-player-skip { right: 16px; bottom: 60px; }
.sy-videojs-player .sy-player-skip:disabled { opacity: 1; border-style: dashed; cursor: not-allowed; }
.sy-videojs-player .sy-player-countdown { display: inline; border: 0; padding: 0; background: transparent; color: inherit; font-variant-numeric: tabular-nums; }
.sy-videojs-player .sy-player-resume { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 44px; padding: 10px 20px; border-radius: 8px; background: var(--player-accent); color: var(--player-accent-text); font-family: inherit; font-size: 14px; font-weight: var(--sy-control-font-weight, 400); }
.sy-videojs-player .sy-player-feedback { position: absolute; z-index: 5; inset: auto 16px 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; border-radius: 8px; background: #132e49; color: white; font-size: 14px; line-height: 1.5; }
.sy-videojs-player .sy-player-retry { flex-shrink: 0; font-family: inherit; font-weight: var(--sy-control-font-weight, 400); font-size: 14px; background: var(--player-accent); color: var(--player-accent-text); }
.sy-videojs-player .sy-player-ad-active .vjs-progress-control { visibility: hidden; pointer-events: none; }
.sy-videojs-player .sy-player-ad-active .vjs-playback-rate, .sy-videojs-player .sy-player-ad-active .vjs-picture-in-picture-control, .sy-videojs-player .sy-player-ad-active .vjs-error-display { display: none; }
.sy-videojs-player [hidden] { display: none !important; }
.sy-videojs-player .sy-player-ad-controls :focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; }
.sy-videojs-player .sy-videojs-play[aria-busy="true"] svg { display: none; }
.sy-videojs-player .sy-videojs-play .sy-spinner { width: 24px; height: 24px; }
@media (max-width: 480px) {
    .sy-videojs-cover { gap: 12px; }
    .sy-videojs-wordmark { display: none; }
    .sy-videojs-player .sy-videojs-play { width: 56px; height: 56px; min-height: 56px; padding: 12px; }
    .sy-videojs-player .vjs-volume-panel.vjs-volume-panel-horizontal { width: 40px; }
    .sy-videojs-player .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { display: none; }
    .sy-videojs-player .sy-player-quality-toggle, .sy-videojs-player .sy-player-speed-toggle { min-width: 48px; padding: 0 6px; }
    .sy-videojs-player .sy-player-menu { bottom: 60px; max-height: calc(100% - 68px); width: 190px; }
    .sy-videojs-player .sy-player-visit { top: 10px; right: 10px; }
    .sy-videojs-player .sy-player-skip { right: 10px; bottom: 54px; }
    .sy-videojs-player .sy-player-ad-controls .sy-button { padding: 8px 10px; font-size: 12px; }
    .sy-videojs-player .sy-player-feedback { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .sy-videojs-player *, .sy-videojs-player *::before, .sy-videojs-player *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}