.myModal-login{}
.myModal-login .modal-dialog{margin: 20px auto!important}
.myModal-login .nav-close,
#myModalLoginSuccess .nav-close{
    z-index:50!important;
    pointer-events:auto!important;
    cursor:pointer!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 .tk-remember-phone-option{align-items:center; cursor:pointer; display:flex; float:left; font-size:13px; font-weight:400; gap:8px; margin:10px 0 0; text-align:left; width:100%;}
#myModalLogin .inner .tk-remember-phone-option input{height:16px; margin:0; width:16px;}
#myModalLogin .inner .tk-remember-phone-option span{color:rgba(0,0,0,.72);}
#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:15px; 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 .nav-sendSMS{width:100%; line-height:45px; height:45px; border-radius:24px; text-align:center; color:rgba(0,0,0,.85); font-weight:500; font-size:15px;  margin-top:10px; display:block; float:left; background:rgba(0,0,0,.04); box-shadow:inset 0 0 0 1px rgba(0,0,0,.02)}
#myModal-VerificationCodeMethod .inner span{display:block; width:100%; float:left; margin-top:10px; font-size:13px; color:rgba(0,0,0,.7)}

/* 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}

/* Cập nhật thông tin tài khoản */
.myModal-updateAccountInfo{}
.myModal-updateAccountInfo .modal-dialog{max-width:550px;}
.myModal-updateAccountInfo .inner{position:relative; text-align:center; padding:70px 45px 70px 45px!important;}
.myModal-updateAccountInfo .inner .title-modal{margin:0; font-size:22px; font-weight:500; color:#000; width:100%; float:left;}
.myModal-updateAccountInfo .inner .sub-title{width:100%; margin:0; padding:10px 0 10px 0; list-style:none; float:left; color:rgba(0,0,0,.75)}
.myModal-updateAccountInfo .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-updateAccountInfo .inner ul{margin:0 -10px; list-style:none; padding:0; clear:both; }
.myModal-updateAccountInfo .inner ul li{padding: 0 10px}
.myModal-updateAccountInfo .inner ul li input[type="text"],
.myModal-updateAccountInfo .inner ul li select{width:100%; height:50px; border:none; border-bottom:1px solid var(--color-border); outline:none; font-size:15px; padding:0!important;}
.myModal-updateAccountInfo .inner ul li input[type="text"]::placeholder{color:#000}
.myModal-updateAccountInfo .inner ul li:last-child input[type="text"],
.myModal-updateAccountInfo .inner ul li:last-child select{border:none;}
.myModal-updateAccountInfo .inner .wrap-address{width:100%; float:left; position:relative; text-align:left; margin:10px 0; padding: 20px 20px 10px 20px; border:1px solid var(--color-border); border-radius:10px;}
.myModal-updateAccountInfo .inner .wrap-address .title{line-height:20px; position:absolute; top:-10px; left:20px; background:#fff; padding: 0 5px; font-size:15px; font-weight:500; color:var(--color2)}
.myModal-updateAccountInfo .inner .wrap-address .type-address{width:100%; display:flex; padding-top:10px; padding-bottom:12px; font-size:15px; border-bottom:1px solid var(--color-border); white-space:nowrap}
.myModal-updateAccountInfo .inner .wrap-address .type-address span{opacity:.7; padding-right:10px;}
.myModal-updateAccountInfo .inner .wrap-address .type-address .radio{ margin-left: 5px;}
.myModal-updateAccountInfo .inner .addressOld{margin-top:20px;}
.myModal-updateAccountInfo .inner .sendback{width:100%; float:left; text-align:center; margin: 10px 0;}
.myModal-updateAccountInfo .inner .sendback span{width:100%; float:left; position:relative; color:rgba(0,0,0,.75); font-size:14px; padding: 20px 0}
.myModal-updateAccountInfo .inner .sendback span i{font-weight:normal; font-style:normal; font-weight:500;}
.myModal-updateAccountInfo .inner .sendback a{text-decoration:none; color:var(--color2); font-weight:500; font-size:14px; transition:.3s; padding: 0; display:inline-block}
.myModal-updateAccountInfo .inner .sendback a:hover{text-decoration:underline!important;}
.myModal-updateAccountInfo .inner .ele{font-size:15px; width:100%; float:left; text-align:center; color:rgba(0,0,0,.75)}
.myModal-updateAccountInfo .inner .ele a{color:var(--color2); font-weight:500; transition:.3s;}
.myModal-updateAccountInfo .inner .ele a:hover{text-decoration:underline!important}
@media (min-width:577px) {
    .myModal-updateAccountInfo .inner .addressOld ul li:nth-child(4) select{border:none;}
}
@media (max-width:576px) {
    .myModal-updateAccountInfo .inner .wrap-address{width:calc(100% + 40px); margin-left:-20px;}
}


/* Thông báo đăng nhập thành công */
#myModalLoginSuccess{}
#myModalLoginSuccess .modal-content{max-width:300px;}
#myModalLoginSuccess .inner{position:relative; text-align:center; padding:50px 30px 50px 30px; }
#myModalLoginSuccess .inner .icon{width:100px; height:100px; margin: 0 auto; display:flex; align-content:center; align-items: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) }
#myModalLoginSuccess .inner .icon i{color:var(--color2); font-size:36px;}
#myModalLoginSuccess .inner span{display:block; padding:20px 0 30px 0; font-size:15px; }
#myModalLoginSuccess .inner .wrap-nav{width:calc(100% + 10px); margin-left:-5px; position:relative; display:flex; }
#myModalLoginSuccess .inner .wrap-nav a{flex:1; margin: 0 5px; text-align:center; line-height:36px; background:rgba(0,0,0,.05); font-size:14px; border-radius:5px;}
#myModalLoginSuccess .inner .wrap-nav a:first-child{background:var(--color2); color:#fff;}


@media (max-width:576px) {
    .myModal-login .modal-dialog{position:fixed; top:0; left:0; width:100%; height: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; overflow-y:auto}
}

.modal-dialog-centered{justify-content:center}
.tk-trusted-device-option {
    align-items: flex-start;
    background: #f7f9fc;
    border: 1px solid #dfe5ee;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    margin: 14px 0;
    padding: 11px 12px;
    text-align: left;
}

.tk-trusted-device-option input {
    flex: 0 0 auto;
    height: 18px;
    margin: 2px 0 0;
    width: 18px;
}

.tk-trusted-device-option span {
    color: #333;
    display: block;
    font-size: 13px;
    line-height: 1.35;
}

.tk-trusted-device-option b,
.tk-trusted-device-option small {
    display: block;
}

.tk-trusted-device-option small {
    color: #687386;
    font-size: 12px;
    font-weight: normal;
    margin-top: 3px;
}