/* Thanh danh mục trên điện thoại/máy tính bảng dạng chip (Issue #205, mẫu 3). HTML: content/temp1/dm_giuatrang.php (nav.htv2-dm).
   Hiện khi màn hình <= 991px, ẩn từ 992px (máy tính dùng .ht-cate-bar). Không dựa .hidden-* của Bootstrap. */
nav.htv2-dm { display: none !important; }
@media (max-width: 991px) {
	nav.htv2-dm {
		display: block !important; position: relative !important; width: auto !important; margin: 0 !important; padding: 0 !important;
		background: #f3f5f9 !important; border: 0 !important; overflow: hidden !important;
	}
	nav.htv2-dm > ul {
		display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important;
		width: auto !important; height: auto !important; margin: 0 !important; padding: 8px 24px 8px 12px !important; list-style: none !important;
		overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important;
		-webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
	}
	nav.htv2-dm > ul::-webkit-scrollbar { display: none; }
	nav.htv2-dm > ul::before, nav.htv2-dm > ul::after { display: none !important; }
	nav.htv2-dm > ul > li {
		display: block !important; flex: 0 0 auto !important; float: none !important; width: auto !important;
		margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; list-style: none !important;
	}
	nav.htv2-dm > ul > li > a {
		display: flex !important; align-items: center !important; gap: 8px !important;
		height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 14px 0 6px !important;
		background: #ffffff !important; border: 1px solid #d5dce8 !important; border-radius: 999px !important; box-shadow: none !important;
		text-decoration: none !important; white-space: nowrap !important; transform: none !important;
	}
	nav.htv2-dm .htv2-dm-ico {
		display: flex !important; align-items: center !important; justify-content: center !important;
		flex: 0 0 32px !important; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important;
		border-radius: 999px !important; background: linear-gradient(180deg, #5bb8f1, #3262c7) !important; overflow: hidden !important;
	}
	nav.htv2-dm .htv2-dm-ico.htv2-dm-km { background: #c94f17 !important; }
	nav.htv2-dm .htv2-dm-ico img {
		display: block !important; width: 18px !important; height: 18px !important; max-width: 18px !important; margin: 0 !important; padding: 0 !important;
		object-fit: contain !important; filter: brightness(0) invert(1) !important; background: transparent !important; border: 0 !important;
	}
	nav.htv2-dm .htv2-dm-ico svg { display: block; width: 18px; height: 18px; }
	nav.htv2-dm .htv2-dm-ten {
		display: inline !important; margin: 0 !important; padding: 0 !important;
		font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: normal !important;
		color: #13286b !important; white-space: nowrap !important; text-transform: none !important;
	}
	/* mép phải mờ 24px: báo còn chip để vuốt */
	nav.htv2-dm::after {
		content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none;
		background: linear-gradient(90deg, rgba(243, 245, 249, 0), #f3f5f9);
	}
	nav.htv2-dm > ul > li > a:focus-visible { outline: 3px solid #0f6fb0 !important; outline-offset: -3px !important; }
}