@charset "UTF-8";

@font-face {
    font-family: 'SFProDisplay';
    src: url("../fonts/SFProDisplay/SFProDisplay-Regular.ttf") format("truetype");
    font-weight: 400
}

@font-face {
    font-family: 'SFProDisplay';
    src: url("../fonts/SFProDisplay/SFProDisplay-Medium.ttf") format("truetype");
    font-weight: 500
}

@font-face {
    font-family: 'SFProDisplay';
    src: url("../fonts/SFProDisplay/SFProDisplay-Semibold.ttf") format("truetype");
    font-weight: 600
}

@font-face {
    font-family: 'SFProDisplay';
    src: url("../fonts/SFProDisplay/SFProDisplay-Bold.ttf") format("truetype");
    font-weight: 700
}

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

b,
strong,
th {
    font-weight: bold
}

em,
i {
    font-style: italic
}

sub,
sup {
    font-size: 75%
}

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

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

del {
    text-decoration: line-through
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

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

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 20px 0;
    padding: 0
}

input,
select {
    vertical-align: middle
}

a,
a:active,
a:focus,
a:hover {
    text-decoration: none;
    color: inherit;
    outline: none
}

li,
ol,
ul {
    padding: 0;
    list-style: none;
    margin: 0
}

label {
    font-weight: normal
}

input[type=email],
input[type=password],
input[type=text] {
    padding-left: 1.7rem;
    padding-right: 1.7rem
}

select {
    padding-left: 8px;
    cursor: pointer
}

input[type=number] {
    padding-left: 5px
}

textarea {
    padding: 8px 12px 5px 12px
}

a,
button,
button:active,
button:focus,
button:hover,
input,
select,
textarea {
    outline: none
}

button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer
}

* {
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-top: constant(safe-area-inset-top)
}

img {
    max-width: 100%;
    vertical-align: middle;
    -o-object-fit: cover;
    object-fit: cover
}

html {
    font-size: 62.5%
}

@media (max-width:991px) {
    html {
        font-size: 59%
    }
}

@media (max-width:575px) {
    html {
        font-size: 54.6875%
    }
}

.col-f20,
.col-lg-f20,
.col-md-f20,
.col-sm-f20,
.col-xl-f20 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 0.4rem;
    padding-left: 0.4rem
}

.col-f20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%
}

@media (min-width:576px) {
    .col-sm-f20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }
}

@media (min-width:768px) {
    .col-md-f20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }
}

@media (min-width:992px) {
    .col-lg-f20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }
}

@media (min-width:1200px) {
    .col-xl-f20 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%
    }
}

.pad-0 {
    padding-left: 0px;
    padding-right: 0px
}

.pad-5 {
    padding-left: 5px;
    padding-right: 5px
}

.pad-8 {
    padding-left: 8px;
    padding-right: 8px
}

.pad-10 {
    padding-left: 10px;
    padding-right: 10px
}

.margin-auto {
    margin-left: auto;
    margin-right: auto
}

.col-mar-0 {
    margin-left: 0px;
    margin-right: 0px
}

.col-mar-0 .col,
.col-mar-0 [class*=col-] {
    padding-left: 0px;
    padding-right: 0px
}

.col-mar-5 {
    margin-left: -5px;
    margin-right: -5px
}

.col-mar-5 .col,
.col-mar-5 [class*=col-] {
    padding-left: 5px;
    padding-right: 5px
}

.col-mar-8 {
    margin-left: -8px;
    margin-right: -8px
}

.col-mar-8 .col,
.col-mar-8 [class*=col-] {
    padding-left: 8px;
    padding-right: 8px
}

.col-mar-10 {
    margin-left: -1rem;
    margin-right: -1rem
}

.col-mar-10 .col,
.col-mar-10 [class*=col-] {
    padding-left: 1rem;
    padding-right: 1rem
}

.fx-mid {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ifx-top {
    -ms-flex-item-align: start;
    -ms-grid-row-align: start;
    align-self: start
}

.ifx-bot {
    -ms-flex-item-align: end;
    -ms-grid-row-align: end;
    align-self: end
}

.ifx-mid {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center
}

.relative {
    position: relative
}

.static {
    position: static
}

.absolute {
    position: absolute
}

.clearfix:after,
.clearfix:before {
    content: '';
    display: block;
    clear: both
}

.bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.ic {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.smooth {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden
}

.container.container-head {
    max-width: 1410px
}

@media (min-width:1200px) {
    .container {
        max-width: 1200px
    }
}

@media (max-width:991px) {
    .md-pad-7 {
        margin: 0 -7px
    }

    .md-pad-7>[class^=col-] {
        padding: 0 7px
    }

    .md-pad-5 {
        margin: 0 -5px
    }

    .md-pad-5>[class^=col-] {
        padding: 0 5px
    }
}

@media (max-width:767px) {
    .sm-pad-7 {
        margin: 0 -7px
    }

    .sm-pad-7>[class^=col-] {
        padding: 0 7px
    }

    .sm-pad-5 {
        margin: 0 -5px
    }

    .sm-pad-5>[class^=col-] {
        padding: 0 5px
    }

    .tb-responsive {
        display: block
    }

    .tb-responsive tbody,
    .tb-responsive td,
    .tb-responsive tfoot,
    .tb-responsive th,
    .tb-responsive tr {
        display: block
    }

    .tb-responsive thead {
        display: none
    }

    .tb-responsive tr:nth-child(2n) {
        background: #f5f5f5
    }

    .tb-responsive td {
        position: relative;
        padding: 10px 10px 10px 50%
    }

    .tb-responsive td:before {
        content: attr(data-title);
        position: absolute;
        left: 0;
        width: 50%;
        padding-right: 15px
    }
}

@media (max-width:575px) {
    .xs-pad-7 {
        margin: 0 -7px
    }

    .xs-pad-7>[class^=col-] {
        padding: 0 7px
    }

    .xs-pad-5 {
        margin: 0 -5px
    }

    .xs-pad-5>[class^=col-] {
        padding: 0 5px
    }
}

.slick-list {
    margin: 0 -15px
}

.slick-list .slick-slide {
    margin: 0 15px
}

.slick-arrow {
    cursor: pointer;
    z-index: 1;
    text-align: center;
    position: absolute
}

.slick-dots {
    text-align: center
}

.slick-dots button {
    display: none
}

.slick-dots li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    width: 12px;
    height: 12px;
    border: solid 2px #666;
    border-radius: 50%;
    cursor: pointer
}

.slick-dots li.slick-active {
    background: #666
}

.i-select {
    position: relative
}

.i-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: 1px;
    -o-text-overflow: '';
    text-overflow: '';
    width: 100%
}

.s-content {
    word-break: break-word
}

.s-content a[href] {
    color: #007bff
}

.s-content a[href]:hover {
    text-decoration: underline
}

.s-content a,
.s-content a:active,
.s-content a:focus,
.s-content a:hover {
    text-decoration: underline
}

.s-content ol {
    list-style: decimal;
    margin-left: 15px;
    margin-bottom: 10px
}

.s-content ul {
    list-style: initial;
    margin-left: 15px;
    margin-bottom: 10px
}

.s-content li {
    list-style: inherit;
    margin-bottom: 5px
}

.s-content p {
    margin-bottom: 10px
}

.s-content img {
    max-width: 100%;
    height: auto !important;
    margin: 10px auto;
    object_fit: initial
}

.s-content .alignleft,
.s-content img.alignleft {
    margin-right: 1.5em;
    display: inline;
    float: left
}

.s-content .alignright,
.s-content img.alignright {
    margin-left: 1.5em;
    display: inline;
    float: right
}

.s-content .aligncenter,
.s-content img.aligncenter {
    margin-right: auto;
    margin-left: auto;
    display: block;
    clear: both
}

.s-content blockquote.left {
    margin-right: 20px;
    text-align: right;
    margin-left: 0;
    width: 33%;
    float: left
}

.s-content blockquote.right {
    margin-left: 20px;
    text-align: left;
    margin-right: 0;
    width: 33%;
    float: right
}

.s-content iframe,
.s-content table {
    max-width: 100%;
    max-width: calc(100vw - 30px);
    margin: auto
}

.s-content iframe {
    display: block
}

.s-content h1,
.s-content h2,
.s-content h3,
.s-content h4,
.s-content h5,
.s-content h6 {
    font-weight: bold
}

.s-content h1 {
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em
}

.s-content h2 {
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em
}

.s-content h3 {
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em
}

.s-content h4 {
    font-size: 1em;
    margin-top: 1.33em;
    margin-bottom: 1.33em
}

.s-content h5 {
    font-size: .83em;
    margin-top: 1.67em;
    margin-bottom: 1.67em
}

.s-content h6 {
    font-size: .67em;
    margin-top: 2.33em;
    margin-bottom: 2.33em
}

.hc-upload {
    position: relative
}

.hc-upload .hc-del {
    position: absolute;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 21px;
    line-height: 1;
    text-align: center;
    border-radius: 50%;
    top: -12px;
    right: -12px;
    cursor: pointer
}

.hc-upload .hc-del:hover {
    background: rgba(0, 0, 0, 0.85)
}

body {
    font-size: 1.6rem;
    font-family: "SFProDisplay", sans-serif !important;
    line-height: 1.5;
    color: #000;
    background-color: #F7F7F7
}

.wrap {
    overflow: hidden;
    position: relative
}

.btn-pri {
    text-align: center;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #0D8DC8;
    color: #fff !important;
    border-radius: 0.8rem;
    font-weight: 600;
    font-size: 1.5rem;
    height: 4.2rem;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

.btn-pri.orange {
    background-color: #F2B92A
}

.btn-pri.gray {
    background-color: #dfdfdf;
    color: #676767 !important;
    border: 1px solid #C1C1C1
}

.btn-pri:hover {
    background-color: #0a6b98
}

.btn-pri:hover.orange {
    background-color: #dca10d
}

.btn-pri:hover.gray {
    background-color: #c6c6c6
}

.btn-pri.v2 {
    height: 4.6rem
}

.scrollbar-y {
    overflow-y: auto;
    overflow-x: hidden
}

.scrollbar-y::-webkit-scrollbar {
    width: 0.6rem;
    border-radius: 0.3rem
}

.scrollbar-y::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 0.3rem
}

.scrollbar-y::-webkit-scrollbar-thumb {
    background: #D9D9D9;
    border-radius: 0.3rem
}

.scrollbar-y::-webkit-scrollbar-thumb:hover {
    background: #D9D9D9
}

.delay02 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s
}

.delay03 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s
}

.delay04 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s
}

.delay05 {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s
}

.delay06 {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s
}

.delay07 {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s
}

.delay08 {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s
}

.delay09 {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s
}

.delay10 {
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s
}

.delay12 {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s
}

.delay14 {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s
}

.delay16 {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s
}

.delay18 {
    -webkit-animation-delay: 1.8s;
    animation-delay: 1.8s
}

.acd-drop:after {
    content: '\002B'
}

.acd-drop.active:after {
    content: '\2212'
}

@media (min-width:992px) {

    .m-nav,
    .m-nav-over {
        display: none !important
    }
}

@media (max-width:991px) {
    .m-nav-over {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 998;
        background: rgba(0, 0, 0, 0.5);
        -webkit-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
        transition: all .15s ease-in-out
    }

    .m-nav {
        display: block;
        position: fixed;
        top: 0;
        width: 280px;
        bottom: 0;
        z-index: 999;
        color: #fff;
        background: #333;
        -webkit-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
        transition: all .15s ease-in-out;
        left: -280px
    }

    .m-nav.active {
        -webkit-box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.15);
        box-shadow: 0 0 6px 0 rgba(255, 255, 255, 0.15);
        left: 0
    }

    .m-nav.active .m-nav-close {
        visibility: visible;
        opacity: 1
    }

    .m-nav .m-nav-close {
        position: absolute;
        top: 0;
        width: 40px;
        height: 40px;
        left: 100%;
        background: #444;
        outline: none;
        color: #fff;
        font-size: 28px;
        cursor: pointer;
        -webkit-transition: inherit;
        -o-transition: inherit;
        transition: inherit;
        opacity: 0;
        visibility: hidden
    }

    .m-nav .nav-ct {
        height: 100%;
        overflow: auto
    }

    .m-nav a {
        display: block;
        font-size: 14px;
        font-family: arial;
        line-height: 20px;
        padding: 10px 15px 10px 18px;
        border-bottom: solid 1px #444
    }

    .m-nav ul ul {
        background: rgba(255, 255, 255, 0.04);
        display: none
    }

    .m-nav ul ul a {
        padding-left: 36px
    }

    .m-nav ul ul ul {
        padding-left: 54px
    }

    .m-nav .acd-drop {
        width: 40px;
        height: 40px;
        float: right;
        position: relative;
        z-index: 1;
        font-size: 20px;
        color: inherit;
        font-family: monospace;
        outline: none;
        cursor: pointer;
        border-left: solid 1px #444;
        background: rgba(255, 255, 255, 0.04)
    }
}

header {
    background-color: #fff;
    height: 6rem;
    z-index: 1001;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #ddd;
    z-index: 10;
    padding: 0 2rem;
    position: relative
}

.wrap-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

.left-hd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

.left-hd .drop-pri {
    margin-right: 1rem
}

.left-hd .drop-pri .label {
    width: auto;
    border: none;
    border-radius: 0;
    font-size: 1.3rem;
    color: #000;
    white-space: nowrap
}

.left-hd .drop-pri .label i {
    margin-right: 0.8rem;
    font-size: 2rem
}

.form-search-hd {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20.6rem;
    flex: 0 0 20.6rem
}

.form-search-hd .form-group {
    margin-bottom: 0;
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden
}

.form-search-hd .form-group .btn-search-hd {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%
}

.form-search-hd .form-control {
    height: 3.5rem;
    font-size: 1.3rem;
    border: none;
    background-color: #F7F7F7;
    border-radius: 0.5rem;
    padding-right: 4.5rem
}

.form-search-hd .form-control::-webkit-input-placeholder {
    color: #9b999a
}

.form-search-hd .form-control:-ms-input-placeholder {
    color: #9b999a
}

.form-search-hd .form-control::-ms-input-placeholder {
    color: #9b999a
}

.form-search-hd .form-control::placeholder {
    color: #9b999a
}

.form-search-hd .btn-search-hd {
    background-color: #F2B92A;
    width: 3.5rem;
    height: 3.5rem;
    color: #fff;
    font-size: 1.8rem;
    border-radius: 0.5rem;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

.form-search-hd .btn-search-hd:hover {
    background-color: #dca10d
}

.links-hd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.links-hd li {
    margin: 0 4.3rem
}

@media (min-width:992px) {
    .links-hd li.menu-mobile {
        display: none
    }
}

.links-hd li a {
    display: block;
    text-align: center;
    font-size: 1.4rem;
    color: #000;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.links-hd li a i,
.links-hd li a span {
    display: block;
    white-space: nowrap
}

.links-hd li a i.ic,
.links-hd li a span.ic {
    font-size: 2rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0.1rem;
    color: #5F5F5F;
    height: 1.8rem
}

.links-hd li a i.fa-store,
.links-hd li a span.fa-store {
    font-size: 1.7rem
}

.links-hd li a img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

@media (min-width:991px) {
    .links-hd li a:hover {
        color: #0D8DC8
    }

    .links-hd li a:hover img {
        -webkit-filter: grayscale(0);
        filter: grayscale(0)
    }

    .links-hd li a:hover i.ic,
    .links-hd li a:hover span.ic {
        color: #0D8DC8
    }
}

.links-hd li.active a {
    color: #0D8DC8;
    font-weight: 500
}

.links-hd li.active a img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.links-hd li.active a i.ic,
.links-hd li.active a span.ic {
    color: #0D8DC8
}

.right-hd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.control-hd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.control-hd>li {
    margin-left: 0.6rem;
    position: relative
}

.control-hd>li>a {
    width: 3.6rem;
    height: 3.6rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #EBEBEB;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

.control-hd>li>a .isax {
    font-size: 2rem
}

@media (min-width:992px) {

    .control-hd>li>a.active,
    .control-hd>li>a:hover {
        color: #0D8DC8
    }
}

@media (max-width:991px) {
    .control-hd .drop-menu {
        display: none !important
    }
}

.drop-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 1.1rem);
    min-width: 40rem;
    background-color: #fff;
    -webkit-box-shadow: 0 0.2rem 2.2rem rgba(0, 0, 0, 0.16);
    box-shadow: 0 0.2rem 2.2rem rgba(0, 0, 0, 0.16);
    border-radius: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    z-index: 99999;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    visibility: hidden;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    z-index: 1001
}

.drop-menu.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.drop-menu .left {
    padding: 1.2rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 21rem;
    flex: 0 0 21rem;
    border-right: 1px solid #ebebeb
}

.drop-menu .right {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 1.2rem
}

.drop-menu .head-menu {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 1rem
}

.menu-link {
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #EBEBEB
}

.menu-link li {
    margin-bottom: 0.8rem
}

.menu-link li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.menu-link li a .img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4.8rem;
    flex: 0 0 4.8rem;
    height: 4.8rem;
    margin-right: 1rem
}

.menu-link li a .img img {
    border-radius: 0.8rem;
    width: 100%;
    height: 4.8rem
}

.menu-link li a .ic {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 2.6rem;
    flex: 0 0 2.6rem;
    height: 2.6rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #0D8DC8;
    color: #fff;
    border-radius: 0.9rem;
    margin-right: 1rem
}

.menu-link li a .title {
    font-size: 14px;
    white-space: nowrap
}

.menu-link li a:hover {
    color: #0D8DC8
}

.menu-link.icon {
    border: none
}

.menu-link.icon li {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ebebeb
}

.menu-link.icon li:last-child {
    border-bottom: none;
    margin-bottom: 0
}

.menu-link.icon li .ic {
    font-size: 14px
}

.menu-link.icon li a .title {
    font-weight: 500
}

.menu-link.icon li.orange .ic {
    background-color: #F1B213
}

.menu-link.icon li.green .ic {
    background-color: #9AB40B
}

.menu-news .top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 1rem
}

.menu-news .top .head-menu {
    margin-bottom: 0
}

.menu-news .view-all {
    color: #0D8DC8;
    font-size: 12px;
    white-space: nowrap
}

