*{margin:0;padding:0}h1,h2,h3,h4,p{color:#fff}.logo h1{font-size:25px;color:#ea1616;font-weight:600;padding-left:10px}span{color:#ebeb00;font-size:25px;font-weight:600}.logo{display:flex;align-items:center}.photo{width:40px;border-radius:50%;border:3px solid #ea1616}body{background:#090909;font-family:Inter,Noto Sans Khmer,sans-serif;overflow:hidden}.main{position:relative;min-height:100vh;background-image:url(/build/assets/bg_pubg-CGOUpxnk.png);background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden;border-radius:8px;isolation:isolate;padding:0 20%}.overlay{position:absolute;inset:0;z-index:-1;background:#0000008b;padding:0 20%;pointer-events:none}.header-navber{display:flex;justify-content:space-between;align-items:center;padding:2% 0}.menu{display:flex;gap:30px;align-items:center}.menu a{text-decoration:none;border:0;color:#fff;text-transform:uppercase;font-size:18px;font-weight:600}.menu a:hover{color:#ea1616}.menu .in{border:2px solid #ea1616;border-radius:50%;padding:6px 10px;font-size:12px;text-transform:none;color:#ea1616}.menu .in:hover{color:#fff;background-color:#0140d2;border:2px solid #fff}.menu i{font-size:14px;padding-left:10px}.content{height:90vh;display:flex;flex-direction:column;justify-content:space-between}.intro{display:flex;flex-direction:column;justify-content:start;padding-top:50px;width:auto;opacity:0;transform:translateY(50px);animation:introMoveUp .9s ease-out forwards}.intro span{color:#ea1616;font-size:3rem;font-weight:900}.title{color:#aeaeae;font-size:11px;width:85px;border-bottom:1px solid;animation-delay:.1s}.myname{font-size:3rem;font-weight:900;width:300px;animation-delay:.1s}.myname:hover{text-shadow:0 0 5px #ea1616}.summary{color:#a2a1a1;font-size:16px;width:500px;animation-delay:.2s}.title,.myname,.summary{opacity:0;transform:translateY(35px);animation-name:textMoveUp;animation-duration:.8s;animation-timing-function:ease-out;animation-fill-mode:forwards}@keyframes introMoveUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes textMoveUp{0%{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}.container{margin:0 auto 10px;width:100%;overflow:hidden;background:#ea16168a;padding:5px;border:1px solid gray;-webkit-mask-image:linear-gradient(to right,transparent,#000000 20%,#000000 80%,transparent);mask-image:linear-gradient(to right,transparent,#000000 20%,#000000 80%,transparent)}.wrapper{display:flex;align-items:center;width:max-content;animation:scroll 20S linear infinite}@keyframes scroll{to{transform:translate(-50%)}}.icon{flex-shrink:0;margin-left:2rem}.icon img{width:70px;height:auto}.content-card{opacity:0;transform:translateY(50px);animation:introMoveUp 1.5s ease-out forwards}.content-card{display:flex;justify-content:space-between}.game-card{position:relative;width:100%;max-width:180px;height:290px;overflow:hidden;border:1px solid rgba(255,35,35,.8);border-radius:18px;background:#080000;box-shadow:0 0 10px #ff000040,0 0 30px #ff00001f}.game-card>img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s ease}.game-card-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,#0000000d 20%,#00000040 50%,#000000f2 88%);pointer-events:none}.game-card-badge{position:absolute;top:11px;left:11px;display:flex;align-items:center;gap:4px;padding:4px 7px;color:#fff;font-size:9px;font-weight:600;border:1px solid rgba(255,50,50,.45);border-radius:14px;background:#1400008c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.game-card-badge span{color:#ff2828;font-size:10px}.game-card-content{position:absolute;right:0;bottom:0;left:0;z-index:2;padding:11px}.game-card-content h1{margin:0;color:#ff2828;font-size:27px;font-weight:800;line-height:1;letter-spacing:-1px}.game-card-content p{margin:10px 0 16px;color:#fff;font-size:12px;font-weight:400}.game-card-line{display:block;width:45px;height:3px;margin-bottom:20px;border-radius:10px;background:#ff2828;-webkit-mask-image:linear-gradient(to right,transparent,#000000 0%,#000000 10%,transparent);mask-image:linear-gradient(to right,transparent,#000000 0%,#000000 10%,transparent)}.game-card-button{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:125px;padding:6px 8px;color:#fff;font-size:11px;font-weight:600;text-decoration:none;border:1px solid #ff2828;border-radius:10px;background:#0c000099;transition:background .3s ease,box-shadow .3s ease}.game-card-button span{color:#ff2828;font-size:16px;line-height:18px}.game-card-button:hover{background:#ff2828;box-shadow:0 0 18px #ff000080}.game-card-button:hover span{color:#fff}@media screen and (max-width:1400px){.main,.overlay{padding:0 10%}.header-navber{padding:22px 0}.logo h1,.logo span{font-size:22px}.photo{width:38px;height:38px;object-fit:cover}.menu{gap:24px}.menu a{font-size:15px;text-decoration:none}.content{height:calc(100vh - 82px);gap:25px}.intro{padding-top:25px}.intro span,.myname{font-size:2.6rem}.summary{width:450px;font-size:14px;line-height:1.6}.content-card{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;width:100%}.game-card{width:100%;max-width:none;height:270px}.game-card>img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s ease}.game-card-content h1{font-size:24px}.game-card-content p{margin:8px 0 13px;font-size:11px;line-height:1.4}.game-card-line{margin-bottom:14px}.container{box-sizing:border-box}.icon img{width:58px}}@media screen and (max-width:700px){body{overflow-x:hidden;overflow-y:auto}.main{min-height:100vh;padding:0 18px;border-radius:0;background-position:center;overflow:visible}.overlay{position:fixed;padding:0}.header-navber{padding:18px 0;gap:15px}.logo h1{padding-left:7px;font-size:18px}.logo span{font-size:18px}.photo{width:34px;height:34px;object-fit:cover;border-width:2px}.menu{gap:12px}.menu a{font-size:11px;text-decoration:none}.menu i{display:none}.menu .in{padding:5px 8px;font-size:10px}.content{height:auto;min-height:calc(100vh - 75px);justify-content:flex-start;gap:35px;padding-bottom:20px}.intro{width:100%;padding-top:35px}.intro span{font-size:2.3rem}.title{width:80px;font-size:10px}.myname{width:100%;font-size:2.3rem}.summary{width:100%;max-width:500px;font-size:14px;line-height:1.6}.content-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;width:100%}.game-card{width:100%;max-width:none;height:280px;border-radius:14px}.game-card>img{width:100%;height:100%;display:block;object-fit:cover}.game-card-badge{top:9px;left:9px;padding:4px 6px;font-size:8px}.game-card-content{padding:10px}.game-card-content h1{font-size:23px}.game-card-content p{margin:7px 0 12px;font-size:10px;line-height:1.4}.game-card-line{width:38px;height:2px;margin-bottom:12px}.container{width:100%;margin-top:10px;margin-bottom:15px;padding:5px 0;box-sizing:border-box}.wrapper{animation-duration:15s}.icon{margin-left:1.3rem}.icon img{width:50px}}@media screen and (max-width:480px){.main{padding:0 14px}.header-navber{flex-wrap:wrap}.menu{gap:10px}.menu a{font-size:10px}.intro{padding-top:20px}.intro span,.myname{font-size:2rem}.summary{font-size:13px}.content-card{grid-template-columns:1fr}.game-card{height:360px}.game-card-content h1{font-size:27px}.game-card-content p{font-size:12px}.icon img{width:42px}}