@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import url("font-awesome.css");


/**
  *	Reset
  *	Repeatable Patterns
  *	Top
*/

/* Reset
-------------------------------------------------------------- */
html {
    overflow-y              : scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust    : 100%;
}

body {
    line-height             : 1;
    -webkit-font-smoothing  : antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust    : 100%;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
caption,
canvas,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
form,
footer,
header,
hgroup,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
tt,
table,
tbody,
textarea,
tfoot,
thead,
time,
tr,
th,
td,
u,
ul,
var,
video {
    font-family   : inherit;
    font-size     : 100%;
    font-weight   : inherit;
    font-style    : inherit;
    vertical-align: baseline;
    margin        : 0;
    padding       : 0;
    border        : 0;
    outline       : 0;
    background    : transparent;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    -webkit-hyphens: none;
    -moz-hyphens   : none;
    -ms-hyphens    : none;
    hyphens        : none;
    quotes         : none;
}

figure {
    margin: 0;
}

:focus {
    outline: 0;
}

table {
    border-collapse: collapse;
    border-spacing : 0;
}

img {
    border                : 0;
    -ms-interpolation-mode: bicubic;
    vertical-align        : middle;
}

legend {
    white-space: normal;
}

button,
input,
select,
textarea {
    font-size         : 100%;
    margin            : 0;
    max-width         : 100%;
    vertical-align    : baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
    box-sizing        : border-box;
}

button,
input {
    line-height: normal;
}

input,
textarea {
    background-image: -webkit-linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0));
    /* Removing the inner shadow, rounded corners on iOS inputs */
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    line-height       : 1;
    cursor            : pointer;
    /* Improves usability and consistency of cursor style between image-type 'input' and others */
    -webkit-appearance: button;
    /* Corrects inability to style clickable 'input' types in iOS */
    border            : none;
}

input[type="checkbox"],
input[type="radio"] {
    padding: 0;
    /* Addresses excess padding in IE8/9 */
}

input[type="search"] {
    -webkit-appearance: textfield;
    /* Addresses appearance set to searchfield in S5, Chrome */
}

input[type="search"]::-webkit-search-decoration {
    /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
    -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
    border : 0;
    padding: 0;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
    box-sizing        : border-box;
}

/* Repeatable Patterns
-------------------------------------------------------------- */
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
    box-sizing        : border-box;
}

body {
    font       : 14px/22px Helvetica, Arial, sans-serif;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 400;
    color      : #2C2C2C;
}

a {
    text-decoration   : none;
    color             : #333;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

a:hover,
a:focus {
    color             : #fdb913;
    text-decoration   : none;
    outline           : 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

ul,
ol {
    padding: 0;
}

img {
    max-width: 100%;
    height   : auto;
}

b,
strong {
    font-weight: 700;
}

button {
    border: none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    display           : block;
    width             : 100%;
    padding           : 0px 35px;
    line-height       : 40px;
    background        : #754c29;
    border-radius     : 9px;
    font-size         : 14px;
    font-family       : Helvetica, Arial, sans-serif;
    color             : #FFFFFF;
    border            : none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:hover i:before {
    background-color: #fdbe25;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
input[type="email"] {
    position          : relative;
    display           : block;
    width             : 100%;
    line-height       : 24px;
    padding           : 8px 15px;
    color             : #2C2C2C;
    background        : #FFFFFF;
    border            : 1px solid #D6D6D6;
    border-radius     : 3px;
    height            : 40px;
    margin-bottom     : 15px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
    border            : 1px solid #d7d7d7;
    -webkit-box-shadow: none;
    -moz-box-shadow   : none;
    box-shadow        : none;
}

textarea {
    width  : 100%;
    padding: 10px 15px;
    height : 100px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin            : 0;
}

input[type="checkbox"] {
    display: inline;
}

textarea:-moz-placeholder,
textarea::-moz-placeholder,
input:-moz-placeholder,
input::-moz-placeholder {
    font-family: Helvetica, Arial, sans-serif;
    font-size  : 14px;
    color      : #9B9B9B;
    opacity    : 1;
}

input:-ms-input-placeholder {
    font-family: Helvetica, Arial, sans-serif;
    font-size  : 14px;
    color      : #9B9B9B;
    opacity    : 1;
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
    font-family: Helvetica, Arial, sans-serif;
    font-size  : 14px;
    color      : #9B9B9B;
    opacity    : 1;
    font-style : normal;
}

/* bootstrap resetting elements */

textarea,
input[type="text"],
input[type="submit"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    -webkit-appearance: none;
    text-shadow       : none;
    -webkit-box-shadow: none;
    -moz-box-shadow   : none;
    -o-box-shadow     : none;
    box-shadow        : none;
    color             : #000;
}

p {
    margin-bottom: 15px;
}

p:last-of-type {
    margin-bottom: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    color      : #2C2C2C;
}

h1 {
    font-size  : 30px;
    line-height: 40px;
}

h2 {
    font-size  : 24px;
    line-height: 36px;
}

h3 {
    font-size  : 20px;
    line-height: 34px;
}

h4 {
    font-size  : 18px;
    line-height: 24px;
}

h5 {
    font-size  : 16px;
    line-height: 24px;
}

h6 {
    font-size  : 14px;
    line-height: 24px;
}

label {
    font-size    : 14px;
    color        : #4A4A4A;
    line-height  : 20px;
    font-weight  : 700;
    margin-bottom: 5px;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.pc {
    display: block;
}

.mobi {
    display: none;
}

table {
    width: 100%;
}

.clear {
    clear: both;
}

.container {
    width    : 1260px;
    max-width: 100%;
}

.boxed {
    overflow: hidden;
}

select {
    -webkit-appearance : none;
    -moz-appearance    : none;
    appearance         : none;
    background         : url(../images/icon/arrow-cong-khai.svg);
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : 10px;
    background-position: calc(100% - 15px) center;
    background-color   : #FFFFFF;
}

.color-red {
    color: #ff4000;
}

svg {
    width : 350px;
    height: 350px;
}

svg path {
    fill: #dadada !important;
}

.pc-only {
    display: block !important;
}

.sp-only {
    display: none !important;
}

.bg-F7F9FB {
    background-color: #F7F9FB;
}

/* Topbar
-------------------------------------------------------------- */
.topbar {
    background : #fdb913;
    color      : #fff;
    padding    : 11px 0;
    font-size  : 13px;
    line-height: 18px;
}

.topbar a {
    color: #fff;
}

.topbar .wrap-content {
    display: table;
    width  : 100%;
}

.topbar .content-left {
    display       : table-cell;
    vertical-align: middle;
}

.topbar .content-right {
    display       : table-cell;
    vertical-align: middle;
    width         : 50%;
    text-align    : right;
}

/* Header
-------------------------------------------------------------- */
.header {
    background   : #ffff;
    box-shadow   : 0 2px 8px 0 rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position     : relative;
    z-index      : 1;
}

.header .logo-top {
    float      : left;
    line-height: 60px;
}

.header .logo-top a {
    display: block;
    width  : 70px;
}

.header .wrap-search-header {
    min-width: 550px;
    position : relative;
    display  : inline-block;
    margin   : 13px 0 12px 48px;
}

.header .wrap-search-header .text-search {
    width           : 100%;
    background-color: #fff;
    padding-right   : 40px;
    height          : 34px;
    margin-bottom   : 0;
    font-style      : 13px;
}

.header .wrap-search-header .submit-search {
    width              : 40px;
    position           : absolute;
    height             : 34px;
    top                : 0;
    right              : 0;
    background-color   : transparent;
    background-image   : url(../images/icon/search-xanh.svg);
    background-repeat  : no-repeat;
    background-position: calc(100% - 15px) center;
}

.header .text-search:-moz-placeholder,
.header .text-search::-moz-placeholder,
.header .text-search:-moz-placeholder,
.header .text-search::-moz-placeholder {
    font-size: 13px;
    color    : #d7d7d7;
}

.header .text-search:-ms-input-placeholder {
    font-size: 13px;
    color    : #d7d7d7;
}

.header .text-search::-webkit-input-placeholder,
.header .text-search::-webkit-input-placeholder {
    font-size: 13px;
    color    : #d7d7d7;
}

.header .nav-wrap,
.header .mobile-button {
    float: right;
}

#mainnav .menu,
#mainnav .btn-login {
    display       : inline-block;
    text-transform: uppercase;
    position      : relative;
}

#mainnav .btn-login a {
    font-size  : 13px;
    color      : #000;
    font-weight: 700;
}

#mainnav .btn-login {
    padding-left: 30px;
}

#mainnav .btn-login:before {
    content   : '';
    width     : 1px;
    height    : 20px;
    opacity   : 0.2;
    background: #FFFFFF;
    position  : absolute;
    top       : 50%;
    transform : translateY(-50%);
    left      : 0;
}

#mainnav .btn-login a>img {
    margin-top  : -3px;
    margin-right: 10px;
}

#mainnav>ul>li {
    display: inline-block;
}

#mainnav>ul>li>a {
    display     : flex;
    margin-right: 15px;
    font-weight : 700;
    font-size   : 13px;
    color       : #000;
    padding     : 19px 0px;
    position    : relative;
}

#mainnav>ul>li>a>img {
    margin-right: 7px;
}

#mainnav>ul>li>a:hover,
#mainnav>ul>li.active>a {
    color: #754c29;
}

#mainnav>ul>li>a:before {
    content           : '';
    width             : 0;
    height            : 0;
    border-left       : 10px solid transparent;
    border-right      : 10px solid transparent;
    border-bottom     : 8px solid #fff;
    position          : absolute;
    bottom            : -2px;
    left              : 50%;
    transform         : translateX(-50%);
    opacity           : 0;
    visibility        : hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

#mainnav>ul>li>a:hover:before,
#mainnav>ul>li.active>a:before {
    opacity   : 1;
    visibility: visible;
}

/*notification*/
.notification>a {
    position     : relative;
    padding      : 10px 10px 10px 14px !important;
    border-radius: 3px;
}

.notification.active>a {
    background: #754c29;
}

.notification .count {
    position     : absolute;
    border-radius: 8px;
    background   : #D31E27;
    font-weight  : 700;
    font-size    : 11px;
    color        : #FFFFFF;
    line-height  : 16px;
    display      : inline-block;
    text-align   : center;
    padding      : 0 4px;
    top          : 5px;
    right        : 5px;
}

