body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.intro-block{background-attachment:fixed;background-image:url(/static/media/intro_background.fb98e3531c6f7c6a80e3.svg);background-position:top;background-repeat:no-repeat;background-size:contain;margin-bottom:10vh;overflow:hidden;padding-bottom:55vh;position:relative;width:100vw}.header{align-items:center;color:#fff;display:flex;justify-content:space-between;padding:3vh 7vw}.logo-name{font-family:Lemon,sans-serif;font-size:2vw}.logo-name:hover{color:#feb12f}.nav-menu{display:flex;gap:2vw}.nav-item{color:#fff8f2;cursor:pointer;font-family:SegoeUI,sans-serif;font-size:1vw;font-weight:600;line-height:1;padding:1vh 2vh;transition:background-color .3s,color .3s}.nav-item:hover{color:#feb12f}.downloadCVButton{background-color:#feb12f;border:none;border-radius:3vh;color:#fff8f2;cursor:pointer;font-weight:600;padding:1.5vh 3vh;transition:background-color .3s,color .3s}.downloadCVButton:hover{background-color:#fff8f2;color:#feb12f}.split-image-wrapper{bottom:0;left:50%;position:absolute;transform:translateX(-50%);z-index:10}.split-image-container{display:block;height:auto;position:relative;transition:opacity .6s ease,transform .6s ease;width:auto}.image-left{display:block;position:relative;z-index:1}.image-left,.image-right{height:auto;transition:filter .6s ease,transform .6s ease,-webkit-clip-path .6s ease;transition:clip-path .6s ease,filter .6s ease,transform .6s ease;transition:clip-path .6s ease,filter .6s ease,transform .6s ease,-webkit-clip-path .6s ease;width:auto}.image-right{-webkit-clip-path:inset(0 0 0 50%);clip-path:inset(0 0 0 50%);left:0;pointer-events:none;position:absolute;top:0;z-index:2}.line-circle-left{left:3%;top:10%}.line-circle-left,.line-circle-right{height:auto;position:absolute;width:auto}.line-circle-right{bottom:10%;right:3%}.white-sign{bottom:18%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7));right:26%;z-index:20}.coder-background,.white-sign{height:auto;position:absolute;transition:opacity .6s ease,transform .6s ease;width:auto}.coder-background{bottom:6%;left:27.5%;z-index:1}.coder-title-wrapper{align-items:center;display:flex;height:calc(100% - 55vh);justify-content:flex-start;left:17%;pointer-events:none;position:absolute;top:40%}.coder-title-block{display:flex;flex-direction:column;gap:1vh;max-width:38vw;transition:opacity .6s ease,transform .6s ease}.designer-title-wrapper{align-items:center;display:flex;height:calc(100% - 55vh);justify-content:flex-start;pointer-events:none;position:absolute;right:4%;top:40%}.designer-title-block{display:flex;flex-direction:column;gap:1vh;max-width:38vw;transition:opacity .6s ease,transform .6s ease}.intro-title{color:#fff8f2;font-family:Segoe UI,sans-serif;font-size:4vw;font-weight:700;text-align:left}.coder-subtext{max-width:55%}.coder-subtext,.designer-subtext{color:#fff8f2;font-family:Segoe UI,sans-serif;font-size:1vw;font-weight:350;line-height:1.5;text-align:left}.designer-subtext{max-width:65%}.shift-left{transform:translateX(-4vw)}.shift-left,.shift-right{transition:transform .6s ease}.shift-right{transform:translateX(4vw)}.fade-opacity,.fade-out{opacity:0;transition:opacity .6s ease}.image-shift-left{transform:translateX(-2vw);transition:transform .6s ease}.image-shift-right{transform:translateX(2vw);transition:transform .6s ease}.service-block{display:flex;flex-direction:column;justify-content:center;position:relative;text-align:center}.service-text-block{align-items:center;color:#6e6ce5;display:flex;flex-direction:column;font-family:Segoe UI,sans-serif;font-size:1.1vw;font-weight:700;justify-content:space-between;line-height:1.4}.service-title{color:#323843;font-family:Segoe UI,sans-serif;font-size:2.5vw;font-weight:600;font-weight:700;line-height:1.5}.service-subtext{align-self:center;color:#464545;font-family:Segoe UI,sans-serif;font-size:1.1vw;font-weight:600;font-weight:lighter;line-height:1.4;text-align:center;width:50%}.circle-service{left:13%;top:-5%}.circle-service,.purple-circle-service{height:auto;position:absolute;width:auto}.purple-circle-service{right:10%;top:5%}.service-box-group{display:flex;gap:1.5vw;justify-content:center;padding:5vh 10vw}.box{align-items:center;border-radius:10px;display:flex;flex-direction:column;font-weight:600;padding:2vh 3vw;transition:transform .3s ease,box-shadow .3s ease,background-color .3s ease,color .3s ease}.box:hover{box-shadow:0 8px 30px #0003;transform:scale(1.03)}.box-2:hover{box-shadow:0 4px 40px #3f3fe480;transform:scale(1.05)}.box-1{background-color:#f8f8f8}.box-1,.box-2{border-radius:2vh;font-weight:600;padding:4vh 0;transition:background-color .3s ease,color .3s ease;width:25%}.box-2{background-color:#5d5cdc;color:#fff}.box-3{background-color:#f8f8f8;border-radius:2vh;font-weight:600;padding:4vh 0;transition:background-color .3s ease,color .3s ease;width:25%}.box img{align-items:center;height:auto;margin-bottom:3vh;object-fit:contain;transition:transform .3s ease;width:auto}.box:hover img{transform:scale(1.08)}.box-title{color:#000;font-weight:700;margin-bottom:1vh}.box-content{align-self:center;color:#464545;font-size:.9vw;font-weight:600;font-weight:400;line-height:1.4;text-align:center;width:76%}.box-content,.box-title-2{font-family:Segoe UI,sans-serif}.box-title-2{font-size:1.5vw;font-weight:600;font-weight:700;line-height:1.5;margin-bottom:2vh}.box-content-2{align-self:center;font-family:Segoe UI,sans-serif;font-size:.9vw;font-weight:600;font-weight:400;line-height:1.4;text-align:center;width:76%}.star{bottom:-15%;left:35%;position:absolute}.about-me-block,.star{height:auto;width:auto}.about-me-block{background-attachment:fixed;background-image:url(/static/media/about-me-background.6f8ecb08a920fa4b3f73.svg);background-repeat:no-repeat;background-size:contain;display:flex;flex-direction:row;gap:40vw;justify-content:center;margin-bottom:15vh;margin-top:20vh;padding:10vh 0;position:relative}.left-block{height:100%;margin-left:8vw;position:relative;width:100%}.right-block{align-items:flex-start;display:flex;flex-direction:column;justify-content:flex-start;margin-right:8vw;text-align:left}.black-sign{height:auto;position:absolute;right:8%;top:-7%;width:auto}.about-me-title{color:#6e6ce5;font-size:1.1vw;line-height:1.4;width:50%}.about-me-subtitle,.about-me-title{font-family:Segoe UI,sans-serif;font-weight:600;font-weight:700;margin-bottom:2vh}.about-me-subtitle{color:#323843;font-size:2.5vw;line-height:1.5;width:30vw}.about-me-content{color:#464545;font-family:Segoe UI,sans-serif;font-size:1.2vw;font-weight:600;font-weight:400;line-height:1.4;text-align:left;width:32vw}.about-box-yellow{align-items:flex-start;background-color:#fdeddd;border-radius:1vh;display:flex;flex-direction:row;gap:2vw;margin-top:3vh;padding:2vh 2vw;transition:transform .3s ease,box-shadow .3s ease;width:30vw}.about-box-yellow:hover{box-shadow:0 8px 16px #0000004d;transform:scale(1.05)}.about-box-purple{align-items:flex-start;background-color:#efe9f7;border-radius:1vh;display:flex;flex-direction:row;gap:2vw;margin-top:3vh;padding:2vh 2vw;transition:transform .3s ease,box-shadow .3s ease;width:30vw}.about-box-purple:hover{box-shadow:0 8px 16px #0000004d;transform:scale(1.05)}.text-block{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;text-align:left;width:32vw}.box-title{color:#323843;font-size:1.5vw;font-weight:600;font-weight:500;line-height:1.5}.box-content-yellow,.box-title{font-family:Segoe UI,sans-serif;text-align:left}.box-content-yellow{width:80%}.box-content-purple,.box-content-yellow{color:#464545;font-size:.9vw;font-weight:600;font-weight:400;line-height:1.4}.box-content-purple{font-family:Segoe UI,sans-serif;text-align:left;width:87%}.about-me-left{height:auto;left:1vw;position:absolute;top:13vh;width:auto}.downloadCVArrow{align-items:center;background-color:#feb12f;border-radius:3vh;color:#fff8f2;cursor:pointer;display:inline-flex;font-family:Segoe UI,sans-serif;font-size:2vh;font-weight:600;justify-content:center;margin-top:5vh;padding:1.5vh 3vw;text-decoration:none;transition:background-color .3s ease}.downloadCVArrow:hover{background-color:#fff8f2;box-shadow:0 4px 8px #0000004d;color:#feb12f}.downloadCVArrow .arrow-icon{align-items:center;display:flex;font-size:3vh;margin-left:.5vw;transform:translateY(-.2vh)}.project-title-small{color:#323843}.project-title-big,.project-title-small{font-family:Segoe UI,sans-serif;font-size:1.2vw;font-weight:600;font-weight:700;line-height:1.4}.project-title-big{color:#6e6ce5}.project-subtitle{color:#323843;font-family:Segoe UI,sans-serif;font-size:2.5vw;font-weight:600;font-weight:700;line-height:1.5;margin-bottom:6vh}.blue-plant{height:5vw;left:20%;position:absolute;top:5%;width:5vw}.project-star{height:auto;position:absolute;right:20%;top:0;width:auto}.project-container{grid-gap:2vw;display:grid;gap:2vw;grid-template-columns:repeat(3,1fr);margin-bottom:10vh;padding:0 1vw;position:relative}.project-block{align-items:center;display:flex;flex-direction:column;gap:1vh;justify-content:center;padding:2vh 0;position:relative;text-align:center}.project-image{background-color:#e0e0e0;border-radius:1.5vh;box-shadow:0 4px 8px #0000001a;height:13vw;transition:transform .3s ease,box-shadow .3s ease;width:24vw}.project-image:hover{box-shadow:0 8px 16px #0003;transform:scale(1.05)}.project-bottom-block{align-items:center;display:flex;justify-content:space-between;margin-top:1vh;width:100%}.project-title-block{color:#000;font-size:1.5vw;font-weight:700}.project-subtitle-block,.project-title-block{align-items:flex-start;display:flex;flex-direction:column;justify-content:center;text-align:left}.project-subtitle-block{color:#464545;font-size:1vw;font-weight:400}.project-button{align-items:center;background-color:#5d5cdc;border:none;border-radius:50%;color:#fff8f2;cursor:pointer;display:flex;height:2.5vw;justify-content:center;transition:background-color .3s,color .3s;width:2.5vw}.project-button:hover{background-color:#fcba49;color:#5d5cdc}.arrow-icon{stroke:currentColor;height:20px;transition:transform .3s ease;width:20px}.project-button:hover .arrow-icon{transform:rotate(45deg)}.circle-purple-project{background-color:#5d5cdc;border-radius:2vw;bottom:-10%;height:1vw;left:22%;position:absolute;width:1vw}.project-overlay{align-items:center;background:#0009;display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:999}.project-overlay-content{animation:fadeIn .3s ease;background:#fff;background-image:url(/static/media/bg-project.f0cc7688a67350204581.svg);background-position:50%;background-size:cover;border-radius:20px;box-shadow:0 10px 25px #0000004d;height:85vh;overflow-x:hidden;overflow-y:auto;position:relative;width:65vw}.project-overlay-content *{box-sizing:border-box;max-width:100%;word-break:break-word}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.header-overlay{align-items:center;display:flex;justify-content:space-between;padding:2vh 3vw}.title-overlay{display:flex;flex-direction:column;font-family:Segoe UI,sans-serif;font-size:2vw;font-weight:700;gap:1vh;text-align:left}.button-group{display:flex;gap:1vw;margin-top:1vh}.view-figma-button{align-items:center;background-color:#5d5cdc;border-radius:3vh;color:#fff8f2;cursor:pointer;display:flex;font-family:Segoe UI,sans-serif;font-size:2vh;gap:.8vw;padding:1.5vh 2vw;text-decoration:none}.view-figma-button:hover{background-color:initial;border:2px solid #5d5cdc;border-radius:3vh;box-shadow:0 10px 25px #0000004d;color:#5d5cdc;font-weight:600;text-decoration:none}.figma-icon{height:auto;transition:all .3s ease;width:auto}.view-github-button{align-items:center;background-color:#feb12f;border-radius:3vh;color:#fff8f2;cursor:pointer;display:flex;font-family:Segoe UI,sans-serif;font-size:2vh;gap:.8vw;padding:1.5vh 2vw;text-decoration:none}.view-github-button:hover{background-color:initial;border:2px solid #feb12f;box-shadow:0 10px 25px #0000004d;color:#feb12f;font-weight:600}.title-text-overlay{color:#333;font-family:Segoe UI,sans-serif;font-size:1.875vw;font-weight:600;font-weight:700;line-height:1.5}.subtext-text-overlay{color:#5d5cdc;font-family:Segoe UI,sans-serif;font-size:1vw;font-weight:400;line-height:1.4}.overlay-line{background-color:#e0e0e0;height:1px;margin:1vh 2vw;width:100%}.project-overview-container{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding:2vh 3vw}.project-overview-title-container{align-items:center;display:flex;justify-content:space-between;width:100%}.project-overview-title{color:#333;font-family:Segoe UI,sans-serif;font-size:1.35vw;font-weight:600;font-weight:700;line-height:1.5}.project-overview-time{align-items:center;color:#5d5cdc;display:flex;font-size:1vw;font-weight:400;gap:.5vw}.project-detail,.project-overview-time{font-family:Segoe UI,sans-serif;line-height:1.4}.project-detail{color:#616161;font-size:1.041vw;font-weight:300;margin-top:2vh;text-align:left}.project-middle-container{align-items:flex-start;display:flex;flex-direction:row;gap:4vw;justify-content:center;padding:2vh 3vw}.project-tech-block{display:flex;flex-direction:column;justify-content:center;text-align:left;width:60%}.key-responsibilities-text,.technologies-text{color:#333;font-family:Segoe UI,sans-serif;font-size:1.35vw;font-weight:600;font-weight:700}.key-responsibilities-text{text-align:left}.technology-list{display:flex;flex-wrap:wrap;gap:12px;list-style:none;margin-top:1.25vw;padding:0}.technology-list li{border-radius:24px;box-shadow:0 1px 3px #0000001a;color:#fff;font-size:.94vw;font-weight:400;padding:10px 24px;position:relative;transition:background-color .2s ease;z-index:0}.technology-list li:before{background:var(--custom-gradient);border-radius:24px;content:"";inset:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;position:absolute;z-index:-1}.responsibilities-list{color:#333;list-style-position:outside;list-style-type:disc;margin-top:1.25vw;padding-left:20px}.responsibilities-list li{color:#333;font-size:1.041vw;font-weight:300;margin-bottom:6px;position:relative;text-align:left}.responsibilities-list li::marker{color:#5d5cdc}.project-visual-container{padding:24px 0;position:relative;text-align:center;width:100%}.project-title{color:#333;font-size:24px;font-weight:700;margin-bottom:16px}.project-visual-title{color:#333;font-family:Segoe UI,sans-serif;font-size:1.35vw;font-weight:600;font-weight:700;line-height:1.5;margin-bottom:1.5vw;margin-left:3vw;text-align:left}.slide-container{width:100%}.slide-container,.slide-wrapper{margin:0 auto;overflow:hidden;position:relative}.slide-wrapper{border-radius:10px;display:flex;height:500px;transition:transform .5s ease-in-out;width:90%}.slide{left:0;min-width:100%;opacity:0;position:absolute;top:0;transition:opacity .5s ease-in-out}.slide.active{opacity:1;position:relative}.slide img{height:100%;object-fit:cover;width:100%}.arrow-button{align-items:center;background-color:#00000080;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);transition:background-color .3s ease;width:40px;z-index:2}.arrow-button:hover{background-color:#000000b3}.arrow-left{left:4vw}.arrow-right{right:4vw}.dots{margin-bottom:3vh;margin-top:3vh;text-align:center}.dot{background-color:#d9d9d9;border-radius:50%;cursor:pointer;display:inline-block;height:12px;margin:0 6px;width:12px}.dot.active{background-color:#5d5cdc}.contact-block{align-items:center;background-attachment:fixed;background-image:url(/static/media/bottom-background.99a2c16f035a10a8ceac.svg);background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:row;gap:40vw;height:42.5vh;justify-content:flex-start;margin-top:10vh;padding:0;position:relative;width:100%}.real-image-contact{bottom:0;height:auto;position:absolute;right:0;width:auto}body,html{margin:0;overflow-x:hidden;padding:0}.circle-yellow-contact-1{background-color:#feb12f;border-radius:3vw;height:1.5vw;left:5%;position:absolute;top:10%;width:1.5vw}.contact-text-block{display:flex;flex-direction:column;justify-content:center;margin-left:20px;text-align:left}.contact-title{font-size:2.5vw;font-weight:600;font-weight:700;margin-bottom:2vh}.contact-content,.contact-title{color:#fff;font-family:Segoe UI,sans-serif;line-height:1.4}.contact-content{font-size:1.2vw;font-weight:400;text-align:left;width:32vw}.contact-button{background-color:#feb12f;border:2px solid #feb12f;border-radius:1vh;color:#fff8f2;cursor:pointer;font-size:1.2vw;font-weight:600;margin-left:2vh;margin-top:2vh;padding:1.5vh 4vh;transition:background-color .3s,color .3s}.contact-button:hover{background-color:#fff8f2;color:#feb12f}.contact-container{align-items:flex-start;display:flex;flex-direction:column;gap:2vh;justify-content:center;padding:5vh 10vw}.white-sign-contact{right:18%;top:10%;z-index:1}.intro-arrow,.white-sign-contact{height:auto;position:absolute;width:auto}.intro-arrow{bottom:23%;left:23%}.circle-yellow-contact-2{background-color:#feb12f;border-radius:1vw;bottom:20%;height:.75vw;position:absolute;right:5%;width:.75vw}.footer-container{margin-bottom:3vh;margin-top:3vh}.coming-soon-container{align-items:center;animation:fadeInScale 1s ease forwards;display:flex;flex-direction:column;height:80vh;justify-content:center;text-align:center}.coming-soon-container h1{animation:pulseGlow 1.5s infinite alternate;color:#fc0;font-size:4vw;font-weight:700;text-shadow:0 0 10px #fc0c,0 0 10px #fc09}.coming-soon-container p{font-size:1.5vw;margin-top:1rem;opacity:.8}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes pulseGlow{0%{text-shadow:0 0 10px #fc0c,0 0 20px #fc09}to{text-shadow:0 0 20px #fc0,0 0 20px #fc0c}}body{overflow:hidden}@media (max-width:1200px){.project-container{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.project-container{grid-template-columns:repeat(1,1fr)}}.contact-page-container{height:100%;width:100%}.hidden{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}.fade-in-up{animation:fadeInUp .6s ease forwards}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.header-contact{align-items:center;background-color:#5d5cdc;background-image:url(/static/media/contact-bg-header.1aa0dbe589e68eccf3a1.svg);color:#fff;display:flex;justify-content:space-between;opacity:0;padding:3vh 7vw;transform:translateY(-50px);transition:transform .8s ease,opacity .8s ease}.logo-contact-page{font-family:Lemon,sans-serif;font-size:2vw}.logo-contact-page:hover{color:#feb12f}.nav-menu-contact-page{display:flex;gap:2vw;left:50%;position:absolute;transform:translateX(-50%)}.nav-item-contact-page{color:#fff8f2;cursor:pointer;font-family:SegoeUI,sans-serif;font-size:1vw;font-weight:600;line-height:1;padding:1vh 2vh;transition:background-color .3s,color .3s}.nav-item-contact-page:hover{color:#feb12f}.social-icons-contact-page{align-items:center;display:flex;flex:1 1;gap:2vw;justify-content:flex-end}.gmail-wrapper-contact-page{align-items:center;cursor:pointer;display:flex;gap:10px}.gmail-img-container-contact-page{flex-shrink:0;height:40px;position:relative;width:40px}.gmail-img-contact-page{height:100%;left:0;object-fit:contain;position:absolute;top:0;transition:opacity .3s ease,transform .3s ease;width:100%}.gmail-img-contact-page.default{opacity:1;z-index:1}.gmail-img-contact-page.hover{opacity:0;z-index:2}.gmail-wrapper-contact-page:hover .gmail-img-contact-page.default{opacity:0}.gmail-wrapper-contact-page:hover .gmail-img-contact-page.hover{opacity:1;transform:translateX(-2px)}.email-text-contact-page{color:#fff;font-size:1vw;font-weight:700;opacity:0;overflow:hidden;transition:width .5s ease,opacity .5s ease;white-space:nowrap;width:0}.gmail-wrapper-contact-page:hover .email-text-contact-page{opacity:1;width:240px}.icon-wrapper-contact-page{cursor:pointer;height:40px;position:relative;width:40px}.icon-img-contact-page{height:auto;left:0;position:absolute;top:0;transition:opacity .3s ease;width:100%}.icon-img-contact-page.default{opacity:1}.icon-img-contact-page.hover,.icon-wrapper-contact-page:hover .icon-img-contact-page.default{opacity:0}.icon-wrapper-contact-page:hover .icon-img-contact-page.hover{opacity:1;transform:scale(1.5);transition:transform .3s ease}.contact-middle-container{align-items:center;background-color:#fff;box-shadow:0 4px 8px #0000001a;display:flex;flex-direction:row;gap:5vw;justify-content:center}.contact-text-container{display:flex;flex-direction:column;gap:2vh;opacity:0;text-align:left;transform:translateX(-50px);transition:transform .8s ease,opacity .8s ease}.contact-text-container.slide-in-left{opacity:1;transform:translateX(0)}@keyframes slideInRight{0%{opacity:0;transform:translateX(80px)}to{opacity:1;transform:translateX(0)}}.contact-giang-avatar-img{opacity:0;transform:translateX(50px);transition:transform .8s ease,opacity .8s ease}.contact-giang-avatar-img.slide-in-right{opacity:1;transform:translateX(0)}.contact-page-title{color:#333;font-family:SegoeUI,sans-serif;font-size:5.21vw;font-weight:700}.contact-page-subtitle{color:#333;font-family:SegoeUI,sans-serif;font-size:1vw;font-weight:350;line-height:1.5;text-align:left;width:65%}.contact-menu-social{grid-gap:2vw;display:grid;gap:2vw;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,auto);height:auto;margin:0 auto;padding:2vh 0;width:100%}.contact-menu-social img{height:auto;object-fit:contain;transition:transform .3s ease;width:auto}.contact-menu-social div:hover img{transform:scale(1.15)}.contact-menu-social div{align-items:center;cursor:pointer;display:flex;flex-direction:row;gap:1vw;transform:translateY(0);transition:all .3s ease}.contact-menu-social div:hover{transform:translateY(-.3vw)}.contact-menu-social span{font-family:SegoeUI,sans-serif;font-size:1.2vw;font-weight:700}.gmail-text-contact-middle{-webkit-text-fill-color:#0000;background-clip:text;-webkit-background-clip:text;background-image:url(/static/media/gmail-header.7182ea1acd399b9f5feb.svg);background-position:50%;background-size:4.69vw;display:inline-block;transition:color .3s,text-shadow .3s}.linkedin-text-contact-middle{color:#007ab9;transition:color .3s,text-shadow .3s}.figma-text-contact-middle{-webkit-text-fill-color:#0000;background-clip:text;-webkit-background-clip:text;background-image:url(/static/media/figma-header.966b75a4d718e050ac66.svg);background-position:50% 35%;background-repeat:no-repeat;background-size:9vw;display:inline-block}.figma-text-contact-middle,.github-text-contact-middle{transition:color .3s,text-shadow .3s}.subscribe-block-contact-page{align-items:center;background-color:#fdfdfd;border-bottom:1px solid #c4bebe;display:flex;flex-direction:column;margin-top:2vw;overflow:hidden;padding:0 2vh;position:relative}.subscribe-content-wrapper-contact-page{align-items:center;display:flex;gap:15vw;justify-content:space-between;padding:5vw 0;width:90%}.subscribe-text-container-contact-page{display:flex;flex:1 1;flex-direction:column;margin-bottom:5vw;text-align:left}.subscribe-title-contact-page{color:#6e6ce5;font-size:1.2vw;font-weight:700;margin-bottom:1vw}.subscribe-content-contact-page{color:#323843;font-size:2.5vw;font-weight:700;width:90%}.enter-email-container-contact-page{align-items:center;display:flex;flex:1 1;flex-direction:column;text-align:left}.email-subtext-contact-page{align-self:flex-start;color:#828282;font-size:1em;margin-top:10px;width:56%}.email-input1-wrapper-contact-page{background-color:#fff;border:1px solid #999;border-radius:10px 10px 0 0}.email-input1-wrapper-contact-page,.email-input2-wrapper-contact-page{align-items:center;display:flex;justify-content:center;margin-top:1vw;max-width:60vw;overflow:hidden;position:relative;width:100%}.email-input2-wrapper-contact-page{border:1px solid #999}.email-input3-wrapper-contact-page{align-items:center;border:1px solid #999;border-radius:0 0 10px 10px;display:flex;justify-content:center;margin-top:1vw;max-width:60vw;overflow:hidden;position:relative;width:100%}.email-input1-contact-page{background-color:#fff}.email-input1-contact-page,.email-input2-contact-page{border:none;flex:1 1;font-size:1vw;outline:none;padding:1vw}.email-input2-contact-page{background-image:url(/static/media/message-bg.0b7a8795dd1285523446.svg);height:15vh;width:100%}.email-input3-contact-page{background-color:#fff;border:none;flex:1 1;font-size:1vw;outline:none;padding:1vw}.subscribe-button-contact-page{background-color:#5d5cdc;border:none;border-radius:0 0 10px 0;color:#fff;cursor:pointer;font-size:1vw;padding:1vw 2vw;transition:background-color .3s;z-index:1}.subscribe-button-contact-page:hover{background-color:#4b4aae}.bg-subscribe-contact-page{height:auto;position:absolute;right:4vw;top:2vw;width:auto;z-index:2}.earth-contact-page{height:3vw;left:40%;position:absolute;top:20%;width:3vw}.subscribe-arrow-contact-page{height:13vw;left:38%;position:absolute;top:35%;width:13vw}.email-footer-contact-page{bottom:15%;height:auto;left:26%;position:absolute;width:12vw;z-index:1}.footer-container-contact-page{align-items:center;background-color:#fafafa;color:#616161;display:flex;font-size:1vw;justify-content:space-between;padding:6vh 8vw;text-align:center}.nav-menu-contact-page-footer{display:flex;gap:2vw}.nav-item-footer-contact-page{color:#616161;cursor:pointer;font-family:SegoeUI,sans-serif;font-size:1vw;font-weight:600;line-height:1;transition:background-color .3s,color .3s}.nav-item-footer-contact-page:hover{color:#feb12f}.about-page-container{height:100%;width:100%}.fade-in{animation:fadeInSmooth .8s ease forwards;opacity:0}@keyframes fadeInSmooth{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-header{animation:slideDownHeader .7s ease-out forwards;opacity:0;transform:translateY(-100%)}@keyframes slideDownHeader{to{opacity:1;transform:translateY(0)}}.header-about{align-items:center;background-color:#5d5cdc;background-image:url(/static/media/contact-bg-header.1aa0dbe589e68eccf3a1.svg);color:#fff;display:flex;justify-content:space-between;opacity:0;padding:3vh 7vw;transform:translateY(-50px);transition:transform .8s ease,opacity .8s ease}.header-about.slide-down{opacity:1;transform:translateY(0)}.logo-about-page{font-family:Lemon,sans-serif;font-size:2vw}.logo-about-page:hover{color:#feb12f}.nav-menu-about-page{display:flex;gap:2vw;left:50%;position:absolute;transform:translateX(-50%)}.nav-item-about-page{color:#fff8f2;cursor:pointer;font-family:SegoeUI,sans-serif;font-size:1vw;font-weight:600;line-height:1;padding:1vh 2vh;transition:background-color .3s,color .3s}.nav-item-about-page:hover{color:#feb12f}.social-icons-about-page{align-items:center;display:flex;flex:1 1;gap:2vw;justify-content:flex-end}.gmail-wrapper-about-page{align-items:center;cursor:pointer;display:flex;gap:10px}.gmail-img-container-about-page{flex-shrink:0;height:40px;position:relative;width:40px}.gmail-img-about-page{height:100%;left:0;object-fit:contain;position:absolute;top:0;transition:opacity .3s ease,transform .3s ease;width:100%}.gmail-img-about-page.default{opacity:1;z-index:1}.gmail-img-about-page.hover{opacity:0;z-index:2}.gmail-wrapper-about-page:hover .gmail-img-about-page.default{opacity:0}.gmail-wrapper-about-page:hover .gmail-img-about-page.hover{opacity:1;transform:translateX(-2px)}.email-text-about-page{color:#fff;font-size:1vw;font-weight:700;opacity:0;overflow:hidden;transition:width .5s ease,opacity .5s ease;white-space:nowrap;width:0}.gmail-wrapper-about-page:hover .email-text-about-page{opacity:1;width:240px}.icon-wrapper-about-page{cursor:pointer;height:40px;position:relative;width:40px}.icon-img-about-page{height:auto;left:0;position:absolute;top:0;transition:opacity .3s ease;width:100%}.icon-img-about-page.default{opacity:1}.icon-img-about-page.hover,.icon-wrapper-about-page:hover .icon-img-about-page.default{opacity:0}.icon-wrapper-about-page:hover .icon-img-about-page.hover{opacity:1;transform:scale(1.5);transition:transform .3s ease}.about-middle-container{align-items:center;display:flex;flex-direction:row;gap:5vw;justify-content:center;padding:0 20vw}.about-text-container{display:flex;flex-direction:column;gap:2vh;opacity:0;text-align:left;transform:translateX(-50px);transition:transform .8s ease,opacity .8s ease}.about-text-container.slide-in-left{opacity:1;transform:translateX(0)}.about-giang-avatar-img{opacity:0;transform:translateX(50px);transition:transform .8s ease,opacity .8s ease}.about-giang-avatar-img.slide-in-right{opacity:1;transform:translateX(0)}.about-page-title{color:#333;font-family:SegoeUI,sans-serif;font-size:5.21vw;font-weight:700}.about-page-subtitle{font-weight:400;text-align:left;width:65%}.about-page-subtitle,.about-page-subtitle2{color:#333;font-family:SegoeUI,sans-serif;font-size:1vw;line-height:1.5}.about-page-subtitle2{font-weight:300;padding-top:1vh;text-align:justify;width:80%}.about-page-stroke-1{align-items:center;display:flex;justify-content:space-between;margin:3vh auto;width:65%}.about-page-stroke{background-color:#c4bebe;height:1px;margin:0 auto;width:65%}.mini-image{stroke:#fff;border:.5vw solid #fff;border-radius:.5vw;box-shadow:0 .2vw .5vw #0003;cursor:pointer;height:10vh;margin-bottom:3vh;object-fit:cover;opacity:0;transform:scale(.8);transition:transform .3s ease;transition:opacity .6s ease,transform .6s ease;width:13%}.mini-image.visible{opacity:1;transform:scale(1)}.mini-image:hover{box-shadow:0 .4vw .7vw #0003}.about-page-first-container{align-items:center;background-color:#fff;box-shadow:0 0 8px #0003;display:flex;flex-direction:column;justify-content:center;padding:2vh 0;position:relative}.about-decor-first-block{background-position:50%;background-size:cover;bottom:10%;height:auto;position:absolute;right:5%;width:auto}.about-graph-container{align-items:center;background-color:#fafafa;border-bottom:1px solid #c4bebe;display:flex;flex-direction:row;gap:5vw;justify-content:center;justify-content:space-between;padding:3vh 20vw}.coder-part-container,.designer-part-container{display:flex;flex-direction:column;gap:2vh;text-align:left}.title-graph{font-size:2vw;font-weight:400}.subtitle-graph,.title-graph{color:#333;font-family:SegoeUI,sans-serif;text-align:left}.subtitle-graph{font-size:1vw;font-weight:300}.graph-pie-wrapper{height:25vw;margin:5vh auto;width:25vw}.pie-chart{height:100%;transform:rotate(145deg);width:100%}.pie-slice{stroke:none;overflow:visible;transition:transform .5s ease}.purple{fill:#5d5cdc;stroke-width:1.5;stroke:#4f4fc7;transform:translateX(-60px) rotate(-6deg) scale(.95);transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .8s ease}.orange,.purple{filter:drop-shadow(0 0 6px rgba(54,54,54,.4));opacity:0}.orange{fill:#feb12f;stroke-width:1.5;stroke:#e4a027;transform:translate(-10px,-3px) translateX(50px);transform:translate(-10px,-3px) translateX(60px) rotate(6deg) scale(.95);transition:transform .8s cubic-bezier(.22,1,.36,1) .15s,opacity .8s ease .15s}.graph-pie-wrapper.animate .purple{opacity:1;transform:translateX(0) rotate(0deg) scale(1)}.graph-pie-wrapper.animate .orange{opacity:1;transform:translate(-10px,-3px) translateX(0) rotate(0deg) scale(1)}.label-text-graph{fill:#fff;font-family:SegoeUI,sans-serif;font-size:.7vw;font-weight:700;opacity:0;text-align:center;transform:scale(.9);transition:opacity .5s ease .6s,transform .5s ease .6s}.graph-pie-wrapper.animate .label-text-graph{opacity:1;transform:scale(1)}.random-fact-container{align-items:flex-start;background-color:#fff;border-bottom:1px solid #c4bebe;display:flex;flex-direction:row;justify-content:space-between;padding:10vh 21vw;position:relative}.random-fact-title{color:#333;font-family:SegoeUI,sans-serif;font-size:2vw;font-weight:400;margin-bottom:4vh;z-index:5}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}.random-fact-right-block{flex-direction:column;margin-left:40vw;text-align:left;width:55%;z-index:1}.random-fact-right-block p{color:#333;font-family:SegoeUI,sans-serif;font-size:1vw;font-weight:300;line-height:1.2}.hitman{bottom:0;height:auto;left:20vw;opacity:0;position:absolute;transform:translateX(-100%);transition:transform 1s ease,opacity 1s ease;width:40vw;will-change:transform,opacity}.hitman.slide-in{opacity:1;transform:translateX(0)}.random-fact-decor{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.decor-black-sign{position:absolute;right:19vw;top:-6vh;z-index:10}.black-sign-about-page{height:auto;width:14vw}.decor-project-star{position:absolute;right:10vw;top:9vh}.project-star-about-page{height:auto;width:3vw}.skill-chart-container{background-color:#fafafa;border-bottom:1px solid #c4bebe;box-sizing:border-box;display:flex;flex-direction:column;height:63vh;justify-content:flex-end;padding:0 22vw;position:relative}.area-container{align-items:center;display:flex;flex-direction:row;height:25vw;justify-content:center;width:100%}.floating-image{height:auto;position:absolute;width:5vw;z-index:5}.image-1{bottom:-10%;left:10%}.image-2{right:15%;top:8%}.skill-levels{color:#757575;display:flex;flex-direction:column;font-size:1vw;font-weight:500;height:450px;justify-content:space-between;margin-bottom:8vw;margin-right:2vw}.skill-levels span{align-items:center;display:flex;height:25%;justify-content:center;white-space:nowrap}.chart-area{height:25vw;position:relative;width:100%}.left-vertical-line{background-color:#ccc;width:1px;z-index:2}.chart-lines,.left-vertical-line{height:100%;left:0;position:absolute;top:0}.chart-lines{display:flex;flex-direction:column;justify-content:space-between;right:0;z-index:0}.chart-lines .line{border-top:1px dashed #ccc;width:100%}.bars{align-items:flex-end;bottom:0;height:100%;justify-content:space-between;left:0;padding:0 1vw;position:absolute;width:100%;z-index:1}.bar,.bars{display:flex}.bar{align-items:center;animation:growUp .8s ease-out forwards;animation-play-state:paused;border-radius:.5vw .5vw 0 0;flex-direction:column;gap:.5vw;justify-content:flex-end;opacity:0;position:relative;transform:scaleY(0);transform-origin:bottom;width:8.5vw}.bar.grow-up{animation-play-state:running;opacity:1}@keyframes growUp{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}.design-thinking-bar{background:linear-gradient(180deg,#aee2dc,#67b6ad);border:1px solid #67b6ad;height:95%}.coding-bar{background:linear-gradient(180deg,#f0d1d1,#eaabab);border:1px solid #eaabab;height:90%}.figma-bar{background:linear-gradient(180deg,#f0d594,#e0af38);border:1px solid #e0af38;height:95%}.cooking-bar{background:linear-gradient(180deg,#dbaf7e,#bd8f5c);border:1px solid #bd8f5c;height:75%}.badminton-bar{background:linear-gradient(180deg,#de8483,#cb4746);border:1px solid #cb4746;height:40%}.percentage-wrapper{align-items:flex-start;display:flex;justify-content:center}.percentage-number{color:#fff;font-size:3.2vw;font-weight:500;line-height:1}.percentage-symbol{color:#fff;font-size:1.5vw;line-height:1.2;margin-left:.2vw;transform:translateY(.3vw)}.title-bar-text{color:#fff;font-size:.85vw;font-weight:600;margin-bottom:2.5vh;margin-top:.5vh;text-align:center}.chart-title{color:#333;font-size:1.5vw;font-weight:400;position:absolute;right:0;top:-7vh;z-index:3}.bar .percentage-wrapper,.bar .title-bar-text{opacity:0;transition:opacity .3s ease}.bar.show-text .percentage-wrapper,.bar.show-text .title-bar-text{opacity:1}.my-story-container{align-items:center;background-color:#fff;border-bottom:1px solid #c4bebe;display:flex;justify-content:space-between;padding:12vh 22vw;position:relative}.my-story-left-container{display:flex;flex-direction:column;gap:2vh;justify-content:center;text-align:left;width:43%}.my-story-left-container h2{color:#333;font-family:SegoeUI,sans-serif;font-size:2vw;font-weight:400;margin:0}.my-story-left-container p{color:#333;font-family:SegoeUI,sans-serif;font-size:1vw;font-weight:300;line-height:1.5;margin:0}.my-story-right-container{display:flex;height:30vh;justify-content:center;opacity:0;position:relative;transform:translateX(100px);transition:opacity .8s ease,transform .8s ease}.my-story-right-container.slide-in-right{opacity:1;transform:translateX(0)}.my-story-right-container img{border:10px solid #fff;border-radius:5px;box-shadow:0 4px 4px 0 #00000040;height:auto;object-fit:cover;width:100%}.footer-container{align-items:center;color:#616161;display:flex;font-size:1vw;justify-content:space-between;margin-bottom:2vh;margin-top:2vh;padding:3vh 8vw;position:relative;text-align:center}.nav-item-footer{color:#616161;cursor:pointer;font-family:SegoeUI,sans-serif;font-size:1vw;font-weight:600;line-height:1;transition:background-color .3s,color .3s}.nav-item-footer:hover{color:#feb12f}.hoverable:hover{filter:brightness(1.2) drop-shadow(0 0 10px #ffcc00)}.button-up{border:none;border-radius:1vh;bottom:-90%;cursor:pointer;height:15vw;left:40%;padding:1vh 2vh;position:fixed;transition:bottom .8s ease;width:15vw}.hoverable{cursor:pointer;filter:brightness(1);transform-origin:center;transition:all .3s ease}.hoverable:hover{filter:brightness(1.2) drop-shadow(0 0 10px #1f0352);transform:scale(1.05) rotate(-5deg)}
/*# sourceMappingURL=main.cc69a5a4.css.map*/