.block-room-decor {
    width: 100%;
}
#nhan-hieu,#chon-user
{
	width:100px;
}
.icon-home
{ 
	background:url(https://azbranding.com.vn/wp-content/uploads/ic1.png);
	background-repeat:no-repeat !important;
	background-size:cover !important;
	width:18px !important;
	height:18px !important;
	background-blend-mode: revert;
	top:1px;
}
.icon-u
{ 
	background:url(https://azbranding.com.vn/wp-content/uploads/ic2.png);
	background-repeat:no-repeat !important;
	background-size:cover !important;
	width:18px !important;
	height:18px !important;
	background-blend-mode: revert;
	top:1px;
}
.paginate_links
{ 
	width:100% !important;
}
.colors
{
	min-height:55px;
}
.paginate_links
{
	width:100% !important;
	overflow:hidden !important;
	margin-top:20px !important;
    grid-column: 1/ span 4;
    text-align: center;
}
.paginate_links .page-numbers
{
	padding:3px 8px;
	background:#ddd;
	border-radius:99px !important;
    height: 26px;
    display: inline-block;
    line-height: 20px;
}
.paginate_links .page-numbers.current
{
	background:#ff6900 !important;
	padding:3px 10px !important;
}
.paginate_links .next.page-numbers,.paginate_links .prev.page-numbers
{
	padding:3px 3px !important;
}
.paginate_links .next.page-numbers i,.paginate_links .prev.page-numbers i
{
	/* margin-top:2px; */
}
.paginate_links .page-numbers.dots
{
	padding:3px 8px !important;
}
.xoa-user,.close-du-an,.btn-them-users,.xem-them,.close-key,.btn-hinh,.xem-them-ghi-chu,.lose-add-users
{
	    cursor:pointer !important;
}
#them-du-an
{
	margin-right:0px !important;
	float:right;
}
#canvas-wrapper .canvas-container,
#canvas-wrapper canvas {
    width: 100% !important;
    /*height: 100% !important;*/
}

.block-room-decor__left,
.switch-colour-decorr__left,
.col-md-6 {
    width: 50%;
    float: left;
    padding: 0px 15px;
}

.block-room-decor__right,
.switch-colour-decorr__right {
    width: 50%;
    float: right;
    padding: 0px 15px;
}

.switch-colour-decorr__right {
    display: flex;
}

.colour-grid .colour-wrap__field__color {
    width: 100%;
    height: 80px;
}

.colour-grid .item-list {
    padding-right: 32px;
}

.colour-grid ul {
    font-size: 0;
    margin-left: -2px;
    margin-right: -2px;
    margin-bottom: -4px;
}

.block-room-decor .colour-grid ul li {
    white-space: normal;
}

.colour-grid ul li {
    width: 20%;
    display: inline-block;
    vertical-align: middle;
    padding-left: 2px;
    padding-right: 2px;
    margin-bottom: 4px;
}

.colour-grid .colour-wrap {
    cursor: pointer;
    position: relative;
    -webkit-transition: 200ms ease-in-out;
    -o-transition: 200ms ease-in-out;
    transition: 200ms ease-in-out;
}

.colour-grid .field-field-colour-code>div {
    width: 100%;
    height: 85px;
    display: block;
}

.colour-grid .colour-wrap__field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    padding: 6px;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: 200ms ease-in-out;
    -o-transition: 200ms ease-in-out;
    transition: 200ms ease-in-out;
    -webkit-box-shadow: 0 5px 25px rgb(0 0 0 / 15%);
    box-shadow: 0 5px 25px rgb(0 0 0 / 15%);
}

.colour-grid .colour-wrap__field .colour-wrap__information {
    position: relative;
    z-index: 10;
}

.colour-grid .colour-wrap__field__color {
    width: 100%;
    height: 80px;
    display: block;
}

