:root{--color-zalo-blue:#0068ff;--color-zalo-blue-dark:#004ecc;--color-zalo-blue-soft:#eaf3ff;--color-zalo-blue-softer:#f4f8ff;--color-bg:#f8fbff;--color-surface:#fff;--color-text:#0f172a;--color-muted:#64748b;--color-border:#dbeafe;--color-border-strong:#bfdbfe;--color-success:#16a34a;--color-warning:#f59e0b;--color-danger:#dc2626;--shadow-soft:0 18px 50px #0050be14;--shadow-card:0 12px 32px #0f172a14;--radius-lg:28px;--radius-md:20px;--radius-sm:14px;color:var(--color-text);background:var(--color-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at top left, #0068ff24, transparent 32rem), linear-gradient(180deg, #fff 0%, var(--color-bg) 38%, #fff 100%);min-width:320px;margin:0}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}code{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace}#root{min-height:100vh}.app-shell{flex-direction:column;min-height:100vh;display:flex}main{flex:1}.site-header{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffe0;border:1px solid #dbeafee6;border-radius:999px;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;width:min(1180px,100% - 32px);margin:16px auto 0;padding:12px 14px;display:grid;position:sticky;top:0;box-shadow:0 10px 30px #0050be14}.brand{align-items:center;gap:10px;min-width:max-content;display:flex}.brand-mark{background:linear-gradient(135deg, var(--color-zalo-blue), #36a3ff);color:#fff;border-radius:13px;place-items:center;width:38px;height:38px;font-weight:800;display:grid;box-shadow:0 8px 20px #0068ff40}.brand strong{font-size:14px;line-height:1.1;display:block}.brand small{color:var(--color-muted);margin-top:2px;font-size:12px;display:block}.site-nav{justify-self:center;align-items:center;gap:4px;display:flex}.nav-link{color:var(--color-muted);border-radius:999px;padding:10px 14px;font-size:14px;font-weight:700;transition:all .16s}.nav-link:hover,.nav-link.active{color:var(--color-zalo-blue);background:var(--color-zalo-blue-soft)}.page{width:min(1180px,100% - 32px);margin:0 auto;padding:56px 0 88px}.hero{grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);align-items:stretch;gap:28px;margin-bottom:84px;display:grid}.hero-copy,.page-hero>div:first-child,.hero-panel,.page-hero .insight-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);background:#ffffffe6}.hero-copy,.page-hero>div:first-child{padding:clamp(28px,5vw,56px)}.hero-panel{padding:22px}.page-hero{grid-template-columns:minmax(0,1fr) minmax(300px,420px);align-items:stretch}.evoyage-hero{border-radius:var(--radius-lg);background:linear-gradient(135deg,#0068ff08,#16a34a0a)}.eyebrow,.section-eyebrow,.panel-label{color:var(--color-zalo-blue);letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;font-size:12px;font-weight:800}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.055em;max-width:900px;margin-bottom:18px;font-size:clamp(42px,7vw,72px);line-height:.98}h2{letter-spacing:-.035em;margin-bottom:14px;font-size:clamp(28px,4vw,40px);line-height:1.08}h3{margin-bottom:10px;font-size:18px;line-height:1.25}p{color:var(--color-muted);line-height:1.7}.hero-lead{max-width:760px;color:var(--color-text);letter-spacing:-.025em;font-size:clamp(20px,3vw,28px);font-weight:750;line-height:1.22}.hero-copy p:not(.eyebrow):not(.hero-lead){max-width:760px;margin-bottom:14px}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:26px;display:flex}.btn{cursor:pointer;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:8px;font-weight:800;transition:all .16s;display:inline-flex}.btn-md{min-height:48px;padding:0 20px;font-size:15px}.btn-sm{min-height:38px;padding:0 14px;font-size:13px}.btn-primary{background:var(--color-zalo-blue);color:#fff;box-shadow:0 12px 24px #0068ff40}.btn-primary:hover{background:var(--color-zalo-blue-dark);transform:translateY(-1px)}.btn-secondary{background:var(--color-zalo-blue-soft);color:var(--color-zalo-blue);border-color:var(--color-border-strong)}.btn-secondary:hover{background:#ddecff;transform:translateY(-1px)}.btn-ghost{color:var(--color-zalo-blue);background:0 0}:focus-visible{outline-offset:3px;outline:3px solid #0068ff59}.exercise-card.compact{border:1px solid var(--color-border);background:linear-gradient(180deg, #fff, var(--color-zalo-blue-softer));border-radius:20px;padding:18px;transition:all .16s;display:block}.exercise-card.compact+.exercise-card.compact{margin-top:12px}.exercise-card.compact:hover{box-shadow:var(--shadow-card);border-color:var(--color-border-strong);transform:translateY(-2px)}.exercise-card span{color:var(--color-zalo-blue);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:800;display:block}.exercise-card strong{margin-top:6px;font-size:19px;display:block}.exercise-card small{color:var(--color-muted);margin-top:8px;line-height:1.55;display:block}.section{margin-top:84px}.section-heading{max-width:860px;margin-bottom:24px}.section-intro{color:var(--color-muted)}.grid{gap:16px;display:grid}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}.insight-card{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);padding:22px;transition:all .16s;box-shadow:0 8px 26px #0f172a0d}.insight-card:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}.insight-card h3{color:var(--color-text)}.insight-card div{color:var(--color-muted);line-height:1.65}.insight-card.tone-blue{background:linear-gradient(180deg, #fff, var(--color-zalo-blue-softer));border-color:var(--color-border-strong)}.insight-card.tone-success{background:#f0fdf4;border-color:#16a34a40}.insight-card.tone-warning{background:#fffbeb;border-color:#f59e0b40}.table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);margin:18px 0 0;overflow-x:auto;box-shadow:0 8px 28px #0f172a0b}.comparison-table{border-collapse:collapse;text-align:left;width:100%;min-width:720px}.comparison-table caption{color:var(--color-zalo-blue);text-align:left;background:var(--color-zalo-blue-softer);padding:16px 18px;font-weight:800}.comparison-table th,.comparison-table td{vertical-align:top;border-top:1px solid var(--color-border);padding:16px 18px}.comparison-table th{color:#1e3a8a;letter-spacing:.04em;text-transform:uppercase;background:#f8fbff;font-size:13px}.comparison-table td{color:var(--color-muted);line-height:1.55}.comparison-table td:first-child{color:var(--color-text);font-weight:750}.callout{border:1px solid var(--color-border-strong);border-left:5px solid var(--color-zalo-blue);border-radius:var(--radius-md);background:linear-gradient(180deg, #fff, var(--color-zalo-blue-softer));margin-top:20px;padding:22px;box-shadow:0 8px 28px #0068ff0f}.callout strong{color:var(--color-text);margin-bottom:8px;font-size:17px;display:block}.callout p,.callout div{color:var(--color-muted);line-height:1.7}.split-callout strong:not(:first-child){margin-top:18px}.code-rule{border-radius:var(--radius-md);box-shadow:var(--shadow-card);background:#071733;border:1px solid #c7d2fe;margin:20px 0 0;padding:0;overflow-x:auto}.code-rule code{color:#dbeafe;white-space:pre;padding:22px;font-size:14px;line-height:1.7;display:block}.flow-block{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-soft);margin-top:18px;padding:22px}.flow-caption{color:var(--color-zalo-blue);margin-bottom:18px;font-weight:800}.flow-steps{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;display:grid}.flow-step{border:1px solid var(--color-border);background:linear-gradient(#fff,#f7fbff);border-radius:18px;min-height:112px;padding:16px;position:relative}.flow-step strong{margin-top:14px;line-height:1.35;display:block}.flow-index{background:var(--color-zalo-blue);color:#fff;border-radius:999px;place-items:center;width:30px;height:30px;font-size:13px;font-weight:900;display:grid}.accordion{border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;margin-top:18px;overflow:hidden}.accordion summary{cursor:pointer;color:var(--color-text);padding:18px 20px;font-weight:800}.accordion-body{padding:0 20px 20px}.timeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0;display:grid}.timeline div,.portal-mock div{border:1px solid var(--color-border);background:#fff;border-radius:18px;padding:18px}.timeline strong,.portal-mock strong{color:var(--color-text);margin-bottom:6px;display:block}.timeline span,.portal-mock span{color:var(--color-muted);line-height:1.55;display:block}.portal-mock{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px;display:grid}.feature-list{flex-wrap:wrap;gap:10px;margin:4px 0 18px;display:flex}.feature-list span{border:1px solid var(--color-border-strong);background:var(--color-zalo-blue-soft);color:#1e3a8a;border-radius:999px;align-items:center;padding:10px 14px;font-size:14px;font-weight:750;display:inline-flex}.site-footer{border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fffc;justify-content:space-between;align-items:center;gap:18px;width:min(1180px,100% - 32px);margin:0 auto 24px;padding:24px;display:flex}.site-footer p{margin:0}.footer-links{flex-wrap:wrap;gap:14px;display:flex}.footer-links a{color:var(--color-zalo-blue);font-weight:800}@media (width<=980px){.site-header{border-radius:26px;grid-template-columns:1fr;align-items:start}.site-nav{justify-self:stretch;padding-bottom:2px;overflow-x:auto}.site-header .btn{justify-self:start}.hero,.page-hero{grid-template-columns:1fr;margin-bottom:56px}.grid.two,.grid.three,.grid.four,.grid.five,.timeline,.portal-mock{grid-template-columns:1fr}.section{margin-top:56px}.site-footer{flex-direction:column;align-items:flex-start}}@media (width<=560px){.page{width:min(100% - 24px,1180px);padding-top:32px}.site-header,.site-footer{width:min(100% - 24px,1180px)}.site-nav{flex-wrap:wrap;gap:6px;overflow-x:visible}.nav-link{text-align:center;flex:calc(50% - 6px)}.hero-copy,.page-hero>div:first-child,.hero-panel,.insight-card,.callout,.flow-block{border-radius:22px}.hero-copy,.page-hero>div:first-child{padding:28px 22px}.hero-actions,.footer-links,.btn{width:100%}.site-header .btn{width:auto}.comparison-table{min-width:640px}}.portal-artifact{margin-top:18px}.mock-window{border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);background:#fff;overflow:hidden}.mock-header{border-bottom:1px solid var(--color-border);background:linear-gradient(#f8fbff,#fff);grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:14px 16px;display:grid}.mock-dot{background:var(--color-border-strong);border-radius:999px;width:10px;height:10px;margin-right:6px;display:inline-block}.mock-header strong{color:var(--color-text)}.mock-header button{background:var(--color-zalo-blue);color:#fff;border:0;border-radius:999px;padding:9px 13px;font-size:13px;font-weight:800}.mock-grid{background:var(--color-zalo-blue-softer);grid-template-columns:1.4fr 1fr;gap:14px;padding:16px;display:grid}.mock-panel{border:1px solid var(--color-border);background:#fff;border-radius:18px;padding:16px}.mock-panel.large{grid-row:span 2}.mock-panel-title{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;display:flex}.mock-panel-title strong{color:var(--color-text)}.mock-panel-title span,.mock-panel p,.mock-list{color:var(--color-muted);font-size:14px}.mock-list{margin:0;padding-left:20px;line-height:1.8}.asset-table{border:1px solid var(--color-border);border-radius:14px;overflow:hidden}.asset-row{border-top:1px solid var(--color-border);color:var(--color-muted);grid-template-columns:1.2fr .6fr .8fr .8fr;align-items:center;gap:10px;padding:12px;font-size:14px;display:grid}.asset-row:first-child{border-top:0}.asset-head{color:#1e3a8a;text-transform:uppercase;letter-spacing:.05em;background:#f8fbff;font-size:12px;font-weight:800}.asset-row span:first-child{color:var(--color-text);font-weight:750}.status-badge{border-radius:999px;width:max-content;padding:5px 9px;font-size:12px;font-weight:800}.status-badge.approved{color:#166534;background:#dcfce7}.status-badge.pending{color:#92400e;background:#fef3c7}.status-badge.rejected{color:#991b1b;background:#fee2e2}.field-preview{border:1px solid var(--color-border);background:#f8fbff;border-radius:14px;margin-bottom:10px;padding:12px}.field-preview small,.field-preview b{display:block}.field-preview small{color:var(--color-muted);margin-bottom:3px}.field-preview b{color:var(--color-text);font-size:14px}.migration-strip{border-top:1px solid var(--color-border);background:linear-gradient(90deg, var(--color-zalo-blue-soft), #fff);align-items:center;gap:14px;padding:16px;display:flex}.migration-strip strong{min-width:210px;color:var(--color-text)}.migration-strip span{color:var(--color-muted);line-height:1.55}@media (width<=980px){.mock-header,.mock-grid,.migration-strip{grid-template-columns:1fr;display:grid}.mock-panel.large{grid-row:auto}.asset-row{grid-template-columns:1fr}}.anchor-nav{z-index:10;border:1px solid var(--color-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffe6;border-radius:999px;flex-wrap:wrap;gap:8px;margin:-42px 0 56px;padding:12px;display:flex;position:sticky;top:92px;box-shadow:0 8px 24px #0050be14}.anchor-nav a{min-height:34px;color:var(--color-muted);border:1px solid var(--color-border);background:#fff;border-radius:999px;align-items:center;padding:0 12px;font-size:13px;font-weight:800;display:inline-flex}.anchor-nav a:hover{color:var(--color-zalo-blue);background:var(--color-zalo-blue-soft)}.memo-list{color:var(--color-muted);margin:0 0 16px;padding-left:20px;line-height:1.75}.comparison-table a{color:var(--color-zalo-blue);text-underline-offset:3px;font-weight:800;text-decoration:underline}@media (width<=980px){.anchor-nav{border-radius:24px;margin:-24px 0 44px;position:static}}
