/* =============================================================
   ARTICLE CONTENT COMPONENTS — .irri-article
   Styles for the HTML component library content writers paste
   into the Custom HTML block of "Bài viết thường" (post) and
   "Bài viết Hỗ trợ kỹ thuật" (kb_article).

   Loaded once here (see inc/css-loader.php) so published posts
   only need to carry the HTML markup, not a repeated <style>
   block in post_content. Keep this file the single source of
   truth for .irri-* colors — do not fork copies into individual
   posts.

   All generic-tag rules (h2, p, th, pre...) are scoped under the
   .irri-article ancestor on purpose: single-post.css / single-kb
   inline styles already style bare .post-content h2/th/p etc, and
   an unscoped .irri-table th{...} has the SAME specificity as
   .post-content th{...} — whichever stylesheet loads last then
   wins by source order alone, which is fragile (a header row
   silently went white this way once already). Scoping under
   .irri-article raises specificity so these rules win regardless
   of enqueue order.
   ============================================================= */

/* overflow-wrap on the root: content editors type free text (and the
   "Chèn Link" toolbar button can insert arbitrary URLs) — a single long
   unbroken word/URL inside a heading, paragraph, table cell or FAQ answer
   has no natural break point and will push its container wider than the
   viewport on mobile otherwise. Same class of bug as .kb-applies-to once
   was missing flex-wrap for. */
