@media screen and (max-width: 620px) {
		.custom_san_pham {
			margin-right: 1rem !important;
		}
	}

	.sk-rect {
		width: 50px;
		height: 40px;
		text-align: center;
		font-size: 10px;
	}

	.sk-rect>div {
		background-color: #b5b3b3;
		height: 100%;
		width: 6px;
		display: inline-block;
		-webkit-animation: sk-rect-anim 1.2s infinite ease-in-out;
		animation: sk-rect-anim 1.2s infinite ease-in-out;
	}

	.sk-rect .rect2 {
		-webkit-animation-delay: -1.1s;
		animation-delay: -1.1s;
	}

	.sk-rect .rect3 {
		-webkit-animation-delay: -1s;
		animation-delay: -1s;
	}

	.sk-rect .rect4 {
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}

	.sk-rect .rect5 {
		-webkit-animation-delay: -0.8s;
		animation-delay: -0.8s;
	}

	@-webkit-keyframes sk-rect-anim {

		0%,
		40%,
		100% {
			-webkit-transform: scaleY(0.4);
		}

		20% {
			-webkit-transform: scaleY(1);
		}
	}

	@keyframes sk-rect-anim {

		0%,
		40%,
		100% {
			transform: scaleY(0.4);
			-webkit-transform: scaleY(0.4);
		}

		20% {
			transform: scaleY(1);
			-webkit-transform: scaleY(1);
		}
	}

	.card {
		margin-bottom: 11px;
		border: none;
		transition: all 0.3s ease;
		letter-spacing: 0.5px;
		border-radius: 15px;
		box-shadow: 0px 9px 20px rgba(46, 35, 94, 0.07);
	}

	.card:hover {
		box-shadow: 0 0 40px rgba(8, 21, 66, 0.05);
		transition: all 0.3s ease;
	}

	.dh-right-angle-1 {
		top: -44px;
		width: 160px;
		z-index: 0;
		height: 160px;
		right: -104px;
		position: absolute;
		transform: rotate(40deg);
	}

	.bg-light-primary {
		background: rgba(70, 128, 255, 0.2);
		color: #4680ff;
	}

	.btn-default,
	.introjs-tooltip .introjs-button.introjs-nextbutton {
		--bs-btn-color: #ffffff;
		--bs-btn-bg: #1c252e;
		--bs-btn-border-color: #1c252e;
		--bs-btn-hover-color: #ffffff;
		--bs-btn-hover-bg: #172029;
		--bs-btn-hover-border-color: #151c26;
		--bs-btn-focus-shadow-rgb: 28, 37, 46;
		--bs-btn-active-color: #ffffff;
		--bs-btn-active-bg: #151c26;
		--bs-btn-active-border-color: #12191f;
		--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		--bs-btn-disabled-color: #ffffff;
		--bs-btn-disabled-bg: #1c252e;
		--bs-btn-disabled-border-color: #1c252e;
	}

	.bg-light-success {
		background: rgba(44, 168, 127, 0.2);
		color: #2ca87f;
	}

	.bg-light-danger {
		background: rgba(220, 38, 38, 0.2);
	}

	.bg-light-warning {
		background: rgb(252, 243, 230);
		color: #e58a00;
	}

	.bg-light-purple {
		background: rgba(142, 51, 255, 0.2);
		color: #673ab7;
	}

	.bg-purple {
		background: #673ab7;
	}

	.independent-columns {
		display: flex;
		gap: 1rem;
		height: calc(100vh - 200px);
	}

	.left-column {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.right-column {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.left-column::-webkit-scrollbar,
	.right-column::-webkit-scrollbar,
	.webkit_scrollbar_flow::-webkit-scrollbar {
		width: 0 !important;
		display: none !important;
	}

	.left-column,
	.right-column,
	.webkit_scrollbar_flow {
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
	}
	
	/* Ẩn scrollbar cho tất cả trình duyệt */
	.webkit_scrollbar_flow::-webkit-scrollbar-track {
		display: none !important;
	}
	
	.webkit_scrollbar_flow::-webkit-scrollbar-thumb {
		display: none !important;
	}

	@media (max-width: 991px) {
		.independent-columns {
			flex-direction: column;
			height: auto;
		}

		.left-column,
		.right-column {
			flex: 0 0 100%;
			max-width: 100%;
			max-height: 600px;
		}

		.left-column {
			order: 2;
		}

		.right-column {
			order: 1;
		}
	}

	.avtar.avtar-s {
		width: 40px;
		height: 40px;
		font-size: 14px;
		border-radius: 12px;
	}

	.avtar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		font-size: 18px;
		font-weight: 600;
		width: 48px;
		height: 48px;
	}

	.hei-40 {
		height: 40px;
	}

	[data-pc-direction=ltr] .position-absolute {
		position: absolute !important;
	}

	.material-icons-two-tone.text-success {
		background-color: #2ca87f;
	}

	.material-icons-two-tone.text-primary {
		background-color: #4680ff;
	}

	.material-icons-two-tone.text-warning {
		background-color: #e58a00;
	}

	.material-icons-two-tone.text-danger {
		background-color: #dc2626;
	}

	.material-icons-two-tone {
		-webkit-text-fill-color: transparent;
		vertical-align: text-bottom;
		-webkit-background-clip: text;
	}

	@font-face {
		font-family: 'Material Icons Two Tone';
		font-style: normal;
		font-weight: 400;
		src: url(material/material.woff2) format('woff2');
	}

	.material-icons-two-tone {
		font-family: 'Material Icons Two Tone';
		font-weight: normal;
		font-style: normal;
		font-size: 24px;
		line-height: 1;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		-webkit-font-feature-settings: 'liga';
		-webkit-font-smoothing: antialiased;
	}