/**
 * TSV - Thanh điều hướng dưới mobile
 * File: features/mobile-bottom-bar/assets/css/tsv-mobile-bottom-bar.css
 */

.tsv-mobile-bottom-bar {
	display: none;
}

@media only screen and (max-width: 768px) {
	body {
		padding-bottom: 66px !important;
	}

	.tsv-mobile-bottom-bar {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		z-index: 99990 !important;

		display: flex !important;
		align-items: stretch !important;

		width: 100% !important;
		min-height: 58px !important;

		background: #ffffff !important;
		border-top: 1px solid #e5e7eb !important;
		box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.12) !important;
	}

	.tsv-mobile-bottom-item {
		min-width: 0 !important;
		min-height: 58px !important;
		flex: 1 1 0 !important;

		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 2px !important;

		padding: 4px 3px !important;
		margin: 0 !important;

		border: none !important;
		border-right: 1px solid #edf0f4 !important;
		border-radius: 0 !important;
		background: #ffffff !important;
		color: #111827 !important;

		font-size: 12px !important;
		font-weight: 600 !important;
		line-height: 1.15 !important;
		text-align: center !important;
		text-decoration: none !important;
		text-transform: none !important;

		box-shadow: none !important;
		cursor: pointer !important;
	}

	.tsv-mobile-bottom-item:last-child {
		border-right: none !important;
	}

	.tsv-mobile-bottom-icon {
		display: block !important;
		width: 22px !important;
		height: 22px !important;
		font-size: 21px !important;
		line-height: 22px !important;
		text-align: center !important;
	}

	.tsv-mobile-bottom-text {
		display: block !important;
		white-space: nowrap !important;
	}

	/* Nút duy nhất mở popup mua hàng trên trang sản phẩm. */
	.tsv-mobile-bottom-item--choose {
		flex: 1.22 1 0 !important;
		background: #ed1c24 !important;
		color: #ffffff !important;
		font-size: 12px !important;
		font-weight: 700 !important;
	}

	.tsv-mobile-bottom-item--choose .tsv-mobile-bottom-text {
		color: #ffffff !important;
	}

	.tsv-mobile-bottom-icon--choose {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8Z'/%3E%3Cpath d='M9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 21px 21px !important;
	}
}

@media only screen and (max-width: 390px) {
	.tsv-mobile-bottom-item {
		font-size: 10.5px !important;
	}

	.tsv-mobile-bottom-icon {
		width: 20px !important;
		height: 20px !important;
		font-size: 19px !important;
		line-height: 20px !important;
	}

	.tsv-mobile-bottom-item--choose {
		font-size: 11px !important;
	}
}