.irri-article{font-family:'Roboto','Google Sans',Arial,sans-serif;color:#24324A;line-height:1.8;overflow-wrap:break-word;}
.irri-article h2{color:#1E3A7B;font-size:24px;font-weight:800;margin:42px 0 18px;}
.irri-article h3{color:#1E3A7B;font-size:19px;font-weight:700;margin:30px 0 12px;}
.irri-article p{margin:0 0 16px;font-size:16px;}
/* critical.css resets ul{list-style:none} site-wide (for nav/card lists),
   which also silently strips bullets from every checklist/list a content
   editor writes here — restore them explicitly instead of relying on the
   browser default. */
.irri-article ul{margin:0 0 18px;padding-left:22px;list-style:disc;}
.irri-article ol{margin:0 0 18px;padding-left:22px;list-style:decimal;}
.irri-article ul ul,.irri-article ol ul{list-style:circle;}
.irri-article li{margin-bottom:8px;font-size:16px;}
.irri-article a{color:#2D52A8;text-decoration:underline;text-decoration-color:rgba(45,82,168,.35);text-underline-offset:2px;font-weight:600;}
.irri-article a:hover{color:#1E3A7B;text-decoration-color:currentColor;}

/* Link display options from the "Chèn link" toolbar (custom-html-toolbar.js,
   buildLinkSnippet()) — deliberately a closed set of CLASSES, never an
   inline style="color:...". Two reasons: (1) WordPress strips the style
   attribute from post content for any author without unfiltered_html, so a
   freely-typed color would just silently vanish on save for most editors;
   (2) a class can only ever be one of the values below — there's no way to
   smuggle CSS through it, unlike a hand-built style string. Same 5-color
   brand palette documented in docs/prompt-dinh-dang-bai-viet.md §6. */
.irri-article a.irri-link-nounderline{text-decoration:none;}
.irri-article a.irri-color-navy{color:#1E3A7B;}
.irri-article a.irri-color-green{color:#2D9E44;}
.irri-article a.irri-color-red{color:#D9432F;}
.irri-article a.irri-color-green-dark{color:#1F7A32;}
/* Equal selector specificity to a:hover above, so on hover a colored link
   keeps ITS OWN color instead of the default hover-darken — a colored link
   staying its color while hovered is an acceptable, deliberate trade-off
   here, not a bug. */

/* Ảnh chèn trực tiếp trong nội dung (không qua component nào) — .post-content
   img đã có style tương tự nhưng chỉ tải cho bài viết thường, không tải cho
   kb_article; định nghĩa riêng ở đây để chắc chắn áp dụng cho cả hai. */
.irri-article img{max-width:100%;height:auto;display:block;margin:24px auto;border-radius:14px;box-shadow:0 10px 26px rgba(30,58,123,.08);}
.irri-figure{margin:24px 0;}
.irri-figure img{margin:0 auto;}
.irri-figure figcaption{margin-top:10px;font-size:13.5px;color:#4b5d78;text-align:center;}

/* Ảnh chèn qua Classic block / "Add Media" của TinyMCE thay vì qua nút "Ảnh"
   của khối Custom HTML (buildImgSnippet() chèn <img> trần, không dính lỗi
   này — xem custom-html-toolbar.js). Khi chọn caption hoặc căn trái/phải,
   WordPress tự bọc <figure class="wp-caption alignleft" style="width:1024px">
   với width TÍNH BẰNG PX ĐÚNG KHỔ ẢNH GỐC, thường 1024px+ — rộng hơn hẳn cột
   nội dung KB (260px sidebar + phần còn lại) hoặc post. Không rule nào từng
   giới hạn <figure>, nên nó tràn thẳng ra ngoài khung bài trên mọi màn hẹp
   hơn khổ ảnh. !important bắt buộc vì inline style="width:...px" luôn thắng
   CSS thường bất kể độ đặc hiệu selector. */
.irri-article figure,
.irri-article .wp-caption{max-width:100% !important;width:auto !important;}
.irri-article .alignleft,
.irri-article .alignright,
.irri-article .aligncenter{float:none !important;display:block;margin:24px auto !important;}
.irri-article .wp-caption-text{margin-top:10px;font-size:13.5px;color:#4b5d78;text-align:center;}

/* ── INTRO BOX ── */
.irri-article .irri-intro{background:#EAF0FA;border-left:4px solid #2D52A8;border-radius:10px;padding:20px 24px;margin:20px 0 30px;font-size:16px;}

/* ── EXPERT BOX ── */
.irri-article .irri-expert{background:#E8F5EA;border-left:4px solid #2D9E44;border-radius:10px;padding:18px 22px;margin:20px 0;}
.irri-article .irri-expert strong{color:#1E3A7B;}

/* ── NOTE BOX ── */
.irri-article .irri-note{background:#FAFCFA;border:1px solid #DCE6E0;border-radius:14px;padding:22px 26px;margin:30px 0;}
.irri-article .irri-note h2{margin-top:0;}

/* ── PROCESS (các bước đánh số) — cùng ngôn ngữ hình ảnh với HowTo Steps
   của bài Hỗ trợ kỹ thuật (số tròn nền xanh), nhưng dùng được trong nội
   dung cả hai loại bài, không cần qua metabox. ── */
.irri-article .irri-process{margin:30px 0;}
.irri-article .irri-process-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px;}
.irri-article .irri-process-list li{display:flex;gap:16px;align-items:flex-start;margin:0;}
.irri-article .irri-process-num{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#1E3A7B;color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;}
.irri-article .irri-process-body{padding-top:2px;}
.irri-article .irri-process-body h3{margin:0 0 4px;font-size:16px;color:#1E3A7B;}
.irri-article .irri-process-body p{margin:0;font-size:15px;}

/* ── VIDEO CLIP (.webm ngắn tải lên Media Library — dùng nút "Tải video lên") ── */
.irri-article .irri-video{margin:28px 0;border-radius:14px;overflow:hidden;box-shadow:0 15px 40px rgba(30,58,123,.12);background:#000;}
.irri-article .irri-video video{width:100%;display:block;background:#000;}
.irri-article .irri-video-caption{padding:10px 6px 0;font-size:13.5px;color:#4b5d78;text-align:center;}

/* ── VIDEO NHÚNG TỪ LINK (YouTube/Vimeo — dùng nút "Nhúng link" trong toolbar
   Chèn video). .irri-video-embed (không iframe) là marker được LƯU trong
   post_content; PHP thay thế nó bằng .irri-video-embed-frame + <iframe> thật
   ở thời điểm HIỂN THỊ, không lưu trong DB — xem inc/metaboxes.php filter
   'the_content' ngay sau nơi enqueue custom-html-toolbar.js. */
.irri-article .irri-video-embed-frame{position:relative;width:100%;aspect-ratio:16/9;margin:28px 0;border-radius:14px;overflow:hidden;box-shadow:0 15px 40px rgba(30,58,123,.12);background:#000;}
.irri-article .irri-video-embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ── DATA TABLE ── */
.irri-article .irri-table-wrap{width:100%;overflow-x:auto;margin:30px 0;}
.irri-article .irri-table{width:100%;min-width:780px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #DCE6E0;border-radius:16px;overflow:hidden;box-shadow:0 15px 40px rgba(30,58,123,.08);font-family:'Roboto',sans-serif;}
.irri-article .irri-table thead{background:#1E3A7B;}
.irri-article .irri-table th{background:#1E3A7B;color:#fff;padding:18px 22px;font-size:15px;font-weight:700;text-align:left;letter-spacing:.3px;border:none;}
.irri-article .irri-table td{padding:18px 22px;font-size:15px;color:#1B2B48;border-top:1px solid #EEF2EF;border-left:none;border-right:none;border-bottom:none;transition:.25s;}
.irri-article .irri-table tbody tr:nth-child(even){background:#FAFCFA;}
.irri-article .irri-table tbody tr:hover{background:#EAF0FA;}
.irri-article .irri-table td:first-child{font-size:17px;font-weight:700;color:#1E3A7B;position:relative;}
.irri-article .irri-table td:first-child:before{content:"";width:6px;height:24px;background:#2D9E44;border-radius:20px;display:inline-block;margin-right:12px;vertical-align:middle;}
.irri-article .irri-table td:nth-child(3){color:#2D52A8;font-weight:600;}
.irri-article .irri-table td:last-child{font-weight:500;}
@media(max-width:768px){
    .irri-article .irri-table{min-width:700px;}
    .irri-article .irri-table th,.irri-article .irri-table td{padding:14px 16px;font-size:14px;}
    .irri-article .irri-table td:first-child{font-size:15px;}
}

/* ── COMPARE TABLE — ĐÁNH GIÁ (có cột hơn/kém) ──
   Dùng khi so sánh có hàm ý "cái nào tốt hơn": trước/sau khi lắp đặt, có/
   không dùng dịch vụ... Cột kém tô đỏ, cột tốt hơn tô xanh + dấu ✓ (.good).
   KHÔNG dùng kiểu này để so sánh các lựa chọn ngang hàng không phân định
   hơn/kém (VD: dòng sản phẩm A vs B, gói dịch vụ 1 vs 2) — dùng "Bảng so
   sánh (phân biệt)" bên dưới cho trường hợp đó, vì tô đỏ/xanh ở đây sẽ tạo
   hàm ý sai rằng có một lựa chọn kém hơn. ── */
.irri-article .irri-compare-wrap{width:100%;overflow-x:auto;margin:35px 0;}
.irri-article .irri-compare{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #DCE6E0;border-radius:18px;overflow:hidden;box-shadow:0 15px 40px rgba(30,58,123,.08);font-family:'Roboto',sans-serif;}
.irri-article .irri-compare thead{background:#1E3A7B;}
.irri-article .irri-compare th{background:#1E3A7B;padding:18px 22px;color:#fff;font-size:15px;font-weight:700;text-align:left;border:none;}
.irri-article .irri-compare td{padding:18px 22px;border-top:1px solid #EEF2EF;border-left:none;border-right:none;border-bottom:none;color:#24324A;font-size:15px;vertical-align:middle;}
.irri-article .irri-compare tbody tr:nth-child(even){background:#FAFCFA;}
.irri-article .irri-compare tbody tr:hover{background:#EEF5EE;}
.irri-article .irri-compare td:first-child{width:28%;font-weight:700;color:#1E3A7B;}
.irri-article .irri-compare td:nth-child(2){color:#D9432F;font-weight:600;}
.irri-article .irri-compare td:nth-child(3){color:#1F7A32;font-weight:600;}
.irri-article .good{display:inline-flex;align-items:center;gap:8px;}
.irri-article .good::before{content:"✓";width:24px;height:24px;border-radius:50%;background:#2D9E44;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
@media(max-width:768px){
    .irri-article .irri-compare{min-width:720px;}
    .irri-article .irri-compare th,.irri-article .irri-compare td{padding:14px 16px;font-size:14px;}
}

/* ── COMPARE TABLE — PHÂN BIỆT (không đánh giá hơn/kém) ──
   Dùng khi liệt kê các lựa chọn ngang hàng để người đọc TỰ chọn theo nhu
   cầu (VD: bảng thông số dòng sản phẩm A/B/C, so sánh gói dịch vụ) — mọi
   cột dữ liệu giữ cùng một màu trung tính, không tô đỏ/xanh và không có
   dấu ✓, vì ở đây không có cột nào là "câu trả lời đúng". Cột đầu (tên
   tiêu chí) vẫn in đậm màu xanh thương hiệu để dễ dò hàng, giống bảng dữ
   liệu thường. ── */
.irri-article .irri-compare-neutral-wrap{width:100%;overflow-x:auto;margin:35px 0;}
.irri-article .irri-compare-neutral{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid #DCE6E0;border-radius:18px;overflow:hidden;box-shadow:0 15px 40px rgba(30,58,123,.08);font-family:'Roboto',sans-serif;}
.irri-article .irri-compare-neutral thead{background:#1E3A7B;}
.irri-article .irri-compare-neutral th{background:#1E3A7B;padding:18px 22px;color:#fff;font-size:15px;font-weight:700;text-align:left;border:none;}
.irri-article .irri-compare-neutral td{padding:18px 22px;border-top:1px solid #EEF2EF;border-left:none;border-right:none;border-bottom:none;color:#24324A;font-size:15px;vertical-align:middle;}
.irri-article .irri-compare-neutral tbody tr:nth-child(even){background:#FAFCFA;}
.irri-article .irri-compare-neutral tbody tr:hover{background:#EEF5EE;}
.irri-article .irri-compare-neutral td:first-child{width:26%;font-weight:700;color:#1E3A7B;}
@media(max-width:768px){
    .irri-article .irri-compare-neutral{min-width:600px;}
    .irri-article .irri-compare-neutral th,.irri-article .irri-compare-neutral td{padding:14px 16px;font-size:14px;}
}

/* ── FAQ ACCORDION + CTA — rendered by the theme (single.php / single-kb_article.php)
   as SIBLING blocks after .post-content, not nested inside .irri-article, so these
   rules stay unscoped. Order is enforced in PHP: content → FAQ → CTA. Spacing
   matches the surrounding proj-box/share-bar rhythm (24px top). ── */
.irri-section-heading{color:#1E3A7B;font-size:22px;font-weight:800;margin:0 0 16px;}

.irri-faq{max-width:100%;margin:24px 0 0;overflow-wrap:break-word;}
.irri-faq details{background:#fff;border:1px solid #DCE6E0;border-radius:14px;margin-bottom:15px;overflow:hidden;transition:.3s;box-shadow:0 8px 25px rgba(30,58,123,.06);}
.irri-faq details:last-child{margin-bottom:0;}
.irri-faq details[open]{border-color:#2D52A8;}
.irri-faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;color:#1E3A7B;font-size:16px;position:relative;padding-right:55px;}
.irri-faq summary::-webkit-details-marker{display:none;}
.irri-faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:#2D9E44;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;transition:.3s;}
.irri-faq details[open] summary::after{content:"–";background:#1E3A7B;color:#fff;}
.irri-faq .faq-content{padding:0 22px 22px;color:#4b5d78;line-height:1.8;}
.irri-faq .faq-content ul{list-style:disc;padding-left:20px;margin:0 0 10px;}
.irri-faq .faq-content ol{list-style:decimal;padding-left:20px;margin:0 0 10px;}
.irri-faq .faq-content p{margin:0 0 10px;}
.irri-faq .faq-content p:last-child{margin-bottom:0;}

.irri-cta{background:linear-gradient(135deg,#1E3A7B,#2D52A8);border-radius:18px;padding:34px 30px;margin:24px 0 0;color:#fff;text-align:center;}
.irri-cta h2{color:#fff;margin:0 0 10px;font-size:22px;font-weight:800;}
.irri-cta p{color:#DCE6F5;margin:0;}
.irri-cta-buttons{margin-top:18px;}
.irri-cta-buttons a{display:inline-block;background:#2D9E44;color:#fff;font-weight:700;padding:13px 26px;border-radius:10px;text-decoration:none;margin:6px;font-size:15px;}
.irri-cta-buttons a.outline{background:transparent;color:#fff;border:2px solid #fff;}

/* ── CODE BLOCK ── */
.irri-article pre{background:#12294F;color:#DCE6F5;padding:22px 24px;border-radius:14px;overflow-x:auto;margin:22px 0;font-size:14.5px;line-height:1.7;box-shadow:0 15px 40px rgba(18,41,79,.2);}
.irri-article pre code{font-family:"Cascadia Code",Consolas,monospace;background:none;color:inherit;white-space:pre;}