:root{--bg:#f3f5f1;--surface:#fff;--surface-2:#f7f9f5;--text:#172017;--muted:#5d685c;--line:#dce5d8;--accent:#3e6b39;--accent-2:#6f9a3a;--gold:#b8961f;--accent-text:#fff;--chip:#e8f0e4;--hero-bg:#0a140c;--hero-text:#eef4ec;--hero-muted:#b2c4ae;--hero-line:#ffffff1a;--shadow:0 10px 30px #0f280f14}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#090e0a;--surface:#111813;--surface-2:#151d17;--text:#e8f1e6;--muted:#98a896;--line:#223026;--accent:#7cc46e;--accent-2:#a6d36a;--gold:#e3c25a;--accent-text:#08160a;--chip:#1a281c;--shadow:0 10px 30px #00000059}}:root[data-theme=dark]{--bg:#090e0a;--surface:#111813;--surface-2:#151d17;--text:#e8f1e6;--muted:#98a896;--line:#223026;--accent:#7cc46e;--accent-2:#a6d36a;--gold:#e3c25a;--accent-text:#08160a;--chip:#1a281c;--shadow:0 10px 30px #00000059}html[data-lang=vi] [data-l=en],html[data-lang=en] [data-l=vi]{display:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}body{background:var(--bg);color:var(--text);margin:0;font:16px/1.65 Be Vietnam Pro,system-ui,sans-serif}a{color:var(--accent)}img{max-width:100%}button{font:inherit;color:inherit}.wrap{max-width:1120px;margin:0 auto;padding:0 16px}.mono{font-family:JetBrains Mono,ui-monospace,monospace}.muted{color:var(--muted)}.small{margin:-6px 0 14px;font-size:14px}.pre{white-space:pre-line}.grow{flex:1;min-width:0}.show-sm{display:none}@media (width<=860px){.show-sm{display:inline-block}.hide-sm{display:none}}.nav{z-index:25;background:color-mix(in srgb, var(--hero-bg) 82%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--hero-line);transition:box-shadow .3s;position:sticky;top:0}.nav.scrolled{box-shadow:0 8px 28px #00000040}.nav-in{align-items:center;gap:18px;height:58px;display:flex}.brand{color:var(--hero-text);white-space:nowrap;flex:none;font-weight:700;text-decoration:none}.dim{color:#9fd68f;font-weight:400}.links{scrollbar-width:none;flex:1;gap:16px;display:flex;overflow-x:auto}.links a{color:var(--hero-muted);white-space:nowrap;padding:4px 0;font-size:14px;text-decoration:none;transition:color .2s;position:relative}.links a:after{content:"";background:#7cc46e;border-radius:2px;height:2px;transition:transform .3s;position:absolute;bottom:-2px;left:0;right:0;transform:scaleX(0)}.links a:hover,.links a.active{color:#fff}.links a:hover:after,.links a.active:after{transform:scaleX(1)}.tools{gap:6px;margin-left:auto;display:flex}.icon{border:1px solid var(--hero-line);min-width:36px;height:36px;color:var(--hero-text);cursor:pointer;background:#ffffff0f;border-radius:9px;font-size:14px;transition:background .2s,transform .2s}.icon:hover{background:#3e6b39;transform:translateY(-1px)}@media (width<=860px){.links{background:var(--hero-bg);border-bottom:1px solid var(--hero-line);opacity:0;pointer-events:none;flex-direction:column;gap:0;padding:8px 16px 16px;transition:opacity .25s,transform .25s;position:absolute;top:58px;left:0;right:0;transform:translateY(-8px)}.links a{border-bottom:1px solid var(--hero-line);padding:10px 0;font-size:16px}.links a:after{display:none}.nav.open .links{opacity:1;pointer-events:auto;transform:none}}.hero{color:var(--hero-text);background:radial-gradient(900px 500px at 85% 30%,#468c3c66,#0000 60%),radial-gradient(600px 400px at 10% 90%,#b8961f29,#0000 60%),linear-gradient(#0a140c,#102016 70%,#0a140c);padding:56px 0 40px;position:relative;overflow:hidden}.grid-bg{pointer-events:none;opacity:.5;background-image:linear-gradient(var(--hero-line) 1px, transparent 1px), linear-gradient(90deg, var(--hero-line) 1px, transparent 1px);background-size:48px 48px;animation:30s linear infinite gridMove;position:absolute;inset:0;mask-image:radial-gradient(at 60% 40%,#000 20%,#0000 75%)}@keyframes gridMove{to{background-position:48px 48px,48px 48px}}.hero-in{grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;display:grid;position:relative}.pill{letter-spacing:.08em;text-transform:uppercase;color:#b5e0a8;background:#7cc46e1f;border:1px solid #7cc46e59;border-radius:999px;align-items:center;gap:8px;margin:0 0 14px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-flex}.dot{background:#3ee08f;border-radius:50%;width:7px;height:7px;animation:2s infinite ping;box-shadow:0 0 #3ee08f99}@keyframes ping{70%{box-shadow:0 0 0 8px #0000}to{box-shadow:0 0 #0000}}h1{letter-spacing:-.01em;background:linear-gradient(90deg,#fff 0% 30%,#c5e48a 50%,#fff 70% 100%) 0 0/200%;color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(34px,6vw,60px);font-weight:800;line-height:1.08}.tagline{color:#a6d98f;margin:12px 0 6px;font-size:clamp(14px,1.8vw,17px)}.caret{color:var(--gold);margin-left:2px;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.sub{color:var(--hero-muted);margin:0 0 16px;font-size:17px}.meta{flex-wrap:wrap;gap:8px;margin-bottom:22px;display:flex}.chip{border:1px solid var(--line);background:var(--surface-2);color:var(--text);border-radius:999px;align-items:center;gap:6px;padding:5px 12px;font-size:13px;text-decoration:none;display:inline-flex}.hero .chip{border-color:var(--hero-line);color:var(--hero-text);background:#ffffff0f}.chip-btn{cursor:pointer;color:var(--gold)!important;border-color:#b8961f80!important}a.chip:hover,.chip-btn:hover{border-color:var(--accent)}.actions{flex-wrap:wrap;gap:10px;display:flex}.btn{cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;align-items:center;gap:8px;padding:11px 20px;font-size:15px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;display:inline-flex}.btn:hover{transform:translateY(-2px)}.btn.primary{color:#fff;background:linear-gradient(135deg,#3e6b39,#6f9a3a);border:0;box-shadow:0 8px 24px #3e6b3959}.btn.primary:hover{box-shadow:0 12px 30px #3e6b3980}.hero .btn.ghost{color:var(--hero-text);border-color:var(--hero-line);background:0 0}.hero-visual{aspect-ratio:1;justify-self:end;width:100%;max-width:520px;position:relative}#orb{width:100%;height:100%;position:absolute;inset:0}.hero-visual .avatar{object-fit:cover;border:3px solid #ffffffe6;border-radius:50%;width:42%;height:42%;position:absolute;top:50%;left:50%;translate:-50% -50%;box-shadow:0 0 0 6px #3e6b3959,0 20px 60px #00000080}.avatar.ph{color:#a6d98f;background:#12261a;place-items:center;font-size:48px;font-weight:800;display:grid}.stats{grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0 0;padding:0;list-style:none;display:grid}.stats li{border:1px solid var(--hero-line);backdrop-filter:blur(6px);background:#ffffff0a;border-radius:14px;padding:16px 18px}.stats strong{background:linear-gradient(90deg, #8fd07a, var(--gold));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:32px;font-weight:800;line-height:1.1;display:block}.stats small{color:var(--hero-muted);font-size:13px}.num{font-variant-numeric:tabular-nums}@media (width<=860px){.hero{padding-top:28px}.hero-in{grid-template-columns:1fr}.hero-visual{order:-1;justify-self:center;max-width:340px}.stats{grid-template-columns:1fr 1fr}}main{gap:22px;padding-top:28px;padding-bottom:8px;display:grid}.panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:28px 30px;position:relative;overflow:hidden}.panel:before{content:"";background:linear-gradient(90deg, var(--accent), var(--gold), transparent 70%);transform-origin:0;width:100%;height:3px;transition:transform .9s cubic-bezier(.2,.7,.2,1) .15s;position:absolute;top:0;left:0;transform:scaleX(0)}.panel.in:before,html:not(.js) .panel:before{transform:scaleX(1)}@media (width<=640px){.panel{border-radius:14px;padding:22px 18px}}h2{flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px;font-size:24px;display:flex}.no{color:var(--accent);font-size:14px;font-weight:600}h3{margin:0;font-size:17px;line-height:1.4}h3.sub{color:var(--muted);margin:26px 0 12px;font-size:14px;font-weight:600}.label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px;font-size:12px;font-weight:600}.date{background:var(--chip);color:var(--accent);white-space:nowrap;border-radius:999px;flex:none;height:fit-content;padding:3px 10px;font-size:12px}.lead{margin:0 0 14px;font-size:17px}.cols{grid-template-columns:1fr 1fr;gap:28px;display:grid}.cols p{margin:0}.cols.one{grid-template-columns:1fr}@media (width<=760px){.cols{grid-template-columns:1fr;gap:14px}}.timeline{border-left:2px solid var(--line);gap:22px;margin:0;padding:0 0 0 22px;list-style:none;display:grid}.item{position:relative}.item:before{content:"";background:var(--accent);width:12px;height:12px;box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);border-radius:50%;position:absolute;top:16px;left:-30px}.item-head{align-items:flex-start;gap:14px;display:flex}.item-head p{margin:2px 0 0}@media (width<=640px){.item-head{flex-wrap:wrap}.item-head>.date{flex-basis:auto;order:-1;margin-left:62px}}.logo{object-fit:contain;background:#3e6b39;border-radius:12px;flex:none;width:48px;height:48px;padding:6px;transition:transform .4s cubic-bezier(.2,.9,.3,1.4)}.logo.ph.tiny{letter-spacing:.02em;font-size:12px}.logo.ph{background:var(--chip);color:var(--accent);place-items:center;font-weight:700;display:grid}.item:hover .logo{transform:rotate(-6deg)scale(1.08)}.bullets{gap:6px;margin:12px 0 0;padding-left:20px;display:grid}.bullets li::marker{color:var(--accent)}.company{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface) 60%)}.company-head{align-items:flex-start;gap:22px;margin-bottom:22px;display:flex}.company-logo{background:#3e6b39;border-radius:14px;flex:none;width:150px;padding:14px 16px}@media (width<=640px){.company-head{flex-direction:column}}.facts{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.facts li{background:var(--accent);color:var(--accent-text);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}.services{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:0 0 22px;padding:0;list-style:none;display:grid}.service{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:18px;position:relative;overflow:hidden}.service p{color:var(--muted);margin:6px 0 0;font-size:14px}.svc-no{background:linear-gradient(135deg, var(--accent), var(--gold));color:#0000;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:34px;font-weight:800;line-height:1;display:block}.service:after{content:"";background:var(--accent);transform-origin:0;height:3px;transition:transform .35s;position:absolute;inset:auto 0 0;transform:scaleX(0)}.service:hover:after{transform:scaleX(1)}.clients{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:0;padding:0;list-style:none;display:grid}.clients li{border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--surface-2);border-radius:10px;padding:12px 14px;font-weight:600}.skill-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px 28px;display:grid}.chips{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.chips li{border:1px solid var(--line);background:var(--surface-2);cursor:default;border-radius:8px;padding:4px 11px;font-size:14px}.chips li:hover{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.projects{grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));align-items:start;gap:14px;display:grid}.proj{border:1px solid var(--line);background:var(--surface-2);border-radius:14px;overflow:hidden}.proj summary{cursor:pointer;align-items:flex-start;gap:12px;padding:16px 18px;list-style:none;display:flex}.proj summary::-webkit-details-marker{display:none}.tags{color:var(--muted);margin:6px 0 0;font-size:12px}.chev{color:var(--accent);flex:none;font-size:18px;line-height:1;transition:rotate .3s}.proj[open] .chev{rotate:180deg}.proj[open]{border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}.proj-body{gap:14px;padding:0 18px 18px;animation:.45s both fadeUp;display:grid}.proj-img{cursor:zoom-in;aspect-ratio:16/9;background:var(--chip);border:0;border-radius:10px;padding:0;overflow:hidden}.proj-img img{object-fit:cover;width:100%;height:100%;transition:transform .6s;display:block}.proj-img:hover img{transform:scale(1.05)}.proj-body .bullets{margin:0}.posts{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.post{border:1px solid var(--line);background:var(--surface-2);border-radius:14px;flex-direction:column;display:flex;overflow:hidden}.post.more{display:none}#posts.open .post.more{display:flex}.post-img{background:var(--chip);cursor:zoom-in;aspect-ratio:4/3;border:0;width:100%;padding:0;display:block;position:relative;overflow:hidden}.post-img img{object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1);display:block}.post:hover .post-img img{transform:scale(1.07)}.badge{color:#fff;background:#000000a6;border-radius:999px;padding:2px 9px;font-size:12px;position:absolute;bottom:8px;right:8px}.badge.play{left:8px;right:auto}.post-body{flex-direction:column;flex:1;align-items:flex-start;gap:6px;padding:14px 16px 16px;display:flex}.post-body p{margin:0}.post-body h3{font-size:15px}.post-body .pre{color:var(--muted);font-size:14px}.clamp2,.clamp3{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.clamp2{-webkit-line-clamp:2}.clamp3{-webkit-line-clamp:3}.read{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;text-decoration:none}.more-btn{margin:18px auto 0;display:flex}.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.card{border:1px solid var(--line);background:var(--surface-2);border-radius:14px;gap:12px;padding:16px;display:flex}.card p{margin:4px 0 0}.card .date{margin-top:6px;display:inline-block}.card-ico{font-size:26px;line-height:1}.award{border-color:color-mix(in srgb, var(--gold) 55%, var(--line));background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, var(--surface-2)), var(--surface-2))}.gallery{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;display:grid}.thumb{cursor:zoom-in;aspect-ratio:16/10;background:var(--chip);border:0;border-radius:14px;padding:0;position:relative;overflow:hidden}.thumb img{object-fit:cover;object-position:center 30%;width:100%;height:100%;transition:transform .6s;display:block}.thumb:hover img{transform:scale(1.05)}.cap{color:#fff;text-align:left;background:linear-gradient(#0000,#000000b3);padding:24px 12px 10px;font-size:13px;position:absolute;inset:auto 0 0}.contact-row{flex-wrap:wrap;gap:10px;display:flex}.contact-row .chip{padding:8px 14px;font-size:14px}.contact-data{display:contents}.contact-data[hidden]{display:none}.foot{color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:24px;padding-bottom:40px;font-size:12px;display:flex}.demo{border:1px dashed var(--muted);color:var(--muted);vertical-align:middle;text-transform:lowercase;border-radius:999px;margin-left:8px;padding:0 8px;font-family:Be Vietnam Pro,sans-serif;font-size:11px;font-weight:500;display:inline-block}dialog{background:0 0;border:0;max-width:94vw;padding:0}dialog::backdrop{background:#000000d9}dialog img{border-radius:8px;max-width:94vw;max-height:80vh;margin:0 auto;display:block}dialog[open] img{animation:.35s both popIn}.lb-bar{justify-content:center;align-items:center;gap:12px;margin-top:8px;display:flex}.lb-bar p{color:#fff;text-align:center;max-width:70vw;margin:0;font-size:14px}.lb-bar button{visibility:hidden;color:#fff;cursor:pointer;background:#ffffff26;border:0;border-radius:50%;width:40px;height:40px;font-size:24px}dialog.multi .lb-bar button{visibility:visible}#progress{z-index:30;transform-origin:0;background:linear-gradient(90deg, var(--gold), #7cc46e, #3e6b39);height:3px;position:fixed;inset:0 0 auto;transform:scaleX(0)}#to-top{z-index:20;color:#fff;opacity:0;pointer-events:none;background:linear-gradient(135deg,#3e6b39,#6f9a3a);border-radius:50%;place-items:center;width:44px;height:44px;font-size:20px;text-decoration:none;transition:opacity .3s,translate .3s;display:grid;position:fixed;bottom:18px;right:18px;translate:0 20px;box-shadow:0 8px 20px #00000040}#to-top.show{opacity:1;pointer-events:auto;translate:0}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes popIn{0%{opacity:0;transform:scale(.75)}to{opacity:1;transform:none}}@keyframes shine{to{background-position:200%}}.hero-copy>*{animation:.7s cubic-bezier(.2,.7,.2,1) both fadeUp}.hero-copy>:first-child{animation-delay:.1s}.hero-copy>:nth-child(2){animation:.7s .2s both fadeUp,7s linear 1.4s infinite shine}.hero-copy>:nth-child(3){animation-delay:.32s}.hero-copy>:nth-child(4){animation-delay:.42s}.hero-copy>:nth-child(5){animation-delay:.52s}.hero-copy>:nth-child(6){animation-delay:.62s}.hero-visual{animation:1s cubic-bezier(.2,.9,.3,1.2) .2s both popIn}.js .reveal{opacity:0;transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1),translate .25s,box-shadow .25s,border-color .25s,background .25s,color .25s;transition-delay:calc(var(--i,0) * 70ms), calc(var(--i,0) * 70ms), 0s, 0s, 0s, 0s, 0s;transform:translateY(26px)}.js .reveal.in{opacity:1;transform:none}main>section.reveal{transform:translateY(16px)}.card,.post,.service,.proj,.stats li,.clients li{transition:translate .25s,box-shadow .25s,border-color .25s}.card:hover,.post:hover,.service:hover,.stats li:hover{translate:0 -5px;box-shadow:0 16px 36px #00000024}.clients li:hover{translate:4px}.chips li:hover{translate:0 -2px}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.js .reveal{opacity:1;transform:none}.panel:before{transform:scaleX(1)}}@media print{body{color:#000;background:#fff}.nav,#progress,#to-top,.actions,.grid-bg,#orb,#posts,#gallery,dialog,.stats,.js-reveal,.demo{display:none!important}.js .reveal{opacity:1!important;transform:none!important}.hero{color:#000;background:0 0;padding:0}.hero-in{grid-template-columns:1fr auto}.hero-visual{width:140px}.hero-visual .avatar{width:100%;height:100%;box-shadow:none}h1{color:#000;background:0 0}.sub,.tagline,.hero .chip{color:#333}.panel{box-shadow:none;break-inside:avoid;border-color:#ccc}a{color:#000}}
