/* ==========================================================================
   MathX - Trang danh muc tin (route /danh-muc-tin/<slug>)
   Chuyen the tu ban thiet ke docs/MathX-news-category-redesign/Main.dc.html

   File nay nap SAU homev2.css va chi bo sung cac thanh phan rieng cua trang
   danh muc. Toan bo bien mau/font, header, footer, khung .mxh-frame va mui ten
   .mxh-go deu dung lai tu homev2.css - o day khong dinh nghia lai.

   Diem ngat giu dung homev2.css:
     < 1040  an topbar, hien burger, bo cuc ve 1 cot
     <  760  luoi the ve 1 cot, nut phan trang rut gon
   ========================================================================== */

/* ------------------------------------------- Banner khau hieu dau trang -- */
/* Giu lai #sub_slider cua trang danh muc cu. Vien duoi dung mau cam cua he
   .mxh (#F26626) thay cho #f37137 ben style.css de thong nhat ca trang. */
.mxn-subslider { border-bottom: 3px solid var(--mxh-orange); background: var(--mxh-tint); }
.mxn-subslider img { width: 100%; display: block; }

/* ------------------------------------------------- Tieu de chuyen muc -- */
/* Cac legend o trang chu tach 2 mau bang <em>/<i> vi la chu tinh. Ten chuyen muc
   lay tu CSDL nen khong tach duoc; dung mot mau xanh cua he va viet hoa cho dong
   bo voi cac khung con lai. */
.mxh-frame__legend h1 { color: var(--mxh-green-title); text-transform: uppercase; }

/* --------------------------------------------------------- Duong dan -- */
/* Giu lai nhanh cay + con cu (box_title_bg.png) cua trang danh muc cu.
   Anh goc 644x83, la anh raster nen khong phong to qua nhieu. */
.mxn-crumb { max-width: 1264px; margin: 0 auto; padding: 16px 32px 0; }
/* Trang cu co cot noi dung 1024px, nhanh 644px -> chiem 62.9% be ngang.
   Cot moi rong 1200px; neu de dung 644px that thi nhanh chi con 54% va trong cut hon
   ban goc. Nen dat theo ti le 62.9%, chan tren o 800px de khong phong to den muc vo net. */
.mxn-crumb__branch { position: relative; width: 62.9%; max-width: 800px; }
.mxn-crumb__img { display: block; width: 100%; height: auto; }
/* Can chu ngang hang voi con cu. Do tren anh goc: mu cu o dong 0, chan dau tren nhanh
   o dong ~50, tam than cu roi vao ~36% chieu cao anh.
   Anh co gian theo cot con chu thi co dinh, nen khong dung duoc top tinh bang px.
   top: 36% + translateY(-50%) => TAM chu luon trung TAM con cu o moi be ngang.
   left: 17% vi con cu ket thuc o khoang 15.5% be ngang anh (100/644). */
.mxn-crumb__text {
	position: absolute; left: 17%; top: 36%; transform: translateY(-50%);
	display: flex; align-items: center; gap: 10px;
	font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: .3px;
	white-space: nowrap;
}
.mxh .mxn-crumb__home { color: var(--mxh-orange); padding-right: 10px; border-right: 1px solid var(--mxh-orange); }
.mxh .mxn-crumb__home:hover { color: var(--mxh-orange-dark); }
/* O trang danh muc day la <span>, nhung o trang chi tiet la <a> -> phai co tien to
   .mxh, khong thi bi .mxh a (0,1,1) ghi de va hai nua duong dan lech mau nhau. */
.mxh .mxn-crumb__here { color: var(--mxh-orange); }
.mxh a.mxn-crumb__here:hover { color: var(--mxh-orange-dark); }

/* ------------------------------------------------------- Bo cuc 2 cot -- */
.mxn-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 40px; align-items: start; }

/* ------------------------------------------------------- Bai noi bat -- */
.mxn-hero {
	display: flex; flex-direction: column; gap: 7px;
	padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--mxh-line-3);
}
/* Khung ngang nhung anh thumb la vuong 400x400: cover se cat mat gan nua chieu
   cao anh. Cho anh contain de hien tron, phan thua hai ben lap bang chinh anh do
   phong to lam mo (.mxh-blurbg, khai bao trong homev2.css). */
