:root{
  --color-primary:#0044aa;
  --color-primary-strong:#003a8f;
  --color-primary-deep:#00245c;
  --color-primary-soft:#e9f1fd;
  --color-accent:#33ccff;
  --color-accent-strong:#0f8ac7;
  --color-accent-soft:#e3f7ff;
  --color-on-accent:#032a44;
  --color-bg:#ffffff;
  --color-bg-alt:#f5f9fe;
  --color-card:#ffffff;
  --color-ink:#101c33;
  --color-ink-2:#42557a;
  --color-ink-3:#7588a2;
  --color-border:#e0e9f5;
  --color-success:#17794d;
  --color-success-soft:#e6f4ec;
  --radius-sm:12px;
  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(9,25,55,.06),0 2px 8px rgba(9,25,55,.05);
  --shadow:0 12px 32px rgba(9,25,55,.10);
  --shadow-lg:0 30px 70px rgba(3,22,60,.35);
  --space-section:clamp(52px,5.4vw,76px);
  --font:var(--font-bevn),"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--color-ink);background:var(--color-bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:16px;top:12px;transform:translateY(-72px);background:var(--color-ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:100;transition:transform .2s var(--ease)}
.skip:focus{transform:none}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Typography */
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(36px,4.4vw,48px);line-height:1.12;font-weight:700}
h2{font-size:clamp(30px,3.4vw,36px);line-height:1.2;font-weight:700}
h3{font-size:18px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
p{text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--color-accent);border-radius:2px}
.sec{padding:var(--space-section) 0}
.sec-alt{background:var(--color-bg-alt)}
.sec-head{max-width:760px;margin-bottom:clamp(28px,3.6vw,44px)}
.sec-head h2{margin-top:14px}
.sec-head p{margin-top:16px;font-size:18px;color:var(--color-ink-2)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow::after{content:"";width:24px;height:2px;background:var(--color-accent);border-radius:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;font-weight:700;font-size:16px;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);white-space:nowrap}
.btn .icon{width:18px;height:18px;stroke-width:2.25}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-strong);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,68,170,.28)}
.btn-accent{background:var(--color-accent);color:var(--color-on-accent)}
.btn-accent:hover{background:#4fd3ff;transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.btn-ghost{background:#fff;border-color:var(--color-border);color:var(--color-ink)}
.btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn-outline-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn:active{transform:translateY(0)}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--color-border)}
.header-in{display:flex;align-items:center;gap:24px;height:72px}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:10px 12px;border-radius:999px;font-size:16px;font-weight:500;color:var(--color-ink-2);transition:color .2s var(--ease),background-color .2s var(--ease)}
.nav a:hover{color:var(--color-primary);background:var(--color-primary-soft)}
.header-cta{display:flex;gap:10px}
.header-cta .btn{min-height:44px;padding:9px 20px}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--color-border);background:#fff;align-items:center;justify-content:center;cursor:pointer;margin-left:auto}
.mobile-nav{display:none;border-top:1px solid var(--color-border);background:#fff;padding:12px 24px 20px}
.mobile-nav a{display:flex;align-items:center;min-height:48px;font-weight:500;border-bottom:1px solid var(--color-border)}
.mobile-nav .btn{width:100%;margin-top:12px;border-bottom:1.5px solid transparent}
.mobile-nav .btn-ghost{border-color:var(--color-border)}
.mobile-nav.open{display:block}

/* Hero */
.hero{position:relative;color:#fff;background:#062a6b url(../assets/pattern.jpg) center top/cover no-repeat;overflow:hidden;overflow:clip}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(to bottom,rgba(6,42,107,0),rgba(4,28,77,.55));pointer-events:none}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,64px);align-items:center;padding-top:clamp(48px,6.5vw,88px);padding-bottom:clamp(56px,7vw,96px)}
.hero h1{margin-top:0}
.hero h1 span,.hero h1 em{display:block}
.hero h1 em{font-style:normal;color:#66d9ff}
.hero .lead{margin-top:22px;font-size:clamp(18px,1.5vw,20px);color:rgba(255,255,255,.88);max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:560px;gap:10px 22px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
.hero-trust li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:rgba(255,255,255,.92)}
.hero-trust .icon{width:18px;height:18px;color:#66d9ff;stroke-width:2.25}

.hero-visual{position:relative;max-width:620px;margin:0 auto;width:100%}
.art{width:100%;height:auto;overflow:visible}
.art text{font-family:var(--font)}
.float{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:#fff;color:var(--color-ink);box-shadow:0 16px 36px rgba(3,22,60,.32);font-size:14px;line-height:1.3}
.float b{display:block;font-weight:700}
.float small{font-size:12.5px;color:var(--color-success);font-weight:600}
.float .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--color-primary-soft);color:var(--color-primary)}
.float-a{left:-28px;bottom:6px}
.float-b{right:-8px;top:26px;animation-delay:-2.5s}
.float-b .ic{background:var(--color-accent-soft);color:var(--color-accent-strong)}
.float-b small{color:var(--color-ink-3)}
@keyframes bob{to{transform:translateY(-8px)}}
.dash{stroke-dasharray:5 7;animation:dash 1.1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-24}}

/* Cards / grids */
.grid{display:grid;gap:20px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius);padding:26px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#c6d6ec}
.card p{margin-top:8px;color:var(--color-ink-2);font-size:16px}
.ic-box{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--color-primary-soft);color:var(--color-primary);margin-bottom:18px}
.ic-box.gold{background:var(--color-accent-soft);color:var(--color-accent-strong)}

/* Thực trạng */
.hl{color:var(--color-primary);background:linear-gradient(transparent 68%,rgba(51,204,255,.38) 68%,rgba(51,204,255,.38) 92%,transparent 92%);padding:0 .08em;border-radius:2px}
.pains{counter-reset:pain}
.pain{position:relative;overflow:hidden;overflow:clip;background:#fff;border:1px solid var(--color-border);border-radius:24px;padding:28px 26px 30px;box-shadow:0 1px 2px rgba(9,30,60,.05),0 12px 28px rgba(12,35,70,.08);counter-increment:pain;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.pain::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pain::after{content:counter(pain,decimal-leading-zero);position:absolute;right:22px;top:20px;font-size:36px;font-weight:700;line-height:1;letter-spacing:-.03em;color:#e8eef8;font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.pain:hover{transform:translateY(-5px);border-color:#cfe0f5;box-shadow:0 2px 4px rgba(9,30,60,.05),0 22px 44px rgba(6,50,110,.14)}
.pain:hover::before{transform:scaleX(1)}
.pain:hover::after{color:#dfe9fa}
.pain-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--color-primary-soft);color:var(--color-primary);transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s cubic-bezier(.2,.7,.2,1)}
.pain-ic .icon{width:26px;height:26px}
.pain:hover .pain-ic{background:var(--color-primary);color:#fff;transform:rotate(-6deg) scale(1.06)}
.pain h3{margin-top:20px;font-size:18px}
.pain p{margin-top:8px;font-size:16px;line-height:1.65;color:var(--color-ink-2)}

/* Quy trình */
.tl{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;text-align:center}
.tl::before{content:"";position:absolute;top:35px;left:10%;right:1%;height:3px;border-radius:4px;background:linear-gradient(90deg,var(--color-accent),#66d9ff)}
.tl::after{content:"";position:absolute;top:29px;right:1%;width:12px;height:12px;border-top:3px solid var(--color-accent);border-right:3px solid var(--color-accent);transform:rotate(45deg);border-radius:2px}
.tl li{position:relative;padding:0 6px}
.tl-node{position:relative;z-index:1;width:72px;height:72px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,#0d47b8,#003a8f);color:#fff;border:3px solid var(--color-accent);box-shadow:0 0 0 7px rgba(51,204,255,.16),0 10px 22px rgba(0,58,143,.28);transition:transform .25s var(--ease)}
.tl-node .icon{width:28px;height:28px}
.tl li:hover .tl-node{transform:translateY(-3px)}
.tl h3{font-size:18px}
.tl p{margin-top:8px;font-size:14px;color:var(--color-ink-2)}

/* Feature rows */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.feature + .feature{margin-top:clamp(40px,5vw,64px)}
.feature.flip .feature-media{order:-1}
.feature h3{font-size:clamp(24px,2.4vw,30px);line-height:1.25;font-weight:700;margin-top:12px;letter-spacing:-.02em}
.feature > div > p{margin-top:14px;color:var(--color-ink-2);font-size:18px}
.checks{margin-top:22px;display:grid;gap:12px}
.checks li{display:flex;gap:12px;font-size:16px;color:var(--color-ink)}
.checks .icon{width:22px;height:22px;color:var(--color-success);margin-top:2px;stroke-width:2.25}
.feature-media{position:relative;padding:clamp(10px,1.6vw,20px);border-radius:var(--radius-lg);background:linear-gradient(140deg,#e3f7ff,#e9f1fd);border:1px solid #dbe7f8;overflow:hidden;overflow:clip}
.tag{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--color-primary-soft);color:var(--color-primary);font-size:14px;font-weight:700}

/* Status flow */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.chip{padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;border:1px solid var(--color-border);background:#fff;color:var(--color-ink-2)}
.chip.c2{background:var(--color-success-soft);border-color:#c5e5d3;color:var(--color-success)}
.chip.c3{background:#e8f0fc;border-color:#c9dbf7;color:#1d4fa8}
.chip.c4{background:var(--color-primary-soft);border-color:#cfe0f5;color:var(--color-primary)}
.flow .icon{width:16px;height:16px;color:var(--color-ink-3)}

/* Security (dark) */
.dark{background:linear-gradient(160deg,#0a3a8f,#041d55);color:#fff}
.dark .eyebrow{color:#66d9ff}
.dark .sec-head p{color:rgba(255,255,255,.82)}
.dark .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.dark .card:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.3);box-shadow:none}
.dark .card p{color:rgba(255,255,255,.8)}
.dark .ic-box{background:rgba(102,217,255,.16);color:#66d9ff}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.stat{position:relative;overflow:hidden;overflow:clip;padding:32px 28px 34px;border-radius:24px;background:#fff;border:1px solid var(--color-border);box-shadow:0 1px 2px rgba(9,30,60,.05),0 12px 28px rgba(12,35,70,.07);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s var(--ease)}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--color-accent),#66d9ff)}
.stat:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(9,30,60,.05),0 22px 44px rgba(6,50,110,.13)}
.stat-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,#0d47b8,#003a8f);color:#fff;box-shadow:0 0 0 6px var(--color-primary-soft);margin-bottom:22px}
.stat-ic .icon{width:26px;height:26px}
.stat b{display:block;font-size:clamp(24px,2.3vw,30px);line-height:1.15;font-weight:700;color:var(--color-primary);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat > span:last-child{display:block;margin-top:10px;color:var(--color-ink-2);font-size:16px}

/* CTA + form */
.cta{position:relative;background:#062a6b url(../assets/pattern.jpg) center top/cover no-repeat;color:#fff}
.cta-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,6vw,80px);align-items:center}
.cta h2{margin-top:14px}
.cta .eyebrow{color:#66d9ff}
.cta p.lead{margin-top:16px;font-size:18px;color:rgba(255,255,255,.86)}
.start{position:relative;margin-top:30px;max-width:460px}
.start li{position:relative;display:grid;grid-template-columns:46px 1fr;column-gap:18px;padding-bottom:24px}
.start li:last-child{padding-bottom:0}
.start li:not(:last-child)::before{content:"";position:absolute;left:22px;top:50px;bottom:4px;border-left:2px dashed rgba(102,217,255,.55)}
.start .n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,#8fe4ff,#1fb6f2);color:var(--color-on-accent);font-weight:700;font-size:18px;box-shadow:0 0 0 6px rgba(102,217,255,.16)}
.start b{display:block;padding-top:2px;font-size:18px;line-height:1.3;color:#fff}
.start div span{display:block;margin-top:3px;font-size:14px;color:rgba(255,255,255,.78)}
.free{display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:9px 18px 9px 12px;border-radius:999px;background:rgba(102,217,255,.14);border:1px solid rgba(102,217,255,.5);color:#99e8ff;font-size:14px;font-weight:700}
.free .icon{width:20px;height:20px;color:#66d9ff;stroke-width:2.25}
.form{background:#fff;color:var(--color-ink);border-radius:var(--radius-lg);padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-lg)}
.form h3{font-size:24px;font-weight:700}
.form > p{margin-top:6px;color:var(--color-ink-2);font-size:14px}
.field{margin-top:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field label i{font-style:normal;color:var(--color-primary)}
.field input{width:100%;height:50px;padding:0 14px;border-radius:12px;border:1.5px solid var(--color-border);background:#fff;font-size:16px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field input::placeholder{color:#8a97ad}
.field input:hover{border-color:#b9c8de}
.field input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-soft)}
.field .err{display:none;margin-top:6px;font-size:14px;color:#b3261e;font-weight:500}
.field.invalid input{border-color:#b3261e}
.field.invalid .err{display:block}
.form .btn{width:100%;margin-top:22px}
.form .fine{margin-top:12px;font-size:12px;color:var(--color-ink-3);text-align:center}
.form .ok{display:none;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--color-success-soft);color:var(--color-success);font-size:14px;font-weight:600}
.form .ok.show{display:block}

/* Footer */
.footer{position:relative;overflow:hidden;overflow:clip;background:#04122e;color:rgba(255,255,255,.72);padding:60px 0 24px;font-size:14px}
.footer::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent) 50%,var(--color-primary))}
.footer::after{content:"";position:absolute;right:-180px;bottom:-240px;width:560px;height:560px;border-radius:50%;border:1.5px dashed rgba(51,204,255,.22);box-shadow:0 0 0 50px rgba(255,255,255,.015),0 0 0 110px rgba(255,255,255,.012),inset 0 0 120px rgba(0,68,170,.2);pointer-events:none}
.footer .wrap{position:relative;z-index:1}
.footer-in{display:grid;grid-template-columns:1.5fr .9fr .9fr 1.4fr;gap:44px}
.footer-in > *{min-width:0}
.footer .logo{display:inline-block;background:#fff;border-radius:12px;padding:10px 14px}
.footer .logo img{height:58px;width:auto}
.footer-brand p{margin-top:18px;max-width:34ch;line-height:1.65}
.footer-brand .company{margin-top:18px;max-width:30ch;font-size:16px;font-weight:700;line-height:1.45;color:#fff}
.footer-brand .company + p{margin-top:8px}
.footer-brand .btn{margin-top:22px;min-height:44px;padding:9px 20px}
.footer h4{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#66d9ff;margin-bottom:16px}
.footer li + li{margin-top:2px}
.footer li a,.footer li > span,.footer li > button{display:flex;align-items:flex-start;gap:10px;min-height:34px;padding:6px 0;transition:color .2s var(--ease),transform .2s var(--ease)}
.footer li a,.footer li > button{width:fit-content;max-width:100%}
.footer li > button{background:none;border:0;cursor:pointer;text-align:left}
.footer li a:hover,.footer li > button:hover{color:#fff;transform:translateX(3px)}
.footer li .icon{width:17px;height:17px;margin-top:3px;color:#66d9ff}
.hotline{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.hotline:hover{background:rgba(255,255,255,.1);border-color:rgba(102,217,255,.5)}
.hotline .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--color-accent);color:var(--color-on-accent);flex:none}
.hotline small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hotline b{display:block;font-size:24px;line-height:1.2;color:#fff;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.footer-bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;font-size:14px;color:rgba(255,255,255,.55)}
.to-top{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8);transition:border-color .2s var(--ease),color .2s var(--ease)}
.to-top:hover{border-color:#66d9ff;color:#66d9ff}
.to-top .icon{width:16px;height:16px;stroke-width:2.25}

/* ================= Hoàn thiện: nhịp điệu, chuyển động ================= */
:root{--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.3,1.5,.5,1)}
::selection{background:#99e8ff;color:#032a44}
html{scrollbar-color:#a9bcd8 transparent}

/* Tiêu đề phần */
h2{letter-spacing:-.025em}
.sec-head{margin-bottom:clamp(30px,3.4vw,46px)}
.sec-head h2{margin-top:16px}
.sec-head p{font-size:clamp(16px,1.35vw,18px);line-height:1.65;max-width:62ch}
.sec-head.center p{margin-left:auto;margin-right:auto}
.eyebrow{padding:6px 14px 6px 12px;border-radius:999px;background:var(--color-primary-soft);font-size:12px;letter-spacing:.09em}
.eyebrow::before{width:6px;height:6px;border-radius:50%}
.sec-head.center .eyebrow::after{display:none}
.dark .eyebrow,.cta .eyebrow{background:rgba(102,217,255,.14);color:#66d9ff}
.hl{color:var(--color-primary);padding:0 .06em;border-radius:0;background:linear-gradient(rgba(51,204,255,.42),rgba(51,204,255,.42)) no-repeat 0 90%/0 .24em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .9s var(--ease) .35s}
.in .hl{background-size:100% .24em}
.dark .hl,.cta .hl{color:#66d9ff;background-image:linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18))}

/* Xuất hiện khi cuộn */
@keyframes up{from{opacity:0;transform:translateY(24px)}}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.35)}}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes stamp{0%{opacity:0;transform:scale(1.9) rotate(-18deg)}60%{opacity:1}}
@keyframes arc{from{stroke-dasharray:0 100}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.rv{opacity:0}
.rv.in{opacity:1;animation:up .75s var(--ease) var(--d,0ms) backwards}

/* Header */
.header{transition:box-shadow .3s var(--ease),background-color .3s var(--ease)}
.header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 6px 24px rgba(9,25,55,.08)}
.header-in{transition:height .3s var(--ease)}

.progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover{background:transparent}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:var(--color-primary);font-weight:600}

/* Nút */
.btn{position:relative;overflow:hidden;overflow:clip;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn .icon{transition:transform .3s var(--ease)}
.btn:hover .icon{transform:translateX(4px)}
.btn-accent{background:linear-gradient(180deg,#4fd3ff,#1fb6f2);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 18px rgba(0,0,0,.18)}
.btn-accent:hover{background:linear-gradient(180deg,#6fddff,#33ccff);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 26px rgba(0,0,0,.26)}
.btn-primary{background:linear-gradient(180deg,#0d47b8,#003a8f);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{background:linear-gradient(180deg,#0044aa,#003a8f);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 22px rgba(0,68,170,.3)}
.btn-accent::after,.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .7s var(--ease);pointer-events:none}
.btn-accent:hover::after,.btn-primary:hover::after{left:125%}

/* Hero */
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 65% at 73% 46%,rgba(51,204,255,.17),transparent 70%),linear-gradient(90deg,rgba(3,28,77,.42),transparent 58%);pointer-events:none}
.hero-in{padding-bottom:clamp(72px,8vw,116px)}
.hero h1{font-size:clamp(36px,4.2vw,48px);letter-spacing:-.028em}
.hero h1 > *{white-space:nowrap}
.hero h1 em{color:#66d9ff;background:linear-gradient(90deg,#99e8ff,#33ccff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-curve{position:absolute;left:0;right:0;bottom:-1px;z-index:1;width:100%;max-width:none;height:clamp(20px,3.4vw,48px)}
.hero h1 > *,.hero .lead,.hero-cta,.hero-trust{animation:up .85s var(--ease) backwards}
.hero h1 > :nth-child(2){animation-delay:.09s}
.hero h1 > :nth-child(3){animation-delay:.18s}
.hero .lead{animation-delay:.3s}
.hero-cta{animation-delay:.42s}
.hero-trust{animation-delay:.54s}
.hero-trust li{animation:up .6s var(--ease) backwards}
.hero-trust li:nth-child(1){animation-delay:.62s}.hero-trust li:nth-child(2){animation-delay:.68s}.hero-trust li:nth-child(3){animation-delay:.74s}
.hero-trust li:nth-child(4){animation-delay:.8s}.hero-trust li:nth-child(5){animation-delay:.86s}.hero-trust li:nth-child(6){animation-delay:.92s}
.hero-visual .art{animation:artIn 1.1s var(--ease) .2s backwards}
@keyframes artIn{from{opacity:0;transform:translateY(28px) scale(.95)}}
.ring{transform-origin:285px 232px;animation:spin 90s linear infinite}
.sig{stroke-dasharray:1;stroke-dashoffset:0}
.seal,.pop,.bar{transform-box:fill-box;transform-origin:center}
.bar{transform-origin:left center}
.hero .sig{animation:draw 1.3s ease-in-out 1.1s backwards}
.hero .seal{animation:stamp .6s var(--spring) 2.3s backwards}
.hero .idc{animation:slideIn .9s var(--ease) 1.4s backwards}
@keyframes slideIn{from{opacity:0;transform:translate(44px,26px)}}
.float{animation:fade .6s ease 1.9s backwards,bob 5s ease-in-out 2.5s infinite alternate}
.float-b{animation-delay:2.2s,0s}

/* Thẻ vấn đề */
.pain h3{letter-spacing:-.015em}

/* Quy trình */
.tl{counter-reset:step}
.tl li{counter-increment:step}
.tl-node{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tl-node::after{content:counter(step);position:absolute;right:-7px;top:-7px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--color-primary);font-size:12.5px;font-weight:700;line-height:1;border:2px solid var(--color-accent);box-shadow:var(--shadow-sm)}
.tl::before{transform:scaleX(0);transform-origin:left;transition:transform 1.5s var(--ease) .25s}
.tl.in::before{transform:scaleX(1)}
.tl::after{opacity:0;transition:opacity .3s var(--ease) 1.6s}
.tl.in::after{opacity:1}
.tl li.in .tl-node{animation:pop .6s var(--spring) var(--d,0ms) backwards}
.tl li:hover .tl-node{transform:translateY(-4px) scale(1.05);box-shadow:0 0 0 9px rgba(51,204,255,.22),0 16px 30px rgba(0,58,143,.34)}
.tl h3{transition:color .2s var(--ease)}
.tl li:hover h3{color:var(--color-primary)}

/* Tính năng */
.feature-media{box-shadow:0 1px 2px rgba(9,30,60,.04);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.feature:hover .feature-media{transform:translateY(-5px);box-shadow:0 26px 50px rgba(10,50,95,.13)}
.tag{letter-spacing:.01em}
.checks .icon{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--color-success);color:#fff;stroke-width:3}
.feature.in .pop{animation:pop .5s var(--spring) calc(.55s + var(--i,0)*.22s) backwards}
.feature.in .sig{animation:draw 1.2s ease-in-out .5s backwards}
.feature.in .seal{animation:stamp .6s var(--spring) 1.6s backwards}
.feature.in .arc{animation:arc 1.1s var(--ease) calc(.45s + var(--i,0)*.16s) backwards}
.feature.in .bar{animation:grow .9s var(--ease) calc(.55s + var(--i,0)*.13s) backwards}

/* Bảo mật */
.dark{position:relative;overflow:hidden;overflow:clip;background:radial-gradient(70% 80% at 88% 0%,rgba(51,204,255,.13),transparent 62%),linear-gradient(160deg,#0a3a8f,#03153f)}
.dark::before{content:"";position:absolute;right:-170px;top:-220px;width:580px;height:580px;border-radius:50%;border:1.5px dashed rgba(102,217,255,.22);box-shadow:0 0 0 46px rgba(255,255,255,.018),0 0 0 100px rgba(255,255,255,.014);pointer-events:none}
.dark .wrap{position:relative}
.dark .card{position:relative;overflow:hidden;overflow:clip;border-radius:24px;padding:28px 26px 30px;transition:transform .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease)}
.dark .card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,#66d9ff,transparent);opacity:0;transition:opacity .3s var(--ease)}
.dark .card:hover{transform:translateY(-5px);background:rgba(255,255,255,.12);border-color:rgba(102,217,255,.45)}
.dark .card:hover::before{opacity:1}
.dark .ic-box{width:52px;height:52px;border-radius:16px;margin-bottom:20px;transition:transform .3s var(--ease),background-color .3s var(--ease)}
.dark .ic-box .icon{width:26px;height:26px}
.dark .card:hover .ic-box{transform:rotate(-6deg) scale(1.06);background:rgba(102,217,255,.28)}
.dark .card h3{font-size:18px}
.dark .card p{line-height:1.65}

/* Số liệu */
.stat-ic{transition:transform .3s var(--ease)}
.stat:hover .stat-ic{transform:rotate(-6deg) scale(1.06)}

/* Đăng ký */
.cta{overflow:hidden;overflow:clip}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,28,77,.42),transparent 62%);pointer-events:none}
.cta .wrap{position:relative}
.start li{transition:transform .3s var(--ease)}
.start li:hover{transform:translateX(5px)}
.rv.in .start .n{animation:pop .55s var(--spring) backwards}
.rv.in .start li:nth-child(1) .n{animation-delay:.35s}.rv.in .start li:nth-child(2) .n{animation-delay:.55s}.rv.in .start li:nth-child(3) .n{animation-delay:.75s}
.form{position:relative;overflow:hidden;overflow:clip}
.form::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent))}
.field input{background:#f7faff}
.field input:focus{background:#fff}

/* Nút lên đầu trang */
.fab-top{position:fixed;right:20px;bottom:20px;z-index:40;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--color-primary);color:#fff;box-shadow:0 10px 24px rgba(6,42,107,.35);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .2s var(--ease)}
.fab-top.show{opacity:1;transform:none;pointer-events:auto}
.fab-top.show:hover{background:var(--color-primary-strong);transform:translateY(-3px)}
.fab-top .icon{width:20px;height:20px;stroke-width:2.25}


/* Hình minh họa nâng cấp */
.hero .phone{animation:slideL .9s var(--ease) .5s backwards}
@keyframes slideL{from{opacity:0;transform:translate(-36px,10px)}}
.hero .parties{animation:drop .7s var(--spring) 1.7s backwards}
@keyframes drop{from{opacity:0;transform:translateY(-16px) scale(.9)}}
.scan{animation:scan 2.6s ease-in-out 2.6s infinite alternate}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(92px)}}
.toast{animation:bob 4.5s ease-in-out infinite alternate}
.feature.in .toast{animation:drop .6s var(--spring) .9s backwards,bob 4.5s ease-in-out 1.6s infinite alternate}
.flowdot{animation:flow 1.8s linear infinite}
.flowdot.d2{animation-duration:1.4s;animation-delay:-.7s}
@keyframes flow{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(52px);opacity:0}}
.flowdot.d2{animation-name:flow2}
@keyframes flow2{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(34px);opacity:0}}
.sec-deco{position:absolute;right:-90px;top:18px;width:330px;height:auto;opacity:.5;pointer-events:none}
.sec-deco .orbit{transform-origin:200px 200px;animation:spin 60s linear infinite}
.sec-deco .ico{color:#66d9ff;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.dark::before{display:none}
.dark.in .sec-deco .sig,.dark .sec-deco .sig{animation:draw 1.4s ease-in-out .3s backwards}

/* Icon hai lớp: khung và hiệu ứng */
.pain-ic{position:relative;width:56px;height:56px;border-radius:16px;background:linear-gradient(145deg,#eef5ff,#dbe9fd);box-shadow:inset 0 0 0 1px rgba(0,68,170,.1),inset 0 1px 0 #fff,0 8px 18px rgba(0,68,170,.12)}
.pain-ic .icon{width:28px;height:28px}
.pain-ic::after{content:"";position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--color-accent);border:2px solid #fff;transform:scale(0);transition:transform .35s var(--spring)}
.pain:hover .pain-ic{background:linear-gradient(145deg,#0d47b8,#003a8f);box-shadow:0 12px 24px rgba(0,68,170,.3)}
.pain:hover .pain-ic::after{transform:scale(1)}
.pain:hover .a-drive .icon{animation:ic-drive .8s ease-in-out infinite alternate}
.pain:hover .a-spin .icon{animation:ic-spin 1.4s var(--ease) infinite}
.pain:hover .a-shake .icon{animation:ic-shake .6s ease-in-out infinite}
.pain:hover .a-pulse .icon{animation:ic-pulse 1.2s ease-in-out infinite}
@keyframes ic-drive{from{transform:translateX(-2px)}to{transform:translateX(3px)}}
@keyframes ic-spin{to{transform:rotate(360deg)}}
@keyframes ic-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
@keyframes ic-pulse{50%{transform:scale(1.14)}}
.ic-box,.stat-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.tl-node .icon,.stat-ic .icon{filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}

/* Bảng điều khiển động */
.dash-art .kpi{transform-box:fill-box;transform-origin:center}
.feature.in .dash-art .kpi{animation:pop .5s var(--spring) calc(.35s + var(--i,0)*.15s) backwards}
.live-ring{transform-box:fill-box;transform-origin:center;animation:live 1.8s ease-out infinite}
@keyframes live{from{transform:scale(1);opacity:.6}to{transform:scale(3.2);opacity:0}}
.spark{stroke-dasharray:1;animation:spark 6s var(--ease) infinite}
@keyframes spark{0%{stroke-dashoffset:1}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.0}}
.area{animation:area 6s var(--ease) infinite}
@keyframes area{0%,10%{opacity:0}40%,85%{opacity:1}100%{opacity:0}}
.end-ring{transform-box:fill-box;transform-origin:center;animation:live 1.8s ease-out infinite}
.seg-hi{animation:arc 1.1s var(--ease) .61s backwards,seg 7s ease-in-out 2s infinite}
@keyframes seg{0%,14%,34%,100%{stroke-width:20}20%,28%{stroke-width:27}}
.cursor{animation:cur 7s ease-in-out 2s infinite;opacity:0}
@keyframes cur{0%{opacity:0;transform:translate(250px,330px)}8%{opacity:1}18%,30%{opacity:1;transform:translate(150px,218px)}52%,66%{opacity:1;transform:translate(450px,214px)}82%{opacity:1;transform:translate(470px,318px)}92%,100%{opacity:0;transform:translate(470px,318px)}}
.ripple{transform-box:fill-box;transform-origin:center;animation:rip 7s ease-out 2s infinite;opacity:0}
@keyframes rip{0%,18%{opacity:0;transform:scale(.3)}20%{opacity:1;transform:scale(.4)}28%{opacity:0;transform:scale(1.6)}54%{opacity:0;transform:scale(.3)}56%{opacity:1;transform:scale(.4)}64%,100%{opacity:0;transform:scale(1.6)}}
.notif{animation:notif 7s var(--ease) 2.6s infinite;opacity:0}
@keyframes notif{0%{opacity:0;transform:translate(40px,0)}8%,60%{opacity:1;transform:none}70%,100%{opacity:0;transform:translate(0,-10px)}}

/* Responsive */
@media (max-width:1080px){
  .nav,.header-cta{display:none}
  .menu-btn{display:inline-flex}
  .hero-in{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr;gap:26px;text-align:left;max-width:560px;margin:0 auto}
  .tl::before{top:10px;bottom:10px;left:35px;right:auto;width:3px;height:auto;background:linear-gradient(180deg,var(--color-accent),#66d9ff)}
  .tl::after{display:none}
  .tl::before{transform:scaleY(0);transform-origin:top}
  .tl.in::before{transform:scaleY(1)}
  .tl li{display:grid;grid-template-columns:72px 1fr;column-gap:18px;align-items:center;padding:0}
  .tl-node{margin:0;grid-row:span 2}
  .tl h3{align-self:end}
  .tl p{margin-top:2px;align-self:start}
  .footer-in{grid-template-columns:1fr 1fr;gap:36px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-in{grid-template-columns:1fr}
  .sec-deco{display:none}
}
@media (max-width:820px){
  .feature{grid-template-columns:1fr}
  .feature.flip .feature-media{order:0}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:1fr}
}
@media (max-width:600px){
  .wrap{padding-left:16px;padding-right:16px}
  .mobile-nav{padding:12px 16px 20px}
  .brand img{height:34px}
  .header-in{height:64px}
  .g4{grid-template-columns:1fr}
  .hero-cta .btn{width:100%}
  .float{display:none}
  .card{padding:22px}
  .sec-head p{font-size:16px}
  .footer-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rv{opacity:1}
  .tl::before{transform:none}
  .tl::after{opacity:1}
  .hl{background-size:100% .24em}
}

/* ================= Bản PRO: chuyển động ================= */
/* Chữ hero hiện từng từ */
.hero h1 > span.split{animation:none;white-space:nowrap}
@media (max-width:600px){.hero h1 > span.split{white-space:normal}}
.hero h1 .wd{display:inline-block}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wd i{display:inline-block;font-style:normal;animation:wordUp 1s var(--ease) calc(.1s + var(--wi,0)*.07s) backwards}
@keyframes wordUp{from{transform:translateY(105%) rotate(4deg);opacity:0}}
.hero h1 em{animation:emIn 1.1s var(--ease) .45s backwards}
@keyframes emIn{from{opacity:0;filter:blur(10px);letter-spacing:.06em}}
/* Quầng sáng theo chuột trong hero */
.hero::before{background:radial-gradient(38% 48% at var(--hx,73%) var(--hy,46%),rgba(51,204,255,.24),transparent 70%),linear-gradient(90deg,rgba(3,28,77,.42),transparent 58%)}
.hero-visual{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);transform-style:preserve-3d}
.float-a{translate:calc(var(--px,0)*-18px) calc(var(--py,0)*-12px)}
.float-b{translate:calc(var(--px,0)*16px) calc(var(--py,0)*14px)}
/* Tiêu đề phần: lộ ra từ dưới */
.sec-head.rv.in h2{animation:clipUp 1s var(--ease) .1s backwards}
@keyframes clipUp{from{clip-path:inset(0 0 100% 0);transform:translateY(24px)}to{clip-path:inset(0 0 -20% 0)}}
/* Header ẩn khi cuộn xuống, hiện khi cuộn lên */
.header{transition:transform .4s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}

/* Nút hút theo chuột */
.mag{transition:translate .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
/* Thẻ nghiêng 3D + ánh sáng */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .45s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)}
.tilt.pain:hover,.tilt.stat:hover,.dark .tilt.card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),rgba(51,204,255,.16),transparent 60%)}
.dark .glare{background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.12),transparent 60%)}
.tilt:hover .glare{opacity:1}
/* Quy trình: đường nối chạy theo vị trí cuộn */
.tl.prog{background:linear-gradient(#d5e2f3,#d5e2f3) no-repeat 10% 35px/89% 3px}
.tl.prog::before{transform:scaleX(var(--tlp,0))!important;transition:none}
.tl.prog::after{opacity:var(--tla,0)!important;transition:opacity .3s var(--ease)}
.tl.prog li .tl-node{transition:transform .4s var(--spring),box-shadow .4s var(--ease),filter .5s var(--ease)}
.tl.prog li:not(.done) .tl-node{filter:grayscale(.85) opacity(.5)}
.tl.prog li.done .tl-node{animation:nodeOn .6s var(--spring)}
@keyframes nodeOn{40%{transform:scale(1.14)}}
.tl.prog li h3,.tl.prog li p{transition:opacity .5s var(--ease)}
.tl.prog li:not(.done) h3,.tl.prog li:not(.done) p{opacity:.45}
/* Đèn rọi theo chuột ở phần Bảo mật */
.dark::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(102,217,255,.13),transparent 60%);opacity:0;transition:opacity .4s var(--ease)}
.dark:hover::after{opacity:1}

/* Tính năng kể chuyện theo cuộn */
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px)}
.st-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .6s var(--ease),transform .6s var(--ease);transform:translateX(-10px)}
.st-step:first-child{min-height:62vh}
.st-step.on{opacity:1;transform:none}
.st-num{font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--color-accent-strong);margin-bottom:14px}
.st-num i{font-style:normal;color:var(--color-ink-3);font-weight:600}
.st-step .tag{align-self:flex-start}
.st-step h3{font-size:clamp(24px,2.6vw,30px);line-height:1.22;font-weight:700;margin-top:14px;letter-spacing:-.025em}
.st-step > p{margin-top:14px;color:var(--color-ink-2);font-size:18px}
.st-inline{display:none}
.st-stage{position:sticky;top:calc(50vh - 230px);height:460px;align-self:start}
.st-art{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transform:translateY(40px) scale(.96) rotateX(8deg);transform-origin:50% 100%;transition:opacity .7s var(--ease),transform .8s var(--ease);pointer-events:none}
.st-art.on{opacity:1;transform:none}
.st-art .feature-media{width:100%;box-shadow:0 30px 60px rgba(10,50,95,.14)}
.st-dots{position:absolute;right:-26px;top:50%;transform:translateY(-50%);display:grid;gap:8px;z-index:2}
.st-dots i{width:6px;height:6px;border-radius:999px;background:#c3d4ea;transition:height .4s var(--ease),background-color .4s var(--ease)}
.st-dots i.on{height:26px;background:var(--color-primary)}
.st-art.play .pop{animation:pop .5s var(--spring) calc(.55s + var(--i,0)*.22s) backwards}
.st-step.on .st-inline .pop{animation:pop .5s var(--spring) calc(.55s + var(--i,0)*.22s) backwards}
.st-art.play .sig{animation:draw 1.2s ease-in-out .5s backwards}
.st-step.on .st-inline .sig{animation:draw 1.2s ease-in-out .5s backwards}
.st-art.play .seal{animation:stamp .6s var(--spring) 1.6s backwards}
.st-step.on .st-inline .seal{animation:stamp .6s var(--spring) 1.6s backwards}
.st-art.play .arc{animation:arc 1.1s var(--ease) calc(.45s + var(--i,0)*.16s) backwards}
.st-step.on .st-inline .arc{animation:arc 1.1s var(--ease) calc(.45s + var(--i,0)*.16s) backwards}
.st-art.play .bar{animation:grow .9s var(--ease) calc(.55s + var(--i,0)*.13s) backwards}
.st-step.on .st-inline .bar{animation:grow .9s var(--ease) calc(.55s + var(--i,0)*.13s) backwards}
.st-art.play .toast{animation:drop .6s var(--spring) .9s backwards,bob 4.5s ease-in-out 1.6s infinite alternate}
.st-step.on .st-inline .toast{animation:drop .6s var(--spring) .9s backwards,bob 4.5s ease-in-out 1.6s infinite alternate}
.st-art.play .dash-art .kpi{animation:pop .5s var(--spring) calc(.35s + var(--i,0)*.15s) backwards}
.st-step.on .st-inline .dash-art .kpi{animation:pop .5s var(--spring) calc(.35s + var(--i,0)*.15s) backwards}
@media (max-width:900px){
  .story{grid-template-columns:1fr}
  .st-stage{display:none}
  .st-step,.st-step:first-child{min-height:0;opacity:1;transform:none;margin-bottom:56px}
  .st-inline{display:block;margin-top:24px}
}
@media (max-width:1080px){
  .tl.prog{background-position:35px 10px;background-size:3px calc(100% - 20px)}
  .tl.prog::before{transform:scaleY(var(--tlp,0))!important}
}
@media (prefers-reduced-motion:reduce){
  .tilt,.hero-visual{transform:none!important}
  .tl.prog::before{transform:none!important}
  .tl.prog li:not(.done) .tl-node,.tl.prog li:not(.done) h3,.tl.prog li:not(.done) p{filter:none;opacity:1}
  .st-step{opacity:1;transform:none}
}

/* ===== Chuyển động lặp trong hình ===== */
.hero .hl0{transform-box:fill-box;transform-origin:left center;animation:hl0 8s var(--ease) infinite}
.hero .hl1{transform-box:fill-box;transform-origin:left center;animation:hl1 8s var(--ease) infinite}
.hero .hl2{transform-box:fill-box;transform-origin:left center;animation:hl2 8s var(--ease) infinite}
.hero .hl3{transform-box:fill-box;transform-origin:left center;animation:hl3 8s var(--ease) infinite}
.hero .hl4{transform-box:fill-box;transform-origin:left center;animation:hl4 8s var(--ease) infinite}
.hero .sig{animation:hsig 8s var(--ease) infinite}
.hero .seal{transform-box:fill-box;transform-origin:center;animation:hseal 8s var(--ease) infinite}
.hero .shock.h{transform-box:fill-box;transform-origin:center;animation:hshock 8s var(--ease) infinite}
.serr{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite}
.hero .pf0{transform-box:fill-box;transform-origin:left center;animation:pf0 8s var(--ease) infinite}
.hero .pf1{transform-box:fill-box;transform-origin:left center;animation:pf1 8s var(--ease) infinite}
.hero .press.h{transform-box:fill-box;transform-origin:center;animation:hpress 8s var(--ease) infinite}
.ping{transform-box:fill-box;transform-origin:center;animation:pingA 2.4s ease-out infinite}.ping.g{animation-delay:1.2s}
.av{transform-box:fill-box;transform-origin:center bottom;animation:avB 3.2s var(--ease) infinite;animation-delay:calc(var(--i)*.18s)}
.twk > *{transform-box:fill-box;transform-origin:center;animation:twA 2.6s ease-in-out infinite}.twk > :nth-child(2){animation-delay:.7s}.twk > :nth-child(3){animation-delay:1.3s}.twk > :nth-child(4){animation-delay:1.9s}
.pkt{filter:drop-shadow(0 0 5px rgba(102,217,255,.9))}
.qrs{animation:qrA 3.6s ease-in-out 1s infinite}
.float .ic{position:relative}.float .ic::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid currentColor;animation:pingA 2.4s ease-out 2.4s infinite;opacity:0}
.ft0{transform-box:fill-box;transform-origin:left center;animation:ft0 7s var(--ease) infinite}
.ft1{transform-box:fill-box;transform-origin:left center;animation:ft1 7s var(--ease) infinite}
.press.f{transform-box:fill-box;transform-origin:center;animation:fpress 7s var(--ease) infinite}
.wave{transform-box:fill-box;transform-origin:center;animation:waveA 2.8s ease-out infinite}.wave.w2{animation-delay:1.4s}
.hubspin{transform-box:fill-box;transform-origin:center;animation:spin 10s linear infinite}
.bell{transform-box:fill-box;transform-origin:50% 10%;animation:bellA 2.4s ease-in-out infinite}
.row.r0{animation:row0 7s var(--ease) infinite}
.rck.c0{transform-box:fill-box;transform-origin:center;animation:rck0 7s var(--ease) infinite}
.row.r1{animation:row1 7s var(--ease) infinite}
.rck.c1{transform-box:fill-box;transform-origin:center;animation:rck1 7s var(--ease) infinite}
.row.r2{animation:row2 7s var(--ease) infinite}
.rck.c2{transform-box:fill-box;transform-origin:center;animation:rck2 7s var(--ease) infinite}
.stp.s0{transform-box:fill-box;transform-origin:center;animation:stp0 8s var(--ease) infinite}
.stp.s1{transform-box:fill-box;transform-origin:center;animation:stp1 8s var(--ease) infinite}
.stp.s2{transform-box:fill-box;transform-origin:center;animation:stp2 8s var(--ease) infinite}
.vline{animation:vline 8s var(--ease) infinite}
.sig2{animation:sig2 8s var(--ease) infinite}
.seal2{transform-box:fill-box;transform-origin:center;animation:seal2 8s var(--ease) infinite}
.shock.s{transform-box:fill-box;transform-origin:center;animation:shock2 8s var(--ease) infinite}
.lp.l0{transform-box:fill-box;transform-origin:center;animation:lp0 8s var(--ease) infinite}
.lp.l1{transform-box:fill-box;transform-origin:center;animation:lp1 8s var(--ease) infinite}
@keyframes hl0{0%,2%{transform:scaleX(0)}10%,88%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
@keyframes hl1{0%,4%{transform:scaleX(0)}12%,88%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
@keyframes hl2{0%,6%{transform:scaleX(0)}14%,88%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
@keyframes hl3{0%,8%{transform:scaleX(0)}16%,88%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
@keyframes hl4{0%,10%{transform:scaleX(0)}18%,88%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
@keyframes hsig{0%,16%{stroke-dashoffset:1;opacity:1}28%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hseal{0%,32%{opacity:0;transform:scale(1.9) rotate(-18deg)}35%{opacity:1;transform:scale(.94)}37%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(1)}}
@keyframes hshock{0%,33%{opacity:0;transform:scale(1)}34%{opacity:.9;transform:scale(1)}44%,100%{opacity:0;transform:scale(1.9)}}
@keyframes pf0{0%,3%{transform:scaleX(0)}11%,88%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
@keyframes pf1{0%,8%{transform:scaleX(0)}16%,88%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
@keyframes hpress{0%,13%{opacity:0;transform:scale(1)}14%{opacity:.9;transform:scale(1)}24%,100%{opacity:0;transform:scale(1.9)}}
@keyframes pingA{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
@keyframes avB{0%,24%,100%{transform:none}8%{transform:translateY(-6px)}16%{transform:translateY(1px)}}
@keyframes twA{50%{transform:scale(.4) rotate(45deg);opacity:.35}}
@keyframes qrA{0%{transform:translateX(0)}45%,100%{transform:translateX(80px)}}
@keyframes ft0{0%,4%{transform:scaleX(0)}12%,88%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
@keyframes ft1{0%,14%{transform:scaleX(0)}22%,88%{transform:scaleX(1)}95%,100%{transform:scaleX(0)}}
@keyframes fpress{0%,26%{opacity:0;transform:scale(1)}27%{opacity:.9;transform:scale(1)}37%,100%{opacity:0;transform:scale(1.9)}}
@keyframes waveA{from{transform:scale(1);opacity:.55}to{transform:scale(1.85);opacity:0}}
@keyframes bellA{0%,40%,100%{transform:rotate(0)}8%{transform:rotate(16deg)}16%{transform:rotate(-14deg)}24%{transform:rotate(10deg)}32%{transform:rotate(-6deg)}}
@keyframes row0{0%,38%{opacity:0;transform:translateX(-18px)}44%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateX(10px)}}
@keyframes rck0{0%,43%{opacity:0;transform:scale(.3)}47%{opacity:1;transform:scale(1.12)}49%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.7)}}
@keyframes row1{0%,50%{opacity:0;transform:translateX(-18px)}56%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateX(10px)}}
@keyframes rck1{0%,55%{opacity:0;transform:scale(.3)}59%{opacity:1;transform:scale(1.12)}61%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.7)}}
@keyframes row2{0%,62%{opacity:0;transform:translateX(-18px)}68%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:translateX(10px)}}
@keyframes rck2{0%,67%{opacity:0;transform:scale(.3)}71%{opacity:1;transform:scale(1.12)}73%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.7)}}
@keyframes stp0{0%,4%{opacity:0;transform:scale(.3)}8%{opacity:1;transform:scale(1.12)}10%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.7)}}
@keyframes stp1{0%,26%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.12)}32%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.7)}}
@keyframes stp2{0%,48%{opacity:0;transform:scale(.3)}52%{opacity:1;transform:scale(1.12)}54%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.7)}}
@keyframes vline{0%,6%{stroke-dashoffset:1;opacity:1}50%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes sig2{0%,30%{stroke-dashoffset:1;opacity:1}42%,88%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes seal2{0%,50%{opacity:0;transform:scale(1.9) rotate(-18deg)}53%{opacity:1;transform:scale(.94)}55%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(1)}}
@keyframes shock2{0%,51%{opacity:0;transform:scale(1)}52%{opacity:.9;transform:scale(1)}62%,100%{opacity:0;transform:scale(1.9)}}
@keyframes lp0{0%,58%{opacity:0;transform:scale(.3)}62%{opacity:1;transform:scale(1.12)}64%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.7)}}
@keyframes lp1{0%,64%{opacity:0;transform:scale(.3)}68%{opacity:1;transform:scale(1.12)}70%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.7)}}

/* Footer động */
.footer::before{background:linear-gradient(90deg,var(--color-primary),var(--color-accent),#99e8ff,var(--color-accent),var(--color-primary));background-size:200% 100%;animation:fline 5s linear infinite}
@keyframes fline{to{background-position:200% 0}}
.footer::after{animation:spin 90s linear infinite}
.footer > .wrap{position:relative;z-index:1}
.footer{background:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/24px 24px,#04122e}
.f-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;opacity:.35}
.f-blob.b1{width:380px;height:380px;left:-120px;top:-140px;background:#0044aa;animation:fb1 16s ease-in-out infinite alternate}
.f-blob.b2{width:320px;height:320px;right:12%;bottom:-180px;background:#33ccff;opacity:.18;animation:fb2 20s ease-in-out infinite alternate}
@keyframes fb1{to{transform:translate(160px,80px) scale(1.15)}}
@keyframes fb2{to{transform:translate(-140px,-60px) scale(.9)}}
.footer .logo{position:relative;overflow:hidden;overflow:clip;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.footer .logo::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-20deg);animation:lshine 4.5s ease-in-out 1s infinite}
@keyframes lshine{0%{left:-60%}35%,100%{left:130%}}
.footer .logo:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.footer h4{position:relative;padding-bottom:10px}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:2px;border-radius:2px;background:var(--color-accent);animation:h4bar 3s ease-in-out infinite}
@keyframes h4bar{50%{width:44px}}
.footer li a{position:relative}
.footer nav li a::before{content:"→";position:absolute;left:-16px;opacity:0;color:#66d9ff;transition:opacity .25s var(--ease),transform .25s var(--ease);transform:translateX(-6px)}
.footer nav li a:hover::before{opacity:1;transform:none}
.footer nav li a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:#66d9ff;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.footer nav li a:hover::after{transform:scaleX(1)}
.hotline{position:relative;overflow:hidden;overflow:clip}
.hotline::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(102,217,255,.16) 50%,transparent 70%);transform:translateX(-100%);animation:hsweep 5s ease-in-out 2s infinite}
@keyframes hsweep{0%{transform:translateX(-100%)}30%,100%{transform:translateX(100%)}}
.hotline .ic{position:relative}
.hotline .ic::before,.hotline .ic::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--color-accent);animation:pingA 2.2s ease-out infinite;opacity:0}
.hotline .ic::after{animation-delay:1.1s}
.hotline .ic .icon{animation:ring 3s ease-in-out infinite}
@keyframes ring{0%,30%,100%{transform:rotate(0)}5%,15%,25%{transform:rotate(-16deg)}10%,20%{transform:rotate(16deg)}}
.footer-brand .btn{animation:glowB 2.8s ease-in-out infinite}
@keyframes glowB{50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 6px rgba(51,204,255,.18),0 10px 26px rgba(51,204,255,.35)}}
.to-top .icon{transition:transform .3s var(--ease)}
.to-top:hover .icon{animation:upB .8s ease-in-out infinite}
@keyframes upB{50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.pkt{display:none}}

/* ===== Phần chuyển từ bản base (.bx) ===== */
.bx{--r950:#020d24;--r900:#041c4d;--r800:#062a6b;--r700:#0a3a8f;--r600:#0044aa;--r500:#1a6ad4;--r100:#e9f1fd;--r50:#f4f8fe;--g700:#0e6fa5;--g600:#0f8ac7;--g500:#33ccff;--g400:#66d9ff;--g300:#99e8ff;--g100:#e3f7ff;--g50:#f2fbff;--ink:#101c33;--ink2:#42557a;--ink3:#7588a2;--line:#e4ecf7;--cream:#f7faff;--sh:0 1px 2px rgba(4,28,77,.05),0 14px 34px rgba(4,28,77,.08);--sh-lg:0 30px 70px rgba(2,13,36,.22)}
.bx .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:12px;font-weight:700;font-size:16px;border:1.5px solid transparent;white-space:nowrap;overflow:hidden;overflow:clip;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.bx .btn .icon{width:18px;height:18px;stroke-width:2.2;transition:transform .3s var(--ease)}
.bx .btn:hover .icon{transform:translateX(3px)}
.bx .btn-red{background:linear-gradient(180deg,var(--r600),var(--r700));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px rgba(10,58,143,.25)}
.bx .btn-red:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 28px rgba(10,58,143,.35)}
.bx .btn-red::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.bx .btn-red:hover::after{transform:translateX(120%)}
.bx .link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--r600)}
.bx .link .icon{width:16px;height:16px;transition:transform .3s var(--ease)}
.bx .link:hover .icon{transform:translateX(4px)}
.bx .mock{position:relative;border-radius:16px;background:#fff;color:var(--ink);text-align:left;box-shadow:var(--sh-lg);overflow:hidden;overflow:clip;border:1px solid rgba(255,255,255,.4)}
.bx .mtop{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#eef4fb;border-bottom:1px solid var(--line)}
.bx .mtop i{width:10px;height:10px;border-radius:50%;background:#c9daf0}
.bx .mtop i:nth-child(1){background:var(--r500)}
.bx .mtop i:nth-child(2){background:var(--g500)}
.bx .mtop span{margin-left:12px;padding:3px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11.5px;color:var(--ink3)}
.bx .mbody{display:grid;grid-template-columns:200px 1fr;min-height:430px}
.bx .mside{background:linear-gradient(180deg,var(--r800),var(--r900));color:rgba(230,242,255,.8);padding:16px 12px;font-size:13px}
.bx .mside .lg{display:flex;align-items:center;gap:8px;padding:4px 8px 16px;color:#fff;font-weight:700;font-size:14px}
.bx .mside .lg i{width:26px;height:26px;border-radius:8px;background:var(--g500);display:grid;place-items:center;color:var(--r900);font-style:normal;font-size:12px}
.bx .mside a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;margin-bottom:2px}
.bx .mside a .icon{width:16px;height:16px}
.bx .mside a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.bx .mside a.on .icon{color:var(--g400)}
.bx .mside .cnt{margin-left:auto;padding:1px 8px;border-radius:999px;background:var(--g500);color:var(--r900);font-size:11px;font-weight:700}
.bx .mmain{padding:18px 20px;background:#fbfdff}
.bx .mh{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bx .mh b{font-size:16px}
.bx .mh small{display:block;font-size:12px;color:var(--ink3);font-weight:500}
.bx .mbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;background:var(--r600);color:#fff;font-size:12px;font-weight:700}
.bx .mbtn .icon{width:14px;height:14px}
.bx .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.bx .kpi{padding:12px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.bx .kpi small{display:block;font-size:11.5px;color:var(--ink3)}
.bx .kpi b{display:block;margin-top:2px;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.bx .kpi .tr{font-size:11px;font-weight:700;color:var(--g700)}
.bx .kpi.dark{background:linear-gradient(150deg,var(--r600),var(--r800));border-color:transparent;color:#fff}
.bx .kpi.dark small{color:rgba(230,242,255,.8)}
.bx .kpi.dark .tr{color:var(--g300)}
.bx .mgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;margin-top:12px}
.bx .card-m{padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.bx .card-m > b{display:block;font-size:13px;margin-bottom:8px}
.bx table.tb{width:100%;border-collapse:collapse;font-size:12px}
.bx .tb th{font-weight:600;color:var(--ink3);text-align:left;padding:6px 6px;border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.bx .tb td{padding:8px 6px;border-bottom:1px solid #e9f0f9;white-space:nowrap}
.bx .tb tr:last-child td{border-bottom:0}
.bx .tb td:first-child{font-weight:600}
.bx .tb tr.new td{animation:bx-rowIn .8s var(--ease) both}
@keyframes bx-rowIn{from{background:var(--g100)}to{background:transparent}}
.bx .st{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.bx .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.bx .st.s0{background:#edf2fa;color:#7588a2}
.bx .st.s1{background:var(--g100);color:var(--g700)}
.bx .st.s2{background:#fff;color:var(--g600);box-shadow:inset 0 0 0 1px var(--g400)}
.bx .st.s3{background:var(--r100);color:var(--r600)}
.bx .st.s4{background:var(--r600);color:#fff}
.bx .bars{display:flex;align-items:flex-end;gap:7px;height:116px;padding-top:6px}
.bx .bars span{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--g400),var(--g600));transform-origin:bottom;animation:bx-barUp 1.2s var(--ease) both}
.bx .bars span:nth-child(even){background:linear-gradient(180deg,var(--r500),var(--r700))}
.bx .bars span:last-child{box-shadow:0 0 0 3px var(--g100)}
@keyframes bx-barUp{from{transform:scaleY(.05)}}
.bx .lbls{display:flex;gap:7px;margin-top:6px;font-size:10px;color:var(--ink3)}
.bx .lbls span{flex:1;text-align:center}
.bx .legend{display:grid;gap:6px;margin-top:10px;font-size:11.5px}
.bx .legend div{display:flex;align-items:center;gap:8px}
.bx .legend i{width:8px;height:8px;border-radius:2px;background:var(--r600)}
.bx .legend b{margin-left:auto;font-weight:700}
.bx .tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:28px}
.bx .tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:14px;color:var(--ink2);overflow:hidden;overflow:clip;transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease)}
.bx .tab .icon{width:18px;height:18px;color:var(--g600)}
.bx .tab:hover{color:var(--r600);border-color:#cfe0f5}
.bx .tab[aria-selected="true"]{background:linear-gradient(180deg,var(--r600),var(--r700));color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(10,58,143,.25)}
.bx .tab[aria-selected="true"] .icon{color:var(--g300)}
.bx .tab .prog{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--g400);transform:scaleX(0);transform-origin:left}
.bx .tab[aria-selected="true"] .prog{animation:bx-prog var(--dur,7s) linear forwards}
.bx .paused .tab .prog{animation-play-state:paused}
@keyframes bx-prog{to{transform:scaleX(1)}}
.bx .panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(24px,3vw,40px);border-radius:32px;background:linear-gradient(135deg,var(--g50),#fff 45%,var(--r50));border:1px solid var(--line);box-shadow:var(--sh)}
.bx .panel[hidden]{display:none}
.bx .panel.show .ptxt > *{animation:bx-fadeUp .6s var(--ease) both}
.bx .panel.show .ptxt > :nth-child(2){animation-delay:.06s}
.bx .panel.show .ptxt > :nth-child(3){animation-delay:.12s}
.bx .panel.show .ptxt > :nth-child(4){animation-delay:.18s}
.bx .panel.show .ptxt > :nth-child(5){animation-delay:.24s}
.bx .panel.show .pvis{animation:bx-visIn .8s var(--ease) both}
@keyframes bx-fadeUp{from{opacity:0;transform:translateY(14px)}}
@keyframes bx-visIn{from{opacity:0;transform:translateY(24px) scale(.97)}}
.bx .ptxt .num{font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--g600)}
.bx .ptxt h3{margin-top:10px;font-size:clamp(24px,2.4vw,30px);line-height:1.22;font-weight:700}
.bx .ptxt > p{margin-top:12px;color:var(--ink2);font-size:16px}
.bx .ticks{margin-top:18px;display:grid;gap:10px}
.bx .ticks li{display:flex;gap:12px;font-size:16px}
.bx .ticks .icon{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--r600);color:#fff;stroke-width:3;margin-top:1px}
.bx .pact{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.bx .pvis{position:relative}
.bx .pvis .mock{box-shadow:0 24px 54px rgba(4,28,77,.16)}
.bx .pvis .mbody{grid-template-columns:1fr;min-height:0}
.bx .pvis .mmain{padding:16px 18px}
.bx .req{display:grid;gap:10px;margin-top:12px}
.bx .rq{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:12px;background:#fff;border:1px solid var(--line);animation:bx-fadeUp .6s var(--ease) both}
.bx .rq:nth-child(2){animation-delay:.25s}
.bx .rq:nth-child(3){animation-delay:.5s}
.bx .rq .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--r100);color:var(--r600)}
.bx .rq.g .ic{background:var(--g100);color:var(--g700)}
.bx .rq b{display:block;font-size:13.5px}
.bx .rq small{display:block;font-size:12px;color:var(--ink3)}
.bx .rq .mbtn{padding:6px 10px}
.bx .rq.hot{border-color:var(--g400);box-shadow:0 0 0 3px var(--g100)}
.bx .tag-src{display:inline-block;margin-left:6px;padding:0 7px;border-radius:6px;background:var(--r600);color:#fff;font-size:10.5px;font-weight:700;vertical-align:1px}
.bx .tag-src.g{background:var(--g500);color:var(--r900)}
.bx .idbox{display:grid;grid-template-columns:150px 1fr;gap:16px;margin-top:12px}
.bx .idcard{position:relative;border-radius:14px;padding:12px;background:linear-gradient(150deg,#fff,var(--g50));border:1px solid var(--line);overflow:hidden;overflow:clip}
.bx .idcard .face{width:64px;height:76px;border-radius:10px;background:var(--r100);display:grid;place-items:center;color:var(--r600)}
.bx .idcard .face .icon{width:38px;height:38px}
.bx .idcard .chipm{position:absolute;right:12px;top:14px;width:30px;height:24px;border-radius:5px;background:linear-gradient(135deg,var(--g300),var(--g600))}
.bx .idcard b{display:block;margin-top:10px;font-size:12.5px}
.bx .idcard small{display:block;font-size:11px;color:var(--ink3)}
.bx .idcard::after{content:"";position:absolute;left:0;right:0;height:26px;top:0;background:linear-gradient(transparent,rgba(102,217,255,.55),transparent);animation:bx-scanY 2.4s ease-in-out infinite alternate}
@keyframes bx-scanY{to{transform:translateY(150px)}}
.bx .checks{display:grid;gap:9px}
.bx .ck{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;animation:bx-fadeUp .5s var(--ease) both}
.bx .ck:nth-child(2){animation-delay:.35s}
.bx .ck:nth-child(3){animation-delay:.7s}
.bx .ck:nth-child(4){animation-delay:1.05s}
.bx .ck small{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--r600)}
.bx .ck .dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--r600);color:#fff;flex:none}
.bx .ck .dot .icon{width:13px;height:13px;stroke-width:3}
.bx .doc{display:grid;grid-template-columns:1fr 170px;gap:12px;margin-top:12px}
.bx .paper{padding:16px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:12.5px;line-height:1.7}
.bx .paper .tt{text-align:center;font-weight:700;font-size:13px;color:var(--r700);letter-spacing:.02em}
.bx .paper .sub{text-align:center;font-size:11px;color:var(--ink3);margin-bottom:8px}
.bx .fill{padding:0 4px;border-radius:4px;background:var(--g100);box-shadow:inset 0 -2px 0 var(--g400);font-weight:600;animation:bx-fillIn .9s var(--ease) both}
.bx .fill.d1{animation-delay:.4s}
.bx .fill.d2{animation-delay:.8s}
.bx .fill.d3{animation-delay:1.2s}
@keyframes bx-fillIn{from{background:transparent;box-shadow:none;color:transparent}}
.bx .flow{padding:12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:12px}
.bx .flow b{display:block;font-size:12.5px;margin-bottom:8px}
.bx .fs{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px dashed var(--line)}
.bx .fs i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;background:var(--g100);color:var(--g700);flex:none}
.bx .fs:nth-of-type(2) i{background:var(--r100);color:var(--r600)}
.bx .fs:nth-of-type(3) i{background:var(--r600);color:#fff}
.bx .sign{display:grid;gap:10px;margin-top:12px}
.bx .sg{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.bx .sg .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--r600);color:#fff;font-weight:700;font-size:13px}
.bx .sg b{display:block;font-size:13.5px}
.bx .sg small{display:block;font-size:12px;color:var(--ink3)}
.bx .sg.wait .n{background:#fff;color:var(--g600);box-shadow:inset 0 0 0 2px var(--g400);animation:bx-pulseR 1.6s ease-in-out infinite}
@keyframes bx-pulseR{50%{box-shadow:inset 0 0 0 2px var(--g400),0 0 0 6px rgba(102,217,255,.25)}}
.bx .seal{position:absolute;right:18px;bottom:16px;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,var(--g300),var(--g600));color:#fff;box-shadow:0 0 0 6px rgba(51,204,255,.2),0 12px 24px rgba(15,138,199,.35);animation:bx-stamp 4s var(--spring) infinite}
.bx .seal::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:3px dashed var(--g500);animation:bx-spin 14s linear infinite}
.bx .seal .icon{width:36px;height:36px;stroke-width:3}
@keyframes bx-stamp{0%,20%{transform:scale(1.8) rotate(-20deg);opacity:0}28%{transform:scale(.92);opacity:1}32%,90%{transform:scale(1);opacity:1}100%{opacity:0}}
@keyframes bx-spin{to{transform:rotate(360deg)}}
.bx .pub{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.bx .file{position:relative;padding:14px;border-radius:12px;background:#fff;border:1px solid var(--line)}
.bx .file .fh{display:flex;align-items:center;gap:10px}
.bx .file .fi{width:38px;height:46px;border-radius:7px;background:var(--r600);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700}
.bx .file b{font-size:13px}
.bx .file small{display:block;font-size:11.5px;color:var(--ink3)}
.bx .qr{margin-top:12px;width:84px;height:84px;padding:6px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.bx .qr i{background:var(--r900);border-radius:2px}
.bx .qr i.o{background:transparent}
.bx .sent{display:grid;gap:8px}
.bx .sent div{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:600;animation:bx-fadeUp .5s var(--ease) both}
.bx .sent div:nth-child(2){animation-delay:.3s}
.bx .sent div:nth-child(3){animation-delay:.6s}
.bx .sent div:nth-child(4){animation-delay:.9s}
.bx .sent .icon{width:18px;height:18px;color:var(--r600)}
.bx .sent div:nth-child(even) .icon{color:var(--g600)}
.bx .logx{display:grid;gap:8px;font-size:12px}
.bx .logx div{display:flex;gap:10px;align-items:flex-start}
.bx .logx time{flex:none;width:40px;color:var(--ink3);font-variant-numeric:tabular-nums}
.bx .logx span b{font-weight:700}
.bx .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;counter-reset:s}
.bx .sbtn{position:relative;padding:18px 14px 20px;border-radius:16px;border:1px solid var(--line);background:#fff;text-align:left;counter-increment:s;overflow:hidden;overflow:clip;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.bx .sbtn::before{content:counter(s,decimal-leading-zero);display:block;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.03em;color:#d4e0f2;transition:color .3s var(--ease)}
.bx .sbtn b{display:block;margin-top:10px;font-size:16px}
.bx .sbtn small{display:block;margin-top:4px;font-size:12px;color:var(--ink3);line-height:1.5}
.bx .sbtn .prog{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--r600),var(--g500));transform:scaleX(0);transform-origin:left}
.bx .sbtn[aria-selected="true"]{border-color:var(--r600);box-shadow:0 12px 26px rgba(10,58,143,.14);transform:translateY(-3px)}
.bx .sbtn[aria-selected="true"]::before{color:var(--r600)}
.bx .sbtn[aria-selected="true"] .prog{animation:bx-prog var(--dur,5s) linear forwards}
.bx .sbtn.done::before{color:var(--g500)}
.bx .paused .sbtn .prog{animation-play-state:paused}
.bx .case{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;margin-top:22px;align-items:stretch}
.bx .hs{padding:22px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh)}
.bx .hs-top{display:flex;align-items:center;gap:14px}
.bx .hs-top .fi{width:46px;height:56px;border-radius:9px;background:linear-gradient(160deg,var(--r600),var(--r800));color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}
.bx .hs-top b{display:block;font-size:16px}
.bx .hs-top small{color:var(--ink3);font-size:13px}
.bx .hs-top .st{margin-left:auto;font-size:12px;padding:4px 12px;transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease)}
.bx .track5{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-top:22px}
.bx .track5::before{content:"";position:absolute;left:10%;right:10%;top:15px;height:3px;border-radius:3px;background:#dde8f7}
.bx .track5 .fillbar{position:absolute;left:10%;top:15px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--r600),var(--g500));width:80%;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.bx .track5 div{position:relative;text-align:center;font-size:11.5px;color:var(--ink3);font-weight:600}
.bx .track5 div i{display:grid;place-items:center;width:32px;height:32px;margin:0 auto 6px;border-radius:50%;background:#fff;border:2px solid #d4e0f2;color:#a9bcd8;font-style:normal;transition:all .4s var(--ease)}
.bx .track5 div i .icon{width:15px;height:15px;stroke-width:2.6}
.bx .track5 div.pass i{background:var(--r600);border-color:var(--r600);color:#fff}
.bx .track5 div.cur i{background:var(--g500);border-color:var(--g500);color:var(--r900);transform:scale(1.15);box-shadow:0 0 0 6px rgba(51,204,255,.22)}
.bx .track5 div.pass,.bx .track5 div.cur{color:var(--ink)}
.bx .hs-info{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.bx .hs-info div{padding:10px 12px;border-radius:12px;background:var(--cream);font-size:12px;color:var(--ink3)}
.bx .hs-info b{display:block;font-size:13.5px;color:var(--ink)}
.bx .feed{padding:22px;border-radius:22px;background:linear-gradient(160deg,var(--r700),var(--r900));color:#fff;box-shadow:var(--sh)}
.bx .feed > b{display:flex;align-items:center;gap:8px;font-size:15px}
.bx .feed > b .live{width:8px;height:8px;border-radius:50%;background:var(--g400);box-shadow:0 0 0 0 rgba(102,217,255,.6);animation:bx-live 1.6s ease-out infinite}
@keyframes bx-live{to{box-shadow:0 0 0 10px rgba(102,217,255,0)}}
.bx .feed ul{margin-top:14px;display:grid;gap:10px}
.bx .feed li{display:flex;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:13px;animation:bx-fadeUp .5s var(--ease) both}
.bx .feed li time{flex:none;color:var(--g300);font-weight:700;font-variant-numeric:tabular-nums}
.bx .feed li span{color:rgba(230,242,255,.9)}
.bx .hub{position:relative;max-width:980px;margin:0 auto;aspect-ratio:980/460}
.bx .hub svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bx .hub .ln{fill:none;stroke:#c8d8f0;stroke-width:2;stroke-dasharray:6 8}
.bx .hub .ln.on{stroke:url(#gl);stroke-dasharray:6 8;animation:bx-dashA 1.2s linear infinite}
@keyframes bx-dashA{to{stroke-dashoffset:-28}}
.bx .node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);width:250px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.bx .node:hover{transform:translate(-50%,-54%);box-shadow:var(--sh-lg)}
.bx .node .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--r100);color:var(--r600);flex:none}
.bx .node:nth-of-type(even) .ic{background:var(--g100);color:var(--g700)}
.bx .node b{display:block;font-size:14.5px;line-height:1.3}
.bx .node small{display:block;font-size:12px;color:var(--ink3);line-height:1.4}
.bx .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,var(--r500),var(--r800));color:#fff;box-shadow:0 0 0 12px rgba(0,68,170,.08),0 0 0 26px rgba(0,68,170,.05),0 24px 50px rgba(6,42,107,.35)}
.bx .core::before,.bx .core::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(51,204,255,.5);animation:bx-ripple 3s ease-out infinite}
.bx .core::after{animation-delay:1.5s}
@keyframes bx-ripple{from{transform:scale(.9);opacity:.8}to{transform:scale(1.35);opacity:0}}
.bx .core img{width:120px;height:auto;padding:8px 10px;border-radius:10px;background:#fff}
.bx .core small{display:block;margin-top:8px;font-size:12px;color:var(--g300);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bx .checks{margin-top:0;gap:9px}.bx .flow{display:block;margin-top:0}.bx .ck .dot .icon{width:13px;height:13px;padding:0;margin:0;background:none;color:#fff;stroke-width:3}.bx .ticks{display:grid}.bx .ticks li{align-items:flex-start}.bx .tabs.rv,.bx .panels.rv,.bx .steps.rv,.bx .case.rv,.bx .hub.rv{will-change:opacity}
@media (max-width:1100px){
  .bx .mbody{grid-template-columns:1fr}.bx .mside{display:none}
  .bx .panel,.bx .case{grid-template-columns:1fr}
  .bx .steps{grid-template-columns:repeat(3,1fr)}
  .bx .hub{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .bx .hub svg.lines{display:none}
  .bx .node,.bx .core{position:static;transform:none;width:auto}
  .bx .node:hover{transform:translateY(-4px)}
  .bx .core{grid-column:1/-1;width:180px;height:180px;margin:20px auto}
  .bx .hub{overflow-x:clip}
}
@media (max-width:720px){
  .bx .kpis{grid-template-columns:repeat(2,1fr)}
  .bx .mgrid,.bx .doc,.bx .pub,.bx .idbox{grid-template-columns:1fr}
  .bx .steps{grid-template-columns:1fr 1fr}
  .bx .hub{grid-template-columns:1fr}
  .bx .hs-info{grid-template-columns:1fr}
  .bx .tabs{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
  .bx .tab{flex:none}
  .bx .tb th:nth-child(3),.bx .tb td:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){.bx *,.bx *::before,.bx *::after{animation:none!important}}
@media (min-width:901px){.st-only{padding-top:32px}}

/* ===== Sơ đồ liên thông pro max ===== */
.eco{position:relative;max-width:1100px;margin:0 auto;aspect-ratio:1100/560}
.eco-bg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eco .orb{transform-box:view-box;transform-origin:550px 280px}
.eco .o1{animation:ecoSpin 40s linear infinite}
.eco .o2{animation:ecoSpin 70s linear infinite reverse}
@keyframes ecoSpin{to{transform:rotate(360deg)}}
.eco .bm{fill:none;stroke:#d6e3f5;stroke-width:2;stroke-linecap:round}
.eco .e-fl{fill:none;stroke:url(#eBeam);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 14;animation:ecoFlow 1.1s linear infinite;opacity:.9;transition:stroke-width .3s var(--ease),opacity .3s var(--ease)}
.eco .e-fl[data-k="d"]{stroke:url(#eBeamR)}
.eco .e-fl[data-k="a"]{stroke:#1fb6f2}
.eco .e-fl[data-k="c"]{stroke-dasharray:4 8 14 8}
@keyframes ecoFlow{to{stroke-dashoffset:-48}}
.eco.dim .e-fl{opacity:.18}
.eco.dim .e-fl.hi{opacity:1;stroke-width:5}
.eco:not(.in) .e-fl,.eco:not(.in) .pkts{opacity:0}
.eco.in .e-fl{animation:ecoFlow 1.1s linear infinite,ecoDraw 1.2s var(--ease) both}
@keyframes ecoDraw{from{stroke-dashoffset:600;opacity:0}}
.eco .pkts{transition:opacity .6s var(--ease) .8s}

.enode{position:absolute;z-index:2;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;width:290px;padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid #e4ecf7;box-shadow:0 1px 2px rgba(4,28,77,.05),0 16px 36px rgba(4,28,77,.09);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);cursor:default}
.enode::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#33ccff,transparent 40%,transparent 60%,#0044aa);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s var(--ease)}
.enode:hover,.enode.hi{transform:translate(-50%,-56%);box-shadow:0 26px 54px rgba(6,58,130,.18);border-color:transparent}
.enode:hover::before,.enode.hi::before{opacity:1}
.eic{position:relative;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,#eef5ff,#dbe9fd);color:#0044aa;box-shadow:inset 0 0 0 1px rgba(0,68,170,.1)}
.eic.g{background:linear-gradient(145deg,#eefaff,#c9ecff);color:#0e6fa5;box-shadow:inset 0 0 0 1px rgba(15,138,199,.18)}
.eic .icon{width:24px;height:24px}
.eic::after{content:"";position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:50%;background:#2fa36b;border:2px solid #fff;box-shadow:0 0 0 0 rgba(47,163,107,.5);animation:ecoLive 2s ease-out infinite}
@keyframes ecoLive{to{box-shadow:0 0 0 9px rgba(47,163,107,0)}}
.enode small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0f8ac7}
.enode b{display:block;margin-top:2px;font-size:16px;line-height:1.3;color:#101c33}
.enode em{display:block;margin-top:2px;font-style:normal;font-size:13px;line-height:1.45;color:#7588a2}
.eco.in .enode{animation:ecoIn .7s var(--ease) both}
.eco.in .enode:nth-of-type(2){animation-delay:.12s}.eco.in .enode:nth-of-type(3){animation-delay:.24s}.eco.in .enode:nth-of-type(4){animation-delay:.36s}
@keyframes ecoIn{from{opacity:0;transform:translate(-50%,-40%) scale(.94)}}

.etag{position:absolute;z-index:2;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 9px;border-radius:999px;background:#fff;border:1px solid #e4ecf7;box-shadow:0 6px 16px rgba(4,28,77,.08);font-size:12px;font-weight:700;color:#062a6b;white-space:nowrap;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.etag i{width:8px;height:8px;border-radius:50%;background:#33ccff;box-shadow:0 0 0 3px rgba(51,204,255,.25)}
.etag i.two{background:linear-gradient(90deg,#33ccff 50%,#0044aa 50%)}
.etag.hi{background:#0044aa;color:#fff;border-color:#0044aa;transform:translate(-50%,-50%) scale(1.06)}
.eco.in .etag{animation:ecoTag .6s var(--spring) .9s both}
@keyframes ecoTag{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}}

.ecore{position:absolute;left:50%;top:50%;width:230px;height:230px;transform:translate(-50%,-50%);z-index:1}
.ecore .e-ring{position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from 0deg,#33ccff,#0044aa 30%,transparent 45%,transparent 55%,#33ccff 70%,#99e8ff 85%,#33ccff);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:ecoSpin 6s linear infinite}
.ecore .e-rip{position:absolute;inset:6px;border-radius:50%;border:2px solid rgba(51,204,255,.55);animation:ecoRip 3s ease-out infinite}
.ecore .e-rip.r2{animation-delay:1.5s}
@keyframes ecoRip{from{transform:scale(1);opacity:.8}to{transform:scale(1.55);opacity:0}}
.ecore .disc{position:absolute;inset:14px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:radial-gradient(circle at 32% 26%,#2e82e8,#0a3a8f 55%,#00245c);box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -12px 30px rgba(0,0,0,.25),0 0 0 10px rgba(0,68,170,.07),0 24px 50px rgba(6,42,107,.38)}
.ecore .disc img{width:128px;height:auto;padding:7px 10px;border-radius:12px;background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.2)}
.ecore .disc small{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#99e8ff}
.ecore .e-live{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.12);font-size:11px;font-weight:600;color:#fff}
.ecore .e-live i{width:7px;height:7px;border-radius:50%;background:#5ee0a0;animation:ecoLive 2s ease-out infinite}
.orbit-chips{position:absolute;inset:-46px;animation:ecoSpin 24s linear infinite}
.oc{position:absolute;left:50%;top:50%;transform:rotate(var(--a)) translate(0,-136px) rotate(calc(-1 * var(--a)))}
.oc b{display:block;transform:translate(-50%,-50%);padding:4px 10px;border-radius:999px;background:#fff;border:1px solid #cfe4fa;box-shadow:0 6px 14px rgba(4,28,77,.12);font-size:11.5px;font-weight:700;color:#0e6fa5;white-space:nowrap;animation:ecoCounter 24s linear infinite}
@keyframes ecoCounter{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}

.eco-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:22px;font-size:14px;color:#54688a}
.eco-legend li{display:inline-flex;align-items:center;gap:8px}
.eco-legend i{width:26px;height:4px;border-radius:4px;background:linear-gradient(90deg,#33ccff,#0044aa)}
.eco-legend i.out{background:linear-gradient(90deg,#0044aa,#33ccff)}
.eco-legend i.two{background:repeating-linear-gradient(90deg,#33ccff 0 6px,#0044aa 6px 12px)}
.eco-legend .icon{width:18px;height:18px;color:#0044aa}

@media (max-width:1100px){
  .eco{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .eco-bg,.etag{display:none}
  .enode{position:static;transform:none;width:auto}
  .enode:hover,.enode.hi{transform:translateY(-4px)}
  .eco.in .enode{animation:none}
  .ecore{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;margin:40px auto;order:-1}
}
@media (max-width:720px){
  .eco{grid-template-columns:1fr;overflow-x:clip}
  .ecore{width:200px;height:200px}
  .oc{transform:rotate(var(--a)) translate(0,-132px) rotate(calc(-1 * var(--a)))}
}
@media (prefers-reduced-motion:reduce){.eco *{animation:none!important}.eco .pkts{display:none}}

/* ===== Bảo mật: màu nền & chữ theo bản base ===== */
#bao-mat.dark{background:radial-gradient(60% 70% at 85% 0%,rgba(51,204,255,.18),transparent 60%),linear-gradient(165deg,#062a6b,#020d24);color:#fff}
#bao-mat .eyebrow{background:rgba(51,204,255,.16);color:#99e8ff}
#bao-mat .sec-head h2{color:#fff}
#bao-mat .hl{color:#66d9ff}
#bao-mat .sec-head p{color:rgba(230,242,255,.82)}
#bao-mat .card{border-radius:24px;padding:26px 22px 28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:none}
#bao-mat .card:hover{background:rgba(255,255,255,.1);border-color:rgba(102,217,255,.55)}
#bao-mat .ic-box{width:50px;height:50px;border-radius:16px;background:rgba(102,217,255,.16);color:#66d9ff;margin-bottom:0}
#bao-mat .card:hover .ic-box{background:#33ccff;color:#041c4d}
#bao-mat .card h3{margin-top:18px;font-size:18px;color:#fff;text-wrap:wrap}
#bao-mat .card p{margin-top:8px;font-size:14px;line-height:1.65;color:rgba(230,242,255,.8)}
#bao-mat .glare{background:radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.08),transparent 60%)}

/* ===== Bảo mật: chuyển động ===== */
@property --bm-a{syntax:'<angle>';inherits:false;initial-value:0deg}
#bao-mat{isolation:isolate}
#bao-mat .bm-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;overflow:clip;z-index:0}
#bao-mat .bm-fx::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(102,217,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(102,217,255,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 80% at 50% 40%,#000,transparent 80%);mask-image:radial-gradient(70% 80% at 50% 40%,#000,transparent 80%);animation:bmGrid 18s linear infinite}
@keyframes bmGrid{to{background-position:56px 56px}}
#bao-mat .bm-fx::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,transparent,rgba(153,232,255,.10),transparent);transform:skewX(-18deg);animation:bmSweep 7s ease-in-out infinite}
@keyframes bmSweep{0%{left:-40%}60%,100%{left:120%}}
#bao-mat .bm-fx i{position:absolute;bottom:-10px;width:var(--s,4px);height:var(--s,4px);border-radius:50%;background:#66d9ff;box-shadow:0 0 10px 2px rgba(102,217,255,.6);opacity:0;animation:bmFloat var(--d,9s) linear var(--w,0s) infinite}
@keyframes bmFloat{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}90%{opacity:.6}100%{transform:translate(var(--x,20px),-620px);opacity:0}}
#bao-mat > .wrap{position:relative;z-index:1}
/* thẻ: viền sáng chạy vòng */
#bao-mat .card{position:relative;overflow:visible}
#bao-mat .card::before{content:"";display:block;position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--bm-a),transparent 0deg,rgba(102,217,255,.0) 250deg,#66d9ff 320deg,#e6faff 340deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:bmSpin 5s linear infinite;opacity:.9;pointer-events:none;height:auto;transform:none}
#bao-mat .card:nth-child(2)::before{animation-delay:-1.25s}#bao-mat .card:nth-child(3)::before{animation-delay:-2.5s}#bao-mat .card:nth-child(4)::before{animation-delay:-3.75s}
#bao-mat .card:hover::before{animation-duration:1.6s;opacity:1}
@keyframes bmSpin{to{--bm-a:360deg}}
#bao-mat .card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px);box-shadow:0 26px 50px rgba(0,0,0,.35),0 0 0 1px rgba(102,217,255,.25)}
/* icon: sóng lan + bồng bềnh */
#bao-mat .ic-box{position:relative;animation:bmBob 4s ease-in-out infinite}
#bao-mat .card:nth-child(2) .ic-box{animation-delay:-1s}#bao-mat .card:nth-child(3) .ic-box{animation-delay:-2s}#bao-mat .card:nth-child(4) .ic-box{animation-delay:-3s}
@keyframes bmBob{50%{transform:translateY(-4px)}}
#bao-mat .ic-box::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid rgba(102,217,255,.7);animation:bmPing 2.6s ease-out infinite}
#bao-mat .card:nth-child(2) .ic-box::after{animation-delay:.65s}#bao-mat .card:nth-child(3) .ic-box::after{animation-delay:1.3s}#bao-mat .card:nth-child(4) .ic-box::after{animation-delay:1.95s}
@keyframes bmPing{from{transform:scale(1);opacity:.8}to{transform:scale(1.7);opacity:0}}
#bao-mat .card:hover .ic-box{animation:none;transform:rotate(-8deg) scale(1.1);box-shadow:0 0 22px rgba(102,217,255,.55)}
#bao-mat .ic-box .icon{transition:transform .4s var(--spring)}
#bao-mat .card:hover .ic-box .icon{transform:scale(1.12)}
/* xuất hiện lần lượt */
#bao-mat .card.rv.in{animation:bmIn .9s var(--ease) both}
#bao-mat .card.rv.in:nth-child(2){animation-delay:.12s}#bao-mat .card.rv.in:nth-child(3){animation-delay:.24s}#bao-mat .card.rv.in:nth-child(4){animation-delay:.36s}
@keyframes bmIn{from{opacity:0;transform:translateY(40px) scale(.94);filter:blur(8px)}}
#bao-mat .card h3{transition:color .3s var(--ease)}
#bao-mat .card:hover h3{color:#99e8ff}
#bao-mat .card p{transition:color .3s var(--ease)}
#bao-mat .card:hover p{color:rgba(235,245,255,.95)}
@media (prefers-reduced-motion:reduce){#bao-mat .bm-fx,#bao-mat .card::before,#bao-mat .ic-box::after{display:none}#bao-mat .ic-box,#bao-mat .card.rv.in{animation:none}}

/* ================= Bản MOTION ================= */
/* 1. Mesh gradient trôi chậm sau hero */
.mesh{position:absolute;inset:-10%;z-index:0;pointer-events:none;filter:blur(80px);opacity:1;background:rgba(3,22,60,.34)}
.mesh i{position:absolute;border-radius:50%;will-change:transform}
.mesh .m1{width:46vw;height:46vw;left:50%;top:-10%;background:radial-gradient(circle,rgba(13,72,180,.55),transparent 65%);animation:mesh1 16s ease-in-out infinite alternate}
.mesh .m2{width:42vw;height:42vw;left:-8%;top:28%;background:radial-gradient(circle,rgba(3,28,77,.75),transparent 65%);animation:mesh2 19s ease-in-out infinite alternate}
.mesh .m3{width:34vw;height:34vw;left:62%;top:52%;background:radial-gradient(circle,rgba(4,40,105,.7),transparent 65%);animation:mesh3 14s ease-in-out infinite alternate}
.mesh .m4{width:26vw;height:26vw;left:30%;top:-12%;background:radial-gradient(circle,rgba(51,204,255,.16),transparent 65%);animation:mesh4 22s ease-in-out infinite alternate}
@keyframes mesh1{to{transform:translate(-16vw,14vh) scale(1.18)}}
@keyframes mesh2{to{transform:translate(20vw,-12vh) scale(.9)}}
@keyframes mesh3{to{transform:translate(-22vw,-16vh) scale(1.2)}}
@keyframes mesh4{to{transform:translate(14vw,22vh) scale(1.1)}}
.hero-in{z-index:1}

/* 2. Tiêu đề các phần hiện từng từ (kiểu Apple/Linear) */
.sec-head h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.sec-head h2 .w > span{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1) calc(var(--wi,0) * 55ms)}
.sec-head.in h2 .w > span{transform:none}
.sec-head.rv.in h2{animation:none!important}
.sec-head .eyebrow{transition:opacity .6s var(--ease),transform .6s var(--ease);opacity:0;transform:translateY(10px)}
.sec-head.in .eyebrow{opacity:1;transform:none}
.sec-head > p{transition:opacity .8s var(--ease) .35s,transform .8s .35s var(--ease);opacity:0;transform:translateY(12px)}
.sec-head.in > p{opacity:1;transform:none}

/* 3. Viền rọi sáng theo chuột (kiểu Linear) cho thẻ */
.glow-b:not(.enode){position:relative}
.glow-b::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),rgba(51,204,255,.95),rgba(0,68,170,.5) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s var(--ease)}
.glow-b:hover::after{opacity:1}

/* 4. Parallax nhẹ khi cuộn */
.px{will-change:transform;transform:translate3d(0,var(--py,0px),0)}

/* 5. Nút CTA chính có nhịp sáng mời bấm (một lần khi vào khung nhìn) */
.hero-cta .btn-accent{animation:ctaPulse 2.4s ease-out 2.2s 2}
@keyframes ctaPulse{0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 0 rgba(102,217,255,.55)}100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 18px rgba(102,217,255,0)}}

@media (prefers-reduced-motion:reduce){
  .mesh{display:none}
  .sec-head h2 .w > span,.sec-head .eyebrow,.sec-head > p{transform:none!important;opacity:1!important;transition:none!important}
  .px{transform:none!important}
}

/* ===== Nền hero động: lưới vàng, vệt quét, tia sáng, hạt bay ===== */
.hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;overflow:clip}
.hero-fx::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(102,217,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(102,217,255,.07) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(75% 85% at 60% 45%,#000,transparent 80%);mask-image:radial-gradient(75% 85% at 60% 45%,#000,transparent 80%);animation:hfGrid 20s linear infinite}
@keyframes hfGrid{to{background-position:64px 64px}}
.hero-fx::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:32%;background:linear-gradient(100deg,transparent,rgba(153,232,255,.09),transparent);transform:skewX(-18deg);animation:hfSweep 8s ease-in-out infinite}
@keyframes hfSweep{0%{left:-40%}60%,100%{left:125%}}
.hero-fx .bm{position:absolute;top:-30%;width:1px;height:30%;background:linear-gradient(to bottom,transparent,rgba(153,232,255,.75),transparent);opacity:0;animation:hfBeam var(--d,8s) linear var(--w,0s) infinite}
.hero-fx .bm::after{content:"";position:absolute;left:-2px;bottom:18%;width:5px;height:5px;border-radius:50%;background:#7fdcff;box-shadow:0 0 12px 3px rgba(102,217,255,.7)}
@keyframes hfBeam{0%{transform:translateY(0);opacity:0}10%{opacity:1}85%{opacity:.8}100%{transform:translateY(480%);opacity:0}}
.hero-fx .p{position:absolute;bottom:-10px;width:var(--s,4px);height:var(--s,4px);border-radius:50%;background:#66d9ff;box-shadow:0 0 10px 2px rgba(102,217,255,.6);opacity:0;animation:hfFloat var(--d,11s) linear var(--w,0s) infinite}
@keyframes hfFloat{0%{transform:translate(0,0);opacity:0}10%{opacity:.85}90%{opacity:.5}100%{transform:translate(var(--x,20px),-760px);opacity:0}}
.hero-fx .sp{position:absolute;width:10px;height:10px;background:radial-gradient(circle,#e9fbff 0 1.5px,transparent 2px),linear-gradient(#b9ecff,#b9ecff) center/1px 100% no-repeat,linear-gradient(90deg,#b9ecff,#b9ecff) center/100% 1px no-repeat;opacity:0;animation:hfTw 4s ease-in-out var(--w,0s) infinite}
@keyframes hfTw{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.9;transform:scale(1.2) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.hero-fx{display:none}}

/* Tiêu đề phần: một dòng trên máy tính */
@media (min-width:1100px){
  #noi-dung{container-type:inline-size}
  .sec-head{max-width:none}
  /* cỡ chữ theo bề rộng vùng nội dung (hẹp hơn màn hình khi có cột quảng cáo) */
  .sec-head h2{white-space:nowrap;text-wrap:nowrap;font-size:clamp(24px,2.75cqw,36px)}
}
.nw{white-space:nowrap}
@media (max-width:420px){.nw{white-space:normal}}

/* ===== Đăng ký: khối từ bản base ===== */
#dang-ky{--r950:#020d24;--r900:#041c4d;--r800:#062a6b;--r700:#0a3a8f;--r600:#0044aa;--r500:#1a6ad4;--r100:#e9f1fd;--g700:#0e6fa5;--g600:#0f8ac7;--g500:#33ccff;--g400:#66d9ff;--g300:#99e8ff;--g100:#e3f7ff;--ink:#101c33;--ink2:#42557a;--ink3:#7588a2;--line:#e4ecf7;--cream:#f7faff;--sh-lg:0 30px 70px rgba(2,13,36,.22);background:#fff;color:var(--ink)}
#dang-ky .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:12px;font-weight:700;font-size:16px;border:1.5px solid transparent;white-space:nowrap;overflow:hidden;overflow:clip;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
#dang-ky .btn .icon{width:18px;height:18px;stroke-width:2.2;transition:transform .3s var(--ease)}
#dang-ky .btn:hover .icon{transform:translateX(3px)}
#dang-ky .btn-red{background:linear-gradient(180deg,var(--r600),var(--r700));color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 20px rgba(10,58,143,.25)}
#dang-ky .btn-red:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 14px 28px rgba(10,58,143,.35)}
#dang-ky .btn-red::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s var(--ease)}
#dang-ky .btn-red:hover::after{transform:translateX(120%)}
#dang-ky .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--r100);color:var(--r600);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
#dang-ky .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g500)}
#dang-ky .cta{position:relative;overflow:hidden;overflow:clip;border-radius:32px;padding:clamp(28px,4vw,56px);background:radial-gradient(60% 80% at 0% 0%,rgba(102,217,255,.25),transparent 60%),linear-gradient(150deg,var(--r700),var(--r950));color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(28px,4vw,56px);align-items:center}
#dang-ky .cta::before{content:"";position:absolute;inset:0;background:url(../assets/pattern.jpg) center/cover;opacity:.12;mix-blend-mode:screen;pointer-events:none}
#dang-ky .cta > *{position:relative}
#dang-ky .cta h2{margin-top:14px}
#dang-ky .cta .pill{background:rgba(51,204,255,.18);color:var(--g300)}
#dang-ky .cta .lead{margin-top:14px;font-size:18px;color:rgba(230,242,255,.86)}
#dang-ky .start{margin-top:26px;display:grid;gap:18px}
#dang-ky .start li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center}
#dang-ky .start .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,#8fe4ff,#1fb6f2);color:var(--r900);font-weight:700;box-shadow:0 0 0 6px rgba(102,217,255,.16)}
#dang-ky .start b{display:block;font-size:16px}
#dang-ky .start span{font-size:14px;color:rgba(230,242,255,.78)}
#dang-ky .free{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:9px 16px 9px 12px;border-radius:999px;background:rgba(102,217,255,.14);border:1px solid rgba(102,217,255,.5);color:var(--g300);font-weight:700;font-size:14px}
#dang-ky .free .icon{width:20px;height:20px}
#dang-ky .form{padding:clamp(22px,3vw,34px);border-radius:24px;background:#fff;color:var(--ink);box-shadow:var(--sh-lg)}
#dang-ky .form h3{font-size:24px;font-weight:700}
#dang-ky .form > p{margin-top:6px;font-size:14px;color:var(--ink2)}
#dang-ky .field{margin-top:16px}
#dang-ky .field label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}
#dang-ky .field label i{font-style:normal;color:var(--r600)}
#dang-ky .field input{width:100%;height:50px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--cream);font-size:16px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
#dang-ky .field input:focus{outline:none;border-color:var(--r600);background:#fff;box-shadow:0 0 0 4px var(--r100)}
#dang-ky .field .err{display:none;margin-top:6px;font-size:14px;color:var(--r600);font-weight:600}
#dang-ky .field.invalid input{border-color:var(--r600)}
#dang-ky .field.invalid .err{display:block}
#dang-ky .form .btn{width:100%;margin-top:20px}
#dang-ky .fine{margin-top:12px;font-size:12px;color:var(--ink3);text-align:center}
#dang-ky .ok{display:none;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--g100);color:var(--g700);font-weight:700;font-size:14px}
#dang-ky .ok.show{display:block}
#dang-ky .form::before,#dang-ky .start li::before{display:none}#dang-ky .cta .pill{background:rgba(51,204,255,.18);color:var(--g300)}#dang-ky .start li:hover{transform:none}#dang-ky .start li{padding-bottom:0}@media (max-width:1100px){#dang-ky .cta{grid-template-columns:1fr}}

/* ===== Thông báo cookie ===== */
.ck-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:linear-gradient(160deg,#041c4d,#020d24);color:#fff;border-top:1px solid rgba(102,217,255,.35);box-shadow:0 -14px 40px rgba(2,9,24,.35);animation:ckUp .6s cubic-bezier(.2,.7,.2,1) both}
.ck-bar[hidden],.ck-modal[hidden]{display:none}
@keyframes ckUp{from{transform:translateY(100%)}}
.ck-bar::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,#0044aa,#33ccff,#0044aa)}
.ck-in{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:24px}
.ck-txt b{color:#fff}
.ck-txt p{font-size:14px;line-height:20px;color:rgba(230,242,255,.82)}
.ck-txt strong{color:#fff}
.ck-txt a{color:#99e8ff;text-decoration:underline;text-underline-offset:3px}
.ck-act{display:flex;align-items:center;gap:12px;flex:none;margin-left:auto}
.ck-link{background:none;border:0;color:#99e8ff;font:inherit;font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:8px 6px;min-height:40px}
.ck-link:hover{color:#fff}
.ck-btn{min-height:40px;padding:8px 16px;border-radius:999px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;border:1.5px solid transparent;transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.ck-out{background:transparent;border-color:rgba(153,232,255,.6);color:#99e8ff}
.ck-out:hover{background:rgba(153,232,255,.12);border-color:#99e8ff}
.ck-ok{background:linear-gradient(180deg,#5cd8ff,#1fb6f2);color:#041c4d;box-shadow:0 8px 20px rgba(51,204,255,.3)}
.ck-ok:hover{transform:translateY(-1px)}
.ck-modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(2,9,24,.55);backdrop-filter:blur(4px)}
.ck-box{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;border-radius:24px;background:#fff;color:#101c33;padding:24px;box-shadow:0 30px 70px rgba(2,9,24,.4);animation:ckPop .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes ckPop{from{opacity:0;transform:translateY(14px) scale(.98)}}
.ck-head{display:flex;align-items:center;justify-content:space-between}
.ck-head b{font-size:20px}
.ck-x{width:40px;height:40px;border-radius:12px;border:1px solid #e4ecf7;background:#fff;font-size:24px;line-height:1;cursor:pointer;color:#42557a}
.ck-sub{margin-top:6px;font-size:14px;color:#42557a}
.ck-row{position:relative;display:flex;align-items:center;gap:16px;margin-top:14px;padding:14px 16px;border-radius:16px;border:1px solid #e4ecf7;cursor:pointer}
.ck-row span{flex:1}
.ck-row b{display:block;font-size:16px}
.ck-row small{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:#7588a2}
.ck-row input{position:absolute;opacity:0;width:1px;height:1px}
.ck-sw{flex:none;width:44px;height:26px;border-radius:999px;background:#c9d4e4;position:relative;transition:background .2s var(--ease)}
.ck-sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.ck-row input:checked + .ck-sw{background:#0044aa}
.ck-row input:checked + .ck-sw::after{transform:translateX(18px)}
.ck-row input:disabled + .ck-sw{opacity:.6}
.ck-row input:focus-visible + .ck-sw{outline:3px solid #33ccff;outline-offset:2px}
.ck-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.ck-foot .ck-out{border-color:#c5d5ea;color:#0a3a8f}
.ck-foot .ck-out:hover{background:#f4f8fe;border-color:#0044aa}
@media (max-width:820px){.ck-in{flex-direction:column;align-items:stretch;gap:8px;padding:12px 16px}.ck-act{margin-left:0;justify-content:flex-end;flex-wrap:wrap}}
@media (max-width:480px){.ck-act .ck-btn{flex:1}.ck-foot{flex-direction:column-reverse}.ck-foot .ck-btn{width:100%}}
@media (prefers-reduced-motion:reduce){.ck-bar,.ck-box{animation:none}}

/* Nút ở hero: không hiệu ứng động */
.hero .hero-cta,.hero .hero-cta .btn{animation:none!important}
.hero .hero-cta .btn{translate:none!important;transform:none!important;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.hero .hero-cta .btn::after{display:none!important}
.hero .hero-cta .btn .icon,.hero .hero-cta .btn:hover .icon{transform:none!important;transition:none}

/* Trình ký: văn bản với vị trí ký */
.bx .tk-paper .tk-l{display:block;height:6px;margin-top:9px;border-radius:3px;background:#dfe8f5}
.bx .tk-paper .tk-l.s{width:72%}
.bx .tk-slots{display:grid;gap:8px;margin-top:14px}
.bx .tk-slot{display:block;padding:7px 10px;border-radius:8px;border:1.5px dashed #0044aa;background:#f4f8fe;color:#0044aa;font-size:11.5px;font-weight:700;animation:bx-fadeUp .5s var(--ease) both}
.bx .tk-slot.c{animation-delay:.25s}
.bx .tk-slot.g{border-color:#33ccff;background:#e3f7ff;color:#0e6fa5;animation-delay:.5s}
.sec-head > p{text-wrap:balance}
@media (min-width:900px){.sec-head > p{max-width:none}.sec-head > p .sl{display:block;white-space:nowrap}}

/* ===== Đăng ký: chuyển động 3 bước ===== */
#dang-ky .start{position:relative}
#dang-ky .start li{position:relative;padding:8px 12px 8px 8px;margin-left:-8px;border-radius:16px;transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
#dang-ky .start li:not(:last-child)::after{content:"";position:absolute;left:29px;top:56px;width:2px;height:calc(100% - 38px);background:linear-gradient(#66d9ff,#66d9ff) no-repeat top/100% 0%,repeating-linear-gradient(to bottom,rgba(102,217,255,.45) 0 4px,transparent 4px 8px);transition:background-size 1s cubic-bezier(.2,.7,.2,1)}
#dang-ky .start li.done::after{background-size:100% 100%,auto}
#dang-ky .start .n{position:relative;transition:transform .45s cubic-bezier(.3,1.45,.5,1),box-shadow .45s var(--ease)}
#dang-ky .start .n::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(102,217,255,.7);opacity:0}
#dang-ky .start li.on{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(102,217,255,.28)}
#dang-ky .start li.on .n{transform:scale(1.1);box-shadow:0 0 0 6px rgba(102,217,255,.22),0 0 26px rgba(102,217,255,.55)}
#dang-ky .start li.on .n::after{animation:stRing 1.6s ease-out infinite}
@keyframes stRing{from{transform:scale(1);opacity:.9}to{transform:scale(1.6);opacity:0}}
#dang-ky .start li b,#dang-ky .start li div span{transition:color .4s var(--ease)}
#dang-ky .start li.on b{color:#99e8ff}
#dang-ky .cta.in .start li{animation:stIn .7s cubic-bezier(.2,.7,.2,1) both}
#dang-ky .cta.in .start li:nth-child(1){animation-delay:.25s}#dang-ky .cta.in .start li:nth-child(2){animation-delay:.4s}#dang-ky .cta.in .start li:nth-child(3){animation-delay:.55s}
@keyframes stIn{from{opacity:0;transform:translateX(-24px)}}
/* nhãn miễn phí: vệt sáng + nhịp sáng */
#dang-ky .free{position:relative;overflow:hidden;overflow:clip;animation:freeGlow 3s ease-in-out infinite}
#dang-ky .free::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(153,232,255,.45),transparent);transform:skewX(-20deg);animation:freeSweep 3.6s ease-in-out 1s infinite}
@keyframes freeSweep{0%{left:-60%}45%,100%{left:130%}}
@keyframes freeGlow{50%{box-shadow:0 0 0 5px rgba(102,217,255,.12),0 0 22px rgba(102,217,255,.3)}}
#dang-ky .free .icon{animation:freeTick 3s ease-in-out infinite}
@keyframes freeTick{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){#dang-ky .start li,#dang-ky .free,#dang-ky .free::after,#dang-ky .free .icon,#dang-ky .start .n::after{animation:none!important}}
#bao-mat .card h3{white-space:nowrap;font-size:clamp(16px,1.18vw,18px);letter-spacing:-.02em}
#bao-mat .card{padding-left:20px;padding-right:20px}
.enode{width:310px}
.enode small{white-space:nowrap;letter-spacing:.05em;font-size:10.5px}
.enode b{white-space:nowrap}

/* Trình ký: màu vị trí ký khớp số bước */
.bx .tk-slot{border:1.5px dashed #33ccff;background:#e3f7ff;color:#0e6fa5}
.bx .tk-slot.c{border-color:#0044aa;background:#e9f1fd;color:#0044aa}
.bx .tk-slot.g{border:1.5px solid #0044aa;background:#0044aa;color:#fff}
.bx .fs:nth-of-type(1) i{background:#e3f7ff;color:#0e6fa5}
.bx .fs:nth-of-type(2) i{background:#e9f1fd;color:#0044aa}
.bx .fs:nth-of-type(3) i{background:#0044aa;color:#fff}
.bx .qr.qr-real{display:block;width:96px;height:96px;padding:5px}
.bx .qrsvg{width:100%;height:100%;display:block}

.bx .legend-bars span:last-child{box-shadow:none}

/* ===== Tiến trình ký: chạy lần lượt từng bước ===== */
.bx #p3 .sg{position:relative;overflow:hidden;overflow:clip;transition:border-color .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease),background-color .4s var(--ease)}
.bx #p3 .sg .n{transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--spring,ease)}
.bx #p3 .sg.todo{opacity:.55}
.bx #p3 .sg.todo .n{background:#e9eef7;color:#8594ab;box-shadow:none;animation:none}
.bx #p3 .sg.doing{border-color:var(--g400);box-shadow:0 0 0 3px var(--g100);background:#eefaff}
.bx #p3 .sg.doing .n{background:#fff;color:var(--g600);box-shadow:inset 0 0 0 2px var(--g400);animation:bx-pulseR 1.4s ease-in-out infinite;transform:scale(1.06)}
.bx #p3 .sg.doing::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--r600),var(--g500));transform-origin:left;animation:sgBar 1.6s linear both}
@keyframes sgBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bx #p3 .sg.done .n{background:var(--r600);color:#fff;box-shadow:none;animation:sgPop .45s var(--spring,ease)}
@keyframes sgPop{50%{transform:scale(1.18)}}
.bx #p3 .sg small,.bx #p3 .sg .st{transition:color .3s var(--ease)}
.bx #p3 .sg.flash .st{animation:sgFlash .5s ease}
@keyframes sgFlash{from{transform:scale(.7);opacity:0}}
@media (prefers-reduced-motion:reduce){.bx #p3 .sg *,.bx #p3 .sg::after{animation:none!important}}

/* Báo cáo: nhật ký trên 1 dòng */
.bx #p5 .mgrid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.bx #p5 .logx div{align-items:center}
.bx #p5 .logx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bx #p5 .logx time{width:38px}
@media (max-width:720px){.bx #p5 .mgrid{grid-template-columns:1fr}}

/* ===== Hero mô phỏng thực tế ===== */
.hvw{position:relative;width:100%;aspect-ratio:600/520}
.hv{position:absolute;left:0;top:0;width:600px;height:520px;transform:scale(var(--k,1));transform-origin:0 0;font-family:var(--font,inherit);color:#101c33;text-align:left}
.hv *{box-sizing:border-box}
/* trình xem PDF */
.dw{position:absolute;left:96px;top:14px;width:392px;border-radius:16px;background:#eff3f9;box-shadow:0 34px 70px rgba(2,16,44,.45),0 0 0 1px rgba(255,255,255,.4);overflow:hidden;animation:hvUp 1s cubic-bezier(.2,.7,.2,1) .2s both}
.dw-top{display:flex;align-items:center;gap:6px;height:30px;padding:0 10px;background:#e3eaf4;border-bottom:1px solid #c9d6e8;font-size:9.5px;color:#64748f}
.dw-top > i{width:8px;height:8px;border-radius:50%;background:#c2d0e4}
.dw-top > i:nth-child(1){background:#e0605a}.dw-top > i:nth-child(2){background:#e8b14a}.dw-top > i:nth-child(3){background:#62b97a}
.dw-file{display:flex;align-items:center;gap:6px;margin-left:8px;font-weight:600;color:#3a4a68;white-space:nowrap}
.dw-file b{padding:1px 4px;border-radius:3px;background:#1a6ad4;color:#fff;font-size:7.5px}
.dw-pg{margin-left:auto}
.dw-sig{position:relative;display:flex;align-items:center;gap:8px;padding:6px 10px;background:#f0f9ff;border-bottom:1px solid #dce9fb;font-size:9.5px;transition:background-color .5s var(--ease)}
.dw-ic{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#33ccff;flex:none;transition:background-color .5s var(--ease)}
.dw-ic svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .4s var(--ease)}
.dw-st{position:relative;display:grid}
.dw-st b{grid-area:1/1;font-weight:700;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.s-wait{color:#0e6fa5}
.s-ok{color:#17794d;opacity:0;transform:translateY(6px)}
.dw-meta{margin-left:auto;color:#7588a2}
.dw.ok .dw-sig{background:#ecf7f0;border-color:#cde9d7}
.dw.ok .dw-ic{background:#17794d}
.dw.ok .dw-ic svg{opacity:1}
.dw.ok .s-wait{opacity:0;transform:translateY(-6px)}
.dw.ok .s-ok{opacity:1;transform:none}
.dw:not(.ok) .dw-ic{animation:hvSpin 1s linear infinite;background:conic-gradient(#33ccff 0 70%,#b9ecff 70%)}
@keyframes hvSpin{to{transform:rotate(360deg)}}
.pg{position:relative;margin:12px 14px 14px;padding:16px 20px 14px;background:#fff;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.12);font-family:"Times New Roman",Times,serif;color:#1a2030;line-height:1.35}
.pg-nat{text-align:center;font-size:7.6px}
.pg-nat b{display:block;font-size:7.8px}
.pg-nat span{display:inline-block;font-style:italic;border-bottom:.6px solid #333;padding-bottom:1px}
.pg h4{margin:9px 0 1px;text-align:center;font-family:"Times New Roman",Times,serif;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.pg-no{text-align:center;font-size:7.4px;font-style:italic;margin-bottom:7px}
.pg-tx{font-size:7.6px;text-align:justify;margin-top:3px}
.pg-fade{color:#64748f}
.pg-signs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:9px}
.sb{position:relative;padding:5px 6px 4px;border:1px dashed #c3d2e6;border-radius:4px;text-align:center}
.sb small,.pg-cert small{display:block;font-family:Arial,sans-serif;font-size:6.6px;font-weight:700;letter-spacing:.06em;color:#64748f}
.hw{display:block;width:70px;height:28px;margin:1px auto 0}
.hw path{fill:none;stroke:#1d3a8a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.hw.h3 path{stroke:#0a3a8f}
.tsa{display:inline-block;margin-top:1px;padding:1px 5px;border-radius:3px;background:#e9f5ee;color:#17794d;font-family:Arial,sans-serif;font-size:6.4px;font-weight:700;opacity:0;transition:opacity .4s var(--ease)}
.sb.on .tsa,.pg-cert.on .tsa{opacity:1}
.pg-cert{display:block;gap:10px;align-items:center;margin-top:8px;padding:7px 8px;border-radius:4px;background:#f4f8fd;border:1px solid #dfe9f6}
.pg-cert p{font-size:7.2px;font-style:italic;margin-top:2px}
.pg-cert .hw{margin:2px 0 0}
.pg-qr{position:absolute;right:12px;top:10px;width:42px;height:42px;padding:3px;background:#fff;border:1px solid #cfddf0;border-radius:4px}
.pg-qr svg{width:100%;height:100%;display:block}
/* điện thoại */
.ph{position:absolute;left:0;top:150px;width:172px;height:352px;padding:7px;border-radius:32px;background:linear-gradient(145deg,#0f1f3d,#050d1c);box-shadow:0 0 0 1.5px #22365c,0 30px 60px rgba(2,9,24,.55);transform:rotate(-6deg);animation:hvL 1s cubic-bezier(.2,.7,.2,1) .45s both}
.ph-scr{position:relative;height:100%;border-radius:23px;background:#f4f8fd;overflow:hidden}
.ph-sb{position:relative;display:flex;align-items:center;justify-content:space-between;height:24px;padding:0 13px 0 15px;background:#0a3a8f;color:#fff;font-size:8.5px}
.ph-isl{position:absolute;left:50%;top:5px;width:50px;height:14px;margin-left:-25px;border-radius:9px;background:#04070f}
.ph-ic{display:flex;gap:3px;align-items:center}
.ph-ic i{width:5px;height:5px;border-radius:1px;background:#fff}
.ph-ic .bt{width:12px;height:6px;border-radius:2px;border:1px solid #fff;background:linear-gradient(90deg,#fff 70%,transparent 70%)}
@keyframes hvPress{40%{transform:scale(.94);filter:brightness(.92)}}
.ph-app{background:#eef3f9}
.ph-top{padding-bottom:10px;background:linear-gradient(180deg,#2f9be3,#1d84d4)}
.ph-app .ph-sb{background:transparent}
.ph-me{display:flex;align-items:center;gap:5px;margin:4px 8px 0;padding:7px;border-radius:12px;background:rgba(255,255,255,.18)}
.ph-av{flex:none;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#9aa7b8 0 21%,transparent 22%),radial-gradient(circle at 50% 100%,#9aa7b8 0 42%,transparent 43%),#fff}
.ph-id{flex:1;min-width:0;color:#fff}
.ph-id b{display:block;overflow:hidden;font-size:8.5px;white-space:nowrap;text-overflow:ellipsis}
.ph-id small{display:block;overflow:hidden;font-size:6.6px;white-space:nowrap;text-overflow:ellipsis;opacity:.9}
.ph-bt{flex:none;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.24)}
.ph-bt svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.ph-grid{width:8px;height:8px;background:linear-gradient(#fff 0 0) 0 0/3.4px 3.4px no-repeat,linear-gradient(#fff 0 0) 100% 0/3.4px 3.4px no-repeat,linear-gradient(#fff 0 0) 0 100%/3.4px 3.4px no-repeat,linear-gradient(#fff 0 0) 100% 100%/3.4px 3.4px no-repeat}
.ph-menu{display:grid;gap:5px;padding:8px 8px 0}
.ph-it{display:flex;align-items:center;gap:6px;height:31px;padding:0 8px 0 6px;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(9,25,55,.06)}
.ph-it .ic{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%}
.ph-it .ic .icon{width:10px;height:10px}
.ph-it b{flex:1;min-width:0;font-size:7.4px;line-height:1.2}
.ph-it em{font-size:8.5px;font-style:normal;font-weight:700;color:#14213d}
.ph-it i{font-size:11px;font-style:normal;line-height:1;color:#8a97ab}
.ph-it.c1{background:linear-gradient(90deg,#eaf4ff,#fff)}.ph-it.c1 b{color:#1f63d6}.ph-it.c1 .ic{background:#d8eaff;color:#1f63d6}
.ph-it.c2{background:linear-gradient(90deg,#e9f7ee,#fff)}.ph-it.c2 b{color:#1f9a49}.ph-it.c2 .ic{background:#d6f0df;color:#1f9a49}
.ph-it.c3{background:linear-gradient(90deg,#fff3e3,#fff)}.ph-it.c3 b{color:#e8861a}.ph-it.c3 .ic{background:#fde4c6;color:#e8861a}
.ph-it.c4{background:linear-gradient(90deg,#f1edff,#fff)}.ph-it.c4 b{color:#7457ea}.ph-it.c4 .ic{background:#e6e0ff;color:#7457ea}
.ph-quota{margin:7px 8px 0;padding:7px;border-radius:12px;background:#fff;text-align:center}
.ph-quota > b{display:block;margin-bottom:5px;font-size:8px;color:#14213d}
.ph-quota > div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.ph-quota span{padding:6px 2px;border:1px solid #e3e9f2;border-radius:8px;font-size:6.4px;line-height:1.2;color:#7a879b}
.ph-quota span b{display:block;margin-bottom:2px;font-size:10px;color:#14213d}
.ph-foot{margin-top:8px;font-size:6px;text-align:center;color:#9aa6b8}
.ph-home{position:absolute;left:50%;bottom:6px;width:56px;height:3px;margin-left:-28px;border-radius:3px;background:#0d1a33;opacity:.8}
/* thẻ Căn cước */
.cc{position:absolute;right:-34px;bottom:-30px;width:258px;height:auto;overflow:visible;animation:hvR 1s cubic-bezier(.2,.7,.2,1) .7s both;filter:drop-shadow(0 26px 34px rgba(2,9,24,.5))}
@keyframes hvUp{from{opacity:0;transform:translateY(34px) scale(.96)}}
@keyframes hvL{from{opacity:0;transform:translate(-40px,20px) rotate(-12deg)}}
@keyframes hvR{from{opacity:0;transform:translate(40px,30px)}}
.hero-visual .float-a{left:-46px;top:66px;bottom:auto}
.hero-visual .float-b{right:-40px;top:-34px}
@media (prefers-reduced-motion:reduce){.hv *{animation:none!important}.hw path{stroke-dashoffset:0}.tsa{opacity:1}}

/* Ô đồng ý chính sách */
#dang-ky .field.agree{margin-top:18px}
#dang-ky .field.agree > label.agree-l{text-wrap:pretty;display:flex;gap:11px;align-items:flex-start;margin:0;cursor:pointer;font-size:14px;font-weight:400;line-height:1.55;color:#42557a}
#dang-ky .agree-l input{position:absolute;opacity:0;width:1px;height:1px}
#dang-ky .agree-l .box{flex:none;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1.8px solid #a9bcd8;background:#fff;display:grid;place-items:center;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
#dang-ky .agree-l .box svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .3s var(--ease) .05s}
#dang-ky .agree-l input:checked + .box{background:#0044aa;border-color:#0044aa}
#dang-ky .agree-l input:checked + .box svg{stroke-dashoffset:0}
#dang-ky .agree-l input:focus-visible + .box{outline:3px solid #33ccff;outline-offset:2px}
#dang-ky .agree-l a{color:#0044aa;font-weight:600;text-decoration:underline;text-underline-offset:3px}
#dang-ky .agree-l i{font-style:normal;color:#0044aa}
#dang-ky .field.agree.invalid .box{border-color:#d14b44;box-shadow:0 0 0 3px #fbe2e0}

/* Nút Gửi đăng ký: đứng yên */
#form-dang-ky .btn,#form-dang-ky .btn:hover,#form-dang-ky .btn:active{animation:none!important;transform:none!important;translate:none!important;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
#form-dang-ky .btn::after{display:none!important}
#form-dang-ky .btn .icon,#form-dang-ky .btn:hover .icon{transform:none!important;transition:none}

/* Đăng ký: dãn chữ và form, không xuống dòng trên màn rộng */
@media (min-width:1101px){
  #dang-ky .cta{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)!important;gap:clamp(28px,3vw,48px)!important;padding-left:clamp(32px,3.6vw,56px);padding-right:clamp(32px,3.6vw,56px)}
  #dang-ky .cta .lead .ln{display:block;white-space:nowrap}
  #dang-ky .start li div span,#dang-ky .start b{white-space:nowrap}
  #dang-ky .cta .lead{font-size:clamp(16px,1.2vw,18px)}
  #dang-ky .start li div span{font-size:clamp(12px,1vw,14px)}
  #dang-ky .agree-l .txt .ln{display:block;white-space:nowrap}
}

/* Lời chứng: căn giữa, có dấu của tổ chức */
.pg-cert{text-align:center}
.pg-cert .cert-sig{position:relative;display:block;width:70px;margin:2px auto 0}
.pg-cert .hw{margin:0 auto}
.pg-cert .seal{position:absolute;left:-24px;top:50%;width:44px;height:44px;margin-top:-18px;fill:#d0202b;stroke:#d0202b;mix-blend-mode:multiply;opacity:0;transform:rotate(-14deg) scale(1.8)}
.pg-cert .seal text{stroke:none}
.pg-cert .seal .st{stroke:none}
.pg-cert.on .seal{animation:sealIn .5s cubic-bezier(.3,1.35,.5,1) .2s both}
@keyframes sealIn{0%{opacity:0;transform:rotate(-14deg) scale(1.8)}60%{opacity:.92}100%{opacity:.88;transform:rotate(-14deg) scale(1)}}
@media (prefers-reduced-motion:reduce){.pg-cert .seal{opacity:.88;transform:rotate(-14deg)}}

/* Cột quảng cáo bên phải (AdRail) — chỉ hiện trên màn rộng */
.ad-rail{display:none}
@media (min-width:1400px){
  .page-body:has(> .ad-rail:not([hidden])){display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:24px;padding-right:24px}
  .page-body:has(> .ad-rail:not([hidden])) > main{min-width:0;overflow-x:clip}
  .ad-rail:not([hidden]){display:flex;flex-direction:column;gap:24px;padding:24px 0}
}
.ad-slot{width:calc(var(--w) * 1px);max-width:100%}
.ad-slot.sticky{position:sticky;top:96px}
.ad-slot small{display:block;margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ink-3)}
.ad-slot img{width:100%;height:auto;aspect-ratio:var(--w)/var(--h);object-fit:cover;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}
.ad-slot.empty span{display:flex;align-items:center;justify-content:center;aspect-ratio:var(--w)/var(--h);border:1.5px dashed var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-alt);color:var(--color-ink-3);font-size:14px;text-align:center;line-height:1.5}
.rel-sol{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-card);box-shadow:var(--shadow-sm);padding:18px 14px 10px}
.rel-sol h2{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);padding:0 6px 10px;border-bottom:1px solid var(--color-border)}
.rel-sol ul{margin-top:6px}
.rel-sol a{display:flex;align-items:center;gap:12px;padding:9px 6px;border-radius:var(--radius-sm);transition:background-color .2s var(--ease)}
.rel-sol a:hover{background:var(--color-primary-soft)}
.rel-sol img{width:40px;height:auto;flex:none}
.rel-sol b{display:block;font-size:16px;color:var(--color-ink);line-height:1.3}
.rel-sol small{display:block;font-size:12px;color:var(--color-ink-2);line-height:1.4}

/* Tính năng nổi bật — sơ đồ lõi + 9 nút (theo enotaryid.com), xem FeatureHub.tsx */
.fx-hub{container-type:inline-size;max-width:1100px;margin:0 auto}
.fx-stage{position:relative;aspect-ratio:1000/600}
.fx-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fx-orbit{fill:none;stroke:#c9dcf6;stroke-width:1.4;stroke-dasharray:3 9;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:spin 90s linear infinite}
.fx-orbit.o2{stroke:#dfeafb;stroke-dasharray:2 7;animation-direction:reverse;animation-duration:70s}
.fx-ring{fill:none;stroke:#d6e5fa;stroke-width:1.6;stroke-linejoin:round}
.fx-spoke{stroke:#7fc4f0;stroke-width:1.6;stroke-dasharray:3 5;stroke-linecap:round;animation:fxFlow 1.6s linear infinite}
@keyframes fxFlow{to{stroke-dashoffset:-16}}
.fx-core.ecore{position:absolute;left:50%;top:46.33%;margin:0;width:clamp(170px,23cqw,236px);height:clamp(170px,23cqw,236px);transform:translate(-50%,-50%)}
.fx-core .disc{gap:10px}
.fx-core .disc img{width:clamp(108px,13cqw,134px)}
.fx-core .disc small{max-width:15ch;line-height:1.35}
.fx-list{position:absolute;inset:0}
.fx-item{position:absolute;width:0;height:0}
.fx-node{position:absolute;left:0;top:0;width:clamp(54px,6.8cqw,70px);height:clamp(54px,6.8cqw,70px);transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--color-primary);border:1px solid #dbe7f7;box-shadow:0 0 0 6px rgba(233,241,253,.75),0 10px 24px rgba(12,35,70,.1);transition:background-color .3s var(--ease),color .3s var(--ease),transform .35s var(--spring),box-shadow .3s var(--ease);z-index:2}
.fx-node svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fx-label{position:absolute;top:0;width:26cqw;max-width:290px;text-wrap:balance;padding:clamp(10px,1.4cqw,16px) clamp(12px,1.8cqw,22px);border-radius:16px;background:linear-gradient(180deg,#eef5ff,#e3eefd);border:1px solid #d7e6fb;color:var(--color-primary-deep);font-size:clamp(14px,1.55cqw,16px);font-weight:600;line-height:1.4;text-align:center;transform:translateY(-50%);transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .35s var(--ease)}
.fx-item.l .fx-label{right:calc(clamp(54px,6.8cqw,70px) / 2 + clamp(14px,2.4cqw,30px))}
.fx-item.r .fx-label{left:calc(clamp(54px,6.8cqw,70px) / 2 + clamp(14px,2.4cqw,30px))}
.fx-item.b .fx-label{top:calc(clamp(54px,6.8cqw,70px) / 2 + 16px);left:0;transform:translateX(-50%)}
.fx-item:hover .fx-node{background:linear-gradient(150deg,#1f6fe0,#0044aa);color:#fff;border-color:transparent;transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 0 7px rgba(51,204,255,.22),0 14px 30px rgba(0,68,170,.3)}
.fx-item:hover .fx-label{background:#fff;border-color:#9fc8f2;color:var(--color-primary);box-shadow:0 14px 30px rgba(12,35,70,.12)}
.fx-item.l:hover .fx-label{transform:translate(-4px,-50%)}
.fx-item.r:hover .fx-label{transform:translate(4px,-50%)}
.fx-item.b:hover .fx-label{transform:translate(-50%,4px)}
/* Xuất hiện: lõi trước, rồi lần lượt từng nút + nhãn */
.fx-hub.in .fx-core{animation:fxPop .7s var(--spring) .1s backwards}
.fx-hub.in .fx-node{animation:fxPop .55s var(--spring) calc(.35s + var(--i) * .08s) backwards}
.fx-hub.in .fx-item.l .fx-label{animation:fxInL .6s var(--ease) calc(.45s + var(--i) * .08s) backwards}
.fx-hub.in .fx-item.r .fx-label{animation:fxInR .6s var(--ease) calc(.45s + var(--i) * .08s) backwards}
.fx-hub.in .fx-item.b .fx-label{animation:fxInB .6s var(--ease) calc(.45s + var(--i) * .08s) backwards}
.fx-hub.in .fx-ring{animation:fxFade 1s ease .2s backwards}
@keyframes fxPop{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}}
@keyframes fxInL{from{opacity:0;transform:translate(18px,-50%)}}
@keyframes fxInR{from{opacity:0;transform:translate(-18px,-50%)}}
@keyframes fxInB{from{opacity:0;transform:translate(-50%,-12px)}}
@keyframes fxFade{from{opacity:0}}
/* Khung hẹp: chuyển thành danh sách */
@container (max-width:780px){
  .fx-stage{aspect-ratio:auto}
  .fx-lines,.fx-core{display:none}
  .fx-list{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .fx-item,.fx-item.b{position:static;width:auto;height:auto;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
  .fx-node,.fx-item:hover .fx-node{position:static;flex:none;width:48px;height:48px;transform:none;box-shadow:0 0 0 4px rgba(233,241,253,.8)}
  .fx-label,.fx-item.l .fx-label,.fx-item.r .fx-label,.fx-item.b .fx-label,.fx-item:hover .fx-label{position:static;width:auto;max-width:none;padding:0;background:none;border:0;box-shadow:none;text-align:left;transform:none;font-size:16px}
  .fx-hub.in .fx-node,.fx-hub.in .fx-item .fx-label{animation:none}
}
@container (max-width:520px){.fx-list{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.fx-orbit,.fx-spoke{animation:none}}

/* Lợi ích của eNotaryID — 4 nhóm đối tượng (theo tài liệu giới thiệu 25/03/2026) */
.bn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bn-card{position:relative;display:flex;flex-direction:column;padding:20px 18px 18px;border-radius:24px;background:#fff;border:1px solid var(--color-border);box-shadow:0 1px 2px rgba(9,30,60,.05),0 12px 28px rgba(12,35,70,.07);overflow:hidden;overflow:clip;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.bn-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent))}
.bn-card:hover{transform:translateY(-4px);border-color:#c7daf5;box-shadow:0 2px 4px rgba(9,30,60,.05),0 22px 44px rgba(6,50,110,.12)}
.bn-card header{display:flex;align-items:center;gap:12px;min-height:76px;padding-bottom:14px;margin-bottom:4px;border-bottom:1px dashed var(--color-border)}
.bn-ic{flex:none;width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(150deg,#1f6fe0,#0044aa);color:#fff;box-shadow:0 0 0 6px var(--color-primary-soft)}
.bn-ic .icon{width:22px;height:22px}
.bn-card h3{font-size:clamp(16px,1.3vw,18px);line-height:1.3;color:var(--color-ink)}
.bn-card ul{flex:1}
.bn-card li{display:flex;gap:8px;padding:8px 0;font-size:14px;line-height:1.5;color:var(--color-ink-2)}
.bn-card li + li{border-top:1px solid #eef3fa}
.bn-card li .icon{flex:none;width:18px;height:18px;margin-top:2px;color:var(--color-success)}
.bn-card li b{color:var(--color-primary);font-weight:700}
.bn-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:8px 16px;border-radius:999px;background:var(--color-primary-soft);color:var(--color-primary);font-weight:700;font-size:14px;transition:background-color .25s var(--ease),color .25s var(--ease),gap .25s var(--ease)}
.bn-cta .icon{width:16px;height:16px}
.bn-cta:hover{background:var(--color-primary);color:#fff;gap:12px}
@media (max-width:1100px){.bn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bn-card header{min-height:0}}
@media (max-width:820px){.bn-grid{grid-template-columns:1fr}.bn-card{padding:24px 20px 20px}}

/* Số liệu theo tài liệu giới thiệu: tiền tố "Hơn/Gần" + 2 điểm chứng thực */
.stat b small{font-size:.5em;font-weight:700;letter-spacing:0;margin-right:.1em;vertical-align:.2em}
.proofs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:22px}
.stats-note{margin-top:12px;font-size:12px;line-height:16px;color:var(--color-ink-3);text-align:center}
.law-list{max-width:760px;margin:24px auto 0;font-size:14px;line-height:20px;color:var(--color-ink-2);text-align:center;text-wrap:balance}
.law-list .law{white-space:nowrap}
.proof{display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:24px;background:linear-gradient(120deg,#0a3a8f,#0044aa 55%,#0f6fd0);color:rgba(255,255,255,.88);box-shadow:0 14px 30px rgba(0,36,92,.18)}
.proof p{font-size:16px;line-height:1.6}
.proof b{color:#fff}
.proof-ic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#99e8ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.proof-ic .icon{width:24px;height:24px}

/* Nút tải ứng dụng */
.store-btns{display:flex;flex-wrap:wrap;gap:12px}
.store-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 18px 8px 14px;border-radius:16px;background:#0b1730;color:#fff;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
.store-btn:hover{transform:translateY(-2px);background:#14254a;box-shadow:0 10px 22px rgba(9,25,55,.25)}
.store-btn svg{width:24px;height:24px;fill:currentColor}
.store-btn span{display:flex;flex-direction:column;font-weight:700;font-size:16px;line-height:1.1}
.store-btn small{font-size:12px;font-weight:500;opacity:.75;margin-bottom:2px}
.store-btns.on-dark .store-btn{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);min-height:46px}
.store-btns.on-dark .store-btn:hover{background:rgba(255,255,255,.16)}

/* Giới thiệu + video */
.intro-in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center}
.intro-txt h2{margin-top:14px}
.intro-tag{margin-top:12px;font-size:18px;font-weight:700;color:var(--color-accent-strong)}
.intro-txt p:not(.intro-tag){margin-top:14px;color:var(--color-ink-2);font-size:16px;line-height:1.7}
.intro-video{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#0b1730;box-shadow:0 0 0 8px var(--color-primary-soft),0 30px 60px rgba(3,22,60,.22)}
.intro-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Giấy chứng nhận */
.cert-card{display:flex;flex-direction:column;width:230px;flex:none;border-radius:16px;background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.cert-card:hover{transform:translateY(-4px);border-color:#c7daf5;box-shadow:0 20px 40px rgba(12,35,70,.14)}
.cert-frame{display:grid;place-items:center;aspect-ratio:3/4;padding:14px;background:linear-gradient(160deg,#f5f9fe,#e8f0fb)}
.cert-frame img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;box-shadow:0 6px 16px rgba(9,25,55,.16);transition:transform .4s var(--ease)}
.cert-card:hover .cert-frame img{transform:scale(1.04)}
.cert-cap{padding:12px 14px 14px;font-size:12px;line-height:1.5;color:var(--color-ink-2)}

/* Khách hàng nói gì — băng chạy ngang */
.tm-wrap{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tm-track{display:flex;gap:20px;width:max-content;padding:10px 0 24px;animation:tmScroll 70s linear infinite}
.tm-dup{display:contents}
.tm-wrap:hover .tm-track{animation-play-state:paused}
@keyframes tmScroll{to{transform:translateX(calc(-50% - 10px))}}
.tm-card{position:relative;width:360px;flex:none;display:flex;flex-direction:column;padding:24px 24px 22px;border-radius:24px;background:#fff;border:1px solid var(--color-border);box-shadow:0 1px 2px rgba(9,30,60,.05),0 12px 28px rgba(12,35,70,.07)}
.tm-q{position:absolute;right:20px;top:18px;width:38px;height:38px;fill:none;stroke:#cfe0f7;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tm-stars{color:#f5b301;font-size:18px;letter-spacing:2px}
.tm-card blockquote{flex:1;margin-top:12px;font-size:16px;line-height:1.65;color:var(--color-ink-2)}
.tm-card figcaption{margin-top:16px;padding-top:14px;border-top:1px dashed var(--color-border);font-weight:700;color:var(--color-primary)}
@media (prefers-reduced-motion:reduce){.tm-track{animation:none}.tm-wrap{overflow-x:auto}.tm-dup{display:none}}

/* Tin tức */
.news-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.news-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.news-card{display:flex;flex-direction:column;height:100%;border-radius:16px;background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.news-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(12,35,70,.14)}
.news-img{aspect-ratio:16/10;overflow:hidden;background:#e8f0fb}
.news-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.news-card:hover .news-img img{transform:scale(1.05)}
.news-body{flex:1;display:flex;flex-direction:column;gap:14px;padding:16px 18px 18px}
.news-body b{font-size:16px;line-height:1.45;color:var(--color-ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--color-primary)}
.news-more .icon{width:15px;height:15px;transition:transform .25s var(--ease)}
.news-card:hover .news-more .icon{transform:translateX(3px)}
.news-all{margin-top:28px;text-align:center}

/* Đối tác */
.partners{padding-top:calc(var(--space-section) * .8)}

/* Footer: tải ứng dụng */
.f-apps{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:28px;border-top:1px dashed rgba(255,255,255,.14)}
.f-apps-txt{max-width:40ch}
.f-apps-txt p{line-height:1.65}
.f-apps-list{flex:none;flex-wrap:nowrap;gap:20px}
.f-app{display:flex;flex-direction:column;align-items:center;gap:12px;width:184px}
.f-app img{width:104px;height:104px;padding:6px;border-radius:12px;background:#fff}
.f-app .store-btn{width:100%;justify-content:center}
@media (max-width:820px){.f-apps{flex-direction:column;align-items:flex-start}}
@media (max-width:440px){.f-apps-list{gap:12px;width:100%}.f-app{flex:1;width:auto;min-width:0}.f-app .store-btn{padding:8px 10px}.f-app .store-btn span{font-size:14px}}

@media (max-width:1080px){
  .intro-in{grid-template-columns:1fr}
    .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
@media (max-width:820px){.proofs{grid-template-columns:1fr}}
@media (max-width:600px){
    .news-grid{grid-template-columns:1fr}
    .tm-card{width:290px}
}

/* Băng chạy ngang dùng chung (giấy chứng nhận, đối tác) */
.mq{--gap:20px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cert-card[hidden],.partner[hidden]{display:none}
.mq-track{display:flex;align-items:stretch;gap:var(--gap);width:max-content;padding:10px 0 24px;animation:mqScroll var(--dur,60s) linear infinite}
.mq-track.rev{animation-direction:reverse}
.mq-dup{display:contents}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes mqScroll{to{transform:translateX(calc(-50% - var(--gap) / 2))}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.mq{overflow-x:auto}.mq-dup{display:none}}
.partner-row{--gap:18px}
.partner{flex:none;display:grid;place-items:center;width:190px;height:104px;padding:12px 18px;border-radius:16px;background:#fff;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.partner:hover{transform:translateY(-3px);border-color:#c7daf5;box-shadow:0 12px 26px rgba(12,35,70,.12)}
.partner img{max-width:100%;max-height:72px;width:auto;height:auto}
@media (max-width:600px){.cert-card{width:190px}.partner{width:150px;height:86px}}

/* Bỏ nhãn "viên thuốc" (eyebrow/pill) đầu mỗi mục — tiêu đề lên sát đầu khối */
.sec-head h2,.intro-txt h2,.cta h2,#dang-ky .cta h2{margin-top:0}

/* Form: trạng thái lỗi gửi + đang gửi */
#dang-ky .ok.is-err{background:#fdecec;color:#b42318}
#dang-ky .btn[aria-busy=true]{opacity:.65;pointer-events:none}