.contact-container{display:grid;grid-template-columns:1fr 1.5fr;gap:2rem}.contact-info{background-color:var(--bg-secondary);border-radius:10px;padding:2rem;height:fit-content}.contact-item{margin-bottom:1.5rem;display:flex;align-items:flex-start;gap:1rem}.contact-item:last-child{margin-bottom:0}.contact-icon{background-color:var(--primary-color);color:var(--white-color);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.contact-item-content h4{margin-bottom:.5rem;font-size:1.1rem;color:var(--primary-color)}.contact-item-content p{color:var(--text-secondary)}.contact-item-content a{color:var(--text-secondary);transition:color .3s ease}.contact-item-content a:hover{color:var(--primary-color)}.contact-social{display:flex;gap:1rem;flex-wrap:wrap}.contact-social a{color:var(--text-secondary);transition:color .3s ease}.contact-social a:hover{color:var(--primary-color)}.contact-form{background-color:var(--bg-secondary);border-radius:10px;padding:2rem}.form-control{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary);color:var(--text-primary);transition:all .3s ease}.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .2rem #20c99740}.form-control::placeholder{color:var(--text-secondary);opacity:.7}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(.98)}to{transform:scale(1)}}.contact-btn{background-color:var(--primary-color);color:var(--white-color);border:none;border-radius:4px;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .3s ease,transform .2s ease;width:100%}.contact-btn:hover{background-color:#1aaf84;transform:translateY(-2px)}.contact-btn:active{transform:translateY(0)}.contact-btn:disabled{background-color:var(--secondary-color);cursor:not-allowed;animation:pulse 1.5s infinite ease-in-out}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.form-success-message{background-color:#20c9971a;color:var(--primary-color);padding:1rem;border-radius:4px;margin-bottom:1.5rem;border-left:4px solid var(--primary-color);animation:fadeInScale .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.error-message{color:#dc3545;font-size:.85rem;margin-top:.25rem;animation:shake .6s ease-in-out}.form-control.error{border-color:#dc3545;box-shadow:0 0 0 .25rem #dc354526}@media (max-width: 992px){.contact-container{grid-template-columns:1fr}}@media (max-width: 768px){.contact-info,.contact-form{padding:1.5rem}.contact-social{gap:.75rem}}@media (max-width: 576px){.contact-item{flex-direction:column;gap:.5rem}.form-group{margin-bottom:1rem}}.not-found{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:6rem 0;text-align:center;background-color:var(--bg-primary);position:relative;overflow:hidden}.not-found-content{max-width:600px;margin:0 auto;padding:3rem 2rem;background-color:var(--bg-secondary);border-radius:1rem;box-shadow:0 15px 30px #0000001a;position:relative;overflow:hidden;transition:all .3s ease;border:1px solid var(--border-color);z-index:10}.not-found-content:hover{transform:translateY(-5px);box-shadow:0 20px 40px #00000026}.not-found-glitch-container{position:relative;display:inline-block;margin-bottom:1rem}.not-found-code{font-size:8rem;font-weight:800;color:var(--primary-color);line-height:1;letter-spacing:-.05em;position:relative;z-index:1;text-shadow:3px 3px 0 rgba(32,201,151,.2)}.glitch{position:relative}.glitch:before,.glitch:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}.glitch:before{left:2px;text-shadow:-2px 0 #ff00c1;clip:rect(44px,450px,56px,0);animation:glitch-anim-1 5s linear infinite alternate-reverse}.glitch:after{left:-2px;text-shadow:-2px 0 #00fff9;clip:rect(44px,450px,56px,0);animation:glitch-anim-2 5s linear infinite alternate-reverse}@keyframes glitch-anim-1{0%{clip:rect(70px,9999px,71px,0)}5%{clip:rect(29px,9999px,36px,0)}10%{clip:rect(8px,9999px,95px,0)}15%{clip:rect(14px,9999px,67px,0)}20%{clip:rect(26px,9999px,65px,0)}25%{clip:rect(5px,9999px,13px,0)}30%{clip:rect(7px,9999px,4px,0)}35%{clip:rect(92px,9999px,53px,0)}40%{clip:rect(89px,9999px,21px,0)}45%{clip:rect(33px,9999px,19px,0)}50%{clip:rect(60px,9999px,84px,0)}55%{clip:rect(42px,9999px,81px,0)}60%{clip:rect(41px,9999px,91px,0)}65%{clip:rect(82px,9999px,99px,0)}70%{clip:rect(32px,9999px,97px,0)}75%{clip:rect(18px,9999px,41px,0)}80%{clip:rect(82px,9999px,11px,0)}85%{clip:rect(54px,9999px,22px,0)}90%{clip:rect(53px,9999px,75px,0)}95%{clip:rect(39px,9999px,52px,0)}to{clip:rect(11px,9999px,35px,0)}}@keyframes glitch-anim-2{0%{clip:rect(39px,9999px,95px,0)}5%{clip:rect(3px,9999px,11px,0)}10%{clip:rect(9px,9999px,25px,0)}15%{clip:rect(55px,9999px,37px,0)}20%{clip:rect(75px,9999px,95px,0)}25%{clip:rect(19px,9999px,27px,0)}30%{clip:rect(28px,9999px,43px,0)}35%{clip:rect(57px,9999px,73px,0)}40%{clip:rect(79px,9999px,76px,0)}45%{clip:rect(23px,9999px,94px,0)}50%{clip:rect(40px,9999px,84px,0)}55%{clip:rect(12px,9999px,81px,0)}60%{clip:rect(41px,9999px,11px,0)}65%{clip:rect(18px,9999px,9px,0)}70%{clip:rect(32px,9999px,47px,0)}75%{clip:rect(38px,9999px,81px,0)}80%{clip:rect(22px,9999px,91px,0)}85%{clip:rect(54px,9999px,2px,0)}90%{clip:rect(57px,9999px,75px,0)}95%{clip:rect(29px,9999px,12px,0)}to{clip:rect(81px,9999px,15px,0)}}.not-found-title{font-size:2.5rem;font-weight:700;color:var(--text-primary);margin-bottom:1.5rem;position:relative;z-index:1}.not-found-message{font-size:1.2rem;color:var(--text-secondary);margin-bottom:2rem;max-width:450px;margin-left:auto;margin-right:auto;position:relative;z-index:1}.countdown{display:inline-block;color:var(--primary-color);font-weight:700;font-size:1.4rem;min-width:2rem}.not-found-actions{margin-bottom:2rem;position:relative;z-index:1}.not-found .btn{display:inline-flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem 1.5rem;transition:all .3s ease;position:relative;overflow:hidden;transform-origin:center}.not-found .btn:hover{transform:translateY(-3px)}.not-found .btn:active{transform:translateY(0)}.btn-icon{display:inline-flex;transform:translateY(0);transition:transform .3s ease}.btn:hover .btn-icon{transform:translateY(-2px)}.not-found-illustration{width:200px;height:200px;margin:0 auto;position:relative;z-index:1}.not-found-svg{width:100%;height:100%}.not-found-circle{fill:#20c9971a;stroke:var(--primary-color);stroke-width:2;transition:all .3s ease}.not-found-face{stroke:var(--primary-color);stroke-width:4;stroke-linecap:round;transition:all .5s ease}.not-found-eye{fill:var(--primary-color);transition:all .3s ease}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.not-found-illustration{animation:float 4s ease-in-out infinite}.not-found-particles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0}.particle{position:absolute;width:6px;height:6px;border-radius:50%;background-color:var(--primary-color);opacity:.3;animation:float-particle linear infinite;z-index:0}@keyframes float-particle{0%{transform:translateY(0) rotate(0);opacity:.3}to{transform:translateY(-100px) rotate(360deg);opacity:0}}@keyframes blink{0%,to{transform:scaleY(1)}50%{transform:scaleY(.1)}}[data-theme=light] .not-found-code{text-shadow:3px 3px 0 rgba(32,201,151,.1)}[data-theme=light] .particle{opacity:.2}[data-theme=light] .not-found-content{box-shadow:0 15px 30px #0000000d}@media (max-width: 768px){.not-found-code{font-size:6rem}.not-found-title{font-size:2rem}.not-found-message{font-size:1rem}.not-found-illustration{width:150px;height:150px}.not-found-content{padding:2.5rem 1.5rem}}@media (max-width: 480px){.not-found-code{font-size:4rem}.not-found-title{font-size:1.5rem}.not-found-content{padding:2rem 1rem;max-width:90%}.not-found-illustration{width:120px;height:120px}}#root{width:100%;height:auto;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1}.header{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:1rem 0;background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);transition:all .3s ease}.header.scrolled{box-shadow:0 5px 15px #0000001a;padding:.8rem 0}.header-container{display:flex;justify-content:space-between;align-items:center}.logo{display:flex;align-items:center;font-weight:700;font-size:1.5rem;color:var(--primary-color);cursor:pointer}.logo span{color:var(--text-primary)}.nav-menu{display:flex;align-items:center;gap:2rem}.nav-link{position:relative;font-weight:500;padding:.5rem 0;transition:all .3s ease;cursor:pointer}.nav-link:hover,.nav-link.active{color:var(--primary-color)}.nav-link.active:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:var(--primary-color)}.header-right{display:flex;align-items:center;justify-content:space-between;gap:10px}.nav-toggle{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer}.theme-toggle{background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center}.resume-btn{padding:.6rem 1.5rem;background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color);border-radius:4px;font-weight:500;transition:all .3s ease;cursor:pointer}.resume-btn:hover{background-color:var(--primary-color);color:var(--white-color)}.sidebar{position:fixed;top:0;left:0;height:100vh;width:250px;background-color:var(--bg-secondary);z-index:1001;padding:2rem 0;transform:translate(-100%);transition:transform .3s ease;border-right:1px solid var(--border-color)}.sidebar.active{transform:translate(0)}.sidebar-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer}.sidebar-nav{display:flex;flex-direction:column;gap:1rem;margin-top:3rem}.sidebar-link{display:flex;align-items:center;gap:.5rem;padding:.75rem 2rem;font-weight:500;transition:all .3s ease;border-left:3px solid transparent;cursor:pointer}.sidebar-link:hover,.sidebar-link.active{background-color:var(--hover-color);color:var(--primary-color);border-left-color:var(--primary-color)}.sidebar-social{position:absolute;bottom:2rem;left:0;width:100%;display:flex;justify-content:center;gap:1rem}.social-link{font-size:1.25rem;color:var(--text-secondary);transition:color .3s ease}.social-link:hover{color:var(--primary-color)}.sidebar-footer{position:absolute;bottom:1rem;left:0;width:100%;text-align:center;font-size:.8rem;color:var(--text-secondary)}.home{padding-top:120px;min-height:100vh;display:flex;align-items:center}.home-content{display:flex;align-items:center;justify-content:space-between;gap:2rem}.home-text{flex:1}.home-title{font-size:3rem;font-weight:700;margin-bottom:1rem;line-height:1.2}.home-title span{color:var(--primary-color)}.home-subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:2rem;max-width:600px}.home-image{flex:1;max-width:500px;position:relative}.home-image img{width:100%;height:auto;border-radius:10px;border:4px solid var(--primary-color)}.services{padding:6rem 0}.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;margin-top:3rem}.service-card{background-color:var(--bg-secondary);border-radius:10px;padding:2rem;transition:transform .3s ease,box-shadow .3s ease;border:1px solid var(--border-color)}.service-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0000001a}.service-icon{font-size:2.5rem;color:var(--primary-color);margin-bottom:1.5rem}.service-title{font-size:1.5rem;margin-bottom:1rem}.service-description{color:var(--text-secondary);font-size:.95rem}.about-content{display:flex;justify-content:space-between;gap:40px}.about-image img{border-radius:10px;border:4px solid var(--primary-color)}.skills{padding:6rem 0}.skills-content{margin-top:3rem}.skills-diagram{display:flex;justify-content:center;margin-bottom:3rem}.skills-title{display:inline-block;padding:.5rem 2rem;background-color:var(--bg-secondary);border-radius:50px;margin-bottom:2rem;border:1px solid var(--border-color)}.skills-subtitle{margin-bottom:20px}.skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.skill-category{display:flex;flex-wrap:wrap;gap:1rem}.skill-tag{padding:.5rem 1.2rem;background-color:var(--bg-secondary);border-radius:50px;font-size:.9rem;border:1px solid var(--border-color);transition:all .3s ease}.skill-tag:hover{background-color:var(--primary-color);color:var(--white-color);border-color:var(--primary-color)}.projects{padding:6rem 0}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:2rem;margin-top:3rem}.project-card{background-color:var(--bg-secondary);border-radius:10px;overflow:hidden;border:1px solid var(--border-color);transition:transform .3s ease}.project-card:hover{transform:translateY(-5px)}.project-image{width:100%;height:200px;object-fit:cover;border-bottom:1px solid var(--border-color)}.project-content{padding:1.5rem}.project-title{font-size:1.25rem;margin-bottom:.5rem}.project-description{color:var(--text-secondary);font-size:.9rem;margin-bottom:1rem}.project-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.project-tag{padding:.25rem .75rem;background-color:var(--hover-color);color:var(--primary-color);border-radius:50px;font-size:.8rem}.project-links{display:flex;gap:1rem}.project-link{padding:.5rem 1rem;border-radius:4px;font-size:.9rem;display:flex;align-items:center;gap:.5rem;transition:all .3s ease}.project-link.demo{background-color:var(--primary-color);color:var(--white-color)}.project-link.code{background-color:transparent;border:1px solid var(--border-color)}.project-link.demo:hover{background-color:#1aaf84}.project-link.code:hover{border-color:var(--primary-color);color:var(--primary-color)}.contact{padding:6rem 0}.contact-container{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3rem}.contact-info{display:flex;flex-direction:column;gap:2rem}.contact-item{display:flex;align-items:center;gap:1rem}.contact-icon{width:50px;height:50px;border-radius:50%;background-color:var(--hover-color);color:var(--primary-color);display:flex;align-items:center;justify-content:center;font-size:1.25rem}.contact-item-content h4{margin-bottom:.5rem;font-size:1.1rem}.contact-item-content p{color:var(--text-secondary);font-size:.9rem}.contact-form{background-color:var(--bg-secondary);padding:2rem;border-radius:10px;border:1px solid var(--border-color)}.form-group{margin-bottom:1.5rem}.form-label{display:block;margin-bottom:.5rem;font-weight:500}.form-control{width:100%;padding:.75rem;border-radius:4px;border:1px solid var(--border-color);background-color:var(--bg-primary);color:var(--text-primary);transition:all .3s ease}.form-control:focus{outline:none;border-color:var(--primary-color)}textarea.form-control{min-height:150px;resize:vertical}.contact-btn{width:100%;padding:.75rem;background-color:var(--primary-color);color:var(--white-color);border:none;border-radius:4px;font-weight:500;cursor:pointer;transition:all .3s ease}.contact-btn:hover{background-color:#1aaf84}.footer{background-color:var(--bg-secondary);border-top:1px solid var(--border-color);padding:2rem 0;text-align:center}.footer-container{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.footer-text{color:var(--text-secondary);font-size:.9rem}.footer-social{display:flex;gap:1.5rem}.footer-social a{color:var(--text-secondary);font-size:1.25rem;transition:color .3s ease}.footer-social a:hover{color:var(--primary-color)}.form-success-message{background-color:#20c9971a;color:var(--primary-color);padding:1rem;margin-bottom:1.5rem;border-radius:4px;border:1px solid var(--primary-color);text-align:center}@media (max-width: 992px){.nav-menu{display:none}.nav-toggle{display:block}.header-right button{padding:.2em .5em}.header-right .resume-btn{padding:.5em}.header-right .nav-toggle svg{display:block;margin:0 auto}.home-content{flex-direction:column-reverse;text-align:center}.home-subtitle{margin:0 auto 2rem}.about-content{flex-direction:column}.about-image img{width:100%;max-width:350px;height:auto}.contact-container{grid-template-columns:1fr}}@media (min-width: 993px){.sidebar{display:none}}@media (max-width: 768px){.skills-grid,.projects-grid{grid-template-columns:1fr}}@media (max-width: 400px){.logo{font-size:1.3rem}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate{animation:fadeIn .5s ease forwards}:root{--primary-color: #20c997;--secondary-color: #6c757d;--light-color: #f8f9fa;--dark-color: #121825;--gray-color: #343a40;--white-color: #ffffff;--black-color: #000000;--bg-primary: var(--dark-color);--bg-secondary: #1e2736;--text-primary: var(--white-color);--text-secondary: #a3a9b2;--border-color: #2c3138;--hover-color: rgba(32, 201, 151, .1);font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=light]{--bg-primary: var(--white-color);--bg-secondary: #f8f9fa;--text-primary: #343a40;--text-secondary: #6c757d;--border-color: #dee2e6;--hover-color: rgba(32, 201, 151, .1)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Bai Jamjuree,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;transition:all .3s ease;margin:0;min-width:320px;width:100%;overflow-x:hidden}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}a{text-decoration:none;color:inherit}ul{list-style:none}button,input,textarea{font-family:Bai Jamjuree,sans-serif}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}.section{padding:4rem 0}.section-title{font-size:2.5rem;margin-bottom:1rem;color:var(--primary-color);text-align:left}.section-subtitle{font-size:1.5rem;color:var(--text-secondary);margin-bottom:2rem}.btn{padding:.75rem 1.5rem;border-radius:4px;border:none;cursor:pointer;font-weight:500;transition:all .3s ease}.btn-primary{background-color:var(--primary-color);color:var(--white-color)}.btn-primary:hover{background-color:#1aaf84}.btn-outline{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}.btn-outline:hover{background-color:var(--primary-color);color:var(--white-color)}.form-control.error{border-color:#dc3545;box-shadow:0 0 0 .25rem #dc354540}.error-message{color:#dc3545;font-size:.85rem;margin-top:.25rem}@media (max-width: 768px){.section-title{font-size:2rem}.section-subtitle{font-size:1.2rem}}