/*!
 * Theme newnet-v2 — Chi tiết bài viết. Prefix: ar-
 * Phần 1: khung trang (mục lục, thanh tiến độ, ảnh bìa) — view vendor/cms/web/post/content.blade.php, JS js/article.js.
 * Phần 2: định dạng nội dung do người viết soạn (bổ sung cho .nn-prose trong theme.css).
 * Phần 3: khối nội dung dựng sẵn — danh sách & HTML mẫu ở data/article_blocks.php.
 * File này cũng được nạp vào trình soạn thảo ở trang quản trị để nội dung khi soạn giống khi hiển thị.
 * Chỉ dùng token var(--nn-*), không viết mã màu cứng.
 */

/* ==========================================================================
   1. Khung trang
   ========================================================================== */
.ar-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: var(--nn-z-progress); pointer-events: none; }
.ar-progress span { display: block; height: 100%; width: 100%; background: var(--nn-gradient); transform: scaleX(0); transform-origin: left; }

.ar-layout { display: grid; gap: var(--nn-space-10); }
.ar-layout > * { min-width: 0; }
@media (min-width: 1100px) { .ar-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--nn-space-16); align-items: start; } }
.ar-article { max-width: 780px; width: 100%; margin-inline: auto; }
@media (min-width: 1100px) { .ar-article { margin-inline: 0; } }

/* Ảnh bìa chồng lên phần tiêu đề trang */
.ar-cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; margin-bottom: var(--nn-space-9); border-radius: var(--nn-radius-xl); background: var(--nn-surface-2); box-shadow: var(--nn-shadow-lg); }
.ar-page.has-cover .ar-cover { position: relative; z-index: var(--nn-z-base); margin-top: calc((var(--nn-section-y-tight) + var(--nn-space-10)) * -1); }

.ar-aside { display: grid; gap: var(--nn-space-6); align-content: start; }
@media (min-width: 1100px) { .ar-aside { position: sticky; top: calc(var(--nn-header-h) + var(--nn-space-6)); max-height: calc(100vh - var(--nn-header-h) - var(--nn-space-8)); overflow-y: auto; scrollbar-width: thin; } }
.ar-aside__text { font-size: var(--nn-text-md); }

/* Mục lục: bản cột bên (desktop) và bản đóng/mở đầu bài (mobile) */
.ar-toc ol { list-style: none; margin: 0; padding: 0; }
.ar-toc a { display: block; padding: var(--nn-space-1-5) var(--nn-space-3-5); font-size: var(--nn-text-sm); line-height: var(--nn-leading-snug); color: var(--nn-muted); border-left: 2px solid var(--nn-border); text-decoration: none; transition: color var(--nn-duration-fast), border-color var(--nn-duration-fast); }
.ar-toc a:hover { color: var(--nn-ink); }
.ar-toc a.is-active { color: var(--nn-primary); border-left-color: var(--nn-primary); font-weight: var(--nn-weight-semibold); }
.ar-toc .is-h3 a { padding-left: var(--nn-space-7); }
.ar-toc--side { display: none; }
.ar-toc--side h2 { margin: 0 0 var(--nn-space-3-5); font-size: var(--nn-text-xs); font-weight: var(--nn-weight-bold); letter-spacing: var(--nn-tracking-wide); text-transform: uppercase; color: var(--nn-ink); }
.ar-toc--inline { margin-bottom: var(--nn-space-8); border-radius: var(--nn-radius-lg); background: var(--nn-surface); border: 1px solid var(--nn-border); }
.ar-toc--inline summary { display: flex; align-items: center; gap: var(--nn-space-2-5); padding: var(--nn-space-3-5) var(--nn-space-4-5); font-weight: var(--nn-weight-semibold); color: var(--nn-ink); cursor: pointer; list-style: none; }
.ar-toc--inline summary::-webkit-details-marker { display: none; }
.ar-toc--inline summary .nn-icon { font-size: var(--nn-icon-md); color: var(--nn-primary); }
.ar-toc--inline summary i { width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--nn-muted); border-bottom: 2px solid var(--nn-muted); transform: rotate(45deg); transition: transform var(--nn-duration); }
.ar-toc--inline[open] summary i { transform: rotate(-135deg); }
.ar-toc--inline ol { padding: 0 var(--nn-space-4-5) var(--nn-space-4); }
@media (min-width: 1100px) {
    .ar-toc--side { display: block; }
    .ar-toc--inline { display: none; }
}

/* ==========================================================================
   2. Định dạng nội dung (bổ sung .nn-prose)
   ========================================================================== */
