/* ==========================================================================
   MathX - Trang chi tiet bai viet (route /tin-tuc/<slug>)
   Chuyen the tu ban thiet ke docs/MathX-news-detail-redesign/Main.dc.html

   Nap SAU homev2.css VA newscat.css. Trang nay dung lai tu newscat.css:
     .mxn-subslider  banner khau hieu
     .mxn-crumb*     duong dan tren nhanh cay
     .mxn-card*      the tin (o day them bien the --top: anh tren, 16:9)
   File nay chi bo sung phan rieng cua trang chi tiet.
   ========================================================================== */

/* ------------------------------------------------- Tieu de khung tin -- */
/* newscat.css moi phu .mxh-frame__legend h1 (ten chuyen muc). O day tieu de khung
   la h2 nen phai khai bao rieng, khong thi ra mau muc chu khong phai mau xanh. */
.mxh-frame__legend h2 { color: var(--mxh-green-title); text-transform: uppercase; }

/* ------------------------------------------------------- Dau bai viet -- */
/* Bai viet KHONG boc trong .mxh-frame: khung vien bo tron rat hop voi mot khoi
   ngan, nhung vong quanh 2000px chu doc lien tuc thi nang va roi mach doc.
   Hai khoi tin cuoi trang van dung khung nhu trang chu / trang danh muc. */
.mxn-article { max-width: 824px; margin: 0 auto; padding: 34px 32px 0; }
.mxn-article__head { padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--mxh-line-3); }
.mxh .mxn-article__cat {
	display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
	background: var(--mxh-tint-2); font-size: 12.5px; font-weight: 800;
	letter-spacing: .5px; text-transform: uppercase; color: var(--mxh-green-deep);
}
.mxh .mxn-article__cat:hover { background: var(--mxh-green); color: #FFFFFF; }
.mxn-article__title { margin: 14px 0 12px; font-weight: 900; font-size: 34px; line-height: 1.25; color: var(--mxh-ink); text-wrap: pretty; }
.mxn-article__admin { margin-bottom: 12px; font-size: 13px; }
.mxh .mxn-article__admin a { color: var(--mxh-orange); text-decoration: underline; }

/* --------------------------------------------------------- Than bai -- */
/* Noi dung do admin nhap tu trinh soan thao nen chi co the style theo THE,
   khong theo class. Cot doc rong 760px: o co chu 17px cho ra khoang 70-75 ky tu
   moi dong - khoang de doc nhat voi tieng Viet. */
.mxn-prose { font-size: 17px; line-height: 1.8; color: var(--mxh-ink-2); }
.mxn-prose p { margin: 0 0 20px; }
.mxn-prose strong, .mxn-prose b { font-weight: 800; color: var(--mxh-ink); }
.mxn-prose h2 { margin: 34px 0 14px; font-weight: 900; font-size: 22px; line-height: 1.4; color: var(--mxh-green-title); }
.mxn-prose h3 { margin: 28px 0 12px; font-weight: 800; font-size: 18.5px; line-height: 1.45; color: var(--mxh-ink); }
.mxn-prose h4 { margin: 24px 0 10px; font-weight: 800; font-size: 17px; color: var(--mxh-ink); }
.mxn-prose ul, .mxn-prose ol { margin: 0 0 20px; padding-left: 24px; }
.mxn-prose li { margin-bottom: 9px; }
/* Theme cu dung anh circle_bullet_orange.png lam dau dong; day ve bang CSS de doi mau
   va co gian duoc, va khong phai tai them anh. */
.mxn-prose ul li { list-style: none; position: relative; }
.mxn-prose ul li:before {
	content: ""; position: absolute; left: -18px; top: 12px;
	width: 7px; height: 7px; border-radius: 999px; background: var(--mxh-green);
}
.mxn-prose ol li { list-style: decimal; }
/* Anh trong bai do bien tap vien dan vao, thuong kem style noi tuyen cung kieu
   style="width: 1080px;height: 1080px". max-width: 100% co duoc chieu rong lai,
   nhung chieu cao noi tuyen van thang CSS thuong -> anh bi bop meo. Phai
   !important moi de duoc style noi tuyen (va ca thuoc tinh width/height cua the
   img). width: auto de anh nho hon cot giu nguyen co that, khong bi keo gian. */
.mxn-prose img {
	display: block; width: auto !important; max-width: 100%; height: auto !important;
	border-radius: 14px; margin: 26px auto 8px;
}
.mxn-prose figcaption { font-size: 13.5px; color: var(--mxh-muted-3); text-align: center; margin-bottom: 26px; }
.mxn-prose blockquote {
	margin: 26px 0; padding: 4px 0 4px 22px;
	border-left: 3px solid var(--mxh-frame);
	font-size: 18px; font-style: italic; color: var(--mxh-ink);
}
.mxn-prose a { text-decoration: underline; text-underline-offset: 3px; }
/* Bang trong bai do admin dan vao: chan cho khoi tran ra ngoai cot doc. */
.mxn-prose table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15.5px; }
.mxn-prose th, .mxn-prose td { border: 1px solid var(--mxh-line-2); padding: 9px 12px; text-align: left; }
.mxn-prose th { background: var(--mxh-tint); font-weight: 800; color: var(--mxh-green-text); }
.mxn-prose iframe { max-width: 100%; }

