@keyframes menutop1 {
    0% {
        top: -300px;
    }

    100% {
        top: 0;
    }
}

@keyframes menutop2 {
    0% {
        top: -300px;
    }

    100% {
        top: 0;
    }
}

@keyframes zoomIn {
    0% {
        visibility: visible;
        width: 0;
    }

    100% {
        visibility: visible;
        width: 100vw;
    }
}

@keyframes fadeIn {
    0% {
        visibility: visible;
        transform: scale(0);
    }

    100% {
        visibility: visible;
        transform: scale(1);
    }
}

@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }

    10% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg)
    }

    20% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg)
    }

    30% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    40% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    50% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg)
    }

    60% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    70% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }

    80% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg)
    }

    90% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes swing {
    0% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg)
    }

    10% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg)
    }

    20% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg)
    }

    30% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    40% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg)
    }

    50% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg)
    }

    60% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg)
    }

    70% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }

    80% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg)
    }

    90% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

:root {
    --h: 40px;
    --index: 0;
    --c_r: 180deg;
    --c_l: 180deg;
    --pie_w: 160px;
    --pie_2: 80px;
    --left_td: 0px;
}

body {
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
    padding: 0;
    margin: 0;
    font-weight: 300;
    font-size: 15px;
}

.header {
    height: 100px;
    background-size: 100%;
    position: relative;
    left: 0;
    right: 0;
    top: -300px;
    z-index: 0;
    animation: menutop2 .3s ease-in-out forwards;
    overflow: hidden;
}

.header::after {
    content: "";
    background: rgba(19, 118, 200, 1);
    background: -moz-linear-gradient(-45deg, rgba(19, 118, 200, 1) 0%, rgba(41, 151, 240, 1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(19, 118, 200, 1)), color-stop(100%, rgba(41, 151, 240, 1)));
    background: -webkit-linear-gradient(-45deg, rgba(19, 118, 200, 1) 0%, rgba(41, 151, 240, 1) 100%);
    background: -o-linear-gradient(-45deg, rgba(19, 118, 200, 1) 0%, rgba(41, 151, 240, 1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(19, 118, 200, 1) 0%, rgba(41, 151, 240, 1) 100%);
    background: linear-gradient(135deg, rgba(19, 118, 200, 1) 0%, rgba(41, 151, 240, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1376c8', endColorstr='#2997f0', GradientType=1);
    background-repeat: no-repeat;
    height: 100px;
    background-size: 100%;
    position: absolute;
    left: 0;
    right: -80px;
    top: 0;
    bottom: 0;
    z-index: 0;
    clip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%);
}

.menu1.header {
    position: fixed;
    height: auto;
    top: -300px;
    border-bottom: solid 1px #f1f1f1;
    animation: menutop1 .3s ease-in-out forwards;
    z-index: 2;
}

.menu1 .trang {
    display: none;
}

.xanh:not(td):not(div) {
    display: none;
}

.menu1 .xanh {
    display: block;
}

.menu1 .cauhinh {
    display: flex;
    justify-content: right;
}

.header2>div,
.header>div {
    display: flex;
    justify-content: space-between;
    padding: 4px 20px 2px 20px;
    align-items: center;
    position: relative;
    z-index: 9;
}

.header2 .logotrang,
.header2 .cauhinh,
.header .logotrang,
.header .cauhinh {
    min-width: 42px;
}

.cauhinh {
    text-align: right;
}

.menu1 .cauhinh,
.menu1.header h2 {
    padding-bottom: 0px;
}

.cauhinh,
.header h2 {
    padding-bottom: 12px;
}

.header2 h2,
.header2 .cauhinh {
    padding-bottom: 0px;
}

.header .logotrang img {
    max-height: 50px;
}

.header .cauhinh img {
    max-height: 50px;
    width: 26px;
}

.header h2 {
    margin: 0;
    color: #fff;
    font-weight: 400;
    font-size: 1.2rem;
}

.hide .header2 {
    display: none;
    animation: zoomIn .3s ease-in-out forwards;
}

.header2 {
    position: fixed;
    width: 100vw;
    right: 0;
    left: 0;
    top: 0;
    z-index: 0;
    animation: zoomIn .3s ease-in-out forwards;
    background-color: #fff;
    background-image: url("../img/bgcontenhome.png");
    border-bottom: solid 1px #f1f1f1;
    background-repeat: no-repeat;
    background-position: 95% 7px;
    background-size: 120px;
}

.header2,
.menu1.header {
    height: 50px;
}

.header2>div {
    height: 100%;
    padding-top: 2px;
}

.menu1 .logotrang img {
    max-height: 42px;
}

.header2 .logotrang img {
    max-height: 36px;
}

.menu1 .cauhinh img,
.header2 .cauhinh img {
    max-height: 50px;
    width: 26px;
}

.header2 h2 {
    margin: 0;
    color: #444;
    font-weight: 400;
    font-size: 1.1rem;
}

.show {
    display: block !important;
}

.hide:not(tr) {
    display: none;
}

nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    visibility: hidden;
    background-color: #fff;
    animation: zoomIn .3s ease-in-out forwards;
    z-index: 999;
}

ul {
    position: relative;
    list-style: none;
    padding: 0rem;
    margin: 50px 0 0 0;
    right: 0;
    width: 100%;
    padding-top: 24px;
}


li {
    position: relative;
    z-index: 1;
}

a {
    font-size: 1rem;
    color: #444;
    text-decoration: none;
}

.mobilebar-container {
    position: fixed;
    bottom: 0;
    z-index: 3;
    left: 0;
    right: 0;
}

.mobilebar-tab {
    height: 50px;
    max-width: 420px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    position: relative;
    flex-shrink: 0;
    bottom: 0px;
    margin: auto;
    background-image: url("../img/bgtab2.png");
    background-repeat: no-repeat;
    border-top: solid 1px #f6f6f6;
}

.mobilebar-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% / 5);
    flex-shrink: 0;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    z-index: 2;
}

.mobilebar-tab-item .mobilebar-tab__icon.home {
    width: 42px;
    height: 42px;
    display: flex;
    border: #fff;
    align-items: center;
    justify-content: center;
    background: #EBEBEB;
    border-radius: 21px;
}

.mobilebar-tab-item.active .mobilebar-tab__icon {
    color: #1378CA;
}

.mobilebar-tab__text {
    font-size: .6rem;
    font-weight: 500;
    display: none;
}

.mobilebar-tab-item.active .mobilebar-tab__icon.home {
    background: #1378ca;
    color: #fff;
}

.mobilebar-tab-item.active .mobilebar-tab__text {
    display: block;
    white-space: nowrap;
}

.mobilebar-tab-overlay {
    border-radius: 6px;
    background-color: #f0f0f0;
    height: 100%;
    width: calc(100% / 5);
    position: absolute;
    left: 0;
    top: 0;
    transition: 0.3s;
}

.mobilebar-tab__icon {
    display: block;
    color: #B5B5B5;
    transition-duration: 0.3s;
    line-height: 1;
    font-size: 22px;
}

.noidungchinh {
    position: relative;
    margin-top: -44px;
    z-index: 1;
    padding: 1px 10px 90px 10px;
}

#main-menu ul li a {
    display: flex;
    height: 56px;
    align-items: center;
    padding: 0 20px;
}

span.iconcauhinh {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    background: aliceblue;
    border-radius: 19px;
    min-width: 38px;
    font-size: 18px;
}

span.iconcauhinh img {
    width: 18px;
}

.iconcauhinh+span {
    display: flex;
    height: 100%;
    align-items: center;
    width: 100%;
    border-bottom: solid 1px #f3f3f3;
}

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

.conten-home {
    background-color: #fff;
    margin: 8px;
    width: calc(50% - 16px);
    padding: 16px 8px 12px 8px;
    box-sizing: border-box;
    box-shadow: 1px 0px 8px -3px rgb(0 0 0 / 25%);
    border-radius: 8px;
    min-height: 162px;
    max-width: 182px;
    min-width: 120px;
}

.icon-conten {
    display: flex;
    align-items: center;
    justify-content: center;
}

.conten-home h5 {
    margin: 0;
    padding: 10px 0 3px 0;
    line-height: 1.2;
}

.conten-home span {
    font-size: 0.83em;
    color: #6A6A6A;
    font-weight: 300;
    display: block;
}

.icon-conten img {
    height: 64px;
}

#main-menu ul li:nth-child(1n + 0) a .iconcauhinh {
    background-color: rgb(236 28 36 / 10%);
    color: #EC1C24;
}

#main-menu ul li:nth-child(2n + 0) a .iconcauhinh {
    background-color: rgb(246 177 27 / 10%);
    color: #F6B11B;
}

#main-menu ul li:nth-child(3n + 0) a .iconcauhinh {
    background-color: rgb(47 149 0 / 10%);
    color: #2f9500;
}

#main-menu ul li:nth-child(4n + 0) a .iconcauhinh {
    background-color: rgb(19 118 200 / 10%);
    color: rgba(19, 118, 200, 1);
}

#main-menu ul li:nth-child(5n + 0) a .iconcauhinh {
    background-color: rgb(209 47 255 / 10%);
    color: rgb(209 47 255);
}

#main-menu ul li:nth-child(6n + 0) a .iconcauhinh {
    background-color: rgb(174 123 92 / 10%);
    color: rgb(174 123 92);
}

span.iconcauhinh .icon-vantay {
    font-size: 24px;
}

span.icon-tracuucauhoi {
    font-size: 21px;
}

span.icon-vantay3 {
    font-size: 20px;
}

.thuvien.chinhsuathuvien,
.thuvien.chinhsua {
    justify-content: end;
    width: 100%;
}

.thuvien.chinhsuathuvien .conten-home,
.thuvien.chinhsua .conten-home {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 8px;
    min-height: unset;
    max-width: 182px;
    border: solid 1px #e6e6e6;
}

.thuvien.chinhsuathuvien .conten-home span,
.thuvien.chinhsua .conten-home span {
    color: #999999;
}

.thuvien.chinhsuathuvien .conten-home h5,
.thuvien.chinhsua .conten-home h5 {
    display: flex;
    align-items: center;
    padding: 0 6px;
}

.conten-home h5 span {
    margin-right: 8px;
    font-size: 1.2em;
    font-weight: 500;
    text-transform: uppercase;
}

.thuvien.chinhsua .conten-home [class^="icon-"] {
    color: #B5B5B5;
    font-size: 20px;
}

.thuvien.chinhsuathuvien .conten-home.active,
.thuvien.chinhsua .conten-home.active {
    border: solid 1px #1378ca;
}

