*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem;color-scheme:dark}
body{margin:0;background:var(--c-bg);color:var(--c-ink);font:400 1rem/1.65 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}ul,ol{list-style:none}
h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.14;overflow-wrap:anywhere}
h1{font-size:clamp(2.5rem,2rem + 3vw,4.75rem);letter-spacing:-.04em;line-height:1.05}
h2{font-size:clamp(1.875rem,1.4rem + 2vw,3rem);letter-spacing:-.03em}
h3{font-size:1.125rem;font-weight:600;letter-spacing:-.012em}
a{color:inherit}img{display:block;max-width:100%;height:auto}[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--c-ac);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s4)}
.sec{padding:var(--s7) 0}
.alt{background:var(--c-1);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.head{max-width:44rem;margin:0 auto var(--s5);text-align:center}
.head p{margin-top:var(--s2);font-size:1.0625rem;color:var(--c-ink2)}
.num{font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:0 1.5rem;border:1px solid var(--c-ac);border-radius:var(--r);background:var(--c-ac);color:var(--c-acink);font:600 1rem/1 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .14s var(--ease),border-color .14s var(--ease),transform .14s var(--ease)}
.btn:hover{background:var(--c-ac2);border-color:var(--c-ac2)}
.btn:active{transform:translateY(1px)}
.btn--g{background:transparent;border-color:var(--c-line2);color:var(--c-ink)}
.btn--g:hover{background:var(--c-2);border-color:var(--c-ink2)}
.btn--s{min-height:2.5rem;padding:0 1rem;font-size:.875rem}

/* Thanh menu thu lai khi cuon */
.nav{position:sticky;top:0;z-index:30;display:flex;align-items:flex-start;height:4.25rem;pointer-events:none}
.nav__in{pointer-events:auto;display:flex;align-items:center;gap:var(--s5);width:100%;height:4.25rem;border:1px solid transparent;transition:max-width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),padding .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),border-radius .3s var(--ease)}
.nav.stuck .nav__in{width:calc(100% - 1.5rem);max-width:66rem;height:3.5rem;margin:.625rem auto 0;padding:0 .625rem 0 1.125rem;border-color:var(--c-line2);border-radius:1.125rem;background:rgba(12,15,13,.94)}
.brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.1875rem;letter-spacing:-.035em;text-decoration:none;white-space:nowrap}
.brand img{width:1.625rem;height:1.625rem}
.brand b{font-weight:500;color:var(--c-ink2)}
.nav__links{display:flex;gap:var(--s4);margin:0 auto}
.nav__links a{font-size:.875rem;font-weight:500;color:var(--c-ink2);text-decoration:none;white-space:nowrap;transition:color .14s var(--ease)}
.nav__links a:hover{color:var(--c-ink)}
.nav__right{display:flex;align-items:center;gap:var(--s1)}
.burger{display:none;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--c-line2);border-radius:var(--r);background:var(--c-2);color:var(--c-ink);cursor:pointer}
.burger i,.burger i::before,.burger i::after{display:block;width:1.125rem;height:2px;background:currentColor;transition:transform .2s var(--ease)}
.burger i{position:relative;margin:auto}.burger i::before,.burger i::after{content:"";position:absolute;left:0}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger[aria-expanded=true] i{background:transparent}
.burger[aria-expanded=true] i::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] i::after{transform:translateY(-6px) rotate(-45deg)}
.sheet{position:fixed;top:4.75rem;left:.75rem;right:.75rem;z-index:29;padding:var(--s1);background:var(--c-1);border:1px solid var(--c-line2);border-radius:1.125rem;box-shadow:0 24px 60px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.sheet.open{opacity:1;visibility:visible;transform:none}
.sheet a{display:flex;align-items:center;justify-content:space-between;min-height:3.25rem;padding:0 var(--s3);border-radius:var(--r);font-weight:600;text-decoration:none}
.sheet a::after{content:"›";color:var(--c-ink2)}
.prog{position:fixed;top:0;left:0;right:0;z-index:40;height:2px;background:var(--c-ac);transform:scaleX(0);transform-origin:left}

/* Hero */
#bg{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero{padding:var(--s6) 0 var(--s7)}
.hero__g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s6);align-items:center}
.kick{font-size:.875rem;font-weight:600;color:var(--c-ac)}
.hero h1{margin-top:var(--s2)}
.lede{margin-top:var(--s4);max-width:34rem;font-size:1.125rem;color:var(--c-ink2)}
.cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.from{margin-top:var(--s3);font-size:.875rem;color:var(--c-ink2)}.from b{color:var(--c-ink)}
.panel{padding:var(--s4);background:var(--c-1);border:1px solid var(--c-line2);border-radius:var(--R);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.panel__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.panel__top small{font-size:.8125rem;color:var(--c-ink2)}
.seg{display:inline-flex;padding:3px;background:var(--c-2);border-radius:var(--r)}
.seg button{min-height:2.25rem;padding:0 var(--s2);border:0;border-radius:8px;background:none;color:var(--c-ink2);font:600 .875rem/1 var(--font);white-space:nowrap;cursor:pointer;transition:color .14s var(--ease),background .14s var(--ease)}
.seg button:hover{color:var(--c-ink)}
.seg button[aria-selected=true]{background:var(--c-ink);color:var(--c-bg)}
.spec{margin-top:var(--s3);padding:var(--s2) var(--s3);background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r);font-size:.875rem;color:var(--c-ink2)}
.spec b{color:var(--c-ink);font-weight:600}
.log{margin-top:var(--s3)}
.log li{display:flex;align-items:center;gap:var(--s2);padding:.5rem 0;border-bottom:1px solid var(--c-line);font-size:.875rem;color:var(--c-line2)}
.log li::before{content:"";flex:none;width:.75rem;height:.75rem;border-radius:50%;border:1.5px solid var(--c-line2)}
.log li.now{color:var(--c-ink)}.log li.now::before{border-color:var(--c-ac)}
.log li.ok{color:var(--c-ink2)}.log li.ok::before{background:var(--c-ac);border-color:var(--c-ac)}
.ready{margin-top:var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r);background:var(--c-acsoft);font-size:.875rem;font-weight:600;color:var(--c-ac);opacity:0;transition:opacity .2s var(--ease)}
.ready.on{opacity:1}

/* So lieu va logo */
.facts{border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);background:var(--c-1)}
.facts ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.facts li{padding:var(--s4);border-right:1px solid var(--c-line)}.facts li:last-child{border-right:0}
.facts b{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.03em}
.facts span{font-size:.875rem;color:var(--c-ink2)}

/* Bang gia */
.term{display:flex;justify-content:center;margin-bottom:var(--s5)}
.term .seg button{min-height:2.75rem;padding:0 var(--s3)}
.term em{margin-left:.35em;font-style:normal;font-size:.75rem;color:var(--c-ac)}
.term [aria-selected=true] em{color:#3b6b12}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);align-items:stretch}
.card{position:relative;display:flex;flex-direction:column;padding:var(--s5) var(--s4) var(--s4);background:var(--c-1);border:1px solid var(--c-line);border-radius:var(--R);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.card:hover{border-color:var(--c-line2);transform:translateY(-4px)}
.card--hot{background:var(--c-2);border-color:var(--c-ac)}.card--hot:hover{border-color:var(--c-ac)}
.flag{position:absolute;top:-.75rem;left:var(--s4);padding:0 .5rem;border-radius:6px;background:var(--c-ac);color:var(--c-acink);font-size:.8125rem;font-weight:600;line-height:1.5rem}
.flag--g{background:var(--c-2);color:var(--c-ink2);border:1px solid var(--c-line2)}
.card h3{font-size:1.375rem}
.card__for{margin-top:var(--s1);min-height:3.2em;font-size:.875rem;color:var(--c-ink2)}
.price{margin-top:var(--s3);font-size:2rem;font-weight:700;letter-spacing:-.04em;line-height:1.1}
.price small{font-size:.875rem;font-weight:400;letter-spacing:0;color:var(--c-ink2)}
.was{display:block;min-height:1.4em;font-size:.875rem;color:var(--c-ink2);text-decoration:line-through}
.card ul{margin:var(--s3) 0 var(--s4);flex:1}
.card li{display:flex;justify-content:space-between;gap:var(--s3);padding:.5rem 0;border-top:1px solid var(--c-line);font-size:.875rem}
.card li span{color:var(--c-ink2)}.card li b{font-weight:600}
.card .btn{width:100%}
.note{margin-top:var(--s4);text-align:center;font-size:.875rem;color:var(--c-ink2)}
.dots{display:none}

/* Tu chon */
.cfg{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.cfg__l,.cfg__r{padding:var(--s5);background:var(--c-bg);border:1px solid var(--c-line2);border-radius:var(--R)}
.cfg__r{position:sticky;top:5.5rem}
.pre{display:flex;gap:var(--s1);margin-bottom:var(--s4);overflow-x:auto;scrollbar-width:none}
.pre::-webkit-scrollbar{display:none}
.pre button{flex:none;min-height:2.75rem;padding:0 var(--s3);border:1px solid var(--c-line2);border-radius:var(--r);background:var(--c-2);color:var(--c-ink);font:600 .875rem/1 var(--font);cursor:pointer}
.pre button[aria-pressed=true]{border-color:var(--c-ac);color:var(--c-ac)}
.sl{margin-bottom:var(--s3)}
.sl__t{display:flex;justify-content:space-between;align-items:baseline}
.sl label{font-weight:600}
.sl output{font-size:1.25rem;font-weight:700;color:var(--c-ac)}
.sl output small{font-size:.875rem;font-weight:400;color:var(--c-ink2)}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:2.75rem;margin:0;background:none;cursor:pointer;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--c-ac) var(--v,0%),var(--c-2) var(--v,0%))}
input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:var(--c-2)}
input[type=range]::-moz-range-progress{height:8px;border-radius:4px;background:var(--c-ac)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border:0;border-radius:50%;background:var(--c-ink);box-shadow:0 0 0 5px rgba(180,249,111,.2)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:var(--c-ink)}
.lab{display:block;margin:var(--s2) 0 var(--s1);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:var(--s1)}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:flex;align-items:center;min-height:2.75rem;padding:0 var(--s3);border:1px solid var(--c-line2);border-radius:var(--r);font-size:.875rem;font-weight:500}
.chips input:checked+span{border-color:var(--c-ac);background:var(--c-acsoft);color:var(--c-ac)}
.chips input:focus-visible+span{outline:2px solid var(--c-ac);outline-offset:2px}
.cfg__r small{color:var(--c-ink2)}
.cfg__p{margin:.125rem 0 var(--s3);font-size:clamp(2.25rem,2rem + 1vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:1.1}
.cfg__p span{font-size:.875rem;font-weight:400;letter-spacing:0;color:var(--c-ink2)}
.cfg__r ul{margin-bottom:var(--s3)}
.cfg__r li{display:flex;justify-content:space-between;gap:var(--s3);padding:.5rem 0;border-top:1px solid var(--c-line);font-size:.875rem}
.cfg__r li span{color:var(--c-ink2)}.cfg__r li b{font-weight:600;text-align:right}
.cfg__r .btn{width:100%}
.save{display:none;margin-top:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r);background:var(--c-acsoft);font-size:.875rem}
.save.on{display:block}.save a{color:var(--c-ac);font-weight:600}

/* Khoi anh va chu */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:center}
.split+.split{margin-top:var(--s7)}
.split:nth-child(even) figure{order:2}
.split figure{overflow:hidden;border:1px solid var(--c-line);border-radius:var(--R);background:var(--c-1)}
.split img{width:100%;aspect-ratio:3/2;object-fit:cover}
.split h2{font-size:clamp(1.625rem,1.3rem + 1.4vw,2.375rem)}
.split p{margin-top:var(--s3);color:var(--c-ink2);font-size:1.0625rem}
.ticks{margin-top:var(--s4)}
.ticks li{position:relative;padding:.375rem 0 .375rem 1.625rem;font-size:.9375rem}
.ticks li::before{content:"";position:absolute;left:.125rem;top:.8rem;width:.75rem;height:.4rem;border-left:2px solid var(--c-ac);border-bottom:2px solid var(--c-ac);transform:rotate(-45deg)}

/* Ung dung */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.app{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s4);background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--R);transition:border-color .2s var(--ease)}
.app:hover{border-color:var(--c-ac)}
.app img{flex:none;width:2.5rem;height:2.5rem;padding:.5rem;border-radius:var(--r);background:var(--c-2)}
.app p{margin-top:.125rem;font-size:.875rem;color:var(--c-ink2)}

/* Bai toan */
.who{display:flex;justify-content:center;margin-bottom:var(--s4)}
.who .seg button{min-height:2.75rem;padding:0 var(--s3)}
.fit{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s5);padding:var(--s5);background:var(--c-1);border:1px solid var(--c-line);border-radius:var(--R)}
.fit h3{font-size:1.625rem;letter-spacing:-.025em}
.fit__w{margin-top:var(--s2);color:var(--c-ink2)}
.fit__b{padding:var(--s4);background:var(--c-bg);border:1px solid var(--c-line2);border-radius:var(--r)}
.fit__b span{display:block;font-size:.875rem;color:var(--c-ink2)}
.fit__b b{display:block;margin:.125rem 0 var(--s1);font-size:1.25rem}
.fit__b p{margin-bottom:var(--s3);font-size:.875rem;color:var(--c-ink2)}
.fit__b .btn{width:100%}

