/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
body {
	overflow-x: hidden !important; /* Chặn cuộn ngang */
	max-width: 100% !important; /* Không cho phần tử con vượt quá chiều rộng body */
}
.tab-content {
	padding: 0 20px;
}
.fa-solid, .fas {
	padding-right: 7px;
}

.flex-5 {
	flex: 5;
}



#tableContainer {
	background-color: #ffffff;
	padding: 2px 15px 15px 15px;
	border: 1px solid #ccc;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	width: 100%;
	overflow: hidden; /* Tránh tràn ra ngoài */
}

.toolbar {
	margin-bottom: 10px;
	background-color: #f8f8f8;
	padding: 10px;
	border: 1px solid #ccc;
	display: flex;
	align-items: center;
	border-radius: 5px;
}

	.toolbar button {
		margin-right: 10px;
		padding: 5px 10px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		display: flex;
		align-items: center;
	}

		.toolbar button img {
			margin-right: 5px;
		}

		.toolbar button:first-child {
			background-color: #007bff;
			color: white;
		}

		.toolbar button:nth-child(2) {
			background-color: #28a745;
			color: white;
		}

		.toolbar button:nth-child(3) {
			background-color: #dc3545;
			color: white;
		}

		.toolbar button:nth-child(4),
		.toolbar button:nth-child(5),
		.toolbar button:nth-child(6) {
			background-color: #6c757d;
			color: white;
		}

		.toolbar button:last-child {
			background-color: #dc3545;
			color: white;
		}

table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 10px;
}

table, th, td {
	border: 1px solid #ccc;
	white-space: nowrap;	
}

th {
	padding: 8px;
	text-align: left;
}

td {
	padding: 5px;
	text-align: left;
}

th {
	background-color: #f2f2f2;
}

.containerx th {
	background-color: white;
}

.containerx table {
	margin-top: 0;
}

.containerx {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 15px;
}

.scrollable-tablex {
	overflow-y: auto;
	overflow-x: auto; /* Giúp cuộn ngang khi bị tràn */
	border: 1px solid #ddd;
	max-width: 100%; /* Giữ trong khung cha */
	display: block;
	position: relative;
}

	.scrollable-tablex table {
		width: max-content; /* Đảm bảo bảng không lớn hơn khung */
		min-width: 800px; /* Ngăn bảng thu nhỏ quá mức */
		border-collapse: collapse; /* Giúp bảng hiển thị gọn */
	}

	.scrollable-tablex th,
	.scrollable-tablex td {
		white-space: nowrap; /* Ngăn chữ xuống dòng */
		padding: 5px;
		border: 1px solid #ccc;
		text-align: left;
	}

.containerx .h5font {
	padding-left: 5px;
	font-weight: 600;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 0;
	margin-bottom: 0;
	background: #f5f5f5
}

.h5font {
	padding-left: 5px;
	font-weight: 600;
	font-size: 10px;
}

.margin-top10 {
	margin-top: 10px;
}

.margin-top10x {
	flex: 1;
	margin-right: 20px;
}

	.margin-top10x:last-child {
		margin-right: 0;
	}

input[type="checkbox"] {
	width: 17px;
	height: 17px;
	cursor: pointer;
	flex:0;
}
/*popup*/
.modalpopup {
	width: auto;	
	max-width: 90%; /* Đảm bảo modal không vượt quá màn hình */
	height: auto; /* Cho phép cuộn theo chiều cao */
	max-height: 90vh; /* Giới hạn chiều cao tối đa */
	background-color: #ffffff;
	border: 2px solid #007bff;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	z-index: 1030;
	overflow-y: auto; /* Chỉ cho phép cuộn theo chiều dọc */
	overflow-x: hidden; /* Ngăn cuộn theo chiều ngang */
}

	.modalpopup input {
		flex: 30 !important;
	}
	.modalpopup .select2-container {
		flex: 30 !important;
	}

	.modalpopup span {
		font-size: 16px;
	}

	.modalpopup .header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 25px;
	}

		.modalpopup .header h2 {
			margin: 0;
		}

	.modalpopup .form-group {
		margin-bottom: 2px;
		display: flex;
		align-items: center;
	}

		./*modalpopup .form-group label {
			flex: 2;
			text-align: left;
			margin-right: 10px;
			min-width: 110px !important;
		}*/
		.modalpopup .form-group label {
			flex: 1; /* Cho phép mở rộng */
			min-width: 110px; /* Chiều rộng tối thiểu */
			/* max-width: 200px; Có thể điều chỉnh theo yêu cầu */
			text-align: left;
			margin-right: 10px;
			white-space: nowrap; /* Giữ nguyên nội dung trên một dòng */
			overflow: hidden;
			text-overflow: ellipsis; /* Hiển thị '...' nếu quá dài */
		}

		.modalpopup .form-group input,
		.modalpopup .form-group select {
			padding: 6px;
			border: 1px solid #ccc;
			border-radius: 5px;
		}

	.modalpopup .form-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

		.modalpopup .form-actions button {
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}

		.modalpopup .form-actions .btn-primary {
			background-color: #28a745;
			color: white;
		}

		.modalpopup .form-actions .btn-secondary {
			background-color: #dc3545;
			color: white;
		}

		.modalpopup .form-actions .btn-default {
			background-color: #6c757d;
			color: white;
		}

