/*
Theme Name: Flixgo Media
Author: Flixgo Media
Description: Trang giới thiệu song ngữ Việt/Anh cho studio hoạt hình Flixgo Media. Toàn bộ chữ và hình ảnh chỉnh trong Giao diện > Tùy biến > Flixgo.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.2
License: GNU General Public License v2 or later
Text Domain: flixgo
*/

/* Layout: a render viewport at night. One particle sculpture in the hero morphs between a 2D drawing, a 3D form and an AI network; every service card carries its own small looping animation. */
:root{
  --bg:#0B1024; --panel:#141B3A; --ink:#F2F3FF; --muted:#A6ADD0; --line:#2A3364;
  --pink:#FF5C8A; --cyan:#3FE0D0; --yellow:#FFD23F; --violet:#9B8CFF; --on-accent:#0B1024;
  --g1:#FF5C8A; --g2:#FFD23F;
  --display:"Chakra Petch","Be Vietnam Pro",system-ui,sans-serif;
  --body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1120px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F5F4FF; --panel:#FFFFFF; --ink:#141A3C; --muted:#545C85; --line:#D3D5F0;
    --pink:#D92B63; --cyan:#0E8F86; --yellow:#E0A300; --violet:#5B48E0; --on-accent:#FFFFFF;
    --g1:#D92B63; --g2:#5B48E0;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#F5F4FF; --panel:#FFFFFF; --ink:#141A3C; --muted:#545C85; --line:#D3D5F0;
  --pink:#D92B63; --cyan:#0E8F86; --yellow:#E0A300; --violet:#5B48E0; --on-accent:#FFFFFF;
  --g1:#D92B63; --g2:#5B48E0;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(var(--line) 1px,transparent 1.5px);background-size:28px 28px}
canvas,svg{max-width:100%}
a{color:var(--cyan)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}

:root:not([data-lang="en"]) .en{display:none!important}
:root[data-lang="en"] .vi{display:none!important}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
section{padding-block:80px}
h1,h2,h3{font-family:var(--display);line-height:1.2;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,5.6vw,3.9rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.8vw,2.6rem);font-weight:700}
h3{font-size:1.35rem;font-weight:600;line-height:1.25}
p{margin:0}
h1 em,h2 em{font-style:normal}
.grad,h1 em,h2 em{background:linear-gradient(90deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.label{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.lede{font-size:1.15rem;color:var(--muted);max-width:56ch}
.head{display:flex;flex-direction:column;gap:14px;margin-bottom:44px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:64px}
.mark{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--ink);text-decoration:none;letter-spacing:.02em}
.mark b{color:var(--pink)}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:500}
.nav a:hover{color:var(--pink)}
.lang{display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;flex:none}
.lang button{font:600 .8rem var(--mono);padding:7px 13px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
@media (max-width:820px){.nav{display:none}.lang{margin-left:auto}}

/* hero */
.hero{padding-block:48px 64px;position:relative;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.28;pointer-events:none;animation:drift 14s ease-in-out infinite alternate}
.blob.a{width:340px;height:340px;background:var(--violet);left:-120px;top:20px}
.blob.b{width:280px;height:280px;background:var(--pink);right:-80px;bottom:0;animation-delay:-6s}
@keyframes drift{to{transform:translate(40px,-30px) scale(1.15)}}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.hero-text{display:flex;flex-direction:column;gap:22px;min-width:0;animation:rise .7s ease both}
@keyframes rise{from{opacity:.4;transform:translateY(14px)}}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.btn{display:inline-block;font-weight:600;font-size:1rem;padding:13px 24px;border-radius:999px;text-decoration:none;border:2px solid var(--line);color:var(--ink);transition:transform .15s ease,border-color .15s ease}
.btn.main{background:var(--pink);border-color:var(--pink);color:var(--on-accent)}
.btn:hover{transform:translateY(-3px);border-color:var(--pink)}
.stage{min-width:0;display:flex;flex-direction:column;gap:14px}
#morph{display:block;width:100%;aspect-ratio:1/1;max-height:480px}
.modes{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.modes>span{font:600 .74rem var(--mono);letter-spacing:.08em;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);color:var(--muted);transition:all .3s ease}
.modes>span.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr}#morph{max-height:360px}}

/* marquee */
.tape{border-block:1px solid var(--line);background:var(--panel);overflow:hidden;padding-block:14px}
.tape div{display:flex;gap:36px;width:max-content;animation:slide 30s linear infinite;font:700 1.15rem var(--display);letter-spacing:.06em;white-space:nowrap}
.tape i{font-style:normal;color:var(--yellow)}
@keyframes slide{to{transform:translateX(-50%)}}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px}
.about-text{display:flex;flex-direction:column;gap:18px;max-width:62ch;min-width:0}
.facts{display:flex;flex-direction:column;margin:0;min-width:0}
.facts div{display:flex;justify-content:space-between;gap:16px;padding-block:14px;border-bottom:1px solid var(--line)}
.facts div:first-child{border-top:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:.95rem}
.facts dd{margin:0;font-weight:600;text-align:right}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:32px}}