.box-notification {
    width             : 365px;
    background        : #FFFFFF;
    border            : 1px solid #DDDFE2;
    box-shadow        : 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    border-radius     : 2px;
    position          : absolute;
    right             : 0;
    top               : 60px;
    visibility        : hidden;
    opacity           : 0;
    z-index           : 9999;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.box-notification:after {
    content    : '';
    width      : 11px;
    height     : 11px;
    transform  : rotate(-315deg) translateX(-50%);
    background : #FFFFFF;
    border-left: 1px solid #D9DDE5;
    border-top : 1px solid #D9DDE5;
    position   : absolute;
    top        : -2px;
    right      : 15px;
}

.nav-wrap .mainnav,
.wrap-extra-menu {
    display: inline-block;
}

.extra-menu li.notification.active .box-notification {
    top       : 48px;
    visibility: visible;
    opacity   : 1;
}

.extra-menu li a {
    padding: 0;
}

.box-notification ul li {
    font-size     : 14px;
    color         : #4A4A4A;
    letter-spacing: 0;
    position      : relative;
    text-align    : left;
    padding       : 15px 70px 20px 70px;
    border-bottom : 1px solid #D9DDE5;
    position      : relative;
}

.box-notification ul li:last-child {
    border-bottom: none;
}

.box-notification ul li {
    font-size  : 14px;
    color      : #000000;
    line-height: 20px;
}

.box-notification ul li .title span {
    font-weight: 700;
    color      : #2C2C2C;
}

.box-notification ul li .time {
    font-size  : 12px;
    color      : #666666;
    line-height: 16px;
}

.box-notification ul li .avatar,
.box-notification ul li .image {
    width   : 42px;
    height  : 42px;
    overflow: hidden;
}

.box-notification ul li .avatar {
    position     : absolute;
    left         : 15px;
    top          : 15px;
    border-radius: 50%;
}

.box-notification ul li .image {
    position     : absolute;
    right        : 15px;
    top          : 15px;
    border-radius: 2px;
}

.box-notification .see-all {
    text-align: center;
    padding   : 9px 0;
    background: #F8FAFC;
    border-top: 1px solid #DDDFE2;
}

.box-notification .see-all a {
    font-size  : 14px;
    color      : #fdb913;
    line-height: 20px;
    font-weight: 500;
}

.extra-menu>li {
    display    : inline;
    position   : relative;
    margin-left: 20px;
}

.extra-menu>li>img {
    fill: #fff;
}

.box-action-user {
    width             : 215px;
    background        : #FFFFFF;
    border            : 1px solid #D9DDE5;
    box-shadow        : 0 4px 16px 0 rgba(28, 30, 35, 0.12);
    position          : absolute;
    text-align        : left;
    top               : 60px;
    right             : 0;
    visibility        : hidden;
    opacity           : 0;
    z-index           : 9999;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.extra-menu li.action-user.active .box-action-user {
    top       : 48px;
    visibility: visible;
    opacity   : 1;
}

.box-action-user:after {
    content    : '';
    width      : 11px;
    height     : 11px;
    transform  : rotate(-315deg) translateX(-50%);
    background : #FFFFFF;
    border-left: 1px solid #D9DDE5;
    border-top : 1px solid #D9DDE5;
    position   : absolute;
    top        : -2px;
    right      : 20px;
}

.box-action-user ul li a {
    padding       : 11px 15px;
    font-size     : 14px;
    color         : #2C2C2C;
    letter-spacing: 0;
    display       : block;
}

.box-action-user ul li a:hover {
    color: #754c29;
}

.box-action-user ul li {
    border-bottom: 1px solid #D9DDE5;
    ;
}

.box-action-user ul li:last-child {
    border-bottom: none;
}

.action-user>img {
    margin-left: 6px;
}

.action-user>a {
    font-size  : 13px;
    color      : #000;
    line-height: 18px;
}

.action-user .avatar {
    width       : 32px;
    height      : 32px;
    margin-right: 5px;
    display     : inline-block;
}

.box-action-user .wrap-language {
    padding: 0px 15px 15px 15px;
}

.box-action-user .wrap-language .language {
    font-weight  : 500;
    font-size    : 14px;
    color        : #2C2C2C;
    margin-bottom: 0;
    border-radius: 2px;
}

.action-user .link {
    position: absolute;
    left    : 0;
    top     : 0;
    width   : 80%;
    height  : 100%;
}

/* Mobile Menu Button
-------------------------------------------------------------- */
.mobile-button {
    display           : none;
    position          : relative;
    width             : 22px;
    height            : 26px;
    float             : right;
    margin            : 17px 0 17px 20px;
    background-color  : transparent;
    cursor            : pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition   : all 0.3s ease;
    -ms-transition    : all 0.3s ease;
    -o-transition     : all 0.3s ease;
    transition        : all 0.3s ease;
}

.mobile-button:before,
.mobile-button:after,
.mobile-button span {
    background-color  : #fff;
    -webkit-transition: all ease 0.3s;
    -moz-transition   : all ease 0.3s;
    transition        : all ease 0.3s;
}

.mobile-button:before,
.mobile-button:after {
    content                 : '';
    position                : absolute;
    top                     : 0;
    height                  : 2px;
    width                   : 100%;
    right                   : 0;
    top                     : 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin    : 50% 50%;
    transform-origin        : 50% 50%;
}

.mobile-button span {
    position        : absolute;
    width           : 100%;
    height          : 2px;
    right           : 0;
    top             : 50%;
    overflow        : hidden;
    text-indent     : 200%;
    background-color: #000;

}

.mobile-button:before {
    -webkit-transform: translate3d(0, -7px, 0);
    -moz-transform   : translate3d(0, -7px, 0);
    transform        : translate3d(0, -7px, 0);
    background-color : #000;
}

.mobile-button:after {
    width            : 100%;
    -webkit-transform: translate3d(0, 7px, 0);
    -moz-transform   : translate3d(0, 7px, 0);
    transform        : translate3d(0, 7px, 0);
    background-color : #000;
}

.mobile-button.active span {
    opacity: 0;
}

.mobile-button.active:before {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    -moz-transform   : rotate3d(0, 0, 1, 45deg);
    transform        : rotate3d(0, 0, 1, 45deg);
}

.mobile-button.active:after {
    width            : 100%;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    -moz-transform   : rotate3d(0, 0, 1, -45deg);
    transform        : rotate3d(0, 0, 1, -45deg);
}

.btn-submenu {
    position          : absolute;
    right             : 0;
    top               : 0;
    font              : 20px/50px 'FontAwesome';
    text-align        : center;
    cursor            : pointer;
    width             : 55px;
    height            : 55px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.btn-submenu.active {}

/* Mobile navigation
-------------------------------------------------------------- */
#mainnav-mobi {
    display         : block;
    margin          : 0 auto;
    width           : 100%;
    position        : absolute;
    background-color: #fff;
    z-index         : 1000;
    top             : 60px;
    overflow-y      : scroll;
}

#mainnav-mobi>ul {
    min-height: 470px;
}

#mainnav-mobi {
    display         : block;
    list-style      : none;
    margin          : 0;
    padding         : 0;
    background-color: #fff;
}

#mainnav-mobi li {
    margin        : 0;
    position      : relative;
    text-align    : center;
    cursor        : pointer;
    font-size     : 17px;
    line-height   : 30px;
    text-transform: uppercase;
    padding       : 10px 0;
}

#mainnav-mobi li a {
    color: #000;
}

#mainnav-mobi.menu li:first-child {
    border-top: 1px solid #ECEDF2;
}

#mainnav-mobi.menu>li>a {
    text-decoration: none;
    line-height    : 24px;
    padding        : 15px 20px;
    color          : #4A4A4A;
    display        : block;
    position       : relative;
}

#mainnav-mobi.menu>li>a:before {
    content           : "";
    width             : 8px;
    height            : 12px;
    position          : absolute;
    right             : 20px;
    top               : 50%;
    transform         : translateY(-50%);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

#mainnav-mobi.menu>li.active a,
#mainnav-mobi.menu>li>a:hover {
    color     : #fdb913;
    background: #fff;
}

#mainnav-mobi.menu .sub-menu {
    top             : 100%;
    left            : 0;
    z-index         : 2000;
    position        : relative;
    background-color: #333333;
}

#mainnav-mobi.menu>li>ul>li,
#mainnav-mobi.menu>li>ul>li>ul>li {
    position  : relative;
    border-top: 1px solid #ECEDF2;
}

#mainnav-mobi.menu>li>ul>li>ul>li a {
    padding-left: 70px !important
}

#mainnav-mobi.menu.sub-menu>li>a {
    display           : block;
    text-decoration   : none;
    border-top-color  : rgba(255, 255, 255, .1);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition   : all 0.2s ease-out;
    -o-transition     : all 0.2s ease-out;
    transition        : all 0.2s ease-out;
}

#mainnav-mobi.menu>li>ul>li:first-child a {
    border-top: none;
}

#mainnav-mobi ul.sub-menu>li>a:hover,
#mainnav-mobi.menu>li>ul>li.active>a {
    color: #fff;
}

#mainnav-mobi .btn-login {
    text-align: center;
    padding   : 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#mainnav-mobi .btn-login a {
    font-size     : 14px;
    color         : #000;
    font-weight   : 500;
    display       : inline-block;
    padding       : 10px 30px 8px;
    background    : #754c29;
    box-shadow    : 0 4px 12px 0 rgba(18, 47, 51, 0.20);
    border-radius : 20px;
    text-transform: uppercase;
}

#mainnav-mobi .btn-login a img {
    display: none;
}

/* Mobile search
-------------------------------------------------------------- */
.mobi-show-search {
    position: relative;
    float   : right;
    display : none;
}

.show-search {
    float      : right;
    margin-left: 32px;
    position   : relative;
}

.show-search a {
    /*position: relative;*/
    /*width: 26px;*/
    /*height: 60px;*/
    /*display: block;*/
    /*text-align: center;*/
    /*background-image: url(../images/icon/mobile-search.svg);*/
    /*background-position: center center;*/
    /*background-repeat: no-repeat;*/

    position           : relative;
    width              : 25px;
    height             : 57px;
    display            : block;
    text-align         : center;
    background-image   : url(../images/icon/mobile-search.svg);
    background-position: center center;
    background-repeat  : no-repeat;
    margin-top         : 3px;
}

.top-search {
    position  : absolute;
    right     : 0;
    top       : 110%;
    width     : 250px;
    opacity   : 0;
    visibility: hidden;
}

.top-search #searchform-all {
    position: relative;
}

.top-search #searchform-all #s {
    margin-bottom   : 0;
    height          : 34px;
    font-size       : 13px;
    background-color: #fff;
}

.top-search #searchform-all #searchsubmit {
    padding            : 3px;
    background         : transparent;
    width              : 40px;
    height             : 34px;
    position           : absolute;
    top                : 0;
    right              : 0;
    background-color   : transparent;
    background-image   : url(../images/icon/search-xanh.svg);
    background-repeat  : no-repeat;
    background-position: center center;
    border             : none;
    -webkit-transition : all 0.3s ease-in-out;
    -moz-transition    : all 0.3s ease-in-out;
    -ms-transition     : all 0.3s ease-in-out;
    -o-transition      : all 0.3s ease-in-out;
    transition         : all 0.3s ease-in-out;
}

.top-search.show {
    visibility   : visible;
    opacity      : 1;
    position     : fixed;
    z-index      : 9;
    background   : #00000042;
    width        : 100%;
    top          : 61px;
    bottom       : 0;
    left         : 0;
    right        : 0;
    padding-left : 10px;
    padding-right: 10px;
    padding-top  : 10px;
}

.show-search a i {
    font-size         : 14px;
    color             : #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.show-search.active .fa-search::before {
    content: "\f00d";
}

/* Footer
-------------------------------------------------------------- */
#footer {
    background : #FFFFFF;
    box-shadow : 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    font-size  : 14px;
    color      : #2C2C2C;
    text-align : center;
    line-height: 22px;
    padding    : 21px 0 17px;
}

/* Bottom
-------------------------------------------------------------- */
.bottom {
    padding   : 18px 0;
    border-top: 1px solid #303C46;
    background: #fdbe25;
}

.bottom .copyright {
    opacity  : 0.7;
    font-size: 13px;
    color    : #FFFFFF;
}

.bottom .bottom-right {
    text-align: right;
}

.bottom .widget-social li {
    margin-bottom: 0;
}

.bottom .widget-social li a {
    padding-left: 0;
}

.bottom .widget a:before {
    display: none;
}

.list-inline {
    line-height: 1;
}

.list-inline li {
    display: inline-block;
}

.widget-social li a {
    margin-left: 5px;
    position   : relative;
}

/* GoTop
-------------------------------------------------------------- */
.go-top {
    position             : fixed !important;
    right                : 0px;
    bottom               : 60px;
    width                : 40px;
    height               : 40px;
    -webkit-border-radius: 2px;
    -moz-border-radius   : 2px;
    -ms-border-radius    : 2px;
    -o-border-radius     : 2px;
    border-radius        : 2px;
    cursor               : pointer;
    background-color     : rgba(0, 0, 0, 0.4);
    line-height          : 40px;
    text-align           : center;
    -webkit-transition   : all 0.3s ease-in-out;
    -moz-transition      : all 0.3s ease-in-out;
    -ms-transition       : all 0.3s ease-in-out;
    -o-transition        : all 0.3s ease-in-out;
    transition           : all 0.3s ease-in-out;
    -ms-filter           : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter               : alpha(opacity=0);
    opacity              : 0;

}

.go-top.show {
    right     : 15px;
    bottom    : 60px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter    : alpha(opacity=100);
    opacity   : 1;
    visibility: visible;
    z-index   : 9999;
}

.go-top i {
    font-size     : 14px;
    color         : #fff;
    font-weight   : 600;
    padding-bottom: 3px;
    display       : inline-block;
    transform     : rotate(-90deg);
}

.go-top:hover {
    background-color: rgba(0, 0, 0, 1);
}

.go-top:hover i {
    color: #fff;
}

.go-top:hover i:before {
    color: #fff;
}

/*Page Title*/
.page-title .page-title-heading {
    padding: 28px 0 20px
}

.breadcrumbs {
    padding: 14px 0px;
}

.breadcrumbs ul li {
    display: inline-block;
}

.breadcrumbs ul li a,
.breadcrumbs ul li span {
    font-size  : 12px;
    line-height: 20px;
}

.breadcrumbs ul li span {
    color: #444444;
}

.breadcrumbs ul li a {
    padding-right  : 15px;
    margin-right   : 5px;
    position       : relative;
    color          : #fdb913;
    text-decoration: none;
}

.breadcrumbs ul li a:before {
    content            : '';
    width              : 5px;
    height             : 8px;
    background-image   : url(../images/icon/ct-san-pham-8.svg);
    background-repeat  : no-repeat;
    background-position: center center;
    position           : absolute;
    background-size    : 5px;
    right              : 0;
    top                : 50%;
    transform          : translateY(-50%);
}

.breadcrumbs ul li a:hover {
    color: #fdb913;
}

/* Pagination */
.wrap-pagination {
    font-size     : 14px;
    color         : #666666;
    letter-spacing: 0;
    line-height   : 20px;
    padding       : 15px 20px 13px 20px;
}

.wrap-pagination .info-display {
    padding: 10px 0;
}

