/* /dich-vu/ "phòng chiếu": hero, group list, player deck, information under the player. The picture itself is in film-stage.css. */
body.film-page{--f-ink:#eaf4fb;--f-muted:#9fb4c4;--f-line:#ffffff1f;--f-card:#ffffff0a;--f-card2:#ffffff12}
.film-page #page-content{max-width:1560px;padding:90px 0 0}
.film-page .breadcrumbs{position:relative;z-index:2;margin:0;padding:0 clamp(18px,5vw,64px)}
html:not(.film-js) .film-main{display:none}

/* hero */
.film-hero{position:relative;overflow:hidden;padding:clamp(18px,2.6vw,34px) clamp(18px,5vw,64px) clamp(20px,2.4vw,30px);isolation:isolate}
.film-hero::before,.film-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none}
.film-hero::before{width:46vw;height:46vw;max-width:640px;max-height:640px;left:-8vw;top:-18vw;background:radial-gradient(circle,#4cc9e8,transparent 65%);animation:fh-a 18s ease-in-out infinite alternate}
.film-hero::after{width:40vw;height:40vw;max-width:560px;max-height:560px;right:-6vw;top:-10vw;background:radial-gradient(circle,#8b7bff,transparent 65%);animation:fh-b 22s ease-in-out infinite alternate}
@keyframes fh-a{to{transform:translate(8vw,4vw) scale(1.15)}}
@keyframes fh-b{to{transform:translate(-6vw,6vw) scale(1.1)}}
.film-hero .page-kicker{display:inline-flex;align-items:center;gap:10px;letter-spacing:.24em}
.film-hero .page-kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:#ff5d5d;box-shadow:0 0 0 4px #ff5d5d33;animation:fh-rec 1.6s steps(1) infinite}
@keyframes fh-rec{50%{opacity:.25}}
.film-hero h1{margin:12px 0 12px;max-width:18ch;font-size:clamp(32px,4.4vw,58px);line-height:1.05;letter-spacing:-.025em}
.film-hero h1 em{font-style:normal;background:linear-gradient(100deg,#7fe8f7,#a99bff 55%,#ffb4d0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.film-hero p.lead{max-width:64ch;margin:0 0 18px;color:var(--f-muted);font-size:clamp(15px,1.5vw,18px);line-height:1.6}
.film-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.62fr);column-gap:clamp(24px,5vw,80px);align-items:end}
.film-hero>*{grid-column:1}
.film-facts{grid-column:2;grid-row:1/span 3;align-self:end;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0;padding:0;list-style:none}
.film-facts li{display:grid;gap:2px;padding:14px 18px;border:1px solid var(--f-line);border-radius:18px;background:var(--f-card);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;color:var(--f-muted)}
.film-facts b{font-size:clamp(24px,2.6vw,34px);line-height:1.1;color:var(--f-ink);font-variant-numeric:tabular-nums}

/* marquee of service names */
.film-marquee{position:relative;overflow:hidden;margin:0 0 clamp(18px,2.4vw,28px);padding:10px 0;border-block:1px solid var(--f-line);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.film-marquee div{display:flex;width:max-content;gap:28px;animation:fm 160s linear infinite}
.film-marquee span{display:inline-flex;align-items:center;gap:28px;white-space:nowrap;color:var(--f-muted);font-size:14px}
.film-marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}
@keyframes fm{to{transform:translateX(-50%)}}

/* room: list left, player right */
.film-room{--ac:#8ee0ef;--nw:370px;display:grid;grid-template-columns:var(--nw) minmax(0,1fr);gap:clamp(18px,2.6vw,40px);align-items:start;padding:0 clamp(18px,5vw,64px) clamp(40px,6vw,80px)}
.film-main{position:sticky;top:92px;order:2;min-width:0;max-height:calc(100vh - 104px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:6px 6px 14px;margin:-6px}
.film-nav{position:relative;order:1;min-width:0}
.fn-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.film-nav h2{margin:0;color:var(--f-muted);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
/* the button that folds the list into a slim rail (desktop only, shown once the script runs) */
.fn-toggle{display:none;align-items:center;gap:6px;flex:none;height:32px;padding:0 13px 0 9px;border:1px solid var(--f-line);border-radius:999px;background:var(--f-card2);color:var(--f-ink);font:inherit;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.fn-toggle:hover{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 16%,transparent)}
.fn-toggle:active{transform:scale(.96)}
.fn-toggle:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.fn-tg-ic{width:16px;height:16px;transition:transform .35s}
.fn-tg-b{display:none}
.fn-group{--ac:#8ee0ef;margin-bottom:8px;border:1px solid var(--f-line);border-radius:16px;background:var(--f-card);overflow:hidden;transition:border-color .3s,background .3s,box-shadow .3s}
.fn-group.is-open{border-color:color-mix(in srgb,var(--ac) 55%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 11%,transparent),var(--f-card));box-shadow:0 14px 40px #0004}
.fn-head{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:14px 16px;border:0;background:none;color:var(--f-ink);font:inherit;text-align:left;cursor:pointer}
html:not(.film-js) .film-room .fn-head{cursor:default}
.fn-head:focus-visible,.fn-item:focus-visible,.fi-chip:focus-visible,.fc-seg:focus-visible,.fk-btn:focus-visible,.ftr-line:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.fn-no{flex:none;color:var(--ac);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.fn-name{flex:1;min-width:0;font-weight:700;font-size:15px}
.fn-count{flex:none;padding:2px 9px;border-radius:999px;background:var(--f-card2);color:var(--f-muted);font-size:11px;white-space:nowrap}
.fn-count.has{background:color-mix(in srgb,var(--ac) 20%,transparent);color:var(--ac)}
.fn-chev{flex:none;width:16px;height:16px;color:var(--f-muted);transition:transform .3s}
.fn-group.is-open .fn-chev{transform:rotate(180deg)}
.fn-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1)}
.fn-group.is-open .fn-wrap,html:not(.film-js) .film-room .fn-wrap{grid-template-rows:1fr}
.fn-list{min-height:0;overflow:hidden;visibility:hidden;margin:0;padding:0 8px;list-style:none;transition:visibility 0s .38s}
.fn-group.is-open .fn-list,html:not(.film-js) .film-room .fn-list{visibility:visible;padding-bottom:10px;transition-delay:0s}
.fn-item{position:relative;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--f-ink);text-decoration:none;font-size:14px;line-height:1.35;transition:background .2s}
.fn-item:hover{background:var(--f-card2)}
.fn-item.is-on{background:color-mix(in srgb,var(--ac) 18%,transparent)}
.fn-item::before{content:"";flex:none;width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--f-muted);opacity:.7}
.fn-item.is-on::before{border-left-color:var(--ac);opacity:1}
.fn-item::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;background:var(--ac);transform:scaleX(var(--p,0));transform-origin:0;opacity:0}
.fn-item.is-on::after{opacity:.95}
.fn-t{flex:1;min-width:0}
.fn-dur{flex:none;color:var(--f-muted);font-size:12px;font-variant-numeric:tabular-nums}
.fn-soon .fn-dur{font-size:11px;opacity:.75}
.fn-all{display:block;margin:6px 10px 0;padding:6px 0;color:var(--f-muted);font-size:12.5px}

/* player deck */
.film-player{position:relative}
/* desktop: the picture is as wide as the window height allows (16:10 + controls must fit); the deck and the text under it follow the same width.
   Folding the list (.is-collapsed) gives the column back to the player and lets the picture use the room it saved. */
@media (min-width:901px){
  .film-room{--fw:max(560px,calc((100vh - 310px) * 1.6));transition:grid-template-columns .42s cubic-bezier(.2,.8,.2,1)}
  .film-inner,.film-deck,.film-info{max-width:var(--fw);margin-inline:auto}
  .film-nav{clip-path:inset(-24px -30px -90px -24px);transition:clip-path .42s}
  .fn-body{width:370px}
  .film-room.is-js .fn-toggle{display:inline-flex}
  .film-room.is-collapsed{--nw:58px;--fw:max(560px,calc((100vh - 215px) * 1.6))}
  .film-room.is-collapsed .film-nav{clip-path:inset(-24px 0 -90px -24px)}
  .film-room.is-collapsed .fn-bar{margin:0}
  .film-room.is-collapsed .fn-bar h2{display:none}
  .film-room.is-collapsed .fn-body{position:absolute;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility 0s .18s}
  .film-room.is-collapsed .fn-toggle{flex-direction:column;justify-content:flex-start;gap:14px;width:52px;height:auto;min-height:168px;padding:16px 0 14px;border-radius:18px}
  .film-room.is-collapsed .fn-tg-a{display:none}
  .film-room.is-collapsed .fn-tg-b{display:inline;writing-mode:vertical-rl;letter-spacing:.06em}
  .film-room.is-collapsed .fn-tg-ic{transform:rotate(180deg)}
  .film-player:fullscreen{--fw:max(560px,calc((100vh - 310px) * 1.6))}
  .film-player:fullscreen .film-deck{max-width:none}
}
.film-deck{display:grid;gap:10px;padding:14px 4px 0}
.film-player[data-state=soon] .film-deck,.film-player[data-state=loading] .film-deck{opacity:.35;pointer-events:none}
.film-chapters{display:flex;align-items:center;gap:4px;height:16px}
.fc-seg{position:relative;flex:1 1 0;min-width:4px;height:6px;padding:0;border:0;border-radius:3px;background:var(--f-line);cursor:pointer;transition:height .2s,background .2s}
.fc-seg::before{content:"";position:absolute;inset:-9px 0}
.fc-seg:hover,.fc-seg.is-cur{height:11px}
.fc-seg i{position:absolute;inset:0;border-radius:inherit;background:var(--ac);transform:scaleX(0);transform-origin:0}
.fc-seg::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);left:50%;padding:5px 11px;border-radius:8px;background:#0b1038;border:1px solid var(--f-line);color:#eaf4fb;font-size:12px;white-space:nowrap;opacity:0;transform:translate(-50%,4px);pointer-events:none;transition:opacity .18s,transform .18s;z-index:5}
.fc-seg:first-child::after{left:0;transform:translate(0,4px)}
.fc-seg:last-child::after{left:auto;right:0;transform:translate(0,4px)}
.fc-seg:hover::after,.fc-seg:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.fc-seg:first-child:hover::after,.fc-seg:first-child:focus-visible::after,.fc-seg:last-child:hover::after,.fc-seg:last-child:focus-visible::after{transform:none}
@media (hover:none){.fc-seg::after{display:none}}
.film-ctrl{display:flex;align-items:center;gap:8px}
.fk-btn{display:grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border:1px solid var(--f-line);border-radius:999px;background:var(--f-card2);color:var(--f-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.fk-btn:hover{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 16%,transparent)}
.fk-btn:active{transform:scale(.94)}
.fk-btn svg{width:18px;height:18px;fill:currentColor}
.fk-play{width:46px;height:46px;background:var(--ac);border-color:var(--ac);color:#080c2a}
.fk-play:hover{background:color-mix(in srgb,var(--ac) 82%,#fff)}
.fk-play svg{display:none;width:20px;height:20px}
.fk-play[data-state=play] .i-play,.fk-play[data-state=pause] .i-pause,.fk-play[data-state=replay] .i-replay{display:block}
.fk-time{margin-left:6px;color:var(--f-muted);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fk-sp{flex:1}
.fk-hint{color:var(--f-muted);font-size:11.5px}

/* information under the player */
.film-info{display:grid;gap:14px;padding:20px 4px 0}
.fi-head{display:grid;gap:6px}
.fi-title{margin:0;font-size:clamp(22px,2.4vw,32px);line-height:1.15;letter-spacing:-.01em}
.fi-sum{margin:0;color:var(--f-muted);line-height:1.6}
.fi-meta{color:var(--ac);font-size:12.5px;font-weight:600}
.fi-chips-wrap h3{margin:0 0 8px;color:var(--f-muted);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.fi-chips{display:flex;flex-wrap:wrap;gap:8px}
.fi-chip{padding:6px 13px;border:1px solid var(--f-line);border-radius:999px;background:var(--f-card);color:var(--f-ink);font:inherit;font-size:13px;cursor:pointer;transition:background .25s,border-color .25s,color .25s,transform .15s}
.fi-chip:hover{border-color:var(--ac)}
.fi-chip.on{background:var(--ac);border-color:var(--ac);color:#080c2a;font-weight:700;transform:translateY(-1px)}
.fi-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fi-btn{display:inline-flex;align-items:center;gap:6px;padding:11px 20px;border:1px solid var(--f-line);border-radius:999px;background:var(--f-card2);color:var(--f-ink);font:inherit;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,border-color .2s}
.fi-btn:hover{transform:translateY(-2px);border-color:var(--ac)}
.fi-btn.main{background:var(--ac);border-color:var(--ac);color:#080c2a}
.fi-btn.text{border-color:transparent;background:none;color:var(--f-muted);font-weight:600}
.film-transcript{border:1px solid var(--f-line);border-radius:14px;background:var(--f-card)}
.film-transcript summary{padding:12px 16px;color:var(--f-ink);font-weight:700;font-size:14px;cursor:pointer}
.ftr-list{display:grid;gap:2px;max-height:260px;margin:0;padding:0 8px 10px;overflow:auto;list-style:none;scrollbar-width:thin}
.ftr-line{display:flex;gap:12px;width:100%;padding:8px;border:0;border-radius:8px;background:none;color:var(--f-muted);font:inherit;font-size:13.5px;line-height:1.5;text-align:left;cursor:pointer}
.ftr-line time{flex:none;width:36px;color:var(--ac);font-variant-numeric:tabular-nums}
.ftr-line b{color:var(--f-ink)}
.ftr-line:hover,.ftr-line.on{background:var(--f-card2);color:var(--f-ink)}
.fi-note{margin:0;color:var(--f-muted);font-size:12px}

/* contact block under the room */
.film-page .detail-contact{max-width:1180px;margin:0 auto;padding:50px clamp(18px,4vw,40px)}

/* narrow screens: player first, list below */
@media (max-width:900px){
  .film-room{grid-template-columns:minmax(0,1fr);gap:22px}
  .film-main{position:static;order:0;max-height:none;overflow:visible;overflow-x:clip;margin:0;padding:0}
  .film-nav{order:1}
  .fk-hint{display:none}
  .film-hero{display:block}
  .film-hero h1{max-width:none}
  .film-facts{margin-top:4px;grid-template-columns:repeat(4,1fr)}
}
@media (max-width:560px){
  .film-room,.film-hero{padding-inline:14px}
  .fk-btn.fk-skip{display:none}
  .film-facts{grid-template-columns:1fr 1fr}
  .film-ctrl{gap:6px}
}

/* full screen */
.film-player:fullscreen{display:grid;place-content:center;background:#020318;padding:20px}
.film-player:fullscreen .film-inner{width:min(100vw - 40px,(100vh - 130px) * 1.6)}
.film-player:fullscreen .film-stage{border-radius:12px}

@media (prefers-reduced-motion:reduce){
  .film-hero::before,.film-hero::after,.film-hero .page-kicker::before,.film-marquee div{animation:none}
  .fn-wrap,.fn-group,.fc-seg,.fi-chip,.fk-btn,.fi-btn,.fn-toggle,.fn-tg-ic{transition:none}
  .film-room,.film-nav,.fn-body{transition:none!important}
}
@media print{.film-marquee,.film-ctrl,.film-deck{display:none}}