/* ==========================================================================
   O TIM KIEM GOI Y - GIAO DIEN 1                            01/09/2026
   ==========================================================================
   Di kem js/tim-kiem-goi-y.js. File JS boc o nhap lai trong
   <span class="tkgy-boc"> roi chen mot <div class="tkgy-hop"> ngay sau o
   nhap; moi dong goi y la mot the <a class="tkgy-mon">.

   Bo cuc:
     span.tkgy-boc            (position: relative - moc cho bang goi y)
       input[name=q]
       div.tkgy-hop(.mo)      (position: absolute - THA XUONG duoi o nhap)
         a.tkgy-mon           img + span.tkgy-tt(span.tkgy-ten + span.tkgy-gia)
         a.tkgy-tatca
       (hoac) div.tkgy-trong

   VI SAO BANG GOI Y PHAI LA position:absolute:
   de no o trong dong chay binh thuong thi cai bang cao ~1800px se DAY CAO
   CA CAC KHOI CHA - header ban may tinh (.fs-wrap) phinh tu 65px len
   1906px. Header lai la position:fixed z-index:1000, nen ca cai hop trong
   suot khong lo do phu len tren lop lam toi nen (.tkgy-nen, z-index 998) va
   trang nhin nhu khong duoc lam toi ti nao. Tach ra khoi dong chay thi
   header ve dung 65px, phan con lai cua trang toi dung nhu mong doi.
   ========================================================================== */

/* Moc dinh vi. Khong dat "display" o day: o may tinh the <span> nay nam
   trong .control-group, con o ban hep css/gio-hang.css da cho no
   display:block + flex:1 1 auto - de nguyen thi ca hai noi deu dung. */
.tkgy-boc {
	position: relative;
}

.tkgy-hop {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	display: none;
	min-width: 280px;
	max-height: 70vh;
	margin-top: 4px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e3e3e3;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
	text-align: left;
}

.tkgy-hop.mo {
	display: block;
}

/* ---- Mot dong goi y ---- */
.tkgy-mon {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid #f2f2f2;
	color: #222;
	text-decoration: none;
}

.tkgy-mon:last-of-type {
	border-bottom: 0;
}

.tkgy-mon:hover,
.tkgy-mon:focus,
.tkgy-mon.dang-chon {
	background: #f4f8fc;
	color: #222;
	text-decoration: none;
}

.tkgy-mon img {
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	object-fit: contain;
	background: #fff;
}

/* min-width:0 - thieu no thi the con khong co lai duoc va ten san pham dai
   se lam bang goi y rong hon o nhap. */
.tkgy-tt {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.tkgy-ten {
	display: block;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.35;
	color: #222;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Doan khop tu khoa - js chen the <b> quanh doan do. */
.tkgy-ten b {
	font-weight: 700;
	color: #1b5e9e;
}

.tkgy-gia {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: #d0021b;
}

.tkgy-gia s {
	margin-left: 6px;
	font-size: 12px;
	font-weight: 400;
	color: #999;
}

/* ---- Dong cuoi: xem tat ca ket qua ---- */
.tkgy-tatca {
	display: block;
	padding: 10px 12px;
	border-top: 1px solid #ececec;
	background: #fafafa;
	font-size: 13px;
	font-weight: 600;
	color: #1b5e9e;
	text-align: center;
	text-decoration: none;
}

.tkgy-tatca:hover,
.tkgy-tatca:focus {
	background: #f0f5fa;
	color: #14477a;
	text-decoration: none;
}

.tkgy-trong {
	padding: 16px 12px;
	font-size: 13px;
	color: #777;
	text-align: center;
}

/* ==========================================================================
   LOP PHU LAM TOI NEN KHI DANG XEM GOI Y                    02/09/2026
   ==========================================================================
   Truoc day bang goi y tha xuong tren mot trang van sang binh thuong, nen
   mat khong biet nen nhin vao dau; bam ra ngoai co dong that nhung khong co
   gi bao cho biet la bam duoc.

   z-index 998 - thap hon header mot bac: khoi header ban hep (.hd-hep khi
   dinh) va thanh mega menu (header.fs-header) deu dat z-index 1000, nen ca
   hai KHONG bi lam toi. Dung y muon: o tim kiem va bang goi y phai sang ro,
   chi phan noi dung ben duoi toi di.

   O tim kiem cua ban may tinh (form.ipt-sH) lai nam thang trong <body> va
   khong co z-index nao, nen rieng no phai duoc nang len bang lop
   .tkgy-tren (js/tim-kiem-goi-y.js gan/go lop nay khi mo/dong).
   ========================================================================== */
.tkgy-nen {
	position: fixed;
	inset: 0;
	z-index: 998;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, visibility .15s;
}

.tkgy-nen.mo {
	opacity: 1;
	visibility: visible;
}

/* Nang ca o nhap LAN bang goi y len tren lop phu. Neu chi nang bang goi y
   thi o dang go bi lam toi - nhin rat la. */
.tkgy-boc.tkgy-tren {
	z-index: 999;
}

@media (prefers-reduced-motion: reduce) {
	.tkgy-nen { transition: none; }
}

/* ---- Man hinh hep ----
   Cham ngon tay can dong cao hon, va bang goi y khong duoc cao qua nua man
   hinh: ban phim ao da chiem mat mot nua roi. */
@media (max-width: 767px) {
	.tkgy-hop {
		min-width: 0;
		max-height: 60vh;
	}

	.tkgy-mon {
		padding: 9px 10px;
	}

	.tkgy-mon img {
		flex: 0 0 42px;
		width: 42px;
		height: 42px;
	}
}