.colour-grid .colour-wrap__field .field-field-display-title {
    -webkit-transition: 300ms 0.02s ease-in-out;
    -o-transition: 300ms 0.02s ease-in-out;
    transition: 300ms 0.02s ease-in-out;
    margin-top: 10px;
    opacity: 0;
    visibility: visible;
}

.colour-grid .colour-wrap__field .field-field-display-title h3 {
    font-size: 13px;
    margin-bottom: 0;
    line-height: 1.1;
    color: #000;
    font-family: averta-600;
    letter-spacing: -0.3px;
}

.colour-grid .colour-wrap__field .field-field-colour-identify {
    opacity: 0;
    visibility: visible;
    -webkit-transition: 400ms 0.03s ease-in-out;
    -o-transition: 400ms 0.03s ease-in-out;
    transition: 400ms 0.03s ease-in-out;
    margin-top: 3px;
    margin-bottom: 3px;
    color: #000;
    font-size: 10px;
    line-height: 1.1;
}

.colour-grid .colour-wrap:hover .colour-wrap__field {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.colour-grid .colour-wrap:hover .field-field-display-title {
    opacity: 1;
    visibility: visible;
}


/* width */

.slimScrollDiv::-webkit-scrollbar {
    width: 10px;
}


/* Track */

.slimScrollDiv::-webkit-scrollbar-track {
    background: #f1f1f1;
}


/* Handle */

.slimScrollDiv::-webkit-scrollbar-thumb {
    background: #888;
    width: 20px !important;
    height: 35px !important;
    border-radius: 10px;
}


/* Handle on hover */

.slimScrollDiv::-webkit-scrollbar-thumb:hover {
    background: #555;
    width: 20px !important;
    height: 35px !important;
    border-radius: 10px;
}

.button-sonnha {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity 250ms ease-in-out;
    -o-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
}

.button-sonnha .pa-btn--st-03 {
    background-color: #fff;
    color: #cc0000;
    border: 2px solid #cc0000;
    padding: 9px 25px 6px;
    font-size: 14px;
    min-width: 230px;
}

.pa-btn--lg,
.webform-confirmation__back>a {
    min-width: 232px;
    padding: 7px 20px 6px;
}

.pa-btn--st-03 {
    font-size: 14px;
    background-color: #0c327e;
    color: #fff;
    line-height: 2.5;
    display: inline-block;
    border: 2px solid transparent;
}

.pa-btn,
.store-locator__list-btn a,
.webform-confirmation__back>a {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-family: averta-600;
    -webkit-transition: 300ms ease-in-out;
    -o-transition: 300ms ease-in-out;
    transition: 300ms ease-in-out;
}

.button-sonnha {
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity 250ms ease-in-out;
    -o-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
}

.button-sonnha .pa-btn--st-03 {
    background-color: #fff;
    color: #cc0000;
    border: 2px solid #cc0000;
    padding: 9px 25px 6px;
    font-size: 14px;
    min-width: 230px;
}

.pa-btn--lg,
.webform-confirmation__back>a {
    min-width: 232px;
    padding: 7px 20px 6px;
}

.pa-btn--st-03 {
    font-size: 14px;
    background-color: #0c327e;
    color: #fff;
    line-height: 2.5;
    display: inline-block;
    border: 2px solid transparent;
}

.pa-btn,
.store-locator__list-btn a,
.webform-confirmation__back>a {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-family: averta-600;
    -webkit-transition: 300ms ease-in-out;
    -o-transition: 300ms ease-in-out;
    transition: 300ms ease-in-out;
}

.button-sonnha .pa-btn.icon-sonnha:before,
.button-sonnha .store-locator__list-btn a.icon-sonnha:before,
.store-locator__list-btn .button-sonnha a.icon-sonnha:before,
.button-sonnha .webform-confirmation__back>a.icon-sonnha:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-image: url(../images/icon-son.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 23px;
    height: 23px;
    -webkit-transition: 300ms ease-in-out;
    -o-transition: 300ms ease-in-out;
    transition: 300ms ease-in-out;
    margin-right: 10px;
}

.button-sonnha .pa-btn--st-03:hover {
    background-color: #cc0000;
    color: #fff;
    border: 2px solid #fff;
}

.button-sonnha .pa-btn.icon-sonnha:hover::before {
    background-image: url(../images/icon-son-hover.png);
}

.nip-colour-code-select-paint {
    margin-bottom: 70px;
}

.nip-colour-code-select-paint {
    background-color: #e46c86;
    padding-top: 40px;
    padding-bottom: 120px;
    margin-top: 130px;
    margin-bottom: 40px;
}

.nip-bg-paint {
    position: relative;
}

.nip-full-width {
    position: relative;
    right: 50%;
    left: 50%;
    width: 100vw;
    margin-right: -50vw;
    margin-left: -50vw;
}

.nip-colour-code-select-paint:before {
    background-image: url(../images/colour-code-select-top-bg-paint.png);
    top: -100px;
    position: absolute;
    bottom: auto;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 113px;
}

.nip-colour-code-select-paint:before,
.nip-colour-code-select-paint:after {
    content: "";
}

.container,
.container-wrap {
    max-width: 1370px;
}

@media (min-width: 1400px) {
    .spacing-block-colour {
        padding-left: 120px;
        padding-right: 120px;
    }
}

.spacing-block-colour {
    padding-left: 80px;
    padding-right: 80px;
}

.block-selected-colour .row {
    margin-left: 0;
    margin-right: 0;
}

.block-selected-colour .cus-padding:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.block-selected-colour .cus-padding {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

@media (min-width: 1400px) {
    .block-selected-colour__inner-left {
        padding-right: 150px;
    }
}

.block-selected-colour__inner-left {
    padding-right: 90px;
}

.block-selected-colour .block-heading {
    text-align: left;
}

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

.block-selected-colour__inner-left,
.block-selected-colour__inner-right {
    padding-top: 30px;
}

.block-colour-select.select-colour-wrap .colour-wrap {
    -webkit-animation: animateColor linear 0.2s;
    animation: animateColor linear 0.2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.block-colour-select .colour-wrap {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 20px 30px 30px;
    -webkit-box-shadow: 1px 2px 6px rgb(0 0 0 / 20%);
    box-shadow: 1px 2px 6px rgb(0 0 0 / 20%);
}

.block-colour-select .field-field-colour-code,
.block-colour-select .field-field-momento-image {
    float: left;
}

.block-colour-select #jquery_colorpicker_color_display_,
.block-colour-select .field-field-momento-image {
    width: 80px;
    height: 80px;
}

.block-colour-select .colour-wrap__field {
    padding-left: 105px;
    padding-top: 14px;
    text-align: left;
}

.block-colour-select .field-field-display-title>h3 {
    font-family: averta-600;
    font-size: 20px;
}

.block-colour-select .field-field-colour-identify {
    font-size: 17px;
}

.block-selected-colour .cus-padding {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

@media (min-width: 1400px) {
    .block-selected-colour__inner-right {
        padding-left: 150px;
    }
}

.block-selected-colour__inner-right {
    padding-left: 90px;
}

.block-selected-colour__inner-left,
.block-selected-colour__inner-right {
    padding-top: 30px;
}

.block-selected-colour .block-heading {
    text-align: left;
}

.nip-colour-code-select-paint .block-heading h2,
.nip-colour-code-select-paint .block-heading h3 {
    color: #fff;
}

.block-heading h2 {
    position: relative;
}

@media (min-width: 1400px) {
    .block-heading h1,
    .block-heading h2 {
        font-size: 30px;
    }
}

.block-colour-select.select-colour-wrap .colour-wrap {
    -webkit-animation: animateColor linear 0.2s;
    animation: animateColor linear 0.2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.block-colour-select .colour-wrap {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px 20px 30px 30px;
    -webkit-box-shadow: 1px 2px 6px rgb(0 0 0 / 20%);
    box-shadow: 1px 2px 6px rgb(0 0 0 / 20%);
}

.block-colour-select .field-field-colour-code,
.block-colour-select .field-field-momento-image {
    float: left;
}

.block-colour-select #jquery_colorpicker_color_display_,
.block-colour-select .field-field-momento-image {
    width: 80px;
    height: 80px;
}

.block-colour-select .colour-wrap__field {
    padding-left: 105px;
    padding-top: 14px;
    text-align: left;
}

.block-colour-select .field-field-display-title>h3 {
    font-family: averta-600;
    font-size: 20px;
}

.block-colour-suggestion {
    margin-top: 50px;
    text-align: center;
}

.block-colour-select .field-field-colour-identify {
    font-size: 17px;
}

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

.nip-colour-code-select-paint .block-heading h2,
.nip-colour-code-select-paint .block-heading h3 {
    color: #fff;
}

.block-heading h2 {
    position: relative;
}

#colour-suggestion {
    font-size: 0;
    padding: 10px 50px;
    margin-top: 25px;
    background: #fff;
    padding-bottom: 10px;
    text-align: left;
    -webkit-box-shadow: 1px 2px 6px rgb(0 0 0 / 20%);
    box-shadow: 1px 2px 6px rgb(0 0 0 / 20%);
}

#selected-highlight-colour .colour-wrap .empty-result,
#colour-suggestion .empty-result {
    color: rgba(0, 0, 0, 0.8);
    margin: 0;
    font-family: averta-600;
    -webkit-animation: animateColor linear 0.2s;
    animation: animateColor linear 0.2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

#colour-suggestion .empty-result {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

.nip-colour-code-select-paint .empty-result {
    color: #fff;
    font-size: 16px;
}

.container,
.container-wrap {
    margin: 0px auto;
}

.nip-colour-code-select-paint {
    display: none;
}

.jquery_colorpicker_color_display {
    width: 80px;
    height: 80px;
}

#selected-highlight-colour .colour-wrap,
#selected-main-colour .colour-wrap {
    overflow: hidden;
}

.nip-spacing-paint,
.page-node-type-colour .nip-spacing-paint {
    padding-top: 50px;
    padding-bottom: 25px;
    margin-bottom: 100px;
    margin-top: 35px;
}

.nip-colour-code-paint {
    background-color: #e46c86;
}

@media (min-width: 1025px) {
    .block-switch-room-link {
        margin-top: -15px;
    }
}

.block-switch-room-link {
    position: relative;
    width: 100%;
    text-align: center;
}

.block-switch-room-link .block-tab-categories {
    padding: 0 !important;
}

.block-switch-room-link .block-tab-categories__mb {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0;
}

.block-tab-categories__mb {
    position: relative;
    -webkit-box-shadow: 0 0 6px 0 rgb(0 0 0 / 15%);
    box-shadow: 0 0 6px 0 rgb(0 0 0 / 15%);
}

@media (min-width: 1025px) {
    .block-switch-room-link .item-list {
        position: relative;
    }
}

.block-switch-room-link .item-list {
    z-index: 5;
}

.block-tab-categories .nav,
.block-tab-categories .item-list {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}

ol,
ul {
    padding: 0;
    margin-bottom: 0;
    list-style-position: inside;
}

.block-switch-room-link .item-list ul>li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    -webkit-animation: animateColor linear 0.2s;
    animation: animateColor linear 0.2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    min-width: auto;
    padding: 0;
}

.block-switch-room-link .item-list ul>li {
    font-size: 20px;
    font-weight: 700;
    width: calc(100% / 6 - 20px);
}

.active.house-item {
    color: rgba(255, 255, 255, 1);
}

.house-item {
    color: rgba(255, 255, 255, 0.5);
}

.house-item:hover {
    color: rgba(255, 255, 255, 1);
}

.nip-colour-code-paint:after {
    content: "";
    background-image: url(../images/colour-code-bg-paint.png);
    position: absolute;
    bottom: -58px;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 60px;
}

.block-switch-room-link .item-list ul>li+li:before {
    content: "";
    position: absolute;
    top: 5px;
    display: block;
    width: 2px;
    height: 51%;
    background-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1024px) {
    .cus-col-12-1024 {
        max-width: 100% !important;
        -webkit-box-flex: 1 !important;
        -ms-flex: auto !important;
        flex: auto !important;
        width: 100%;
    }
    .info {
        display: none;
    }
    .views-element-container.row {
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: 30px;
    }
    .nip-select {
        overflow: hidden;
    }
}

.block-room-decor__right .js-form-item .form-text,
#switch-colour-group {
    height: 50px;
}

.info {
    margin-top: 20px;
}

.block-room-decor__right .js-form-item .form-text,
#switch-colour-group {
    margin-top: 0;
    width: 100%;
    height: 55px;
    letter-spacing: -0.5px;
    font-size: 15px;
}

