@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);
:root {
	--brand: #b79147;
	--brand-text: #603913;
	--brand-label: #e4d5bc;
}
* { font-family: 'Montserrat', sans-serif; text-decoration: unset !important;}
body{background-color: #f3f4f4; color: var(--text); font-size: 14px;}
ul{list-style: none; padding: 0; margin: 0;}
a:hover{opacity: .5;}
textarea{resize: none;}
.input-err{border-radius: 5px !important; background-color: #fff; font-size: 11px !important; color: #dc3545 !important; display: block; margin-top: 5px; position: absolute; left: 0; bottom: -30px; padding: 2px 10px; border: 1px solid #dfdfdf; box-shadow: 1px 2px 3px 0px #4a4a4a; z-index: 2;}
.input-err:before { content: ''; position: absolute; top: -6px; left: 11.4px; border-bottom: 7px solid #fff; border-left: 7px solid transparent; border-right: 7px solid transparent; z-index: 2; }
.input-err:after { content: ''; position: absolute; top: -7px; left: 11.4px; border-bottom: 7px solid #dfdfdf; border-left: 7px solid transparent; border-right: 7px solid transparent; z-index: 1; }

.loading{position: relative; overflow: hidden;}
.loading:after{content: ''; position: absolute; width: 100%; height: 100%; z-index: 999999; background-color: #000; top: 0; left: 0; opacity: .2;}
.loader-absolute {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999999; } .loader-dots { display: flex; align-items: center; gap: 8px; height: 48px; } .loader-dots div { width: 12px; height: 12px; background-color: #3b82f6; /* Màu sắc chính */ border-radius: 50%; animation: dots-pulse 1.2s infinite ease-in-out both; } .loader-dots div:nth-child(1) { animation-delay: -0.3s; } .loader-dots div:nth-child(2) { animation-delay: -0.15s; } @keyframes dots-pulse { 0%, 80%, 100% { transform: scale(0.3); opacity: 0.4; } 40% { transform: scale(1.1); opacity: 1; } }
.card .card-body.loading{border-radius: 5px;}
/* <div class="loader-absolute"> <div class="loader-dots"> <div></div> <div></div> <div></div> </div> </div> */

[el-toast]{margin-top: 12px; gap: .5rem; padding: 1rem; display: flex; flex-direction: column; position: fixed; top: 0; right: 0; z-index: 9999999;}
[el-toast] [id*="toast_"]{border-radius: 0.5rem; background-color: var(--white); color: var(--000); padding: 1rem; display: flex; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);}
[el-toast] [id*="toast_"] i{margin-right: 5px;}

.card{box-shadow: 1px 2px 9px #e5e5e5;}
.card .card-body { padding: 1rem 1rem 0.5rem; }
.badge{padding: 8px 10px 6px;}
.row{--bs-gutter-x: 0.8rem;}

.form-group{margin-bottom: .5rem;}
.form-group label{color: var(--text) !important; font-weight: 500; font-size: 11px;}
.form-control{background-color: #fafafa; font-size: 13px !important; border-color: #ececec;}
.form-control[type="password"]{padding-right: 2.2rem;}
.form-control-icon{position: absolute; top: 50%; transform: translateY(-50%); padding: 0 0.6rem;}
textarea.form-control { min-height: calc(1.5em + 5.4rem + calc(var(--bs-border-width) * 2)); }
.select2-container--default .select2-selection--single .select2-selection__rendered{font-size: 13px;}
.select2-container--default .select2-selection--single{background-color: #fafafa; border-color: #ececec;}

.button-redirect{margin-bottom: 20px;}
.button-redirect i{position: relative; top: 1px;}

.table{margin-bottom: 0;}
.table thead th{font-size: 15px; font-weight: 400; background: var(--brand); color: var(--white);}
.table{margin-bottom: 15px;}
.table tbody tr:nth-child(even) td{ background-color: #f7f7f7 !important; }
.table tbody tr:hover td{background-color: #ebebeb !important;}
.tb-thumb{width: 70px; height: 70px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.tb-info{padding: 0; list-style: none;}
.tb-info li{margin-bottom: 2px; font-size: 14px; display: flex; align-items: center; color: var(--text);}
.tb-info li i{margin-right: 5px; font-size: 16px;}
.tb-info li:last-child{margin-bottom: 0;}
.tb-info{padding: 0; list-style: none;}

.pagination{margin-bottom: 15px;}
.pagination .page-item{margin-right: .3125rem; border-radius: 5px;}
.pagination .page-item .page-link{height: 100%; display: flex; align-items: center; justify-content: center;}
.pagination .page-item .page-link.disabled{opacity: .5;}
.pagination .page-item .page-link.active{margin: 0; color: var(--white); background-color: var(--brand); border-color: var(--brand);}
.pagination .page-item.active>.page-link, .pagination .page-item.active .page-link{color: var(--white); background-color: var(--brand); border-color: var(--brand);}
.pagination .page-item .page-link{color: var(--brand);}

.btn-primary{background-color: var(--brand); border-color: var(--brand);} 
.btn-primary:hover{background-color: var(--brand-label) !important; border-color: var(--brand-label) !important;} 
.bg-primary{background-color: var(--brand) !important;}
.btn-warning{background-color: var(--brand-text); border-color: var(--brand-text);} 
.btn-warning:hover{background-color: var(--brand-label) !important; border-color: var(--brand-label) !important;} 
.bg-warning{background-color: var(--brand-text) !important;}

.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; border-width: 2px; border-style: dashed; border-color: #e2e8f0; border-radius: 1rem; padding: 1rem; text-align: center; cursor: pointer; background-color: rgba(248, 250, 252, 0.5); transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } 
.dropzone:hover { border-color: #3b82f6; background-color: #f8fafc; } 
.dropzone-input { display: none; } 
.dropzone-icon { font-size: 3rem; color: #cbd5e1; margin-bottom: 0.75rem; transition: color 0.15s ease; } 
.dropzone:hover .dropzone-icon { color: #3b82f6; } 
.dropzone-title { display: block; font-size: 0.875rem; font-weight: 500; color: #475569; } 
.dropzone-subtitle { display: block; font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; }

.flatpickr-wrapper{width: 100%;}