html, body{height:100%;}
body{ color:#666;font-family: 'Roboto', sans-serif; font-weight:normal; font-size:14px; color:#111; margin:initial!important; overflow-x:hidden; background:var(--color-bg); padding: 0 15px }

:root {
    --color1: #127948;
    --color2: #ffc107;
    --color3: #d61b14;
    --color-border: #e5e7eb;
    --color-bg: #f4f5ec;
    --color-line: #e5e6e9;
}

/* Checkbox */
.checkbox {float:left; margin:0; min-width:15px; position:relative; }
.checkbox label { display: inline-block; min-width:15px; vertical-align: middle; position: relative; margin:0;  padding-left: 20px; line-height:15px; padding-right:0; white-space:initial;  min-height:initial; cursor:default; font-size:14px;}
.checkbox label:before{ content: ""; display: inline-block; position: absolute; width: 15px; top:-1px; height: 15px; left: 0; margin:0 0; border: 1px solid rgba(0,0,0,.2);  border-radius: 3px;  background-color: #fff;}
.checkbox label:after{font-family: "Font Awesome 5";content: "\f00c"; font-weight:900; font-size:9px; position:absolute; top:2px; left:3px; color:#000; line-height:initial; transform: scale(0,0);   }
.checkbox input[type=checkbox]{opacity:0; position:absolute; top:0; left:0; width:15px; height:15px; margin:0;}
.checkbox input[type="checkbox"]:focus + label:before{ outline: none;}
.checkbox input[type="checkbox"]:checked + label:after{transform: scale(1, 1)}
.checkbox input[type="checkbox"]:disabled + label{ opacity: 0.65; }
.checkbox input[type="checkbox"]:disabled + label:before{ background-color: #eeeeee; cursor: not-allowed; }

/* Radio */
.radio { float:left; margin:0; min-width:15px; position:relative;}
.radio label { display: inline-block; min-width:15px; vertical-align: middle; position: relative; margin:0;  padding-left: 20px; line-height:15px; padding-right:0; white-space:initial; height:15px; min-height:initial; cursor:default; font-size:14px; }
.radio label::before { content: ""; display: inline-block; position: absolute; width: 15px; height: 15px; left: 0; margin:0 0; border: 1px solid rgba(0,0,0,.2);  border-radius: 50%;  background-color: #fff; transition:.3s; }
.radio label::after {display: inline-block; position: absolute; content: " "; width: 5px; height: 5px;left: 5px;top: 5px; border-radius: 50%; background-color: #000; transform: scale(0, 0); transition:.3s; }
.radio input[type="radio"] {opacity:0; position:absolute; top:0; left:0; width:15px; height:15px; margin:0;}
.radio input[type="radio"]:focus + label::before {outline:none;}
.radio input[type="radio"]:checked + label::after {transform: scale(1, 1); }
.radio input[type="radio"]:disabled + label { opacity: 0.65; }
.radio input[type="radio"]:disabled + label::before {cursor: not-allowed; }

.account-page{position:relative; width:100%; min-height:100%; display:table; padding-top:40px;}
.account-page .head-page{ display:table-row; position:relative; vertical-align:middle; height:110px; border-bottom:1px solid rgba(0,0,0,.07); text-align:center;}
.account-page .head-page .logo{display:inline-block; position:relative;}
.account-page .head-page .logo img{height:110px;}
.account-page .head-page .link-page{display:block; width:100%; float:left; text-align:center; padding:20px 15px 30px 15px;}
.account-page .head-page .link-page ul{margin:0 auto; padding:0; list-style:none; display:inline-block;}
.account-page .head-page .link-page ul li{position:relative; padding:20px 20px 0 20px; float:left; }
.account-page .head-page .link-page ul li:before{content:''; width:1px; height:12px; background:rgba(0,0,0,.1); position:absolute; right:0; bottom:5px;}
.account-page .head-page .link-page ul li:first-child{padding-left:0;}
.account-page .head-page .link-page ul li:last-child{padding-right:0;}
.account-page .head-page .link-page ul li:last-child:before{display:none;}
.account-page .head-page .link-page ul li a{text-decoration:none; text-transform:uppercase; font-weight:bold; color:#000; position:relative; font-size:14px; transition:.3s; white-space:nowrap}
.account-page .head-page .link-page ul li a:hover{color:var(--color1)}
.account-page .head-page .link-page ul li a .icon{position:absolute; bottom:100%; left:100%; margin-bottom:0px; margin-left:-5px; opacity:.4; transition:.3s; }
.account-page .head-page .link-page ul li a:hover .icon{opacity:1;}
.account-page .head-page img.logo{}
.account-page .head-page .wrap-nav{float:right;  margin: 35px 0px 0 0; position:relative;}
.account-page .head-page .wrap-nav a{float:right; line-height:36px; height:36px; font-size:15px; margin: 0; border-radius:5px; padding: 0 0px 0 0; color:#000; font-weight:500; text-decoration:none; position:relative; transition:.3s }
.account-page .head-page .wrap-nav a i{font-size:16px; margin:0 10px 0 0; line-height:36px; opacity:.3; position:relative; transition:.3s; float:left; display:block; }
.account-page .head-page .wrap-nav a:hover{color:var(--color1);}
.account-page .head-page .wrap-nav a:hover i{opacity:1;}
.account-page .head-page .logo{}

.account-page .body-page{display:table-cell; position:relative; text-align:center; vertical-align:middle}
.account-page .body-page .inner{max-width:430px; width:100%; display:inline-block; position:relative; text-align:left; margin:30px 0 10px 0; padding: 20px 30px; border-radius:22px 0 22px 22px; background:#fff;}
.account-page .body-page .inner:after{content: ''; width: 110px; height: 110px; top: -4px; right: -4px; background: url(../Default/LP-clip-angle-rt-bg.svg) no-repeat 0 0; background-size: 100% auto;   position: absolute;   z-index: 3;}
.account-page .body-page .inner .icon-main{width:58px; height:58px; line-height:58px; font-size:26px; color:var(--color1); text-align:center; background:#fff; border-radius:50%; position:absolute; top:0; right:0; z-index:5; transition:.3s;}
.account-page .body-page .inner .title-widget{width:100%; position:relative; text-align:left; font-family: "Signika", sans-serif; font-weight:600; color:var(--color3); font-size:28px; padding-bottom:15px;}
.account-page .body-page .inner ul.form{ margin:0 -10px; padding:0; list-style:none;}
.account-page .body-page .inner ul.form li{float:left; position:relative; margin: 10px 0; padding: 0 10px;}
.account-page .body-page .inner ul.form li .title-ui{width:100%; float:left; position:relative; font-weight:500; padding-bottom:6px;} 
.account-page .body-page .inner ul.form li input[type='text'],
.account-page .body-page .inner ul.form li input[type='password']{width:100%;height:40px; border:1px solid rgba(0,0,0,.07); border-radius:5px; padding: 0 10px; outline:none; transition:.3s; background:var(--color-bg)!important }
.account-page .body-page .inner ul.form li input[type='text']:focus,
.account-page .body-page .inner ul.form li input[type='password']:focus{border:1px solid var(--color1); background:#fff;}
.account-page .body-page .inner ul.form li.icon input[type='text'],
.account-page .body-page .inner ul.form li.icon input[type='password']{padding: 0 40px 0 10px;}
.account-page .body-page .inner ul.form li.icon i{line-height:40px; font-weight:300; position:absolute; bottom:0; right:25px; z-index:2; font-size:16px; color:var(--color1) }
.account-page .body-page .inner ul.form li.validateemail .fa-envelope{opacity:1; color:var(--color1)}
.account-page .body-page .inner ul.form li.validateemail .fa-envelope:before{content: "\f00c"; font-weight:900;}

.account-page .body-page .inner .nav-forgetPass{font-weight:500; position:absolute; right:10px; top:0px; color:var(--color1);}
.account-page .body-page .inner .nav-form{width:100%; font-weight:bold; font-size:16px; text-transform:uppercase; height:46px; line-height:47px; border-radius:5px; color:#fff; background:var(--color1); box-shadow: inset 0 0 rgba(0,0,0,0); text-decoration:none; display:block; transition:.3s; text-align:center;}
.account-page .body-page .inner .nav-form:hover{box-shadow:inset 0 46px rgba(0,0,0,.15)}
.account-page .body-page .inner .nav-more{width:100%; font-weight:bold; font-size:14px; height:44px; padding: 0 0 0 60px; line-height:47px; border-radius:5px; color:#000; box-shadow: 0 0 0 1px rgba(0,0,0,.1); text-decoration:none; display:block; transition:.3s; text-align:center; margin-top:20px; position:relative; text-align:left;}
.account-page .body-page .inner .nav-more:hover{color:var(--color1)}
.account-page .body-page .inner .nav-more i{width: 46px; height:46px; line-height:46px; display:block; text-align:center; position:absolute; top:0; left:0; font-size:16px; color:rgba(0,0,0,.3); transition:.3s }
.account-page .body-page .inner .nav-more:hover i{color:var(--color1); opacity:1;}
.account-page .body-page .inner .nav-more i:after{content:''; width:1px; height:14px; margin-top:-7px; background:rgba(0,0,0,.15); top:50%; right:0; position:absolute}
.account-page .body-page .inner .nav-more:after{font-family:"Font Awesome 5"; font-weight:900; content:"\f30b"; line-height:46px; position:absolute; top:0; right:15px; opacity:.3; font-size:16px;}
.account-page .body-page .inner .nav-more:hover{}
.account-page .foot-page{display:table-row; text-align:center; height:50px; line-height:50px; }
.account-page .foot-page a{text-decoration:none; color:#111; transition:.3s;}
.account-page .foot-page a:hover{color:var(--color1)}

.title-loginMore{width:100%; text-align:center; position:relative; text-align:center; margin: 5px 0}
.title-loginMore:before{content:''; width:100%; height:1px; background:rgba(0,0,0,.1); position:absolute; left:0; top:50%; z-index:-1;}
.title-loginMore span{display:inline-block; font-size:13px; font-weight:500; padding: 0 5px; background:#fff;}


@media (max-width: 767px){
    .account-page .body-page .inner{padding:15px 15px 10px 15px; margin-top:0px}
    .account-page .body-page .inner .title-widget{font-size:25px;}
}

/* myModal Processing */
.myModal-processing{width:100%; height:100%; position:fixed; top:0; left:0; z-index:100; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; transition:.3s; padding:30px;}
.myModal-processing .inner{min-width:110px; height:110px;  padding:20px 0 0 0; background:#fff; border-radius:7px; text-align:center; text-align:center}
.myModal-processing .inner .db-spinner{width: 46px; height: 46px; border-radius: 50%; display:block; margin: 0 auto; background-color: transparent; border: 3px solid rgba(0,0,0,.07); border-top: 3px solid var(--color1); border-bottom: 3px solid var(--color1); -webkit-animation: 1s spin linear infinite; animation: 1s spin linear infinite;}
.myModal-processing .inner span{display:block; font-weight:500; font-size:13px; padding-top:8px; display:block;}
@-webkit-keyframes spin {from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
@keyframes spin {from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}    


/* Chuyển trang */
.myModal-navigationPage{width:100%; height:100%; position:fixed; top:0; left:0; padding:20px; z-index:100; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; transition:.3s; pointer-events: none; opacity:0; visibility:hidden}
.myModal-navigationPage.show{opacity:1; visibility:initial; pointer-events:initial; display:flex!important}
.myModal-navigationPage .inner{max-width:380px; width:100%; padding:40px 30px 30px 30px; background:#fff; border-radius:7px; text-align:center;}
.myModal-navigationPage .inner .info{width:100%; float:left; position:relative;}
.myModal-navigationPage .inner .icon-main{width:64px; height:64px; display:block; color:var(--color1); margin: 0 auto; position:relative; background:rgba(0,0,0,.02); box-shadow: 0 0 0 1px rgba(0,0,0,.07); display:flex; align-items:center; justify-content:center; border-radius:50%;}
.myModal-navigationPage .inner .title{display:block; font-weight:bold; font-size:20px; padding-top:10px; color:var(--color1)}
.myModal-navigationPage .inner .note{width:100%; float:left; position:relative; padding-top:15px; line-height:24px;  font-size:17px;}
.myModal-navigationPage .inner .nav-back{color:var(--color2); font-weight:500; text-decoration:none; display:inline-block; margin-top:20px; font-size:15px; position:relative; line-height:38px; height:38px; padding: 0 20px; border-radius:19px; box-shadow: 0 0 0 1px rgba(0,0,0,.07); background:rgba(0,0,0,.02); transition:.3s;}
.myModal-navigationPage .inner .nav-back:before{font-family:"Font Awesome 5"; font-weight:900; content:"\f3e5"; padding-right:15px;}
.myModal-navigationPage .inner .title-more{width:100%; text-align:center; position:relative; text-align:center; margin: 25px 0 0 5px; float:left;}
.myModal-navigationPage .inner .title-more:before{content:''; width:100%; height:1px; background:rgba(0,0,0,.1); position:absolute; left:0; top:50%; z-index:1;}
.myModal-navigationPage .inner .title-more span{display:inline-block; font-size:13px; font-weight:500; padding: 0 5px; background:#fff; position:relative; z-index:2;}
.myModal-navigationPage .inner ul.local{width:calc(100% + 30px); margin:20px 0 0 -15px; padding:0; list-style:none; display:flex; justify-content:space-between; align-content:center; align-items:center;  }
.myModal-navigationPage .inner ul.local li{position:relative; padding: 0 10px; display:flex; width:100%; justify-content:center; margin-top:15px;}
.myModal-navigationPage .inner ul.local li:before{content:''; width:1px; height:14px; background:rgba(0,0,0,.15); position:absolute; top:8px; right:0;}
.myModal-navigationPage .inner ul.local li:last-child:before{display:none;}
.myModal-navigationPage .inner ul.local li a{position:relative; color:#000;text-decoration:none; transition:.3s; display:inline-block;}
.myModal-navigationPage .inner ul.local li a i{font-size:16px; opacity:.4 }
.myModal-navigationPage .inner ul.local li a:hover{color:var(--color2)}
.myModal-navigationPage .inner ul.local li a:hover i{opacity:1; color:var(--color2)}
.myModal-navigationPage .inner ul.local li a span{line-height:30px; height:30px; border-radius:15px; font-weight:bold; display:inline-block; padding-left:5px; color:var(--color2) }
.myModal-navigationPage .inner ul.list{width:calc(100% + 30px); margin:20px 0 0 -15px; padding:0; list-style:none; display:flex; justify-content:space-between; align-content:center; align-items:center; float:left; }
.myModal-navigationPage .inner ul.list li{position:relative; padding: 0 10px; display:flex; width:100%;}
.myModal-navigationPage .inner ul.list li a{width:100%; float:left; position:relative; color:#000; padding-top:40px; text-decoration:none; transition:.3s;}
.myModal-navigationPage .inner ul.list li a:hover{color:var(--color1)}
.myModal-navigationPage .inner ul.list li a .icon{width:32px; height:32px; margin-left:-16px; display:block; position:absolute; top:0; left:50%;}
.myModal-navigationPage .inner ul.list li a .icon i{font-size:24px; line-height:32px; color:var(--color1)}
.myModal-navigationPage .inner ul.list li a:hover .icon i{opacity:1;}
.myModal-navigationPage .inner ul.list li a svg{height:32px!important; }
.myModal-navigationPage .inner ul.list li a:hover svg{opacity:1;}
.myModal-navigationPage .inner ul.list li a span{width:100%; background:rgba(0,0,0,.04); display:block; float:left; line-height:30px; height:30px; border-radius:15px; font-weight:500;}