/* ==========================================================================
   ROBONIC CONTENT UI KIT 1.0 (chuyển từ Ovanic Content UI Kit 2.0, đổi sang màu Robonic)
   Nạp: theme tự nạp ở trang bài viết, sản phẩm, trang SEO có khối .rb-article.

   CÁCH DÙNG: bọc nội dung bài trong  <div class="rb-article ov-toplist"> ... </div>
   (HTML cũ dùng class "ovanic-article" vẫn chạy: tên các lớp ov-* giữ nguyên để dùng lại prompt cũ)

   1) Loại bài (chọn 1):  ov-define · ov-toplist · ov-guide · ov-faq · ov-research
   2) Nơi hiển thị (thêm khi không phải bài viết):  is-product · is-archive · is-page
   3) Khối chính: ov-answer (Trả lời nhanh, theme tự dùng làm "trả lời nhanh" của bài và schema),
      ov-summary, ov-product + ov-box, ov-table, ov-faq > ov-faq-item (theme tự đưa vào FAQPage),
      ov-callout, ov-steps, ov-dose, ov-sources, ov-disclaimer, ov-team, ov-cta.
   Nguyên tắc: mỗi màn hình điện thoại tối đa 1 khối nổi bật (ov-answer, tên sản phẩm, cảnh báo, nút).
   ========================================================================== */

/* ---------- 1. Màu và kích thước dùng chung ---------- */
:is(.rb-article,.ovanic-article){
  /* thương hiệu (logo) */
  --ov-brand:#1560ff; --ov-brand-2:#4d8bff; --ov-btn:#f57c00; --ov-btn-hover:#d96c00;
  --ov-deep:#0d4ed1;                 /* xanh đậm cho chữ trên nền sáng, đạt tương phản AA */
  /* nền be, giữ cảm giác mềm và tự nhiên */
  --ov-cream:#f8fbff; --ov-beige:#eef4ff; --ov-beige-2:#e6eefc; --ov-sand:#d5e2f7;
  /* xanh lá rất nhạt, họ hàng của nền banner #dbe8ff */
  --ov-leaf:#f2f7ff; --ov-leaf-2:#e1ecff; --ov-leaf-line:#c7d9f7;
  /* chữ và đường kẻ */
  --ov-ink:#0b1f44; --ov-text:#2a3855; --ov-muted:#5d6b85; --ov-line:#e1e9f7; --ov-line-2:#cfdaf0;
  /* trạng thái */
  --ov-warn:#c2412d; --ov-warn-bg:#fdf2ef; --ov-warn-line:#f2c9bf;
  --ov-star:#f5a623;
  /* nhấn theo loại bài (mặc định = bài định nghĩa) */
  --ov-accent:var(--ov-brand); --ov-accent-ink:var(--ov-deep); --ov-accent-bg:var(--ov-leaf); --ov-accent-line:var(--ov-leaf-line);
  --ov-r:14px; --ov-r-sm:10px;
  box-sizing:border-box; width:100%; max-width:820px; margin:0 auto 2em;
  color:var(--ov-text); font-size:16.5px; line-height:1.78; overflow-wrap:break-word;
}
:is(.rb-article,.ovanic-article) *,:is(.rb-article,.ovanic-article) *::before,:is(.rb-article,.ovanic-article) *::after{box-sizing:border-box}