/* services */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svc{background:var(--panel);border:1.5px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:transform .2s ease,border-color .2s ease}
.svc:hover{transform:translateY(-5px) rotate(-.6deg);border-color:var(--c)}
.svc p{color:var(--muted);font-size:.97rem}
.svc h3{color:var(--ink)}
.toon{height:84px;border-radius:12px;background:var(--bg);border:1px dashed var(--line);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px}
@media (max-width:920px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.grid{grid-template-columns:1fr}}
/* 2D: squash and stretch */
.t-ball b{position:absolute;bottom:10px;left:calc(50% - 15px);width:30px;height:30px;border-radius:50%;background:var(--yellow);border:2.5px solid var(--ink);transform-origin:50% 100%;animation:bounce .9s cubic-bezier(.5,0,.9,.6) infinite alternate}
@keyframes bounce{0%{transform:translateY(-38px) scale(.92,1.1)}85%{transform:translateY(0) scale(.95,1.08)}100%{transform:translateY(0) scale(1.3,.68)}}
/* 3D: turning cube */
.t-cube{perspective:300px}
.cube{width:36px;height:36px;position:relative;transform-style:preserve-3d;animation:spin 7s linear infinite}
.cube i{position:absolute;inset:0;border:2.5px solid var(--cyan);background:color-mix(in srgb,var(--cyan) 14%,transparent)}
.cube i:nth-child(1){transform:translateZ(18px)}.cube i:nth-child(2){transform:rotateY(180deg) translateZ(18px)}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(18px)}.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(18px)}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(18px)}.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(18px)}
@keyframes spin{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
/* storyboard: panels filling in order */
.t-board i{width:38px;height:28px;border:2.5px solid var(--ink);border-radius:4px;animation:panel 3s infinite}
.t-board i:nth-child(2){animation-delay:.6s}.t-board i:nth-child(3){animation-delay:1.2s}.t-board i:nth-child(4){animation-delay:1.8s}
@keyframes panel{0%,15%{background:transparent}25%,80%{background:var(--pink)}100%{background:transparent}}
/* design: a shape that keeps redrawing itself */
.t-shape b{width:44px;height:44px;background:var(--violet);border:2.5px solid var(--ink);animation:shape 5s ease-in-out infinite}
@keyframes shape{0%,100%{border-radius:50%;transform:rotate(0)}33%{border-radius:8px 50% 8px 50%;transform:rotate(90deg)}66%{border-radius:50% 12px 50% 50%;transform:rotate(200deg)}}
/* AI tools: signal moving through a small network */
.t-net svg{width:150px;height:64px}
.t-net line{stroke:var(--line);stroke-width:2}
.t-net .sig{stroke:var(--cyan);stroke-width:2.5;stroke-dasharray:8 60;animation:sig 1.8s linear infinite}
.t-net circle{fill:var(--bg);stroke:var(--cyan);stroke-width:2.5}
@keyframes sig{to{stroke-dashoffset:-68}}
/* consulting: a conversation */
.t-talk{flex-direction:column;align-items:stretch;padding:14px 28px;gap:8px}
.t-talk i{height:14px;border-radius:8px;background:var(--yellow);width:58%;animation:talk 3.2s infinite}
.t-talk i:nth-child(2){align-self:flex-end;background:var(--cyan);width:44%;animation-delay:1.1s}
.t-talk i:nth-child(3){width:36%;animation-delay:2.1s}
@keyframes talk{0%,8%{opacity:0;transform:translateY(6px)}18%,88%{opacity:1;transform:none}100%{opacity:0}}

/* AI section */
.ai{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.box{background:var(--panel);border:1.5px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:18px;min-width:0}
.box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.box li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;color:var(--muted)}
.box li::before{content:"";width:10px;height:10px;border-radius:50%;margin-top:.55em;background:var(--c)}
.box li strong{color:var(--ink);font-weight:600}
@media (max-width:820px){.ai{grid-template-columns:1fr}}

/* process */
.strip{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:22px 0 0;position:relative}
.strip::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:3px;background:var(--line)}
.strip::after{content:"";position:absolute;top:-5px;left:0;width:13px;height:13px;border-radius:50%;background:var(--pink);box-shadow:0 0 14px var(--pink);animation:travel 6s ease-in-out infinite}
@keyframes travel{to{left:calc(100% - 13px)}}
.strip li{background:var(--panel);border:1.5px solid var(--line);border-radius:14px;padding:18px 16px 20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.strip .fr{font:600 .76rem var(--mono);color:var(--pink);letter-spacing:.08em}
.strip h3{font-size:1.15rem}
.strip p{font-size:.93rem;color:var(--muted);line-height:1.55}
.note{margin-top:28px;padding-left:16px;border-left:3px solid var(--cyan);color:var(--muted);max-width:68ch}
@media (max-width:980px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.strip{grid-template-columns:1fr}}

/* channels */
.chans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.chan{background:var(--panel);border:1.5px solid var(--line);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:14px;min-width:0;text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.chan:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--c);border-color:var(--c)}
.chan .handle{font:400 .82rem var(--mono);color:var(--muted)}
.chan h3{font-size:2rem;font-weight:700}
.chan p{color:var(--muted)}
.chan .go{margin-top:auto;padding-top:8px;font-weight:600;color:var(--pink)}
@media (max-width:760px){.chans{grid-template-columns:1fr}}

