/* Bổ sung cho bản WordPress, nạp sau CSS của app (src/index.css). Dùng chung biến màu --mh-* của .site-inner-page.
   Trang nội dung viết bằng khối WordPress thường (đoạn văn, tiêu đề, danh sách, bảng, nút, chi tiết) — các lớp dưới đây tạo kiểu cho chúng. */

/* ---- Bảng giá: công tắc tháng/năm (assets/theme.js đổi data-yearly) ---- */
.pricing-catalog[data-yearly="0"] [data-period="y"], .pricing-catalog[data-yearly="1"] [data-period="m"] { display: none; }

/* ---- Trang chủ: phần khối WordPress thay cho icon React ---- */
.mh-home .wp-block-group { box-sizing: border-box; }
.mh-principles-grid p.mh-check::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; background: #eabf72; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.mh-principles-grid p.mh-link { display: block; margin-bottom: 0; }
.mh-faq summary::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; transition: transform .2s; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%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' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.mh-faq details[open] summary::after { transform: rotate(180deg); }
.mh-faq .wp-block-details > p { margin: 0; }
.mh-hero-search button:disabled, .mh-topic-form button:disabled { opacity: .65; cursor: not-allowed; }

/* ---- Trang nội dung (page.php, single.php, index.php) ---- */
.mh-page { max-width: 64rem; margin-inline: auto; padding: 32px 16px 56px; }
@media (min-width: 640px) { .mh-page { padding-inline: 24px; } }
.mh-page-wide { max-width: 72rem; }
.mh-crumbs { margin-bottom: 12px; color: var(--mh-muted); font-size: 12px; }
.mh-crumbs a:hover { text-decoration: underline; }
.mh-page-title { color: var(--mh-text); font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.mh-post-meta { margin-top: 8px; color: var(--mh-muted); font-size: 13px; }
.mh-post-meta a { color: inherit; text-decoration: underline; }
.mh-post-cover { margin-top: 20px; }
.mh-post-cover img { width: 100%; height: auto; border-radius: 14px; }
.mh-lead { margin-top: 10px; max-width: 48rem; color: var(--mh-muted); font-size: 15px; line-height: 1.7; }
.mh-muted { color: var(--mh-muted); font-size: 12px; }

.mh-prose { margin-top: 20px; color: var(--color-slate-700); font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.mh-prose > * + * { margin-top: 14px; }
.mh-prose h2 { margin-top: 32px; color: var(--mh-text); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.mh-prose h3 { margin-top: 24px; color: var(--mh-text); font-size: 1.05rem; font-weight: 750; }
.mh-prose h4 { margin-top: 20px; color: var(--mh-text); font-weight: 700; }
.mh-prose :is(h2, h3, h4):first-child { margin-top: 0; }
.mh-prose a:not(.wp-block-button__link) { color: var(--color-gold-400); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.mh-prose ul:not(.pricing-catalog ul) { list-style: disc; padding-left: 1.3rem; }
.mh-prose ol:not(.pricing-catalog ol) { list-style: decimal; padding-left: 1.3rem; }
.mh-prose li + li { margin-top: 6px; }
.mh-prose b, .mh-prose strong { color: var(--mh-text); }
.mh-prose blockquote { border-left: 3px solid #eabf72; padding-left: 16px; color: var(--mh-muted); font-style: italic; }
.mh-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.mh-prose figure { margin-inline: 0; }
.mh-prose figcaption { margin-top: 6px; color: var(--mh-muted); font-size: 12px; text-align: center; }
.mh-prose code { border-radius: 6px; background: var(--mh-surface-2); padding: 1px 5px; font-family: var(--font-mono); font-size: .88em; }
.mh-prose hr { border: 0; border-top: 1px solid var(--mh-line); margin-block: 28px; }
.mh-prose .mh-lead { margin-top: 0; }

/* Bảng (khối Bảng và [mh_partner_commissions]) — cuộn ngang trong khung, không tràn trang ở 375px. */
.mh-prose .wp-block-table, .mh-table-wrap { overflow-x: auto; border: 1px solid var(--mh-line); border-radius: 14px; background: var(--mh-surface); }
.mh-prose table { width: 100%; min-width: 19rem; border-collapse: collapse; font-size: 14px; }
.mh-prose th { background: var(--mh-surface-2); color: var(--mh-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.mh-prose :is(th, td) { padding: 9px 14px; border-top: 1px solid var(--mh-line); vertical-align: top; font-variant-numeric: tabular-nums; }
.mh-prose thead th { border-top: 0; }
.mh-prose tfoot td { border-top: 2px solid var(--mh-line-strong); background: var(--mh-surface-2); color: var(--mh-text); }
.mh-prose td small { color: var(--mh-faint); font-size: 12px; }
.mh-prose td em { color: var(--mh-faint); font-size: 12px; font-style: normal; }
.mh-prose .wp-block-table table { border: 0; }
.mh-prose .wp-block-table :is(td, th) { border-left: 0; border-right: 0; }
.mh-right { text-align: right !important; }
.mh-good { color: var(--color-emerald-500); font-weight: 700; }

/* Thẻ, lưới */
.mh-card { border: 1px solid var(--mh-line); border-radius: 18px; background: var(--mh-surface); padding: 18px; box-shadow: 0 20px 40px -24px #00000026; }
.mh-prose .mh-card { margin-top: 18px; }
.mh-card > * + * { margin-top: 8px; }
.mh-card h2 { margin-top: 0; font-size: 1.05rem; }
.mh-card h3 { margin-top: 4px; }
.mh-card p { font-size: 14px; }
.mh-card-gold { border-color: color-mix(in srgb, var(--color-gold-300) 60%, transparent); background: color-mix(in srgb, var(--color-gold-300) 12%, var(--mh-surface)); }
.mh-eyebrow { color: var(--color-gold-400); font-size: 12px !important; font-weight: 800; letter-spacing: .06em; }
.mh-grid-2, .mh-grid-4 { display: grid; gap: 14px; }
.mh-prose .mh-grid-2, .mh-prose .mh-grid-4 { margin-top: 20px; }
.mh-grid-2 > .mh-card, .mh-grid-4 > .mh-card { margin-top: 0; }
@media (min-width: 640px) { .mh-grid-2, .mh-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mh-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mh-prose .mh-link-card { padding: 0; }
.mh-prose .mh-link-card a { display: block; padding: 16px 18px; color: var(--mh-text); font-weight: 400; text-decoration: none; }
.mh-link-card:hover { border-color: #eabf72; box-shadow: 0 0 0 2px #eabf7255; }

/* Nút (khối Nút) = btn-gold */
.mh-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.mh-prose .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; background: #eabf72; padding: 10px 18px; color: #202526; font-size: 14px; font-weight: 700; text-decoration: none; transition: filter .2s; }
.mh-prose .wp-block-button__link:hover { filter: brightness(1.06); }
.mh-prose .is-style-outline .wp-block-button__link { border: 1px solid var(--mh-line-strong); background: var(--mh-surface); color: var(--mh-text); }

/* Khối Chi tiết = hỏi đáp */
.mh-prose .wp-block-details { border: 1px solid var(--mh-line); border-radius: 16px; background: var(--mh-surface); padding: 14px 16px; font-size: 14px; }
.mh-prose .wp-block-details summary { color: var(--mh-text); font-weight: 650; cursor: pointer; }
.mh-prose .wp-block-details > :not(summary) { margin-top: 8px; color: var(--mh-muted); }
.mh-prose .wp-block-details + .wp-block-details { margin-top: 10px; }

/* Blog */
.mh-post-grid { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 640px) { .mh-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mh-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mh-post-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--mh-line); border-radius: 18px; background: var(--mh-surface); transition: border-color .2s, transform .2s; }
.mh-post-card:hover { border-color: #eabf72; transform: translateY(-2px); }
.mh-post-card-img img { width: 100%; height: 190px; object-fit: cover; }
.mh-post-card-body { display: flex; flex-direction: column; gap: 6px; padding: 18px; }
.mh-post-card-body small { color: var(--mh-faint); font-size: 12px; }
.mh-post-card-body strong { color: var(--mh-text); font-size: 17px; line-height: 1.35; }
.mh-post-card-body span { color: var(--mh-muted); font-size: 14px; line-height: 1.6; }
.mh-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.mh-pagination .page-numbers { display: grid; min-width: 38px; height: 38px; place-items: center; border: 1px solid var(--mh-line); border-radius: 10px; background: var(--mh-surface); padding-inline: 10px; font-size: 14px; }
.mh-pagination .page-numbers.current { border-color: #eabf72; background: #eabf72; color: #202526; font-weight: 700; }
.mh-post-nav .nav-links { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; border-top: 1px solid var(--mh-line); padding-top: 18px; font-size: 14px; font-weight: 600; }

/* Căn rộng/toàn chiều rộng của khối */
.mh-prose .alignwide { max-width: none; }
.mh-prose .aligncenter { margin-inline: auto; text-align: center; }
.mh-prose .alignleft { float: left; margin: 0 18px 12px 0; }
.mh-prose .alignright { float: right; margin: 0 0 12px 18px; }
@media (max-width: 640px) { .mh-prose :is(.alignleft, .alignright) { float: none; margin-inline: 0; } }
.mh-prose td:not(:first-child), .mh-prose td.num { white-space: nowrap; }
@media (max-width: 640px) { .mh-prose :is(th, td) { padding: 8px 10px; } .mh-prose table { font-size: 13px; } }