.mxn-hero__img { display: block; width: 100%; height: 330px; border-radius: 16px; overflow: hidden; background: var(--mxh-tint); position: relative; }
.mxn-hero__img img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
.mxn-hero__img .mxh-blurbg { position: absolute; }
.mxn-hero__tag {
	position: absolute; top: 14px; left: 14px;
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
	background: var(--mxh-orange); color: #FFFFFF; font-size: 12px; font-weight: 800; letter-spacing: .6px;
}
.mxn-hero__title { font-weight: 900; font-size: 26px; line-height: 1.32; color: var(--mxh-ink); margin-top: 6px; }
.mxh .mxn-hero:hover .mxn-hero__title { color: var(--mxh-orange); }
.mxn-hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.mxn-hero__desc { font-size: 14.5px; line-height: 1.68; color: var(--mxh-muted-2); }

/* ------------------------------------------------------ The bai viet -- */
/* Bien the cua .mxh-cat__card ben trang chu: cung bo goc 16px, cung do do
   bong, chi khac ti le khung anh va co chu. */
.mxn-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.mxn-card {
	display: flex; gap: 16px; background: #FFFFFF; border: 1px solid var(--mxh-line-2);
	border-radius: 16px; padding: 14px; box-shadow: 0 8px 22px rgba(34,48,28,.05);
	transition: box-shadow .18s, border-color .18s;
}
.mxn-card:hover { box-shadow: 0 14px 30px rgba(34,48,28,.11); border-color: var(--mxh-frame); }
/* Khoa khung ve 1:1 cho moi anh upload: cac the cao bang nhau, va anh thumb tin
   von da la vuong 400x400 nen hien tron, khong bi cat nhu hoi khoa 4:3. */
.mxn-card__img {
	flex: 0 0 38%; aspect-ratio: 1; align-self: flex-start;
	border-radius: 12px; overflow: hidden; background: var(--mxh-tint); display: block;
}
.mxn-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mxn-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* Gioi han 2 dong: tieu de tin dai ngan rat khac nhau, khong chan thi cac hang lech nhau. */
.mxn-card__name {
	font-weight: 800; font-size: 15.5px; line-height: 1.4; color: var(--mxh-ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mxh .mxn-card:hover .mxn-card__name { color: var(--mxh-orange); }
.mxn-card__desc {
	font-size: 13px; line-height: 1.6; color: var(--mxh-muted-2);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Be ngang than the thay doi nhieu theo diem ngat, co luc ngay + luot xem + mui ten
   khong du cho tren mot hang. Giai phap: hang ngoai KHONG xuong dong (mui ten luon
   nam trong the, sat le phai), con dong meta ben trong tu xuong dong khi chat.
   Nho vay khong bao gio tran ra ngoai the o bat ky be ngang nao. */
.mxn-card__foot { margin-top: auto; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.mxn-card__foot .mxn-meta { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 2px; }

/* --------------------------------------- Ngay cap nhat + luot xem -- */
.mxn-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--mxh-muted-3); }
.mxn-meta > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.mxn-meta svg { flex: none; }

/* ---------------------------------------------------------- Phan trang -- */
.mxn-pager {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
	margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--mxh-line-3);
}
.mxh .mxn-pager__link {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px;
	border: 1.5px solid var(--mxh-line-2); background: #FFFFFF;
	font-size: 14.5px; font-weight: 700; color: var(--mxh-ink-2);
	transition: border-color .18s, background .18s, color .18s;
}
.mxh .mxn-pager__link:not(.is-off):hover { border-color: var(--mxh-frame); background: var(--mxh-tint); color: var(--mxh-green-deep); }
.mxh .mxn-pager__link.is-current { background: var(--mxh-green); border-color: var(--mxh-green); color: #FFFFFF; }
.mxn-pager__gap { min-width: 24px; text-align: center; color: var(--mxh-muted-3); font-weight: 700; }
.mxh .mxn-pager__edge { color: var(--mxh-muted-2); }
/* Trang dau/cuoi: khong co link nen ve dang mo, khong bat chuot. */
/* Can tien to .mxh de thang do uu tien voi .mxh .mxn-pager__link o tren. */
.mxh .mxn-pager__link.is-off { color: #C6D2C0; border-color: var(--mxh-line-3); background: #FBFDF9; cursor: default; }
.mxn-pager__arrow { display: none; }

/* -------------------------------------------------------------- Cot phu -- */
.mxn-aside { display: flex; flex-direction: column; gap: 22px; }
.mxn-panel {
	border: 1px solid var(--mxh-line-2); border-radius: 18px; background: #FFFFFF;
	padding: 20px 18px; box-shadow: 0 8px 22px rgba(34,48,28,.05);
}
.mxn-panel__head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--mxh-line-2); }
.mxn-panel__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--mxh-tint-2); display: flex; align-items: center; justify-content: center; }
.mxn-panel__title { margin: 0; font-weight: 900; font-size: 15.5px; letter-spacing: .3px; color: var(--mxh-green-title); text-transform: uppercase; }

