/***********************************************************************/
/***************FONT CHỮ****************/
/***********************************************************************/
body {
    margin:0;
    padding:0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('../font/Material/material-symbols-rounded.woff2') format('woff2');
}

.material-symbols-rounded {
    font-family: 'Material Symbols Rounded' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.material-symbols-rounded {
    font-variation-settings:
        'wght' 300
}

.material-symbols-rounded.filled {
    font-variation-settings:
        'FILL' 1
}

@font-face {
    font-family: 'Roboto';
    src: url('../font/Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'Roboto Medium';
    src: url('../font/Roboto/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
}
@font-face {
    font-family: 'Roboto Bold';
    src: url('../font/Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
}
@font-face {
    font-family: 'Inter';
    src: url('../font/Inter/Inter-VariableFont_slnt,wght.ttf') format('truetype');
}

.fw700 {
    font-family: 'Roboto Bold';
    font-weight: 700;
}

body {
    font-family: 'Roboto';
    font-weight: 400;
}

.flex-center {
    display: flex;
    align-items: center;
}

.flex-juscenter {
    display: flex;
    justify-content: center;
}

.flex-spacebetween {
    display: flex;
    justify-content: space-between;
}

.btn {
    border-radius: 4px;
    min-width: 110px;
    height: 40px;
    color: var(--white, #FFF) !important;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
}

.btn.btn-primary {
    background-color: #963600 !important;
    border-color: #963600 !important;
    box-shadow: none;
}

.btn.btn-success {
    background-color: #2DC58C !important;
    border-color: #2DC58C !important;
    box-shadow: none;
}

.btn.btn-danger {
    background-color: #DF3C4E !important;
    border-color: #DF3C4E !important;
    box-shadow: none;
}

.btn.btn-outline-primary {
    background-color: #FFF !important;
    border-color: #963600 !important;
    box-shadow: none;
    color: #963600 !important;
}

.btn.btn-outline-secondary {
    background-color: #FFF !important;
    border-color: #E5E7EB !important;
    box-shadow: none;
    color: #363636 !important;
}

.btn.btn-outline-danger {
    background-color: #FFF !important;
    border-color: #DF3C4E !important;
    box-shadow: none;
    color: #DF3C4E !important;
}

.btn.btn-outline-green {
    background-color: #FFF !important;
    border-color: #2DC58C !important;
    box-shadow: none;
    color: #2DC58C !important;
}

.btn.btn-outline-blue {
    background-color: #FFF !important;
    border-color: #478FFC !important;
    box-shadow: none;
    color: #478FFC !important;
}

.btn.btn-outline-yellow {
    background-color: #FFF !important;
    border-color: #FFC700 !important;
    box-shadow: none;
    color: #FFC700 !important;
}

.btn.btn-outline-brown {
    background-color: #FFF !important;
    border-color: #53413D !important;
    box-shadow: none;
    color: #53413D !important;
}

.btn.expand-button {
    display: flex;
    align-items: center;
    position: relative;
    gap: 4px;
}

.btn.expand-button::after {
    content: "";
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12.0001 15.0751C11.9001 15.0751 11.8085 15.0584 11.7251 15.0251C11.6418 14.9917 11.5585 14.9334 11.4751 14.8501L6.52515 9.90006C6.39182 9.76672 6.32932 9.58756 6.33765 9.36256C6.34598 9.13756 6.41682 8.95839 6.55015 8.82506C6.71682 8.65839 6.89598 8.58756 7.08765 8.61256C7.27932 8.63756 7.45015 8.71672 7.60015 8.85006L12.0001 13.2501L16.4001 8.85006C16.5335 8.71672 16.7126 8.64172 16.9376 8.62506C17.1627 8.60839 17.3418 8.68339 17.4752 8.85006C17.6418 8.98339 17.7126 9.15839 17.6876 9.37506C17.6627 9.59172 17.5835 9.77506 17.4502 9.92506L12.5251 14.8501C12.4418 14.9334 12.3585 14.9917 12.2751 15.0251C12.1918 15.0584 12.1001 15.0751 12.0001 15.0751Z" fill="%23478FFC"/></svg>') no-repeat center;
    width: 20px;
    height: 20px;
    display: block;
}

.group-button {
    display: flex;
    gap: 8px;
}

.add-moreFile,
#ul-file {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#ul-file li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mainContent .contentTitle.with-group-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 16px !important;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
}

.text-center {
    text-align: center !important;
    vertical-align: middle !important;
}

.text-left {
    text-align: left !important;
    vertical-align: middle !important;
}

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

*[class*="col-"] {
    padding-right: 12px;
    padding-left: 12px;
}

.row {
    margin-right: -12px;
    margin-left: -12px;
}

.row.mini-row *[class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

.row.mini-row {
    margin-right: -8px;
    margin-left: -8px;
}

.fw400 {
    font-family: Roboto !important;
    font-weight: 400 !important;
}

.fw500 {
    font-family: Roboto Medium !important;
    font-weight: 500 !important;
}

.fw700 {
    font-family: Roboto Bold !important;
    font-weight: 700 !important;
}

.text-center {
    text-align: center !important;
    vertical-align: middle !important;
}

.text-left {
    text-align: left !important;
    vertical-align: middle !important;
}

/***********SCROLL BAR OPTION************/

*::-webkit-scrollbar-track {
    background: #FFF;
    border-radius: 20px;
}

*::-webkit-scrollbar-thumb {
    background-color: #838383;
    border-radius: 20px;
    border: 8px solid transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgb(100, 100, 100);
}

html {
    scroll-behavior: smooth;
}

/****FIREFOX SCROLL BAR****/

*:-webkit-scrollbar {
    width: 8px;
    height: 4px;
}

*:-webkit-scrollbar-track {
    background: #FFF;
    border-radius: 20px;
}

*:-webkit-scrollbar-thumb {
    background: #838383;
    border-radius: 20px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #838383 transparent;
}

/***********************************************************************/
/***************ĐĂNG NHẬP****************/
/***********************************************************************/
.login-page {
    background: url('../images/login.png') no-repeat center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}

.login-page .login-container {
    width: 500px;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0px 0px 64px 0px rgba(101, 79, 63, 0.12);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-page .login-container img {
    width: 72px;
    height: 72px;
}

.login-page .login-container .title-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
    color: #963600;
    text-align: center;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4; /* 140% */
    margin-bottom: 32px;
}

.login-page .login-container .title-login span:last-child {
    font-family: Roboto Bold;
    font-weight: 700;
} 

.login-page .login-container .DangNhap {
    color: #963600;
    font-family: Roboto Bold;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.23077; /* 123.077% */
    margin-bottom: 20px;
}

.login-page #account {
    width: 100%
}

.login-page .login-container .input-login {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    margin-bottom: 32px;
}

    .login-page .login-container .input-login input:not([type="checkbox"]) {
        border-radius: 4px;
        border: 1px solid #E3E5ED;
        padding: 12px 16px 12px 40px;
        outline: none;
        color: #363636;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5; /* 150% */
        width: 100%;
    }

.remember_me {
    position: relative;
    display: flex;
    align-items: center;
}

    .remember_me .remember_checkbox {
        padding-left: 30px;
        margin-bottom: 0;
    }

    .remember_me input {
        position: absolute;
        left: 0;
        width: auto;
        margin-top: 4px;
    }

    .login-page .login-container .input-login input::placeholder {
        color: #8E8E8E;
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5; /* 150% */
    }

.wrap-input100 {
    width: 100%;
    position: relative;
}

.focus-input100 {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: -15px;
    left: 0;
    pointer-events: none;
}

.focus-input100::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
    background: #fff
}

.focus-input100::after {
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    color: #654F3F;
    content: attr(data-placeholder);
    display: block;
    width: 100%;
    position: absolute;
    top: 21px;
    left: 0;
    padding-left: 10px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
	font-variation-settings:
	'FILL' 1
}

.login-page .login-container .toggle-password {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
    color: #8E8E8E;
    cursor: pointer;
}

.login-page .login-container .confirm-login {
    border-radius: 4px;
    background: #963600;
    padding: 12px 16px;
    width: 100%;
    color: #FFF;
    font-family: Roboto Medium;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    outline: none;
    border: none;
    cursor: pointer;
}

/***********************************************************************/
/***************PRE LOADING****************/
/***********************************************************************/
.preloader {
    position: fixed;
    left: 0;
    width: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    z-index: 9999999;
    transition: .9s;
}

.preloader::before, .preloader::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 60%;
    z-index: -1;
    background: #FFF9F4;
    transition: .9s !important;
}

.preloader::after {
    left: auto;
    right: 0;
}

.preloader.preloader-deactivate {
    visibility: hidden;
}

.preloader.preloader-deactivate::after, .preloader.preloader-deactivate::before {
    width: 0;
}

.preloader.preloader-deactivate .cssload-dots {
    opacity: 0;
    visibility: hidden;
}

.cssload-dots {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    outline: 0px red;
    filter: url(#goo);
    -o-filter: url(#goo);
    -ms-filter: url(#goo);
    -webkit-filter: url(#goo);
    -moz-filter: url(#goo);
    transition: all 0.4s;
}

.cssload-dot {
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.cssload-dot:before {
    content: "";
    width: 35px;
    height: 35px;
    border-radius: 4px;
    background: violet;
    position: absolute;
    left: 50%;
    transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    margin-left: -19.5px;
    margin-top: -19.5px;
}

.cssload-dot:nth-child(5):before {
    z-index: 100;
    width: 56.5px;
    height: 56.5px;
    margin-left: -25.75px;
    margin-top: -25.75px;
    animation: cssload-dot-colors 5.2s ease infinite;
    -o-animation: cssload-dot-colors 5.2s ease infinite;
    -ms-animation: cssload-dot-colors 5.2s ease infinite;
    -webkit-animation: cssload-dot-colors 5.2s ease infinite;
    -moz-animation: cssload-dot-colors 5.2s ease infinite;
}

.cssload-dot:nth-child(1) {
    animation: cssload-dot-rotate-1 1.2s 0s linear infinite;
    -o-animation: cssload-dot-rotate-1 5.2s 0s linear infinite;
    -ms-animation: cssload-dot-rotate-1 5.2s 0s linear infinite;
    -webkit-animation: cssload-dot-rotate-1 5.2s 0s linear infinite;
    -moz-animation: cssload-dot-rotate-1 5.2s 0s linear infinite;
}
.cssload-dot:nth-child(1):before {
    background-color: cyan;
    animation: cssload-dot-move 1.2s 0s ease infinite;
    -o-animation: cssload-dot-move 5.2s 0s ease infinite;
    -ms-animation: cssload-dot-move 5.2s 0s ease infinite;
    -webkit-animation: cssload-dot-move 5.2s 0s ease infinite;
    -moz-animation: cssload-dot-move 5.2s 0s ease infinite;
}

.cssload-dot:nth-child(2) {
    animation: cssload-dot-rotate-2 1.2s 1.3s linear infinite;
    -o-animation: cssload-dot-rotate-2 5.2s 1.3s linear infinite;
    -ms-animation: cssload-dot-rotate-2 5.2s 1.3s linear infinite;
    -webkit-animation: cssload-dot-rotate-2 5.2s 1.3s linear infinite;
    -moz-animation: cssload-dot-rotate-2 5.2s 1.3s linear infinite;
}
.cssload-dot:nth-child(2):before {
    background-color: blue;
    animation: cssload-dot-move 1.2s 1.3s ease infinite;
    -o-animation: cssload-dot-move 5.2s 1.3s ease infinite;
    -ms-animation: cssload-dot-move 5.2s 1.3s ease infinite;
    -webkit-animation: cssload-dot-move 5.2s 1.3s ease infinite;
    -moz-animation: cssload-dot-move 5.2s 1.3s ease infinite;
}

.cssload-dot:nth-child(3) {
    animation: cssload-dot-rotate-3 2.2s 2.6s linear infinite;
    -o-animation: cssload-dot-rotate-3 5.2s 2.6s linear infinite;
    -ms-animation: cssload-dot-rotate-3 5.2s 2.6s linear infinite;
    -webkit-animation: cssload-dot-rotate-3 5.2s 2.6s linear infinite;
    -moz-animation: cssload-dot-rotate-3 5.2s 2.6s linear infinite;
}
.cssload-dot:nth-child(3):before {
    background-color: darckviolet;
    animation: cssload-dot-move 2.2s 2.6s ease infinite;
    -o-animation: cssload-dot-move 5.2s 2.6s ease infinite;
    -ms-animation: cssload-dot-move 5.2s 2.6s ease infinite;
    -webkit-animation: cssload-dot-move 5.2s 2.6s ease infinite;
    -moz-animation: cssload-dot-move 5.2s 2.6s ease infinite;
}

.cssload-dot:nth-child(4) {
    animation: cssload-dot-rotate-4 5.2s 3.9s linear infinite;
    -o-animation: cssload-dot-rotate-4 5.2s 3.9s linear infinite;
    -ms-animation: cssload-dot-rotate-4 5.2s 3.9s linear infinite;
    -webkit-animation: cssload-dot-rotate-4 5.2s 3.9s linear infinite;
    -moz-animation: cssload-dot-rotate-4 5.2s 3.9s linear infinite;
}
.cssload-dot:nth-child(4):before {
    background-color: magenta;
    animation: cssload-dot-move 5.2s 3.9s ease infinite;
    -o-animation: cssload-dot-move 5.2s 3.9s ease infinite;
    -ms-animation: cssload-dot-move 5.2s 3.9s ease infinite;
    -webkit-animation: cssload-dot-move 5.2s 3.9s ease infinite;
    -moz-animation: cssload-dot-move 5.2s 3.9s ease infinite;
}

@keyframes cssload-dot-move {
    0% {
        transform: translateY(0);
    }
    18%,
    22% {
        transform: translateY(-79px);
    }
    40%,
    100% {
        transform: translateY(0);
    }
}

@-o-keyframes cssload-dot-move {
    0% {
        -o-transform: translateY(-79);
    }
    18%,
    22% {
        -o-transform: translateY(-79px);
    }
    40%,
    100% {
        -o-transform: translateY(0);
    }
}

@-ms-keyframes cssload-dot-move {
    0% {
        -ms-transform: translateY(0);
    }
    18%,
    22% {
        -ms-transform: translateY(-79px);
    }
    40%,
    100% {
        -ms-transform: translateY(0);
    }
}

@-webkit-keyframes cssload-dot-move {
    0% {
        -webkit-transform: translateY(0);
    }
    18%,
    22% {
        -webkit-transform: translateY(-79px);
    }
    40%,
    100% {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes cssload-dot-move {
    0% {
        -moz-transform: translateY(0);
    }
    18%,
    22% {
        -moz-transform: translateY(-79px);
    }
    40%,
    100% {
        -moz-transform: translateY(0);
    }
}

@keyframes cssload-dot-colors {
    0% {
        background-color: rgba(107, 23, 186, 0.64);
    }
    25% {
        background-color: rgb(112, 30, 235);
    }
    50% {
        background-color: rgb(32, 139, 241);
    }
    75% {
        background-color: rgba(136, 252, 248, 0.97);
    }
    100% {
        background-color: rgba(104, 52, 237, 0.58);
    }
}

@-o-keyframes cssload-dot-colors {
    0% {
        background-color: rgba(107, 23, 186, 0.64);
    }
    25% {
        background-color: rgb(112, 30, 235);
    }
    50% {
        background-color: rgb(32, 139, 241);
    }
    75% {
        background-color: rgba(136, 252, 248, 0.97);
    }
    100% {
        background-color: rgba(104, 52, 237, 0.58);
    }
}

@-ms-keyframes cssload-dot-colors {
    0% {
        background-color: rgba(107, 23, 186, 0.64);
    }
    25% {
        background-color: rgb(112, 30, 235);
    }
    50% {
        background-color: rgb(32, 139, 241);
    }
    75% {
        background-color: rgba(136, 252, 248, 0.97);
    }
    100% {
        background-color: rgba(104, 52, 237, 0.58);
    }
}

@-webkit-keyframes cssload-dot-colors {
    0% {
        background-color: rgba(107, 23, 186, 0.64);
    }
    25% {
        background-color: rgb(112, 30, 235);
    }
    50% {
        background-color: rgb(32, 139, 241);
    }
    75% {
        background-color: rgba(136, 252, 248, 0.97);
    }
    100% {
        background-color: rgba(104, 52, 237, 0.58);
    }
}

@-moz-keyframes cssload-dot-colors {
    0% {
        background-color: rgba(107, 23, 186, 0.64);
    }
    25% {
        background-color: rgb(112, 30, 235);
    }
    50% {
        background-color: rgb(32, 139, 241);
    }
    75% {
        background-color: rgba(136, 252, 248, 0.97);
    }
    100% {
        background-color: rgba(104, 52, 237, 0.58);
    }
}

@keyframes cssload-dot-rotate-1 {
    0% {
        transform: rotate(-105deg);
    }
    100% {
        transform: rotate(270deg);
    }
}

@-o-keyframes cssload-dot-rotate-1 {
    0% {
        -o-transform: rotate(-105deg);
    }
    100% {
        -o-transform: rotate(270deg);
    }
}

@-ms-keyframes cssload-dot-rotate-1 {
    0% {
        -ms-transform: rotate(-105deg);
    }
    100% {
        -ms-transform: rotate(270deg);
    }
}

@-webkit-keyframes cssload-dot-rotate-1 {
    0% {
        -webkit-transform: rotate(-105deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
    }
}

@-moz-keyframes cssload-dot-rotate-1 {
    0% {
        -moz-transform: rotate(-105deg);
    }
    100% {
        -moz-transform: rotate(270deg);
    }
}

@keyframes cssload-dot-rotate-2 {
    0% {
        transform: rotate(165deg);
    }
    100% {
        transform: rotate(540deg);
    }
}

@-o-keyframes cssload-dot-rotate-2 {
    0% {
        -o-transform: rotate(165deg);
    }
    100% {
        -o-transform: rotate(540deg);
    }
}

@-ms-keyframes cssload-dot-rotate-2 {
    0% {
        -ms-transform: rotate(165deg);
    }
    100% {
        -ms-transform: rotate(540deg);
    }
}

@-webkit-keyframes cssload-dot-rotate-2 {
    0% {
        -webkit-transform: rotate(165deg);
    }
    100% {
        -webkit-transform: rotate(540deg);
    }
}

@-moz-keyframes cssload-dot-rotate-2 {
    0% {
        -moz-transform: rotate(165deg);
    }
    100% {
        -moz-transform: rotate(540deg);
    }
}

@keyframes cssload-dot-rotate-3 {
    0% {
        transform: rotate(435deg);
    }
    100% {
        transform: rotate(810deg);
    }
}

@-o-keyframes cssload-dot-rotate-3 {
    0% {
        -o-transform: rotate(435deg);
    }
    100% {
        -o-transform: rotate(810deg);
    }
}

@-ms-keyframes cssload-dot-rotate-3 {
    0% {
        -ms-transform: rotate(435deg);
    }
    100% {
        -ms-transform: rotate(810deg);
    }
}

@-webkit-keyframes cssload-dot-rotate-3 {
    0% {
        -webkit-transform: rotate(435deg);
    }
    100% {
        -webkit-transform: rotate(810deg);
    }
}

@-moz-keyframes cssload-dot-rotate-3 {
    0% {
        -moz-transform: rotate(435deg);
    }
    100% {
        -moz-transform: rotate(810deg);
    }
}

@keyframes cssload-dot-rotate-4 {
    0% {
        transform: rotate(705deg);
    }
    100% {
        transform: rotate(1080deg);
    }
}

@-o-keyframes cssload-dot-rotate-4 {
    0% {
        -o-transform: rotate(705deg);
    }
    100% {
        -o-transform: rotate(1080deg);
    }
}

@-ms-keyframes cssload-dot-rotate-4 {
    0% {
        -ms-transform: rotate(705deg);
    }
    100% {
        -ms-transform: rotate(1080deg);
    }
}

@-webkit-keyframes cssload-dot-rotate-4 {
    0% {
        -webkit-transform: rotate(705deg);
    }
    100% {
        -webkit-transform: rotate(1080deg);
    }
}

@-moz-keyframes cssload-dot-rotate-4 {
    0% {
        -moz-transform: rotate(705deg);
    }
    100% {
        -moz-transform: rotate(1080deg);
    }
}

/***********************************************************************/
/***************OVERALL****************/
/***********************************************************************/
.main-header,
.main-footer {
    background-color: #FFF;
}

.main-header {
    border-bottom: 1px solid #E9E9E9;
    background: #FFF;
}

.main-footer {
    border-top: 1px solid #E9E9E9;
    background: #FFF;
}

.main-sidebar {
    background-color: #654F3F;
    width: 280px;
}

.main-sidebar .sidebar {
    padding-bottom: 24px;
}

@media (min-width: 768px) {
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header {
        transition: margin-left .3s ease-in-out;
        margin-left: 280px;
    }
}

.content-wrapper {
    background-color: #FFF9F4;
}

.radio-group {
    display: flex;
    gap: 16px;
    align-items: center;
}

.box-select {
    position: relative;
}

#btn-chontailieucosan {
    position: absolute;
    font-size: 24px;
    color: #478FFC;
    top: 14px;
    right: 16px;
}

.row.flexwrap-row .form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.row.flexwrap-row .form-group label {
    margin-bottom: 0;
}

.group-collaped {
    position: relative;
}

.collaped_box {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #E9E9E9;
    background: #FFF;
    position: absolute;
    z-index: 10;
    min-width: 200px;
    margin-top: 8px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.collaped_box > span {
    justify-content: space-between;
    cursor: pointer;
}

.collaped_box > button {
    background: #FFF;
    border: none;
    justify-content: space-between;
    padding: 0;
}

.collaped_box > span > span,
.collaped_box > button > span {
    display: flex; 
    align-items: center;
    gap: 8px;
}

.collaped_box > span > span::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
}

.collaped_box > button > span::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
}

    .collaped_box #btn-export-excel span::before,
    .collaped_box #btnExportExcelModal span::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-filetype-xls" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM6.472 15.29a1.2 1.2 0 0 1-.111-.449h.765a.58.58 0 0 0 .254.384q.106.073.25.114.143.041.319.041.246 0 .413-.07a.56.56 0 0 0 .255-.193.5.5 0 0 0 .085-.29.39.39 0 0 0-.153-.326q-.152-.12-.462-.193l-.619-.143a1.7 1.7 0 0 1-.539-.214 1 1 0 0 1-.351-.367 1.1 1.1 0 0 1-.123-.524q0-.366.19-.639.19-.272.527-.422.338-.15.777-.149.457 0 .78.152.324.153.5.41.18.255.2.566h-.75a.56.56 0 0 0-.12-.258.6.6 0 0 0-.247-.181.9.9 0 0 0-.369-.068q-.325 0-.513.152a.47.47 0 0 0-.184.384q0 .18.143.3a1 1 0 0 0 .405.175l.62.143q.326.075.566.211a1 1 0 0 1 .375.358q.135.222.135.56 0 .37-.188.656a1.2 1.2 0 0 1-.539.439q-.351.158-.858.158-.381 0-.665-.09a1.4 1.4 0 0 1-.478-.252 1.1 1.1 0 0 1-.29-.375m-2.945-3.358h-.893L1.81 13.37h-.036l-.832-1.438h-.93l1.227 1.983L0 15.931h.861l.853-1.415h.035l.85 1.415h.908L2.253 13.94zm2.727 3.325H4.557v-3.325h-.79v4h2.487z" fill="%23363636"/></svg>');    
    }
    .collaped_box #btn-export-json span::before,
    .collaped_box #btnExportJSONModal span::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-filetype-json" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M14 4.5V11h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM4.151 15.29a1.2 1.2 0 0 1-.111-.449h.764a.58.58 0 0 0 .255.384q.105.073.25.114.142.041.319.041.245 0 .413-.07a.56.56 0 0 0 .255-.193.5.5 0 0 0 .084-.29.39.39 0 0 0-.152-.326q-.152-.12-.463-.193l-.618-.143a1.7 1.7 0 0 1-.539-.214 1 1 0 0 1-.352-.367 1.1 1.1 0 0 1-.123-.524q0-.366.19-.639.192-.272.528-.422.337-.15.777-.149.456 0 .779.152.326.153.5.41.18.255.2.566h-.75a.56.56 0 0 0-.12-.258.6.6 0 0 0-.246-.181.9.9 0 0 0-.37-.068q-.324 0-.512.152a.47.47 0 0 0-.185.384q0 .18.144.3a1 1 0 0 0 .404.175l.621.143q.326.075.566.211a1 1 0 0 1 .375.358q.135.222.135.56 0 .37-.188.656a1.2 1.2 0 0 1-.539.439q-.351.158-.858.158-.381 0-.665-.09a1.4 1.4 0 0 1-.478-.252 1.1 1.1 0 0 1-.29-.375m-3.104-.033a1.3 1.3 0 0 1-.082-.466h.764a.6.6 0 0 0 .074.27.5.5 0 0 0 .454.246q.285 0 .422-.164.137-.165.137-.466v-2.745h.791v2.725q0 .66-.357 1.005-.355.345-.985.345a1.6 1.6 0 0 1-.568-.094 1.15 1.15 0 0 1-.407-.266 1.1 1.1 0 0 1-.243-.39m9.091-1.585v.522q0 .384-.117.641a.86.86 0 0 1-.322.387.9.9 0 0 1-.47.126.9.9 0 0 1-.47-.126.87.87 0 0 1-.32-.387 1.55 1.55 0 0 1-.117-.641v-.522q0-.386.117-.641a.87.87 0 0 1 .32-.387.87.87 0 0 1 .47-.129q.265 0 .47.129a.86.86 0 0 1 .322.387q.117.255.117.641m.803.519v-.513q0-.565-.205-.973a1.46 1.46 0 0 0-.59-.63q-.38-.22-.916-.22-.534 0-.92.22a1.44 1.44 0 0 0-.589.628q-.205.407-.205.975v.513q0 .562.205.973.205.407.589.626.386.217.92.217.536 0 .917-.217.384-.22.589-.626.204-.41.205-.973m1.29-.935v2.675h-.746v-3.999h.662l1.752 2.66h.032v-2.66h.75v4h-.656l-1.761-2.676z" fill="%23363636"/></svg>');    
    }
    .collaped_box #btn-export-xml span::before,
    .collaped_box #btnExportXMLModal span::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-filetype-xml" viewBox="0 0 18 18"><path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2v-1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM3.527 11.85h-.893l-.823 1.439h-.036L.943 11.85H.012l1.227 1.983L0 15.85h.861l.853-1.415h.035l.85 1.415h.908l-1.254-1.992zm.954 3.999v-2.66h.038l.952 2.159h.516l.946-2.16h.038v2.661h.715V11.85h-.8l-1.14 2.596h-.025L4.58 11.85h-.806v3.999zm4.71-.674h1.696v.674H8.4V11.85h.791z" fill="%23363636"/></svg>');    
    }

.form-group.mini input[type="file"] {
    width: 100%
}

input[type="file"]::file-selector-button {
    border-radius: 4px;
    border: 1px solid #E9E9E9;
    background:#FFF;
    color: #363636;
    /* Label/Large */
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4; /* 142.857% */
    letter-spacing: 0.1px;
    padding: 8px 16px;
    margin-right: 16px;
    cursor: pointer;
}

#fileList,
#listFile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

#fileList span,
#listFile span {
    display: flex;
    gap: 8px;
    align-items: center;
}

#fileList span::before {
    content: "";
    width: 24px;
    height: 24px;
    display: block;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M8.725 17.75H15.275C15.4917 17.75 15.6708 17.6792 15.8125 17.5375C15.9542 17.3958 16.025 17.2167 16.025 17C16.025 16.7833 15.9542 16.6042 15.8125 16.4625C15.6708 16.3208 15.4917 16.25 15.275 16.25H8.725C8.50833 16.25 8.32917 16.3208 8.1875 16.4625C8.04583 16.6042 7.975 16.7833 7.975 17C7.975 17.2167 8.04583 17.3958 8.1875 17.5375C8.32917 17.6792 8.50833 17.75 8.725 17.75ZM8.725 13.5H15.275C15.4917 13.5 15.6708 13.4292 15.8125 13.2875C15.9542 13.1458 16.025 12.9667 16.025 12.75C16.025 12.5333 15.9542 12.3542 15.8125 12.2125C15.6708 12.0708 15.4917 12 15.275 12H8.725C8.50833 12 8.32917 12.0708 8.1875 12.2125C8.04583 12.3542 7.975 12.5333 7.975 12.75C7.975 12.9667 8.04583 13.1458 8.1875 13.2875C8.32917 13.4292 8.50833 13.5 8.725 13.5ZM5.5 22C5.1 22 4.75 21.85 4.45 21.55C4.15 21.25 4 20.9 4 20.5V3.5C4 3.1 4.15 2.75 4.45 2.45C4.75 2.15 5.1 2 5.5 2H13.9C14.1 2 14.2958 2.04167 14.4875 2.125C14.6792 2.20833 14.8417 2.31667 14.975 2.45L19.55 7.025C19.6833 7.15833 19.7917 7.32083 19.875 7.5125C19.9583 7.70417 20 7.9 20 8.1V20.5C20 20.9 19.85 21.25 19.55 21.55C19.25 21.85 18.9 22 18.5 22H5.5ZM13.775 7.4V3.5H5.5V20.5H18.5V8.15H14.525C14.3083 8.15 14.1292 8.07917 13.9875 7.9375C13.8458 7.79583 13.775 7.61667 13.775 7.4ZM5.5 3.5V8.15V3.5V20.5V3.5Z" fill="%23478FFC"/></svg>') no-repeat center;
}

#mapView {
    height: 600px;
    margin-bottom: 16px;
}

#navbarDropdown ~ .dropdown-menu li button {
    display: flex;
    justify-content: flex-start;
    color: #363636 !important;
}

/***********************************************************************/
/***************NAVBAR HEADER****************/
/***********************************************************************/
.main-header {
    padding: 8px 24px;
}

.main-header .navbar-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
    align-items: center;
}

.main-header .nav-function .nav-link {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #963600;
    font-family: Roboto Bold;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25; 
    text-transform: uppercase;
    padding: 0;
}

.main-header .nav-account {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-header .nav-function {
    display: flex;
    column-gap: 24px;
    flex-grow: 1;
    flex-wrap: wrap;
}

.main-header .nav-search {
    width: 35%;
    position: relative;
}

.main-header .primary-search {
    border-radius: 0px 0px 4px 4px;
    border: 1px solid #E3E5ED;
    border-top: none;
    background: #FFF;
    outline: none;
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    max-height: 500px;
}

.main-header .primary-search .list-search {
    color: var(--text, #363636);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 16px;
    display: block;
}

.main-header .primary-search .list-search a {
    color: var(--text, #363636);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
}

.main-header .primary-search .list-search:hover {
    background: #eeeeee;
}

.nav-search .search-result {
    display: none;
}

.nav-search .search-result:hover {
    display: block;
}

#TuKhoaChung:focus {
    border-radius: 4px 4px 0px 0px ;
    border-bottom: none;
}

#TuKhoaChung:focus ~ .search-result {
    display: block;
}

.main-header .nav-account > a {
    flex-shrink: 0;
    margin-right: 8px;
}

.main-header .nav-account .group-account {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-header .nav-account .group-account img {
    width: 40px;
    height: 40px;
}

.main-header .nav-account .group-account .user-info {
    display: flex;
    flex-direction: column;
}

.main-header .nav-account .group-account .user-info .user-name {
    color: #53413D;
    font-family: Roboto Bold;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5; /* 150% */
}

    .main-header .nav-account .group-account .user-info .user-role {
        color: #8E8E8E;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5; /* 150% */
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        width: 260px;
    }

.main-header .nav-account .nav-link {
    padding: 0;
    height: auto;
}

.main-header .nav-account .dropdown-menu {
    left: -137px;
    top: calc(100% + 10px);
}

/***********************************************************************/
/***************NAVBAR FOOTER****************/
/***********************************************************************/
.main-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 24px;
}

.main-footer .footer-left {
    color: #363636;
    font-family: Roboto Medium;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.main-footer .footer-right {
    color: rgba(54, 54, 54, 0.70);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
}

.main-footer .footer-right a {
    color: #363636;
    font-family: Roboto Medium;
}

/***********************************************************************/
/***************NAVBAR SIDEBAR****************/
/***********************************************************************/
.main-sidebar .brand-link {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    align-items: center;
    width: 280px;
    height: 62px;
    transition: all 0.5s ease-in-out;
}

.main-sidebar .brand-link .brand-image {
    max-height: 40px;
}

.main-sidebar .brand-link .logocontent {
    display: flex;
    flex-direction: column;
}

.main-sidebar .brand-link .logocontent > span {
    color: #FFF;
    font-family: Roboto Bold;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25; /* 125% */
    text-transform: uppercase;
}

.main-sidebar .sidebar {
    padding: 0 0 24px 0;
}

.main-sidebar .nav-sidebar .nav-item .nav-link {
    display: flex;
    padding: 8px 12px 8px 28px;
    margin-bottom: 0;
    gap: 8px;
    color: #FFF;
    font-family: 'Roboto';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    align-items: center;
    width: auto;   
    position: relative;
    cursor: pointer;
}

.main-sidebar .nav-sidebar .main-category,
.sidebar-collapse .main-sidebar:hover .nav-sidebar .main-category {
    padding: 24px 12px 12px 28px;
    color: #CABBB1;
    font-family: Roboto Bold; 
    font-size: 12px;
    font-style: normal;
    line-height: 1.3333; /* 133.333% */
    text-transform: uppercase;
    border: none;
    margin: 0;
}

.sidebar-collapse .main-sidebar .nav-sidebar .main-category {
    font-size: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    padding: 24px 12px 0 28px;
    margin-bottom: 24px;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    border-left: 4px solid #FFC700;
    background: rgba(0, 0, 0, 0.20);
    padding-left: 24px;
}

.main-sidebar .nav-sidebar .nav-item > .nav-treeview > .nav-item > .nav-link.active {
    color: #FFC700;
}

.main-sidebar .nav-sidebar .nav-item > ul {
    padding-left: 32px;
}

.main-sidebar .nav-sidebar .nav-item > ul > li > ul {
    padding-left: 16px;
}

.main-sidebar .nav-sidebar .nav-item.has-treeview > a {
    position: relative;
}

.main-sidebar .nav-sidebar .nav-item.has-treeview > a::after,
.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-item.has-treeview > a::after {
    content: "expand_more";
    font-family: "Material Symbols Rounded";
    font-size: 24px;
    position: absolute;
    right: 12px;
    font-variation-settings: 'wght' 300;
}

/*.main-sidebar .sidebar:hover .nav-sidebar .nav-item.has-treeview > a::after {
    right: 4px;
}*/

.sidebar-collapse .main-sidebar .nav-sidebar .nav-item.has-treeview > a::after {
    content: none
}

.main-sidebar .sidebar::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 20px;
}

.main-sidebar .sidebar::-webkit-scrollbar-thumb {
    border-radius: 20px;
    border: 8px solid transparent;
}

/***********************************************************************/
/***************NAVBAR SIDEBAR MINI****************/
/***********************************************************************/
.sidebar-collapse .main-sidebar, .sidebar-collapse .main-sidebar::before {
    width: 88px;
    margin-left: 0;
}

.sidebar-collapse .main-sidebar:hover, .sidebar-collapse .main-sidebar:hover::before {
    width: 280px;
    margin-left: 0;
}

.sidebar-collapse .main-sidebar .brand-link {
    width: auto;
    justify-content: center;
}

.sidebar-collapse .main-sidebar:hover .brand-link {
    width: 280px;
    justify-content: unset;
}

.sidebar-collapse .main-sidebar .brand-link .logocontent {
    display: none;
}

.sidebar-collapse .main-sidebar:hover .brand-link .logocontent {
    display: flex;
}

.sidebar-collapse .main-sidebar .nav-sidebar > li > .nav-link {
    font-size: 0;
}

.sidebar-collapse .main-sidebar:hover .nav-sidebar > li > .nav-link {
    font-size: 16px;
}

.sidebar-collapse .main-sidebar .nav-sidebar > li > .nav-link span {
    font-size: 24px;
}

body.sidebar-collapse:not(.sidebar-mini-xs):not(.sidebar-mini-md):not(.sidebar-mini) .content-wrapper, body.sidebar-collapse:not(.sidebar-mini-xs):not(.sidebar-mini-md):not(.sidebar-mini) .content-wrapper::before, body.sidebar-collapse:not(.sidebar-mini-xs):not(.sidebar-mini-md):not(.sidebar-mini) .main-footer, body.sidebar-collapse:not(.sidebar-mini-xs):not(.sidebar-mini-md):not(.sidebar-mini) .main-footer::before, body.sidebar-collapse:not(.sidebar-mini-xs):not(.sidebar-mini-md):not(.sidebar-mini) .main-header, body.sidebar-collapse:not(.sidebar-mini-xs):not(.sidebar-mini-md):not(.sidebar-mini) .main-header::before {
    margin-left: 88px;
}

/***********************************************************************/
/***************MAIN CONTENT****************/
/***********************************************************************/
.content-wrapper {
    padding: 20px 24px;
}

.mainContent .contentTitle {
    margin-bottom: 20px;
    position: relative;
}

.mainContent .contentTitle .QuayLai {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
}

.mainContent .contentTitle h3 {
    color: #963600;
    font-family: Roboto Bold;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4; /* 140% */
    position: relative;
}

.mainContent .contentTitle h3.mini {
    margin-bottom: 16px;
}

.mainContent .contentTitle.with-group-button h3 {
    margin-bottom: 0;
}

.mainContent .contentTitle.hasCollapse h3.mini {
    padding-bottom: 12px;
    border-bottom: 1px solid #E9E9E9;
    margin-bottom: 16px;
    cursor: pointer;
}

.mainContent .contentTitle.hasCollapse h3.mini.expand::after {
    content: 'expand_less';
}

.mainContent .contentTitle.hasCollapse h3::after {
    content: 'expand_more';
    font-family: "Material Symbols Rounded";
    font-size: 24px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    font-variation-settings: 'wght' 300;
    color: #363636;
}

.mainContent .hasCollapse ~ * {
    transition: all 0.5s ease-in-out;
    display: none;
    overflow: hidden;
}

.mainContent .hasCollapse ~ *.collapsed {
    display: block;
}

.mainContent .form-container {
    border-radius: 8px;
    border: 1px solid #E9E9E9;
    background: #FFF;
    padding: 20px;
    position: relative;
}

.mainContent .form-container.mini {
    padding: 16px;
}

.form-container input[type='text'], .form-container input[type='search'], .form-container textarea, .form-container select, .dataTables_filter input, .nav-search input {
    border-radius: 4px;
    border: 1px solid #E3E5ED;
    background-color: #FFF;
    height: 40px;
    padding: 8px 16px;
    outline: none;
    color: #363636;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    width: 100%;
}

input[type='text'][id*='TuKhoa'],
input[type='search'][aria-controls="dataGrid"] {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_3511_7743" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_3511_7743)"><path d="M9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L20.3 18.9C20.4833 19.0833 20.575 19.3167 20.575 19.6C20.575 19.8833 20.4833 20.1167 20.3 20.3C20.1167 20.4833 19.8833 20.575 19.6 20.575C19.3167 20.575 19.0833 20.4833 18.9 20.3L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z" fill="%2300123D"/></g></svg>');
    background-repeat: no-repeat;
    background-position: 97% 50%;
}

.form-container input[type='text']:focus, .form-container input[type='search']:focus, .form-container textarea:focus, .form-container select:focus, .dataTables_filter input:focus,
.select2.select2-container.select2-container--open .select2-selection {
    border: 2px solid #963600;
}

input.datetime_option {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 14C11.7167 14 11.4792 13.9042 11.2875 13.7125C11.0958 13.5208 11 13.2833 11 13C11 12.7167 11.0958 12.4792 11.2875 12.2875C11.4792 12.0958 11.7167 12 12 12C12.2833 12 12.5208 12.0958 12.7125 12.2875C12.9042 12.4792 13 12.7167 13 13C13 13.2833 12.9042 13.5208 12.7125 13.7125C12.5208 13.9042 12.2833 14 12 14ZM8 14C7.71667 14 7.47917 13.9042 7.2875 13.7125C7.09583 13.5208 7 13.2833 7 13C7 12.7167 7.09583 12.4792 7.2875 12.2875C7.47917 12.0958 7.71667 12 8 12C8.28333 12 8.52083 12.0958 8.7125 12.2875C8.90417 12.4792 9 12.7167 9 13C9 13.2833 8.90417 13.5208 8.7125 13.7125C8.52083 13.9042 8.28333 14 8 14ZM16 14C15.7167 14 15.4792 13.9042 15.2875 13.7125C15.0958 13.5208 15 13.2833 15 13C15 12.7167 15.0958 12.4792 15.2875 12.2875C15.4792 12.0958 15.7167 12 16 12C16.2833 12 16.5208 12.0958 16.7125 12.2875C16.9042 12.4792 17 12.7167 17 13C17 13.2833 16.9042 13.5208 16.7125 13.7125C16.5208 13.9042 16.2833 14 16 14ZM12 18C11.7167 18 11.4792 17.9042 11.2875 17.7125C11.0958 17.5208 11 17.2833 11 17C11 16.7167 11.0958 16.4792 11.2875 16.2875C11.4792 16.0958 11.7167 16 12 16C12.2833 16 12.5208 16.0958 12.7125 16.2875C12.9042 16.4792 13 16.7167 13 17C13 17.2833 12.9042 17.5208 12.7125 17.7125C12.5208 17.9042 12.2833 18 12 18ZM8 18C7.71667 18 7.47917 17.9042 7.2875 17.7125C7.09583 17.5208 7 17.2833 7 17C7 16.7167 7.09583 16.4792 7.2875 16.2875C7.47917 16.0958 7.71667 16 8 16C8.28333 16 8.52083 16.0958 8.7125 16.2875C8.90417 16.4792 9 16.7167 9 17C9 17.2833 8.90417 17.5208 8.7125 17.7125C8.52083 17.9042 8.28333 18 8 18ZM16 18C15.7167 18 15.4792 17.9042 15.2875 17.7125C15.0958 17.5208 15 17.2833 15 17C15 16.7167 15.0958 16.4792 15.2875 16.2875C15.4792 16.0958 15.7167 16 16 16C16.2833 16 16.5208 16.0958 16.7125 16.2875C16.9042 16.4792 17 16.7167 17 17C17 17.2833 16.9042 17.5208 16.7125 17.7125C16.5208 17.9042 16.2833 18 16 18ZM4.5 22C4.1 22 3.75 21.85 3.45 21.55C3.15 21.25 3 20.9 3 20.5V5C3 4.6 3.15 4.25 3.45 3.95C3.75 3.65 4.1 3.5 4.5 3.5H6.125V2.8C6.125 2.56667 6.2 2.375 6.35 2.225C6.5 2.075 6.69167 2 6.925 2C7.15833 2 7.35417 2.075 7.5125 2.225C7.67083 2.375 7.75 2.56667 7.75 2.8V3.5H16.25V2.8C16.25 2.56667 16.325 2.375 16.475 2.225C16.625 2.075 16.8167 2 17.05 2C17.2833 2 17.4792 2.075 17.6375 2.225C17.7958 2.375 17.875 2.56667 17.875 2.8V3.5H19.5C19.9 3.5 20.25 3.65 20.55 3.95C20.85 4.25 21 4.6 21 5V20.5C21 20.9 20.85 21.25 20.55 21.55C20.25 21.85 19.9 22 19.5 22H4.5ZM4.5 20.5H19.5V9.75H4.5V20.5ZM4.5 8.25H19.5V5H4.5V8.25ZM4.5 8.25V5V8.25Z" fill="%23363636"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 12px) 50% !important;
    cursor: pointer;
}

.form-container textarea {
    min-height: 110px;
}

.form-container textarea {
    min-height: 150px;
}

.form-container .groupSearch {
    flex: 0 0 35%;
    position: relative;
}

.form-container .groupSearch #btn-search {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.form-container .group-button-action {
    margin-bottom: 16px;
}

/***********************************************************************/
/***************TABLE CONTENT****************/
/***********************************************************************/
div[id*="dataGrid"] table thead tr{
    background-color: #008FFF !important;
}

div[id*="dataGrid"] .dataTables_scrollHead table {
    margin-bottom: 0;
}

div[id*="dataGrid"] .dataTables_scrollHead .dataTables_scrollHeadInner {
    width: 100% !important;
}

div[id*="dataGrid"] table thead tr {
    border: 1px solid #F6E4BC;
    border-right: none;
}

div[id*="dataGrid"] table thead tr th {
    background-color: #FFF6E3  !important;
    padding: 12px;
    color: #53413D !important;
    font-family: Roboto Medium;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    border: none;
    line-height: 1.5; /* 150% */
    border-right: 1px solid #F6E4BC;
}

div[id*="dataGrid"] table tbody tr td {
    color: var(--text, #363636);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    padding: 12px;
    border: 1px solid #E9E9E9;
    border-top: none;
    background: #FFF;
    word-break: break-word;
}

div[id*="dataGrid"] table tbody tr td.name-text {
    font-weight: 500;
    color: #53413D;
    font-family: Roboto Medium;
    cursor: pointer;
}

div[id*="dataGrid"] table tbody tr td span.material-symbols-rounded {
    cursor: pointer;
    font-variation-settings: 
        'wght' 300,
        'FILL' 1;
}

span.material-symbols-rounded[class*="edit"] {
    color: #F2BC16;
    margin-right: 4px;
}

span.material-symbols-rounded[class*="info"] {
    color: #478FFC;
    margin-right: 4px;
}

span.material-symbols-rounded[class*="map"] {
    color: #478FFC;
    margin-right: 4px;
}

/* span.material-symbols-rounded.description-icon {
    color: #48aeff;
    margin-right: 4px;
} */

/* span.material-symbols-rounded.download-icon {
    color: #48aeff;
    margin-right: 4px;
} */

span.material-symbols-rounded[class*="delete"] {
    color: #DF3C4E
}

span.material-symbols-rounded[class*="check"] {
    color: #0EAF00
}

span.material-symbols-rounded[class*="json"] {
    color: #963600;
    margin-right: 4px;
}

span.material-symbols-rounded[class*="lock"] {
    color: #478FFC;
    margin-right: 4px;
}

span.material-symbols-rounded[class*="rolechange"] {
    color: #DF3C4E;
    margin-right: 4px;
}

div[id*="dataGrid"] .dataTables_filter {
    width: 424.5px;
    margin-bottom: 16px;
    /*position: absolute;*/
    right: 20px;
    top: 20px;
    /*z-index: -1;*/
}

.tableContainer {
    position: relative;
}

    /*.tableContainer .contentTitle.with-group-button {
        position: absolute;
        top: 0;
        z-index: 9;
        right: 0;
    }*/

div[id*="dataGrid"] .dataTables_filter label {
    width: 100%;
    margin-bottom: 0;
    position: relative;
    font-size: 0;
}

div[id*="dataGrid"] .dataTables_filter label span.material-symbols-rounded {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
}

.dataTables_paginate > * {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    cursor: pointer;
    color: #363636
}

.dataTables_paginate > span {
    display: flex;
    width: auto;
    align-items: center;
    gap: 4px;
}

.dataTables_paginate > span > a {
    color: #363636;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25; /* 150% */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    width: 32px;
    height: 32px;
}

.dataTables_paginate > span > a.current {
    background-color: #FFC700;
    color: #FFF;
}

.groupButton.anotherGroup {
    position: absolute;
    right: 20px;
}

.searchGroup {
    margin-bottom: 16px;
}

.TrangThai {
    border-radius: 4px;
    padding: 4px 8px;
    font-family: Inter !important;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 1.3333 !important;
}

.TrangThai.DangCapNhat {
    background: #E9F2FF;
    color: #478FFC;
}

.TrangThai.HoanThanh {
    background: #E6F8F1;
    color: #2DC58C;
}

/*table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting_asc_disabled, table.dataTable thead > tr > th.sorting_desc_disabled, table.dataTable thead > tr > td.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting_asc_disabled, table.dataTable thead > tr > td.sorting_desc_disabled {
    cursor: pointer;
    position: relative;
    padding-right: 26px
}

    table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after {
        position: absolute;
        display: block;
        opacity: .125;
        right: 10px;
        line-height: 9px;
        font-size: .8em;
        background-size: contain;
        display: block;
        width: 18px;
        height: 18px;
    }

    table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:before {
        bottom: 40%;
        content: "";
        content: ""/"";
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z"/></svg>');
    }

    table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:after {
        top: 40%;
        right: 6px;
        content: "";
        content: ""/"";
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-240 240-480l56-56 144 144v-368h80v368l144-144 56 56-240 240Z"/></svg>');
    }

table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:after {
    opacity: .6
}

table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting_asc_disabled:before {
    display: none
}*/

table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting_asc_disabled, table.dataTable thead > tr > th.sorting_desc_disabled, table.dataTable thead > tr > td.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting_asc_disabled, table.dataTable thead > tr > td.sorting_desc_disabled {
    cursor: pointer;
    position: relative;
    padding-right: 26px
}

    table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after {
        position: absolute;
        display: block;
        opacity: .125;
        right: 10px;
        line-height: 9px;
        font-size: .8em
    }

    table.dataTable thead > tr > th.sorting_disabled::before,
    table.dataTable thead > tr > th.sorting_disabled::after {
        content: none !important;
    }

    table.dataTable thead > tr > th.sorting_disabled,
    table.dataTable thead > tr > th.sorting_disabled {
        content: none !important;
        padding-right: 12px !important;
    }

    table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:before {
        bottom: 51%;
        content: "▲";
        content: "▲"/""
    }

    table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:after {
        top: 51%;
        content: "▼";
        content: "▼"/""
    }

    table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:after {
        opacity: .6
    }

    table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting_asc_disabled:before {
        display: none
    }

.Special_Table div[id*="dataGrid"] table thead tr th {
    background-color: white !important;
    border: none;
}

.Special_Table div[id*="dataGrid"] table thead tr {
    border: none;
    border-bottom: 1px solid #E9E9E9
}

.Special_Table div[id*="dataGrid"] table tbody tr td {
    border: none;
}

.Special_Table div[id*="dataGrid"] table tbody tr td.name-text span {
    display: flex;
    /* align-items: center; */
    gap: 8px;
}

.Special_Table div[id*="dataGrid"] table tbody tr td.name-text span::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

    .Special_Table div[id*="dataGrid"] table tbody tr td.name-text span.detailduan::before {
        background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4761_120" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_4761_120)"><path d="M4.3077 19.5C3.80257 19.5 3.375 19.325 3.025 18.975C2.675 18.625 2.5 18.1974 2.5 17.6923V6.3077C2.5 5.80257 2.675 5.375 3.025 5.025C3.375 4.675 3.80257 4.5 4.3077 4.5H9.04998C9.29099 4.5 9.52272 4.5468 9.74515 4.6404C9.96758 4.73398 10.1609 4.86283 10.325 5.02693L11.798 6.5H19.6923C20.1974 6.5 20.625 6.675 20.975 7.025C21.325 7.375 21.5 7.80257 21.5 8.3077V17.6923C21.5 18.1974 21.325 18.625 20.975 18.975C20.625 19.325 20.1974 19.5 19.6923 19.5H4.3077Z" fill="%23FFC700"/></g></svg>');
    }

    .Special_Table div[id*="dataGrid"] table tbody tr td.name-text span.detailtailieu::before {
        background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4761_592" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_4761_592)"><path d="M6.3077 21.5C5.80257 21.5 5.375 21.325 5.025 20.975C4.675 20.625 4.5 20.1974 4.5 19.6923V4.3077C4.5 3.80257 4.675 3.375 5.025 3.025C5.375 2.675 5.80257 2.5 6.3077 2.5H13.5019C13.7429 2.5 13.9747 2.5468 14.1971 2.6404C14.4195 2.73398 14.6128 2.86283 14.7769 3.02693L18.973 7.22303C19.1371 7.38714 19.266 7.58042 19.3595 7.80285C19.4531 8.02528 19.5 8.25701 19.5 8.49803V19.6923C19.5 20.1974 19.325 20.625 18.975 20.975C18.625 21.325 18.1974 21.5 17.6922 21.5H6.3077ZM13.5 7.5961C13.5 7.85378 13.5862 8.06884 13.7587 8.24128C13.9311 8.41373 14.1462 8.49995 14.4039 8.49995H18L13.5 3.99998V7.5961Z" fill="%23478FFC"/></g></svg>');
    }

/***********************************************************************/
/***************CHECKBOX - RADIO BOX****************/
/***********************************************************************/
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    font-family: 'Roboto' !important;
    font-style: normal;
    font-weight: 400 !important;
    font-size: 16px;
    line-height: 24px;
    color: #363636;
    margin-bottom: 0;   
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:before {
    border-color: #963600;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #963600;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: transparent;
    /* Not removed via appearance */
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 100%;
    height: 1.15em;
    /* border: 0.15em solid #C9D7F5; */
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

/* [type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #0FA300;
    background-color: CanvasText;
} */

[type="checkbox"]::before {
    content: "check_box_outline_blank";
    color: #C9D7F5;
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'wght' 300;
    font-size: 24px;
    transition: all 0.2s ease-in-out;
}

/* [type="checkbox"]:checked::before {
    transform: scale(1);
} */

[type="checkbox"]:checked::before {
    content: "check_box";
    color: #963600;
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'wght' 300, 'FILL' 1;
    font-size: 24px;
} 

[type="checkbox"]:indeterminate::before {
    content: "indeterminate_check_box";
    color: #5e82d1;
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'wght' 300, 'FILL' 1,;
    font-size: 24px;
} 

/* [type="checkbox"]:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
} */

[type="checkbox"]:disabled {
    --form-control-color: var(--form-control-disabled);
    color: var(--form-control-disabled);
    cursor: not-allowed;
}


/***********************************************************************/
/***************MODAL CONTENT****************/
/***********************************************************************/
.modal .modal-header {
    border-bottom: none;
    padding: 20px 20px 8px;
}

.modal .modal-body {
    padding: 20px 20px 0;
    border-bottom: none
}

.modal .modal-footer {
    padding: 16px 20px 20px;
    border-top: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal .modal-footer > * {
    margin: 0;
}

.modal .modal-header .modal-title {
    color: #963600;
    font-family: Roboto Bold;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4; /* 140% */
}

.modal .modal-header .btn-close {
    background: none;
    border: none;
    padding: 0;
}

.modal .modal-header .btn-close span {
    color: #8E8E8E;
}

.form-group.mini label {
    margin-bottom: 4px;
}

.form-group.mini {
    margin-bottom: 12px;
}

.form-group label {
    color: #53413D;
    font-family: Roboto Medium;
    font-size: 16px;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 1.5; /* 150% */
}

.form-group > span {
    display: block;
    color: #363636;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    text-align: justify;
}

.form-group > span > p {
    margin-bottom: 0
}

.form-group > .name-text-2 {
    color: #963600;
    font-family: Roboto Medium;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5; /* 150% */
}

.red-text {
    color: #DF3C4E !important
}

.form-group .TrangThai2 {
    border-radius: 4px;
    padding: 4px;
    color: #FFF;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.3333; /* 133.333% */
    width: fit-content;
}

.form-group .TrangThai2.DangCapNhat {
    background: #478FFC;
}
.form-group .TrangThai2.HoanThanh {
    background: #2DC58C;
}

.form-group input.form-control {
    border-radius: 4px;
    border: 1px solid #E9E9E9;
    background: #FFF;
    height: 40px;
    padding: 8px 16px;
    outline: none;
    color: var(--text, #53413D);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
}

.form-group .form-control:focus {
    border: 2px solid #963600;
}

.groupDelete {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.groupDelete > .material-symbols-rounded {
    font-size: 64px;
    color: #DF3C4E;
    font-variation-settings: 'wght' 400;
}

.groupDelete > .form-group {
    color: #363636;
    text-align: center;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.groupDelete > .form-group > span:nth-child(2) {
    font-weight: 700;
    font-family: Roboto Bold;
}

/***********************************************************************/
/***************NAVTAB CONTENT****************/
/***********************************************************************/
.form-container .nav-tabs {
    border-bottom: 1px solid #E9E9E9;
    margin-bottom: 0;
}

.form-container .nav-tabs.nav-tabs-margin {
    margin-bottom: 16px;
}

.form-container .nav-tabs .nav-item a {
    color: #363636;
    font-family: Roboto Medium;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 150% */
    padding: 0 0 16px 0;
    margin-right: 16px;
}

.form-container .nav-tabs .nav-item .nav-link.active,
.form-container .nav-tabs .nav-item .nav-link:hover {
    border: none;
    color: #963600;
    font-family: Roboto Medium;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5; /* 150% */
    border-bottom: 2px solid #963600;
    padding-bottom: 16px;
}

/***********************************************************************/
/***************FILE INPUT CONTENT****************/
/***********************************************************************/
.Logo-display {
    position: relative;
}

.Logo-display .avatar-edit input {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 128px;
    cursor: pointer;
    opacity: 0;
}


/***********************************************************************/
/***************INPUT CONTENT - SELECT2 INPUT****************/
/***********************************************************************/
.select2.select2-container .select2-selection .select2-selection__arrow {
    top: 55%;
    transform: translateY(-50%);
    right: 12px;
}
.select2-selection__rendered .select2-selection__placeholder {
    text-align: left;
    display: flex;
    height: 40px;
    align-items: center;
}

.select2.select2-container .select2-selection {
    border: 1px solid #E9E9E9;
    display: flex;
    align-items: center;
    padding: 8px 16px;

}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    border-radius: 4px;
    background: #EEECEC;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #363636;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    border: none;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    font-size: 0;
    margin: 0;
    padding: 0
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    min-height: 32px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove::before {
    content: "close";
    font-family: "Material Symbols Rounded";
    font-size: 16px;
    font-weight: 400;
}

.select2.select2-container .select2-selection .select2-selection__arrow::after{
    content: "expand_more";
    font-family: "Material Symbols Rounded";
    font-size: 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    font-variation-settings: 'wght' 300;
}

.select2.select2-container .select2-selection.select2-selection--multiple .select2-selection__rendered{
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.0001 15.0751C11.9001 15.0751 11.8085 15.0584 11.7251 15.0251C11.6418 14.9917 11.5585 14.9334 11.4751 14.8501L6.52515 9.90006C6.39182 9.76672 6.32932 9.58756 6.33765 9.36256C6.34598 9.13756 6.41682 8.95839 6.55015 8.82506C6.71682 8.65839 6.89598 8.58756 7.08765 8.61256C7.27932 8.63756 7.45015 8.71672 7.60015 8.85006L12.0001 13.2501L16.4001 8.85006C16.5335 8.71672 16.7126 8.64172 16.9376 8.62506C17.1627 8.60839 17.3418 8.68339 17.4752 8.85006C17.6418 8.98339 17.7126 9.15839 17.6876 9.37506C17.6627 9.59172 17.5835 9.77506 17.4502 9.92506L12.5251 14.8501C12.4418 14.9334 12.3585 14.9917 12.2751 15.0251C12.1918 15.0584 12.1001 15.0751 12.0001 15.0751Z" fill="%23363636"/></svg>');
    background-repeat: no-repeat;
    background-position: 100% 50%;
}

.select2.select2-container.select2-container--open .select2-selection .select2-selection__arrow::after{
    content: "expand_less";
}

.select2.select2-container .select2-selection .select2-selection__arrow b{
    display: none;
}

.form-container .select2 .select2-selection {
    height: 40px !important;
}

.form-container .select2 .select2-selection .select2-selection__rendered {
    color: var(--text, #53413D);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    height: 40px;
    padding: 0 16px 0 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.select2-container .select2-dropdown .select2-results__options > li {
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
}

.select2-container .select2-dropdown .select2-results__options > .select2-results__option--highlighted {
    background-color: #976b4c;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
}

.select2-container .select2-selection--single .select2-selection__clear {
    margin: 0;
    padding: 0;
    font-size: 0;
}

.select2-container .select2-selection--single .select2-selection__clear::before {
    content: "";
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%238E8E8E80" viewBox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>') no-repeat center;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 32px;
}

.select2-container .select2-selection--multiple .select2-selection__clear {
    margin: 0;
    padding: 0;
    font-size: 0;
}

.select2-container .select2-selection--multiple .select2-selection__clear::before {
    content: none;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="%238E8E8E80" viewBox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>') no-repeat center;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 32px;
}

.select2-container--bootstrap4 .select2-results>.select2-results__options::-webkit-scrollbar {
    width: 4px;
}

/***********************************************************************/
/***************TRANG CHU - THONG KE****************/
/***********************************************************************/
.ThongKe {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.ThongKe li {
    gap: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 calc(100%/4 - 18px);
}

.ThongKe li .ThongTinThongKe {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ThongKe li .ThongTinThongKe .TenChuyenMuc {
    color: #363636;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    opacity: 0.7;
}

.ThongKe li .ThongTinThongKe .SoLuong {
    font-family: Roboto Medium;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.23077; /* 123.077% */
}

.ThongKe li:nth-child(1) .ThongTinThongKe .SoLuong {
    color: #2DC58C;
}
.ThongKe li:nth-child(2) .ThongTinThongKe .SoLuong {
    color: #DF3C4E;
}
.ThongKe li:nth-child(3) .ThongTinThongKe .SoLuong {
    color: #F2BC16;
}
.ThongKe li:nth-child(4) .ThongTinThongKe .SoLuong {
    color: #478FFC;
}

.ThongKe li .ThongTinThongKe .ThoiGianBienDong {
    color: #363636;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.333; /* 133.333% */
}

.ThongKe li .ThongTinThongKe .LoaiBienDong {
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.333; /* 133.333% */
    position: relative;
    padding-left: 20px;
}

.ThongKe li .ThongTinThongKe .LoaiBienDong.Tang {
    color: #2DC58C;
}
.ThongKe li .ThongTinThongKe .LoaiBienDong.Giam {
    color: #DF3C4E;
}

.ThongKe li .ThongTinThongKe .LoaiBienDong::before {
    font-family: "Material Symbols Rounded";
    font-size: 24px;
    margin-right: 4px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ThongKe li .ThongTinThongKe .LoaiBienDong.Tang::before {
    content: "arrow_drop_up"
}
.ThongKe li .ThongTinThongKe .LoaiBienDong.Giam::before {
    content: "arrow_drop_down"
}

.ThongKe li .IconThongKe span {
    font-size: 32px;
    padding: 16px;
    border-radius: 8px;
}

.ThongKe li:nth-child(1) .IconThongKe span {
    color: #2DC58C;
    background: #E6F8F1;
}
.ThongKe li:nth-child(2) .IconThongKe span {
    color: #DF3C4E;
    background: #FBE8EA;
}
.ThongKe li:nth-child(3) .IconThongKe span {
    color: #F2BC16;
    background: #FDF7E3;
}
.ThongKe li:nth-child(4) .IconThongKe span {
    color: #478FFC;
    background: #E9F2FF;
}


/***********************************************************************/
/***************TRANG CHU - DU AN CAP NHAT GAN DAY****************/
/***********************************************************************/
.DuLieu {
    margin-bottom: 24px;
}

.DuLieu .DanhSachDuAn .ThongTinDuAn {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.DuLieu .DanhSachDuAn .ThongTinDuAn .MaDuAn {
    color: #8E8E8E;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
}

.DuLieu .DanhSachDuAn .ThongTinDuAn .TenDuAn {
    color: #53413D;
    font-family: Roboto Bold;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5; /* 150% */
    cursor: pointer;
}

.DuLieu .DanhSachDuAn .ThongTinDuAn .TomTatDuAn {
    color: #363636;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.DuLieu .DanhSachDuAn .ThongTinDuAn .DiaDiemDuAn {
    color: #963600;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 133.333% */
    padding: 4px 8px;
    border-radius: 4px;
    background: #FFF3EA;
    margin-top: 4px;
    width: fit-content;
}

.DuLieu .DanhSachDuAn .ThongTinBoSung {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #E9E9E9;
    padding-top: 16px;
    margin-top: 16px;
}

.DuLieu .DanhSachDuAn .ThongTinBoSung span {
    color: #8E8E8E;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    display: flex;
    align-items: center;
    gap: 4px;
}

.DuLieu .DanhSachDuAn .ThongTinBoSung .ThoiGian::before {
    content: 'schedule';
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    font-variation-settings: 'wght' 300;
}

.DuLieu .DanhSachDuAn .ThongTinBoSung .File::before {
    content: 'description';
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    font-variation-settings: 'wght' 300;
}

.DuLieu .DanhSachDuAn .ThongTinBoSung .FileDinhKem::before {
    content: 'attach_file';
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    font-variation-settings: 'wght' 300;
}

.DuLieu .DanhSachDuAn .ThongTinBoSung .DinhKem {
    gap: 16px;
}

.DuLieu .DanhSachDuAn .form-container.mini {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.DuLieu .DanhSachDuLieu .ListDuLieu {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.DuLieu .DanhSachDuLieu .ListDuLieu li {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.DuLieu .DanhSachDuLieu .ListDuLieu .IconDuLieu span {
    color: #478FFC;
    background: #E9F2FF;
    padding: 12px;
    border-radius: 4px;
}

.DuLieu .DanhSachDuLieu .ListDuLieu .NoiDungDuLieu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.DuLieu .DanhSachDuLieu .ListDuLieu .TenDuLieu {
    color: #363636;
    font-family: Roboto Medium;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5; /* 150% */
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    cursor: pointer;
}

.DuLieu .DanhSachDuLieu .ListDuLieu .NgayDuLieu {
    color: #8E8E8E;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
}

.DuLieu .col-lg-3 .form-container .DanhSachDuLieu {
    overflow: auto;
}

.DuLieu .col-lg-3 .form-container .DanhSachDuLieu::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 20px;
}

.DuLieu .col-lg-3 .form-container .DanhSachDuLieu::-webkit-scrollbar-thumb {
    border-radius: 20px;
    border: 8px solid transparent;
}

.DuLieu .col-lg-3 .form-container .DanhSachDuLieu::-webkit-scrollbar {
    width: 4px;
    height: 4px;;
}
/***********************************************************************/
/***************TRANG CHU - BAN DO SO HOA PHONG LUU TRU****************/
/***********************************************************************/
.BanDoPhongLuuTru {
    margin-bottom: 24px;
}



/***********************************************************************/
/***************TRANG CHU - THONG KE TRANG THAI DU AN****************/
/***********************************************************************/
.dashboard-detail {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 12px;
}

.dashboard-detail .item {
    flex: 0 0 calc(100%/4);
    max-width: calc(100%/4);
    text-align: center;
    margin-bottom: 24px;
}

.dashboard-detail>.item:not(:last-of-type) {
    border-right: 1px solid #E5EAF5;
}

.dashboard-detail .item label {
    font-family: 'Roboto';
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    font-weight: 400;
}

.dashboard-detail .item label {
    margin-top: 8px;
    text-align: center;
}

.dashboard-detail .number {
    font-family: 'Roboto Bold';
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
}

.dashboard-detail .number {
    color: #0F1E33;
}

.dashboard-detail .text-second {
    font-family: 'Roboto';
    font-size: 14px;
    line-height: 20px;
    color: #0F1E33;
    opacity: 0.5;
    font-weight: 400;
}

.dashboard-detail .item:nth-child(1) .number {
    color: #963600;
}
.dashboard-detail .item:nth-child(2) .number {
    color: #478FFC;
}
.dashboard-detail .item:nth-child(3) .number {
    color: #2DC58C;
}
.dashboard-detail .item:nth-child(4) .number {
    color: #2DC58C;
}

.highcharts-credits {
    display: none !important;
}

.highcharts-tooltip-box {
    stroke-width: 0.5;
    stroke: #C9D7F5;
}

.tooltip-box {
    padding: 4px
}

.tooltip-details {
    margin: 0;
}

.tooltip-details li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 4px;
}

.tooltip-details li tspan {
    font-size: 16px;
    display: block;
    line-height: 1;
    margin-right: 4px;
}

.tooltip-title {
    color: #963600;
    font-size: 18px;
    font-family: 'Roboto Bold';
    line-height: 1.5;
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
}

.tooltip-series {
    font-size: 16px;
    font-family: 'Roboto Medium';
    line-height: 1.5;
    display: block;
    font-weight: 500;
}

.tooltip-values {
    font-size: 16px;
    font-family: 'Roboto Bold';
    font-weight: 300;
    line-height: 1.5;
    display: block;
    font-weight: 700;
}

.tooltip-values span {
    font-size: 14px;
    font-family: 'Roboto';
}

filter[id*="highcharts-drop-shadow"] feDropShadow {
    flood-color: #963600 !important;
}

/***********************************************************************/
/***************DU AN****************/
/***********************************************************************/
.breadcrum {
    display: flex;
    gap: 8px;
}

.breadcrum span {
    color: #363636;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857; /* 142.857% */
}

.breadcrum span:last-child {
    color: #8E8E8E;
}

.DuAn li .ThongTinThongKe {
    gap: 4px;
}

.DuAn li .ThongTinThongKe .SoLuong {
    color: #363636 !important;
}

.DuAn li .IconThongKe span {
    color: #059669 !important;
    background: #ECFDF5 !important;
}

/***********************************************************************/
/***************HO SO****************/
/***********************************************************************/
.styleDiscList {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.styleDiscList li a {
    color: #363636;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    display: flex;
    align-items: center;
}

.styleDiscList li.active a {
    color: #963600;
    font-family: Roboto Medium;
    font-weight: 500;
}

.styleDiscList li a::before {
    content: '';
    border-radius: 12px;
    border: 1px solid #363636;
    width: 8px;
    height: 8px;
    display: block;
    margin-right: 8px;
}

.styleDiscList li.active a::before {
    border-radius: 12px;
    border: 1px solid #963600;
    background: #963600;
}

#tree-hosocha li > a.active ~ ul {
    display: block;
}

#tree-hosocha li > ul {
    display: block;
    margin-left: 20px;
}

#tree-hosocha li {
    font-family: Roboto Medium;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0em;
    text-align: left;
    cursor: pointer;
}

#tree-hosocha li > a {
    display: flex;
    /* align-items: center; */
    gap: 8px;
}

#tree-hosocha li > a.active {
    background: #FFF6E3;
} 

#tree-hosocha li > a::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_4761_120" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_4761_120)"><path d="M4.3077 19.5C3.80257 19.5 3.375 19.325 3.025 18.975C2.675 18.625 2.5 18.1974 2.5 17.6923V6.3077C2.5 5.80257 2.675 5.375 3.025 5.025C3.375 4.675 3.80257 4.5 4.3077 4.5H9.04998C9.29099 4.5 9.52272 4.5468 9.74515 4.6404C9.96758 4.73398 10.1609 4.86283 10.325 5.02693L11.798 6.5H19.6923C20.1974 6.5 20.625 6.675 20.975 7.025C21.325 7.375 21.5 7.80257 21.5 8.3077V17.6923C21.5 18.1974 21.325 18.625 20.975 18.975C20.625 19.325 20.1974 19.5 19.6923 19.5H4.3077Z" fill="%23FFC700"/></g></svg>');
    flex-shrink: 0;
}

#tree-hosocha li.can_collapse > a::before {
    background-image: url('data:image/svg+xml,<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_778_5249" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="2" width="20" height="20"><rect y="2" width="20" height="20" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_778_5249)"><path d="M10.7885 11.9999L7.39424 8.60566C7.27885 8.49028 7.21982 8.34525 7.21716 8.17057C7.21448 7.99591 7.2735 7.84821 7.39424 7.72749C7.51496 7.60675 7.66132 7.54639 7.83332 7.54639C8.00532 7.54639 8.15168 7.60675 8.27241 7.72749L12.0176 11.4727C12.0956 11.5507 12.1506 11.6329 12.1827 11.7195C12.2147 11.806 12.2307 11.8995 12.2307 11.9999C12.2307 12.1003 12.2147 12.1938 12.1827 12.2803C12.1506 12.3669 12.0956 12.4492 12.0176 12.5271L8.27241 16.2723C8.15703 16.3877 8.012 16.4467 7.83732 16.4494C7.66266 16.4521 7.51496 16.3931 7.39424 16.2723C7.2735 16.1516 7.21313 16.0052 7.21313 15.8332C7.21313 15.6612 7.2735 15.5149 7.39424 15.3942L10.7885 11.9999Z" fill="%231C1B1F"/></g><mask id="mask1_778_5249" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="24" y="0" width="24" height="24"><rect x="24" width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask1_778_5249)"><path d="M28.3077 19.5C27.8026 19.5 27.375 19.325 27.025 18.975C26.675 18.625 26.5 18.1974 26.5 17.6923V6.3077C26.5 5.80257 26.675 5.375 27.025 5.025C27.375 4.675 27.8026 4.5 28.3077 4.5H33.05C33.291 4.5 33.5227 4.5468 33.7452 4.6404C33.9676 4.73398 34.1609 4.86283 34.325 5.02693L35.798 6.5H43.6923C44.1974 6.5 44.625 6.675 44.975 7.025C45.325 7.375 45.5 7.80257 45.5 8.3077V17.6923C45.5 18.1974 45.325 18.625 44.975 18.975C44.625 19.325 44.1974 19.5 43.6923 19.5H28.3077Z" fill="%23FFC700"/></g></svg>');
    width: 48px;
}

#tree-hosocha li.can_collapse > a.active::before {
    background-image: url('data:image/svg+xml,<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="mask0_779_5258" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="2" width="20" height="20"><rect x="20" y="2" width="20" height="20" transform="rotate(90 20 2)" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_779_5258)"><path d="M10.0001 12.7885L13.3943 9.39424C13.5097 9.27885 13.6547 9.21982 13.8294 9.21716C14.0041 9.21448 14.1518 9.2735 14.2725 9.39424C14.3932 9.51496 14.4536 9.66132 14.4536 9.83332C14.4536 10.0053 14.3932 10.1517 14.2725 10.2724L10.5273 14.0176C10.4493 14.0956 10.3671 14.1506 10.2805 14.1827C10.194 14.2147 10.1005 14.2307 10.0001 14.2307C9.89966 14.2307 9.80618 14.2147 9.71966 14.1827C9.63311 14.1506 9.55085 14.0956 9.47286 14.0176L5.72768 10.2724C5.61229 10.157 5.55326 10.012 5.55059 9.83732C5.54791 9.66266 5.60694 9.51496 5.72768 9.39424C5.8484 9.2735 5.99476 9.21313 6.16676 9.21313C6.33876 9.21313 6.48512 9.2735 6.60584 9.39424L10.0001 12.7885Z" fill="%231C1B1F"/></g><mask id="mask1_779_5258" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="24" y="0" width="24" height="24"><rect x="24" width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask1_779_5258)"><path d="M28.3077 19.5C27.8026 19.5 27.375 19.325 27.025 18.975C26.675 18.625 26.5 18.1974 26.5 17.6923V6.3077C26.5 5.80257 26.675 5.375 27.025 5.025C27.375 4.675 27.8026 4.5 28.3077 4.5H33.05C33.291 4.5 33.5227 4.5468 33.7452 4.6404C33.9676 4.73398 34.1609 4.86283 34.325 5.02693L35.798 6.5H43.6923C44.1974 6.5 44.625 6.675 44.975 7.025C45.325 7.375 45.5 7.80257 45.5 8.3077V17.6923C45.5 18.1974 45.325 18.625 44.975 18.975C44.625 19.325 44.1974 19.5 43.6923 19.5H28.3077Z" fill="%23FFC700"/></g></svg>');
}

#div-thongtinchung > label#tenduocchon {
    font-family: Roboto Medium;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0em;
    text-align: left;
    color: rgba(150, 54, 0, 1);
    width: calc(100% - 28px);
}

/***********************************************************************/
/***************AN PHAM****************/
/***********************************************************************/
.file-download {
    color: #363636;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5; /* 150% */
    display: flex !important;
    align-items: center;
}

.file-download::after {
    content: 'download';
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    margin-left: 8px;
    font-variation-settings: 'wght' 200;
    color: #478FFC;
    line-height: 1;
}

.cke_bottom .cke_path {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
}

.modal h6 {
    color: #53413D;
    font-family: Roboto Medium;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4; /* 140% */
    margin: 16px 0;
}

/***********************NOTIFY**************************/
div[data-notify="container"] {
    border-radius: 8px !important;
    padding: 12px !important;
    z-index: 1000000000000 !important;
    max-width: 600px;
    display: flex !important;
    flex-direction: row;
    align-items: center;
}

    div[data-notify="container"] span[data-notify="message"] {
        font-family: 'Roboto';
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5; /* 150% */
        letter-spacing: 0.5px;
    }

    div[data-notify="container"] button[data-notify="dismiss"],
    div[data-notify="container"] span[data-notify="icon"] {
        font-size: 0;
        opacity: 1 !important;
        min-width: 24px;
        height: 24px;
    }

    div[data-notify="container"] button[data-notify="dismiss"] {
        top: 50% !important;
        transform: translateY(-50%);
    }

    div[data-notify="container"] span[data-notify="icon"] {
        margin-right: 12px;
    }

        div[data-notify="container"] button[data-notify="dismiss"]::after,
        div[data-notify="container"] span[data-notify="icon"]::after  {
            content: '';
            display: block;
            width: 24px;
            height: 24px;
        }

.alert-warning {
    border: 1px solid #FFD182 !important;
    background: #FFECCC !important;
}

    .alert-warning span[data-notify="message"] {
        color: #FFA200;
    }
    .alert-warning button[data-notify="dismiss"]::after {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_620_10061" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_620_10061)"><path d="M11.9998 13.4L7.0998 18.3C6.91647 18.4833 6.68314 18.575 6.3998 18.575C6.11647 18.575 5.88314 18.4833 5.6998 18.3C5.51647 18.1167 5.4248 17.8833 5.4248 17.6C5.4248 17.3167 5.51647 17.0833 5.6998 16.9L10.5998 12L5.6998 7.1C5.51647 6.91667 5.4248 6.68334 5.4248 6.4C5.4248 6.11667 5.51647 5.88334 5.6998 5.7C5.88314 5.51667 6.11647 5.425 6.3998 5.425C6.68314 5.425 6.91647 5.51667 7.0998 5.7L11.9998 10.6L16.8998 5.7C17.0831 5.51667 17.3165 5.425 17.5998 5.425C17.8831 5.425 18.1165 5.51667 18.2998 5.7C18.4831 5.88334 18.5748 6.11667 18.5748 6.4C18.5748 6.68334 18.4831 6.91667 18.2998 7.1L13.3998 12L18.2998 16.9C18.4831 17.0833 18.5748 17.3167 18.5748 17.6C18.5748 17.8833 18.4831 18.1167 18.2998 18.3C18.1165 18.4833 17.8831 18.575 17.5998 18.575C17.3165 18.575 17.0831 18.4833 16.8998 18.3L11.9998 13.4Z" fill="%23FFA200"/></g></svg>');   
    }
    .alert-warning span[data-notify="icon"]::after {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_620_10059" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_620_10059)"><path d="M2.72479 21C2.54146 21 2.37479 20.9542 2.22479 20.8625C2.07479 20.7708 1.95812 20.65 1.87479 20.5C1.79146 20.35 1.74562 20.1875 1.73729 20.0125C1.72896 19.8375 1.77479 19.6667 1.87479 19.5L11.1248 3.5C11.2248 3.33333 11.354 3.20833 11.5123 3.125C11.6706 3.04167 11.8331 3 11.9998 3C12.1665 3 12.329 3.04167 12.4873 3.125C12.6456 3.20833 12.7748 3.33333 12.8748 3.5L22.1248 19.5C22.2248 19.6667 22.2706 19.8375 22.2623 20.0125C22.254 20.1875 22.2081 20.35 22.1248 20.5C22.0415 20.65 21.9248 20.7708 21.7748 20.8625C21.6248 20.9542 21.4581 21 21.2748 21H2.72479ZM4.44979 19H19.5498L11.9998 6L4.44979 19ZM11.9998 18C12.2831 18 12.5206 17.9042 12.7123 17.7125C12.904 17.5208 12.9998 17.2833 12.9998 17C12.9998 16.7167 12.904 16.4792 12.7123 16.2875C12.5206 16.0958 12.2831 16 11.9998 16C11.7165 16 11.479 16.0958 11.2873 16.2875C11.0956 16.4792 10.9998 16.7167 10.9998 17C10.9998 17.2833 11.0956 17.5208 11.2873 17.7125C11.479 17.9042 11.7165 18 11.9998 18ZM11.9998 15C12.2831 15 12.5206 14.9042 12.7123 14.7125C12.904 14.5208 12.9998 14.2833 12.9998 14V11C12.9998 10.7167 12.904 10.4792 12.7123 10.2875C12.5206 10.0958 12.2831 10 11.9998 10C11.7165 10 11.479 10.0958 11.2873 10.2875C11.0956 10.4792 10.9998 10.7167 10.9998 11V14C10.9998 14.2833 11.0956 14.5208 11.2873 14.7125C11.479 14.9042 11.7165 15 11.9998 15Z" fill="%23FFA200"/></g></svg>');
    }

.alert-success {
    border: 1px solid #9DE1CE !important;
    background: #D7F3EB !important;
}

    .alert-success span[data-notify="message"] {
        color: #35C19B;
    }
    .alert-success button[data-notify="dismiss"]::after {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_620_10051" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_620_10051)"><path d="M11.9998 13.4L7.0998 18.3C6.91647 18.4833 6.68314 18.575 6.3998 18.575C6.11647 18.575 5.88314 18.4833 5.6998 18.3C5.51647 18.1167 5.4248 17.8833 5.4248 17.6C5.4248 17.3167 5.51647 17.0833 5.6998 16.9L10.5998 12L5.6998 7.09999C5.51647 6.91665 5.4248 6.68332 5.4248 6.39999C5.4248 6.11665 5.51647 5.88332 5.6998 5.69999C5.88314 5.51665 6.11647 5.42499 6.3998 5.42499C6.68314 5.42499 6.91647 5.51665 7.0998 5.69999L11.9998 10.6L16.8998 5.69999C17.0831 5.51665 17.3165 5.42499 17.5998 5.42499C17.8831 5.42499 18.1165 5.51665 18.2998 5.69999C18.4831 5.88332 18.5748 6.11665 18.5748 6.39999C18.5748 6.68332 18.4831 6.91665 18.2998 7.09999L13.3998 12L18.2998 16.9C18.4831 17.0833 18.5748 17.3167 18.5748 17.6C18.5748 17.8833 18.4831 18.1167 18.2998 18.3C18.1165 18.4833 17.8831 18.575 17.5998 18.575C17.3165 18.575 17.0831 18.4833 16.8998 18.3L11.9998 13.4Z" fill="%2335C19B"/></g></svg>');
    }
    .alert-success span[data-notify="icon"]::after {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_620_10049" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_620_10049)"><path d="M12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C12.8 2 13.5792 2.09167 14.3375 2.275C15.0958 2.45833 15.825 2.725 16.525 3.075C16.775 3.20833 16.9375 3.40833 17.0125 3.675C17.0875 3.94167 17.0417 4.19167 16.875 4.425C16.7083 4.65833 16.4875 4.80833 16.2125 4.875C15.9375 4.94167 15.6667 4.90833 15.4 4.775C14.8667 4.525 14.3125 4.33333 13.7375 4.2C13.1625 4.06667 12.5833 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 14.2167 4.77917 16.1042 6.3375 17.6625C7.89583 19.2208 9.78333 20 12 20C14.2167 20 16.1042 19.2208 17.6625 17.6625C19.2208 16.1042 20 14.2167 20 12C20 11.8667 19.9958 11.7375 19.9875 11.6125C19.9792 11.4875 19.9667 11.3583 19.95 11.225C19.9167 10.9417 19.9708 10.6708 20.1125 10.4125C20.2542 10.1542 20.4667 9.98333 20.75 9.9C21.0167 9.81667 21.2667 9.84167 21.5 9.975C21.7333 10.1083 21.8667 10.3083 21.9 10.575C21.9333 10.8083 21.9583 11.0417 21.975 11.275C21.9917 11.5083 22 11.75 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM10.6 13.8L19.9 4.475C20.0833 4.29167 20.3125 4.19583 20.5875 4.1875C20.8625 4.17917 21.1 4.275 21.3 4.475C21.4833 4.65833 21.575 4.89167 21.575 5.175C21.575 5.45833 21.4833 5.69167 21.3 5.875L11.3 15.9C11.1 16.1 10.8667 16.2 10.6 16.2C10.3333 16.2 10.1 16.1 9.9 15.9L7.05 13.05C6.86667 12.8667 6.775 12.6333 6.775 12.35C6.775 12.0667 6.86667 11.8333 7.05 11.65C7.23333 11.4667 7.46667 11.375 7.75 11.375C8.03333 11.375 8.26667 11.4667 8.45 11.65L10.6 13.8Z" fill="%2335C19B"/></g></svg>');
    }

.alert-info {
    border: 1px solid #85A3E0 !important;
    background: #CDD9F2 !important;
}

    .alert-info span[data-notify="message"] {
        color: #0543BD;
    }
    .alert-info button[data-notify="dismiss"]::after {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_620_10056" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_620_10056)"><path d="M11.9998 13.4L7.0998 18.3C6.91647 18.4833 6.68314 18.575 6.3998 18.575C6.11647 18.575 5.88314 18.4833 5.6998 18.3C5.51647 18.1167 5.4248 17.8833 5.4248 17.6C5.4248 17.3167 5.51647 17.0833 5.6998 16.9L10.5998 12L5.6998 7.1C5.51647 6.91667 5.4248 6.68334 5.4248 6.4C5.4248 6.11667 5.51647 5.88334 5.6998 5.7C5.88314 5.51667 6.11647 5.425 6.3998 5.425C6.68314 5.425 6.91647 5.51667 7.0998 5.7L11.9998 10.6L16.8998 5.7C17.0831 5.51667 17.3165 5.425 17.5998 5.425C17.8831 5.425 18.1165 5.51667 18.2998 5.7C18.4831 5.88334 18.5748 6.11667 18.5748 6.4C18.5748 6.68334 18.4831 6.91667 18.2998 7.1L13.3998 12L18.2998 16.9C18.4831 17.0833 18.5748 17.3167 18.5748 17.6C18.5748 17.8833 18.4831 18.1167 18.2998 18.3C18.1165 18.4833 17.8831 18.575 17.5998 18.575C17.3165 18.575 17.0831 18.4833 16.8998 18.3L11.9998 13.4Z" fill="%230543BD"/></g></svg>');
    }
    .alert-info span[data-notify="icon"]::after {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_620_10054" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_620_10054)"><path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="%230543BD"/></g></svg>');
    }

.alert-danger {
    border: 1px solid #E98888 !important;
    background: #F6CECE !important;
}

    .alert-danger span[data-notify="message"] {
        color: #D20808;
    }
    .alert-danger button[data-notify="dismiss"]::after {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_620_10066" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_620_10066)"><path d="M11.9998 13.4L7.0998 18.3C6.91647 18.4833 6.68314 18.575 6.3998 18.575C6.11647 18.575 5.88314 18.4833 5.6998 18.3C5.51647 18.1167 5.4248 17.8833 5.4248 17.6C5.4248 17.3167 5.51647 17.0833 5.6998 16.9L10.5998 12L5.6998 7.1C5.51647 6.91667 5.4248 6.68334 5.4248 6.4C5.4248 6.11667 5.51647 5.88334 5.6998 5.7C5.88314 5.51667 6.11647 5.425 6.3998 5.425C6.68314 5.425 6.91647 5.51667 7.0998 5.7L11.9998 10.6L16.8998 5.7C17.0831 5.51667 17.3165 5.425 17.5998 5.425C17.8831 5.425 18.1165 5.51667 18.2998 5.7C18.4831 5.88334 18.5748 6.11667 18.5748 6.4C18.5748 6.68334 18.4831 6.91667 18.2998 7.1L13.3998 12L18.2998 16.9C18.4831 17.0833 18.5748 17.3167 18.5748 17.6C18.5748 17.8833 18.4831 18.1167 18.2998 18.3C18.1165 18.4833 17.8831 18.575 17.5998 18.575C17.3165 18.575 17.0831 18.4833 16.8998 18.3L11.9998 13.4Z" fill="%23D20808"/></g></svg>');
    }
    .alert-danger span[data-notify="icon"]::after {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><mask id="mask0_620_10064" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_620_10064)"><path d="M2.72479 21C2.54146 21 2.37479 20.9542 2.22479 20.8625C2.07479 20.7708 1.95812 20.65 1.87479 20.5C1.79146 20.35 1.74562 20.1875 1.73729 20.0125C1.72896 19.8375 1.77479 19.6667 1.87479 19.5L11.1248 3.5C11.2248 3.33333 11.354 3.20833 11.5123 3.125C11.6706 3.04167 11.8331 3 11.9998 3C12.1665 3 12.329 3.04167 12.4873 3.125C12.6456 3.20833 12.7748 3.33333 12.8748 3.5L22.1248 19.5C22.2248 19.6667 22.2706 19.8375 22.2623 20.0125C22.254 20.1875 22.2081 20.35 22.1248 20.5C22.0415 20.65 21.9248 20.7708 21.7748 20.8625C21.6248 20.9542 21.4581 21 21.2748 21H2.72479ZM4.44979 19H19.5498L11.9998 6L4.44979 19ZM11.9998 18C12.2831 18 12.5206 17.9042 12.7123 17.7125C12.904 17.5208 12.9998 17.2833 12.9998 17C12.9998 16.7167 12.904 16.4792 12.7123 16.2875C12.5206 16.0958 12.2831 16 11.9998 16C11.7165 16 11.479 16.0958 11.2873 16.2875C11.0956 16.4792 10.9998 16.7167 10.9998 17C10.9998 17.2833 11.0956 17.5208 11.2873 17.7125C11.479 17.9042 11.7165 18 11.9998 18ZM11.9998 15C12.2831 15 12.5206 14.9042 12.7123 14.7125C12.904 14.5208 12.9998 14.2833 12.9998 14V11C12.9998 10.7167 12.904 10.4792 12.7123 10.2875C12.5206 10.0958 12.2831 10 11.9998 10C11.7165 10 11.479 10.0958 11.2873 10.2875C11.0956 10.4792 10.9998 10.7167 10.9998 11V14C10.9998 14.2833 11.0956 14.5208 11.2873 14.7125C11.479 14.9042 11.7165 15 11.9998 15Z" fill="%23D20808"/></g></svg>');
    }



/***********************************************************************/
/***************BẢN ĐỒ SỐ HÓA****************/
/***********************************************************************/
#sohoa {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

div#sohoa > .roles {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    color: #53413D;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.20);
    font-family: Roboto Medium;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    padding: 12px;
    gap: 4px;
}

div#sohoa > .roleschitiet {
    align-self: stretch;
    color: #53413D;
    font-family: Roboto Medium;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.20);
    border-radius: 4px;
    background: #EFE1D9;
    width: calc(100%/3 - 2.6666px);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    padding: 12px;
    gap: 4px;
}

div#sohoa > .roles:nth-child(1), 
div#sohoa > .roles:nth-child(2), 
div#sohoa > .roles:nth-child(6), 
div#sohoa > .roles:nth-child(7),
div#sohoa > .roles:nth-child(11), 
div#sohoa > .roles:nth-child(12),
div#sohoa > .roles:nth-child(16), 
div#sohoa > .roles:nth-child(17),
div#sohoa > .roles:nth-child(21), 
div#sohoa > .roles:nth-child(22),
div#sohoa > .roles:nth-child(26), 
div#sohoa > .roles:nth-child(27) {
    width: calc(50% - 2px);
}

div#sohoa > .roles:nth-child(3), 
div#sohoa > .roles:nth-child(4), 
div#sohoa > .roles:nth-child(5), 
div#sohoa > .roles:nth-child(8), 
div#sohoa > .roles:nth-child(9), 
div#sohoa > .roles:nth-child(10),
div#sohoa > .roles:nth-child(13), 
div#sohoa > .roles:nth-child(14), 
div#sohoa > .roles:nth-child(15),
div#sohoa > .roles:nth-child(18), 
div#sohoa > .roles:nth-child(19), 
div#sohoa > .roles:nth-child(20),
div#sohoa > .roles:nth-child(23), 
div#sohoa > .roles:nth-child(24), 
div#sohoa > .roles:nth-child(25),
div#sohoa > .roles:nth-child(28), 
div#sohoa > .roles:nth-child(29), 
div#sohoa > .roles:nth-child(30) {
    width: calc(100%/3 - 2.66666px);
}

