/*#region chung*/
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    width: 100%;
    padding: 0;
    margin:0;
    position:relative;
    background: #fff;
}
ul{
    padding-left:0;
}
.for-safari {
    -webkit-appearance: none;
}
a {
    color: #484848;
    outline:none !important;
}
    a:hover {
        text-decoration: none;
        color: #FF4641;
    }
input,
select,
textarea, .btn, button {
    max-width: 100%;
    outline: none;
    border-radius: 0;
    outline:none !important;
}
p{
    line-height: 22px;
}
sup {top: -.5em;} sub {bottom: -.25em;} img {border: 0;} svg:not(:root) {overflow: hidden;} h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit;} h1, .h1, h2, .h2, h3, .h3 {margin-top: 20px; margin-bottom: 10px;} .h3, h3 {font-size: 24px;} h4, .h4, h5, .h5, h6, .h6 {margin-top: 10px; margin-bottom: 10px;} ul, ol {margin-top: 0; margin-bottom: 10px;} ul ul, ol ul, ul ol, ol ol {margin-bottom: 0;} .table {width: 100%; max-width: 100%; margin-bottom: 20px;} .btn{display:inline-block; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px;}
hr {
    border-top: 1px dotted #fff;
}
::selection 
{
	background: #FFCC00;
	color: #fff;
	text-shadow: 1px 1px 2px #888;
}
/* Let's get this party started */
::-webkit-scrollbar {
    width: 10px;
    height:10px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background:#efefef;
}
/* Handle */
::-webkit-scrollbar-thumb 
{
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #686868;
}
::-webkit-scrollbar-thumb:window-inactive 
{
    background: #686868;
}

#ct:hover::-webkit-scrollbar-thumb 
{
  background: #686868;
}

#bb:hover::-webkit-scrollbar-thumb {
  background: #686868;
}
/*#endregion chung*/
/*#region login*/
.fullset{
    width:100vw;
    height:100vh;
    display:block;
    position:relative;
}
.setright,.setleft{
    box-sizing:border-box;
    display:block;
    float:left;
    max-width:100vw;
    height:100vh;
    position:relative;
}
.setright {
    width: 60%;
    float: right;
    overflow:auto;
    background: #FFFFFF;
    padding: 24px 16px;
}
    
/*background:url(../../../Content/images/UsersLogin/login_background.png) center left no-repeat;  */
/* width:calc(100vw - 610px); */

.setleft{
     background: linear-gradient(135deg, #FFCC80, #FF9800); /* Lighter, warm gradient */
    width: 40%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: white;
    text-align: center;
    font-family: Arial, sans-serif;
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.1); /* Right side shadow */    
}

.setleft h1 {
    font-size: 24px;
    font-weight:  300;
    color: #ffffff; /* Ensure text is readable */
}

/* The brand logo SVG is 1275x360 intrinsically; without a cap it renders at
   its natural width and spills out of the orange panel onto the form. Keep it
   inside the panel. */
.setleft h1 img {
    display: block;
    width: 100%;
    max-width: 340px;
    height: auto;
    margin: 0 auto;
}

.setleft p {
   font-size: 16px;
    color: rgba(255, 255, 255, 0.9); /* Slightly brighter */
    margin-top: 5px;
}

