body,
html {
	margin-top: 0px;
}

body {
	background-color: #fff;
	margin: 2px;
	padding-left: 5px;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 5px;
	overflow-x: hidden;
	min-height: 99vh !important;
}

.my-gradient {
	background: linear-gradient(45deg, #0e5a81, #118cc7, #4CAF50, #2E7D32, #1E88E5, #0D47A1);
}

.container-fluid {
	padding: 0;
	margin: 0;
}

.not-show {
	display: none;
}

img.logo {
	width: 90px;
	float: left;
	padding: 2px;
	padding-right: 5px;
}

hr {
	padding: 0;
	margin-top: 0px;
	margin-bottom: 5px;
}

footer {
	padding-top: 0;
	margin-top: 20px;
}

.no-over {
	overflow: hidden;
}

.no-over-x {
	overflow-x: hidden;
}

.no-over-y {
	overflow-x: hidden;
}

.can-truc-vit {
	position: relative;
	width: 208px;
	height: 122px;
}

.truc-vit {
	width: 250px;
	height: 120px;
}

.truc-quay {
	position: relative;
	transform: scaleX(-1);
	background-position-x: 0px;
	background-repeat: no-repeat;
	background-size: 250px 120px;
	width: 168.667px;
	height: 120px;
}

.dong-co {
	background-size: 250px 120px;
	background-position-x: -167.333px;
	width: 250px;
	height: 120px;
	left: 140px;
	top: -118.333px;
}

.run .truc-quay {
	background-image: url("../images/truc_vit.gif");
}

.stop .truc-quay {
	background-image: url("../images/truc_vit_stop.png");
}

.dong-co {
	background-repeat: no-repeat;
	position: relative;
}

.run .dong-co {
	background-image: url("../images/truc_vit.gif");
}

.stop .dong-co {
	background-image: url("../images/truc_vit_stop.png");
}

.truc-vit .v1 {
	position: relative;
	text-align: center;
	width: 98px;
	height: 22px;
	left: 72px;
	top: -312px;
}

.truc-vit .v2 {
	position: relative;
	text-align: center;
	width: 98px;
	height: 22px;
	left: 72px;
	top: -308px;
}

.truc-vit .v3 {
	position: relative;
	text-align: center;
	width: 98px;
	height: 22px;
	left: 72px;
	top: -308px;
}

.truc-vit .v4 {
	position: relative;
	text-align: center;
	width: 98px;
	height: 22px;
	left: 23px;
	top: -283px;
}

.truc-vit .v5 {
	position: relative;
	text-align: left;
	width: 70px;
	height: 22px;
	left: 139px;
	top: -304px;
}

.truc-vit .v6 {
	position: relative;
	text-align: left;
	width: 120px;
	height: 22px;
	left: 27px;
	top: -257px;
}

/*-------------------*/
.can-bang {
	position: relative;
	width: 132.8px;
	height: 159px;
}

.can-tong {
	width: 30px;
	height: 10px;
	position: relative;
	background-image: url("../images/can-tong.png");
	background-size: 15px 10px;
	left: 69px;
	top: 16px;
}

.can-bang.run .than-roi {
	z-index: 99;
	position: relative;
	width: 40px;
	height: 140px;
	background-image: url("../images/than-roi.gif");
	transform: scale(0.4);
	left: -24px;
	top: -216px;
}

.can-bang.run .than-troi {
	z-index: 99;
	position: relative;
	width: 40px;
	height: 300px;
	background-image: url("../images/than-roi.gif");
	transform: scale(0.4) rotate(90deg);
	left: 29px;
	top: -459px;
}

.can-bang.run .goc-tron {
	position: absolute;
	width: 25px;
	height: 25px;
	background-image: url("../images/goc-tron.png");
	background-size: 25px 25px;
	left: -14px;
	top: 112px;
	z-index: 198;
	/* background-color: red; */
}

.can-bang.stop .goc-tron,
.can-bang.stop .than-troi,
.can-bang.stop .than-roi {
	display: none;
}

/* v1=% */
.can-bang .v1 {
	position: relative;
	text-align: center;
	height: 22px;
	left: 66px;
	top: -178px;
	width: 52.8px;
}

/* v2=đặt */
.can-bang .v2 {
	position: relative;
	text-align: center;
	left: 56px;
	top: -162px;
	width: 71.8px;
}

/* v3=value */
.can-bang .v3 {
	position: relative;
	text-align: center;
	width: 72.8px;
	height: 22px;
	left: 55px;
	top: -165px;
}

/* v4=tên nguyên liệu */
.can-bang .v4 {
	position: relative;
	text-align: center;
	width: 100px;
	height: 23px;
	left: 41px;
	top: -165px;
}

/* v5=tự động */
.can-bang .v5 {
	position: relative;
	text-align: right;
	width: 77px;
	height: 22px;
	left: -10px;
	top: -156px;
}

/* v6=tổng */
.can-bang .v6 {
	position: relative;
	text-align: left;
	height: 22px;
	width: 120px;
	left: 8px;
	top: -114px;
}

.can-bang .v6::before,
.truc-vit .v6::before {
	content: 'Σ ';
}

.can-xilo {
	z-index: 100;
	width: 129px;
	height: 155px;
	background-size: 129px 155px;
	background-repeat: no-repeat;
	padding-left: 26px;
	padding-top: 20px;
}

.run .can-xilo {
	background-image: url("../images/xilo-run.png");
	transform: scaleX(-1);
}

.stop .can-xilo {
	background-image: url("../images/xilo-stop.png");
	transform: scaleX(-1);
}

/*.v1,.v2,.v3,.v4,.v5,.v6{display:none} */
.banh-xe {
	position: relative;
	background-repeat: no-repeat;
	background-size: 22px 22px;
	width: 22px;
	height: 22px;
}

.run .banh-xe {
	background-image: url("../images/quay-on.png");
	animation: spin-ccwr 1s linear infinite;
}

.stop .banh-xe {
	background-image: url("../images/quay-off.png");
}

.banh-xe-1 {
	left: -18px;
	top: 110px;
}

.banh-xe-2 {
	left: 77.5px;
	top: 89px;
}

.can-14 {
	left: 610px;
	top: 88px;
}

.can-13 {
	left: 962px;
	top: -34px;
}

.can-12 {
	left: 142px;
	top: -216px;
}

.can-11 {
	left: 310px;
	top: -375px;
}

.can-10 {
	left: 478px;
	top: -534px;
}

.can-9 {
	left: 830px;
	top: -693px;
}

.can-8 {
	left: 1181px;
	top: -851px;
}

.can-7 {
	left: 1348px;
	top: -1011px;
}

.can-6 {
	left: 299px;
	top: 29px;
}

.can-5 {
	left: 507px;
	top: -129px;
}

.can-4 {
	left: 715px;
	top: -288px;
}

.can-3 {
	left: 923px;
	top: -448px;
}

.can-2 {
	left: 1131px;
	top: -606px;
}

.can-1 {
	left: 1339px;
	top: -766px;
}

.papa-hang-1,
.papa-hang-2 {
	width: 100%;
	height: 190px;
}

.hang-1,
.hang-2 {
	position: relative;
	height: 190px;
}

.hang-1 {
	width: 1500px;
	top: 38px;
}

.hang-2 {
	width: 1500px;
	top: -40px;
	left: 12px;
}

.hang-3 {
	position: relative;
	width: 877px;
	height: 31px;
	transform: scale(0.6, 0.6);
	left: 300px;
	top: -1015px;
}

/*-------------------*/
.conveyor-1 {
	position: relative;
	width: 1520px;
	height: 70px;
	position: relative;
	overflow: hidden;
	left: 0px;
	top: 12px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.conveyor-2 {
	position: relative;
	width: 1320px;
	height: 70px;
	position: relative;
	margin-top: 50px;
	overflow: hidden;
	left: 207px;
	top: -61px;
}

.wheel {
	width: 50px;
	height: 50px;
	background-color: transparent;
	border-radius: 50%;
	position: absolute;
	top: 7.5px;
	border: 5px solid #000;
	box-shadow: 0 0 0 3px #fff;
	box-sizing: border-box;
}

.run .wheel {
	animation: spin-ccw 2s linear infinite;
}

.wheel::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	position: absolute;
	top: -9.65px;
	left: -9.65px;
	width: 60px;
	height: 60px;

	background-image: conic-gradient(#333 0deg, #333 20deg,
			transparent 20deg, transparent 70deg,

			#333 70deg, #333 110deg,
			transparent 110deg, transparent 160deg,

			#333 160deg, #333 200deg,
			transparent 200deg, transparent 250deg,

			#333 250deg, #333 290deg,
			transparent 290deg, transparent 340deg,

			#333 340deg, #333 360deg);
	box-shadow: 0 0 0 7px #777 inset;
	/* Tâm màu xám */
}

.run .wheel::before {
	animation: spin-ccw 2s linear infinite;
}

.wheel-1 {
	left: 5px;
}

.wheel-2 {
	left: 211.67px;
}

.wheel-3 {
	left: 418.33px;
}

.wheel-4 {
	left: 625px;
}

.wheel-5 {
	left: 831.67px;
}

.wheel-6 {
	left: 1038.33px;
}

.wheel-7 {
	left: 1245px;
}

.wheel-8 {
	left: 1451.67px;
}

.wheel-9 {
	left: 1658.33px;
}

.wheel-10 {
	left: 1865px;
}

.belt-top,
.belt-bottom {
	z-index: 999;
	position: absolute;
	width: 100%;
	height: 15px;
	background-color: #555;

	background-image: repeating-linear-gradient(90deg,
			#777,
			#777 5px,
			#555 5px,
			#555 10px);
	background-size: 80px 20px;
}

.belt-top {
	top: 0px;
}

.run .belt-top {
	animation: belt-move-left 3s linear infinite;
}

.belt-bottom {
	top: 50px;
}

.run .belt-bottom {
	animation: belt-move-right 1s linear infinite;
}

@keyframes spin-ccw {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(-360deg);
	}
}

@keyframes spin-ccwr {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
		/* Giá trị âm để quay ngược chiều kim đồng hồ */
	}
}

@keyframes belt-move-left {
	from {
		background-position: 0 0;
	}

	to {
		background-position: -80px 0;
	}

	/* Dịch chuyển họa tiết sang trái */
}

@keyframes belt-move-right {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 80px 0;
	}

	/* Dịch chuyển họa tiết sang phải */
}