.form-text {
    display: block;
    margin-top: 0.25rem;
}

.nip-select .views-exposed-form .js-form-wrapper .button {
    padding-top: 8px;
    padding-bottom: 8px;
    margin: 0;
    top: 0;
}

.close-key {
    position: absolute;
    top: 5px;
    right: 10px;
    padding: 10px;
    display: none;
}

.form-item-keyword {
    position: relative;
}

.btn-hinh {
    padding: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    width: fit-content;
    margin-right: 5px;
    display: inline-block;
    font-size: 14px;
}

.btn-hinh span {
    margin-left: 5px;
}

.btn-hinh.active {
    background: #f7f7f7;
}

#btn-hinh-anh {
    margin-bottom: 10px;
}

.disnone {
    display: none;
}

#btn-xuat-url {
    position: absolute;
    right: 160px;
    top: 5px;
    padding: 10px;
    background: rgb(205, 64, 63, 0.5);
    z-index: 99;
    width: 80px;
    border-radius: 10px;
    color: #fff;
}

#btn-xuat-hinh {
   
   
    background: #f9960f;
    color: #fff;
	margin-top:20px !important;
	padding-left:30px !important;
}

#btn-xuat-hinh:hover,
#btn-xuat-url:hover {
   /* background: rgb(154, 3, 3);*/
}

