/**
 * Leaf UI là bộ giao diện của nền tảng được tích hợp từ phiên bản 2.0 trở đi. Bộ giao diện kế thừa dựa trên nền tảng trước đó là Leafy
 
 * Ta đặt tên giao diện riêng để phân biệt trong các phiên bản, để dễ quản lý bảo trì và phát triển, bộ giao diện sau kế thừa từ bộ giao diện trước nhưng vẫn có thể hoạt động đọc lập và song song với giao diện trước. Tuy nhiên từ phiên bản 2.0 trở đi mô hình này mới được áp dụng, còn trước đó ta phải thay thế mã nguồn cho từng giao diện cụ thể
 
 * Tạo ngày 24-08-2022
 * Phiên bản 2.0
 * Bản quyền thuộc sở hữu Cty CP vàng bạc đá quý Hoàng Kim Bảo Ngọc Jewelry- HBJ
 * Website https://hoangkimbaongoc.com
 */

h1,h2,h3,h4,h5 {padding:0;margin:0;vertical-align:baseline;}
ol, ul, li { margin:0; padding:0; list-style:none; }
a { color:inherit; text-decoration:none; }

/* Giao diện hộp nổi */
.lui-popup {
	display: none;
	position: absolute;
	border-radius: .3em;
	width:100%;
	max-height: 24em;
	overflow: auto;
	background: white;
	z-index: 100; /* Nằm trên cả các z-index trong addon */
}
.lui-popup[pos="top-left"] {
	bottom:100%;
	left:0;
}
.lui-popup[pos="top-right"] {
	bottom:100%;
	right:0;
}
.lui-popup[pos="bottom-left"] {
	top:100%;
	left:0;
}
.lui-popup[pos="bottom-right"] {
	top:100%;
	right:0;
}

/* Giao diện đang tải vòng tròn */
.lui-circleload {
	width: 3em;
	height: 3em;
	background: #e6e2e7;
	border-radius: 50%;
	position: relative;
}
.lui-circleload .circle .mask,
.lui-circleload .circle .fill {
	width: 3em;
	height: 3em;
	position: absolute;
	border-radius: 50%;
}
.lui-circleload .circle .mask {
	clip: rect(0, 3em, 3em, 1.5em);
}
.lui-circleload .circle .mask .fill {
	clip: rect(0, 1.5em, 3em, 0);
	background-color: #5494e3;
}
.lui-circleload .inside-circle {
	width: 2.4em;
	height: 2.4em;
	border-radius: 50%;
	background: #fff;
	margin-top: .3em;
	margin-left: .3em;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
}
.lui-circleload .inside-circle .label {
	font-size: .85em;
}
.lui-circleload .inside-circle .icon {
	display: none;
}


/* Nút nhấn */
.lui-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: .3em;
	border:solid 1px silver;
	background: white;
	cursor: default;
}
.lui-button .icon {
	width:1.2em;
	padding:.4em 0 .4em .4em;
}
.lui-button .text {
	display: block;
	padding:.4em .6em;
}
.lui-button[dress='blue'] {
	color:#1488F4;
	border-color: #7DC0FF;
}
.lui-button[dress='blue']:hover {
	border-color: #1488F4;
}
.lui-button[dress='blue']:active {
	color:white;
	background-color: #1488F4;
}
.lui-button[dress='silver'] {
	color:#808080;
	border-color: #BEBEBE;
}
.lui-button[dress='silver']:hover {
	border-color: #707070;
}
.lui-button[dress='silver']:active {
	color:#A0A0A0;
	background:#eee;
	border-color:#eee;
}
.lui-button[disabled] {
	color:silver;
	border-color:silver;
}

/* Hộp văn bản */
.lui-textbox, .lui-textarea {
	border-radius: .3em;
	border:solid 1px silver;
	padding:.4em .6em;
	box-sizing: border-box;
}