.mxn-rank { display: flex; flex-direction: column; }
.mxn-rank__item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--mxh-line-2); }
.mxn-rank__item:last-child { border-bottom: none; padding-bottom: 2px; }
.mxn-rank__no {
	flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--mxh-tint);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 900; color: var(--mxh-green-deep);
}
.mxn-rank__item--top .mxn-rank__no { background: var(--mxh-orange); color: #FFFFFF; }
.mxn-rank__body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mxn-rank__name {
	font-weight: 700; font-size: 13.5px; line-height: 1.45; color: var(--mxh-ink);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mxh .mxn-rank__item:hover .mxn-rank__name { color: var(--mxh-orange); }

.mxn-catlist { display: flex; flex-direction: column; }
/* Tien to .mxh: the nay la <a> nen khong co no se bi .mxh a (0,1,1) ghi de mau. */
.mxh .mxn-catlist__item {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 0; border-bottom: 1px solid var(--mxh-line-2);
	font-size: 13.5px; font-weight: 600; color: var(--mxh-ink-2);
}
.mxn-catlist__item:last-child { border-bottom: none; padding-bottom: 2px; }
.mxh .mxn-catlist__item:hover { color: var(--mxh-green-deep); }
.mxn-catlist__n { flex: none; font-size: 12px; font-weight: 700; color: var(--mxh-muted-3); background: var(--mxh-tint); border-radius: 999px; padding: 3px 9px; }

/* ------------------------------------------------ Chuyen muc chua co bai -- */
.mxn-empty { padding: 40px 20px; text-align: center; font-size: 15px; line-height: 1.7; color: var(--mxh-muted); }

/* ====================================================== Responsive: 1180 == */
/* Tu day tro xuong than the trong luoi 2 cot chi con ~150-200px, khong du cho
   "ngay + N luot xem + mui ten". Rut gon dong meta de van gon mot hang. */
@media (max-width: 1179px) {
	.mxn-card__foot { gap: 8px; }
	.mxn-card__foot .mxn-meta { gap: 8px; font-size: 11.5px; }
	.mxn-meta__long { display: none; }
}

/* ====================================================== Responsive: 1040 == */
@media (max-width: 1039px) {
	/* Cot phu xuong duoi danh sach, ngay sau phan trang. */
	.mxn-layout { grid-template-columns: minmax(0,1fr); gap: 30px; }
	/* Cot hep lai thi cho nhanh trai het be ngang, khong giu 62.9% nua. */
	.mxn-crumb__branch { width: 100%; }
}

/* ======================================================= Responsive: 760 == */
@media (max-width: 759px) {
	.mxn-crumb { padding: 12px 18px 0; }
	.mxn-crumb__text { font-size: 13px; gap: 9px; }
	.mxn-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
	/* Be ngang than the chi con ~170px: thu khung anh lai, thu nho dong meta va bo
	   chu "luot" de ngay + luot xem + mui ten du cho tren mot hang. */
	.mxn-card__img { flex: 0 0 34%; }
	.mxn-hero__img { height: 200px; border-radius: 14px; }
	.mxn-hero__title { font-size: 20px; }
	/* Man hinh hep khong du cho chu "Trang truoc/Trang sau" -> rut con mui ten. */
	.mxn-pager { gap: 7px; }
	.mxn-pager__text { display: none; }
	.mxn-pager__arrow { display: block; }
	.mxh .mxn-pager__link { padding: 0 10px; }
	.mxn-panel { padding: 18px 16px; }
	.mxn-panel__title { font-size: 14.5px; }
}

/* ======================================================== Responsive: 480 == */
/* Nhanh ngan lai theo man hinh nhung chum la o cuoi van chiem cho co dinh theo ti le,
   nen ten chuyen muc dai ("Kỳ thi Toán tiểu học", "Thành tích học sinh") bat dau dam
   vao la tu khoang 390px tro xuong. Bo chu "MathX" o day - header ngay ben tren da co
   logo dan ve trang chu roi, va chi con ten chuyen muc thi khong con dai qua. */
@media (max-width: 479px) {
	.mxn-crumb__home { display: none; }
}