.experience{--exp-cyan:#05c6dd;--exp-yellow:#ffdd00;--exp-border:#ffffff20;isolation:isolate}.experience .exp-heading{max-width:790px;margin-bottom:38px}.experience .exp-heading h2{font-size:clamp(32px,4.5vw,60px);line-height:1.18;letter-spacing:-.035em;margin:18px 0}.experience .exp-heading h2 span{color:var(--exp-cyan)}.experience .exp-heading>p:last-child{font-size:18px;line-height:1.75;color:#b1c3cd;max-width:740px}.experience-compare{background:radial-gradient(ellipse at 85% 40%,#073b412e,transparent 65%),#071218}.exp-comparison-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}.exp-comparison{position:relative;aspect-ratio:1;overflow:hidden;border-radius:20px;border:1px solid var(--exp-border);background:#c5c5c5;touch-action:pan-y}.exp-photo{position:absolute;inset:0;background-size:200% 100%;background-repeat:no-repeat}.exp-after{background-position:right center}.exp-before{background-position:left center}.exp-before-clip{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}.exp-image-label{position:absolute;top:18px;z-index:2;background:#081820da;color:#fff;border:1px solid #ffffff44;border-radius:30px;font-size:12px;font-weight:700;padding:8px 12px;pointer-events:none}.exp-label-before{left:14px}.exp-label-after{right:14px}.exp-divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#fff;z-index:3;pointer-events:none;box-shadow:0 0 20px #0005}.exp-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border:3px solid #fff;border-radius:50%;background:#081a23;color:#fff;font-size:26px;box-shadow:0 5px 25px #0004}.exp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;cursor:ew-resize;opacity:0;z-index:4}.exp-comparison:focus-within{outline:3px solid var(--exp-yellow);outline-offset:5px}.exp-slider-footer{display:flex;justify-content:space-between;margin-top:15px;color:#bdd5df;font-size:13px}.exp-slider-footer output{font-variant-numeric:tabular-nums;color:var(--exp-yellow)}.exp-fine{color:#8298a4;font-size:12px;line-height:1.65;margin:10px 0}.exp-small-number{font-size:14px;letter-spacing:4px;color:var(--exp-cyan)}.exp-compare-copy h3{font-size:clamp(25px,3.1vw,40px);line-height:1.3;margin:20px 0 28px}.exp-compare-copy ul{list-style:none;padding:0;margin:0 0 30px}.exp-compare-copy li{display:flex;align-items:center;gap:16px;border-top:1px solid var(--exp-border);padding:18px 0;font-size:18px}.exp-compare-copy li b{font-size:12px;color:var(--exp-cyan);font-variant-numeric:tabular-nums}.exp-next{display:inline-block;color:var(--exp-yellow);text-decoration:none;border-bottom:1px solid #ffdd0055;padding:10px 0;line-height:1.5}.exp-system{background:#071a20}.exp-system-layout{display:grid;grid-template-columns:.8fr 1.4fr;gap:28px;align-items:start}.exp-product{position:sticky;top:100px;border:1px solid #ffffff22;border-radius:22px;overflow:hidden;background:#102b32}.exp-product-photo{aspect-ratio:1;background-size:200% 100%;background-position:right center}.exp-product-caption{position:relative;padding:20px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.exp-product-caption b{font-size:20px}.exp-product-caption small{display:block;flex-basis:100%;color:#b5c8ce;font-size:12px;padding-left:18px}.exp-live-dot{height:8px;width:8px;flex:0 0 8px;border-radius:50%;background:var(--exp-cyan);box-shadow:0 0 0 5px #05c6dd18}.exp-skills{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px}.exp-skills button{border:1px solid #ffffff25;border-radius:12px;background:#0e242c;color:#b1c3cd;text-align:left;padding:12px 10px;cursor:pointer;min-width:0;transition:background .2s,transform .2s,border-color .2s}.exp-skills button b{display:block;font-size:11px;margin-bottom:9px;color:#83a1ad}.exp-skills button span{font-size:12px;line-height:1.45;display:block}.exp-skills button[aria-selected=true]{border-color:var(--exp-cyan);background:#104451;color:#fff;transform:translateY(-3px)}.exp-skills button[aria-selected=true] b{color:var(--exp-cyan)}#exp-output{padding:26px;background:#fff;border-radius:18px;color:#132a35;min-height:300px}.exp-output-top{display:flex;justify-content:space-between;gap:10px;color:#4c7585;font-size:11px}.exp-output-top b{color:#0e8b9e;font-size:12px;white-space:nowrap}#exp-output h3{font-size:25px;line-height:1.4;margin:18px 0}.exp-output-label{color:#6e818a;font-size:12px;margin-bottom:10px}.exp-deliverables{display:grid;grid-template-columns:1fr 1fr;gap:10px}.exp-deliverables>div{display:flex;align-items:center;gap:10px;border:1px solid #dce5e9;background:#f3f7f8;border-radius:10px;padding:12px;font-size:14px;line-height:1.45;animation:exp-item-in .3s calc(var(--item)*.045s) both}.exp-deliverables span{color:#048793}.exp-full-project{margin-top:20px}.exp-role-section{background:linear-gradient(130deg,#121c25,#071218)}.exp-role-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:35px;align-items:start}.exp-role-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px}.exp-role-picker button{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #ffffff24;background:#12232d;color:#b8cbd5;border-radius:12px;padding:15px 13px;text-align:left;line-height:1.4;font-size:13px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}.exp-role-picker button>span{color:#7499a8}.exp-role-picker button[aria-pressed=true]{color:#081820;background:var(--exp-yellow);border-color:var(--exp-yellow)}.exp-role-picker button[aria-pressed=true]>span{color:#081820}.exp-role-result{border:1px solid #ffffff30;border-radius:22px;padding:28px;background:#102733;min-width:0}.exp-role-person{display:flex;align-items:center;gap:13px}.exp-role-person .scenario-avatar{flex-shrink:0}.exp-role-person>div{display:grid;gap:5px}.exp-role-person small{font-size:11px;color:#90b6c3}.exp-role-person b{font-size:15px;line-height:1.4}.exp-role-project-id{margin-left:auto;color:var(--exp-cyan);font-size:12px;flex-shrink:0}.exp-role-result h3{font-size:26px;line-height:1.4;margin:24px 0 16px}.exp-role-desc{color:#b1c9d2;font-size:14px;line-height:1.8}.exp-role-result h4{color:var(--exp-cyan);font-size:12px;margin:24px 0 12px}.exp-role-result ol{list-style:none;padding:0;counter-reset:exp-step}.exp-role-result li{counter-increment:exp-step;display:flex;align-items:baseline;gap:12px;border-bottom:1px solid #ffffff15;padding:12px 0;line-height:1.5;font-size:14px}.exp-role-result li:before{content:'0' counter(exp-step);font-size:11px;color:#699eae}.exp-project-link{border:0;padding:9px 0;background:transparent;color:#8be5eb;text-align:left;cursor:pointer;font-size:13px}.exp-enquiry{margin:20px 0;background:#071920;border:1px solid #ffffff18;border-radius:12px;padding:17px}.exp-enquiry p{margin:0 0 12px;font-size:12px;line-height:1.75;color:#a6c5cf}.exp-copy{background:#173a46;border:1px solid #416b79;color:#fff;border-radius:7px;padding:8px 12px;font-size:12px;cursor:pointer}.exp-copy-state{display:block;color:#8de2cd;font-size:12px;margin-top:8px}.exp-copy-state:empty{display:none}.exp-zalo{display:block!important;width:100%;padding:17px!important;border-radius:12px!important;font-size:15px!important;line-height:1.5!important;text-align:center}.exp-role-tip{display:block;text-align:center;color:#7ca1b0;font-size:11px;line-height:1.6;margin-top:12px}.exp-hero-link{display:inline-block;margin-top:18px;color:#8be5eb;font-size:13px;line-height:1.6;text-decoration:none;border-bottom:1px solid #8be5eb55;padding-bottom:5px}.experience button:focus-visible,.experience a:focus-visible{outline:3px solid var(--exp-yellow);outline-offset:4px}.exp-skills button:hover,.exp-role-picker button:hover{border-color:var(--exp-cyan)}@keyframes exp-item-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.exp-comparison-grid{gap:32px}.exp-system-layout{grid-template-columns:.75fr 1.25fr}.exp-role-layout{grid-template-columns:1fr}.exp-role-picker{grid-template-columns:repeat(3,1fr)}.exp-role-result{max-width:none}}@media(max-width:650px){.experience .section{padding:65px 0}.experience .exp-heading{margin-bottom:28px}.experience .exp-heading h2{font-size:34px}.experience .exp-heading>p:last-child{font-size:15px}.exp-comparison-grid,.exp-system-layout{grid-template-columns:1fr;gap:25px}.exp-compare-copy h3{font-size:25px;margin:12px 0}.exp-compare-copy li{font-size:15px;padding:14px 0}.exp-compare-copy ul{margin-bottom:12px}.exp-system-layout{gap:18px}.exp-product{position:static;display:grid;grid-template-columns:110px 1fr;align-items:center;border-radius:14px}.exp-product-caption{padding:15px}.exp-product-caption b{font-size:16px}.exp-product-caption small{padding-left:0;line-height:1.6}.exp-skills{gap:5px}.exp-skills button{padding:10px 7px;border-radius:9px}.exp-skills button span{font-size:10px}.exp-skills button b{margin-bottom:6px}#exp-output{padding:21px;min-height:300px}#exp-output h3{font-size:22px}.exp-deliverables{gap:8px}.exp-deliverables>div{font-size:12px;padding:11px 8px}.exp-role-picker{grid-template-columns:1fr 1fr;gap:7px}.exp-role-picker button{font-size:12px;padding:12px 10px}.exp-role-layout{gap:20px}.exp-role-result{padding:22px 18px;border-radius:18px}.exp-role-result h3{font-size:23px}.exp-role-person b{font-size:13px}.exp-role-person .scenario-avatar{width:48px;height:48px}.exp-image-label{font-size:10px;padding:7px 9px}.exp-label-before{left:10px}.exp-label-after{right:10px}}@media(prefers-reduced-motion:reduce){.experience *{animation:none!important;transition:none!important}}

.exp-role-result{scroll-margin-top:90px}@media(max-width:650px){.exp-skills{grid-template-columns:repeat(3,1fr);gap:7px}.exp-skills button span{font-size:12px}}