/* The picture of the film player on /dich-vu/: the stage, the caption panel and the simulated screens (mock browser, phone, diagrams).
   It is a video, so it keeps its own colours in every site theme (build-themes writes an empty twin for this file). */
.film-inner{container-type:inline-size;container-name:film}
.film-stage{--ac:#8ee0ef;position:relative;display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,.7fr);aspect-ratio:16/10;border-radius:22px;overflow:hidden;isolation:isolate;color:#eaf4fb;font-family:inherit;outline-offset:5px;cursor:pointer;
  background:radial-gradient(110% 90% at 80% 0,color-mix(in srgb,var(--ac) 22%,transparent),transparent 58%),radial-gradient(80% 70% at 0 100%,color-mix(in srgb,var(--ac) 12%,transparent),transparent 62%),#040a14;
  box-shadow:0 0 0 1px #ffffff1f,0 40px 90px #0009,0 0 120px color-mix(in srgb,var(--ac) 22%,transparent)}
.film-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(#ffffff08 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/44px 44px;-webkit-mask:radial-gradient(90% 90% at 70% 40%,#000,transparent);mask:radial-gradient(90% 90% at 70% 40%,#000,transparent)}
@container film (max-width:640px){.film-stage{grid-template-columns:1fr;grid-template-rows:auto auto;aspect-ratio:auto;border-radius:16px}}

/* caption panel */
.fs-cap{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:2cqw;padding:3.6cqw 2.4cqw 5cqw 3.2cqw;background:linear-gradient(90deg,#0000004d,transparent);transition:opacity .4s}
.fs-cap::after{content:"ONMATE · MÔ PHỎNG";position:absolute;left:3.2cqw;bottom:2.2cqw;font-size:clamp(8px,.95cqw,11px);letter-spacing:.22em;color:#ffffff59}
.fc-step{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:clamp(9px,1.1cqw,13px);letter-spacing:.14em;font-weight:700;color:var(--ac)}
.fc-step em{font-style:normal;letter-spacing:.02em;color:#04121a;background:var(--ac);padding:3px 10px;border-radius:999px;font-size:clamp(10px,1.2cqw,13px)}
.fc-text{margin:0;font-size:clamp(14px,2.15cqw,28px);line-height:1.38;font-weight:600;color:#eaf4fb}
.fc-text b{color:var(--ac);font-weight:800}
.fc-w{display:inline-block;margin-right:.27em;opacity:0;transform:translateY(.45em);animation:fcw .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 55ms + .12s)}
@keyframes fcw{to{opacity:1;transform:none}}
.fc-note{font-size:clamp(9px,1.05cqw,12px);line-height:1.45;color:#93a9ba}
@container film (max-width:640px){
  .fs-cap{padding:16px 16px 14px;gap:8px;justify-content:flex-start;min-height:156px;background:none}
  .fs-cap::after{display:none}
  .fc-step{font-size:10px}.fc-step em{font-size:11px}
  .fc-text{font-size:clamp(15px,4.3cqw,19px)}
  .fc-note{font-size:11px}
}

/* screen area: a 700x625 canvas scaled to fit */
.fs-view{position:relative;z-index:1;overflow:hidden;transition:opacity .4s}
@container film (max-width:640px){.fs-view{aspect-ratio:700/625}}
.film-stage.is-full .fs-cap,.film-stage.is-full .fs-view{opacity:0}
.fv{position:absolute;left:0;top:0;width:700px;height:625px;transform-origin:0 0;font:14px/1.45 "Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif;color:#1f2937}
.fscene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s}
.fscene.is-active{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
.fscene>*{transform:scale(.97);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.fscene.is-active>*{transform:none}
.mk-fill{position:absolute;inset:0}

/* timeline helpers */
.t{opacity:0;transform:translateY(10px) scale(.985);transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.t.on{opacity:1;transform:none}
.hl{outline:3px solid var(--ac);outline-offset:4px;box-shadow:0 0 0 9px color-mix(in srgb,var(--ac) 22%,transparent);transition:outline-color .3s,box-shadow .3s}
@keyframes blink{50%{opacity:0}}
@keyframes flick{from{transform:scale(1,1) rotate(-2deg)}to{transform:scale(.9,1.12) rotate(2deg)}}

/* mouse cursor */
.fv-cursor{position:absolute;left:-5px;top:-2.5px;width:30px;height:30px;z-index:30;opacity:0;pointer-events:none;transition:opacity .25s;will-change:transform}
.fv-cursor.on{opacity:1}
.fv-cursor svg{width:30px;height:30px;fill:#fff;stroke:#0b1220;stroke-width:1.3;stroke-linejoin:round;filter:drop-shadow(0 4px 6px #0008);transition:transform .12s}
.fv-cursor.press svg{transform:scale(.86) translate(2px,2px)}
.fv-cursor b{position:absolute;left:5px;top:2.5px;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid var(--ac);border-radius:50%;opacity:0}
.fv-cursor.press b{animation:ripple .55s ease-out}
@keyframes ripple{from{transform:scale(.3);opacity:.95}to{transform:scale(2.1);opacity:0}}

/* title and end cards (the whole stage) */
.fs-full{position:absolute;inset:0;z-index:4;pointer-events:none}
.fscene.full{display:grid}
.fscene.full>*{transform:none}
.ft{display:grid;place-content:center;justify-items:center;gap:2.1cqw;height:100%;padding:0 6cqw;text-align:center}
.ft-kick{font-size:clamp(9px,1.2cqw,14px);letter-spacing:.32em;color:var(--ac);font-weight:700}
.ft-title{margin:0;font-size:clamp(28px,7.2cqw,88px);line-height:1.05;font-weight:800;letter-spacing:-.02em}
.ft-title .t{display:inline-block;margin:0 .12em;background:linear-gradient(180deg,#fff 20%,color-mix(in srgb,var(--ac) 75%,#fff));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.ft-tag{max-width:58cqw;margin:0;font-size:clamp(13px,2cqw,24px);color:#cfe3f1;line-height:1.45}
.ft-bar{width:min(320px,40cqw);height:3px;border-radius:2px;background:#ffffff1f;overflow:hidden}
.ft-bar i{display:block;height:100%;background:var(--ac);transform:scaleX(0);transform-origin:0}
.ft-bar.on i{transform:scaleX(1);transition:transform 3.2s linear}
.ft-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ft-btn{pointer-events:auto;padding:.85em 1.6em;border-radius:999px;border:1px solid #ffffff4d;color:#eaf4fb;background:#ffffff0f;font-weight:700;text-decoration:none;font-size:clamp(12px,1.55cqw,17px);transition:transform .2s,background .2s}
.ft-btn:hover{transform:translateY(-2px);background:#ffffff1f}
.ft-btn.main{background:var(--ac);border-color:var(--ac);color:#04121a}
.ft-note{color:#8ca2b3;font-size:clamp(9px,1.15cqw,13px)}
.ft-end .ft-title{font-size:clamp(24px,5.2cqw,64px)}
@container film (max-width:640px){.ft{padding:0 22px;gap:14px;min-height:300px}.ft-title{font-size:clamp(28px,9cqw,44px)}.ft-tag{max-width:none;font-size:15px}.ft-btn{font-size:13px}.fs-full{position:absolute}}

/* loading / not-yet-made states */
.fs-soon,.fs-load{position:absolute;inset:0;z-index:7;display:none;background:radial-gradient(90% 80% at 50% 0,color-mix(in srgb,var(--ac) 20%,transparent),transparent 65%),#040a14}
.fs-soon{place-content:center;justify-items:center;gap:14px;padding:6cqw;text-align:center}
.fs-soon-t{margin:0;font-size:clamp(22px,4cqw,50px);font-weight:800;letter-spacing:-.01em}
.fs-soon-s{margin:0;max-width:52ch;color:#cfe3f1;font-size:clamp(13px,1.6cqw,18px);line-height:1.55}
.fs-soon-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ac) 60%,transparent);color:var(--ac);font-size:12px;font-weight:700;letter-spacing:.1em}
.fs-soon-pill i{width:8px;height:8px;border-radius:50%;background:var(--ac);animation:blink 1.4s steps(1) infinite}
.fs-soon-msg{margin:0;max-width:46ch;color:#93a9ba;font-size:13px}
.fs-ring{position:absolute;left:50%;top:44%;width:56cqw;aspect-ratio:1;margin:-28cqw 0 0 -28cqw;border-radius:50%;border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);pointer-events:none;animation:ringp 5s ease-in-out infinite}
.fs-ring+.fs-ring{width:40cqw;margin:-20cqw 0 0 -20cqw;animation-delay:-1.6s}
@keyframes ringp{50%{transform:scale(1.06);opacity:.4}}
.fs-load{place-items:center}
.fs-load i{width:min(260px,40%);height:4px;border-radius:2px;background:linear-gradient(90deg,#ffffff14 20%,var(--ac) 50%,#ffffff14 80%) 0 0/200% 100%;animation:shim 1.1s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.film-player[data-state=soon] .fs-soon,.film-player[data-state=loading] .fs-load{display:grid}
.film-player[data-state=soon] .fs-cap,.film-player[data-state=soon] .fs-view,.film-player[data-state=soon] .fs-full,.film-player[data-state=loading] .fs-cap,.film-player[data-state=loading] .fs-view,.film-player[data-state=loading] .fs-full{visibility:hidden}
@container film (max-width:640px){.fs-soon,.fs-load{position:relative;grid-area:1/1;min-height:300px}.film-player[data-state=soon] .fs-cap,.film-player[data-state=soon] .fs-view,.film-player[data-state=loading] .fs-cap,.film-player[data-state=loading] .fs-view{display:none}.film-stage{grid-template-rows:auto}}
.fs-big{position:absolute;z-index:6;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:grid;place-items:center;background:#000a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #ffffff59;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s;pointer-events:none}
.fs-big svg{width:30px;height:30px;fill:#fff;margin-left:4px}
.film-player[data-state=ready]:not(.is-playing) .fs-big{opacity:1;transform:none}.mk-tag{display:inline-block;margin-bottom:3px;padding:0 5px;border:1px solid #9aa4b2;border-radius:4px;color:#374151;font-size:11px;font-weight:700;line-height:1.5}
.mk-tag{margin:0;font-size:10px;color:#4b5563}
.mk-call{position:absolute;z-index:6;padding:8px 14px;border-radius:999px;background:var(--ac);color:#04121a;font-size:13px;font-weight:700;box-shadow:0 10px 30px #0006}

.mk-art{position:relative;height:110px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,hsl(var(--h,30) 70% 90%),hsl(var(--h,30) 55% 74%))}
.mk-jar{position:absolute;left:50%;bottom:14px;width:46%;height:52%;margin-left:-23%;border-radius:8px 8px 14px 14px;background:linear-gradient(90deg,hsl(var(--h,30) 40% 32%),hsl(var(--h,30) 50% 48%) 40%,hsl(var(--h,30) 40% 28%))}
.mk-jar::before{content:"";position:absolute;left:8%;right:8%;top:-7px;height:9px;border-radius:4px;background:#2a2118}
.mk-flame{position:absolute;left:50%;bottom:calc(14px + 52% + 8px);z-index:1;width:10px;height:18px;margin-left:-5px;border-radius:50%/65% 65% 35% 35%;background:radial-gradient(#fff 12%,#ffd36b 50%,#ff9a3c);box-shadow:0 0 14px #ffb54d;transform-origin:50% 100%;animation:flick 1.4s ease-in-out infinite alternate}

/* diagram scenes */

.jr{position:absolute;left:44px;right:44px;top:36px;bottom:30px;color:#eaf4fb}
.jr-rows{position:relative;display:grid;gap:12px}
.jr-line{position:absolute;left:35px;top:31px;bottom:31px;width:2px;background:linear-gradient(var(--ac),#ffffff40);transform:scaleY(0);transform-origin:top;transition:transform var(--dur,5s) linear}
.jr-line.on{transform:scaleY(1)}
.jr-row{position:relative;display:flex;align-items:center;gap:16px;padding:11px 16px;border:1px solid #ffffff1f;border-radius:14px;background:#0b1626d9}
.jr-n{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ac);color:#04121a;font-weight:800}
.jr-tx b{font-size:17px}
.jr-tx small{display:block;color:#a9bccb;font-size:12.5px}
.jr-tag{margin-top:18px;padding:12px;border:1px dashed color-mix(in srgb,var(--ac) 65%,transparent);border-radius:14px;color:var(--ac);font-size:17px;font-weight:700;text-align:center}

.hb-lines{position:absolute;inset:0;width:700px;height:625px}
.hb-lines path{fill:none;stroke:var(--ac);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;opacity:.75;transition:stroke-dashoffset .8s ease}
.hb-lines path.on{stroke-dashoffset:0}
.hb-c{position:absolute;display:grid;place-content:center;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--ac) 55%,#fff),var(--ac));color:#04121a;text-align:center;box-shadow:0 0 70px color-mix(in srgb,var(--ac) 55%,transparent)}
.hb-c b{font-size:18px}.hb-c small{font-size:12px}
.hb-n{position:absolute;display:grid;place-items:center;width:132px;height:52px;margin:-26px 0 0 -66px;border:1px solid color-mix(in srgb,var(--ac) 70%,transparent);border-radius:14px;background:#0e1b2c;color:#eaf4fb;font-size:15px;font-weight:700}
.hb-n.on{box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 25%,transparent),0 0 26px color-mix(in srgb,var(--ac) 45%,transparent)}

.lg{position:absolute;inset:34px 36px;display:grid;grid-template-rows:auto 1fr auto;gap:14px;color:#eaf4fb}
.lg-scale{display:flex;align-items:center;gap:12px;color:#a9bccb;font-size:12px}
.lg-scale>i{position:relative;flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,#ffffff24,var(--ac))}
.lg-mk{position:absolute;top:-5px;left:calc(100% - 18px);width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px var(--ac);transition:left .7s cubic-bezier(.3,.7,.2,1)}
.lg-mk.p1{left:calc(50% - 9px)}.lg-mk.p2{left:0}
.lg-rows{display:grid;gap:12px;align-content:start}
.lg-row{display:grid;grid-template-columns:170px 1fr;gap:6px 16px;align-items:center;padding:14px 16px;border:1px solid #ffffff1f;border-radius:14px;background:#0b1626d9;transition:opacity .5s,transform .5s,background .4s,border-color .4s}
.lg-kw{color:var(--ac);font:15px ui-monospace,Consolas,monospace}
.lg-row b+small,.lg-row div b{display:block}
.lg-row small{color:#a9bccb;font-size:12.5px}
.lg-ex{grid-column:1/3;display:flex;flex-wrap:wrap;gap:8px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .5s}
.lg-ex span{padding:2px 10px;border-radius:999px;background:#ffffff14;color:#cfe3f1;font-size:12px}
.lg-row.sel{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 16%,#0b1626)}
.lg-row.sel .lg-ex{max-height:60px;opacity:1}
.lg-row.dim{opacity:.55}
.lg-neg{display:grid;gap:8px;padding:14px 16px;border:1px solid #ffffff1f;border-radius:14px;background:#0e1b2c}
.lg-neg>small{color:#a9bccb;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.lg-q{font-size:14px}
.lg-q.out b{color:#ff9b9b;text-decoration:line-through}
.lg-add{width:fit-content;padding:6px 14px;border-radius:999px;background:var(--ac);color:#04121a;font-size:12.5px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.lg-add.on{opacity:1;transform:none}
.lg-chip{display:inline-block;padding:3px 12px;border:1px solid #ff9b9b;border-radius:999px;color:#ffb8b8;font-size:13px;opacity:0;transition:opacity .4s}
.lg-chip.on{opacity:1}

.cp{position:absolute;inset:40px 34px;display:grid;grid-template-columns:1fr 1fr;gap:34px;color:#eaf4fb}
.cp-col{display:grid;gap:12px;align-content:start;padding:22px;border:1px solid #ffffff24;border-radius:18px;background:#ffffff0d}
.cp-col>small{color:var(--ac);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.cp-h{font-size:22px}
.cp-col ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.cp-col li{padding:10px 12px;border-radius:10px;background:#ffffff0d;font-size:14px}
.cp-ch{display:flex;flex-wrap:wrap;gap:6px}
.cp-ch .mk-tag{border-color:var(--ac);color:var(--ac)}
.cp.c3{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cp.c3 .cp-col{padding:16px 13px}
.cp.c3 .cp-h{font-size:19px}
.cp.c3 .cp-col li{padding:8px 10px;font-size:12.5px}
.cp.c3 .cp-vs{display:none}
.cp-vs{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--ac);color:#04121a;font-size:13px;font-style:normal;font-weight:800}

.fl{position:absolute;inset:70px 28px 30px;color:#eaf4fb}
.fl-row{display:flex;align-items:stretch;gap:6px}
.fl-node{flex:1;min-width:0;display:grid;gap:6px;align-content:start;padding:16px 12px;border:1px solid #ffffff24;border-radius:16px;background:#ffffff0d}
.fl-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ac);color:#04121a;font-weight:800}
.fl-node b{font-size:15px}
.fl-node small{color:#a9bccb;font-size:12px;line-height:1.4}
.fl-node ul{display:grid;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.fl-node li{padding-left:8px;border-left:2px solid var(--ac);font-size:12px}
.fl-arr{flex:none;align-self:center;color:var(--ac);font-size:20px;font-style:normal}

.mt{position:absolute;inset:44px 30px;display:grid;gap:16px;align-content:start;color:#eaf4fb}
.mt-sample{position:absolute;right:0;top:-28px;padding:2px 10px;border:1px solid #ffffff3d;border-radius:999px;color:#a9bccb;font-size:11px}
.mt-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mt-kpi{padding:16px;border:1px solid #ffffff24;border-radius:14px;background:#ffffff0d}
.mt-kpi small{color:#a9bccb}.mt-v{display:block;font-size:30px}
.mt-tbl{display:grid;gap:6px}
.mt-row{display:grid;grid-template-columns:1.05fr 1.4fr 1.55fr;gap:12px;align-items:center;padding:11px 14px;border-radius:12px;background:#ffffff0a;font-size:13px}
.mt-row>b{font-size:14px}
.mt-row.head{background:none;color:var(--ac);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.mt-row.head b{font-size:11px}

.ck{position:absolute;inset:46px 36px;color:#eaf4fb}
.ck-h{display:block;margin-bottom:14px;color:var(--ac);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ck ul{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.ck-i{display:flex;align-items:flex-start;gap:16px;padding:16px 18px;border:1px solid #ffffff1f;border-radius:16px;background:#ffffff0d}
.ck-box{position:relative;flex:none;width:26px;height:26px;border:2px solid #ffffff59;border-radius:8px;transition:background .3s,border-color .3s}
.ck-i.done .ck-box{border-color:var(--ac);background:var(--ac)}
.ck-i.done .ck-box::after{content:"";position:absolute;left:8px;top:3px;width:6px;height:12px;border:solid #04121a;border-width:0 3px 3px 0;transform:rotate(45deg)}
.ck-i b{font-size:16px}.ck-i small{display:block;color:#a9bccb;font-size:13px}

@media (prefers-reduced-motion:reduce){
  .fc-w{animation:none;opacity:1;transform:none}.t,.fscene,.fscene>*,.lg-row,.lg-mk,.jr-line,.hb-lines path,.ft-bar i{transition:none}
  .mk-flame,.fs-ring,.fs-soon-pill i,.fs-load i{animation:none}
}