#btn-xuat-hinh::before {
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    background: url(../images/image-icon.png);
    background-repeat: no-repeat;
    background-size: cover;
	left:10px;
	top:5px;
	margin-right:10px;
}

.info {
    display: none !important;
}

#du-an {
    margin-bottom: 15px;
}
.du-an-footer a:hover 
{
	background: #f9960f;
}

#bang-du-an {
    
	width: 100% !important;
    overflow: hidden;
    display: grid;
    grid-template-columns: calc((100% - 40px) / 5) calc((100% - 40px) / 5) calc((100% - 40px) / 5) calc((100% - 40px) / 5) calc((100% - 40px) / 5);
    gap: 10px;
}
.ghi-chu
{
	font-size:10px !important;
}

.du-an-item {
    /*width: calc(20% - 12px) !important*/
    float: left;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
   
    background: #fff;
    box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, 15%);
    -webkit-box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, 15%);
    -moz-box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, .15);
}
#bang-du-an .du-an-item
{
	
	grid-auto-flow: row;
}

.du-an-item .image {
    width: 100%;
    background: #ddd;
	height:250px;
	overflow:hidden;
	/*background-size:contain !important;*/
	background-size:cover !important;
	background-repeat:no-repeat !important;
	background-position:center center !important;
}

.du-an-item .box-text {
    padding: 20px;
    overflow: hidden;
	margin-bottom:40px;
}