.menu-news .view-all:hover {
    text-decoration: underline
}

.item-news-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0.8rem;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.item-news-menu:last-child {
    margin-bottom: 0
}

.item-news-menu .img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4rem;
    flex: 0 0 4rem;
    height: 4rem;
    margin-right: 0.6rem
}

.item-news-menu .img img {
    border-radius: 0.8rem;
    width: 100%;
    height: 4rem
}

.item-news-menu .title {
    font-size: 12px;
    line-height: 1.2
}

.item-news-menu .title a {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2em;
    max-height: calc(1.2em * 2)
}

.item-news-menu:hover {
    color: #0D8DC8
}

.user-hd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 4rem
}

.user-hd .avt {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4.2rem;
    flex: 0 0 4.2rem;
    margin-right: 0.8rem
}

.user-hd .avt img {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%
}

.user-hd .ct .name {
    display: block;
    font-weight: 600;
    line-height: 1.1;
    color: #000
}

.user-hd .ct .mail {
    color: #666;
    font-size: 1.3rem;
    display: block
}

.logo {
    margin-right: 3rem;
    -webkit-box-flex: 0;
    /* -ms-flex: 0 0 9.4rem;
    flex: 0 0 9.4rem */
}

.logo img {
    width: 100%
}

.drop-pri .setting-menu {
    padding: 0.5rem 1.6rem;
    min-width: 36.4rem;
    max-width: 100%;
    left: inherit;
    right: 0;
    z-index: 9999;
    border-radius: 0.5rem;
    border: none;
    -webkit-box-shadow: 0 12px 28px #0003, 0 2px 4px #0000001a, inset 0 0 0 1px #ffffff80;
    box-shadow: 0 12px 28px #0003, 0 2px 4px #0000001a, inset 0 0 0 1px #ffffff80
}

.setting-menu li.top {
    position: relative
}

.setting-menu li.top:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #f7f7f7;
    border-radius: 0.5rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.setting-menu li.top>a {
    position: relative;
    padding: 0.6rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.setting-menu li.top>a .avt {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4.8rem;
    flex: 0 0 4.8rem;
    width: 4.8rem;
    height: 4.8rem;
    margin-right: 0.8rem
}

.setting-menu li.top>a .avt img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.setting-menu li.top>a .ct {
    font-size: 1.3rem
}

.setting-menu li.top>a .ct .name {
    font-size: 1.5rem;
    color: #0D8DC8;
    font-weight: 700;
    margin-bottom: 0.3rem
}

.setting-menu li.top>a .ct .note {
    color: #9b999a
}

.setting-menu li.top:hover:before {
    opacity: 1;
    visibility: visible
}

.setting-menu li.item {
    border: none !important;
    position: relative
}

.setting-menu li.item:last-child {
    border-top: 1px solid #eee !important
}

.setting-menu li.item:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #f7f7f7;
    border-radius: 0.5rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.setting-menu li.item>a {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 600
}

.setting-menu li.item>a .ic {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 3.2rem;
    flex: 0 0 3.2rem;
    height: 3.2rem;
    width: 3.2rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #e5e5e5
}

.setting-menu li.item>a .ic img {
    max-width: 60%;
    max-height: 60%
}

.setting-menu li.item:hover:before {
    opacity: 1;
    visibility: visible
}

@media (max-width:1300px) {
    .links-hd li {
        margin: 0 1.5rem
    }

    .user-hd {
        margin-right: 2rem
    }
}

@media (max-width:1199px) {
    .user-hd {
        margin-right: 0.5rem
    }

    .user-hd .avt {
        margin-right: 0
    }

    .user-hd .ct {
        display: none
    }

    .form-search-hd {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 19rem;
        flex: 0 0 19rem
    }

    .links-hd li {
        margin: 0 1.2rem
    }
}

@media (max-width:991px) {
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1002
    }

    .center-hd {
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        height: 55px;
        width: 100%;
        border-top: 1px solid #ddd;
        z-index: 1000;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding-top: 5px;
        z-index: 99;
        -webkit-transition: 0.4s ease-in-out;
        -o-transition: 0.4s ease-in-out;
        transition: 0.4s ease-in-out
    }

    /* .center-hd.hide {
        -webkit-transform: translateY(55px);
        -ms-transform: translateY(55px);
        transform: translateY(55px)
    } */

    .links-hd {
        padding: 0 18px;
        width: 100%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .form-search-hd,
    .left-hd .drop-pri {
        display: none
    }

    .top-chat .info-contact .avt {
        display: none
    }

    .drop-menu {
        position: fixed;
        top: 56.63px;
        left: 0;
        width: 100%;
        height: calc(var(--window-height) - 111.63px);
        display: block;
        overflow-y: auto;
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding-bottom: 55px;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }

    .drop-menu .left {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        border-right: none;
        padding-top: 0
    }

    .drop-menu .right {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto
    }

    .menu-link.icon {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 1px solid #EBEBEB
    }

    .menu-link.icon li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        border-bottom: none
    }

    .control-hd .label {
        display: none
    }
}

@media (max-width:575px) {
    .links-hd li {
        margin: 0 5px
    }

    .links-hd li a {
        font-size: 12px;
        color: #2f2f2f;
        font-weight: 500
    }

    header {
        height: 50px
    }

    .logo {
        -webkit-box-flex: 0;
        /* -ms-flex: 0 0 76px;
        flex: 0 0 76px */
    }

    .user-hd {
        margin-right: 0
    }

    .user-hd .avt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 30px;
        flex: 0 0 30px
    }

    .user-hd .avt img {
        height: 30px
    }

    .control-hd>li>a {
        width: 30px;
        height: 30px
    }

    .control-hd>li>a .isax {
        font-size: 16px
    }

    .links-hd {
        padding: 0 15px
    }

    .menu-link.icon li a {
        display: block;
        text-align: center
    }

    .menu-link.icon li a .ic {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        width: 2.6rem;
        margin-right: 0;
        margin-bottom: 0.8rem
    }

    .menu-link.icon li a .title {
        white-space: initial;
        font-size: 12.5px
    }

    .drop-menu {
        top: 50px;
        height: calc(var(--window-height) - 105px)
    }
}

.btn-scroll-bottom {
    position: fixed;
    right: 3rem;
    bottom: 8.8rem;
    width: 5.4rem;
    height: 5.4rem;
    border-radius: 50%;
    border: 1px solid #dfdfdf;
    background-color: #fff;
    font-size: 2.4rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    z-index: 999
}

.btn-scroll-bottom.hide {
    opacity: 0;
    visibility: hidden
}

.btn-scroll-bottom:hover {
    -webkit-box-shadow: 0 0 0.2rem 0 rgba(0, 0, 0, 0.32);
    box-shadow: 0 0 0.2rem 0 rgba(0, 0, 0, 0.32);
    border-color: #0D8DC8;
    color: #0D8DC8
}

.top-menu {
    background-color: #F1F1F5;
    border-bottom: 1px solid #ddd
}

.top-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 42px;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: move;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.top-menu ul::-webkit-scrollbar {
    display: none
}

.top-menu ul li {
    margin: 0 2rem
}

.top-menu ul li a {
    white-space: nowrap;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.top-menu ul li a:hover {
    color: #0D8DC8
}

.scroll-hori {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: move;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-right: -2rem
}

.scroll-hori::-webkit-scrollbar {
    display: none
}

.scroll-hori .item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(31.5% - 1.2rem);
    flex: 0 0 calc(31.5% - 1.2rem);
    margin: 0 0.6rem;
    border-radius: 0.8rem;
    overflow: hidden
}

.scroll-hori .item:first-child {
    margin-left: 0
}

.scroll-hori .item .select-profile {
    position: relative;
    padding-top: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 0.8rem;
    color: #0D8DC8;
    background-color: #F1F1F5;
    font-weight: 500
}

.scroll-hori .item .select-profile input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
    z-index: 2
}

.scroll-hori .item .select-profile .ic {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4rem;
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    color: #464646;
    font-size: 1.9rem;
    border-radius: 50%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.scroll-hori .item .img {
    display: block;
    padding-top: 100%;
    position: relative
}

.scroll-hori .item .img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.8rem
}

.scroll-hori .item .img span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.scroll-hori .item .title {
    text-align: center;
    font-size: 1.4rem;
    margin-top: 0.8rem;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    max-height: calc(1.5 * 1)
}

.scroll-hori .item.video .img {
    border-radius: 0.8rem;
    overflow: hidden
}

.scroll-hori .item.video .img video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.scroll-hori .item.video .img:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1
}

.scroll-hori .item.video .img:before {
    content: "\2bd";
    font-family: 'iconsax' !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    font-size: 3rem;
    z-index: 2;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.scroll-hori .item.video .img:hover:before {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9)
}

.no-sb-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: unset !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-sb-scroll::-webkit-scrollbar {
    display: none
}

.main-market {
    height: calc(var(--window-height) - 105px);
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out
}

.main-market.detail {
    display: block
}

.main-market.form {
    height: calc(var(--window-height) - 60px)
}

.sidebar-market {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 35.3rem;
    flex: 0 0 35.3rem;
    background-color: #fff;
    padding: 2rem 3rem 8rem 3rem;
    position: relative
}

.bottom-content-fix {
    position: fixed;
    z-index: 10;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 6rem;
    border-left: 1px solid #eee;
    width: calc(100% - 35.3rem);
    border-top: 1px solid #ddd;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out
}

.bottom-content-fix .item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.7rem;
    border-left: 1px solid #ddd;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.bottom-content-fix .item span {
    margin-right: 0.8rem;
    font-size: 2.6rem
}

.bottom-content-fix .item strong {
    font-weight: 400
}

.bottom-content-fix .item strong.mobile {
    display: none
}

.bottom-content-fix .item:first-child {
    border-left: none
}

.bottom-content-fix .item.v1 span {
    color: #E8862E
}

.bottom-content-fix .item.v1:hover {
    color: #E8862E
}

.bottom-content-fix .item.v2 span {
    color: #4289C1
}

.bottom-content-fix .item.v2:hover {
    color: #4289C1
}

.bottom-content-fix .item.v3 span {
    color: #83AF25
}

.bottom-content-fix .item.v3:hover {
    color: #83AF25
}

/* .bottom-content-fix.hide {
    -webkit-transform: translateY(3.8rem);
    -ms-transform: translateY(3.8rem);
    transform: translateY(3.8rem);
    opacity: 0;
    visibility: hidden
} */

.btn-sb-fix {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6rem;
    width: 35.3rem;
    padding: 0 2.6rem;
    border-top: 1px solid #ddd;
    background-color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.btn-sb-fix .btn-pri {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 0.8rem);
    flex: 0 0 calc(50% - 0.8rem);
    margin: 0 0.4rem
}

.title-sb {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    position: relative
}

.title-sb.required:after {
    content: "*";
    display: inline-block;
    color: #e10000
}

.block-sb:not(:last-child) {
    border-bottom: 1px solid #E3E3E3;
    padding-bottom: 2rem;
    margin-bottom: 1.6rem
}

.block-sb .type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: calc(100% + 0.8rem);
    margin-left: -0.4rem;
    margin-top: -0.4rem
}

.block-sb .type .item {
    display: inline-block;
    margin: 0.4rem
}

.block-sb .type .item a {
    display: block;
    white-space: nowrap;
    line-height: calc(18/16);
    border: 1px solid #F1F1F5;
    padding: 0.8rem 1.5rem;
    background-color: #F1F1F5;
    color: #464646;
    border-radius: 0.6rem;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

.block-sb .type .item.active a {
    color: #0D8DC8;
    border-color: #0D8DC8
}

.tags {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: calc(100% + 0.8rem);
    margin-left: -0.4rem;
    margin-top: -0.4rem
}

.tags .item {
    display: inline-block;
    margin: 0.4rem
}

.tags .item a {
    display: block;
    white-space: nowrap;
    line-height: calc(18/16);
    border: 1px solid #F1F1F5;
    padding: 0.8rem 1.5rem;
    background-color: #F1F1F5;
    color: #464646;
    border-radius: 0.6rem;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

.tags .item.active a {
    color: #0D8DC8;
    border-color: #0D8DC8;
    cursor: initial
}

.item-block-sb:not(:last-child) {
    margin-bottom: 2rem
}

.item-block-sb .title-sb-second {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 1.2rem
}

.item-block-sb .title-sb-second .title {
    color: #4e4e4e;
    font-weight: 500
}

.item-block-sb .title-sb-second .unit {
    color: #0D8DC8
}

.item-block-sb .gender {
    width: calc(100% + 1rem);
    margin-left: -0.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.item-block-sb .gender li {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem);
    margin: 0 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
    background-color: #F1F1F5;
    border-radius: 0.7rem;
    height: 4.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #464646;
    border: 1px solid #E2E2E2;
    cursor: pointer;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.item-block-sb .gender li:first-child {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(100% - 1rem);
    flex: 0 0 calc(100% - 1rem)
}

.item-block-sb .gender li:before {
    content: '';
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 1.3rem;
    padding-top: 0.2rem;
    color: #fff;
    left: 1.2rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid #D7D7D7;
    border-radius: 50%;
    background-color: #EAEAEA;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.item-block-sb .gender li.active {
    color: #0D8DC8;
    border-color: #0D8DC8
}

.item-block-sb .gender li.active:before {
    content: "\f00c";
    background-color: #0D8DC8;
    border-color: #0D8DC8
}

.item-block-sb .form-group {
    position: relative
}

.item-block-sb .form-group .form-control {
    height: 4.2rem;
    background-color: #F1F1F5;
    border: 1px solid #E2E2E2;
    border-radius: 0.7rem;
    font-size: 1.6rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #000;
    padding-right: 4.5rem
}

.item-block-sb .form-group .form-control:focus {
    border-color: #0D8DC8
}

.item-block-sb .form-group.searchText .btn-search-sb {
    position: absolute;
    right: 0.5rem;
    top: 0;
    height: 4.2rem;
    width: 4.2rem
}

.item-block-sb .form-group.searchText .btn-search-sb:before {
    content: "\ebcc";
    font-family: 'iconsax';
    color: #0D8DC8;
    font-size: 2rem
}

.item-block-sb .form-group.search {
    margin-bottom: 0
}

.item-block-sb .form-group.search .btn-search-sb {
    position: absolute;
    right: 0.5rem;
    top: 0;
    height: 4.2rem;
    width: 4.2rem
}

.item-block-sb .form-group.search .btn-search-sb:before {
    content: "\ebcc";
    font-family: 'iconsax';
    color: #0D8DC8;
    font-size: 2rem
}

.item-block-sb .form-group.search .btn-search-sb.change:before {
    content: "\f00d";
    font-family: "Font Awesome 5 Pro";
    color: #7C7C7C;
    font-size: 1.8rem
}

.item-block-sb .form-group.search ul {
    position: absolute;
    border: 1px solid #eee;
    left: 0;
    min-width: 100%;
    top: calc(100% + 0.5rem);
    background-color: #fff;
    border-radius: 0.7rem;
    -webkit-box-shadow: 0 0.7rem 1.6rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.7rem 1.6rem rgba(0, 0, 0, 0.2);
    padding: 0 1.6rem;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.item-block-sb .form-group.search ul.active {
    opacity: 1;
    visibility: visible
}

.item-block-sb .form-group.search ul:before {
    content: '';
    top: -1rem;
    height: 1rem;
    position: absolute;
    left: 0;
    width: 100%
}

.item-block-sb .form-group.search ul li {
    display: block;
    padding: 1.2rem 0
}

.item-block-sb .form-group.search ul li:not(:last-child) {
    border-bottom: 1px solid #eee
}

.item-block-sb .form-group.search ul li a {
    display: block;
    line-height: 1.2;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.item-block-sb .form-group.search ul li a strong {
    color: #0D8DC8;
    font-weight: 500
}

.item-block-sb .form-group.search ul li.active {
    pointer-events: none
}

.item-block-sb .form-group.search ul li.active a {
    color: #0D8DC8
}

.item-block-sb .list-selected {
    margin-top: 0.5rem
}

.date {
    margin-bottom: 1.2rem
}

.date .title-sb-second {
    margin-bottom: 0
}

.date .form-group:before {
    content: "\e990";
    position: absolute;
    font-family: 'iconsax' !important;
    right: 1.4rem;
    top: 0.62rem;
    font-size: 2rem;
    color: #0D8DC8;
    pointer-events: none;
    z-index: 1
}

.react-datepicker-popper {
    z-index: 2
}

.item-block-sb .list-tags-pri {
    margin-top: 0.6rem
}

.list-tags-pri {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: calc(100% + 0.8rem);
    margin-left: -0.4rem
}

.list-tags-pri .item {
    position: relative;
    margin: 0.4rem;
    border: 1px solid #F1F1F5;
    background-color: #F1F1F5;
    color: #4e4e4e;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 3.8rem;
    padding: 0 1rem;
    border-radius: 0.6rem;
    cursor: pointer
}

.list-tags-pri .item.active {
    border-color: #0D8DC8;
    color: #fff;
    background-color: #0D8DC8
}

.list-tags-pri .item.active.second {
    border-color: #0D8DC8;
    color: #0D8DC8;
    background-color: #F1F1F5
}

.list-tags-pri .item.active.second .btn-remove {
    background-color: #ccc
}

.list-tags-pri .item.v2 {
    padding-right: 3.5rem
}

.list-tags-pri .item.v2 .btn-remove {
    position: absolute;
    right: 1rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: #fff;
    color: #7e7e7e;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.list-tags-pri .item.v2 .btn-remove:before {
    content: "\f00d";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 1.2rem
}

.list-tags-pri .item.v2 .btn-remove:hover {
    background-color: #b3b3b3
}

.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
    background: #0D8DC8 !important
}

.ranger-slider .value-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 2.5rem
}

.ranger-slider .value-bottom .item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 45%;
    width: 45%;
    border: 1px solid #E2E2E2;
    border-radius: 0.7rem;
    height: 3.6rem;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #626262;
    background-color: #F1F1F5
}

.ranger-slider .value-bottom .line {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 1rem;
    flex: 0 0 1rem;
    width: 1rem;
    height: 0.2rem;
    background-color: #9e9e9e
}

.content-market {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 2.5rem 3rem 6rem 3rem
}

.block-post {
    width: 50%;
    margin-bottom: 5rem;
    position: relative;
    padding-right: 5rem;
}

.block-post .control-pri {
    position: absolute;
    right: 0;
    top: 56%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.block-post .control-pri .drop-pri {
    margin-bottom: 0.4rem
}

.block-post .control-pri .drop-pri ul {
    left: calc(100% + 0.5rem);
    top: 0
}

@media (min-width:1024px) {
    .block-post.only_image {
        width: 25%
    }
}

.block-post.v2 {
    margin-left: auto;
    padding-right: 0;
    padding-left: 5rem
}

.block-post.v2 .top {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.block-post.v2 .top .info-user {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.block-post.v2 .top .info-user .avt {
    margin-right: 0;
    margin-left: 1rem
}

.block-post.v2 .drop-pri ul {
    left: inherit;
    right: 0
}

.block-post.v2 .control-pri {
    right: inherit;
    left: 0
}

.block-post.v2 .control-pri .drop-pri ul {
    left: inherit;
    right: calc(100% + 0.5rem);
    top: 0
}

.block-post.v2 .emoji-post {
    right: 2.5rem
}

.block-post.v2 .item-order.deleted {
    text-align: right
}

.block-post .top {
    margin-bottom: 0.7rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative
}

.info-user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.info-user .avt {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4rem;
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    margin-right: 1rem
}

.info-user .avt img {
    border-radius: 50%;
    width: 100%;
    height: 4rem
}

.info-user .ct .name {
    display: inherit;
    line-height: 1
}

.info-user .ct .dot {
    width: 7px;
    height: 14px;
    color: #f1b92b;
    position: relative;
    display: inline-block;
}

.info-user .ct .dot::before {
    content: ".";
    font-size: 12px;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.info-user .ct .name a {
    white-space: nowrap;
    font-weight: 600;
    font-size: 1.3rem
}

.info-user .ct .user-phone {
    min-width: 28px;
    padding: 4px 4px 4px 8px;
    line-height: 1;
}

.info-user .ct .user-zalo {
    min-width: 25%;
    padding: 4px 4px 4px 4px;
    line-height: 1;
}

.info-user .ct .time {
    color: #707070;
    font-size: 1.4rem
}

.emoji-post {
    position: absolute;
    bottom: 2.5rem;
    right: 7.5rem;
    z-index: 2;
    background-color: #fff;
    border-radius: 1.3rem;
    height: 2.6rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.emoji-post .btn-heart {
    color: #b4b4b4;
    font-size: 2rem;
    width: 2.6rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 2.6rem;
    flex: 0 0 2.6rem;
    height: 2.6rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    position: relative
}

.emoji-post .btn-heart:after,
.emoji-post .btn-heart:before {
    content: "\481";
    position: absolute;
    font-family: 'iconsax';
    top: -1rem;
    opacity: 0
}

.emoji-post .btn-heart.run-ani:before {
    -webkit-animation: heart 0.6s linear;
    animation: heart 0.6s linear
}

.emoji-post .btn-heart.run-ani:after {
    -webkit-animation: heart1 0.6s linear;
    animation: heart1 0.6s linear;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s
}

@-webkit-keyframes heart {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(20deg) translateY(0);
        transform: scale(0) rotate(20deg) translateY(0)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1) rotate(20deg) translateY(-3rem);
        transform: scale(1) rotate(20deg) translateY(-3rem)
    }
}

@keyframes heart {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(20deg) translateY(0);
        transform: scale(0) rotate(20deg) translateY(0)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1) rotate(20deg) translateY(-3rem);
        transform: scale(1) rotate(20deg) translateY(-3rem)
    }
}

@-webkit-keyframes heart1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.2) rotate(-20deg) translateY(0);
        transform: scale(0.2) rotate(-20deg) translateY(0)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1) rotate(-20deg) translateY(-3rem);
        transform: scale(1) rotate(-20deg) translateY(-3rem)
    }
}

