/**
 * HALINK C8 — Mobile bottom nav (Dola-style pill bar)
 * Fixed floating bar: Trang chủ | Tìm kiếm | Cửa hàng | Giỏ hàng | Tài khoản
 */

.c7-mobile-bottom-nav,
.c8-mobile-nav {
	display: none;
}

@media (max-width: 991px) {
	.c7-mobile-bottom-nav,
	.c8-mobile-nav {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 450;
		padding: 0;
		pointer-events: none;
	}

	.c7-mobile-bottom-nav__shell,
	.c8-mobile-nav__shell {
		pointer-events: auto;
		width: 100%;
		margin: 0;
	}

	.c7-mobile-bottom-nav__bar,
	.c8-mobile-nav__bar {
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		gap: 0;
		min-height: 64px;
		padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
		background: #f5f5f5;
		border-top: 1px solid #cfcfcf;
		border-radius: 14px 14px 0 0;
		box-shadow: 0 -4px 18px rgba(18, 31, 56, 0.12);
		position: relative;
	}

	/* Hide old notch / active bubble — Dola bar is flat pill */
	.c7-mobile-bottom-nav__notch,
	.c7-mobile-bottom-nav__dot {
		display: none !important;
	}

	.c7-mobile-bottom-nav__item,
	.c8-mobile-nav__item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		min-width: 0;
		padding: 6px 2px;
		color: #121f38;
		text-decoration: none;
		font-family: var(--c8-font, "Be Vietnam Pro", system-ui, sans-serif);
		font-size: 11px;
		font-weight: 500;
		line-height: 1.2;
		text-align: center;
		white-space: nowrap;
		border-radius: 10px;
		transition:
			background 0.2s ease,
			color 0.2s ease;
	}

	.c7-mobile-bottom-nav__item:hover,
	.c7-mobile-bottom-nav__item:focus,
	.c7-mobile-bottom-nav__item.is-active,
	.c8-mobile-nav__item:hover,
	.c8-mobile-nav__item.is-active {
		color: #121f38;
		background: transparent;
		text-decoration: none;
		font-weight: 600;
	}

	.c7-mobile-bottom-nav__icon-wrap,
	.c8-mobile-nav__icon-wrap {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 24px;
		height: 22px;
		margin: 0 auto;
		line-height: 1;
	}

	.c7-mobile-bottom-nav__icon-wrap .fa,
	.c8-mobile-nav__icon-wrap .fa {
		font-size: 18px;
		line-height: 1;
		color: inherit;
	}

	.c7-mobile-bottom-nav__label,
	.c8-mobile-nav__label {
		display: block;
		width: 100%;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.c7-mobile-bottom-nav__badge,
	.c8-mobile-nav__badge {
		position: absolute;
		top: -6px;
		right: -10px;
		min-width: 15px;
		height: 15px;
		padding: 0 4px;
		border-radius: 999px;
		background: #9a563a;
		color: #fff;
		font-size: 9px;
		font-weight: 700;
		line-height: 15px;
		text-align: center;
	}

	/* Room so content / footer aren't hidden behind the bar */
	body {
		padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}

	.c8-footer {
		padding-bottom: 0.5rem;
	}
}

@media (max-width: 380px) {
	.c7-mobile-bottom-nav__item,
	.c8-mobile-nav__item {
		font-size: 10px;
		gap: 3px;
		padding: 6px 1px;
	}

	.c7-mobile-bottom-nav__icon-wrap .fa,
	.c8-mobile-nav__icon-wrap .fa {
		font-size: 16px;
	}
}

@media (min-width: 992px) {
	.c7-mobile-bottom-nav,
	.c8-mobile-nav {
		display: none !important;
	}
}