@media (max-width: 915px) {
	.height-table {
		/*max-height: calc(100vh - 168px) !important;*/
		height: calc(100vh - 168px) !important;
	}

	/*.modalpopup {
		width: 85% !important;
		padding: 15px;
	}

		.modalpopup .form-group {
			flex-direction: column;
			align-items: flex-start;
			flex-wrap: wrap;
		}

			.modalpopup .form-group label {
				width: 100%;
				margin-bottom: 5px;
				text-align: left;
			}

		.modalpopup .form-actions {
			flex-direction: column;
			gap: 10px;
			margin-top: 15px;
		}

			.modalpopup .form-actions button {
				width: 100%;
				padding: 8px;
			}*/
}

#closeButton {
	padding: 2px 10px;
	background-color: #ff0000;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 10px;
}

.closeButtonid {
	padding: 2px 10px;
	background-color: #ff0000;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 10px
}

.popup {
	background-color: #fff;
	width: 400px;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
	position: relative;
}

.popup-header {
	font-weight: bold;
	margin-bottom: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.close-button {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	padding: 2px 10px;
	background-color: #ff0000;
	color: white;
	border-radius: 5px;
	position: absolute;
	top: 10px;
	right: 10px
}

input {
	flex: 5;
}

.popup-body {
	margin-top: 20px;
}

	.popup-body label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
		/*flex: 3;*/
		text-align: left;
		margin-right: 10px;
	}

	.popup-body input {
		width: 100%;
		padding: 8px;
		margin-bottom: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
	}

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

.save-button, .cancel-button {
	padding: 10px 15px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin-left: 10px;
}

.save-button {
	background-color: #4CAF50;
	color: white;
}

.cancel-button {
	background-color: #f44336;
	color: white;
}

.form-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: center;
	margin-bottom: 15px;
}

.form-group {
	display: flex;
	align-items: center;
	margin-bottom:5px !important;
}

	.form-group label {
		margin-right: 5px;
		white-space: nowrap;
		min-width: 100px !important;
	}

	.form-group input {
		flex: 5;
		padding: 5px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
/*tét*/
.draggable {
	cursor: move;
}

@media (max-height: 660px) {	
	.save-button, .cancel-button {
		padding: 3px 10px;
		border: none;
		border-radius: 3px;
		cursor: pointer;
		margin-left: 10px;
	}

	#closeButton {
		padding: 2px 9px;
		background-color: #ff0000;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.close-button {
		background: none;
		border: none;
		font-size: 20px;
		cursor: pointer;
		padding: 2px 10px;
		background-color: #ff0000;
		color: white;
		border-radius: 5px;
		position: absolute;
		top: 10px;
		right: 10px
	}
}

.margin-top10 {
	margin-top: 10px;
}

.margin-top10x {
	flex: 1;
	margin-right: 20px;
}

	.margin-top10x:last-child {
		margin-right: 0;
	}

table th{
	text-align: center;
	vertical-align: middle;
}
table td {
	text-align: left;
	vertical-align: middle;
}

input[type="checkbox"] {
	width: 17px;
	height: 17px;
	cursor: pointer;
	flex:0 !important;
}

.pagination-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	padding-top: 5px;
}

.page-div {
	border: 1px solid #ccc;
	background-color: #f2f2f2;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	font-size: 14px;
	color: #333;
	text-align: center;
	min-width: 40px;
	line-height: 1.5;
	user-select: none;
}

	.page-div:hover {
		background-color: red;
		transform: translateY(-2px);
	}

	.page-div.active {
		background-color: #007bff;
		color: white;
		border-color: #007bff;
	}

	.page-div:disabled {
		background-color: #e9ecef;
		cursor: not-allowed;
		box-shadow: none;
		color: #6c757d;
	}

	.page-div:active:not(:disabled) {
		background-color: #0056b3;
		transform: translateY(0);
		box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
	}

