*{box-sizing:border-box;margin:0;padding:0}.page{background-color:#b7dfe5;background-image:linear-gradient(#fff 2px,#0000 2px),linear-gradient(90deg,#fff 2px,#0000 2px);background-position:-1px -1px;background-size:50px 50px;width:100%;min-height:100vh}.box1{opacity:1;width:400px;height:130px;transition:all .5s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.box1 *{transition:all .5s}.box1 input{color:ff69b4;border:5px solid #00b3ff;border-radius:5px;outline:none;width:300px;height:60px;padding:10px;font-size:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.box1 input.start{top:0;transform:translate(-50%)}.box1 .btn-khampha{color:#fff;cursor:pointer;opacity:1;background-color:#00b3ff;border:none;border-radius:5px;width:300px;height:60px;font-size:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.box1 .btn-khampha.start{bottom:0;transform:translate(-50%)}.box2{justify-content:center;align-items:center;gap:0;height:600px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.box2 *{font-family:Carter One,system-ui;font-weight:10000;font-style:bold;font-size:30px}.box2 .box2-content{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:550px;display:flex;position:relative}.box2 .box2-content .inner2{transition:all 2s;position:absolute;left:50%;transform:translate(-50%,-50%)}.box2 .box2-content .inner2.ready{top:-100dvh}.box2 .box2-content .inner2.start{top:calc(50% + 50px);transform:translate(-50%,-50%)}.box2 .box2-content img{width:300px;transform:translate(-20px,-40px)}.box2 .titlebox{flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.box2 .titlebox img{z-index:1;width:100px;animation:1s infinite laclu2;position:absolute;top:-80px;right:-10px;transform:translate(-50%,-50%)}.box2 .title{font-family:Boldonse,system-ui;font-weight:900;font-style:bold;font-size:100px;line-height:90px}.box2 .title.title1{z-index:2;color:#fffefe;text-shadow:0 0 10px #ffffff40;position:relative}.box2 .title.title2{color:#00b3ff;text-shadow:0 0 10px #ffffff40;transform:translate(-10px)}@keyframes laclu2{0%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}to{transform:rotate(-5deg)}}.filter{width:100%;position:fixed;top:0;left:0}.day{width:40vw;transition:all 2s;position:absolute}.day.day1{left:-3vw;rotate:-5deg}.day.day2{right:-3vw;rotate:5deg}.day.ready{top:-10vw}.day.start{top:-5vw}button.readLetter{color:#fff;cursor:pointer;background-color:#00b3ff;border:none;border-radius:5px;padding:10px 20px;font-size:16px;animation:2s .2s infinite nhungnhay;position:relative;transform:translateY(-80px)}@keyframes nhungnhay{0%{background-color:#00b3ff;transform:translateY(-80px)scale(1);box-shadow:0 0 #00b3ff80,0 0 20px #00b3ff80}50%{background-color:#00bfff;transform:translateY(-85px)scale(1.05);box-shadow:0 0 10px #00b3ff80,0 0 20px #00b3ff80}to{background-color:#00b3ff;transform:translateY(-80px)scale(1);box-shadow:0 0 #00b3ff80,0 0 20px #00b3ff80}}.letter{width:900px;height:600px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.letter.step0 .letter-page.page1{transform:rotateY(180deg)}.letter.step1 .letter-page.page1{transform:rotateY(0)}.letter .letter-content{perspective:100000000px;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);display:flex}.letter .letter-footer{justify-content:center;align-items:center;width:100%;max-width:900px;margin-top:8px;display:flex}.letter .letter-footer button{color:#fff;cursor:pointer;background-color:#a5cfb8;border:2px solid #fff;border-radius:5px;width:40px;height:40px;font-size:16px;box-shadow:0 0 5px #0003}.letter .letter-footer button:hover{background-color:#8bb29e}.letter .letter-footer button:disabled{cursor:not-allowed;background-color:#c9d0cc;border:2px solid #c5c5c5}.letter .letter-page{transform-style:preserve-3d;cursor:pointer;width:100%;height:600px;transition:transform 1.8s cubic-bezier(.175,.885,.32,1.275);position:absolute}.letter .letter-page .main{background-color:#fff;width:50%;height:100%;transition:all 1s;position:absolute;top:0;left:50%;translate:-50%}.letter .letter-page .main .front{z-index:1;background-color:#fff;border-right:1px solid #b5b5b5;width:100%;height:100%;position:absolute;top:0;left:0}.letter .letter-page .main .end{z-index:2;background-color:#fff;width:100%;height:100%;position:absolute;top:0;left:0;transform:rotateY(180deg)}.page1 .end{background-color:#fff;padding:20px}.page1 .end .letter-image{background-color:#a5cfb8;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.page1 .end .letter-image img{object-fit:cover;width:80%}.page1 .front{background-color:#fff;padding:20px}.page1 .front .letter-image{background-color:#a5cfb8;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.page1 .front .letter-image img{object-fit:cover;width:80%}.letter{opacity:0;transition:all 2s}.letter-page{transition:all 2s;left:0}.page1{z-index:2;transform:rotateY(0)}.page2{z-index:1;transform:rotateY(180deg)}.page2 .main .front{z-index:1}.page2 .main .end{z-index:2;padding:20px}.page2 .main .end .letter-content{background-color:#f9f8f6;flex-direction:column;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.page2 .main .end .letter-content .box3{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.page2 .main .end .letter-content .text{width:88%;font-family:Handlee,cursive;font-size:16px;font-weight:500;line-height:25px;translate:0 4px}.page2 .main .end .letter-content .text div{text-align:right;width:100%}.page2 .main .end .letter-content .lines{flex-direction:column;width:100%;padding:20px;display:flex;position:absolute;top:50%;left:0;translate:0 -50%}.page2 .main .end .letter-content .lines .line{border-bottom:1px dashed #b5b5b5;width:100%;height:25px}.box4 .letter-image{justify-content:center;align-items:center;width:150%;display:flex;position:absolute;top:-20px;left:50%;transform:translate(-50%)}.box4 .letter-image img{width:80%;height:80px}.box4 .letter-image2{justify-content:center;align-items:center;width:150%;display:flex;position:absolute;bottom:0;left:20%;transform:translate(-50%)rotate(11deg)}.box4 .letter-image2 img{width:16%}.BongBong{opacity:0;width:600px;height:600px;transition:all 2s;position:relative;top:calc(100dvh + 300px);transform:translateY(-50%)}.BongBong.ready{top:calc(100dvh + 100px)}.BongBong.start{top:50%}.BongBong.start{opacity:1}.BongBong .avatar{z-index:2;width:300px;height:300px;position:absolute;top:50%;left:50%;translate:-50% -50%}.BongBong .avatar .inner{border:3px solid #000;border-radius:50%;width:100%;height:100%;overflow:hidden}.BongBong .avatar img{width:100%;height:100%}.BongBong .avatar .name{text-align:center;border-radius:10px;width:350px;position:absolute;bottom:-50px;left:50%;transform:translate(-50%)}.BongBong .avatar .name h1{color:#366672;text-shadow:0 0 10px #ffb6d980,0 0 20px #ffb6d980;font-family:Source Code Pro,monospace;font-size:25px;font-weight:600}.BongBong img.bong{transform-origin:bottom;width:200px;position:absolute;top:calc(50% - 10px)}.BongBong img.bong.bong1{z-index:1;animation:2s linear infinite laclu;left:340px;transform:translateY(-220px)}.BongBong img.bong.bong2{z-index:3;animation:2s linear infinite laclu;left:50px;transform:translateY(-220px)}@keyframes laclu{0%{transform:translateY(-220px)rotate(-5deg)}50%{transform:translateY(-220px)rotate(5deg)}to{transform:translateY(-220px)rotate(-5deg)}}