/*=======================*/
.vertical-conveyor-system {
	z-index: 9999;
	width: 15px;
	/* CHIỀU RỘNG THEO YÊU CẦU */
	height: 287px;
	/* CHIỀU CAO THEO YÊU CẦU */
	position: relative;
	/* Đặt tuyệt đối để dễ dàng định vị */
	overflow: hidden;
	margin-top: 250px;
	/* Tạo khoảng cách với băng tải ngang trên */
	left: 192px;
	top: -653px;
}



/* Băng tải chính của băng tải dọc */
.vertical-belt {
	position: relative;
	width: 100%;
	/* Bằng chiều rộng container (85px) */
	height: 100%;
	/* Bằng chiều cao container (350px) */
	background-color: #555;
	background-image: repeating-linear-gradient(0deg,
			/* Đổi góc gradient thành 0deg để tạo sọc ngang */
			#777,
			#777 5px,
			#555 5px,
			#555 10px);
	background-size: 85px 80px;
	/* background-size: Rộng x Cao (85px là chiều rộng băng tải) */
	z-index: 1;
}

.run .vertical-belt {
	animation: vertical-belt-move-up 3s linear infinite;
	/* Chuyển động từ dưới lên */
}

/* Chuyển động băng tải chính từ DƯỚI LÊN */
@keyframes vertical-belt-move-up {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 0 -80px;
	}

	/* Dịch chuyển background theo chiều dọc lên */
}

.papa-so-do {
	width: 100%;
	height: 560px;
	overflow-x: auto;
	overflow-y: hidden;
}

.so-do {
	width: 1510px;
	height: 560px;
	overflow-x: hidden;
	overflow-y: hidden;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1025px) {
	.hang-3 {
		transform: scale(1, 1);
	}
}

.can-sum {
	z-index: 10000;
	position: relative;
	background-color: yellow;
	width: 150px;
	height: 80px;
	left: 10px;
	top: -921px;
}

.can-truc-vit,
.can-bang {
	user-select: none;
	-webkit-user-select: none;
	/* Cho Chrome, Safari, Opera */
	-moz-user-select: none;
	/* Cho Firefox */
	-ms-user-select: none;
	/* Cho Internet Explorer/Edge */
}

.papa-can-bang {
	padding-left: 20px;
	width: 160px;
	height: 180px;
	float: left;
}

.papa-can-truc-vit {
	padding-left: 0px;
	padding-top: 80px;
	margin-right: 5px;
	width: 220px;
	height: 215px;
	float: left;
}

.btn-detail {
	cursor: pointer;
}