.height-table {
	height: calc(100vh - 260px);
	/*max-height: calc(100vh - 260px);*/
	overflow: auto; /* Quan trọng để hiển thị thanh cuộn */
	font-size: 12px;
}
.height-table-details {
	width: 100%;
	height: 100%;
	overflow-x: auto; /* Quan trọng để có thanh cuộn ngang chỉ trong vùng này */
	overflow-y: auto; /* Nếu cần cuộn dọc */
	font-size: 12px;
	white-space: nowrap; /* Ngăn bảng xuống dòng */
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 5px;
	height: 15px;
}

.right-content {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
	padding-right: 5px;
}


.custom-select {
	flex: 6;
	padding: 6px 12px;
	border-radius: 5px;
	border: 1px solid #ccc;
	font-size: 14px;
	cursor: pointer;
	height: 25px;
	font-size: 10px;
}

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

	.subform-group label {
		margin-right: 4px;
		white-space: nowrap;
		min-width:110px;
	}

	.subform-group input {
		flex: 5;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
	.padding-bt-10{
		padding-bottom: 10px;
	}

.popup-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(75, 85, 99, 0.75); /* bg-gray-500 bg-opacity-75 */
	z-index: 1030;
	pointer-events: all;
}

.popup-content {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

svg.w-20.h-20.text-red-600.mx-auto {
	height: 70px;
	color: #EE0000;
}

.modalpopup.rounded-lg.shadow-lg.bg-white.max-w-md.mx-auto.p-6 {
	border: 2px solid #FF3300;
}

.custom-button {
	display: inline-flex;
	justify-content: center;
	width: 100%;
	border-radius: 0.375rem; /* rounded-md */
	border: 1px solid transparent;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
	padding: 0.5rem 1rem; /* px-4 py-2 */
	background-color: #dc2626; /* bg-red-600 */
	font-size: 15px; /* text-base */
	font-weight: 500; /* font-medium */
	color: #ffffff; /* text-white */
	transition: background-color 0.3s ease;
}

	.custom-button:hover {
		background-color: #b91c1c; /* hover:bg-red-700 */
	}

	.custom-button:focus {
		outline: none; /* focus:outline-none */
		box-shadow: 0 0 0 2px rgba(229, 231, 235, 1), 0 0 0 2px rgba(220, 38, 38, 1); /* focus:ring-2 focus:ring-offset-2 focus:ring-red-500 */
	}

@media (min-width: 640px) {
	.custom-button {
		font-size: 14px; /* sm:text-sm */
	}
}

.button-container {
	display: flex;
	align-items: center;
	margin-top: 1.25rem; /* Tương đương với mt-5 */
}

	.button-container .custom-button + .custom-button {
		margin-left: 3.5rem;
	}

.modalpopup.width-400.rounded-lg.shadow-lg.bg-white.max-w-md.mx-auto.p-6 {
	width: 430px;
}

.dropdown-item i {
	margin-right: 8px;
}

.spinner-border {
	width: 7rem !important;
	height: 7rem !important;
}

.modalpopup1 {
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border: green solid 3px;
}

.custom-button1 {
	background-color: #4CAF50;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	width: 100px;
}

	.custom-button1:hover {
		background-color: #45a049;
	}

.skeleton {
	background: linear-gradient(90deg, #ddd 25%, #ccc 50%, #ddd 75%);
	background-size: 200% 100%;
	animation: shimmer-move 1.5s infinite;
	border-radius: 4px;
}

@keyframes shimmer-move {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}

.skeleton-text {
	width: 100px;
	height: 20px;
	margin: 4px 0;
}

.skeleton-button {
	width: 50px;
	height: 20px;
	margin: 4px 0;
}

.required-label::after {
	content: '*';
	color: red;
	margin-left: 3px;
	font-size: 18px;
}
/*loading*/
.lds-spinner {
	color: official;
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}

	.lds-spinner div {
		transform-origin: 40px 40px;
		animation: lds-spinner 1.2s linear infinite;
	}

		.lds-spinner div:after {
			content: "  ";
			display: block;
			position: absolute;
			top: 3px;
			left: 37px;
			width: 6px;
			height: 18px;
			border-radius: 20%;
			background: white;
		}

		.lds-spinner div:nth-child(1) {
			transform: rotate(0deg);
			animation-delay: -1.1s;
		}

		.lds-spinner div:nth-child(2) {
			transform: rotate(30deg);
			animation-delay: -1s;
		}

		.lds-spinner div:nth-child(3) {
			transform: rotate(60deg);
			animation-delay: -0.9s;
		}

		.lds-spinner div:nth-child(4) {
			transform: rotate(90deg);
			animation-delay: -0.8s;
		}

		.lds-spinner div:nth-child(5) {
			transform: rotate(120deg);
			animation-delay: -0.7s;
		}

		.lds-spinner div:nth-child(6) {
			transform: rotate(150deg);
			animation-delay: -0.6s;
		}

		.lds-spinner div:nth-child(7) {
			transform: rotate(180deg);
			animation-delay: -0.5s;
		}

		.lds-spinner div:nth-child(8) {
			transform: rotate(210deg);
			animation-delay: -0.4s;
		}

		.lds-spinner div:nth-child(9) {
			transform: rotate(240deg);
			animation-delay: -0.3s;
		}

		.lds-spinner div:nth-child(10) {
			transform: rotate(270deg);
			animation-delay: -0.2s;
		}

		.lds-spinner div:nth-child(11) {
			transform: rotate(300deg);
			animation-delay: -0.1s;
		}

		.lds-spinner div:nth-child(12) {
			transform: rotate(330deg);
			animation-delay: 0s;
		}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

@keyframes lds-spinner {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.left-align {
	text-align: left;
}

.custom-listct {
	list-style-type: none;
	padding-left: 0;
}

	.custom-listct li {
		text-align: left;
		padding-left: 0;
	}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}

.tab-button {
	flex: 1;
	padding: 10px;
	cursor: pointer;
	text-align: center;
	background-color: #f1f1f1;
	border: none;
	outline: 1px solid #007bff;
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

	.tab-button:hover {
		background-color: #ddd;
	}

	.tab-button.active {
		background-color: #007bff; /* Màu xanh nổi bật */
		color: white; /* Chữ trắng cho nút active */
		font-weight: bold;
		outline: 1px solid #0056b3; /* Đường viền đậm hơn */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Tạo hiệu ứng đổ bóng */
		transform: translateY(-2px); /* Hiệu ứng nổi nhẹ */
	}

.border-custom {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 10px;
	margin-left: 15px;
}

.margin0 {
	margin: 0;
}
.itempk {
	padding: 5px;
}

	.itempk label {
		width: 100%;
		text-align: center;
	}
.dynamic-width {
	min-width: max-content; /* Độ rộng tự động theo nội dung */
	width: auto; /* Đảm bảo không bị giới hạn */
	white-space: nowrap; /* Không cho chữ xuống dòng */
}
.tab-active {
	border-bottom: 1px solid #ccc;
	margin-bottom: 5px;
	padding: 10px 0px;
}
a {
	text-decoration: none; /* Loại bỏ gạch chân mặc định */
}

	a:hover {
		text-decoration: none; /* Không gạch chân khi hover */
	}
#dataTable {
	width: max-content; /* Đảm bảo bảng không bị co lại quá mức */
	min-width: 100% !important; /* Đảm bảo ít nhất bằng với container */
	border-collapse: collapse;
	table-layout: auto; /* Giữ kích thước cột linh hoạt */
}
.scrollable-table-details {
	overflow-y: auto;
	overflow-x: hidden; /* Giúp cuộn ngang khi bị tràn */
	border: 1px solid #ddd;
	max-width: 100%; /* Giữ trong khung cha */
	display: block;
	position: relative;
}

	.scrollable-table-details table {
		width: max-content; /* Đảm bảo bảng không lớn hơn khung */
		min-width: 800px; /* Ngăn bảng thu nhỏ quá mức */
		border-collapse: collapse; /* Giúp bảng hiển thị gọn */
	}

	.scrollable-table-details th,
	.scrollable-table-details td {
		white-space: nowrap; /* Ngăn chữ xuống dòng */
		padding: 5px;
		border: 1px solid #ccc;
		min-width: 100px !important;
	}
#tongKet {
	font-weight:600; font-size:14px;
}
input:disabled {
	background: none !important;
	border: 0px;
	box-shadow: inset 0 0px 1px rgba(0, 0, 0, .075);
}

select:disabled {
	background: none !important;
	border: 0px;
	box-shadow: inset 0 0px 1px rgba(0, 0, 0, .075);
}
.activeeee {
	color: #000000;
	background-color: #007bff29;
	font-weight:550;
}