/* ---------- 2. Loại bài: chỉ đổi màu nhấn phụ, giữ nguyên bộ nhận diện ---------- */
:is(.rb-article,.ovanic-article).ov-toplist,:is(.rb-article,.ovanic-article).ov-review{--ov-accent-bg:var(--ov-cream)}
:is(.rb-article,.ovanic-article).ov-guide{--ov-accent:var(--ov-brand-2);--ov-accent-ink:#2c6be0;--ov-accent-bg:#f4f8ff;--ov-accent-line:#cfe0fb}
:is(.rb-article,.ovanic-article).ov-faq{--ov-accent-bg:var(--ov-cream)}
:is(.rb-article,.ovanic-article).ov-research{--ov-accent:#2b7a8f;--ov-accent-ink:#1f5f70;--ov-accent-bg:#f0f7f9;--ov-accent-line:#c9e0e6}
:is(.rb-article,.ovanic-article).is-product,:is(.rb-article,.ovanic-article).is-archive{max-width:none;font-size:16px}
:is(.rb-article,.ovanic-article).is-page{max-width:760px}

/* ---------- 3. Chữ ---------- */
:is(.rb-article,.ovanic-article) p{margin:0 0 1.05em}
:is(.rb-article,.ovanic-article) p:empty{display:none}
:is(.rb-article,.ovanic-article) strong,:is(.rb-article,.ovanic-article) b{color:var(--ov-ink)}
:is(.rb-article,.ovanic-article) a{color:var(--ov-deep);text-decoration:underline;text-decoration-color:var(--ov-leaf-line);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color .2s}
:is(.rb-article,.ovanic-article) a:hover{text-decoration-color:var(--ov-brand)}
:is(.rb-article,.ovanic-article) img{max-width:100%;height:auto;border-radius:var(--ov-r-sm)}
:is(.rb-article,.ovanic-article) h2,:is(.rb-article,.ovanic-article) h3,:is(.rb-article,.ovanic-article) h4{color:var(--ov-ink);text-transform:none;letter-spacing:0;scroll-margin-top:110px}
:is(.rb-article,.ovanic-article) h2{position:relative;font-size:clamp(21px,2.4vw,26px);line-height:1.35;margin:2.1em 0 .75em;padding:0 0 .45em;border-bottom:1px solid var(--ov-line)}
:is(.rb-article,.ovanic-article) h2::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;border-radius:3px;background:var(--ov-accent)}
:is(.rb-article,.ovanic-article) h3{font-size:clamp(18px,2vw,20px);line-height:1.45;margin:1.6em 0 .55em}
:is(.rb-article,.ovanic-article) h4{font-size:16.5px;line-height:1.5;margin:1.2em 0 .45em}
:is(.rb-article,.ovanic-article) ul,:is(.rb-article,.ovanic-article) ol{margin:0 0 1.1em;padding-left:1.35em}
body :is(.rb-article,.ovanic-article) ul li,body :is(.rb-article,.ovanic-article) ol li{margin:0 0 .45em;margin-left:0}
:is(.rb-article,.ovanic-article) ul>li::marker{color:var(--ov-brand)}
:is(.rb-article,.ovanic-article) ol>li::marker{color:var(--ov-deep);font-weight:700}
:is(.rb-article,.ovanic-article) blockquote{margin:1.4em 0;padding:4px 0 4px 18px;border-left:3px solid var(--ov-sand);color:var(--ov-text);font-style:italic;background:none}
:is(.rb-article,.ovanic-article) hr{border:0;border-top:1px solid var(--ov-line);margin:2em 0}
/* chữ đậm trong <span> (theme ép span về 400) */
:is(.rb-article,.ovanic-article) .ov-b,:is(.rb-article,.ovanic-article) .ov-rank,:is(.rb-article,.ovanic-article) .ov-chip,:is(.rb-article,.ovanic-article) .ov-label,
:is(.rb-article,.ovanic-article) .ov-answer-label,:is(.rb-article,.ovanic-article) .ov-evidence,:is(.rb-article,.ovanic-article) .ov-box-title,
:is(.rb-article,.ovanic-article) .ov-score b,:is(.rb-article,.ovanic-article) .ov-cta-title,:is(.rb-article,.ovanic-article) .ov-ingredients-title,:is(.rb-article,.ovanic-article) .ov-study-title{font-weight:700!important}
:is(.rb-article,.ovanic-article) .ov-label{display:block;margin:0 0 6px;color:var(--ov-accent-ink);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase}

/* ---------- 4. Thông tin bài, biên tập (mục lục dùng plugin Fixed TOC) ---------- */
:is(.rb-article,.ovanic-article) .ov-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 18px;padding:0;color:var(--ov-muted);font-size:14px}
:is(.rb-article,.ovanic-article) .ov-meta>div{display:flex;gap:6px;align-items:baseline}
:is(.rb-article,.ovanic-article) .ov-meta span{color:var(--ov-muted)}
:is(.rb-article,.ovanic-article) .ov-meta strong{color:var(--ov-ink);font-weight:600!important}
:is(.rb-article,.ovanic-article) .ov-editor{position:relative;display:block;margin:0 0 22px;padding:10px 14px 10px 46px;background:var(--ov-cream);border-radius:var(--ov-r-sm);color:var(--ov-muted);font-size:14px;line-height:1.6}
:is(.rb-article,.ovanic-article) .ov-editor::before{content:"✓";position:absolute;left:14px;top:11px;width:22px;height:22px;border-radius:50%;background:var(--ov-leaf-2);color:var(--ov-deep);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

/* ---------- 5. Trả lời nhanh: dấu hiệu nhận diện (viền nét đứt xanh) ---------- */
:is(.rb-article,.ovanic-article) .ov-answer{position:relative;margin:4px 0 26px;padding:18px 22px;background:var(--ov-leaf);border:1.5px dashed var(--ov-brand);border-radius:var(--ov-r);color:var(--ov-ink)}
:is(.rb-article,.ovanic-article) .ov-answer>:last-child{margin-bottom:0}
:is(.rb-article,.ovanic-article) .ov-answer .ov-answer-label{color:var(--ov-deep);margin-right:4px}
/* bài định nghĩa: khối định nghĩa có tên hoạt chất */
:is(.rb-article,.ovanic-article) .ov-define-card{margin:4px 0 26px;padding:20px 22px;background:var(--ov-leaf);border:1.5px dashed var(--ov-brand);border-radius:var(--ov-r)}
:is(.rb-article,.ovanic-article) .ov-define-card dfn{display:block;font-style:normal;font-size:22px;font-weight:700;color:var(--ov-ink);line-height:1.3}
:is(.rb-article,.ovanic-article) .ov-define-card .ov-define-sub{display:block;margin:2px 0 10px;color:var(--ov-muted);font-size:14px}
:is(.rb-article,.ovanic-article) .ov-define-card>:last-child{margin-bottom:0}
/* thẻ nhỏ (đặc tính, đối tượng phù hợp) */
:is(.rb-article,.ovanic-article) .ov-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
body :is(.rb-article,.ovanic-article) .ov-chips li{margin:0}
:is(.rb-article,.ovanic-article) .ov-chip,:is(.rb-article,.ovanic-article) .ov-chips li{display:inline-block;padding:3px 11px;border-radius:999px;background:#fff;border:1px solid var(--ov-leaf-line);color:var(--ov-deep);font-size:13px;line-height:1.6}

/* ---------- 6. Tóm tắt, lưới thẻ, số liệu ---------- */
:is(.rb-article,.ovanic-article) .ov-summary{margin:0 0 26px;padding:18px 22px;background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r)}
:is(.rb-article,.ovanic-article) .ov-summary>:last-child{margin-bottom:0}
:is(.rb-article,.ovanic-article) .ov-summary ul{list-style:none;padding:0;margin:0}
body :is(.rb-article,.ovanic-article) .ov-summary li{position:relative;padding-left:22px}
:is(.rb-article,.ovanic-article) .ov-summary li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--ov-brand-2)}
:is(.rb-article,.ovanic-article) .ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px;margin:1.2em 0 1.6em}
:is(.rb-article,.ovanic-article) .ov-card{padding:16px 18px;background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r)}
:is(.rb-article,.ovanic-article) .ov-card>:last-child{margin-bottom:0}
:is(.rb-article,.ovanic-article) .ov-card h3,:is(.rb-article,.ovanic-article) .ov-card h4{margin:0 0 6px;font-size:16.5px}
:is(.rb-article,.ovanic-article) .ov-card.is-green,:is(.rb-article,.ovanic-article) .ov-card.is-leaf{background:var(--ov-leaf);border-color:var(--ov-leaf-line)}
:is(.rb-article,.ovanic-article) .ov-card.is-beige,:is(.rb-article,.ovanic-article) .ov-card.is-orange{background:var(--ov-cream);border-color:var(--ov-sand)}
:is(.rb-article,.ovanic-article) .ov-card.is-red{background:var(--ov-warn-bg);border-color:var(--ov-warn-line)}
:is(.rb-article,.ovanic-article) .ov-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:0;margin:1.3em 0 1.7em;background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r);overflow:hidden}
:is(.rb-article,.ovanic-article) .ov-stat{padding:16px 14px;background:#fff;text-align:center;box-shadow:0 0 0 .5px var(--ov-line)}
:is(.rb-article,.ovanic-article) .ov-stat strong{display:block;color:var(--ov-deep);font-size:clamp(22px,3vw,28px);line-height:1.2}
:is(.rb-article,.ovanic-article) .ov-stat span{display:block;margin-top:4px;color:var(--ov-muted);font-size:13.5px;line-height:1.5}

/* ---------- 7. Ghi chú ---------- */
:is(.rb-article,.ovanic-article) .ov-callout{margin:1.4em 0;padding:14px 18px;background:var(--ov-cream);border:0;border-left:3px solid var(--ov-sand);border-radius:0 var(--ov-r-sm) var(--ov-r-sm) 0;font-size:15.5px;color:var(--ov-text)}
:is(.rb-article,.ovanic-article) .ov-callout>:last-child{margin-bottom:0}
:is(.rb-article,.ovanic-article) .ov-callout strong{color:var(--ov-ink)}
:is(.rb-article,.ovanic-article) .ov-callout.is-tip{border-left-color:#e2c08d}
:is(.rb-article,.ovanic-article) .ov-callout.is-success{background:var(--ov-leaf);border-left-color:var(--ov-brand)}
:is(.rb-article,.ovanic-article) .ov-callout.is-info{border-left-color:var(--ov-line-2)}
:is(.rb-article,.ovanic-article) .ov-callout.is-case{background:#fff;border:1px dashed var(--ov-sand);border-left:3px solid #e2c08d}
/* cảnh báo an toàn: duy nhất được dùng màu đỏ */
:is(.rb-article,.ovanic-article) .ov-callout.is-warn{background:var(--ov-warn-bg);border-left-color:var(--ov-warn);color:#6f2418}
:is(.rb-article,.ovanic-article) .ov-callout.is-warn strong{color:#8c2a1b}
/* ý kiến dược sĩ, bác sĩ */
:is(.rb-article,.ovanic-article) .ov-expert{display:grid;grid-template-columns:40px 1fr;gap:0 14px;align-items:start;margin:1.4em 0;padding:16px 18px;background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r);font-style:normal}
:is(.rb-article,.ovanic-article) .ov-expert::before{content:"";grid-row:1/span 2;width:40px;height:40px;border-radius:50%;background:var(--ov-leaf-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4ed1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 2.3A.3.3 0 1 0 5 2H4a2 2 0 0 0-2 2v5a6 6 0 0 0 6 6 6 6 0 0 0 6-6V4a2 2 0 0 0-2-2h-1a.2.2 0 1 0 .3.3'/%3E%3Cpath d='M8 15v1a6 6 0 0 0 6 6 6 6 0 0 0 6-6v-4'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/svg%3E") center/20px no-repeat}
:is(.rb-article,.ovanic-article) .ov-expert p{grid-column:2;margin:0;font-style:italic;color:var(--ov-ink)}
:is(.rb-article,.ovanic-article) .ov-expert cite{grid-column:2;display:block;margin-top:6px;font-style:normal;font-weight:600;color:var(--ov-deep);font-size:14px}

/* ---------- 8. Bảng (kể cả bảng cũ chưa bọc .ov-table) ---------- */
:is(.rb-article,.ovanic-article) .ov-table{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4em 0 1.8em;background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r)}
:is(.rb-article,.ovanic-article) table{width:100%!important;margin:1.4em 0 1.8em;border:1px solid var(--ov-line);border-collapse:collapse;border-spacing:0;font-size:15px}
:is(.rb-article,.ovanic-article) .ov-table table{min-width:560px;margin:0;border:0}
body :is(.rb-article,.ovanic-article) table th{padding:11px 14px;background:var(--ov-beige);border:0;border-bottom:1px solid var(--ov-line-2);color:var(--ov-ink);font-size:14px;font-weight:700;text-align:left;text-transform:none;letter-spacing:0;vertical-align:bottom}
body :is(.rb-article,.ovanic-article) table td{padding:11px 14px;border:0;border-bottom:1px solid var(--ov-line);color:var(--ov-text);font-weight:400;line-height:1.6;vertical-align:top;text-align:left}
/* chặn rule của theme: "main/.content-row table tr td:first-child{background:#f1f1f1;width:30%}" */
body :is(.rb-article,.ovanic-article) table tr td:first-child{background:transparent;width:auto;white-space:normal;color:var(--ov-ink);font-weight:600;padding-left:14px!important}
body :is(.rb-article,.ovanic-article) table tr:last-child td{border-bottom:0}
body :is(.rb-article,.ovanic-article) table td ul li{list-style:disc;margin-left:1em}
:is(.rb-article,.ovanic-article) .ov-table.is-info table{min-width:0}
body :is(.rb-article,.ovanic-article) .ov-table.is-info tr td:first-child{width:34%;background:var(--ov-cream)}
body :is(.rb-article,.ovanic-article) table td.is-best{background:var(--ov-leaf)!important;color:var(--ov-deep);font-weight:700}
:is(.rb-article,.ovanic-article) .ov-table table:has(th:nth-child(6)){min-width:680px}
:is(.rb-article,.ovanic-article) .ov-table table:has(th:nth-child(8)){min-width:820px}
/* gợi ý "kéo ngang" trên điện thoại (JS thêm class is-scroll) */
:is(.rb-article,.ovanic-article) .ov-table.is-scroll::after{content:"⇠ kéo ngang để xem ⇢";position:sticky;left:0;display:block;padding:6px;text-align:center;font-size:12px;color:var(--ov-muted);background:var(--ov-cream)}

/* ---------- 9. Thành phần – hàm lượng (kiểu nhãn Supplement Facts) ---------- */
:is(.rb-article,.ovanic-article) .ov-ingredients{max-width:560px;margin:1.2em 0 1.6em;padding:14px 18px;background:#fff;border:1.5px solid var(--ov-ink);border-radius:var(--ov-r-sm)}
:is(.rb-article,.ovanic-article) .ov-ingredients-title{display:block;padding-bottom:6px;margin-bottom:4px;border-bottom:5px solid var(--ov-ink);font-weight:700;font-size:17px;color:var(--ov-ink)}
:is(.rb-article,.ovanic-article) .ov-ingredients dl{display:grid;grid-template-columns:1fr auto;margin:0}
:is(.rb-article,.ovanic-article) .ov-ingredients dt,:is(.rb-article,.ovanic-article) .ov-ingredients dd{margin:0;padding:7px 0;border-bottom:1px solid var(--ov-line)}
:is(.rb-article,.ovanic-article) .ov-ingredients dd{text-align:right;font-weight:700;color:var(--ov-ink);padding-left:12px}
:is(.rb-article,.ovanic-article) .ov-ingredients small{display:block;color:var(--ov-muted);font-size:13px;font-weight:400}

/* ---------- 10. Liều dùng ---------- */
:is(.rb-article,.ovanic-article) .ov-dose{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));margin:1.2em 0 1.6em;border:1px solid var(--ov-line);border-radius:var(--ov-r);overflow:hidden;background:var(--ov-cream)}
:is(.rb-article,.ovanic-article) .ov-dose>div{padding:13px 16px;border-right:1px solid var(--ov-line)}
:is(.rb-article,.ovanic-article) .ov-dose>div:last-child{border-right:0}
:is(.rb-article,.ovanic-article) .ov-dose span{display:block;font-size:12px;color:var(--ov-muted);text-transform:uppercase;letter-spacing:.06em}
:is(.rb-article,.ovanic-article) .ov-dose strong{display:block;font-size:16.5px;color:var(--ov-ink)}

/* ---------- 11. Bằng chứng, nghiên cứu ---------- */
:is(.rb-article,.ovanic-article) .ov-evidence{display:inline-block;padding:1px 10px;border-radius:999px;font-size:12.5px;white-space:nowrap;vertical-align:1px}
:is(.rb-article,.ovanic-article) .ov-evidence.is-high{background:var(--ov-leaf-2);color:var(--ov-deep)}
:is(.rb-article,.ovanic-article) .ov-evidence.is-mid{background:#fbf0dc;color:#8a5a12}
:is(.rb-article,.ovanic-article) .ov-evidence.is-low{background:#edf0f6;color:#5d6b85}
:is(.rb-article,.ovanic-article) .ov-study{margin:1.2em 0;padding:16px 18px;background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r)}
:is(.rb-article,.ovanic-article) .ov-study-title{display:block;margin-bottom:8px;font-weight:700;color:var(--ov-ink)}
:is(.rb-article,.ovanic-article) .ov-study dl{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;margin:0;font-size:15px}
:is(.rb-article,.ovanic-article) .ov-study dt{color:var(--ov-muted)}:is(.rb-article,.ovanic-article) .ov-study dd{margin:0}

/* ---------- 12. Các bước, thẻ bước, liệu trình ---------- */
:is(.rb-article,.ovanic-article) .ov-steps{margin:1.4em 0 1.8em;padding:0;list-style:none;counter-reset:ovstep}
body :is(.rb-article,.ovanic-article) .ov-steps>li{position:relative;margin:0;padding:0 0 18px 54px;list-style:none;counter-increment:ovstep}
:is(.rb-article,.ovanic-article) .ov-steps>li::before{content:counter(ovstep);position:absolute;left:0;top:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ov-leaf-2);color:var(--ov-deep);font-weight:700}
:is(.rb-article,.ovanic-article) .ov-steps>li:not(:last-child)::after{content:"";position:absolute;left:17px;top:40px;bottom:2px;width:2px;background:var(--ov-leaf-line)}
:is(.rb-article,.ovanic-article) .ov-steps>li>strong:first-child{display:block;color:var(--ov-ink);margin:5px 0 2px}
:is(.rb-article,.ovanic-article) .ov-step-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin:1.2em 0 1.6em;counter-reset:ovcard}
:is(.rb-article,.ovanic-article) .ov-step-cards>div{counter-increment:ovcard;padding:16px 18px;background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r)}
:is(.rb-article,.ovanic-article) .ov-step-cards>div::before{content:"Bước " counter(ovcard);display:block;margin-bottom:6px;color:var(--ov-deep);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
:is(.rb-article,.ovanic-article) .ov-step-cards strong{display:block;color:var(--ov-ink);margin-bottom:2px}
:is(.rb-article,.ovanic-article) .ov-step-cards>div>:last-child{margin-bottom:0}
:is(.rb-article,.ovanic-article) .ov-timeline{position:relative;margin:1.4em 0 1.8em;padding:0 0 0 26px;list-style:none}
:is(.rb-article,.ovanic-article) .ov-timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--ov-leaf-line)}
body :is(.rb-article,.ovanic-article) .ov-timeline>li{position:relative;margin:0 0 14px;list-style:none}
:is(.rb-article,.ovanic-article) .ov-timeline>li::before{content:"";position:absolute;left:-24px;top:7px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--ov-brand)}
:is(.rb-article,.ovanic-article) .ov-timeline>li>strong:first-child{display:block;color:var(--ov-deep)}

