/* ==========================================================================
   MENU MOBILE - GIAO DIEN 1                                   01/09/2026
   Thay cho css/jquery.mmenu.all.css (34 KB). Xem ghi chu dau khoi trong
   library/menu.php va js/chung/menu-mobile.js.

   02/09/2026: them icon cho danh muc cap 1, bang danh muc con xo/thu co
   hieu ung, va soat lai toan bo do hoa cho muot tay hon.
   ========================================================================== */

/* ---- Panel truot tu canh trai ------------------------------------------
   Luon nam trong DOM nhung day han ra ngoai man hinh; khong dung
   display:none de con hieu ung truot. */
.mnu {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 100060;
	width: 306px;
	max-width: 86vw;
	background: #fff;
	box-shadow: 6px 0 28px rgba(0, 0, 0, .28);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Cuon het danh sach roi van keo tiep thi trang phia sau BAT DAU CHAY
	   theo (scroll chaining) - kieu gi cung lo mot doan trang duoi lung
	   menu. contain chan dung o day. */
	overscroll-behavior: contain;
	transform: translateX(-100%);
	/* Duong cong "vao nhanh - ra cham" (giong cua truot that) thay cho ease
	   deu deu; .3s du de mat theo kip ma khong thay cho. */
	transition: transform .3s cubic-bezier(.32, .72, 0, 1);
	font-family: Roboto, Helvetica, Arial, sans-serif;
	/* Bam vao muc khong hien khung xanh/xam cua he dieu hanh - da co trang
	   thai :active rieng ben duoi, dep hon. */
	-webkit-tap-highlight-color: transparent;
}

.mnu.dang-mo { transform: translateX(0); }

/* Thanh cuon manh, cung tone voi panel - thanh mac dinh cua Android/Chrome
   day 15px, chiem han mot phan sau be rong chu. */
.mnu::-webkit-scrollbar { width: 5px; }
.mnu::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 3px; }
.mnu::-webkit-scrollbar-track { background: transparent; }

/* ---- Nen toi ------------------------------------------------------------
   The <div> RIENG, khong phai ::before cua .mnu: .mnu co overflow-y:auto nen
   moi phan tu con tran ra ngoai khung 306px deu bi cat - nen se khong bao gio
   phu duoc phan con lai cua man hinh. Cung ly do voi nut dong. */
.mnu-nen {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 100055;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s cubic-bezier(.32, .72, 0, 1), visibility .3s;
}

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

/* ---- Nut dong (ngoai panel, bam sat canh phai panel) ---- */
.mnu-dong {
	position: fixed;
	top: 10px;
	left: min(316px, calc(86vw + 10px));
	z-index: 100061;
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 17px;
	line-height: 38px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: scale(.7);
	transition: opacity .3s cubic-bezier(.32, .72, 0, 1), transform .3s cubic-bezier(.32, .72, 0, 1), visibility .3s;
	-webkit-tap-highlight-color: transparent;
}

.mnu-dong.dang-mo { opacity: 1; visibility: visible; transform: scale(1); }
.mnu-dong:active { background: rgba(0, 0, 0, .75); }

/* ---- O tim danh muc (dinh panel, dinh khi cuon) ------------------------
   Vien duoi + bong rat nhe de khi danh sach cuon len duoi no, mat van thay
   ro day la mot thanh dung yen chu khong phai mot dong cua danh sach. */
