:root{
  --bg:#0A1020; --bg2:#0D1428; --panel:rgba(255,255,255,.045); --panel2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.16);
  --ink:#F2F6FF; --soft:#B9C3D8; --muted:#7E8AA5;
  --cam:#EF4B54; --cam2:#C22733; --xanh:#4DA3E8; --xanh2:#1E86D8;
  --luc:#3DC06C; --vang:#FDBE3B; --do:#F0565B;
  --r:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:15px/1.75 "Be Vietnam Pro",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
section{position:relative;padding:76px 0}
@media(max-width:640px){section{padding:56px 0}}

/* ---------- chữ ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cam),var(--xanh))}
h1{font-size:clamp(30px,5.4vw,54px);line-height:1.12;letter-spacing:-.02em;font-weight:900}
h2{font-size:clamp(23px,3.4vw,36px);line-height:1.18;letter-spacing:-.02em;font-weight:800;margin-top:14px}
.sub{margin-top:14px;color:var(--soft);max-width:640px}
.grad{background:linear-gradient(90deg,var(--cam) 10%,var(--xanh) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}.center .sub{margin-inline:auto}

/* ---------- nút & chip ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:13px 22px;font-weight:800;font-size:14.5px;border:1px solid transparent;cursor:pointer;transition:.2s}
.btn-cam{background:linear-gradient(135deg,var(--cam),var(--cam2));color:#fff;box-shadow:0 12px 30px -12px rgba(217,47,60,.5)}
.btn-cam:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-ghost{border-color:var(--line2);color:var(--ink);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--cam);color:var(--cam)}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--soft)}
.chip b{color:var(--ink)}
.tick{color:var(--luc);font-weight:900}

/* ---------- khối ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(8px)}
.card:hover{border-color:var(--line2)}
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.grid-bg{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(75% 60% at 50% 35%,#000,transparent)}

/* ---------- reveal ---------- */
.fx [data-rv]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.fx [data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fx [data-rv]{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- topbar ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(10,16,32,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar{display:flex;align-items:center;gap:18px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:17px;letter-spacing:-.01em}
.logo .mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--cam),var(--cam2));display:grid;place-items:center;font-size:17px}
.logo em{font-style:normal;color:var(--cam)}
.logo b{color:var(--xanh)}
.logo small{display:block;font-size:8.5px;font-weight:800;letter-spacing:.3em;color:var(--muted)}
nav.desk{display:flex;gap:4px;margin-left:auto}
nav.desk a{padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--soft)}
nav.desk a:hover{color:var(--ink);background:var(--panel2)}
.top-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line2);border-radius:10px;color:var(--ink);padding:8px 11px;font-size:16px}
@media(max-width:960px){nav.desk,.top-cta .btn-ghost{display:none}.burger{display:block}.top-cta{margin-left:auto}}
@media(max-width:480px){
  .topbar{gap:10px}
  .logo{font-size:13.5px;white-space:nowrap}
  .logo .mark{width:30px;height:30px;border-radius:9px;font-size:14px}
  .logo small{letter-spacing:.2em;font-size:7.5px}
  .top-cta .btn-cam{padding:9px 14px;font-size:13px;white-space:nowrap}
}
.m-nav{display:none;border-top:1px solid var(--line);padding:10px 20px 16px}
.m-nav a{display:block;padding:11px 4px;font-weight:600;color:var(--soft);border-bottom:1px dashed var(--line)}
.m-nav.open{display:block}