.wrap-pagination .info-display>span {
    color      : #000000;
    font-weight: 700;
}

.wrap-pagination .pagination {
    display: inline-flex;
}

.pagination li {
    background   : #fff;
    border       : 1px solid #DDE6EC;
    border-radius: 3px;
    display      : inline-block;
    min-width    : 40px;
    min-height   : 36px;
    line-height  : 34px;
    text-align   : center;
    font-size    : 15px;
    line-height  : 26px;
    font-weight  : 500;
    margin-right : 5px;
}

.pagination li.dot {
    min-width: auto;
    border   : 1px solid transparent;
}

.pagination li:last-child {
    margin-right: 0;
}

.pagination li a {
    display: block;
    padding: 5px 10px;
    color  : #4A4A4A;
}

.pagination li a.active,
.pagination li a:hover {
    color     : #fff;
    background: #fdb913;
}

.filter-pagination .input-form,
.filter-pagination .button-submit {
    display: inline-block;
}

.filter-pagination input {
    border-radius: 3px;
    margin-bottom: 0;
    height       : 36px;
    line-height  : 36px;
    max-width    : 76px;
    padding      : 5px 10px;
    font-weight  : 700;
}

.filter-pagination button {
    width        : 40px;
    padding      : 0;
    height       : 36px;
    line-height  : 36px;
    text-align   : center;
    border-radius: 3px;
    display      : inline-block;
    font-size    : 15px;
    color        : #FFFFFF;
    font-weight  : 500;
}

.filter-pagination {
    text-align: right;
}

/* Preloader
-------------------------------------------------------------- */
#preloader {
    position  : fixed;
    left      : 0;
    top       : 0;
    z-index   : 9999;
    width     : 100%;
    height    : 100%;
    overflow  : visible;
    background: #fff;
    display   : table;
    text-align: center;
}

.loader {
    display       : table-cell;
    vertical-align: middle;
    height        : 100%;
    width         : 100%;
    position      : relative;
    width         : 200px;
    height        : 200px;
}

.loader-icon {
    width             : 80px;
    height            : 80px;
    border            : 2px solid #fdb913;
    border-right-color: #eee;
    border-radius     : 50%;
    position          : relative;
    animation         : loader-rotate 1s linear infinite;
    margin            : 0 auto;
}

@keyframes loader-rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* radio button
-------------------------------------------------------------- */
.wrap-radio .container-radio {
    display            : inline-block;
    float              : left;
    position           : relative;
    padding-left       : 35px;
    cursor             : pointer;
    font-size          : 14px;
    color              : #2C2C2C;
    line-height        : 23px;
    margin-right       : 30px;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
}

.wrap-radio .container-radio:last-of-type {
    margin-right: 0;
}

.wrap-radio .container-radio input {
    position: absolute;
    opacity : 0;
    top     : 0;
    left    : 0;
    height  : 24px;
}

.wrap-radio .checkmark {
    position        : absolute;
    top             : 50%;
    transform       : translateY(-50%);
    left            : 0;
    height          : 24px;
    width           : 24px;
    background-color: #eee;
    border-radius   : 50%;
    background      : #FFFFFF;
    border          : 2px solid #E6E6EE;
    z-index         : 1;
}

.wrap-radio .checkmark:after {
    content : "";
    position: absolute;
    display : none;
    z-index : -1;
}

.wrap-radio .container-radio input:checked~.checkmark:after {
    display: block;
}

.wrap-radio .container-radio .checkmark:after {
    top          : 3px;
    left         : 3px;
    width        : 14px;
    height       : 14px;
    border-radius: 50%;
    background   : #fdb913;
}

/* checkbox
-------------------------------------------------------------- */
.container-checkbox {
    display            : inline-block;
    position           : relative;
    padding-left       : 35px;
    cursor             : pointer;
    font-size          : 14px;
    line-height        : 25px;
    color              : #2C2C2C;
    letter-spacing     : 0;
    font-weight        : 700;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
}

.container-checkbox input {
    position: absolute;
    opacity : 0;
    cursor  : pointer;
    height  : 0;
    width   : 0;
}

.checkmark {
    position        : absolute;
    top             : 0;
    left            : 0;
    height          : 24px;
    width           : 24px;
    background-color: #FFFFFF;
    border          : 1px solid #D8DEE3;
    border-radius   : 2px;
}

.container-checkbox:hover input~.checkmark {
    background-color: #FFFFFF;
}

.container-checkbox input:checked~.checkmark {
    background-color: #fff;
}

.checkmark:after {
    content : "";
    position: absolute;
    display : none;
}

.container-checkbox input:checked~.checkmark:after {
    display: block;
}

.container-checkbox .checkmark:after {
    left             : 8px;
    top              : 3px;
    width            : 7px;
    height           : 12px;
    border           : solid #fdb913;
    border-width     : 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform    : rotate(45deg);
    transform        : rotate(45deg);
}