@keyframes heart1 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.2) rotate(-20deg) translateY(0);
        transform: scale(0.2) rotate(-20deg) translateY(0)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1) rotate(-20deg) translateY(-3rem);
        transform: scale(1) rotate(-20deg) translateY(-3rem)
    }
}

.emoji-post .btn-heart .fa-times {
    color: #878787;
    margin-left: 2px;
    font-size: 1.6rem
}

.emoji-post .counts {
    font-size: 1.4rem;
    color: #292D32;
    margin-top: 0
}

.emoji-post.active {
    padding: 0 0.5rem
}

.emoji-post.active .btn-heart {
    color: #FC4A50;
    width: 2.2rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 2.2rem;
    flex: 0 0 2.2rem
}

.time-pri {
    color: #626262;
    font-size: 1.5rem;
    padding-top: 1rem
}

.wrap-order {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%
}

.wrap-order.odd {}

.wrap-order.odd.item_1 .item-order {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 calc(100% - 0.7rem) !important;
    flex: 0 0 calc(100% - 0.7rem) !important;
    border-radius: 1.6rem
}

.wrap-order.odd.item_1 .item-order img {
    border-radius: 1.6rem
}

.wrap-order.odd.item_3 .item-order.image:nth-child(2) {
    border-radius: 0
}

.wrap-order.odd.item_3 .item-order.image:nth-child(2) img {
    border-radius: 0
}

.wrap-order {
    overflow: hidden;
    border-radius: 1.6rem
}

.wrap-order.item_1 .item-order:not(.image) {
    max-height: 20rem !important
}

.wrap-order.item_1 .item-order.text {
    max-height: unset !important
}

.wrap-order:not(.item_1) .item-order.image {
    background: gray
}

.wrap-order:not(.item_1) .item-order.image img {
    -o-object-fit: contain;
    object-fit: contain
}

.item-order {
    margin: 2px;
    padding: 3.5rem 2.5rem;
    background-size: cover;
    background-position: center;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.item-order.image {
    padding: 0
}

.item-order img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.item-order.deleted {
    padding: 0;
    min-height: auto;
    display: block
}

.item-order.deleted .ct {
    max-width: 100% !important;
    background-color: #fff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 5rem;
    border-radius: 1.2rem;
    padding: 0 2.2rem;
    border: 1px solid #E4E4E4;
    font-size: 1.8rem;
    font-weight: 400;
    color: #737373;
    position: relative
}

.item-order.closed {
    background: #fff !important;
    height: 18rem
}

.item-order.closed .control,
.item-order.closed .ct {
    display: none
}

.item-order .note {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.item-order .note .isax {
    width: 8rem;
    height: 8rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #F1F1F5;
    border-radius: 50%;
    color: #0D8DC8;
    font-size: 3rem
}

.item-order .note p {
    margin-top: 1.2rem;
    font-size: 1.5rem
}

.item-order .control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0.6rem;
    width: 100%;
    padding-left: 0.6rem
}

.item-order .btn-control {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 2.6rem;
    flex: 0 0 2.6rem;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.4rem;
    margin-left: 0.4rem;
    background-color: #fff;
    border: 1px solid #c9c9c9
}

.item-order .drop-pri .label {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.4rem;
    background-color: #fff;
    border: 1px solid #c9c9c9
}

.item-order .ct {
    text-align: center;
    font-weight: 700;
    font-size: 1.5rem;
    cursor: pointer
}

.job-type {
    position: absolute;
    z-index: 1;
    color: #000;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 2.2rem;
    padding: 0 0.5rem;
    background: rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.32);
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.32);
    font-weight: 600;
    top: 0.8rem;
    left: 0.8rem;
    font-size: 1.3rem;
    border-radius: 0.4rem
}

.btn-control {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 3.6rem;
    flex: 0 0 3.6rem;
    width: 3.6rem;
    height: 3.6rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #DDDDDD;
    color: #7D7D7D;
    font-size: 2rem;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

.btn-control:hover {
    background-color: #0D8DC8;
    color: #fff
}

.drop-pri {
    position: relative;
    z-index: 1
}

.drop-pri .label {
    cursor: pointer;
    border-radius: 50%;
    width: 3.6rem;
    height: 3.6rem;
    background-color: #fff;
    border: 1px solid #DDDDDD;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #666;
    font-size: 2rem;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

.drop-pri .label:hover {
    color: #0D8DC8;
    border-color: #0D8DC8
}

.drop-pri ul {
    display: none;
    position: absolute;
    border: 1px solid #d9d9d9;
    left: 0;
    min-width: 21rem;
    top: calc(100% + 0.5rem);
    background-color: #fff;
    border-radius: 1.4rem;
    -webkit-box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.16);
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.16);
    padding: 0 1.4rem;
    z-index: 1
}

.drop-pri ul li {
    display: block;
    cursor: pointer
}

.drop-pri ul li:not(:last-child) {
    border-bottom: 1px solid #eee
}

.drop-pri ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 1.2rem 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap;
    line-height: 1.1;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    cursor: pointer
}

.drop-pri ul li a.red {
    color: #ED1806 !important
}

.drop-pri ul li a.red i,
.drop-pri ul li a.red span {
    color: #ED1806 !important
}

.drop-pri ul li a i,
.drop-pri ul li a span {
    margin-top: -0.2rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 2rem;
    flex: 0 0 2rem;
    margin-right: 1rem;
    color: #797979;
    font-size: 1.7rem;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.drop-pri ul li a i.isax-import,
.drop-pri ul li a span.isax-import {
    font-size: 2rem
}

.drop-pri ul li a i.fa-file-pdf,
.drop-pri ul li a span.fa-file-pdf {
    font-size: 1.8rem
}

.drop-pri ul li a:hover {
    color: #0D8DC8
}

.drop-pri ul li a:hover i,
.drop-pri ul li a:hover span {
    color: #0D8DC8
}

.drop-pri.ic .label {
    border: none;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    width: 2.5rem;
    color: #000
}

.drop-pri.ic .label:hover {
    color: #0D8DC8
}

.drop-pri.ic ul {
    left: inherit;
    right: 0
}

.total-users {
    margin-top: 2px;
    line-height: 1;
    font-size: 11px;
    color: #c0c0c0;
}

.btn-fix {
    position: fixed;
    top: 125px;
    z-index: 3;
    right: 3rem;
    background-color: #0D8DC8;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    height: 4.2rem;
    border-radius: 2.6rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 2rem 0 0.3rem;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.btn-fix span {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 3.6rem;
    flex: 0 0 3.6rem;
    width: 3.6rem;
    height: 3.6rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff;
    color: #0D8DC8;
    margin-right: 0.7rem;
    font-size: 2.4rem
}

.btn-fix span img {
    max-width: 2.4rem
}

.btn-fix span.fa-home-alt {
    font-size: 1.8rem
}

.btn-fix:hover {
    background-color: #0a6b98
}

.post-date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    margin: 1rem 0
}

.post-date:before {
    content: '';
    position: absolute;
    top: calc(50% - 0.05rem);
    height: 1px;
    background-color: #c6c6c6;
    width: 100%
}

.post-date span {
    background-color: #C6C6C6;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    padding: 0 1.4rem;
    border-radius: 1.25rem;
    font-size: 1.5rem;
    position: relative;
    height: 2.5rem
}

.item-emoji {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.item-emoji .counts {
    margin-left: 0
}

.item-emoji.is-have .counts {
    margin-left: 0.2rem
}

.search-mobile {
    padding: 1rem 3rem;
    display: none
}

.search-mobile .form-group {
    position: relative;
    margin-bottom: 0
}

.search-mobile .form-control {
    height: 40px;
    font-size: 14px;
    padding-left: 35px;
    padding-right: 40px;
    color: #000;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 6px;
    border: 1px solid #E2E2E2
}

.search-mobile .form-control:focus {
    border-color: #0D8DC8
}

.search-mobile .form-control::-webkit-input-placeholder {
    color: #999
}

.search-mobile .form-control:-ms-input-placeholder {
    color: #999
}

.search-mobile .form-control::-ms-input-placeholder {
    color: #999
}

.search-mobile .form-control::placeholder {
    color: #999
}

.search-mobile .btn-search-mb {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 18px;
    color: #999
}

.search-mobile .toggle-search {
    position: absolute;
    right: 12px;
    top: 10px;
    color: #0D8DC8;
    font-size: 20px
}

.overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--window-height);
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
    z-index: 9998
}

.overlay.show {
    opacity: 1;
    visibility: visible
}

.btn-close-fix {
    position: fixed;
    left: 280px;
    top: -40px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    font-size: 20px;
    color: #0D8DC8;
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    -webkit-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out
}

.btn-close-fix.show {
    top: 0;
    opacity: 1;
    visibility: visible
}

.irs--round {
    height: auto !important
}

.irs--round .irs-bar,
.irs--round .irs-line {
    top: 4px !important;
    height: 3px !important
}

.irs--round .irs-bar {
    background-color: #0D8DC8 !important
}

.irs--round .irs-handle {
    background-color: #0D8DC8 !important;
    border-color: #0D8DC8 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.irs--round .irs-handle:before {
    content: '';
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    -webkit-transform: translate(-50%, -50%) !important;
    -ms-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    width: 500% !important;
    height: 500% !important;
    border: 1px solid #0D8DC8 !important;
    border-radius: 50% !important
}

.irs--round .irs-handle.state_hover,
.irs--round .irs-handle:hover {
    background-color: #0D8DC8 !important
}

.irs--round .irs-handle {
    width: 12px !important;
    height: 12px !important;
    top: 0 !important
}

.irs--round .irs-from,
.irs--round .irs-single,
.irs--round .irs-to {
    background-color: transparent !important;
    color: #666666 !important;
    font-weight: 500 !important;
    font-family: "SFProDisplay", sans-serif !important;
    font-size: 1.4rem !important;
    display: none !important
}

.irs--round .irs-from:before,
.irs--round .irs-max,
.irs--round .irs-min,
.irs--round .irs-single:before,
.irs--round .irs-to:before {
    display: none !important
}

.react-datepicker {
    font-size: 1.2rem !important;
    font-family: "SFProDisplay", sans-serif !important;
    font-weight: 500 !important
}

.react-datepicker__day,
.react-datepicker__day-name,
.react-datepicker__time-name {
    line-height: 2rem !important;
    width: 3rem !important;
    margin: 0.3rem !important
}

.react-datepicker__day--selected {
    background-color: #0D8DC8 !important
}

.react-datepicker-time__header,
.react-datepicker-year-header,
.react-datepicker__current-month {
    font-size: 1.4rem !important
}

.react-datepicker__navigation {
    top: 18px !important
}

@media (max-width:1400px) {
    .block-post {
        width: 70%
    }
}

@media (max-width:1199px) {
    .block-post {
        width: 80%
    }

    .btn-scroll-bottom {
        width: 4rem;
        height: 4rem;
        font-size: 2rem
    }

    .block-post .control-pri {
        z-index: 2
    }

    .block-post .control-pri .drop-pri ul {
        left: inherit;
        right: calc(100% + 5px)
    }

    .block-post.v2 .drop-pri ul {
        left: calc(100% + 5px);
        right: inherit;
        top: 0
    }

    .block-post.v2 .control-pri .drop-pri ul {
        left: calc(100% + 5px);
        right: inherit
    }
}

@media (max-width:991px) {
    .top-menu {
        position: fixed;
        top: 57px;
        width: 100%;
        left: 0;
        z-index: 11
    }

    .search-mobile {
        position: fixed;
        top: 100px;
        left: 0;
        width: 100%;
        background-color: #F7F7F7;
        z-index: 9
    }

    .main-market {
        height: calc(var(--window-height) - 93px);
        padding-top: 159px
    }

    .main-market.detail {
        height: calc(var(--window-height) - 70px);
        padding-top: 100px
    }

    .main-market.order {
        height: calc(var(--window-height) - 55px)
    }

    .main-market.form {
        height: calc(var(--window-height) - 55px);
        padding-top: 110px
    }

    .main-market.form .search-mobile {
        top: 57px
    }

    .content-market {
        padding-bottom: 20px
    }

    .block-post {
        width: 100%
    }

    .btn-scroll-bottom {
        width: 30px;
        height: 30px;
        font-size: 1.8rem;
        right: 1rem;
        bottom: 105px
    }

    .sidebar-market {
        position: fixed;
        max-width: 280px;
        z-index: 99999;
        top: 0;
        left: 0;
        height: 100%;
        padding: 1.5rem 2rem 8rem 2rem;
        -webkit-box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.22);
        box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.22);
        opacity: 0;
        visibility: hidden;
        left: -280px;
        -webkit-transition: 0.4s ease-in-out;
        -o-transition: 0.4s ease-in-out;
        transition: 0.4s ease-in-out
    }

    .sidebar-market.show {
        left: 0;
        opacity: 1;
        visibility: visible
    }

    .sidebar-market.show .btn-sb-fix {
        left: 0
    }

    .btn-sb-fix {
        width: 280px;
        padding: 0 2rem;
        left: -280px;
        -webkit-transition: 0.4s ease-in-out;
        -o-transition: 0.4s ease-in-out;
        transition: 0.4s ease-in-out
    }

    .bottom-content-fix {
        width: 100%;
        bottom: 55px;
        height: 4rem;
        z-index: 1000
    }

    .bottom-content-fix .item {
        font-size: 1.4rem
    }

    .btn-fix {
        top: 160px;
        padding: 0;
        height: auto
    }

    .btn-fix span {
        margin-right: 0;
        border: 1px solid #0D8DC8
    }

    .btn-fix .text {
        display: none
    }

    .search-mobile {
        display: block
    }

    .main-market.long {
        height: var(--window-height)
    }
}

@media (max-width:767px) {
    .bottom-content-fix .item strong.desktop {
        display: none
    }

    .bottom-content-fix .item strong.mobile {
        display: inline-block
    }
}

