.container-preview{border-radius:16px;background:var(--neutral-10);-webkit-box-shadow:0 4px 16px 0 rgba(0,0,0,.2);box-shadow:0 4px 16px 0 rgba(0,0,0,.2);width:422px;position:absolute;top:18px;right:10px;& .header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:16px 0;margin:0 16px;border-bottom:1px solid var(--neutral-30);& .title{font-size:16px;font-weight:500}& .close-btn{cursor:pointer;color:var(--neutral-90);& i{color:var(--neutral-80)}}}>.content{padding:16px;& .success-info{border-radius:8px;border:1px solid #b8dbca;background:#f5fffa;padding:8px}}}.wrap-img-none,.wrap-img-some{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:8px;background:#f5f5f5;height:400px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.wrap-img-none{border:1px solid #e0e0e0}.wrap-img-none .footer{height:10%;background-color:#43936c;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:0 0 8px 8px;color:#fff;font-weight:500;font-size:12px}.wrap-img-none .content,.wrap-img-none .footer{display:-webkit-box;display:-ms-flexbox;display:flex}.wrap-img-none .content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:90%;& .round-wrap{padding:10px 15px;background-color:#43936c;margin:auto;border-radius:100%;& i{color:#fff}}}.wrap-img-some{position:relative;& .footer{position:absolute;width:100%;bottom:0;background:rgba(64,64,64,.5);border-radius:0 0 8px 8px;height:15%;color:var(--neutral-10);& .choice-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:.5rem;cursor:pointer}}& img{height:100%;-o-object-fit:fill;object-fit:fill;border-radius:8px 8px 8px 8px}}.device-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.device-pixel{background-image:url(../img/mockup_google_pixel_6_pro_crop.png);height:500px;background-size:250px 500px;background-repeat:no-repeat;background-position:50%;padding-left:40px;padding-right:40px;padding-top:9px;& .preview-content{position:relative;>img{border-radius:8px;width:237px;height:478px}& .footer{position:absolute;z-index:1;bottom:0;width:100%;padding:4px 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;& .wrap-node{gap:.4rem;margin-bottom:14px;>.node{background-color:#ecf1f0;border-radius:9999px;border:1px solid #7db1a2;width:8px;height:8px}}& .btn-start,& .wrap-node{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}& .btn-start{border-radius:24px;background:#001e1d;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 auto;padding-left:3rem;padding-right:3rem}& .text-btn{color:#fff;font-weight:700;font-size:10.5px;padding-block:8px}}}}