.du-an-item .box-text h4 {
    margin-bottom: 10px;
}

.du-an-item ul.colors {
    list-style: none;
    margin-bottom: 0px !important;
	width:100% !important;
	overflow:hidden !important;
}

.du-an-item ul li {
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
	 float:left;
	width:fit-content; 
	margin-left:0px !important;
}

.du-an-item ul li .color {
    border-radius: 99px;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    float: left;
    margin-right: 5px;
}

#bo-loc {
    width: 100%;
    margin-top: 20px;
	overflow:hidden;
}

#bo-loc .search-du-an {
    width: 100%;
   
}

#bo-loc .search-du-an input {
    width: 30%;
	float:left;
}
#bo-loc #timkiem,#loc-kh
{
	float:left;
}

#bo-loc .button-action {
    width:20%;
    float: right;
    text-align: right;
}

.du-an-item ul.users {
    list-style: none;
    height: 34px;
    overflow: hidden;
    position: relative;
    padding-top: 10px;
    margin-bottom: 10px !important;
	transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.du-an-item ul.users.active {
    list-style: none;
    height: 65px;
    overflow-y: scroll;
}

.du-an-item ul.users li {
    width: fit-content;
    padding: 2px 8px;
    background: #007784;
    margin-right: 5px;
    float: left;
    color: #fff;
    border-radius: 15px;
}

.du-an-item ul.users li span.xoa-user {
    position: absolute;
    margin-top: -8px;
    margin-right: -8px;
    background: #cc0000;
    border-radius: 99px;
    padding: 0px 4px;
    font-size: 8px;
}

.xem-them,.xem-them-ghi-chu {
    font-size: 13px;
    float: left;
    width: 100% !important;
}
.xem-them-ghi-chu
{
	margin-top:-10px;
}

.btn-them-users {
    padding: 2px 5px;
    background: #007784;
    color: #fff;
    border-radius: 50px;
    overflow: hidden;
    width: 30%;
    float: right;
    text-align: center;
	font-size:13px;
	margin-top:10px;
	
}

.btn-them-users:hover {
    padding: 2px 5px;
    background: #007784;
    color: #fff;
    border-radius: 50px;
    overflow: hidden;
    width: 30%;
    float: right;
    text-align: center;
}

#add-users {
    position: fixed;
    width: 300px;
    z-index: 999;
    top: 40%;
    left: calc(50% - 150px);
    background: #fff;
    border: 1px solid #ddd;
    display: none;
}