/* ---------- 13. Checklist, nên / không nên ---------- */
:is(.rb-article,.ovanic-article) .ov-checklist,:is(.rb-article,.ovanic-article) .ov-pros ul,:is(.rb-article,.ovanic-article) .ov-cons ul{margin:0 0 1.1em;padding:0;list-style:none}
body :is(.rb-article,.ovanic-article) .ov-checklist li,body :is(.rb-article,.ovanic-article) .ov-pros li,body :is(.rb-article,.ovanic-article) .ov-cons li{position:relative;margin:0 0 .5em;padding-left:28px;list-style:none}
:is(.rb-article,.ovanic-article) .ov-checklist li::before,:is(.rb-article,.ovanic-article) .ov-pros li::before,:is(.rb-article,.ovanic-article) .ov-cons li::before{content:"✓";position:absolute;left:0;top:.3em;width:19px;height:19px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ov-leaf-2);color:var(--ov-deep);font-size:11px;font-weight:700}
:is(.rb-article,.ovanic-article) .ov-checklist.is-cross li::before,:is(.rb-article,.ovanic-article) .ov-cons li::before{content:"✕";background:#f8e4df;color:var(--ov-warn)}
:is(.rb-article,.ovanic-article) .ov-proscons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin:1.2em 0 1.6em}
:is(.rb-article,.ovanic-article) .ov-pros,:is(.rb-article,.ovanic-article) .ov-cons{padding:16px 18px;background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r)}
:is(.rb-article,.ovanic-article) .ov-pros{border-top:3px solid var(--ov-brand-2)}
:is(.rb-article,.ovanic-article) .ov-cons{border-top:3px solid #e8a99b}
:is(.rb-article,.ovanic-article) .ov-pros h4,:is(.rb-article,.ovanic-article) .ov-cons h4{margin:0 0 10px;font-size:15px}
:is(.rb-article,.ovanic-article) .ov-pros ul,:is(.rb-article,.ovanic-article) .ov-cons ul{margin-bottom:0}

/* ---------- 14. Thẻ sản phẩm trong bài top list ---------- */
:is(.rb-article,.ovanic-article) .ov-product{container-type:inline-size;margin:26px 0;padding:clamp(16px,3vw,24px);background:#fff;border:1px solid var(--ov-line);border-radius:18px}
:is(.rb-article,.ovanic-article) .ov-product>h3{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:clamp(18px,2.2vw,21px)}
:is(.rb-article,.ovanic-article) .ov-rank{flex:0 0 36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ov-brand);color:#fff;font-size:16px}
:is(.rb-article,.ovanic-article) .ov-product:first-of-type .ov-rank{background:var(--ov-btn)}
:is(.rb-article,.ovanic-article) .ov-product .ov-score{margin:0 0 10px}
:is(.rb-article,.ovanic-article) .ov-product-intro{font-size:16px}
:is(.rb-article,.ovanic-article) .ov-product-grid{display:grid;grid-template-columns:1fr;gap:14px 18px;margin:14px 0}
:is(.rb-article,.ovanic-article) .ov-box{padding:10px 0 0;background:none;border:0;border-top:1px solid var(--ov-line);border-radius:0}
:is(.rb-article,.ovanic-article) .ov-box-title{display:block;margin-bottom:6px;color:var(--ov-muted);font-size:12.5px;letter-spacing:.07em;text-transform:uppercase}
:is(.rb-article,.ovanic-article) .ov-box ul{margin:0;padding-left:18px}:is(.rb-article,.ovanic-article) .ov-box li{margin:3px 0}:is(.rb-article,.ovanic-article) .ov-box p{margin:0}
:is(.rb-article,.ovanic-article) .ov-box.is-pros .ov-box-title{color:var(--ov-deep)}
:is(.rb-article,.ovanic-article) .ov-box.is-cons .ov-box-title{color:var(--ov-warn)}
:is(.rb-article,.ovanic-article) .ov-fit{margin:14px 0 0;padding:12px 16px;background:var(--ov-leaf);border:1px dashed var(--ov-leaf-line);border-radius:var(--ov-r-sm)}
:is(.rb-article,.ovanic-article) .ov-fit strong{color:var(--ov-deep)}
@container (min-width:520px){
  :is(.rb-article,.ovanic-article) .ov-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.rb-article,.ovanic-article) .ov-product-grid:has(>.ov-box:nth-child(3):last-child)>.ov-box:first-child{grid-column:1/-1}
}
/* kết luận chọn nhanh cuối top list */
:is(.rb-article,.ovanic-article) .ov-verdict{margin:1.4em 0 1.8em;padding:0;list-style:none;border:1px solid var(--ov-line);border-radius:var(--ov-r);overflow:hidden}
body :is(.rb-article,.ovanic-article) .ov-verdict li{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:12px;align-items:center;margin:0;padding:12px 16px;border-bottom:1px solid var(--ov-line);list-style:none}
body :is(.rb-article,.ovanic-article) .ov-verdict li:last-child{border-bottom:0}
:is(.rb-article,.ovanic-article) .ov-verdict li>span{color:var(--ov-muted);font-size:14.5px}
:is(.rb-article,.ovanic-article) .ov-verdict li>strong{color:var(--ov-ink)}

/* ---------- 15. Đánh giá sao: <span class="ov-stars" style="--r:4.5"></span> ---------- */
:is(.rb-article,.ovanic-article) .ov-score{display:inline-flex;align-items:center;gap:8px;color:var(--ov-ink);font-size:14.5px}
:is(.rb-article,.ovanic-article) .ov-stars{--r:5;position:relative;display:inline-block;font-size:16px;line-height:1;letter-spacing:2px}
:is(.rb-article,.ovanic-article) .ov-stars::before{content:"★★★★★";color:#dfe6f3}
:is(.rb-article,.ovanic-article) .ov-stars::after{content:"★★★★★";position:absolute;left:0;top:0;width:calc(var(--r) / 5 * 100%);overflow:hidden;white-space:nowrap;color:var(--ov-star)}

/* ---------- 16. Sơ đồ: quy trình, so sánh, ma trận, thanh ---------- */
:is(.rb-article,.ovanic-article) .ov-flow{margin:1.6em 0}
:is(.rb-article,.ovanic-article) .ov-flow-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}
:is(.rb-article,.ovanic-article) .ov-flow-step{flex:1 1 140px;padding:12px;background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r);text-align:center;font-size:14px;line-height:1.5}
:is(.rb-article,.ovanic-article) .ov-flow-step:last-child{background:var(--ov-leaf);border:1.5px dashed var(--ov-brand)}
:is(.rb-article,.ovanic-article) .ov-flow-step strong{display:block;color:var(--ov-ink);font-size:15px;margin-bottom:3px}
:is(.rb-article,.ovanic-article) .ov-flow-arrow{align-self:center;color:var(--ov-brand-2);font-size:20px}
:is(.rb-article,.ovanic-article) figcaption{margin-top:8px;text-align:center;color:var(--ov-muted);font-size:13.5px}
:is(.rb-article,.ovanic-article) .ov-vs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:1.4em 0 1.8em}
:is(.rb-article,.ovanic-article) .ov-vs>div{padding:16px 18px;background:#fff;border:1px solid var(--ov-line);border-radius:var(--ov-r)}
:is(.rb-article,.ovanic-article) .ov-vs>div:first-of-type{border-top:3px solid var(--ov-brand)}
:is(.rb-article,.ovanic-article) .ov-vs>div:last-of-type{border-top:3px solid #e2c08d}
:is(.rb-article,.ovanic-article) .ov-vs h4{margin-top:0}
:is(.rb-article,.ovanic-article) .ov-vs-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1px solid var(--ov-line);color:var(--ov-muted);font-size:13px;font-weight:700}
:is(.rb-article,.ovanic-article) .ov-matrix{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:1.4em 0 1.8em}
:is(.rb-article,.ovanic-article) .ov-matrix>div{min-height:84px;padding:14px;background:var(--ov-cream);border:1px solid var(--ov-line);border-radius:var(--ov-r-sm)}
:is(.rb-article,.ovanic-article) .ov-matrix>div.is-best{background:var(--ov-leaf);border:1.5px dashed var(--ov-brand)}
:is(.rb-article,.ovanic-article) .ov-matrix>div strong{display:block;margin-bottom:4px}
:is(.rb-article,.ovanic-article) .ov-matrix>.ov-matrix-axis{grid-column:1/-1;min-height:0;padding:2px;background:none;border:0;text-align:center;font-size:13px;color:var(--ov-muted)}
:is(.rb-article,.ovanic-article) .ov-bars{margin:1.4em 0 1.8em}
:is(.rb-article,.ovanic-article) .ov-bar{display:grid;grid-template-columns:minmax(110px,30%) 1fr auto;align-items:center;gap:10px;margin:0 0 10px;font-size:14.5px}
:is(.rb-article,.ovanic-article) .ov-bar-track{height:10px;background:var(--ov-beige);border-radius:99px;overflow:hidden}
:is(.rb-article,.ovanic-article) .ov-bar-fill{display:block;height:100%;width:var(--v,50%);background:var(--ov-brand-2);border-radius:99px}
:is(.rb-article,.ovanic-article) .ov-bar b{color:var(--ov-ink)}

/* ---------- 17. Ảnh, FAQ, nguồn, lưu ý pháp lý ---------- */
:is(.rb-article,.ovanic-article) .wp-caption,:is(.rb-article,.ovanic-article) .ov-figure{max-width:100%;margin:1.6em auto;text-align:center}
:is(.rb-article,.ovanic-article) .wp-caption-text{margin-top:6px;color:var(--ov-muted);font-size:13.5px}
:is(.rb-article,.ovanic-article) .ov-faq{margin:1.2em 0 1.8em;border-top:1px solid var(--ov-line)}
:is(.rb-article,.ovanic-article) .ov-faq-item{margin:0;padding:14px 0;background:none;border:0;border-bottom:1px solid var(--ov-line);border-radius:0}
:is(.rb-article,.ovanic-article) .ov-faq-item h3{margin:0 0 6px;font-size:16.5px;color:var(--ov-ink)}
:is(.rb-article,.ovanic-article) .ov-faq-item>:last-child{margin-bottom:0}
/* FAQ dạng mở/đóng (không cần JS): <details class="ov-faq-item"><summary>Câu hỏi</summary><p>…</p></details> */
:is(.rb-article,.ovanic-article) details.ov-faq-item summary{position:relative;padding-right:30px;cursor:pointer;list-style:none;font-weight:700;color:var(--ov-ink);font-size:16.5px;line-height:1.5}
:is(.rb-article,.ovanic-article) details.ov-faq-item summary::-webkit-details-marker{display:none}
:is(.rb-article,.ovanic-article) details.ov-faq-item summary::after{content:"";position:absolute;right:4px;top:.45em;width:9px;height:9px;border-right:2px solid var(--ov-brand);border-bottom:2px solid var(--ov-brand);transform:rotate(45deg);transition:transform .2s}
:is(.rb-article,.ovanic-article) details.ov-faq-item[open] summary::after{transform:rotate(-135deg);top:.7em}
:is(.rb-article,.ovanic-article) details.ov-faq-item>:not(summary){margin-top:8px}
:is(.rb-article,.ovanic-article) .ov-sources{margin:1em 0 1.6em;padding:14px 18px;background:var(--ov-cream);border-radius:var(--ov-r-sm);font-size:14px;color:var(--ov-muted)}
:is(.rb-article,.ovanic-article) .ov-sources ol{margin:0;padding-left:20px}
:is(.rb-article,.ovanic-article) .ov-sources a{word-break:break-word;color:var(--ov-text)}
:is(.rb-article,.ovanic-article) .ov-disclaimer{margin:1.6em 0;padding:10px 14px;border-top:1px solid var(--ov-line);font-size:13.5px;font-style:italic;color:var(--ov-muted);text-align:center}

/* ---------- 18. Tư vấn cuối bài (bài top list không đặt khuyến mãi) ---------- */
:is(.rb-article,.ovanic-article) .ov-cta{margin:2em 0 0;padding:clamp(20px,4vw,30px) 22px;background:var(--ov-beige);border-radius:18px;text-align:center;color:var(--ov-text)}
:is(.rb-article,.ovanic-article) .ov-cta-title{display:block;margin:0 0 6px;color:var(--ov-ink);font-size:clamp(18px,2.3vw,22px);font-weight:700}
:is(.rb-article,.ovanic-article) .ov-cta p{max-width:60ch;margin:0 auto 16px}
:is(.rb-article,.ovanic-article) .ov-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
:is(.rb-article,.ovanic-article) a.ov-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 24px;background:var(--ov-btn);border:1.5px solid var(--ov-btn);border-radius:999px;color:#fff;font-weight:700;text-decoration:none;transition:background .2s,border-color .2s}
:is(.rb-article,.ovanic-article) a.ov-btn:hover{background:var(--ov-btn-hover);border-color:var(--ov-btn-hover);color:#fff}
:is(.rb-article,.ovanic-article) a.ov-btn.is-ghost{background:#fff;border-color:var(--ov-brand);color:var(--ov-deep)}
:is(.rb-article,.ovanic-article) a.ov-btn.is-ghost:hover{background:var(--ov-leaf)}

/* ---------- 19. Theo loại bài: bố cục riêng ---------- */
/* Hỏi đáp: câu hỏi lớn là H2, câu trả lời ngắn đầu mỗi mục */
:is(.rb-article,.ovanic-article).ov-faq h2{font-size:clamp(20px,2.3vw,24px)}
:is(.rb-article,.ovanic-article).ov-faq h2+p{font-size:17px;color:var(--ov-ink)}
/* Nghiên cứu: chữ nhỏ hơn chút, bảng dày dữ liệu */
:is(.rb-article,.ovanic-article).ov-research{font-size:16px}
:is(.rb-article,.ovanic-article).ov-research h2::after{background:var(--ov-accent)}
/* Mô tả sản phẩm, danh mục, thương hiệu: khoảng cách gọn, H2 nhỏ hơn */
:is(.rb-article,.ovanic-article).is-product h2,:is(.rb-article,.ovanic-article).is-archive h2{font-size:clamp(19px,2.2vw,23px);margin-top:1.7em}
:is(.rb-article,.ovanic-article).is-archive{padding-top:6px}

/* ---------- 20. Điện thoại ---------- */
@media (max-width:640px){
  :is(.rb-article,.ovanic-article){font-size:16px;line-height:1.72}
  :is(.rb-article,.ovanic-article) .ov-answer,:is(.rb-article,.ovanic-article) .ov-define-card{padding:15px 16px}
  :is(.rb-article,.ovanic-article) .ov-flow-row{flex-direction:column}
  :is(.rb-article,.ovanic-article) .ov-flow-step{flex:0 0 auto}
  :is(.rb-article,.ovanic-article) .ov-flow-arrow{transform:rotate(90deg);text-align:center}
  :is(.rb-article,.ovanic-article) .ov-vs{grid-template-columns:1fr}
  :is(.rb-article,.ovanic-article) .ov-vs-badge{position:static;transform:none;margin:-4px auto}
  :is(.rb-article,.ovanic-article) .ov-dose>div{border-right:0;border-bottom:1px solid var(--ov-line)}
  :is(.rb-article,.ovanic-article) .ov-study dl{grid-template-columns:1fr}
  body :is(.rb-article,.ovanic-article) .ov-verdict li{grid-template-columns:1fr;gap:2px}
  :is(.rb-article,.ovanic-article) .ov-stats{grid-template-columns:1fr 1fr}
  :is(.rb-article,.ovanic-article) .ov-stat:last-child:nth-child(odd){grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){:is(.rb-article,.ovanic-article) *{transition:none!important}}
@media print{:is(.rb-article,.ovanic-article) .ov-cta,.rb-pc-b{display:none!important}}

/* ---------- 21. Robonic: ảnh tự đặt vào bài (inc/content.php), đội ngũ biên soạn ---------- */
.rb-fig{max-width:100%;margin:1.6em auto;text-align:center}
.rb-fig img{display:block;width:100%;height:auto;border-radius:12px;background:#f2f7ff}
.rb-fig figcaption{margin-top:6px;color:#5d6b85;font-size:13.5px;line-height:1.5}
:is(.rb-article,.ovanic-article) .ov-team{margin:1.6em 0 .6em;padding:12px 16px;background:var(--ov-cream);border-radius:var(--ov-r-sm);font-size:14px;line-height:1.65;color:var(--ov-muted)}

/* ---- Mã ngắn sản phẩm: [rb_products] và [rb_compare] ---- */
.rb-pcs{display:grid;gap:14px;margin:22px 0;grid-template-columns:repeat(2,1fr)}
.rb-pcs.n1{grid-template-columns:minmax(0,320px)}
@media(min-width:760px){.rb-pcs.n3{grid-template-columns:repeat(3,1fr)}.rb-pcs.n4{grid-template-columns:repeat(4,1fr)}}
.rb-pc{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid #e1e9f7;border-radius:14px;background:#fff;text-align:center}
.rb-pc-i{display:block;aspect-ratio:1;overflow:hidden;border-radius:10px;background:#f4f7fd}
.rb-pc-i img{width:100%;height:100%;object-fit:contain}
.rb-pc-n{font-weight:700;font-size:15px;line-height:1.35;color:#0b1f44;text-decoration:none}
.rb-pc-p{font-weight:700;color:#d9261c}.rb-pc-p del{color:#8a96ad;font-weight:400;font-size:.85em}.rb-pc-p ins{text-decoration:none}
.rb-pc-st{display:inline-block;width:80px;height:14px;vertical-align:-2px;background:linear-gradient(90deg,#f57c00 var(--v),#d5dcea var(--v));-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'><path d='M8 0l2.2 4.6 5 .6-3.7 3.4 1 5L8 11l-4.5 2.6 1-5L.8 5.2l5-.6z'/></svg>") 0 0/16px 14px repeat-x;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14'><path d='M8 0l2.2 4.6 5 .6-3.7 3.4 1 5L8 11l-4.5 2.6 1-5L.8 5.2l5-.6z'/></svg>") 0 0/16px 14px repeat-x}
.rb-pc-b{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.rb-pc-a{flex:1;display:inline-block;padding:9px 10px;border:1.5px solid #1560ff;border-radius:999px;font-size:14px;font-weight:600;color:#1560ff;text-align:center;text-decoration:none;background:#fff}
.rb-pc-buy{background:#1560ff;color:#fff}
.rb-cmp{margin:22px 0;overflow-x:auto;border:1px solid #e1e9f7;border-radius:14px}
.rb-cmp table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.rb-cmp th,.rb-cmp td{padding:12px;text-align:left;vertical-align:middle;border-bottom:1px solid #e1e9f7}
.rb-cmp thead th{background:#eef3ff;color:#0b1f44;font-weight:700}
.rb-cmp tbody th{position:sticky;left:0;background:#fff;min-width:140px}
.rb-cmp tbody th a{color:#1560ff;text-decoration:none}
.rb-cmp-i img{width:84px;height:84px;object-fit:contain}
.rb-cmp-p{font-weight:700;color:#d9261c}
:is(.entry,.rb-article) :is(.rb-pc-a,.rb-pc-n,.rb-cmp a){text-decoration:none;background-image:none;box-shadow:none}
:is(.entry,.rb-article) .rb-pc-a{white-space:nowrap;padding:9px 6px;font-size:13.5px;color:#1560ff;border:1.5px solid #1560ff}
:is(.entry,.rb-article) .rb-pc-buy{color:#fff;background:#1560ff}
:is(.entry,.rb-article) .rb-pc-n{color:#0b1f44}
:is(.entry,.rb-article) .rb-pc-p ins,:is(.entry,.rb-article) .rb-cmp-p ins{text-decoration:none;background:none}
.rb-cmp tbody th{vertical-align:middle}

/* Nhiều sản phẩm: nút xếp dọc cho khỏi dính nhau; trên 4 sản phẩm thành thanh trượt */
.rb-pcs:not(.n1) .rb-pc-b{flex-direction:column}
:is(.entry,.rb-article) .rb-pc-a{line-height:1.25;padding:10px 8px;font-size:14px;min-width:0;display:block;box-sizing:border-box;width:100%}
.rb-pcs.n1 .rb-pc-b{flex-direction:row}
.rb-sl{position:relative;margin:22px 0}
.rb-pcs.slide{display:flex;gap:14px;margin:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rb-pcs.slide::-webkit-scrollbar{display:none}
.rb-pcs.slide .rb-pc{flex:0 0 calc(25% - 10.5px);scroll-snap-align:start;box-sizing:border-box}
@media(max-width:759px){.rb-pcs.slide .rb-pc{flex-basis:calc(50% - 7px)}}
.rb-sl-b{position:absolute;top:34%;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid #e1e9f7;background:#fff;color:#1560ff;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(11,31,68,.15);padding:0}
.rb-sl-p{left:-10px}.rb-sl-n{right:-10px}
:is(.rb-article,.ovanic-article) .ov-table table:has(th:nth-child(5)){min-width:760px}