/*
 * Single post — Figma file "Redesign - B2C_THN", node 1:2583 (desktop 1280 × 5154).
 * Box positions and sizes are measured from the vector PDF export of that frame (exact); font
 * sizes, weights and text colours are read from its rendering (±1px). Figma MCP was not available.
 * Every breakpoint below desktop is proposed.
 *
 * The styles of the content blocks themselves (comparison, tables, steps, warnings…) live in
 * assets/css/post-blocks.css, which the editor loads too.
 */

.mnn-main--post {
	background-color: var(--wp--preset--color--base);
}

.mnn-main--post > * {
	margin-block: 0;
}

.mnn-article-page {
	--mnn-post-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12q-1.65 0-2.825-1.175T8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12m-8 8v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388 3.15 1.162q.725.375 1.163 1.088T20 17.2V20zm2-2h12v-.8q0-.275-.137-.5t-.363-.35q-1.35-.675-2.725-1.012T12 15t-2.775.338T6.5 16.35q-.225.125-.363.35T6 17.2zm6-8q.825 0 1.413-.587T14 8t-.587-1.412T12 6t-1.412.588T10 8t.588 1.413T12 10'/%3E%3C/svg%3E");
	--mnn-post-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V2h2v2h8V2h2v2h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5z'/%3E%3C/svg%3E");
	--mnn-post-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15.3 16.7 1.4-1.4-3.7-3.7V7h-2v5.4zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9 2 12t.788-3.9 2.137-3.175T8.1 2.788 12 2t3.9.788 3.175 2.137T21.213 8.1 22 12t-.788 3.9-2.137 3.175-3.175 2.138T12 22m0-2q3.325 0 5.663-2.337T20 12t-2.337-5.663T12 4 6.337 6.338 4 12t2.338 5.663T12 20'/%3E%3C/svg%3E");
	--mnn-post-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16q1.875 0 3.188-1.312T16.5 11.5t-1.312-3.187T12 7 8.813 8.313 7.5 11.5t1.313 3.188T12 16m0-1.8q-1.125 0-1.912-.788T9.3 11.5t.788-1.912T12 8.8t1.913.788.787 1.912-.787 1.913T12 14.2m0 4.8q-3.65 0-6.65-2.037T1 11.5q1.35-3.425 4.35-5.462T12 4t6.65 2.038T23 11.5q-1.35 3.425-4.35 5.463T12 19'/%3E%3C/svg%3E");
	padding: 32px 0 64px;
	color: var(--wp--preset--color--contrast);
}

/* Article 781 + sidebar 371, 32 apart, inside the 1184 content width. */
.mnn-article-page__container {
	display: grid;
	grid-template-columns: minmax(0, 781fr) minmax(0, 371fr);
	align-items: start;
	gap: 32px;
	box-sizing: border-box;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(16px, 3.75vw, 48px);
}

.mnn-article-page__container.has-no-aside {
	grid-template-columns: minmax(0, 880px);
	justify-content: center;
}

.mnn-article-page a:focus-visible,
.mnn-article-page summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ---------- Article card ---------- */

.mnn-article {
	box-sizing: border-box;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--sm);
}

.mnn-article__header > * {
	margin: 0;
}

.mnn-article__category,
.mnn-article__category:hover {
	display: inline-block;
	padding: 7px 12px;
	border-radius: var(--wp--custom--radius--xs);
	background-color: #fbe9ea;
	color: var(--wp--preset--color--primary-dark);
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.4px;
	text-decoration: none;
	text-transform: uppercase;
}

.mnn-article__category:hover {
	background-color: #f6d7da;
}

.mnn-article__header > .mnn-article__title {
	margin-top: 18px;
	font-size: 30px;
	font-weight: 800;
	line-height: 38px;
	letter-spacing: -0.6px;
	overflow-wrap: anywhere;
}

.mnn-article__header > .mnn-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	margin-top: 26px;
	padding: 13px 16px;
	border: 1px solid var(--wp--preset--color--surface-strong);
	border-radius: var(--wp--custom--radius--xs);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 20px;
	list-style: none;
}

.mnn-article__meta li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mnn-article__meta li::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--mnn-post-calendar) center / contain no-repeat;
	mask: var(--mnn-post-calendar) center / contain no-repeat;
}

