:root { --bg:#0b0b10; --card:#171722; --line:#262636; --text:#f2f2f7; --mute:#9a9ab0; --accent:#dc2626; --gold:#f59e0b; }
* { box-sizing: border-box; }

html, body, * { scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar, html::-webkit-scrollbar { display:none; width:0; height:0; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: "Bai Jamjuree", system-ui, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
button { font:inherit; cursor:pointer; }

.nav { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:20px; padding:14px 24px; background:rgba(11,11,16,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.logo { font-weight:800; font-size:1.25rem; }
.logo span { background:linear-gradient(90deg,#f59e0b,#dc2626); -webkit-background-clip:text; background-clip:text; color:transparent; }
.menu { display:flex; gap:4px; }
.menu a { color:var(--mute); text-decoration:none; padding:8px 12px; border-radius:8px; font-size:.92rem; }
.menu a:hover { color:var(--text); background:var(--card); }
.nav input { margin-left:auto; width:260px; max-width:100%; padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--text); outline:none; }
.nav input:focus { border-color:var(--accent); }

.hero { position:relative; height:560px; overflow:hidden; display:flex; align-items:flex-end; padding:48px 24px 56px; transition:background .6s; }
.hero-bg { position:absolute; inset:0; overflow:hidden; }
.hero-bg[hidden] { display:none; }
.hero-bg .hb-blur { display:none; position:absolute; inset:-40px; background:center/cover no-repeat; filter:blur(36px) brightness(.5); }
.hero-bg .hb-pic { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-bg.contain .hb-blur { display:block; }
.hero-bg.contain .hb-pic { left:auto; right:max(24px, calc((100% - 1560px) / 2 + 24px)); width:auto; max-width:48%; object-fit:contain; object-position:right center; border-radius:10px; }
@media (max-width:700px) { .hero-bg.contain .hb-pic { right:16px; max-width:42%; height:auto; max-height:100%; top:0; bottom:auto; object-position:right top; border-radius:0 0 10px 10px; } }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 4%,rgba(11,11,16,.15) 75%); }
.hero-inner { position:relative; z-index:1; max-width:640px; }
.badge { display:inline-block; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.18); font-size:.75rem; margin-bottom:12px; }
.hero h2 { font-size:clamp(2rem,5vw,3.2rem); line-height:1.15; margin:0 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hero .meta { color:#e5e5e5; font-size:.9rem; margin-bottom:10px; display:flex; gap:12px; flex-wrap:wrap; }
.hero .meta b { color:var(--gold); }
.hero p { color:#ddd; line-height:1.6; margin:0 0 20px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:1100px) { .hero { height:480px; } }
.btns { display:flex; gap:10px; flex-wrap:wrap; }
.btn { border:0; padding:12px 24px; border-radius:999px; font-weight:600; background:#fff; color:#111; }
.btn:hover { background:#e5e5e5; }
.btn.ghost { background:rgba(255,255,255,.18); color:#fff; }
.btn.ghost:hover { background:rgba(255,255,255,.3); }
.dots { position:absolute; z-index:2; right:24px; bottom:24px; display:flex; gap:8px; }
.dots button { width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.35); padding:0; }
.dots button.on { background:#fff; width:26px; border-radius:6px; }


.section { padding:24px; max-width:1560px; margin:0 auto; }
.sec-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:14px; gap:12px; }
.sec-head h3 { margin:0; font-size:1.25rem; }
.sec-head p { margin:2px 0 0; color:var(--mute); font-size:.85rem; }
.arrows { display:flex; gap:6px; }
.arrows button { display:grid; place-items:center; width:36px; height:36px; padding:0; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#d8d6d0; transition:background .18s, border-color .18s, color .18s, transform .12s, opacity .18s; }
.arrows button:hover:not(:disabled) { background:linear-gradient(135deg,#f59e0b,#dc2626); border-color:transparent; color:#fff; }
.arrows button:active:not(:disabled) { transform:scale(.92); }
.arrows button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.arrows button:disabled { opacity:.3; cursor:default; }

.row { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none; }
.row::-webkit-scrollbar { display:none; }
.row .card { flex:0 0 190px; min-width:0; scroll-snap-align:start; }
.grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px 18px; }
@media (max-width:1100px) { .grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:800px) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.card { position:relative; cursor:pointer; transition:transform .2s; }
.card:hover { transform:translateY(-6px); }
.poster { position:relative; aspect-ratio:2/3; border-radius:12px; overflow:hidden; display:flex; align-items:flex-end; padding:12px; background-size:cover; background-position:center; }
.poster::after { content:none; }
.poster .ptitle { position:relative; z-index:1; font-weight:700; font-size:.95rem; line-height:1.25; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.card:hover .poster { box-shadow:0 12px 30px rgba(220,38,38,.3); }
.rate { position:absolute; z-index:2; top:8px; left:8px; padding:3px 8px; font-size:.72rem; border-radius:6px; background:rgba(0,0,0,.6); color:var(--gold); font-weight:600; }
.new { position:absolute; z-index:2; top:8px; right:8px; padding:3px 7px; font-size:.68rem; border-radius:6px; background:var(--accent); font-weight:700; }
.cinfo { padding:8px 2px 0; }
.cinfo h4 { margin:0 0 3px; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cinfo p { margin:0; font-size:.78rem; color:var(--mute); }

.empty { color:var(--mute); padding:30px 0; }


.footer { margin-top:60px; padding:64px 0 32px; background:#0b0b11; border-top:1px solid rgba(255,255,255,.08); color:#b9b5ae; font:15px/24px "Bai Jamjuree", system-ui, sans-serif; }
.f-shell { width:min(1560px,100%); margin:0 auto; padding:0 24px 48px; }
.f-grid { display:grid; grid-template-columns:328fr 211fr 375fr 211fr 211fr; gap:36px; }
.f-about { display:flex; flex-direction:column; }
.f-brand { display:flex; margin-bottom:14px; text-decoration:none; color:#f2f0ec; }
.f-brand .logo { font:800 28px/1.2 "Bai Jamjuree", system-ui, sans-serif; }
.f-tagline { margin:0; max-width:280px; font:13.5px/21.6px Verdana, Geneva, sans-serif; color:#8e8a83; }
.f-contact { margin-top:14px; font-size:13px; line-height:1.65; color:rgba(255,255,255,.75); }
.f-contact > div { margin-bottom:4px; }
.f-contact strong { font-weight:700; }
.f-contact a { color:rgba(255,255,255,.75); }
.f-contact a.hl { color:#ffc247; font-weight:700; text-decoration:none; }
.f-contact a.ul { text-decoration:underline; }
.f-contact a:not(.hl):not(.ul) { text-decoration:none; }
.f-col h4 { margin:0 0 18px; font:700 16px/29px "Bai Jamjuree", system-ui, sans-serif; color:#f2f0ec; }
.f-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:13.5px; line-height:21.6px; }
.f-genre-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.f-links a { color:#b9b5ae; text-decoration:none; }
.f-links a:hover { color:#fff; }
.f-links a.strong { font-weight:700; }
.f-bottom { width:min(1560px,100%); margin:0 auto; padding:12px 24px 14px; border-top:1px solid rgba(255,255,255,.06); }

.f-copy { position:relative; margin:0 auto; max-width:960px; padding:8px 24px; text-align:center; font-size:14px; line-height:1.5; color:#f0ede6;
  border:1.5px solid transparent; border-radius:16px;
  background:linear-gradient(#12121a, #12121a) padding-box, linear-gradient(120deg, #f59e0b, #dc2626, #7c3aed) border-box;
  box-shadow:0 0 26px rgba(245,158,11,.14), 0 6px 20px rgba(0,0,0,.35); }
.f-copy .yr { color:#ffc247; font-weight:700; }
@media (min-width:1200px) { .f-copy { width:fit-content; max-width:100%; white-space:nowrap; padding:8px 32px; } }
@media (max-width:900px) { .f-grid { grid-template-columns:1fr 1fr; } .f-about { grid-column:1 / -1; } }
.section { scroll-margin-top:70px; }

@media (min-width:1100px) {
  .nav { padding-left:max(24px, calc((100% - 1560px) / 2 + 24px)); padding-right:max(24px, calc((100% - 1560px) / 2 + 24px)); }
  .hero { padding-left:max(24px, calc((100% - 1560px) / 2 + 24px)); }
  .dots { right:max(24px, calc((100% - 1560px) / 2 + 24px)); }
}

/* ===== Mobile ===== */
@media (max-width:700px) {
  .nav { padding:10px 8px 10px 16px; gap:12px; flex-wrap:nowrap; }
  .logo { font-size:1.15rem; }
  .menu { display:none; }
  .nav input { margin:0; flex:1; min-width:0; width:auto; font-size:16px; padding:9px 14px; }

  .hero { height:260px; padding:20px 16px 34px; }
  .hero h2 { font-size:1.4rem; margin-bottom:6px; }
  .hero .meta { font-size:.8rem; margin-bottom:12px; gap:8px; }
  .hero p, .badge { display:none; }
  .btn { padding:11px 20px; min-height:44px; }
  .dots { right:16px; bottom:14px; }

  .extra { display:none; }

  .section { padding:16px; }
  .sec-head h3 { font-size:1.1rem; }
  .arrows { display:none; }
  .row { margin-right:-16px; padding-right:16px; gap:12px; }
  .row .card { flex-basis:138px; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 12px; }

  .footer { padding:8px 0 0; margin-top:16px; }
  .f-bottom { margin-top:0; border-top:0; padding:6px 16px 12px; }

}

@media (hover:none) {
  .card:hover { transform:none; }
  .card:hover .poster { box-shadow:none; }
}

.d-hero { position:relative; min-height:420px; display:flex; align-items:flex-end; padding:24px max(24px, calc((100% - 1560px) / 2 + 24px)) 48px; }
.d-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,var(--bg) 3%,rgba(11,11,16,.2) 85%); }
.d-hero > * { position:relative; z-index:1; }
.d-hero > .hero-bg { position:absolute; z-index:0; }
.d-back { position:absolute; top:20px; left:max(24px, calc((100% - 1560px) / 2 + 24px)); z-index:2; padding:7px 14px; border:1px solid rgba(255,255,255,.4); border-radius:999px; background:rgba(0,0,0,.3); color:#fff; text-decoration:none; font-size:.85rem; }
.d-back:hover { background:rgba(255,255,255,.15); }
@media (min-width:701px) { .d-back { display:none; } }
.d-hero-in { max-width:720px; }
.d-badges { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px; font-size:.85rem; color:#ddd; }
.d-tag { padding:4px 10px; border-radius:6px; background:#ffc247; color:#111; font-weight:800; font-size:.72rem; }
.d-hero h1 { margin:0 0 12px; font:800 clamp(2rem,4.5vw,3.2rem)/1.1 "Bai Jamjuree", system-ui, sans-serif; }
.d-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:20px; font-size:.9rem; }
.d-meta b { color:var(--gold); }
.d-meta i { font-style:normal; font-size:.75rem; padding:2px 8px; border:1px solid rgba(255,255,255,.35); border-radius:5px; }
.d-btns { display:flex; flex-wrap:wrap; gap:10px; }
.btn.gold { background:#ffc247; color:#111; }
.btn.gold:hover { background:#ffd06b; }
.btn.outline { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn.outline:hover { background:rgba(255,255,255,.12); }

.d-body { width:min(1560px,100%); margin:0 auto; padding:32px 24px 0; display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:24px; align-items:start; }
.d-main { display:grid; gap:24px; min-width:0; }
.d-player { position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.d-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.d-player video { position:absolute; inset:0; width:100%; height:100%; background:#000; }
.d-player video::cue { color:#fff; font-family:"Bai Jamjuree", system-ui, sans-serif; font-weight:600; font-size:1px; line-height:1; }
.d-player::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.25); pointer-events:none; }
.d-player:has(iframe)::after, .d-player:has(video)::after { display:none; }
.d-playbtn { position:relative; z-index:1; width:72px; height:72px; border-radius:50%; border:0; background:rgba(255,255,255,.88); color:#111; font-size:1.7rem; padding-left:5px; }
.d-ptitle { position:absolute; z-index:1; top:14px; left:16px; right:16px; text-align:center; font-weight:700; text-shadow:0 1px 6px rgba(0,0,0,.7); }
.d-card { padding:22px 24px; background:#12121a; border:1px solid var(--line); border-radius:14px; }
.d-card h2, .d-card h3 { margin:0 0 14px; font-size:1.15rem; }
.d-card p { margin:0; line-height:1.8; color:#d6d6e2; }
.d-info dl { margin:0; display:grid; grid-template-columns:104px 1fr; gap:12px 14px; font-size:.9rem; }
.d-info dt { color:var(--mute); }
.d-info dd { margin:0; color:#fff; }
.d-info dd.hl { color:#ffc247; font-weight:700; }
.d-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.d-tags button { padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--text); font-size:.85rem; }
.d-tags button:hover { border-color:var(--accent); }
.d-similar { margin-top:16px; }

@media (max-width:900px) { .d-body { grid-template-columns:minmax(0,1fr); } }
@media (max-width:700px) {
  .d-hero { min-height:0; padding:64px 16px 20px; }
  .d-back { top:14px; left:16px; }
  .d-hero h1 { font-size:1.6rem; margin-bottom:8px; }
  .d-meta { margin-bottom:14px; }
  .d-btns .btn { flex:1; min-height:44px; padding-inline:12px; }
  .d-body { padding:16px 16px 0; gap:16px; }
  .d-main { gap:16px; }
  .d-card { padding:18px 16px; }
  .d-info dl { grid-template-columns:96px 1fr; }
  .d-playbtn { width:56px; height:56px; font-size:1.3rem; }
  .d-ptitle { font-size:.85rem; }
  .d-similar .grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 10px; }
  .d-similar .cinfo h4 { font-size:.8rem; }
  .d-similar .cinfo p, .d-similar .rate { font-size:.68rem; }
  .d-similar .ptitle { display:none; }
}

a.card { display:block; color:inherit; text-decoration:none; }
a.logo { color:var(--text); text-decoration:none; }
a.btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.seo-fallback { position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; }
.sec-head h1 { margin:0; font-size:1.5rem; }
.d-orig { margin:-6px 0 10px; color:#cfcfdc; font-size:.95rem; }

.prose { color:#d6d6e2; line-height:1.85; }
.prose > :first-child { margin-top:0; }
.prose > :last-child { margin-bottom:0; }
.prose p { margin:0 0 1em; }
.prose h2, .prose h3, .prose h4 { color:#fff; margin:1.4em 0 .6em; line-height:1.3; }
.prose a { color:#ffc247; }
.prose img { max-width:100%; border-radius:10px; margin:.6em 0; }
.prose ul, .prose ol { margin:0 0 1em; padding-left:1.4em; }
.prose blockquote { margin:1em 0; padding:.4em 1em; border-left:3px solid var(--accent); color:#c9c9d6; background:#12121a; border-radius:0 8px 8px 0; }
.prose code { background:#1c1c28; padding:2px 6px; border-radius:5px; font-size:.9em; }
.prose hr { border:0; border-top:1px solid var(--line); margin:1.6em 0; }

img.a-hero { width:100%; border-radius:14px; margin:0 0 22px; }
.crumbs { color:var(--mute); font-size:.85rem; }
.crumbs a { color:var(--mute); text-decoration:none; }
.crumbs a:hover { color:#fff; }
.tag-pill { padding:6px 14px; border-radius:999px; border:1px solid var(--line); font-size:.85rem; }
.nf { text-align:center; padding:80px 24px; }
.nf h1 { margin:0 0 10px; }
.nf p { color:var(--mute); }

.d-player.d-pc:not(:fullscreen) { aspect-ratio:16/9 !important; width:100% !important; max-width:1920px; max-height:none !important; margin-inline:auto !important; }
.d-player.d-pc { background:#000 !important; }
.d-player.d-pc video { inset:auto; top:0; bottom:0; left:50%; transform:translateX(-50%); height:100%; width:auto; aspect-ratio:3/4; }
.d-player:not(.d-pc):fullscreen, .d-player.fs-fake { background:#000 !important; }
.d-player:not(.d-pc):fullscreen video, .d-player.fs-fake video { inset:auto; top:50%; left:50%; transform:translate(-50%,-50%); height:auto; aspect-ratio:var(--pr,3/4); width:min(100%, calc(100dvh * var(--prn,.75))); }
.d-player:fullscreen, .d-player.fs-fake { width:100% !important; height:100% !important; max-height:none !important; aspect-ratio:auto !important; border-radius:0; border:0; background:#000; }

.d-bar { position:absolute; left:0; right:0; bottom:0; z-index:3; padding:26px 12px 6px; background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0)); opacity:0; pointer-events:none; transition:opacity .25s; }
.d-player.ui .d-bar { opacity:1; pointer-events:auto; }
.d-player:has(video):not(.ui) { cursor:none; }
.d-prog { -webkit-appearance:none; appearance:none; display:block; width:100%; height:16px; margin:0; background:transparent; cursor:pointer; }
.d-prog::-webkit-slider-runnable-track { height:3px; border-radius:2px; background:linear-gradient(to right, #ef4444 var(--p,0%), rgba(255,255,255,.3) var(--p,0%)); }
.d-prog::-moz-range-track { height:3px; border-radius:2px; background:rgba(255,255,255,.3); }
.d-prog::-moz-range-progress { height:3px; border-radius:2px; background:#ef4444; }
.d-prog::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; margin-top:-4.5px; border-radius:50%; background:#ef4444; border:0; }
.d-prog::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:#ef4444; border:0; }
.d-row { display:flex; align-items:center; gap:4px; color:#fff; margin-top:2px; }
.d-b { border:0; background:none; color:#fff; min-width:40px; height:42px; padding:0 5px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.d-b:hover { background:rgba(255,255,255,.14); }
.d-b svg { display:block; }
.d-time { font-size:14px; margin-left:8px; white-space:nowrap; font-variant-numeric:tabular-nums; letter-spacing:.2px; }
.d-sp { flex:1; }
.d-menu { position:absolute; right:12px; bottom:62px; min-width:170px; max-height:min(300px, 45vh); overflow:auto; padding:6px; border-radius:10px; background:rgba(20,20,28,.96); border:1px solid rgba(255,255,255,.12); display:grid; gap:2px; }
.d-menu[hidden] { display:none; }
.d-menu button { text-align:left; border:0; background:none; color:#fff; padding:8px 10px; border-radius:6px; font-size:13px; cursor:pointer; }
.d-menu button:hover { background:rgba(255,255,255,.12); }
.d-menu button.on { color:#fbbf24; font-weight:700; }
.d-mh { padding:6px 10px 2px; font-size:11px; color:#9ca3af; text-transform:uppercase; letter-spacing:.5px; }
@media (max-width:480px) { .d-b { min-width:34px; padding:0 3px; } .d-time { font-size:12px; margin-left:4px; } .d-b svg { transform:scale(.88); } }

.genre-btn, .genre-menu { display:none; }
@media (max-width:700px) {
  .genre-btn { position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:42px; height:42px; padding:0; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.35); -webkit-tap-highlight-color:transparent; transition:background .2s, border-color .2s, transform .12s, box-shadow .2s; }
  .genre-btn:active { transform:scale(.94); }
  .genre-btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

  .gb-bars { position:relative; width:18px; height:14px; }
  .gb-bars i { position:absolute; left:0; height:2px; border-radius:2px; background:currentColor; transition:transform .25s ease, opacity .2s ease, width .25s ease, top .25s ease; }
  .gb-bars i:nth-child(1) { top:0; width:18px; }
  .gb-bars i:nth-child(2) { top:6px; width:18px; }
  .gb-bars i:nth-child(3) { top:12px; width:18px; }
  .genre-btn[aria-expanded="true"] { background:linear-gradient(180deg, var(--accent), #b91c1c); border-color:transparent; color:#fff; box-shadow:0 4px 14px rgba(220,38,38,.45); }
  .genre-btn[aria-expanded="true"] .gb-bars i:nth-child(1) { top:6px; width:18px; transform:rotate(45deg); }
  .genre-btn[aria-expanded="true"] .gb-bars i:nth-child(2) { opacity:0; width:0; }
  .genre-btn[aria-expanded="true"] .gb-bars i:nth-child(3) { top:6px; width:18px; transform:rotate(-45deg); }

  .genre-btn.filtered::after { content:""; position:absolute; top:-3px; right:-3px; width:10px; height:10px; border-radius:50%; background:var(--gold); border:2px solid var(--bg); }
  .genre-menu { position:absolute; top:calc(100% + 6px); left:12px; right:12px; z-index:40; max-height:min(70vh, 460px); overflow-y:auto; padding:14px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:rgba(15,15,22,.98); backdrop-filter:blur(14px); box-shadow:0 18px 40px rgba(0,0,0,.6); }
  .genre-menu:not([hidden]) { display:grid; grid-template-columns:1fr 1fr; gap:8px; animation:gm-in .18s ease-out; }
  @keyframes gm-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  .genre-menu h4 { grid-column:1 / -1; margin:0 0 4px; font-size:.75rem; color:var(--mute); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
  .genre-menu button { padding:11px 12px; text-align:left; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03); color:var(--text); font-size:.95rem; min-height:44px; transition:background .15s, border-color .15s; }
  .genre-menu button:active { background:rgba(255,255,255,.1); }
  .genre-menu button.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
}
@media (prefers-reduced-motion:reduce) { .gb-bars i, .genre-btn, .genre-menu { transition:none !important; animation:none !important; } }

body:not(.ready) .footer { display:none !important; }

.ad-slot { display:grid; gap:12px; padding:16px 24px 0; max-width:1560px; margin:0 auto; justify-items:center; }
.d-main .ad-slot { padding:0; margin:0 0 16px; }
.ad { position:relative; max-width:100%; line-height:0; }
.ad img { display:block; max-width:100%; height:auto; border-radius:10px; border:1px solid var(--line); background:#000; }
.ad a { display:block; }
.ad-tag { position:absolute; top:6px; left:6px; padding:1px 6px; font-size:10px; line-height:1.5; border-radius:4px; background:rgba(0,0,0,.6); color:#d4d4e0; pointer-events:none; }
.d-main .ad-slot.ad-grid6 { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; justify-items:stretch; margin:10px 0 16px; }
.ad-slot.ad-gridtop { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; justify-items:stretch; padding:16px 24px 0; max-width:1200px; }
.ad-grid6 .ad { width:100%; }
.ad-grid6 .ad { border:1.5px solid transparent; border-radius:6px; overflow:hidden;
  background:linear-gradient(#12121a, #12121a) padding-box, linear-gradient(120deg, #f59e0b, #dc2626, #7c3aed) border-box;
  box-shadow:0 0 26px rgba(245,158,11,.14), 0 6px 20px rgba(0,0,0,.35); }
.ad-grid6 .ad img { width:100%; aspect-ratio:728 / 90; object-fit:cover; border:0; border-radius:0; }
.ad-grid6 .ad-tag { top:6px; left:auto; right:6px; }
.ad-mobile { display:none; }
@media (max-width:700px) { .ad-slot.ad-gridtop { grid-template-columns:minmax(0, 1fr); padding:10px 10px 0; } .d-main .ad-slot.ad-grid6 { grid-template-columns:minmax(0, 1fr); } .ad-slot { padding:12px 16px 0; } .ad-pc { display:none; } .ad-mobile { display:block; } }

.ad-float { position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:min(1200px, calc(100vw - 16px)); z-index:60; }
.ad-float-body { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:5px; padding:6px 6px 0; background:rgba(10,10,15,.97); border:1px solid rgba(255,255,255,.16); border-bottom:0; border-radius:12px 12px 0 0; box-shadow:0 -8px 28px rgba(0,0,0,.55); overflow:hidden; }
.ad-float .ad-slot { display:contents; padding:0; }

.ad-float .ad { width:100%; border:1.5px solid transparent; border-radius:6px; overflow:hidden;
  background:linear-gradient(#12121a, #12121a) padding-box, linear-gradient(120deg, #f59e0b, #dc2626, #7c3aed) border-box;
  box-shadow:0 0 26px rgba(245,158,11,.14), 0 6px 20px rgba(0,0,0,.35); }
.ad-float .ad img { width:100%; aspect-ratio:728 / 90; object-fit:cover; border:0; border-radius:0; }
.ad-float .ad-tag { top:6px; left:auto; right:6px; }

.ad-toggle { position:absolute; left:14px; bottom:100%; display:flex; align-items:center; gap:9px; height:32px; padding:0 14px 0 8px; font:700 12.5px/1 "Bai Jamjuree", system-ui, sans-serif; letter-spacing:.02em; color:#fff; white-space:nowrap; background:linear-gradient(180deg, #ef4444 0%, #b91c1c 100%); border:1px solid rgba(255,255,255,.22); border-bottom:0; border-radius:12px 12px 0 0; box-shadow:0 -6px 18px rgba(220,38,38,.45), inset 0 1px 0 rgba(255,255,255,.3); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.ad-toggle:hover { filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 -8px 22px rgba(239,68,68,.6), inset 0 1px 0 rgba(255,255,255,.35); }
.ad-toggle:active { transform:translateY(0) scale(.97); }
.ad-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.ad-toggle .at-ico { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.ad-toggle .at-ico svg { transition:transform .3s ease; }
.ad-float.closed .ad-toggle .at-ico svg { transform:rotate(180deg); }
.ad-toggle .at-count { display:grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#fff; color:#b91c1c; font-size:11px; }

.ad-float.closed .ad-toggle { border-radius:12px 12px 0 0; }
.ad-float.closed .ad-toggle::before { content:""; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 0 rgba(245,158,11,.7); animation:at-pulse 1.8s ease-out infinite; }
@keyframes at-pulse { 0% { box-shadow:0 0 0 0 rgba(245,158,11,.7); } 70%,100% { box-shadow:0 0 0 10px rgba(245,158,11,0); } }
@media (prefers-reduced-motion:reduce) { .ad-toggle, .ad-toggle .at-ico svg { transition:none; } .ad-float.closed .ad-toggle::before { animation:none; } }
.ad-float.closed .ad-float-body { display:none; }
body:not(.ready) .ad-float { display:none; }
@media (max-width:700px) {
  .ad-float { width:100vw; }
  .ad-float-body { grid-template-columns:minmax(0, 1fr); gap:2px; padding:2px 10px 0; border-width:0; border-radius:0; }
  .ad-float .ad { border-width:1px; }
  .ad-float .ad-tag { display:none; }
  .ad-toggle { left:10px; height:30px; font-size:12px; }
}


@media (max-width:700px) {
  .f-shell { display:block; padding:22px 16px 4px; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 160px); }
  .f-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 16px; }
  .f-about { grid-column:1 / -1; }
  .f-brand { margin-bottom:8px; }
  .f-brand .logo { font-size:26px; line-height:1.1; }
  .f-tagline { max-width:none; font-size:13px; line-height:1.6; }
  .f-contact { display:grid; gap:8px; margin-top:16px; font-size:12.5px; line-height:1.55; color:#9a9ab0; }
  .f-contact > div { display:flex; gap:8px; align-items:flex-start; margin:0; }
  .f-contact > div::before { content:""; flex:0 0 16px; height:16px; margin-top:2px; background:#f59e0b; -webkit-mask:var(--ico) center / contain no-repeat; mask:var(--ico) center / contain no-repeat; }
  .f-contact .ci { display:none; }
  .f-contact > div:nth-child(1) { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
  .f-contact > div:nth-child(3) { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
  .f-contact > div:nth-child(4) { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
  .f-contact > div:nth-child(6) { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4 3 11l6 2 2 6 3-4 5 3z'/%3E%3C/svg%3E"); }
  .f-contact > div:nth-child(2), .f-contact > div:nth-child(5) { display:none; }
  .f-contact strong { color:#f2f2f7; font-weight:600; }
  .f-contact a.hl, .f-contact a.ul { color:#ffc247; font-weight:600; text-decoration:none; }
  .f-about + .f-col { grid-column:1 / -1; grid-row:2; }
  .f-about + .f-col + .f-col { grid-column:1 / -1; grid-row:3; }
  .f-about + .f-col + .f-col + .f-col { grid-column:1 / -1; grid-row:4; }
  .f-about + .f-col .f-links, .f-about + .f-col + .f-col + .f-col .f-links { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 16px; }
  .f-col h4 { margin:20px 0 8px; font-size:15px; line-height:1.2; }
  .f-links { gap:0; }
  .f-links a { display:flex; align-items:center; min-height:40px; }
  .f-genre-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 16px; }
  .f-bottom { padding:6px 16px 12px; }
  .f-copy { padding:8px 14px; font-size:13px; line-height:1.55; border-radius:14px; }
}

@media (min-width:701px) {
  .menu { gap:2px; }
  .menu a { position:relative; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; font-weight:500; letter-spacing:.01em; transition:color .15s, background .15s; }
  .menu a::before { content:""; width:16px; height:16px; flex:0 0 16px; background:currentColor; opacity:.75; -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; transition:opacity .15s, color .15s; }
  .menu a::after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; border-radius:2px; background:linear-gradient(90deg,#f59e0b,#dc2626); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
  .menu a:hover { background:rgba(255,255,255,.05); }
  .menu a:hover::before { opacity:1; color:#ffc247; }
  .menu a:hover::after { transform:scaleX(1); }
  .menu a[data-icon="home"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m3%2010%209-7%209%207v10a1%201%200%200%201-1%201h-5v-7H9v7H4a1%201%200%200%201-1-1z'/%3E%3C/svg%3E"); }
  .menu a[data-icon="star"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m12%202%203.09%206.26L22%209.27l-5%204.87%201.18%206.88L12%2017.77l-6.18%203.25L7%2014.14%202%209.27l6.91-1.01z'/%3E%3C/svg%3E"); }
  .menu a[data-icon="sun"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%202v2M12%2020v2m-7.07-2.93%201.41-1.41m11.32-11.32%201.41-1.41M2%2012h2m16%200h2M4.93%204.93l1.41%201.41m11.32%2011.32%201.41%201.41'/%3E%3C/svg%3E"); }
  .menu a[data-icon="temple"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2022h18M6%2018V11M10%2018V11M14%2018V11M18%2018V11M12%202%203%207v2h18V7z'/%3E%3C/svg%3E"); }
  .menu a[data-icon="globe"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M2%2012h20M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z'/%3E%3C/svg%3E"); }
  .menu a[data-icon="subtitle"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='5'%20width='20'%20height='14'%20rx='2'/%3E%3Cpath%20d='M7%2015h4M15%2015h2M7%2011h2M13%2011h4'/%3E%3C/svg%3E"); }
  .menu a[data-icon="film"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='2'%20width='20'%20height='20'%20rx='2.18'/%3E%3Cpath%20d='M7%202v20M17%202v20M2%2012h20M2%207h5M2%2017h5M17%2017h5M17%207h5'/%3E%3C/svg%3E"); }
  .menu a[data-icon="fire"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8.5%2014.5A2.5%202.5%200%200%200%2011%2012c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054%202-6%20.5%202.5%202%204.9%204%206.5%202%201.6%203%203.5%203%205.5a7%207%200%201%201-14%200c0-1.153.433-2.294%201-3a2.5%202.5%200%200%200%202.5%202.5z'/%3E%3C/svg%3E"); }
  .menu a[data-icon="clock"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%206v6l4%202'/%3E%3C/svg%3E"); }
  .menu a[data-icon="bolt"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%202%203%2014h9l-1%208%2010-12h-9l1-8z'/%3E%3C/svg%3E"); }
  .menu a[data-icon="grid"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='14'%20y='3'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='3'%20y='14'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='14'%20y='14'%20width='7'%20height='7'%20rx='1'/%3E%3C/svg%3E"); }
  .menu a[data-icon="trophy"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209H4.5a2.5%202.5%200%200%201%200-5H6M18%209h1.5a2.5%202.5%200%200%200%200-5H18M4%2022h16M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022M18%202H6v7a6%206%200%200%200%2012%200V2Z'/%3E%3C/svg%3E"); }
  .menu a[data-icon="heart"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z'/%3E%3C/svg%3E"); }
  .menu a[data-icon="tv"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='7'%20width='20'%20height='15'%20rx='2'/%3E%3Cpath%20d='m17%202-5%205-5-5'/%3E%3C/svg%3E"); }
  .nav input { width:280px; padding:10px 16px 10px 40px; background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center/16px; }
}

.ad-top { max-width:1200px; margin:0 auto; padding:14px 24px 0; }
.ad-top .ad-toggle { position:static; border-radius:12px; border-bottom:1px solid rgba(255,255,255,.22); box-shadow:0 4px 14px rgba(220,38,38,.4), inset 0 1px 0 rgba(255,255,255,.3); }
.ad-top .ad-toggle:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(239,68,68,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.ad-top .ad-toggle { position:relative; left:auto; bottom:auto; }
.ad-top.closed .ad-toggle .at-ico svg { transform:rotate(180deg); }
.ad-top.closed .ad-toggle::before { content:""; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%; background:var(--gold); animation:at-pulse 1.8s ease-out infinite; }
.ad-top.closed .ad-top-body { display:none; }
.ad-top .ad-slot.ad-gridtop { padding:8px 0 0; max-width:none; }
@media (min-width:701px) {
  .ad-top { display:flex; align-items:flex-start; gap:5px; }
  .ad-top .ad-toggle { flex:0 0 auto; }
  .ad-top .ad-top-body { flex:1 1 auto; min-width:0; }
  .ad-top .ad-slot.ad-gridtop { padding:0; }
}
@media (max-width:700px) { .ad-top { padding:10px 10px 0; } .ad-top .ad-toggle { height:30px; font-size:12px; } .ad-top .ad-slot.ad-gridtop { padding:6px 0 0; } }

.ad-top .ad-toggle { display:none !important; }

.logo-img { display:block; height:34px; width:auto; max-width:220px; }
.f-brand .logo-img { height:38px; max-width:240px; }
@media (max-width:700px) { .logo-img { height:28px; max-width:170px; } .f-brand .logo-img { height:32px; } }

.cinfo p { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cinfo .cmeta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cinfo .cviews { display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; color:var(--mute); font-variant-numeric:tabular-nums; }
.cinfo .cviews svg { opacity:.85; }

.poster::before { content:var(--wm, ""); position:absolute; left:50%; top:42%; z-index:1; transform:translate(-50%,-50%) rotate(-24deg); font:800 1.3rem/1 system-ui,sans-serif; letter-spacing:.06em; white-space:nowrap; color:rgba(255,255,255,.2); text-shadow:0 1px 3px rgba(0,0,0,.25); pointer-events:none; }

.pol-back { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(5,5,9,.72); backdrop-filter:blur(4px); }
.pol-box { width:min(760px,100%); max-height:min(86vh,900px); display:flex; flex-direction:column; border-radius:16px; background:#12121a; border:1px solid rgba(255,255,255,.12); box-shadow:0 24px 80px rgba(0,0,0,.6); overflow:hidden; }
.pol-box header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.08); }
.pol-box h2 { margin:0; font-size:1.25rem; }
.pol-x { display:grid; place-items:center; width:34px; height:34px; padding:0; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--text); }
.pol-x:hover { background:linear-gradient(135deg,#f59e0b,#dc2626); border-color:transparent; }
.pol-body { padding:20px 24px 26px; overflow-y:auto; line-height:1.75; color:#d8d6d0; }
.pol-body h2, .pol-body h3 { margin:18px 0 8px; color:#fff; font-size:1.05rem; }
.pol-body p { margin:0 0 12px; }
.pol-body ul { margin:0 0 12px; padding-left:22px; }
@media (max-width:700px) { .pol-back { padding:0; align-items:flex-end; } .pol-box { width:100%; max-height:90vh; border-radius:16px 16px 0 0; } .pol-box header { padding:14px 16px; } .pol-body { padding:16px 16px 24px; } }

button, input, textarea, select { font-family:inherit; }
.hero .meta { flex-wrap:nowrap; align-items:center; white-space:nowrap; }
.hero .meta > * { flex:0 0 auto; line-height:1.4; }
.hero .meta > span:nth-child(3) { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.d-player.fs-fake { position:fixed !important; inset:0; z-index:9999; margin:0 !important; }
html.fs-lock, html.fs-lock body { overflow:hidden; }
.sub-ov { position:absolute; z-index:2; pointer-events:none; overflow:hidden; }
.sub-box { position:absolute; left:50%; transform:translateX(-50%); text-align:center; line-height:1.3; font-weight:600; color:#fff; font-family:"Bai Jamjuree", system-ui, sans-serif; }
.sub-box span { display:block; width:fit-content; max-width:100%; margin:0 auto; padding:0 6px; background:rgba(0,0,0,.72); }

.all-page { padding-top:28px; }
.all-page h1 { font-size:1.5rem; margin:0; }
.all-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.pager { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:28px 0 8px; }
.pager a { min-width:40px; height:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:var(--card); color:var(--mute); text-decoration:none; font-weight:600; }
.pager a:hover { color:var(--text); }
.pager a.on { background:linear-gradient(90deg,#f59e0b,#dc2626); color:#fff; }
@media (max-width:700px) { .all-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .all-page { padding-top:18px; } }

.see-all { margin-left:auto; align-self:flex-end; flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:999px; background:var(--card); color:var(--text); text-decoration:none; font-size:.88rem; font-weight:600; white-space:nowrap; }
.see-all:hover { background:linear-gradient(90deg,#f59e0b,#dc2626); color:#fff; }

.d-player, .d-player * { -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; }
.d-player, .d-player video { outline:none; -webkit-user-select:none; user-select:none; }
.d-player:focus, .d-player:focus-visible, .d-player video:focus { outline:none; }

.menu a.on { color:var(--text); background:rgba(255,255,255,.05); }
.menu a.on::before { opacity:1; color:#ffc247; }
.menu a.on::after { transform:scaleX(1); }

.hero-row { position:relative; width:min(1560px,100%); margin:0 auto; padding:24px 24px 0; }
.hero-track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.hero-item { position:relative; flex:0 0 calc((100% - 64px) / 5); min-width:0; aspect-ratio:450/280; scroll-snap-align:start; border-radius:14px; overflow:hidden; background:var(--card) center 22%/cover no-repeat; border:1px solid var(--line); color:var(--text); text-decoration:none; display:flex; align-items:flex-end; transition:transform .2s, box-shadow .2s; }
.hero-item:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(220,38,38,.3); }
.hero-item::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(11,11,16,.92) 6%,rgba(11,11,16,.1) 70%); pointer-events:none; }
.hero-item .new { top:12px; right:12px; }
.hi-info { position:relative; z-index:1; padding:12px; min-width:0; }
.hi-info h2 { margin:0 0 4px; font-size:.95rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hi-meta { display:flex; flex-wrap:wrap; gap:2px 10px; margin-bottom:8px; color:#e5e5e5; font-size:.74rem; }
.hi-meta b { color:var(--gold); }
.hi-play { display:inline-block; padding:5px 12px; border-radius:999px; background:#fff; color:#111; font-size:.74rem; font-weight:600; }
.hero-nav { position:absolute; z-index:3; top:calc(50% + 12px); transform:translateY(-50%); display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(11,11,16,.75); backdrop-filter:blur(6px); color:#fff; transition:background .18s, opacity .18s, transform .12s; }
.hero-nav.prev { left:8px; }
.hero-nav.next { right:8px; }
.hero-nav:hover:not(:disabled) { background:linear-gradient(135deg,#f59e0b,#dc2626); border-color:transparent; }
.hero-nav:active:not(:disabled) { transform:translateY(-50%) scale(.92); }
.hero-nav:disabled { opacity:0; pointer-events:none; }
@media (max-width:1100px) { .hero-track { gap:10px; } .hero-item { flex-basis:calc((100% - 40px) / 5); } .hi-info { padding:8px; } .hi-info h2 { font-size:.78rem; } .hi-meta { display:none; } .hi-play { padding:4px 8px; font-size:.66rem; } }
@media (max-width:700px) {
  .hero-row { padding:16px 16px 0; }
  .hero-item { flex-basis:72%; }
  .hi-info { padding:12px; }
  .hi-info h2 { font-size:.95rem; }
  .hi-meta { display:flex; }
  .hi-play { font-size:.74rem; padding:5px 12px; }
  .hero-nav { width:38px; height:38px; }
}

.row.land { gap:16px; }
.row.land .card { flex:0 0 calc((100% - 64px) / 5); }
.row.land .poster { aspect-ratio:450/280; background-position:center 22%; }
@media (max-width:1100px) { .row.land { gap:10px; } .row.land .card { flex-basis:calc((100% - 30px) / 4); } }
@media (max-width:700px) { .row.land .card { flex-basis:72%; } }

.kw-wrap { width:min(1560px,100%); margin:0 auto; padding:24px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.kw-box { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; height:520px; overflow-y:auto; }
.kw-head h3 { margin:0; font-size:1.15rem; }
.kw-head p { margin:2px 0 14px; color:var(--mute); font-size:.85rem; }
.kw-rank { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.kw-rank .kw-item { display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); text-decoration:none; font-size:.9rem; transition:background .15s, border-color .15s; }
.kw-no { flex:0 0 24px; height:24px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.08); color:var(--mute); font-size:.8rem; font-weight:700; }
.kw-no.n1 { background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; }
.kw-no.n2 { background:#dc2626; color:#fff; }
.kw-no.n3 { background:#b45309; color:#fff; }
.kw-text { white-space:nowrap; }
.kw-count { color:var(--mute); font-size:.74rem; white-space:nowrap; }
.kw-tags { display:flex; flex-wrap:wrap; gap:10px; }
.kw-tags a { padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--text); text-decoration:none; font-size:.9rem; transition:background .15s, border-color .15s; }
.kw-tags a, .kw-rank .kw-item { border-color:rgba(245,158,11,.6); color:var(--gold); }
.kw-tags a:hover, .kw-rank .kw-item:hover { background:rgba(245,158,11,.12); border-color:var(--gold); }
@media (max-width:900px) { .kw-wrap { grid-template-columns:minmax(0,1fr); } }
@media (max-width:700px) { .kw-wrap { padding:16px; gap:16px; } .kw-box { padding:16px; height:520px; } }

.f-grid { grid-template-columns:max-content minmax(0,1fr); align-items:center; gap:20px 50px; }
.f-about { display:contents; }
.f-brand { grid-column:1; grid-row:1; margin:0; }
.f-grid .f-copy { grid-column:2; grid-row:1; margin:0; max-width:none; padding:10px 22px; text-align:left; }
.f-tagline { grid-column:1 / -1; grid-row:2; max-width:none; }
@media (max-width:900px) { .f-grid { grid-template-columns:minmax(0,1fr); } .f-brand, .f-tagline, .f-grid .f-copy { grid-column:1; } .f-tagline { grid-row:2; } .f-grid .f-copy { grid-row:3; } }

.footer { margin-top:0; }

.kw-box { overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; touch-action:pan-y; scrollbar-width:none; -ms-overflow-style:none; }
.kw-box::-webkit-scrollbar { display:none; width:0; height:0; }

.grid.land { grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px 16px; }
.grid.land .poster { aspect-ratio:450/280; background-position:center 22%; }
@media (max-width:1100px) { .grid.land { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .grid.land { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; } }

.pager { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:32px; }
.pg { display:grid; place-items:center; min-width:40px; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--text); text-decoration:none; font-weight:600; transition:background .15s, border-color .15s; }
a.pg:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); }
.pg.on { background:linear-gradient(135deg,#f59e0b,#dc2626); border-color:transparent; color:#fff; }
.pg.dots { border:0; background:none; color:var(--mute); min-width:20px; padding:0; }

.hi-info h2 { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset; }
.hi-info { padding-bottom:6px; }
.hi-info h2 { margin-bottom:0; }

.d-player video { object-fit:contain; background:#000; }

.d-main { display:contents; }
@media (min-width:901px) {
  .d-main > .d-playwrap { grid-column:1; grid-row:1; min-width:0; }
  .d-body > .d-info { grid-column:2; grid-row:1; }
  .d-main > .d-card:not(.cm) { grid-column:1 / -1; grid-row:2; }
  .d-main > .cm { grid-column:1 / -1; grid-row:3; }
}
@media (max-width:900px) {
  .d-main > .d-playwrap { order:1; }
  .d-body > .d-info { order:2; }
  .d-main > .d-card:not(.cm) { order:3; }
  .d-main > .cm { order:4; }
}

.more-wrap { display:flex; justify-content:center; margin-top:24px; }
.more-btn { padding:11px 32px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:var(--text); font-weight:600; transition:background .18s, border-color .18s; }
.more-btn:hover { background:linear-gradient(135deg,#f59e0b,#dc2626); border-color:transparent; }
.more-btn[hidden] { display:none; }

.nav-login { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--text); transition:background .18s, border-color .18s, color .18s; }
.nav-login:hover { background:linear-gradient(135deg,#f59e0b,#dc2626); border-color:transparent; color:#fff; }
.nav-login:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
@media (max-width:700px) { .nav-login { width:40px; height:40px; } }
@media (max-width:700px) {
  .nav { padding:10px 12px 10px 8px; }
  .genre-btn { order:-1; }
}

.d-playwrap .d-ptitle { position:static; margin:0 0 12px; text-align:left; font:700 1.35rem/1.3 "Bai Jamjuree", system-ui, sans-serif; text-shadow:none; }
@media (max-width:700px) { .d-playwrap .d-ptitle { font-size:1.1rem; margin-bottom:10px; } }

.d-playwrap .d-ptitle { position:relative; inset:auto; z-index:auto; display:flex; align-items:center; gap:12px; margin:0 0 14px; padding:14px 20px 14px 22px; border:1.5px solid transparent; border-radius:14px; font:700 1.3rem/1.3 "Bai Jamjuree", system-ui, sans-serif; color:#fff; text-align:left;
  background:linear-gradient(#14141d, #14141d) padding-box, linear-gradient(120deg, #f59e0b, #dc2626, #7c3aed) border-box;
  box-shadow:0 0 24px rgba(245,158,11,.12), 0 6px 18px rgba(0,0,0,.35); overflow:hidden; }
.d-playwrap .d-ptitle::before { content:""; flex:0 0 5px; align-self:stretch; border-radius:4px; background:linear-gradient(180deg, #f59e0b, #dc2626); }
@media (max-width:700px) { .d-playwrap .d-ptitle { padding:11px 14px 11px 16px; font-size:1.05rem; margin-bottom:10px; border-radius:12px; } }
@media (min-width:701px) { .nav .logo { order:-1; } }

@media (min-width:701px) {
  .nav { gap:clamp(8px, 1.4vw, 20px); }
  .nav .logo-img { height:clamp(22px, 2.6vw, 34px); width:auto; }
  .menu { flex:0 1 auto; min-width:0; }
  .menu a { white-space:nowrap; font-size:clamp(.62rem, 1.15vw, .92rem); padding:9px clamp(5px, 1vw, 14px); gap:clamp(4px, .55vw, 8px); }
  .menu a::before { width:clamp(10px, 1.1vw, 16px); height:clamp(10px, 1.1vw, 16px); flex-basis:clamp(10px, 1.1vw, 16px); }
  .menu a::after { left:clamp(5px, 1vw, 14px); right:clamp(5px, 1vw, 14px); }
  .nav input { flex:0 1 auto; width:clamp(110px, 18vw, 280px); min-width:0; font-size:clamp(.66rem, 1.1vw, .9rem); }
  .nav-login { width:clamp(32px, 3vw, 42px); height:clamp(32px, 3vw, 42px); }
}

.nl-text { display:none; }
@media (min-width:701px) {
  .nav-login { display:inline-flex; align-items:center; gap:clamp(4px, .6vw, 8px); width:auto; padding:0 clamp(10px, 1.2vw, 18px); border-radius:999px; font-size:clamp(.62rem, 1.15vw, .92rem); font-weight:600; white-space:nowrap; }
  .nav-login svg { width:clamp(14px, 1.4vw, 20px); height:clamp(14px, 1.4vw, 20px); }
  .nl-text { display:inline; }
}

body.modal-open { overflow:hidden; }
.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; background:rgba(5,5,10,.72); backdrop-filter:blur(6px); animation:lm-fade .18s ease-out; }
.modal[hidden] { display:none; }
.modal-box { position:relative; width:min(420px,100%); max-height:100%; overflow-y:auto; padding:28px 28px 24px; border:1.5px solid transparent; border-radius:18px;
  background:linear-gradient(#14141d, #14141d) padding-box, linear-gradient(120deg, #f59e0b, #dc2626, #7c3aed) border-box;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(245,158,11,.12); animation:lm-pop .2s ease-out; scrollbar-width:none; }
.modal-box::-webkit-scrollbar { display:none; }
.modal-close { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:34px; height:34px; padding:0; border-radius:50%; border:0; background:rgba(255,255,255,.06); color:var(--mute); transition:background .15s, color .15s; }
.modal-close:hover { background:rgba(255,255,255,.14); color:#fff; }
.modal-logo { display:flex; justify-content:center; margin-bottom:14px; }
.modal-logo img { height:34px; width:auto; }
.lm-view h2 { margin:0; text-align:center; font-size:1.4rem; }
.lm-sub { margin:6px 0 20px; text-align:center; color:var(--mute); font-size:.9rem; line-height:1.5; }
.lm-field { display:block; margin-bottom:14px; }
.lm-field > span { display:block; margin-bottom:6px; font-size:.85rem; font-weight:600; color:#d6d6e2; }
.lm-field input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:16px; outline:none; transition:border-color .15s, box-shadow .15s; }
.lm-field input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.lm-pass { position:relative; }
.lm-pass input { padding-right:46px; }
.lm-eye { position:absolute; top:50%; right:6px; transform:translateY(-50%); display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:8px; background:none; color:var(--mute); }
.lm-eye:hover { color:#fff; }
.lm-row { display:flex; justify-content:flex-end; margin:-4px 0 14px; }
.lm-row.center { justify-content:center; margin:16px 0 0; }
.lm-link { padding:0; border:0; background:none; color:var(--gold); font-size:.88rem; font-weight:600; }
.lm-link:hover { text-decoration:underline; }
.lm-msg { margin:0 0 14px; padding:10px 12px; border-radius:10px; background:rgba(220,38,38,.14); border:1px solid rgba(220,38,38,.4); color:#fecaca; font-size:.86rem; line-height:1.4; }
.lm-msg.ok { background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.4); color:#bbf7d0; }
.lm-msg[hidden] { display:none; }
.lm-submit { width:100%; padding:13px; border:0; border-radius:12px; background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; font-weight:700; font-size:1rem; transition:filter .15s, transform .12s; }
.lm-submit:hover { filter:brightness(1.1); }
.lm-submit:active { transform:scale(.98); }
@keyframes lm-fade { from { opacity:0; } to { opacity:1; } }
@keyframes lm-pop { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
@media (max-width:700px) { .modal-box { padding:24px 20px 20px; } }

.lm-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:20px; padding:4px; border-radius:12px; background:rgba(255,255,255,.05); }
.lm-tabs[hidden] { display:none; }
.lm-tab { padding:10px 8px; border:0; border-radius:9px; background:none; color:var(--mute); font-weight:700; font-size:.95rem; transition:background .15s, color .15s; }
.lm-tab:hover { color:#fff; }
.lm-tab.on { background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; }

.lm-hint { display:block; margin-top:5px; color:var(--mute); font-size:.75rem; line-height:1.4; }
.lm-captcha { display:flex; align-items:center; gap:8px; }
.lm-captcha canvas { flex:0 0 auto; width:120px; height:44px; border-radius:10px; border:1px solid var(--line); background:var(--bg); }
.lm-captcha input { flex:1; min-width:0; width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:16px; outline:none; letter-spacing:.2em; }
.lm-captcha input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.lm-refresh { flex:0 0 auto; display:grid; place-items:center; width:40px; height:44px; padding:0; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--mute); transition:background .15s, color .15s; }
.lm-refresh:hover { background:rgba(255,255,255,.12); color:#fff; }

.lm-views { display:grid; }
.lm-views > .lm-view { grid-area:1 / 1; }
.lm-views > .lm-view[hidden] { display:block; visibility:hidden; pointer-events:none; }
.lm-tabs[hidden] { display:grid; visibility:hidden; }

.lm-captcha img { flex:0 0 auto; width:120px; height:44px; border-radius:10px; border:1px solid var(--line); background:var(--bg); }

.nav-user { position:relative; flex:0 0 auto; }
.nav-login.logged { border-color:rgba(245,158,11,.55); }
.user-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:200px; padding:8px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(15,15,22,.98); backdrop-filter:blur(10px); box-shadow:0 14px 40px rgba(0,0,0,.55); }
.user-menu[hidden] { display:none; }
.um-name { padding:8px 10px 10px; margin-bottom:4px; border-bottom:1px solid var(--line); color:var(--mute); font-size:.8rem; font-weight:600; }
.um-item { display:block; width:100%; padding:10px; border:0; border-radius:8px; background:none; color:var(--text); text-align:left; text-decoration:none; font-size:.92rem; }
.um-item:hover { background:rgba(255,255,255,.08); }

.f-grid .f-contact { grid-column:1 / -1; grid-row:3; margin:0; }
.f-grid .f-cols { grid-column:1 / -1; grid-row:4; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px 36px; }
.f-col h4 { margin:0 0 12px; font-size:1rem; color:#f2f0ec; }
.f-col .f-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }

.cm h2 { margin:0 0 14px; font-size:1.15rem; }
.cm-form textarea { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:16px; resize:vertical; min-height:84px; outline:none; transition:border-color .15s, box-shadow .15s; }
.cm-form textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.cm-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 4px; }
.cm-count { color:var(--mute); font-size:.8rem; }
.cm-send { padding:9px 22px; border:0; border-radius:999px; background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; font-weight:700; }
.cm-send:disabled { opacity:.6; }
.cm-login { padding:14px 16px; border:1px dashed var(--line); border-radius:12px; color:var(--mute); }
.cm-list { display:grid; gap:16px; margin-top:20px; }
.cm-item { display:flex; gap:12px; }
.cm-avatar { flex:0 0 38px; height:38px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; font-weight:800; }
.cm-body { min-width:0; flex:1; }
.cm-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.85rem; }
.cm-head b { color:#fff; }
.cm-head span { color:var(--mute); font-size:.78rem; }
.cm-del { margin-left:auto; padding:2px 8px; border:0; border-radius:6px; background:none; color:var(--mute); font-size:.78rem; }
.cm-del:hover { color:#f87171; }
.cm-body p { margin:4px 0 0; line-height:1.6; color:#d6d6e2; white-space:pre-wrap; overflow-wrap:anywhere; }
.cm-empty { margin:0; color:var(--mute); }

.lm-field input[name="fullname"] { text-transform:uppercase; }

.nav-upload { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:1px solid rgba(245,158,11,.5); background:rgba(245,158,11,.1); color:#ffc247; text-decoration:none; transition:background .18s, color .18s, border-color .18s; }
.nav-upload[hidden] { display:none; }
.nav-upload:hover { background:linear-gradient(135deg,#f59e0b,#dc2626); border-color:transparent; color:#fff; }
.nu-text { display:none; }
@media (min-width:701px) {
  .nav-upload { display:inline-flex; align-items:center; gap:clamp(4px,.6vw,8px); width:auto; height:clamp(32px,3vw,42px); padding:0 clamp(10px,1.2vw,18px); border-radius:999px; font-size:clamp(.62rem,1.15vw,.92rem); font-weight:600; white-space:nowrap; }
  .nav-upload[hidden] { display:none; }
  .nav-upload svg { width:clamp(14px,1.4vw,20px); height:clamp(14px,1.4vw,20px); }
  .nu-text { display:inline; }
}
@media (max-width:700px) { .nav-upload { width:40px; height:40px; } }
.um-name b { display:block; margin-top:2px; color:var(--gold); font-size:.95rem; }

.acc-wrap { max-width:1000px; }
.acc-tabs { display:flex; gap:6px; margin-bottom:18px; padding:5px; border-radius:14px; background:rgba(255,255,255,.05); overflow-x:auto; scrollbar-width:none; }
.acc-tabs a { flex:1 0 auto; padding:10px 20px; border-radius:10px; color:var(--mute); text-align:center; text-decoration:none; font-weight:700; white-space:nowrap; transition:background .15s, color .15s; }
.acc-tabs a:hover { color:#fff; }
.acc-tabs a.on { background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; }
.acc-grid { display:grid; gap:18px; }
.acc-grid .d-card h2, .acc-wrap .d-card > h2 { margin:0 0 14px; font-size:1.1rem; }
.acc-empty { text-align:center; padding:40px 24px; }
.acc-empty p { margin:0 0 18px; color:var(--mute); }
.acc-hero { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.acc-hero h2 { margin:0; }
.acc-avatar { flex:0 0 56px !important; width:56px; height:56px !important; font-size:1.4rem; }
.acc-user { margin:2px 0 0; color:var(--mute); font-size:.9rem; }
.acc-balance { margin-left:auto; text-align:right; }
.acc-balance span { display:block; color:var(--mute); font-size:.8rem; }
.acc-balance b { font-size:1.7rem; background:linear-gradient(90deg,#f59e0b,#dc2626); -webkit-background-clip:text; background-clip:text; color:transparent; }
.acc-dl { display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px 14px; margin:0; font-size:.95rem; }
.acc-dl dt { color:var(--mute); }
.acc-dl dd { margin:0; color:#fff; overflow-wrap:anywhere; }
.acc-bank { display:grid; gap:2px; padding:14px 16px; border-radius:12px; border:1px solid rgba(245,158,11,.35); background:rgba(245,158,11,.06); }
.acc-bank span { color:#ffc247; font-weight:700; }
.acc-bank b { font-size:1.2rem; letter-spacing:.08em; }
.acc-bank em { font-style:normal; color:var(--mute); font-size:.85rem; }
.acc-bank.small { margin-bottom:14px; }
.acc-quick { display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 14px; }
.acc-quick button { padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--text); font-size:.85rem; }
.acc-quick button:hover { background:rgba(255,255,255,.12); }
.acc-table { overflow-x:auto; }
.acc-table table { width:100%; border-collapse:collapse; font-size:.9rem; }
.acc-table th, .acc-table td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.acc-table th { color:var(--mute); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.acc-chip { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.75rem; font-weight:700; background:rgba(255,255,255,.08); color:var(--mute); }
.acc-chip.ok { background:rgba(34,197,94,.15); color:#86efac; }
.acc-chip.warn { background:rgba(245,158,11,.16); color:#fcd34d; }
.acc-chip.bad { background:rgba(220,38,38,.18); color:#fca5a5; }
.acc-note { margin-top:4px; color:var(--mute); font-size:.78rem; }
.lm-field select { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:16px; outline:none; }
.lm-field select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.18); }
#acc-body .lm-field input { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:16px; outline:none; }
#acc-body .lm-field input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.18); }
#acc-body input[name="holder"] { text-transform:uppercase; }
#site-toast { position:fixed; left:50%; bottom:24px; z-index:120; transform:translate(-50%,20px); padding:11px 20px; border-radius:999px; background:#14291c; border:1px solid rgba(34,197,94,.5); color:#bbf7d0; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
#site-toast.on { opacity:1; transform:translate(-50%,0); }
@media (min-width:860px) { .acc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .acc-grid > .acc-hero { grid-column:1 / -1; } }
@media (max-width:700px) { .acc-dl { grid-template-columns:110px minmax(0,1fr); } .acc-balance { margin-left:0; text-align:left; width:100%; } }

@media (min-width:701px) {
  .nav input { width:clamp(90px, 11vw, 190px); padding:7px 10px 7px 32px; font-size:clamp(.64rem, 1vw, .84rem); background-position:10px center; background-size:14px; }
  .nav-upload { gap:6px; height:clamp(30px, 2.6vw, 36px); padding:0 clamp(9px, 1vw, 14px); font-size:clamp(.62rem, 1vw, .82rem); }
  .nav-upload svg { width:15px; height:15px; }
  .nav-upload .nu-text { display:none; }
  .nav-login { height:clamp(30px, 2.6vw, 36px); }
}
@media (min-width:1200px) {
  .nav-upload .nu-text { display:inline; }
}

@media (min-width:701px) {
  .nav { flex-wrap:nowrap; min-width:0; overflow:visible; }
  .nav .logo { flex:0 0 auto; }
  .nav .logo-img { flex:none; max-width:none; }
  .nav .menu { flex:1 1 0; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; }
  .nav .menu::-webkit-scrollbar { display:none; }
  .nav .menu a { flex:0 0 auto; }
  .nav input { flex:0 0 auto; margin-left:0; }
  .nav-upload, .nav-user { flex:0 0 auto; }
}
@media (min-width:701px) and (max-width:1000px) {
  .nav-login .nl-text { display:none; }
  .nav-login { padding:0; width:clamp(30px, 3vw, 36px); justify-content:center; }
}

.um-upload { display:none; color:#ffc247; font-weight:600; }
@media (max-width:700px) {
  .nav-upload { display:none !important; }
  .um-upload { display:block; }
}

.d-tags a { padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--text); font-size:.85rem; text-decoration:none; transition:border-color .15s, background .15s; }
.d-tags a:hover { border-color:var(--accent); background:rgba(220,38,38,.1); }

.up-wrap { display:grid; gap:18px; }
.up-rules h2, .up-form h2 { margin:0 0 10px; font-size:1.15rem; }
.up-rules ul { margin:0; padding-left:20px; color:#d6d6e2; line-height:1.8; font-size:.92rem; }
.up-drop { display:grid; justify-items:center; gap:6px; padding:34px 16px; margin-bottom:16px; border:2px dashed rgba(245,158,11,.45); border-radius:14px; background:rgba(245,158,11,.04); color:var(--mute); text-align:center; cursor:pointer; transition:background .15s, border-color .15s; }
.up-drop svg { color:#ffc247; }
.up-drop b { color:#fff; }
.up-drop:hover, .up-drop.over, .up-drop:focus-visible { background:rgba(245,158,11,.1); border-color:#f59e0b; outline:none; }
.up-drop[hidden], .up-pre[hidden], .up-progress[hidden] { display:none; }
.up-pre { display:flex; gap:16px; align-items:center; margin-bottom:16px; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03); }
.up-pre img { width:150px; aspect-ratio:16/10; object-fit:cover; border-radius:8px; background:#000; flex:0 0 auto; }
.up-pre-info { display:grid; gap:4px; min-width:0; }
.up-pre-info b { overflow-wrap:anywhere; }
.up-pre-info span { color:var(--mute); font-size:.85rem; }
.up-pre-info .actions { display:flex; gap:8px; margin-top:4px; }
.up-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 16px; }
.up-fields .lm-field:nth-child(-n+2) { grid-column:span 1; }
.lm-field textarea { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:16px; resize:vertical; outline:none; }
.lm-field textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.up-form .lm-field input, .up-form .lm-field select { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:16px; outline:none; }
.up-form .lm-field input:focus, .up-form .lm-field select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.up-form .lm-field input[readonly] { color:var(--mute); }
.up-progress { display:flex; align-items:center; gap:12px; margin:4px 0 14px; }
.up-progress > div { flex:1; height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.up-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,#f59e0b,#dc2626); transition:width .15s; }
.up-progress span { min-width:48px; text-align:right; color:var(--mute); font-size:.85rem; }
.up-items { display:grid; gap:12px; }
.up-item { display:flex; align-items:center; gap:14px; padding:10px; border:1px solid var(--line); border-radius:12px; }
.up-item img { width:96px; aspect-ratio:16/10; object-fit:cover; border-radius:8px; background:#000; flex:0 0 auto; }
.up-item-body { flex:1; min-width:0; display:grid; gap:3px; }
.up-item-body b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-item-act { display:flex; gap:6px; flex:0 0 auto; }
.up-item-act a { text-decoration:none; color:var(--gold); }
@media (max-width:900px) { .up-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) {
  .up-fields { grid-template-columns:minmax(0,1fr); }
  .up-pre { flex-direction:column; align-items:stretch; }
  .up-pre img { width:100%; }
  .up-item { flex-wrap:wrap; }
}

.genre-links a { color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.35); transition:color .15s, border-color .15s; }
.genre-links a:hover { color:var(--gold); border-bottom-color:var(--gold); }
.genre-links i { font-style:normal; color:var(--mute); }

.d-tags-title { flex:0 0 100%; margin:0 0 2px; color:var(--mute); font-size:.85rem; font-weight:700; }
.kw-input { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; border-radius:12px; border:1px solid var(--line); background:var(--bg); cursor:text; transition:border-color .15s, box-shadow .15s; }
.kw-input:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.kw-input input { flex:1 1 160px; min-width:120px; width:auto !important; padding:6px 4px !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; font-size:16px; }
.kw-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 6px 5px 12px; border-radius:999px; background:rgba(245,158,11,.14); border:1px solid rgba(245,158,11,.4); color:#ffc247; font-size:.88rem; }
.kw-chip button { display:grid; place-items:center; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:.9rem; line-height:1; }
.kw-chip button:hover { background:rgba(220,38,38,.7); }
.lm-hint.ok { color:#86efac; }

@media (min-width:1300px) {
  .d-body > .d-info { align-self:stretch; contain:size; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .d-body > .d-info::-webkit-scrollbar { display:none; }
}

.up-missing { margin:0 0 10px; color:#fcd34d; font-size:.88rem; line-height:1.5; }
.up-missing:empty { display:none; }
.up-form .lm-submit:disabled { opacity:.45; cursor:not-allowed; filter:grayscale(.4); }

/* mobile menu panel (opened by the hamburger button) */
.mm-list a[data-icon="home"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m3%2010%209-7%209%207v10a1%201%200%200%201-1%201h-5v-7H9v7H4a1%201%200%200%201-1-1z'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="star"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m12%202%203.09%206.26L22%209.27l-5%204.87%201.18%206.88L12%2017.77l-6.18%203.25L7%2014.14%202%209.27l6.91-1.01z'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="sun"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%202v2M12%2020v2m-7.07-2.93%201.41-1.41m11.32-11.32%201.41-1.41M2%2012h2m16%200h2M4.93%204.93l1.41%201.41m11.32%2011.32%201.41%201.41'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="temple"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2022h18M6%2018V11M10%2018V11M14%2018V11M18%2018V11M12%202%203%207v2h18V7z'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="globe"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M2%2012h20M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="subtitle"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='5'%20width='20'%20height='14'%20rx='2'/%3E%3Cpath%20d='M7%2015h4M15%2015h2M7%2011h2M13%2011h4'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="film"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='2'%20width='20'%20height='20'%20rx='2.18'/%3E%3Cpath%20d='M7%202v20M17%202v20M2%2012h20M2%207h5M2%2017h5M17%2017h5M17%207h5'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="fire"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8.5%2014.5A2.5%202.5%200%200%200%2011%2012c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054%202-6%20.5%202.5%202%204.9%204%206.5%202%201.6%203%203.5%203%205.5a7%207%200%201%201-14%200c0-1.153.433-2.294%201-3a2.5%202.5%200%200%200%202.5%202.5z'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="clock"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='M12%206v6l4%202'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="bolt"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M13%202%203%2014h9l-1%208%2010-12h-9l1-8z'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="grid"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='3'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='14'%20y='3'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='3'%20y='14'%20width='7'%20height='7'%20rx='1'/%3E%3Crect%20x='14'%20y='14'%20width='7'%20height='7'%20rx='1'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="trophy"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209H4.5a2.5%202.5%200%200%201%200-5H6M18%209h1.5a2.5%202.5%200%200%200%200-5H18M4%2022h16M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022M18%202H6v7a6%206%200%200%200%2012%200V2Z'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="heart"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z'/%3E%3C/svg%3E"); }
.mm-list a[data-icon="tv"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='7'%20width='20'%20height='15'%20rx='2'/%3E%3Cpath%20d='m17%202-5%205-5-5'/%3E%3C/svg%3E"); }
@media (max-width:700px) { .genre-menu:has(.mm-list):not([hidden]) { display:block; padding:8px; } }
.mm-list { display:grid; gap:2px; }
.mm-list a { display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:12px; color:var(--mute); text-decoration:none; font-size:1rem; font-weight:500; transition:background .15s, color .15s; -webkit-tap-highlight-color:transparent; }
.mm-list a::before { content:""; flex:0 0 20px; width:20px; height:20px; background:currentColor; opacity:.8; -webkit-mask:var(--ic) center/contain no-repeat; mask:var(--ic) center/contain no-repeat; }
.mm-list a:active, .mm-list a:hover { background:rgba(255,255,255,.07); color:#fff; }
.mm-list a.on { color:#fff; background:linear-gradient(135deg, rgba(245,158,11,.16), rgba(220,38,38,.16)); box-shadow:inset 0 0 0 1px rgba(245,158,11,.3); }
.mm-list a.on::before { color:#ffc247; opacity:1; }

@media (min-width:901px) {
  .d-main > .ad-slot { grid-column:1 / -1; grid-row:2; margin:0; }
  .d-main > .ad-slot ~ .d-card:not(.cm) { grid-row:3; }
  .d-main > .ad-slot ~ .cm { grid-row:4; }
}
@media (max-width:900px) { .d-main > .ad-slot { order:1; margin:0; } }

@media (min-width:701px) {
  .footer { padding:24px 0 12px; }
  .f-shell { padding-bottom:12px; }
}

@property --gb-a { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@media (max-width:700px) {
  .genre-btn { border:1.5px solid transparent; color:#fff;
    background:linear-gradient(120deg, #2a1a05, #3a0f12, #24113f, #2a1a05) padding-box, conic-gradient(from var(--gb-a), #f59e0b, #dc2626, #7c3aed, #f59e0b) border-box;
    background-size:300% 300%, auto;
    animation:gb-spin 4s linear infinite, gb-bg 6s ease-in-out infinite; }
  .genre-btn[aria-expanded="true"] { background:linear-gradient(120deg, #f59e0b, #dc2626, #7c3aed, #dc2626) padding-box, conic-gradient(from var(--gb-a), #f59e0b, #dc2626, #7c3aed, #f59e0b) border-box; background-size:300% 300%, auto; box-shadow:0 4px 16px rgba(220,38,38,.5); }
}
@keyframes gb-spin { to { --gb-a:360deg; } }
@keyframes gb-bg { 0%, 100% { background-position:0% 50%, 0 0; } 50% { background-position:100% 50%, 0 0; } }
@media (prefers-reduced-motion:reduce) { .genre-btn { animation:none !important; } }

.section .sec-head h3 { display:flex; align-items:center; gap:10px; }
.section .sec-head h3::before { content:""; flex:0 0 auto; width:4px; height:1.15em; border-radius:4px; background:linear-gradient(180deg, #f59e0b, #dc2626 60%, #7c3aed); box-shadow:0 0 12px rgba(245,158,11,.45); }
.section .sec-head p { display:inline-block; margin-top:6px; padding:1px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); font-size:.78rem; }
.section .sec-head > div:first-child { min-width:0; }
.card .poster { transition:transform .3s ease, box-shadow .3s ease, filter .3s ease; }
.card .cinfo h4 { transition:color .2s ease; }
@media (hover:hover) and (min-width:701px) {
  .card:hover .poster { transform:scale(1.03); filter:brightness(1.08) saturate(1.1); box-shadow:0 0 0 1.5px rgba(245,158,11,.85), 0 14px 32px rgba(220,38,38,.35); }
  .card:hover .cinfo h4 { color:#ffc247; }
}

#main > .section { width:calc(100% - 48px); max-width:1512px; margin:20px auto; padding:20px 22px 24px; border-radius:20px; border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(900px 220px at 0% 0%, rgba(245,158,11,.10), transparent 70%), linear-gradient(180deg, #16161f, #101018); box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); }
#main > .section .sec-head { margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.08); align-items:center; }
#main > .section .sec-head h3 { font-size:1.5rem; font-weight:800; letter-spacing:.01em; }
#main > .section .see-all { align-self:center; border:0; background:linear-gradient(90deg, #f59e0b, #dc2626); color:#fff; font-weight:700; box-shadow:0 4px 14px rgba(220,38,38,.35); }
#main > .section .see-all:hover { filter:brightness(1.12); transform:translateY(-1px); }
#main > .section .arrows button { border-color:rgba(245,158,11,.5); color:#ffc247; }
@media (max-width:700px) {
  #main > .section { width:calc(100% - 20px); margin:14px auto; padding:14px 12px 16px; border-radius:16px; }
  #main > .section .sec-head h3 { font-size:1.2rem; }
}

@media (min-width:1101px) {
  #main .row.land { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:20px 16px; overflow:visible; padding-bottom:0; }
  #main .row.land .card { flex:none; }
  #main .row.land .card:nth-child(n+11) { display:none; }
  #main .section .arrows { display:none; }
}

.hero-row { width:calc(100% - 48px); max-width:1512px; margin:20px auto 0; padding:18px 18px 20px; border-radius:20px; border:1px solid rgba(245,158,11,.28);
  background:radial-gradient(900px 240px at 50% 0%, rgba(220,38,38,.16), transparent 70%), linear-gradient(180deg, #1a1420, #101018); box-shadow:0 12px 34px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.06); }
.hero-item { border:1.5px solid rgba(245,158,11,.55); box-shadow:0 6px 18px rgba(0,0,0,.45), 0 0 18px rgba(245,158,11,.14); }
.hero-item .new { padding:2px 9px; border-radius:999px; background:linear-gradient(90deg, #f59e0b, #dc2626); color:#fff; font-weight:800; letter-spacing:.04em; box-shadow:0 3px 10px rgba(220,38,38,.5); }
.hero-item:hover { box-shadow:0 14px 32px rgba(220,38,38,.4), 0 0 24px rgba(245,158,11,.3); }
@media (max-width:700px) { .hero-row { width:calc(100% - 20px); margin-top:12px; padding:12px 10px 14px; border-radius:16px; } }

@media (min-width:701px) { .hero-row { width:calc(100% - 16px); max-width:none; padding:16px 14px 18px; } }

.notice-modal .modal-box { text-align:center; }
.nt-title { margin:0 0 14px; font-size:1.3rem; }
.nt-body { margin:0 0 20px; text-align:left; line-height:1.6; color:#d8d6d0; max-height:55vh; overflow-y:auto; scrollbar-width:none; word-break:break-word; }
.nt-body::-webkit-scrollbar { display:none; }

.notice-modal .modal-box { width:min(1200px, 100%); height:min(720px, 100%); max-height:none; display:flex; flex-direction:column; overflow:hidden; }
.notice-modal .nt-body { flex:1 1 auto; min-height:0; max-height:none; }
.notice-modal .nt-close { flex:0 0 auto; align-self:center; width:min(260px, 100%); }

.nt-skip { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 14px; font-size:.9rem; color:#b9b5ae; cursor:pointer; user-select:none; }
.nt-skip input { width:16px; height:16px; accent-color:#f59e0b; cursor:pointer; }
.nt-foot { flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.nt-foot .nt-skip { margin:0; }
.nt-foot .nt-close { width:auto; min-width:140px; margin:0; padding-left:28px; padding-right:28px; }

.nt-logo { flex:0 0 auto; display:flex; justify-content:center; margin:0 0 14px; font-size:1.5rem; }
.nt-logo img { height:48px; width:auto; max-width:100%; }
.notice-modal .nt-foot { justify-content:flex-end; align-self:stretch; margin-right:-14px; }
@media (max-width:700px) { .notice-modal .nt-foot { margin-right:-8px; } }
@media (max-width:700px) {
  .notice-modal .nt-foot { flex-wrap:nowrap; justify-content:space-between; gap:12px; margin-right:0; }
  .notice-modal .nt-more { display:none; }
  .notice-modal .nt-skip { white-space:nowrap; }
  .notice-modal .nt-foot .nt-close { min-width:110px; }
}

.nt-body a { color:#ffc247; text-decoration:underline; }
.nt-body ul, .nt-body ol { margin:8px 0; padding-left:22px; }
.nt-body font[size="1"] { font-size:.75em; } .nt-body font[size="2"] { font-size:.9em; } .nt-body font[size="3"] { font-size:1em; }
.nt-body font[size="4"] { font-size:1.25em; } .nt-body font[size="5"] { font-size:1.6em; } .nt-body font[size="6"] { font-size:2em; } .nt-body font[size="7"] { font-size:2.6em; }
.nt-body h2, .nt-body h3 { margin:10px 0 6px; }

.d-ad { position:absolute; inset:0; z-index:30; background:#000; cursor:default; }
.d-ad .d-ad-v { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.d-ad-tag { position:absolute; top:12px; left:12px; padding:3px 10px; border-radius:6px; background:rgba(0,0,0,.65); color:#ffc247; font-size:.8rem; font-weight:700; pointer-events:none; }
.d-ad-cd, .d-ad-skip { position:absolute; right:12px; bottom:16px; padding:8px 14px; border-radius:8px; background:rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.25); color:#fff; font:600 .9rem "Bai Jamjuree", system-ui, sans-serif; }
.d-ad-skip { cursor:pointer; background:linear-gradient(90deg,#f59e0b,#dc2626); border-color:transparent; }
.d-ad-skip:hover { filter:brightness(1.12); }
.d-ad-skip[hidden], .d-ad-cd[hidden] { display:none; }
.d-ad-cd { pointer-events:none; }
.d-adcut { position:absolute; z-index:2; width:3px; height:3px; background:#ffc247; pointer-events:none; }
.d-adcut[hidden] { display:none; }

.popup-ad { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:12px; background:rgba(5,5,10,.7); backdrop-filter:blur(4px); animation:lm-fade .2s ease-out; }
.pa-box { position:relative; width:min(336px, calc(100vw - 24px)); aspect-ratio:336 / 280; border-radius:12px; background:#000; box-shadow:0 18px 50px rgba(0,0,0,.6), 0 0 0 1.5px rgba(245,158,11,.6); }
.pa-box > a { display:block; width:100%; height:100%; }
.pa-box img { display:block; width:100%; height:100%; object-fit:cover; border-radius:12px; }
.pa-box .ad-tag { top:8px; left:8px; }
.pa-close { position:absolute; top:-14px; right:-14px; z-index:2; width:34px; height:34px; border-radius:50%; border:2px solid #fff; background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; font-size:15px; font-weight:700; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.5); }
.pa-close:hover { filter:brightness(1.15); }
@media (max-width:420px) { .pa-close { top:-12px; right:-4px; } }

.wd-method { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.wd-method label { display:block; cursor:pointer; }
.wd-method input { position:absolute; opacity:0; pointer-events:none; }
.wd-method span { display:block; padding:10px 12px; text-align:center; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.04); font-weight:700; color:#cfcfdc; transition:background .15s, border-color .15s, color .15s; }
.wd-method label.on span { border-color:transparent; background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; box-shadow:0 6px 16px rgba(220,38,38,.3); }
.acc-bank .wal { word-break:break-all; font-size:.92rem; letter-spacing:.01em; }

.acc-usdt, .um-usdt { display:block; margin-top:2px; font-size:.82em; color:#7be39c; }
.um-name .um-usdt { font-weight:700; }
.acc-wrap { min-height:100vh; }

body { min-height:100vh; display:flex; flex-direction:column; }
body > .footer { margin-top:auto; }
.acc-wrap { min-height:0; }

.rp-btn { display:inline-flex; align-items:center; gap:8px; margin:14px 0 0; padding:8px 14px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:rgba(255,255,255,.04); color:#c9c9da; font:600 .85rem "Bai Jamjuree", system-ui, sans-serif; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.rp-btn:hover { border-color:rgba(248,113,113,.6); background:rgba(220,38,38,.12); color:#ffb4b4; }
.rp-title { margin:0 0 4px; font-size:1.25rem; }
.rp-sub { margin:0 0 16px; color:var(--mute); font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rp-modal select, .rp-modal textarea { width:100%; padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; }
.rp-modal textarea { resize:vertical; min-height:80px; }

.d-servers { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; }
.d-servers-label { font-size:.9rem; color:#a9a9ba; margin-right:4px; }
.d-server { padding:8px 18px; border-radius:999px; border:1px solid var(--line); background:#12121a; color:#d6d6e2; font:inherit; font-size:.92rem; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.d-server:hover { border-color:#ffc21a; color:#fff; }
.d-server.on { background:linear-gradient(135deg,#ffc21a,#ff8a00); border-color:transparent; color:#111; }
@media (max-width:760px) { .d-servers { gap:6px; } .d-server { padding:7px 14px; font-size:.86rem; } }

.d-playbtn { display:grid; place-items:center; width:58px; height:58px; padding:0; border-radius:50%; border:0; color:#1a1200; font-size:0; cursor:pointer;
  background:linear-gradient(135deg,#ffd75a,#ffb11a 55%,#ff8a00); box-shadow:0 6px 22px rgba(255,160,0,.45), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .2s ease, box-shadow .2s ease; }
.d-playbtn svg { width:22px; height:22px; margin-left:3px; filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
.d-playbtn::before, .d-playbtn::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(255,194,26,.65); pointer-events:none; animation:playRing 2.2s ease-out infinite; }
.d-playbtn::after { animation-delay:1.1s; }
.d-playbtn:hover { transform:scale(1.1); box-shadow:0 8px 30px rgba(255,160,0,.65), inset 0 1px 0 rgba(255,255,255,.6); }
.d-playbtn:active { transform:scale(.95); }
@keyframes playRing { 0% { transform:scale(1); opacity:.9; } 100% { transform:scale(1.9); opacity:0; } }
@media (max-width:760px) { .d-playbtn { width:48px; height:48px; } .d-playbtn svg { width:18px; height:18px; margin-left:2px; } }
@media (prefers-reduced-motion:reduce) { .d-playbtn::before, .d-playbtn::after { animation:none; opacity:0; } }

.d-playbtn { background:rgba(255,255,255,.88); color:#111; box-shadow:0 4px 14px rgba(0,0,0,.35); transition:background .15s; }
.d-playbtn svg { filter:none; }
.d-playbtn::before, .d-playbtn::after { content:none; animation:none; }
.d-playbtn:hover { transform:none; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.35); }
.d-playbtn:active { transform:none; }

.d-playbtn { background:linear-gradient(135deg,#ffd75a,#ffb11a 55%,#ff8a00); color:#1a1200; box-shadow:0 4px 16px rgba(255,150,0,.4); }
.d-playbtn:hover { background:linear-gradient(135deg,#ffe07a,#ffc040 55%,#ff9a20); box-shadow:0 4px 16px rgba(255,150,0,.4); }

.d-playbtn svg { margin:0; }
@media (max-width:760px) { .d-playbtn svg { margin:0; } }

.d-servers { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; padding:10px 12px 10px 18px; background:#12121a; border:1px solid var(--line); border-radius:14px; }
.d-servers-label { margin:0; font-size:.92rem; font-weight:600; color:#d6d6e2; white-space:nowrap; }
.d-servers-list { display:flex; gap:4px; padding:4px; background:#0b0b12; border-radius:999px; }
.d-server { padding:7px 20px; border:0; border-radius:999px; background:transparent; color:#a9a9ba; font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:background .15s, color .15s; }
.d-server:hover { color:#fff; }
.d-server.on { background:linear-gradient(135deg,#ffc21a,#ff8a00); color:#111; }
@media (max-width:760px) { .d-servers { padding:8px 8px 8px 14px; gap:8px; } .d-servers-label { font-size:.85rem; } .d-server { padding:7px 12px; font-size:.84rem; } }

.d-server:disabled { opacity:.4; cursor:not-allowed; }
.d-server:disabled:hover { color:#a9a9ba; }

.d-merge .cm { margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }

.poster .pv { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:0; }
.poster .pv.on { opacity:1; }

@media (max-width:700px) {
  #main .row.land { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 10px; overflow:visible; margin-right:0; padding:0; scroll-snap-type:none; }
  #main .row.land .card { flex:none; min-width:0; }
  #main .row.land .card:nth-child(n+11) { display:none; }
  #main .section .arrows { display:none; }
}

.poster .ptime { position:absolute; z-index:2; right:8px; bottom:8px; padding:2px 7px; border-radius:6px; background:rgba(0,0,0,.72); color:#fff; font-size:.74rem; font-weight:700; line-height:1.3; letter-spacing:.02em; font-variant-numeric:tabular-nums; pointer-events:none; }
@media (max-width:700px) { .poster .ptime { right:6px; bottom:6px; font-size:.7rem; padding:1px 6px; } }

.poster .pmeta { position:absolute; z-index:2; right:8px; bottom:8px; display:flex; align-items:center; gap:5px; pointer-events:none; }
.poster .pmeta .ptime { position:static; }
.poster .pview { display:inline-flex; align-items:center; gap:4px; padding:2px 7px; border-radius:6px; background:rgba(0,0,0,.72); color:#fff; font-size:.74rem; font-weight:700; line-height:1.3; font-variant-numeric:tabular-nums; }
.poster .pview svg { flex:0 0 auto; color:#ffc247; }
@media (max-width:700px) { .poster .pmeta { right:6px; bottom:6px; gap:4px; } .poster .pview { font-size:.7rem; padding:1px 6px; gap:3px; } .poster .pview svg { width:12px; height:12px; } }

.up-form .lm-field select { appearance:auto; }

select:not([multiple]):not([size]):not(.pg-size select) { -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23c9c7c0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 16px center !important; background-size:12px 8px !important; padding-right:44px !important; text-overflow:ellipsis; }
select option { background:#14141d; color:#fff; }
@media (max-width:700px) { select:not([multiple]):not([size]):not(.pg-size select) { background-position:right 14px center !important; padding-right:40px !important; } }

@media (min-width:1200px) {
  .nav { gap:20px; }
  .menu { gap:4px; flex:0 0 auto; }
  .menu a { padding:9px 12px; font-size:.93rem; }
  .menu a::after { left:12px; right:12px; }
}

@media (min-width:1200px) {
  .nav input#search { margin-left:8px; flex:0 1 150px; width:150px; min-width:110px; padding:7px 12px 7px 42px; font-size:.85rem; background-position:15px center; background-size:15px; background-repeat:no-repeat; }
  .nav .nav-upload, .nav .nav-user { margin-left:auto; }
  .nav .nav-upload:not([hidden]) + .nav-user { margin-left:0; }
}

body:has(.is-loading) .footer { visibility:hidden; }

.menu a[data-icon="flag-vn"], .mm-list a[data-icon="flag-vn"] { --flag:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2020%27%3E%3Crect%20width%3D%2730%27%20height%3D%2720%27%20fill%3D%27%23da251d%27%2F%3E%3Cpolygon%20points%3D%2715.00%2C4.40%2016.39%2C8.68%2020.90%2C8.68%2017.25%2C11.33%2018.64%2C15.62%2015.00%2C12.97%2011.36%2C15.62%2012.75%2C11.33%209.10%2C8.68%2013.61%2C8.68%27%20fill%3D%27%23ffff00%27%2F%3E%3C%2Fsvg%3E"); }
.menu a[data-icon="flag-jp"], .mm-list a[data-icon="flag-jp"] { --flag:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2020%27%3E%3Crect%20width%3D%2730%27%20height%3D%2720%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2710%27%20r%3D%276%27%20fill%3D%27%23bc002d%27%2F%3E%3C%2Fsvg%3E"); }
.menu a[data-icon="flag-cn"], .mm-list a[data-icon="flag-cn"] { --flag:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2020%27%3E%3Crect%20width%3D%2730%27%20height%3D%2720%27%20fill%3D%27%23de2910%27%2F%3E%3Cpolygon%20points%3D%275.60%2C2.20%206.36%2C4.55%208.83%2C4.55%206.84%2C6.00%207.60%2C8.35%205.60%2C6.90%203.60%2C8.35%204.36%2C6.00%202.37%2C4.55%204.84%2C4.55%27%20fill%3D%27%23ffde00%27%2F%3E%3Cpolygon%20points%3D%279.56%2C2.86%2010.06%2C2.19%209.58%2C1.50%2010.37%2C1.78%2010.88%2C1.11%2010.86%2C1.95%2011.65%2C2.22%2010.85%2C2.47%2010.83%2C3.30%2010.36%2C2.61%27%20fill%3D%27%23ffde00%27%2F%3E%3Cpolygon%20points%3D%2711.47%2C4.59%2012.21%2C4.21%2012.06%2C3.38%2012.66%2C3.97%2013.40%2C3.58%2013.03%2C4.33%2013.63%2C4.91%2012.80%2C4.79%2012.43%2C5.54%2012.29%2C4.71%27%20fill%3D%27%23ffde00%27%2F%3E%3Cpolygon%20points%3D%2711.49%2C7.11%2012.32%2C7.06%2012.53%2C6.25%2012.84%2C7.03%2013.67%2C6.98%2013.03%2C7.51%2013.33%2C8.29%2012.63%2C7.84%2011.98%2C8.37%2012.19%2C7.56%27%20fill%3D%27%23ffde00%27%2F%3E%3Cpolygon%20points%3D%279.61%2C8.87%2010.39%2C9.18%2010.92%2C8.53%2010.87%2C9.36%2011.65%2C9.66%2010.84%2C9.88%2010.79%2C10.71%2010.34%2C10.01%209.53%2C10.22%2010.06%2C9.58%27%20fill%3D%27%23ffde00%27%2F%3E%3C%2Fsvg%3E"); }
.menu a[data-icon="flag-eu"], .mm-list a[data-icon="flag-eu"] { --flag:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%2020%27%3E%3Crect%20width%3D%2730%27%20height%3D%2720%27%20fill%3D%27%23003399%27%2F%3E%3Cpolygon%20points%3D%2721.20%2C8.70%2021.49%2C9.60%2022.44%2C9.60%2021.67%2C10.15%2021.96%2C11.05%2021.20%2C10.50%2020.44%2C11.05%2020.73%2C10.15%2019.96%2C9.60%2020.91%2C9.60%27%20fill%3D%27%23ffcc00%27%2F%3E%3Cpolygon%20points%3D%2720.37%2C11.80%2020.66%2C12.70%2021.61%2C12.70%2020.84%2C13.25%2021.13%2C14.15%2020.37%2C13.60%2019.61%2C14.15%2019.90%2C13.25%2019.13%2C12.70%2020.08%2C12.70%27%20fill%3D%27%23ffcc00%27%2F%3E%3Cpolygon%20points%3D%2718.10%2C14.07%2018.39%2C14.97%2019.34%2C14.97%2018.57%2C15.52%2018.86%2C16.42%2018.10%2C15.87%2017.34%2C16.42%2017.63%2C15.52%2016.86%2C14.97%2017.81%2C14.97%27%20fill%3D%27%23ffcc00%27%2F%3E%3Cpolygon%20points%3D%2715.00%2C14.90%2015.29%2C15.80%2016.24%2C15.80%2015.47%2C16.35%2015.76%2C17.25%2015.00%2C16.70%2014.24%2C17.25%2014.53%2C16.35%2013.76%2C15.80%2014.71%2C15.80%27%20fill%3D%27%23ffcc00%27%2F%3E%3Cpolygon%20points%3D%2711.90%2C14.07%2012.19%2C14.97%2013.14%2C14.97%2012.37%2C15.52%2012.66%2C16.42%2011.90%2C15.87%2011.14%2C16.42%2011.43%2C15.52%2010.66%2C14.97%2011.61%2C14.97%27%20fill%3D%27%23ffcc00%27%2F%3E%3Cpolygon%20points%3D%279.63%2C11.80%209.92%2C12.70%2010.87%2C12.70%2010.10%2C13.25%2010.39%2C14.15%209.63%2C13.60%208.87%2C14.15%209.16%2C13.25%208.39%2C12.70%209.34%2C12.70%27%20fill%3D%27%23ffcc00%27%2F%3E%3Cpolygon%20points%3D%278.80%2C8.70%209.09%2C9.60%2010.04%2C9.60%209.27%2C10.15%209.56%2C11.05%208.80%2C10.50%208.04%2C11.05%208.33%2C10.15%207.56%2C9.60%208.51%2C9.60%27%20fill%3D%27%23ffcc00%27%2F%3E%3Cpolygon%20points%3D%279.63%2C5.60%209.92%2C6.50%2010.87%2C6.50%2010.10%2C7.05%2010.39%2C7.95%209.63%2C7.40%208.87%2C7.95%209.16%2C7.05%208.39%2C6.50%209.34%2C6.50%27%20fill%3D%27%23ffcc00%27%2F%3E%3Cpolygon%20points%3D%2711.90%2C3.33%2012.19%2C4.23%2013.14%2C4.23%2012.37%2C4.78%2012.66%2C5.68%2011.90%2C5.13%2011.14%2C5.68%2011.43%2C4.78%2010.66%2C4.23%2011.61%2C4.23%27%20fill%3D%27%23ffcc00%27%2F%3E%3Cpolygon%20points%3D%2715.00%2C2.50%2015.29%2C3.40%2016.24%2C3.40%2015.47%2C3.95%2015.76%2C4.85%2015.00%2C4.30%2014.24%2C4.85%2014.53%2C3.95%2013.76%2C3.40%2014.71%2C3.40%27%20fill%3D%27%23ffcc00%27%2F%3E%3Cpolygon%20points%3D%2718.10%2C3.33%2018.39%2C4.23%2019.34%2C4.23%2018.57%2C4.78%2018.86%2C5.68%2018.10%2C5.13%2017.34%2C5.68%2017.63%2C4.78%2016.86%2C4.23%2017.81%2C4.23%27%20fill%3D%27%23ffcc00%27%2F%3E%3Cpolygon%20points%3D%2720.37%2C5.60%2020.66%2C6.50%2021.61%2C6.50%2020.84%2C7.05%2021.13%2C7.95%2020.37%2C7.40%2019.61%2C7.95%2019.90%2C7.05%2019.13%2C6.50%2020.08%2C6.50%27%20fill%3D%27%23ffcc00%27%2F%3E%3C%2Fsvg%3E"); }
.menu a[data-icon^="flag-"]::before, .mm-list a[data-icon^="flag-"]::before { -webkit-mask:none; mask:none; background:var(--flag) center/cover no-repeat; opacity:1; border-radius:3px; box-shadow:0 0 0 1px rgba(255,255,255,.18); height:calc(var(--fw, 20px) * .67); }
.menu a[data-icon^="flag-"]::before { --fw:20px; width:20px; flex:0 0 20px; }
.mm-list a[data-icon^="flag-"]::before { --fw:24px; width:24px; flex:0 0 24px; }
.menu a[data-icon^="flag-"]:hover::before { color:inherit; }

.acc-pending{display:block;margin-top:6px;font-size:.78rem;line-height:1.35;color:var(--muted,#9aa0a6);text-align:right}

.kw-item,.kw-tags a{display:inline-flex;align-items:center;gap:6px}
.kw-ico{flex:0 0 auto;opacity:.75}

.kw-box { display:flex; flex-direction:column; overflow:hidden; }
.kw-head { flex:0 0 auto; }
.kw-rank, .kw-tags { flex:1 1 auto; min-height:0; align-content:flex-start; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scrollbar-width:none; padding:2px 2px 4px 0; }
.kw-rank::-webkit-scrollbar, .kw-tags::-webkit-scrollbar { display:none; }

.up-subs { grid-column:1 / -1; }
.up-subs em { font-style:normal; color:var(--mute); font-weight:400; }
.sub-pick { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.sub-pick label { cursor:pointer; }
.sub-pick input { position:absolute; opacity:0; pointer-events:none; }
.sub-pick span { display:inline-block; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); font-size:.9rem; transition:background .15s, border-color .15s, color .15s; }
.sub-pick label:hover span { border-color:rgba(245,158,11,.6); }
.sub-pick input:checked + span { border-color:var(--gold); color:var(--gold); background:rgba(245,158,11,.12); }
.sub-pick input:focus-visible + span { outline:2px solid var(--gold); outline-offset:2px; }
.sub-pick input:disabled + span { opacity:.4; cursor:not-allowed; }

.hero-item .pv { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:0; }
.hero-item .pv.on { opacity:1; }
.hero-item .new { z-index:2; }

.pf-wrap { padding-top:28px; }
.pf-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.pf-head h1 { margin:0; font-size:1.6rem; background:linear-gradient(90deg,#ffc21a,#ff8a00); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pf-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px; border:0; cursor:pointer; font:inherit; font-weight:700; color:#fff; background:#1d8cf8; text-decoration:none; }
.pf-btn i { width:1px; height:16px; background:rgba(255,255,255,.45); }
.pf-btn.on { background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--text); }
.pf-btn.ghost { background:transparent; border:1px solid var(--line); color:var(--text); }
.pf-btn:disabled { opacity:.6; cursor:wait; }
.pf-card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:26px; }
.pf-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 24px; }
.pf-row { padding:4px 0; color:var(--mute); font-size:.92rem; }
.pf-row b { color:var(--text); font-weight:600; }
.pf-about { margin-top:12px; }
.pf-about span { color:var(--mute); font-size:.92rem; }
.pf-about p { margin:6px 0 0; white-space:pre-line; }
@media (max-width:900px) { .pf-cols { grid-template-columns:minmax(0,1fr); } .pf-head h1 { font-size:1.3rem; } }
.pf-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
@media (max-width:700px) { .pf-grid { grid-template-columns:minmax(0,1fr); } }
.pf-check { display:flex; align-items:center; gap:8px; margin:2px 0 14px; font-size:.9rem; cursor:pointer; }
.pf-form textarea { width:100%; resize:vertical; }
.up-by { color:var(--gold); text-decoration:none; font-weight:600; }
.up-by:hover { text-decoration:underline; }

.pf-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:800px) { .pf-layout { grid-template-columns:minmax(0,1fr); } }
.pf-avatar-card { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.pf-avatar-card h2 { align-self:stretch; text-align:left; }
.pf-avatar { width:180px; height:180px; border-radius:50%; overflow:hidden; flex:0 0 auto; display:grid; place-items:center; background:linear-gradient(135deg,#f59e0b,#dc2626); border:3px solid rgba(245,158,11,.6); }
.pf-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.pf-avatar span { font-size:4rem; font-weight:800; color:#fff; }
.pf-avatar.sm { width:56px; height:56px; border-width:2px; }
.pf-avatar.sm span { font-size:1.5rem; }
.pf-pick { display:inline-flex; justify-content:center; cursor:pointer; width:100%; }
.pf-title { display:flex; align-items:center; gap:14px; min-width:0; }

.pf-layout { grid-template-columns:260px minmax(0,1fr); grid-template-areas:"ava form" "side form"; }
.pf-layout > .pf-avatar-card { grid-area:ava; }
.pf-layout > .pf-side { grid-area:side; }
.pf-layout > .pf-form { grid-area:form; }
@media (max-width:800px) { .pf-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"ava" "form" "side"; } }
.pf-side .acc-dl { grid-template-columns:auto minmax(0,1fr); }
.pw-modal { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.65); display:grid; place-items:center; padding:16px; }
.pw-box { position:relative; width:min(420px,100%); max-height:calc(100vh - 32px); overflow:auto; }
.pw-close { position:absolute; top:10px; right:12px; width:32px; height:32px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:var(--text); font-size:1.3rem; cursor:pointer; }
.pw-close:hover { background:rgba(255,255,255,.16); }

.acc-wrap { max-width:1400px; }
.pf-one { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start; }
.pf-left { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.pf-acc { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.pf-acc > div { padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--line); min-width:0; }
.pf-acc span { display:block; color:var(--mute); font-size:.8rem; margin-bottom:3px; }
.pf-acc b { display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-one .pf-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.pf-save { width:auto; min-width:200px; }
@media (max-width:1100px) { .pf-acc, .pf-one .pf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .pf-one { grid-template-columns:minmax(0,1fr); } .pf-save { width:100%; } }
@media (max-width:480px) { .pf-acc, .pf-one .pf-grid { grid-template-columns:minmax(0,1fr); } }

.pf-acc { margin-bottom:18px; }

.pf-left { padding:20px 16px; border:1px solid rgba(245,158,11,.45); border-radius:14px; background:rgba(255,255,255,.03); align-self:stretch; justify-content:flex-start; }
.pf-left::before { content:"Ảnh đại diện"; align-self:stretch; text-align:left; font-weight:700; font-size:1rem; padding-bottom:10px; margin-bottom:2px; border-bottom:1px solid var(--line); }

.pf-vhead { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 18px; margin-bottom:18px; border-radius:14px; background:var(--card); border:1px solid var(--line); }
.pf-vhead h3 { margin:0; font-size:1.35rem; color:#ffc247; }
.pf-vhead h3 b, .pf-vhead h3 span { color:#ffc247; }
.pf-filters { display:flex; gap:10px; flex-wrap:wrap; }
.pf-filters select { min-width:150px; padding:9px 34px 9px 14px; border-radius:10px; border:1px solid var(--line); background-color:rgba(255,255,255,.08); color:#ffc247; font:inherit; font-weight:600; cursor:pointer; }
.pf-filters select option { color:var(--text); background:#1b1b24; }
@media (max-width:700px) { .pf-filters { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .pf-filters select { min-width:0; width:100%; } .pf-vhead h3 { font-size:1.1rem; } }

.acc-videos { margin-top:22px; }

.pf-tools { display:flex; flex-direction:column; gap:12px; margin:-4px 0 18px; }
.pf-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.pf-tabs button { padding:8px 14px; border-radius:8px; border:0; background:rgba(255,255,255,.12); color:var(--text); font:inherit; font-weight:600; cursor:pointer; }
.pf-tabs button:hover { background:rgba(255,255,255,.2); }
.pf-tabs button.on { background:#f3f4f6; color:#111; }
.pf-search { display:flex; align-items:center; gap:8px; width:min(360px,100%); padding:0 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--mute); }
.pf-search:focus-within { border-color:rgba(245,158,11,.6); }
.pf-search input { flex:1; min-width:0; padding:10px 0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; }

.pf-tools { flex-direction:row; align-items:center; flex-wrap:wrap; }
.pf-tools .pf-search { margin-left:auto; }
@media (max-width:700px) { .pf-tools .pf-search { margin-left:0; width:100%; } }

.d-social { margin-top:14px; display:flex; flex-direction:column; gap:12px; }
.ds-row { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.ds-up { display:flex; align-items:center; gap:12px; min-width:0; }
.pf-avatar.ds-ava { width:48px; height:48px; border-width:2px; text-decoration:none; }
.pf-avatar.ds-ava span { font-size:1.3rem; }
.ds-name { display:flex; flex-direction:column; min-width:0; }
.ds-name a { color:#ffb347; font-weight:700; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-name a:hover { text-decoration:underline; }
.ds-name span { color:var(--mute); font-size:.82rem; }
.ds-follow { padding:9px 18px; }
.ds-acts { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.ds-vote { position:relative; display:flex; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.ds-vote button { display:inline-flex; align-items:center; gap:8px; padding:10px 26px; border:0; background:transparent; color:var(--text); font:inherit; font-weight:700; cursor:pointer; }
.ds-vote button + button { border-left:1px solid rgba(255,255,255,.12); }
.ds-vote button.dn svg { transform:scaleY(-1); }
.ds-vote button.on { color:#22c55e; }
.ds-vote button.dn.on { color:#ef4444; }
.ds-vote button:hover { background:rgba(255,255,255,.06); }
.ds-vote button:first-child { border-radius:999px 0 0 999px; }
.ds-vote button:nth-child(2) { border-radius:0 999px 999px 0; }
/* like/dislike ratio: a line along the bottom edge INSIDE the pill (the pill clips it to its rounded shape), so it stays aligned at any zoom */
/* like/dislike ratio: ONE element with a hard-stop gradient (green up to --p, red after), so both colours always have exactly the same thickness */
.ds-ratio { position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, #22c55e var(--p, 50%), #ef4444 var(--p, 50%)); pointer-events:none; }
.ds-fav { width:42px; height:42px; border-radius:50%; border:0; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#9ca3af; cursor:pointer; }
.ds-fav.on { color:#ef4444; }
.ds-fav:hover { background:rgba(255,255,255,.14); }
.ds-more { position:relative; }
.ds-dots { width:42px; height:42px; border-radius:50%; border:0; display:grid; place-items:center; background:#1d8cf8; color:#fff; cursor:pointer; }
.ds-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:20; min-width:190px; padding:6px; border-radius:12px; background:#25252f; border:1px solid var(--line); box-shadow:0 12px 30px rgba(0,0,0,.5); }
.ds-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:8px; background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.ds-menu button:hover { background:rgba(255,255,255,.08); }
.ds-menu svg { color:var(--mute); }
.ds-info { padding:12px 16px; border-radius:12px; background:var(--card); border:1px solid var(--line); }
.ds-meta { display:flex; gap:22px; flex-wrap:wrap; color:var(--mute); font-size:.92rem; }
.ds-meta span { display:inline-flex; align-items:center; gap:6px; }
.ds-meta b { color:var(--text); }
.ds-desc { margin:8px 0 0; font-size:.92rem; }
@media (max-width:700px) {
  .ds-row { flex-direction:column; align-items:stretch; }
  /* like / dislike / favourite / menu always stay on ONE row; the vote pill shrinks with the screen */
  .ds-acts { justify-content:space-between; gap:8px; }
  .ds-vote { flex:1 1 auto; min-width:0; }
  .ds-vote button { flex:1 1 0; justify-content:center; gap:6px; padding:9px clamp(8px, 3vw, 16px); }
  .ds-fav, .ds-dots { flex:0 0 auto; width:38px; height:38px; }
}

.d-merge .d-social { margin:0 0 16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.d-merge .ds-info { background:rgba(255,255,255,.03); }

.ds-info .ds-desc { margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line); white-space:pre-line; line-height:1.6; font-size:.95rem; }
.ds-info .ds-desc b { color:var(--mute); font-weight:600; }

.d-merge .d-social { border-bottom:0; padding-bottom:0; margin-bottom:0; }
.d-merge .cm { border-top:0; padding-top:0; margin-top:22px; }

.cf-box { width:min(380px,100%); text-align:center; }
.cf-box h2 { margin:0 0 8px; }
.cf-box p { margin:0 0 18px; color:var(--mute); }
.cf-actions { display:flex; gap:10px; }
.cf-actions button { flex:1; padding:11px 14px; border-radius:10px; border:0; font:inherit; font-weight:700; cursor:pointer; }
.cf-no { background:rgba(255,255,255,.1); color:var(--text); }
.cf-no:hover { background:rgba(255,255,255,.18); }
.cf-yes { background:#ef4444; color:#fff; }
.cf-yes:hover { background:#dc2626; }

@media (min-width:901px) { .d-body { grid-template-columns:minmax(0,1fr) 380px; } }
.d-body > .d-info { display:flex; flex-direction:column; height:640px; overflow:hidden; contain:none; }
.d-info > h3, .d-info > dl, .d-info > .rp-btn { flex:0 0 auto; }
.d-info .d-tags { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; flex-wrap:nowrap; }
.d-tags-list { flex:1 1 auto; min-height:0; display:flex; flex-wrap:wrap; align-content:flex-start; gap:8px; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.d-tags-list::-webkit-scrollbar { display:none; width:0; height:0; }
.d-info dd { overflow-wrap:anywhere; }
@media (max-width:900px) { .d-body > .d-info { height:560px; } }

.grid.pf-vgrid { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media (max-width:1100px) { .grid.pf-vgrid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .grid.pf-vgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
button.pg { font:inherit; font-weight:600; cursor:pointer; }

@media (max-width:700px) {
  .pf-tools { position:relative; flex-wrap:nowrap; justify-content:space-between; }
  .pf-tabs { flex-wrap:nowrap; gap:6px; }
  .pf-tabs button { padding:8px 11px; font-size:.88rem; white-space:nowrap; }
  .pf-tools .pf-search { margin-left:auto; width:40px; height:40px; flex:0 0 40px; padding:0; justify-content:center; cursor:pointer; color:var(--text); }
  .pf-tools .pf-search input { display:none; }
  .pf-tools .pf-search.open { position:absolute; inset:0; width:100%; height:auto; padding:0 14px; justify-content:flex-start; background:#1b1b24; z-index:2; cursor:text; }
  .pf-tools .pf-search.open input { display:block; }
}

@media (max-width:700px) {
  .pf-head { flex-direction:column; align-items:stretch; gap:10px; }
  .pf-head .pf-btn { width:100%; justify-content:center; padding:11px 18px; }
  .pf-head .pf-avatar.sm { width:44px; height:44px; }
  .pf-head .pf-avatar.sm span { font-size:1.2rem; }
}

.pf-btn:not(.ghost) { background:linear-gradient(135deg,#1d8cf8 0%,#5b6cff 55%,#8b5cf6 100%); border:0; color:#fff; box-shadow:0 6px 18px rgba(29,140,248,.35); transition:filter .15s, box-shadow .15s; }
.pf-btn.on:not(.ghost) { background:linear-gradient(135deg,#f59e0b 0%,#ef6b1f 50%,#dc2626 100%); color:#fff; box-shadow:0 6px 18px rgba(220,38,38,.35); }
.pf-btn:not(.ghost):hover { filter:brightness(1.08); }
.pf-btn.on i { background:rgba(255,255,255,.55); }

.pf-avatar.zoomable { cursor:zoom-in; transition:transform .15s, box-shadow .15s; }
.pf-avatar.zoomable:hover { transform:scale(1.06); box-shadow:0 0 0 3px rgba(245,158,11,.35); }
.ava-view { background:rgba(0,0,0,.85); }
.ava-view figure { position:relative; margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.ava-view img { width:min(420px,86vw); height:auto; aspect-ratio:1; object-fit:cover; border-radius:16px; border:3px solid rgba(245,158,11,.6); box-shadow:0 20px 60px rgba(0,0,0,.6); }
.ava-view figcaption { color:#ffc247; font-weight:700; font-size:1.1rem; }
.ava-view .pw-close { top:-14px; right:-14px; background:#25252f; border:1px solid var(--line); }

.pf-card2 { display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px; align-items:stretch; }
.pf-left-view { justify-content:flex-start; }
.pf-left-name { color:#ffc247; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.pf-info { min-width:0; }
@media (min-width:701px) { .pf-head .pf-title .pf-avatar { display:none; } }
@media (max-width:700px) { .pf-card2 { grid-template-columns:minmax(0,1fr); } .pf-left-view { display:none; } }

.vbadge { flex:0 0 auto; display:inline-block; vertical-align:middle; margin-left:6px; filter:drop-shadow(0 0 6px rgba(29,140,248,.45)); }
.ds-name .vbadge, .pf-left-name .vbadge { width:16px; height:16px; margin-left:4px; vertical-align:-2px; }

.d-info .d-tags > .d-tags-title { flex:0 0 auto; }

.top-members { padding-top:8px; }
.tm-row { display:grid; grid-template-rows:repeat(2,minmax(210px,auto)); align-content:start; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px 14px; padding:18px 8px 6px; }
.tm-item { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; text-decoration:none; color:var(--text); text-align:center; }
.tm-item:hover .tm-name { color:var(--gold); }
.pf-avatar.tm-ava { width:104px; height:104px; border-width:2px; transition:transform .15s; }
.pf-avatar.tm-ava span { font-size:2.4rem; }
.tm-item:hover .tm-ava { transform:scale(1.05); }
.tm-name { display:inline-flex; align-items:center; max-width:100%; font-size:.95rem; }
.tm-name .vbadge { width:16px; height:16px; margin-left:5px; }
.tm-item { gap:8px; }
.tm-top { display:flex; flex-direction:column; align-items:center; gap:7px; width:100%; min-width:0; padding:14px 8px; border:1px solid var(--line, rgba(255,255,255,.18)); border-radius:10px; }
.tm-meta { display:flex; justify-content:center; align-items:center; gap:6px; width:100%; padding:8px; border:1px solid var(--line, rgba(255,255,255,.18)); border-radius:10px; color:var(--mute); font-size:.82rem; }
.tm-pager { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin:18px 0 6px; }
.tm-btn, .tm-pg { min-width:40px; height:40px; padding:0 14px; border:0; border-radius:10px; background:rgba(255,255,255,.1); color:var(--text); font:inherit; font-weight:600; cursor:pointer; transition:background .15s; }
.tm-btn:hover:not(:disabled), .tm-pg:hover { background:rgba(255,255,255,.18); }
.tm-btn:disabled { opacity:.4; cursor:default; }
.tm-pg.on { background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; }
.tm-dots { color:var(--mute); padding:0 4px; }
@media (max-width:1100px) { .tm-row { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .pf-avatar.tm-ava { width:84px; height:84px; } .tm-btn, .tm-pg { height:36px; min-width:36px; padding:0 10px; font-size:.88rem; } }
@media (max-width:700px) {
  .tm-row { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(128px,auto)); gap:10px 6px; padding:14px 0 4px; }
  .tm-item { gap:5px; }
  .tm-top { padding:8px 3px; gap:5px; border-radius:8px; }
  .pf-avatar.tm-ava { width:52px; height:52px; }
  .pf-avatar.tm-ava span { font-size:1.4rem; }
  .tm-name { font-size:.72rem; max-width:100%; overflow:hidden; }
  .tm-name .vbadge { width:12px; height:12px; margin-left:3px; }
  .tm-meta { padding:5px 2px; gap:3px; font-size:.62rem; border-radius:8px; white-space:nowrap; overflow:hidden; min-width:0; }
  .tm-meta svg { width:10px; height:10px; flex:none; }
}
@media (min-width:701px) { .nav .menu { overflow:hidden; } }
.nav .logo-img { position:relative; left:3px; }
@media (min-width:701px) { .nav .logo-img { left:calc(19px - var(--navpad)); } }
@media (min-width:701px) { .nav > input, .nav > .nav-upload, .nav > .nav-user { position:relative; left:calc(var(--navpad) - 19px); } }
.nav-tg { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:#229ed9; color:#fff; text-decoration:none; transition:filter .15s; }
.nav-tg:hover { filter:brightness(1.12); }
.nav-tg[href] { cursor:pointer; }
@media (min-width:701px) { .nav > .nav-tg { position:relative; left:calc(var(--navpad) - 19px); width:clamp(30px, 2.6vw, 38px); height:clamp(30px, 2.6vw, 38px); } }
@media (max-width:700px) { .nav-tg { width:34px; height:34px; } .nav-tg svg { width:18px; height:18px; } }
.up-tabs { display:flex; gap:8px; }
.up-tab { padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--mute); font:inherit; font-weight:600; cursor:pointer; }
.up-tab.on { color:#1a1206; background:linear-gradient(90deg,#f59e0b,#dc2626); border-color:transparent; }
.up-bulk[hidden], .bk-bar[hidden], .bk-actions [hidden], .bk-item .up-progress[hidden] { display:none; }
.bk-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; color:var(--mute); font-size:.9rem; }
.bk-list { display:grid; gap:16px; margin-bottom:14px; }
.bk-item { padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); }
.bk-head { display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.bk-thumb { width:150px; aspect-ratio:16/10; object-fit:cover; border-radius:8px; background:#000; flex:0 0 auto; }
.bk-info { display:grid; gap:4px; min-width:0; flex:1; }
.bk-info b { overflow-wrap:anywhere; }
.bk-info > span { color:var(--mute); font-size:.85rem; }
.bk-no { color:#ffc247 !important; font-weight:700; }
.bk-state { font-size:.85rem; color:#86efac; }
.bk-state.bad { color:#fca5a5; }
.bk-head .actions { display:flex; gap:8px; flex-wrap:wrap; }
.bk-item .lm-field input, .bk-item .lm-field select { width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:16px; outline:none; }
.bk-actions { display:flex; align-items:center; gap:12px; }
.bk-actions .lm-submit { flex:1; }
@media (max-width:700px) { .bk-head { flex-wrap:wrap; } .bk-thumb { width:120px; } }
.bk-list { gap:12px; }
.bk-item { display:grid; grid-template-columns:170px minmax(0,1fr) auto; gap:14px; align-items:start; padding:12px; }
.bk-side { display:grid; gap:8px; min-width:0; }
.bk-thumb { width:100%; }
.bk-main { min-width:0; }
.bk-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 12px; }
.bk-fields .lm-field { margin-bottom:10px; }
.bk-fields .lm-field:nth-child(1), .bk-fields .lm-field:nth-child(6), .bk-fields .bk-subs { grid-column:span 2; }
.bk-fields .lm-field:last-child { grid-column:1 / -1; margin-bottom:0; }
.bk-subs summary { cursor:pointer; margin-bottom:6px; font-size:.85rem; font-weight:600; color:#d6d6e2; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); list-style:none; }
.bk-subs[open] summary { border-color:var(--gold); }
.bk-subs .sub-pick { margin-top:6px; max-height:220px; overflow:auto; }
.bk-act { display:grid; gap:8px; }
.bk-item textarea { min-height:0; }
@media (max-width:1100px) { .bk-item { grid-template-columns:130px minmax(0,1fr); } .bk-act { grid-column:1 / -1; display:flex; } .bk-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .bk-item { grid-template-columns:1fr; } .bk-side { grid-template-columns:100px minmax(0,1fr); align-items:center; } .bk-fields { grid-template-columns:1fr; } .bk-fields .lm-field:nth-child(n), .bk-fields .bk-subs { grid-column:auto; } }
.up-subs .sub-pick { max-height:260px; overflow-y:auto; padding-right:4px; }
.drawer-back { display:none; }
@media (max-width:700px) {
  .nav > .nav-tg, .nav > .nav-user { display:none; }
  .drawer-back:not([hidden]) { display:block; position:fixed; inset:0; z-index:79; background:rgba(0,0,0,.62); animation:dr-fade .22s ease-out; }
  .genre-menu, .genre-menu:has(.mm-list) { position:fixed; top:0; bottom:0; left:0; right:auto; width:min(84vw, 320px); max-height:none; z-index:80; overflow-y:auto; overscroll-behavior:contain; padding:0 0 24px; border:0; border-right:1px solid rgba(255,255,255,.12); border-radius:0 18px 18px 0; background:#0f0f16; box-shadow:12px 0 40px rgba(0,0,0,.6); }
  .genre-menu:not([hidden]), .genre-menu:has(.mm-list):not([hidden]) { display:flex; flex-direction:column; gap:0; padding:0 0 24px; animation:dr-in .26s cubic-bezier(.2,.8,.2,1); }
  @keyframes dr-in { from { transform:translateX(-100%); } to { transform:none; } }
  @keyframes dr-fade { from { opacity:0; } to { opacity:1; } }
  .dr-head { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 12px; font-weight:800; font-size:1.1rem; color:#fff; }
  .dr-head button { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#fff; font-size:1.4rem; line-height:1; }
  #dr-acc { padding:0 12px 12px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:8px; }
  .dr-login { width:100%; padding:13px; border:0; border-radius:12px; background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; font:inherit; font-weight:700; font-size:1rem; }
  .dr-user { display:grid; gap:3px; padding:12px 14px; margin-bottom:8px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(245,158,11,.35); }
  .dr-user b { color:#fff; font-size:1rem; }
  .dr-user span { color:var(--mute); font-size:.85rem; }
  .dr-user .dr-bal { color:#ffc247; font-weight:700; }
  .dr-links { display:grid; gap:2px; }
  .dr-links a, .dr-links button { display:block; width:100%; padding:12px 14px; border:0; border-radius:10px; background:transparent; color:var(--text); text-align:left; font:inherit; font-size:.95rem; text-decoration:none; }
  .dr-links a:active, .dr-links button:active { background:rgba(255,255,255,.08); }
  .dr-links #dr-logout { color:#fca5a5; }
  .genre-menu .mm-list { padding:0 8px; }
  .dr-tg { display:flex; align-items:center; gap:14px; margin:8px 8px 0; padding:13px 14px; border-radius:12px; color:#fff; text-decoration:none; background:#229ed9; font-weight:600; }
  html.drawer-open, html.drawer-open body { overflow:hidden; }
}
@media (max-width:700px) {
  .dr-head { padding:14px 14px 12px 16px; }
  .dr-head button { display:grid; place-items:center; width:42px; height:42px; padding:0; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.35); -webkit-tap-highlight-color:transparent; transition:background .2s, transform .12s; }
  .dr-head button:active { transform:scale(.92); background:linear-gradient(180deg, var(--accent), #b91c1c); border-color:transparent; }
}
@media (max-width:700px) { #dr-acc[hidden] { display:none; } #dr-guest { padding:10px 8px 0; } #dr-guest:empty { display:none; } }
@media (max-width:700px) {
  #dr-guest { padding:14px 12px 0; }
  .dr-login { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:16px 14px; border:1px solid rgba(255,255,255,.35); border-radius:14px; background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 30%,#dc2626 100%); color:#fff; font:inherit; font-size:1.08rem; font-weight:800; letter-spacing:.02em; text-shadow:0 1px 2px rgba(0,0,0,.35); box-shadow:0 0 0 3px rgba(245,158,11,.18), 0 8px 24px rgba(220,38,38,.55), inset 0 1px 0 rgba(255,255,255,.4); -webkit-tap-highlight-color:transparent; transition:transform .12s, box-shadow .2s; }
  .dr-login::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); animation:dr-shine 3s ease-in-out infinite; }
  .dr-login:active { transform:scale(.97); box-shadow:0 0 0 3px rgba(245,158,11,.3), 0 4px 14px rgba(220,38,38,.5); }
  @keyframes dr-shine { 0%,55% { left:-60%; } 100% { left:130%; } }
}
@media (prefers-reduced-motion:reduce) { .dr-login::after { animation:none; } }
.pf-photos { margin-top:26px; }
.acc-photos { margin-top:22px; }
.pf-photos[hidden] { display:none; }
.pf-photos .pf-vhead { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ph-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.ph-item { position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#000; }
.ph-item img { width:100%; height:100%; object-fit:cover; cursor:zoom-in; display:block; transition:transform .2s; }
.ph-item:hover img { transform:scale(1.04); }
.ph-del { position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:50%; border:0; background:rgba(0,0,0,.7); color:#fff; font-size:1.1rem; line-height:1; cursor:pointer; }
.ph-del:hover { background:var(--accent); }
.ph-view figure { position:relative; }
.ph-view img { max-width:min(94vw, 1100px); max-height:84vh; object-fit:contain; }
.ph-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(0,0,0,.55); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; z-index:2; }
.ph-nav.prev { left:8px; }
.ph-nav.next { right:8px; }
.ph-nav[hidden] { display:none; }
@media (max-width:1100px) { .ph-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px) { .ph-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } }
.al-card { position:relative; min-width:0; }
.al-card > a { display:grid; gap:6px; color:var(--text); text-decoration:none; }
.al-cover { position:relative; display:block; aspect-ratio:1; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#000; }
.al-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.al-card:hover .al-cover img { transform:scale(1.04); }
.al-cover i { position:absolute; left:8px; bottom:8px; padding:3px 9px; border-radius:999px; background:rgba(0,0,0,.72); font-style:normal; font-size:.78rem; font-weight:700; }
.al-cover em { position:absolute; right:8px; bottom:8px; display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; background:rgba(0,0,0,.72); font-style:normal; font-size:.78rem; font-weight:700; }
.al-card b { font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-wrap { max-width:1100px; margin:0 auto; }
.al-viewer { position:relative; display:grid; place-items:center; min-height:260px; min-width:0; width:fit-content; max-width:100%; margin:0; border-radius:14px; overflow:hidden; background:#000; border:1px solid var(--line); }
.al-viewer img { display:block; max-width:100%; max-height:76vh; object-fit:contain; cursor:zoom-in; }
.al-stage { display:flex; align-items:center; justify-content:center; gap:12px; }
.al-nav { flex:none; display:grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(11,11,16,.75); backdrop-filter:blur(6px); color:#fff; cursor:pointer; transition:background .18s, transform .12s; }
.al-nav:hover { background:linear-gradient(135deg,#f59e0b,#dc2626); border-color:transparent; }
.al-nav:active { transform:scale(.92); }
.al-nav[hidden] { display:none; }
.al-count { position:absolute; right:10px; bottom:10px; padding:3px 10px; border-radius:999px; background:rgba(0,0,0,.7); font-size:.8rem; font-weight:700; }
.al-strip { display:flex; gap:8px; overflow-x:auto; padding:10px 2px; scrollbar-width:thin; }
.al-strip button { flex:0 0 auto; width:84px; height:84px; padding:0; border:2px solid transparent; border-radius:10px; overflow:hidden; background:#000; cursor:pointer; opacity:.7; }
.al-strip button.on { border-color:var(--gold); opacity:1; }
.al-strip img { width:100%; height:100%; object-fit:cover; display:block; }
.al-info { margin-top:6px; }
.al-info h1 { margin:0 0 12px; font-size:1.4rem; }
.al-owner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.al-owner .cm-del { margin-left:auto; }
.al-dl { display:grid; grid-template-columns:130px minmax(0,1fr); gap:8px 12px; margin:0 0 14px; }
.al-dl dt { color:var(--mute); }
.al-dl dd { margin:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.al-chip { padding:3px 11px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); font-size:.85rem; }
.al-h { margin:0 0 6px; font-size:1rem; }
.al-content { margin:0; line-height:1.7; white-space:pre-line; overflow-wrap:anywhere; }
.al-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-bottom:16px; }
.al-thumbs:empty { display:none; }
.al-thumb { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#000; }
.al-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.al-no { position:absolute; left:6px; bottom:6px; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.72); font-size:.72rem; font-weight:700; }
.al-cover-btn { position:absolute; left:6px; top:6px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(0,0,0,.7); color:#ffc247; font-size:.9rem; line-height:1; cursor:pointer; }
.al-cover-btn:hover { background:var(--gold); color:#1a1206; }
@media (max-width:700px) { .al-dl { grid-template-columns:100px minmax(0,1fr); } .al-strip button { width:64px; height:64px; } .al-nav { width:34px; height:34px; } .al-stage { gap:6px; } }
@media (min-width:701px) {
  .al-strip { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:8px; overflow:visible; padding:10px 0; }
  .al-strip button { width:100%; height:auto; aspect-ratio:1; }
}
.al-slot { display:none; }
@media (min-width:701px) {
  .al-slot { display:block; aspect-ratio:1; visibility:hidden; }
}
@media (min-width:901px) {
  .d-body > .d-info { height:auto; align-self:stretch; contain:size; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .d-body > .d-info::-webkit-scrollbar { display:none; }
}
.menu a[data-icon="image"], .mm-list a[data-icon="image"] { --ic:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Ccircle%20cx='9'%20cy='10'%20r='1.6'/%3E%3Cpath%20d='m21%2016-5-5-8%208'/%3E%3C/svg%3E"); }
.al-search { margin:0; max-width:360px; flex:1 1 240px; }
.sec-head:has(.al-search) { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.nav { --navpad:max(24px, (100vw - 1560px) / 2 + 24px); }
.nav.nav-wide { --navpad:24px; padding-left:24px !important; padding-right:24px !important; }
.hot-albums[hidden] { display:none; }
.al-cover { aspect-ratio:9/16; }
.bk-fields .bk-subs { grid-column:1 / -1; }
.bk-subs .sub-pick { max-height:300px; }
@media (max-width:700px) { .bk-fields .bk-subs { grid-column:auto; } }
.hero-nav { top:calc(50% - 1px); }

/* home page: sub-genre column on the left, content pushed to the right edge (desktop only) */
@media (min-width:901px) {
  #home-body.has-side { display:grid; grid-template-columns:240px minmax(0, 1fr); align-items:start; column-gap:0; }
  #home-body.has-side > .sub-side { grid-column:1; grid-row:1 / span 2; align-self:stretch; contain:size; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior:contain; margin:20px 0 20px 24px; padding:16px 12px 14px; border-radius:20px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); display:flex; flex-direction:column; }
  #home-body.has-side > #main { grid-column:2; grid-row:1; min-width:0; }
  #home-body.has-side > .kw-wrap { grid-column:2; grid-row:2; }
  #home-body.has-side #main > .section { margin-right:12px; margin-left:18px; width:auto; max-width:none; }
}
@media (max-width:900px) { .sub-side { display:none; } }
.sub-side h3 { margin:0 0 10px; padding-left:10px; border-left:3px solid #f59e0b; font-size:1.05rem; }
.ss-list { display:grid; gap:2px; align-content:start; }
.ss-list a { display:block; padding:7px 10px; border-radius:8px; color:var(--text); font-size:.92rem; text-decoration:none; }
.ss-list a:hover { background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; }
.ss-list a[hidden] { display:none; }
@media (min-width:901px) { #home-body.has-side > .kw-wrap { width:auto; max-width:none; margin:0; padding:4px 12px 24px 18px; } }
.sub-side h3:not(:first-child), .sub-side div > h3 { margin-top:18px; }
.sub-side h3 a { color:inherit; text-decoration:none; }
.sub-side::-webkit-scrollbar { display:none; width:0; height:0; }
@media (max-width:420px) { .tm-meta { font-size:.58rem; } .tm-meta svg { display:none; } }

.up-crop { margin:14px 0; padding:14px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); }
.up-crop-head { display:grid; gap:2px; margin-bottom:10px; }
.up-crop-head span { color:var(--mute); font-size:.84rem; }
.up-crop-frame { position:relative; width:100%; max-width:560px; max-height:70vh; margin:0 auto; overflow:hidden; border-radius:10px; background:#000; cursor:grab; touch-action:none; user-select:none; }
.up-crop-frame.grab { cursor:grabbing; }
.up-crop-frame video { position:absolute; display:block; max-width:none; pointer-events:none; }
.up-crop-cross { position:absolute; inset:0; pointer-events:none; background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)) center/1px 100% no-repeat, linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.28)) center/100% 1px no-repeat; box-shadow:inset 0 0 0 1px rgba(245,158,11,.6); }
.up-crop-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; margin-top:12px; }
.up-crop-bar label { display:flex; align-items:center; gap:8px; }
.up-crop-bar input[type=range] { width:160px; accent-color:#f59e0b; }
.up-crop-logo { position:absolute; top:2%; right:2%; width:20%; opacity:.25; pointer-events:none; }
.up-crop-bigplay { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:64px; height:64px; padding:0 0 0 4px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(11,11,16,.7); color:#fff; backdrop-filter:blur(4px); pointer-events:none; }
.up-crop-frame.playing .up-crop-bigplay { display:none; }
.up-crop-play { padding:9px 20px; border:0; border-radius:999px; background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.up-crop-play:hover { filter:brightness(1.12); }
.up-crop-credit { position:absolute; left:0; top:auto; white-space:nowrap; pointer-events:none; font-weight:700; color:#fff; line-height:1.2; text-shadow:0 0 2px #000, 0 0 2px #000, 1px 1px 2px #000, -1px -1px 2px #000; will-change:transform; }
.up-crop-credit b { background:linear-gradient(135deg,#ffc21a,#ff8a00); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 1px #000); }
.up-crop-note { margin:8px 0 0; color:var(--mute); font-size:.82rem; text-align:center; }

.pl-marks { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.pl-mark-logo { position:absolute; top:2%; right:2%; width:20%; opacity:.25; }
.pl-mark-credit { position:absolute; left:0; white-space:nowrap; font-weight:700; color:#fff; line-height:1.2; text-shadow:0 0 2px #000, 0 0 2px #000, 1px 1px 2px #000, -1px -1px 2px #000; will-change:transform; }
.pl-mark-credit b { background:linear-gradient(135deg,#ffc21a,#ff8a00); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

.pl-stage { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); overflow:hidden; background:#000; }
.pl-stage .pl-marks { z-index:2; }

.cr-overlay { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.7); overflow:auto; }
.cr-box { width:min(640px,100%); max-height:100%; overflow:auto; padding:16px; border-radius:16px; border:1px solid var(--line); background:var(--bg, #14151c); }
.cr-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.bk-cropped { color:#f59e0b; font-size:.8rem; font-weight:700; }
@media (max-width:700px) { .pf-search.al-search { display:none !important; } }

.uq-box { position:fixed; right:18px; bottom:18px; z-index:1100; width:min(380px, calc(100vw - 24px)); padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:var(--bg, #14151c); box-shadow:0 10px 30px rgba(0,0,0,.5); font-size:.86rem; }
.uq-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.uq-x { border:0; background:transparent; color:inherit; font-size:1.3rem; line-height:1; cursor:pointer; opacity:.7; }
.uq-cur { margin-top:8px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; align-items:center; }
.uq-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85; }
.uq-pct { font-weight:700; color:#ffc247; }
.uq-bar { grid-column:1 / -1; height:6px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; order:3; }
.uq-bar i { display:block; height:100%; background:linear-gradient(90deg,#f59e0b,#ef4444); transition:width .3s; }
.uq-list { margin-top:8px; }
.uq-list summary { cursor:pointer; opacity:.8; }
.uq-list[open] { max-height:200px; overflow-y:auto; }
.uq-row { display:flex; align-items:center; gap:8px; padding:4px 0; border-top:1px solid var(--line); }
.uq-row:first-of-type { margin-top:6px; }
.uq-n { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uq-row em { font-style:normal; opacity:.8; flex:0 0 auto; max-width:50%; }
.uq-row.done em { color:#4ade80; }
.uq-row.err em { color:#f87171; }
.uq-foot { display:flex; align-items:center; gap:10px; margin-top:8px; }
.uq-foot span { opacity:.7; font-size:.78rem; }
.uq-btn { padding:5px 12px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.06); color:inherit; cursor:pointer; flex:0 0 auto; }
.uq-box.fin { border-color:rgba(74,222,128,.5); }

.d-servers-right { display:flex; align-items:center; gap:12px; }
.d-code { padding:7px 12px; border-radius:999px; border:1px dashed rgba(255,194,26,.55); background:rgba(255,194,26,.08); color:#ffc21a; font-weight:800; font-size:.9rem; letter-spacing:.08em; white-space:nowrap; user-select:all; }
/* phone: label, code and the three buttons stay on ONE row, everything shrinks with the screen width; the label hides on narrow phones */
@media (max-width:760px) {
  .d-servers { flex-wrap:nowrap; gap:6px; padding:6px 6px 6px 10px; }
  .d-servers-label { font-size:clamp(.66rem, 2.7vw, .85rem); }
  .d-servers-right { flex:1 1 auto; min-width:0; flex-wrap:nowrap; justify-content:space-between; gap:6px; }
  .d-code { font-size:clamp(.62rem, 2.5vw, .8rem); padding:5px clamp(5px, 1.8vw, 10px); letter-spacing:.04em; }
  .d-servers-list { padding:3px; gap:2px; flex:0 0 auto; }
  .d-server { white-space:nowrap; padding:6px clamp(6px, 1.9vw, 11px); font-size:clamp(.64rem, 2.6vw, .8rem); }
}
@media (max-width:520px) { .d-servers-label { display:none; } }
.d-info dd .vbadge { width:16px; height:16px; margin-left:5px; vertical-align:-3px; }
/* home banners: slim red bar under the last banner closes them */
.ad-home-foot { max-width:1200px; margin:0 auto; padding:8px 24px 0; }
.ad-home-x { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:32px; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:linear-gradient(180deg, #ef4444, #b91c1c); color:#fff; font:700 12.5px/1 "Bai Jamjuree", system-ui, sans-serif; cursor:pointer; -webkit-tap-highlight-color:transparent; box-shadow:0 4px 14px rgba(220,38,38,.35), inset 0 1px 0 rgba(255,255,255,.25); transition:filter .15s, transform .1s; }
.ad-home-x:hover { filter:brightness(1.1); }
.ad-home-x:active { transform:scale(.98); }
.ad-home-x:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
@media (max-width:700px) { .ad-home-foot { padding:6px 10px 0; } }
/* computer: the red close button is a tall tab LEFT of banner 1, outside it (height set from script); the bottom bar is for phones only */
.ad-home-x-side { display:none; }
@media (min-width:701px) {
  .ad-slot.ad-gridtop.ad-has-x { position:relative; padding-left:70px; }  /* medium screens: room is made inside the block, banners get a little narrower */
  .ad-home-x-side { position:absolute; left:24px; top:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:40px; height:min(var(--b1h, 60px), 52px); padding:0; border-radius:7px; font-size:10px; }
  .ad-home-x-side span:first-child { font-size:12px; }
  .ad-home-foot { display:none; }
}
@media (min-width:1330px) {
  .ad-slot.ad-gridtop.ad-has-x { padding-left:24px; }  /* wide screens: banners keep their place and the tab hangs in the free space on their left */
  .ad-home-x-side { left:-24px; }
}

/* banners under the player (film page): computer = tall red tab left of banner 1, phone = slim red bar as the last row of the block */
.ad-home-x-end { display:none; }
@media (min-width:701px) {
  /* computer: block a little narrower and centred; equal room on both sides so the banners themselves are centred (the red tab sits in the left room) */
  .d-main .ad-slot.ad-has-x { position:relative; width:100%; max-width:1300px; margin-left:auto; margin-right:auto; padding-left:46px; padding-right:46px; }
  .d-main .ad-has-x > .ad-home-x-side { left:0; top:0; }
}
@media (max-width:700px) {
  .d-main .ad-has-x > .ad-home-x-end { display:flex; grid-column:1 / -1; margin-top:2px; }
}

/* video trim dialog (start/end handles) */
.tr-frame { max-height:46vh; cursor:default; }
.tr-frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.tr-track { position:relative; height:44px; margin:18px 12px 8px; border-radius:8px; background:rgba(255,255,255,.12); touch-action:none; cursor:pointer; }
.tr-keep { position:absolute; top:0; bottom:0; background:rgba(245,158,11,.35); border-top:3px solid #f59e0b; border-bottom:3px solid #f59e0b; pointer-events:none; }
.tr-h { position:absolute; top:-4px; width:16px; height:52px; margin-left:-8px; border-radius:6px; background:#f59e0b; cursor:ew-resize; touch-action:none; box-shadow:0 0 0 2px rgba(0,0,0,.4); outline:none; }
.tr-h:focus-visible { box-shadow:0 0 0 3px #fff; }
.tr-now { position:absolute; top:0; bottom:0; width:2px; background:#fff; pointer-events:none; }
.tr-info { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.9rem; margin:4px 4px 8px; }
.tr-warn { color:#fca5a5; }
.tr-ok:disabled { opacity:.5; cursor:not-allowed; }
.tr-badge, .bk-trimmed { color:#f59e0b; font-size:.8rem; font-weight:700; }
.tr-h.sel { background:#fff; box-shadow:0 0 0 3px #f59e0b; }