@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Kanit:wght@400;500;600;700&display=swap");*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background-color:#0a0a0a;color:#f0f0f0;overflow-x:hidden;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}p{color:#ccc;line-height:1.7}img{max-width:100%;height:auto}:root{--accent:#00da41;--accent-glow:rgba(0,218,65,.4);--accent-dim:rgba(0,218,65,.15);--bg-dark:#0a0a0a;--bg-card:#141414;--bg-card-hover:#1a1a1a;--text-primary:#f0f0f0;--text-secondary:#999;--border-subtle:hsla(0,0%,100%,.06);--radius:16px;--radius-sm:10px;--transition:0.3s cubic-bezier(0.4,0,0.2,1)}.hero-section{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 24px 60px;overflow:hidden}.hero-blob{position:absolute;border-radius:50%;filter:blur(120px);opacity:.35;pointer-events:none;animation:blobFloat 20s ease-in-out infinite}.hero-blob-1{width:500px;height:500px;background:radial-gradient(circle,var(--accent) 0,transparent 70%);top:-10%;left:-10%;animation-delay:0s}.hero-blob-2{width:400px;height:400px;background:radial-gradient(circle,#3936f5 0,transparent 70%);bottom:-5%;right:-5%;animation-delay:-7s}.hero-blob-3{width:300px;height:300px;background:radial-gradient(circle,#ff7eaf 0,transparent 70%);top:40%;right:20%;animation-delay:-14s}@keyframes blobFloat{0%,to{transform:translate(0) scale(1)}25%{transform:translate(40px,-30px) scale(1.05)}50%{transform:translate(-20px,20px) scale(.95)}75%{transform:translate(30px,40px) scale(1.02)}}.hero-container{position:relative;z-index:1;display:flex;align-items:center;gap:60px;max-width:1000px;width:100%}.hero-avatar-wrapper{position:relative;flex-shrink:0}.hero-avatar-ring{position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(var(--accent),#3936f5,#ff7eaf,var(--accent));animation:ringRotate 6s linear infinite;opacity:.8}@keyframes ringRotate{to{transform:rotate(1turn)}}.hero-avatar{position:relative;width:260px;height:260px;border-radius:50%;overflow:hidden;border:4px solid var(--bg-dark);z-index:1}.hero-avatar img{width:100%;height:100%;object-fit:cover}.hero-text{flex:1 1}.hero-greeting{font-size:1.1rem;color:var(--text-secondary);margin-bottom:8px;font-weight:400;letter-spacing:.5px}.hero-name{font-size:3.2rem;font-weight:800;line-height:1.1;letter-spacing:-1px;margin-bottom:12px}.hero-name-accent{background:linear-gradient(135deg,var(--accent),#36b5f5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1rem;color:var(--text-secondary);margin-bottom:16px;font-weight:400}.hero-typewriter{font-size:1.4rem;font-weight:700;color:var(--accent);margin-bottom:28px;min-height:2em}.hero-actions{display:flex;gap:14px;margin-bottom:28px;flex-wrap:wrap}.hero-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;border-radius:50px;font-size:.95rem;font-weight:600;transition:var(--transition);cursor:pointer;border:2px solid transparent}.hero-btn-primary{background:var(--accent);color:#000;border-color:var(--accent)}.hero-btn-primary:hover{background:transparent;color:var(--accent);box-shadow:0 0 20px var(--accent-glow)}.hero-btn-outline{background:transparent;color:var(--text-primary);border-color:hsla(0,0%,100%,.2)}.hero-btn-outline:hover{border-color:var(--accent);color:var(--accent)}.hero-clock-strip{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin-top:40px;padding:12px 28px;background:hsla(0,0%,100%,.04);border:1px solid var(--border-subtle);border-radius:50px;font-size:.9rem;color:var(--text-secondary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-clock-item{white-space:nowrap}.hero-clock-time{color:var(--accent);font-weight:600;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.hero-clock-divider{opacity:.3}.hero-scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:1;animation:scrollBounce 2s ease-in-out infinite}.hero-scroll-mouse{width:24px;height:38px;border:2px solid hsla(0,0%,100%,.2);border-radius:12px;display:flex;justify-content:center;padding-top:6px}.hero-scroll-wheel{width:3px;height:8px;background:var(--accent);border-radius:3px;animation:scrollWheel 2s ease-in-out infinite}@keyframes scrollBounce{0%,to{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}@keyframes scrollWheel{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}.wave-emoji{animation-duration:1.8s;animation-iteration-count:infinite;animation-name:wave;display:inline-block;transform-origin:70% 70%}@keyframes wave{0%{transform:rotate(0deg)}10%{transform:rotate(-10deg)}20%{transform:rotate(12deg)}30%{transform:rotate(-10deg)}40%{transform:rotate(9deg)}50%,to{transform:rotate(0deg)}}.social-container{gap:8px;flex-wrap:wrap}.social-container,a.social{display:flex;align-items:center}a.social{justify-content:center;width:42px;height:42px;border-radius:50%;background:hsla(0,0%,100%,.06);border:1px solid var(--border-subtle);transition:var(--transition);color:var(--text-secondary);font-size:1.1rem}a.social:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);transform:translateY(-3px);box-shadow:0 4px 15px var(--accent-glow)}.nav{list-style-type:none;padding:14px 20px;overflow:hidden;background:hsla(0,0%,4%,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);position:fixed;width:100%;top:0;z-index:1000}.navbarnew{width:100%;font-size:16px}li{float:left;display:block;margin:0 12px}.links{color:var(--text-secondary);text-decoration:none;font-weight:500;transition:var(--transition);font-size:.9rem}.active-link,.links:hover{color:var(--accent)}.active-link,.resume-links{font-weight:600}.resume-links{cursor:pointer;color:#000;text-decoration:none;background:var(--accent);border:2px solid var(--accent);padding:6px 18px;border-radius:50px;font-size:.85rem;transition:var(--transition)}.resume-links:hover{background:transparent;color:var(--accent)}.logonav{width:40px;height:40px;margin-top:-10px;margin-bottom:-10px;border-radius:8px}.mobile-button-menukhaw{cursor:pointer}.mobile-button-menu,.mobile-button-menukhaw{display:none;float:right;outline:none;border:none;background-color:transparent}.content-section{position:relative;padding:80px 24px;max-width:1200px;margin:0 auto;text-align:center}.section-header{margin-bottom:48px}.section-title{font-size:2rem;font-weight:700;letter-spacing:-.5px;margin-bottom:12px}.section-underline{width:60px;height:4px;background:linear-gradient(90deg,var(--accent),#36b5f5);border-radius:2px;margin:0 auto}.marquee-wrapper{position:relative;overflow:hidden;width:100%;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);padding:20px 0}.marquee-track{display:flex;gap:20px;width:max-content}.marquee-left{animation:marqueeScrollLeft 25s linear infinite}.marquee-right{animation:marqueeScrollRight 25s linear infinite}.marquee-wrapper:hover .marquee-track{animation-play-state:paused}@keyframes marqueeScrollLeft{0%{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes marqueeScrollRight{0%{transform:translateX(-50%)}to{transform:translateX(0)}}.marquee-card{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:28px 36px;min-width:140px;transition:var(--transition);cursor:default}.marquee-card:hover{background:var(--bg-card-hover);border-color:rgba(0,218,65,.25);transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,218,65,.1)}.marquee-label{font-size:.9rem;font-weight:500;color:var(--text-secondary);transition:var(--transition)}.marquee-card:hover .marquee-label{color:var(--accent)}.icontext{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-primary)}.icontext1{font-size:.85rem;font-weight:500;margin:0;color:var(--text-secondary)}.project-list{display:flex;flex-direction:column;gap:48px}.project-card{display:flex;align-items:stretch;gap:0;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:20px;overflow:hidden;transition:var(--transition);text-align:left}.project-card:hover{border-color:rgba(0,218,65,.2);box-shadow:0 16px 60px rgba(0,218,65,.06);transform:translateY(-4px)}.project-card-reverse{flex-direction:row-reverse}.project-card-media{position:relative;flex:1.2 1;min-height:280px;overflow:hidden}.project-card-slider{width:100%;height:100%}.project-card-slider .react-slideshow-fadezoom-images-wrap,.project-card-slider .react-slideshow-fadezoom-images-wrap>div,.project-card-slider .react-slideshow-fadezoom-wrapper{height:100%!important}.project-card-slider img{width:100%!important;height:100%!important;object-fit:cover!important}.project-card-media-glow{position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,var(--bg-card),transparent);pointer-events:none;z-index:1}.project-card-body{flex:1 1;padding:36px 32px;display:flex;flex-direction:column;justify-content:center;gap:12px}.project-card-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:hsla(0,0%,100%,.04);border:1px solid var(--border-subtle);border-radius:12px;margin-bottom:4px}.project-card-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);letter-spacing:-.3px}.project-card-subtitle{font-size:.85rem;font-weight:500;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin:0}.project-card-desc{font-size:.92rem;color:var(--text-secondary);line-height:1.7;margin:0}.project-card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.project-card-tag{font-size:.75rem;font-weight:600;padding:4px 12px;border-radius:50px;background:var(--accent-dim);color:var(--accent);white-space:nowrap}.project-card-link{display:inline-flex;align-items:center;gap:4px;font-size:.9rem;font-weight:600;color:var(--accent);margin-top:8px;transition:var(--transition);text-align:left}.project-card-link:hover{color:#fff;gap:8px}.link{display:inline-block;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;transition:var(--transition)}.link:hover{color:#fff;border-color:#fff}.experience{position:relative;text-align:center;width:100%}.experience-content{margin:0 auto;max-width:1200px}.experience-list{display:flex;justify-content:center;flex-wrap:wrap;padding-left:0;list-style:none;margin:0 auto;gap:20px}.experience-list>li{width:380px;min-width:280px}.experience-list>li>div{height:100%}.experience-link{text-decoration:none;height:100%;cursor:default}.experience-card,.experience-card-wrapper{height:100%;transition:var(--transition)}.experience-card{position:relative;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:24px;min-height:158px;cursor:pointer;overflow:hidden}.experience-card-wrapper:hover .experience-card{transform:translateY(-8px);border-color:rgba(0,218,65,.2);box-shadow:0 12px 40px rgba(0,218,65,.08)}.experience-card-top{position:relative;width:100%;height:140px;display:flex;align-items:center;justify-content:center}.experience-card-top>h2{position:absolute;top:30px;text-align:center;font-weight:700;margin:0 30px;font-size:20px;color:#000;z-index:1}.image-wrapper{position:absolute;bottom:-45px;border-radius:50%;display:flex;align-items:center;justify-content:center;width:90px;height:90px;box-shadow:0 4px 20px rgba(0,0,0,.3)}.experience-card-bottom{box-sizing:border-box;text-align:center;width:100%;color:#fff;padding:55px 20px 24px;display:flex;flex-direction:column;justify-content:space-between}.experience-card-bottom h2{margin:0;font-size:1.1rem}.experience-card-bottom h3{margin:16px 0;font-size:.95rem;color:var(--text-secondary)}.experience-card-bottom ul{list-style-type:disc;text-align:left}.experience-card-bottom li{font-size:.9rem;color:var(--text-secondary);margin-bottom:4px}.experience-card-tech{margin-top:16px}.experience-card-tech>ul{list-style-type:none;display:flex;flex-wrap:wrap;gap:6px}.experience-card-tech>ul>li{font-size:.75rem;font-weight:600;border-radius:6px;padding:4px 10px;background:var(--accent-dim);color:var(--accent)}.experience-bg{position:absolute;border-radius:24px 24px 0 0;width:100%;height:100%}.logo-bg{border-radius:50%}.company-logo{max-width:140px;z-index:1;pointer-events:none}.activity{position:relative;text-align:center;width:100%}.footer{display:flex;background:var(--bg-card);border-top:1px solid var(--border-subtle);width:100%;align-items:center;justify-content:center;padding:20px}.textfoot{color:var(--text-secondary);font-size:.9rem}.logofooter{width:30px;margin-bottom:-8px;margin-left:8px;margin-right:4px;border-radius:6px}.imgblog{background-color:var(--bg-card);height:220px;object-fit:cover}.blogcon{margin:20px}.testpage{width:95%;max-width:1200px;margin:0 auto;text-align:center;padding:40px 0}.notfound404{display:block;width:50%;max-width:500px;padding:20px;margin:60px auto 20px}.sp404{margin-bottom:80px}.github-contrib{max-width:900px;margin:0 auto;padding:48px 24px;text-align:center}.github-contrib-header{display:inline-flex;align-items:center;gap:8px;font-size:1rem;font-weight:600;color:var(--text-secondary);margin-bottom:20px}.github-contrib-years{display:flex;justify-content:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}.github-contrib-year-btn{padding:6px 16px;border-radius:50px;border:1px solid var(--border-subtle);background:transparent;color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:var(--transition)}.github-contrib-year-btn:hover{border-color:var(--accent);color:var(--accent)}.github-contrib-year-btn.active{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600}.github-contrib-chart{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:24px;overflow-x:auto}.github-contrib-chart img{width:100%;height:auto;min-width:600px}.github-contrib-link{display:inline-block;margin-top:16px;font-size:.9rem;font-weight:600;color:var(--accent);transition:var(--transition)}.github-contrib-link:hover{color:#fff}.img-slider{position:relative;width:100%;height:100%;min-height:280px}.img-slider-slide{position:absolute;inset:0;transition:opacity .8s ease-in-out;will-change:opacity}.topButton{position:fixed;bottom:20px;right:30px;z-index:99}@media screen and (max-width:825px){.mmm:not(.logo){display:none}.active-link{color:var(--accent);font-weight:600}.linksmo{color:#000;width:100%;font-weight:500}.linksmo:hover{color:var(--accent)}.mobile-button-menu,.mobile-button-menukhaw{display:flex;height:30px}.mobile-button-menukhaw{width:20%}}@media screen and (max-width:768px){.hero-container{flex-direction:column;text-align:center;gap:36px}.hero-avatar{width:200px;height:200px}.hero-name{font-size:2.2rem}.hero-typewriter{font-size:1.1rem}.hero-actions,.social-container{justify-content:center}.hero-clock-strip{flex-direction:column;gap:4px;padding:10px 20px}.hero-clock-divider{display:none}.content-section{padding:60px 16px}.section-title{font-size:1.6rem}.project-card{flex-direction:column!important}.project-card-media{min-height:220px}.project-card-body{padding:24px 20px}}@media screen and (max-width:480px){.hero-section{padding:80px 16px 50px}.hero-avatar{width:160px;height:160px}.hero-name{font-size:1.8rem}.hero-btn{padding:10px 20px;font-size:.85rem}.marquee-card{padding:20px 24px;min-width:110px}.marquee-card svg{width:40px!important;height:40px!important}.marquee-label{font-size:.8rem}.experience-list>li{width:100%;min-width:unset}.experience-card{border-radius:16px}.experience-bg{border-radius:16px 16px 0 0}.experience-card-wrapper:hover .experience-card{transform:none}}