@media (max-width:575px) {
    .main-market.form .search-mobile {
        top: 50px
    }

    .btn-fix {
        right: 16px;
        top: 150px
    }

    .top-menu {
        top: 50px
    }

    .search-mobile {
        top: 87px;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 0;
    }

    .main-market {
        padding-top: 136px;
        height: var(--window-height)
    }

    .main-market.detail {
        padding-top: 90px
    }

    .main-market.long {
        height: var(--window-height)
    }

    .content-market {
        padding: 0 16px 60px 16px;
        padding-bottom: 10px
    }

    .item-order {
        padding: 35px 10px
    }

    .item-order .control {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end
    }

    .item-order .ct {
        font-size: 12px !important
    }

    .item-order.deleted .ct {
        font-size: 16px
    }

    .item-order .drop-pri .label {
        width: 26px;
        height: 26px;
        font-size: 13px
    }

    .item-order .btn-control {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 26px;
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        font-size: 12px
    }

    .item-order .note p {
        font-size: 12px;
        text-align: center
    }

    .item-order .note .isax {
        width: 50px;
        height: 50px;
        font-size: 24px
    }

    .info-user .avt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 36px;
        flex: 0 0 36px;
        width: 36px;
        height: 36px
    }

    .info-user .avt img {
        height: 36px
    }

    .info-user .ct .name a {
        font-size: 13px
    }

    .time-pri {
        font-size: 14px
    }

    .drop-pri .label {
        width: 30px;
        height: 30px;
        font-size: 16px
    }

    .drop-pri ul {
        min-width: 155px;
        border-radius: 1rem
    }

    .drop-pri ul li a {
        font-size: 13px
    }

    .drop-pri ul li a i,
    .drop-pri ul li a span {
        font-size: 15px
    }

    .btn-control {
        font-size: 16px;
        width: 30px;
        height: 30px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 30px;
        flex: 0 0 30px
    }

    .block-post {
        padding-right: 40px;
        margin-bottom: 40px
    }

    .block-post.v2 {
        padding-left: 40px
    }

    .post-date span {
        font-size: 14px
    }

    .bottom-content-fix .item span {
        font-size: 21px
    }

    .top-menu ul {
        height: 36px
    }

    .top-menu ul li {
        margin: 0 13px
    }

    .top-menu ul li a {
        font-size: 14px
    }
}

.list-gallery .item {
    height: 15rem
}

.react-datepicker-popper {
    z-index: 2 !important
}

.form-group.form-date {
    color: #6c757d !important
}

.breadcrumb {
    background-color: transparent;
    padding: 1.5rem 3rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0
}

.breadcrumb i {
    color: #0D8DC8
}

.breadcrumb .breadcrumb-item {
    color: #404040
}

.breadcrumb .breadcrumb-item a:hover {
    color: #0D8DC8
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 1.2rem
}

.breadcrumb-item+.breadcrumb-item:before {
    content: "\f105";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    color: #b5b5b5;
    padding-right: 1.2rem
}

.arrow-pri {
    position: absolute;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #ECECEC;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #292D32;
    font-size: 3rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 100%;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

.arrow-pri.next {
    right: inherit;
    left: 100%
}

.arrow-pri:hover {
    background-color: #0D8DC8;
    color: #fff;
    -webkit-box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.32);
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.32)
}

.detail-post {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 94rem;
    margin: 0 auto;
    height: calc(100% - 55px);
    padding-top: 2rem
}

.detail-post .arrow-pri {
    top: 33%
}

.left-detail-post {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 3rem);
    flex: 0 0 calc(50% - 3rem);
    margin: 0 1.5rem
}

.left-detail-post .item-order-dt img {
    max-height: 60rem
}

.left-detail-post .bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 2.5rem;
    width: calc(100% + 1.6rem);
    margin-left: -0.8rem
}

.left-detail-post .bottom .btn-pri {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 1.6rem);
    flex: 0 0 calc(50% - 1.6rem);
    margin: 0 0.8rem;
    height: 5rem
}

.left-detail-post .bottom .btn-pri i,
.left-detail-post .bottom .btn-pri span {
    margin-right: 1rem;
    font-size: 1.8rem
}

.info-detail-post {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 3rem);
    flex: 0 0 calc(50% - 3rem);
    margin: 0 1.5rem;
    border-radius: 2rem;
    border: 1px solid #eee;
    background-color: #fff
}

.info-detail-post .top {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    padding-left: 3rem;
    padding-right: 0.5rem;
    border-bottom: 1px solid #d9d9d9;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff
}

.info-detail-post .top .info-user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.info-detail-post .top .info-user .avt {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 5rem;
    flex: 0 0 5rem;
    width: 5rem;
    height: 5rem;
    margin-right: 1rem
}

.info-detail-post .top .info-user .avt img {
    border-radius: 50%;
    height: 5rem;
    width: 100%
}

.info-detail-post .top .info-user .ct .name {
    line-height: 1
}

.info-detail-post .top .info-user .ct .name a {
    font-weight: 600;
    font-size: 1.8rem
}

.info-detail-post .top .info-user .ct .time {
    color: #707070;
    font-size: 1.4rem
}

.info-detail-post .top .drop-pri .label {
    border: none;
    background-color: transparent;
    color: #000
}

.info-detail-post .top .drop-pri .label:hover {
    color: #0D8DC8
}

.info-detail-post .top .drop-pri ul {
    left: inherit;
    right: 2rem
}

.info-detail-post .block-detail {
    border-bottom: 1px solid #d9d9d9;
    padding: 2rem 3rem 2.5rem 3rem
}

.info-detail-post .block-detail:last-child {
    border-bottom: none
}