/* Vùng soạn thảo trong trang quản trị */
body.mce-content-body.nn-prose { max-width: 820px; margin: 0 auto; padding: var(--nn-space-5) var(--nn-space-6); }

.ar-content h2 { margin-top: 2em; padding-top: .2em; }
.ar-content h2, .ar-content h3, .ar-content h4 { text-wrap: balance; }
.ar-content p { text-wrap: pretty; }
.nn-prose hr { margin: 2.2em auto; width: 96px; height: 4px; border: 0; border-radius: var(--nn-radius-pill); background: var(--nn-border); opacity: 1; }
.nn-prose mark { padding: .05em .25em; border-radius: var(--nn-radius-2xs); background: var(--nn-highlight-200); color: inherit; }
.nn-prose kbd { padding: .1em .45em; border-radius: var(--nn-radius-xs); border: 1px solid var(--nn-border-strong); border-bottom-width: 2px; background: #fff; color: var(--nn-ink); font-family: var(--nn-mono); font-size: .8125em; box-shadow: none; }
.nn-prose sup a { text-decoration: none; }
.nn-prose ol { list-style: decimal; }
.nn-prose ul ul, .nn-prose ol ol, .nn-prose ul ol, .nn-prose ol ul { margin: .4em 0 0; }
.nn-prose ul ul { list-style: circle; }
.nn-prose li > p { margin-bottom: .4em; }
.nn-prose blockquote cite { display: block; margin-top: var(--nn-space-2-5); font-size: var(--nn-text-sm); font-style: normal; font-weight: var(--nn-weight-semibold); color: var(--nn-muted); }

/* Ảnh & chú thích (figure do nút chèn ảnh tạo ra), ảnh canh trái/phải */
.nn-prose img { max-width: 100%; }
.nn-prose figure { margin-inline: 0; }
.nn-prose figure img { display: block; margin-inline: auto; }
.nn-prose figure.image { display: table; margin-inline: auto; }
.nn-prose figure.image figcaption { display: table-caption; caption-side: bottom; }
.nn-prose figure.align-left, .nn-prose img.align-left, .nn-prose img[style*="float: left"] { float: left; max-width: 46%; margin: .3em var(--nn-space-6) var(--nn-space-4) 0; }
.nn-prose figure.align-right, .nn-prose img.align-right, .nn-prose img[style*="float: right"] { float: right; max-width: 46%; margin: .3em 0 var(--nn-space-4) var(--nn-space-6); }
.nn-prose h2, .nn-prose h3, .nn-prose hr, .nn-prose [class^="ar-"] { clear: both; }
@media (max-width: 575.98px) {
    .nn-prose figure.align-left, .nn-prose figure.align-right, .nn-prose img.align-left, .nn-prose img.align-right,
    .nn-prose img[style*="float: left"], .nn-prose img[style*="float: right"] { float: none !important; max-width: 100%; margin: 0 auto 1.25em; display: block; }
}

/* Video & khung nhúng */
.nn-prose iframe[src*="youtube.com"], .nn-prose iframe[src*="youtu.be"], .nn-prose iframe[src*="vimeo.com"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.ar-video { margin: 0 0 1.25em; border-radius: var(--nn-radius-lg); overflow: hidden; background: var(--nn-ink); }
.ar-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 0; }

/* Bảng: js/article.js bọc bảng trong .ar-scroll để cuộn ngang trên màn hình nhỏ */
.ar-scroll { margin: 0 0 1.25em; overflow-x: auto; border-radius: var(--nn-radius-lg); border: 1px solid var(--nn-border); -webkit-overflow-scrolling: touch; }
.ar-scroll > table { display: table; margin: 0; min-width: 100%; border: 0; }
.ar-scroll > table th, .ar-scroll > table td { border-width: 0 0 1px; }
.ar-scroll > table tr:last-child > td { border-bottom: 0; }
@media (max-width: 575.98px) { .ar-scroll > table th, .ar-scroll > table td { min-width: 8.5em; } }
.nn-prose table caption { caption-side: bottom; padding-top: var(--nn-space-2); font-size: var(--nn-text-sm); color: var(--nn-muted); }
.nn-prose table thead th { font-size: var(--nn-text-sm); white-space: nowrap; }
.nn-prose table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--nn-surface) 60%, #fff); }
.ar-table tbody td:first-child { font-weight: var(--nn-weight-semibold); color: var(--nn-ink); }
.ar-table thead th { background: var(--nn-ink); color: #fff; }

/* Mã nguồn: js/article.js thêm thanh tiêu đề (ngôn ngữ + nút sao chép) */
.ar-code { margin: 0 0 1.25em; border-radius: var(--nn-radius-lg); overflow: hidden; background: var(--nn-ink); }
.ar-code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--nn-space-3); padding: var(--nn-space-2) var(--nn-space-2) var(--nn-space-2) var(--nn-space-5); border-bottom: 1px solid rgba(255, 255, 255, .1); font-family: var(--nn-mono); font-size: var(--nn-text-2xs); letter-spacing: var(--nn-tracking-wide); text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ar-code__copy { display: inline-flex; align-items: center; gap: var(--nn-space-1-5); padding: var(--nn-space-1-5) var(--nn-space-3); border: 0; border-radius: var(--nn-radius-sm); background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .8); font: var(--nn-weight-semibold) var(--nn-text-2xs)/1 var(--nn-font); letter-spacing: 0; text-transform: none; cursor: pointer; transition: background var(--nn-duration-fast); }
.ar-code__copy:hover, .ar-code__copy:focus-visible { background: rgba(255, 255, 255, .18); color: #fff; }
.ar-code__copy.is-done { background: var(--nn-success); color: #fff; }
.ar-code pre { margin: 0; border-radius: 0; }

/* Danh sách thuật ngữ */
.nn-prose dl { margin: 0 0 1.25em; }
.nn-prose dt { font-weight: var(--nn-weight-bold); color: var(--nn-ink); }
.nn-prose dd { margin: 0 0 var(--nn-space-3); }

/* ==========================================================================
   3. Khối nội dung dựng sẵn (data/article_blocks.php)
   ========================================================================== */
.nn-prose [class^="ar-"] > :last-child { margin-bottom: 0; }

/* Đoạn mở đầu */
.ar-lead { font-size: clamp(1.1875rem, 1.1rem + .5vw, 1.375rem); line-height: 1.6; color: var(--nn-ink); font-weight: var(--nn-weight-medium); letter-spacing: var(--nn-tracking-tight); }

/* Tóm tắt nhanh */
.ar-summary { margin: 0 0 1.5em; padding: var(--nn-space-6) var(--nn-space-7); border-radius: var(--nn-radius-xl); background: var(--nn-surface); border: 1px solid var(--nn-line); }
.ar-summary__title { display: flex; align-items: center; gap: var(--nn-space-2-5); margin: 0 0 var(--nn-space-3) !important; font-size: var(--nn-text-xs); font-weight: var(--nn-weight-bold); letter-spacing: var(--nn-tracking-wide); text-transform: uppercase; color: var(--nn-primary); }
.ar-summary__title::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("https://api.iconify.design/lucide/list-checks.svg") center / contain no-repeat; mask: url("https://api.iconify.design/lucide/list-checks.svg") center / contain no-repeat; }
.ar-summary ul { font-size: var(--nn-text-base); }

/* Ghi chú: info / tip / warn / danger */
.ar-note { --c: var(--nn-brand); --bg: var(--nn-brand-50); --fg: var(--nn-brand-700); --ico: url("https://api.iconify.design/lucide/info.svg"); position: relative; margin: 0 0 1.5em; padding: var(--nn-space-4-5) var(--nn-space-5-5) var(--nn-space-4-5) var(--nn-space-14); border-radius: var(--nn-radius-lg); background: var(--bg); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); font-size: var(--nn-text-base); color: var(--nn-text); }
.ar-note::before { content: ""; position: absolute; left: var(--nn-space-5); top: var(--nn-space-5); width: 22px; height: 22px; background: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ar-note__title { margin: 0 0 var(--nn-space-1) !important; font-weight: var(--nn-weight-bold); color: var(--fg); }
.ar-note--tip { --c: var(--nn-success); --bg: var(--nn-success-soft); --fg: var(--nn-success-700); --ico: url("https://api.iconify.design/lucide/lightbulb.svg"); }
.ar-note--warn { --c: var(--nn-warning); --bg: var(--nn-warning-soft); --fg: var(--nn-warning-700); --ico: url("https://api.iconify.design/lucide/triangle-alert.svg"); }
.ar-note--danger { --c: var(--nn-danger); --bg: var(--nn-danger-soft); --fg: var(--nn-danger-700); --ico: url("https://api.iconify.design/lucide/octagon-alert.svg"); }

/* Trích dẫn có tên người nói */
.nn-prose blockquote.ar-quote { margin: 0 0 1.5em; padding: var(--nn-space-2) 0 var(--nn-space-2) var(--nn-space-7); border-left: 4px solid transparent; border-image: var(--nn-gradient) 1; border-radius: 0; background: none; font-style: normal; font-size: clamp(1.1875rem, 1.1rem + .5vw, 1.375rem); line-height: 1.5; font-weight: var(--nn-weight-semibold); letter-spacing: var(--nn-tracking-tight); color: var(--nn-ink); }
.nn-prose blockquote.ar-quote p { margin-bottom: 0; }
.nn-prose blockquote.ar-quote cite { margin-top: var(--nn-space-3); letter-spacing: 0; }

/* Các bước thực hiện */
.nn-prose ol.ar-steps { list-style: none; margin: 0 0 1.5em; padding: 0; counter-reset: ar-step; }
.ar-steps > li { position: relative; margin: 0; padding: 0 0 var(--nn-space-6) var(--nn-space-14); counter-increment: ar-step; }
.ar-steps > li:last-child { padding-bottom: 0; }
.ar-steps > li::before { content: counter(ar-step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--nn-radius-round); background: var(--nn-gradient); color: #fff; font-size: var(--nn-text-md); font-weight: var(--nn-weight-bold); line-height: 1; }
.ar-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 44px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--nn-border); }
.ar-steps > li > strong:first-child { display: inline-block; padding-top: var(--nn-space-1); font-size: var(--nn-text-xl); line-height: var(--nn-leading-snug); }