.mnn-article__meta .mnn-article__meta-author {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.mnn-article__meta .mnn-article__meta-author::before {
	-webkit-mask-image: var(--mnn-post-user);
	mask-image: var(--mnn-post-user);
}

.mnn-article__meta-author a,
.mnn-article__meta-author a:hover {
	color: inherit;
	text-decoration: none;
}

.mnn-article__meta-author a:hover {
	color: var(--wp--preset--color--primary);
}

.mnn-article__meta .mnn-article__meta-reading::before {
	-webkit-mask-image: var(--mnn-post-clock);
	mask-image: var(--mnn-post-clock);
}

.mnn-article__meta .mnn-article__meta-views {
	margin-left: auto;
}

.mnn-article__meta .mnn-article__meta-views::before {
	-webkit-mask-image: var(--mnn-post-eye);
	mask-image: var(--mnn-post-eye);
}

/* ---------- Table of contents (733 × 80, closed) ---------- */

.mnn-toc {
	margin-top: 40px;
	border: 1px solid var(--wp--preset--color--surface-strong);
	border-radius: var(--wp--custom--radius--xs);
	background-color: #f1f3f5;
}

.mnn-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 32px;
	padding: 24px;
	list-style: none;
	cursor: pointer;
}

.mnn-toc__summary::-webkit-details-marker {
	display: none;
}

.mnn-toc__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 26px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.mnn-toc__toggle {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--primary-dark);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
}

.mnn-toc__toggle::after {
	content: "";
	width: 9px;
	height: 5.55px;
	background-color: currentColor;
	-webkit-mask: url(../../assets/icons/cat-caret-down.svg) center / 100% 100% no-repeat;
	mask: url(../../assets/icons/cat-caret-down.svg) center / 100% 100% no-repeat;
}

.mnn-toc__toggle-close,
.mnn-toc[open] .mnn-toc__toggle-open {
	display: none;
}

.mnn-toc[open] .mnn-toc__toggle-close {
	display: inline;
}

.mnn-toc[open] .mnn-toc__toggle::after {
	transform: rotate(180deg);
}

.mnn-toc__nav {
	padding: 0 24px 22px;
}

.mnn-toc__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
	list-style: none;
	counter-reset: mnn-toc;
}

.mnn-toc__item a,
.mnn-toc__item a:hover {
	display: block;
	padding: 6px 0;
	color: var(--wp--preset--color--contrast);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	text-decoration: none;
}

.mnn-toc__item--h2 {
	counter-increment: mnn-toc;
}

.mnn-toc__item--h2 a::before {
	content: counter(mnn-toc) ". ";
	color: var(--wp--preset--color--primary-dark);
}

.mnn-toc__item--h3 a,
.mnn-toc__item--h3 a:hover {
	padding-left: 22px;
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	font-weight: 400;
}

.mnn-toc__item a:hover {
	color: var(--wp--preset--color--primary);
}

/* ---------- Body ---------- */

.mnn-article__image {
	margin: 32px 0 0;
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
}

.mnn-article__image img {
	display: block;
	width: 100%;
	height: auto;
}

.mnn-article__content {
	margin-top: 44px;
}

/* Headings stop a little below the top edge when reached from the table of contents. */
.mnn-article__content :is(h2, h3, h4) {
	scroll-margin-top: 24px;
}

.mnn-article__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 32px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 18px;
}

.mnn-article__tags a,
.mnn-article__tags a:hover {
	padding: 4px 10px;
	border-radius: var(--wp--custom--radius--xs);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.mnn-article__tags a:hover {
	background-color: var(--wp--preset--color--surface-strong);
}

/* ---------- Author box (733 × 292) ---------- */

.mnn-author {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 56px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--surface-strong);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface);
}

.mnn-author__avatar {
	flex: none;
	width: 64px;
	height: 64px;
	border: 2px solid #f1c7cc;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--surface-strong);
	overflow: hidden;
}

.mnn-author__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mnn-author__body {
	min-width: 0;
	max-width: 340px;
}

.mnn-author__body > * {
	margin: 0;
}

.mnn-author__name {
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
}

.mnn-author__name a,
.mnn-author__name a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.mnn-author__name a:hover {
	color: var(--wp--preset--color--primary);
}

.mnn-author__body > .mnn-author__title {
	margin-top: 6px;
	color: var(--wp--preset--color--primary-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.mnn-author__body > .mnn-author__bio {
	margin-top: 10px;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 21px;
}

.mnn-author__body > .mnn-author__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
	padding: 14px 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
	list-style: none;
}

.mnn-author__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--sm);
	transition: box-shadow 0.15s ease;
}

.mnn-author__link:hover {
	box-shadow: var(--wp--preset--shadow--md);
}

.mnn-author__link::before {
	content: "";
	width: 22px;
	height: 22px;
	background: center / contain no-repeat;
}

.mnn-author__link--facebook::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231877f2'%3E%3Cpath d='M24 12a12 12 0 1 0-13.9 11.9v-8.4H7.1V12h3V9.4c0-3 1.8-4.7 4.500-4.700 1.300 0 2.700.2 2.700.2v3h-1.500c-1.500 0-2 .9-2 1.900V12h3.300l-.5 3.500h-2.800v8.400A12 12 0 0 0 24 12'/%3E%3C/svg%3E");
}