/* quantity
-------------------------------------------------------------- */
.quantity {
    position  : relative;
    width     : 100%;
    display   : inline-block;
    text-align: center;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin            : 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.quantity input {
    width        : 100%;
    height       : 40px;
    line-height  : 1.65;
    display      : block;
    padding      : 0;
    margin       : 0;
    text-align   : left;
    border       : 1px solid #eee;
    display      : inline-block;
    font-weight  : 500;
    border-radius: 0;
    padding-left : 10px;
}

.form-study .quantity input {
    margin-bottom: 0;
}

.quantity input:focus {
    outline: 0;
}

.quantity-nav {
    position: absolute;
    top     : 0;
    left    : 0;
    width   : 100%;
    height  : 100%;
}

.quantity-button {
    position           : absolute;
    cursor             : pointer;
    width              : 20px;
    height             : 19px;
    text-align         : center;
    color              : #333;
    font-size          : 13px;
    font-family        : "Trebuchet MS", Helvetica, sans-serif;
    line-height        : 28px;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    -o-user-select     : none;
    user-select        : none;
}

.quantity-button.quantity-up {
    top                : 0;
    right              : 0;
    background-image   : url(../images/icon/arrow-cong-khai.svg);
    background-position: top;
    background-repeat  : no-repeat;
    transform          : rotate(-180deg);
}

.quantity-button.quantity-down {
    right              : 1px;
    bottom             : 0;
    background-image   : url(../images/icon/arrow-cong-khai.svg);
    background-position: top;
    background-repeat  : no-repeat;
}

/* Grid
-------------------------------------------------------------- */
.one-half {
    width: 50%;
    float: left;
}

.wrap-one-half.mg5 {
    margin: 0 -5px;
}

.wrap-one-half::after {
    display: block;
    clear  : both;
    content: "";
}

.one-half.pd5 {
    width  : 50%;
    float  : left;
    padding: 0 5px;
}

.wrap-one-half.mg10 {
    margin: 0 -10px;
}

.one-half.pd10 {
    width  : 50%;
    float  : left;
    padding: 0 10px;
}

.one-three {
    width: 33.33%;
    float: left;
}

.wrap-three::after {
    display: block;
    clear  : both;
    content: "";
}

.wrap-three.mg5 {
    margin: 0 -5px;
}

.one-three.pd5 {
    width  : 33.33%;
    float  : left;
    padding: 0 5px;
}

.wrap-three.mg10 {
    margin   : 0 -10px;
    display  : flex;
    flex-wrap: wrap;
}

.one-three.pd10 {
    width  : 33.33%;
    float  : left;
    padding: 0 0px;
}



.one-four {
    width: 25%;
    float: left;
}

.one-four.pd5 {
    width  : 25%;
    float  : left;
    padding: 0 5px;
}

.one-four.pd10 {
    width  : 25%;
    float  : left;
    padding: 0 0px;
}



.table-cell {
    display       : table-cell;
    vertical-align: middle;
}

.small-content {
    max-width: 930px;
    margin   : 0 auto;
}

.customlayout {
    margin: 0 -15px;
}

.customlayout::after {
    display: block;
    clear  : both;
    content: "";
}

.customlayout .contentLeft {
    float: left;
}

.customlayout .contentRight {
    float: right;
}

.cl-col-3 {
    width  : 25%;
    padding: 0 15px;
}

.cl-col-9 {
    width  : 75%;
    padding: 0 15px;
}

.flexWrap {
    display  : flex;
    flex-wrap: wrap;
}

/* tab
-------------------------------------------------------------- */
.tabs .warp-tab-title {
    background: #FFFFFF;
    border    : 1px solid #DDDFE2;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
}

.tabs .tab-title {
    background: #FFFFFF;
}

.tabs .tab-title li {
    padding  : 14px 10px;
    position : relative;
    font-size: 14px;
    color    : #4A4A4A;
}

.tabs.horizontal .tab-title li {
    display     : inline-block;
    margin-right: 10px;
}

.tabs.horizontal .tab-title li:last-child {
    margin-right: 0;
}

.tabs .tab-title li:hover {
    cursor: pointer;
}

.tabs.horizontal .tab-title li.active:after {
    content      : '';
    width        : 100%;
    height       : 3px;
    position     : absolute;
    left         : 0;
    bottom       : 0px;
    background   : #fdb913;
    border-radius: 1.5px;
}

.tabs.vertical .tab-title {
    background: transparent;
}

.tabs.vertical .tab-title li {
    width  : 100%;
    display: inline-block;
    padding: 1px 20px;
    margin : 10px 0;
}

.tabs.vertical .tab-title li.active:after {
    content      : '';
    width        : 3px;
    height       : 100%;
    position     : absolute;
    left         : 0;
    top          : 0;
    background   : #fdb913;
    border-radius: 1.5px;
}

.tabs .tab-title li.active {
    font-size  : 14px;
    color      : #2C2C2C;
    font-weight: 700;
}

.tabs .tab-title li.active:first-child {
    border-left: none;
}

.tabs.style1 .tab-title li {
    font-size  : 16px;
    color      : #9B9B9B;
    font-weight: 700;
}

.tabs.style1 .tab-title li.active {
    color: #fdb913;
}

.tabs.style1 .tab-title {
    border-bottom: 1px solid #DDDFE2;
}

.tabs.style1 .tab-content .box {
    background   : #FFFFFF;
    border       : none;
    box-shadow   : none;
    border-radius: 0;
}

.tabs.style1 .tab-title li.active:after {
    height       : 2px;
    border-radius: 0px;
}

.tabs.style1 .tab-title li:first-child {
    margin-left: 10px;
}

.tabs.style1 {
    overflow: hidden;
}

/* Box
-------------------------------------------------------------- */
.bg_grey {
    background-color: #F5F7FA;
}

.primary-color {
    color: #fdb913;
}

.box {
    background   : #FFFFFF;
    border       : 1px solid #DDDFE2;
    box-shadow   : 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

.box .box-title {
    padding      : 12px 15px 10px;
    border-bottom: 1px solid #DDDFE2;
}

.box .box-title-bottom {
    padding   : 12px 15px 10px;
    border-top: 1px solid #DDDFE2;
}

.box .box-title-bottom .see-all {
    font-size     : 13px;
    color         : #754c29;
    line-height   : 18px;
    font-size     : 500;
    text-transform: CAPITALIZE;
    font-weight   : bold;
}

.box-community ul {
    padding: 15px;
}

.box-community ul li {
    width        : 100%;
    margin-bottom: 10px;
    position     : relative;
}

.box-community ul li:last-child {
    margin-bottom: 0;
}

.box-community ul li .image,
.box-community ul li .content {
    display       : table-cell;
    vertical-align: middle;
}

.box-community ul li .image {
    max-width : 120px;
    max-height: 80px;
    min-width : 120px;
}

.box-community ul li .content {
    padding-left: 10px;
}

.box-community ul li .content .decs {
    font-size  : 13px;
    color      : #666666;
    line-height: 18px;
}

/*box-publicstatus*/
.box-publicstatus .title-box-upload,
.modal-dialog .title-box-upload {
    background-color: #f5f6f7;
    border-bottom   : 1px solid #dddfe2;
    border-radius   : 2px 2px 0 0;
    font-weight     : bold;
    padding         : 10px;
}

.modal-dialog .title-box-upload {
    font-size: 18px;
}

.box-publicstatus .wrap-top {
    padding : 15px 20px;
    position: relative;
    z-index : 2;
}

.box-publicstatus .wrap-top .avatar {
    width        : 100%;
    margin-bottom: 15px;
    position     : relative;
}

.box-publicstatus .wrap-top .avatar .image,
.box-publicstatus .wrap-top .avatar .meta {
    display       : table-cell;
    vertical-align: middle;
}

.box-publicstatus .wrap-top .avatar .image {
    width : 42px;
    height: 42px;
}

.box-publicstatus .wrap-top .avatar .image img {
    border-radius: 50%;
}

.box-publicstatus .wrap-top .avatar .meta {
    padding-left: 10px;
}

.box-publicstatus .wrap-top .avatar .meta span {
    display    : inline-block;
    margin-left: 10px;
    font-size  : 14px;
    color      : #4A4A4A;
}

.box-publicstatus .wrap-top .avatar .meta .name {
    font-size  : 14px;
    color      : #754c29;
    font-weight: 700;
}

.box-publicstatus .wrap-top .avatar .meta .time {
    font-size  : 12px;
    color      : #666666;
    line-height: 18px;
}

.box-publicstatus .wrap-top .avatar .more {
    display  : inline-block;
    position : absolute;
    right    : 0;
    top      : 50%;
    transform: translateY(-50%);
    z-index  : 1;
}

.box-publicstatus .wrap-top .avatar .more .img-active,
.box-publicstatus .wrap-top .avatar .more.active .img-deactive {
    display: none;
}

.box-publicstatus .wrap-top .avatar .more.active .img-active {
    display: inline-block;
}

.more {
    position: relative;
}

.more .sub-more {
    min-width         : 123px;
    background        : #FFFFFF;
    border            : 1px solid #DDDFE2;
    box-shadow        : 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    border-radius     : 2px;
    position          : absolute;
    right             : 0;
    top               : 150%;
    opacity           : 0;
    visibility        : hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.more.active .sub-more {
    top       : 100%;
    opacity   : 1;
    visibility: visible;
}

.more .sub-more li {
    font-size    : 14px;
    color        : #4A4A4A;
    line-height  : 22px;
    padding      : 8px 15px;
    border-bottom: 1px solid #DDDFE2;
    cursor       : pointer;
    position     : relative;
}

.more .sub-more li:last-child {
    border-bottom: none;
}

.personal-wall .more .sub-more {
    min-width: 170px;
    z-index  : 999;
}

.box-publicstatus .gallery ul {
    margin: 0 -2.5px;
}

.box-publicstatus .gallery ul::after {
    display: block;
    clear  : both;
    content: "";
}

.box-publicstatus .gallery ul li {
    float        : left;
    margin-bottom: 5px;
    width        : 50%;
    padding      : 0 2.5px;
    /*margin-left: 4px;*/
}

.box-publicstatus .gallery ul li:first-child {
    margin-left: 0;
}

.box-publicstatus .wrap-bottom .controll-first {
    padding  : 10px 20px 15px;
    width    : 100%;
    display  : table;
    font-size: 14px;
    color    : #4A4A4A;
}

.box-publicstatus .wrap-like-number {
    display: inline-block;
}

.box-publicstatus .like-number {
    display         : inline-block;
    width           : 18px;
    height          : 18px;
    background-color: #1586F9;
    line-height     : 18px;
    text-align      : center;
    border-radius   : 50%;
    margin-right    : 7px;
    position        : relative;
}

.box-publicstatus .like-number>img {
    margin-top: -2px;
}

.box-publicstatus .wrap-bottom .controll-first .right>span {
    display    : inline-block;
    margin-left: 10px;
}

.box-publicstatus .wrap-bottom .controll-last {
    padding    : 15px 0;
    font-size  : 14px;
    color      : #4A4A4A;
    font-weight: 500;
}

.box-publicstatus .wrap-bottom .controll-last>ul>li {
    width   : 33.33%;
    float   : left;
    position: relative;
}

.box-publicstatus .wrap-bottom .controll-last>ul>li img {
    margin-right: 10px;
    margin-top  : -2px;
}

.box-publicstatus .wrap-bottom .controll-last .click.active {
    color: #fdb913;
}

.box-publicstatus .wrap-bottom .controll-last .click .img-active,
.box-publicstatus .wrap-bottom .controll-last .click.active .img-no-active {
    display: none;
}

.box-publicstatus .wrap-bottom .controll-last .click.active .img-active {
    display: inline-block;

}

.box-publicstatus .wrap-bottom .controll-last>ul>li .sub {
    background        : #FFFFFF;
    border            : 1px solid #DDDFE2;
    box-shadow        : 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    border-radius     : 2px;
    position          : absolute;
    width             : 195px;
    position          : absolute;
    top               : 150%;
    right             : 0;
    visibility        : hidden;
    opacity           : 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
    z-index           : 1;
}

.box-publicstatus .wrap-bottom .controll-last>ul>li .click.active~.sub {
    visibility: visible;
    opacity   : 1;
    top       : 120%;
}

.box-publicstatus .wrap-bottom .controll-last>ul>li .sub>li {
    padding      : 10px 15px;
    border-bottom: 1px solid #DDDFE2;
    text-align   : left;
}

.box-publicstatus .wrap-bottom .controll-last>ul>li .sub a {
    display: block;
}

.box-publicstatus .wrap-bottom .controll-last>ul>li .sub a img {
    margin-right: 5px;
}

.click {
    cursor: pointer;
}

.box-publicstatus .videoyoutube {
    background: #F5F7FA;
    border    : 1px solid #E7E7E7;
}

.box-publicstatus .videoyoutube .youtubeleft {
    float       : left;
    margin-right: 18px;
}

.box-publicstatus .videoyoutube .youtuberight {
    padding    : 20px 15px;
    font-size  : 14px;
    color      : #000000;
    line-height: 22px;
}

.box-publicstatus .videoyoutube .title {
    margin-bottom: 10px;
}

.utilities-loading {
    padding      : 20px 0 15px;
    font-size    : 12px;
    color        : #666666;
    line-height  : 18px;
    margin-bottom: 20px;
}

.utilities-loading img {
    margin-right: 5px;
    margin-top  : -3px;
}

.box-image-gallery ul,
.box-image-friends ul {
    margin    : 0 -2px;
    padding   : 4px;
    min-height: 50px;
}

.box-image-gallery ul li,
.box-image-friends ul li {
    width        : 33.33%;
    float        : left;
    padding      : 0 2px;
    margin-bottom: 4px;
    position     : relative;
    text-align   : center;
}

.box-image-friends ul li .name {
    font-size  : 12px;
    color      : #fff;
    line-height: 18px;
    width      : 100%;
    display    : inline-block;
    position   : absolute;
    left       : 0;
    bottom     : 0;
    padding    : 0 5px;
}

.box-image-friends .box-title span {
    color      : #2A2A2A;
    font-weight: 400;
}

.box-introduction ul li {
    padding-left: 30px;
    position    : relative;
}

.box-introduction ul li img {
    position : absolute;
    left     : 0;
    top      : 50%;
    transform: translateY(-50%);
}

.wrap-comment {
    padding   : 15px;
    border-top: 1px solid #DDDFE2;
}

.wrap-comment .readmore {
    font-size  : 14px;
    color      : #fdb913 !important;
    line-height: 20px;
    font-weight: 500;
    text-align : center;
}

.wrap-comment .readmore a {
    color: #fdb913 !important;
}

.comment-list li {
    padding-left: 45px;
    position    : relative;
}

.comment-list li .avatar {
    display      : inline-block;
    overflow     : hidden;
    width        : 36px;
    height       : 36px;
    border-radius: 50%;
    position     : absolute;
    left         : 0;
    top          : 0;
}

.comment-list li .text {
    display      : inline-block;
    background   : #F5F7FA;
    border-radius: 30px;
    padding      : 7px 15px;
    font-size    : 14px;
}

.comment-list li .text .name {
    color      : #fdb913;
    font-weight: 700;
}

.comment-list li .meta {
    font-size  : 12px;
    color      : #4A4A4A;
    line-height: 18px;
    margin-left: 15px;
    margin-top : 5px;
}

.comment-list li .meta .like.active {
    font-weight: 700;
}

.comment-list li .meta .time {
    color: #2A2A2A;
}

.comment-list>li {
    margin-top: 20px;
}

.comment-list li ul.children {
    margin-top: 15px;
}

.comment-list li.reply {
    margin-left: 40px;
}

.comment-list li.reply:before {
    content    : '\f112';
    font-family: fontawesome;
    position   : absolute;
    left       : -25px;
    top        : 6px;
    transform  : rotate(-180deg);
    color      : #ABAFB4;
}

.comment-list li .clickReply {
    cursor: pointer;
}

.cover-wallpaper {
    position: relative;
}

.cover-wallpaper .inner-wallpaper {
    position: absolute;
    bottom  : 0;
    left    : 0;
    width   : 100%;
    padding : 0 15px 20px;
    display : table;
}

.inner-wallpaper .avatar {
    display       : table-cell;
    vertical-align: bottom;
    position      : relative;
    bottom        : -53px;
    width         : 200px;
}

.inner-wallpaper .avatar img {
    width : 170px;
    height: 170px;
}

.inner-wallpaper .name {
    display       : table-cell;
    vertical-align: bottom;
    font-size     : 30px;
    color         : #FFFFFF;
    line-height   : 40px;
    text-shadow   : 0 2px 4px rgba(0, 0, 0, 0.20);
    font-weight   : 700;
}

.inner-wallpaper .name .mini-name {
    font-size  : 15px;
    line-height: 20px;
}

.inner-wallpaper .btn {
    display       : table-cell;
    vertical-align: bottom;
    text-align    : right;
}

.inner-wallpaper .btn a {
    font-size    : 13px;
    color        : #2C2C2C;
    text-align   : center;
    line-height  : 18px;
    font-weight  : 700;
    display      : inline-block;
    background   : #FFFFFF;
    border       : 1px solid #DDDFE2;
    box-shadow   : 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    padding      : 9px 24px 7px;
    margin-left  : 5px;
}

.inner-wallpaper .btn a img {
    margin-top  : -3px;
    margin-right: 5px;
}

.inner-wallpaper .btn a span.made-friends img {
    margin-right: 0px;
    margin-left : 5px;
    transform   : rotate(-90deg);
    margin-top  : -1px;
    height      : 10px;
}

/*.inner-wallpaper .btn a span.made-friends,
	.inner-wallpaper .btn a.active span.add-friends {
		display: none;
	}

	.inner-wallpaper .btn a.active span.made-friends {
		display: block;
	}*/

.wrap-cover-wallpaper .tab-title {
    text-align: center;
}

.tabs.horizontal .wrap-cover-wallpaper .tab-title li.active:after {
    display: none;
}

.tabs.horizontal .wrap-cover-wallpaper .tab-title li {
    margin-right: 0;
    padding     : 14px 20px;
    font-weight : 700;
}

.tabs.horizontal .wrap-cover-wallpaper .tab-title li span {
    color      : #666666;
    font-weight: 300;
}

.tabs.horizontal .wrap-cover-wallpaper .tab-title li.active {
    color: #754c29;
}

.tabs.horizontal .wrap-cover-wallpaper .tab-title li:before {
    content   : '';
    width     : 1px;
    height    : 18px;
    background: #DDDFE2;
    position  : absolute;
    left      : 0;
    top       : 50%;
    transform : translateY(-50%);
}

.tabs.horizontal .wrap-cover-wallpaper .tab-title li:last-child:after {
    content   : '';
    width     : 1px;
    height    : 18px;
    background: #DDDFE2;
    position  : absolute;
    right     : 0;
    top       : 50%;
    transform : translateY(-50%);
}

.box-overview ul li {
    padding      : 15px 0;
    border-bottom: 1px solid #DDDFE2;
    position     : relative;
}

.box-overview ul li:last-child {
    border-bottom: none;
}

.box-overview ul li .image,
.box-overview ul li .content,
.box-overview ul li .follow,
.box-overview ul li .wrap-btn {
    display: inline-block;
}

.box.box-overview .box-title,
.box.box-introduce .box-title,
.box.box-study .box-title {
    border-bottom: none;
}

.box-overview .list {
    padding: 0 15px;
}

.box-overview ul li .image {
    float: left;
}

.box-overview ul li .content {
    padding-left: 10px;
}

.box-overview ul li .title,
.box-overview ul li .title a {
    font-size     : 12px;
    color         : #9B9B9B;
    line-height   : 18px;
    text-transform: uppercase;
}

.box-overview ul li .title span,
.box-overview ul li .decs span {
    color: #1586F9;
}

.box-overview ul li .image {
    position     : relative;
    width        : 42px;
    height       : 42px;
    background   : #F5F7FA;
    text-align   : center;
    overflow     : hidden;
    border-radius: 50%;
}

.box-overview ul li .image img {
    position : absolute;
    top      : 50%;
    left     : 50%;
    transform: translate(-50%, -50%);
}

.box-overview ul li {
    position: relative;
}

.box-overview ul li .wrap-btn {
    position: absolute;
    right   : 0;
    top     : 15px;
}

.box-overview ul li .wrap-btn .edit,
.box-overview ul li .wrap-btn .delete {
    display: inline-block;
    padding: 0 10px;
    cursor : pointer;
}

.box-overview ul li .wrap-btn .delete {
    border-left: 1px solid #DDDFE2;
}

.box-overview .form-study {
    padding: 20px 20px 0 20px;
}

.box-introduce .add-introduce {
    padding      : 0 15px;
    margin-bottom: 15px;
}

.box-introduce .add-introduce>span {
    cursor     : pointer;
    font-size  : 13px;
    color      : #fdb913;
    line-height: 20px;
    font-weight: 700;
}

.box-introduce .add-introduce>span>img {
    margin-right: 7px;
    margin-top  : -2px;
}

.form-study input {
    font-size    : 14px;
    color        : #2C2C2C;
    font-weight  : 500;
    margin-bottom: 10px;
}

.form-study .title {
    text-align   : right;
    padding-right: 20px;
    margin-top   : 9px;
}

.form-study .title.no-top {
    margin-top: 0px;
}

.form-study label {
    font-weight: 400;
}

.form-study .wrap-submit {
    padding: 15px 0;
}

.form-study .wrap-submit button {
    width        : auto;
    display      : inline-block;
    line-height  : 36px;
    padding      : 0 20px;
    color        : #FFFFFF;
    text-align   : center;
    font-weight  : 500;
    border-radius: 2px;
}

.form-study .wrap-submit button.cancel {
    background   : #FAFDFE;
    color        : #4A4A4A;
    border       : 1px solid #DDDFE2;
    border-radius: 2px;
}

.form-study .container-checkbox {
    margin-top   : 10px;
    margin-bottom: 15px;
}

.box-habitat .add-habitat {
    padding: 15px 0;

}

.box-habitat .add-habitat>span {
    cursor     : pointer;
    font-size  : 13px;
    color      : #fdb913;
    line-height: 20px;
    font-weight: 700;
}

.box-habitat .add-habitat>span>img {
    margin-right: 7px;
    margin-top  : -2px;
}

.box-communications .first,
.box-communications .last {
    display: inline-block;
}

.box-communications .first {
    min-width: 135px;
}

.box-communications .last {
    font-weight: 500;
}

.box-communications .add-new {
    padding: 15px 0;
}

.box-communications .add-new>span {
    cursor     : pointer;
    font-size  : 13px;
    color      : #fdb913;
    line-height: 20px;
    font-weight: 700;
}

.box-communications .add-new>span>img {
    margin-right: 7px;
    margin-top  : -2px;
}

.box-communications .add-new.add-phone,
.box-communications .add-new.add-email {
    padding-bottom: 0
}

.box-basic-information .first,
.box-basic-information .last {
    vertical-align: top;
}

.mw355 {
    max-width: 355px;
}

.box-followers .box-title .right {
    font-size  : 14px;
    color      : #2C2C2C;
    text-align : right;
    line-height: 36px;
    font-weight: 400;
    float      : right;
}

.box-followers ul.list li .content .title {
    color: #2C2C2C;
}

.tilte-add-photo {
    font-size: 14px;
    color    : #fdb913;
    cursor   : pointer;
}

.box .box-title .right {
    float: right;
}

.personal-wall .box-publicstatus .wrap-top .avatar .meta .name {
    display: block;
}

.personal-wall .box-publicstatus .wrap-top .avatar .meta .time,
.box-publicstatus .wrap-top .avatar .meta .public {
    display: inline-block;
}

.box-publicstatus .wrap-top .avatar .meta .public {
    font-weight: 500;
    font-size  : 12px;
    color      : #4A4A4A;
    cursor     : pointer;
}

.box-publicstatus .wrap-top .avatar .meta .public .first {
    width       : 12px;
    height      : 12px;
    margin-right: 3px;
}

.box-publicstatus .wrap-top .avatar .meta .public .first img {
    margin-top: -2px;
}

.box-publicstatus .wrap-top .avatar .meta .public .last {
    margin-left: 5px;
}

.box .write-comment {
    padding-left: 43px;
    position    : relative;
    margin      : 20px 0;
}

.box .write-comment .avatar {
    width   : 36px;
    height  : 36px;
    position: absolute;
    top     : 0;
    left    : 0;
}

.box .write-comment .input-write-comment {
    position: relative;
}

.box .write-comment .input-write-comment input {
    background   : #FFFFFF;
    border       : 1px solid #DDDFE2;
    border-radius: 18px;
    height       : 36px;
    font-size    : 14px;
    color        : #666666;
    margin-bottom: 0;
}

.box .write-comment .input-write-comment button {
    border-radius: 18px;
    height       : 36px;
    position     : absolute;
    top          : 0;
    right        : 0;
    width        : 60px;
    padding      : 0;
    line-height  : 36px;
}

.box-writepublicstatus .wrap-write-status,
.box-writepublicstatus .customtab-title {
    padding: 0 20px;
}

.box .write-status {
    padding-left: 43px;
    position    : relative;
    margin      : 20px 0;
}

.box .write-status .avatar {
    width   : 36px;
    height  : 36px;
    position: absolute;
    top     : 0;
    left    : 0;
}

.box .write-status .input-write-status input,
.box .input-tag-friends input,
.boxpPopupsStatus .input-tag-friends input {
    background   : transparent;
    border       : none;
    height       : 36px;
    font-size    : 14px;
    color        : #666666;
    margin-bottom: 0;
}

.box .write-status .input-write-status textarea {
    background   : transparent;
    border       : none;
    height       : 36px;
    font-size    : 14px;
    color        : #666666;
    margin-bottom: 0;
    resize       : none;
    overflow     : auto;
    padding      : 10px 15px 0px 15px;
}

.box.popupboxActive .write-status .input-write-status textarea {
    background   : transparent;
    border       : none;
    font-size    : 16px;
    color        : #2C2C2C;
    line-height  : 24px;
    margin-bottom: 0;
    resize       : none;
    overflow     : auto;
    padding      : 0px 15px;
}

.box.popupboxActive .write-status .input-write-status textarea.h180 {
    height: 180px
}

.popupboxActive {
    width     : 610px;
    position  : fixed;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
    z-index   : 1042;
    opacity   : 1;
    visibility: visible;
}

.box-writepublicstatus .wrap-btn-status .customtab-title li {
    display    : inline-block;
    font-size  : 12px;
    color      : #2C2C2C;
    line-height: 18px;
    font-weight: 500;
    padding    : 5px 15px;
    cursor     : pointer;
    opacity    : 0.5;
}

.box-writepublicstatus .wrap-btn-status .customtab-title li img {
    margin-top  : -3px;
    margin-right: 5px;
}

.box-writepublicstatus .wrap-btn-status {
    margin-top: 15px;
}

.box-writepublicstatus .wrap-btn-status .customtab-title li.active {
    background   : #F5F7FA;
    border-radius: 14.5px;
    opacity      : 1;
}

.box .tag-friends {
    padding      : 5px 20px 5px 123px;
    position     : relative;
    border-top   : 1px solid #DDDFE2;
    border-bottom: 1px solid #DDDFE2;
    display      : none;
}

.boxpPopupsStatus .tag-friends {
    padding      : 5px 20px 5px 123px;
    position     : relative;
    border-top   : 1px solid #DDDFE2;
    border-bottom: 1px solid #DDDFE2;
    margin-top   : 10px;
}

.box .tag-friends .tag-title,
.boxpPopupsStatus .tag-friends .tag-title {
    position   : absolute;
    top        : 50%;
    transform  : translateY(-50%);
    left       : 20px;
    font-size  : 14px;
    color      : #4A4A4A;
    font-weight: 500;
}

.box .tag-friends .tag-title img,
.boxpPopupsStatus .tag-friends .tag-title img {
    margin-right: 10px;
    margin-top  : -3px;
}

.box .share-status {
    padding: 15px 20px;
    display: none;
}

.boxpPopupsStatus .share-status {
    padding: 15px 0px;
}

.box.popupboxActive .tag-friends,
.box.popupboxActive .share-status {
    display: block;
}

.box .btn-public,
.boxpPopupsStatus .btn-public {
    display            : inline-block;
    background         : #FAFDFE;
    border             : 1px solid #DDDFE2;
    border-radius      : 2px;
    width              : 28%;
    float              : left;
    padding-left       : 35px;
    background-image   : url(../images/icon/introduc-den-tu.svg);
    background-repeat  : no-repeat;
    background-position: 15px;
}

.box .btn-public select,
.boxpPopupsStatus .btn-public select {
    border        : none;
    margin        : 0;
    font-weight   : 500;
    font-size     : 14px;
    color         : #4A4A4A;
    height        : 36px;
    padding-top   : 0;
    padding-bottom: 0;
}

.box .btn-public .public {
    font-weight: 500;
    font-size  : 14px;
    color      : #4A4A4A;
    cursor     : pointer;
    padding    : 6px 20px;
}

.box .btn-public .public img {
    margin-top: -2px;
}

.box .btn-public .public .first {
    width       : 14px;
    height      : 14px;
    margin-right: 5px;
}

.box .btn-public .public .last {
    margin-left: 5px;
}

.box .wrap-btn-share,
.boxpPopupsStatus .wrap-btn-share {
    width: 70%;
    float: right;
}

.box .wrap-btn-share button,
.boxpPopupsStatus .wrap-btn-share button {
    background   : #fdb913;
    border-radius: 2px;
    font-size    : 14px;
    color        : #FFFFFF;
    text-align   : center;
    font-weight  : 500;
    line-height  : 36px;
}

.posted-status-successfully,
.posted-status-failed {
    background        : #FFFFFF;
    border            : 1px solid #DDDFE2;
    box-shadow        : 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    border-radius     : 4px;
    width             : 610px;
    position          : fixed;
    top               : 50%;
    left              : 50%;
    transform         : translate(-50%, -50%);
    padding           : 60px 0;
    text-align        : center;
    z-index           : 1042;
    opacity           : 0;
    visibility        : hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.posted-status-successfully.open,
.posted-status-failed.open {
    top       : 50%;
    opacity   : 1;
    visibility: visible;
}

.posted-status-successfully .title,
.posted-status-failed .title {
    font-size    : 30px;
    color        : #2C2C2C;
    line-height  : 40px;
    margin-bottom: 10px;
}

.posted-status-successfully .decs,
.posted-status-successfully .name,
.posted-status-failed .decs,
.posted-status-failed .name {
    font-size  : 16px;
    color      : #2C2C2C;
    text-align : center;
    line-height: 24px;
}

.box .introduce-text {
    font-size  : 14px;
    color      : #2C2C2C;
    line-height: 22px;
    padding    : 15px;
}

.box .box-child .box-title {
    border-bottom: none;
}

.box-admin .avatar {
    width        : 36px;
    height       : 36px;
    overflow     : hidden;
    border-radius: 50%;
    float        : left;
    margin-right : 7px;
    text-align   : center;
    line-height  : 36px;
    font-size    : 14px;
    color        : #fdb913;
    font-weight  : 500;
}

.box-admin .content-admin {
    padding: 0 15px 15px 15px;
}

.box-admin .content-member {
    padding: 0 0 15px 15px;
}

.box .wrap-title {
    position: relative;
}

.box .wrap-title .more {
    display  : inline-block;
    position : absolute;
    right    : 15px;
    top      : 50%;
    transform: translateY(-50%);
    z-index  : 1;
}

.box .wrap-title .more .img-active,
.box .wrap-title .more.active .img-deactive {
    display: none;
}

.box .wrap-title .more.active .img-active {
    display: inline-block;
}

.box-admin .more .sub-more {
    width  : 167px;
    padding: 0;
}

.box-admin .more .sub-more li {
    margin-bottom: 0;
}

.box-admin .content-community .send-invitation {
    font-size    : 12px;
    color        : #2C2C2C;
    font-weight  : 700;
    padding      : 4px 10px;
    display      : inline-block;
    background   : #F5F7FA;
    border       : 1px solid #DDDFE2;
    border-radius: 2px;
    float        : right;
    margin-top   : 4px;
}

.box-admin .content-community .name {
    font-size  : 14px;
    color      : #4A4A4A;
    line-height: 22px;
    margin-top : 8px;
    display    : inline-block;
}

.box-admin .content-community .add-community {
    padding: 0px 15px;
}

.box-admin .content-community .add-community input {
    background-color   : #FFFFFF;
    background-image   : url(../images/icon-add.png);
    background-position: 11px center;
    background-repeat  : no-repeat;
    padding-left       : 30px;
    height             : 36px;
    border             : 1px solid #DDDFE2;
    border-radius      : 2px;
    font-size          : 12px;
    color              : #666666;
}

.box-admin .content-community .add-community input:-moz-placeholder,
.box-admin .content-community .add-community input::-moz-placeholder {
    font-size: 12px;
    color    : #666666;
}

.box-admin .content-community .add-community input:-ms-input-placeholder {
    font-size: 12px;
    color    : #666666;
}

.box-admin .content-community .add-community input::-webkit-input-placeholder {
    font-size: 12px;
    color    : #666666;
}

.wrap-btn-wallpaper .btn .left {
    float: left;
}

.wrap-btn-wallpaper .btn .right {
    float: right;
}

.wrap-btn-wallpaper .btn {
    width: 100%;
}

.wrap-btn-wallpaper .btn a {
    font-size    : 13px;
    color        : #2C2C2C;
    text-align   : center;
    line-height  : 18px;
    font-weight  : 700;
    display      : inline-block;
    background   : #F5F7FA;
    border       : 1px solid #DDDFE2;
    box-shadow   : 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    padding      : 5px 15px;
    margin-left  : 5px;
}

.wrap-btn-wallpaper .btn a img {
    margin-top  : -3px;
    margin-right: 7px;
}

.wrap-btn-wallpaper .btn span.joined img {
    margin-right: 0px;
    margin-left : 7px;
    transform   : rotate(-90deg);
    margin-top  : -1px;
    height      : 8px;
    width       : 5px;
}

.wrap-btn-wallpaper .btn .follow img {
    width : 12px;
    height: 12px;
}

.box-related-news ul li .content .title {
    font-size  : 16px;
    color      : #2C2C2C;
    line-height: 18px;
    font-weight: 500;
}

.box-related-news ul li .meta span {
    font-size  : 13px;
    color      : #666666;
    line-height: 18px;
}

.box-related-news ul li .meta span img {
    max-width   : 13px;
    max-height  : 13px;
    margin-right: 5px;
    margin-top  : -3px;
}

.box-related-news ul li .meta span {
    display     : inline-block;
    margin-right: 20px;
}

.box-related-news ul li .meta {
    margin-top: 7px;
}

.box-related-news ul li {
    padding-bottom: 10px;
    margin-bottom : 15px;
    border-bottom : 1px solid #DDDFE2;
}

.box-related-news ul li:last-child {
    padding-bottom: 0;
    border-bottom : none;
}

.content-general-management {
    background-color: #F5F7FA;
    padding         : 0 20px;
}

.content-general-management .inner-input,
.content-list-of-subgroupst .inner-input {
    padding      : 20px 0;
    border-bottom: 1px solid #DDDFE2;
}

.content-general-management .inner-input .title,
.content-list-of-subgroupst .inner-input .title {
    text-align: right;
    margin-top: 10px;
}

.content-general-management .inner-input input,
.content-list-of-subgroupst .inner-input input {
    font-weight: 500;
}

.content-general-management .inner-input textarea,
.content-list-of-subgroupst .inner-input textarea {
    height: 150px;
}

.content-general-management .warp-submit,
.content-list-of-subgroupst .warp-submit {
    text-align: center;
    padding   : 10px 0 20px 0;
}

.content-general-management .warp-submit button,
.content-list-of-subgroupst .warp-submit button {
    line-height  : 40px;
    padding      : 0 20px;
    font-weight  : 500;
    width        : auto;
    display      : inline-block;
    border-radius: 2px;
    background   : #fdb913;
}

.content-general-management .warp-submit button.cancel,
.content-list-of-subgroupst .warp-submit button.cancel {
    background-color: #fff;
    border          : 1px solid #DDDFE2;
    color           : #2C2C2C;
}

.content-list-of-subgroupst .list {
    padding         : 20px;
    background-color: #F5F7FA;
}

.box-list-of-subgroupst ul li .content {
    padding-left: 10px;
    max-width   : 300px;
}

.box-list-of-subgroupst ul li .edit-group {
    display      : inline-block;
    float        : right;
    background   : #FAFDFE;
    border       : 1px solid #DDDFE2;
    border-radius: 2px;
    padding      : 4px 20px;
    position     : absolute;
    right        : 0px;
    top          : 50%;
    transform    : translateY(-50%);
    font-weight  : 500;
    font-size    : 14px;
}

.box .box-title .add-new {
    font-weight: 400;
    font-size  : 14px;
    color      : #fdb913;
    cursor     : pointer;
}

.content-list-of-subgroupst .add-new-form {
    background-color: #F5F7FA;
    padding         : 0 20px;
}

.box-list-of-subgroupst .box-title .number-members {
    font-size  : 13px;
    color      : #666666;
    line-height: 18px;
    margin-left: 20px;
    font-weight: 400;
}

.click {
    position: relative;
}

.click>.sub {
    text-align        : left;
    min-width         : 100px;
    background        : #FFFFFF;
    border            : 1px solid #DDDFE2;
    box-shadow        : 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    border-radius     : 2px;
    position          : absolute;
    position          : absolute;
    top               : 120%;
    right             : 0;
    visibility        : hidden;
    opacity           : 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.click>.sub li {
    font-size    : 14px;
    color        : #4A4A4A;
    line-height  : 22px;
    padding      : 8px 15px;
    border-bottom: 1px solid #DDDFE2;
    cursor       : pointer;
    position     : relative;
}

.click.active>.sub {
    visibility: visible;
    opacity   : 1;
    top       : 100%;
}

.box-manage-member .box-title .choose-name {
    color      : #fdb913;
    margin-left: 10px;
}

.box-manage-member .box-title .choose-name img {
    height     : 10px;
    width      : 7px;
    transform  : rotate(-90deg);
    margin-top : -3px;
    margin-left: 5px;
}

.box-manage-member .input-search {
    padding: 15px 15px 0;
}

.box-manage-member .content-bottom {
    background-color: #F5F7FA;
}

/* Upload
-------------------------------------------------------------- */
.customUpload .dz-preview .dz-details,
.customUpload .dz-preview .dz-progress,
.customUpload .dz-preview .dz-error-message,
.customUpload .dz-preview .dz-success-mark,
.customUpload .dz-preview .dz-error-mark,
.customUpload .dz-preview .dz-error-message {
    display: none;
}

.customUpload .dz-preview .dz-remove {
    position: absolute;
    top     : 5px;
    right   : 5px;
    width   : 10px;
    height  : 10px;
}

.customUpload .dz-preview .dz-remove:before,
.customUpload .dz-preview .dz-remove:after {
    content                 : '';
    position                : absolute;
    top                     : 0;
    height                  : 2px;
    width                   : 100%;
    right                   : 0;
    top                     : 50%;
    background-color        : #fff;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin    : 50% 50%;
    transform-origin        : 50% 50%;
    -webkit-transform       : rotate3d(0, 0, 1, 45deg);
    -moz-transform          : rotate3d(0, 0, 1, 45deg);
    transform               : rotate3d(0, 0, 1, 45deg);
}

.customUpload .dz-preview .dz-remove:after {
    width            : 100%;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    -moz-transform   : rotate3d(0, 0, 1, -45deg);
    transform        : rotate3d(0, 0, 1, -45deg);
}

.customUpload .dz-preview {
    position     : relative;
    display      : inline-block;
    border-radius: 2px;
    overflow     : hidden;
    margin-right : 10px;
}

.customUpload .dz-preview:last-child {
    margin-right: 0;
}

#customUploadImage,
#customUploadVideo {
    cursor             : pointer;
    display            : inline-block;
    position           : relative;
    padding-right      : 113px;
    min-height         : 120px;
    background-image   : url(../images/icon/up-image.svg);
    background-repeat  : no-repeat;
    background-position: calc(100% - 38px) center;
    background-repeat  : no-repeat;
    border             : 1px solid #DDDFE2;
    border-radius      : 2px;
    padding-top        : 7px;
    padding-left       : 7px;
    margin-bottom      : 20px;
    /*display          : none;*/
}

.popupboxActive #customUploadImage,
.popupboxActive #customUploadVideo {
    display: inline-block;
}

/* Section heading
-------------------------------------------------------------- */
.section-heading .heading {
    font-size  : 30px;
    line-height: 36px;
    color      : #2C2C2C;
}

.section-heading .desc {
    font-size  : 15px;
    color      : #4A4A4A;
    line-height: 23px;
}

.section-heading .desc p {
    margin-bottom: 20px;
}

.section-heading .desc p:last-of-type {
    margin-bottom: 0;
}

/* Iconbox list
-------------------------------------------------------------- */
.iconbox-list li {
    padding : 20px 0px 20px 50px;
    position: relative;
}

.iconbox-list li .icon {
    position : absolute;
    left     : 0;
    top      : 50%;
    transform: translateY(-50%);
}

.iconbox-list li .text {
    font-size  : 15px;
    color      : #4A4A4A;
    line-height: 23px;
}

/* Iconbox
-------------------------------------------------------------- */
.iconbox.center {
    text-align: center;
}

.iconbox .icon {
    position     : relative;
    margin-bottom: 10px;
}

.iconbox .icon.cricle {
    width        : 30px;
    height       : 30px;
    display      : inline-block;
    border-radius: 50%;
    background   : #F5F7FA;
    line-height  : 28px;
}

.iconbox .title {
    font-weight: 700;
    font-size  : 14px;
    color      : #2C2C2C;
    line-height: 20px;
    margin-top : 10px;
}

.iconbox .decs {
    font-size  : 14px;
    color      : #4A4A4A;
    line-height: 18px;
}

/*left-inline*/
.iconbox.left-inline {
    display      : table;
    margin-bottom: 50px;
}

.iconbox.left-inline .icon {
    display       : table-cell;
    vertical-align: middle;
}

.iconbox.left-inline .title {
    font-size     : 14px;
    color         : #4A4A4A;
    margin        : 0;
    display       : table-cell;
    vertical-align: middle;
    padding       : 0 44px 0px 20px;
    font-weight   : 500;
}

/* Imagebox
-------------------------------------------------------------- */
.imagebox .image {
    margin-bottom: 10px;
}

.imagebox .title {
    line-height: 20px;
}

.imagebox .title a {
    color: #2C2C2C;
}

.imagebox .title a:hover {
    color: #fdb913;
}

.imagebox .sub-title {
    font-size  : 12px;
    color      : #666666;
    line-height: 18px;
}

.imagebox.s2,
.imagebox.s3 {
    background   : #FFFFFF;
    border       : 1px solid #DDDFE2;
    box-shadow   : 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow     : hidden;
}

.imagebox .left {
    float: left;
}

.imagebox .right {
    float: right;
}

.imagebox.s2 .image,
.imagebox.s3 .image {
    margin-bottom: 0px;
    position     : relative;
}

.imagebox.s2 .content,
.imagebox.s3 .content {
    padding: 10px 15px;
}

.imagebox.s2 .title,
.imagebox.s3 .title {
    margin-bottom: 5px;
    font-size    : 16px;
    color        : #2C2C2C;
    line-height  : 24px;
    font-weight  : 500;
}

.imagebox.s3 .title {
    margin-bottom: 10px;
}

.imagebox .new-topics,
.imagebox .members,
.imagebox .followers,
.imagebox .like,
.imagebox .comment {
    display    : inline-block;
    font-size  : 13px;
    line-height: 18px;
}

.imagebox .like img,
.imagebox .comment img {
    max-width   : 13px;
    max-height  : 13px;
    margin-right: 5px;
    margin-top  : -3px;
}

.imagebox .comment {
    margin-left: 20px;
}

.imagebox .new-topics {
    color: #666666;
}

.imagebox .members img,
.imagebox .followers img {
    margin-right: 5px;
    margin-top  : -3px;
}

.imagebox .followers {
    margin-left: 10px;
}

.imagebox .image .wrap-btn {
    display : inline-block;
    position: absolute;
    right   : 15px;
    bottom  : 15px;
}

.imagebox .image .wrap-btn a {
    display      : inline-block;
    padding      : 5px 10px;
    margin-left  : 7px;
    font-size    : 12px;
    color        : #2C2C2C;
    line-height  : 16px;
    font-weight  : 700;
    background   : #F5F7FA;
    border       : 1px solid #DDDFE2;
    border-radius: 2px;
}

.imagebox .image .wrap-btn a img {
    width       : 9px;
    height      : 9px;
    margin-right: 5px;
    margin-top  : -2px;
}

/* Carousel box
-------------------------------------------------------------- */
.carousel-box .owl-nav .owl-prev {
    left              : -25px;
    position          : absolute;
    font-size         : 20px;
    top               : 50%;
    margin-top        : -16px;
    width             : 36px;
    height            : 36px;
    line-height       : 26px;
    color             : #4A4A4A;
    background        : #FFFFFF;
    border            : 1px solid #D6DDE6;
    box-shadow        : 0 2px 4px 0 rgba(111, 111, 111, 0.15);
    border-radius     : 50%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.carousel-box .owl-nav .owl-next {
    right             : -25px;
    position          : absolute;
    font-size         : 20px;
    top               : 50%;
    margin-top        : -16px;
    display           : inline-block;
    width             : 36px;
    height            : 36px;
    line-height       : 26px;
    color             : #4A4A4A;
    background        : #FFFFFF;
    border            : 1px solid #D6DDE6;
    box-shadow        : 0 2px 4px 0 rgba(111, 111, 111, 0.15);
    border-radius     : 50%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.carousel-box .owl-nav .owl-prev:hover,
.carousel-box .owl-nav .owl-next:hover {
    background  : #fdbe25;
    border-color: #fdbe25;
}

/* Progress
-------------------------------------------------------------- */
.progress-item,
.custom-progress-item {
    position: relative;
}

.progress-item .name,
.custom-progress-item .name {
    width      : 15%;
    font-size  : 15px;
    color      : #2C2C2C;
    text-align : left;
    line-height: 25px;
    font-weight: 700;
    float      : left;
}

.progress-item .progress-bar,
.custom-progress-item .custom-progress-bar {
    background-color: #E2E2E2;
    height          : 5px;
    width           : 100%;
    overflow        : hidden;
    width           : 70%;
    float           : left;
    margin-top      : 10px;
}

.custom-progress-item .custom-progress-bar {
    height       : 10px;
    border-radius: 100px;
}

.custom-progress-item .custom-progress-bar {
    width: 100%;
}

.progress-item .progress-bar .progress-animate {
    background-color: #FFB338;
    height          : 5px;
    width           : 0;
}

.progress-item .perc.show,
.custom-progress-item .custom-perc.show {
    opacity    : 1;
    overflow   : visible !important;
    width      : 10%;
    font-size  : 15px;
    color      : #4A4A4A;
    text-align : right;
    line-height: 25px;
    float      : left;
    text-align : right;
}

.custom-progress-item .custom-progress-bar .custom-progress-animate {
    height          : 10px;
    width           : 0;
    background-image: linear-gradient(-139deg, #fdb913 0%, #fdb913 100%);
    border-radius   : 100px;
}

/* popup
-------------------------------------------------------------- */
.successfully-bid,
.successfully-bid.fail {
    width             : 262px;
    max-width         : 100%;
    background        : #48BD65;
    border-radius     : 3px;
    position          : absolute;
    top               : 10%;
    left              : 50%;
    transform         : translate(-50%, -50%);
    z-index           : 1042;
    opacity           : 0;
    visibility        : hidden;
    border            : 2px solid #0E982F;
    box-shadow        : 0 4px 12px 0 rgba(0, 0, 0, 0.50);
    border-radius     : 3px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.successfully-bid.fail {
    width     : 282px;
    background: #BD5949;
    border    : 2px solid #8E1E0C;
}

.successfully-bid.open {
    top       : 19%;
    opacity   : 1;
    visibility: visible;
}

.successfully-bid.fail.open {
    top: 19%;
}

.successfully-bid .successfully-bid-form {
    padding: 5px 20px;
}

.successfully-bid .successfully-bid-form h6 {
    font-size  : 16px;
    color      : #FFFFFF;
    display    : inline-block;
    margin     : 0px;
    font-weight: 500;
}

.successfully-bid .successfully-bid-form .delete-successfully-bid {
    float : right;
    cursor: pointer;
}

/* Pagination
-------------------------------------------------------------- */
/* Pagination */
.pagination li {
    background   : #F7FBFE;
    border       : 1px solid #DDE6EC;
    border-radius: 3px;
    display      : inline-block;
    min-width    : 40px;
    min-height   : 36px;
    line-height  : 34px;
    text-align   : center;
    font-size    : 15px;
    line-height  : 26px;
    font-weight  : 500;
    margin-right : 5px;
}

.pagination li:last-child {
    margin-right: 0;
}

.pagination li a {
    display: block;
    padding: 5px 10px;
    color  : #4A4A4A;
}

.pagination li a.active,
.pagination li a:hover {
    color     : #fff;
    background: #fdb913;
}

.filter-pagination .input-form,
.filter-pagination .button-submit {
    display: inline-block;
}

.filter-pagination input {
    border-radius: 3px;
    margin-bottom: 0;
    height       : 36px;
    line-height  : 36px;
    max-width    : 76px;
    padding      : 5px 10px;
}

.filter-pagination button {
    width        : 40px;
    padding      : 0;
    height       : 36px;
    line-height  : 36px;
    text-align   : center;
    border-radius: 3px;
    display      : inline-block;
    font-size    : 15px;
    color        : #FFFFFF;
    font-weight  : 500;
}

.filter-pagination {
    text-align: right;
}

/* page login
-------------------------------------------------------------- */
.page-login {
    padding: 6% 0 11%;
}

.box-login h1 {
    font-size    : 24px;
    color        : #2C2C2C;
    line-height  : 34px;
    font-weight  : 500;
    margin-bottom: 20px;
}

.box-login .wrap-inner {
    padding: 10% 22%;
}

.box-login .wrap-inner p {
    font-size  : 14px;
    color      : #4A4A4A;
    line-height: 20px;
}

.box-login .wrap-inner p.or {
    margin  : 20px;
    position: relative;
}

.box-login .wrap-inner p.or span {
    display   : inline-block;
    background: #fff;
    position  : relative;
    z-index   : 1;
    padding   : 0 5px;
}

.box-login .wrap-inner p.or:before {
    content         : '';
    width           : 100%;
    height          : 1px;
    background-image: linear-gradient(to right, #fff, #DDDFE2, #DDDFE2, #fff);
    position        : absolute;
    top             : 50%;
    left            : 0;
}

.box-login .forgot-pw {
    float      : right;
    font-size  : 14px;
    color      : #754c29;
    line-height: 20px;
}

.box-login label {
    font-size  : 14px;
    color      : #4A4A4A;
    line-height: 20px;
    font-weight: 400;
}

.box-login .button-submit .submit {
    text-transform  : uppercase;
    font-size       : 14px;
    color           : #FFFFFF;
    text-align      : center;
    border          : 1px solid #fdb913;
    background-color: #fdb913;
    border-radius   : 2px;
    font-weight     : 700;
    height          : 40px;
}

.box-login .login-facebook {
    background    : #3B5998;
    border        : 1px solid #2F4A83;
    border-radius : 2px;
    display       : inline-block;
    width         : 100%;
    color         : #FFFFFF;
    text-align    : center;
    font-weight   : 700;
    text-transform: uppercase;
    height        : 40px;
    line-height   : 40px;
}

.box-login .login-facebook img {
    margin-right: 10px;
    margin-top  : -4px;
}

.question-register {
    padding   : 10px 0 8px;
    background: #F8FAFC;
    font-size : 14px;
    color     : #4A4A4A;
    border-top: 1px solid #DDDFE2;
}

.question-register a {
    font-size  : 14px;
    color      : #754c29;
    font-weight: 700;
}

/* page resgister
-------------------------------------------------------------- */
.box-register [type="date"] {
    background: #fff url(../images/calendar.png) 97% 50% no-repeat;
    cursor    : pointer;
}

.box-register [type="date"]::-webkit-inner-spin-button {
    display: none;
}

.box-register [type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

.box-register .bday {
    background: #fff url(../images/calendar.png) 97% 50% no-repeat;
    cursor    : pointer;
}

.box-register .input-form.sex {
    margin : 20px 0;
    display: flex;
}

.box-register .input-form.sex label {
    margin-bottom: 0;
    line-height  : 23px;
}

.box-register .input-form.sex label.title-sex {
    margin-right: 10px;
}

.box-register .input-form.sex .wrap-radio label {
    font-weight: 600;
}

.page-register {
    padding: 40px 0;
}

.box-register .wrap-inner {
    padding: 7% 22% 6%;
}

/* page result search
-------------------------------------------------------------- */
.box-search-news .list,
.box-search-member .list,
.box-search-community .list {
    padding: 0 15px;
}

.box-search-news ul li {
    padding      : 15px 0;
    border-bottom: 1px solid #DDDFE2;
    display      : block;
}

.box-search-news ul li:last-child {
    border-bottom: none;
}

.box-search-news ul li .image {
    max-width : 120px;
    max-height: 80px;
    display   : inline-block;
}

.box-search-news ul li .content {
    padding-left: 10px;
    display     : inline-block;
}

.box-search-news ul li .content .title {
    margin-top: 5px;
}

.box-search-news ul li .content .title span {
    color: #1586F9;
}

.box-search-news ul li .content .decs {
    font-size  : 13px;
    color      : #666666;
    line-height: 18px;
    margin-top : 5px;
}

.box-search-news ul li .content .decs span {
    display     : inline-block;
    margin-right: 20px;
}

.box-search-news ul li .content .decs span img {
    width       : 14px;
    margin-top  : -2px;
    margin-right: 5px;
}

.box-search-news ul li .follow {
    float  : right;
    display: inline-block;
}

.box-search-news ul li .btn-follow {
    display      : inline-block;
    font-size    : 12px;
    color        : #2C2C2C;
    background   : #F5F7FA;
    border       : 1px solid #DDDFE2;
    border-radius: 2px;
    padding      : 5px 15px;
    font-weight  : 700;
    margin-top   : 5px;
    margin-left  : 5px;
}

.box-search-news ul li .btn-follow img {
    width       : 11px;
    margin-right: 5px;
    margin-top  : -2px;
}

.box-search-member ul li {
    padding      : 15px 0;
    border-bottom: 1px solid #DDDFE2;
}

.box-search-member ul li:last-child {
    border-bottom: none;
}

.box-search-member ul li .image,
.box-search-member ul li .content,
.box-search-member ul li .follow {
    display: inline-block;
}

.box-search-member ul li .image.radius img {
    width          : 42px;
    height         : 42px;
    border-radius  : 50%;
    object-fit     : cover;
    object-position: center;
}

.box-search-member ul li .image {
    float: left;
}

.box-search-member ul li .content {
    padding-left: 10px;
}

.box-search-member ul li .follow {
    float: right;
}

.box-search-member ul li .btn-follow {
    display      : inline-block;
    font-size    : 12px;
    color        : #2C2C2C;
    background   : #F5F7FA;
    border       : 1px solid #DDDFE2;
    border-radius: 2px;
    padding      : 5px 15px;
    font-weight  : 700;
    margin-top   : 5px;
    margin-left  : 5px;
}

.box-search-member ul li .btn-follow img {
    width       : 11px;
    margin-right: 5px;
    margin-top  : -2px;
}

.box-search-member ul li .btn-agree {
    background : #fdb913;
    color      : #FFFFFF;
    margin-left: 10px;
}

.box-search-member ul li .content .title,
.box-search-member ul li .content .decs {
    font-size  : 14px;
    color      : #666666;
    line-height: 22px;
    ;
}

.box-search-member ul li .content .title span {
    color: #1586F9;
}


/**/
.box-search-community ul li {
    padding      : 15px 0;
    border-bottom: 1px solid #DDDFE2;
}

.box-search-community ul li:last-child {
    border-bottom: none;
}

.box-search-community ul li .image,
.box-search-community ul li .content,
.box-search-community ul li .follow {
    display: inline-block;
}

.box-search-community ul li .image.radius img {
    max-width    : 42px;
    max-height   : 42px;
    border-radius: 50%;
}

.box-search-community ul li .image {
    float: left;
}

.box-search-community ul li .content {
    padding-left: 10px;
    margin-top  : 15px;
}

.box-search-community ul li .follow {
    float: right;
}

.box-search-community ul li .btn-follow {
    display      : inline-block;
    font-size    : 12px;
    color        : #2C2C2C;
    background   : #F5F7FA;
    border       : 1px solid #DDDFE2;
    border-radius: 2px;
    padding      : 5px 15px;
    font-weight  : 700;
    margin-top   : 25px;
    margin-left  : 5px;
}

.box-search-community ul li .btn-follow img {
    width       : 11px;
    margin-right: 5px;
    margin-top  : -2px;
}

.box-search-community ul li .content .title,
.box-search-community ul li .content .decs {
    font-size  : 14px;
    color      : #666666;
    line-height: 22px;
    ;
}

.box-search-community ul li .content .title {
    margin-bottom: 5px;
}

.box-search-community ul li .content .title span {
    color: #1586F9;
}

.page-result-search {
    padding: 30px 0 60px;
}

.box-detail-news .content p,
.box-detail-news .content h2,
.box-detail-news .content h3,
.box-detail-news .content h4,
.box-detail-news .content h5,
.box-detail-news .content h6 {
    margin-bottom: 20px;
}

.box-detail-news .content {
    font-size  : 15px;
    color      : #2C2C2C;
    line-height: 23px;
}

.box-detail-news .feature-news {
    margin-bottom: 15px;
}

.box-detail-news .wrap-top .avatar .image,
.box-detail-news .wrap-top .avatar .meta {
    display: inline-block;
}

.box-detail-news .wrap-top .avatar .meta .name,
.box-detail-news .wrap-top .avatar .meta .time {
    display: inline-block;
}

.box-detail-news .wrap-top .avatar .meta .time {
    margin-left: 7px;
}

.box-detail-news .wrap-top .avatar .right {
    float     : right;
    margin-top: 10px;
}

.box-detail-news .wrap-top .avatar .right span {
    margin-left: 20px;
}

.box-detail-news .wrap-top {
    padding: 15px;
}

.box-detail-news .title-new {
    line-height  : 30px;
    margin-bottom: 15px;
}

.box-account-management ul li .wrap-form-edit-account {
    background: #F5F7FA;
    margin    : 0 -15px;
}

.box-account-management ul li .wrap-form-edit-account .title {
    text-align    : right;
    margin-top    : 10px;
    font-size     : 14px;
    color         : #4A4A4A;
    text-transform: unset;
}

.box-account-management ul li {
    padding: 0;
}

.box-account-management ul li .inner-li {
    margin: 15px 0;
}

.box-account-management ul li .wrap-btn {
    position: absolute;
    right   : 0;
    top     : auto;
}

.wrap-form-edit-account input {
    border-radius: 2px;
    font-size    : 14px;
    color        : #2C2C2C;
    font-weight  : 500;
    margin-top   : 10px;
}

.box-account-management .warp-submit {
    text-align   : center;
    padding      : 0 0 20px 0;
    /* border-top: 1px solid #DDDFE2; */
    /* margin-top: 10px; */
}

.box-account-management .warp-submit button {
    line-height  : 40px;
    padding      : 0 20px;
    font-weight  : 500;
    width        : auto;
    display      : inline-block;
    border-radius: 2px;
    background   : #fdb913;
}

.box-account-management .warp-submit button.cancel {
    background-color: #fff;
    border          : 1px solid #DDDFE2;
    color           : #2C2C2C;
}

.box-account-management .wrap-form-edit-account {
    display: none;
}

.box-account-management .form-edit-account {
    padding-top: 20px;
}

.box-account-management ul li .wrap-btn .delete {
    border: none;
}

.mobi-tab-title {
    display: none;
}

.mobi-show {
    display: none;
}

.list-news {
    padding: 15px 15px 0px 15px;
}

.list-news a {
    font-size   : 14px;
    color       : #666666;
    display     : inline-block;
    position    : relative;
    padding-left: 15px;
    font-weight : 500;
}

.list-news a:before {
    content    : '\f053';
    font-family: fontawesome;
    position   : absolute;
    top        : 50%;
    transform  : translateY(-50%);
    left       : 0;
    font-size  : 12px;
}


/* border
-------------------------------------------------------------- */
.box-account-management ul.check-list-info li {
    line-height: 30px;
    margin     : 0 20px;
    padding    : 17px 0px;
}

.box-account-management ul.check-list-info li {
    line-height: 30px;
}

.box-account-management ul.check-list-info li label {
    margin-bottom: 0;
    display      : block;
}

.check-list-info li .left {
    float: left;
}

.check-list-info li .right {
    float: right;
}

.switch {
    position: relative;
    display : inline-block;
    width   : 58px;
    height  : 30px;
}

.switch input {
    opacity: 0;
    width  : 0;
    height : 0;
}

.slider {
    position          : absolute;
    cursor            : pointer;
    top               : 0;
    left              : 0;
    right             : 0;
    bottom            : 0;
    background-color  : #D8D8D8;
    -webkit-transition: .4s;
    transition        : .4s;
    border-radius     : 35px;
    border            : none;
    outline           : none;
}

.slider:before {
    position          : absolute;
    content           : "";
    height            : 24px;
    width             : 24px;
    left              : 3px;
    bottom            : 3px;
    background-color  : white;
    -webkit-transition: .4s;
    transition        : .4s;
    border-radius     : 35px;
}

input:checked+.slider {
    background-color: #3bbd53;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(27px);
    -ms-transform    : translateX(27px);
    transform        : translateX(27px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* border
-------------------------------------------------------------- */
.border1 {
    border: 1px solid #DDDFE2;
}

.border1-top-none {
    border-top: 1px solid transparent;
}

.border1-right-none {
    border-right: 1px solid transparent;
}

.border1-bottom-none {
    border-bottom: 1px solid transparent;
}

.border1-left-none {
    border-left: 1px solid transparent;
}

.bordertop1 {
    border-top: 1px solid #DDDFE2;
}

.borderbottom1 {
    border-bottom: 1px solid #DDDFE2;
}

.borderleft1 {
    border-left: 1px solid #DDDFE2;
}

.borderright1 {
    border-right: 1px solid #DDDFE2;
}

.bordertop0 {
    border-top: none;
}

/* margin and padding
-------------------------------------------------------------- */
.marginbottom60 {
    margin-bottom: 60px;
}

.marginbottom50 {
    margin-bottom: 50px;
}

.marginbottom40 {
    margin-bottom: 40px;
}

.marginbottom35 {
    margin-bottom: 35px;
}

.marginbottom30 {
    margin-bottom: 30px;
}

.marginbottom25 {
    margin-bottom: 25px;
}

.marginbottom20 {
    margin-bottom: 20px;
}

.marginbottom15 {
    margin-bottom: 15px;
}

.marginbottom10 {
    margin-bottom: 10px;
}

.marginbottom5 {
    margin-bottom: 5px;
}

.margintop60 {
    margin-top: 60px;
}

.margintop50 {
    margin-top: 50px;
}

.margintop40 {
    margin-top: 40px;
}

.margintop35 {
    margin-top: 35px;
}

.margintop30 {
    margin-top: 30px;
}

.margintop25 {
    margin-top: 25px;
}

.margintop20 {
    margin-top: 20px;
}

.margintop15 {
    margin-top: 15px;
}

.margintop10 {
    margin-top: 10px;
}

.margintop5 {
    margin-top: 5px;
}

.paddingtop60 {
    padding-top: 60px;
}

.paddingtop50 {
    padding-top: 50px;
}

.paddingtop40 {
    padding-top: 40px;
}

.paddingtop35 {
    padding-top: 35px;
}

.paddingtop30 {
    padding-top: 30px;
}

.paddingtop25 {
    padding-top: 25px;
}

.paddingtop20 {
    padding-top: 20px;
}

.paddingtop15 {
    padding-top: 15px;
}

.paddingtop10 {
    padding-top: 10px;
}

.paddingtop5 {
    padding-top: 5px;
}

.paddingbottom60 {
    padding-bottom: 60px;
}

.paddingbottom50 {
    padding-bottom: 50px;
}

.paddingbottom40 {
    padding-bottom: 40px;
}

.paddingbottom35 {
    padding-bottom: 35px;
}

.paddingbottom30 {
    padding-bottom: 30px;
}

.paddingbottom25 {
    padding-bottom: 25px;
}

.paddingbottom20 {
    padding-bottom: 20px;
}

.paddingbottom15 {
    padding-bottom: 15px;
}

.paddingbottom10 {
    padding-bottom: 10px;
}

.paddingbottom5 {
    padding-bottom: 5px;
}

.padding30 {
    padding: 30px;
}

.padding25 {
    padding: 25px;
}

.padding20 {
    padding: 20px;
}

.padding15 {
    padding: 15px;
}

.padding10 {
    padding: 10px;
}

.pdr10 {
    padding-right: 10px;
}

.pdl10 {
    padding-left: 10px;
}

.mgr-10 {
    margin-right: -10px
}

.mgl-10 {
    margin-left: -10px
}

/* divider
-------------------------------------------------------------- */
.divider60 {
    width : 100%;
    height: 60px;
}

.divider50 {
    width : 100%;
    height: 50px;
}

.divider40 {
    width : 100%;
    height: 40px;
}

.divider35 {
    width : 100%;
    height: 35px;
}

.divider30 {
    width : 100%;
    height: 30px;
}

.divider25 {
    width : 100%;
    height: 25px;
}

.divider20 {
    width : 100%;
    height: 20px;
}

.divider15 {
    width : 100%;
    height: 15px;
}

.divider10 {
    width : 100%;
    height: 10px;
}


.wrap-media-list {
    overflow: auto;
}

.wrap-media-list #media-list {
    width      : 100%;
    max-width  : 100%;
    max-height : 106px;
    white-space: nowrap;
    overflow-x : scroll;
    overflow-y : auto;
}

.wrap-media-list #media-list::-webkit-scrollbar {
    width : 5px;
    height: 0;
}

.wrap-media-list #media-list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.wrap-media-list #media-list::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline         : 1px solid slategrey;
}

.boxpPopupsStatus .modal-body {
    background: #fff;
}

.boxpPopupsStatus .modal-content {
    background   : #FFFFFF;
    border       : 1px solid #DDDFE2;
    box-shadow   : 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

/*.boxpPopupsStatus .close {
		pointer-events: auto;
	}*/

.mfp-fade-image .mfp-container {
    width           : auto;
    height          : auto;
    max-width       : 100%;
    display         : inline-block;
    top             : 50%;
    left            : 50%;
    transform       : translate(-50%, -50%);
    min-width       : 900px;
    background-color: #000;
    min-height      : 506px;
}

.mfp-fade-image .mfp-container .mfp-content {
    position : absolute;
    top      : 50%;
    left     : 50%;
    transform: translate(-50%, -50%);
}

.mfp-fade-image .mfp-counter {
    right             : auto;
    left              : 50%;
    transform         : translateX(-50%);
    color             : #fff;
    font-size         : 14px;
    min-width         : 900px;
    padding-left      : 30px;
    padding-right     : 30px;
    opacity           : 0;
    visibility        : hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.mfp-fade-image .mfp-counter a {
    color: #fff;
}

.mfp-fade-image .mfp-bottom-bar {
    margin-top: 0;
}

.mfp-fade-image .popup-btn {
    width: 100%;
}

.mfp-fade-image .popup-btn .popup-btn-left {
    float: left;
}

.mfp-fade-image .popup-btn .popup-btn-left a {
    display     : inline-block;
    margin-right: 20px;
}

.mfp-fade-image .popup-btn .popup-btn-right {
    float: right;
}

.mfp-fade-image .popup-btn .popup-btn-right a {
    display    : inline-block;
    margin-left: 20px;
}

.mfp-fade-image .mfp-container:hover .mfp-counter {
    opacity   : 1;
    visibility: visible;
}

.mfp-fade-image .mfp-arrow {
    opacity           : 0;
    visibility        : hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.mfp-fade-image .mfp-container:hover .mfp-arrow {
    opacity   : 1;
    visibility: visible;
}

.menu-sidebar .menu {
    background   : #FFFFFF;
    border       : 1px solid #DDDFE2;
    box-shadow   : 0 2px 8px 0 rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

.menu-sidebar .menu>li {
    position: relative;
}

.menu-sidebar .menu>li>a {
    width     : 100%;
    display   : inline-block;
    padding   : 10px 20px;
    position  : relative;
    border-top: 1px solid #DDDFE2;
}

.menu-sidebar .menu>li ul {
    padding    : 15px 20px 15px 0px;
    margin-left: 40px;
}

.menu-sidebar .menu>li li a {
    width   : 100%;
    display : inline-block;
    padding : 5px 0px;
    position: relative;
    cursor  : pointer;
}

.menu-sidebar .menu>li li {
    list-style: circle;
}

.menu-sidebar .menu>li:first-child>a {
    border-top: none;
}

.menu-sidebar .menu>li.active>a {
    font-size  : 14px;
    color      : #2C2C2C;
    font-weight: 700;
}

.menu-sidebar .menu>li.active>a:after,
.menu-sidebar .menu>li:hover>a:after,
.menu-sidebar .menu>li.activeClick>a:after {
    content      : '';
    width        : 3px;
    height       : 100%;
    position     : absolute;
    left         : 0;
    top          : 0;
    background   : #fdb913;
    border-radius: 1.5px;
}

.menu-sidebar .menu>li .btnSlideToggle {
    position          : absolute;
    top               : 0;
    right             : 0;
    width             : 43px;
    height            : 43px;
    line-height       : 43px;
    text-align        : center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
    transform         : rotate(-90deg);
    cursor            : pointer;
}

.menu-sidebar .menu>li.active .btnSlideToggle {
    transform: rotate(-270deg);
}

.menu-sidebar .menu-mobi {
    display: none;
}

.menu-sidebar .mobi-menu-title {
    display: none;
}

.boxTuVan {
    padding: 10px;
}

.boxTuVan input,
.boxTuVan textarea {
    width        : 100%;
    border       : 1px solid #754c29;
    border-radius: 6px;
    padding      : 9px 10px;
    font-size    : 15px;
    margin-bottom: 10px;
}

.boxTuVan p,
.boxTuVan button {
    margin-top: 10px;
}

.boxTuVan select {
    border   : 1px solid #754c29;
    font-size: 15px;
}

#header .container {
    width: 90%;
}

.sub-menu-2 {
    display   : none;
    position  : absolute;
    background: #fff;
    min-width : 200px;
    margin-top: 1px;
}

.sub-menu-2 li {}


.sub-menu-2 li a {
    padding       : 5px 10px;
    display       : block;
    border-bottom : 1px solid #D9DDE5;
    color         : #000;
    font-size     : 14px;
    text-transform: capitalize;
}

.sub-menu-2 li a:hover {
    background: #754c29;
    color     : #fff;
}

.parent-sub-menu:hover .sub-menu-2 {
    display: block !important;
}

@media (max-width: 992px) {
    .parent-sub-menu:hover .sub-menu-2 {
        left: calc(50% - 100px);
    }
}