#add-users h4 {
    background: #007784 !important;
    color: #fff;
}

#add-users .body-from {
    padding: 20px;
}
.ghi-chu
{
	max-height:20px;
	margin-bottom:10px !important;
	overflow:hidden !important;
	float: left;
	transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
	width:100%;
}
.ghi-chu.active
{
	max-height:50px;
}

.close-add-users {
    position: absolute;
    right: -10px;
    top: -15px;
    padding: 0px 7px;
    border-radius: 99px;
    color: #ff0000;
    background: #fff;
    border: 1px solid #ddd;
}

.close-du-an {
    position: absolute;
    margin-right: 0px;
    margin-top: 0px;
    z-index: 9999;
    padding: 0px 8px;
    border: 1px solid #ddd;
    border-radius: 99px;
    background: #fff;
}

.du-an-footer .button {
    width: 50%;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    float: left !important;
}

.hinh-anh-item {
    float: left;
    display: flex;
    flex-direction: column;
}

#dis-hinh-anh {
    width: 100%;
    overflow: hidden;
}

.row {
    margin-bottom: 20px;
}

.full {
    width: 99.9% !important;
    height: 40px;
}

#fiter {
    margin-top: 20px;
}

#dis-hinh-anh .hinh-anh-item {
    width: 100% !important;
}

