/* CSS riêng của mothe.vn, màu lấy từ logo. */
:root {
	--mt-navy: #002870;
	--mt-navy-2: #003890;
	--mt-blue: #0058c8;
	--mt-teal: #00a090;
	--mt-amber: #f0a800;
	--mt-ink: #16233f;
	--mt-muted: #4f5b73;
	--mt-line: #dfe5ef;
	--mt-tint: #f3f6fb;
	--mt-gutter: max(16px, calc((100% - 1170px) / 2));
}

/* Nút Lưu và chia sẻ đè lên ảnh ở các trang danh sách: site chưa có trang danh sách đã lưu. */
.favour_in_image,
.social_icon_inimage {
	display: none !important;
}

/* Bảng so sánh thẻ: mũi tên cuộn bị ẩn trên máy tính nên co cột để thấy đủ các thẻ. */
@media (min-width: 1200px) {
	.comparison-wrapper > .comparison-item {
		flex: 1 1 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}
}

/* Khung chung của trang chủ */
.mt-hero,
.mt-section {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding-inline: var(--mt-gutter);
	color: var(--mt-ink);
}

.mt-section {
	padding-block: 64px;
}

.mt-section h2 {
	margin: 0 0 8px;
	color: var(--mt-navy);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	line-height: 1.25;
}

.mt-section h3 {
	margin: 0 0 16px;
	color: var(--mt-navy);
	font-size: 1.125rem;
	line-height: 1.35;
}

.mt-section p.mt-intro {
	margin: 0 0 32px;
	color: var(--mt-muted);
	font-size: 1.0625rem;
}

.mt-section p.mt-more {
	margin: 32px 0 0;
	font-weight: 700;
}

.mt-more a {
	color: var(--mt-blue);
	text-decoration: none;
}

.mt-more a::after {
	content: " →";
}

.mt-more a:hover {
	text-decoration: underline;
}

/* Khu đầu trang */
.mt-hero {
	position: relative;
	overflow: hidden;
	padding-block: 72px;
	background: var(--mt-navy);
}

.mt-hero::before {
	content: "";
	position: absolute;
	left: -150px;
	bottom: -210px;
	width: 560px;
	height: 350px;
	border-radius: 30px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='54'%3E%3Crect width='72' height='54' rx='9' fill='%23f0a800'/%3E%3Cpath d='M24 0v54M48 0v54M0 18h72M0 36h72' stroke='%23c98c00' stroke-width='2'/%3E%3C/svg%3E") 214px 44px no-repeat,
		linear-gradient(135deg, var(--mt-blue), var(--mt-navy-2));
	transform: rotate(-12deg);
}

.mt-hero__grid.wp-block-columns {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
	margin: 0;
}

.mt-hero .wp-block-column {
	margin: 0;
}

.mt-hero h1 {
	margin: 0 0 20px;
	color: #fff;
	font-size: clamp(2rem, 1.3rem + 2.5vw, 3.25rem);
	line-height: 1.16;
	text-wrap: balance;
}

.mt-lead {
	max-width: 34em;
	margin: 0;
	color: #dbe6fa;
	font-size: 1.125rem;
	line-height: 1.65;
}

.mt-picker.wp-block-column {
	padding: 24px 24px 12px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(0, 20, 60, .35);
}

.mt-picker h2 {
	margin: 0 0 12px;
	color: var(--mt-navy);
	font-size: 1.25rem;
	line-height: 1.3;
}

.mt-picker__list.wp-block-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-picker__list li {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--mt-line);
	list-style: none;
}

.mt-picker__list a {
	position: relative;
	display: block;
	padding: 12px 28px 12px 0;
	color: var(--mt-muted);
	font-size: .9375rem;
	line-height: 1.4;
	text-decoration: none;
}

.mt-picker__list a::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: 4px;
	color: var(--mt-blue);
	font-size: 1.125rem;
	transform: translateY(-50%);
	transition: transform .15s ease;
}

.mt-picker__list a:hover::after {
	transform: translate(4px, -50%);
}

.mt-picker__list strong {
	display: block;
	color: var(--mt-navy);
	font-size: 1.0625rem;
}

.mt-picker__list a:hover strong {
	color: var(--mt-blue);
}

/* Chuẩn bị trước khi đăng ký */
.mt-prep {
	background: var(--mt-tint);
}

.mt-prep__grid.wp-block-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px;
	margin: 0;
}

.mt-prep .wp-block-column {
	margin: 0;
}

.mt-checks.wp-block-list,
.mt-steps.wp-block-list,
.mt-warns.wp-block-list {
	margin: 0;
	padding: 0;
	counter-reset: mt-step;
	list-style: none;
}

.mt-checks li,
.mt-steps li,
.mt-warns li {
	position: relative;
	margin: 0 0 12px;
	padding: 0 0 0 32px;
	font-size: 1rem;
	line-height: 1.5;
	list-style: none;
}

.mt-checks li::before,
.mt-steps li::before,
.mt-warns li::before {
	position: absolute;
	top: 1px;
	left: 0;
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: #fff;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

.mt-checks li::before {
	content: "✓";
	background: var(--mt-teal);
}

.mt-steps li::before {
	counter-increment: mt-step;
	content: counter(mt-step);
	background: var(--mt-navy-2);
}

.mt-warns li::before {
	content: "!";
	background: var(--mt-amber);
	color: var(--mt-ink);
}

/* Bài viết mới */
.mt-latest h2 {
	margin-bottom: 28px;
}

.mt-posts .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-posts .wp-block-post {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-posts .wp-block-post-featured-image {
	margin: 0 0 14px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--mt-tint);
}

.mt-posts .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	transition: transform .2s ease;
}

.mt-posts .wp-block-post-featured-image a:hover img {
	transform: scale(1.03);
}

.mt-posts .wp-block-post-title {
	margin: 0 0 8px;
	font-size: 1.125rem;
	line-height: 1.35;
}

.mt-posts .wp-block-post-title a {
	color: var(--mt-ink);
	text-decoration: none;
}

.mt-posts .wp-block-post-title a:hover {
	color: var(--mt-blue);
}

.mt-posts .wp-block-post-excerpt,
.mt-posts .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--mt-muted);
	font-size: .9375rem;
	line-height: 1.55;
}

/* Công khai về liên kết tiếp thị */
.mt-note {
	padding-block: 28px;
	border-top: 1px solid var(--mt-line);
}

.mt-note p {
	max-width: 880px;
	margin: 0;
	color: var(--mt-muted);
	font-size: .9375rem;
	line-height: 1.6;
}

.mt-note strong {
	color: var(--mt-ink);
}

.mt-note a {
	color: var(--mt-blue);
}

@media (max-width: 900px) {
	.mt-hero {
		padding-block: 48px 32px;
	}

	.mt-hero::before {
		display: none;
	}

	.mt-hero__grid.wp-block-columns,
	.mt-prep__grid.wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.mt-posts .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
	}

	.mt-section {
		padding-block: 48px;
	}
}

@media (max-width: 600px) {
	.mt-posts .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	.mt-picker.wp-block-column {
		padding: 20px 16px 8px;
	}
}