.thuvien.chinhsuathuvien .conten-home.active span,
.thuvien.chinhsua .conten-home.active span,
.thuvien.chinhsua .conten-home.active [class^="icon-"] {
    color: #1378ca;
}

.conten-home .xoa {
    width: 30px;
    height: 30px;
    display: flex;
    background: #f3f3f3;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 14px;
    position: absolute;
    top: -8px;
    right: -11px;
}

.delete-conten .conten-home {
    -webkit-animation-name: swing;
    animation-name: swing;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-animation-duration: 2.2s;
    animation-duration: 2.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.chitiet .noidungchinh {
    margin-top: 50px;
    overflow: hidden;
    min-height: calc(100vh - 50px);
    padding-top: 10px;
}

.chitiet .header2 {
    position: fixed;
    z-index: 10;
    animation: none;
}


/* modal  .......................................................*/
.modaltable,
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    z-index: 99;
    box-sizing: border-box;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 2rem 1.2rem;
    width: calc(100% - 40px);
    box-sizing: border-box;
}

.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.modal.timkiem-modal.show-modal {
    z-index: 9999;
}

.show-timkiem {
    position: fixed;
    z-index: 9999;
    border: solid 1px #e1e1e1;
    cursor: pointer;
    display: inline-flex;
    right: 8px;
    bottom: 53px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    transition: all 0.3s;
    background: #1378c8;
    color: #fff;
    border-color: #135f9a;
}

.text-xam {
    color: #828282;
}

.modal-content h4,
.modal-content h5 {
    margin: 0;
    padding: 4px 0;
}

.modal-content span {
    font-weight: 300;
    font-size: 0.83em;
}

.text-center {
    text-align: center;
}

.modal-content .icon-conten img {
    height: 130px;
}

.modal-content .icon-conten {
    padding: 24px 0;
}

.huybo {
    height: 42px;
    display: inline-flex;
    width: auto;
    align-items: center;
    padding: 0 20px;
    border: solid 1px #1378C8;
    border-radius: 21px;
    min-width: 26%;
    justify-content: center;
    margin: 0 6px;
}

.luu,
.nut_xam.active {
    height: 42px;
    display: inline-flex;
    width: auto;
    align-items: center;
    padding: 0 20px;
    border: solid 1px #1378C8;
    border-radius: 21px;
    min-width: 33%;
    justify-content: center;
    background: #1378C8;
    color: #fff;
    margin: 0 6px;
}

.nut_xam {
    height: 42px;
    display: inline-flex;
    width: auto;
    align-items: center;
    padding: 0 20px;
    border: solid 1px #F3F3F3;
    border-radius: 21px;
    min-width: 33%;
    justify-content: center;
    background: #F3F3F3;
    color: #222;
    margin: 0 6px;
}

.nut {
    color: #222;
    font-weight: 500;
    padding: 20px 0 0 0;
    display: flex;
    justify-content: center;
}

.tab .nut {
    width: 100%;
    padding: 0;
    justify-content: start;
}

.tab {
    background: #fff;
    padding: 2px 12px 6px 12px !important;
}

.showtab .header2>div:not(.tab) {
    height: 50px;
}

.showtab .header2 {
    height: auto;
    min-height: 50px;
}

.showtab .noidungchinh {
    margin-top: 112px;
}

.tab .nut a {
    height: 36px;
    width: auto;
    min-width: unset;
}

p.text-xam {
    width: 100%;
    font-size: 0.83em;
}

.italic {
    font-style: italic;
}

/* modal  .......................................................*/
/* list  .......................................................*/
.conten-list a {
    display: flex;
    align-items: center;
}

.icon-list {
    width: 38px;
    height: 38px;
    display: flex;
    border: solid 1px #eeeeee;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    color: #B5B5B5;
    font-size: 26px;
    min-width: 38px;
}

.conten-list h5 {
    margin: 0;
    width: 100%;
}

.conten-list span {
    font-size: 0.83em;
}

.text-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: solid 1px #f3f3f3;
    padding: 12px 12px;
    justify-content: space-between;
    width: 100%;
}

ul.conten-list {
    margin: 0;
}

p.text-xam {
    margin: 0;
    padding: 0 10px;
}

#thanhtacvu ul li a {
    padding: 0 10px;
}

/* list  .......................................................*/
/* switch .......................................................*/
.switch>label {
    position: relative;
}

.switch>input[type="checkbox"] {
    opacity: 0;
}

.switch>label::before,
.switch>label::after {
    --switch-width: 40px;
    --switch-height: 20px;
    content: "";
    position: absolute;
    height: var(--switch-height);
}

.switch>label::before {
    width: var(--switch-width);
    border: 1px solid #eee;
    top: 0;
    left: calc(0px - var(--switch-width) - 5px);
    border-radius: var(--switch-width);
    background: #F3F3F3;
}

.switch>label::after {
    width: var(--switch-height);
    height: var(--switch-height);
    top: 1px;
    border-radius: var(--switch-height);
    left: calc(0px - var(--switch-width) - 4px);
    transition: transform .3s;
    background-color: #D9D9D9;
    transform-origin: left;
}

.switch>input[type=checkbox]:not(:checked)~label::after {
    transform: translateX(0);
}

.switch>input[type=checkbox]:checked~label::after {
    transform: translateX(calc(var(--switch-width) / 2));
}

.switch>input[type=checkbox]:checked~label::before {
    background-color: #cee9ff;
    border: 1px solid #abdaff;
}


.switch>input[type=checkbox]:checked~label::after {
    background-color: #1378c8;
}

/* switch .......................................................*/
/* This css is for normalizing styles. You can skip this. */
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.check {
    display: flex;
    width: auto;
}

.check input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.check label {
    position: relative;
    cursor: pointer;
}

.check label:before {
    content: '';
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid #D9D9D9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 10px;
    display: inline-flex;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%;
    width: 26px;
    height: 26px;
}

.check input:checked+label:after {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: 10px;
    width: 6px;
    height: 14px;
    border: solid #00B43C;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.text-list>div:not(.check) {
    width: calc(100% - 30px);
}

.active .icon-list {
    color: #1378c8;
}

/* login */
.login {
    background-image: url("../img/bglogin.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.login form {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 40%;
    left: 50%;
    width: calc(100vw - 80px);
    box-sizing: border-box;
    max-width: 340px;
}

.login form * {
    color: #fff;
    outline: none;
    border: none;
}

.login form h3 {
    font-size: 1.3em;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

.login label {
    display: block;
    margin-top: 15px;
    font-weight: 500;
}

.login input {
    display: block;
    height: 44px;
    width: 100%;
    background-color: #fff;
    border-radius: 3px;
    padding: 0 10px 0 60px;
    font-size: 14px;
    font-weight: 300;
}

.login ::placeholder {
    color: #1b1b1b;
}



.login button {
    width: 60%;
    background-color: #ffffff;
    color: #1378C8;
    /* padding: 12px 0; */
    font-size: 18px;
    font-weight: 600;
    border-radius: 26px;
    cursor: pointer;
}

.login .text {
    margin-top: 10px;
    display: flex;
}

.login .logotrang {
    display: flex;
    justify-content: center;
    height: 150px;
    padding: 20px;
}

.login-input {
    display: flex;
    align-items: center;
    margin-top: 20px;
    position: relative;
}

.login .login-input [class^="icon-"],
.login .login-input [class*=" icon-"] {
    position: absolute;
    left: 15px;
    color: #B5B5B5;
    font-size: 18px;
}

.nutdangnhap {
    display: flex;
    align-items: center;
    margin-top: 26px;
    justify-content: space-between;
}

.tuychon a,
.tuychon span.icon-vantay3 {
    font-size: 32px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    margin: 0 5px;
}

.quenmatkhau {
    position: fixed;
    bottom: 16px;
    z-index: 99;
    display: block;
    left: 0;
    right: 0;
    text-align: center;
}

.login input[type=checkbox] {
    position: relative;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    background: none;
    cursor: pointer;
    line-height: 0;
    margin: 0 .6em 0 0;
    outline: 0;
    padding: 0 !important;
    vertical-align: text-top;
    height: 18px;
    width: 18px;
    -webkit-appearance: none;
    background: #fff;
}


.login input[type=checkbox]:checked {
    background-color: #1378c8;
    opacity: 1;
    border: 1px solid #ffffff;
}

.login input[type=checkbox]:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 5px;
    height: 11px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    margin: -2px -1px 0 0px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
}

.login .login-check {
    display: flex;
    align-items: center;
    margin-top: 14px;
}

.login .login-check label {
    margin-top: 0;
    font-weight: 300;
    font-size: .9em;
}

.quenmatkhau a {
    color: #fff;
    font-size: .9em;
}

.thuvien:not(.delete-conten)>.conten-home .xoa {
    display: none;
}

.thuvien.delete-conten .thuvien.chinhsua .conten-home:not(.active) {
    display: none;
}

.thuvien:not(.delete-conten) .thuvien.chinhsua .conten-home.active {
    display: none;
}

.fixmenu {
    padding-top: 129px;
}

body:not(.back) #topmenu .cauhinh .back-icon {
    display: none;
}

body.back #topmenu .cauhinh img:not(.back-icon) {
    display: none;
}

/* table........................................................ */
/* .table table {
    table-layout: fixed;
  } */
.table {
    max-width: 100%;
    overflow: auto;
    padding-top: 10px;
}

.table table {
    border-collapse: collapse;
    border-spacing: 0px;
    width: 100%;
}

.an-th thead,
thead.an-th {
    display: none;
}

