/* 4. Article: sticky horizontal TOC, title block, 30-second version, cover, body typography, FAQ, editorial box. */
.ml-ngang { position: sticky; top: 65px; z-index: 20; background: var(--reu); }
.admin-bar .ml-ngang { top: 97px; }
.ml-cuon { max-width: var(--khung); margin: 0 auto; display: flex; gap: 6px; overflow-x: auto; padding: 9px var(--le); scrollbar-width: none; }
.ml-cuon::-webkit-scrollbar { display: none; }
.ml-ngang a { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: #DDE8E1; padding: 6px 12px; border-radius: 999px; white-space: nowrap; text-decoration: none; }
.ml-ngang a:hover { background: rgba(255, 255, 255, .12); }
.ml-ngang a.on { background: var(--nghe); color: var(--chu-nghe); }
@media (prefers-color-scheme: dark) { .ml-ngang { background: #1F3328; } }

.bai { max-width: calc(var(--cot) + 2 * var(--le)); margin: 0 auto; padding: 28px var(--le) 20px; display: flex; flex-direction: column; gap: 18px; }
.vet { font-size: 13px; color: var(--muc2); }
.vet a { color: var(--link); text-decoration: none; }
.bai > h1 { font: 700 clamp(30px, 4.2vw, 42px)/1.1 var(--de); letter-spacing: -.015em; margin: 0; }
.ky { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muc2); flex-wrap: wrap; }
.ky a { color: inherit; text-decoration: none; }
.ky b { color: var(--muc); }
.cong-bo { margin: 0; font-size: 13px; font-style: italic; color: var(--muc2); }

.tom { border: 2px solid var(--reu); border-radius: 12px; overflow: hidden; background: var(--mat); }
.tom-dau { background: var(--reu); color: var(--tren-reu); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.tom-dau span { color: var(--nghe); letter-spacing: 0; text-transform: none; font-size: 14px; }
@media (prefers-color-scheme: dark) { .tom-dau { background: #1F3328; color: #fff; } }
.tom ul { list-style: none; margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.tom li { position: relative; padding-left: 30px; font-size: 15.5px; line-height: 1.5; }
.tom li::before { content: "✓"; position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--nghe-nhat); color: var(--nghe-dam); font-weight: 800; font-size: 12px; }
.tom-nut { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 16px; }

.bia { margin: 0; }
.bia img { display: block; width: 100%; height: auto; border-radius: 12px; aspect-ratio: 16 / 9; object-fit: cover; }

.van { font-size: 17.5px; line-height: 1.72; color: var(--muc); }
.van > * { margin-top: 0; margin-bottom: 1em; }
.van h2 { font: 600 30px/1.2 var(--de); margin: 1.6em 0 .5em; padding-top: 14px; border-top: 1px solid var(--ke); }
.van h3 { font: 600 23px/1.25 var(--de); margin: 1.3em 0 .4em; }
.van h4 { font: 700 17px var(--than); margin: 1.1em 0 .3em; }
.van ul, .van ol { padding-left: 1.3em; }
.van li { margin-bottom: .35em; }
.van li::marker { color: var(--reu); }
.van figure { margin: 1.4em 0; }
.van figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
.van figcaption { font-size: 13px; color: var(--muc2); margin-top: 6px; }
.van blockquote { margin: 1.2em 0; background: var(--nghe-nhat); border-radius: 10px; padding: 14px 18px; border-left: 4px solid var(--nghe); font-size: 16px; }
.van blockquote > :last-child { margin-bottom: 0; }
.van hr { border: 0; border-top: 1px solid var(--ke); margin: 2em 0; }
.van iframe { width: 100%; border: 0; border-radius: 10px; }
.bang-dl { overflow-x: auto; border: 1px solid var(--ke); border-radius: 10px; margin: 1.2em 0; background: var(--mat); }
.bang-dl table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; }
.bang-dl th { background: var(--reu-nhat); color: var(--reu); text-align: left; padding: 10px 12px; font-weight: 700; }
.bang-dl td { padding: 10px 12px; border-top: 1px solid var(--ke2); vertical-align: top; }
.bang-dl tr:hover td { background: var(--giay); }
.bang-dl .bang-dl { border: 0; margin: 0; }
.van .table-responsive, .van .wp-block-table { margin: 0; overflow: visible; }
.meo { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; background: var(--nghe-nhat); border-radius: 10px; padding: 14px 16px; font-size: 16px; }
.meo::before { content: "!"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nghe); color: var(--chu-nghe); font: 800 16px var(--de); }

.faq { margin-top: 1em; }
.faq-mot { border: 1px solid var(--ke); border-radius: 10px; background: var(--mat); margin-bottom: 10px; }
.faq-mot summary { cursor: pointer; padding: 14px 44px 14px 16px; font: 600 18px/1.35 var(--de); list-style: none; position: relative; }
.faq-mot summary::-webkit-details-marker { display: none; }
.faq-mot summary::after { content: "+"; position: absolute; right: 16px; top: 12px; font: 700 22px var(--than); color: var(--reu); }
.faq-mot[open] summary::after { content: "–"; }
.faq-tl { padding: 0 16px 6px; font-size: 16px; }

.bbt { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; border-top: 1px solid var(--ke); padding-top: 22px; margin-top: 14px; }
.bbt img { border-radius: 50%; }
.bbt b { font: 600 19px var(--de); }
.bbt p { margin: 4px 0 0; font-size: 15px; color: var(--muc2); }
.bbt .bbt-nho { font-size: 13.5px; }
.trang-tinh .van h2 { border-top: 0; padding-top: 0; }