/* company + contact */
.record{margin:0;display:flex;flex-direction:column;background:var(--panel);border:1.5px solid var(--line);border-radius:22px;padding:8px 26px}
.record div{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:4px 24px;padding-block:14px;border-top:1px solid var(--line)}
.record div:first-child{border-top:0}
.record dt{color:var(--muted);font-size:.95rem}
.record dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.record .num{font-family:var(--mono);font-variant-numeric:tabular-nums}
@media (max-width:620px){.record div{grid-template-columns:1fr}}
.contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{background:var(--panel);border:1.5px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.card .val{font-weight:600;font-size:1.08rem;overflow-wrap:anywhere;user-select:all}
.copy{align-self:flex-start;margin-top:auto;font:600 .76rem var(--mono);padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.copy:hover{background:var(--ink);color:var(--bg)}
@media (max-width:860px){.contact{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:32px;color:var(--muted);font-size:.9rem;background:var(--bg)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .strip::after{display:none}
}

/* image slots filled from the Customizer */
.mark img{display:block;height:38px;width:auto}
.hero-img{display:block;width:100%;max-height:480px;object-fit:contain;border-radius:18px}
.about-img{display:block;width:100%;border-radius:18px;border:1.5px solid var(--line)}
.svc .thumb{display:block;width:100%;height:150px;object-fit:cover;border-radius:12px}
.chan .cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.gallery img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1.5px solid var(--line)}
.gallery figcaption{color:var(--muted);font-size:.92rem}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.gallery{grid-template-columns:1fr}}
a.val{color:var(--ink);text-decoration:none}
.val.small{font-size:1rem}
body.admin-bar .top{top:32px}
@media (max-width:782px){body.admin-bar .top{top:46px}}