/* Studio Chuyển Đổi: bright product-led editorial — navy technical depth, electric blue actions, 79F gold as a restrained signature. */
/* Studio Ánh Sáng: giao diện biên tập sáng, xanh dương kỹ thuật và điểm nhấn vàng từ thương hiệu 79F. */
:root { --navy:#0a2154; --ink:#10213f; --blue:#126ef8; --blue-deep:#0752c9; --blue-pale:#eaf4ff; --gold:#f9b313; --gold-pale:#fff2cf; --mist:#f6f9fd; --line:#dbe5f1; --white:#fff; --shadow:0 22px 55px rgba(25, 62, 116, .14); --ease-out:cubic-bezier(.23, 1, .32, 1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:"Be Vietnam Pro", sans-serif; background:var(--white); line-height:1.65; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.shell { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }
.skip-link { position:fixed; z-index:100; top:-70px; left:16px; padding:10px 16px; border-radius:8px; background:var(--navy); color:#fff; transition:top .2s var(--ease-out); }
.skip-link:focus { top:16px; }
.site-header { position:sticky; z-index:30; top:0; border-bottom:1px solid rgba(218,230,243,.75); background:rgba(255,255,255,.9); backdrop-filter:blur(18px); }
.nav-shell { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.brand { display:flex; align-items:center; min-width:0; gap:10px; }
.brand img { width:45px; height:45px; border-radius:12px; object-fit:cover; box-shadow:0 5px 14px rgba(14,73,151,.12); }
.brand-copy { display:grid; gap:1px; white-space:nowrap; line-height:1.15; }
.brand-copy strong { font-family:Manrope,sans-serif; font-size:14px; font-weight:800; color:var(--navy); }
.brand-copy small { color:#68809f; font-size:8px; letter-spacing:.14em; }
.primary-nav { display:flex; align-items:center; gap:26px; font-size:13px; font-weight:600; }
.primary-nav > a:not(.nav-download) { color:#526681; transition:color .18s var(--ease-out); }
.primary-nav > a:not(.nav-download):hover { color:var(--blue); }
.nav-download { padding:10px 15px; border-radius:9px; color:#fff; background:var(--blue); box-shadow:0 8px 18px rgba(18,110,248,.2); transition:transform .18s var(--ease-out), background .18s var(--ease-out); }
.nav-download:hover { background:var(--blue-deep); transform:translateY(-2px); }
.nav-toggle { display:none; border:0; background:transparent; padding:8px; cursor:pointer; }
.nav-toggle span { display:block; width:23px; height:2px; margin:4px; background:var(--navy); transition:.2s; }
.hero { position:relative; isolation:isolate; padding:90px 0 106px; overflow:hidden; background:linear-gradient(115deg,#fff 3%,#f3f9ff 62%,#e6f2ff 100%); }
.hero:before { content:""; position:absolute; z-index:-2; width:720px; height:720px; border-radius:50%; right:-370px; top:-260px; background:radial-gradient(circle,rgba(18,110,248,.13),rgba(18,110,248,0) 68%); }
.hero:after { content:""; position:absolute; z-index:-1; width:45vw; height:460px; left:-21vw; bottom:-280px; background:var(--gold-pale); border-radius:50%; transform:rotate(-18deg); opacity:.6; }
.hero-grid { display:grid; grid-template-columns:minmax(0, .95fr) minmax(460px, 1.05fr); align-items:center; gap:55px; }
.eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 16px; color:var(--navy); font-size:10px; font-weight:800; letter-spacing:.17em; }
.eyebrow.blue { color:var(--blue-deep); }.eyebrow.white { color:#dceaff; }.gold-text { color:#b56a00; }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(249,179,19,.16); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Manrope,sans-serif; line-height:1.15; letter-spacing:-.045em; }
h1 { max-width:600px; margin-bottom:21px; color:var(--navy); font-size:clamp(40px,4.25vw,67px); font-weight:800; }
h1 em,h2 em { color:var(--blue); font-style:normal; }
.hero-lead { max-width:545px; color:#526681; font-size:16px; line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:13px; padding:15px 22px; border-radius:10px; font-size:14px; font-weight:700; transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.button-primary { color:#fff; background:var(--blue); box-shadow:0 12px 23px rgba(18,110,248,.26); }.button-primary:hover { transform:translateY(-3px); box-shadow:0 17px 28px rgba(18,110,248,.32); }.button:active,.download-card:active,.nav-download:active { transform:scale(.97); }
.text-link { color:var(--navy); font-size:13px; font-weight:700; }.text-link span { color:var(--blue); font-size:18px; vertical-align:-1px; margin-left:4px; transition:transform .18s var(--ease-out); }.text-link:hover span { display:inline-block; transform:translateX(5px); }
.hero-proof { display:flex; gap:28px; margin-top:46px; padding-top:20px; border-top:1px solid #d8e3ee; }.hero-proof div { display:grid; gap:3px; }.hero-proof strong { font-family:Manrope,sans-serif; color:var(--navy); font-size:13px; }.hero-proof span { color:#6b7d97; font-size:10px; }
.hero-visual { position:relative; min-height:455px; padding:50px 0 20px 42px; }
.orbit { position:absolute; border:2px solid; border-radius:50%; pointer-events:none; }.orbit-blue { width:480px; height:480px; left:60px; top:0; border-color:rgba(18,110,248,.16); transform:rotate(-21deg); border-right-color:rgba(18,110,248,.6); }.orbit-gold { width:405px; height:405px; left:110px; top:37px; border-color:transparent; border-top-color:var(--gold); border-right-color:var(--gold); transform:rotate(16deg); opacity:.85; }
.app-window { position:relative; overflow:hidden; border:1px solid rgba(206,220,237,.9); border-radius:14px; background:#fff; box-shadow:var(--shadow); }.hero-window { z-index:2; transform:rotate(1.3deg); }.window-bar { height:25px; display:flex; align-items:center; gap:5px; padding:0 11px; background:#f7fafc; border-bottom:1px solid #e4ebf3; }.window-bar span { width:6px; height:6px; border-radius:50%; background:#c8d5e5; }.window-bar span:first-child { background:#ff9a93; }.window-bar span:nth-child(2) { background:#ffd065; }.window-bar p { margin:0 auto; color:#7c8ea6; font-family:Manrope,sans-serif; font-size:7px; font-weight:700; letter-spacing:.03em; }
.hero-window img { width:100%; aspect-ratio:1.79 / 1; object-fit:cover; object-position:left top; }.floating-chip { position:absolute; z-index:4; display:flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid rgba(219,230,241,.95); border-radius:11px; background:rgba(255,255,255,.94); box-shadow:0 14px 30px rgba(21,57,104,.15); backdrop-filter:blur(8px); }.chip-top { top:20px; right:-15px; }.chip-bottom { left:0; bottom:0; }.chip-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:#fff; background:var(--blue); font-size:15px; }.chip-icon.gold { background:var(--gold); }.floating-chip b,.floating-chip small { display:block; line-height:1.25; }.floating-chip b { color:var(--navy); font-size:10px; }.floating-chip small { color:#71839c; font-size:8px; }
.statement { padding:82px 0; color:#fff; background:var(--navy); }.statement-grid { display:grid; grid-template-columns:120px 1.08fr .85fr; align-items:end; gap:40px; }.section-number { align-self:start; color:#8ab8ff; font-family:Manrope,sans-serif; font-size:14px; font-weight:800; }.section-number span { display:block; width:63px; height:2px; margin-top:8px; background:var(--gold); }.statement h2 { margin:0; font-size:clamp(32px,3.3vw,52px); }.statement h2 em { color:#79adff; }.statement-grid > p:last-child { margin:0 0 4px; color:#c5d6ee; font-size:14px; }
.formats-section,.features-section,.screens-section { padding:110px 0; }.formats-section { background:var(--mist); }.section-heading { display:grid; grid-template-columns:1fr .63fr; align-items:end; gap:50px; margin-bottom:42px; }.section-heading h2 { margin:0; color:var(--navy); font-size:clamp(30px,3.3vw,49px); }.section-heading > p { max-width:420px; margin:0 0 4px; color:#63758e; font-size:14px; }.format-ribbon { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin-bottom:22px; }.format-ribbon span { display:grid; place-items:center; min-height:70px; border:1px solid #dce8f4; border-radius:9px; color:var(--navy); background:#fff; font-family:Manrope,sans-serif; font-size:13px; font-weight:800; box-shadow:0 6px 16px rgba(23,62,109,.04); }.format-ribbon span:nth-child(2n) { color:var(--blue); }.format-ribbon span:nth-child(3n) { color:#a76906; }
.raw-card { display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:28px; padding:28px 34px; overflow:hidden; color:#fff; background:linear-gradient(110deg,#0a2154,#143f85); border-radius:16px; position:relative; }.raw-card:after { content:""; position:absolute; width:300px; height:300px; right:-120px; top:-200px; border:45px solid rgba(125,176,255,.13); border-radius:50%; }.raw-mark { display:grid; place-items:center; width:115px; height:115px; border:1px solid rgba(183,214,255,.42); border-radius:50%; color:#f7bd37; font-family:Manrope,sans-serif; font-size:25px; font-weight:800; letter-spacing:.06em; background:radial-gradient(circle,rgba(65,131,231,.35),transparent 67%); }.raw-card h3 { margin:0 0 8px; font-size:24px; }.raw-card p:not(.eyebrow) { max-width:510px; margin:0; color:#c5d6f1; font-size:13px; }.raw-list { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,auto); gap:8px; }.raw-list span { padding:5px 9px; border:1px solid rgba(162,195,244,.3); border-radius:5px; color:#d9eaff; font-family:Manrope,sans-serif; font-size:10px; font-weight:700; text-align:center; }
.features-section { overflow:hidden; }.section-heading.compact { margin-bottom:48px; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.feature-card { position:relative; min-height:258px; padding:31px 30px 29px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; transition:background .25s var(--ease-out), transform .25s var(--ease-out); }.feature-card:hover { z-index:2; background:#f7fbff; box-shadow:0 18px 33px rgba(35,77,130,.1); transform:translateY(-5px); }.feature-featured { background:linear-gradient(140deg,#edf7ff,#fffdf7); }.feature-index { position:absolute; top:28px; right:30px; color:#8fa2bd; font-family:Manrope,sans-serif; font-size:11px; font-weight:800; }.feature-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:23px; border-radius:11px; color:var(--blue); background:var(--blue-pale); font-family:Manrope,sans-serif; font-size:22px; font-weight:800; }.feature-card:nth-child(3n) .feature-icon { color:#b46c00; background:var(--gold-pale); }.feature-card h3 { margin-bottom:10px; color:var(--navy); font-size:18px; }.feature-card p { max-width:285px; margin:0; color:#667992; font-size:12px; }.card-line { position:absolute; bottom:0; left:0; width:0; height:3px; background:var(--blue); transition:width .3s var(--ease-out); }.feature-card:hover .card-line { width:100%; }
.workflow-section { padding:112px 0; background:#fffaf1; }.workflow-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:82px; }.workflow-visual { position:relative; }.workflow-visual:before { content:""; position:absolute; z-index:0; width:83%; height:84%; left:-18px; bottom:-18px; border-radius:14px; background:var(--gold); }.section-tag { position:relative; z-index:2; display:inline-block; margin:0 0 13px 16px; padding:7px 10px; color:var(--blue-deep); background:#fff; font-family:Manrope,sans-serif; font-size:9px; font-weight:800; letter-spacing:.13em; box-shadow:0 7px 15px rgba(116,83,22,.09); }.queue-window { z-index:1; transform:rotate(-1.2deg); }.queue-window img { width:100%; aspect-ratio:1.5 / 1; object-fit:cover; object-position:top left; }.workflow-copy h2 { margin-bottom:29px; color:var(--navy); font-size:clamp(31px,3.5vw,48px); }.steps { display:grid; gap:19px; padding:0; margin:0; list-style:none; }.steps li { display:grid; grid-template-columns:32px 1fr; gap:15px; }.steps li > span { display:grid; place-items:center; width:29px; height:29px; border:1px solid #9cc3fc; border-radius:50%; color:var(--blue); font-family:Manrope,sans-serif; font-size:11px; font-weight:800; }.steps h3 { margin:2px 0 5px; color:var(--navy); font-size:15px; }.steps p { margin:0; color:#63758e; font-size:12px; }
.screens-section { background:#f7fbff; }.screen-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }.screen-card { margin:0; overflow:hidden; border:1px solid #dce7f3; border-radius:13px; background:#fff; box-shadow:0 12px 28px rgba(24,63,113,.08); }.screen-card img { width:100%; height:100%; aspect-ratio:1.55 / 1; object-fit:cover; object-position:top left; transition:transform .5s var(--ease-out); }.screen-card:hover img { transform:scale(1.025); }.screen-card:not(.wide) img { object-fit:cover; }.screen-card figcaption { display:flex; align-items:center; gap:9px; padding:14px 16px; color:var(--navy); font-size:12px; font-weight:700; }.screen-card figcaption span { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:var(--blue); background:var(--blue-pale); font-family:Manrope,sans-serif; font-size:9px; }
.local-section { position:relative; overflow:hidden; padding:94px 0; color:#fff; background:linear-gradient(110deg,#07193e,#0d3475); }.local-section:after { content:""; position:absolute; width:650px; height:650px; border:85px solid rgba(91,150,245,.12); border-radius:50%; right:-260px; top:-395px; }.local-grid { position:relative; z-index:1; display:grid; grid-template-columns:150px .8fr 1.1fr; align-items:center; gap:38px; }.local-emblem { display:grid; place-items:center; position:relative; width:119px; height:119px; border:1px solid rgba(183,216,255,.36); border-radius:50%; font-family:Manrope,sans-serif; }.local-emblem span { color:#f3b42a; font-size:27px; font-weight:800; letter-spacing:-.08em; }.local-emblem i { position:absolute; width:88px; height:88px; border:3px solid transparent; border-top-color:#57a1ff; border-right-color:#57a1ff; border-radius:50%; transform:rotate(-35deg); }.local-emblem b { position:absolute; bottom:-22px; color:#83baff; font-size:9px; letter-spacing:.16em; }.local-grid h2 { margin:0; font-size:clamp(30px,3.1vw,47px); }.local-grid h2:after { content:""; display:block; width:48px; height:3px; margin-top:20px; background:var(--gold); }.local-copy { margin:0; color:#c9dcf7; font-size:13px; }.tech-list { grid-column:2 / 4; display:flex; flex-wrap:wrap; gap:8px; margin-top:-11px; }.tech-list span { padding:5px 9px; border:1px solid rgba(182,213,255,.25); border-radius:4px; color:#a8c9f6; font-family:Manrope,sans-serif; font-size:9px; font-weight:700; }
.support-section { padding:111px 0; background:#fff; }.support-grid { display:grid; grid-template-columns:1fr .84fr; align-items:center; gap:74px; }.support-copy h2 { margin-bottom:18px; color:var(--navy); font-size:clamp(30px,3.3vw,47px); }.support-copy > p:not(.eyebrow) { max-width:590px; color:#60738e; font-size:13px; }.support-steps { display:grid; gap:10px; padding:0; margin:27px 0 18px; list-style:none; }.support-steps li { display:flex; align-items:flex-start; gap:12px; }.support-steps span { flex:0 0 auto; display:grid; place-items:center; width:23px; height:23px; border-radius:6px; color:#fff; background:var(--blue); font-family:Manrope,sans-serif; font-size:10px; font-weight:800; }.support-steps p { margin:1px 0 0; color:#425975; font-size:12px; }.support-note { padding:11px 14px; border-left:3px solid var(--gold); color:#7d5921 !important; background:#fff8e8; font-size:11px !important; }.warning-figure { margin:0; overflow:hidden; border:1px solid #e6e8ee; border-radius:13px; background:#fff; box-shadow:var(--shadow); }.warning-top { display:flex; align-items:center; gap:8px; padding:11px 14px; color:#66758a; background:#f7f8fb; font-family:Manrope,sans-serif; font-size:9px; font-weight:800; letter-spacing:.08em; }.warning-dot { width:8px; height:8px; border-radius:50%; background:#df342a; box-shadow:0 0 0 4px rgba(223,52,42,.13); }.warning-figure img { width:100%; }.warning-figure figcaption { padding:11px 14px; color:#75849a; font-size:10px; }
.download-section { padding:100px 0; background:var(--mist); }.download-panel { position:relative; display:grid; grid-template-columns:1fr .85fr; align-items:center; gap:60px; padding:57px 65px; overflow:hidden; border-radius:18px; color:#fff; background:linear-gradient(112deg,#071d4a,#0c4aaf); box-shadow:0 24px 40px rgba(11,55,125,.2); }.download-orbit { position:absolute; border:1px solid rgba(146,193,255,.22); border-radius:50%; }.download-orbit.one { width:540px; height:540px; right:-250px; top:-390px; }.download-orbit.two { width:380px; height:380px; right:-72px; bottom:-265px; border-color:rgba(250,194,57,.38); }.download-content,.download-actions { position:relative; z-index:1; }.download-content h2 { margin-bottom:15px; font-size:clamp(29px,3vw,43px); }.download-content > p:not(.eyebrow) { max-width:520px; margin:0; color:#c5daf8; font-size:13px; }.download-actions { display:grid; gap:11px; }.download-card { display:grid; grid-template-columns:37px 1fr auto; align-items:center; gap:12px; padding:14px 15px; border:1px solid rgba(192,219,255,.26); border-radius:10px; background:rgba(255,255,255,.1); backdrop-filter:blur(4px); transition:background .2s var(--ease-out),transform .2s var(--ease-out); }.download-card:hover { background:rgba(255,255,255,.18); transform:translateX(5px); }.download-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:9px; color:var(--navy); background:#fff; font-family:Manrope,sans-serif; font-weight:800; }.portable .download-icon { color:#8a5700; background:#ffd561; }.download-card small,.download-card strong,.download-card em { display:block; line-height:1.25; }.download-card small { margin-bottom:2px; color:#a8ccff; font-size:8px; font-weight:800; letter-spacing:.11em; }.download-card strong { font-family:Manrope,sans-serif; font-size:13px; }.download-card em { margin-top:2px; color:#c8dcf8; font-size:10px; font-style:normal; }.download-card > b { color:#fff; font-size:19px; }
.site-footer { padding:35px 0; background:#fff; }.footer-shell { display:flex; align-items:center; justify-content:space-between; gap:18px; }.footer-brand img { width:37px; height:37px; }.footer-brand .brand-copy strong { font-size:12px; }.footer-brand .brand-copy small { font-size:7px; }.footer-shell > p { margin:0; color:#7689a2; font-size:10px; }.back-top { color:var(--blue); font-size:11px; font-weight:700; }.back-top span { font-size:15px; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease-out),transform .5s var(--ease-out); }.reveal.is-visible { opacity:1; transform:none; }.delay-1 { transition-delay:.1s; }.delay-2 { transition-delay:.2s; }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }
@media (max-width:960px) { .hero { padding-top:68px; }.hero-grid,.workflow-grid,.support-grid { grid-template-columns:1fr; }.hero-copy { max-width:650px; }.hero-visual { max-width:660px; width:92%; margin-left:auto; }.statement-grid { grid-template-columns:78px 1fr; }.statement-grid > p:last-child { grid-column:2; }.raw-card { grid-template-columns:110px 1fr; }.raw-list { grid-column:2; grid-template-columns:repeat(7,auto); justify-content:start; }.screen-layout { grid-template-columns:1fr 1fr; }.local-grid { grid-template-columns:120px 1fr; }.local-copy { grid-column:2; }.tech-list { grid-column:2; }.download-panel { grid-template-columns:1fr; gap:30px; }.download-actions { max-width:520px; }.section-heading { grid-template-columns:1fr; gap:17px; }.section-heading > p { max-width:600px; } }
@media (max-width:720px) { .shell { width:min(100% - 32px,1180px); }.nav-shell { min-height:66px; }.brand img { width:37px; height:37px; }.brand-copy strong { font-size:12px; }.brand-copy small { font-size:6.5px; }.nav-toggle { display:block; }.primary-nav { position:absolute; top:calc(100% + 1px); left:0; right:0; display:none; flex-direction:column; align-items:stretch; gap:0; padding:10px 16px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.98); box-shadow:0 12px 25px rgba(20,54,101,.1); }.primary-nav.open { display:flex; }.primary-nav > a { padding:12px 4px; }.nav-download { text-align:center; }.hero { padding:54px 0 70px; }.hero-grid { gap:28px; }.hero-visual { min-height:auto; width:100%; padding:36px 0 30px 16px; }.orbit-blue { width:335px; height:335px; left:25px; }.orbit-gold { width:280px; height:280px; left:60px; }.chip-top { right:-8px; }.floating-chip { padding:7px 9px; }.chip-bottom { bottom:0; }.hero-proof { gap:15px; }.hero-proof span { font-size:8.5px; }.statement,.formats-section,.features-section,.workflow-section,.screens-section,.support-section,.download-section { padding:70px 0; }.statement-grid { grid-template-columns:1fr; gap:22px; }.statement-grid > p:last-child { grid-column:auto; }.section-number { margin:0; }.format-ribbon { grid-template-columns:repeat(4,1fr); }.format-ribbon span { min-height:55px; }.raw-card { grid-template-columns:1fr; gap:18px; padding:24px; }.raw-mark { width:80px; height:80px; font-size:18px; }.raw-list { grid-column:auto; grid-template-columns:repeat(4,1fr); }.feature-grid { grid-template-columns:1fr; }.feature-card { min-height:0; padding:25px; }.workflow-grid,.support-grid { gap:42px; }.workflow-copy h2 { margin-bottom:24px; }.screen-layout { grid-template-columns:1fr; }.local-grid { grid-template-columns:1fr; gap:25px; }.local-copy,.tech-list { grid-column:auto; }.local-emblem { margin-left:2px; }.tech-list { margin-top:0; }.download-panel { padding:38px 24px; }.footer-shell { align-items:flex-start; flex-direction:column; }.footer-shell > p { order:3; } }