/* ------------------------------------- Cau hoi nhung trong bai ({{qN}}) -- */
/* JS cham diem doc theo id (#cauhoi-N), data-type, data-dapan, data-isdapan va
   thuoc tinh name cua input - KHONG doc theo class. Nen doi ten class o day an toan,
   nhung tuyet doi khong duoc doi id / name / data-*. */
.mxn-quiz {
	border: 1.5px solid var(--mxh-frame); border-radius: 18px; background: var(--mxh-tint);
	padding: 22px 24px; margin: 26px 0;
}
.mxn-quiz__tag {
	display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
	font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--mxh-green-deep);
}
.mxn-quiz__q { font-size: 16.5px; line-height: 1.7; color: var(--mxh-ink); margin-bottom: 14px; }
.mxn-quiz__q p:last-child { margin-bottom: 0; }
.mxn-quiz__rows { display: flex; flex-direction: column; gap: 8px; }
/* Ca dong la vung bam, cao toi thieu 44px - khong bat hoc sinh bam trung o tron 19px. */
.mxn-quiz__row {
	display: flex; align-items: center; gap: 12px; min-height: 44px;
	padding: 6px 14px; border-radius: 12px; border: 1.5px solid transparent; background: #FFFFFF;
	font-size: 15.5px; line-height: 1.5; color: var(--mxh-ink-2); cursor: pointer;
}
.mxn-quiz__row:hover { border-color: var(--mxh-frame); }
.mxn-quiz__row input { width: 19px; height: 19px; flex: none; accent-color: #71BB44; }
.mxn-quiz__fields { display: flex; flex-direction: column; gap: 10px; }
.mxn-quiz__field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mxn-quiz__field > span { flex: none; font-size: 15px; font-weight: 700; color: var(--mxh-ink-3); min-width: 34px; }
.mxn-quiz__field input {
	flex: 1 1 180px; min-width: 0; height: 44px; padding: 0 14px; border-radius: 11px;
	border: 1.5px solid var(--mxh-line-2); background: #FFFFFF;
	font-family: inherit; font-size: 15px; color: var(--mxh-ink);
}
.mxn-quiz__field input:focus { outline: none; border-color: var(--mxh-green); }
.mxn-quiz__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.mxn-quiz__btn {
	height: 44px; padding: 0 26px; border: none; border-radius: 999px; background: var(--mxh-green);
	font-family: inherit; font-size: 14.5px; font-weight: 800; color: #FFFFFF; cursor: pointer;
	transition: background .18s;
}
.mxn-quiz__btn:hover { background: var(--mxh-green-dark); }
.mxh .mxn-quiz__solution { font-size: 14px; font-weight: 700; color: var(--mxh-orange); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Ban cu bao ket qua bang popup Bootstrap (mxPopAlert). Trang nay khong con jQuery
   lan Bootstrap nen bao ngay tai cho - cung ro hon vi mat khong roi khoi cau hoi. */
.mxn-quiz__result { display: none; font-size: 14.5px; font-weight: 800; }
.mxn-quiz__result.is-on { display: inline-flex; align-items: center; gap: 7px; }
.mxn-quiz__result.is-ok { color: var(--mxh-green-deep); }
.mxn-quiz__result.is-err { color: var(--mxh-orange-dark); }
.mxn-quiz__answer { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mxh-line-2); font-size: 15.5px; line-height: 1.7; color: var(--mxh-ink-2); }
.mxn-quiz__answer.is-on { display: block; }

/* ------------------------------------------------------------ Chia se -- */
.mxn-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--mxh-line-3); }
.mxn-share__label { font-size: 13.5px; font-weight: 700; color: var(--mxh-muted-2); }
.mxh .mxn-share__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 44px; padding: 0 16px; border-radius: 999px;
	border: 1.5px solid var(--mxh-line-2); background: #FFFFFF;
	font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--mxh-ink-2); cursor: pointer;
}
.mxh .mxn-share__btn:hover { border-color: var(--mxh-frame); background: var(--mxh-tint); color: var(--mxh-green-deep); }