#dis-hinh-anh {
    display: grid;
    grid-template-columns: calc(20% - 10px) calc(20% - 10px) calc(20% - 10px) calc(20% - 10px) calc(20% - 10px);
    gap: 10px;
}
#dis-hinh-anh .hinh-anh-item img {
    margin-bottom: 10px !important;
}
.du-an-footer 
{
	position:absolute;
	bottom:0;
	width:100%;
}
.du-an-footer .button
{
	font-size:10px;
}
.du-an-item
{
	position:relative;
}
.du-an-item .box-text
{
	margin-bottom:40px;
	min-height:230px;
}
.last-logs
{
	padding:0px;
	border-radius:10px;
	overflow:hidden;
}
@media (max-width: 820px) {
	#nhan-hieu,#chon-user
{
	width:100px;
}
	#bang-du-an {
   width: 100% !important;
    overflow: hidden;
    display: grid;
    grid-template-columns: calc((100% - 20px) / 3) calc((100% - 20px) / 3) calc((100% - 20px) / 3);
    gap: 10px;
}
}
@media (max-width: 600px) {
	#nhan-hieu,#chon-user
{
	width:80px;
}
	.du-an-item ul.users li
	{ 
		margin-bottom:20px !important;
	}
	.mb
	{ 
		padding:5px !important;
	}
	.mb span
	{ 
		display:none !important;
	}
	#bo-loc .button-action
	{
		width:50% !important;
	}
	#bo-loc .search-du-an input
	{
		width:60% !important;
	}
	#btn-send
{ 
	float:unset !important;
	margin-right:0px;
}
	.last-logs.active
	{
		right:0px !important;
		top:50px;
		padding:0px !important;
	}
	.du-an-item .box-text {
    margin-bottom: 40px;
    min-height: 100px !important;
}
	#logo
	{
		width:120px;
	}
	.du-an-item ul.users {
    list-style: none;
    height: 25px !important;
    overflow: hidden;
    position: relative;
    padding-top: 10px;
    margin-bottom: 10px !important;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}
	.colors {
    min-height: 20px;
}
	.du-an-item {
    width: 100% !important;
    float: left;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 5px;
    
    background: #fff;
    box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, 15%);
    -webkit-box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, 15%);
    -moz-box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, .15);
}
	.block-room-decor__right.active
	{
		position:fixed;
		width:100vw;
		height:calc(100vh - 70px);
		bottom:0px;
		left:0px;
		display:block;
		background:#fff !important;
	}
	
	.colour-grid .colour-wrap__field .field-field-display-title h3
	{
		margin-top:-10px;
		opacity:1 !important;
		visibility: visible !important;
	}
	.block-room-decor__right
	{
		display:none;
	}
	#dis-hinh-anh {
    display: grid;
    grid-template-columns: calc(33.33% - 10px) calc(33.33% - 10px) calc(33.33% - 10px) !important;
    gap: 10px;
}
	.du-an-item .image
	{
		height:150px !important;
	}
	#c,#canvas-wrapper .canvas-container, #canvas-wrapper canvas
{
		/*height:250px !important;*/
}
	.du-an-item .image {
    width: 100%;
    
    background: #ddd;
}
	.du-an-item .image img{
    width: 100%;
   
		}
	#bang-du-an {
   width: 100% !important;
    overflow: hidden;
    display: grid;
    grid-template-columns: calc((100% - 10px) / 2) calc((100% - 10px) / 2) !important;
    gap: 10px;
}
	.du-an-footer
	{
		position:absolute;
		bottom:0;
	}
	.du-an-footer a
	{
		font-size:7px !important;
		padding:5px !important;
	}
	.du-an-item ul li
	{
		font-size:7px !important;
	}
	.xem-them {
    font-size: 7px;
    float: left;
    width: 70%;
}
	.btn-them-users
	{
		width:40%;
		font-size:7px !important;
	}
	.du-an-item .box-text {
    padding: 5px !important;
    overflow: hidden;
}
	.du-an-item .box-text h4
	{
		font-size:14px !important;
	}
	.du-an-item ul li .color
	{
		width:10px !important;
		height:10px !important;
	}
	#bo-loc
	{
		overflow:hidden;
	}
	#bo-loc .search-du-an
	{
		width:100%;
		display:block !important;
	}
	#loc-kh
	{
		float:left !important;
	}
	#timkiem,#them-du-an
	{
		margin-right:0px !important;
		float:right;
	}
}
.logs-item
{
	display:flex;
}
.thongbao
{
	width:95%;
}
.logs-close
{
	width:5%;
}
.du-an-footer .button
{
	padding-top:10px;
	padding-bottom:10px;
}
.xem-them:before,.xem-them-ghi-chu:before
{
	content: '\f107';
    font-family: "fl-icons" !important;
	font-size:18px;
}
.xem-them.active:before,.xem-them-ghi-chu.active:before
{
	content: '\f106';
    font-family: "fl-icons" !important;
	font-size:18px;
}
.xem-them
{
	width: 30px !important;
    position: absolute;
    right: -10px;
    margin-top: -30px !important;
}
.xem-them-ghi-chu
{
	width: 30px !important;
    position: absolute;
    right: -10px;
    margin-top: -10px !important;
}
.btn-them-users i
{
	margin-right:5px;
}
.btn-them-users
{
	
}

