@import url("https://fonts.googleapis.com/css2?family=Mitr:wght@300&display=swap");
@font-face { font-family: 'DBChuanPim'; src: url("../fonts/DBChuanPimX-Light.woff2") format("woff2"), url("../fonts/DBChuanPimX-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'DBChuanPimRegular'; src: url("../fonts/DBChuanPimX.woff2") format("woff2"), url("../fonts/DBChuanPimX.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
.color-main { color: #0e0f10; }

.color-title { color: #313c8a; }

.color-ci { color: #1c4489; }
.color-ci:hover { color: #1c4489; }

.color-ci-2 { color: #f4f7fc; }
.color-ci-2:hover { color: #f4f7fc; }

.color-red { color: #b72226 !important; fill: #b72226; }

.color-green { color: #5cc311; fill: #5cc311; }

.color-gray { color: #9e9e9e; }

.font-xl { font-size: 22px; margin-bottom: 20px; font-weight: 400; font-family: "Mitr", sans-serif; }

.font-lg, .box-col li h2, .box-col-2 h2 { font-size: 18px; color: #1c4489; font-weight: 400; font-family: "Mitr", sans-serif; }

.font-md, .list-status li h3 { font-size: 15px; font-weight: 400; font-family: "Mitr", sans-serif; }

.font-sm { line-height: 1; }
@media (max-width: 767.98px) { .font-sm { font-size: 18px; } }

.sidebarnav .sidebarnav-list > li h2, .box-header h2 { font-family: "Mitr", sans-serif; font-size: 18px; font-family: "Mitr", sans-serif; }

.font-bold { font-weight: 500; }

.font-medium { font-weight: 400; }

.font-light { font-weight: 300; }

.font-small { font-size: 13px; }

.font-small-s { font-size: 12px; }

@media (max-width: 991.98px) { .mb-lg { margin-bottom: 25px !important; } }
@media (max-width: 767.98px) { .mb-md { margin-bottom: 25px !important; } }
@media (max-width: 575.98px) { .mb-sm { margin-bottom: 25px !important; } }
.btn-small { background: #f4f7fc; color: #fff !important; padding: 8px 15px; height: 42px; border-radius: 5px; color: #000; display: inline-block; }
.btn-small .icon-svg { width: 18px; }
.btn-small i { font-size: 18px; color: #fff; }
.btn-small.btn-gray { background: #525659 !important; color: #fff !important; }

.cut-text-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.cut-text-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.cut-text-1 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

html, body { width: 100%; padding: 0; -webkit-font-smoothing: antialiased; }

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

a { text-decoration: none !important; outline: none; transition: all 0.3s; }

p { margin: 0 0 15px; }

ul { list-style: none; padding: 0; }

ol { list-style-type: decimal; list-style-position: outside; padding-left: 20px; }

body { font-family: "DBChuanPim", sans-serif; font-size: 21px; line-height: 1.2; overflow-x: hidden; color: #0e0f10; height: 100%; font-weight: 300; }

.small-text { font-size: 12px; color: #000; }

button { background: none; border: 0; }

button:focus, button:active, input:focus, input:active, textarea:focus, textarea:active { outline: none !important; box-shadow: none !important; -webkit-box-shadow: none !important; }

textarea { resize: none; padding-top: 15px !important; }

select option { font-size: 13px; }

.pad-30 { padding-top: 30px; padding-bottom: 30px; }

.pad-50 { padding-top: 50px; padding-bottom: 50px; }

.bg-gray { background: #f4f4f4; }

.bg-ci { background: #f6f3fd; }

.pad-80 { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 991.98px) { .pad-80 { padding-top: 50px; padding-bottom: 50px; } }

.container-fluid { max-width: 1920px; padding-left: 0; padding-right: 0; }

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

.custom-control-input:checked ~ .custom-control-label::before { background: #1c4489; border-color: #1c4489; }

.custom-red:checked ~ .custom-control-label::before { background: #b72226; border-color: #b72226; }

.custom-checkbox .custom-control-label::before { border-radius: 0; }

.custom-control-label::before { box-shadow: none; }

.form-control { height: 33px; border-radius: 2px !important; background-color: #f5f6f8; border: 1px solid #ebebeb; font-size: 19px; }
.form-control.w-400 { max-width: 400px; }
.form-control.w-200 { max-width: 250px; }

textarea { padding-top: 5px !important; }

select.form-control { padding-top: 2px; }

.bootstrap-touchspin .spin-num { height: 30px; }
.bootstrap-touchspin .btn-primary { background-color: #1c4489; border-color: #1c4489; display: flex; justify-content: center; align-items: center; font-weight: 300; line-height: 1; }
.bootstrap-touchspin .btn-primary > * { line-height: 0.7; }
.bootstrap-touchspin .bootstrap-touchspin-down { border-top: 1px solid #e6e6e9; padding-bottom: 3px !important; }
.bootstrap-touchspin .bootstrap-touchspin-up { padding-bottom: 2px !important; }

.has-search { background-image: url(../images/has-search.png); padding-left: 55px; background-repeat: no-repeat; background-position: center left 5px; }

.has-icon { padding-right: 55px; background-repeat: no-repeat; background-position: center right 5px; }

.datepicker { background-image: url(../images/calendar.png); background-repeat: no-repeat; background-position: center right 10px; padding-right: 25px; }

.g-pass:not(.not-as) { position: absolute; top: 10px; right: 1rem; z-index: 3; font-size: 17px; display: block; text-align: center; color: #ddd; cursor: pointer; pointer-events: all; }

.help-block { color: #b72226; position: absolute; bottom: -20px; left: 0px; }
.help-block ul { margin-bottom: 0; }

.form-main input.form-control, .form-main select.form-control { height: 40px; line-height: 1; }
.form-main .form-control:focus { border-color: #f4f7fc; }
.form-main .datepicker { background: url(../images/calendar.svg) no-repeat #fff; background-size: 20px 20px; background-position: right  15px center; }

.btn-detail { height: 33px; background: #1c4489; color: #fff; display: flex; align-items: center; justify-content: center; text-transform: uppercase; border-radius: 5px; position: relative; min-width: 165px; }
.btn-detail i { font-size: 20px; margin-right: 2px; position: relative; top: 2px; }
.btn-detail .icon-svg { fill: #fff; width: 20px; position: relative; top: -2px; height: 20px; }
.btn-detail .icon-svg.ic-sm { width: 15px; height: 15px; }
.btn-detail.btn-line { background: none; border: 1px solid #ebebeb; color: #0e0f10; min-width: 135px; }
.btn-detail.btn-red { background-color: #b72226; }
.btn-detail.btn-gray { background-color: #7a818d; }

.btn-upload { background: #b72226; color: #fff; position: relative; padding-right: 55px; padding-left: 25px; padding-top: 10px; padding-bottom: 10px; }
.btn-upload:before { position: absolute; right: 0; top: 0; content: ""; width: 30px; height: 100%; background: url(../images/plus.png) center center no-repeat; background-size: 13px 13px; border-left: 1px solid #fff; }

.btn-save { position: relative; padding-right: 55px; }
.btn-save:before { position: absolute; right: 0; top: 0; content: ""; width: 30px; height: 100%; background: url(../images/down-t-arrow.png) center center no-repeat; background-size: 13px 13px; border-left: 1px solid #fff; }
.btn-save i { margin-right: 5px; font-size: 16px; }

.btn-has-i { position: relative; padding: 7px 45px 7px 15px; }
.btn-has-i i { position: absolute; right: 0; top: 0; width: 30px; height: 100%; border-left: 1px solid #fff; color: #fff; font-size: 14px; padding-top: 5px; text-align: center; }

/* The switch - the box around the slider */
.custom-switch .custom-control-label::after { top: 5px; }

.btn-line-border { border-radius: 25px; border: 1px solid #1c4489; padding: 5px 15px; display: inline-block; }

.header { z-index: 9; width: 100%; background: #fff; position: fixed; transition: all 0.3s ease 0s; }
.header .logo { width: 120px; display: block; }
@media (max-width: 991.98px) { .header { position: relative; } }
.header .container-flex { display: flex; align-items: center; justify-content: space-between; padding: 0 25px; height: 85px; position: relative; }
.header .container-flex .right-header { display: flex; }
.header .container-flex .right-header .message-icon { position: relative; padding-left: 15px; margin-left: 15px; border-left: 1px solid #ccc; }

.header .container-flex .right-header .message-icon .message-num, .icon-chat span { background: #b72226; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #fff; position: absolute; right: -5px; top: -5px; border-radius: 100%; }

.wsanimated-arrow { position: relative; transition: all .4s ease-in-out; cursor: pointer; padding: 19px 35px 19px 0; display: none; }
@media (max-width: 991.98px) { .wsanimated-arrow { display: block; } }
.wsanimated-arrow span, .wsanimated-arrow span:before, .wsanimated-arrow span:after { cursor: pointer; height: 2px; width: 20px; background: #1c4489; position: absolute; display: block; content: ''; transition: all 500ms ease-in-out; }
.wsanimated-arrow span:before { top: -7px; width: 26px; }
.wsanimated-arrow span:after { bottom: -7px; width: 20px; }
@media (max-width: 767.98px) { .wsanimated-arrow { padding-left: 0; }
  .wsanimated-arrow:before { display: none; } }

.sidebarnav { color: #0e0f10; width: 17em; transition: all 0.3s; background: #fff; padding-top: 20px; overflow: auto; }
@media (max-width: 1499.98px) { .sidebarnav { width: 12em; } }
@media (max-width: 991.98px) { .sidebarnav { position: fixed; left: -22em; z-index: 10; height: 100vh; top: 0; } }
.sidebarnav.hidemenu { left: 0; }
.sidebarnav .sidebarnav-list { width: 100%; }
.sidebarnav .sidebarnav-list > li { position: relative; padding: 10px  25px 10px 0; }
@media (max-width: 1199.98px) { .sidebarnav .sidebarnav-list > li { padding-left: 25px; } }
.sidebarnav .sidebarnav-list > li h2 { color: #b2b2b2; position: relative; padding-left: 25px; cursor: pointer; }
.sidebarnav .sidebarnav-list > li h2 i { position: absolute; right: 0; top: 2px; cursor: pointer; transition: all 0.3s ease 0s; }
.sidebarnav .sidebarnav-list > li h2.active i { transform: rotate(180deg); }
.sidebarnav .sidebarnav-list .submenu { display: none; }
.sidebarnav .sidebarnav-list .submenu li a { display: block; position: relative; display: flex; align-items: center; width: 100%; z-index: 2; font-family: "DBChuanPimRegular", sans-serif; padding: 5px 5px 5px 25px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.sidebarnav .sidebarnav-list .submenu li a i { margin-right: 10px; font-size: 8px; color: #e8e8e8; }
.sidebarnav .sidebarnav-list .submenu li a:hover, .sidebarnav .sidebarnav-list .submenu li a.active { color: #1c4489; }
.sidebarnav .sidebarnav-list .submenu li a.active { background: #e5eefb; }
.sidebarnav .sidebarnav-list .submenu li a.active i { color: #2e79de; }
.sidebarnav .select-chat .cut-text-1 { width: 100px !important; }
.sidebarnav .select-chat .has-tag .cut-text-1 { width: 50px !important; }

.footer { padding: 15px 25px; }
.footer .container-fluid { display: flex; justify-content: space-between; }
@media (max-width: 767.98px) { .footer .container-fluid { flex-direction: column; text-align: center; } }
.footer aside span { display: inline-block; }
.footer aside span:first-child { padding-right: 15px; margin-right: 15px; border-right: 1px solid #1c4489; }

.row-s { margin-left: -2.5px; margin-right: -2.5px; }
.row-s [class*="col-"] { padding-left: 2.5px; padding-right: 2.5px; }

.row-half { margin-left: -7.5px; margin-right: -7.5px; }
.row-half [class*="col-"] { padding-left: 7px; padding-right: 7px; }

.cut-text-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.cut-text-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.cut-text-1 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

@media (max-width: 991.98px) { .row-lg-s { margin-left: -2.5px; margin-right: -2.5px; }
  .row-lg-s [class*="col-"] { padding-left: 2.5px; padding-right: 2.5px; } }
.pd-lr { padding-left: 20px; padding-right: 20px; }

.d-flex-beetween, .title-purchase, .show-grouping { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

.d-flex-center, .tab-main li a, .button-select a, .box-header h2 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

.d-flex-inline { display: flex; align-items: center; }
@media (max-width: 991.98px) { .d-flex-inline { flex-wrap: wrap; } }

.custom-control-label::before, .custom-control-label::after { top: 3px; }

.tab-detail { display: none; }

.main { padding-top: 85px; overflow: hidden; height: calc(100vh); }
.main.main-chat .sidebarnav { border-top: 1px solid #eff0f1; }
@media (max-width: 991.98px) { .main { height: auto; padding-top: 0; } }

#content-wrapper { width: 100%; overflow: auto; background: #f4f7fc; border-radius: 40px; }
@media (max-width: 1199.98px) { #content-wrapper { overflow: visible; } }
#content-wrapper .content-detail { padding: 10px 10px 50px; }

#content-message { width: 100%; border-top: 1px solid #eff0f1; border-left: 1px solid #eff0f1; }

.container-900 { width: 100%; max-width: 940px; margin: 0 auto; }

.container-1000 { width: 100%; max-width: 1020px; margin: 0 auto; padding: 25px 15px; }
.container-1000 .font-xl { color: #1c4489; }

.container-1200 { width: 100%; max-width: 1200px; margin: 0 auto; }

.container-750 { width: 100%; max-width: 750px; margin: 0 auto; }

.container-1-row { width: 100%; max-width: 860px; margin: 0 auto; padding: 25px 15px; }

.font-xl { color: #1c4489; }

.container-2-row { width: 100%; max-width: 1300px; margin: 0 auto; padding: 25px 15px; }
.container-2-row .font-xl { color: #1c4489; }
.container-2-row .col-xl-8 { flex: 0 0 68%; max-width: 68%; }
@media (max-width: 1199.98px) { .container-2-row .col-xl-8 { flex: 0 0 100%; max-width: 100%; } }
.container-2-row .col-xl-4 { flex: 0 0 32%; max-width: 32%; }
@media (max-width: 1199.98px) { .container-2-row .col-xl-4 { flex: 0 0 100%; max-width: 100%; } }

.pad-30 { padding-top: 30px; padding-bottom: 30px; }

.pad-15 { padding-top: 15px; padding-bottom: 15px; }

.box-col { display: flex; background: #fff; }
.box-col li { flex-grow: 1; display: flex; align-items: center; flex-direction: column; justify-content: center; height: 115px; border-right: 1px solid #f3f3f3; }
.box-col li h2 { color: #b72226; }
.box-col li p { margin-bottom: 0; color: #1c4489; text-align: center; }

.box-col-2 { display: flex; background: #fff; flex-wrap: wrap; }
.box-col-2 > li { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; height: 115px; border-right: 1px solid #f3f3f3; padding: 0 15px; flex-basis: auto; flex-grow: 1; }
.box-col-2 > li:last-child { border-right: 0; }
.box-col-2 h2 { color: #b72226; }
.box-col-2 p { margin-bottom: 0; color: #1c4489; text-align: center; }
.box-col-2 .d-flex { width: 100%; }
.box-col-2 .d-flex li { flex-grow: 1; }

.box-main { background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0px 2px 1px 0px rgba(191, 191, 191, 0.45); }
.box-main .box-pd { padding: 15px; }
.box-main .box-pd-b { padding: 30px 15px; }

.form-filter { margin-bottom: 25px; padding: 25px; border-bottom: 1px solid #f4f4f4; }
.form-filter fieldset { display: flex; align-items: flex-end; }
@media (max-width: 767.98px) { .form-filter fieldset { flex-wrap: wrap; } }
.form-filter fieldset > * { flex-grow: 1; flex-basis: auto; margin-right: 7px; }
.form-filter .form-group { margin-bottom: 0; }

.title-purchase { padding: 0 15px; }

.withus-box-img .icon-svg { width: 100%; max-width: 100%; fill: #000; }

.tab-main { display: flex; background: #fff; padding: 0 2px; }
@media (max-width: 1199.98px) { .tab-main { flex-wrap: wrap; } }
.tab-main li { display: flex; flex-grow: 1; flex-basis: auto; padding: 4px 2px; border-bottom: 1px solid #f4f4f4; }
.tab-main li a { font-family: "Mitr", sans-serif; font-size: 15px; height: 50px; background: #f5f6f8; width: 100%; position: relative; }
.tab-main li a .num-h-tag { background: #b72226; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 100%; font-size: 12px; }
.tab-main li:hover, .tab-main li.active { color: #1c4489; }
.tab-main li:hover a, .tab-main li.active a { background: #e5eefb; }
.tab-main li.active { border-color: #b72226; }
.tab-main.not-grow li { flex-grow: 0; }
.tab-main.not-grow li a { padding: 0 40px; min-width: 200px; }

.status { display: flex; align-items: center; }
.status .dotted { width: 12px; height: 12px; border-radius: 100%; display: block; margin-right: 5px; }
.status.c-green { color: #39ad00; }
.status.c-green .dotted { background: #39ad00; border: 2px solid #bae2a6; }
.status.c-orange { color: #e67200; }
.status.c-orange .dotted { background: #e67200; border: 2px solid #f3d9a1; }
.status.c-red { color: #d2202f; }
.status.c-red .dotted { background: #d2202f; border: 2px solid #f1bcc0; }

.select-fix-w { width: 150px !important; }
.select-fix-w .c-orange { color: #e67200; }
.select-fix-w .c-orange .dotted { background: #e67200; border: 2px solid #f3d9a1; }
.select-fix-w .c-green { color: #39ad00; }
.select-fix-w .c-green .dotted { background: #39ad00; border: 2px solid #bae2a6; }
.select-fix-w .c-red { color: #d2202f; }
.select-fix-w .c-red .dotted { background: #d2202f; border: 2px solid #f1bcc0; }
.select-fix-w .dotted { width: 12px; height: 12px; border-radius: 100%; display: inline-block; margin-right: 5px; position: relative; top: 2px; }
.select-fix-w .dropdown-item.active { background: #f5f6f8; }

.dropdown-menu, .btn { font-size: inherit; }

.page-number { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 15px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
.page-number .page-n-left { display: flex; }
.page-number .page-n-left a { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 100%; color: #98959c; }
.page-number .page-n-left a.active { color: #1c4489; border: 1px solid #1c4489; }
.page-number .page-n-right { display: flex; align-items: center; color: #98959c; }
.page-number .page-n-right .form-control { background: #f6f7fa; border-radius: 2px; border: 0; width: 50px; margin: 0 10px; }
.page-number .left-right-page { display: flex; margin-left: 20px; }
.page-number .left-right-page a { display: flex; background: #bebebe; width: 20px; height: 20px; border-radius: 3px; color: #fff; align-items: center; justify-content: center; margin: 0 2px; }
.page-number .left-right-page a:hover { background: #1c4489; }

.tag-new { background: #f4c7cb; color: #b72226; padding: 0 10px; border-radius: 15px; font-size: 16px; }

.tag-promo { color: #b72226; width: 54px; height: 17px; background: url(../images/tag-promo.png) no-repeat; background-size: cover; font-size: 16px; display: inline-block; text-align: center; }

.button-select { display: flex; }
.button-select a { background: #f5f6f8; border: 1px solid #d8d8d8; flex-grow: 1; flex-basis: auto; margin: 0 5px; height: 40px; border-radius: 5px; }
.button-select a.active { background: #e5eefb; color: #1c4489; border: 1px solid #1c4489; }
.button-select.button-inline a { flex-grow: 0; width: 175px; }

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: #bebebe; border: 0; }

.disabled { filter: grayscale(100%); opacity: .7; }

.box-header { padding: 15px; border-bottom: 1px solid #f2f2f2; }
.box-header h2 { justify-content: flex-start; color: #1c4489; margin-bottom: 0; }
.box-header h2 i { width: 40px; height: 40px; background: #eeeeee; border-radius: 100%; display: block; margin-right: 10px; }

.lab-2-col { display: flex; align-items: top; margin-bottom: 25px; padding-right: 20px; position: relative; }
.lab-2-col > label { margin-bottom: 0; width: 100%; max-width: 200px; text-align: right; font-family: "DBChuanPimRegular", sans-serif; color: #1c4489; }
.lab-2-col.col-left { margin-bottom: 15px; }
.lab-2-col.col-left > label { width: 100%; max-width: 200px; text-align: left; padding-left: 30px; }
.lab-2-col.bd-bottom { border-bottom: 1px solid #f2f2f2; margin-bottom: 15px; padding-bottom: 15px; }
.lab-2-col .wrap-l2-col { padding-left: 30px; flex-grow: 1; width: 70%; }
@media (max-width: 1199.98px) { .lab-2-col .wrap-l2-col { padding-left: 0; width: 100%; } }
@media (max-width: 1199.98px) { .lab-2-col { flex-direction: column; align-items: flex-start; }
  .lab-2-col > label { text-align: left; width: auto; margin-bottom: 15px; } }

.text-limit { position: absolute; right: 15px; top: 10px; }

.show-grouping { flex-wrap: wrap; }
.show-grouping i { font-size: 14px; margin: 0 5px; }

.inner-box-group { border: 25px solid #f5f6f8; }

.select-group-3 { margin: 0; }
.select-group-3 .col-4 { padding: 15px; }
.select-group-3 .col-4 ul { height: 325px; overflow-y: auto; }
.select-group-3 .col-4 ul li { margin-bottom: 15px; }
.select-group-3 .col-4 ul li a { display: block; position: relative; }
.select-group-3 .col-4 ul li a:hover, .select-group-3 .col-4 ul li a.active { color: #b72226; }
.select-group-3 .col-4 ul li a:after { content: "\f105"; position: absolute; right: 5px; top: 2px; font-family: FontAwesome; font-size: 15px; }
.select-group-3 .col-4:last-child a:after { display: none; }

.tag { color: #1c4489; background: #e5eefb; padding: 3px 25px 3px 15px; border-radius: 15px; border: 1px solid #1c4489; position: relative; margin-right: 7px; }
.tag i { position: absolute; font-size: 20px; right: 8px; top: 4px; cursor: pointer; }

.multi-picture { display: flex; flex-wrap: wrap; }
.multi-picture li { margin-right: 15px; text-align: center; }
.multi-picture li .mp-upload { border-radius: 5px; border: 1px solid #ccc; overflow: hidden; margin-bottom: 5px; }

.add-button { width: 105px; height: 105px; border-radius: 5px; border: 1px solid #ccc; background: url(../images/icon-add.png) no-repeat center center #e5eefb; display: block; }

.botton-group { display: flex; align-items: center; justify-content: center; }
.botton-group > * { margin: 0 5px; }

.has-unit { position: relative; }
.has-unit .form-control { padding-right: 15px; }
.has-unit span { position: absolute; right: 10px; top: 5px; }

.list-checkbox li { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #f2f2f2; }

.wrap-btn-small button, .wrap-btn-small a { min-width: 100px; }

.list-status { margin-bottom: 0; }
.list-status li { display: flex; justify-content: space-between; padding: 15px 25px 15px 65px; border-bottom: 1px solid #f2f2f2; position: relative; }
.list-status li:after { width: 2px; height: 100%; content: ""; position: absolute; left: 34px; background: #eee; z-index: 0; top: 60%; }
.list-status li:last-child:after { display: none; }
.list-status li span { position: absolute; left: 20px; width: 30px; height: 30px; background: #eee; top: 10px; border-radius: 100%; display: flex; align-items: center; justify-content: center; z-index: 1; }
.list-status li.active:after { background: #b8e6a6; }
.list-status li.active h3 { color: #5cc311; }
.list-status li.active span { background: #b8e6a6; color: #5cc311; }

.message-box { background: #f5f6f8; padding: 10px; text-align: center; }

.show-chat { width: 166px; height: 45px; border-radius: 5px; position: fixed; bottom: 30px; right: 50px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); background: url(../images/open-chat.jpg) no-repeat center right 10px #fff; color: #1c4489; display: flex; align-items: center; z-index: 99; }
.show-chat .text-chat { margin-left: 10px; font-size: 25px; font-weight: bold; }

.icon-chat { width: 33px; height: 33px; display: flex; align-items: center; justify-content: center; border-radius: 100%; background: #e5eefb; position: relative; }
.icon-chat img { width: 60%; }

.chat-box { display: flex; width: 370px; position: fixed; background: #fff; height: calc(100vh - 120px); right: 50px; bottom: 20px; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); z-index: 10; border-radius: 10px; flex-direction: column; opacity: 0; visibility: hidden; }
.chat-box.active { opacity: 1; visibility: visible; }
.chat-box .show-hide-chat { display: flex; height: 60px; align-items: center; border-bottom: 1px solid #e5e5e5; padding-left: 15px; }
.chat-box .show-hide-chat .text-chat { margin-left: 10px; font-size: 25px; font-weight: bold; }
.chat-box .show-hide-chat .h-right-chat { margin-left: auto; display: flex; align-items: center; padding-right: 15px; }
.chat-box .show-hide-chat .h-right-chat i { font-size: 25px; cursor: pointer; }
.chat-box .show-hide-chat .h-right-chat i:hover { color: #1c4489; }
.chat-box .show-hide-chat .h-right-chat button { padding: 5px; }
.chat-box .select-chat { border-bottom: 1px solid #e5e5e5; flex-basis: 45%; overflow: auto; }
.chat-box .realtime-chat { border-bottom: 1px solid #e5e5e5; flex-basis: 35%; overflow: auto; display: flex; flex: 1; }
.chat-box .realtime-chat .list-chat { margin-bottom: 0; margin-top: auto; }
.chat-box .realtime-chat .list-chat li { display: flex; align-self: flex-end; flex-direction: column; padding: 10px 15px; }
.chat-box .realtime-chat .list-chat li .send-chat { max-width: 60%; padding: 7px 15px; background: #f3f3f3; border-radius: 5px; }
.chat-box .realtime-chat .list-chat li.sender { align-items: flex-end; }

.write-chat { height: 80px; padding-bottom: 30px; }
.write-chat .form-control { height: 100%; background: #fff; border: 0; line-height: 1; }

.select-chat { width: 100%; position: relative; }
.select-chat p { margin: 10px 0 0 20px; }
.select-chat li { display: flex; align-items: center; padding: 5px 10px; cursor: pointer; margin-bottom: 15px; }
.select-chat li:hover { background: #f6f6f6; }
.select-chat li figure { margin-bottom: 0; margin-right: 10px; border: 1px solid #e8e8e9; }
.select-chat li .name-message { width: 100%; }
.select-chat li h3 { font-size: 22px; font-weight: bold; margin-bottom: 0; }
.select-chat li .wrap-name-message { position: relative; }
.select-chat li .wrap-name-message .date-message { position: absolute; right: 10px; bottom: 0; }
.select-chat li .wrap-name-message .tag-message { background: #b72226; color: #fff; border-radius: 20px; padding: 1px 15px; position: absolute; right: 100px; bottom: 0; font-size: 16px; }
.select-chat li .wrap-name-message .cut-text-1 { width: 185px; display: block; }
.select-chat li .wrap-name-message.has-tag .cut-text-1 { width: 150px; }

.full-chat header { height: 65px; border-bottom: 1px solid #eff0f1; display: flex; align-items: center; padding-left: 20px; }
.full-chat .realtime-chat { height: calc(100vh - 305px); overflow: auto; overflow: auto; display: flex; }
.full-chat .realtime-chat .list-chat { margin-bottom: 0; margin-top: auto; width: 100%; }
.full-chat .realtime-chat .list-chat li { display: flex; align-self: flex-end; flex-direction: column; padding: 10px 15px; align-items: flex-start; }
.full-chat .realtime-chat .list-chat li .send-chat { padding: 7px 15px; background: #f3f3f3; border-radius: 5px; white-space: pre-line; max-width: 265px; }
.full-chat .realtime-chat .list-chat li.sender { align-items: flex-end; }
.full-chat .write-chat { border-top: 1px solid #eff0f1; height: 155px; }

.table-custom { width: 100%; min-width: 780px; }
.table-custom thead th { color: #9e9e9e; text-align: center; font-family: "DBChuanPimRegular", sans-serif; font-weight: normal; font-weight: 600; font-size: 20px; }
.table-custom thead th .custom-th { background: #ebebeb; width: 35px; height: 35px; border-radius: 100%; padding: 6px 0 0 10px; }
.table-custom tbody { border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px #e5e5e5; }
.table-custom tbody tr { text-align: center; }
.table-custom tbody tr td { border-bottom: 1px solid #e0e0e0; padding-top: 15px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; }
.table-custom tbody tr:first-child td:first-child { border-top-left-radius: 10px; }
.table-custom tbody tr:first-child td:last-child { border-top-right-radius: 10px; }
.table-custom tbody tr:last-child td { border-bottom: 0; }
.table-custom tbody tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.table-custom tbody tr:last-child td:last-child { border-bottom-right-radius: 10px; }
.table-custom tbody.va-center tr td { vertical-align: middle; }
.table-custom tbody .va-bottom { vertical-align: bottom !important; }
.table-custom.table-c-2 tbody { position: relative; box-shadow: none; box-shadow: none; }
.table-custom.table-c-2 tbody tr { border: 1px solid #e5e5e5; }
.table-custom.table-c-2 tbody tr td { padding: 15px 7px; }
.table-custom.table-c-2 tbody tr:not(.title-c-2) { border-bottom: 20px solid #fff; }
.table-custom.table-c-2 tbody:after { content: ""; position: absolute; bottom: 20px; width: 100%; height: 1px; background-color: #e5e5e5; }
.table-custom.table-c-2 tbody:last-child tr { border-bottom: 0; }
.table-custom.table-c-2 tbody:last-child:after { bottom: 0; }
.table-custom.table-small { width: 100%; min-width: auto; }
.table-custom.table-small tbody { box-shadow: none; }
.table-custom.table-small td, .table-custom.table-small th { padding: 10px 8px; }
.table-custom .download-doc .icon-svg { width: 22px; height: 22px; fill: #1c4489; }
.table-custom .download-doc:hover .icon-svg { fill: #b72226; }
.table-custom .t-foot td { background: #e5eefb; }

.table-main { background: #fff; margin: 0; border: 1px solid #ccc; min-width: 820px; }
.table-main th { color: #0073aa; padding: 5px 15px; font-weight: normal; border-bottom: 1px solid #ccc !important; font-weight: 300; }
.table-main th .form-control { height: 30px; background-color: #ccc; }
.table-main th.bg-red { background: #b72226; border: 0; }
.table-main td { vertical-align: middle !important; padding: 12px 15px; color: #0073aa; }
.table-main .btn-download { padding: 5px 20px; border: 1px solid #000; border-radius: 5px; color: #000; }

.tr-input td { padding: 0; }

.radio-file-button .custom-control-label::before, .radio-file-button .custom-control-label::after { top: 12px; }

.tr-input td { background: #f5f6f8; vertical-align: middle; }

.tr-bg-gray td { background: #f5f6f8; }

.remove-row { position: absolute; right: -4 0px; top: 0; }

.form-login { display: flex; height: 100vh; align-items: center; justify-content: center; background: #f4f7fc; padding: 0 25px; }
.form-login .logo-login { width: 100%; margin-bottom: 20px; }
.form-login .logo-login img { width: 100%; }
@media (max-width: 575.98px) { .form-login .logo-login img { max-width: 150px; } }
.form-login form { max-width: 400px; width: 100%; padding: 30px; background: #fff; box-shadow: 0px 2px 1px 0px rgba(191, 191, 191, 0.45); }
.form-login .form-group { margin-bottom: 30px; }
.form-login .form-control { box-shadow: none; background-color: #f5f6f8; height: 38px; border-radius: 5px; transition: all 0.3s ease 0s; }
.form-login .form-control::placeholder { opacity: 1; color: #9e9e9e; }
.form-login .btn-detail { display: block; background: #b72226; color: #fff; width: 100%; }
.form-login .login-or { position: relative; color: #9e9e9e; }
.form-login .login-or span { display: inline-block; background: #fff; padding: 7px; z-index: 2; position: relative; }
.form-login .login-or:before { height: 1px; position: absolute; width: 100%; top: 50%; content: ""; background: #f2f2f2; left: 0; z-index: 1; }
.form-login .header-forgot { padding: 12px 30px; border-bottom: 1px solid #f2f2f2; display: flex; align-items: center; }
.form-login .header-forgot h3 { margin-bottom: 0; }
.form-login .box-inner-form { padding: 30px; }

/*# sourceMappingURL=style.css.map */