.myModal-login{}
.myModal-login .modal-dialog{margin: 20px auto!important}

/* Đăng nhập hệ thống */
#myModalLogin{}
#myModalLogin .modal-dialog{max-width:420px;}
#myModalLogin .inner{position:relative; text-align:center; padding:70px 45px 70px 45px;}
#myModalLogin .inner label{margin:0; font-size:22px; font-weight:500; color:#000}
#myModalLogin .inner p{opacity:.75; padding-top:10px;}
#myModalLogin .inner ul.follow{width:calc(100% + 30px); margin:0 0 0 -15px; padding:0; list-style:none; text-align:center; display:flex; float:left;}
#myModalLogin .inner ul.follow li{width:33.33333333%; position:relative; padding: 0 15px;}
#myModalLogin .inner ul.follow li i{font-size:18px; color:var(--color2); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#edf4fc; margin: 0 auto 10px auto}
#myModalLogin .inner ul.follow li i:before{font-weight:900;}
#myModalLogin .inner ul.follow li span{width:100%; display:block; text-align:center; font-size:14px; line-height:initial; opacity:.7}
#myModalLogin .inner .input-mobile{width:100%; float:left; position:relative; margin-top:30px;}
#myModalLogin .inner .input-mobile i{font-size:20px; line-height:50px; position:absolute; top:0; right:15px; color:var(--color2)}
#myModalLogin .inner .input-mobile i:before{font-weight:400;}
#myModalLogin .inner .input-mobile input{width:100%; height:50px; border-radius:7px; border:1px solid rgba(0,0,0,.15); padding: 0 45px 0 15px; transition:.3s;}
#myModalLogin .inner .input-mobile input:focus{border-color:var(--color2); outline:none}
#myModalLogin .inner .nav-send{width:100%; line-height:48px; height:48px; border-radius:24px; text-align:center; color:#fff; font-weight:500; font-size:16px; background:var(--color2); margin-top:20px; display:block; float:left;}
#myModalLogin .inner .title{width:100%; float:left; position:relative; margin-top:30px; text-align:center;}
#myModalLogin .inner .title:before{content:''; width:100%; height:1px; background:rgba(0,0,0,.15); position:absolute; top:50%; left:0;}
#myModalLogin .inner .title span{position:relative; color:rgba(0,0,0,.75); background:#fff; padding: 0 10px; z-index:2; font-size:15px;}
#myModalLogin .inner ul.social-login{display:table; margin: 0 auto; padding:15px 0 0 0; list-style:none; width:200px; text-align:center; clear:both;}
#myModalLogin .inner ul.social-login li{display:table-cell; position:relative; text-align:center }
#myModalLogin .inner ul.social-login li a{width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.08); transition:.3s;}
#myModalLogin .inner ul.social-login li a:hover{background:#edf4fc; border-color:var(--color2)}

/* Chọn phương thức nhận mã xác thực đăng nhập */
#myModal-VerificationCodeMethod{}
#myModal-VerificationCodeMethod .modal-dialog{max-width:380px;}
#myModal-VerificationCodeMethod .inner{position:relative; text-align:center; padding:50px 25px 35px 25px;}
#myModal-VerificationCodeMethod .inner .icon{width:140px; height:140px; margin: 0 auto; display:flex; align-content:center; justify-content:center; justify-content:center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); border-radius:50%; padding: 25px; background:rgba(0,0,0,.01) }
#myModal-VerificationCodeMethod .inner .icon svg{width:100%; height:auto; display:block; margin: 0 auto; fill:var(--color2)}
#myModal-VerificationCodeMethod .inner p{width:100%; margin:0; padding:30px 0 20px 0; list-style:none; float:left; color:rgba(0,0,0,.75)}
#myModal-VerificationCodeMethod .inner p b{font-size:18px; color:#000; padding-top:5px; padding-right:20px; }
#myModal-VerificationCodeMethod .inner p a{text-decoration:none; color:var(--color2); font-weight:500; margin-left:20px; font-size:14px; position:relative}
#myModal-VerificationCodeMethod .inner p a:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f040"; font-size:16px; padding-right:3px; position:absolute; right:100%; margin-right:3px; top:-5px; }
#myModal-VerificationCodeMethod .inner p a:hover{text-decoration:underline!important}
#myModal-VerificationCodeMethod .inner .nav-sendZalo{width:100%; line-height:48px; height:48px; border-radius:24px; text-align:center; color:#fff; font-weight:500; font-size:16px; background:var(--color2); margin-top:15px; display:block; float:left;}
#myModal-VerificationCodeMethod .inner span{display:block; width:100%; float:left; margin-top:15px; font-size:15px; color:rgba(0,0,0,.75)}
#myModal-VerificationCodeMethod .inner span a{color:var(--color2); font-weight:500;}
#myModal-VerificationCodeMethod .inner span a:hover{text-decoration:underline!important}