/* width */
.users.active::-webkit-scrollbar,.ghi-chu.active::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.users.active::-webkit-scrollbar-track,.ghi-chu.active::-webkit-scrollbar-track{
  background: #f1f1f1;
}

/* Handle */
.users.active::-webkit-scrollbar-thumb,.ghi-chu.active::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
.users.active::-webkit-scrollbar-thumb:hover,.ghi-chu.active::-webkit-scrollbar-thumb:hover{
  background: #555;
}
#buttonWrapper {
      position: absolute;
      width: 30px;
      top: 2px;
      right: 2px;
	display:none;
    }
    
    input[type="button"] {
      padding: 0px;
      margin: 0px 0px 2px 0px;
		background:#fff;
		width:30px;
    }
.last-logs
{
	position: absolute;
    width: 250px;
    background: #fff;
    padding: 10px;
    border: 1px solid #f7f7f7;
	display:none;
	}
.last-logs.active
{
	display:block;
	
	}
.logs-item
{
	color:#111;
}
	.logs-close
	{
		color:red;
		cursor: pointer;
	}
#add-users:before
{
	position:absolute;
	content:"";
	width:200vw;
	height:200vh;
	background:rgb(1,1,1,0.5);
	z-index:-1;
	left:-100vw;
	top:-100vh;
	
}
#add-users
{
	transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}
#frm-add-users
{
	background:#fff !important;
	margin-bottom:0px !important;
}
.dark.nav-dropdown.nav-dropdown-bold>li.nav-dropdown-col, .dark.nav-dropdown.nav-dropdown-simple>li.nav-dropdown-col, .nav-dropdown.dark .nav-column>li>a, .nav-dropdown.dark>li>a, .nav-dark .nav>li.header-divider, .nav-dark .header-divider:after, .nav-dark .nav-divided>li+li>a:after
{
	border:none !important;
}
.thong-bao
{
	margin-right:20px;
}
#upload-button
{
	width:fit-content;
	padding:5px 10px;
}
.du-an-item
{
	margin-bottom:0px;
}
#users
{
	z-index:9999999 !important;
}
.login-submit
{
	text-align:center !important;
}
#register_button
{
	width:60%;
	border-radius:30px !important;
	margin-right:0px !important;
}
.login-submit .button
{
	width:100%;
	border-radius:30px !important;
	margin-right:0px !important;
}
#loginform
{
	margin-bottom:0px !important;
}

#loginform p input
{
	box-shadow:none !important;
	border:none;
	border-bottom:1px solid #032568;
}
#gioithieu ul
{
	list-style:none;
	padding-left:0px !important;
}
#gioithieu ul li
{
	color:#032568;
	padding-left:45px;
	position:relative;
	margin-bottom:30px;
	display:flex;
	align-items:center;
	margin-left:0px !important;
}
#gioithieu ul li:before
{
	content:"";
	width:30px;
	height:30px;
	background:#032568;
	position:absolute;
	left:0px;
}
.block-room-decor-canvas .button
{
	font-size:12px;
	margin-top:20px;
	padding:0px 5px !important;
	font-weight:400 !important;
	border-radius:5px !important;
}
#btn-send
{ 
	float:right;
	margin-right:0px;
}