/* ================= NỘI DUNG BÀI VIẾT ================= */
.post-content {
	--pc-green: #2ea043;
	--pc-num: 30px;                 /* đường kính vòng số */
	--pc-gap: 16px;
	--pc-indent: calc(var(--pc-num) + var(--pc-gap) * 2 + 4px); /* số + vạch xanh */
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	counter-reset: h2;
	padding-left: var(--pc-indent);  /* đoạn văn thụt vào thẳng hàng với tiêu đề */
	color: #4b5563;
}
.post-content p { font-size: 16px !important; line-height: 1.7; margin-bottom: .8rem; }
.post-content p:has(img) { text-align: center; }
.post-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---- H2: vòng số xanh + vạch dọc ---- */
.post-content h2 {
	counter-reset: h3;
	counter-increment: h2;
	position: relative;
	display: block;
	margin: 28px 0 10px calc(var(--pc-indent) * -1);
	padding: 12px 0 12px var(--pc-indent);
	min-height: var(--pc-num);
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	line-height: 1.3;
	color: #111827;
	scroll-margin-top: 90px;         /* chừa chỗ cho header dính khi nhảy từ mục lục */
	background: linear-gradient(var(--pc-green), var(--pc-green)) no-repeat
	            calc(var(--pc-num) + var(--pc-gap)) center / 4px 36px;
}
.post-content h2 strong { font-weight: 700 !important; }
.post-content h2::before {
	content: counter(h2);
	position: absolute; left: 0; top: 50%;
	transform: translateY(-50%);
	width: var(--pc-num); height: var(--pc-num);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: calc(var(--pc-num) * .5); font-weight: 700; color: #fff;
	background: radial-gradient(circle at 30% 25%, #5fd17a, var(--pc-green) 70%);
	box-shadow: 0 0 0 7px rgba(46,160,67,.15), 0 6px 14px rgba(46,160,67,.3);
}
/* đường kẻ ngăn giữa các mục (trừ mục đầu) */
.post-content h2 ~ h2 { margin-top: 44px; }
.post-content h2 ~ h2::after {
	content: ""; position: absolute; left: 0; right: 0; top: -2px;
	height: 1px; background: #eceff3;
}

/* ---- H3 ---- */
.post-content h3 {
	font-size: 18px !important; font-weight: 600 !important;
	color: #1f2937; margin: 18px 0 8px !important;
	scroll-margin-top: 90px;
}
.post-content h3::before {
	counter-increment: h3;
	content: counter(h2) "." counter(h3) " ";
	color: var(--pc-green); font-weight: 700;
}

/* ---- Bảng ---- */
.post-content table { width: 100% !important; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.post-content th, .post-content td { padding: 10px 14px; text-align: left; border: 1px solid #eaeaea; }
.post-content th { background: #f7f7f7; color: #333; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.post-content tr:nth-child(even) td { background: #fafafa; }

/* ================= MỤC LỤC ================= */
.post-content #main-toc {
	position: relative; overflow: hidden;
	margin: 0 0 28px calc(var(--pc-indent) * -1);
	padding: 15px;
	border: 1px solid #cfe3fb; border-radius: 18px;
	background: linear-gradient(135deg, #eef6ff 0%, #f7fbff 55%, #e3f1ff 100%);
	box-shadow: 0 6px 20px rgba(37,99,235,.08);
}
.post-content #main-toc::after {           /* quyển sách mờ góc phải */
	content: "\f518"; font-family: "Font Awesome 5 Free"; font-weight: 900;
	position: absolute; right: 18px; bottom: -6px;
	font-size: 110px; color: rgba(37,99,235,.08); pointer-events: none;
}
.pc-toc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.pc-toc-head .ic { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%; background: #dbeafe; color: #1d6fd8; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.pc-toc-head .t { font-size: 1.5rem; font-weight: 700; color: #111827; line-height: 1.2; }
.pc-toc-head .s { font-size: .9rem; color: #6b7280; }

.pc-toc-list { column-count: 2; column-gap: 56px; column-rule: 1px solid #d5e4f7; position: relative; z-index: 1; }
.pc-toc-list > div { break-inside: avoid; display: flex; align-items: center; gap: 14px; padding: 5px 6px; margin: 0 !important; border-radius: 8px; }
.pc-toc-list > div:hover { background: rgba(37,99,235,.07); }
.pc-toc-list .num { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: #dbeafe; color: #1d4ed8; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pc-toc-list a { color: #1d6fd8; font-size: 1rem; text-decoration: none; }
.pc-toc-list a:hover { color: #0b4fae; text-decoration: underline; }
/* mục con (h3) */
.pc-toc-list > div.lv3 { padding-left: 56px; }
.pc-toc-list > div.lv3 .num { width: auto; height: auto; flex: none; background: none; font-size: .85rem; color: #6b7280; }
.pc-toc-list > div.lv3 a { font-size: .92rem; }

/* ================= MOBILE ================= */
@media (max-width: 576px) {
	.post-content { --pc-num: 30px; --pc-gap: 10px; padding-left: 0; }
	.post-content p { text-align: justify; }
	.post-content h2 { margin-left: 0; font-size: 1.25rem !important; background-size: 3px 26px; }
	.post-content h2::before { box-shadow: 0 0 0 4px rgba(46,160,67,.15); }
	.post-content #main-toc { margin-left: 0; padding: 12px; border-radius: 14px; }
	.post-content #main-toc::after { display: none; }
	.pc-toc-head .ic { width: 44px; height: 44px; flex-basis: 44px; font-size: 18px; }
	.pc-toc-head .t { font-size: 1.15rem; }
	.pc-toc-head .s { font-size: .8rem; }
	.pc-toc-list { column-count: 1; }
	.pc-toc-list .num { width: 30px; height: 30px; flex-basis: 30px; font-size: .9rem; }
	.pc-toc-list a { font-size: 14px; }
}









/*.post-content h2{
	font-size:1.5rem !important;
	font-weight: 500 !important;
	display: flex;
	margin-bottom:0px;
}
.post-content h2 strong{
	font-weight: 500 !important;
}
.post-content h3{
	font-size:18px !important;
	font-weight: 500 !important;
	margin-left:25px !important;
}
.post-content p{
	font-size:16px !important;
}
.post-content p:has(img) {
    text-align: center;
}
.post-content {
	font-family: Helvetica Neue,Helvetica,Arial,sans-serif!important;
	counter-reset: h2;
}
.post-content h2 {
	counter-reset: h3;
}
.post-content h2::before {
	counter-increment: h2;
	content: counter(h2) " ";
	font-weight: 500;
	font-size: 3rem;
	color:#7cb157;
	padding: 0px 10px 0px 0px;
	float: left;
	margin-top: -7px;
}
.post-content h3::before {
	counter-increment: h3;
	content: counter(h2) "." counter(h3) " ";
	font-weight: 600;
}
.post-content table {
    width: 100% !important;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.post-content th,
.post-content td {
    padding: 10px 14px;
    text-align: left;
    border: 1px solid #eaeaea;
}
.post-content th {
    background: #f7f7f7;
    color: #333;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.post-content tr:nth-child(even) td {
    background: #fafafa;
}
#main-toc {
	counter-reset: item;
	margin-bottom: 1rem;
}
#main-toc > div {
	counter-increment: item;
	margin-left: 10px;
}#main-toc a::before {
	content: attr(data-number) " ";
	font-weight: 600;
	color: #555;
}

#main-toc {
	background: #f9fafb;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	font-family: "Roboto", sans-serif;
}
#main-toc strong {
	display: block;
	font-size: 1.2rem;
	color: #222;
	margin-bottom: 10px;
	position: relative;
	padding-left: 28px;
}
#main-toc strong::before {
	content: "📖";
	position: absolute;
	left: 0;
	top: 0;
	font-size: 18px;
}
#main-toc {
	counter-reset: item;
}
#main-toc > div {
	counter-increment: item;
	margin: 6px 0;
	padding-left: 8px;
	position: relative;
}
#main-toc a {
	color: #0069d9;
	text-decoration: none;
	transition: all 0.2s ease;
}
#main-toc a:hover {
	color: #0056b3;
	text-decoration: underline;
}
#main-toc > div:hover {
	background-color: #eef6ff;
	border-radius: 6px;
}
@media (max-width: 576px) {
	.post-content p{
		text-align:justify;
	}
	.post-content h2{
		font-size:1.3rem !important;
		display: flex;
		margin-bottom:0px;
	}
	.post-content h2::before {
		font-size: 3rem;
		margin-top: -10px;
	}
	#main-toc strong {
		font-size: 16px;
	}
	#main-toc a {
		font-size: 14px;
	}
}*/