/* 4 buoc ghim */
.story{height:320vh}
.story__p{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.story__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s6);align-items:center;width:100%}
.story h2{margin-bottom:var(--s4)}
.steps li{position:relative;padding:var(--s3) 0 var(--s3) var(--s4);opacity:.45;transition:opacity .2s var(--ease)}
.steps li::before,.steps li::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--c-line)}
.steps li::after{background:var(--c-ac);transform:scaleY(var(--f,0));transform-origin:top}
.steps li.on{opacity:1}
.steps b{display:block;font-size:1.125rem;font-weight:600}
.steps span{font-size:.875rem;color:var(--c-ink2)}
.stage{position:relative;height:25rem}
.sc{position:absolute;inset:0;padding:var(--s5);background:var(--c-1);border:1px solid var(--c-line2);border-radius:var(--R);opacity:0;transform:translateY(20px);transition:opacity .35s var(--ease),transform .35s var(--ease);overflow:hidden}
.sc.on{opacity:1;transform:none}
.sc small{color:var(--c-ink2)}
.sc h3{margin:.125rem 0 var(--s4);font-size:1.375rem}
.op{display:flex;justify-content:space-between;padding:var(--s3);margin-bottom:var(--s1);border:1px solid var(--c-line2);border-radius:var(--r);font-size:.875rem}
.op.sel{border-color:var(--c-ac);background:var(--c-acsoft)}.op b{font-weight:600}
.qr{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s4);align-items:center}
.qr i{display:block;aspect-ratio:1;border-radius:var(--r);background:repeating-conic-gradient(var(--c-ink) 0 25%,var(--c-2) 0 50%) 0 0/1.1rem 1.1rem}
.qr b{display:block;font-size:1.75rem;letter-spacing:-.03em}
.bars li{margin-bottom:var(--s2);font-size:.875rem;color:var(--c-ink2)}
.bars i{display:block;height:6px;margin-top:6px;border-radius:3px;background:var(--c-ac);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.sc.on .bars i{transform:scaleX(1)}
.bars li:nth-child(2) i{transition-delay:.15s}.bars li:nth-child(3) i{transition-delay:.3s}.bars li:nth-child(4) i{transition-delay:.45s}
.lv{display:flex;justify-content:space-between;align-items:center;padding:var(--s3);margin-bottom:var(--s1);border:1px solid var(--c-line);border-radius:var(--r);font-size:.875rem}
.lv b{font-weight:600}
.lv em{display:inline-flex;align-items:center;gap:6px;font-style:normal;color:var(--c-ac)}
.lv em::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-ac)}

/* Hoi dap, chot, chan trang */
.faq{max-width:48rem;margin:0 auto}
.faq details{border-bottom:1px solid var(--c-line)}.faq details:first-child{border-top:1px solid var(--c-line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:3.5rem;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:1.25rem;color:var(--c-ac)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:var(--s3);color:var(--c-ink2)}
.close{position:relative;overflow:hidden;padding:9rem 0;text-align:center;border-top:1px solid var(--c-line)}
.close img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.close::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--c-bg),transparent 40%,transparent 60%,var(--c-bg))}
.close .wrap{position:relative;z-index:1}
.close h2{font-size:clamp(2.25rem,1.6rem + 3vw,4rem);letter-spacing:-.035em}
.close p{margin:var(--s2) auto var(--s4);max-width:34rem;color:var(--c-ink2)}
.foot{padding:var(--s5) 0;border-top:1px solid var(--c-line);font-size:.875rem;color:var(--c-ink2)}
.foot__i{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3)}
.foot nav{display:flex;flex-wrap:wrap;gap:var(--s4)}
.foot a{text-decoration:none;white-space:nowrap}.foot nav a:hover{color:var(--c-ink)}
.buybar{display:none}

/* Hien dan: chi transform va opacity de muot */
.js .up{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .up.in{opacity:1;transform:none}

/* Dat mua */
.order{padding:var(--s5) 0 var(--s6)}
.order h1{font-size:clamp(1.875rem,1.4rem + 2vw,2.625rem);letter-spacing:-.03em;margin-bottom:var(--s5)}
.order__g{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--s6);align-items:start}
.field{border:0;margin:0 0 var(--s5);padding:0;min-width:0}
.field legend,.field>label{display:block;padding:0;margin-bottom:var(--s2);font-weight:600}
.ch{display:block;cursor:pointer}
.ch input{position:absolute;opacity:0;pointer-events:none}
.ch__b{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.125rem var(--s3);padding:var(--s3);margin-bottom:var(--s1);border:1px solid var(--c-line2);border-radius:var(--r);background:var(--c-1);transition:border-color .14s var(--ease)}
.ch:hover .ch__b{border-color:var(--c-ink2)}
.ch input:checked+.ch__b{border-color:var(--c-ac);background:var(--c-acsoft);box-shadow:inset 0 0 0 1px var(--c-ac)}
.ch input:focus-visible+.ch__b{outline:2px solid var(--c-ac);outline-offset:2px}
.ch__n{font-weight:600}.ch__s{grid-column:1/-1;font-size:.875rem;color:var(--c-ink2)}.ch__p{font-weight:600;white-space:nowrap}
.terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1)}
.terms .ch__b{display:block;margin:0;text-align:center;font-size:.875rem;font-weight:600}
.terms small{display:block;font-weight:500;color:var(--c-ac)}
.input{display:block;width:100%;min-height:3rem;padding:0 var(--s3);border:1px solid var(--c-line2);border-radius:var(--r);background:var(--c-1);color:var(--c-ink);font:400 1rem/1 var(--font)}
.input[aria-invalid=true]{border-color:#ff8a6b}
.hint{margin-top:var(--s1);font-size:.875rem;color:var(--c-ink2)}.hint--e{color:#ff8a6b}
.more{display:inline-block;line-height:2.75rem;font-size:.875rem;color:var(--c-ac)}
.sum{position:sticky;top:5.5rem;padding:var(--s4);background:var(--c-1);border:1px solid var(--c-line2);border-radius:var(--R)}
.sum h2{font-size:1.125rem;letter-spacing:-.01em;margin-bottom:var(--s3)}
.sum dl{margin:0 0 var(--s3)}
.sum dl div{display:flex;justify-content:space-between;gap:var(--s3);padding:.25rem 0;font-size:.875rem}
.sum dt{color:var(--c-ink2)}.sum dd{margin:0;text-align:right}
.sum .off{color:var(--c-ac)}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--c-line);font-weight:600}
.tot b{font-size:1.5rem;letter-spacing:-.03em;color:var(--c-ac)}
.sum .btn{width:100%}
.done{display:none;margin-top:var(--s3);font-size:.875rem;color:var(--c-ink2)}.done.on{display:block}

@media (max-width:60rem){
  :root{--s7:4.5rem}
  .wrap{padding:0 var(--s3)}
  .nav__links,.nav__right .btn{display:none}
  .burger{display:block}
  .nav__right{margin-left:auto}
  .nav.stuck .nav__in{height:3.75rem;margin-top:.5rem;padding:0 .5rem 0 1rem}
  .hero{padding:var(--s4) 0 var(--s6)}
  .hero__g,.split,.cfg,.fit,.story__g,.order__g{grid-template-columns:minmax(0,1fr)}
  .hero__g{gap:var(--s5)}
  .hero h1{font-size:clamp(2.5rem,11.5vw,3.75rem)}
  .lede{font-size:1rem}
  .cta .btn{flex:1 1 100%;min-height:3.25rem}
  .panel .seg{display:flex;width:100%}.panel .seg button{flex:1;min-height:2.75rem}.panel__top small{display:none}
  .facts ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li{padding:var(--s3)}.facts li:nth-child(2){border-right:0}.facts li:nth-child(-n+2){border-bottom:1px solid var(--c-line)}
  .facts b{font-size:1.25rem}
  .term{justify-content:flex-start;margin:0 calc(var(--s3)*-1) var(--s3);padding:0 var(--s3);overflow-x:auto;scrollbar-width:none}
  .term::-webkit-scrollbar,.who::-webkit-scrollbar{display:none}
  .cards{display:flex;gap:var(--s2);margin:0 calc(var(--s3)*-1);padding:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 84%;scroll-snap-align:center;padding:var(--s4)}
  .card:hover{transform:none}
  .card__for{min-height:0}
  .dots{display:flex;justify-content:center;gap:6px}
  .dots i{width:7px;height:7px;border-radius:50%;background:var(--c-line2)}.dots i.on{background:var(--c-ac)}
  .cfg__l,.cfg__r{padding:var(--s4)}.cfg__r{position:static}
  .split{gap:var(--s4)}.split+.split{margin-top:var(--s6)}
  .split:nth-child(even) figure{order:0}
  .apps{grid-template-columns:minmax(0,1fr);gap:var(--s1)}.app{padding:var(--s3)}
  .who{justify-content:flex-start;margin:0 calc(var(--s3)*-1) var(--s3);padding:0 var(--s3);overflow-x:auto;scrollbar-width:none}
  .fit{padding:var(--s4);gap:var(--s4)}
  .story{height:300vh}
  .story__g{gap:var(--s3)}
  .story h2{margin-bottom:var(--s2);font-size:1.625rem}
  .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem}
  .steps li{padding:var(--s1) 0 0}
  .steps li::before,.steps li::after{inset:0 0 auto 0;width:auto;height:2px}
  .steps li::after{transform:scaleX(var(--f,0));transform-origin:left}
  .steps b{font-size:.75rem;line-height:1.25}.steps span{display:none}
  .stage{height:22rem}.sc{padding:var(--s4)}
  .close{padding:6rem 0}
  .foot{padding-bottom:6.5rem}
  .buybar{position:fixed;left:.75rem;right:.75rem;bottom:max(.75rem,env(safe-area-inset-bottom));z-index:25;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:.5rem .5rem .5rem 1rem;background:var(--c-1);border:1px solid var(--c-line2);border-radius:1.125rem;box-shadow:0 12px 40px rgba(0,0,0,.6);transform:translateY(160%);transition:transform .25s var(--ease)}
  .buybar.on{transform:none}
  .buybar small{display:block;font-size:.75rem;color:var(--c-ink2)}.buybar b{font-weight:700}
  .buybar .btn{min-height:2.75rem;flex:none}
  .order{padding:var(--s3) 0 var(--s5)}.order__g{gap:0}
  .sum{position:sticky;top:auto;bottom:max(.75rem,env(safe-area-inset-bottom));padding:var(--s3);box-shadow:0 12px 40px rgba(0,0,0,.6)}
  .sum h2,.sum dl{display:none}.tot{padding:0 0 var(--s2);border:0}
  .terms{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*{transition-duration:.01ms!important}
  .js .up{opacity:1;transform:none}
  .story{height:auto}.story__p{position:static;height:auto;padding:var(--s6) 0}.stage{height:auto}.sc{position:static;opacity:1;transform:none;margin-bottom:var(--s2)}
}

/* He chu moi: tieu de Inter Tight, so va nhan JetBrains Mono */
body{font-size:1rem;line-height:1.6;font-feature-settings:"cv11","ss03";color:var(--c-ink)}
h1,h2,h3,.brand,.btn,.price,.cfg__p,.big{font-family:var(--font-d)}
h1{font-size:clamp(2.75rem,1.9rem + 4.1vw,5.5rem);font-weight:600;letter-spacing:-.045em;line-height:1.02}
h1 span{display:block;color:var(--c-ink2)}
h2{font-size:clamp(2rem,1.5rem + 2.4vw,3.5rem);font-weight:600;letter-spacing:-.04em;line-height:1.06}
h3{font-size:1.125rem;font-weight:600;letter-spacing:-.018em}
.eye{font:500 .75rem/1.4 var(--font-m);letter-spacing:.08em;text-transform:uppercase;color:var(--c-ac);margin-bottom:var(--s2)}
.lede{font-size:1.1875rem;line-height:1.55;letter-spacing:-.011em;max-width:35rem}
.head p:not(.eye){font-size:1.125rem;letter-spacing:-.011em}
.btn{font-weight:600;font-size:.9375rem;letter-spacing:-.01em}
.nav__links a{font-weight:450;letter-spacing:-.006em}
.brand{font-weight:600;letter-spacing:-.04em}
.from{font-size:.875rem}
.from b{font-weight:600}
.panel{background:linear-gradient(180deg,var(--c-2),var(--c-1));box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,0 40px 100px rgba(0,0,0,.6),0 0 120px rgba(150,240,90,.07)}
.spec{font-family:var(--font-m);font-size:.8125rem}
.seg button{font-weight:500;font-family:var(--font)}
.hero{padding:var(--s6) 0 var(--s6)}