/* Danh sách kiểm tra */
.nn-prose ul.ar-check { list-style: none; padding-left: 0; }
.ar-check > li { position: relative; padding-left: var(--nn-space-9); }
.ar-check > li::before { content: ""; position: absolute; left: 0; top: .28em; width: 22px; height: 22px; border-radius: var(--nn-radius-round); background: var(--nn-primary-soft); }
.ar-check > li::after { content: ""; position: absolute; left: 4px; top: calc(.28em + 4px); width: 14px; height: 14px; background: var(--nn-primary); -webkit-mask: url("https://api.iconify.design/lucide/check.svg") center / contain no-repeat; mask: url("https://api.iconify.design/lucide/check.svg") center / contain no-repeat; }

/* Ưu điểm / Nhược điểm */
.ar-proscons { display: grid; gap: var(--nn-space-4); margin: 0 0 1.5em; }
@media (min-width: 640px) { .ar-proscons { grid-template-columns: 1fr 1fr; } }
.ar-pros, .ar-cons { --c: var(--nn-success); --ico: url("https://api.iconify.design/lucide/circle-check.svg"); padding: var(--nn-space-5-5) var(--nn-space-6); border-radius: var(--nn-radius-lg); background: #fff; border: 1px solid var(--nn-border); border-top: 3px solid var(--c); font-size: var(--nn-text-base); }
.ar-cons { --c: var(--nn-danger); --ico: url("https://api.iconify.design/lucide/circle-x.svg"); }
.ar-proscons__title { margin: 0 0 var(--nn-space-3) !important; font-weight: var(--nn-weight-bold); color: var(--nn-ink); }
.nn-prose .ar-proscons ul { list-style: none; padding-left: 0; margin: 0; }
.ar-proscons li { position: relative; padding-left: var(--nn-space-8); }
.ar-proscons li:last-child { margin-bottom: 0; }
.ar-proscons li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; background: var(--c); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }

/* Số liệu nổi bật */
.ar-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nn-space-4); margin: 0 0 1.5em; }
.ar-stats > div { display: grid; gap: var(--nn-space-1-5); align-content: start; padding: var(--nn-space-5-5); border-radius: var(--nn-radius-lg); background: var(--nn-surface); border: 1px solid var(--nn-line); font-size: var(--nn-text-sm); line-height: var(--nn-leading-snug); color: var(--nn-muted); }
.ar-stats strong { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); font-weight: var(--nn-weight-extrabold); line-height: var(--nn-leading-none); letter-spacing: var(--nn-tracking-tighter); font-variant-numeric: tabular-nums; background: var(--nn-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--nn-primary); }

/* Câu hỏi thường gặp */
.ar-faq { margin: 0 0 var(--nn-space-3); border-radius: var(--nn-radius-lg); background: #fff; border: 1px solid var(--nn-border); font-size: var(--nn-text-base); transition: border-color var(--nn-duration), box-shadow var(--nn-duration); }
.ar-faq:last-of-type { margin-bottom: 1.5em; }
.ar-faq[open] { border-color: var(--nn-brand-200); box-shadow: var(--nn-shadow); }
.ar-faq summary { position: relative; padding: var(--nn-space-4) var(--nn-space-12) var(--nn-space-4) var(--nn-space-5); font-weight: var(--nn-weight-semibold); color: var(--nn-ink); cursor: pointer; list-style: none; }
.ar-faq summary::-webkit-details-marker { display: none; }
.ar-faq summary::after { content: ""; position: absolute; right: var(--nn-space-5); top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--nn-primary); border-bottom: 2px solid var(--nn-primary); transform: rotate(45deg); transition: transform var(--nn-duration); }
.ar-faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.ar-faq > :not(summary) { margin: 0 var(--nn-space-5) var(--nn-space-4); }
.nn-prose .ar-faq > :last-child { margin-bottom: var(--nn-space-4-5); }

