*,
html {
	color: #333;
}

a {
	color: #333;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.top {
	background-color: #f5f5f5;
	border-bottom: 1px solid #e0e0e0;
}

.brand span:first-child {
	color: #042e6d;
}

.brand span:last-child {
	color: #50d8af;
}


.topnav a {
	text-decoration: none;
	color: #333;
}

.topnav a:hover {
	text-decoration: none;
	color: #f00;
}

.topnav li a:hover {
	text-decoration: none;
	color: #f0f;
}

.navbar .container-fluid {
	--bs-gutter-x: 0rem;
}

a.rlink {
	color: #333;
	text-decoration: none;
}

a.rlink:hover {
	color: #f0f;
}

.cursor {
	cursor: pointer;
}

.nmx-1 {
	margin-left: -0.75rem;
	margin-right: -0.75rem;
}

.nmy-1 {
	margin-top: -0.5rem;
}

.footer .more-links a {
	color: #666;
	text-decoration: none;
}

.footer .more-links a:hover {
	color: #f0f;
}

.copyright a {
	color: #333;
	text-decoration: none;
}

h1 {
	font-size: 2rem;
}

p {
	text-align: justify;
}

.UnitedPacksMap {
	width: 100%;
	height: 22rem;
}



.sent-msg {
	color: green;
	display: none;
}




.wishlist-toast {
	position: fixed;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	color: #f0f;
	pointer-events: none;
	opacity: 0;
	transform: translateY(0);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.heart-icon {
	width: 16px;
	height: 16px;
	fill: #f0f;
	stroke: #f00;
	stroke-width: 2;
}

.animate-float {
	animation: floatUp 1s ease-out forwards;
}

@keyframes floatUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	20% {
		opacity: 1;
		transform: translateY(0);
	}

	80% {
		opacity: 1;
		transform: translateY(-20px);
	}

	100% {
		opacity: 0;
		transform: translateY(-30px);
	}
}


.loading-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	display: none;
	justify-content: center;
	align-items: center;
	border-radius: 0.25rem;
}

.submit-button-wrapper {
	position: relative;
}

.spinner-border {
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
}

.submit-message {
	color: #11aa11;
	display: none;
}


.banner-factory-index {
	background:url(/images/site/banner-factory.png);
}


	.tree-menu {
		background-color: #f8f8f8;
	}

	.tree-menu-title {
		opacity: 0.7;
	}

	.category-tree a {
		color: #333;
		text-decoration: none;
	}

	.category-tree a:hover {
		color: #f0f;
	}

	.index-title {
		border-bottom: solid 1px #eee;
		opacity: 0.7;
	}

	.banner-product-index {
		background-image: url(/images/site/banner-glass-bottle.png);

	}
	
	.banner-about-index {
		background-image: url(/images/profile/about-us/banner-about-us.jpg);
		background-position-x: center;
		background-position-y: center;
	}

	.banner-article {
		background-image: url(/images/article/banner-article.jpg);
		background-position-x: center;
		background-position-y: center;
	}

	.banner {
		height: 360px;
		background-color: #999;
	}

	.mission {
		background-image: url(/images/profile/about-us/mission.png);
	}

	.vision {
		background-image: url(/images/profile/about-us/vision.png);
	}

	.sustainability {
		background-image: url(/images/profile/about-us/sustainability.png);
	}
	
	.history {
		background-image: url(/images/profile/about-us/history.png);
	}

	.mission, .vision, .sustainability, .history {
		background-position: right;
		background-size: contain;
		background-repeat:no-repeat;
	}

	.text-red {
		color: #f00;
	}

	.text-green {
		color: #0ff;
	}
	
	.text-lime {
		color: #17c54b;
	}

	.text-navy {
		color: #000080;
	}
	
	.text-fuchsia {
		color: #f0f;
	}
	
	.text-blue {
		color: #00f;
	}
	
	.text-white {
		color: #fff;
	}
	
	.text-yellow {
		color: #ff0;
	}
	
	.category-link {
		text-decoration: none;
		color: #333
	}
	.category-link:hover {
		color:#f0f;
	}
	
	.text-yellow {
		color: #ff0;
	}
	
	.hot-link {
		text-decoration: none;
		color: #333
	}
	.hot-link:hover {
		color:#f0f;
	}

	.volume-hidden {
		display: none;
	}
	
	.volume-block {
		display: block;
	}
	
	.volume-list:before {
		content: "...";
	}

	.sub a:hover {
		color: #f0f;
	}