.td-head {
    position: relative;
}

.btn-quyen {
    display: inline-block;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.group-data-grid .dtrg-level-1,
.group-data-grid .dtrg-level-2 {
    display: none;
}

#notificationBell {
    position: relative;
    margin-top: 10px;
}

#notificationBell #notificationCount {
    position: absolute;
    background: #DF3C4E;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    border: 2px solid #FFF;
    top: -6px;
    right: -6px;
}

#notificationBell > a > span {
    font-size: 28px;
}

#notificationMessage {
    color: #53413D;
    font-family: Roboto Bold;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 2.5;
    display: block;
}

.notificationMessage {
    position: absolute;
    min-width: 250px;
    background-color: #FFF;
    border-radius: 8px;
    /* border: 1px solid rgba(233, 233, 233, 1); */
    left: 50%;
    transform: translateX(-50%);
    top: 80%;
    text-align: center;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
    z-index: 100;
}






.warning-text {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    /* identical to box height, or 150% */
    color: #363636;
    margin-bottom: 24px;
}

.back-btn {
    border: 1px solid #963600;
    padding: 8px 16px;
    width: 120px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    /* identical to box height, or 150% */
    border-radius: 4px;
    color: #963600;
}

.access-box {
    min-height: calc(100vh - 300px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h4.AccessDenied_Text {
    font-family: 'Roboto Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.17;
    /* identical to box height, or 117% */
    color: #363636;
    margin-bottom: 8px;
    margin-top: 24px;
}

.access_notification {
    display: flex;
    flex-direction: column;
    align-items: center;
}