.table th,
.table td {
    padding: 8px;
    border: 1px solid #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

/* .table td {
    white-space: nowrap;
} */

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

.table td {
    height: 40px;
    vertical-align: middle;
}

.table th {
    border: none;
    position: relative;
    overflow: visible;
    padding-bottom: 6px;
    font-size: 0.9em;
    color: #444;
}

.table th:before,
.table th:after {
    content: "";
    position: absolute;
    width: 1px;
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(221, 221, 221, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd', GradientType=0);
}

.table th:before {
    left: -1px;
}

.table th:after {
    right: -0.5px;
}

.table .xemchitiet {
    position: absolute;
    width: 40px;
    min-height: 30px;
    right: 0;
    top: auto;
    border-top-width: 1px;
    margin-top: -0.5px;
    background: #fff;
    z-index: 2;
    color: #B5B5B5;
    font-size: 19px;
    text-overflow: unset;
    display: flex;
    align-items: center;
    justify-content: center;
}

th.xemchitiet:before {
    left: 0;
    z-index: 1;
}

.table th.xemchitiet:after {
    top: 0px;
    bottom: 0;
    width: 40px;
    background: #fff;
    box-shadow: -10px 0px 10px -16px #000;
    z-index: 0;
    z-index: 1;
}

.table th:first-child:after {
    right: 0;
}

/* .table th:first-child+th:before {
    display: none;
} */

.card .table:not(.ko-boder) th:first-child::after {
    display: flex !important;
    content: "\ea0a";
    font-family: 'khonsnn' !important;
    position: relative;
    background: #fff;
    left: 0;
    width: 18px;
    height: 18px;
    border: solid 1px #1378c8;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 10px;
    font-weight: 300;
    border-radius: 3px;
    color: #1378c8;
}

.card .table:not(.ko-boder) th.showtreeth:first-child::after {
    content: "\ea0b";
}

.khungtable {
    position: relative;
    min-width: 100%;
}

.table th.xemchitiet {
    top: 0;
    bottom: 0;
    z-index: 1;
}

.modalconten {
    flex-wrap: wrap;
    border: none !important;
}

.modalconten.parent-modalconten {
    background: #fbfbfb;
    margin-left: -23px;
    margin-right: -23px;
    width: calc(100% + 46px) !important;
    padding: 6px 20px !important;
    padding-bottom: 6px;
    border-bottom: solid 1px #e1e1e1 !important;
    box-shadow: 1px 2px 8px -3px rgba(0, 0, 0, 0.2);
    border-top: solid 1px #f3f3f3 !important;
}

.modalconten.parent-modalconten>div:not(.nut) {
    border-bottom-color: #ececec;
}

.modalconten.parent-modalconten .modal_stt+div {
    position: relative;
}

.modalconten>div:not(.nut):last-child {
    border-bottom: none;
}

.modalconten>div:not(.nut),
.modaltable .modal-content>div:not(.nut) {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: solid 1px #f3f3f3;
}

.modalconten>div:not(.nut) span,
.modaltable .modal-content>div:not(.nut) span {
    color: #828282;
    white-space: nowrap;
}

.modalconten>div:not(.nut) span+span,
.modaltable .modal-content>div:not(.nut) span+span {
    color: #111;
    font-weight: 500;
    white-space: normal;
    text-align: left;
    padding-left: 10px;
}

.modalconten.parent-modalconten .modal_stt+div span+span {
    padding-right: 10px;
}

.modaltable .modal-content.text-center {
    border: solid 1px #E6E6E6;
    border-radius: 8px;
    box-shadow: 0px 0px 20px -3px rgb(0 0 0 / 30%);
}

.modaltable .close-button {
    min-width: 110px;
}

.modalconten>div:not(.nut):first-child,
.modaltable .modal-content>div:not(.nut):not(.modalconten):first-child {
    position: absolute;
    background: #1378C8;
    top: -1px;
    left: 20px;
    padding: 4px 6px;
    display: block;
    width: auto;
    min-width: 30px;
}

.modalconten>div:not(.nut):first-child span,
.modaltable .modal-content>div:not(.nut):not(.modalconten):first-child span {
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    padding-right: 0;
    padding-left: 0 !important;
}

/* tree......................... */
.tree {
    padding-left: 6px;
}

.tree-row.tieude>div {
    position: relative;
    border: none;
    padding-top: 15px;
}

.tree-row.tieude>div:before {
    content: "";
    position: absolute;
    width: 1px;
    top: 0;
    bottom: 0;
    right: 0px;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(221, 221, 221, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(221, 221, 221, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd', GradientType=0);
}

.tree>ul {
    width: calc(100% - 16px);
    padding-left: 16px !important;
}

.tree ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: auto;
}

.tree-row.tieude {
    color: #828282;
    font-weight: 500;
}

.tree .caret {
    cursor: pointer;
    -webkit-user-select: none;
    /* Safari 3.1+ */
    -moz-user-select: none;
    /* Firefox 2+ */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
}

.tree .caret::before {
    content: "\e919";
    color: #828282;
    display: inline-flex;
    margin-right: 8px;
    width: 17px;
    height: 17px;
    justify-content: center;
    align-items: center;
    background: #f3f3f3;
    border-radius: 50%;
    margin-left: -25px;
    font-size: 8px;
    font-family: 'khonsnn' !important;
}

.tree .caret-down::before {
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Safari */
    transform: rotate(90deg);
}

.tree .nested {
    display: none;
}

.tree .tree-active {
    display: block;
}

.tree-row {
    display: flex;
    min-height: 40px;
    position: relative;
}

.tree-row>div:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    border-bottom: solid 1px #ddd;
    left: -22px;
    right: 0;
}

.tree-row div {
    display: flex;
    width: 120px;
    align-items: center;
    border-right: solid 1px #ddd;
    padding: 4px 8px;
    min-width: 120px;
}

.tree-row div:last-child {
    border-right: none;
}

.tree-row div:nth-child(1) {
    width: 50px;
    max-width: 50px;
    min-width: 50px;
}

.tree-row div:nth-child(2) {
    flex-grow: 1;
}

.khung-tree {
    overflow: auto;
    max-width: calc(100% + 20px);
    margin: 0 -10px;
}

ul ul .tree-row div:nth-child(1) {
    padding-left: 10px;
}

ul ul ul .tree-row div:nth-child(1) {
    padding-left: 20px;
}

ul ul ul ul .tree-row div:nth-child(1) {
    padding-left: 30px;
}

.tree ul>li>ul .tree-row div {
    font-weight: 500;
}

.tree ul>li>ul>li ul .tree-row div {
    font-weight: 400;
}

.tree ul>li>ul>li>ul>li ul .tree-row div {
    font-weight: 300;
}

.tree ul>li>ul>li>ul>li ul .tree-row div:nth-child(1) {
    justify-content: end;
}

.treeli-active .tree-active .tree-row>div:not(.caret):before,
.tree-row.tree-activebg>div:not(.caret):before,
.treeli-active:after,
.tree>ul>li>ul:after,
.tree-row.tree-activebg:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -22px;
}

.tree>ul>li>ul:after {
    background: #fff;
    z-index: 0;
}

.tree-row.tree-activebg>div:not(.caret):before,
.tree-row.tree-activebg:after {
    background: rgb(221 240 255) !important;
    z-index: 1;
}

.treeli-active .tree-active .tree-row>div:not(.caret):before,
.tree-row.tree-activebg>div:before {
    z-index: -1 !important;
    left: -0 !important;
}

.treeli-active .tree-active .tree-row>div:not(.caret):before,
.treeli-active:after {
    background: #f7fcff;
    z-index: 0;
}

.tree ul>li>ul .tree-row div {
    position: relative;
    z-index: 2;
}

.tree .tree-activebg+ul .tree-activebg .caret::before,
.tree .tree-activebg .caret::before {
    background: #f4faff;
}

.tree .tree-activebg+ul .caret::before {
    background: #fff;
}

.card {
    border-radius: 8px;
    padding: 12px 20px;
    box-shadow: 0 0 8px -2px rgb(0 0 0 / 10%);
    position: relative;
    margin: auto;
    border: solid 1px #f3f3f3;
}

.card.card_xanh {
    background: rgba(58, 154, 228, 1);
    background: -moz-linear-gradient(296deg, rgba(58, 154, 228, 1) 0%, rgba(19, 118, 200, 1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(58, 154, 228, 1)), color-stop(100%, rgba(19, 118, 200, 1)));
    background: -webkit-linear-gradient(296deg, rgba(58, 154, 228, 1) 0%, rgba(19, 118, 200, 1) 100%);
    background: -o-linear-gradient(296deg, rgba(58, 154, 228, 1) 0%, rgba(19, 118, 200, 1) 100%);
    background: -ms-linear-gradient(296deg, rgba(58, 154, 228, 1) 0%, rgba(19, 118, 200, 1) 100%);
    background: linear-gradient(137deg, rgba(58, 154, 228, 1) 0%, rgba(19, 118, 200, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a9ae4', endColorstr='#1376c8', GradientType=1);
    color: #fff;
    border-color: #1378c8;
}

.card:before {
    content: "";
    background-image: url("../img/bgcard.png");
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: block;
    background-repeat: no-repeat;
    background-position: 98% 7px;
    z-index: 0;
    background-size: 100px;
}

.card>[class^="icon-"],
.card>[class*=" icon-"] {
    position: absolute;
    bottom: 9px;
    right: 13px;
    font-size: 130px;
    color: #fff;
    opacity: 0.15;
    z-index: 0;
}

.card * {
    z-index: 1;
    position: relative;
}

.card h3 {
    margin: 0;
    /* text-align: center; */
    padding-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 500;
}

.card-body>.text-card,
.card>div {
    display: flex;
    padding: 4px 0;
}

.card-body>.text-card {
    width: 100%;
}

.card-body>.text-card>span,
.card>div>span {
    font-weight: 300;
    width: 130px;
}

.card-body>.text-card>span+span,
.card>div>span+span {
    font-weight: 500;
    padding-left: 10px;
    flex-grow: 1;
}

.bieudo {
    width: 100%;
}

.title-lv2 {
    padding: 16px 0 8px 0 !important;
    width: 100%;
    text-align: left !important;
    padding: 10px !important;
    min-width: 100%;
    width: calc(100% + 24px) !important;
    margin-bottom: 10px;
    margin-top: 20px;
    font-size: 1rem !important;
    min-height: 50px;
}

.title-lv2.bg-lv2 {
    background: #f8f8f8;
    margin-left: -12px;
    margin-right: -12px;
}

.title-lv2 .icon-muiten:before {
    transform: rotate(-90deg);
    display: inline-flex;
    font-size: 0.7rem;
    padding: 0 5px;
}

.khungvl2 {
    margin-left: -12px;
    padding: 0 12px;
    margin-right: -12px;
}

.title-lv2:not(.bg-lv2) {
    margin-left: -12px;
}

.title-lv2 {
    display: flex;
    align-items: center;
    padding: 8px 12px 8px 16px !important;
}

.title-lv2>span:not(.icon-muiten),
.title-lv2:not(.bg-lv2)>span:not(.icon-muiten) {
    width: 100%;
}

.title-lv2 .icon-muiten {
    height: 100%;
    display: inline-flex;
    align-items: center;
}

.card-head .icon-muiten,
.title-lv2 .icon-muiten {
    color: #aaa;
}

.card.card_xanh .card-head .icon-muiten {
    color: #fff;
}

.khungvl2 {
    width: calc(100% + 24px);
}

.hide-bodycardlv2 .title-lv2 .icon-muiten::before {
    transform: rotate(90deg);
}

.hide-bodycardlv2 .bodylv2 {
    display: none;
}

.bg-xam {
    background: #f3f3f3;
}

.hide-bodycardlv2 .title-lv2 {
    border-bottom: solid 1px #f3f3f3;
}

.card-body .hide-bodycardlv2:last-child .title-lv2 {
    border-bottom: none !important;
}

.card.card_xanh .title-lv2 {
    min-height: unset;
    padding-left: 12px !important;
}

.thusodutoan {
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 20px 0;
    min-width: 100%;
}

.thusodutoan.full {
    margin-left: -12px;
    margin-right: -12px;
    padding: 6px 0 25px 0;
}

.thusodutoan.full .title-lv2 {
    margin-left: 0;
    min-height: unset;
    border-bottom: solid 1px rgba(255, 255, 255, 0.2);
}

.thusodutoan.full .title-lv2 .icon-muiten {
    color: #fff;
}

.topbieudo {
    display: flex;
    padding: 0px;
    color: #fff;
    font-weight: 500;
    width: 100%;
    border-radius: 8px;
    flex-wrap: wrap;
}

.thanh_phancham.nsnn,
.topbieudo.nsnn,
.nsnn {
    background: #5199D4;
}

.thanh_phancham.nstw,
.topbieudo.nstw,
.nstw {
    background: #40C6C6;
}

.thanh_phancham.nsdp,
.topbieudo.nsdp,
.nsdp {
    background: #4AB782;
}

.thanh_phancham.captinh,
.captinh .thanh_dorong,
.topbieudo.captinh,
.captinh {
    background: #F27A47;
}

.thanh_phancham.caphuyen,
.caphuyen .thanh_dorong,
.topbieudo.caphuyen,
.caphuyen {
    background: #e2ad5d;
}

.thanh_phancham.capdiaphuong,
.capdiaphuong .thanh_dorong,
.topbieudo.capdiaphuong,
.capdiaphuong {
    background: #E4C852;
}

.card.card_xanh .topbieudo.large>div.khung-bullet {
    padding: 8px 0 !important;
}

.card.card_xanh .topbieudo.large>div.khung-bullet .bullet {
    margin-top: 12px;
}

.captren .topbieudo>div>span span {
    width: 100%;
}

.captren .topbieudo>div>span span+span {
    width: auto;
}

.bullet {
    background: transparent;
    display: flex;
    gap: 6px;
    padding-right: 10px;
}

.bullet:before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: solid 1px #f3f3f3;
}

.bullet.nsnn:before {
    background: #5199D4;
}

.bullet.nstw:before {
    background: #40C6C6;
}

.bullet.nsdp:before {
    background: #4AB782;
}

.topbieudo.small>.khung-bullet {
    padding-top: 10px !important;
}

.bullet.captinh:before {
    background: #F27A47;
}

.bullet.caphuyen:before {
    background: #e2ad5d;
}

.topbieudo>div {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 15px;
    width: 100%;
}

.topbieudo>div+div {
    width: 100%;
}

.topbieudo>div>span {
    align-items: center;
    display: flex;
    width: 100%;
    min-height: 22px;
}

.text-2 {
    font-size: 2rem;
}

.topbieudo>div+div span {
    justify-content: left;
}

.topbieudo.small>div>span {
    min-height: 4px;
    font-size: 0.9rem;
    white-space: nowrap;
    margin-bottom: 2px;
    border-radius: 2px;
    overflow: hidden;
    font-weight: 500;
}

.sophantram {
    width: 100%;
    text-align: right;
}

.phancham {
    align-items: center;
    display: flex;
    width: 100%;
    min-height: 22px;
}

.phancham {
    background: rgb(255 255 255 / 40%);
}

.thanh_phancham {
    background: #fff;
    display: flex;
    height: 100%;
    border-radius: 2px;
}

.sophantram>span {
    padding-left: 8px;
    display: inline-block;
}

.sophantram .nsnn {
    color: #5199D4;
    background: transparent;
}

.topbieudo.small {
    background: #fff;
    color: #444444;
    flex-wrap: wrap;
    font-weight: 400;
    padding: 30px 0px 10px 0px;
}

.topbieudo.small>div {
    padding: 5px 0px !important;
}

.sophantram .nstw {
    color: #40C6C6;
    background: transparent;
}

.sophantram .nsdp {
    color: #4AB782;
    background: transparent;
}

.sophantram .captinh {
    color: #F27A47;
    background: transparent;
}

.phancham.captinh {
    background: rgba(242, 122, 71, 0.2);
}

.sophantram .caphuyen {
    color: #e2ad5d;
    background: transparent;
}

.phancham.caphuyen {
    background: rgba(228, 161, 61, 0.2);
}

.phancham.nsnn {
    background: rgba(81, 153, 212, 0.3);
}

.phancham.captinh .thanh_dorong,
.phancham.captinh .thanh_phancham {
    background: #F27A47;
}

.phancham.caphuyen .thanh_dorong,
.phancham.caphuyen .thanh_phancham {
    background: #e2ad5d;
}

.phancham.nsnn .thanh_dorong,
.phancham.nsnn .thanh_phancham {
    background: #5199D4;
}

.phancham.nstw {
    background: rgba(64, 198, 198, 0.3);
}

.phancham.nstw .thanh_dorong,
.phancham.nstw .thanh_phancham {
    background: #40C6C6;
}

.phancham.nsdp {
    background: rgba(72, 194, 135, 0.3);
}

.phancham.nsdp .thanh_dorong,
.phancham.nsdp .thanh_phancham {
    background: #4AB782;
}

.thusodutoan.captren .phancham {
    border: solid 2px #fff;
    border-radius: 6px;
}

.thusodutoan.captren .thanh_phancham {
    border-radius: 6px;
}

.thusodutoan.captren:not(.full) {
    border-radius: 8px;
    margin-top: 12px;
}

.thusodutoan.captren.captinh.mb-20 {
    margin-bottom: 20px;
}

.thusodutoan.captren .topbieudo>div {
    padding: 6px 15px;
}

.thusodutoan.captren h3 {
    padding: 0px 15px;
    width: 100%;
    text-align: left;
}

.thusodutoan.captren.captinh h3,
.thusodutoan.captren.nsnn h3 {
    color: #fff;
}

.bieudo img {
    max-width: 100%;
}

.treeli-active .tree-active .tree-row>div:not(.caret),
.treeli-active .tree-active .tree-row>div:after {
    border-color: #c9d9e5;
}

h3.tieude {
    position: relative;
    padding: 10px;
    display: flex;
    align-items: center;
    border-bottom: solid 1px #ddd;
    margin-top: 20px;
    margin-bottom: 10px;
    background: rgba(58, 154, 228, 1);
    background: -moz-linear-gradient(296deg, rgba(58, 154, 228, 1) 0%, rgba(19, 118, 200, 1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(58, 154, 228, 1)), color-stop(100%, rgba(19, 118, 200, 1)));
    background: -webkit-linear-gradient(296deg, rgba(58, 154, 228, 1) 0%, rgba(19, 118, 200, 1) 100%);
    background: -o-linear-gradient(296deg, rgba(58, 154, 228, 1) 0%, rgba(19, 118, 200, 1) 100%);
    background: -ms-linear-gradient(296deg, rgba(58, 154, 228, 1) 0%, rgba(19, 118, 200, 1) 100%);
    background: linear-gradient(137deg, rgba(58, 154, 228, 1) 0%, rgba(19, 118, 200, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a9ae4', endColorstr='#1376c8', GradientType=1);
    color: #fff;
    border-radius: 8px;
}

h3.tieude:before {
    content: "";
    background-image: url("../img/bgcard.png");
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: block;
    background-repeat: no-repeat;
    background-position: 97% 8px;
    z-index: 0;
    background-size: 100px;
}

h3.tieude small {
    padding-left: 8px;
    white-space: nowrap;
}

.tree {
    width: 100%;
}

.card .khung-tree {
    max-width: calc(100% + 40px);
    margin: 0 -20px;
}

.tree-row.tieude>div:last-child:before {
    display: none;
}

.card .khung-tree.tree2 ul ul ul .tree-row div:nth-child(1) {
    padding-left: 30px;
}

/* new tree ........................................................................... */

.ui-tree {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-tree li {
    position: relative;
    line-height: 2em;
}

.ui-tree ul {
    position: relative;
    margin: 0 0 0 0px;
    padding: 0;
    list-style: none;
}

.ui-tree ul:not(.show-tree) {
    display: none;
}

.ui-tree ul:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    border-left: 1px dotted rgba(0, 0, 0, 0.3);
}

.ui-tree ul li {
    padding-left: 10px;
}

.ui-tree ul li:before {
    content: "";
    position: absolute;
    top: 1em;
    left: 0;
    width: 6px;
    height: 1px;
    border-top: 1px dotted rgba(0, 0, 0, 0.3);

}

.ui-tree_div.show-icon .ui-tree_showhide:before {
    content: "-";
}

.ui-tree ul li:last-child:before {
    background-color: white;
    height: auto;
    top: 1em;
    left: -1px;
    bottom: 0;
}

.ui-tree ul ul {
    margin-left: 0;
}

.ui-tree_div {
    display: flex;
    width: 100%;
    align-items: center;
    margin-left: -6px;
}

.ui-tree_conten {
    display: flex;
    width: 100%;
}

.ui-tree_showhide {
    width: 15px;
    height: 14px;
    background: #cccc;
    min-height: 14px;
    margin-right: 4px;
    border-radius: 3px;
    position: relative;
    z-index: 999;
    border: solid 1px #b2b2b2;
}

.ui-tree_conten>div {
    width: 100%;
    display: flex;
}

.ui-tree>li>ul>li .ui-tree_div>.ui-tree_conten,
.ui-tree>li>.ui-tree_div>.ui-tree_conten {
    margin-left: 20px;
}

.ui-tree>li>ul>li>ul>li .ui-tree_div>.ui-tree_conten {
    margin-left: 10px;
}

.ui-tree>li>ul>li>ul>li>ul>li>ul>li .ui-tree_div>.ui-tree_conten {
    margin-left: 17px;
}

.ui-tree>li>.ui-tree_div>.ui-tree_showhide+.ui-tree_conten {
    margin-left: 12px;
}

.ui-tree>li>ul>li .ui-tree_div>.ui-tree_showhide+.ui-tree_conten {
    margin-left: 2px;
}

.ui-tree>li>ul>li>ul>li .ui-tree_div>.ui-tree_showhide+.ui-tree_conten {
    margin-left: -1px;
}

.ui-tree>li>ul>li>ul>li>ul>li .ui-tree_div>.ui-tree_showhide+.ui-tree_conten {
    margin-left: 0px;
}

.ui-tree>li>ul>li>ul>li>ul>li>ul>li .ui-tree_div>.ui-tree_showhide+.ui-tree_conten {
    margin-left: 0px;
}

.ui-tree ul li:before {
    width: 20px;
}

.ui-tree ul li ul li:before {
    width: 10px;
}

.ui-tree ul li ul li ul li:before {
    width: 10px;
}

.ui-tree ul li ul li ul li ul li:before {
    width: 10px;
}

.ui-tree_showhide:before {
    content: "+";
    position: absolute;
    left: 0px;
    right: 0;
    top: 1px;
    bottom: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* new tree ........................................................................... */
.card .table:not(.ko-boder) th:first-child::before,
.card .table:not(.ko-boder)th:first-child::after {
    display: none
}

.card .table:not(.ko-boder) th::before {
    left: -1px;
}

.card .table:not(.ko-boder) th::after {
    right: 0;
}

.card .table:not(.ko-boder) .tr-vl6 td:first-child::after,
.card .table:not(.ko-boder) .tr-vl5 td:first-child::after,
.card .table:not(.ko-boder) .tr-vl4 td:first-child::after,
.card .table:not(.ko-boder) .tr-vl3 td:first-child::after,
.card .table:not(.ko-boder) .tr-vl2 td:first-child::after {
    border-left: dashed 1px #b9b9b9;
    border-bottom: dashed 1px #b9b9b9;
    height: calc(100% + 1px);
    height: var(--h) !important;
    right: 0;
    pointer-events: none;
}

.card .table:not(.ko-boder) .tr-vl1 td:first-child::after {
    border-bottom: dashed 1px #b9b9b9;
}

.card .table:not(.ko-boder) th:first-child::before {
    left: 7px;
    background: transparent;
    border-left: solid 1px #b0b0b0;
    top: 50%;
    height: 30px;
    display: none !important;
}

.card .table:not(.ko-boder) .fix-top th:first-child::before {
    display: none;
}

.card .table:not(.ko-boder) tr td:first-child {
    border-color: #fff;
    border-right: solid 1px #ddd;
}

.card .table table thead {
    z-index: 9;
}


.card .table table thead.fix-top th {
    background: #fff;
}

.card .table:not(.ko-boder) th {
    border: none;
    position: relative;
    overflow: visible;
    padding-bottom: 6px;
    font-size: 0.9em;
    color: #828282;
    height: 36px;
    vertical-align: bottom;
}

.card .table:not(.ko-boder) {
    /* padding-bottom: 20px; */
    padding-left: 2px;
}

.card .table.ko-boder {
    padding-right: 0;
}

.table.ko-boder th,
.table.ko-boder td {
    border: none;
}

.table.ko-boder th:before,
.table.ko-boder th:after {
    display: none !important;
}


.table-icon td:first-child:before {
    content: "\ea0b";
    font-family: 'khonsnn' !important;
    font-size: 9px;
    padding: 2px;
    border: solid 1px #b0b0b0;
    width: 15px;
    height: 16px;
    border-radius: 3px;
    background: #fff;
    display: block;
    z-index: 999;
    position: relative;
}

.table-icon.dau-tru td:first-child:before {
    content: "\ea0a";
}

.tr-vl1 td:first-child {
    padding-left: 0;
    text-align: left;
}

.table.table-tree th.w-60:first-child {
    padding-left: 0;
    width: 53px;
    min-width: 53px;
    text-align: left;
}

.tr-vl1.table-icon td:first-child:after {
    content: "";
    border-bottom: dashed 1px #b0b0b0;
    position: absolute;
    left: 15px;
    right: 0;
    top: 50%;
    height: 0;
    overflow: hidden;
    z-index: 1;
}

.tr-vl2 td:first-child:after {
    left: 16px;
    right: 0;
    z-index: 0;
}

.table-tree tbody tr:not(.tr-vl1) td:first-child:after,
.tr-vl6 td:first-child:after,
.tr-vl5 td:first-child:after,
.tr-vl4 td:first-child:after,
.tr-vl3 td:first-child:after,
.tr-vl2 td:first-child:after {
    content: "";
    border-bottom: dashed 1px #b0b0b0;
    position: absolute;
    bottom: 50%;
    height: 100%;
    overflow: hidden;
    border-left: dashed 1px #b0b0b0;
}

.tr-vl3 td:first-child:after {
    left: 25px;
    right: 0;
}

td:first-child {
    position: relative;
    overflow: visible;
    padding-right: 12px;
    z-index: 100;
}

.table.table-tree tr,
.tr-vl1,
.tr-vl2,
.tr-vl3 {
    transition: all .2s;
    position: relative;
    z-index: 100;
}

.tr-vl2+.tr-vl2 {
    z-index: 101;
}

tr.hide {
    height: 0 !important;
    display: none;
}

.tr-vl1 {
    font-weight: 600;
}

.tr-vl2 {
    font-weight: 400;
}

td.xanh {
    color: #1378c8;
}

.table.table-tree tr,
.table.table-tree .fix_treetabletr,
.fix_treetabletr {
    z-index: var(--index) !important;
}

.table.table-tree .tdfix tr,
.table.table-tree .tdfix .fix_treetabletr {
    z-index: 0 !important;
}

.table.table-tree .tdfix tr th:first-child,
.table.table-tree .tdfix tr td:first-child {
    background-color: #FFF;
}

.table-tree.table:not(.ko-boder) .tdfix th:first-child::before {
    right: 0;
}

.table.table-tree .tdfix tr td.fixleft:before {
    content: "";
    display: block;
    position: absolute;
    right: 0px;
    top: 0;
    bottom: 0;
    border-right: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
}

.table.table-tree .tdfix tr td:first-child+td:before {
    border-left: solid 1px #ddd;
}


.card .table table thead.fix-top:before,
.table.table-tree .tdfix thead:before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    border-bottom: solid 1px #ccc;
    z-index: 99;
    pointer-events: none;
}

.tr-vl3:not(.hide)+tr .fix_treetable:after {
    height: var(--h) !important;
}

tr+tr .fix_treetable:after {
    height: var(--h) !important;
}

.card.card_xanh th {
    color: #fff;
}

.table-icon td:first-child::before {
    font-weight: 300;
}

.card.card_xanh .table-icon td:first-child::before {
    color: #1378c8;
    border-color: #ffffff;
}

.card.card_xanh .tr-vl1 td:first-child:after,
.card.card_xanh .tr-vl2 td:first-child:after,
.card.card_xanh .tr-vl3 td:first-child:after {
    border-color: #fff;
}

.card-head {
    justify-content: space-between;
    align-items: center;
    margin-top: -12px;
    margin-left: -20px;
    padding: 10px 16px !important;
    margin-right: -20px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.05);
}

.card-headvl2 {
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px !important;
    display: flex;
    width: 100%;
    margin-left: -20px;
    background: #f3f3f3;
    margin-right: -20px;
    width: calc(100% + 40px);
    border-bottom: solid 1px #fff;
}

.ko-icon .icon-muiten {
    display: none;
}

.card.card_xanh .card-head {
    border-bottom: solid 1px rgba(255, 255, 255, 0.2);
}

.card-headvl2 .icon-muiten,
.card-head .icon-muiten {
    width: auto;
    transform: rotate(-90deg);
    font-size: 12px;
    font-weight: normal;
}

.card.hide-bodycard .card-head .icon-muiten {
    transform: rotate(90deg);
}

.card-headvl2 h3,
.card-head h3 {
    padding-bottom: 0;
}

.card-body {
    overflow: auto;
    padding: 0 12px !important;
    margin-left: -20px;
    margin-right: -20px;
    flex-wrap: wrap;
}

.modaltable .modal-content>div:not(.nut):first-child {
    min-height: 30px;
}

.card.card_xanh table tr td .thaotac a {
    color: #fff;
    font-weight: normal;
    padding: 4px;
}

.modaltable .thaotac a {
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: solid 1px #f3f3f3;
    background: #f8f8f8;
    margin-left: 8px;
}

.modaltable .thaotac a span {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: normal;
}

.modaltable .modal-content>div:not(.nut)>span:first-child {
    min-width: 100px;
    text-align: left;
}

.hide-bodycard .card-body {
    display: none;
}

.hide-bodycard .card-head {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.card.hide-bodycard {
    box-shadow: unset;
}

.khung-card .card {
    margin-bottom: 8px;
    background-color: #fff;
}

.collapseall {
    position: fixed;
    z-index: 9999;
    border: solid 1px #e1e1e1;
    cursor: pointer;
    display: inline-flex;
    right: 60px;
    bottom: 53px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 18px;
    transition: all 0.3s;
    color: #8591A4;
}

.collapseall.expand .icon-collapse {
    display: none;
}

.collapseall:not(.expand) .icon-expand {
    display: none;
}

.cardHeadtext_menus {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: 999;
    padding: 0 10px;
    background: #fff;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;
    overflow-x: auto;
}

.cardHeadtext_menu {
    padding: 0px 10px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    min-height: 46px;
    width: 100%;
}

.cardHeadtext_menu.xuongdong {
    max-width: 130px;
    white-space: normal;
}

.cardHeadtext_menu.active {
    background: #1378c8;
    color: #fff;
}

/* bieu do h  */
.topbieudo.bieudo-h {
    min-height: 300px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.topbieudo.bieudo-h+.khung-bullet {
    flex-wrap: nowrap;
    display: flex;
    padding: 8px 0 20px 0;
}

.topbieudo.bieudo-h .phancham {
    min-height: 100%;
    width: 10px;
    background: transparent;
}

.topbieudo.bieudo-h .phancham .thanh_phancham {
    width: 100% !important;
}

.topbieudo.bieudo-h .phancham+.phancham {
    margin-left: -3px;
}

.topbieudo.bieudo-h.small>div>span.text-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: center;
}

.topbieudo.bieudo-h.small>div {
    padding-bottom: 26px !important;
    width: auto;
    padding-right: 18px !important;
    padding-left: 18px !important;
    flex-wrap: nowrap;
}

.bullet.xanh::before,
.phancham.xanh .thanh_docao {
    background: #5199d4;
}

.bullet.xam:before,
.phancham.xam .thanh_docao {
    background: #d4d4d4;
}

.topbieudo.bieudo-h .phancham {
    align-items: end;
}

.topbieudo.bieudo-h .phancham .thanh_docao {
    display: flex;
    width: 100%;
    border-radius: 2px;
}

.topbieudo.bieudo-h .bieudoh_so {
    position: absolute;
    writing-mode: vertical-lr;
    right: 12px;
    font-size: 0.8rem !important;
    font-weight: 300 !important;
    justify-content: end;
    display: flex;
    max-height: 100%;
}

.topbieudo.bieudo-h .phancham {
    overflow: visible;
}

.topbieudo.bieudo-h .phancham+.phancham .bieudoh_so {
    right: auto;
    left: 11px;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    min-width: 100%;
}

[class^="col"] {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.col {
    flex: 1 0 0%;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.form-input_label {
    min-height: 14px;
}

.form-input_label {
    margin-bottom: 0.4rem;
    display: inline-block;
    font-weight: 500;
    font-size: 0.9rem;
    margin-top: 0.8rem;
}

.input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}



.input-group.lich .form-input {
    padding-right: 30px;
}

.input-group .form-input {
    /* border-top-right-radius: 0;
    border-bottom-right-radius: 0; */
    padding-right: 40px;
}

.form-input {
    display: block;
    width: 100%;
    padding: 3px 8px;
    padding-right: 8px;
    background-clip: padding-box;
    border: solid 1px #C4C9CC;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: unset;
    outline: none;
}

.form-select {
    display: block;
    width: 100%;
    padding: 3px 30px 3px 12px;
    background: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 26px 12px;
    border: solid 1px #C4C9CC;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: unset;
    outline: none;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    /* font-size: 0.85rem; */
    /* height: 36px; */
    height: 44px;
}

button {
    border-radius: 22px;
}

input,
optgroup,
select,
textarea {
    border-radius: 8px;
    text-overflow: ellipsis;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.w-60 {
    width: 60px;
    max-width: 60px;
}

.w-100 {
    width: 100px;
    max-width: 100px !important;
}

.w-110 {
    width: 110px;
    max-width: 110px !important;
}

.w-120 {
    width: 120px;
    max-width: 120px !important;
}

.w-130 {
    width: 130px;
    max-width: 130px !important;
}

.w-140 {
    width: 140px;
    max-width: 140px !important;
}

.w-150 {
    width: 150px;
    max-width: 150px !important;
}

.w-160 {
    width: 160px;
    max-width: 160px !important;
}

.w-170 {
    width: 170px;
    max-width: 170px !important;
}

.w-180 {
    width: 180px;
    max-width: 180px !important;
}

.w-190 {
    width: 190px;
    max-width: 190px !important;
}

.w-200 {
    width: 200px;
    max-width: 200px !important;
}

.w-210 {
    width: 210px;
    max-width: 210px !important;
}

.w-220 {
    width: 220px;
    max-width: 220px !important;
}

.w-230 {
    width: 230px;
    max-width: 230px !important;
}

.w-240 {
    width: 240px;
    max-width: 240px !important;
}

.w-250 {
    width: 250px;
    max-width: 250px !important;
}

.timkiem-popup {
    background: #fff;
    position: fixed;
    z-index: 9999;
    left: 6px;
    right: 6px;
    padding: 16px 16px 26px 16px;
    border: solid 1px #eaeaea;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0px -1px 8px -2px #00000047;
    transition: all .3s;
}

.modal.timkiem-modal.show-modal .timkiem-popup {
    bottom: 0;
}

.timkiem-popup {
    bottom: -100%;
}

.row.nut .col {
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
    -webkit-appearance: button;
}

.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    color: #fff;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: solid 1px #E3E6E8;
    background-color: #fff;
    color: #444;
    min-width: 30%;
    justify-content: center;
    font-weight: 500;
}

.btn.btn-primary {
    min-width: 40%;
}

.btn [class^="icon-"],
.btn [class*=" icon-"] {
    margin-right: 6px;
    font-size: 13px;
    color: #1378c8;
}

.btn.btn-primary {
    border: solid 1px #135f9a;
    background-color: #1378c8;
    color: #fff;
}

.btn.btn-primary [class^="icon-"],
.btn.btn-primary [class*=" icon-"] {
    color: #fff;
}

.row.nut .col.center {
    justify-content: center;
}

.collapseall,
.show-timkiem {
    box-shadow: 0px -1px 8px -2px rgba(0, 0, 0, 0.5);
    border: none !important;
}

.card.card_xanh .topbieudo.large,
.card.card_xanh .topbieudo.large>div {
    background: transparent;
    padding: 2px 0 2px 0 !important;
}

.card.card_xanh .topbieudo.large .phancham {
    background: transparent;
    min-height: 42px;
    margin-bottom: -2px;
}

.topbieudo.large.bodylv2.bieudo-w .bieudoh_so {
    font-size: 1.1rem;
    padding-left: 10px;
    padding-right: 10px;
}

.card.card_xanh .topbieudo.large .phancham .thanh_dorong {
    border: solid 2px #fff;
    border-radius: 6px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.card.card_xanh .topbieudo.large .phancham .thanh_dorong.o_ngoai {
    justify-content: start;
}

.card.card_xanh .topbieudo.large .phancham:first-child .thanh_dorong {
    border-top-left-radius: 6px !important;
}

.card.card_xanh .topbieudo.large .phancham:last-child .thanh_dorong {
    border-bottom-left-radius: 6px !important;
}


/* pie chatr */
/* Charts start */
.chart_holder,
.pie_chart {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.chart_holder {
    flex-wrap: wrap;
    padding-top: 40px;
    padding-bottom: 20px;
}

.pie_chart {
    position: relative;
    float: left;
    width: var(--pie_w);
    height: var(--pie_w);
    margin: 0;
    padding: 0;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.2)));
}

.pie_chart ul {
    list-style-type: none;
    width: var(--pie_w);
    height: var(--pie_w);
    padding: 0;
    margin: 0;
}

.pie_chart li {
    position: absolute;
    top: 0px;
    width: var(--pie_w);
    height: var(--pie_w);
    padding: 0;
    margin: 0;
}

.pie_chart p {
    width: var(--pie_w);
    height: var(--pie_w);
    padding: 0;
    margin: 0;
}

.pie_chart li p {
    -webkit-transition: all .7s ease-out;
}

.pie_chart span {
    display: block;
    width: var(--pie_2);
    height: var(--pie_w);
}

.pie_chart ul li:nth-child(odd) {
    clip: rect(0px, var(--pie_w), var(--pie_w), var(--pie_2));
}

.pie_chart ul li:nth-child(even) {
    clip: rect(0px, var(--pie_2), var(--pie_w), 0px);
}


.pie_left {
    -moz-border-radius-topleft: var(--pie_2);
    -moz-border-radius-bottomleft: var(--pie_2);
    -webkit-border-top-left-radius: var(--pie_2);
    -webkit-border-bottom-left-radius: var(--pie_2);
    border-top-left-radius: var(--pie_2);
    border-bottom-left-radius: var(--pie_2);
}

.pie_right {
    margin-left: var(--pie_2);
    -moz-border-radius-topright: var(--pie_2);
    -moz-border-radius-bottomright: var(--pie_2);
    -webkit-border-top-right-radius: var(--pie_2);
    -webkit-border-bottom-right-radius: var(--pie_2);
    border-top-right-radius: var(--pie_2);
    border-bottom-right-radius: var(--pie_2);
}

.labels ul li.thunoidia:before,
.thunoidia span {
    background: #5199D4;
    color: #5199D4;
}

.thunoidia .litext+div+div {
    color: #5199D4;
}

.labels ul li.thuvientro:before,
.thuvientro span {
    background: #00b43c;
    color: #00b43c;
}

.thuvientro .litext+div+div {
    color: #00b43c;
}

.labels ul li.thutudautho:before,
.thutudautho span {
    background: #ED3638;
    color: #ED3638;
}

.thutudautho .litext+div+div {
    color: #ED3638;
}

.labels ul li.thucandoi:before,
.thucandoi span {
    background: #ffc13a;
    color: #ffc13a;
}

.thucandoi .litext+div+div {
    color: #ffc13a;
}

.chart_holder .labels {
    width: 100%;
}

.labels ul {
    margin-top: 0;
    padding-top: 40px;
}

.labels ul li {
    display: flex;
    margin: 0;
    padding: 0 0 8px 0;
}

.labels ul li:before {
    content: "";
    display: block;
    float: left;
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0px 5px 0 0;
    background: #FFFFFF;
    border-radius: 3px;
}

.litext {
    width: 100%;
}

.labels ul li div {
    display: inline-block;
}

.labels ul li div+div {
    padding-left: 8px;
    min-width: 60px;
    text-align: right;
    font-weight: 500;
    color: #444;
}

.labels ul li .litext+div+div {
    text-align: center;
}

/*Pie chart data (degree value) */
.pie_chart ul :nth-child(odd) p,
.pie_chart ul :nth-child(odd) p span div,
.q2_2010:target.pie_chart ul :nth-child(odd) p {
    -moz-transform: rotate(var(--c_r));
    -webkit-transform: rotate(var(--c_r));
    -o-transform: rotate(var(--c_r));
}

.pie_chart ul :nth-child(even) p,
.pie_chart ul :nth-child(even) p span div,
.q2_2010:target.pie_chart ul :nth-child(even) p {
    -moz-transform: rotate(var(--c_l));
    -webkit-transform: rotate(var(--c_l));
    -o-transform: rotate(var(--c_l));
}

.pie_chart li p span div {
    position: absolute;
    top: -16px;
    left: -26px;
    color: inherit;
    border: solid 1px;
    padding: 2px 4px;
    border-radius: 6px;
    background: #fff;
    font-weight: 500;
}

.table-tree.table:not(.ko-boder) th:first-child {
    padding-left: 0;
    width: 30px;
}

.table:not(.ko-boder) .tr-vl4 td:first-child::after {
    left: 34px;
}

.card .table:not(.ko-boder) .tr-vl5 td:first-child::after {
    left: 43px;
}

.card .table:not(.ko-boder) .tr-vl6 td:first-child::after {
    left: 52px;
}

.tr-vl4 td:first-child {
    padding-right: 2px;
}

.tr-vl5 td:first-child {
    padding-right: 0px;
}

.tr-vl5 td:first-child:before {
    margin-right: -8px;
}

.table-icon td:first-child::before {
    margin-left: 0px;
}

.table-icon.tr-vl2 td:first-child::before {
    margin-left: 1px;
}

.table-icon.tr-vl3 td:first-child::before {
    margin-left: 10px;
}

.table-icon.tr-vl4 td:first-child::before {
    margin-left: 19px;
}

.table-icon.tr-vl5 td:first-child::before {
    margin-left: 28px;
}

.table-icon td:first-child {
    text-align: left;
    padding-right: 15px;
}

.table.table-tree .tdfix tr th.fixleft::before,
.table.table-tree .tdfix tr td.fixleft::before {
    background: #fff;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    z-index: -1;
}

.table.table-tree .tdfix tr th.stt.fixleft::before,
.table.table-tree .tdfix tr td.stt.fixleft::before {
    left: 1px;
}

.table.table-tree .tdfix.tdfix2 tr th:first-child,
.table.table-tree .tdfix.tdfix2 tr td:first-child,
.table.table-tree .tdfix.tdfix2 tr th.fixleft,
.table.table-tree .tdfix.tdfix2 tr td.fixleft {
    pointer-events: none;
}

.table.table-tree .tdfix tr th.fixleft,
.table.table-tree .tdfix tr td.fixleft,
.table.table-tree .tdfix tr th:first-child,
.table.table-tree .tdfix tr td:first-child {
    left: var(--left_td) !important;
    z-index: 99;
    width: 30px;
    transition: unset;
    background: #fff;
    /* border-left: none;
    border-right: none; */
    border: none;
}

.table.table-tree .tdfix tr th,
.table.table-tree .tdfix tr th.fixleft,
.table.table-tree .tdfix tr th:first-child,
.table.table-tree .tdfix tr td:first-child {
    background-color: #fff;
}

.table.table-tree tr.bgtr {
    z-index: 0 !important;
}

.table-tree.table:not(.ko-boder) th:first-child::before,
.bgtd {
    position: absolute;
    left: -10px;
    right: 0;
    bottom: 0;
    /* background: #fff; */
    z-index: 0;
    /* box-shadow: 1px 0px 0px #ddd; */
    width: auto;
    height: auto;
}

.overflow-h {
    overflow: hidden !important;
}

.table-tree.table:not(.ko-boder) th:first-child::before {
    content: "";
    display: block !important;
    right: 1px;
}

.hide-bodycardlv2 .title-lv2.bg-lv2 {
    background: #fff;
}

.thusodutoan.full.hide-bodycardlv2 .title-lv2 {
    background: transparent;
}

.thusodutoan.full.hide-bodycardlv2 {
    padding-bottom: 6px;
}

.thusodutoan.full.hide-bodycardlv2.mb-20 {
    margin-bottom: 0;
}

.thusodutoan.captren:not(.full) .title-lv2 {
    margin-left: 0;
}

.thusodutoan.captren:not(.full) .title-lv2 .icon-muiten {
    color: #fff;
}

.thusodutoan.captren:not(.full).hide-bodycardlv2 {
    padding-bottom: 0;
    margin-bottom: 0;
    padding-top: 0;
}

.thusodutoan.captren:not(.full).hide-bodycardlv2.mb-20 {
    margin-bottom: 12px;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-5 {
    padding-top: 5px !important;
}

.modaltable .modal-content .modalconten>.modal_stt,
.modaltable .modal-content>.modal_stt {
    padding: 6px 0px !important;
    display: block !important;
    width: auto !important;
    border-bottom: none !important;
}

.modalconten.parent-modalconten .modal_stt,
.modaltable .modal-content>.modal_stt {
    position: absolute;
    top: 0px;
    right: 20px;
}

.modaltable .modal-content .chid-modalconten>.modal_stt {
    height: auto;
    padding: 0 !important;
    width: 100% !important;
    justify-content: end;
    display: flex !important;
}

.modaltable .modal-content .modalconten>.modal_stt:not(.nut)>span:first-child,
.modaltable .modal-content>.modal_stt:not(.nut)>span:first-child {
    min-width: 19px;
    color: #1378C8;
    font-weight: bold;
    background: #fbfbfb;
    padding: 1px 4px;
    border-radius: 4px;
    border: solid 1px #eaeaea;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chid-modalconten {
    position: relative;
    /* padding-top: 22px !important; */
}

.modaltable .modal-content .chid-modalconten>.modal_stt {
    top: 0px;
    right: 0;
}

.chid-modalconten>div:not(.nut):first-child {
    display: none;
}

.stt {
    width: 30px;
    font-weight: 500;
    color: #828282;
    text-align: right;
}

.stt::before {
    background: #fff;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.modalconten.parent-modalconten:not(.parent-show)>.modal_stt~div {
    display: none;
}

.modalconten.parent-modalconten:not(.parent-show)>.modal_stt+div {
    display: flex;
}

.modalconten.parent-modalconten:not(.parent-show)>.modal_stt+div {
    border-bottom: none;
}

.modalconten.parent-modalconten:not(.parent-show)>.modal_stt+div {
    position: relative;
    padding-bottom: 0;
}

.modalconten.parent-modalconten.parent-show>.modal_stt+div>span:last-child:after,
.modalconten.parent-modalconten:not(.parent-show)>.modal_stt+div>span:last-child:after {
    content: "\e94a";
    font-family: 'khonsnn' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    color: #bfbfbf;
    display: inline-flex;
    margin-left: 6px;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -10px;
    top: 50%;
    margin-top: -3px;
}

.modalconten.parent-modalconten.parent-show>.modal_stt+div>span:last-child:after {
    transform: rotate(180deg);
    margin-top: -6px;
}

.modalconten.parent-modalconten {
    padding-bottom: 14px !important;
    cursor: pointer;
    border-radius: 2px;
}

.modalconten.parent-modalconten {
    transition: all 0.3s;
}

.modaltable .modal-content .modalconten>.modal_stt.konoidung,
.modaltable .modal-content>.modal_stt.konoidung {
    display: none !important;
    ;
}

/* Notifications...................................................................... */
/* @keyframes slidein {
    0% {
        transform: translateY(-210%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
} */

@keyframes slidein {
    0% {
        transform: translateX(110%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeout {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(0);
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes slideout {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(110%);
        opacity: 0;
    }
}

.notification {
    background-color: #f5f5f5;
    border-radius: 4px;
    padding: 1.25rem 2.5rem 1.25rem 1.5rem;
    position: relative;
}

.notification a:not(.button) {
    color: currentColor;
    text-decoration: underline;
}

.notification strong {
    color: currentColor;
}

.notification code,
.notification pre {
    background: #fff;
}

.notification pre code {
    background: 0 0;
}

.notification>.delete {
    position: absolute;
    right: 6px;
    top: 6px;
    background: transparent;
}

.notification .content,
.notification .subtitle,
.notification .title {
    color: currentColor;
}

.delete,
.modal-close {
    -moz-appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 290486px;
    cursor: pointer;
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    font-size: 0;
    height: 20px;
    max-height: 20px;
    max-width: 20px;
    min-height: 20px;
    min-width: 20px;
    outline: 0;
    position: relative;
    vertical-align: top;
    width: 20px;
}

.delete::after,
.delete::before,
.modal-close::after,
.modal-close::before {
    background-color: #fff;
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.delete::before,
.modal-close::before {
    height: 2px;
    width: 70%;
}

.delete::after,
.modal-close::after {
    height: 70%;
    width: 2px;
}

.is-small.delete,
.is-small.modal-close {
    height: 16px;
    max-height: 16px;
    max-width: 16px;
    min-height: 16px;
    min-width: 16px;
    width: 16px;
}

.is-medium.delete,
.is-medium.modal-close {
    height: 24px;
    max-height: 24px;
    max-width: 24px;
    min-height: 24px;
    min-width: 24px;
    width: 24px;
}

.is-large.delete,
.is-large.modal-close {
    height: 32px;
    max-height: 32px;
    max-width: 32px;
    min-height: 32px;
    min-width: 32px;
    width: 32px;
}

.button.is-loading::after,
.control.is-loading::after,
.loader,
.select.is-loading::after {
    -webkit-animation: spinAround .5s infinite linear;
    animation: spinAround .5s infinite linear;
    border: 2px solid #dbdbdb;
    border-radius: 290486px;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: block;
    height: 1em;
    position: relative;
    width: 1em;
}

.notification {
    position: fixed;
    /* bottom: -100px; */
    right: 0.5rem;
    z-index: 100;
    animation: slidein 2s 1;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.3);
    max-width: calc(100% - 20px);
    background-color: whitesmoke;
    border-radius: 4px;
    padding: 6px 30px 6px 6px;
    min-height: 50px;
    align-items: center;
}

.notification.is-white {
    background-color: rgba(255, 255, 255, 0.7);
    color: #0a0a0a;
}

.notification.is-black {
    background-color: rgba(10, 10, 10, 0.7);
    color: #fff;
}

.notification.is-light {
    background-color: rgba(245, 245, 245, 0.7);
    color: #363636;
}

.notification.is-dark {
    background-color: rgba(54, 54, 54, 0.7);
    color: #f5f5f5;
}

.notification.is-primary {
    background-color: rgba(0, 209, 178, 0.7);
    color: #fff;
}

.notification.is-link {
    background-color: rgba(50, 115, 220, 0.7);
    color: #fff;
}

.notification.is-info {
    background-color: rgba(32, 156, 238, 0.7);
    color: #fff;
}

.notification.is-success {
    background-color: rgba(35, 209, 96, 0.7);
    color: #fff;
}


.notification.is-danger .delete,
.notification.is-danger .delete:focus,
.notification.is-danger .delete:hover,
.notification.is-danger .modal-close:focus,
.notification.is-danger .modal-close:hover {
    background-color: transparent;
}

.notification.is-danger .delete:active,
.notification.is-danger .modal-close:active {
    background-color: transparent;
}

.notification.is-warning {
    background-color: #FBFFE5;
    color: #AC8202;
    border: solid 1px #FFEBB0;
}

.notification.is-warning .delete::after,
.notification.is-warning .delete::before,
.notification.is-warning .modal-close::after,
.notification.is-warning .modal-close::before {
    background-color: #AC8202;
}

.notification.is-warning .iconthongbao {
    background: #F8C630;
}

.notification.is-danger {
    background-color: #FFF0F1;
    color: #EC1C24;
    border: solid 1px #FFD0D2;
}

.notification.is-danger .delete::after,
.notification.is-danger .delete::before,
.notification.is-danger .modal-close::after,
.notification.is-danger .modal-close::before {
    background-color: #7A1010;
}

.notification.is-danger .iconthongbao {
    background: #EC1C24;
}

.noidungthongbao {
    font-size: 0.8rem;
}

.iconthongbao {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}


.notification {
    display: flex;
    gap: 12px;
}

/* Notifications...................................................................... */
@-moz-document url-prefix() {

    .table.table-tree .tdfix tr th.fixleft::before,
    .table.table-tree .tdfix tr td.fixleft::before {
        bottom: -1px !important;
        border-top: solid 1px #ddd;
    }

    .table.table-tree .tdfix tbody tr:first-child td.fixleft::before {
        border-top: none !important;
    }
}

.tdfix :nth-last-child(1 of .fixleft) {
    box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.1), 2px 0px 0px 0px rgba(0, 0, 0, 0.06), 3px 0px 0px 0px rgba(0, 0, 0, 0.02);
}

.tdfix :nth-last-child(1 of .fixleft)::before {
    border-right: none !important;
}

.card .table table.tdfix thead,
.card .table table thead.fix-top {
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.06), 0px 2px 0px 0px rgba(0, 0, 0, 0.04), 0px 3px 0px 0px rgba(0, 0, 0, 0.01);
}

/* BTC login .............................. */
.login form h3>span {
    font-weight: bold;
    display: flex;
    justify-content: center;
    font-size: 1.8rem;
}

.login form h3>small {
    display: flex;
    justify-content: center;
    font-weight: normal;
    font-size: 0.9rem;
}

.dangnhapvoi {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.dangnhapvoi-title {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 10px 0;
    font-weight: 500;
    white-space: nowrap;
    align-items: center;
}

.dangnhapvoi-icon {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 20px;
}

.dangnhapvoi-icon img {
    width: 46px;
}

.dangnhapvoi-title:before,
.dangnhapvoi-title:after {
    content: "";
    width: 100%;
    height: 2px;
    margin-top: -1px;
}

.dangnhapvoi-title::before {
    margin-right: 6px;

    background: rgba(255, 255, 255, 0);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0.3)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
}

.dangnhapvoi-title::after {
    margin-left: 6px;
    background: rgba(255, 255, 255, 0.3);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
}

.dangnhapvoi-icon div {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
    border-radius: 23px;
    width: 46px;
    height: 46px;
    overflow: hidden;
}

.conten-home h5 {
    text-align: center;
}

.conten-home h5+span {
    text-align: center;
}

.nutdangnhap.center {
    justify-content: center;
}

.login .logotrang.btc {
    padding: 40px 0 0 0;
    margin-bottom: -12px;
    height: 180px;
}

.header .logotrang img {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
}

.slider {
    height: auto;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 10px 30px;
}

.slide {
    width: 90%;
    flex-shrink: 0;
    min-height: 200px;
}

.img-slider {
    box-shadow: 1px 0px 10px -3px rgb(0 0 0 / 30%);
    border-radius: 8px;
    max-height: 200px;
    overflow: hidden;
    margin-bottom: 12px;
    display: flex;
}

.img-slider img {
    min-width: 100%;
    height: auto;
}

.slides>div {
    scroll-snap-align: start;
}

.slide-text h3 {
    padding-bottom: 4px;
}

.slide-text p {
    color: #828282;
}

.slide-text a {
    color: blue;
    font-weight: 400;
    font-size: 14px;
}

.khung-slider {
    overflow: hidden;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
}

.khung-slider .slider {
    margin-bottom: -20px;
    padding-bottom: 30px;
}

.conten-home.full {
    width: 100%;
    max-width: unset;
    background-color: #F3F3F3;
    border: solid 1px #EAEAEA;
    box-shadow: 0px 2px 12px -3px rgba(0, 0, 0, 0.25);
    padding: 5px;
    margin: 10px 2px;
    display: flex;
    flex-wrap: wrap;
}

.congkhaidanhkhach {
    width: 25%;
    padding: 8px 5px;
}

.congkhaidanhkhach .icon-conten img {
    height: 36px;
}

.congkhaidanhkhach h5 {
    font-weight: normal;
    color: #363B64;
}

.noidungchinh {
    overflow: hidden;
}

.tintuc {
    padding: 12px 0px 0px 0px;
    margin-left: -10px;
    margin-right: -10px;
}

.tintuc .slide {
    width: 100%;
    display: flex;
    gap: 20px;
    min-height: auto;
    padding: 12px 16px;
}

.tintuc .slide .img-slider {
    width: 130px;
    height: 130px;
    min-width: 130px;
    margin-bottom: 0;
    box-shadow: 1px 0px 6px -3px rgb(0 0 0 / 20%);
}

.tintuc .slide:nth-child(even) {
    background: #f8f8f8;
}

.thoigian {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    background: rgba(0, 130, 207, 0.8);
    bottom: 8px;
    left: 8px;
    border-radius: 12px;
    line-height: 1;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
}

.img-slider {
    position: relative;
}

.icon-thoigian {
    background: #F6B11B;
    display: flex;
    margin-left: -4px;
    padding: 2px;
    margin-top: -4px;
    margin-bottom: -4px;
    border-radius: 50%;
    font-weight: normal;
    font-size: 18px;
    line-height: 1;
}

.tintuc .thoigian {
    left: auto;
    right: 4px;
    bottom: 4px;
    padding: 2px 6px 2px 2px;
}

.tintuc .thoigian .icon-thoigian {
    margin-left: -2px;
    padding: 2px;
    margin-top: -2px;
    margin-bottom: -2px;
    font-size: 15px;
}

.slide-text h3 {
    font-size: 1rem;
}

.slide-text p,
.slide-text a {
    font-size: .86rem;
    line-height: 1.2;
}

.thoigian>span {
    font-size: 0.8rem;
}

.pb-0 {
    padding-bottom: 0;
}

.thuvien.chinhsua.center {
    justify-content: center;
    background: #EAEAEA;
    margin-left: -10px;
    margin-right: -10px;
    width: auto;
    border-top: solid 1px #DDDDDD;
}

.thuvien.chinhsua.center .conten-home {
    padding: 4px;
    border: dashed 1px #DEDEDE;
    margin: 12px;
    border-radius: 6px;
    box-shadow: unset;
    width: auto;
}

.thuvien.chinhsua.center .conten-home h5 {
    justify-content: center;
}

.tintuc .slide-text {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    padding-bottom: 8px;
}

.thuvien.chinhsua .conten-home .icon-plus {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    background: #f3f3f3;
    border-radius: 50%;
    margin-right: 6px;
    color: #828282;
}

.tintucchitiet {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -10px;
}

.tintucchitiet>.img-slider {
    border-radius: 0;
    box-shadow: unset;
    max-height: 250px;
    margin-bottom: 0;
}

.tintucchitiet .img-slider {
    max-height: unset;
    margin-bottom: 0;
}

.tintucchitiet .slide-text {
    padding: 0 16px;
}

.tintucchitiet .slide-text p {
    color: #202020;
}

.tintucchitiet .slide-text p,
.tintucchitiet i {
    font-size: 0.9rem;
}

.tintucchitiet .img-slider+i {
    font-size: 0.8rem;
}

.tintucchitiet i {
    color: #666666;
}

.tintucchitiet .slide-text i,
.tintucchitiet .slide-text p,
.tintucchitiet .slide-text h3 {
    padding: 8px 0;
}

.title_tinlienquan,
.tintucchitiet .slide-text>h3 {
    border-left: solid 5px #0082CF;
    background: #f3f3f3;
    padding: 8px 11px;
}

.title_tinlienquan {
    margin-top: 10px;
}

.tintucchitiet .slide-text>h3 {
    margin-bottom: 8px;
    margin-left: -16px;
    margin-right: -16px;
}

.tintucchitiet {
    background: #fff;
}

.title_tinlienquan+.tintuc {
    padding-top: 0;
}

.title_tinlienquan+.tintuc,
.chitiet .thuvien.chinhsua.center {
    margin-left: 0;
    margin-right: 0;
}

.thongtincanhan {
    background: rgba(19, 120, 200, 0.06);
}

.thongtincanhan span b {
    width: 100%;
    text-transform: uppercase;
    font-weight: bold;
}

.thongtincanhan .iconcauhinh+span {
    flex-wrap: wrap;
    height: auto;
}

.text-icon {
    font-size: 1.6rem;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}

.cauhinh-conten {
    min-width: 100%;
    padding-top: 50px;
}

.cauhinh-conten ul {
    margin-top: 0;
    padding-top: 0;
}

.thongtincanhan {
    display: flex;
}

.cauhinh-conten a {
    display: flex;
    height: 56px;
    align-items: center;
    padding: 0 20px;
}

.thongtincanhan .iconcauhinh {
    background: rgba(19, 120, 200, 0.06) !important;
    color: #1378C8;
}

input,
optgroup,
select,
textarea {
    border-radius: 3px;
}

.dangky {
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.title-dangky {
    background-image: url("../img/dangky.svg");
    background-repeat: no-repeat;
    background-position: bottom right;
    height: 100px;
    background-size: 100px;
    display: flex;
    align-items: end;
    padding-bottom: 12px;
    margin-bottom: -12px;
}

.title-dangky h3 {
    font-size: 1.4rem;
    color: #444;
    text-transform: uppercase;
}

.do {
    color: red;
}

.input-group>[class^="icon-"],
.input-group>[class*=" icon-"] {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 10px;
    color: #ccc;
    font-size: 1.2rem;
    font-weight: normal;
}

.slogan-logo {
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-bottom: 2px !important;
    width: 100%;
}

.menu1.header .slogan-logo {
    padding-left: 10px;
    padding-bottom: 0 !important;
}

.slogan-logo span {
    font-weight: bold;
    font-size: 1.3rem;
    letter-spacing: 1px;
    width: 100%;
}

.slogan-logo small {
    font-size: 0.7rem;
    letter-spacing: 0.16px;
}

.col-12>.do {
    padding: 6px 0 0 0;
    display: flex;
}

.tintucchitiet p+.img-slider {
    margin-top: 6px;
    margin-bottom: 6px;
    box-shadow: unset;
}

.khungtable.full {
    margin-left: -11px;
    margin-right: -11px;
}

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

.input-group .icon-timkiem {
    color: #1378C8;
}

.bg-timkiem {
    background: #f3f3f3;
    padding: 8px 0px;
    margin-top: -10px;
}

.chitietdichvu2 {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    margin-left: -10px;
    margin-right: -10px;
}

.ma-ten {
    display: flex;
    flex-wrap: wrap;
    background: #f8f8f8;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    line-height: 1;
    margin-right: 14px;
}

.ma-ten>span {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.86rem;
    color: #666;
    padding-top: 3px;
}

.ma-ten span+span {
    border-top: solid 1px #f0f0f0;
    padding-bottom: 3px;
    padding-top: 0;
}

.chitietdichvu2:nth-child(even) {
    background: #FBFBFB;
}

.chitietdichvu2:nth-child(even) .ma-ten {
    background: #f3f3f3;
}

.chitietdichvu2:nth-child(even) .ma-ten span+span {
    border-top: solid 1px #EAEAEA;
}

.ma {
    font-weight: bold;
}

.chitietdichvu2.icon {
    align-items: stretch;
}

.chitietdichvu2.icon .ma-ten {
    background: transparent !important;
    border-radius: 0 !important;
    height: 100%;
    display: block;
    width: auto;
}

.chitietdichvu2.icon .ma-ten>span {
    border: none;
    justify-content: left;
    align-items: baseline;
    padding-top: 3px;
}

.chitietdichvu2.icon .ma-ten [class^="icon-"],
.chitietdichvu2.icon .ma-ten [class*=" icon-"] {
    color: #999999;
}
.table th:first-child::before {
    display: none;
  }
.table th:last-child::after {
    display: none;
}

/* BTC login .............................. */