/* Hộp kiểm */
.lui-check {
	display: inline-flex;
	align-items: center;
}
.lui-check .check {
	width:1.2em;
	height:1.2em;
	margin-right: .8em;
	border-radius: .3em;
	border: solid 1px silver;
	background: white;
	position: relative;
}
.lui-check .check:hover {
	border-color: silver;
}
.lui-check .check[checked] {
	border-color: silver;
}
.lui-check .check[checked]::after {
	content:"";
	position: absolute;
	top: 0.13em;
	left: 0.13em;
	width:.94em;
	height:.94em;
	border-radius: .3em;
	background: silver;
}
.lui-check .check[radio] {
	border-radius: 50%;
}
.lui-check .check[checked][radio]::after {
	top: 0.18em;
	left: 0.18em;
	width:.84em;
	height:.84em;
	border-radius: 50%;
}
.lui-check .check[disabled], .lui-check .check[disabled]:hover {
	border-color:silver;
}
.lui-check .check[disabled]::after {
	background: silver;
}


/* Danh sách */
.lui-list .item {
	display: flex;
	cursor: default;
}
.lui-list .item:hover {
	background: silver;
}
.lui-list .item[selected] {
	background: silver;
}
.lui-list .item .icon {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: .6em;
}
.lui-list .item .icon[align="top"] {
	align-items: flex-start;
}
.lui-list .item .icon[align="bottom"] {
	align-items: flex-end;
}
.lui-list .item .icon img {
	width:1.2em;
}
.lui-list .item .content {
	flex: 1;
}
.lui-list .item .content .text {
	padding:.4em 0;
}
.lui-list .item .content .label {
	margin-top: .3em;
}


/* Giao diện danh sách có phân nhóm cho phép chọn */
.lui-group-list {
	
}
.lui-group-list .title {
	padding: .4em .6em;
	font-weight: bold;
}
.lui-group-list .title .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .3em;
	margin-right: .6em;
}
.lui-group-list .title .icon img {
	width:1.6em;
}
.lui-group-list .title .text {
	font-weight: bold;
}
.lui-group-list .items .item {
	padding: .4em .6em;
}
.lui-group-list .items .item .content {
	display: inline-flex;
	align-items: center;
}
.lui-group-list .items .item .content input {
	width:1.4em;
	height:1.4em;
}
.lui-group-list .items .item .content .text {
	margin-left: .6em;
}