.table{
    display:table;
    width:100%;
    height:100%;
    margin-bottom: 0;
}
.table .tr{
    display:table-row;
}
.table .tr .td{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.table .tr .td img{
    max-width:100%;
}
    .table h2 {
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 36px;
        margin-top:16px;
        margin-bottom:36px;
    }
.backpage {
    padding-left: 32px;
    display: block;
    text-align: left;
    position: absolute;
    top: 16px;
    left: 16px;
    cursor:pointer;
    color: #333 !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    background: url(../../../Content/images/UsersLogin/Logout_left.svg) left center no-repeat;
    background-size:24px;
}
    .form_Area{
        display:block;
        width:328px;
        margin:0 auto;
        max-width:calc(100% - 32px);
        text-align:left;
        position:relative;
    }
        .form_Area strong {
            display: block;
            float: left;
            width: 100%;
            font-size: 14px;
            font-weight: 700;
            line-height: 20px;
            margin-top: 8px;
            margin-bottom: 12px;
        }
        .form_Area .control {
            display: block;
            margin-bottom: 16px;
            float: left;
            width: 100%;
            position:relative;
        }
        .form_Area .control input[type=text],
        .form_Area .control input[type=email],
        .form_Area .control input[type=tel],
        .form_Area .control input[type=number],
        .form_Area .control input[type=password] {
            display: block;
            width:100%;
            height: 44px;
            padding:12px 40px 12px 16px;
            border-radius: 4px;
            border: 1px solid #F4F6F8;
            background: #F4F6F8;
            color: #333;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
        }
        .form_Area .control input[type=text].userface{
            background: url(../../../Content/images/UsersLogin/icon_uName.svg) no-repeat, #F4F6F8;
            background-position-x:calc(100% - 16px);
            background-position-y:center;
            background-size:16px;
            padding-right:40px;
        }
.capslock {
    position: absolute;
    right: 32px;
    top:8px;
    z-index: 3;
    color: #808080;
    line-height: 30px;
    background: #f4f6f8;
    padding-left: 10px;
    padding-right: 35px;
}

.showpassword, .clearinput {
    z-index: 4;
    padding: 0;
    font-size: 20px;
    position: absolute;
    top: 4px;
    right: 16px;
    line-height: 30px;
    cursor: pointer;
}
    .showpassword + .clearinput {
        right: 52px;
    }
    .showpassword + .clearinput + .capslock {
        right: 48px;
    }
    .form_Area .control input[type=checkbox]{
        display: none;
    }
        .form_Area .control input[type=checkbox] + label {
            display: block;
            min-height:24px;
            padding-left: 32px;
            background: url(../../../../core/theme-mb/content/images/UsersLogin/icon_unchecked.svg) left center no-repeat;
            background-size: 24px;
            font-size: 14px;
            font-weight: 500;
            line-height: 24px;
            color:#333333;
            cursor:pointer;
        }
    .form_Area .control input[type=checkbox]:checked + label{
        display: block;
        padding-left:32px;
        background:url(../../../Content/images/UsersLogin/icon_checked.svg) left center no-repeat;
        background-size:24px;
    }
        .form_Area .btn {
            padding: 12px 16px;
            border-radius: 4px;
            background: #b25a00;
            width: 100%;
            color: #FFF;
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            margin-top:22px;
        }
        .form_Area .link {
            color: #b25a00;
            font-size: 14px;
            font-weight: 500;
            line-height: 20px;
            display:block;
            margin-top:32px;
            text-align:center;
            cursor:pointer;
        }
        .form_Area .sublink,
        .noticeLink{
            display:block;
            margin-top:32px;
            margin-bottom:24px;
            text-align:center;
        }
        .form_Area .sublink .link,
        .noticeLink .link{
            color: #b25a00;
            display:inline;
            margin-top:0;
        }
.alignleft {
    text-align: left !important;
    font-size: 14px;
    line-height: 20px;
}
.noticeLink {
    color: #333;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}
.taiKhoan{
    display:block;
    float:left;
    width:100%;
    margin:4px 0 40px;
}
.taiKhoan img{
    display:block;
    margin: 0 auto 12px;
    border-radius:50%;
    overflow:hidden;
}
    .taiKhoan strong {
        display: block;
        color: #333;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        margin:0;
        text-align:center;
    }
.nlang {
    display: block;
    width: 111px;
    margin: 0 auto;
    background: url(../../../Content/images/UsersLogin/dropdown_icon.svg) right center no-repeat;
    background-size: 8px;
    position: relative;
}
            .nlang label {
                display: block;
                padding-left: 33px;
                color: #8F8F8F;
                text-align:left;
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
            }
        .nlang label[data-lang='V']{
            background:url(../../../Content/images/UsersLogin/VietNam_Flag.svg) left center no-repeat;
            background-size:contain;
        }
        .nlang label[data-lang='E']{
            background:url(../../../../core/theme-mb/content/images/UsersLogin/English_Flag.svg) left center no-repeat;
            background-size:contain;
        }
        .nlang ul{
            display:none;
        }
        .nlang:hover ul {
            display:block;
            position:absolute;
            top:100%;
            left:25px;
            z-index:10;
            list-style:none;
            padding-left:0;
            padding-top:8px;
            background:#FFF;
            border-bottom-left-radius:4px;
            border-bottom-right-radius:4px;
        }
            .nlang:hover ul li {
                display: block;
                padding: 4px 8px;
                cursor: pointer;
                text-align: left;
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
            }
        .nlang:hover ul li:hover{
            background:#F4F6F8;
        }
/*#endregion login*/
@media (max-width: 970px){
    
}
@media (max-width: 768px) {
    .setleft {
    display: none;
  }
  .setright {
    width: 100%;
  }
    
}
@media (max-width:550px) {
    .fullset{
        height:auto;
    }
    .setleft{
          display: none;
    }
    .setright {
    width: 100%;
  }
}
.btn{
    position:relative;
    overflow:hidden;
}
.btn:focus:not(:active)::after {
  animation: ripple 0.3s ease-out;
}
.btn:after {
  content: '';
  opacity: 0;
  background: rgba(255, 255, 255, 0.36);
  width: 5px;
  height: 5px;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
}
@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0;
  }
  
  100% {
    opacity: 1;
    transform: scale(50, 50);
  }
}