.info-detail-post .block-detail .title {
    color: #0D8DC8;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.info-detail-post .block-detail .title .view-all {
    color: #707070;
    font-weight: 400;
    font-size: 1.6rem;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.info-detail-post .block-detail .title .view-all:hover {
    color: #0D8DC8
}

.info-detail-post .block-detail .s-content {
    color: #353535;
    font-weight: 300
}

.info-detail-post .block-detail .list-user {
    width: calc(100% + 2rem);
    margin-left: -1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center
}

.info-detail-post .block-detail .list-user .note {
    width: 100%;
    color: #595959
}

.info-detail-post .block-detail .item-user {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(25% - 2rem);
    flex: 0 0 calc(25% - 2rem);
    margin: 0 1rem
}

.info-detail-post .block-detail .item-user .avt {
    position: relative;
    overflow: hidden;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    background-color: #fff;
    padding: 0.5rem;
    border: 1px solid #0D8DC8;
    border-radius: 50%;
    width: 7rem;
    height: 7rem
}

.info-detail-post .block-detail .item-user .avt img {
    border-radius: 50%;
    width: 100%;
    height: 100%
}

.info-detail-post .block-detail .item-user .avt.closed img {
    -webkit-filter: blur(0.25rem);
    filter: blur(0.25rem)
}

.info-detail-post .block-detail .item-user .avt.closed .text-closed {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    font-size: 1.2rem;
    font-weight: 600
}

.info-detail-post .block-detail .item-user .name {
    font-size: 1.4rem;
    font-weight: 500;
    color: #595959;
    display: block;
    margin-top: 0.8rem;
    line-height: 1.2;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.info-detail-post .block-detail .item-user:hover .name {
    color: #0D8DC8
}

.info-detail-post .block-detail .list-item-row li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border: 1px solid #e6e6e6;
    margin-top: -1px
}

.info-detail-post .block-detail .list-item-row li span {
    padding: 1rem;
    color: #595959;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
    background-color: #F1F1F5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.info-detail-post .block-detail .list-item-row li strong {
    padding: 1rem;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    color: #353535;
    font-weight: 400;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.info-detail-post .block-detail .list-item-row li>div {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.info-detail-post .block-detail .list-item-tag {
    width: calc(100% + 1rem);
    margin-left: -0.5rem
}

.info-detail-post .block-detail .list-item-tag li {
    display: inline-block;
    margin: 0.5rem 0.4rem
}

.info-detail-post .block-detail .list-item-tag li a {
    background-color: #f1f1f5;
    color: #0D8DC8;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 3.6rem;
    padding: 0 1.5rem;
    border-radius: 0.6rem;
    border: 1px solid #19A6DF;
    cursor: initial
}

.info-detail-post .block-detail .list-image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(100% + 1.2rem);
    margin-left: -0.6rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.info-detail-post .block-detail .list-image .item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(33.333333% - 1.2rem);
    flex: 0 0 calc(33.333333% - 1.2rem);
    margin: 0 0.6rem;
    margin-bottom: 1.2rem;
    height: 12rem;
    position: relative;
    border-radius: 0.8rem;
    overflow: hidden
}

.info-detail-post .block-detail .list-image .item.video a {
    display: block;
    border-radius: 0.8rem;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.info-detail-post .block-detail .list-image .item.video a video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.info-detail-post .block-detail .list-image .item.video a:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1
}

.info-detail-post .block-detail .list-image .item.video a:before {
    content: "\2bd";
    font-family: 'iconsax' !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    font-size: 3rem;
    z-index: 2;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.info-detail-post .block-detail .list-image .item.video a:hover:before {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9)
}

.info-detail-post .block-detail .list-image .item img {
    height: 100%;
    width: 100%
}

.item-ic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.item-ic .ic {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 5rem;
    flex: 0 0 5rem;
    margin-right: 1.3rem
}

.item-ic .ct {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    line-height: 1.4
}

.item-ic .ct .name {
    font-weight: 500
}

.item-ic .ct .desc {
    color: #999
}

.item-ic .btn-delete {
    position: absolute;
    color: #999;
    font-weight: 300;
    right: 0;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.item-ic .btn-delete:hover {
    color: #0D8DC8
}

.item-ic.v2 {
    padding-right: 3rem;
    margin-bottom: 1.4rem
}

.item-order-dt {
    font-size: 2rem;
    text-align: center;
    font-weight: 700;
    border-radius: 2rem;
    min-height: 44rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.item-order-dt .ct {
    padding: 2rem 0
}

.main-depot-order {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0 3rem;
}

.main-depot-order .top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: #f7f7f7
}

.main-depot-order .top .breadcrumb {
    padding-left: 0
}

.main-depot-order .top .count-order {
    color: #0D8DC8;
    font-weight: 500;
    font-size: 1.5rem;
    white-space: nowrap
}

.fix-scroll {
    background-color: #f7f7f7;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2
}

.filter-order {
    background-color: #fff;
    border-radius: 0.8rem;
    border: 1px solid #EAEAEA;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1.5rem 1.8rem;
    z-index: 1;
    /* margin-bottom: 1.4rem */
}

.filter-order .btn-add {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #F2B92A;
    color: #fff;
    height: 4rem;
    border-radius: 0.6rem;
    padding: 0 2rem;
    font-size: 1.5rem;
    font-weight: 600;
    white-space: nowrap;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.filter-order .btn-add i {
    font-size: 2rem;
    margin-right: 0.5rem
}

.filter-order .btn-add:hover {
    background-color: #dca10d
}

.filter-order .drop-pri.select {
    margin-right: 1.2rem
}

.filter-order .drop-pri.select .label {
    width: auto;
    min-width: auto;
    border: 1px solid #DFDFDF;
    border-radius: 0.6rem;
    background-color: #F7F7F7;
    font-size: 1.4rem;
    color: #575757;
    white-space: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-width: 11rem;
    height: 4rem;
    padding: 0 2.5rem 0 1rem
}

.filter-order .drop-pri.select .label:before {
    content: "\f0dd";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    right: 1rem;
    top: 45%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-weight: 900;
    color: #8D8D8D
}

.filter-order .drop-pri.select .label i {
    margin-left: 0.8rem;
    font-size: 2rem
}

.filter-order .drop-pri.select ul {
    min-width: 100%;
    border-radius: 0.6rem;
    background-color: #F7F7F7
}

.filter-order .drop-pri.select ul li {
    padding: 1rem 0;
    font-size: 1.4rem
}

.filter-order .filter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.filter-order .filter .title {
    font-size: 1.5rem;
    color: #000;
    margin-right: 1.2rem
}

.filter-order .btn-select {
    background-color: #0D8DC8;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
    border-radius: 0.6rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 9rem;
    flex: 0 0 9rem;
    width: 9rem;
    height: 4rem;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.filter-order .btn-select:hover {
    background-color: #0a6b98
}

.filter-order .btn-select.cancel {
    background-color: #f7f7f7;
    border: 1px solid #DFDFDF;
    color: #575757
}

.filter-order .btn-select.cancel:hover {
    background-color: #dedede
}

.depot-order-post .drop-pri ul {
    left: calc(100% + 0.4rem);
    top: 0
}

.depot-order-post .item-order {
    min-height: 19.6rem;
    border-radius: 0 !important;
    margin: 0 !important;
    padding-left: 1.3rem;
    padding-right: 1.3rem;
    padding-bottom: 4rem
}

.depot-order-post .item-order .fa-user-alt {
    font-size: 1.2rem
}

.depot-order-post .item-order .ct {
    font-size: 1.2rem;
    word-break: break-word
}

.depot-order-post .item-order .ct13,
.depot-order-post .item-order .ct16 {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    line-height: 1.5em;
    max-height: calc(1.5em * 10)
}

.depot-order-post .time-order-post {
    margin-bottom: 1rem;
    font-size: 1.4rem
}

.depot-order-post .list {
    width: calc(100% + 1.2rem);
    margin-left: -0.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 10px
}

.block-depot-order {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(20% - 1.2rem);
    flex: 0 0 calc(20% - 1.2rem);
    margin: 0.6rem
}

.block-depot-order.active .status {
    background-color: #0D8DC8;
    font-size: 1.4rem
}

.para-order {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
    position: relative
}

.para-order .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.4rem;
    margin-right: 2rem;
    cursor: pointer
}

.para-order .item:last-child {
    margin-right: 0
}

.para-order .item .ic {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 1.3rem;
    flex: 0 0 1.3rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    margin-top: -0.2rem
}

.para-order .item.v1 .ic {
    background-color: #16B216
}

.para-order .item.v2 .ic {
    background-color: #FF1400
}

.para-order .item.v3 .ic {
    background-color: #FCA300
}

.drop-pri.private {
    margin-top: 0.5rem
}

.drop-pri.private .label {
    border-radius: 0.6rem;
    width: auto;
    min-width: auto;
    font-size: 1.3rem;
    height: 2.6rem;
    padding: 0 2rem 0 0.9rem;
    position: relative
}

.drop-pri.private .label:before {
    content: "\f0dd";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    font-size: 1.2rem;
    font-weight: 900;
    color: #999;
    top: 42%;
    right: 0.7rem;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.drop-pri.private .label i {
    color: #0D8DC8;
    margin-right: 0.4rem;
    margin-top: -0.2rem;
    font-size: 1.2rem
}

.drop-pri.private .label:hover:before {
    color: #0D8DC8
}

.drop-pri.private ul {
    border-radius: 0.6rem;
    min-width: 100%;
    font-size: 1.3rem;
    padding: 0 0.8rem
}

.drop-pri.private ul i {
    font-size: 1.2rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 0.4rem;
    color: #0D8DC8
}

.item-person {
    position: relative;
    border: 1px solid #e6e6e6
}

.item-person .status {
    width: 2.6rem;
    height: 2.6rem
}

.item-person .control {
    position: absolute;
    right: 0.7rem;
    top: 0.7rem
}

.item-person .drop-pri .label {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.4rem;
    color: #858585
}

.item-person .drop-pri .label:hover {
    color: #0D8DC8
}

.item-person .drop-pri ul {
    top: calc(100% + 0.5rem);
    left: inherit;
    right: 0
}

.item-person .img {
    padding-top: 127.411167513%;
    position: relative;
    display: block
}

.item-person .img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.item-person .ct {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.8rem;
    background-color: rgba(255, 255, 255, 0.9)
}

.item-person .ct .name a {
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    font-size: 1.4rem;
    font-weight: 600
}

.item-person .ct .name a:hover {
    color: #0D8DC8
}

.item-person .ct .info {
    font-size: 1.4rem
}

.item-person .para-order {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 0;
    margin-top: 0.5rem
}

.item-person.closed {}

.item-person.closed .ct {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.item-person.closed .note {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-bottom: 8.7rem;
    pointer-events: none
}

.item-person.closed .note .isax {
    width: 8rem;
    height: 8rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #F1F1F5;
    border-radius: 50%;
    color: #0D8DC8;
    font-size: 3rem
}

.item-person.closed .note p {
    margin-top: 1.2rem;
    font-size: 1.5rem;
    font-weight: 600
}

@media (max-width:1199px) {
    .arrow-pri {
        width: 4rem;
        height: 4rem;
        font-size: 2.2rem;
        -webkit-box-shadow: 0 0 0.3rem 0 rgba(0, 0, 0, 0.22);
        box-shadow: 0 0 0.3rem 0 rgba(0, 0, 0, 0.22)
    }

    .detail-post .arrow-pri {
        right: inherit;
        left: -0.5rem
    }

    .detail-post .arrow-pri.next {
        right: -0.5rem;
        left: inherit
    }
}

@media (max-width:991px) {
    .main-market.detail {
        height: auto;
        padding-bottom: 70px
    }

    .detail-post {
        display: block;
        height: auto;
        max-width: 55rem
    }

    .left-detail-post {
        margin-bottom: 2.5rem
    }

    .detail-post .arrow-pri {
        top: 220px;
        left: 20px
    }

    .detail-post .arrow-pri.next {
        right: 20px
    }

    .fix-scroll {
        position: fixed;
        left: 0;
        top: 157.51px;
        width: 100%;
        padding: 0 3rem
    }

    .main-market.form .fix-scroll {
        top: 115.51px
    }

    .main-depot-order {
        padding-top: 132.23px
    }
}

@media (max-width:575px) {
    .fix-scroll {
        top: 139.5px;
        padding: 0 1.5rem
    }

    .main-market.form .fix-scroll {
        top: 107.5px
    }

    .detail-post .arrow-pri {
        top: 185px
    }

    .info-detail-post .top {
        padding-left: 1.5rem
    }

    .info-detail-post .block-detail {
        padding: 1.5rem
    }

    .info-detail-post .block-detail .item-user .avt {
        width: 6rem;
        height: 6rem
    }

    .item-order-dt {
        min-height: 348px;
        font-size: 1.8rem
    }

    .breadcrumb-item+.breadcrumb-item {
        padding-left: 0.8rem
    }

    .breadcrumb-item+.breadcrumb-item:before {
        padding-right: 0.8rem
    }

    .filter-order {
        padding: 1rem
    }

    .filter-order .btn-add {
        padding: 0 1rem;
        font-size: 12px
    }

    .filter-order .btn-add i {
        display: none
    }

    .filter-order .filter .title {
        display: none
    }

    .filter-order .drop-pri.select {
        margin-right: 0.5rem
    }

    .filter-order .btn-add,
    .filter-order .btn-select,
    .filter-order .drop-pri.select .label {
        height: 3.2rem
    }

    .main-depot-order {
        padding: 85px 1.5rem 0 1.5rem;
        padding-bottom: 0px !important
    }

    .main-depot-order .top {
        margin-bottom: 0.5rem
    }

    .main-depot-order .top .breadcrumb {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem
    }
}

.warehouse-page .depot-order-post .item-order.image {
    max-height: 24rem !important;
    position: relative
}

.warehouse-page .depot-order-post .item-order.image .ct {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.warehouse-page .depot-order-post .item-order.image .ct span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: gray
}

.warehouse-page .depot-order-post .item-order.image img {
    position: relative;
    left: inherit;
    top: inherit;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto
}

.item-depot-order.image {
    padding: 0;
    position: relative;
    background: gray
}

.item-depot-order.image img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 100%
}

.home-page .scrollList::-webkit-scrollbar {
    display: none
}

.home-page .scrollList {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.warehouse-page .infinite-scroll-component {
    overflow: hidden !important
}

.warehouse-page .no-data {
    padding-top: 3vh
}

.warehouse-page .no-data img {
    max-height: 45vh;
    max-width: 90%;
    margin: 0 auto
}

.list-depot-order .no-data {
    max-height: 100%
}

.list-depot-order .no-data img {
    max-width: 90%;
    max-height: 90%
}

.home-page .no-data {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%
}

.home-page .no-data img {
    max-height: 80%;
    max-width: 90%;
    margin: 0 auto
}

.modal-pri .modal-dialog {
    max-width: 55rem
}

.modal-pri .modal-content {
    border: none;
    border-radius: 2rem;
    overflow: hidden
}

.modal-pri .modal-body {
    padding: 0
}

.head-modal {
    text-align: center;
    position: relative;
    padding: 1.7rem 0;
    border-bottom: 1px solid #d7d7d7
}

.head-modal .title {
    font-size: 2.2rem;
    font-weight: 600;
    padding: 0 2rem
}

.head-modal .title-second {
    padding: 0 18.5%;
    font-size: 1.6rem;
    color: #000;
    font-weight: 500
}

.wrap-modal {
    padding: 1.5rem 2rem 2.3rem 2rem;
    max-height: calc(var(--window-height) - 11rem);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.wrap-modal::-webkit-scrollbar {
    display: none
}

.wrap-modal .info-user {
    margin-bottom: 0
}

.fix-top-modal {
    padding-top: 1.8rem;
    position: -webkit-sticky;
    position: sticky;
    top: -1.5rem;
    left: 0;
    width: 100%;
    z-index: 2;
    background-color: #fff;
    width: calc(100% + 4rem);
    -webkit-transform: translateX(-2rem);
    -ms-transform: translateX(-2rem);
    transform: translateX(-2rem);
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 1.4rem
}

.btn-close-modal {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background-color: #e7e7e7;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    right: 1.6rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 2.2rem;
    color: #878787;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

.btn-close-modal:hover {
    background-color: #cecece
}

.btn-delete-order {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background-color: #fff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2.2rem;
    color: #878787;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

.btn-delete-order:hover {
    background-color: #e6e6e6
}

.block-md:not(:last-child) {
    padding-bottom: 2rem;
    margin-bottom: 1.8rem;
    border-bottom: 1px solid #e8e8e8
}

.block-md:nth-last-child(2) {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 1.5rem
}

.block-md .title-md {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.2rem
}

.block-md .title-md.required:after {
    content: "*";
    display: inline-block;
    color: #e10000
}

.block-md .title-md span {
    color: #e10000
}

.block-md .title-md.v2 {
    font-weight: 700;
    color: #0D8DC8
}

.block-md.form .item-file-upload.form-image.video .video-item {
    position: relative
}

.block-md.form .item-file-upload.form-image.video .video-item .btn-delete {
    position: absolute;
    width: 2rem;
    height: 2rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #000;
    font-weight: 300;
    border-radius: 50%;
    right: 0.5rem;
    top: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    font-size: 1.4rem;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    z-index: 9
}

.block-md.form .item-file-upload.form-image.video .video-item .btn-delete:hover {
    background-color: #fff
}

.block-md.form .item-file-upload.form-image.video .img {
    display: block;
    border-radius: 0.8rem;
    overflow: hidden;
    z-index: 1
}

.block-md.form .item-file-upload.form-image.video .img:after {
    content: '';
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.block-md.form .item-file-upload.form-image.video .img:before {
    content: "\2bd";
    font-family: 'iconsax' !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    font-size: 3rem;
    z-index: 2;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.block-md.form .item-file-upload.form-image.video .img:hover:before {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9)
}

.block-md.form .item-file-upload.form-image.video .img video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.block-md.form .item-file-upload.form-image .select-file {
    height: 15.6rem;
    color: #0D8DC8;
    background-color: #F1F1F5;
    font-weight: 500;
    border: none !important
}

.block-md.form .item-file-upload.form-image .select-file .ic {
    color: #464646;
    font-size: 1.9rem;
    background-color: #F1F1F5;
    border: none !important
}

.block-md.form .item-file-upload.form-image .img {
    height: 15.6rem;
    position: relative;
    overflow: hidden;
    border-radius: 0.6rem
}

.block-md.form .item-file-upload.form-image .img img {
    width: 100%;
    height: 100%
}

.block-md.form .item-file-upload.form-image .img .btn-delete {
    position: absolute;
    width: 2rem;
    height: 2rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #000;
    font-weight: 300;
    border-radius: 50%;
    right: 0.5rem;
    top: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    font-size: 1.4rem;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.block-md.form .item-file-upload.form-image .img .btn-delete:hover {
    background-color: #fff
}

.block-md.form .item-file-upload.form-image .ic {
    background-color: #fff;
    color: #0D8DC8;
    border: 1px dashed #0D8DC8;
    margin: 0
}

@media (min-width:992px) {
    .block-md.form .item-md {
        margin-bottom: 0
    }
}

.block-md.form .select-gender {
    height: 4.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.block-md.form .i-check {
    margin-right: 3.5rem
}

.block-md.form .i-check i {
    margin-right: 1rem
}

.block-md .upload-file {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: calc(100% + 2rem);
    margin-left: -1rem
}

.block-md .upload-file .item-file-upload {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(33.3333% - 2rem);
    flex: 0 0 calc(33.3333% - 2rem);
    max-width: calc(33.3333% - 2rem);
    margin: 1rem;
    border-radius: 0.8rem
}

.block-md .upload-file .item-file-upload.w100 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(100% - 2rem);
    flex: 0 0 calc(100% - 2rem)
}

.block-md .upload-file .select-file {
    font-weight: 400
}

.block-md .upload-file .title-file {
    font-weight: 500;
    color: #4e4e4e;
    text-align: center;
    margin-top: 1rem;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.5em;
    max-height: calc(1.5em * 1)
}

.checkbox-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: calc(100% + 1rem);
    margin-left: -0.5rem
}

.checkbox-list .i-check {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0.5rem !important;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.checkbox-list .i-check i {
    margin-right: 0.5rem !important
}

.checkbox-list .i-check.w50 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 1rem);
    flex: 0 0 calc(50% - 1rem)
}

.btn-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(100% + 1.6rem);
    margin-left: -0.8rem
}

.btn-bottom .btn-pri {
    height: 5rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 1.6rem);
    flex: 0 0 calc(50% - 1.6rem);
    margin: 0 0.8rem
}

.btn-bottom .btn-pri.v2 {
    height: 4.6rem;
    border-radius: 0.6rem
}

.btn-bottom .btn-pri.v2.red {
    background-color: #ED1806
}

.btn-bottom .btn-pri.v2.red:hover {
    background-color: #bb1305
}

.btn-bottom .btn-pri.v2.green {
    background-color: #16B216
}

.btn-bottom .btn-pri.v2.green:hover {
    background-color: #108510
}

.btn-bottom .btn-pri.v2 i {
    margin-right: 0.8rem;
    font-size: 1.6rem
}

.item-md {
    margin-bottom: 1.2rem
}

.item-md .label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #4E4E4E
}

.item-md .label.required:after {
    content: "*";
    display: inline-block;
    color: #e10000
}

.item-md .label span {
    color: #e10000
}

.item-md .form-group {
    margin-bottom: 0;
    position: relative
}

.item-md .form-group .note {
    position: absolute;
    right: 1.2rem;
    color: #0D8DC8;
    top: 1.2rem
}

.item-md .form-group .note.isax {
    font-size: 2rem
}

.item-md .form-group .note.count-text {
    top: inherit;
    bottom: 1rem;
    color: #999
}

.item-md .form-group.select:before {
    content: "\f0dd";
    position: absolute;
    right: 1.5rem;
    font-family: "Font Awesome 5 Pro";
    top: 0.6rem;
    font-weight: 900;
    color: #999;
    pointer-events: none
}

.item-md .form-control {
    height: 4.6rem;
    font-size: 1.6rem;
    background-color: #F1F1F5;
    border-radius: 0.6rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #DEDEDE;
    color: #4e4e4e;
    padding-left: 1.5rem;
    padding-right: 4rem
}

.item-md .form-control::-webkit-input-placeholder {
    color: #999
}

.item-md .form-control:-ms-input-placeholder {
    color: #999
}

.item-md .form-control::-ms-input-placeholder {
    color: #999
}

.item-md .form-control::placeholder {
    color: #999
}

.item-md .form-control:focus {
    border-color: #0D8DC8
}

.item-md select {
    height: 4.6rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.item-md textarea {
    height: 14rem !important;
    resize: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 1.5rem !important
}

.review-text-order {
    position: relative;
    min-height: 28.8rem;
    border-radius: 1.4rem;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 0;
    margin-bottom: 0
}

.review-text-order .ct {
    max-width: 61%;
    font-size: 1.8rem;
    font-weight: 700
}

.review-text-order .arrow-pri {
    right: inherit;
    left: 1rem;
    width: 3.6rem;
    height: 3.6rem;
    font-size: 2.2rem;
    color: #878787;
    background-color: rgba(255, 255, 255, 0.6)
}

.review-text-order .arrow-pri:hover {
    background-color: #fff
}

.review-text-order .arrow-pri.next {
    left: inherit;
    right: 1rem
}

.btn-add-order {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.55rem 0.91rem;
    background-color: #fff;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    font-weight: 500;
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.btn-add-order:hover {
    color: #0D8DC8;
    -webkit-box-shadow: 0 0.2rem 0.3rem 0 rgba(0, 0, 0, 0.22);
    box-shadow: 0 0.2rem 0.3rem 0 rgba(0, 0, 0, 0.22)
}

.btn-add-order i {
    margin-right: 0.5rem;
    color: #0D8DC8;
    font-size: 2rem
}

.btn-count-order {
    position: absolute;
    right: 16rem;
    bottom: 1rem;
    height: 3.2rem;
    width: 3.2rem;
    border-radius: 0.6rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: #000;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #fff
}

.md-edit .btn-count-order {
    right: 1.2rem
}

.list-bg-order {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: calc(100% + 2rem);
    margin-left: -1rem
}

.list-bg-order .item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(20% - 2rem);
    flex: 0 0 calc(20% - 2rem);
    margin: 1rem;
    height: 8.6rem;
    border: 3px solid #fff;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.25);
    border-radius: 1.4rem;
    overflow: hidden;
    cursor: pointer
}

.list-bg-order .item img {
    width: 100%;
    height: 100%
}

.list-bg-order .item.active {
    border-color: #0D8DC8
}

.i-check {
    cursor: pointer;
    margin-bottom: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.i-check input {
    display: none
}

.i-check input:checked+i {
    background-color: #0D8DC8;
    border-color: #0D8DC8
}

.i-check input:checked+i:after {
    opacity: 1
}

.i-check.active i {
    background-color: #0D8DC8;
    border-color: #0D8DC8
}

.i-check.active i:after {
    opacity: 1
}

.i-check i {
    display: inline-block;
    vertical-align: middle;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 2rem;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border: solid 1px #d7d7d7;
    text-align: center;
    font-style: normal;
    font-size: 1.7rem;
    line-height: 1.7rem;
    color: #858585;
    margin-right: 3rem;
    border-radius: 50%
}

.i-check i:after {
    font-family: "Font Awesome 5 Pro";
    content: "";
    opacity: 0;
    color: #fff;
    font-size: 1.4rem
}

.i-check span {
    font-weight: 400;
    font-size: 1.6rem;
    color: #464646
}

.select-gender .request {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.4rem 0;
    border-radius: 0.6rem;
    background-color: #F1F1F5;
    border: 1px solid #dedede;
    margin-bottom: 1.4rem
}

.select-gender .request .item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 0.8rem);
    flex: 0 0 calc(50% - 0.8rem);
    margin: 0 0.4rem;
    text-align: center;
    border-radius: 0.6rem;
    height: 4.4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 500;
    cursor: pointer;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.select-gender .request .item.active {
    background-color: #0D8DC8;
    color: #fff
}

.select-gender .check-number {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(100% + 2rem);
    margin-left: -1rem
}

.select-gender .check-number .item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 2rem);
    flex: 0 0 calc(50% - 2rem);
    margin: 0 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #F1F1F5;
    height: 4.6rem;
    border-radius: 0.6rem
}

.select-gender .check-number .item .form-control {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border-radius: 0;
    border: none;
    font-size: 1.6rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
    border-left: 1px solid #e2e2e2;
    text-align: center;
    color: #4e4e4e
}

.select-gender .check-number .item .form-control::-webkit-input-placeholder {
    color: #999
}

.select-gender .check-number .item .form-control:-ms-input-placeholder {
    color: #999
}

.select-gender .check-number .item .form-control::-ms-input-placeholder {
    color: #999
}

.select-gender .check-number .item .form-control::placeholder {
    color: #999
}

.select-gender .check-number .item .i-check {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%
}

.select-gender .check-number .item.single {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(100% - 2rem);
    flex: 0 0 calc(100% - 2rem)
}

.select-gender .check-number .item.single .form-control {
    border: 1px solid #e2e2e2;
    height: 4.6rem;
    border-radius: 0.6rem;
    text-align: left;
    width: 100%
}

.select-gender .check-number .item.single .form-control:focus {
    border-color: #0D8DC8
}

.list-file {
    margin-bottom: 1.4rem
}

.select-file {
    position: relative;
    height: 7.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px dashed #0D8DC8;
    border-radius: 0.6rem;
    color: #0D8DC8;
    font-weight: 500
}

.select-file input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

.select-file .ic {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4rem;
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    background-color: #0D8DC8;
    color: #fff;
    font-size: 1.8rem;
    border-radius: 50%;
    margin-right: 0.7rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.list-gallery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-bottom: 1.4rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.list-gallery .item {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(33.3333% - 2rem);
    flex: 0 0 calc(33.3333% - 2rem);
    margin: 0.5rem 1rem;
    border-radius: 0.8rem;
    overflow: hidden
}

.list-gallery .item .video {
    display: block;
    border-radius: 0.8rem;
    overflow: hidden;
    z-index: 3;
    width: 100%;
    height: 100%
}

.list-gallery .item .video:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1
}

.list-gallery .item .video:before {
    content: "\2bd";
    font-family: 'iconsax' !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    font-size: 3rem;
    z-index: 2;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.list-gallery .item .video:hover:before {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9)
}

.list-gallery .btn-delete {
    position: absolute;
    width: 2rem;
    height: 2rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #000;
    font-weight: 300;
    border-radius: 50%;
    right: 0.5rem;
    top: 0.5rem;
    background: rgba(255, 255, 255, 0.6);
    font-size: 1.4rem;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    z-index: 4
}

.list-gallery .btn-delete:hover {
    background-color: #fff
}

.depot-order .modal-dialog {
    max-width: 85rem;
    width: 100%
}

.depot-order .head-modal .title {
    padding: 0 2.4rem;
    text-align: left
}

.wrap-depot-order {
    position: relative;
    padding: 1.6rem 2.4rem 6.6rem 2.4rem;
    width: calc(100% + 0.8rem);
    margin-left: -0.4rem
}

.wrap-depot-order .btn-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 2.4rem;
    height: 6.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-left: 0
}

.wrap-depot-order .btn-pri {
    height: 3.2rem;
    border-radius: 0.6rem;
    font-size: 1.2rem;
    max-width: 12rem;
    margin: 0 0.35rem;
    font-weight: 500
}

.wrap-depot-order .btn-pri:last-child {
    margin-right: 0
}

.wrap-depot-order.matching {
    width: 100%
}

.wrap-depot-order.matching .list-depot-order {
    width: 100%
}

.wrap-depot-order.matching .item-depot-order {
    max-height: 24rem;
    background-color: gray
}

.wrap-depot-order.matching .item-depot-order .ct13,
.wrap-depot-order.matching .item-depot-order .ct16 {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    line-height: 1.5em;
    max-height: calc(1.5em * 10)
}

.wrap-depot-order.v2 {
    padding-bottom: 1.6rem
}

.wrap-depot-order.v2 .list-depot-order {
    max-height: 41.5rem
}

.wrap-depot-order.v2 .list-depot-order .item-depot-order {
    padding: 3.6rem 1.7rem
}

.list-depot-order {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-height: 37rem;
    margin-right: -1.8rem;
    padding-right: 1rem
}

.item-depot-order {
    position: relative;
    width: calc(25% - 0.8rem);
    margin: 0.4rem;
    padding: 3.6rem 1.2rem 2rem 1.2rem;
    min-height: 17.6rem;
    font-weight: 700;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer
}

.item-depot-order .ct {
    font-size: 1.2rem
}

.item-depot-order.active .status {
    background-color: #0D8DC8;
    font-size: 1.4rem
}

.item-depot-order .control {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem
}

.item-depot-order .drop-pri .label {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.4rem
}

.item-depot-order .drop-pri ul {
    min-width: 15rem;
    left: 100%;
    top: inherit;
    bottom: 0
}

.item-depot-order .drop-pri ul li a {
    font-weight: 400
}

.status {
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid #C6C6C6;
    background-color: #fff;
    border-radius: 50%;
    top: 0.7rem;
    right: 0.7rem;
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    z-index: 2
}

.md-user .modal-content {
    border-radius: 1.4rem;
    -webkit-box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.16);
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.16)
}

@media (min-width:992px) {
    .md-user .modal-dialog {
        width: 500px;
        max-width: 100%;
    }
}

.md-user .wrap-modal-user {
    padding: 1.8rem 2rem;
    text-align: center
}

.md-user .avt {
    margin-bottom: 1.4rem
}

.md-user .avt img {
    width: 8.6rem;
    height: 8.6rem;
    border-radius: 50%
}

.md-user .info {
    margin-bottom: 1.5rem
}

.md-user .info .name {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1
}

.md-user .info .email {
    color: #707070
}

.md-user .action li {
    border-bottom: 1px solid #eee
}

.md-user .action li:last-child {
    border-bottom: none
}

.md-user .action li:last-child a {
    padding-bottom: 0
}

.md-user .action li a {
    display: block;
    padding: 0.8rem 0;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.md-user .action li a:hover {
    color: #0D8DC8
}

.md-user .action li .red {
    color: #F01907 !important
}

.md-user .btn-close-modal {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    top: 1rem;
    right: 1rem;
    width: 3.2rem;
    height: 3.2rem
}

.md-user .title-user {
    text-align: left;
    font-weight: 600;
    padding-top: 1rem;
    margin-bottom: 0.75rem
}

.md-user .tb-user {
    text-align: left
}

.md-user .tb-user tr:first-child td {
    border: none
}

.md-user .tb-user td {
    border-color: #eee;
    text-align: right;
}

.md-user .tb-user td:first-child {
    color: #707070;
    padding-left: 0;
    width: 1%;
    text-align: left;
    white-space: nowrap;
}

.md-user .tb-user .ref-input input {
    width: 100%;
    padding: 0 10px;
    border: 1px solid #ddd;
    background-color: #eee;
    border-radius: 4px 0 0 4px;
    box-shadow: none;
    outline: none;
    font-size: 14px;
    height: 30px;
    border-width: 1px 0 1px 1px;
}

.md-user .tb-user .ref-input span {
    background-color: #eee;
    padding: 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    border-radius: 0 4px 4px 0;
    border: 1px solid #ddd;
    cursor: pointer;
    /* border-width: 1px 1px 1px 0; */
}

.md-user .tb-user .ref-input span:hover {
    background-color: #ccc;
}

.md-user .btn-update-user {
    width: 100%;
    margin-top: 3rem;
    background-color: #0D8DC8;
    color: #fff;
    border-radius: 0.6rem;
    height: 4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.5rem;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s
}

.md-user .btn-update-user:hover {
    background-color: #0a6b98
}

.md-user .form-login {
    text-align: left
}

@media (min-width:768px) {
    .md-user.md-file-user-update .modal-dialog {
        max-width: 46rem
    }
}

.md-user .upload-avt {
    position: relative
}

.md-user .upload-avt input[type=file] {
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

.md-user .upload-avt span {
    color: #0D8DC8;
    display: inline-block;
    text-decoration: underline;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.md-user .upload-avt:hover span {
    color: #0a6b98
}

.md-user .form-login {
    margin-top: 2rem
}

.md-confirm .modal-body {
    padding: 1.2rem 1.5rem
}

.md-confirm .modal-content {
    border-radius: 1.4rem;
    -webkit-box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.16);
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.16)
}

.md-confirm .modal-dialog {
    max-width: 33rem
}

.md-confirm .btn-close-modal {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    top: 1rem;
    right: 1rem;
    width: 3.2rem;
    height: 3.2rem
}

.md-confirm .ct-confirm {
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
    font-weight: 500;
    line-height: calc(19/16);
    padding: 1.3rem 0 2.5rem 0
}

.md-confirm .btn-bottom {
    width: calc(100% + 1.1rem);
    margin-left: -0.55rem
}

.md-confirm .btn-bottom .btn-pri {
    height: 4.2rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 1.1rem);
    flex: 0 0 calc(50% - 1.1rem);
    margin: 0 0.55rem
}

.md-preview .modal-content {
    display: block
}

.md-preview .info-detail-post {
    margin: 0;
    border: none;
    padding-left: 0;
    padding-right: 0
}

.tabs-order .top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-right: 2rem;
    border-bottom: 1px solid #d7d7d7
}

.modal-pri .nav-tabs {
    border-bottom: none;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.modal-pri .nav-tabs .nav-item {
    margin-bottom: 0;
    margin-right: 0.4rem
}

.modal-pri .nav-tabs .nav-item.v1 .nav-link:before {
    opacity: 1;
    background-color: #16B216
}

.modal-pri .nav-tabs .nav-item.v2 .nav-link:before {
    opacity: 1;
    background-color: #FF1400
}

.modal-pri .nav-tabs .nav-item.v3 .nav-link:before {
    opacity: 1;
    background-color: #FCA300
}

.modal-pri .nav-tabs .nav-link {
    border: none;
    padding: 1rem 2rem;
    font-weight: 500;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.modal-pri .nav-tabs .nav-link:before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    opacity: 0
}

.modal-pri .nav-tabs .nav-link:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #0D8DC8;
    bottom: -1px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.modal-pri .nav-tabs .nav-link .count {
    font-weight: 400;
    color: #868686;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.modal-pri .nav-tabs .nav-link:hover {
    color: #0D8DC8
}

.modal-pri .nav-tabs .nav-link:hover .count {
    color: #0D8DC8
}

.modal-pri .nav-tabs .nav-link.active {
    color: #0D8DC8
}

.modal-pri .nav-tabs .nav-link.active .count {
    color: #0D8DC8
}

.modal-pri .nav-tabs .nav-link.active:after {
    opacity: 1;
    visibility: visible
}

.btn-reload {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    white-space: nowrap;
    color: #000
}

.btn-reload .isax {
    margin-right: 0.5rem;
    font-size: 1.8rem
}

.btn-reload.active {
    color: #0D8DC8 !important
}

@media (min-width:575px) {
    .btn-reload:hover {
        color: #0D8DC8
    }
}

.md-profile .modal-dialog {
    max-width: 45rem;
    width: 100%
}

.md-profile .modal-content {
    border-radius: 1.4rem
}

.md-profile .head-modal {
    padding: 1.5rem 0
}

.md-profile .head-modal .title {
    font-size: 1.8rem
}

.md-profile .btn-close-modal {
    font-size: 2rem;
    width: 3.2rem;
    height: 3.2rem
}

.tabs-profile .nav-tabs {
    border-bottom: 1px solid #d9d9d9
}

.tabs-profile .nav-tabs .nav-item {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    margin-right: 0
}

.tabs-profile .nav-tabs .nav-link {
    text-align: center
}

.tabs-profile .tab-content {
    padding: 1.8rem;
    max-height: 60vh
}

.item-profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1.2rem 1rem;
    position: relative;
    border-radius: 1.2rem;
    border: 1px solid #EBEBEB;
    margin-bottom: 1.2rem
}

.item-profile:last-child {
    margin-bottom: 0
}

.item-profile .avt {
    position: relative;
    overflow: hidden;
    display: block;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 6rem;
    flex: 0 0 6rem;
    height: 6rem !important;
    width: 6rem !important;
    border-radius: 50%;
    margin-right: 1.2rem
}

.item-profile .avt.closed img {
    -webkit-filter: blur(0.25rem);
    filter: blur(0.25rem)
}

.item-profile .avt.closed:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(92, 92, 92, 0.8)
}