/* ------------------------------------------- The tin: bien the anh tren -- */
/* newscat.css dat .mxn-grid = 2 cot cho trang danh muc. Trang nay xep 3 cot,
   nen dung bien the rieng thay vi ghi de .mxn-grid (se anh huong ca hai trang
   neu sau nay co ai nap nham thu tu file). */
.mxn-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

.mxn-card--top { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
/* 1:1 cho khop anh thumb tin (admin ep ve 400x400) - 16:9 cat mat nua anh. */
.mxn-card--top .mxn-card__img { flex: none; width: 100%; aspect-ratio: 1; border-radius: 0; }
.mxn-card--top .mxn-card__body { padding: 14px 16px 16px; gap: 7px; }
.mxn-card--top .mxn-card__name { font-size: 16px; }
.mxn-card--top .mxn-card__desc { font-size: 13.5px; }

/* ------------------------------------------------------ Tin lien quan -- */
/* Khoi nay khong co anh: khac vai tro voi "Tin cung loai" o tren, va cung de
   danh sach dai 6 muc khong chiem qua nhieu chieu cao. */
.mxn-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
/* The nay la <a> nen khong co tien to .mxh se bi .mxh a (0,1,1) ghi de mau,
   ca danh sach ra mau xanh thay vi mau muc. */
.mxh .mxn-links__item {
	display: flex; align-items: flex-start; gap: 12px; padding: 14px 0;
	border-bottom: 1px solid var(--mxh-line-2);
	font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--mxh-ink);
}
.mxh .mxn-links__item:hover { color: var(--mxh-orange); }
.mxn-links__go { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--mxh-orange); }
.mxn-links__go svg { width: 100%; height: 100%; display: block; }

/* ====================================================== Responsive: 1040 == */
@media (max-width: 1039px) {
	.mxn-links { grid-template-columns: minmax(0,1fr); }
	/* .mxn-grid--3 (0,2,0) thang .mxn-grid trong media cua newscat.css (0,1,0),
	   nen phai tu ha so cot o day. */
	.mxn-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ======================================================= Responsive: 760 == */
@media (max-width: 759px) {
	.mxn-article { padding: 22px 18px 0; }
	/* 34px o be ngang 354px se thanh 4-5 dong tieu de. */
	.mxn-article__title { font-size: 25px; line-height: 1.3; margin: 12px 0 10px; }
	.mxn-prose { font-size: 16.5px; line-height: 1.75; }
	.mxn-prose p { margin-bottom: 18px; }
	.mxn-prose h2 { font-size: 20px; margin-top: 28px; }
	.mxn-prose h3 { font-size: 17.5px; }
	.mxn-prose blockquote { margin: 22px 0; padding-left: 18px; font-size: 17px; }
	.mxn-quiz { padding: 18px 16px; border-radius: 16px; }
	.mxn-quiz__q { font-size: 16px; }
	.mxn-quiz__row { min-height: 46px; padding: 6px 13px; }
	.mxn-quiz__btn { height: 46px; padding: 0 24px; }
	.mxn-share { gap: 10px; }
	.mxn-share__label { width: 100%; }
	.mxn-grid--3 { grid-template-columns: minmax(0,1fr); }
}