/* Luoi bento */
.bento-s{padding:0 0 var(--s6)}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(0,auto);gap:var(--s3)}
.tile{position:relative;overflow:hidden;grid-column:span 2;display:flex;flex-direction:column;padding:var(--s4);min-height:13rem;background:linear-gradient(180deg,var(--c-2),var(--c-1));border:1px solid var(--c-line);border-radius:var(--R)}
.tile p:not(.eye){margin-top:auto;padding-top:var(--s2);font-size:.9375rem;color:var(--c-ink2);line-height:1.5}
.big{display:block;font-size:clamp(3.25rem,2.4rem + 3vw,5.5rem);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--c-ink)}
.big small{font-size:.4em;font-weight:500;letter-spacing:-.02em;color:var(--c-ink2)}
.big--s{font-size:clamp(1.75rem,1.4rem + 1.1vw,2.5rem);letter-spacing:-.035em;line-height:1.1}
.tile--cpu{grid-column:span 4;grid-row:span 2;min-height:27rem;justify-content:flex-end}
.tile--cpu img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;opacity:.9}
.tile--cpu::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(5,7,6,.92) 88%)}
.tile--cpu>div{position:relative;z-index:1;max-width:30rem}
.tile--cpu p:not(.eye){margin-top:var(--s2);padding:0;font-size:1.0625rem}
.tile--speed{grid-row:span 2;justify-content:flex-start}
.tile--speed p:not(.eye){margin-top:var(--s2)}
.vs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s3);align-items:center;margin-top:auto;padding-top:var(--s4);font:500 .75rem/1 var(--font-m);color:var(--c-ink2)}
.vs i{display:block;height:10px;width:var(--w);border-radius:3px;background:var(--c-ac);transform-origin:left}
.vs i.sata{background:var(--c-line2)}
.js .bento.up .vs i{transform:scaleX(0);transition:transform 1.1s var(--ease) .25s}
.js .bento.in .vs i{transform:none}
.tile--apps{grid-column:span 2}
.bento .tile:nth-child(3),.bento .tile:nth-child(4){grid-column:span 2}
.logos{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:auto}
.logos img{width:3rem;height:3rem;padding:.75rem;border-radius:var(--r);background:var(--c-bg);border:1px solid var(--c-line)}

/* The gia */
.card{padding:var(--s5) var(--s4) var(--s4);background:linear-gradient(180deg,var(--c-2),var(--c-1) 55%)}
.card--hot{background:linear-gradient(180deg,rgba(180,249,111,.09),var(--c-1) 45%);box-shadow:0 0 90px rgba(150,240,90,.08)}
.card h3{font-size:1.25rem;letter-spacing:-.025em}
.card__for{font-size:.9375rem;line-height:1.45;min-height:2.9em}
.price{margin-top:var(--s4);font-size:clamp(2.5rem,2rem + 1.2vw,3.25rem);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.price small{font:400 .875rem/1 var(--font);letter-spacing:0}
.was{font-size:.8125rem;margin-top:.375rem}
.card ul{margin-top:var(--s4)}
.card li{padding:.625rem 0;font-size:.875rem}
.card li b{font:500 .8125rem/1.5 var(--font-m)}
.flag{font:500 .6875rem/1.75rem var(--font-m);letter-spacing:.04em;text-transform:uppercase;padding:0 .625rem}
.term .seg button{font-size:.875rem}
.term em{font-family:var(--font-m);font-size:.6875rem}
.note{font-size:.8125rem}

/* Tu chon */
.cfg__l,.cfg__r{background:linear-gradient(180deg,var(--c-2),var(--c-1));border-color:var(--c-line)}
.alt .cfg__l,.alt .cfg__r{background:var(--c-bg)}
.sl output{font:500 1.125rem/1 var(--font-m);letter-spacing:-.02em}
.cfg__p{font-weight:600;letter-spacing:-.05em;font-size:clamp(2.75rem,2rem + 2vw,3.75rem);line-height:1}
.cfg__r li b{font:500 .8125rem/1.5 var(--font-m)}
.pre button,.chips span{font-weight:500}

/* Khoi anh */
.split{gap:var(--s7)}
.split h2{font-size:clamp(1.875rem,1.4rem + 1.9vw,3rem)}
.split p:not(.eye){font-size:1.125rem;line-height:1.55;letter-spacing:-.011em}
.split figure{box-shadow:0 30px 80px rgba(0,0,0,.45)}
.ticks li{font-size:1rem}

/* Ung dung */
.apps{gap:var(--s2)}
.app{align-items:center;padding:var(--s4)}
.app img{width:3rem;height:3rem;padding:.75rem;background:var(--c-2)}
.app p{font-size:.9375rem}

/* Bai toan, buoc, hoi dap */
.fit{background:linear-gradient(120deg,var(--c-2),var(--c-1))}
.fit h3{font-size:clamp(1.625rem,1.3rem + 1.2vw,2.25rem);letter-spacing:-.035em}
.fit__w{font-size:1.0625rem}
.steps b{font-family:var(--font-d)}
.faqw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s6);align-items:start}
.faqw h2{font-size:clamp(2rem,1.5rem + 1.8vw,3rem)}
.faqn{margin-top:var(--s3);color:var(--c-ink2)}
.faq{max-width:none;margin:0}
.faq summary{font-weight:500;letter-spacing:-.011em;min-height:3.75rem}
.close{padding:11rem 0}
.close h2{font-size:clamp(2.5rem,1.6rem + 4.2vw,5.5rem);font-weight:600;letter-spacing:-.045em}
.close p{font-size:1.125rem}

/* Chan trang */
.foot{padding:var(--s6) 0 var(--s5)}
.foot__g{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--s5)}
.foot__g p{margin-top:var(--s2);max-width:22rem}
.foot nav{display:flex;flex-direction:column;gap:.625rem}
.foot h3{font:500 .75rem/1.4 var(--font-m);letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink);margin-bottom:.25rem}
.foot__c{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--c-line);font:400 .75rem/1 var(--font-m)}
.foot__i{display:none}

@media (max-width:60rem){
  h1{font-size:clamp(2.625rem,11vw,3.75rem)}
  .lede{font-size:1.0625rem}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1)}
  .tile{grid-column:span 1;min-height:11rem;padding:var(--s3)}
  .tile--cpu,.tile--speed,.tile--apps{grid-column:span 2;grid-row:auto}
  .tile--cpu{min-height:22rem}
  .tile--speed{min-height:0}
  .bento .tile:nth-child(3),.bento .tile:nth-child(4){grid-column:span 1}
  .big--s{font-size:1.5rem}
  .tile p:not(.eye){font-size:.875rem}
  .split{gap:var(--s4)}
  .split p:not(.eye){font-size:1rem}
  .app{padding:var(--s3)}
  .faqw{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .close{padding:7rem 0}
  .foot__g{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
  .foot__g>div:first-child{grid-column:span 2}
  .foot{padding-bottom:7rem}
}

/* Tinh chinh sau khi xem anh: tieng Viet co dau can khoang chu rong hon */
h1{font-size:clamp(2.625rem,1.9rem + 3vw,4.5rem);letter-spacing:-.032em;line-height:1.08}
h2{letter-spacing:-.028em;line-height:1.12}
.brand{letter-spacing:-.025em}
.btn{letter-spacing:0}
.big{letter-spacing:-.04em}
.big--s{letter-spacing:-.026em}
.price{letter-spacing:-.035em}
.cfg__p{letter-spacing:-.035em}
.close h2{font-size:clamp(2.5rem,1.6rem + 3.6vw,4.75rem);letter-spacing:-.032em}
.fit h3{letter-spacing:-.025em}
.card h3{letter-spacing:-.018em}
.head .eye{margin-top:0;font-size:.75rem;letter-spacing:.08em;color:var(--c-ac)}

/* Tieu de hero luon gon 2 dong tren may tinh */
.hero__g{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s5)}
h1{font-size:clamp(2.5rem,1.5rem + 2.9vw,3.875rem);letter-spacing:-.026em;line-height:1.1;text-wrap:balance}
h1 span{white-space:nowrap}
h2{text-wrap:balance}
.btn,.nav__links a{font-family:var(--font);letter-spacing:-.006em}
@media (max-width:60rem){
  h1{font-size:clamp(2.125rem,9.4vw,3.25rem)}
  h1 span{white-space:normal}
  .hero__g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:78rem){h1 span{white-space:normal}}