/* Giải thích thuật ngữ */
.nn-prose dl.ar-terms { display: grid; gap: 0; margin: 0 0 1.5em; border-radius: var(--nn-radius-lg); border: 1px solid var(--nn-border); overflow: hidden; font-size: var(--nn-text-base); }
.ar-terms dt { padding: var(--nn-space-3-5) var(--nn-space-5) 0; }
.ar-terms dd { margin: 0; padding: var(--nn-space-1) var(--nn-space-5) var(--nn-space-3-5); border-bottom: 1px solid var(--nn-border); color: var(--nn-text); }
.ar-terms dd:last-child { border-bottom: 0; }
@media (min-width: 640px) {
    .nn-prose dl.ar-terms { grid-template-columns: minmax(140px, 30%) 1fr; }
    .ar-terms dt { padding: var(--nn-space-3-5) var(--nn-space-5); background: var(--nn-surface); border-bottom: 1px solid var(--nn-border); }
    .ar-terms dd { padding: var(--nn-space-3-5) var(--nn-space-5); }
    .ar-terms dt:last-of-type { border-bottom: 0; }
}

/* Hai cột */
.ar-cols { display: grid; gap: var(--nn-space-6); margin: 0 0 1.25em; }
.ar-cols > * { min-width: 0; }
.ar-cols > * > :last-child { margin-bottom: 0; }
.ar-cols > * > :first-child { margin-top: 0; }
@media (min-width: 640px) { .ar-cols { grid-template-columns: 1fr 1fr; gap: var(--nn-space-8); align-items: center; } }

/* Lưới ảnh */
.ar-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--nn-space-4); margin: 0 0 1.5em; }
.nn-prose .ar-gallery figure { margin: 0; }
.ar-gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Nút liên kết & hộp kêu gọi hành động */
.nn-prose a.ar-btn { display: inline-flex; align-items: center; gap: var(--nn-space-2); min-height: 48px; padding: var(--nn-space-3) var(--nn-space-6); border-radius: var(--nn-radius-pill); background: var(--nn-gradient); color: #fff; font-size: var(--nn-text-md); font-weight: var(--nn-weight-semibold); line-height: 1.2; text-decoration: none; box-shadow: var(--nn-shadow-brand); transition: filter var(--nn-duration-fast), transform var(--nn-duration-fast); }
.nn-prose a.ar-btn::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("https://api.iconify.design/lucide/arrow-right.svg") center / contain no-repeat; mask: url("https://api.iconify.design/lucide/arrow-right.svg") center / contain no-repeat; }
.nn-prose a.ar-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ar-cta { position: relative; isolation: isolate; overflow: hidden; margin: 2em 0 1.5em; padding: clamp(var(--nn-space-6), 1rem + 2vw, var(--nn-space-10)); border-radius: var(--nn-radius-xl); background: var(--nn-bg-brand); color: rgba(255, 255, 255, .82); font-size: var(--nn-text-base); }
.ar-cta::after { content: ""; position: absolute; z-index: -1; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: var(--nn-radius-round); background: radial-gradient(circle, color-mix(in srgb, var(--nn-glow) 45%, transparent), transparent 70%); }
.ar-cta__title { margin: 0 0 var(--nn-space-2) !important; font-size: var(--nn-text-2xl); font-weight: var(--nn-weight-bold); line-height: var(--nn-leading-snug); color: #fff; }
.ar-cta p:last-child { margin-top: var(--nn-space-5); }
.nn-prose .ar-cta a.ar-btn { background: #fff; color: var(--nn-brand-700); box-shadow: none; }

@media print {
    .ar-progress, .ar-aside, .ar-toc, .ar-code__copy, .nn-article-foot .nn-share { display: none !important; }
}