/* HONG PHUC / DATA — scoped design system, no build step required. */
:root{color-scheme:dark}
html{scroll-behavior:smooth;scroll-padding-top:112px;background:#0A0D14}
body{margin:0;background:#0A0D14}
.hp-app{--bg:#0A0D14;--surface:#111827;--white:#fff;--muted:#9CA3AF;--red:#FF3838;--orange:#FF7A00;--amber:#FFB800;--line:#ffffff15;--gradient:linear-gradient(110deg,#FF3838 0%,#FF7A00 50%,#FFB800 100%);background:var(--bg);color:var(--white);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.65;isolation:isolate;overflow:clip;min-width:0;text-align:left;font-weight:400;-webkit-font-smoothing:antialiased}
.hp-app *,.hp-app *::before,.hp-app *::after{box-sizing:border-box}
.hp-app h1,.hp-app h2,.hp-app h3,.hp-app p{margin:0;padding:0;color:inherit;font-family:inherit;letter-spacing:normal;text-transform:none}
.hp-app h1,.hp-app h2,.hp-app h3{font-weight:650}
.hp-app a{color:inherit;text-decoration:none;background:none;cursor:pointer}
.hp-app button{font:inherit;cursor:pointer;text-transform:none;letter-spacing:normal}
.hp-app svg{display:block;max-width:100%}
.hp-app [hidden]{display:none!important}
.hp-app :focus-visible{outline:2px solid var(--amber);outline-offset:5px}
.hp-app ::selection{background:#FF7A0040;color:#fff}
.hp-app .container{width:min(1180px,calc(100% - 80px));margin:0 auto;padding:0}
.hp-app .mono{font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;font-size:10px;letter-spacing:.1em}
.hp-app .gradient-text{background:linear-gradient(105deg,#FF7A00 3%,#FFB800 62%,#FF6A3A 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-app .glass{background:linear-gradient(140deg,#18202d9c,#10141da6);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.hp-app .section-anchor{scroll-margin-top:112px}
.hp-app .skip-link{position:fixed;z-index:10000;left:20px;top:-90px;background:var(--amber);color:var(--bg);padding:12px 20px;border-radius:8px}.hp-app .skip-link:focus{top:20px}
.hp-app .site-header{position:fixed;z-index:100;top:20px;left:50%;transform:translateX(-50%);width:min(1280px,calc(100% - 48px));height:76px;padding:0 28px;display:flex;align-items:center;gap:32px;border:1px solid #ffffff12;border-radius:16px;background:#0e131ec4;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:background .25s,box-shadow .25s,border-color .25s}
.hp-app .site-header.scrolled{background:#0d121ee8;border-color:#ffffff20;box-shadow:0 12px 40px #0003}
.hp-app .brand{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;font-weight:600;font-size:16px;letter-spacing:-.03em;line-height:1}
.hp-app .brand-mark{width:35px;height:35px;display:inline-block;text-align:center;border:1px solid #FF7A0045;border-radius:10px;background:linear-gradient(140deg,#FF7A0015,#FF383808);font-size:29px;letter-spacing:-.15em;padding-right:5px;font-weight:750;color:#fff;line-height:1.05}.hp-app .brand-mark span{color:var(--orange)}.hp-app .brand-suffix{color:#737d91;font-weight:400}
.hp-app .desktop-nav{margin-left:auto;display:flex;gap:30px;align-items:center}.hp-app .desktop-nav a{font-size:13px;color:#a7afbd;position:relative;transition:color .2s}.hp-app .desktop-nav a::after{content:"";position:absolute;bottom:-8px;left:0;width:100%;height:1px;background:var(--gradient);transform:scaleX(0);transform-origin:left;transition:transform .2s}.hp-app .desktop-nav a:hover,.hp-app .desktop-nav a[aria-current]{color:#fff}.hp-app .desktop-nav a:hover::after,.hp-app .desktop-nav a[aria-current]::after{transform:scaleX(1)}
.hp-app .nav-contact{font-size:12px;display:flex;align-items:center;gap:23px;border:1px solid #ffffff24;padding:9px 15px;border-radius:8px;transition:border-color .2s,background .2s}.hp-app .nav-contact:hover{border-color:#FF7A0080;background:#FF7A000d}.hp-app .nav-contact span{color:var(--orange);font-size:18px}
.hp-app .menu-toggle{display:none}.hp-app .mobile-nav{display:none}
.hp-app .hero{position:relative;padding-top:196px;min-height:820px;padding-bottom:30px;overflow:hidden}
.hp-app .hero-grid,.hp-app .contact-grid{position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse 70% 70% at 66% 40%,#000,transparent);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 66% 40%,#000,transparent)}
.hp-app .hero-grid{background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px)}
.hp-app .ambient{position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(85px)}.hp-app .ambient-hero{width:510px;height:510px;top:120px;right:-80px;background:radial-gradient(circle,#FF7A0015,#FF38380c 45%,transparent 70%)}
.hp-app .hero-layout{display:grid;grid-template-columns:1.07fr 1fr;gap:70px;align-items:center;position:relative;z-index:1}
.hp-app .eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.17em;font-weight:650;color:#c0c7d3;margin-bottom:24px}.hp-app .live-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 13px #FF7A0080}
.hp-app .intro-name{font-size:15px;color:var(--muted);margin-bottom:18px}
.hp-app h1{font-size:clamp(54px,5.45vw,78px);line-height:1.12;letter-spacing:-.065em;font-weight:700;margin-bottom:25px}
.hp-app .hero-description{font-size:16px;line-height:1.85;max-width:465px;color:var(--muted)}.hp-app .hero-description strong{color:#cdd3de;font-weight:500}
.hp-app .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:31px}.hp-app .button{min-height:49px;display:inline-flex;align-items:center;justify-content:center;gap:23px;padding:13px 20px;border-radius:9px;font-size:12px;font-weight:650;line-height:1.5;border:1px solid transparent;transition:transform .22s,box-shadow .22s,border-color .22s,background .22s}.hp-app .button span{font-size:19px;line-height:1;transition:transform .2s}.hp-app .button:hover{transform:translateY(-3px)}.hp-app .button:hover span{transform:translate(2px,-2px)}.hp-app .button-primary{background:var(--gradient);color:#0A0D14;box-shadow:0 0 0 1px #FF7A0030,0 5px 24px #FF7A0018}.hp-app .button-primary:hover{box-shadow:0 0 0 1px #FFB80080,0 7px 32px #FF7A0033}.hp-app .button-secondary{background:#ffffff03;border-color:#ffffff20;color:#e8ebf0}.hp-app .button-secondary:hover{border-color:#FF7A0070;background:#FF7A0008}
.hp-app .hero-note{display:flex;align-items:center;gap:10px;font-size:11px;color:#7d8798;margin-top:29px}.hp-app .note-line{width:23px;height:1px;background:var(--gradient)}
.hp-app .hero-visual{position:relative;min-width:0;padding:25px 0 45px;min-height:460px;display:flex;align-items:center}.hp-app .visual-panel{position:relative;z-index:1;width:100%;border-radius:17px;box-shadow:0 30px 80px #0004,0 0 50px #FF7A0008;overflow:hidden;transform:perspective(1200px) rotateY(-5deg) rotateX(2deg);transition:transform .5s,border-color .3s}.hp-app .hero-visual:hover .visual-panel{transform:perspective(1200px) rotateY(0) rotateX(0);border-color:#FF7A003b}
.hp-app .panel-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 17px;border-bottom:1px solid var(--line);color:#738096}.hp-app .window-dots{display:flex;gap:5px}.hp-app .window-dots i{width:5px;height:5px;background:#FF3838;border-radius:50%}.hp-app .window-dots i:nth-child(2){background:#FF7A00}.hp-app .window-dots i:nth-child(3){background:#FFB800}.hp-app .panel-toolbar>.mono{font-size:10px;letter-spacing:.03em}.hp-app .panel-state{font:8px Consolas,monospace;letter-spacing:.1em;display:flex;align-items:center;gap:5px;color:#a4acb9}.hp-app .panel-state>span{width:4px;height:4px;border-radius:50%;background:var(--amber)}
.hp-app .visual-tabs{display:flex;gap:22px;padding:15px 22px 0}.hp-app .visual-tabs button{background:none;border:0;border-bottom:1px solid transparent;border-radius:0;padding:0 0 8px;color:#7d8798;font-size:10px;transition:color .2s,border-color .2s}.hp-app .visual-tabs button[aria-selected="true"]{color:#FF9D42;border-color:#FF7A00}.hp-app .visual-tabs button:hover{color:#fff}
.hp-app .study-view{padding:12px 18px 0;min-height:341px}.hp-app .cluster-visual{width:100%;height:252px}.hp-app .medoid{animation:medoid-breathe 4s ease-in-out infinite}.hp-app .medoid:nth-child(2){animation-delay:-1s}.hp-app .medoid:nth-child(3){animation-delay:-2s}@keyframes medoid-breathe{0%,100%{stroke-opacity:1}50%{stroke-opacity:.45}}
.hp-app .study-caption{border-top:1px solid var(--line);display:flex;align-items:center;gap:11px;padding:15px 3px 17px}.hp-app .caption-icon{font-size:23px;color:var(--orange)}.hp-app .study-caption strong{display:block;font-size:11px;font-weight:550;color:#d3d8e1}.hp-app .study-caption div>span{display:block;font-size:9px;color:#7b8597;margin-top:2px}.hp-app .floating-label{position:absolute;right:-21px;bottom:10px;z-index:2;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:11px;box-shadow:0 12px 40px #0005}.hp-app .spark{font-size:25px;color:var(--amber);text-shadow:0 0 20px #FF7A0040}.hp-app .floating-label .mono{font-size:10px;color:#e8c79c}.hp-app .floating-label small{display:block;font-size:9px;color:#8691a3;margin-top:2px}.hp-app .visual-coordinate{position:absolute;left:5px;bottom:-13px;color:#576273;font-size:8px}.hp-app .visual-orbit{position:absolute;inset:-25px -45px;border:1px solid #FF7A000b;border-radius:50%;transform:rotate(-22deg);pointer-events:none}.hp-app .orbit-two{inset:20px -70px;transform:rotate(31deg);border-color:#ffffff05}
.hp-app .nlp-view,.hp-app .vision-view{padding-top:23px}.hp-app .nlp-question,.hp-app .nlp-context{padding:13px 14px;background:#ffffff03;border:1px solid var(--line);border-radius:7px;margin-bottom:12px}.hp-app .nlp-view .mono{font-size:8px;color:#b88557}.hp-app .nlp-question p{font-size:14px;margin-top:6px}.hp-app .nlp-context{min-height:153px}.hp-app .nlp-context p{font-size:12px;color:#a2adbd;line-height:1.9;margin-top:7px}.hp-app mark{background:#FF7A001f;color:#ffb05e;padding:2px 3px;border-radius:3px}.hp-app .nlp-view .study-caption{margin-top:15px}.hp-app .vision-frame{position:relative;height:234px;margin-bottom:19px;border:1px solid #FF7A002e;border-radius:7px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#FF7A0008,transparent)}.hp-app .pixel-art{display:grid;grid-template-columns:repeat(4,25px);gap:7px;transform:rotate(-10deg)}.hp-app .pixel-art i{width:25px;height:25px;border-radius:4px;background:#FF7A00;opacity:.45}.hp-app .pixel-art i:nth-child(3n){background:#FFB800;opacity:.9}.hp-app .pixel-art i:nth-child(4n){background:#FF3838;opacity:.7}.hp-app .vision-label{position:absolute;bottom:13px;font-size:8px;color:#967d68}.hp-app .scan-line{position:absolute;left:0;top:0;height:1px;width:100%;box-shadow:0 0 20px #FF7A0060;background:#FF7A0050;animation:scan 5s linear infinite}@keyframes scan{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(234px);opacity:0}}
.hp-app .hero-bottom{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:59px 0 27px;margin-top:18px;color:#586475}.hp-app .scroll-cue{display:flex;align-items:center;gap:12px;font-size:10px;color:#8b95a5}.hp-app .scroll-cue>span{display:grid;place-items:center;height:25px;width:17px;border:1px solid #ffffff24;border-radius:12px;font-size:13px;color:#dca36b}.hp-app .hero-bottom>.mono{font-size:8px;letter-spacing:.13em}
.hp-app .section{padding:105px 0;position:relative}.hp-app .section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:43px}.hp-app .section-kicker{display:flex;align-items:center;gap:13px;font:10px/1.5 Consolas,monospace;letter-spacing:.13em;color:#8b95a5;margin-bottom:20px}.hp-app .section-kicker>span{color:var(--orange);font-size:10px}.hp-app h2{font-size:clamp(31px,3.2vw,44px);line-height:1.22;letter-spacing:-.045em}.hp-app .muted-heading{color:#9da6b5}.hp-app .section-heading>p{font-size:13px;line-height:1.8;color:var(--muted);max-width:350px;padding-bottom:3px}
.hp-app .project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.hp-app .project-card{min-width:0;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .28s,border-color .28s,box-shadow .28s}.hp-app .project-card:hover{transform:translateY(-7px);border-color:#FF7A0060;box-shadow:0 18px 45px #0004,0 0 24px #FF7A0009}.hp-app .project-art{height:222px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 70% 65%,#FF7A000b,transparent 70%)}.hp-app .art-index{position:absolute;top:19px;left:21px;color:#b19b85;font-size:8px;letter-spacing:.1em}.hp-app .art-note{position:absolute;bottom:15px;left:21px;color:#525d70;font-size:8px;letter-spacing:.07em}.hp-app .art-clustering svg{width:100%;height:160px;margin-top:34px}.hp-app .project-content{padding:24px 24px 0;display:flex;flex-direction:column;flex:1}.hp-app .project-content h3{font-size:23px;line-height:1.3;letter-spacing:-.035em;margin-bottom:15px;min-height:60px}.hp-app .project-content>p{font-size:13px;color:var(--muted);line-height:1.85;margin-bottom:22px;flex:1}.hp-app .project-tags,.hp-app .skill-badges{display:flex;flex-wrap:wrap;gap:6px}.hp-app .project-tags>span{font-size:9px;padding:4px 8px;border:1px solid #ffffff0e;border-radius:5px;color:#b7becb;background:#ffffff03}.hp-app .project-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding:19px 0 20px;margin-top:25px}.hp-app .status{display:flex;align-items:center;gap:6px;font-size:9px;color:#909aa9}.hp-app .status i{width:4px;height:4px;background:var(--orange);border-radius:50%}.hp-app .project-footer a{font-size:10px;color:#e0e4ea;display:flex;gap:12px;align-items:center}.hp-app .project-footer a>span{font-size:18px;color:#ff9a3d;transition:transform .2s}.hp-app .project-footer a:hover>span{transform:translate(2px,-2px)}
.hp-app .token-flow{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:77px;font-size:10px;padding:0 20px}.hp-app .token-flow>span{border:1px solid #ffffff1a;background:#ffffff04;padding:7px 8px;border-radius:5px;color:#aeb7c6;white-space:nowrap}.hp-app .token-flow>b{color:#7f899a;font-weight:400}.hp-app .token-flow>strong{font-weight:500;border:1px solid #FF7A0050;background:#FF7A0010;padding:7px;border-radius:5px;color:#ffae60;white-space:nowrap}.hp-app .text-lines{padding:20px 35px;display:flex;flex-direction:column;gap:7px}.hp-app .text-lines i{display:block;height:3px;background:#ffffff0a;width:100%}.hp-app .text-lines i:nth-child(2){width:75%;background:linear-gradient(90deg,#FF7A0030 36%,#ffffff0a 36%)}.hp-app .text-lines i:last-child{width:88%}.hp-app .model-compare{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:65px;padding:0 30px}.hp-app .model-compare>div{display:flex;flex-direction:column;gap:6px;flex:1}.hp-app .model-compare span{color:#aeb7c6;font-size:10px;margin-bottom:4px;text-align:center}.hp-app .model-compare i{height:12px;display:block;border:1px solid #FF7A0045;background:#FF7A0012;border-radius:3px;transform:skewY(-9deg)}.hp-app .model-compare>div:last-child i{border-color:#FFB80040;background:#FFB8000c;transform:skewY(9deg)}.hp-app .model-compare>b{font:10px Consolas,monospace;color:#667184}
.hp-app .projects-note{display:flex;align-items:center;gap:24px;margin-top:26px;padding:18px 0;border-bottom:1px solid var(--line)}.hp-app .projects-note>.mono{font-size:8px;color:#bb8b5b;white-space:nowrap}.hp-app .projects-note>p{font-size:10px;color:#788496;max-width:570px;line-height:1.8}.hp-app .text-link{display:inline-flex;gap:15px;align-items:center;font-size:12px;color:#d9dfe8;transition:color .2s}.hp-app .text-link>span{font-size:18px;color:var(--orange)}.hp-app .text-link:hover{color:#ffad62}.hp-app .projects-note>.text-link{margin-left:auto;font-size:10px;white-space:nowrap}
.hp-app .about-section{padding-top:50px}.hp-app .about-layout{display:grid;grid-template-columns:1fr 1fr;gap:110px;align-items:center}.hp-app .about-copy h2{margin-bottom:27px}.hp-app .about-copy>p:not(.section-kicker){font-size:14px;color:var(--muted);line-height:1.95;margin-bottom:16px;max-width:440px}.hp-app .about-copy strong{font-weight:500;color:#d6dce5}.hp-app .about-copy>.text-link{margin-top:9px}
.hp-app .process-list{position:relative;padding-left:0}.hp-app .process-step{position:relative;display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);align-items:center}.hp-app .process-step:first-child{border-top:1px solid var(--line)}.hp-app .step-number{width:33px;flex:none;font-size:11px;color:#ff9650}.hp-app .process-step h3{font-size:16px;font-weight:550;margin-bottom:4px;letter-spacing:-.02em}.hp-app .process-step p{font-size:12px;color:#8a95a6;line-height:1.8}.hp-app .step-symbol{margin-left:auto;color:#586173;font-size:23px;padding-left:10px;transition:color .2s,transform .2s}.hp-app .process-step:hover .step-symbol{color:var(--orange);transform:translateY(-2px)}
.hp-app .toolkit-section{border-top:1px solid var(--line);background:linear-gradient(180deg,#11182735,transparent)}.hp-app .toolkit-section::before{content:"";position:absolute;top:-1px;left:calc(50% - 140px);width:280px;height:1px;background:linear-gradient(90deg,transparent,#FF383870,#FFB80070,transparent)}.hp-app .toolkit-section h2{font-size:clamp(28px,2.8vw,38px)}.hp-app .toolkit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:48px}.hp-app .toolkit-group{min-width:0}.hp-app .toolkit-group+.toolkit-group{border-left:1px solid var(--line);padding-left:35px}.hp-app .toolkit-icon{width:40px;height:40px;display:grid;place-content:center;border:1px solid #FF7A0025;border-radius:9px;color:#ff9944;background:#FF7A0007;font-size:18px;margin-bottom:20px}.hp-app .toolkit-group h3{font-size:17px;letter-spacing:-.02em;margin-bottom:8px}.hp-app .toolkit-group>p{font-size:12px;color:#8793a4;margin-bottom:23px}.hp-app .skill-badges{gap:8px}.hp-app .skill-badges>span{padding:7px 10px;border:1px solid #ffffff13;color:#abb5c4;background:#ffffff02;border-radius:6px;font-size:11px;transition:border-color .2s,color .2s,background .2s}.hp-app .skill-badges>span:hover{color:#ffc28a;border-color:#FF7A0060;background:#FF7A0008}
.hp-app .contact-section{padding:106px 0 110px;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--line)}.hp-app .contact-section::before{content:"";position:absolute;top:-1px;left:calc(50% - 280px);width:560px;height:1px;background:linear-gradient(90deg,transparent,#FF383890,#FF7A00a0,#FFB80080,transparent)}.hp-app .contact-grid{background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);mask-image:radial-gradient(ellipse 45% 80% at center,#000,transparent);-webkit-mask-image:radial-gradient(ellipse 45% 80% at center,#000,transparent)}.hp-app .ambient-contact{width:660px;height:330px;background:radial-gradient(ellipse,#FF7A0017,#FF38380b 45%,transparent 72%);bottom:-230px;left:calc(50% - 330px);filter:blur(65px)}.hp-app .contact-inner{position:relative;z-index:1}.hp-app .contact-inner>.section-kicker{justify-content:center}.hp-app .contact-inner h2{font-size:clamp(35px,4.3vw,58px);line-height:1.2;letter-spacing:-.05em}.hp-app .contact-inner>p:not(.section-kicker){font-size:14px;color:#929eaf;margin-top:22px}.hp-app .email-capsule{display:inline-flex;align-items:center;border:1px solid #ffffff17;background:#11182770;border-radius:9px;margin-top:27px;max-width:100%;overflow:hidden}.hp-app .email-capsule>a{font-size:13px;color:#b3bdcb;padding:12px 17px;overflow-wrap:anywhere}.hp-app .email-capsule>a:hover{color:#fff}.hp-app .copy-email{width:44px;min-width:44px;height:43px;padding:12px;border:0;border-left:1px solid var(--line);background:transparent;color:#929eb0;transition:color .2s,background .2s}.hp-app .copy-email:hover{background:#FF7A0010;color:var(--amber)}.hp-app .copy-email svg{width:18px;height:18px}.hp-app .contact-actions{display:flex;justify-content:center;gap:12px;margin-top:27px}.hp-app .site-footer{border-top:1px solid var(--line);position:relative}.hp-app .footer-inner{min-height:106px;display:flex;align-items:center;gap:30px}.hp-app .footer-brand{font-size:13px}.hp-app .footer-brand .brand-mark{width:29px;height:29px;font-size:23px;border-radius:8px}.hp-app .footer-inner>p{font-size:10px;color:#788395;margin-left:auto}.hp-app .footer-inner>a:not(.brand):not(.back-to-top){font-size:9px;color:#687486}.hp-app .footer-inner .back-to-top{display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;width:29px;height:29px;font-size:15px;color:#a8b3c2}.hp-app .footer-inner .back-to-top:hover{border-color:#FF7A0060;color:var(--orange)}
.hp-app .toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);z-index:1000;max-width:calc(100% - 32px);background:#182130;border:1px solid #FF7A0040;color:#e7ebf1;padding:12px 20px;border-radius:9px;box-shadow:0 8px 40px #0005;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.hp-app .toast.is-visible{opacity:1;transform:translate(-50%,0)}
.hp-app .will-reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.hp-app .will-reveal.is-visible{opacity:1;transform:translateY(0)}.hp-app .project-card.will-reveal.is-visible:hover{transform:translateY(-7px)}
body.hp-portfolio-mounted{margin:0!important;background:#0A0D14!important;overflow-x:hidden!important;color-scheme:dark}body.hp-portfolio-mounted>:not(#phuc-portfolio):not(script):not(style){display:none!important}body.hp-portfolio-mounted>#phuc-portfolio{display:block!important;width:100%!important;position:relative!important;height:auto!important}
@media(min-width:1500px){.hp-app .hero{padding-top:210px;min-height:860px}.hp-app .hero-layout{gap:86px}}
@media(max-width:1100px){.hp-app .container{width:calc(100% - 64px)}.hp-app .hero-layout{gap:35px;grid-template-columns:1.06fr 1fr}.hp-app h1{font-size:60px}.hp-app .hero{padding-top:180px;min-height:780px}.hp-app .hero-actions{gap:9px}.hp-app .button{padding:12px 15px;gap:16px}.hp-app .hero-description{font-size:14px}.hp-app .hero-visual{min-height:420px}.hp-app .floating-label{right:0}.hp-app .study-view{min-height:315px}.hp-app .cluster-visual{height:226px}.hp-app .nlp-context{min-height:127px}.hp-app .vision-frame{height:208px}.hp-app .project-grid{gap:15px}.hp-app .project-content{padding:21px 18px 0}.hp-app .project-content h3{font-size:21px}.hp-app .project-art{height:205px}.hp-app .token-flow{gap:4px;padding:0 9px;font-size:8px}.hp-app .token-flow>span{padding:6px}.hp-app .token-flow>strong{padding:6px}.hp-app .about-layout{gap:60px}.hp-app .toolkit-grid{gap:24px}.hp-app .toolkit-group+.toolkit-group{padding-left:24px}.hp-app .project-footer{flex-wrap:wrap}.hp-app .projects-note{gap:18px}.hp-app .projects-note>p{max-width:450px}}
@media(max-width:800px){.hp-app .hero-layout{grid-template-columns:1fr;gap:42px}.hp-app .hero{padding-top:160px;min-height:0}.hp-app .hero-copy{max-width:590px}.hp-app h1{font-size:72px}.hp-app .hero-description{font-size:16px;max-width:520px}.hp-app .hero-visual{width:min(500px,100%);margin:0 auto;padding-top:0;min-height:430px}.hp-app .visual-panel{transform:none}.hp-app .hero-bottom{padding-top:36px}.hp-app .section{padding:80px 0}.hp-app .section-heading{align-items:flex-start;gap:25px}.hp-app .section-heading>p{max-width:260px;font-size:12px}.hp-app .project-grid{grid-template-columns:1fr;gap:20px}.hp-app .project-card{display:grid;grid-template-columns:38% 1fr}.hp-app .project-art{height:100%;min-height:310px;border-bottom:0;border-right:1px solid var(--line)}.hp-app .art-clustering svg{margin-top:90px}.hp-app .project-content{padding:25px 25px 0}.hp-app .project-content h3{font-size:24px}.hp-app .project-content>p{font-size:13px}.hp-app .project-footer{flex-wrap:nowrap}.hp-app .token-flow{flex-wrap:wrap;max-width:170px;margin:105px auto 0;gap:6px;font-size:9px}.hp-app .token-flow b{display:none}.hp-app .model-compare{padding:0 20px;gap:17px;margin-top:110px}.hp-app .art-index{left:17px;right:10px;font-size:7px}.hp-app .art-note{left:17px;right:10px;font-size:7px}.hp-app .text-lines{padding:20px}.hp-app .projects-note{flex-wrap:wrap}.hp-app .projects-note>p{flex:1;max-width:none}.hp-app .projects-note>.text-link{margin-left:0}.hp-app .about-section{padding-top:30px}.hp-app .about-layout{grid-template-columns:1fr;gap:30px}.hp-app .about-copy>p:not(.section-kicker){max-width:610px}.hp-app .process-list{margin-top:10px}.hp-app .toolkit-grid{grid-template-columns:1fr;gap:30px}.hp-app .toolkit-group+.toolkit-group{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:30px}.hp-app .toolkit-group{padding-left:64px;position:relative}.hp-app .toolkit-group+.toolkit-group{padding-left:64px}.hp-app .toolkit-icon{position:absolute;left:0;top:0}.hp-app .toolkit-group+.toolkit-group .toolkit-icon{top:30px}.hp-app .toolkit-group>p{margin-bottom:16px}.hp-app .footer-inner{gap:20px;flex-wrap:wrap;padding:28px 0;min-height:100px}.hp-app .footer-inner>p{font-size:9px}.hp-app .footer-inner>a:not(.brand):not(.back-to-top){margin-left:auto}.hp-app .footer-brand{font-size:12px}.hp-app .desktop-break{display:none}}
@media(max-width:600px){html{scroll-padding-top:100px}.hp-app .container{width:calc(100% - 40px)}.hp-app .site-header{height:64px;top:12px;width:calc(100% - 28px);padding:0 16px;border-radius:12px;gap:16px}.hp-app .brand{font-size:14px;gap:10px}.hp-app .brand-mark{width:30px;height:30px;font-size:25px;border-radius:8px}.hp-app .desktop-nav,.hp-app .nav-contact{display:none}.hp-app .menu-toggle{margin-left:auto;display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:center;width:36px;height:36px;border:1px solid #ffffff16;border-radius:7px;background:#ffffff03;padding:7px;color:#fff}.hp-app .menu-toggle span{display:block;width:16px;height:1px;background:#d0d6df;transition:transform .2s}.hp-app .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}.hp-app .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}.hp-app .mobile-nav:not([hidden]){position:absolute;top:74px;left:0;right:0;display:flex;flex-direction:column;gap:0;border:1px solid #ffffff1a;border-radius:12px;background:#0f1522fa;padding:8px;box-shadow:0 18px 30px #0004}.hp-app .mobile-nav a{font-size:14px;padding:13px 15px;color:#c5ceda;border-radius:7px}.hp-app .mobile-nav a:hover{background:#FF7A000e;color:#ffb878}.hp-app .hero{padding-top:128px;padding-bottom:0}.hp-app .hero-layout{gap:42px}.hp-app .eyebrow{font-size:9px;letter-spacing:.13em;margin-bottom:23px}.hp-app .intro-name{font-size:12px;margin-bottom:16px}.hp-app h1{font-size:clamp(47px,12vw,67px);letter-spacing:-.06em;margin-bottom:22px}.hp-app .hero-description{font-size:14px;line-height:1.9;max-width:460px}.hp-app .hero-actions{gap:10px;margin-top:25px}.hp-app .button{font-size:11px;padding:12px 14px;gap:13px;min-height:46px}.hp-app .hero-note{font-size:9px;margin-top:23px;gap:8px}.hp-app .hero-visual{padding-bottom:44px;min-height:395px;width:100%}.hp-app .visual-panel{border-radius:12px}.hp-app .visual-orbit{display:none}.hp-app .panel-toolbar{padding:12px}.hp-app .panel-state{font-size:7px}.hp-app .panel-toolbar>.mono{font-size:9px}.hp-app .visual-tabs{padding:13px 16px 0;gap:24px}.hp-app .study-view{padding-left:12px;padding-right:12px;min-height:288px}.hp-app .cluster-visual{height:207px}.hp-app .study-caption{padding-top:13px;gap:9px}.hp-app .study-caption strong{font-size:10px}.hp-app .study-caption div>span{font-size:8px}.hp-app .caption-icon{font-size:21px}.hp-app .floating-label{bottom:10px;right:10px;padding:10px 13px;gap:9px;border-radius:8px}.hp-app .floating-label .mono{font-size:8px}.hp-app .floating-label small{font-size:8px}.hp-app .spark{font-size:23px}.hp-app .visual-coordinate{font-size:7px;bottom:-11px;left:0}.hp-app .nlp-view,.hp-app .vision-view{padding-top:15px}.hp-app .nlp-question p{font-size:12px}.hp-app .nlp-context{min-height:132px;padding:11px}.hp-app .nlp-context p{font-size:11px}.hp-app .vision-frame{height:205px}.hp-app .hero-bottom{margin-top:22px;padding:21px 0 22px}.hp-app .hero-bottom>.mono{display:none}.hp-app .scroll-cue{font-size:9px}.hp-app .section{padding:66px 0}.hp-app .section-anchor{scroll-margin-top:98px}.hp-app .section-heading{display:block;margin-bottom:29px}.hp-app .section-kicker{font-size:9px;gap:11px;margin-bottom:16px}.hp-app h2{font-size:32px;line-height:1.24}.hp-app .section-heading>p{max-width:400px;font-size:12px;line-height:1.85;margin-top:18px}.hp-app .project-grid{gap:22px}.hp-app .project-card{display:flex}.hp-app .project-art{height:198px;min-height:0;border-right:0;border-bottom:1px solid var(--line)}.hp-app .art-index{top:18px;left:20px;font-size:8px}.hp-app .art-note{left:20px;font-size:7px}.hp-app .art-clustering svg{height:145px;margin-top:30px}.hp-app .project-content{padding:23px 21px 0}.hp-app .project-content h3{font-size:24px;min-height:0;margin-bottom:13px}.hp-app .project-content>p{font-size:13px;margin-bottom:20px}.hp-app .project-tags>span{font-size:9px}.hp-app .project-footer{padding:18px 0 19px;margin-top:23px}.hp-app .status{font-size:9px}.hp-app .project-footer a{font-size:10px}.hp-app .token-flow{max-width:none;margin-top:71px;flex-wrap:nowrap;font-size:10px;gap:7px}.hp-app .token-flow b{display:block}.hp-app .text-lines{padding:18px 34px}.hp-app .model-compare{margin-top:62px;gap:26px;padding:0 48px}.hp-app .projects-note{display:block;margin-top:15px;padding:20px 0}.hp-app .projects-note>.mono{font-size:8px}.hp-app .projects-note>p{font-size:10px;margin:9px 0 12px}.hp-app .projects-note>.text-link{font-size:11px}.hp-app .about-section{padding-top:20px}.hp-app .about-layout{gap:25px}.hp-app .about-copy>p:not(.section-kicker){font-size:13px;line-height:1.95}.hp-app .about-copy h2{margin-bottom:23px}.hp-app .about-copy>.text-link{font-size:11px}.hp-app .process-step{gap:12px;padding:22px 0}.hp-app .step-number{width:25px;font-size:10px}.hp-app .process-step h3{font-size:15px}.hp-app .process-step p{font-size:11px}.hp-app .step-symbol{font-size:19px;padding-left:5px}.hp-app .toolkit-section h2{font-size:29px}.hp-app .toolkit-grid{margin-top:32px}.hp-app .toolkit-group,.hp-app .toolkit-group+.toolkit-group{padding-left:52px}.hp-app .toolkit-icon{width:35px;height:35px;border-radius:8px;font-size:16px}.hp-app .toolkit-group h3{font-size:16px}.hp-app .toolkit-group>p{font-size:11px;line-height:1.8}.hp-app .skill-badges{gap:6px}.hp-app .skill-badges>span{font-size:10px;padding:6px 8px}.hp-app .contact-section{padding:70px 0 72px}.hp-app .contact-inner h2{font-size:36px;line-height:1.22}.hp-app .contact-inner>p:not(.section-kicker){font-size:12px;margin-top:20px}.hp-app .email-capsule{margin-top:24px}.hp-app .email-capsule>a{font-size:11px;padding:11px 12px}.hp-app .copy-email{width:39px;min-width:39px;height:40px;padding:11px}.hp-app .contact-actions{margin-top:22px;gap:10px}.hp-app .footer-inner{gap:16px;display:grid;grid-template-columns:1fr auto;padding:27px 0}.hp-app .footer-inner>.brand{grid-column:1}.hp-app .footer-inner>p{grid-column:1;grid-row:2;margin:0;font-size:9px}.hp-app .footer-inner>a:not(.brand):not(.back-to-top){grid-column:1;grid-row:3;margin:0;font-size:8px}.hp-app .footer-inner>.back-to-top{grid-column:2;grid-row:1}.hp-app .footer-brand{font-size:12px}.hp-app .toast{font-size:11px;bottom:18px;padding:11px 15px;text-align:center}.hp-app .ambient-hero{width:350px;height:350px;top:140px;right:-200px}}
@media(max-width:360px){.hp-app .container{width:calc(100% - 32px)}.hp-app .brand{font-size:12px}.hp-app .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hp-app .button{font-size:10px;padding:11px 10px;gap:8px}.hp-app .button>span{font-size:17px}.hp-app .hero-note{font-size:8px}.hp-app .study-caption strong{font-size:9px}.hp-app .study-caption div>span{font-size:7px}.hp-app .panel-state{font-size:6px}.hp-app .contact-inner h2{font-size:32px}.hp-app .email-capsule>a{font-size:10px}.hp-app .project-content h3{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hp-app *,.hp-app *::before,.hp-app *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hp-app .will-reveal{opacity:1!important;transform:none!important}.hp-app .visual-panel{transform:none}.hp-app .project-card:hover,.hp-app .button:hover{transform:none}}