/* Bento lam lai: hinh ve thay anh, co chu dong deu */
.bento{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3)}
.tile,.bento .tile:nth-child(3),.bento .tile:nth-child(4),.tile--apps{grid-column:span 2;grid-row:auto;min-height:0;padding:var(--s4);border-color:var(--c-line);background:linear-gradient(180deg,#121513,var(--c-1))}
.tile h3{font-size:1.5rem;font-weight:600;letter-spacing:-.022em;line-height:1.2}
.tile p:not(.eye){margin-top:var(--s1);padding:0;font-size:.9375rem;line-height:1.55;color:var(--c-ink2)}
.tile .eye{margin-bottom:var(--s1)}
.tile--a,.tile--b{grid-column:span 3;gap:var(--s4);justify-content:space-between;min-height:19rem}
.tile--d{grid-column:span 6;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s3) var(--s4)}
.tile--d .eye{margin:0;white-space:nowrap}
.cores{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-top:auto}
.cores i{aspect-ratio:1;border-radius:4px;background:var(--c-ac);opacity:.14;animation:core 3.2s var(--d) ease-in-out infinite;animation-play-state:paused}
.bento.in .cores i{animation-play-state:running}
@keyframes core{0%,100%{opacity:.14}35%{opacity:.95}}
.vs{grid-template-columns:minmax(0,1fr) auto;gap:.375rem var(--s3);margin-top:auto;padding:0;font:500 .8125rem/1.3 var(--font-m)}
.vs span{color:var(--c-ink2)}
.vs b{font-weight:500;color:var(--c-ink);text-align:right}
.vs i{grid-column:1/-1;height:12px;margin-bottom:var(--s2);border-radius:4px}
.vs i:last-child{margin-bottom:0}
.logos{gap:var(--s4);margin:0;align-items:center}
.logos span{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:500;color:var(--c-ink)}
.logos img{width:1.375rem;height:1.375rem;padding:0;border:0;border-radius:0;background:none}
@media (max-width:60rem){
  .bento{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .tile,.tile--a,.tile--b,.tile--d,.bento .tile:nth-child(3),.bento .tile:nth-child(4){grid-column:auto;min-height:0;padding:var(--s4)}
  .tile h3{font-size:1.375rem}
  .tile--a,.tile--b{gap:var(--s4)}
  .tile--d{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .logos{gap:var(--s2) var(--s3)}
}
@media (prefers-reduced-motion:reduce){.cores i{animation:none;opacity:.8}}

/* Luoi nhan nho va diu hon */
.cores{grid-template-columns:repeat(16,minmax(0,1fr));gap:5px}
.cores i{aspect-ratio:auto;height:2rem;border-radius:3px;opacity:.1}
@keyframes core{0%,100%{opacity:.1}35%{opacity:.75}}
.tile--a,.tile--b{min-height:15rem}
.tile h3{letter-spacing:-.016em}
@media (max-width:60rem){.cores{grid-template-columns:repeat(16,minmax(0,1fr));gap:3px}.cores i{height:1.5rem;border-radius:2px}}

/* Loi ich thay khoi thong so */
.why{padding:0 0 var(--s6)}
.why__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.why__i{padding:var(--s5) var(--s4);border-right:1px solid var(--c-line)}
.why__i:first-child{padding-left:0}.why__i:last-child{padding-right:0;border-right:0}
.why__i svg{display:block;width:1.75rem;height:1.75rem;margin-bottom:var(--s3);fill:none;stroke:var(--c-ac);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.why__i h3{font-size:1.25rem;letter-spacing:-.014em}
.why__i p{margin-top:var(--s1);font-size:.9375rem;line-height:1.55;color:var(--c-ink2)}
.spec{font-family:var(--font);font-size:.875rem}
@media (max-width:60rem){
  .why__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why__i,.why__i:first-child,.why__i:last-child{padding:var(--s4) var(--s3);border-right:0;border-bottom:1px solid var(--c-line)}
  .why__i:nth-child(odd){padding-left:0;border-right:1px solid var(--c-line)}
  .why__i:nth-child(even){padding-right:0}
  .why__i:nth-last-child(-n+2){border-bottom:0}
  .why__i h3{font-size:1.0625rem}.why__i p{font-size:.875rem}
}

/* The gia day du kieu trang ban hang */
.cards{align-items:start}
.card{padding:var(--s4)}
.deal{display:flex;align-items:center;gap:.625rem;min-height:1.75rem;margin-top:var(--s3)}
.was{display:inline;min-height:0;margin:0;font-size:1rem;color:var(--c-ink2)}
.off{padding:.125rem .5rem;border-radius:6px;background:var(--c-acsoft);color:var(--c-ac);font-size:.8125rem;font-weight:600}
.off:empty{display:none}
.price{margin-top:var(--s1)}
.dealn{margin:.25rem 0 var(--s3);font-size:.875rem;color:var(--c-ink2)}
.loc{margin-top:var(--s2);text-align:center;font-size:.8125rem;color:var(--c-ink2)}
.card h4{margin:var(--s3) 0 .25rem;padding-top:var(--s3);border-top:1px solid var(--c-line);font:600 .9375rem/1.3 var(--font-d);letter-spacing:-.006em}
.card ul.feat-l{flex:none;margin:var(--s2) 0 0}
.card .loc+ul.feat-l{margin-top:var(--s3)}
.card ul.feat-l li{display:block;position:relative;padding:.3125rem 0 .3125rem 1.5rem;border:0;font-size:.9375rem;color:var(--c-ink)}
.card ul.feat-l li::before{content:"";position:absolute;left:.125rem;top:.8rem;width:.7rem;height:.35rem;border-left:2px solid var(--c-ac);border-bottom:2px solid var(--c-ac);transform:rotate(-45deg)}
.card ul.feat-l b{font:600 .9375rem/1.4 var(--font)}
.card .btn{min-height:3.125rem}
/* Dai so */
.stats{padding:var(--s6) 0;background:var(--c-1);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.sec-t{max-width:46rem;margin:0 auto var(--s5);text-align:center}
.sec-t p{margin-top:var(--s2);font-size:1.125rem;color:var(--c-ink2)}
.stats__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.stats__g li{padding:var(--s4) var(--s3);text-align:center;background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--R)}
.stats__g b{display:block;font:600 clamp(2.5rem,2rem + 1.6vw,3.5rem)/1 var(--font-d);letter-spacing:-.03em;color:var(--c-ac)}
.stats__g span{display:block;margin-top:var(--s2);font-size:.9375rem;color:var(--c-ink2)}
.why{padding:var(--s7) 0 var(--s6)}
@media (max-width:60rem){
  .card{padding:var(--s4)}
  .stats__g{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1)}
  .stats__g li{padding:var(--s3) var(--s2)}
  .stats{padding:var(--s6) 0}
}
.price{display:flex;align-items:baseline;gap:.25rem;flex-wrap:nowrap;white-space:nowrap;font-size:clamp(2rem,1.7rem + .9vw,2.625rem)}
.price small{margin-left:.125rem}
.cards{align-items:stretch}
.card__for{min-height:2.9em}

/* Dich vu */
.svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.svc{display:flex;flex-direction:column;padding:var(--s5) var(--s4) var(--s4);background:linear-gradient(180deg,#121513,var(--c-1));border:1px solid var(--c-line);border-radius:var(--R);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.svc:hover{border-color:var(--c-ac);transform:translateY(-4px)}
.svc svg{width:2rem;height:2rem;margin-bottom:var(--s3);fill:none;stroke:var(--c-ac);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:1.5rem;letter-spacing:-.016em}
.svc>p{margin-top:var(--s2);color:var(--c-ink2);line-height:1.55}
.svc .feat-l{flex:1;margin:var(--s3) 0 var(--s4)}
.svc .feat-l li{position:relative;padding:.3125rem 0 .3125rem 1.5rem;font-size:.9375rem}
.svc .feat-l li::before{content:"";position:absolute;left:.125rem;top:.8rem;width:.7rem;height:.35rem;border-left:2px solid var(--c-ac);border-bottom:2px solid var(--c-ac);transform:rotate(-45deg)}
.svc .btn{width:100%}
/* Tu van */
.tv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:start}
.tv__n{margin-top:var(--s2);font-size:1.125rem;color:var(--c-ink2)}
.tv__f{display:grid;gap:var(--s3);padding:var(--s4);background:var(--c-bg);border:1px solid var(--c-line2);border-radius:var(--R)}
.tv__f label{display:grid;gap:.375rem;font-size:.9375rem;font-weight:500}
.tv__f select.input{appearance:auto}
.tv__f .btn{width:100%}
.tv__f .hint:empty{display:none}
@media (max-width:60rem){.svcs,.tv{grid-template-columns:minmax(0,1fr);gap:var(--s3)}.svc{padding:var(--s4)}}
.sec-t .eye{margin:0 0 var(--s2);font-size:.75rem;letter-spacing:.08em;color:var(--c-ac)}

/* Chu: tieu de Inter ro dau tieng Viet, nhan khong dung font code */
h1,h2,h3,.price,.cfg__p,.brand{font-family:var(--font)}
h1{font-size:clamp(2.5rem,1.6rem + 3vw,4.125rem);font-weight:700;letter-spacing:-.03em;line-height:1.12}
h1 span{color:var(--c-ac)}
h2{font-size:clamp(1.875rem,1.5rem + 1.7vw,2.875rem);font-weight:700;letter-spacing:-.025em;line-height:1.18}
h3,.tile h3{font-weight:600;letter-spacing:-.012em}
.eye,.head .eye,.sec-t .eye{font:600 .875rem/1.4 var(--font);letter-spacing:0;text-transform:none;color:var(--c-ac)}
.lede{font-size:1.1875rem;line-height:1.6;letter-spacing:-.006em}
.price{font-weight:700;letter-spacing:-.03em}
.flag{font:600 .75rem/1.625rem var(--font);letter-spacing:0;text-transform:none}
.term em{font-family:var(--font);font-size:.75rem;font-weight:600}
.trust2{display:flex;flex-wrap:wrap;gap:.375rem 1.25rem;margin-top:var(--s4)}
.trust2 li{position:relative;padding-left:1.375rem;font-size:.9375rem;font-weight:500;color:var(--c-ink)}
.trust2 li::before{content:"";position:absolute;left:.125rem;top:.45rem;width:.7rem;height:.35rem;border-left:2px solid var(--c-ac);border-bottom:2px solid var(--c-ac);transform:rotate(-45deg)}
.from{margin-top:var(--s2)}
/* 4 ly do thanh the */
.why{padding:var(--s7) 0 var(--s6)}
.why__g{gap:var(--s3);border:0}
.why__i,.why__i:first-child,.why__i:last-child{padding:var(--s4);background:linear-gradient(180deg,#121513,var(--c-1));border:1px solid var(--c-line);border-radius:var(--R);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.why__i:hover{border-color:var(--c-ac);transform:translateY(-4px)}
.why__i svg{box-sizing:content-box;width:1.5rem;height:1.5rem;padding:.75rem;margin-bottom:var(--s3);border-radius:12px;background:var(--c-acsoft)}
.why__i h3{font-size:1.25rem}
.why__i p{font-size:1rem}
@media (max-width:60rem){
  .why__g{gap:var(--s1)}
  .why__i,.why__i:first-child,.why__i:last-child,.why__i:nth-child(odd),.why__i:nth-child(even),.why__i:nth-last-child(-n+2){padding:var(--s3);border:1px solid var(--c-line)}
  .why__i svg{width:1.25rem;height:1.25rem;padding:.625rem}
  .why__i h3{font-size:1.0625rem}.why__i p{font-size:.875rem}
  h1{font-size:clamp(2.25rem,10vw,3.25rem)}
}

/* Dich vu kem canh minh hoa */
.dvs{display:grid;gap:var(--s7)}
.dv{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s6);align-items:center}
.dv:nth-child(even) .dv__t{order:2}
.dv__t h3{font-size:clamp(1.75rem,1.4rem + 1.3vw,2.5rem);font-weight:700;letter-spacing:-.024em;line-height:1.16}
.dv__d{margin-top:var(--s2);font-size:1.125rem;line-height:1.55;color:var(--c-ink2)}
.dv .feat-l{margin:var(--s3) 0 var(--s4)}
.dv .feat-l li{position:relative;padding:.3125rem 0 .3125rem 1.5rem}
.dv .feat-l li::before{content:"";position:absolute;left:.125rem;top:.85rem;width:.7rem;height:.35rem;border-left:2px solid var(--c-ac);border-bottom:2px solid var(--c-ac);transform:rotate(-45deg)}
.scene{position:relative;overflow:hidden;min-height:23rem;background:linear-gradient(160deg,#141a15,#0a0d0b);border:1px solid var(--c-line2);border-radius:var(--R);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 90px rgba(150,240,90,.06)}
.sc__bar{display:flex;justify-content:space-between;align-items:center;padding:var(--s2) var(--s3);border-bottom:1px solid var(--c-line);font-size:.875rem;font-weight:500}
.sc__bar em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:.8125rem;color:var(--c-ac)}
.sc__bar em::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-ac);animation:pul 1.6s ease-in-out infinite}
@keyframes pul{50%{opacity:.35}}
/* n8n */
.flow{display:block;width:100%;padding:var(--s2)}
.ln{fill:none;stroke:var(--c-line2);stroke-width:1.5}
.dot{fill:var(--c-ac)}
.nd rect{fill:#161b17;stroke:var(--c-line2);stroke-width:1;animation:nd 5s var(--dly,0s) linear infinite}
.nd{--dly:calc(var(--i)*.8s)}
.nd .t1{fill:var(--c-ink);font:600 13.5px var(--font)}
.nd .t2{fill:var(--c-ink2);font:400 11.5px var(--font)}
@keyframes nd{0%,24%,100%{stroke:var(--c-line2);fill:#161b17}4%,16%{stroke:var(--c-ac);fill:#1c2a18}}
/* Website */
.shop{padding:var(--s3)}
.shop__h b{display:block;font-size:1.125rem}
.shop__h span{font-size:.8125rem;color:var(--c-ink2)}
.shop__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s3)}
.shop__g i{display:block;padding:.5rem;background:#161b17;border:1px solid var(--c-line);border-radius:var(--r);animation:pop 7s ease-in-out infinite}
.shop__g i:nth-child(2){animation-delay:.25s}.shop__g i:nth-child(3){animation-delay:.5s}
@keyframes pop{0%{opacity:0;transform:translateY(12px)}7%,92%{opacity:1;transform:none}100%{opacity:0}}
.shop__g u{display:block;height:6.5rem;border-radius:6px;background:linear-gradient(135deg,#2a3a22,#17241a)}
.shop__g s{display:block;height:8px;margin-top:.5rem;border-radius:4px;background:var(--c-line2)}
.shop__g s.m{width:55%;background:var(--c-ac)}
.toast{position:absolute;right:var(--s3);bottom:var(--s3);padding:.625rem var(--s3);background:#1c2a18;border:1px solid var(--c-ac);border-radius:var(--r);font-size:.875rem;animation:toast 7s ease-in-out infinite}
.toast b{display:block;font-weight:600}.toast span{font-size:.8125rem;color:var(--c-ink2)}
@keyframes toast{0%,28%{opacity:0;transform:translateY(14px)}34%,86%{opacity:1;transform:none}92%,100%{opacity:0}}
/* Chat */
.chat{display:flex;flex-direction:column;gap:.5rem;height:19.5rem;padding:var(--s3);justify-content:flex-end;overflow:hidden}
.msg{max-width:82%;padding:.5rem .75rem;border-radius:12px;font-size:.9375rem;line-height:1.45;animation:msg .25s var(--ease)}
.msg.k{align-self:flex-end;background:var(--c-ac);color:var(--c-acink)}
.msg.b{align-self:flex-start;background:#1a201b;border:1px solid var(--c-line)}
.typing{display:inline-flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--c-ink2);animation:pul 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes msg{from{opacity:0;transform:translateY(8px)}}
@media (max-width:60rem){
  .dvs{gap:var(--s6)}
  .dv{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .dv:nth-child(even) .dv__t{order:0}
  .scene{min-height:0}
  .chat{height:17rem}
  .shop__g u{height:4.5rem}
}
@media (prefers-reduced-motion:reduce){.nd rect,.shop__g i,.toast,.sc__bar em::before,.typing i{animation:none}.toast{opacity:1}}

/* Bang dieu khien o dau trang */
.dash{padding:var(--s4);background:linear-gradient(160deg,#151b16,#0a0d0b);border:1px solid var(--c-line2);border-radius:var(--R);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 120px rgba(150,240,90,.08)}
.dash__t{display:flex;justify-content:space-between;align-items:center}
.dash__t b{font-size:1.125rem;font-weight:600}
.dash em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:.8125rem;color:var(--c-ac)}
.dash em::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-ac);animation:pul 1.6s ease-in-out infinite}
.dash__m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s3)}
.dash__m div{padding:var(--s2);background:rgba(0,0,0,.35);border:1px solid var(--c-line);border-radius:var(--r)}
.dash__m span,.dash__c span{display:block;font-size:.8125rem;color:var(--c-ink2)}
.dash__m b{display:block;margin:.125rem 0 .5rem;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dash__m i{display:block;height:4px;border-radius:2px;background:var(--c-line);overflow:hidden}
.dash__m u{display:block;height:100%;background:var(--c-ac);transform-origin:left;transition:transform .9s linear}
.dash__c{margin-top:var(--s2);padding:var(--s2);background:rgba(0,0,0,.35);border:1px solid var(--c-line);border-radius:var(--r)}
.dash__c svg{display:block;width:100%;height:7rem;margin-top:.25rem}
.line{fill:none;stroke:var(--c-ac);stroke-width:2;vector-effect:non-scaling-stroke}
.area{fill:rgba(180,249,111,.1)}
.dash__s{margin-top:var(--s2)}
.dash__s li{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--c-line);font-size:.9375rem}
.dash__s b{font-weight:500}
.dash__n{margin-top:var(--s2);font-size:.75rem;color:var(--c-ink2);text-align:right}
@media (max-width:60rem){.dash{padding:var(--s3)}.dash__m b{font-size:1.25rem}.dash__c svg{height:5.5rem}}

/* Anh that o dau trang */
.heroimg{position:relative;overflow:hidden;aspect-ratio:1/1;max-height:34rem;border:1px solid var(--c-line2);border-radius:var(--R);box-shadow:0 40px 100px rgba(0,0,0,.6)}
.heroimg img{width:100%;height:100%;object-fit:cover}
/* So do n8n */
.canvas{overflow:hidden;background:#141414 radial-gradient(#2c2c2c 1px,transparent 1px) 0 0/18px 18px;border:1px solid var(--c-line2);border-radius:var(--R);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.canvas svg{display:block;width:100%;height:auto}
.canvas .n{fill:#2a2a2d;stroke:#4a4a50;stroke-width:1.2}
.canvas .e{fill:none;stroke:#7a7a82;stroke-width:1.6}
.canvas .d{fill:var(--c-ac)}
.canvas .a{fill:#f2f2f2;font:600 12.5px var(--font);text-anchor:middle}
.canvas .b{fill:#9a9aa2;font:400 11px var(--font);text-anchor:middle}
/* Chatbot */
.scene--chat{background:#0f1411}
.cbar{display:flex;align-items:center;gap:.75rem;padding:.875rem var(--s3);border-bottom:1px solid var(--c-line)}
.cbar i{width:2.5rem;height:2.5rem;border-radius:50%;background:linear-gradient(135deg,var(--c-ac),#3f8f4e)}
.cbar b{display:block;font-size:1rem;font-weight:600;line-height:1.3}
.cbar span{font-size:.8125rem;color:var(--c-ink2)}
.chat{height:20rem}
.msg.k{background:#2a3a24;color:var(--c-ink)}
@media (max-width:60rem){.heroimg{aspect-ratio:16/11;max-height:none}.chat{height:19rem}.canvas .a{font-size:13px}}

/* Hang n8n tran rong */
.dv--w{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.dv__h{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s5);align-items:end}
.dv__h .feat-l{margin:0 0 var(--s2)}
.canvas--w{border-radius:var(--R)}
.cv__t,.cv__b{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:.75rem var(--s3);background:rgba(20,20,20,.9);font-size:.875rem}
.cv__t{border-bottom:1px solid #2c2c2c}.cv__b{border-top:1px solid #2c2c2c;color:#a0a0a8;font-size:.8125rem}
.cv__t b{font-weight:600}
.cv__a{display:inline-flex;align-items:center;gap:.5rem;color:#d7d7dc}
.cv__a i{position:relative;width:30px;height:16px;border-radius:8px;background:var(--c-ac)}
.cv__a i::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#111}
.cv__b span{display:inline-flex;align-items:center;gap:.5rem}
.cv__b i{width:8px;height:8px;border-radius:50%;background:var(--c-ac)}
.canvas .pt{fill:#7a7a82}
.canvas .sticky{fill:#3a3414;stroke:#6b5f1e}
.canvas .sa{fill:#ffe78a;font:600 14px var(--font)}
.canvas .sb{fill:#d9cc88;font:400 12.5px var(--font)}
/* Website mau */
.devs{position:relative;padding-bottom:1.5rem}
.lap{overflow:hidden;background:#fbf7f1;border:1px solid var(--c-line2);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.lap__b{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#e9e3da}
.lap__b i{width:9px;height:9px;border-radius:50%;background:#c9c0b2}
.lap__b span{margin-left:10px;padding:2px 14px;border-radius:6px;background:#fff;color:#6c6256;font-size:11px}
.site{color:#2f2a24}
.site__n{display:flex;align-items:center;gap:1rem;padding:.625rem 1rem;font-size:.75rem}
.site__n b{margin-right:auto;font-family:Georgia,serif;font-size:1rem;font-weight:400;color:#7a3b52}
.site__n u,.site__h u,.pho__t u{padding:.3rem .75rem;border-radius:999px;background:#7a3b52;color:#fff;font-size:.6875rem;text-decoration:none}
.site__h{position:relative;height:13rem;overflow:hidden}
.site__h img{width:100%;height:100%;object-fit:cover;object-position:60% 45%}
.site__h div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.5rem;padding:0 1.5rem;background:linear-gradient(90deg,rgba(10,20,14,.72),transparent 70%);color:#fff}
.site__h small{font-size:.6875rem;opacity:.85}
.site__h strong{font:400 1.5rem/1.2 Georgia,serif}
.site__c{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem;padding:.75rem}
.site__c img{width:100%;height:4.75rem;object-fit:cover;border-radius:8px}
.site__c b{display:block;margin-top:.375rem;font-size:.75rem;font-weight:600}
.site__c span{font-size:.6875rem;color:#7a3b52}
.pho{position:absolute;right:-.75rem;bottom:0;width:8.5rem;overflow:hidden;background:#fbf7f1;border:4px solid #1a1a1c;border-radius:1.25rem;box-shadow:0 20px 50px rgba(0,0,0,.6);color:#2f2a24}
.pho__n{padding:.5rem;text-align:center}.pho__n b{font:400 .8125rem Georgia,serif;color:#7a3b52}
.pho img{width:100%;height:6rem;object-fit:cover}
.pho__t{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem;text-align:center}
.pho__t strong{font:400 .875rem Georgia,serif}.pho__t span{font-size:.625rem;color:#6c6256}
.pho__t u{margin-top:.25rem;font-size:.625rem}
.devs .toast{right:auto;left:1rem;bottom:0;z-index:2}
/* Chatbot trong dien thoai */
.chats{position:relative;display:flex;justify-content:center;padding:var(--s3) 0;background:radial-gradient(22rem 22rem at 50% 50%,rgba(150,240,90,.13),transparent 70%)}
.phone{width:19.5rem;overflow:hidden;background:#101512;border:6px solid #1b1d1c;border-radius:2.25rem;box-shadow:0 0 0 1px var(--c-line2),0 40px 90px rgba(0,0,0,.6)}
.phone__t{display:flex;align-items:center;gap:.625rem;padding:1.125rem 1rem .75rem;background:#161c17;border-bottom:1px solid var(--c-line)}
.phone__t>i{width:2.25rem;height:2.25rem;border-radius:50%;background:url(img/spa-a.webp) center/cover}
.phone__t b{display:block;font-size:.9375rem;font-weight:600;line-height:1.2}
.phone__t span{font-size:.75rem;color:var(--c-ac)}
.phone .chat{height:23rem;padding:.875rem}
.phone .msg{max-width:88%;font-size:.875rem}
.phone .msg.k{background:var(--c-ac);color:var(--c-acink)}
.phone__i{display:flex;justify-content:space-between;align-items:center;margin:.5rem .75rem .875rem;padding:.5rem .875rem;border:1px solid var(--c-line2);border-radius:999px;font-size:.8125rem;color:var(--c-ink2)}
.phone__i i{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--c-ac)}
.qr{display:flex;gap:.375rem;animation:msg .25s var(--ease)}
.qr span{padding:.3rem .625rem;border:1px solid var(--c-line2);border-radius:999px;font-size:.8125rem}
.qr .c{border-color:var(--c-ac);color:var(--c-ac)}
.book{align-self:flex-start;width:88%;padding:.75rem;background:#1a241b;border:1px solid var(--c-ac);border-radius:12px;font-size:.8125rem;animation:msg .3s var(--ease)}
.book span{color:var(--c-ac);font-weight:600}
.book b{display:block;margin-top:.125rem;font-size:.9375rem;font-weight:600}
.book p{color:var(--c-ink2)}
.fl{position:absolute;padding:.625rem .875rem;background:rgba(18,23,19,.96);border:1px solid var(--c-line2);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.5);font-size:.8125rem}
.fl b{display:block;font-weight:600}.fl span{color:var(--c-ink2)}
.fl--a{left:0;top:18%}.fl--b{right:0;bottom:20%}
@media (max-width:60rem){
  .dv__h{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .canvas--w{margin:0 calc(var(--s3)*-1);border-radius:0;border-left:0;border-right:0;overflow-x:auto;scrollbar-width:none}
  .canvas--w svg{width:56rem}.cv__t,.cv__b{min-width:56rem}
  .site__h{height:9rem}.site__h strong{font-size:1.125rem}.site__c img{height:3.5rem}
  .site__n span{display:none}
  .pho{right:-.25rem;width:6.5rem}.pho img{height:4.5rem}
  .fl{display:none}.phone{width:min(19.5rem,100%)}
}
.dv__h h3{font-size:clamp(1.75rem,1.4rem + 1.3vw,2.5rem);font-weight:700;letter-spacing:-.024em;line-height:1.16}
.dv__h .dv__d{margin-top:var(--s2);font-size:1.125rem;line-height:1.55;color:var(--c-ink2)}
.devs .toast{left:auto;right:.75rem;top:2.75rem;bottom:auto}
.pho__t u{white-space:nowrap}
.site__h strong{text-shadow:0 1px 12px rgba(0,0,0,.5)}
@media (max-width:60rem){.pho__n b{font-size:.6875rem;white-space:nowrap}.pho__t strong{font-size:.75rem}.devs .toast{top:2.5rem;right:.5rem;padding:.375rem .625rem;font-size:.75rem}.devs .toast span{font-size:.6875rem}}
.devs .toast{top:5.25rem}@media (max-width:60rem){.devs .toast{top:4.5rem}}

/* The dich vu o trang chu */
.svs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.sv{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;background:linear-gradient(180deg,#121513,var(--c-1));border:1px solid var(--c-line);border-radius:var(--R);transition:border-color .2s var(--ease),transform .2s var(--ease)}
.sv:hover{border-color:var(--c-ac);transform:translateY(-4px)}
.sv figure{height:13rem;overflow:hidden;background:#0a0d0b;border-bottom:1px solid var(--c-line)}
.sv img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .35s var(--ease)}
.sv:hover img{transform:scale(1.04)}
.sv>div{display:flex;flex-direction:column;flex:1;padding:var(--s4)}
.sv .eye{margin-bottom:.25rem}
.sv h3{font-size:1.375rem;font-weight:600;line-height:1.25}
.sv span{margin-top:auto;padding-top:var(--s3);color:var(--c-ac);font-size:.9375rem;font-weight:500}
/* So do bao mat */
.shield{display:flex;align-items:center;justify-content:center;padding:var(--s3);background:#141414 radial-gradient(#2c2c2c 1px,transparent 1px) 0 0/18px 18px;border:1px solid var(--c-line2);border-radius:var(--R);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.shield svg{width:100%;height:auto}
.shield .sl{fill:none;stroke:#7d3b34;stroke-width:1.6;stroke-dasharray:5 6}
.shield .ok{fill:none;stroke:#6f7a68;stroke-width:1.6}
.shield .bad{fill:#ff6b57}.shield .good{fill:var(--c-ac)}
.shield rect{stroke-width:1.2}
.shield .atk rect{fill:#2b1a18;stroke:#7d3b34}
.shield .vps rect{fill:#1c2a18;stroke:var(--c-ac)}
.shield .vps.o rect{fill:#26262a;stroke:#4a4a50}
.shield text{fill:#f2f2f2;font:600 12.5px var(--font);text-anchor:middle}
.shield .lb{fill:var(--c-ac);font-size:13px}
/* Trang dich vu */
.sp{padding:var(--s6) 0}
.sp__h{max-width:48rem;margin:0 auto var(--s5);text-align:center}
.sp__h .lede{margin-left:auto;margin-right:auto}
.sp__h .cta{justify-content:center}
.sp__s{max-width:64rem;margin:0 auto}
.sp .devs{max-width:44rem;margin:0 auto}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);counter-reset:b}
.steps li{counter-increment:b;padding:var(--s4);background:var(--c-1);border:1px solid var(--c-line);border-radius:var(--R)}
.steps li::before{content:counter(b);display:block;margin-bottom:var(--s3);font:700 1.5rem/1 var(--font);color:var(--c-ac)}
.steps p{margin-top:.25rem;color:var(--c-ink2)}
@media (max-width:60rem){.svs,.steps{grid-template-columns:minmax(0,1fr)}.sv figure{height:11rem}.sp{padding:var(--s4) 0}}
.split .eye{margin:0 0 var(--s2);font-size:.875rem;color:var(--c-ac)}
.sv:first-child img{object-fit:contain;object-position:center;padding:.25rem}
.lap__b em{margin-left:auto;font-style:normal;font-size:11px;color:#6c6256}

/* Tab vi du */
.ex{display:flex;justify-content:center;margin-bottom:var(--s3)}
.ex__t button{min-height:2.75rem;padding:0 var(--s3);font-size:.9375rem}
/* Quy trinh giong n8n */
.nf{overflow:hidden;background:#232327 radial-gradient(#3a3a40 1px,transparent 1px) 0 0/20px 20px;border:1px solid #3c3c42;border-radius:var(--R);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.nf__t{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s3);padding:.625rem var(--s3);background:#2b2b30;border-bottom:1px solid #3c3c42;font-size:.875rem}
.nf__t b{font-weight:600}
.nf__m{display:inline-flex;padding:2px;background:#232327;border-radius:7px}
.nf__m i{padding:.25rem .75rem;border-radius:5px;font-style:normal;font-size:.8125rem;color:#a7a7ae}
.nf__m i:first-child{background:#3a3a40;color:#fff}
.nf__r{display:flex;justify-content:flex-end;align-items:center;gap:var(--s2)}
.nf__a{display:inline-flex;align-items:center;gap:.5rem;color:#d7d7dc;font-size:.8125rem}
.nf__a u{position:relative;width:28px;height:15px;border-radius:8px;background:#7fd16a}
.nf__a u::after{content:"";position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff}
.nf__r em{padding:.25rem .75rem;border-radius:6px;background:#ff6d5a;color:#fff;font-style:normal;font-size:.8125rem;font-weight:600}
.nf svg{display:block;width:100%;height:auto}
.nf .n{fill:#2f2f35;stroke:#7fd16a;stroke-width:1.6}
.nf .e{fill:none;stroke:#8a8a92;stroke-width:1.8}
.nf .d{fill:#7fd16a}
.nf .pt{fill:#8a8a92}
.nf .ck{fill:#7fd16a}.nf .ckm{fill:none;stroke:#1a1a1c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nf .it{fill:#7fd16a;font:500 11.5px var(--font);text-anchor:middle}
.nf .a{fill:#f2f2f2;font:600 13px var(--font);text-anchor:middle}
.nf .b{fill:#a0a0a8;font:400 11.5px var(--font);text-anchor:middle}
.nf .sticky{fill:#4a4320;stroke:#7a6d2a}
.nf .sa{fill:#ffe78a;font:600 14px var(--font)}.nf .sb{fill:#ddd09a;font:400 12.5px var(--font)}
.nf__b{display:flex;justify-content:space-between;padding:.5rem var(--s3);background:#2b2b30;border-top:1px solid #3c3c42;color:#a7a7ae;font-size:.8125rem}
.nf__b span{display:inline-flex;align-items:center;gap:.5rem}
.nf__b u{width:8px;height:8px;border-radius:50%;background:#7fd16a}
/* Website mau theo nganh */
.sp .devs{max-width:50rem}
.t-cf .lap,.t-cf .pho{background:#faf4ea}.t-cf .site{color:#3a2a1e}.t-cf .site__n b,.t-cf .pho__n b,.t-cf .site__c span{color:#6b4226}.t-cf u{background:#6b4226!important}
.t-nt .lap,.t-nt .pho{background:#fff}.t-nt .site{color:#222}.t-nt .site__n b,.t-nt .pho__n b,.t-nt .site__c span{color:#1c4d8c;font-family:var(--font)!important}.t-nt u{background:#1c4d8c!important;border-radius:4px!important}
.t-nt .site__h div{background:linear-gradient(90deg,rgba(255,255,255,.88),transparent 62%);color:#1b2430}
.t-rs .lap,.t-rs .pho{background:#14121a}.t-rs .site{color:#f3eee8}.t-rs .pho{color:#f3eee8}.t-rs .site__n b,.t-rs .pho__n b,.t-rs .site__c span{color:#f0a48a}.t-rs u{background:#d9694e!important}.t-rs .lap__b{background:#221f2a}.t-rs .lap__b span{background:#14121a;color:#bbb}.t-rs .lap__b em{color:#bbb}
.site__h{height:16rem}.site__h strong{font-size:1.875rem}.site__c img{height:6rem}
.phone__t>i{display:grid;place-items:center;color:#fff;font-style:normal;font-weight:700}
@media (max-width:60rem){
  .ex{justify-content:flex-start;margin:0 calc(var(--s3)*-1) var(--s2);padding:0 var(--s3);overflow-x:auto;scrollbar-width:none}
  .nf{margin:0 calc(var(--s3)*-1);border-radius:0;border-left:0;border-right:0;overflow-x:auto;scrollbar-width:none}
  .nf svg{width:58rem;max-width:none}.nf__t,.nf__b{min-width:58rem}.nf__m{display:none}.nf__t{grid-template-columns:1fr auto}
  .site__h{height:10rem}.site__h strong{font-size:1.125rem}.site__c img{height:3.5rem}
}
.sv:nth-child(3) img{object-position:50% 12%}.sv:nth-child(2) img{object-position:50% 0}

/* Trang dich vu giong tu van */
.sp{padding:calc(var(--s6)*1.4) 0 var(--s6)}
.sp__h{max-width:54rem;margin:0 auto}
.sp__h h1{font-size:clamp(2.25rem,1.6rem + 2.6vw,3.75rem);text-wrap:balance}
.sp__h .lede{max-width:44rem;font-size:1.1875rem}
.pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.pts--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pt{padding:var(--s4);background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--R)}
.pt h3{font-size:1.1875rem;line-height:1.3}
.pt p{margin-top:var(--s1);color:var(--c-ink2);font-size:1rem;line-height:1.55}
.use{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--c-line);border-left:1px solid var(--c-line)}
.u{padding:var(--s4);border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.u h3{font-size:1.125rem}.u p{margin-top:.25rem;color:var(--c-ink2);font-size:.9375rem}
.road{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3);list-style:none;margin:0;padding:0;counter-reset:b}
.road li{counter-increment:b;position:relative;padding-top:var(--s4);border-top:2px solid var(--c-line2)}
.road li::before{content:counter(b);position:absolute;top:-.875rem;left:0;display:grid;place-items:center;width:1.625rem;height:1.625rem;border-radius:50%;background:var(--c-ac);color:var(--c-acink);font-size:.8125rem;font-weight:700}
.road h3{font-size:1.0625rem}.road p{margin-top:.25rem;color:var(--c-ink2);font-size:.9375rem;line-height:1.5}
/* n8n quy mo lon */
#mau .wrap{max-width:92rem}
.nf .z{fill:rgba(255,255,255,.025);stroke:#3c3c42;stroke-dasharray:4 5}
.nf .zt{fill:#c9c9d0;font:600 13px var(--font)}
.nf .e.err{stroke:#e0705f;stroke-dasharray:5 5}.nf .it.err{fill:#ff8a78}
.nf .a{font-size:12.5px}.nf .b{font-size:11px}
/* Website mau tu cuon */
.br{max-width:64rem;margin:0 auto;overflow:hidden;border:1px solid var(--c-line2);border-radius:14px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.br__b{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#ece7df}
.br__b i{width:10px;height:10px;border-radius:50%;background:#cfc7ba}
.br__b span{margin-left:12px;padding:3px 18px;border-radius:7px;background:#fff;color:#555;font-size:12px}
.br__b em{margin-left:auto;font-style:normal;font-size:12px;color:#6a6a6a}
.br__v{height:36rem;overflow:hidden;background:#fff}
.pg{animation:cuon 26s ease-in-out infinite alternate;font-family:var(--font)}
.br:hover .pg{animation-play-state:paused}
@keyframes cuon{0%,10%{transform:none}90%,100%{transform:translateY(calc(-100% + 36rem))}}
.pg header{display:flex;align-items:center;gap:2rem;padding:1.125rem 2.5rem}
.pg header>b{margin-right:auto;font:600 1.375rem Playfair,Georgia,serif}
.pg header nav{display:flex;gap:1.75rem;font-size:.875rem}
.pg u{display:inline-block;padding:.625rem 1.25rem;border-radius:4px;font-size:.875rem;font-weight:500;text-decoration:none}
.pg .h{position:relative;height:30rem;overflow:hidden}
.pg .h img{width:100%;height:100%;object-fit:cover}
.pg .h div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 2.5rem;color:#fff;background:linear-gradient(90deg,rgba(0,0,0,.62),transparent 75%)}
.pg h4{font:600 3.25rem/1.14 Playfair,Georgia,serif;letter-spacing:-.01em}
.pg .h small{margin-bottom:.75rem;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.pg .h p{margin:1rem 0 1.5rem;max-width:26rem;font-size:1rem;line-height:1.55;opacity:.92}
.pg .t{padding:4rem 2.5rem}
.pg .t small{display:block;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.pg .t h4{margin-top:.5rem;font-size:2.25rem}
.pg .g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2rem}
.pg .g img{width:100%;height:13rem;object-fit:cover;border-radius:2px}
.pg h5{margin:.875rem 0 .125rem;font:600 1.0625rem var(--font)}
.pg .g p{font-size:.875rem;opacity:.72}
.pg .q{padding:5rem 2.5rem;text-align:center}
.pg .q h4{font-size:2.5rem}.pg .q p{margin:.75rem auto 1.5rem;max-width:30rem;opacity:.8}
.pg footer{display:flex;justify-content:space-between;padding:1.5rem 2.5rem;font-size:.8125rem}
.pg footer b{font:600 1rem Playfair,Georgia,serif}
.t-cf .pg{background:#f8f1e6;color:#33241a}.t-cf .pg u{background:#5b3a22;color:#fff}.t-cf .q{background:#5b3a22;color:#f8f1e6}.t-cf .q u{background:#f8f1e6;color:#5b3a22}
.t-nt .pg{background:#fff;color:#1d2328}.t-nt .pg u{background:#1d2328;color:#fff;border-radius:0}.t-nt .pg header>b{font-family:var(--font);letter-spacing:.14em;font-size:1.0625rem}.t-nt .pg h4{font-family:var(--font);font-weight:300;letter-spacing:-.03em}.t-nt .h div{color:#1d2328;background:linear-gradient(90deg,rgba(255,255,255,.9),transparent 70%)}.t-nt .q{background:#eef1f3}
.t-rs .pg{background:#100e16;color:#f4ece4}.t-rs .pg u{background:#e28a6a;color:#1a0f0b;border-radius:30px}.t-rs .q{background:#1b1722}.t-rs .pg h4{font-weight:500}
.t-rs .br__b,.br.t-rs .br__b{background:#201d27}.br.t-rs .br__b span{background:#100e16;color:#bbb}.br.t-rs .br__b em{color:#bbb}
@media (max-width:60rem){
  .pts,.pts--4,.use,.road{grid-template-columns:minmax(0,1fr)}
  .road{gap:var(--s4)}
  .sp{padding:var(--s5) 0 var(--s4)}
  .br{border-radius:10px}.br__v{height:26rem}
  @keyframes cuon{0%,10%{transform:none}90%,100%{transform:translateY(calc(-100% + 26rem))}}
  .pg header{padding:.75rem 1rem;gap:.75rem}.pg header nav{display:none}.pg header>b{font-size:1.0625rem}
  .pg .h{height:17rem}.pg .h div{padding:0 1rem}.pg h4{font-size:1.625rem}.pg .h p{font-size:.8125rem;margin:.5rem 0 .75rem}
  .pg .t,.pg .q{padding:2rem 1rem}.pg .t h4,.pg .q h4{font-size:1.375rem}.pg .g{grid-template-columns:minmax(0,1fr);gap:1rem}.pg .g img{height:9rem}
}
@media (prefers-reduced-motion:reduce){.pg{animation:none}}
.pg h4{margin:0}.pg .t h4{margin-top:.5rem}

/* Phan 4 buoc: tra lai dung kieu, bo nhiem CSS cua trang dich vu */
.story .steps{display:block}
.story .steps li{padding:var(--s3) 0 var(--s3) var(--s4);background:none;border:0;border-radius:0}
.story .steps li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;height:auto;margin:0;background:var(--c-line)}
.story .steps b{font:600 1.25rem/1.3 var(--font);letter-spacing:-.012em}
.story .steps span{font-size:1rem;line-height:1.5}
.story h2{font-size:clamp(1.875rem,1.5rem + 1.7vw,2.75rem)}
.sc h3{font:600 1.5rem/1.2 var(--font)}.sc small{font-size:.875rem}
@media (max-width:60rem){.story .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem}.story .steps li{padding:var(--s1) 0 0}.story .steps li::before{inset:0 0 auto 0;width:auto;height:2px}.story .steps b{font-size:.75rem}}
/* Cac lop bao mat */
.lay{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s5);list-style:none;margin:0;padding:0;counter-reset:none}
.lay li{display:flex;gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--c-line)}
.lay li>span{flex:none;width:2.5rem;font:600 .9375rem/1.8 var(--font);color:var(--c-ac);font-variant-numeric:tabular-nums}
.lay h3{font-size:1.25rem}.lay p{margin-top:.25rem;color:var(--c-ink2);line-height:1.55}
/* n8n chinh chu hon */
.nf{background:#1f1f23 radial-gradient(#34343a 1px,transparent 1px) 0 0/22px 22px}
.nf__s{overflow-x:auto;scrollbar-width:thin}
.nf .n{fill:#2c2c32;stroke:#6e6e78;stroke-width:1.2}
.nf .e{stroke:#7c7c85;stroke-width:1.5}
.nf .z{fill:rgba(255,255,255,.018);stroke:#37373d;stroke-dasharray:none}
.nf .zt{font:600 15px var(--font);fill:#d0d0d6}
.nf .a{font-size:14px;font-weight:600}.nf .b{font-size:12.5px}
.nf .il{fill:#2c2c32;stroke:#4c4c54}.nf .il.err{stroke:#a4483c}
.nf .it{font-size:11.5px}
.nf .ck{fill:#5fbf4e}
/* Website mau cong nghe */
.t-tc .pg{background:#070c16;color:#eaf0f8}.t-tc .pg u{background:#2f7bff;color:#fff;border-radius:6px}.t-tc .pg header>b{font-family:var(--font);letter-spacing:.16em;font-size:1rem}.t-tc .pg h4{font-family:var(--font);font-weight:600;letter-spacing:-.025em}.t-tc .q{background:#0e1a33}.t-tc .h div{background:linear-gradient(90deg,rgba(5,9,18,.82),transparent 75%)}
.br.t-tc .br__b{background:#141b28}.br.t-tc .br__b span{background:#070c16;color:#b6c0d0}.br.t-tc .br__b em{color:#b6c0d0}
/* Chat kieu ung dung nhan tin */
.chats{padding:var(--s4) 0;background:none}
.zp{width:21rem;overflow:hidden;background:#e7edf3;border:9px solid #17181a;border-radius:2.75rem;box-shadow:0 0 0 1px #33353a,0 40px 100px rgba(0,0,0,.7);color:#14191f}
.zp__s{display:flex;justify-content:space-between;padding:.5rem 1.5rem .25rem;background:#0a6cf0;color:#fff;font-size:.8125rem;font-weight:600}
.zp__h{display:flex;align-items:center;gap:.625rem;padding:.375rem .875rem .75rem;background:#0a6cf0;color:#fff}
.zp__h .bk{width:.625rem;height:.625rem;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.zp__h>i{display:grid;place-items:center;width:2.375rem;height:2.375rem;border-radius:50%;border:2px solid rgba(255,255,255,.5);color:#fff;font-style:normal;font-weight:700}
.zp__h b{display:block;font-size:1rem;font-weight:600;line-height:1.25}.zp__h span{font-size:.75rem;opacity:.9}
.zp .chat{height:27rem;padding:.875rem .75rem;background:#e7edf3}
.zp .msg{max-width:82%;padding:.5rem .75rem;border-radius:14px;font-size:.9375rem;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.zp .msg.k{background:#d3e7ff;color:#14191f;border-bottom-right-radius:4px}
.zp .msg.b{background:#fff;border:0;color:#14191f;border-bottom-left-radius:4px}
.zp .typing i{background:#8a97a6}
.zp .qr span{background:#fff;border-color:#c5d3e2;color:#0a5fd8;font-weight:500}.zp .qr .c{background:#0a6cf0;border-color:#0a6cf0;color:#fff}
.zp .book{background:#fff;border:0;box-shadow:0 1px 2px rgba(0,0,0,.12);color:#14191f}
.zp .book span{color:#0d9a52}.zp .book p{color:#5b6775}
.zp__i{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem 1.125rem;background:#fff;color:#7d8896;font-size:.9375rem}
.zp__i b{width:1.375rem;height:1.375rem;border-radius:50%;background:#0a6cf0}
@media (max-width:60rem){.lay{grid-template-columns:minmax(0,1fr)}.zp{width:min(21rem,100%)}}
.sc .qr{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s4);align-items:center}
.sc .qr i{display:block;aspect-ratio:1;border-radius:var(--r);background:repeating-conic-gradient(var(--c-ink) 0 25%,var(--c-2) 0 50%) 0 0/1.1rem 1.1rem}
.chats{flex-direction:column;align-items:center;gap:var(--s2)}
.chats__n{font-size:.8125rem;color:var(--c-ink2)}

/* n8n chay truc tiep */
#mau .wrap{max-width:96rem}
.nf__g{display:grid;grid-template-columns:minmax(0,1fr) 19rem}
.nf__s{overflow:hidden}
.nf .nd rect,.nf .nd path.n{animation:lit 10s linear infinite;animation-delay:var(--d)}
@keyframes lit{0%,6%{stroke:#b4f96f;stroke-width:2.4;filter:drop-shadow(0 0 7px rgba(180,249,111,.75))}14%,100%{stroke:#6e6e78;stroke-width:1.2;filter:none}}
.nf .nd .ck,.nf .nd .ckm{animation:ckon 10s linear infinite;animation-delay:var(--d)}
@keyframes ckon{0%,5%{opacity:0}9%,92%{opacity:1}100%{opacity:0}}
.lg{display:flex;flex-direction:column;min-height:0;background:#17171b;border-left:1px solid #33333a}
.lg__t{display:flex;justify-content:space-between;align-items:center;padding:.75rem var(--s3);border-bottom:1px solid #33333a;font-size:.875rem}
.lg__t b{font-weight:600}.lg__t span{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:#7fd16a}
.lg__t span::before{content:"";width:7px;height:7px;border-radius:50%;background:#7fd16a;animation:pul 1.4s infinite}
.lg__l{flex:1;overflow:hidden;padding:.375rem var(--s3)}
.lg__l li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.375rem;padding:.4375rem 0;border-bottom:1px solid #26262c;font-size:.8125rem;line-height:1.35;animation:msg .3s var(--ease)}
.lg__l time{color:#7f7f88;font-variant-numeric:tabular-nums}.lg__l span{color:#dcdce2}
.lg__l li:first-child span{color:#b4f96f}
/* iPhone */
.iph{position:relative;width:17.5rem;padding:9px;border-radius:3.25rem;background:linear-gradient(145deg,#4a4a4f,#1c1c1f 35%,#2e2e32 70%,#57575c);box-shadow:0 0 0 1px #000,inset 0 0 0 1.5px rgba(255,255,255,.14),0 50px 100px rgba(0,0,0,.7)}
.iph::before,.iph::after{content:"";position:absolute;width:3px;border-radius:2px;background:#3a3a3e}
.iph::before{left:-3px;top:7rem;height:3.5rem;box-shadow:0 4.5rem 0 #3a3a3e}
.iph::after{right:-3px;top:8.5rem;height:5.5rem}
.iph__sc{position:relative;display:flex;flex-direction:column;height:36rem;overflow:hidden;border-radius:2.625rem;background:#fff;color:#14191f}
.iph .di{position:absolute;top:.625rem;left:50%;z-index:5;width:5.75rem;height:1.625rem;margin-left:-2.875rem;border-radius:1rem;background:#000}
.st{display:flex;justify-content:space-between;padding:.75rem 1.5rem .125rem;font-size:.8125rem;font-weight:600}
.hd{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem .625rem}
.hd>em{width:.5625rem;height:.5625rem;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.hd b{display:block;font-size:.9375rem;font-weight:600;line-height:1.2}.hd span{font-size:.6875rem;opacity:.85}
.av{flex:none;display:grid;place-items:center;width:2.125rem;height:2.125rem;border-radius:50%;color:#fff;font-style:normal;font-weight:700;font-size:.9375rem}
.lv{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.4375rem;padding:.75rem .625rem;overflow:hidden}
.lv .msg{max-width:84%;padding:.4375rem .6875rem;border-radius:16px;font-size:.84375rem;line-height:1.35;animation:msg .25s var(--ease)}
.lv .qr{display:flex;flex-wrap:wrap;gap:.3125rem}
.lv .qr span{padding:.25rem .625rem;border:1px solid #c9d4e0;border-radius:999px;background:#fff;font-size:.75rem;font-weight:500;color:#0a5fd8}
.lv .qr .c{border-color:#0a6cf0;background:#0a6cf0;color:#fff}
.lv .book{align-self:flex-start;width:80%;padding:.5rem .625rem;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.14);font-size:.75rem;animation:msg .3s var(--ease)}
.lv .book span{color:#0d9a52;font-weight:600}.lv .book b{display:block;font-size:.875rem;font-weight:600}.lv .book p{color:#5b6775}
.lv .typing i{background:#8a97a6}
.ip{display:flex;justify-content:space-between;align-items:center;margin:.25rem .625rem 1rem;padding:.4375rem .75rem;border-radius:999px;background:#eef1f5;color:#7d8896;font-size:.8125rem}
.ip b{width:1.125rem;height:1.125rem;border-radius:50%;background:#0a6cf0}
/* Giao dien Zalo */
.z{background:#e3e9f0}.z .st,.z .hd{background:#0a6cf0;color:#fff}
.z .msg.k{background:#cfe4ff;border-bottom-right-radius:5px}.z .msg.b{background:#fff;border:0;border-bottom-left-radius:5px;color:#14191f}
.z .ip{background:#fff}
/* Giao dien Messenger */
.m .hd{border-bottom:1px solid #eceef1}
.m .msg.k{background:linear-gradient(180deg,#0a8cff,#0a6cf0);color:#fff;border-bottom-right-radius:5px}
.m .msg.b{background:#f0f1f4;border:0;color:#14191f;border-bottom-left-radius:5px}
.m .av{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #31c653}
/* Bo ba thiet bi */
.trio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4);max-width:82rem;margin:0 auto}
.kn{margin-bottom:var(--s2);text-align:center;font-weight:600;font-size:1rem}
.wb{overflow:hidden;border:1px solid var(--c-line2);border-radius:14px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.wb__p{position:relative;height:34rem;background:#000}
.wb__p>img{width:100%;height:100%;object-fit:cover;opacity:.85}
.wb__t{position:absolute;left:1.5rem;top:1.5rem;color:#fff}
.wb__t strong{display:block;font:600 1.875rem/1.2 Georgia,serif}.wb__t span{font-size:.9375rem;opacity:.9}
.wd{position:absolute;right:1rem;bottom:1rem;display:flex;flex-direction:column;width:18.5rem;height:27rem;overflow:hidden;border-radius:18px;background:#fff;color:#14191f;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.wd__h{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:#d9694e;color:#fff}
.wd__h b{display:block;font-size:.9375rem;font-weight:600;line-height:1.2}.wd__h span{font-size:.75rem;opacity:.9}
.wd .av{background:rgba(255,255,255,.25)!important}
.wd .msg.k{background:#d9694e;color:#fff;border-bottom-right-radius:5px}.wd .msg.b{background:#f2f0ee;border:0;color:#14191f;border-bottom-left-radius:5px}
/* May tinh kem iPhone */
.duo{position:relative;max-width:68rem;margin:0 auto;padding-bottom:2rem}
.duo .br{max-width:60rem;margin:0}
.iph--s{position:absolute;right:0;bottom:0;width:15rem}
.iph--s .iph__sc{height:30rem}
.iph__v{flex:1;overflow:hidden}
.iph__v .pg{font-size:.875rem;animation-duration:30s;animation-delay:-4s}
.iph__v .pg header{padding:2.5rem .875rem .625rem;gap:.5rem}.iph__v .pg header nav{display:none}.iph__v .pg header>b{font-size:1rem}.iph__v .pg header u{padding:.3125rem .625rem;font-size:.6875rem}
.iph__v .pg .h{height:17rem}.iph__v .pg .h div{padding:0 .875rem}.iph__v .pg h4{font-size:1.5rem}.iph__v .pg .h p{font-size:.75rem;margin:.375rem 0 .625rem}
.iph__v .pg .t,.iph__v .pg .q{padding:1.5rem .875rem}.iph__v .pg .t h4,.iph__v .pg .q h4{font-size:1.25rem}.iph__v .pg .g{grid-template-columns:minmax(0,1fr);gap:.75rem}.iph__v .pg .g img{height:8rem}
.iph__v .pg footer{padding:.875rem;font-size:.6875rem}
@keyframes cuon2{0%,10%{transform:none}90%,100%{transform:translateY(calc(-100% + 30rem))}}
.iph__v .pg{animation-name:cuon2}
@media (max-width:75rem){.nf__g{grid-template-columns:minmax(0,1fr)}.lg{border-left:0;border-top:1px solid #33333a;height:13rem}}
@media (max-width:60rem){
  .nf__s{overflow-x:auto}.nf__s svg{width:60rem;max-width:none}
  .trio{display:flex;gap:var(--s3);margin:0 -1rem;padding:0 1rem 1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .trio>div{flex:none;scroll-snap-align:center}.dv2{width:min(21rem,86vw)}.wb__p{height:34rem}.wd{right:.5rem;left:.5rem;width:auto}.wb__t strong{font-size:1.25rem}
  .duo{padding-bottom:0}.iph--s{display:none}
}

/* Sua sau khi xem anh */
.iph__sc .lv,.wd .lv{align-items:stretch;margin:0;border:0;border-radius:0;font-size:inherit}
.lv .msg{align-self:flex-start}.lv .msg.k{align-self:flex-end}
.lv .book{border:0}
#mau .chats__n{display:block;width:100%;margin-top:var(--s3);text-align:center}
.iph__v .pg .h u{align-self:flex-start}
.iph__sc{isolation:isolate}
.iph--s .iph__v{padding-top:0}
.sv img,.sv:first-child img,.sv:nth-child(2) img,.sv:nth-child(3) img{object-fit:cover;object-position:50% 50%;padding:0}
.sv figure{height:15rem}

/* iPhone dat canh website, khong de len */
.duo{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:var(--s4);align-items:center;max-width:80rem;padding-bottom:0}
.duo .br{max-width:none;width:100%}
.iph--s{position:relative;right:auto;bottom:auto}
.ex__p[hidden]{display:none}
@media (max-width:75rem){.duo{grid-template-columns:minmax(0,1fr)}.iph--s{display:none}}

/* Chatbot: canh website */
.dm{max-width:68rem;margin:0 auto;overflow:hidden;border:1px solid var(--c-line2);border-radius:14px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.dm__v{position:relative;height:38rem;overflow:hidden;background:#fff;color:#1d2328}
.dm .pg{animation:none;background:#fff;color:#1d2328}
.dm .pg header>b{font-family:var(--font);letter-spacing:.14em;font-size:1.0625rem}.dm .pg u{background:#1d2328;color:#fff;border-radius:0}
.dm .pg h4{font-family:var(--font);font-weight:300;letter-spacing:-.03em}
.dm .pg .h{height:34rem}.dm .pg .h div{color:#1d2328;background:linear-gradient(90deg,rgba(255,255,255,.9),transparent 70%)}
.wbub{position:absolute;right:1.5rem;bottom:1.5rem;width:3.75rem;height:3.75rem;padding:0;border:0;border-radius:50%;background:#1c4d8c;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .2s var(--ease),opacity .2s}
.wbub i{display:block;width:1.5rem;height:1.25rem;margin:auto;border-radius:6px;background:#fff}
.wbub.off{opacity:0;transform:scale(.6)}
.wpan{position:absolute;right:1.5rem;bottom:1.5rem;display:flex;flex-direction:column;width:23rem;height:33rem;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.4);opacity:0;transform:translateY(20px) scale(.97);transform-origin:bottom right;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.wpan.on{opacity:1;transform:none}
.wpan .wd__h{background:#1c4d8c}
.wpan .lv{align-items:stretch;margin:0;border:0;border-radius:0}
.wpan .msg.k{background:#1c4d8c;color:#fff;border-bottom-right-radius:5px}.wpan .msg.b{background:#f0f2f5;border:0;color:#14191f;border-bottom-left-radius:5px}
.lv .msg{flex:none;font-size:.9375rem}
.pc{flex:none;display:grid;grid-template-columns:5rem minmax(0,1fr);gap:.625rem;width:88%;padding:.5rem;background:#fff;border:1px solid #e4e7ec;border-radius:12px;animation:msg .3s var(--ease)}
.pc img{width:5rem;height:5rem;object-fit:cover;border-radius:8px}
.pc b{display:block;font-size:.9375rem}.pc span{display:block;font-size:.8125rem;color:#1c4d8c;font-weight:600}
.pc u{display:inline-block;margin-top:.25rem;padding:.25rem .625rem;border-radius:6px;background:#1c4d8c;color:#fff;font-size:.75rem;text-decoration:none}
.cur{position:absolute;left:40%;top:40%;z-index:6;width:1.25rem;height:1.25rem;background:#111;clip-path:polygon(0 0,0 100%,28% 74%,52% 100%,66% 92%,44% 66%,78% 64%);filter:drop-shadow(0 0 1px #fff);transition:left 1.2s var(--ease),top 1.2s var(--ease),transform .15s}
.cur.go{left:calc(100% - 3.5rem);top:calc(100% - 3.5rem)}.cur.dn{transform:scale(.8)}.cur.hide{opacity:0}
/* Chatbot: canh dien thoai */
.ph2{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center;max-width:60rem;margin:0 auto}
.lead2{margin-top:var(--s2);font-size:1.125rem;line-height:1.55;color:var(--c-ink2)}
.stp{margin:var(--s4) 0 0;padding:0;list-style:none;counter-reset:s}
.stp li{counter-increment:s;display:flex;align-items:center;gap:.75rem;padding:.625rem 0;color:var(--c-ink2);transition:color .2s var(--ease)}
.stp li::before{content:counter(s);display:grid;place-items:center;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--c-2);font-size:.8125rem;font-weight:600;transition:background .2s var(--ease),color .2s var(--ease)}
.stp li.on{color:var(--c-ink)}.stp li.on::before{background:var(--c-ac);color:var(--c-acink)}
.fbs{position:absolute;inset:0;display:flex;flex-direction:column;background:#f0f2f5;color:#14191f}
.fb__h{z-index:2;display:flex;align-items:center;gap:.5rem;padding:2.5rem .875rem .5rem;background:#fff}
.fb__h b{margin-right:auto;font-size:1.375rem;font-weight:700;letter-spacing:-.04em;color:#0866ff}
.fb__h span{width:1.625rem;height:1.625rem;border-radius:50%;background:#e4e6eb}
.fb__f{flex:1}
.fb__f article{margin-bottom:.5rem;background:#fff}
.po{display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem .375rem}
.po i{width:2.125rem;height:2.125rem;border-radius:50%}.po b{display:block;font-size:.875rem}.po small{font-size:.6875rem;color:#65676b}
.fb__f p{padding:0 .75rem .5rem;font-size:.875rem}
.fb__f img{width:100%;height:13rem;object-fit:cover}
.ad__c{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem .75rem;background:#f0f2f5;font-size:.8125rem}
.ad__c u{flex:none;padding:.375rem .625rem;border-radius:6px;background:#0866ff;color:#fff;font-weight:600;font-size:.75rem;text-decoration:none}
.ms{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;background:#fff;transform:translateX(100%);transition:transform .3s var(--ease)}
.ms.on{transform:none}
.ms .hd{border-bottom:1px solid #eceef1}
.ms .lv{align-items:stretch;margin:0;border:0;border-radius:0}
.ms .msg.k{background:linear-gradient(180deg,#0a8cff,#0a6cf0);color:#fff;border-bottom-right-radius:5px}.ms .msg.b{background:#f0f1f4;border:0;color:#14191f;border-bottom-left-radius:5px}
.tap{position:absolute;z-index:4;width:2.25rem;height:2.25rem;margin:-1.125rem;border-radius:50%;background:rgba(0,0,0,.28);opacity:0}
.tap.on{animation:tp .8s var(--ease)}
@keyframes tp{0%{opacity:0;transform:scale(1.5)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}
@media (max-width:60rem){
  .dm__v{height:32rem}.dm .pg header nav{display:none}.dm .pg .h div{padding:0 1rem}.dm .pg h4{font-size:1.75rem}
  .wpan{right:.5rem;left:.5rem;bottom:.5rem;width:auto;height:28rem}.wbub{right:1rem;bottom:1rem}
  .ph2{grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--s4)}.ph2>div:first-child{width:100%}
}
.wpan{height:31rem}

/* Bo iPhone o trang thiet ke website */
.duo{display:block;max-width:68rem}

/* Tu chon ngay trong trang dat may */
.cu{margin:.25rem 0 .5rem;padding:1rem 1.25rem .75rem;background:var(--c-1);border:1px solid var(--c-line2);border-radius:var(--r)}
.cu .sl{margin-bottom:.25rem}.cu .hint a{color:var(--c-ac)}

/* Menu xo xuong */
.nav__links{align-items:center}
.dd{position:relative}
.dd>button{display:inline-flex;align-items:center;gap:.375rem;padding:0;border:0;background:none;color:var(--c-ink2);font:500 .875rem/1.6 var(--font);cursor:pointer;transition:color .14s var(--ease)}
.dd>button:hover,.dd.open>button{color:var(--c-ink)}
.dd>button i{width:.4375rem;height:.4375rem;margin-top:-.1875rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .18s var(--ease)}
.dd.open>button i{margin-top:.1875rem;transform:rotate(-135deg)}
.dd__p{position:absolute;top:calc(100% + 1.125rem);left:-1rem;width:21rem;padding:.5rem;background:#0f1310;border:1px solid var(--c-line2);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.65);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s}
.dd.open .dd__p{opacity:1;visibility:visible;transform:none}
.dd__p a{display:block;padding:.625rem .75rem;border-radius:10px;text-decoration:none;white-space:normal;transition:background .12s var(--ease)}
.dd__p a:hover{background:var(--c-2)}
.nav__links .dd__p b{display:block;color:var(--c-ink);font-size:.9375rem;font-weight:600}
.dd__p span{display:block;margin-top:.0625rem;color:var(--c-ink2);font-size:.8125rem;line-height:1.4}
.sheet{max-height:calc(100svh - 6rem);overflow-y:auto}
.sheet details summary{display:flex;align-items:center;justify-content:space-between;min-height:3.25rem;padding:0 var(--s3);font-weight:600;cursor:pointer;list-style:none}
.sheet details summary::-webkit-details-marker{display:none}
.sheet details summary::after{content:"+";color:var(--c-ink2);font-size:1.25rem}
.sheet details[open] summary::after{content:"−"}
.sheet details a{display:block;min-height:0;padding:.5rem var(--s3) .5rem 1.5rem}
.sheet details a::after{display:none}
.sheet details a b{display:block;font-weight:600}.sheet details a span{display:block;font-size:.8125rem;font-weight:400;color:var(--c-ink2)}

/* Trang luu tru */
.fm{position:relative;display:grid;grid-template-columns:13.5rem minmax(0,1fr);max-width:62rem;margin:var(--s5) auto 0;overflow:hidden;background:#fff;color:#1a1f1c;border-radius:16px;box-shadow:0 40px 110px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.fm aside{display:flex;flex-direction:column;gap:.125rem;padding:1.25rem .875rem;background:#f3f5f2;font-size:.9375rem}
.fm__l{padding:0 .625rem .75rem;font-size:1rem}
.fm aside>span{padding:.4375rem .625rem;border-radius:8px;color:#4f5a53}
.fm aside>span.on{background:#e2ecdb;color:#1a1f1c;font-weight:600}
.fm__u{margin-top:auto;padding:.875rem .625rem 0}.fm__u small{font-size:.75rem;color:#5c665f}
.fm__u i{display:block;height:6px;margin-top:.375rem;border-radius:3px;background:#dfe4dd;overflow:hidden}
.fm__u u{display:block;width:41%;height:100%;background:#4f9c3a;transform-origin:left;animation:fmb 1.4s var(--ease) both}
@keyframes fmb{from{transform:scaleX(0)}}
.fm__m{min-width:0;padding:1.25rem 1.5rem 1.5rem}
.fm__h{display:flex;align-items:center;justify-content:space-between;gap:1rem}.fm__h b{font-size:1.25rem}
.fm__up{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;color:#3b7f2a}
.fm__up i{width:.875rem;height:.875rem;border:2px solid #b9d8ad;border-top-color:#3b7f2a;border-radius:50%;animation:fms 1s linear infinite}
@keyframes fms{to{transform:rotate(1turn)}}
.fm__c,.fm__m li{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,.7fr) minmax(0,.9fr);gap:.75rem;align-items:center}
.fm__c{margin-top:1rem;padding-bottom:.5rem;border-bottom:1px solid #e6e9e4;font-size:.8125rem;color:#6a746d}
.fm__m ul{margin:0;padding:0;list-style:none}
.fm__m li{position:relative;grid-template-columns:1.5rem minmax(0,1.8fr) minmax(0,.7fr) minmax(0,.9fr);padding:.75rem 0;border-bottom:1px solid #eef0ec;font-size:.9375rem;animation:fmr .5s var(--ease) both;animation-delay:calc(var(--i)*.14s)}
@keyframes fmr{from{opacity:0;transform:translateY(8px)}}
.fm__m li b{overflow:hidden;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.fm__m li span{color:#5c665f;font-size:.875rem}.fm__m li em{font-style:normal;font-size:.8125rem;color:#3b7f2a}
.fd{width:1.25rem;height:.9375rem;border-radius:2px 4px 4px 4px;background:#e0b04f}
.fl{width:1rem;height:1.25rem;border-radius:3px;background:#c9d4e0}
.fm__t{position:absolute;right:1rem;bottom:1rem;padding:.625rem .875rem;background:#1a1f1c;color:#fff;border-radius:10px;font-size:.8125rem;box-shadow:0 14px 34px rgba(0,0,0,.35);animation:fmt 7s ease-in-out infinite}
.fm__t b{display:block;font-weight:600}.fm__t span{color:#c7cec8}
@keyframes fmt{0%,25%{opacity:0;transform:translateY(10px)}32%,85%{opacity:1;transform:none}92%,100%{opacity:0}}
.fm__n{position:absolute;left:1rem;bottom:.5rem;font-size:.6875rem;color:#7c867f}
.stcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);list-style:none;margin:0;padding:0}
.stc{position:relative;display:flex;flex-direction:column;padding:var(--s4);background:var(--c-1);border:1px solid var(--c-line);border-radius:var(--R)}
.stc.hot{border-color:var(--c-ac);background:linear-gradient(180deg,rgba(180,249,111,.08),var(--c-1) 50%)}
.stc h3{font-size:1rem;font-weight:500;color:var(--c-ink2)}
.stc__g{margin-top:.25rem;font:700 2.25rem/1.1 var(--font);letter-spacing:-.03em}
.stc__f{margin-top:.375rem;min-height:2.8em;font-size:.9375rem;color:var(--c-ink2)}
.stc__p{margin:var(--s2) 0;font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.stc__p small{font-size:.875rem;font-weight:400;color:var(--c-ink2)}
.stc ul{margin:var(--s3) 0 0;padding:0;list-style:none}
.stc ul li{position:relative;padding:.3125rem 0 .3125rem 1.375rem;font-size:.875rem}
.stc ul li::before{content:"";position:absolute;left:.125rem;top:.75rem;width:.6875rem;height:.3438rem;border-left:2px solid var(--c-ac);border-bottom:2px solid var(--c-ac);transform:rotate(-45deg)}
.cmpw{max-width:62rem;margin:0 auto;overflow-x:auto}
.cmp{width:100%;min-width:40rem;border-collapse:collapse}
.cmp th,.cmp td{padding:.875rem 1rem;border-bottom:1px solid var(--c-line);text-align:left;font-size:.9375rem;font-weight:400;vertical-align:top}
.cmp thead th{font-weight:600}.cmp tbody th{color:var(--c-ink2)}.cmp td{color:var(--c-ink2)}.cmp td.y{color:var(--c-ink);font-weight:500;background:rgba(180,249,111,.06)}
.cmp thead th:nth-child(2){color:var(--c-ac);background:rgba(180,249,111,.06)}
.cmp__n{margin-top:var(--s2);font-size:.8125rem;color:var(--c-ink2)}
.svs{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:75rem){.svs,.stcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:60rem){.svs,.stcs{grid-template-columns:minmax(0,1fr)}.fm{grid-template-columns:minmax(0,1fr)}.fm aside{display:none}.fm__m{padding:1rem}.fm__c{display:none}.fm__m li{grid-template-columns:1.5rem minmax(0,1fr) auto}.fm__m li em{display:none}}
@media (prefers-reduced-motion:reduce){.fm__t{animation:none}.fm__up i{animation:none}}
.fi{width:1rem;height:1.25rem;border-radius:3px;background:#c9d4e0}
.fm__n{left:auto;right:1.5rem;top:1.625rem;bottom:auto;display:none}
.fm__h b::after{content:"Mẫu minh hoạ";margin-left:.625rem;font-size:.75rem;font-weight:400;color:#7c867f}