/* ---------- hero ---------- */
.hero{padding:70px 0 60px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:34px}}
.hero .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.hero-panel{position:relative;border-radius:26px;border:1px solid var(--line2);overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.hero-panel img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4}
.hp-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:12px 16px;background:linear-gradient(180deg,rgba(10,16,32,.85),transparent);font-size:12px;font-weight:700;color:var(--soft)}
.hp-top .dot{width:8px;height:8px;border-radius:50%;background:var(--luc);box-shadow:0 0 10px var(--luc)}
.hp-scene{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(10,16,32,.78);border:1px solid var(--line2);border-radius:16px;padding:12px 16px;backdrop-filter:blur(8px)}
.hp-scene .t{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hp-scene .v{font-size:14.5px;font-weight:700;margin-top:3px;min-height:24px}
.hp-scene .v b{color:var(--cam)}
.tag{position:absolute;display:flex;align-items:center;gap:6px;background:rgba(10,16,32,.8);border:1px solid var(--line2);border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:700;backdrop-filter:blur(6px)}
.tag .st{width:7px;height:7px;border-radius:50%}
.tag.on .st{background:var(--luc);box-shadow:0 0 8px var(--luc);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}

/* ---------- so sánh cách cũ ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
@media(max-width:760px){.vs{grid-template-columns:1fr}}
.vs .card{padding:26px}
.vs h3{font-size:16.5px;font-weight:800;display:flex;align-items:center;gap:9px}
.vs ul{list-style:none;margin-top:14px;display:grid;gap:9px;font-size:14px;color:var(--soft)}
.vs .old h3 span{color:var(--do)}
.vs .new{border-color:rgba(77,163,232,.4);background:linear-gradient(160deg,rgba(30,134,216,.10),rgba(234,98,12,.06))}
.vs .new h3 span{color:var(--luc)}
.vs .foot{margin-top:14px;font-size:12.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:12px}

/* ---------- hệ sinh thái ---------- */
.eco{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
@media(max-width:760px){.eco{grid-template-columns:1fr}}
.eco .card{padding:28px}
.eco .who{display:flex;align-items:center;gap:12px}
.eco .who .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:21px;font-weight:900}
.eco .a .ic{background:linear-gradient(135deg,var(--cam),var(--cam2))}
.eco .b .ic{background:linear-gradient(135deg,var(--xanh),var(--xanh2))}
.eco p{margin-top:12px;font-size:14px;color:var(--soft)}
.eco .role{margin-top:12px;font-size:13px;color:var(--ink);background:var(--panel2);border-radius:12px;padding:10px 14px}
.eco-note{margin-top:16px;text-align:center;font-size:13.5px;color:var(--muted)}
.eco-note b{color:var(--ink)}

/* ---------- ngữ cảnh ---------- */
.scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
@media(max-width:880px){.scenes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.scenes{grid-template-columns:1fr 1fr;gap:10px}}
.scene{padding:22px}
.scene .ic{font-size:24px}
.scene h3{font-size:15.5px;font-weight:800;margin-top:10px}
.scene p{font-size:13px;color:var(--soft);margin-top:6px;line-height:1.6}
@media(max-width:540px){.scene{padding:16px}.scene p{font-size:12px}}

/* ---------- combo ---------- */
.tabs{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px;margin-top:26px;gap:4px;flex-wrap:wrap}
.tabs button{border:0;background:none;color:var(--soft);font:inherit;font-size:13.5px;font-weight:700;padding:9px 18px;border-radius:999px;cursor:pointer}
.tabs button.on{background:linear-gradient(135deg,var(--cam),var(--cam2));color:#fff}
.combos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
@media(max-width:1080px){.combos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.combos{grid-template-columns:1fr}}
.combo{display:flex;flex-direction:column;overflow:hidden}
.combo .ph{position:relative;aspect-ratio:16/9.5;overflow:hidden}
.combo .ph img{width:100%;height:100%;object-fit:cover;transition:.6s}
.combo:hover .ph img{transform:scale(1.05)}
.combo .ph .lb{position:absolute;left:12px;top:12px;background:rgba(10,16,32,.8);border:1px solid var(--line2);border-radius:999px;padding:5px 12px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.combo .bd{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.combo h3{font-size:17px;font-weight:800}
.combo ul{list-style:none;margin-top:12px;display:grid;gap:7px;font-size:13px;color:var(--soft);flex:1}
.combo ul .tick{margin-right:7px}
.combo .price{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.combo .price small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.combo .price b{font-size:22px;color:var(--cam);letter-spacing:-.01em}
.combo .btn{margin-top:14px;width:100%;padding:11px}
.combo.hot{border-color:rgba(245,123,54,.5);background:linear-gradient(170deg,rgba(234,98,12,.10),var(--panel))}
.combo.hot .ph .hotlb{position:absolute;right:12px;top:12px;background:linear-gradient(135deg,var(--cam),var(--cam2));border-radius:999px;padding:5px 12px;font-size:10.5px;font-weight:800}
.price-note{margin-top:18px;text-align:center;font-size:12.5px;color:var(--muted)}

/* ---------- quy trình ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:36px;counter-reset:s}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}
.step{padding:22px;position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-size:34px;font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,var(--cam),var(--xanh));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}
.step h3{font-size:15px;font-weight:800;margin-top:8px}
.step p{font-size:12.5px;color:var(--soft);margin-top:6px;line-height:1.65}

/* ---------- cam kết ---------- */
.pledges{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
@media(max-width:900px){.pledges{grid-template-columns:repeat(2,1fr)}}
.pledge{padding:24px;text-align:center}
.pledge .ic{width:46px;height:46px;margin:0 auto;border-radius:14px;background:var(--panel2);display:grid;place-items:center;font-size:21px}
.pledge h3{font-size:14.5px;font-weight:800;margin-top:12px}
.pledge p{font-size:12.5px;color:var(--soft);margin-top:5px}

/* ---------- công trình ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
@media(max-width:640px){.stats{grid-template-columns:1fr 1fr 1fr;gap:8px}}
.stat{padding:20px;text-align:center}
.stat b{font-size:clamp(22px,4vw,34px);font-weight:900;background:linear-gradient(90deg,var(--cam),var(--xanh));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;font-size:12px;color:var(--soft);margin-top:4px}
.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:760px){.clips{grid-template-columns:1fr}}
.clip{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9}
.clip img{width:100%;height:100%;object-fit:cover;opacity:.9}
.clip .play{position:absolute;inset:0;display:grid;place-items:center}
.clip .play i{width:58px;height:58px;border-radius:50%;background:rgba(234,98,12,.92);display:grid;place-items:center;font-style:normal;font-size:20px;color:#fff;box-shadow:0 10px 30px -8px rgba(234,98,12,.8);transition:.2s}
.clip:hover .play i{transform:scale(1.1)}
.clip .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(0deg,rgba(10,16,32,.9),transparent);font-size:13px;font-weight:700}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
@media(max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal img{border-radius:14px;border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover}

/* ---------- chat khác biệt ---------- */
.chats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
@media(max-width:760px){.chats{grid-template-columns:1fr}}
.chatbox{padding:24px}
.chatbox h3{font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.msgs{margin-top:16px;display:grid;gap:10px}
.msg{max-width:88%;padding:10px 15px;border-radius:16px;font-size:13.5px;line-height:1.6}
.msg.u{justify-self:end;background:linear-gradient(135deg,var(--xanh2),var(--xanh));border-bottom-right-radius:5px}
.msg.h{justify-self:start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:5px;color:var(--soft)}
.msg.h.good{border-color:rgba(61,192,108,.4);color:var(--ink)}
.msg.note{justify-self:center;background:none;color:var(--muted);font-size:12px;font-style:italic}
.chat-old{opacity:.85}

/* ---------- thiết bị ---------- */
.devs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
@media(max-width:880px){.devs{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.devs{grid-template-columns:1fr}}
.dev{padding:20px 22px}
.dev h3{font-size:14.5px;font-weight:800;display:flex;gap:9px;align-items:center}
.dev p{font-size:12.5px;color:var(--soft);margin-top:6px}
.reqs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:22px}

/* ---------- faq ---------- */
.faq{max-width:780px;margin:30px auto 0;display:grid;gap:10px}
.qa{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;background:none;border:0;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;padding:16px 20px;cursor:pointer;text-align:left}
.qa button i{font-style:normal;font-size:18px;color:var(--cam);transition:.25s}
.qa .a{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:13.5px;color:var(--soft);padding:0 20px}
.qa.open .a{max-height:220px;padding-bottom:16px}
.qa.open button i{transform:rotate(45deg)}

/* ---------- form ---------- */
.lead{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:start;margin-top:34px}
@media(max-width:900px){.lead{grid-template-columns:1fr}}
.lead .card{padding:28px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:540px){.f-row{grid-template-columns:1fr}}
.f label{display:block;font-size:12px;font-weight:700;color:var(--soft);margin-bottom:5px}
.f input,.f select,.f textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:12px;color:var(--ink);font:inherit;font-size:14px;padding:11px 14px;outline:none}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--cam)}
.f select option{background:var(--bg2)}
.hot-lines{display:grid;gap:12px;margin-top:20px}
.hot-lines .btn{justify-content:flex-start}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:38px 0 30px;background:var(--bg2)}
.foot{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;font-size:13px;color:var(--muted)}
.foot .brand{font-size:18px;font-weight:900}
.foot .brand em{font-style:normal;color:var(--cam)}
.foot .brand b{color:var(--xanh)}
.demo-band{position:fixed;bottom:0;left:0;right:0;z-index:60;background:linear-gradient(90deg,var(--cam2),var(--xanh2));text-align:center;font-size:12px;font-weight:700;padding:7px 12px}

/* ==== fx van-de ==== */
/* ===== Dải mô phỏng (fx-sim) ===== */
.fx-sim{position:relative;margin:12px 0 6px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);overflow:hidden}
.fx-sim svg{display:block;width:100%;height:72px}

/* ----- Thẻ TRÁI: hỗn loạn ----- */
.fx-sim-chaos .fx-ln{stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-dasharray:5 7;stroke-linecap:round;fill:none;opacity:.18}
.fx-sim-chaos .fx-d{opacity:.45}
.fx-sim-chaos .fx-err-x{stroke:var(--cam);stroke-width:2;stroke-linecap:round;fill:none;opacity:.35}
.fx-sim-chaos .fx-err-ring{fill:none;stroke:var(--cam);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}

.in .fx-sim-chaos .fx-d1{animation:fx-flicker-a 1.3s linear infinite}
.in .fx-sim-chaos .fx-d2{animation:fx-flicker-b 1.9s linear .25s infinite}
.in .fx-sim-chaos .fx-d3{animation:fx-flicker-a .95s linear .6s infinite}
.in .fx-sim-chaos .fx-d4{animation:fx-flicker-b 2.4s linear .1s infinite}
.in .fx-sim-chaos .fx-derr{animation:fx-errblink 1.15s linear infinite}
.in .fx-sim-chaos .fx-err-x{animation:fx-errblink 1.15s linear .1s infinite}
.in .fx-sim-chaos .fx-err-ring{animation:fx-errring 1.15s ease-out infinite}
.in .fx-sim-chaos .fx-ln{animation:fx-lnfuzz 2.2s linear infinite}
.in .fx-sim-chaos .fx-ln2{animation-duration:1.5s;animation-direction:reverse;animation-delay:.4s}
.in .fx-sim-chaos .fx-ln3{animation-duration:2.8s;animation-delay:.7s}
.in .fx-sim-chaos .fx-ln4{animation-duration:1.2s;animation-direction:reverse}

@keyframes fx-flicker-a{0%,100%{opacity:.9}18%{opacity:.15}30%{opacity:.75}52%{opacity:.1}64%{opacity:1}83%{opacity:.3}}
@keyframes fx-flicker-b{0%,100%{opacity:.2}22%{opacity:1}40%{opacity:.15}60%{opacity:.85}78%{opacity:.25}}
@keyframes fx-errblink{0%,42%{opacity:1}48%,92%{opacity:.12}100%{opacity:1}}
@keyframes fx-errring{0%{transform:scale(.5);opacity:.7}70%{transform:scale(2.1);opacity:0}100%{transform:scale(2.1);opacity:0}}
@keyframes fx-lnfuzz{0%{stroke-dashoffset:0;opacity:.3}45%{opacity:.08}60%{opacity:.28}100%{stroke-dashoffset:-24;opacity:.3}}

/* ----- Thẻ PHẢI: nhạc trưởng ----- */
.fx-sim-hub .fx-wire{stroke:rgba(255,255,255,.12);stroke-width:2;stroke-linecap:round;fill:none}
.fx-sim-hub .fx-wire-lit{stroke:var(--xanh);stroke-width:2;stroke-linecap:round;fill:none;stroke-dasharray:100 100;stroke-dashoffset:100;opacity:0}
.fx-sim-hub .fx-db{fill:rgba(255,255,255,.3)}
.fx-sim-hub .fx-devlit{fill:var(--xanh);opacity:0}
.fx-sim-hub .fx-devglow{fill:var(--xanh);opacity:0}
.fx-sim-hub .fx-hub{fill:var(--luc);opacity:.55}
.fx-sim-hub .fx-hublit{fill:var(--luc);opacity:0}
.fx-sim-hub .fx-ring{fill:none;stroke:var(--luc);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}

.in .fx-sim-hub .fx-wire-lit{animation:fx-wiredraw 3.2s cubic-bezier(.4,0,.2,1) infinite}
.in .fx-sim-hub .fx-hublit{animation:fx-lit 3.2s linear infinite}
.in .fx-sim-hub .fx-ring1{animation:fx-pulse 3.2s ease-out infinite}
.in .fx-sim-hub .fx-ring2{animation:fx-pulse 3.2s ease-out .35s infinite}
.in .fx-sim-hub .fx-devlit{animation:fx-lit 3.2s linear infinite}
.in .fx-sim-hub .fx-devglow{animation:fx-glow 3.2s linear infinite}
.in .fx-sim-hub .fx-t1{animation-delay:.55s}
.in .fx-sim-hub .fx-t2{animation-delay:1.05s}

@keyframes fx-wiredraw{0%{stroke-dashoffset:100;opacity:0}6%{opacity:1}34%{stroke-dashoffset:0}72%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:100;opacity:0}}
@keyframes fx-lit{0%{opacity:0}5%{opacity:1}55%{opacity:1}68%{opacity:0}100%{opacity:0}}
@keyframes fx-glow{0%{opacity:0}5%{opacity:.35}55%{opacity:.3}68%{opacity:0}100%{opacity:0}}
@keyframes fx-pulse{0%{transform:scale(.3);opacity:.8}55%{transform:scale(2.6);opacity:0}100%{transform:scale(2.6);opacity:0}}

/* ----- Giảm chuyển động: tắt hết, giữ trạng thái tĩnh dễ hiểu ----- */
@media (prefers-reduced-motion:reduce){
  .fx-sim svg *{animation:none!important}
  .fx-sim-chaos .fx-d{opacity:.75}
  .fx-sim-chaos .fx-ln{opacity:.25}
  .fx-sim-chaos .fx-err-x{opacity:.8}
  .fx-sim-chaos .fx-err-ring{opacity:0}
  .fx-sim-hub .fx-wire-lit{stroke-dashoffset:0;opacity:.85}
  .fx-sim-hub .fx-devlit,.fx-sim-hub .fx-hublit{opacity:1}
  .fx-sim-hub .fx-devglow{opacity:.25}
  .fx-sim-hub .fx-ring{opacity:0}
}
/* ==== fx ngu-canh ==== */
/* FX — huy hiệu HUD/AI thay emoji ở 6 thẻ ngữ cảnh */
.fx-hud{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;line-height:0;font-size:0}
.fx-hud svg{display:block;width:56px;height:56px;overflow:visible}
.fx-hud--xanh{color:#4DA3E8;filter:drop-shadow(0 0 7px rgba(77,163,232,.5))}
.fx-hud--cam{color:#EF4B54;filter:drop-shadow(0 0 7px rgba(239,75,84,.5))}
.fx-hud--vang{color:#FDBE3B;filter:drop-shadow(0 0 7px rgba(253,190,59,.45))}
.fx-hud--luc{color:#3DC06C;filter:drop-shadow(0 0 7px rgba(61,192,108,.45))}
.fx-hud .fx-r1{transform-origin:28px 28px;animation:fx-quay 16s linear infinite}
.fx-hud .fx-r2{transform-origin:28px 28px;animation:fx-quay-nguoc 10s linear infinite}
.fx-hud .fx-core{opacity:.12;transform-origin:28px 28px;animation:fx-tho 3.2s ease-in-out infinite}
.fx-hud .fx-wave{stroke-width:1;transform-origin:28px 31.5px;animation:fx-lan 2.6s ease-out infinite}
.fx-hud .fx-wave2{animation-delay:1.3s}
.fx-hud .fx-beam{animation:fx-quet 2.4s ease-in-out infinite}
.fx-hud .fx-star{stroke-width:1.2;animation:fx-sao 3.4s ease-in-out infinite}
.fx-hud .fx-star2{animation-delay:1.7s;animation-duration:4.2s}
.fx-hud .fx-rays{transform-origin:28px 34.5px;animation:fx-lan-tia 2.8s ease-in-out infinite}
.fx-hud .fx-check{stroke-dasharray:1;stroke-dashoffset:1;animation:fx-tich 3s ease-in-out infinite}
.fx-hud .fx-scan{animation:fx-quet-doc 3s linear infinite}
.fx-hud .fx-drop{stroke-width:1.4;animation:fx-roi 1.4s linear infinite}
.fx-hud .fx-drop2{animation-delay:.45s}
.fx-hud .fx-drop3{animation-delay:.9s}
@keyframes fx-quay{to{transform:rotate(360deg)}}
@keyframes fx-quay-nguoc{to{transform:rotate(-360deg)}}
@keyframes fx-tho{0%,100%{opacity:.09;transform:scale(.94)}50%{opacity:.2;transform:scale(1.06)}}
@keyframes fx-lan{0%{transform:scale(.45);opacity:.9}100%{transform:scale(2.5);opacity:0}}
@keyframes fx-quet{0%{transform:translateX(0);opacity:0}15%{opacity:.9}85%{opacity:.9}100%{transform:translateX(13px);opacity:0}}
@keyframes fx-sao{0%,100%{opacity:.85}55%{opacity:.08}}
@keyframes fx-lan-tia{0%,100%{opacity:.35;transform:scale(.88)}50%{opacity:1;transform:scale(1.1)}}
@keyframes fx-tich{0%{stroke-dashoffset:1;opacity:0}12%{opacity:1}45%{stroke-dashoffset:0}78%{stroke-dashoffset:0;opacity:1}92%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fx-quet-doc{0%{transform:translateY(0);opacity:0}12%{opacity:.65}55%{opacity:.65}72%{transform:translateY(9px);opacity:0}100%{transform:translateY(9px);opacity:0}}
@keyframes fx-roi{0%{transform:translateY(-1px);opacity:0}25%{opacity:.95}75%{opacity:.95}100%{transform:translateY(5.5px);opacity:0}}
@media (prefers-reduced-motion:reduce){
.fx-hud .fx-r1,.fx-hud .fx-r2,.fx-hud .fx-core,.fx-hud .fx-wave,.fx-hud .fx-beam,.fx-hud .fx-star,.fx-hud .fx-rays,.fx-hud .fx-check,.fx-hud .fx-scan,.fx-hud .fx-drop{animation:none!important}
.fx-hud .fx-check{stroke-dashoffset:0;opacity:1}
.fx-hud .fx-wave,.fx-hud .fx-beam,.fx-hud .fx-scan{opacity:0}
}
/* ==== fx noid-8 ==== */
/* ===== fx: hội thoại hiện lần lượt như chat thật ===== */
.fx-chat{overflow:hidden}

/* trạng thái chờ (chỉ khi có JS: body.fx) */
.fx .fx-chat .fx-m{opacity:0}
.fx .fx-chat.in .fx-m{animation:fx-pop .5s cubic-bezier(.18,.85,.28,1.12) both}
.fx-m.fx-l{--fx-x:-18px}
.fx-m.fx-r{--fx-x:18px}

/* nhịp hộp "Mua lẻ" */
.fx-t1{animation-delay:.15s}
.fx-t2{animation-delay:.95s}
.fx-t3{animation-delay:1.75s}
.fx-t4{animation-delay:2.55s}
.fx-t5{animation-delay:3.4s}

/* nhịp hộp "Trọn gói" (chừa chỗ cho đang gõ…) */
.fx-c1{animation-delay:.15s}
.fx-c2{animation-delay:1.05s}
.fx-c3{animation-delay:2s}
.fx-c4{animation-delay:4.4s}
.fx-c5{animation-delay:5.25s}

@keyframes fx-pop{
  from{opacity:0;transform:translate(var(--fx-x,0),12px) scale(.97)}
  to{opacity:1;transform:none}
}

/* bong bóng "đang gõ…" — cao 0 khi nghỉ nên không hiện nếu thiếu JS */
.fx-typing{display:flex;align-items:center;gap:5px;height:0;padding:0 14px;overflow:hidden;box-sizing:border-box;opacity:0}
.fx .fx-chat.in .fx-typing{animation:fx-tlife 1.9s ease 2.6s both}
.fx-dot{width:6px;height:6px;border-radius:50%;background:var(--soft,#B9C3D8);opacity:.55;flex:none}
.fx .fx-chat.in .fx-dot{animation:fx-blink .55s ease-in-out 2.75s 3 both}
.fx .fx-chat.in .fx-dot:nth-child(2){animation-delay:2.87s}
.fx .fx-chat.in .fx-dot:nth-child(3){animation-delay:2.99s}

@keyframes fx-tlife{
  0%{opacity:0;height:0;transform:translate(-14px,8px)}
  9%{opacity:1;height:36px;transform:none}
  86%{opacity:1;height:36px;transform:none}
  100%{opacity:0;height:0;transform:none}
}
@keyframes fx-blink{
  0%,100%{transform:translateY(0);opacity:.55}
  35%{transform:translateY(-4px);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .fx .fx-chat .fx-m{opacity:1;animation:none!important;transform:none!important}
  .fx-typing{display:none!important;animation:none!important}
  .fx-dot{animation:none!important}
}

/* Câu trả lời FAQ đang đóng: max-height:0 vẫn cho Tab lọt vào link bên trong.
   visibility:hidden gỡ khỏi cây trợ năng, trễ 0s khi mở để không nuốt hiệu ứng. */
.qa .a{visibility:hidden;transition:max-height .3s ease,visibility 0s linear .3s}
.qa.open .a{visibility:visible;transition:max-height .3s ease,visibility 0s}

/* Tiết kiệm pin mà KHÔNG đụng layout: chỉ chạy hoạt hoạ khi khối đã lộ ra.
   (content-visibility làm phần tử báo sai chiều cao -> offsetTop sai -> link neo
   và cuộn nhảy sai chỗ, nhìn như trang trắng. Đã trả giá một lần.) */
.fx-sim svg *, .fx-chat .fx-m, #ngu-canh .holo *, .fx-hud * { animation-play-state: paused }
.in .fx-sim svg *, .fx-chat.in .fx-m, .in .holo *, .in .fx-hud * { animation-play-state: running }

/* wrap-pad: lề trang thoáng hơn trên điện thoại, thẻ không chạm mép */
@media(max-width:767px){
  .wrap{padding-left:18px;padding-right:18px}
  .card,.pdp-box,.form{border-radius:16px}
  .eco{gap:12px}
  .eco .card{padding:18px}
}
@media(min-width:768px) and (max-width:1023px){.wrap{padding-left:24px;padding-right:24px}}

/* Thuộc tính width/height trên thẻ <img> (thêm để chống giật layout) sẽ ĐÈ
   aspect-ratio nếu CSS không đặt height:auto — ảnh dọc bị kéo thành 174x750.
   CSS nào cố ý đặt height vẫn thắng vì CSS > thuộc tính. */
img{height:auto}
.gal img,.clips img,.ct img{height:auto}
/* Lưới ảnh công trình: ô cao bằng nhau, ảnh phủ kín không méo */
.gal{grid-auto-rows:1fr}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px}
@media(max-width:520px){.gal img{aspect-ratio:4/5}}

/* Header điện thoại: nav ẩn nên margin-left:auto của nó mất tác dụng —
   cụm nút dồn về giữa, trống 97px bên phải. Đẩy cụm nút sát phải. */
.hd2-cta{margin-left:auto}

/* ---- vá cho bản viettelsmart ---- */
.ok{margin-top:12px;padding:11px 14px;border-radius:12px;background:rgba(61,192,108,.14);color:#7ADF9F;font-size:.92rem}
.ok[hidden]{display:none}
footer.ft{background:var(--bg2);color:#AEB8C2;padding:56px 0 28px;border-top:1px solid var(--line)}
footer.ft a{color:#fff}footer.ft h4{color:#fff;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
footer.ft .g{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
footer.ft ul{list-style:none;padding:0;margin:0}footer.ft li{margin-bottom:8px;font-size:.92rem}
footer.ft .bot{border-top:1px solid var(--line);margin-top:34px;padding-top:18px;font-size:.82rem;color:#7E8AA5;display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between}
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;display:flex;flex-direction:column;gap:10px}
.fab a{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.fab a svg{width:24px;height:24px}.fab .z{background:#0068FF}.fab .p{background:linear-gradient(135deg,var(--cam),var(--cam2))}

.cq{position:fixed;inset:-18vmax;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.cq i{position:absolute;display:block;border-radius:50%;filter:blur(78px);will-change:transform;opacity:.5}
.cq i:nth-child(1){width:46vmax;height:46vmax;left:-6vmax;top:-4vmax;
 background:radial-gradient(circle,rgba(77,163,232,.28),transparent 66%);
 animation:cq1 26s ease-in-out infinite alternate}
.cq i:nth-child(2){width:38vmax;height:38vmax;right:-4vmax;top:6vmax;
 background:radial-gradient(circle,rgba(239,75,84,.18),transparent 66%);
 animation:cq2 32s ease-in-out infinite alternate}
.cq i:nth-child(3){width:42vmax;height:42vmax;left:28vmax;bottom:-10vmax;
 background:radial-gradient(circle,rgba(124,104,255,.22),transparent 66%);
 animation:cq3 38s ease-in-out infinite alternate}
@keyframes cq1{to{transform:translate3d(9vmax,6vmax,0) scale(1.16)}}
@keyframes cq2{to{transform:translate3d(-8vmax,10vmax,0) scale(1.1)}}
@keyframes cq3{to{transform:translate3d(6vmax,-8vmax,0) scale(1.2)}}
@media(max-width:700px){.cq i{filter:blur(56px);opacity:.42}}
@media(prefers-reduced-motion:reduce){.cq i{animation:none}}

/* ---------- CHỮ HIỆN DẦN TỪNG TỪ ----------
   Không dùng gõ từng ký tự bằng cách xoá/ghi lại nội dung: làm vậy lúc máy tìm
   kiếm đọc trang sẽ thấy tiêu đề rỗng. Chữ vẫn nằm nguyên trong HTML, JS chỉ bọc
   mỗi từ vào một thẻ rồi cho hiện lệch nhịp — nhìn như đang gõ ra. */
.go .tu{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(.32em);
 will-change:opacity,transform;
 animation:go-tu .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--t)}
@keyframes go-tu{to{opacity:1;filter:blur(0);transform:none}}
.go-con{display:inline-block;width:.08em;height:1em;vertical-align:-.12em;margin-left:.12em;
 background:linear-gradient(180deg,#EF4B54,#4DA3E8);border-radius:2px;
 animation:go-nhay 1s steps(2) infinite;animation-delay:var(--t)}
@keyframes go-nhay{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .go .tu{opacity:1;filter:none;transform:none;animation:none}
 .go-con{display:none}}

/* ---------- CLIP PHÁT NGAY TRÊN TRANG ----------
   Kiểu "mặt tiền" như nhathongminhtuya.com: chỉ ảnh nền lưu sẵn, bấm mới nạp
   YouTube (bản nocookie) vào đúng khung 9:16. */
.c916.dang-phat{background:#000}
.c916.dang-phat::after{display:none}
.c916 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.c916-dong{position:absolute;top:6px;right:6px;z-index:4;width:36px;height:36px;
 border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(6,10,22,.72);
 color:#fff;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}
.c916-dong:hover{background:rgba(239,75,84,.9)}

/* ============================================================
   HD2 — Header + Logo + Menu | V SMART HOME (viettelsmart.com)
   Tiền tố .hd2 / .v-logo — không đụng CSS cũ.
   Luôn nền tối, đẹp trên cả trang chủ #0A1020 lẫn trang trong nền trắng.
   ============================================================ */
.hd2,.hd2 *,.hd2 *::before,.hd2 *::after,
.hd2-drawer,.hd2-drawer *,.hd2-drawer *::before,.hd2-drawer *::after{box-sizing:border-box}
.hd2 a,.hd2-drawer a{text-decoration:none;color:inherit}
.hd2 button,.hd2-drawer button{font:inherit;margin:0}

.hd2{
  --hd2-ink:#F2F6FF; --hd2-soft:#B9C3D8; --hd2-muted:#7E8AA5;
  --hd2-do:#E8474F; --hd2-cam:#F57B36; --hd2-xanh:#4DA3E8;
  position:sticky;top:0;z-index:90;
  font-family:"Be Vietnam Pro",system-ui,sans-serif;
  background:rgba(10,16,32,.96);          /* fallback không có backdrop-filter */
  border-bottom:0;
  transition:background .3s ease,box-shadow .3s ease;
}
@supports((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .hd2{background:rgba(10,16,32,.84);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
  .hd2.hd2--scrolled{background:rgba(10,16,32,.93)}
}
.hd2--scrolled{box-shadow:0 14px 44px -20px rgba(0,0,0,.7)}

/* viền dưới phát sáng nhẹ gradient */
.hd2::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 2%,rgba(232,71,79,.65) 22%,rgba(245,123,54,.85) 50%,rgba(77,163,232,.65) 78%,transparent 98%);
  box-shadow:0 1px 16px rgba(245,123,54,.35),0 1px 5px rgba(77,163,232,.3);
}

.hd2-in{max-width:1220px;margin:0 auto;height:68px;padding:0 20px;display:flex;align-items:center;gap:18px}

/* hiệu ứng xuất hiện mượt */
@keyframes hd2-drop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.hd2-in>*{animation:hd2-drop .65s cubic-bezier(.16,1,.3,1) both}
.hd2-cta{animation-delay:.16s}
.hd2-nav a{animation:hd2-drop .55s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.1s + var(--i,0)*.04s)}

/* ---------------- LOGO ---------------- */
.v-logo{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.v-logo__mark{position:relative;width:40px;height:40px}
.v-logo__svg{display:block;width:100%;height:100%}
.v-logo__ring,.v-logo__glow{transform-box:view-box;transform-origin:50% 50%}
.v-logo__ring--1{animation:vlg-spin 16s linear infinite}
.v-logo__ring--2{animation:vlg-spin-rev 9s linear infinite}
.v-logo__ring--3{animation:vlg-spin 5.5s linear infinite}
.v-logo__glow{animation:vlg-breathe 3.8s ease-in-out infinite}
.v-logo__node{animation:vlg-node 2.4s ease-in-out infinite}
@keyframes vlg-spin{to{transform:rotate(360deg)}}
@keyframes vlg-spin-rev{to{transform:rotate(-360deg)}}
@keyframes vlg-breathe{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes vlg-node{0%,100%{opacity:1}50%{opacity:.3}}

.v-logo__text{display:flex;flex-direction:column;line-height:1.12;min-width:0}
.v-logo__text strong{font-size:15px;font-weight:900;letter-spacing:.03em;color:var(--hd2-ink);white-space:nowrap}
.v-logo__text strong em{font-style:normal;font-weight:900;background:linear-gradient(135deg,#E8474F,#F57B36);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-logo__text small{margin-top:2px;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hd2-muted);white-space:nowrap}

/* ---------------- MENU DESKTOP ---------------- */
.hd2-nav{position:relative;display:flex;align-items:center;gap:2px;margin-left:auto;animation-delay:.08s}
.hd2-nav a{position:relative;z-index:1;padding:9px 11px;border-radius:999px;font-size:13px;font-weight:600;color:var(--hd2-soft);white-space:nowrap;transition:color .2s}
.hd2-nav a:hover,.hd2-nav a:focus-visible{color:#fff}

/* viên trượt theo mục đang hover */
.hd2-pill{
  position:absolute;left:0;top:50%;height:34px;margin-top:-17px;width:40px;border-radius:999px;
  background:rgba(255,255,255,.08);opacity:0;pointer-events:none;
  transition:transform .38s cubic-bezier(.22,1,.36,1),width .38s cubic-bezier(.22,1,.36,1),opacity .22s ease;
}
.hd2-pill.on{opacity:1}
.hd2-pill::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#E8474F,#F57B36 55%,#4DA3E8);
  box-shadow:0 0 8px rgba(245,123,54,.7);
}

/* ---------------- CTA PHẢI ---------------- */
.hd2-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.hd2-tel{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 15px;border-radius:999px;
  font-size:13.5px;font-weight:800;color:var(--hd2-ink);
  border:1px solid rgba(77,163,232,.4);background:rgba(77,163,232,.09);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.hd2-tel svg{flex-shrink:0}
.hd2-tel:hover{border-color:#4DA3E8;box-shadow:0 0 20px -6px rgba(77,163,232,.75);transform:translateY(-1px)}
.hd2-quote{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 19px;border-radius:999px;
  font-size:13.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#D93943,#C2410C);
  box-shadow:0 10px 26px -12px rgba(232,71,79,.65);
  transition:transform .2s,filter .2s,box-shadow .2s;
}
.hd2-quote::after{content:"→";font-weight:900;transition:transform .2s}
.hd2-quote:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 14px 30px -12px rgba(232,71,79,.75)}
.hd2-quote:hover::after{transform:translateX(3px)}

/* burger */
.hd2-burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;border-radius:13px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
}
.hd2-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--hd2-ink);transition:transform .25s,opacity .2s}
.hd2-burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd2-burger.on span:nth-child(2){opacity:0}
.hd2-burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------- DRAWER MOBILE ---------------- */
.hd2-drawer{
  position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  font-family:"Be Vietnam Pro",system-ui,sans-serif;
  background:rgba(7,11,22,.92);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
@supports((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .hd2-drawer{background:rgba(7,11,22,.74);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4)}
}
.hd2-drawer.open{opacity:1;visibility:visible;transition:opacity .3s ease}

.hd2-drawer__top{display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 20px;flex-shrink:0}
.hd2-drawer__brand{font-size:15px;font-weight:900;letter-spacing:.03em;color:#F2F6FF}
.hd2-drawer__brand em{font-style:normal;background:linear-gradient(135deg,#E8474F,#F57B36);-webkit-background-clip:text;background-clip:text;color:transparent}
.hd2-drawer__close{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#F2F6FF;
}
.hd2-drawer__close:active{background:rgba(255,255,255,.12)}

.hd2-drawer__nav{flex:1;overflow-y:auto;padding:10px 26px;display:flex;flex-direction:column;counter-reset:hd2m}
.hd2-drawer__nav a{
  display:flex;align-items:center;gap:16px;min-height:52px;padding:12px 2px;
  font-size:23px;font-weight:800;color:#F2F6FF;
  border-bottom:1px dashed rgba(255,255,255,.09);
  opacity:0;transform:translateY(16px);
  transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.hd2-drawer__nav a::before{
  counter-increment:hd2m;content:"0" counter(hd2m);
  font-size:11px;font-weight:800;letter-spacing:.18em;color:#F57B36;opacity:.9;
}
.hd2-drawer__nav a:active{color:#F57B36}
.hd2-drawer.open .hd2-drawer__nav a{opacity:1;transform:none;transition-delay:calc(.05s + var(--i,0)*.045s)}

.hd2-drawer__cta{flex-shrink:0;display:grid;gap:11px;padding:16px 26px calc(22px + env(safe-area-inset-bottom,0px))}
.hd2-drawer__cta a{display:flex;align-items:center;justify-content:center;gap:9px;height:52px;border-radius:999px;font-size:15.5px;font-weight:800}
.hd2-drawer__tel{color:#F2F6FF;border:1px solid rgba(77,163,232,.45);background:rgba(77,163,232,.1)}
.hd2-drawer__quote{color:#fff;background:linear-gradient(135deg,#D93943,#C2410C);box-shadow:0 12px 30px -12px rgba(232,71,79,.7)}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1479px){
  .hd2-nav{gap:0}
  .hd2-nav a{padding:9px 8px;font-size:12.5px}
  .hd2-tel{width:40px;padding:0}
  .hd2-tel [data-vs="hotline"]{display:none}
}
@media(max-width:1080px){
  .hd2-in{height:62px;gap:12px}
  .hd2-nav,.hd2-quote{display:none}
  .hd2-burger{display:flex}
  .hd2-tel{width:44px;height:44px}
}
@media(max-width:420px){
  .v-logo__text small{display:none}
  .v-logo__text strong{font-size:14px}
}

/* ---------------- REDUCED MOTION ---------------- */
@media(prefers-reduced-motion:reduce){
  .v-logo__ring--1,.v-logo__ring--2,.v-logo__ring--3,.v-logo__glow,.v-logo__node{animation:none}
  .hd2-in>*,.hd2-nav a{animation:none}
  .hd2,.hd2-pill,.hd2-tel,.hd2-quote,.hd2-quote::after,.hd2-burger span,
  .hd2-drawer,.hd2-drawer__nav a{transition:none}
  .hd2-drawer__nav a{opacity:1;transform:none}
}
/* Zalo là kênh chính: nút Zalo ở header mang màu Zalo, không lẫn với nút báo giá */
.hd2-zalo{background:#0068FF!important;border-color:transparent!important;color:#fff!important}
.hd2-zalo:hover{filter:brightness(1.08)}
.hd2-drawer__contact{display:grid;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.hd2-drawer__contact a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 16px;border-radius:14px;font-weight:700;text-decoration:none}
.hd2-dz{background:#0068FF;color:#fff}.hd2-dt{border:1px solid rgba(255,255,255,.18);color:#F2F6FF}

/* Header điện thoại: chỉ logo + Zalo + burger. Không cho thứ gì trong header nong rộng. */
.hd2,.hd2-in{max-width:100vw;overflow:hidden}
.hd2-in{min-width:0}
.hd2-cta{display:flex;align-items:center;gap:8px;min-width:0}
@media(max-width:1080px){.hd2-drawer__contact{display:grid}}
@media(min-width:1081px){.hd2-drawer__contact{display:none}}

/* ===== HD2 v3 — menu có icon, mục nổi bật, cụm phải nút vuông + pill ===== */
.hd2-nav{gap:4px}
.hd2-nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px}
.hd2-nav a svg{flex:0 0 16px;opacity:.7;transition:opacity .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.hd2-nav a:hover svg,.hd2-nav a:focus-visible svg{opacity:1;transform:translateY(-1px)}
.hd2-nav a>span{white-space:nowrap}
/* mục nổi bật (như "Tư vấn AI" bên nhathongminhtuya) */
.hd2-nav .hd2-hot{margin-left:6px;color:#fff;background:linear-gradient(135deg,var(--hd2-do),var(--hd2-cam));box-shadow:0 8px 22px -10px rgba(232,71,79,.8);font-weight:800}
.hd2-nav .hd2-hot svg{opacity:1}
.hd2-nav .hd2-hot:hover{filter:brightness(1.07);transform:translateY(-1px)}
.hd2-nav .hd2-hot{transition:filter .2s ease,transform .2s ease,box-shadow .2s ease}
/* nút vuông (gọi / email) */
.hd2-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;color:var(--hd2-soft);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.045);transition:color .2s,border-color .2s,background .2s,transform .2s}
.hd2-ico:hover{color:#fff;border-color:rgba(77,163,232,.6);background:rgba(77,163,232,.12);transform:translateY(-1px)}
@media(max-width:1240px){.hd2-ico--mail{display:none}}
/* số điện thoại chỉ ẩn khi thật sự hết chỗ */
@media(min-width:1181px){.hd2-tel{width:auto;padding:0 15px}.hd2-tel [data-vs="hotline"]{display:inline}}
@media(max-width:1180px) and (min-width:1081px){.hd2-tel{width:40px;padding:0}.hd2-tel [data-vs="hotline"]{display:none}}
@media(max-width:1080px){.hd2-ico{display:none}}
/* logo lớn hơn một chút — mốc chữ V và dòng AI SMART LIFE rõ hơn trên điện thoại */
.hd2-in{height:72px}
.v-logo{gap:12px}
.v-logo__mark{width:48px;height:48px}
.v-logo__text strong{font-size:17px}
.v-logo__text small{margin-top:3px;font-size:9.5px;letter-spacing:.09em}
@media(max-width:1080px){.hd2-in{height:68px}.v-logo__mark{width:46px;height:46px}.v-logo__text strong{font-size:16px}}
@media(max-width:420px){.v-logo__mark{width:42px;height:42px}.v-logo__text strong{font-size:14.5px}}
/* vá thanh tiêu đề */
/* Cụm phải phải nằm sát mép: trên điện thoại menu ngang bị ẩn nên nếu không đẩy,
   nút Zalo và nút menu trôi vào giữa, dính vào logo. */
.hd2-cta{margin-left:auto}
/* Nút Zalo là chính cái logo — không khung, không viền, nền trong suốt. */
.hd2-zalo,.hd2-zalo:hover{background:transparent!important;border:0!important;
 box-shadow:none!important;filter:none;transform:none;width:44px;height:44px;padding:0}
.hd2-zalo svg{width:30px;height:30px}
.hd2-zalo:hover svg{transform:scale(1.06);transition:transform .2s}
.hd2-zalo [data-vs="hotline"]{display:none}
@media(max-width:1080px){
 .hd2-in{padding:0 24px;gap:10px}
 .hd2-cta{gap:4px}
 .hd2-zalo{width:40px;height:40px}
 .hd2-zalo svg{width:31px;height:31px}
 .hd2-burger{width:40px;height:40px;border-radius:12px}
}
/* ---------- LOGO: to hơn và sống hơn ----------
   Cỡ cũ 38–48px, trên điện thoại nhỏ hẳn. Nâng lên và thêm ba lớp động:
   quầng thở, vành quét conic, và chấm vệ tinh bay quanh. */
.v-logo__mark{width:52px;height:52px}
.v-logo__mark::before{content:"";position:absolute;inset:-18%;border-radius:50%;
 pointer-events:none;z-index:-1;
 background:radial-gradient(circle,rgba(239,75,84,.34),transparent 66%);
 animation:vlg-quang 3.6s ease-in-out infinite}
.v-logo__mark::after{content:"";position:absolute;inset:-6%;border-radius:50%;
 pointer-events:none;
 background:conic-gradient(from 0deg,transparent 0 62%,rgba(77,163,232,.55) 78%,transparent 92%);
 -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);
 mask:radial-gradient(circle,transparent 58%,#000 60%);
 animation:vlg-quet 4.2s linear infinite}
@keyframes vlg-quang{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:.75;transform:scale(1.06)}}
@keyframes vlg-quet{to{transform:rotate(360deg)}}
.v-logo__text strong{font-size:19px;letter-spacing:.035em}
.v-logo__text small{font-size:10px;letter-spacing:.11em}
/* vào trang: logo trồi lên rồi mới đứng yên */
.v-logo{animation:vlg-vao .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes vlg-vao{from{opacity:0;transform:translateY(-8px) scale(.9)}to{opacity:1;transform:none}}
@media(max-width:1080px){.v-logo__mark{width:50px;height:50px}.v-logo__text strong{font-size:18px}}
@media(max-width:767px){.v-logo__mark{width:48px;height:48px}.v-logo__text strong{font-size:17px}
 .v-logo__text small{display:block;font-size:9.5px}}
@media(max-width:420px){.v-logo__mark{width:44px;height:44px}.v-logo__text strong{font-size:15.5px}
 .v-logo__text small{display:none}}
@media(prefers-reduced-motion:reduce){
 .v-logo,.v-logo__mark::before,.v-logo__mark::after{animation:none}}

/* Cuộn khỏi hero là thanh tiêu đề đổi sang nền trắng cho khớp thân trang sáng.
   Chỉ bật ở trang chủ (nơi có .sang); các trang trong vẫn nền tối như cũ. */
.hd2.tren-sang{background:rgba(255,255,255,.90);
 -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
 box-shadow:0 1px 0 rgba(12,20,36,.08),0 8px 28px -22px rgba(12,20,36,.5)}
.hd2.tren-sang .v-logo__text strong{color:#0C1424}
.hd2.tren-sang .v-logo__text small,.hd2.tren-sang .hd2-nav a{color:#48566E}
.hd2.tren-sang .hd2-nav a:hover,.hd2.tren-sang .hd2-nav a.on{color:#0C1424}
/* nút Nhận báo giá có nền gradient đỏ riêng — luật .hd2-nav a ở trên đặc hiệu
   hơn .hd2-hot nên đè mất chữ trắng, phải trả lại. */
.hd2.tren-sang .hd2-nav a.hd2-hot,.hd2.tren-sang .hd2-nav a.hd2-hot:hover{color:#fff}
.hd2.tren-sang .hd2-pill{background:rgba(12,20,36,.06)}
.hd2.tren-sang .hd2-ico{color:#48566E;border-color:rgba(12,20,36,.16);background:rgba(12,20,36,.04)}
.hd2.tren-sang .hd2-burger{border-color:rgba(12,20,36,.18);background:rgba(12,20,36,.04)}
.hd2.tren-sang .hd2-burger span{background:#0C1424}
.hd2.tren-sang::after{opacity:.55}
@media(max-width:767px){
 .hd2-in{padding:0 18px;gap:8px}
}


/* ================= SÁU NGỮ CẢNH — ẢNH 3D (tools/canh3d.py) =================
   Port nguyên từ 8matter.com (heroslider + canh3d). Chỉ animate opacity/transform; dừng khi slide ẩn, khi ra khỏi màn
   hình (.hs.paused, .c3c[data-paused]) và với giảm chuyển động (kiểu gốc = khung kết). */
.c3-hero{position:relative}
.hs{position:relative}
.hs-k{position:relative;z-index:1;display:flex;align-items:center;gap:9px;margin:0 4px 12px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}
.hs-k i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--luc)}
.hs-k i::after{content:"";position:absolute;left:-9px;top:-9px;width:26px;height:26px;border-radius:50%;background:rgba(61,192,108,.5);transform:scale(.3077);opacity:0;animation:hs-pulse 2s infinite}
@keyframes hs-pulse{0%{transform:scale(.3077);opacity:1}70%{transform:none;opacity:0}100%{transform:scale(.3077);opacity:0}}
.hs-k b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}
.hs-stage{position:relative;z-index:1;display:grid}
.hs-slide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateX(26px) scale(.985);transition:opacity .55s,transform .7s cubic-bezier(.2,.75,.25,1),visibility 0s .55s}
.hs-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s,transform .7s cubic-bezier(.2,.75,.25,1)}
.hs-slide.out{transform:translateX(-26px) scale(.985)}
.hs-slide:not(.on):not(.out) *{animation:none!important}
.hs.paused .hs-slide *,.hs.paused .hs-tab i::after,.hs.paused .hs-k i::after{animation-play-state:paused!important}
.hs-cap{display:grid;gap:3px;margin:16px 4px 0;min-height:74px}
.hs-cap b{font-size:21px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.hs-cap span{font-size:15px;line-height:1.5;color:var(--soft)}
.hs-tabs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:12px}
.hs-tab{position:relative;min-width:0;padding:10px 4px 12px;border:0;border-radius:12px;background:none;cursor:pointer;font:600 12.5px/1.2 'Be Vietnam Pro',system-ui,sans-serif;
 color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s,background .2s}
.hs-tab:hover{color:var(--ink);background:var(--panel)}
.hs-tab:focus-visible{outline:2px solid var(--cam);outline-offset:2px}
.hs-tab[aria-selected=true]{color:var(--ink)}
.hs-tab i{position:absolute;left:6px;right:6px;bottom:4px;height:3px;border-radius:3px;background:var(--line2);overflow:hidden}
.hs-tab i::after{content:"";position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,#EF4B54,#FDBE3B 50%,#4DA3E8);transform:scaleX(0);transform-origin:0 50%}
.hs-tab[aria-selected=true] i::after{transform:scaleX(1)}
.hs.auto .hs-tab[aria-selected=true] i::after{animation:hs-prog var(--hs-dur) linear both}
@keyframes hs-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:640px){.hs-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.hs-cap{min-height:96px}.hs-cap b{font-size:19px}.hs-tab{font-size:13px;padding:11px 4px 13px}}

.c3{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0d0f14;isolation:isolate;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 34px 60px -34px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.07)}
.c3-cam{position:absolute;inset:0;transform-origin:50% 45%;animation:c3-kb var(--hs-dur) cubic-bezier(.25,.6,.35,1) both}
@keyframes c3-kb{from{transform:scale(1.015)}to{transform:scale(1.075) translate3d(var(--kx),var(--ky),0)}}
/* color:transparent — ảnh chưa kịp tải thì trình duyệt không vẽ chữ alt đè lên khung trước */
.c3-f,.c3c-f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent}
.c3-f:not([src]){visibility:hidden}
.c3-in{animation:c3-fade calc(var(--hs-dur)*var(--l)) ease-in-out calc(var(--hs-dur)*var(--t)) both}
@keyframes c3-fade{from{opacity:0}to{opacity:1}}
.c3-ann{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.2}
.c3-ann circle{fill:rgba(255,255,255,.95);stroke:none}
.c3-ann .c3-pulse{fill:none;stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:c3-ring 1.8s ease-out infinite}
@keyframes c3-ring{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.c3-tag{position:absolute;transform:translateY(-50%);padding:5px 10px;border-radius:999px;background:rgba(10,12,18,.62);border:1px solid rgba(255,255,255,.35);
 color:#fff;font:600 12.5px/1.2 'Be Vietnam Pro',system-ui,sans-serif;white-space:nowrap;letter-spacing:.01em}
.c3-tag.c3-r{transform:translate(-100%,-50%)}
.c3-tag::after,.c3-say::after,.c3-k em::after{content:attr(data-t)}
.c3-k::after{content:attr(data-t);order:-1}.c3-k i{order:-2}.c3-k em{order:1}
/* hiện theo mốc --t; loại c3-tr tắt ở mốc --u (nhãn mô hình trắng). Kiểu gốc: c3-st hiện, c3-tr ẩn (khung kết) */
.c3-st{animation:c3-on calc(var(--hs-dur)*(1 - var(--t))) ease calc(var(--hs-dur)*var(--t)) both}
.c3-tr{opacity:0;animation:c3-onoff calc(var(--hs-dur)*(var(--u) - var(--t))) ease calc(var(--hs-dur)*var(--t)) both}
@keyframes c3-on{0%{opacity:0}12%,100%{opacity:1}}
@keyframes c3-onoff{0%{opacity:0}15%,82%{opacity:1}100%{opacity:0}}
.c3-k{position:absolute;left:14px;top:12px;z-index:2;display:flex;align-items:center;gap:8px;margin:0;padding:6px 12px 6px 10px;border-radius:999px;
 background:rgba(10,12,18,.55);color:#fff;font:700 11.5px/1 'Be Vietnam Pro',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.c3-k i{width:7px;height:7px;border-radius:50%;background:#34d399}
.c3-k em{font-style:normal;font-weight:600;color:rgba(255,255,255,.7);letter-spacing:.04em;margin-left:4px;padding-left:9px;border-left:1px solid rgba(255,255,255,.25)}
.c3-ic{position:absolute;right:12px;top:10px;z-index:2;display:flex;gap:8px}
.c3-i{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);color:#fff;background:rgba(10,12,18,.28)}
.c3-i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.c3-i b{position:absolute;inset:-1.5px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#0d0f14;box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 22px rgba(255,255,255,.55);
 animation:c3-on calc(var(--hs-dur)*(1 - var(--t))) ease calc(var(--hs-dur)*var(--t)) both}
.c3-says{position:absolute;left:14px;bottom:12px;z-index:2;display:grid;justify-items:start;gap:6px}
.c3-say{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;border-radius:12px;background:rgba(10,12,18,.66);color:#fff;font:600 13px/1.2 'Be Vietnam Pro',system-ui,sans-serif;
 animation:c3-up calc(var(--hs-dur)*(1 - var(--t))) cubic-bezier(.2,.8,.3,1) calc(var(--hs-dur)*var(--t)) both}
.c3-say svg{width:16px;height:16px;flex:none;fill:none;stroke:#fbbf24;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes c3-up{0%{opacity:0;transform:translateY(10px)}10%,100%{opacity:1;transform:none}}
.c3-rain{position:absolute;inset:0;overflow:hidden;opacity:.55;mix-blend-mode:screen}
.c3-rain i{position:absolute;left:-10%;right:-10%;top:-100%;height:200%;background:repeating-linear-gradient(104deg,transparent 0 9px,rgba(220,232,255,.55) 9px 10px,transparent 10px 23px);
 animation:c3-rain .55s linear infinite}
.c3-rain i+i{opacity:.6;animation-duration:.8s;background:repeating-linear-gradient(100deg,transparent 0 15px,rgba(220,232,255,.4) 15px 16px,transparent 16px 37px)}
@keyframes c3-rain{from{transform:translate3d(0,0,0)}to{transform:translate3d(-4%,50%,0)}}
@media(max-width:640px){
 .c3{border-radius:16px}.c3-tag,.c3-ann path{display:none}
 .c3-k{left:9px;top:8px;padding:5px 9px 5px 8px;font-size:10px}.c3-k em{display:none}
 .c3-ic{right:8px;top:6px;gap:5px}.c3-i{width:28px;height:28px}.c3-i svg{width:14px;height:14px}
 .c3-says{left:9px;bottom:8px;gap:4px}.c3-say{padding:5px 9px 5px 7px;font-size:11px;border-radius:9px}.c3-say svg{width:13px;height:13px}
}

/* thẻ trong lưới "Sáu ngữ cảnh": hoà mờ khung trước → sau */
.c3c{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#0d0f14;isolation:isolate}
.scene .c3c{margin:0 0 4px}
.c3c-cam{position:absolute;inset:0;transform-origin:50% 45%;animation:c3c-kb 16s ease-in-out var(--d,0s) infinite alternate}
@keyframes c3c-kb{from{transform:scale(1.02)}to{transform:scale(1.08) translate3d(var(--kx),var(--ky),0)}}
.c3c-x{animation:c3c-x 9s ease-in-out var(--d,0s) infinite}
@keyframes c3c-x{0%,22%{opacity:0}38%,84%{opacity:1}100%{opacity:0}}
.c3c .c3-k{left:10px;top:10px}
.scene .c3c .c3-k{margin:0;font-size:11.5px;line-height:1;color:#fff}   /* thắng .scene p của site */
@media(max-width:640px){.scene .c3c .c3-k{font-size:10px}}
/* thẻ hẹp (lưới 3 cột): nhãn giữ một dòng, bỏ chip phụ — chữ dưới thẻ đã nói đủ */
.c3c{container-type:inline-size}
.c3-k{white-space:nowrap}
@container (max-width:360px){.c3c .c3-k em{display:none}}
.c3{container-type:inline-size}
@container (max-width:520px){.c3 .c3-k em{display:none}}
.c3c[data-paused] *{animation-play-state:paused!important}

@media(prefers-reduced-motion:reduce){
 .hs *,.hs *::after,.c3c *{animation:none!important}
 .hs-slide,.hs-slide.out{transform:none;transition:opacity .2s,visibility 0s .2s}
 .hs-slide.on{transform:none;transition:opacity .2s}
}


/* ================= CEO ================= */
.ceo2{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.ceo2{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px}}
.ceo2-fig{margin:0;position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line2);background:var(--bg2)}
.ceo2-fig img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}
.ceo2-fig::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(6,10,22,.92),transparent);pointer-events:none}
.ceo2-fig figcaption{position:absolute;left:14px;right:14px;bottom:13px;z-index:1;font-size:12.5px;color:var(--soft)}
.ceo2-fig figcaption b{display:block;font-size:17px;font-weight:900;color:#fff;letter-spacing:-.01em}
.ceo2-badge{position:absolute;left:14px;top:14px;z-index:1;display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(6,10,22,.72);border:1px solid var(--line2);padding:6px 11px;border-radius:999px}
.ceo2-badge i{width:7px;height:7px;border-radius:50%;background:var(--luc);box-shadow:0 0 8px var(--luc)}
.ceo2-q{position:relative;margin:20px 0 0;padding:20px 22px 20px 46px;border-radius:var(--r);border:1px solid var(--line2);
  background:linear-gradient(135deg,rgba(239,75,84,.10),rgba(77,163,232,.07));
  font-size:clamp(15px,2.4vw,18.5px);line-height:1.6;font-weight:700;color:var(--ink)}
.ceo2-q::before{content:"“";position:absolute;left:14px;top:6px;font-size:52px;line-height:1;font-weight:900;color:var(--cam);opacity:.55}
.ceo2-sign{margin-top:12px;font-size:12.5px;color:var(--muted)}
.ceo2-sign b{color:var(--soft)}
.ceo2-ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.ceo2-ul li{display:flex;gap:10px;font-size:13.5px;color:var(--soft);line-height:1.6}
.ceo2-ul li::before{content:"✓";flex:0 0 auto;font-weight:900;color:var(--luc)}
.ceo2-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ============ CLIP 9:16 (2×3 điện thoại · 6 cột từ tablet) ============ */
.clips916{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
@media(min-width:768px){.clips916{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}}
.c916{position:relative;display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line2);background:var(--bg2);aspect-ratio:9/16;isolation:isolate}
.c916 img{width:100%;height:100%;display:block;object-fit:cover;opacity:.92;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s}
.c916:hover img,.c916:focus-visible img{transform:scale(1.06);opacity:1}
.c916::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,10,22,.94) 4%,rgba(6,10,22,.25) 42%,transparent 66%);pointer-events:none}
.c916 .pl{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:2;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:rgba(239,75,84,.94);color:#fff;font-style:normal;font-size:15px;
  box-shadow:0 10px 26px -8px rgba(239,75,84,.85);transition:transform .25s}
.c916:hover .pl{transform:translate(-50%,-50%) scale(1.12)}
.c916 .cp{position:absolute;left:9px;right:9px;bottom:9px;z-index:2;font-size:11px;font-weight:700;line-height:1.4;color:#fff;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.c916 .vw{position:absolute;left:8px;top:8px;z-index:2;font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#fff;background:rgba(6,10,22,.7);border:1px solid var(--line2);padding:3px 7px;border-radius:999px}
@media(min-width:768px) and (max-width:1100px){.c916 .cp{font-size:10px;-webkit-line-clamp:2}.c916 .pl{width:36px;height:36px;font-size:12px}}

/* ============ ẢNH CÓ CHÚ THÍCH ============ */
.gal6{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
@media(min-width:900px){.gal6{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
.gal6 figure{margin:0;position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.gal6 img{width:100%;height:100%;display:block;aspect-ratio:4/3;object-fit:cover;object-position:50% 32%;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.gal6 figure:hover img{transform:scale(1.05)}
.gal6 figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 11px;font-size:11.5px;font-weight:600;line-height:1.45;color:#EAF2FF;
  background:linear-gradient(0deg,rgba(6,10,22,.94),rgba(6,10,22,.55) 55%,transparent)}
@media(min-width:900px){.gal6 figcaption{font-size:12.5px;padding:34px 14px 13px}}

/* ============ CHI NHÁNH trong khối tư vấn ============ */
.tv-cn{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.tv-cn li{display:flex;gap:10px;align-items:baseline;font-size:13px;color:var(--soft);line-height:1.5}
.tv-cn li b{flex:0 0 80px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--xanh)}
.tv-cn a{color:var(--ink)}

/* ============ 5 BƯỚC — MÔ PHỎNG ĐỘNG ============ */
.qt5{position:relative;margin-top:30px}
.qt5-rail{position:relative;height:3px;border-radius:99px;background:rgba(255,255,255,.09);margin:0 6% 20px;display:none}
@media(min-width:1001px){.qt5-rail{display:block}}
.qt5-fill{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);border-radius:99px;background:linear-gradient(90deg,var(--cam),var(--xanh));transition:width .7s cubic-bezier(.4,0,.2,1)}
.qt5-run{position:absolute;top:50%;left:var(--p,0%);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 4px rgba(245,123,54,.28),0 0 16px rgba(245,123,54,.9);transition:left .7s cubic-bezier(.4,0,.2,1)}
.qt5 .steps{margin-top:0}
.qt5 .step{overflow:hidden;transition:border-color .45s ease,background .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.qt5 .step::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--cam),var(--xanh));transition:width .6s ease}
.qt5 .step.on{border-color:rgba(245,123,54,.55);background:rgba(245,123,54,.06);transform:translateY(-4px)}
.qt5 .step.on::after{width:100%}
.qt5 .step.done::before{opacity:.45}
.qt5-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;margin:10px 0 2px;color:var(--soft);
  border:1px solid var(--line2);background:rgba(255,255,255,.04);transition:color .4s,border-color .4s,background .4s,transform .4s}
.qt5 .step.on .qt5-ic{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--cam),var(--cam2));transform:scale(1.08)}
.qt5 .step.on .qt5-ic svg{animation:qt5-pop .6s ease}
@keyframes qt5-pop{0%{transform:scale(.7);opacity:.4}60%{transform:scale(1.14)}100%{transform:none;opacity:1}}
.qt5-live{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;font-size:12.5px;color:var(--muted)}
.qt5-live b{color:var(--soft);font-weight:700}
.qt5-live i{width:7px;height:7px;border-radius:50%;background:var(--luc);box-shadow:0 0 8px var(--luc);animation:qt5-bl 1.8s ease-in-out infinite}
@keyframes qt5-bl{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){
  .qt5 .step,.qt5-fill,.qt5-run,.qt5-ic{transition:none}
  .qt5-live i,.qt5 .step.on .qt5-ic svg{animation:none}
}


/* ================= CHUYỂN ĐỔI SỐ — khối A ================= */
.cds-grid{display:grid;gap:14px;margin-top:34px}
@media(min-width:960px){.cds-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.cds-panel{position:relative;border:1px solid var(--line2);border-radius:var(--r);background:linear-gradient(160deg,rgba(11,18,38,.9),rgba(6,10,24,.95));padding:14px 16px 16px;overflow:hidden;min-width:0}
.cds-panel::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(77,163,232,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(77,163,232,.06) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(75% 75% at 50% 45%,#000,transparent)}
.cds-ph{position:relative;display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--xanh);margin-bottom:10px}
.cds-ph-r{margin-left:auto;color:var(--muted);letter-spacing:.06em;font-weight:700;text-transform:none;font-variant-numeric:tabular-nums}
.cds-live{width:7px;height:7px;border-radius:50%;background:var(--luc);box-shadow:0 0 0 0 rgba(61,192,108,.6);animation:cds-ring 2s ease-out infinite}
@keyframes cds-ring{to{box-shadow:0 0 0 16px rgba(61,192,108,0)}}
/* sơ đồ */
.cds-svg{position:relative;display:block;width:100%;height:auto;font-family:'Be Vietnam Pro',sans-serif}
.cds-ln{fill:none;stroke:rgba(77,163,232,.35);stroke-width:1.4;stroke-dasharray:3 5}
.cds-pk{fill:var(--xanh);filter:drop-shadow(0 0 4px rgba(77,163,232,.9))}
.cds-pk-dn{fill:var(--cam);filter:drop-shadow(0 0 4px rgba(245,123,54,.9))}
.cds-node rect{fill:rgba(10,16,32,.9);stroke:rgba(77,163,232,.45);stroke-width:1.2}
.cds-node text{fill:#EAF2FF;font-size:9.5px;font-weight:700}
.cds-plat-t{fill:var(--xanh);font-size:9px;font-weight:800;letter-spacing:.18em}
.cds-plat-s{fill:var(--soft);font-size:9.5px;font-weight:600}
.cds-lbl{fill:var(--muted);font-size:8.5px;font-weight:800;letter-spacing:.16em}
.cds-nucleus{fill:#14192e;stroke:url(#cds-bus);stroke-width:1.5}
.cds-core-t{fill:#fff;font-size:15px;font-weight:900;letter-spacing:.04em}
.cds-core-s{fill:var(--soft);font-size:9.5px;font-weight:600}
.cds-ring{fill:none;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 50%}
.cds-ring1{stroke:rgba(77,163,232,.55);stroke-width:1.3;stroke-dasharray:2.5 5;animation:cds-spin 16s linear infinite}
.cds-ring2{stroke:#F57B36;stroke-width:1.6;stroke-dasharray:150 89;animation:cds-spin-r 9s linear infinite}
.cds-ring3{stroke:rgba(77,163,232,.9);stroke-width:1.4;stroke-dasharray:46 142;animation:cds-spin 5.5s linear infinite}
.cds-breathe{transform-box:fill-box;transform-origin:50% 50%;animation:cds-breathe 3.8s ease-in-out infinite}
@keyframes cds-spin{to{transform:rotate(360deg)}}@keyframes cds-spin-r{to{transform:rotate(-360deg)}}
@keyframes cds-breathe{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
/* nhật ký + KPI */
.cds-kpi{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}
.cds-kpi div{border:1px solid var(--line);border-radius:12px;padding:9px 8px;background:rgba(255,255,255,.035);min-width:0;text-align:center}
.cds-kpi b{display:block;font-size:20px;font-weight:900;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.cds-kpi span{display:block;font-size:9.5px;color:var(--muted);line-height:1.3;margin-top:3px}
@media(max-width:560px){.cds-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cds-log{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:6px;min-height:212px;align-content:start}
.cds-log li{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:start;font-size:12px;line-height:1.45;color:var(--soft);padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);animation:cds-in .35s ease}
.cds-log time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11px;padding-top:1px}
.cds-log em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.1em;padding:3px 6px;border-radius:6px;background:rgba(77,163,232,.14);color:var(--xanh)}
.cds-log li[data-t=ocr] em{background:rgba(253,190,59,.14);color:var(--vang)}
.cds-log li[data-t=duyet] em{background:rgba(61,192,108,.14);color:var(--luc)}
.cds-log li[data-t=ai] em{background:rgba(245,123,54,.16);color:var(--cam)}
.cds-log li.typing span::after{content:"▍";color:var(--xanh);animation:cds-blink .8s steps(1) infinite}
.cds-log li.done span::after{content:" ✓";color:var(--luc);font-weight:800}
@keyframes cds-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes cds-blink{50%{opacity:0}}
.cds-note{position:relative;margin:10px 0 0;font-size:10.5px;color:var(--muted)}
/* 3 lớp */
.cds-layers{display:grid;gap:12px;margin-top:14px}
@media(min-width:760px){.cds-layers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cds-layer{position:relative;padding:20px 20px 18px}
.cds-layer .cds-li{position:absolute;right:16px;top:14px;font-size:30px;font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,var(--cam),var(--xanh));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85}
.cds-layer svg{color:var(--xanh);margin-bottom:8px}
.cds-layer h3{font-size:15.5px;font-weight:800}
.cds-layer p{font-size:12.5px;color:var(--soft);line-height:1.65;margin-top:6px}
#chuyen-doi-so .reqs{margin-top:14px}

/* ================= LỢI ÍCH KÉP — khối B ================= */
.cds-sols{display:grid;gap:12px;margin-top:32px}
@media(min-width:640px){.cds-sols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cds-sols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cds-sol{padding:18px 18px 16px;min-width:0}
.cds-sol h3{font-size:14.5px;font-weight:800;margin-top:10px}
.cds-sol p{font-size:12.5px;color:var(--soft);line-height:1.65;margin-top:6px}
.cds-mini{position:relative;height:64px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);overflow:hidden}
.cds-m-ocr .doc{position:absolute;left:14px;top:12px;width:84px;height:5px;border-radius:3px;background:rgba(255,255,255,.18)}
.cds-m-ocr .doc:nth-child(2){top:26px;width:62px}.cds-m-ocr .doc:nth-child(3){top:40px;width:74px}
.cds-m-ocr .scan{position:absolute;left:8px;right:8px;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--xanh),transparent);box-shadow:0 0 10px var(--xanh);animation:cds-scan 2.4s ease-in-out infinite}
@keyframes cds-scan{0%{top:6px}50%{top:56px}100%{top:6px}}
.cds-m-erp{display:flex;align-items:flex-end;gap:6px;padding:8px 14px}
.cds-m-erp i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--xanh),rgba(77,163,232,.25));transform-origin:bottom;animation:cds-grow 2.8s ease-in-out infinite}
.cds-m-erp i:nth-child(2){animation-delay:.15s}.cds-m-erp i:nth-child(3){animation-delay:.3s}.cds-m-erp i:nth-child(4){animation-delay:.45s}.cds-m-erp i:nth-child(5){animation-delay:.6s;background:linear-gradient(180deg,var(--cam),rgba(245,123,54,.25))}
.cds-m-erp b{position:absolute;right:12px;top:8px;font-size:14px;color:var(--luc)}
@keyframes cds-grow{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.cds-m-iot{display:grid;grid-template-columns:repeat(6,1fr);place-items:center;padding:0 10px}
.cds-m-iot i{width:10px;height:10px;border-radius:50%;background:var(--luc);box-shadow:0 0 0 0 rgba(61,192,108,.5);animation:cds-ring 2.2s ease-out infinite}
.cds-m-iot i:nth-child(2){animation-delay:.3s}.cds-m-iot i:nth-child(3){animation-delay:.6s;background:var(--vang)}.cds-m-iot i:nth-child(4){animation-delay:.9s}.cds-m-iot i:nth-child(5){animation-delay:1.2s;background:var(--cam)}.cds-m-iot i:nth-child(6){animation-delay:1.5s}
.cds-m-home{display:flex;align-items:center;justify-content:center;gap:12px}
.cds-m-home i{position:relative;width:38px;height:20px;border-radius:99px;background:rgba(255,255,255,.14);animation:cds-tog 3.6s ease-in-out infinite}
.cds-m-home i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;animation:cds-knob 3.6s ease-in-out infinite}
.cds-m-home i:nth-child(2),.cds-m-home i:nth-child(2)::after{animation-delay:.4s}.cds-m-home i:nth-child(3),.cds-m-home i:nth-child(3)::after{animation-delay:.8s}
@keyframes cds-tog{0%,40%{background:rgba(255,255,255,.14)}55%,100%{background:var(--luc)}}
@keyframes cds-knob{0%,40%{left:3px}55%,100%{left:21px}}
.cds-m-sec .cam{position:absolute;left:18px;top:24px;width:16px;height:16px;border-radius:4px;background:var(--cam);box-shadow:0 0 12px rgba(245,123,54,.8)}
.cds-m-sec .cone{position:absolute;left:34px;top:0;width:150px;height:64px;background:conic-gradient(from 60deg at 0 50%,rgba(245,123,54,.28) 0 60deg,transparent 60deg);transform-origin:0 50%;animation:cds-sweep 3s ease-in-out infinite alternate}
@keyframes cds-sweep{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.cds-m-kwh .arc{position:absolute;left:50%;top:14px;width:70px;height:35px;margin-left:-35px;border-radius:70px 70px 0 0;border:6px solid var(--luc);border-bottom:0;border-right-color:var(--vang);opacity:.8}
.cds-m-kwh .needle{position:absolute;left:50%;top:18px;width:2px;height:30px;margin-left:-1px;background:#fff;transform-origin:50% 100%;animation:cds-needle 3.2s ease-in-out infinite alternate}
.cds-m-kwh b{position:absolute;right:12px;bottom:8px;font-size:13px;color:var(--luc)}
@keyframes cds-needle{from{transform:rotate(-70deg)}to{transform:rotate(-25deg)}}
/* bảng so sánh */
.cds-cmp{margin-top:18px;padding:18px 18px 8px;min-width:0}
.cds-cmp .tw{margin:0 -6px;padding:0 6px}
@media(min-width:761px){.cds-cmp .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* Điện thoại: bảng 4 cột không bao giờ vừa màn hình. Xếp mỗi năng lực thành một
   thẻ, tên cột hiện bên trái từng dòng — đọc dọc, không phải kéo ngang. */
@media(max-width:760px){
  .cds-cmp{padding:16px 14px 8px}
  .cds-table thead{display:none}
  .cds-table,.cds-table tbody,.cds-table tr,.cds-table th,.cds-table td{display:block;width:auto}
  .cds-table tr{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px;background:rgba(255,255,255,.03)}
  .cds-table th[scope=row]{min-width:0;padding:0 0 9px;border:0;text-align:left;white-space:normal;font-size:14px;font-weight:800;color:var(--ink);line-height:1.4}
  .cds-table td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;border:0;border-top:1px dashed rgba(255,255,255,.09);text-align:right;white-space:normal;font-size:13px}
  .cds-table td::before{content:attr(data-th);flex:1 1 auto;text-align:left;font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.35}
  .cds-table .cds-us{background:transparent;padding-top:9px;margin-top:2px;border-top:1px solid rgba(61,192,108,.35)}
  .cds-table .cds-us::before{color:var(--luc);font-weight:800}
  .cds-table tbody tr{transform:none}
}
.cds-cmp-t{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.cds-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cds-table th,.cds-table td{padding:10px 10px;text-align:center;border-top:1px solid var(--line);white-space:nowrap}
.cds-table th[scope=row]{text-align:left;font-weight:600;color:var(--soft);white-space:normal;min-width:180px}
.cds-table thead th{border-top:0;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cds-table td{color:var(--muted)}
.cds-table .cds-us{color:var(--luc);font-weight:900;background:rgba(61,192,108,.06)}
.cds-table thead .cds-us{color:var(--ink)}
.cds-table tbody tr{opacity:0;transform:translateX(-6px);animation:cds-row .5s ease forwards;animation-delay:calc(.15s + var(--i,0)*.12s);animation-play-state:paused}
.cds-cmp.in .cds-table tbody tr{animation-play-state:running}
@keyframes cds-row{to{opacity:1;transform:none}}
/* băng khách hàng */
.cds-marq{margin-top:18px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cds-marq-in{display:flex;gap:8px;width:max-content;animation:cds-marq 38s linear infinite}
.cds-marq-in span{flex:0 0 auto;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--soft)}
@keyframes cds-marq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .cds-ring1,.cds-ring2,.cds-ring3,.cds-breathe,.cds-live,.cds-m-ocr .scan,.cds-m-erp i,.cds-m-iot i,.cds-m-home i,.cds-m-home i::after,.cds-m-sec .cone,.cds-m-kwh .needle,.cds-marq-in{animation:none}
  .cds-table tbody tr{opacity:1;transform:none;animation:none}
}


/* ================= MÔ PHỎNG TRANG CHỦ (tools/mophong_trangchu.py) =================
   "Đảo tối" cố ý trong vùng nền sáng: đóng vai màn hình thiết bị. Kiểu gốc của mọi
   phần tử là một khung hình có nghĩa — bật giảm chuyển động vẫn thấy cảnh đúng. */
.vsim{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:16/10;
 border:1px solid rgba(255,255,255,.08);background-color:#0B1226;
 background-image:linear-gradient(rgba(77,163,232,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(77,163,232,.08) 1px,transparent 1px);
 background-size:16px 16px}
.vsim svg{position:absolute;inset:0;width:100%;height:100%;display:block;font-family:inherit}
.vsim-rong{aspect-ratio:16/9}
.vsim-gon{aspect-ratio:320/136}
.vs .vsim{margin:14px 0 2px}
.scene .vsim{margin:0 0 4px}
@media(max-width:540px){.scenes{grid-template-columns:1fr}}
.vsim-san{position:relative;max-width:680px;margin:0 auto 22px}
.vsim-san>.vsim{display:none;box-shadow:0 22px 50px -26px rgba(12,20,36,.6)}
.vsim-san>.vsim.on{display:block;animation:vsim-lo .5s cubic-bezier(.22,1,.36,1)}
.qt5 .step{cursor:pointer}
.cds-layer .vsim{margin:0 0 14px}
@keyframes vsim-lo{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes vsim-nhay{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes vsim-den{0%,100%{opacity:.18}25%,70%{opacity:1}}
@keyframes vsim-truot{0%,100%{transform:translateX(0)}50%{transform:translateX(var(--dx,60px))}}
@keyframes vsim-hien{0%,50%{opacity:0;transform:scale(.6)}62%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes vsim-cuon{0%,12%,100%{transform:scaleY(1)}42%,72%{transform:scaleY(.14)}}
@keyframes vsim-cot{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes vsim-ngang{0%,100%{transform:scaleX(.45)}60%,85%{transform:scaleX(1)}}
@keyframes vsim-vong{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.8);opacity:0}}
@keyframes vsim-dash{to{stroke-dashoffset:-48}}
@keyframes vsim-bat{0%,6%{opacity:.28}18%,90%{opacity:1}100%{opacity:.28}}
@keyframes vsim-quay{to{transform:rotate(360deg)}}
@keyframes vsim-sao{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes vsim-sang{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes vsim-4phong{0%,20%,100%{transform:translate(0,0)}30%,42%{transform:translate(75px,0)}52%,64%{transform:translate(75px,62px)}74%,90%{transform:translate(0,62px)}}
@keyframes vsim-tat1{0%,18%,100%{opacity:1}22%,94%{opacity:.12}}
@keyframes vsim-tat2{0%,40%,100%{opacity:1}44%,94%{opacity:.12}}
@keyframes vsim-tat3{0%,62%,100%{opacity:1}66%,94%{opacity:.12}}
@keyframes vsim-tat4{0%,84%,100%{opacity:1}88%,94%{opacity:.12}}
@keyframes vsim-tat-cung{0%,34%,100%{opacity:1}40%,92%{opacity:.12}}
@keyframes vsim-bat-cung{0%,34%,100%{opacity:.15}40%,92%{opacity:1}}
@keyframes vsim-dong{0%,12%,100%{transform:scaleX(.3)}40%,88%{transform:scaleX(1)}}
@keyframes vsim-he{0%,12%,100%{transform:scaleX(1)}42%,88%{transform:scaleX(.55)}}
@keyframes vsim-moc{0%,10%,100%{transform:translateY(22px);opacity:.25}45%,88%{transform:translateY(0);opacity:1}}
@keyframes vsim-dong-cuon{0%,12%,100%{transform:scaleY(.14)}42%,88%{transform:scaleY(1)}}
@keyframes vsim-mua{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}100%{transform:translateY(24px);opacity:0}}
@keyframes vsim-khoa{0%,45%,100%{transform:translateY(-5px)}55%,92%{transform:translateY(0)}}
@keyframes vsim-ve{0%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
@keyframes vsim-ra{0%,25%,100%{opacity:1;transform:translateX(0)}45%,92%{opacity:0;transform:translateX(-40px)}}
@keyframes vsim-vao{0%,40%,100%{opacity:0;transform:translateX(40px)}60%,92%{opacity:1;transform:translateX(0)}}
@keyframes vsim-lac{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@media(prefers-reduced-motion:reduce){.vsim *,.vsim-san>.vsim.on{animation:none!important}}