:root{--color-1: #1B84FF; --color-2: #F8285A; --color-3: #F6C000; --color-4: #14a746; --color-5: #2f2b3d7a; --color-6: #dfdfdf; --color-7: #00bdb6; --text-1: #444050; --shadow-1: 0 2px 5px 0 rgba(0, 0, 0, 0.05); --shadow-2: 0 -2px 5px 0 rgba(0, 0, 0, 0.05); --shadow-3: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075); --bg-1: #f9f9f9; --bg-2: #e1f8ff; --bg-3: #ffeded; --bg-4: #dfffea;}
body{font-family: system-ui, sans-serif; margin: 0;}
a{color: var(--text-1); text-decoration: none; cursor: pointer;}
img{width: 100%;}
div{box-sizing: border-box;}
.hide-block, .flex-container.hide-block{display: none;}
.hide-block.active, .input-block.hide-block.active, .hide-768-block.active{display: inherit;}
.hidden-block{visibility: hidden;}
.hidden-block.active{visibility: visible;}
.show-768{display: none;}
.show-580{display: none;}
.container{margin-left: 230px;}
section{background-color: #fff; padding: 10px; border-radius: 5px; border: 1px solid var(--color-6); position: relative; box-sizing: border-box;}
button{border: 1px solid;}
button, .is-button{cursor: pointer;}
.col-xs{width: 38px;}
.col-100px{width: 100px;}
.col-10p{width: 10%;}
.col-medium{width: 18%;}
.col-large{width: 38%;}
.flex-container{display: flex; gap: 20px; align-items: center;}
.flex-container.flex-gap-0{gap: 0;}
.flex-container.flex-gap-5{gap: 5px;}
.flex-container.flex-gap-10{gap: 10px;}
.flex-container.flex-wrap{flex-wrap: wrap;}
.flex-container.flex-direction-column{flex-direction: column;}
.flex-container.align-items-center{align-items: center;}
.flex-container.align-items-start{align-items: flex-start;}
.flex-container.align-items-end{align-items: flex-end;}
.flex-container.align-items-stretch{align-items: stretch;}
.flex-container.justify-content-center{justify-content: center;}
.flex-container.justify-content-between{justify-content: space-between;}
.flex-container.justify-content-end{justify-content: flex-end;}
.note-input{width: 100%; box-sizing: border-box; height: 80px; border-radius: 5px; padding: 10px; outline: none;}
.current-value-wrap, .current-value-wrap.input-block{display: flex; justify-content: space-between; align-items: center;}
.current-value-wrap.input-block{border: none; background-color: var(--bg-3);}
.new-value-input.active{display: block; margin-bottom: 15px;}
.new-value-input{margin-top: 5px;}
.align-left-block{text-align: left;}
.align-right-block{text-align: right;}
.align-center-block{text-align: center;}
/* Text */
.text-inline-1{display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.inline-text{white-space: nowrap;}
.block-text{white-space: normal;}
.text-1st{font-weight: 700; color: var(--color-2);}
.text-2nd{font-weight: 700; color: var(--color-1);}
.text-3rd{font-weight: 700; color: var(--color-4);}
.text-weight-700{font-weight: 700;}
.text-weight-500{font-weight: 500;}
.block-title{font-size: 20px; font-weight: 500;}
.text-s-36{font-size: 36px;}
.text-s-20{font-size: 20px;}
.text-s-18{font-size: 18px;}
.text-s-16{font-size: 16px;}
.text-s-15{font-size: 15px;}
.text-s-13, .input-block.text-s-13{font-size: 13px;}
.text-s-12{font-size: 12px;}
.text-s-11{font-size: 11px;}
.break-word-block{word-break: break-word; white-space: normal;}
/* Spacing */
.mg-a{margin: auto;}
.mgtb-5{margin: 5px auto;}
.mgtb-10{margin: 10px auto;}
.mgt-5{margin-top: 5px}
.mgt-10{margin-top: 10px;}
.mgt-20{margin-top: 20px;}
.mgb-5{margin-bottom: 5px;}
.mgb-10{margin-bottom: 10px;}
.mgb-20{margin-bottom: 20px;}
.pd-5{padding: 5px;}
.pd-8{padding: 8px;}
.pd-15{padding: 15px;}
.pdt-10{padding-top: 10px;}
.pdtb-5{padding: 5px 0;}
.pdtb-10{padding: 10px 0;}
.pdlr-15{padding: 0 15px;}
.pdtb-12{padding-top: 12px; padding-bottom: 12px;}
.pdb-5{padding-bottom: 5px;}
.pdb-12{padding-bottom: 12px;}
.pd-3-10{padding: 3px 10px;}
.pd-8-10{padding: 8px 10px;}
.pd-10-12{padding: 10px 12px;}
.pd-12-15{padding: 12px 15px;}
.pd-20-10{padding: 20px 10px;}
/* Block width */
.width-5p{width: 5%;}
.width-10p{width: 10%;}
.width-12p{width: 12%;}
.width-15p{width: 15%;}
.width-20p{width: 20%;}
.width-25p{width: 25%;}
.width-30p{width: 30%;}
.width-33p{width: 33.333333%;}
.width-35p{width: 35%;}
.width-40p{width: 40%;}
.width-45p{width: 45%;}
.width-50p{width: 50%;}
.width-55p{width: 55%;}
.width-60p{width: 60%;}
.width-66p{width: 66.666667%;}
.width-70p{width: 70%;}
.width-75p{width: 75%;}
.width-80p{width: 80%;}
.width-85p{width: 85%;}
.width-90p{width: 90%;}
.width-100p{width: 100%;}
.width-20p-wrap{width: calc(20% - 20px); box-sizing: border-box;}
.width-25p-wrap{width: calc(25% - 20px); box-sizing: border-box;}
.width-33p-wrap{width: calc(33.3333333% - 15px); box-sizing: border-box;}
.width-50p-st10{width: calc(50% - 10px);}
.width-50p-st35{width: calc(50% - 35px);}
.min-width-200{min-width: 200px;}
.min-width-300{min-width: 300px;}
/* Block height */
.height-38{height: 38px;}
.max-height-250{max-height: 250px;}
.max-height-300{max-height: 300px;}
.max-height-500{max-height: 500px;}
.min-height-250{min-height: 250px;}
.min-height-180{min-height: 180px;}
/* Button */
.btn-1st, .btn-2nd, .t-btn{padding: 10px 12px; font-weight: 700; border: none;}
.btn-1st{background-color: var(--color-2); color: #fff;}
.btn-2nd{background-color: var(--color-1); color: #fff;}
.t-btn{background-color: var(--color-3); color: var(--text-1);}
/* Block */
.block-1st{background-color: var(--bg-3); color: var(--color-2);}
.block-2nd{background-color: var(--bg-2); color: var(--color-1);}
.block-3rd{background-color: var(--bg-4); color: var(--color-4)}
.block-4th, .block-4th.input-block{background-color: var(--bg-1); color: var(--color-2); border: 1px solid var(--color-1);} /* Is focus block with border */
.block-5th, .block-5th.input-block{background-color: var(--bg-2); color: var(--color-1); border: 1px solid var(--color-2);}
.block-6th, .block-6th.input-block{background-color: var(--bg-4); border: 1px solid var(--color-3);}
.block-6th.selected{background-color: var(--bg-3); color: var(--color-2);}
.block-7th{background-color: var(--bg-1); border: 1px solid var(--color-5);}
.block-8th{background-color: var(--color-3); border: 1px solid var(--color-6); color: var(--text-1);}
.selected-block.selected{background-color: var(--bg-2); color: var(--text-1);}
.note-title{margin-top: 10px;}
.select-block.active{padding: 5px; background-color: var(--color-1); color: #ffffff; font-weight: 700; border-radius: 5px;}
.select-block option{background-color: #ffffff; color: initial;}
.row-block{margin: 10px 0;}
.inside-section{padding: 10px;}
.position-relative{position: relative;}
.overflow-y-scroll{overflow-y: scroll;}
.overflow-x-scroll{overflow-x: scroll;}
/* Table */

/* Border style */
.border-r-5{border-radius: 5px;}
.border-1, .input-block.border-1{border: 1px solid var(--text-1);}
.border-t-1{border-top: 1px solid var(--color-5);}
.border-b1-1{border-bottom: 1px solid var(--text-1);}
.border-b2-1{border-bottom: 1px solid var(--color-6);}
.border-b3-1{border-bottom: 1px solid var(--color-5);}
.border-a1-1{border: 1px solid var(--color-6);}
.border-a2-1{border: 1px solid var(--text-1);}
/* Status style */
.cls-pending{background-color: var(--color-1); color: #fff;}
.cls-processed{background-color: var(--color-2); color: #fff;}
.cls-failed, .cls-return, .cls-cancel, .cls-returned{background-color: var(--text-1); color: #fff;}
.cls-returning{background-color: var(--color-3); color: var(--text-1);}
.cls-success, .cls-paid{background-color: var(--color-4); color: #fff;}
.cls-debt{background-color: var(--color-7); color: #fff;}
/* start::Single select */
.single-select-values{display: none; position: absolute; background-color: #fff; padding: 5px 10px; border: 1px solid var(--color-6); z-index: 10; box-sizing: border-box; width: 100%; margin-top: 5px; box-shadow: var(--shadow-1);}
.single-all-items{min-height: 80px; max-height: 350px; overflow-y: scroll;}
.single-search-input{height: 35px; width: 100%; box-sizing: border-box; border-radius: 5px; margin: 10px 0; outline: none; padding: 0 10px;}
.single-item{padding: 10px 0; cursor: pointer;}
.single-select{position: relative;}
.single-select.single-select-full-width{position: inherit;}
.single-select-full-width .single-select-values{left: 0;}
.flex-container>.single-item{padding: 8px; border: 1px solid var(--color-5); border-radius: 5px; text-align: center; font-size: 15px;}
.flex-container.single-all-items{padding-bottom: 10px; max-height: 260px;}
/* end::Single select */

/* start::Modal popup */
.modal-popup-block{position: fixed; top: 50%; left: 50%; background-color: #fff; padding: 20px; border-radius: 10px; transform: scale(0); visibility: hidden; transition: transform 300ms ease, opacity 300ms ease; box-shadow: 0 4px 12px 6px rgba(0, 0, 0, 0.2); z-index: 99;}
.modal-popup-block.active{visibility: visible; opacity: 1; transform: scale(1) translate(-50%, -50%);}
#modal-blur{position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #ffffff5e; backdrop-filter: blur(2px); z-index: 90;}
/* #modal-blur.active{display: block;} */
.modal-title{font-size: 20px; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--color-5);}
.modal-row{display: flex ; align-items: center; height: 36px; padding: 6px 0; border-bottom: 1px solid #edeced;}
.modal-row:last-child{border-bottom: none;}
.modal-left{width: 38%; font-weight: 600;}
.modal-right{font-weight: 700; color: #636363;}
.modal-popup-block.width-25p{width: 25%;}
.confirm-notice-content{font-size: 25px; text-align: center;}
.modal-confirm-btn-block{margin: 50px auto 10px;}
.accept-btn{background-color: var(--color-2); padding: 12px 15px; border-radius: 5px; font-weight: 700; color: #fff;}
.modal-page-number{padding: 3px 9px; border: 1px solid var(--color-6); margin: 3px; border-radius: 5px; font-size: 15px; color: #425387;}
.modal-pagination{margin-top: 20px;}
.modal-page-number.active{background-color: var(--color-6);}
.modal-wrap{position: relative;}
.copy-notice-block{position: fixed; top: 50%; left: 50%; background-color: #000000b0; padding: 10px 15px; border-radius: 5px; color: #fff; z-index: 99;}
/* end::Modal popup */

/* start::Product modal popup */
.product-item-block.width-20p-wrap{width: calc(20% - 10px); display: flex; flex-direction: column; justify-content: space-between; position: relative;}
.products-popup-btn{width: 100%; box-sizing: border-box; height: 38px; outline: none; border-radius: 5px; border: 1px solid var(--color-2); font-size: 16px; padding: 3px 10px; background-color: var(--bg-3);}
.product-item-block{text-align: center; border: 1px solid var(--color-6); border-radius: 5px; margin: 5px;}
.product-list-wrap.flex-container{gap: 0;}
.product-item-name{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 700;}
.product-item-name::after {content: attr(title); position: absolute; left: 0; z-index: 999; background: #333; color: #fff; padding: 5px 10px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity 0.2s; border-radius: 3px; margin-top: 5px; top: 0; width: 100%; box-sizing: border-box;}
.modal-product-item:hover .product-item-name::after {opacity: 0.8;}
.product-item-sku, .product-item-cost-price, .product-item-sale-price{font-size: 12px;}
.modal-product-info{padding: 3px 8px; margin-bottom: 5px;}
.product-modal-search{margin: 10px auto; padding: 10px 15px; background-color: var(--bg-1); border-radius: 5px;}
.no-products-message{width: 100%; text-align: center;}
.product-item-quantity input{height: 30px; font-size: 12px; text-align: center;}
.set-product-quantity{font-size: 13px; padding: 6px 12px; background-color: var(--bg-2); border-radius: 5px; margin: 5px 0 0; border: 1px solid var(--color-6);}
.product-modal-list{padding: 15px; height: 650px;}
.modal-cancel-btn{background-color: var(--color-1); color: #fff; font-weight: 700; padding: 10px; border-radius: 5px;}
/* end::Product modal popup */

/* start::Customer modal popup */
#search-customer-items{position: absolute; z-index: 100; background-color: #ffffff; box-sizing: border-box; height: 550px;}
#search-customer-result{height: 500px; overflow-y: scroll;}
/* end::Customer modal popup */

/* start::List */
.list-active{color: var(--color-1); font-weight: 500;}
.filter-element{display: flex; align-items: center; justify-content: flex-start; gap: 20px;}
.filter-search-wrap{display: flex; border: 1px solid var(--color-6); border-radius: 5px;}
.filter-item{min-width: calc(50% / 4 - 15px);}
.filter-item.filter-search{width: 25%}
.filter-item select, .filter-item input{width: 100%; height: 38px; border-radius: 5px; box-sizing: border-box; padding: 0 5px; border: 1px solid var(--color-6); outline: none;}
.filter-search-wrap select{width: auto; border: none; margin-left: 5px;}
.filter-search-wrap input{border: none; border-left: 1px solid var(--color-6); padding-left: 8px; margin-left: 8px; border-radius: 0 5px 5px 0; text-align: left;}
#reset-filter{display: none; background-color: var(--color-4); color: #fff; border: none; padding: 5px 8px; font-weight: 700; border-radius: 5px; font-size: 18px;}
.advanced-filter{display: flex; align-items: center;}
.filter-select-btn::after{content: '\e905'; font-weight: 700; font-family: 'icomoon';}
#filter-submit{font-size: 16px; height: 38px; border: none; background-color: var(--color-1); border-radius: 5px; color: #fff; font-weight: 700; padding: 0 15px;}
.list-block{margin: 10px auto 60px;}
.list-form-block{overflow-x: scroll}
.list-detail-table{width: 100%; border-collapse: collapse;}
thead{text-transform: uppercase; text-align: left; font-size: 16px;}
thead tr{height: 60px;}
tbody{text-align: left;}
.list-detail-row:nth-child(odd){background-color: var(--bg-1);}
.list-detail-row th{font-size: 13px;}
.list-detail-row th .list-title-col{white-space: normal;}
.action-btn{display: flex ; align-items: center; justify-content: center; gap: 3px; font-weight: 700; cursor: pointer;}
.action-btn.edit-btn{color: var(--color-1);}
.action-btn.view-btn{color: var(--color-2);}
.list-detail-table th{padding: 10px;}
.list-detail-table tr{ text-align: center;}
.list-detail-popup{position: relative;}
.list-detail-popup-value{display: none; position: absolute; background: #fff; border: 1px solid var(--color-3); padding: 10px; border-radius: 5px; white-space: normal; left: -90%; top: -28px; transform: scale(1) translate(-50%, -50%); z-index: 10;}
.list-detail-popup:hover .list-detail-popup-value{display: block; z-index: 10;}
.list-value-check.is-exist, .list-value-check.is-exist i{color: var(--color-4); font-weight: 700;}
.list-detail-popup i{font-size: 18px;}
.sort-wrap{display: flex ; justify-content: space-between; position: relative; padding: 0 5px;}
.filter-sort{gap: 10px; flex-wrap: wrap;}
.list-filter button{height: 38px; width: 100%; border-radius: 5px; border: none; cursor: pointer; display: flex ; align-items: center; justify-content: center;}
.sort-wrap button{width: auto;}
.sort-btn.sort-active{background-color: var(--color-6); color: var(--text-1);}
.sort-btn{padding: 10px 15px; border-radius: 5px; background-color: var(--bg-1); border: 1px solid var(--color-6); display: flex ; gap: 5px;}
.list-filter button.filter-btn, .list-filter .filter-btn{color: var(--text-1); background-color: #fff; border: 1px solid var(--color-6); position: relative;}
.filter-btn{text-align: left;}
.filter-btn::after{content: '\e905'; font-family: 'icomoon'; position: absolute; right: 5px;}
.filter-btn.single-select-btn{display: flex; justify-content: space-between; position: relative;}
.single-select-btn{width: 100%; height: 35px; border-radius: 5px;}
.single-select-btn.selected, .filter-btn.selected{background-color: #9dcaff; font-weight: 700;}
.single-select-btn.selected{color: var(--text-1);}
/* .list-filter button.filter-btn.selected{background-color: var(--bg-3)} */
.list-filter .filter-btn.selected{background-color: var(--bg-3)}
.filter-item.filter-date{width: 15%; position: relative;}
.date-input-wrap{display: none; flex-direction: column; gap: 5px; position: absolute; background-color: #fff; border: 1px solid #dfdfdf; left: 0; right: 0; padding: 15px; margin-top: 5px; border-radius: 5px; box-shadow: 0 2px 8px 10px rgba(0, 0, 0, 0.05); z-index: 1;}
.date-input{cursor: pointer; width: 100%; height: 30px; box-sizing: border-box;}
#filter-date-wrap label{display: flex ; align-items: center; justify-content: center; cursor: pointer;}
#filter-date-wrap label input{width: auto;}
#to-date-block{display: none;}
.list-detail-thumbnail img{width: 100%; border-radius: 10px;}
.list-detail-title{font-size: 18px;}
thead th{white-space: nowrap;}
tbody th{font-weight: 500;}
th .list-title-col{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 700;}
#list-page-size{width: auto; font-size: 13px; font-weight: 700; border: 1px solid; padding: 3px; height: 30px;}
.bulk-edit-block button{background: none;}
/* .list-detail-thumbnail img{width: 60%;} */
/* end::List */

/* start::Detail */
.detail-main-title{font-size: 22px; font-weight: 500;}
.detail-sub-title{font-size: 16px;}
.section-header{font-size: 20px; font-weight: 500; margin-bottom: 20px;}
.input-block{display: block; width: 100%; box-sizing: border-box; height: 38px; outline: none; border-radius: 5px; border: 1px solid var(--color-6); font-size: 16px; padding: 3px 10px;}
.input-block.hide-block{display: none;}
.input-block.flex-container{display: flex;}
.detail-section-block{margin-bottom: 10px; position: relative;}
.detail-section-block:last-child{margin-bottom: 0;}
.detail-section-block.align-center-block{margin: auto;}
.detail-label{display: block; margin-bottom: 5px; font-weight: 500;}
/* .detail-label.required::after{content: '*'; color: red; font-weight: 600; margin-left: 3px;} */
.required::after{content: '*'; color: red; font-weight: 600; margin-left: 3px;}
.detail-page-title{margin-bottom: 10px;}
/* #detail-submit-btn{padding: 8px 12px; background-color: var(--color-2); border-radius: 5px; color: #fff; font-weight: 500;} */
.detail-wrap{height: calc(100vh - 108px); margin-bottom: 50px;}
.section-wrap-column{display: flex; flex-direction: column; gap: 20px;}
.section-flex-wrap{margin: 20px auto;}
.form-error-item{display: none; margin-bottom: 10px;} /* Hide form error input notice */
/* .form-error-item:last-child{margin-bottom: 0;} */
.form-error-item.active{display: block;} /* Show form error input notice */
/* end::Detail */

/* start::Header */
.dashboard-header{display: flex; gap: 50px; align-items: center; justify-content: space-between; position: sticky; background-color: #fff; padding: 10px 20px; top: 0; z-index: 10; border-bottom: 1px solid var(--color-6);}
.header-assets{display: flex; align-items: center; gap: 12px;}
.header-asset-item{position: relative; font-size: 35px;}
.header-icon{margin: 0; width: 35px; height: 35px; border: 1px solid var(--color-1); border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.image-icon{width: 80%;}
.header-icon:after{content: ""; position: absolute; bottom: 0; right: 3px; width: 8px; height: 8px; border-radius: 100%; box-shadow: 0 0 0 2px #fff; background-color: #28c76f;}
.logout-btn{font-size: 35px; background-color: #fff; color: var(--text-1); border: none; cursor: pointer; display: flex;}
/* end::Header */

/* start::Footer */
.dashboard-footer{display: flex; justify-content: space-between; align-items: center; position: fixed; padding: 10px 60px; bottom: 0; left: 0; right: 0; background-color: #fff; z-index: 9; box-shadow: var(--shadow-2);}
.footer-btn{display: flex; gap: 20px;}
.submit-btn{padding: 8px 12px; background-color: var(--color-2); border-radius: 5px; color: #fff; font-weight: 500;}
.back-btn{padding: 8px 12px; background-color: var(--color-1); border-radius: 5px; color: #fff; font-weight: 500;}
.page-number{padding: 3px 9px; border: 1px solid var(--color-6); margin: 3px; border-radius: 5px; font-size: 15px; color: #425387;}
.current-page{background-color: #425387; color: #fff;}
.footer-notice-text{padding: 10px 0;}
/* end::Footer */

/* start::Sidebar */
.dashboard-title-block{display: flex; justify-content: center; align-items: center; padding: 10px 0; max-height: 50px; color: var(--color-1);}
#sidebar-menu{background-color: #ffffff; position: fixed; top: 0; bottom: 0; left: 0; width: 230px; z-index: 20; border-right: 1px solid var(--color-6); color: var(--text-1);}
.sidebar-wrap{box-sizing: border-box !important; max-height: 100%; overflow: hidden scroll; padding: 0 20px;}
.sidebar-wrap::-webkit-scrollbar{width: 5px; visibility: hidden;}
.sidebar-wrap::-webkit-scrollbar-thumb{border-radius: 10px; box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: var(--color-6);}
.sidebar-model{display: flex; justify-content: space-between; align-items: center; font-size: 18px; margin-bottom: 5px; padding: 8px;}
.sidebar-model::after{content: '\e905'; font-family: 'icomoon'; font-weight: 500; font-size: 16px;}
.sidebar-model.active{background-color: var(--bg-3);}
.sidebar-model-title{display: flex; align-items: center; gap: 8px; font-weight: 600;}
.sidebar-menu{list-style: none; padding: 0; margin-top: 0px;}
.sidebar-menu-link{padding: 8px 12px; display: flex; align-items: center;}
.sidebar-menu-link::before{content: '\e907'; font-family: 'icomoon'; font-size: 10px; margin-right: 10px; margin-top: 3px;}
.sidebar-menu-link.active{background-color: var(--color-1); border-radius: 5px; color: #fff;}
.sidebar-menu-link.active a{color: #fff;}
.sidebar-bottom{margin-bottom: 100px;}
.sidebar-menu-item{margin-bottom: 8px;}
.sidebar-menu-item:hover{background-color: var(--color-6); border-radius: 5px;}
/* end::Sidebar */

/* start::Main */
.main-wrap{padding: 20px; background-color: var(--bg-1);}
/* end::Main */

/* start::Inventory */
.filter-product-btn{max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;}
#calculate-btn{height: 32px; display: flex ; align-items: center; justify-content: center; padding: 3px 10px; background-color: var(--color-3); border: none; border-radius: 5px; font-weight: 600;}
.calculate-result{background-color: var(--bg-2); padding: 10px 15px; font-size: 20px; font-weight: 700; border-radius: 5px; margin: 8px auto 20px;}
.inventory-detail-wrap{margin-bottom: 200px;}
.transaction-btn{padding: 12px 15px; border-radius: 5px; color: #fff; font-weight: 700;}
#set-quantity-btn{background-color: var(--color-1);}
#set-price-btn{background-color: var(--color-2);}
.product-selected-value.input-block{display: flex; align-items: center;}
/* end::Inventory */

/* start::Contact */
  /* start::Contact detail */
#add-address-btn{border: 1px dashed var(--text-1); padding: 10px 30px; text-align: center; font-size: 18px; color: var(--color-1); font-weight: 500; cursor: pointer; margin-top: 20px;}
#add-address-btn span::before{content: '+'; margin-right: 10px;}
.contact-address{margin-bottom: 10px;}
.contact-address.hidden{display: none;}
#address-wrap{display: flex ; gap: 20px; justify-content: center; align-items: flex-start; margin: 30px auto 480px; flex-wrap: wrap;}
.remove-address-btn{border: none; background: none; position: absolute; top: 10px; right: 10px; font-size: 18px; cursor: pointer;}
.confirm-same-contact{margin-bottom: 10px;}
.note-input{width: 100%; box-sizing: border-box; height: 80px; border-radius: 5px; padding: 10px;}
.address-section{width: calc(33.333333% - 80px);}
  /* end::Contact detail */

  /* start::Contact list */
.filter-province-btn{background-color: #fff; border: 1px solid var(--color-6); display: flex ; align-items: center; font-size: 16px; min-width: 180px; justify-content: space-between; padding: 0 10px; height: 38px; border-radius: 5px; min-width: 220px;}
.filter-province-btn::after{content: '\e905'; font-family: 'icomoon'; font-weight: 700; font-size: 16px;}
.address-items-wrap{display: flex; flex-wrap: wrap;}
.address-item{width: 100%; padding: 10px 12px; margin: 5px 15px 5px 0; background-color: var(--bg-2); border-radius: 5px; border: 1px solid var(--color-1);}
  /* end::Contact list */
/* end:Contact */

/* start::Finance */
  /* start::Wallet list */
.modal-provider.modal-right{color: var(--color-1);}
.modal-holder.modal-right{color: var(--color-2);}
.modal-number.modal-right{color: var(--color-3);}
.list-summary-block{margin-bottom: 20px;}
  /* end::Wallet list */
  /* start::Summary */
.summary-list-title{margin-bottom: 10px;}
.summary-list-error{height: calc(100vh - 190px); display: flex; justify-content: center; padding-top: 100px; box-sizing: border-box;}
.summary-list-error-title{font-size: 25px;}
.list-year-title{font-size: 20px; text-align: center;}
.n-block{background-color: var(--bg-1); border: 1px solid var(--color-6);}
/* .year-summary-value .width-33p{border-radius: 5px; padding: 15px;} */
.list-month-item.selected{border: 5px solid var(--color-1);}
#report-year{padding: 12px 15px; font-size: 20px; border-radius: 5px;}
  /* end::Summary */
/* end::Finance */

/* start::Shop */
.thumbnail-img{width: 60%; margin: auto; display: flex; border-radius: 10px; box-shadow: var(--shadow-3);}
.thumbnail-img.width-80p{width: 80%;}
.thumbnail-img img{width: 100%; border-radius: 10px;}
.thumbnail-input-wrap{text-align: center;}
.thumbnail-notice{width: 50%; display: inline-block; font-weight: 600; font-size: 13px; margin-top: 10px;}
/* end::Shop */

/* start::Sale model */
/* #customer-info-block{padding: 8px 10px; font-size: 18px; font-weight: 500;} */
.sale-product-list .product-item-cost-price, .inventory-product-list .product-item-sale-price{display: none;}
.item-input{border: 1px solid var(--color-5); height: 30px; padding: 0 10px; box-sizing: border-box;}
.order-items-header-block{font-weight: 700; color: var(--color-1); padding: 8px 0px 10px;}
.order-item-subtotal{font-size: 13px;}
.total-block{font-size: 15px;}
.sale-detail-wrap{margin-bottom: 50px;}
.product-modal-block{position: sticky; top: 75px; z-index: 9;}
/* .modal-order-items .order-item{width: calc(50% - 10px);} */
#customer-modal-popup{top: 45%;}
#customer-modal-popup #search-customer-items{height: 350px;}
#customer-modal-popup #search-customer-result{height: 300px;}
/* end::Sale model */

/* start::Responsive */
@media only screen and (max-width:1200px){

}

@media only screen and (max-width:1024px){

}

@media only screen and (max-width:920px){

}

@media only screen and (max-width:768px){
  .show-768{display: inherit;}
  table .show-768{display: table-cell;}
  .hide-768-block{display: none;}
  .hide-mobile{display: none;}
  .container{margin: auto}
  .main-wrap{margin-bottom: 20px;}
  .flex-container.flex-direction-column-768{flex-direction: column;}
  .flex-container.align-items-start-768{align-items: flex-start;}
  .flex-container.flex-wrap-768{flex-wrap: wrap;}
  .flex-container.flex-gap-768-0{gap: 0;}
  .flex-container.flex-gap-768-5{gap: 5px;}
  /* start::Sidebar */
  #sidebar-menu{width: 80%; left: -100%; transition: left 0.3s ease-in-out;}
  #sidebar-menu.active{left: 0;}
  #sidebar-close{width: 100%; height: 100vh; position: fixed; top: 0; cursor: pointer; z-index: 19; background-color: #ffffff5e; backdrop-filter: blur(2px);}
  /* end::Sidebar */
  .summary-item-block{width: calc(50% - 10px); margin: 5px;}
  .summary-item-block span{font-size: 13px;}
  /* .flex-gap-5.summary-items{gap: 0;} */
  .summary-items{font-size: 13px;}
  #view-modal-popup{width: 90%; max-height: 600px; overflow-y: scroll; font-size: 13px;}
  #platform-fee-block>.width-33p-wrap{width: calc(33.333333% - 5px); font-size: 12px;}
  .detail-main-title{font-size: 18px;}
  .detail-sub-title{font-size: 13px;}
  .filter-item, .filter-item.filter-date{width: calc(50% - 10px); margin: 5px}
  .filter-item.filter-search{width: 100%;}
  .modal-popup-block.active{width: 90%;}
  .product-item-block.width-20p-wrap{width: calc(50% - 10px)}
  #product-modal-popup{max-height: 600px; overflow-y: scroll;}
  .width-100p-768{width: 100%;}
  .sort-btn{padding: 5px;}
  thead{font-size: 13px;}
  .filter-item{font-size: 13px;}
  .single-select-values{width: 150px;}
  .finance-detail-form section{width: 100%;}
  .list-filter button{justify-content: flex-start;}
  .product-modal-list{overflow-y: scroll;}
  #view-modal-popup .order-info-block{margin-bottom: 5px;}
  .platform-fee-block.flex-container{font-size: 11px;}
  /* Footer */
  .dashboard-footer{display: block; padding: 10px;}
  .flex-container.footer-btn-block{justify-content: center; width: 100%; margin-top: 10px; font-size: 13px; gap: 5px;}
  .footer-btn-block .invoice-template-block{width: 60%;}
  .footer-btn-block .is-button{width: 20%; text-align: center;}
  /* Order detail */
  .width-60p.order-detail-block{width: 100%;}
}

@media only screen and (max-width:580px){
  .show-580{display: inline;}
}
/* end::Responsive */

/* start::Icommon */
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?ad2edd');
  src:  url('fonts/icomoon.eot?ad2edd#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?ad2edd') format('truetype'),
    url('fonts/icomoon.woff?ad2edd') format('woff'),
    url('fonts/icomoon.svg?ad2edd#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-triangle-right:before {
  content: "\e91a";
}
.icon-triangle-left:before {
  content: "\e919";
}
.icon-trending-up:before {
  content: "\e91d";
}
.icon-trending-down:before {
  content: "\e91e";
}
.icon-minus:before {
  content: "\e91c";
}
.icon-printer:before {
  content: "\e91b";
}
.icon-view:before {
  content: "\e918";
}
.icon-calendar:before {
  content: "\e917";
}
.icon-clock:before {
  content: "\e916";
}
.icon-money:before {
  content: "\e915";
}
.icon-long-arrow-down:before {
  content: "\e913";
}
.icon-long-arrow-up:before {
  content: "\e914";
}
.icon-blog:before {
  content: "\e912";
}
.icon-inventory:before {
  content: "\e901";
}
.icon-toggle-down:before {
  content: "\e905";
}
.icon-toggle-up:before {
  content: "\e906";
}
.icon-circle:before {
  content: "\e907";
}
.icon-finance:before {
  content: "\e902";
}
.icon-edit:before {
  content: "\e910";
}
.icon-external-link:before {
  content: "\e911";
}
.icon-grid:before {
  content: "\e90d";
}
.icon-shop:before {
  content: "\e900";
}
.icon-refresh:before {
  content: "\e90f";
}
.icon-sale:before {
  content: "\e903";
}
.icon-trash:before {
  content: "\e90e";
}
.icon-contact:before {
  content: "\e904";
}
.icon-alert:before {
  content: "\e90b";
}
.icon-logout:before {
  content: "\e90a";
}
.icon-unpaid:before {
  content: "\e909";
}
.icon-debt:before {
  content: "\e90c";
}
.icon-menu:before {
  content: "\e908";
}
/* end::Icommon */