.mnn-author__link--tiktok::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16.600 5.800a4.300 4.300 0 0 1-1-2.800h-3.100v12.400a2.600 2.600 0 1 1-1.900-2.500V9.700a5.700 5.700 0 1 0 5 5.700V9a7.400 7.400 0 0 0 4.300 1.400V7.300a4.300 4.300 0 0 1-3.300-1.500'/%3E%3C/svg%3E");
}

.mnn-author__link--youtube::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff0000'%3E%3Cpath d='M23.500 6.200a3 3 0 0 0-2.100-2.100C19.500 3.600 12 3.600 12 3.600s-7.500 0-9.400.500A3 3 0 0 0 .5 6.200C0 8.100 0 12 0 12s0 3.900.5 5.800a3 3 0 0 0 2.100 2.100c1.900.5 9.400.5 9.400.5s7.500 0 9.400-.5a3 3 0 0 0 2.100-2.100c.5-1.900.5-5.800.5-5.800s0-3.900-.5-5.800M9.600 15.600V8.400l6.200 3.600z'/%3E%3C/svg%3E");
}

/* Zalo has no simple glyph in the set; the name itself is the mark. */
.mnn-author__link--zalo::before {
	content: "Zalo";
	width: auto;
	height: auto;
	color: #0068ff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

/* ---------- Sidebar (371 wide) ---------- */

.mnn-article-aside {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.mnn-aside-box {
	padding: 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--sm);
}

.mnn-aside-box__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--preset--color--surface-strong);
}

.mnn-aside-box__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 22px;
}

.mnn-aside-box--latest .mnn-aside-box__title::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21q-.825 0-1.412-.587T2 19V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v14q0 .825-.587 1.413T20 21zm0-2h16V7H4zm2-2v-2h12v2zm0-4V9h4v4zm6 0v-2h6v2zm0-4V9h6v2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21q-.825 0-1.412-.587T2 19V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v14q0 .825-.587 1.413T20 21zm0-2h16V7H4zm2-2v-2h12v2zm0-4V9h4v4zm6 0v-2h6v2zm0-4V9h6v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mnn-aside-box__more,
.mnn-aside-box__more:hover {
	flex: none;
	color: var(--wp--preset--color--primary-dark);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-decoration: none;
}

.mnn-aside-box__more:hover {
	text-decoration: underline;
}

.mnn-aside-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 16px 0 0;
	list-style: none;
}

.mnn-aside-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.mnn-aside-item--plain + .mnn-aside-item--plain {
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--surface-strong);
}

.mnn-aside-box--latest .mnn-aside-list {
	gap: 14px;
}

.mnn-aside-item__thumb {
	position: relative;
	display: block;
	flex: none;
	width: 82px;
	height: 62px;
	border-radius: var(--wp--custom--radius--xs);
	background-color: var(--wp--preset--color--surface-strong);
	overflow: hidden;
}

.mnn-aside-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mnn-aside-item__thumb .mnn-news-card__placeholder {
	position: absolute;
	inset: 0;
	background: url(../../assets/images/logo.png) center / 28px 28px no-repeat;
	opacity: 0.7;
}

.mnn-aside-item__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.mnn-aside-item__label {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 18px;
}

.mnn-aside-item__category,
.mnn-aside-item__category:hover {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
	text-decoration: none;
}

.mnn-aside-item__title,
.mnn-aside-item__title:hover {
	display: -webkit-box;
	overflow: hidden;
	color: var(--wp--preset--color--contrast);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.mnn-aside-item__title:hover {
	color: var(--wp--preset--color--primary);
}

/* ---------- Responsive (proposed; Figma has desktop only) ---------- */

@media (max-width: 1023px) {
	/* The sidebar moves under the article; its two boxes sit side by side. */
	.mnn-article-page__container {
		grid-template-columns: minmax(0, 1fr);
	}

	.mnn-article-aside {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

@media (max-width: 767px) {
	.mnn-article-page {
		padding: 16px 0 40px;
	}

	.mnn-article {
		padding: 16px;
	}

	.mnn-article__header > .mnn-article__title {
		margin-top: 14px;
		font-size: 24px;
		line-height: 31px;
		letter-spacing: -0.4px;
	}

	.mnn-article__header > .mnn-article__meta {
		gap: 6px 14px;
		margin-top: 18px;
		padding: 12px;
		font-size: 13px;
	}

	.mnn-article__meta .mnn-article__meta-views {
		margin-left: 0;
	}

	.mnn-toc {
		margin-top: 24px;
	}

	.mnn-toc__summary {
		padding: 16px;
	}

	.mnn-toc__nav {
		padding: 0 16px 14px;
	}

	.mnn-toc__title {
		font-size: 16px;
	}

	.mnn-toc__item a {
		padding: 9px 0;
	}

	.mnn-article__content {
		margin-top: 28px;
	}

	.mnn-author {
		margin-top: 36px;
		padding: 16px;
	}

	.mnn-article-aside {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: no-preference) {
	html:has(.mnn-toc) {
		scroll-behavior: smooth;
	}
}