/* Bo loc theo nhom cho bang dai (hd-bang-loc-theo-nhom.js) — MOT khung tim kiem theo mau chu site dua
   (gioangphot.net): hang nut nhom o tren; duoi la dong dem ben trai, o tim co kinh lup ben phai.
   Mau nhan: --hd-bl-nhan do PHP in theo footer_accent cua site; gia tri duoi day la du phong. */
:root { --hd-bl-nhan: #0b5e8e; --hd-bl-nhan-chu: #fff; --hd-bl-nhan-dam: #0b5e8e; } /* -dam: cung mau, toi di cho du 4,5:1 khi lam CHU tren nen trang */

.hd-bl { margin: 14px 0 12px; }
.hd-bl-nhan { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #5b6470; }

/* ---------------------------------------------------------------- hang nut nhom */
.hd-bl-chip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.hd-bl-chip button {
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid #dfe3e8;
	border-radius: 4px;
	background: #fff;
	color: #333;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	transition: border-color .15s, color .15s, background .15s;
}
.hd-bl-chip button:hover { border-color: var(--hd-bl-nhan-dam); color: var(--hd-bl-nhan-dam); background: #fff; }
.hd-bl-chip button[aria-pressed="true"],
.hd-bl-chip button[aria-pressed="true"]:hover { background: var(--hd-bl-nhan); border-color: var(--hd-bl-nhan); color: var(--hd-bl-nhan-chu); font-weight: 600; }

/* ---------------------------------------------------------------- dong dem + o tim */
.hd-bl-hang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.hd-bl .hd-bl-dem { flex: 1 1 auto; margin: 0 !important; padding: 0; font-size: 16px; line-height: 1.4; color: #555; } /* theme dat le duoi cho <p> -> chu lech len tren tam o tim */
.hd-bl-tim {
	position: relative;
	flex: 0 1 560px;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 1px solid #dfe3e8;
	border-radius: 6px;
	background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.hd-bl-tim:focus-within { border-color: var(--hd-bl-nhan); box-shadow: 0 0 0 3px rgba(11, 94, 142, .12); }
.hd-bl-tim input[type=search] {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	height: 54px;
	margin: 0;
	padding: 0 8px 0 18px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #222;
	font-size: 16px; /* >=16px: iPhone khong tu phong to khi cham vao o */
	box-shadow: none;
	outline: none;
}
.hd-bl-tim input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
.hd-bl-tim button {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 6px 6px 0;
	background: transparent;
	color: var(--hd-bl-nhan-dam);
	cursor: pointer;
	box-shadow: none;
}
.hd-bl-tim button:hover { background: rgba(0, 0, 0, .04); }

/* ---------------------------------------------------------------- xem them, khong khop */
.hd-bl-them {
	display: block;
	width: 100%;
	max-width: 360px;
	min-height: 44px;
	margin: 10px auto 18px;
	padding: 0 18px;
	border: 1px solid var(--hd-bl-nhan-dam);
	border-radius: 6px;
	background: #fff;
	color: var(--hd-bl-nhan-dam);
	font-size: 15px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
.hd-bl-them:hover { background: var(--hd-bl-nhan-dam); color: #fff; }
.hd-bl-them[hidden] { display: none; }
.hd-bl-rong { margin: 10px 0; padding: 12px 14px; border: 1px dashed #ccc; border-radius: 6px; color: #555; font-size: 15px; }
.hd-bl-rong[hidden] { display: none; }

/* bang JSON: da thu gon con 30 dong nen bo khung cuon 70vh (cuon long trong cuon kho dung tren dien thoai) */
.hd-btc.hd-bl-co-thu-gon .hd-btc-cuon { max-height: none; overflow-x: auto; overflow-y: visible; }
.hd-btc .hd-btc-loc[hidden] { display: none !important; }

/* ---------------------------------------------------------------- dien thoai */
@media (max-width: 600px) {
	/* nut nhom mot hang cuon ngang: 15 nut xep 4 hang se day bang xuong qua xa */
	.hd-bl-chip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
	.hd-bl-chip button { flex: 0 0 auto; min-height: 40px; padding: 0 14px; font-size: 15px; }
	/* o tim len truoc, dong dem xuong duoi */
	.hd-bl-tim { flex: 1 1 100%; order: -1; }
	.hd-bl-tim input[type=search], .hd-bl-tim button { height: 48px; }
	.hd-bl-tim button { width: 48px; }
	.hd-bl .hd-bl-dem { font-size: 14px; }
}