:root{--x4-accent:red;--x4-accent-ink:#000;--x4-hl:#fcd34d;--x4-amber:#f59e0b;--x4-bg:#06060a;--x4-text:#fff;--x4-surface:#14141c;--x4-surface-2:#0c0c12;--x4-line:#2a2a36;--x4-muted:#7e7e8a;--x4-grad:linear-gradient(135deg, var(--x4-accent) 0%, var(--x4-amber) 60%, #d97706 100%)}body.x4hd{--tb-accent:var(--x4-accent);--tb-ink:var(--x4-accent-ink);background:var(--x4-bg);color:var(--x4-text);font-family:var(--font-sans,"Helvetica Neue", "Noto Sans Thai", Helvetica, Arial, sans-serif)}body.x4hd a{color:inherit}.x4-wrap{max-width:1380px;margin:0 auto;padding:0 16px}.x4-top{z-index:60;background:var(--x4-bg);border-bottom:1px solid var(--x4-line);position:sticky;top:0}.x4-bar{align-items:center;gap:14px;max-width:1380px;height:64px;margin:0 auto;padding:0 16px;display:flex}.x4-ham{background:var(--x4-surface);border:1px solid var(--x4-line);cursor:pointer;border-radius:10px;flex-direction:column;flex:none;justify-content:center;gap:5px;width:42px;height:42px;padding:0 11px;display:inline-flex}.x4-ham span{background:var(--x4-hl);border-radius:2px;height:2px;display:block}.x4-ham:hover{border-color:var(--x4-amber)}.x4-brand{flex:none;align-items:baseline;gap:4px;line-height:1;text-decoration:none;display:inline-flex}.x4-brand-num{background:var(--x4-grad);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:26px;font-style:italic;font-weight:900}.x4-brand-name{letter-spacing:.6px;color:#fff;font-size:16px;font-weight:800}.x4-logo-image{width:auto;max-height:40px;display:block}.x4-inline{scrollbar-width:none;align-items:center;gap:2px;margin:0 auto;display:flex;overflow-x:auto}.x4-inline::-webkit-scrollbar{display:none}.x4-inline a{color:#d8d8e2;border-radius:8px;flex:none;padding:8px 12px;font-size:13.5px;font-weight:700;text-decoration:none}.x4-inline a:hover,.x4-inline a.active{color:var(--x4-hl)}.x4-search{flex:none;align-items:center;gap:6px;min-width:0;display:flex}.x4-search input{background:var(--x4-surface);border:1px solid var(--x4-line);color:#fff;width:clamp(110px,16vw,210px);font:inherit;border-radius:10px;outline:none;padding:9px 14px;font-size:13.5px}.x4-search input::placeholder{color:var(--x4-muted)}.x4-search input:focus{border-color:var(--x4-amber)}.x4-search button{background:var(--x4-grad);color:#000;cursor:pointer;border:0;border-radius:10px;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.x4-search button:hover{filter:brightness(1.12)}.x4-menu{border-top:1px solid var(--x4-line);background:var(--x4-surface-2);display:none}.x4-menu.open{display:block}.x4-nav-inner{flex-wrap:wrap;justify-content:center;max-width:1380px;margin:0 auto;padding:8px 16px 14px;display:flex}.x4-nav-inner a{color:#c8c8d4;padding:9px 14px;font-size:13.5px;font-weight:600;text-decoration:none}.x4-nav-inner a:hover,.x4-nav-inner a.active{color:var(--x4-hl)}.x4-cats{scrollbar-width:none;gap:10px;margin-top:20px;padding-block:6px;display:flex;overflow-x:auto}.x4-cats::-webkit-scrollbar{display:none}.x4-cats-wrap{position:relative}.x4-cat-arrow{z-index:3;border:1px solid var(--x4-hl);background:var(--x4-surface-2);width:34px;height:34px;color:var(--x4-hl);border-radius:50%;justify-content:center;align-items:center;transition:background .3s,color .3s,opacity .3s;display:none;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 6px 18px #0000008c}.x4-cat-arrow:hover{background:var(--x4-hl);color:#0a0a0f}.x4-cat-prev{left:4px}.x4-cat-next{right:4px}.x4-cats-wrap.can-scroll .x4-cat-arrow{display:inline-flex}.x4-cats-wrap.at-start .x4-cat-prev,.x4-cats-wrap.at-end .x4-cat-next{opacity:.3;pointer-events:none}.x4-cats-wrap:before,.x4-cats-wrap:after{content:"";z-index:2;pointer-events:none;opacity:0;width:46px;transition:opacity .3s;position:absolute;top:0;bottom:0}.x4-cats-wrap:before{background:linear-gradient(90deg, var(--x4-bg), transparent);left:16px}.x4-cats-wrap:after{background:linear-gradient(270deg, var(--x4-bg), transparent);right:16px}.x4-cats-wrap.can-scroll:not(.at-start):before,.x4-cats-wrap.can-scroll:not(.at-end):after{opacity:1}.x4-cats-wrap+.x4-section{margin-top:16px}.x4-cat{background:linear-gradient(180deg, var(--x4-surface) 0%, var(--x4-surface-2) 100%);border:1px solid var(--x4-line);text-align:center;border-radius:12px;flex-direction:column;flex:1 0 130px;align-items:center;gap:3px;min-width:0;padding:14px 8px 11px;text-decoration:none;transition:border-color .2s,transform .2s;display:flex}.x4-cat:hover{border-color:var(--x4-amber);transform:translateY(-2px)}.x4-cat-ic{color:var(--x4-hl)}.x4-cat-name{color:#fff;font-size:13px;font-weight:700}.x4-cat-count{color:var(--x4-muted);font-size:11px}.x4-section{margin-top:38px}.x4-sec-head{border-bottom:1px solid var(--x4-line);justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:16px;padding-bottom:10px;display:flex}.x4-sec-head h2{margin:0;font-size:20px;font-weight:800;line-height:1.15}.x4-eyebrow{letter-spacing:2.5px;text-transform:uppercase;background:var(--x4-grad);color:#0000;-webkit-background-clip:text;background-clip:text;margin-bottom:3px;font-size:10px;font-weight:700;display:block}.x4-sec-more{color:var(--x4-hl);white-space:nowrap;font-size:12.5px;font-weight:700;text-decoration:none}.x4-sec-more:hover{color:#fff}.x4-grid,body.x4hd .catalog-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 14px;display:grid}.x4-card{min-width:0}.x4-card-art{aspect-ratio:2/3;background:var(--x4-surface-2);border-radius:12px;text-decoration:none;display:block;position:relative;overflow:hidden}.x4-card-art img{object-fit:cover;width:100%;height:100%;transition:transform .35s,filter .2s}.x4-card:hover .x4-card-art img{filter:brightness(.7);transform:scale(1.06)}.x4-card:hover .x4-card-art{box-shadow:0 14px 32px #f59e0b4d, 0 0 0 2px var(--x4-amber)}.x4-card-ribbon{text-overflow:ellipsis;white-space:nowrap;background:var(--x4-accent);color:#000;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);z-index:2;max-width:calc(100% - 52px);padding:4px 12px 4px 10px;font-size:11px;font-weight:700;position:absolute;top:10px;left:0;overflow:hidden}.x4-card-ribbon-rate{color:#000;font-weight:800}.x4-card-hd{color:var(--x4-hl);letter-spacing:.5px;z-index:2;background:#000000d9;border:1px solid #fcd34d66;border-radius:4px;padding:3px 8px;font-size:10px;font-weight:700;position:absolute;top:10px;right:10px}.x4-card-year{color:#fff;z-index:2;background:#000000d9;border-radius:4px;padding:3px 9px;font-size:11px;font-weight:600;position:absolute;bottom:10px;left:10px}.x4-card-play{color:#fff;opacity:0;z-index:2;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:absolute;inset:0}.x4-card-play .icon{background:var(--x4-grad);color:#000;box-sizing:content-box;border-radius:50%;padding:12px}.x4-card:hover .x4-card-play{opacity:1}.x4-card-sound{color:var(--x4-muted);align-items:center;gap:6px;margin-top:6px;font-size:12px;font-weight:500;display:flex}.x4-card-sound .icon{color:var(--x4-hl)}.x4-card-sound a{color:var(--x4-muted);text-decoration:none}.x4-card-sound a:hover{color:var(--x4-hl)}.x4-card-type{color:#000;background:var(--x4-hl);border-radius:3px;padding:1px 6px;font-size:10px;font-weight:700}.x4-card-title{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin:3px 0 0;font-size:13.5px;font-weight:700;line-height:1.35;display:-webkit-box;overflow:hidden}.x4-card-title a{color:#fff;text-decoration:none}.x4-card-title a:hover{color:var(--x4-hl)}.x4-plats{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.x4-plat{background:linear-gradient(180deg, var(--x4-surface) 0%, var(--x4-surface-2) 100%);border:1px solid var(--x4-line);border-radius:12px;flex-direction:column;gap:3px;padding:14px 16px;text-decoration:none;transition:border-color .2s;display:flex}.x4-plat:hover{border-color:var(--x4-amber)}.x4-plat-name{color:#fff;font-size:14px;font-weight:800}.x4-plat:hover .x4-plat-name{color:var(--x4-hl)}.x4-plat-count{color:var(--x4-muted);font-size:11.5px}.x4-btn{font:inherit;cursor:pointer;border:1px solid #0000;border-radius:10px;align-items:center;gap:7px;padding:10px 20px;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex}.x4-btn-gold{background:var(--x4-grad);color:#000}.x4-btn-gold:hover{filter:brightness(1.12)}.x4-btn-ghost{background:var(--x4-surface);color:var(--x4-text);border-color:var(--x4-line)}.x4-btn-ghost:hover{border-color:var(--x4-amber);color:var(--x4-hl)}.x4-btn .saved-icon{display:none}.x4-btn[aria-pressed=true] .saved-icon{display:inline}.x4-btn[aria-pressed=true] .icon:first-child{display:none}.x4-badge{color:#fff;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:700;line-height:1;text-decoration:none;display:inline-block}.x4-badge-dubbed-thai{background:#16a34a}.x4-badge-sub-thai{background:#2563eb}.x4-badge-original{background:#555}.x4-badge-theater-sound{background:var(--x4-accent)}.x4-badge-type{background:var(--x4-amber);color:#000}.x4-badge-plain{background:var(--x4-line);color:#ccc}.x4-chips-block{margin-top:22px}.x4-chips-heading{color:var(--x4-hl);margin:14px 0 10px;font-size:14px;font-weight:800}.x4-chips{flex-wrap:wrap;gap:8px;display:flex}.x4-chip{color:var(--x4-text);background:var(--x4-surface);border:1px solid var(--x4-line);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;text-decoration:none}a.x4-chip:hover{border-color:var(--x4-amber);color:var(--x4-hl)}.x4-chip-hot{color:var(--x4-hl);border-color:#f59e0b80}.x4-page{padding-top:26px;padding-bottom:40px}.x4-page-head{margin-bottom:20px}.x4-page-head h1{font-size:clamp(22px,3vw,30px);font-weight:800}.x4-eyebrow{letter-spacing:2.5px}p.x4-eyebrow,.x4-page-head .x4-eyebrow{text-transform:uppercase;margin-bottom:6px;font-size:11px;font-weight:700}.x4-type-title{margin:26px 0 4px;font-size:clamp(20px,3vw,28px);font-weight:800}.x4-page-sub{color:var(--x4-muted);margin-top:8px;font-size:13.5px}.x4-page-sub strong{color:var(--x4-text)}.x4-pills{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.x4-pills a,.x4-pills button{font:inherit;color:var(--x4-text);background:var(--x4-surface);border:1px solid var(--x4-line);cursor:pointer;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;text-decoration:none}.x4-pills a span,.x4-pills button span{color:var(--x4-muted);font-size:11px}.x4-pills a:hover,.x4-pills button:hover{border-color:var(--x4-amber)}.x4-pills a.active,.x4-pills button.active{border-color:var(--x4-amber);color:var(--x4-hl)}.x4-page-pager{margin-top:26px}body.x4hd .pager-btn.is-active{background:var(--x4-grad);color:#000;border-color:#0000}.x4-page-content{margin-top:30px}body.x4hd .x4-seo-block h1,body.x4hd .x4-seo-block h2{color:var(--x4-text)}.x4-tax-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;display:grid}.x4-tax-card{background:linear-gradient(180deg, var(--x4-surface) 0%, var(--x4-surface-2) 100%);border:1px solid var(--x4-line);border-radius:12px;flex-direction:column;gap:4px;padding:14px 16px;text-decoration:none;display:flex}.x4-tax-card:hover{border-color:var(--x4-amber)}.x4-tax-name{color:var(--x4-text);font-size:15px;font-weight:700}.x4-tax-card:hover .x4-tax-name{color:var(--x4-hl)}.x4-tax-count{color:var(--x4-amber);font-size:12px;font-weight:700}.x4-tax-split{color:var(--x4-muted);font-size:11px}.x4-detail{padding-bottom:30px;position:relative}.x4-detail-bg{pointer-events:none;height:480px;position:absolute;inset:0 0 auto;overflow:hidden}.x4-detail-bg img{object-fit:cover;opacity:.22;width:100%;height:100%}.x4-detail-bg:after{content:"";background:linear-gradient(180deg, #06060a59 0%, var(--x4-bg) 100%);position:absolute;inset:0}.x4-detail-box{grid-template-columns:220px minmax(0,1fr);gap:26px;padding-top:60px;display:grid;position:relative}.x4-detail-poster img{border:1px solid var(--x4-line);border-radius:12px;width:100%;display:block}.x4-detail-type{letter-spacing:2px;text-transform:uppercase;background:var(--x4-grad);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:11px;font-weight:800;display:inline-block}.x4-detail-info h1{margin-top:6px;font-size:clamp(24px,3.4vw,36px);font-weight:800;line-height:1.2}.x4-detail-english{color:var(--x4-muted);margin-top:4px;font-size:14px}.x4-detail-meta{color:#d6d6dc;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;font-size:13.5px;display:flex}.x4-detail-meta a{color:#d6d6dc;text-decoration:none}.x4-detail-meta a:hover{color:var(--x4-hl)}.x4-detail-rate{color:var(--x4-hl);font-weight:800}.x4-detail-actions{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.x4-detail-overview{color:#cfcfd6;max-width:760px;margin-top:16px;font-size:14px;line-height:1.75}.x4-detail-genres{margin-top:14px}.x4-detail-facts{gap:8px;margin-top:18px;font-size:13px;display:grid}.x4-detail-facts div{gap:8px;min-width:0;display:flex}.x4-detail-facts dt{color:var(--x4-muted);flex:0 0 74px;font-weight:600}.x4-detail-facts dd{color:#d6d6dc;overflow-wrap:break-word;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;margin:0;display:flex}.x4-detail-facts a{color:var(--x4-text)}body.x4hd .x4-watch-bg{z-index:-1;height:auto;position:fixed;inset:0}.x4-watch-header{z-index:60;border-bottom:1px solid var(--x4-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#06060ac7;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:12px max(16px,50vw - 600px);display:flex;position:sticky;top:0}.x4-watch-back{color:var(--x4-text);align-items:center;gap:8px;min-width:0;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.x4-watch-back span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.x4-watch-back:hover{color:var(--x4-hl)}.x4-watch-tabs{z-index:2;gap:8px;max-width:1200px;margin:0 auto 10px;padding:0 16px;display:flex;position:relative}.x4-watch-tabs button{font:inherit;color:var(--x4-muted);background:var(--x4-surface);border:1px solid var(--x4-line);cursor:pointer;border-radius:10px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:700;display:inline-flex}.x4-watch-tabs button[aria-selected=true]{color:var(--x4-hl);border-color:var(--x4-amber)}.x4-watch-stage{z-index:1;max-width:1200px;margin:0 auto;padding:0 16px;position:relative}.x4-watch-stage>div{aspect-ratio:16/9;border:1px solid var(--x4-line);background:#000;border-radius:12px;position:relative;overflow:hidden}.x4-watch-stage iframe,.x4-watch-stage .m2fplayer{border:0;width:100%;height:100%;position:absolute;inset:0}.x4-watch-info{z-index:2;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:18px;margin-top:18px;display:flex;position:relative}.x4-watch-label{letter-spacing:2px;text-transform:uppercase;background:var(--x4-grad);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:11px;font-weight:800;display:inline-block}.x4-watch-info h1{margin-top:5px;font-size:clamp(20px,2.8vw,28px);font-weight:800}.x4-watch-note{color:var(--x4-muted);max-width:640px;margin-top:8px;font-size:13px}.x4-watch-tools{flex-shrink:0;gap:10px;display:flex}body.x4hd .x4-watch-stage [data-watch-panel] .player-error{text-align:center;color:var(--x4-muted);flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:20px;display:flex;position:absolute;inset:0}.x4-watch-stage .player-error h2{color:var(--x4-text);font-size:18px}body.x4hd .watch-banners{width:auto;max-width:1200px;margin:12px auto;padding:0 16px}body.x4hd .x4-watch-info.x4-wrap,body.x4hd .x4-watch-related.x4-wrap{max-width:1200px}body.x4hd .x4-watch-related,body.x4hd .x4-title-related{margin-bottom:48px}.x4-footer{background:linear-gradient(180deg, var(--x4-surface-2) 0%, #030305 100%);margin-top:56px;position:relative}.x4-footer:before{content:"";background:var(--x4-grad);opacity:.85;height:2px;position:absolute;top:0;left:0;right:0}.x4-footer-inner{max-width:1380px;margin:0 auto;padding:32px 16px 22px}.x4-footer-brand{text-align:center}.x4-footer-brand .x4-brand{justify-content:center}.x4-footer-brand p{color:var(--x4-muted);margin-top:8px;font-size:13px}.x4-footer-links{border-top:1px solid var(--x4-line);flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:18px;padding-top:16px;display:flex}.x4-footer-links a{color:var(--x4-muted);font-size:13px;text-decoration:none}.x4-footer-links a:hover{color:var(--x4-hl)}.x4-footer-disclaimer{color:#6b6b78;text-align:center;max-width:900px;margin-top:14px;margin-left:auto;margin-right:auto;font-size:12px;line-height:1.7}.x4-footer-meta{border-top:1px solid var(--x4-line);color:#5c5c68;justify-content:center;gap:8px;margin-top:14px;padding-top:14px;font-size:12px;display:flex}@media (width<=1020px){.x4-inline{display:none}.x4-search{margin-left:auto}.x4-grid,body.x4hd .catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=860px){.x4-detail-box{grid-template-columns:150px minmax(0,1fr);padding-top:40px}}@media (width<=620px){.x4-cat-arrow{width:30px;height:30px}.x4-bar{gap:8px;padding-inline:12px}.x4-logo-image{max-width:110px;max-height:30px}.x4-search{flex:1 1 0;gap:4px}.x4-search input{width:100%;min-width:0;padding-inline:8px}.x4-search button{flex-shrink:0}.x4-grid,body.x4hd .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}.x4-detail-box{grid-template-columns:minmax(0,1fr);gap:16px;padding-top:30px}.x4-detail-poster{max-width:150px}.x4-detail-bg{height:320px}.x4-watch-info{flex-direction:column}.x4-search input{width:100%}.x4-brand-name{display:none}.x4-card-ribbon{max-width:calc(100% - 42px);padding:4px 8px 4px 6px;font-size:10px}.x4-card-ribbon-genre{display:none}}

.x4-footer-brand .x4-logo{display:inline-block}

.x4-footer .demo-label{display:block;width:fit-content;margin:0 auto 12px}

/* floating bottom nav (mobile) */
.x4-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;background:rgba(6,6,10,.92);border-top:1px solid var(--x4-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-bottom:env(safe-area-inset-bottom)}
.x4-bottom-nav a,.x4-bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 7px;font-size:10px;font-weight:600;color:var(--x4-muted);background:transparent;border:0;font-family:inherit;cursor:pointer;text-decoration:none}
.x4-bottom-nav svg{display:block}
.x4-bottom-nav a.active{color:var(--x4-hl)}
.x4-bottom-nav a:hover,.x4-bottom-nav button:hover{color:#fff}
@media (max-width:860px){.x4-bottom-nav{display:flex}body.x4-has-bottomnav{padding-bottom:58px}.toast{bottom:calc(66px + env(safe-area-inset-bottom))}}

.x4-hero{position:relative;height:min(72vh,640px);min-height:420px;overflow:hidden;background:var(--x4-surface-2)}
.x4-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.x4-slide.active{opacity:1}
.x4-slide-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.x4-slide-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,10,.92) 0%,rgba(6,6,10,.55) 45%,rgba(6,6,10,.15) 75%),linear-gradient(0deg,var(--x4-bg) 0%,rgba(6,6,10,0) 42%)}
.x4-slide-body{position:absolute;left:max(16px,calc(50vw - 600px));right:16px;bottom:56px;max-width:640px;display:grid;gap:10px}
.x4-slide-kicker{display:flex;align-items:center;gap:10px;margin:0;font-size:12px;font-weight:700;letter-spacing:2.4px;color:var(--x4-hl);text-transform:uppercase}
.x4-slide-kicker-line{width:34px;height:2px;background:var(--x4-grad);border-radius:2px}
.x4-slide-title{margin:0;font-size:clamp(30px,5vw,52px);line-height:1.08;font-weight:800;letter-spacing:.3px}
.x4-slide-title a{color:#fff;text-decoration:none}
.x4-slide-title a:hover{color:var(--x4-hl)}
.x4-slide-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;font-size:13.5px;color:#c9c9d4}
.x4-slide-meta a{color:inherit;text-decoration:none}
.x4-slide-meta a:hover{color:var(--x4-hl)}
.x4-slide-rate{color:var(--x4-hl);font-weight:700}
.x4-slide-overview{margin:0;font-size:14.5px;line-height:1.65;color:#b9b9c4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.x4-slide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.x4-hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--x4-line);border-radius:50%;background:rgba(6,6,10,.55);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s,color .2s}
.x4-hero-arrow:hover{border-color:var(--x4-amber);color:var(--x4-hl)}
.x4-hero-prev{left:14px}
.x4-hero-next{right:14px}
.x4-hero-dots{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:20px;display:flex;gap:9px}
.x4-hero-dots button{width:26px;height:4px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.18);cursor:pointer}
.x4-hero-dots button span{display:block;height:100%;border-radius:inherit}
.x4-hero-dots button.active{background:var(--x4-hl)}
.x4-hero-progress{position:absolute;z-index:3;inset:auto 0 0;height:2px;background:rgba(255,255,255,.08)}
.x4-hero-progress span{display:block;width:0;height:100%;background:var(--x4-grad)}
.x4-hero-progress span.run{animation:x4-fill 6s linear forwards}
@keyframes x4-fill{from{width:0}to{width:100%}}
@media (max-width:620px){.x4-hero{height:62vh;min-height:380px}.x4-slide-body{left:12px;right:12px;bottom:46px}.x4-slide-overview{-webkit-line-clamp:2}.x4-hero-arrow{display:none}}

.x4-detail-trailer{margin-top:26px}
.x4-detail-trailer-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--x4-line);background:#000}
.x4-detail-trailer-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}