/* Nhập mã xác thực đăng nhập từ Zalo  */
.myModal-VerificationCode{}
.myModal-VerificationCode .modal-dialog{max-width:450px;}
.myModal-VerificationCode .inner{position:relative; text-align:center; padding:70px 45px 70px 45px!important;}
.myModal-VerificationCode .inner label{margin:0; font-size:22px; font-weight:500; color:#000; width:100%; float:left;}
.myModal-VerificationCode .inner .sub-title{width:100%; margin:0; padding:10px 0 10px 0; list-style:none; float:left; color:rgba(0,0,0,.75)}
.myModal-VerificationCode .inner .sub-title b{font-size:18px; color:#000; padding-top:3px; padding-right:6px; }
.myModal-VerificationCode .inner .sub-title .countdown-timer{display:inline-block}
.myModal-VerificationCode .inner .sub-title .countdown-timer i{font-style:normal}
.myModal-VerificationCode .inner .nav-send{width:100%; line-height:48px; height:48px; border-radius:24px; text-align:center; color:#fff; font-weight:500; font-size:16px; background:var(--color2); margin-top:20px; display:block; float:left;}
.myModal-VerificationCode .inner a.change-number{text-decoration:none; color:var(--color2); font-weight:500; margin-left:20px; font-size:14px; position:relative}
.myModal-VerificationCode .inner a.change-number:before{font-family: "Font Awesome 5";font-weight: 900; content: "\f040"; font-size:16px; padding-right:3px; position:absolute; right:100%; margin-right:3px; top:-5px; }
.myModal-VerificationCode .inner a.change-number:hover{text-decoration:underline!important}
.myModal-VerificationCode .inner ul.list-code{width:100%; float:left; position:relative; text-align:center; margin:0; padding:30px 0 0px 0;}
.myModal-VerificationCode .inner ul.list-code li{display:inline; position:relative; padding: 0 2px;}
.myModal-VerificationCode .inner ul.list-code li input[type='text']{width:44px; height:44px; border-radius:7px; border:1px solid #c1c8d1; transition:.3s; text-align:center; font-weight:500; font-size:20px; color:#000}
.myModal-VerificationCode .inner ul.list-code li input[type='text']:focus{outline:none; border-color:var(--color2)}
.myModal-VerificationCode .inner .sendback{width:100%; float:left; text-align:center; margin: 10px 0;}
.myModal-VerificationCode .inner .sendback span{width:100%; float:left; position:relative; color:rgba(0,0,0,.75); font-size:14px; padding: 20px 0}
.myModal-VerificationCode .inner .sendback span i{font-weight:normal; font-style:normal; font-weight:500;}
.myModal-VerificationCode .inner .sendback a{text-decoration:none; color:var(--color2); font-weight:500; font-size:14px; transition:.3s; padding: 0; display:inline-block}
.myModal-VerificationCode .inner .sendback a:hover{text-decoration:underline!important;}
.myModal-VerificationCode .inner .ele{font-size:15px; width:100%; float:left; text-align:center; color:rgba(0,0,0,.75)}
.myModal-VerificationCode .inner .ele a{color:var(--color2); font-weight:500; transition:.3s;}
.myModal-VerificationCode .inner .ele a:hover{text-decoration:underline!important}

/* Thông báo đăng nhập phải đăng nhập hệ thống */
#myModalIsLogin {
}

@media (max-width:500px) {
    .myModal-login .modal-dialog{position:fixed; top:0; left:0; width:100%; max-width:100%!important; margin:0!important}
    .myModal-login .modal-content{border-radius:0!important; position:absolute; width:100%; height:100%; left:0; top:0;}
}