.mnu-tim {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid #ececec;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}

/* Icon kinh lup nam TRONG o nhap (position:absolute) chu khong dung canh -
   nhin ra ngay day la mot o de go chu chu khong phai hai thu roi nhau. */
.mnu-tim-boc {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

.mnu-tim-boc > i {
	position: absolute;
	left: 12px;
	color: #aaa;
	font-size: 13px;
	pointer-events: none;
}

.mnu-tim input {
	width: 100%;
	min-width: 0;
	height: 38px;
	padding: 0 34px 0 32px;
	border: 1px solid #e2e2e2;
	border-radius: 19px;
	background: #f6f6f6;
	font-size: 13px;
	color: #333;
	transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.mnu-tim input::-webkit-search-cancel-button { display: none; }

.mnu-tim input:focus {
	outline: none;
	border-color: #e42527;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(228, 37, 39, .12);
}

/* Nut xoa chu trong o tim - chi hien khi da go gi do (JS bat/tat). */
.mnu-tim-xoa {
	position: absolute;
	right: 4px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: #bbb;
	font-size: 13px;
	line-height: 30px;
	cursor: pointer;
}

.mnu-tim-xoa:hover { color: #e42527; }
.mnu-tim-xoa[hidden] { display: none; }

/* ---- Danh sach ---- */
.mnu-ds {
	margin: 0;
	padding: 4px 0 28px;
	list-style: none;
}

/* Ba con cua .mnu-muc nam tren MOT HANG FLEX co xuong dong: <a> (co gian) +
   nut xo (44px co dinh) o hang tren, bang danh muc con chiem tron hang duoi
   (flex-basis:100%).

   TRUOC 02/09/2026 nut xo la position:absolute; height:100% - va do la mot
   loi that: "100%" tinh theo .mnu-muc, ma .mnu-muc chua CA bang danh muc
   con. Xo mot danh muc 59 muc ra thi nut cao 3.488px, ma the <button> thi
   can giua noi dung theo chieu doc, nen dau +/- truot xuong giua bang con -
   do duoc: lech 1.737px so voi dong chu cua chinh no. Nguoi dung bam "+",
   bang xo ra va dau "-" bien mat khoi tam nhin. Cai nut cao 3.488px do con
   nam de len dai 44px ben phai cua TOAN BO bang con, nuot luon cu bam vao
   cac muc con o dai do.

   Xep flex thi nut la anh em that cua <a>, tu cao dung bang dong chu (ke ca
   khi ten danh muc xuong hai dong) va khong the phu len cai gi. */
.mnu-muc {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	border-bottom: 1px solid #f2f2f2;
}

.mnu-muc > a {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 12px;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.mnu-muc > a:hover,
.mnu-muc > a:focus { background: #fafafa; color: #e42527; text-decoration: none; }
.mnu-muc > a:active { background: #f2f2f2; }

/* ---- Icon danh muc cap 1 (02/09/2026) ----------------------------------
   O vuong bo goc, khong phai icon tran: 11 danh muc co ten dai ngan khac
   nhau, dat icon tran thi moi dong ten bat dau o mot cot khac nhau. O co be
   rong co dinh 32px lam thanh mot cot thang tap tu tren xuong duoi.

   Ten icon do js/chung/menu-mobile.js chon theo ten danh muc (bang
   DS_ICON) - khong luu trong database, them danh muc moi thi tu roi vao
   icon mac dinh chu khong bao gio trong. */
.mnu-icon {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: #f4f4f4;
	color: #777;
	font-size: 14px;
	transition: background-color .15s ease, color .15s ease;
}

.mnu-muc > a:hover .mnu-icon,
.mnu-muc > a:focus .mnu-icon { background: #fdeceb; color: #e42527; }

/* Ten danh muc - cho phep xuong dong, khong cat cut. */
.mnu-ten { flex: 1 1 auto; min-width: 0; }

/* Nut xổ danh mục con - be rong 44px cho vua dau ngon tay, chieu cao tu keo
   bang dong chu (align-items:stretch cua .mnu-muc). */
.mnu-mo {
	flex: 0 0 44px;
	width: 44px;
	padding: 0;
	border: none;
	border-left: 1px solid #f2f2f2;
	background: none;
	color: #b5b5b5;
	font-size: 12px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* ---- Dau + (dong) / - (mo) --------------------------------------------
   Ve bang hai gach thay vi dung hai icon Font Awesome roi doi qua lai: doi
   icon thi nhin thay no NHAY cai mot; con o day gach doc chi viec quay 90
   do nam de len gach ngang - van la mot nut, chuyen dong lien mach.

   Mau lay tu currentColor nen tu doi theo mau chu cua nut (xam -> do khi
   dang mo / dang xem), khong phai khai bao lai o tung trang thai. */
.mnu-dau {
	position: relative;
	display: block;
	width: 13px;
	height: 13px;
	margin: 0 auto;
}

.mnu-dau::before,
.mnu-dau::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 13px;
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
	background: currentColor;
	transition: transform .24s cubic-bezier(.32, .72, 0, 1);
}

/* Gach doc - quay ve 0 do (nam chong len gach ngang) khi bang dang mo, con
   lai dung mot gach ngang = dau tru. */
.mnu-dau::after { transform: rotate(90deg); }
.mnu-mo.da-mo .mnu-dau::after { transform: rotate(0deg); }

.mnu-mo.da-mo { color: #e42527; }
.mnu-mo:active { background: #f2f2f2; }

/* ---- Muc dang xem -------------------------------------------------------
   Danh dau bang js/chung/menu-mobile.js (ham danhDau) theo dung ba muc uu
   tien ma thanh mega menu ban may tinh dang dung, nen mo menu tren dien
   thoai hay nhin thanh menu tren may tinh deu thay sang cung mot muc.

   Vach do ben trai chu khong phai to ca dong: menu nay dai hon 600 muc, mot
   dong nen do se hut het mat khoi phan con lai; mot vach manh + icon do +
   chu dam la du de mat bat duoc ngay khi luot qua. */
.mnu-muc.dang-xem > a {
	position: relative;
	background: #fff6f6;
	color: #e42527;
	font-weight: 700;
}

.mnu-muc.dang-xem > a::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: #e42527;
}

/* Icon cua muc dang xem: dao mau (nen do, chu trang) - day la dau hieu manh
   nhat trong ca danh sach, thay ngay khi menu vua truot ra. */
.mnu-muc.dang-xem > a .mnu-icon {
	background: #e42527;
	color: #fff;
	box-shadow: 0 2px 8px rgba(228, 37, 39, .3);
}

.mnu-muc.dang-xem > .mnu-mo { color: #e42527; }

/* ---- Bang danh muc con -------------------------------------------------
   overflow:hidden + transition height: JS do chieu cao that roi chay so
   (xem xoBang trong js/chung/menu-mobile.js). Khong dung max-height voi mot
   con so doan mo: danh muc con o day tu 13 den 102 muc, doan thua bao nhieu
   thi hieu ung tre bay nhieu. */
.mnu-con {
	position: relative;
	flex: 0 0 100%;   /* chiem tron hang duoi <a> + nut xo */
	margin: 0;
	padding: 4px 0 8px;
	list-style: none;
	background: #fbfbfb;
	overflow: hidden;
	transition: height .26s cubic-bezier(.32, .72, 0, 1);
}

/* Bay quen thuoc cua du an: luat CSS cua minh dat "display" (o day la
   flex-basis tren mot muc flex) thang duoc luat [hidden] mac dinh cua trinh
   duyet, nen phai noi ro. */
.mnu-con[hidden] { display: none !important; }

/* Duong doc noi cac muc con - cho biet ca cum nay thuoc ve danh muc ben
   tren, thay vi mot danh sach roi bat dau tu dau. */
.mnu-con::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 8px;
	left: 27px;
	width: 1px;
	background: #e9e9e9;
}

.mnu-con a {
	position: relative;
	display: block;
	padding: 8px 14px 8px 42px;
	color: #5a5a5a;
	font-size: 13px;
	line-height: 1.35;
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease;
}

/* Cham tron nam DE LEN duong doc (vien cung mau nen) - mat doc ra ngay day
   la mot nhanh cua cay, khong phai dau cham trang tri. */
.mnu-con a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 24px;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	border: 2px solid #fbfbfb;
	background: #d5d5d5;
	transition: background-color .15s ease, transform .15s ease;
}

.mnu-con a:hover,
.mnu-con a:focus { background: #f5f5f5; color: #e42527; text-decoration: none; }
.mnu-con a:active { background: #efefef; }
.mnu-con a:hover::before,
.mnu-con a:focus::before { background: #e42527; }

.mnu-con li.dang-xem > a { color: #e42527; font-weight: 700; background: #fff6f6; }
.mnu-con li.dang-xem > a::before { background: #e42527; transform: scale(1.35); }

.mnu-trong {
	margin: 0;
	padding: 28px 14px;
	color: #999;
	font-size: 13px;
	text-align: center;
}

/* Nguoi dung da tat hieu ung chuyen dong trong cai dat he thong - bo het,
   khong ban cai. */
@media (prefers-reduced-motion: reduce) {
	.mnu,
	.mnu-nen,
	.mnu-dong,
	.mnu-con,
	.mnu-dau::before,
	.mnu-dau::after { transition: none; }
}