.item-profile .avt.closed .text-closed {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.item-profile .avt img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.item-profile .ct {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-size: 1.5rem
}

.item-profile .ct .name {
    font-weight: 600;
    line-height: 1;
    font-size: 1.6rem
}

.item-profile .ct .name a {
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.item-profile .ct .name a:hover {
    color: #0D8DC8
}

.item-profile .ct .info {
    font-size: 1.2rem
}

.item-profile .ct .note {
    font-weight: 500;
    font-size: 1.2rem;
    border-radius: 0.6rem;
    width: 7.6rem;
    height: 2.4rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.item-profile .ct .note.v1 {
    background-color: #F7D0D0;
    color: #ED1806
}

.item-profile .ct .note.v2 {
    background-color: #EBEBEB;
    color: #808080
}

.item-profile .ct .note.v3 {
    background-color: #C5EAC5;
    color: #16B216
}

.item-profile .ct .bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.item-profile .ct .btn-action {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.item-profile .ct .btn-action .btn {
    width: 8.4rem;
    height: 2.8rem;
    border-radius: 1.5rem;
    border: 1px solid #c8c8c8;
    background-color: #f5f5f5;
    font-size: 1.4rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.3rem;
    margin-left: 0.5rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.item-profile .ct .btn-action .btn .ic {
    margin-right: 0.7rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 2.2rem;
    flex: 0 0 2.2rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff
}

.item-profile .ct .btn-action .btn .ic:before {
    position: absolute;
    font-family: "Font Awesome 5 Pro"
}

.item-profile .ct .btn-action .btn:hover {
    background-color: gainsboro
}

.item-profile .ct .btn-action .reject .ic {
    background-color: #ED1806
}

.item-profile .ct .btn-action .reject .ic:before {
    content: "\f00d"
}

.item-profile .ct .btn-action .agree .ic {
    background-color: #16B216
}

.item-profile .ct .btn-action .agree .ic:before {
    content: "\f00c"
}

.item-profile .drop-pri {
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    z-index: auto
}

.item-profile .drop-pri ul {
    top: 0;
    right: calc(100% - 1.5rem)
}

.reload {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 1.6rem 1.8rem 1.6rem 1.6rem;
    background-color: #fff
}

.reload.v2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.reload.v2 .btn-reload {
    position: relative;
    margin-left: auto;
    z-index: 1
}

.wrap-progress {
    padding-bottom: 3rem;
    margin-top: -2.5rem
}

.wrap-progress .title {
    font-weight: 500;
    font-size: 1.8rem;
    margin-bottom: 1.6rem
}

.wrap-progress .progress {
    overflow: initial;
    border-radius: 0.7rem;
    background-color: #eee
}

.wrap-progress .progress-bar {
    position: relative;
    background-color: #0D8DC8;
    border-radius: 0.7rem
}

.wrap-progress .progress-bar span {
    position: absolute;
    right: -1.5rem;
    top: calc(100% + 0.5rem);
    color: #000;
    font-size: 1.6rem;
    font-weight: 500;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 3rem
}

.profile-user .modal-dialog {
    max-width: 50rem
}

.profile-user .head-modal {
    padding: 0;
    border: none;
    position: static
}

.profile-user .btn-close-modal {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 2rem;
    top: 1rem;
    right: 1rem;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.22);
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.22);
    z-index: 999
}

.profile-user .wrap-modal {
    padding-top: 0
}

.banner-user {
    width: calc(100% + 4rem);
    margin-left: -2rem
}

.banner-user img {
    width: 100%
}

.info-user-top {
    margin-top: -10rem;
    border-bottom: 1px solid #E6E6E6;
    padding-bottom: 1rem;
    margin-bottom: 1.8rem
}

.info-user-top .avt {
    text-align: center;
    margin-bottom: 1rem
}

.info-user-top .avt .img {
    position: relative;
    border-radius: 50%;
    display: inline-block;
    width: 17rem;
    height: 17rem;
    border: 3px solid #fff;
    overflow: hidden
}

.info-user-top .avt .img img {
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    max-width: unset
}

.info-user-top .avt.closed img {
    -webkit-filter: blur(0.25rem);
    filter: blur(0.25rem)
}

.info-user-top .avt.closed .text-closed {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    font-size: 1.8rem;
    font-weight: 600
}

.info-user-top .info {
    text-align: center;
    margin-bottom: 1rem
}

.info-user-top .info .name {
    font-weight: 700;
    font-size: 2rem
}

.info-user-top .info .name.noname {
    opacity: 0.25
}

.info-user-top .info .date-birth {
    color: #5f5f5f;
    font-size: 1.6rem
}

.info-user-top .control {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 1rem
}

.info-user-top .control .btn-user {
    background-color: #0D8DC8;
    color: #fff;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 4rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.info-user-top .control .btn-user:hover {
    background-color: #0a6b98
}

.info-user-top .control .drop-pri {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4rem;
    flex: 0 0 4rem;
    width: 4rem;
    height: 4rem;
    margin-left: 0.8rem
}

.info-user-top .control .drop-pri .label {
    width: 4rem;
    height: 4rem;
    border-radius: 0.6rem;
    background-color: #E3E3E3;
    color: #000
}

.info-user-top .control .drop-pri ul {
    left: inherit;
    right: 0
}

.info-user-top .story li {
    margin: 0.9rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #5F5F5F
}

.info-user-top .story li p {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.5em;
    max-height: calc(1.5em * 1)
}

.info-user-top .story li .ic {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 1.7rem;
    flex: 0 0 1.7rem;
    margin-right: 0.8rem;
    color: #949494;
    font-size: 1.7rem;
    margin-top: 0.3rem
}

.info-user-top .story li strong {
    font-weight: 600;
    color: #000
}

.tb-info {
    margin-bottom: 0;
    border: 1px solid #e6e6e6
}

.tb-info tr:first-child td {
    border-top: none
}

.tb-info td {
    border-color: #e6e6e6;
    padding: 1rem;
    vertical-align: middle
}

.tb-info td:first-child {
    color: #5F5F5F;
    width: 33.33333%;
    background-color: #F1F1F5
}

.tb-info td strong {
    font-weight: 400
}

.list-tags-pri .item.v2 {
    max-width: 100%
}

.list-tags-pri .item.v2 span {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.5em;
    height: calc(1.5em * 1)
}

.btn-eye {
    position: absolute;
    right: 1.4rem;
    bottom: 1rem;
    font-size: 1.8rem;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.btn-eye:hover {
    color: #0D8DC8
}

@media (max-width:1330px) {
    .block-depot-order {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(33.3333% - 1.2rem);
        flex: 0 0 calc(33.3333% - 1.2rem)
    }
}

@media (max-width:991px) {
    .depot-order .modal-dialog {
        max-width: 100%;
        margin: 1.5rem
    }

    .depot-order-post {
        padding-bottom: 20px
    }
}

@media (max-width:767px) {
    .item-depot-order {
        width: calc(33.3333% - 0.8rem)
    }
}

@media (max-width:575px) {
    .modal-pri .modal-dialog {
        max-width: 100%;
        margin: 0
    }

    .modal-pri .modal-content {
        border: none;
        border-radius: 0;
        overflow: hidden
    }

    .wrap-modal {
        max-height: calc(var(--window-height) - 53px);
        /* padding-bottom: 9rem */
    }

    .select-gender .check-number .item .form-control {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .select-gender .check-number .item .i-check {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 48%;
        flex: 0 0 48%
    }

    .select-gender .check-number .item .i-check i {
        margin-right: 0.8rem
    }

    .list-bg-order {
        width: calc(100% + 1rem);
        margin-left: -0.5rem
    }

    .list-bg-order .item {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(20% - 1rem);
        flex: 0 0 calc(20% - 1rem);
        margin: 0.5rem;
        height: 7.5rem
    }

    .head-modal {
        padding: 1.3rem 0
    }

    .profile-user .wrap-modal {
        height: var(--window-height);
        max-height: var(--window-height)
    }

    #popup-order,
    .depot-order,
    .md-confirm,
    .md-profile,
    .md-user {
        margin: 1.5rem
    }

    #popup-order .modal-content,
    .depot-order .modal-content,
    .md-confirm .modal-content,
    .md-profile .modal-content,
    .md-user .modal-content {
        border-radius: 1.2rem
    }

    .review-text-order .ct {
        max-width: 70%
    }

    .item-profile .ct .btn-action {
        margin-top: 1rem
    }

    .item-profile .ct .btn-action .btn {
        margin-left: 0;
        margin-right: 0.5rem
    }

    .item-profile .ct .bottom {
        display: block
    }

    .item-depot-order {
        width: calc(50% - 0.8rem)
    }

    .block-depot-order {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 1.2rem);
        flex: 0 0 calc(50% - 1.2rem)
    }

    .wrap-depot-order.v2 .list-depot-order {
        max-height: 60vh
    }

    .tabs-order .top {
        display: block;
        padding-right: 0;
        text-align: center
    }

    .modal-pri .nav-tabs {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .modal-pri .nav-tabs .nav-item {
        margin: 0
    }

    .modal-pri .nav-tabs .nav-link {
        white-space: nowrap;
        padding: 1rem 1.5rem
    }

    .wrap-depot-order {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }

    .wrap-depot-order.v2 .list-depot-order .item-depot-order {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .block-md .upload-file .item-file-upload {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(50% - 2rem);
        flex: 0 0 calc(50% - 2rem)
    }

    .list-depot-order {
        max-height: 60vh
    }

    .date .form-group:before {
        z-index: 1
    }
}

.z-indexPri .block-post .control-pri {
    z-index: 1 !important
}

.text-danger,
.text-required {
    font-size: 1.4rem !important
}

button:disabled,
button[disabled] {
    opacity: 0.75;
    cursor: default;
    pointer-events: none
}

.warehouse-form .depot-order-post {
    max-height: 51.5rem
}

.warehouse-form .btn-bottom {
    margin: 2rem 1.2rem;
    margin-left: auto;
    width: calc(40% + 1.6rem)
}

@media (max-width:767px) {
    .warehouse-form .btn-bottom {
        width: calc(70% + 1.6rem)
    }
}

.warehouse-form .block-depot-order {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 1.2rem);
    flex: 0 0 calc(50% - 1.2rem)
}

@media (min-width:768px) {
    .warehouse-form .block-depot-order {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(20% - 1.2rem);
        flex: 0 0 calc(20% - 1.2rem)
    }
}

.warehouse-form .tabs-order .top {
    padding: 1rem 2rem;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    border: none
}

@media (max-width:767px) {
    .warehouse-form .tabs-order .top {
        text-align: right
    }
}

.Toastify__toast-container.custom-position {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.Toastify__toast-container.custom-position .confirm-toast-detail {
    min-height: 22rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.Toastify__toast-container.custom-position .confirm-toast-detail .btn-pri.v2.green {
    background-color: #16B216
}

.Toastify__toast-container.custom-position .confirm-toast-detail .btn-pri.v2.green:hover {
    background-color: #108510
}

.Toastify__toast-container.custom-position .confirm-toast-detail .Toastify__toast-body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.Toastify__toast-container.custom-position .confirm-toast-detail .Toastify__toast-body>div:last-child {
    text-align: center;
    font-size: 1.8rem;
    color: #000
}

.Toastify__toast-container.custom-position .confirm-toast-detail .Toastify__toast-icon {
    width: 50px;
    margin-bottom: 2rem
}

body.chat {
    overflow: hidden
}

.main-chat {
    height: calc(var(--window-height) - 60px);
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.sidebar-chat {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 35.3rem;
    flex: 0 0 35.3rem;
    background-color: #fff;
    position: relative;
    border-right: 1px solid #ddd
}

.sidebar-chat .item-block-sb {
    padding: 1.6rem 2.2rem;
    margin-bottom: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 2
}

.sidebar-chat .item-block-sb .form-group {
    margin-bottom: 0
}

.sidebar-chat .item-block-sb .form-group ul {
    border-radius: 0;
    border: none;
    width: calc(100% + 4.4rem);
    left: -2.2rem;
    z-index: 3;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0 2.2rem;
    height: calc(var(--window-height) - 134px);
    top: calc(100% + 1.6rem)
}

.sidebar-chat .item-block-sb .form-group ul li {
    padding: 1.6rem 0;
    border-bottom: 1px solid #EFEFEF
}

.sidebar-chat .item-block-sb .form-group ul li:first-child {
    padding-top: 0
}

.sidebar-chat .item-block-sb .form-group ul li .drop-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 600
}

.sidebar-chat .item-block-sb .form-group ul li .drop-item .avt {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 5rem;
    flex: 0 0 5rem;
    margin-right: 0.8rem
}

.sidebar-chat .item-block-sb .form-group ul li .drop-item .avt img {
    width: 100%;
    height: 5rem;
    border-radius: 50%
}

.sidebar-chat .item-block-sb .form-group ul li .drop-item strong {
    font-weight: 600
}

.content-chat {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #F1F1F5
}

.tabs-contact .nav-tabs {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 74px;
    background-color: #fff;
    z-index: 1
}

.tabs-contact .nav-tabs .nav-item {
    margin-bottom: 0;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%
}

.tabs-contact .nav-tabs .nav-link {
    border: none;
    font-weight: 500;
    font-size: 1.8rem;
    color: #7D7D7D;
    display: block;
    text-align: center;
    padding: 0;
    padding-bottom: 1.2rem;
    position: relative;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out
}

.tabs-contact .nav-tabs .nav-link:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    background-color: #0D8DC8;
    height: 1px;
    width: 0;
    opacity: 1;
    visibility: hidden;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out
}

.tabs-contact .nav-tabs .nav-link:hover {
    color: #0D8DC8
}

.tabs-contact .nav-tabs .nav-link.active {
    color: #0D8DC8;
    font-weight: 600
}

.tabs-contact .nav-tabs .nav-link.active:before {
    width: 100%;
    left: 0;
    opacity: 1;
    visibility: visible
}

.item-contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* width: calc(100% - 4.4rem); */
    /* margin-left: 2.2rem; */
    position: relative;
    padding: 1.5rem 55px 1.5rem 10px;
    border-bottom: 1px solid #EFEFEF;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    cursor: pointer
}

@media (min-width:1200px) {
    .item-contact:hover:before {
        opacity: 1;
        visibility: visible
    }
}

.item-contact:last-child {
    border-bottom: none
}

.item-contact:before {
    content: '';
    position: absolute;
    left: -2.2rem;
    top: -1px;
    width: calc(100% + 4.4rem);
    height: calc(100% + 1px);
    background-color: #F1F1F5;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out
}

.item-contact:after {
    content: '';
    position: absolute;
    left: -2.2rem;
    width: 0.3rem;
    height: calc(100% + 1px);
    bottom: 0;
    background-color: #0D8DC8;
    opacity: 0;
    visibility: hidden
}

.item-contact .avt {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 5rem;
    flex: 0 0 5rem;
    height: 5rem;
    margin-right: 0.8rem
}

.item-contact .avt img {
    width: 100%;
    height: 5rem;
    border-radius: 50%
}

.item-contact .ct {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative
}

.item-contact .ct .name {
    font-weight: 600;
    padding-right: 3.2rem
}

.item-contact .ct .desc {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.5em;
    height: calc(1.5em * 1);
    font-size: 1.4rem;
    font-weight: 500;
    color: #7d7d7d;
    word-break: break-all
}

.item-contact .time {
    position: absolute;
    right: 10px;
    top: 2.2rem;
    color: #7d7d7d;
    font-size: 1.25rem;
    white-space: nowrap;
}

.item-contact .count {
    position: absolute;
    right: 0;
    bottom: 2rem;
    white-space: nowrap;
    font-size: 1.4rem;
    font-weight: 600;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #FF1400;
    color: #fff;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.item-contact .count span {
    font-size: 1.2rem;
    font-weight: 400
}

.item-contact.unread .ct .desc {
    color: #000
}

.item-contact.active {
    border-bottom: none
}

.item-contact.active:after,
.item-contact.active:before {
    opacity: 1;
    visibility: visible
}

.item-contact.system {
    background-color: #f9f9f9;
}
.item-contact.system .ct .name{
    font-weight: 700;
}
.item-contact.system .ct .desc{
    font-weight: 600;
}
.item-contact.system .avt,.top-chat.system .info-contact .avt{
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    padding: 0 0 0 3px;
    border: 3px solid #2e89ff;
}
.top-chat.system .info-contact .avt{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 6rem;
    flex: 0 0 6rem;
}
.item-contact.system .avt img,.top-chat.system .info-contact .avt img{
    object-fit: fill;    
    border-radius: 0;
    /* height: 100%; */
}
.item-contact.system .time .fas{
    transform: rotateZ(45deg);
    font-size: 10px;
    margin-right: 3px;
    color:#cfd3d7
}
.tabs-contact .infinite-scroll-component{
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.top-chat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.8rem 2.2rem;
    background-color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    border-bottom: 1px solid #DDD;
    z-index: 1
}

.top-chat .info-contact {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.top-chat .info-contact .avt {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 5rem;
    flex: 0 0 5rem;
    margin-right: 0.8rem
}

.top-chat .info-contact .avt img {
    height: 5rem;
    width: 100%;
    border-radius: 50%
}

.top-chat .info-contact .name {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.2
}

.top-chat .info-contact .time {
    color: #7D7D7D;
    font-size: 1.4rem
}

.top-chat .ic-search {
    color: #7d7d7d;
    font-size: 2rem;
    padding: 0 1.2rem;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.top-chat .ic-search:hover {
    color: #0D8DC8
}

.top-chat .ic-search.active {
    color: #0D8DC8
}

.search-mess {
    position: absolute;
    left: 0;
    top: calc(100% + 1px);
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid #DDDDDD;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out
}

.search-mess .form-control {
    border: none;
    border-radius: 0;
    height: 5rem;
    font-size: 1.6rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-left: 2.2rem
}

.search-mess.active {
    opacity: 1;
    visibility: visible
}

.close-search-mess {
    margin-right: 2rem;
    background-color: #fff;
    width: 5rem;
    color: #7C7C7C;
    font-size: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out
}

.close-search-mess:hover {
    color: #0D8DC8
}

.wrap-chat {
    padding: 2rem 2.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.block-chat {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 50%;
    margin-bottom: 2rem
}

.block-chat.v2 {
    margin-left: 50%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.block-chat.v2 .avt {
    margin-right: 0;
    margin-left: 0.8rem
}

.block-chat.v2 .content {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.block-chat.v2 .item-chat .ct {
    background-color: #D9ECF5
}

.block-chat.v2 .item-chat .control {
    left: inherit;
    right: calc(100% + 0.9rem)
}

.block-chat.v2 .item-chat .control:before {
    right: -1rem;
    left: inherit
}

.block-chat.v2 .item-chat .control .drop-pri ul {
    right: inherit;
    left: 0
}

.block-chat.v2 .item-chat.file .ct-file .btn-download {
    background-color: #B4D1DE
}

.block-chat.v2 .item-chat.file .ct-file .btn-download:hover {
    background-color: #91bbce
}

.block-chat.v2 .chat-reply {
    background-color: #B7D9EA
}

.block-chat.system {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: center;
    /* -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; */
    max-width: 90%;
    align-items: start;
    margin-bottom: 0
}

.block-chat.v2 .block-chat.system {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
}

.block-chat .block-chat.system .react-photo-album--column>div {
    justify-content: start !important;
}

.block-chat.v2 .block-chat.system .react-photo-album--column>div {
    justify-content: end !important;
}

.block-chat.system .item-chat {
    margin-bottom: 0.8rem;
    cursor: pointer
}

.block-chat.system .item-chat .ct {
    border-radius: 2rem;
    font-weight: 500;
    -webkit-box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.1);
    text-align: center
}

.block-chat.system .item-chat.contact {
    text-align: left
}

.block-chat.system .item-chat.contact .ct {
    border-radius: 1rem
}

.block-chat.system .item-chat.contact .ct-contact {
    text-align: left
}

.block-chat .avt {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4rem;
    flex: 0 0 4rem;
    margin-right: 0.8rem
}

.block-chat .avt img {
    height: 4rem;
    width: 100%;
    border-radius: 50%;
    cursor: pointer
}

.block-chat .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.item-chat {
    margin-bottom: 0.6rem;
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.item-chat:last-child {
    margin-bottom: 0
}

.item-chat.system .info {
    display: block;
}

.item-chat.system .info .name,
.item-chat.system .info .phone,
.item-chat.system .info .job-name{
    margin-left: 4px;
}

.item-chat.system .info .name {
    width: 50px;
    -webkit-line-clamp: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.item-chat .ct {
    background-color: #fff;
    border-radius: 1rem;
    padding: 1rem 1.2rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    min-width: 15rem
}

.item-chat .ct.typing {
    min-height: 4rem;
    min-width: 8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.item-chat .ct .text {
    word-break: break-all
}

.item-chat .time {
    color: #7D7D7D;
    font-size: 1.3rem;
    margin-top: 0.8rem;
    white-space: nowrap
}

.item-chat .status-chat {
    position: absolute;
    right: 1.2rem;
    bottom: 1rem;
    color: #7D7D7D;
    font-size: 1.3rem;
    white-space: nowrap
}

.item-chat .control {
    position: absolute;
    padding: 0 0.8rem;
    height: 2.6rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: calc(100% + 0.9rem);
    background-color: #EAEAEA;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 0.6rem;
    z-index: 1;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    opacity: 0;
    visibility: hidden;
    z-index: 3
}

.item-chat .control:before {
    content: '';
    position: absolute;
    width: 1rem;
    left: -1rem;
    height: calc(100% + 2rem);
    top: -1rem
}

.item-chat .control .ic-reply {
    color: #8A8A8A;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.item-chat .control .ic-reply:hover {
    color: #0D8DC8
}

.item-chat .control .drop-pri {
    margin-left: 0.7rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.item-chat .control .drop-pri .label {
    width: 1.8rem;
    height: 1.8rem;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: #8A8A8A;
    font-size: 1.8rem;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.item-chat .control .drop-pri .label:hover {
    color: #0D8DC8
}

.item-chat .control .drop-pri ul {
    border-radius: 1rem;
    right: -1rem;
    left: inherit;
    top: calc(100% + 0.8rem)
}

.item-chat:hover .control {
    opacity: 1;
    visibility: visible
}

.item-chat:hover .emoji-post {
    opacity: 1;
    visibility: visible
}

.item-chat .emoji-post {
    bottom: -1.3rem;
    right: 1.6rem;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.item-chat .emoji-post.active {
    opacity: 1;
    visibility: visible
}

.item-chat.contact {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.item-chat.contact .ct {
    background-color: #fff !important;
    border: 1px solid #EBEBEB;
    padding: 1.5rem;
    min-width: 38rem;
    max-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.item-chat.contact .ct .avt-contact {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 6rem;
    flex: 0 0 6rem;
    margin-right: 1.2rem;
    height: 6rem
}

.item-chat.contact .ct .avt-contact img {
    border-radius: 50%;
    width: 100%;
    height: 6rem
}

.item-chat.contact .ct .ct-contact {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.item-chat.contact .ct .ct-contact .name {
    font-weight: 600;
    font-size: 1.6rem
}

.item-chat.contact .ct .ct-contact .info {
    font-size: 1.2rem;
    margin-bottom: 0.3rem
}

.item-chat.contact .ct .ct-contact .status-contact {
    background-color: #F7D0D0;
    color: #ED1806;
    font-weight: 500;
    font-size: 1.2rem;
    white-space: nowrap;
    height: 2.4rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 0.6rem;
    padding: 0 1.1rem
}

.item-chat.contact .ct .ct-contact .status-contact.green {
    background-color: #16B216;
    color: #fff
}

.item-chat.file {
    width: 100%
}

.item-chat.file .ct {
    width: 100%
}

.item-chat.file .ct-file {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 1rem;
    width: 100%;
    position: relative;
    padding-right: 5.6rem
}

.item-chat.file .ct-file .ic {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 5rem;
    flex: 0 0 5rem;
    margin-right: 1.7rem
}

.item-chat.file .ct-file .ic img {
    width: 100%
}

.item-chat.file .ct-file .right .name {
    font-weight: 500;
    color: #000;
    word-break: break-all;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.4em;
    height: calc(1.4em * 1)
}

.item-chat.file .ct-file .right .size {
    font-size: 1.4rem
}

.item-chat.file .ct-file .btn-download {
    position: absolute;
    top: 1rem;
    right: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.8rem;
    background-color: #eaeaea;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 2.4rem;
    color: #292D32;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.item-chat.file .ct-file .btn-download:hover {
    background-color: #d1d1d1
}

.w0 {
    width: 50%
}

.item-chat.item-select-reply .ct {
    -webkit-animation: scaleItem 2s linear;
    animation: scaleItem 2s linear
}

@-webkit-keyframes scaleItem {
    0% {
        background-color: #fff;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    25% {
        background-color: rgba(13, 141, 200, 0.5);
        -webkit-transform: scale(1.01);
        transform: scale(1.01)
    }

    50% {
        background-color: #0d8dc8;
        -webkit-transform: scale(1.02);
        transform: scale(1.02)
    }

    75% {
        background-color: rgba(13, 141, 200, 0.5);
        -webkit-transform: scale(1.01);
        transform: scale(1.01)
    }

    to {
        background-color: #fff;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scaleItem {
    0% {
        background-color: #fff;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    25% {
        background-color: rgba(13, 141, 200, 0.5);
        -webkit-transform: scale(1.01);
        transform: scale(1.01)
    }

    50% {
        background-color: #0d8dc8;
        -webkit-transform: scale(1.02);
        transform: scale(1.02)
    }

    75% {
        background-color: rgba(13, 141, 200, 0.5);
        -webkit-transform: scale(1.01);
        transform: scale(1.01)
    }

    to {
        background-color: #fff;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.chat-reply {
    margin-top: 0.5rem;
    background-color: #F4F4F4;
    border-radius: 0.3rem;
    padding: 0.7rem 1.2rem 1rem 0.8rem;
    margin-bottom: 1rem;
    cursor: pointer
}

.chat-reply.v2 {
    background-color: #f7f7f7;
    margin-top: 0;
    position: relative
}

.chat-reply.v2 .name {
    font-weight: 400
}

.chat-reply.v2 .btn-close-reply {
    position: absolute;
    right: 1.2rem;
    top: 0.6rem;
    color: #878787;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.chat-reply.v2 .btn-close-reply:hover {
    color: #0D8DC8
}

.chat-reply .reply-content {
    padding-left: 0.8rem;
    border-left: 2px solid #0D8DC8
}

.chat-reply .name {
    font-weight: 600
}

.chat-reply .desc {
    color: #7D7D7D;
    line-height: 1.2
}

.form-chat-pri {
    border-top: 1px solid #0D8DC8;
    padding: 1.6rem 2.2rem;
    position: relative;
    background-color: #fff
}

.form-chat-pri .form-group {
    margin-bottom: 0;
    position: relative;
    padding-right: 19rem
}

.form-chat-pri .action-chat {
    position: absolute;
    bottom: 0;
    right: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.form-chat-pri .action-chat .item {
    font-size: 2.6rem;
    color: #7D7D7D;
    margin-left: 2.2rem;
    line-height: 0.8;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.form-chat-pri .action-chat .item:first-child {
    margin-left: 0
}

.form-chat-pri .action-chat .item .fa-paperclip {
    font-size: 2.2rem
}

.form-chat-pri .action-chat .item.isax-send-15 {
    font-size: 3rem
}

@media (min-width:992px) {
    .form-chat-pri .action-chat .item:hover {
        color: #0D8DC8
    }
}

.form-chat-pri .action-chat .btn-send.active {
    color: #0D8DC8
}

.form-chat-pri [contenteditable=true] {
    outline: none !important;
    max-height: 16rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 0;
    position: relative
}

.form-chat-pri [contenteditable=true]:empty:before {
    content: attr(placeholder);
    pointer-events: none;
    display: block;
    color: #7D7D7D
}

.btn-back-screen {
    display: none
}

.dot-flashing {
    position: relative;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 5px;
    background-color: #DFDFDF;
    color: #DFDFDF;
    -webkit-animation: dotFlashing 0.5s infinite linear alternate;
    animation: dotFlashing 0.5s infinite linear alternate;
    -webkit-animation-delay: .25s;
    animation-delay: .25s
}

.dot-flashing:after,
.dot-flashing:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0
}

.dot-flashing:before {
    left: -12px;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 5px;
    background-color: #DFDFDF;
    color: #DFDFDF;
    -webkit-animation: dotFlashing 0.5s infinite alternate;
    animation: dotFlashing 0.5s infinite alternate;
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.dot-flashing:after {
    left: 12px;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 5px;
    background-color: #DFDFDF;
    color: #DFDFDF;
    -webkit-animation: dotFlashing 0.5s infinite alternate;
    animation: dotFlashing 0.5s infinite alternate;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s
}

@-webkit-keyframes dotFlashing {
    0% {
        background-color: rgba(223, 223, 223, 0.2)
    }

    50%,
    to {
        background-color: #DFDFDF
    }
}

@keyframes dotFlashing {
    0% {
        background-color: rgba(223, 223, 223, 0.2)
    }

    50%,
    to {
        background-color: #DFDFDF
    }
}

@media (max-width:1300px) {
    .block-chat {
        max-width: 70%
    }

    .block-chat.v2 {
        margin-left: 30%
    }
}

@media (max-width:1199px) {
    .block-chat {
        max-width: 90%
    }

    .block-chat.v2 {
        margin-left: 10%
    }
}

@media (max-width:991px) {
    .main-chat {
        padding-top: 56.63px;
        height: calc(var(--window-height) - 55px);
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out
    }

    .main-chat.long {
        height: var(--window-height)
    }

    .top-chat {
        position: fixed;
        left: 0;
        width: 100%;
        padding-left: 5rem;
        top: 56.63px;
        z-index: 9999
    }
}

@media (max-width:991px) and (max-width:575px) {
    .top-chat {
        top: 50px
    }
}

@media (max-width:991px) {
    .wrap-chat {
        padding-bottom: 120px
    }

    .item-chat.contact .ct {
        min-width: 30rem
    }

    .tabs-contact .nav-tabs {
        position: fixed;
        width: 100%;
        top: 126.46px;
        z-index: 1
    }

    .form-chat-pri {
        position: fixed;
        left: 0;
        bottom: 55px;
        width: 100%;
        z-index: 9;
        -webkit-transition: 0.2s ease-in-out;
        -o-transition: 0.2s ease-in-out;
        transition: 0.2s ease-in-out
    }

    .form-chat-pri.translate {
        bottom: 0
    }

    .sidebar-chat {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out
    }

    .sidebar-chat.hide {
        opacity: 0;
        visibility: hidden
    }

    .content-chat {
        position: absolute;
        left: 100%;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        padding-top: 112.93px;
        z-index: 9;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out
    }
}

@media (max-width:991px) and (max-width:575px) {
    .content-chat {
        padding-top: 102.27px
    }
}

@media (max-width:991px) {
    .content-chat.active {
        left: 0;
        opacity: 1;
        visibility: visible
    }

    .btn-back-screen {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 4rem;
        height: 4rem;
        font-size: 2.2rem;
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #000 !important
    }

    .wrap-list-contact {
        padding-bottom: 120px;
        padding-top: 106.61px
    }

    .sidebar-chat .item-block-sb {
        position: fixed;
        top: 56.63px;
        width: 100%;
        z-index: 3
    }

    .sidebar-chat .item-block-sb .form-group ul {
        height: calc(var(--window-height) - 181.46px);
        padding-bottom: 100px
    }
}

@media (max-width:575px) {
    .main-chat {
        padding-top: 50px
    }

    .wrap-chat {
        padding-left: 12px;
        padding-right: 12px
    }

    .top-chat {
        padding-right: 10px
    }

    .wrap-list-contact {
        padding-top: 88.38px
    }

    .sidebar-chat .item-block-sb {
        padding: 10px 15px;
        top: 50px
    }

    .tabs-contact .nav-tabs {
        top: 106.75px
    }

    .tabs-contact .nav-tabs .nav-link {
        padding-bottom: 8px
    }

    .form-chat-pri {
        padding: 10px
    }

    .form-chat-pri .action-chat {
        top: 2px
    }

    .form-chat-pri .action-chat .item {
        margin-left: 10px;
        font-size: 2.2rem;
        line-height: 1.1
    }

    .form-chat-pri .action-chat .item.btn-gallery {
        margin-top: 1px
    }

    .form-chat-pri .form-group {
        padding-right: 125px
    }

    .form-chat-pri [contenteditable=true] {
        max-height: 100px
    }

    .search-mess .form-control {
        padding-left: 12px
    }

    .close-search-mess {
        margin-right: 10px
    }

    .emoji-post .btn-heart {
        font-size: 15px
    }

    .item-chat .control {
        left: calc(100% - 14px)
    }

    .block-chat.v2 .item-chat .control {
        right: calc(100% - 25px)
    }

    .sidebar-chat .item-block-sb .form-group ul {
        height: calc(var(--window-height) - 161.75px);
        padding-bottom: 100px
    }
}

.page-login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: var(--window-height);
    background-color: #fff
}

.login-company-info {
    font-size: 10px;
    margin-top: 50px;
}

@media(max-width:991px) {
    .login-company-info {
        margin-top: 0;
    }
}

.page-login.notifi .ct {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    margin: 0 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-width: 50.8rem;
    text-align: center
}

.page-login.notifi .ct .img {
    margin-bottom: 4rem
}

.page-login.notifi .ct .title-noti {
    font-weight: 600;
    font-size: 3.2rem;
    margin-bottom: 1.5rem;
    line-height: 1.2
}

.page-login.notifi .ct .desc-noti {
    font-size: 1.8rem;
    line-height: calc(24/18);
    color: #595959;
    margin-bottom: 3rem
}

.btn-noti {
    background-color: #0D8DC8;
    border-radius: 0.8rem;
    color: #fff !important;
    font-weight: 600;
    font-size: 1.6rem;
    height: 5.4rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 38rem;
    max-width: 100%;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.btn-noti.gray {
    background-color: #DFDFDF;
    color: #464646 !important;
    border: 1px solid #C1C1C1
}

.btn-noti.gray:hover {
    background-color: #c6c6c6
}

.btn-noti:hover {
    background-color: #0a6b98
}

.banner-login {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 100%;
    position: relative
}

.banner-login img {
    width: 100%;
    height: 100%
}

.content-login {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 40.763888889%;
    flex: 0 0 40.763888889%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 5%;
    position: relative
}

.type-login li {
    margin-bottom: 1rem;
    border-radius: 0.8rem;
    overflow: hidden;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.type-login li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    height: 5.4rem;
    color: #fff;
    font-weight: 600;
    font-size: 1.8rem
}

.type-login li i {
    position: absolute;
    width: 5.5rem;
    height: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.type-login li i:after {
    content: '';
    position: absolute;
    right: -2px;
    top: 0;
    width: 1px;
    height: 100%
}

.type-login li.facebook {
    background-color: #116ADE
}

.type-login li.facebook i {
    border-right: 1px solid #0153BE
}

.type-login li.facebook i:after {
    background-color: #1576F4
}

.type-login li.facebook:hover {
    background-color: #0d53af
}

.type-login li.google {
    background-color: #DB4B3F
}

.type-login li.google i {
    border-right: 1px solid #D53B2E
}

.type-login li.google i:after {
    background-color: #E64D40
}

.type-login li.google:hover {
    background-color: #c33124
}

.type-login li.phone {
    background-color: #2F9E9A
}

.type-login li.phone i {
    border-right: 1px solid #20938F
}

.type-login li.phone i:after {
    background-color: #35B7B2
}

.type-login li.phone:hover {
    background-color: #237774
}

.note-login {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-bottom: 3rem;
    color: #595959
}

.note-login a {
    color: #0D8DC8;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    font-weight: 500;
    position: relative
}

.note-login a:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #0D8DC8;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.note-login a:hover {
    color: #0a6b98
}

.note-login a:hover:before {
    background-color: #0a6b98
}

.note-login.back a {
    color: #5F5F5F;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 600;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.note-login.back a span {
    margin-right: 0.6rem;
    font-size: 1.8rem
}

.note-login.back a:before {
    display: none
}

.note-login.back a:hover {
    color: #0D8DC8
}

.note-login.v2 {
    position: relative;
    bottom: inherit;
    left: inherit;
    text-align: left;
    padding-bottom: 2.5rem;
    padding-top: 1.2rem;
    padding-left: 0.6rem;
    font-size: 1.8rem
}

.logo-login {
    position: relative
}

.logo-login img {
    width: 18.686rem;
    margin-bottom: 3rem
}

.text-required {
    margin-top: 0.5rem;
    color: red
}

.wrap-form-login {
    padding: 2rem
}

.ct-login {
    width: 41.3rem;
    max-width: 100%;
    text-align: left
}

.ct-login .title {
    font-weight: 700;
    font-size: 3.4rem;
    margin-bottom: 1.5rem;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.ct-login .desc {
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 3.5rem;
    color: #595959
}

.ct-login .desc a {
    color: #0D8DC8;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    border-bottom: 1px solid #0D8DC8
}

.ct-login .desc a:hover {
    color: #0a6b98
}

.form-date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    background: #F1F1F5;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 1.2rem
}

.form-date .form-control {
    text-align: center;
    padding: 0 !important;
    border: none !important
}

.form-date .form-control.day {
    width: 20px
}

.form-date .form-control.month {
    width: 25px
}

.form-date .form-control.year {
    width: 38px;
    text-align: left
}

.form-date .form-control:active,
.form-date .form-control:focus {
    border-color: unset !important
}

.form-login {
    margin-top: 3.5rem;
    width: calc(100% + 1.2rem);
    margin-left: -0.6rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.form-login .input-wrapper {
    position: relative;
    width: 100%
}

.form-login .form-group {
    margin-bottom: 1.4rem;
    width: calc(100% - 1.2rem);
    margin-left: 0.6rem;
    margin-right: 0.6rem;
    position: relative
}

.form-login .form-group.w50 {
    width: calc(50% - 1.2rem);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.form-login .form-group .check-login {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%
}

.form-login .form-group .label,
.form-login .form-group .title {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 0.9rem;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    color: #4e4e4e;
}

.form-login .form-group .label.required:after,
.form-login .form-group .title.required:after {
    content: "*";
    display: inline-block;
    color: #e10000
}

.form-login .form-group .i-check {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.form-login .form-group .i-check i {
    margin-right: 0.7rem;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 2.6rem;
    flex: 0 0 2.6rem;
    width: 2.6rem;
    height: 2.6rem;
    line-height: 2.4rem;
    background-color: #f1f1f5
}

.form-login .form-group .i-check i:after {
    font-size: 1.8rem
}

.form-login .form-group .i-check span {
    color: #464646;
    white-space: nowrap
}

.form-login .form-group .i-check input:checked+i {
    background-color: #0D8DC8
}

.form-login .form-group .react-tel-input .form-control {
    font-size: 1.6rem !important;
    border: 1px solid #e1e1e1 !important;
    background-color: #F4F4F4 !important;
    border-radius: 0.8rem !important;
    padding-left: 9rem !important
}

@media (min-width:767px) {
    .form-login .form-group .react-tel-input .form-control {
        padding-left: 8rem !important
    }
}

.form-login .form-group .react-tel-input .flag-dropdown.open {
    background: #F4F4F4 !important;
    border-radius: 0.8rem 0 0 0
}

.form-login .form-group .react-tel-input .flag-dropdown.open .selected-flag {
    background: #F4F4F4 !important;
    border-radius: 0.8rem 0 0 0
}

.form-login .form-group .react-tel-input .selected-flag {
    width: 68px;
    padding: 0;
    border-radius: 0.8rem 0 0 0.8rem;
    border: 1px solid #e1e1e1 !important
}

.form-login .form-group .react-tel-input .selected-flag .flag {
    -webkit-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
    left: 22px
}

.form-login .form-group .react-tel-input .selected-flag .flag .arrow {
    left: 20px;
    border-top: 4px solid #999999
}

.form-login .form-group .react-tel-input .selected-flag .flag .arrow.up {
    border-top: none;
    border-bottom: 4px solid #999999
}

.form-login .form-group .react-tel-input .selected-flag:focus,
.form-login .form-group .react-tel-input .selected-flag:hover {
    background-color: #F4F4F4 !important
}

.form-login .form-group .react-tel-input .flag-dropdown {
    border: none;
    background-color: unset
}

.form-login .form-group .form-control {
    background-color: #F4F4F4;
    border-radius: 0.8rem;
    height: 5.2rem !important;
    border: 1px solid #e1e1e1;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #000;
    font-size: 1.6rem;
    padding-left: 1.5rem;
    padding-right: 4.6rem;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.form-login .form-group .form-control::-webkit-input-placeholder {
    color: #999
}

.form-login .form-group .form-control:-ms-input-placeholder {
    color: #999
}

.form-login .form-group .form-control::-ms-input-placeholder {
    color: #999
}

.form-login .form-group .form-control::placeholder {
    color: #999
}

.form-login .form-group .form-control:focus {
    border-color: #0D8DC8
}

.form-login .form-group .form-control.otp {
    text-align: center;
    font-weight: 500;
    font-size: 2.6rem;
    color: #000;
    letter-spacing: 0.25em;
    padding: 0 1.5rem
}

.form-login .form-group select {
    height: 5.2rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #999 !important
}

.form-login .form-group .ic {
    position: absolute;
    top: 1.5rem;
    right: 1.6rem;
    font-size: 2rem;
    color: #0D8DC8;
    pointer-events: none
}

.form-login .form-group .ic.fa-sort-down {
    top: 1.2rem;
    color: #999
}

.form-login .form-group .check-login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.form-login .btn-login {
    width: 100%;
    height: 5.4rem;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: none;
    background-color: #0D8DC8;
    color: #fff !important;
    border-radius: 0.8rem;
    -webkit-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out
}

.form-login .btn-login:hover {
    background-color: #0a6b98
}

.form-login .btn-login.active {
    color: #fff;
    background-color: #4A528A
}

.form-login .btn-login.active:hover {
    background-color: #414879
}

.form-login .btn-login.loading {
    color: #fff;
    background-color: #979EC9;
    pointer-events: none
}

.avt-login {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 1rem
}

.avt-login .avt {
    display: inline-block;
    margin-bottom: 0.7rem;
    width: 8.6rem;
    height: 8.6rem;
    border-radius: 50%;
    overflow: hidden
}

.avt-login .avt img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.avt-login .upload-avt {
    color: #0D8DC8;
    display: inline-block;
    line-height: 1;
    position: relative;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.avt-login .upload-avt:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #0D8DC8;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s
}

.avt-login .upload-avt:hover {
    color: #0a6b98
}

.avt-login .upload-avt:hover:before {
    background-color: #0a6b98
}

@media (max-height:700px) {
    .content-login {
        padding-bottom: 2%
    }

    .ct-login .title {
        font-size: 2.6rem
    }

    .ct-login .desc {
        font-size: 1.6rem;
        margin-bottom: 2.5rem
    }

    .type-login li a {
        font-size: 1.6rem;
        height: 4.6rem
    }

    .logo-login img {
        max-width: 14rem
    }

    .avt-login {
        margin-bottom: 0.2rem
    }

    .avt-login .avt {
        width: 6rem;
        height: 6rem
    }

    .form-login {
        margin-top: 2rem
    }

    .form-login .form-group .form-control {
        height: 4.2rem
    }

    .form-login .form-group .ic {
        top: 1.1rem
    }

    .form-login .form-group .ic.fa-sort-down {
        top: 0.7rem
    }

    .form-login .form-group select {
        height: 4.2rem !important
    }

    .form-login .form-group .label {
        font-size: 1.6rem
    }

    .form-login .btn-login {
        height: 4.4rem
    }

    .note-login.v2 {
        font-size: 1.6rem
    }

    .note-login .back {
        padding-bottom: 1.5rem
    }

    .page-login.notifi .ct .img {
        margin-bottom: 3rem
    }

    .page-login.notifi .ct .title-noti {
        font-size: 2.6rem;
        margin-bottom: 1rem
    }

    .page-login.notifi .ct .desc-noti {
        font-size: 1.6rem;
        margin-bottom: 2rem
    }

    .page-login.notifi .ct .btn-noti {
        height: 5rem
    }
}

@media (max-width:991px) {
    .page-login {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        align-items: center;
    }

    .banner-login {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .content-login {
        background-color: #fff;
        /* height: 55%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); */
        border-radius: 1rem;
        -webkit-box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.32);
        box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.32);
        /* min-height: 50rem */
        padding-bottom: 0;
        flex: none;
    }

    .content-login.signup {
        height: 80%
    }
}

@media (max-width:767px) {
    .page-login {
        /* display: block */
    }

    .content-login {
        width: calc(100% - 4rem);
        /* margin-left: 2rem */
    }

    .wrap-form-login {
        width: 100%
    }

    .ct-login {
        width: 100%
    }

    .content-login {
        padding-bottom: 2%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .ct-login .title {
        font-size: 2.6rem
    }

    .ct-login .desc {
        font-size: 1.6rem;
        margin-bottom: 2.5rem
    }

    .type-login li a {
        font-size: 1.6rem;
        height: 4.6rem
    }

    .logo-login img {
        max-width: 14rem
    }

    .avt-login {
        margin-bottom: 0.2rem
    }

    .avt-login .avt {
        width: 6rem;
        height: 6rem
    }

    .form-login {
        margin-top: 2rem
    }

    .form-login .form-group .form-control {
        height: 4.2rem !important
    }

    .form-login .form-group .ic {
        top: 1.1rem
    }

    .form-login .form-group .ic.fa-sort-down {
        top: 0.7rem
    }

    .form-login .form-group select {
        height: 4.2rem !important
    }

    .form-login .form-group .label {
        font-size: 1.6rem
    }

    .form-login .btn-login {
        height: 4.4rem
    }

    .note-login.v2 {
        font-size: 1.6rem
    }

    .note-login .back {
        padding-bottom: 1.5rem
    }

    .page-login.notifi .ct .img {
        margin-bottom: 3rem
    }

    .page-login.notifi .ct .title-noti {
        font-size: 2.6rem;
        margin-bottom: 1rem
    }

    .page-login.notifi .ct .desc-noti {
        font-size: 1.6rem;
        margin-bottom: 2rem
    }

    .page-login.notifi .ct .btn-noti {
        height: 5rem
    }
}

@media (max-width:500px) {
    .page-login.notifi .ct {
        padding: 2rem
    }

    .page-login.notifi .ct .img {
        text-align: center
    }

    .page-login.notifi .ct .img img {
        display: inline-block;
        max-width: 80%;
        margin: 0 auto
    }

    .page-login.notifi .ct .title-noti {
        font-size: 2.6rem
    }

    .page-login.notifi .ct .desc-noti {
        font-size: 1.6rem
    }

    .page-login.notifi .ct .btn-noti {
        height: 5rem
    }

    .note-login {
        padding-bottom: 2rem
    }
}

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
}

/*# sourceMappingURL=main.css.map */