/* Cây phân nhánh */
.lui-tree .leaf .lui-tree {
	display: none;
}
.lui-tree .leaf[open] > .item .appender .arrow {
	transform: rotate(90deg) !important;
}
.lui-tree .leaf[open] > .lui-tree {
	display: block;
}
.lui-tree .leaf .item {
	display: flex;
	cursor: default;
}
.lui-tree .leaf .item:hover {
	background:silver;
}
.lui-tree .leaf .item[selected] {
	background:silver;
}
.lui-tree .leaf .item .appender {
	width:1.6em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lui-tree .leaf .item .appender .arrow {
	width: 0; 
	height: 0;
	border-top: .36em solid transparent;
	border-bottom: .36em solid transparent;
	border-left: .36em solid;
}
/*.lui-tree .leaf .item .lui-check {
	width: inherit;
}
.lui-tree .leaf .item .lui-check .check {
	margin-right: unset;
}
.lui-tree .lui-check {
	width:2.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: .8em;
}*/
.lui-tree .leaf .item .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: .6em;
}
.lui-tree .leaf .item .icon[align="top"] {
	align-items: flex-start;
}
.lui-tree .leaf .item .icon[align="bottom"] {
	align-items: flex-end;
}
.lui-tree .leaf .item .content {
	flex: 1;
}
.lui-tree .leaf .item .actions {
	display: flex;
	align-items: center;
}
.lui-tree .leaf .item .content {
	padding:.6em 0;
	display: block;
	flex: 1;
}
.lui-tree .leaf .item .notify-box {
	padding: 0 .4em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lui-tree .leaf .item .notify {
	width:1.8em;
	height:1.8em;
	font-size: .9em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background:#fff000;
}
.lui-tree .leaf .item .appender {
	width:2em;
}
.lui-tree .leaf .item .desc {
	color:#777;
	font-size: .9em;
}
.lui-tree .leaf .item[highlight] .label {
	color:#1378f5;
}
.lui-tree .leaf .item[highlight] .desc {
	color:#6FAFFF;
}
.lui-tree .leaf .item[none-select] .lui-check .check .mark, .lui-tree .leaf .item[none-select] .lui-check .check .mark::after {
	background: unset;
	border:unset;
}
.lui-tree .leaf .item[poor] .label {
	color:#A0A0A0;
}
.lui-tree .leaf .item[poor] .desc {
	color:silver;
}

/* Giao diện chọn khoảng ngày */
.lui-date .activities {
	display: flex;
	align-items: center;
	margin-bottom: .6em;
}

.lui-date .period-box {
	position: relative;
	margin-right: .6em;
}
.lui-date .period-box .period-selection {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
	align-items: center;
	flex-wrap:nowrap;
	border-radius: .3em;
	overflow: hidden;
	white-space: nowrap;
	background:white;
	z-index: 100; /* Nằm trên cả các z-index trong addon */
}
.lui-date .period-box .period-selection .item {
	padding: .6em .8em;
	cursor: default;
}
.lui-date .period-box .period {
	color: inherit;
	background:unset;
	border:solid 1px #e0e0e0;
}
.lui-date .period-box .period:hover {
	background:silver;
}
.lui-date .date-box {
	flex:1;
	display: flex;
	align-items: center;
	border-radius: .3em;
	border:solid 1px #e0e0e0;
	overflow: hidden;
}
.lui-date .date-box .date {
	flex:1;
	height:2em;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
}
.lui-date .date-box .date:hover {
	background:silver;
}
.lui-date .date-box .date[focus] {
	color:white;
	background:silver !important;
}
.lui-date .date-box .calendar {
	display: flex;
	align-items: center;
	justify-content: center;
	width:2em;
	height:2em;
}
.lui-date .date-box .calendar:hover {
	background:silver;
}
.lui-date .date-box .calendar .icon {
	width:1.4em;
	height:1.4em;
}
.lui-date .linear-list {
	display: flex;
	flex-wrap: wrap;
}
.lui-date .linear-list .item {
	width:14.28%;
	border-radius: .3em;
	padding: .6em 0;
	text-align: center;
	box-sizing: border-box;
	cursor: default;
}
.lui-date .linear-list .item:hover {
	background:silver;
}
.lui-date .linear-list .item[focus] {
	background:silver;
}
.lui-date .periods {
	display:none;
}
.lui-date .periods .sepa {
	margin:.6em 1em;
	height:1px;
	border-top:solid 1px #f1f1f1;
}
.lui-date .periods .year-box {
	max-width:100%;
	overflow: auto;
}
.lui-date .periods .year-box .year-list {
	flex-wrap: nowrap;
	margin-bottom: .6em;
}
.lui-date .periods .year-box .year-list .item {
	width: auto;
	padding:.6em .8em;
}
.lui-date .periods .year-box::-webkit-scrollbar {
	width: .45em;
	height: .45em;
}
.lui-date .periods .year-box::-webkit-scrollbar-track {
	background: silver;
}
.lui-date .periods .year-box::-webkit-scrollbar-thumb {
	background: #1378f5;
	border-radius: 1em;
	cursor: default;
}
.lui-date .period-selection .item:hover {
	background: silver;
}

/* Giao diện bong bóng danh sách */
.lui-droplist {
	position: relative;
}
.lui-droplist .label-box {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	cursor: default;
}
.lui-droplist .label-box .actions {
	display: flex;
	align-items: center;
}
.lui-droplist .label-box .actions .arrow {
	margin: 0 .6em;
	border-top: .36em solid;
	border-right: .36em solid transparent;
	border-left: .36em solid transparent;
}
.lui-droplist .label-box[open] .actions .arrow {
	transform: rotate(180deg) !important;
}
.lui-droplist .search-box input {
	width:100%;
}


/* Giao diện hộp chọn ngày */
.lui-dropdate {
	position: relative;
}
.lui-dropdate .textbox {
    border-radius: 0.3em;
    border: solid 1px #e0e0e0;
    border-bottom: solid 3px #1488f4;
    padding: 0.4em 0.6em;
    cursor: default;
}
.lui-dropdate .dropbox {
    display: none;
	position: absolute;
    top: 100%;
    width: 20em;
    padding: .6em;
	border-radius: .3em;
	background: white;
	z-index: 100; /* Nằm trên cả các z-index trong addon */
}
.lui-dropdate .dropbox .actions {
	border-top: solid 1px #f1f1f1;
	padding-top: .6em;
	text-align: right;
}


/* Giao diện cây phân nhánh thả */
.lui-droptree {
	position: relative;
	width: 12em; 
}
.lui-droptree .label-box {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	cursor: default;
}
.lui-droptree .label-box .label {
	padding:.4em .6em;
}
.lui-droptree .label-box .actions {
	display: flex;
	align-items: center;
}
.lui-droptree .label-box .actions .arrow {
	margin: 0 .6em;
	border-top: .36em solid;
	border-right: .36em solid transparent;
	border-left: .36em solid transparent;
}
.lui-droptree .label-box[open] .actions .arrow {
	transform: rotate(180deg) !important;
}

/* Giao diện bảng */
.lui-table table {
	width:100%;
}
.lui-table tr td img {
	vertical-align:middle;
}
.lui-table .cell-head {
	display: inline-flex;
	align-items: center;
}
.lui-table .cell-head .col-title {
	flex: 1;
	display: flex;
	align-items: center;
}
.lui-table .cell-head .col-title .icon {
	width:1.2em;
	margin-right: .6em;
}
.lui-table .cell-head .sorter {
	margin-left: .3em;
	position: relative;
}
.lui-table .cell-head .sorter .sym {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width:1.6em;
	height:1.6em;
	border-radius: .3em;
}
.lui-table .cell-head .sorter .lui-popup {
	white-space: nowrap;
	width:unset;
	overflow: hidden;
}
.lui-table .cell-head .sorter .lui-popup .sort {
	padding:.4em 1em;
	cursor: default;
}
.lui-table .cell-head .sorter .lui-popup .sort:hover {
	background:silver;
}
.lui-table .cell-hit {
	cursor: pointer;
}
.lui-table .cell-hit:hover {
	background: silver;
}
.lui-table .cell-selection {
	text-align: center;
}
.lui-table .cell-selection .lui-check .check {
	margin-right: 0;
}


/* Giao diện tải file */
.lui-fileupload {
	display: inline-flex;
	align-items: flex-start;
	flex-wrap: wrap;
	padding-left: .8em;
	padding-bottom: .8em;
}
.lui-fileupload[dropover] {
	border-radius: .3em;
	-moz-box-shadow:    inset 0 0 6px black;
	-webkit-box-shadow: inset 0 0 6px black;
	box-shadow:         inset 0 0 6px black;
}
.lui-fileupload .item {
	margin-top: .8em;
	margin-right: .8em;
	display: flex;
	align-items: center;
	border-radius: .3em;
	border:solid 1px silver;
	height: 3.6em;
	overflow: hidden;
}
.lui-fileupload .item[missing] {
	border-color:red;
}
.lui-fileupload .item .image {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lui-fileupload .item .image img {
	height: 100%;
}
.lui-fileupload .item .title {
	padding: .6em .8em;
}
.lui-fileupload .item .title .head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.lui-fileupload .item .title .head .text {
	margin-right: .6em;
}
.lui-fileupload .item .title .head .ext {
	padding:.2em .4em;
	border-radius: .3em;
	background: silver;
}
.lui-fileupload .item .title .info {
	margin-top: .3em;
	font-size: .9em;
	color:#555;
}
.lui-fileupload .item .remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width:1.4em;
	height:1.4em;
	border-radius: 50%;
	background: silver;
	margin-right: .6em;
}
.lui-fileupload .item .remove .icon {
	font-weight: bold;
}
.lui-fileupload .add {
	margin-top: .8em;
	margin-right: .8em;
}
.lui-fileupload .add .addbox {
	display: block;
	width: 3em;
	height: 3em;
	border-radius: 50%;
	cursor: pointer;

	background:
		linear-gradient(silver, silver),
		linear-gradient(silver, silver),
		white;
	background-position:center;
	background-size: 50% 5px, 5px 50%;
	background-repeat:no-repeat;
}
.lui-fileupload .add .addbox:hover {
	background:
		linear-gradient(silver, silver),
		linear-gradient(silver, silver),
		#eee;
	background-position:center;
	background-size: 50% 5px, 5px 50%;
	background-repeat:no-repeat;
}
.lui-fileupload .add .addbox:active {
	background:
		linear-gradient(silver, silver),
		linear-gradient(silver, silver),
		#eee;
	background-position:center;
	background-size: 50% 5px, 5px 50%;
	background-repeat:no-repeat;
}
.lui-fileupload .add .addbox input[type='file'] {
	display: none;
}
.lui-fileupload .lui-circleload {
	display: none;
}
.lui-fileupload .lui-circleload .circle {
	cursor: default;
}
.lui-fileupload .progress {
	display: none;
	position: absolute;
	top:100%;
	left:0;
	width: 20em;
	margin-top: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
	background: white;
	z-index: 100; /* Nằm trên cả các z-index trong addon */
}
.lui-fileupload .progress .entry-header {
	font-weight: bold;
	padding:.3em 0;
	border-bottom: solid 1px #e0e0e0;
}
.lui-fileupload .progress .entry-body {
	max-height: 18em;
	overflow: auto;
	padding:.6em .6em 0 .6em;
	box-sizing: border-box;
}
.lui-fileupload .progress .task {
	display: flex;
	align-items: center;
	margin-bottom: .6em;
}
.lui-fileupload .progress .task progress {
	width: 100%;
}

/* Giao diện thực thể, có thể dùng trong rất nhiều giao diện có 3 thành phần đầu, thân và chân */
.lui-entity > .entity-head {
	display: flex;
}
.lui-entity > .entity-head .entity-title {
	flex: 1;
	padding:.4em .6em;
}


/* Giao diện sắp xếp */
.lui-sort .sorts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 1em;
	border-bottom: solid 1px #eee;
}
.lui-sort .sorts .text {
	padding: 1em;
}
.lui-sort .sorts .ss-actions {
	display: flex;
	justify-content: space-between;
}
.lui-sort .ss-actions .ss-icon {
	border-radius: .3em;
	padding:.4em .6em;
	cursor: default;
}
.lui-sort .ss-actions .ss-icon[disabled] {
	opacity: .5;
}
.lui-sort .ss-actions .ss-icon img {
	width:16px;
}
.lui-sort .item {
	display: flex;
	align-items: center;
	padding:0 1em;
	border-bottom: solid 1px #eee;
}
.lui-sort .item .text {
	padding:1em 0;
}
.lui-sort .item .check {
	border-radius: 50%;
	width:2.4em;
	height:2.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right:1em;
}
.lui-sort .item .check .mark {
	width:1em;
	height:1em;
	border-radius: 50%;
	border:solid 1px silver;
	position: relative;
}
.lui-sort .item[selected] {
	background: silver;
}
.lui-sort .item[selected] .check .mark {
	background:white;
	border-color: white;
}
.lui-sort .item[selected] .check .mark::after {
	position: absolute;
	top:.1em;
	left:.1em;
	content:"";
	width:.8em;
	height:.8em;
	border-radius: 50%;
	background: silver;
}
.lui-sort .jump-panel {
	overflow: auto;
	padding:1em;
	width:22em;
}
.lui-sort .jumpers {
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.lui-sort .jumpers .jumper {
	border-radius: .3em;
	background: silver;
	padding:.4em 1em;
	cursor: default;
	margin-right: 1em;
}


/* Giao diện hộp thoại */
.lui-dialog {
	position: fixed;
	left:0;
	top:0;
	display: none;
	align-items: center;
	justify-content: center;
	width:100%;
	height:100%;
	z-index: 100; /* Nằm trên cả các z-index trong addon */
}
.lui-dialog > .lui-entity {
	width:32em;
	max-width: 100%;
	max-height: 100%;
	margin: 1em;
	border-radius: .3em;
	background: white;
}
.lui-dialog > .lui-entity[hoz-size="widest"] {
	width:100em;
}
.lui-dialog > .lui-entity[hoz-size="extra-wide"] {
	width:80em;
}
.lui-dialog > .lui-entity[hoz-size="wide"] {
	width:60em;
}
.lui-dialog > .lui-entity[hoz-size="large"] {
	width:50em;
}
.lui-dialog > .lui-entity[hoz-size="big"] {
	width:40em;
}
.lui-dialog > .lui-entity[hoz-size="medium"] {
	width:30em;
}
.lui-dialog > .lui-entity[hoz-size="small"] {
	width:20em;
}
.lui-dialog > .lui-entity[hoz-size="tiny"] {
	width:10em;
}
.lui-dialog > .lui-entity > .entity-head .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding:.3em 0 .3em .6em;
}
.lui-dialog > .lui-entity > .entity-head .icon img {
	width:1.2em;
}
.lui-dialog > .lui-entity > .entity-head .entity-title {
	display: flex;
	align-items: center;
	font-size:1.1em;
	font-weight: bold;
}
.lui-dialog > .lui-entity > .entity-head .actions {
	display: flex;
	align-items: flex-start;
	height: 100%;
	margin-right: .4em;
}
.lui-dialog > .lui-entity > .entity-head .actions .close {
	width:2.4em;
	height:1.4em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-bottom-left-radius: .3em;
	border-bottom-right-radius: .3em;
	background: silver;
	font-weight: bold;
	font-size: 1.1em;
	cursor: default;
}
.lui-dialog > .lui-entity > .entity-head .actions .close:hover {
	background: silver;
}
.lui-dialog > .lui-entity > .entity-head .actions .close:active {
	background: silver;
}
.lui-dialog > .lui-entity .entity-body {
	overflow: auto;
}
.lui-dialog > .lui-entity .entity-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: .8em 0;
	background: #FAFAFA;
	border-bottom-left-radius: .3em;
	border-bottom-right-radius: .3em;
}
.lui-dialog > .lui-entity .entity-foot .lui-button {
	margin-right: .8em;
	min-width: 5em;
	font-weight: bold
}


/** Nhóm đổ bóng mờ **/
.lui-popup, .lui-dialog > .lui-entity, .lui-date .period-box .period-selection, .lui-dropdate .dropbox {
	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.65);
	-moz-box-shadow:0px 0px 4px rgba(0,0,0,.65);
    box-shadow: 0px 0px 4px rgba(0,0,0,.65);
}


/** GIAO DIỆN THÍCH ỨNG **/
@media screen and (max-height: 1280px) {
	.lui-dialog > .lui-entity .entity-body {
		max-height: 42em;
	}
}
@media screen and (max-height: 980px) {
	.lui-dialog > .lui-entity .entity-body {
		max-height: 36em;
	}
}
@media screen and (max-height: 720px) {
	.lui-dialog > .lui-entity .entity-body {
		max-height: 30em;
	}
}
@media screen and (max-height: 640px) {
	.lui-dialog > .lui-entity .entity-body {
		max-height: 24em;
	}
}
@media screen and (max-height: 480px) {
	.lui-dialog > .lui-entity .entity-body {
		max-height: 18em;
	}
}
@media screen and (max-height: 360px) {
	.lui-dialog > .lui-entity .entity-body {
		max-height: 14em;
	}
}