/* ═══════════════════════════════════════════════════════════════════════
   AI THỰC CHIẾN — BỘ GIAO DIỆN DÙNG CHUNG
   ═══════════════════════════════════════════════════════════════════════

   Nạp vào MỌI trang để đồng bộ với trang chủ. Site có 2 thế hệ khuôn mẫu:

     • Thế hệ MỚI (14 trang: blog.html, cong-cu.html, các bài từ 07/2026)
       — dùng biến CSS (--c-bg…), lớp .site-nav/.prose/.step/.warn/.tbl
     • Thế hệ CŨ (38 bài blog)
       — màu ĐẶT THẲNG trong thẻ (style="background:#060a14"), lớp
         .prose-content/.callout/.step-card, KHÔNG có biến CSS

   Vì màu thế hệ cũ nằm trong thuộc tính style của từng thẻ, ta nhắm đúng
   giá trị đó bằng bộ chọn [style*="…"] + !important. Nhờ vậy 38 file kia
   KHÔNG cần sửa markup — chỉ cần nạp file này.

   ⚠ Sửa file này = ảnh hưởng toàn site. Đổi màu thì đổi ở đây, đừng vá lẻ.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. BẢNG MÀU ─────────────────────────────────────────────────────── */
:root {
  --c-bg: #0a0f1e;
  --c-bg-alt: #080d1a;
  --c-bg-card: #111827;
  --c-bg-nav: rgba(10,15,30,0.85);
  --c-bg-footer: #060a14;
  --c-text: #e2e8f0;
  --c-border: rgba(255,255,255,0.1);
  --c-border-subtle: rgba(255,255,255,0.05);
  --ease: cubic-bezier(.16,.8,.24,1);
}
html.light {
  --c-bg: #f7f5f0;
  --c-bg-alt: #eef0e8;
  --c-bg-card: #ffffff;
  --c-bg-nav: rgba(247,245,240,0.88);
  --c-bg-footer: #eceae3;
  --c-text: #10233b;
  --c-border: rgba(15,35,55,0.1);
  --c-border-subtle: rgba(15,35,55,0.06);
}

/* ── 2. NỀN SÁNG CHO THẾ HỆ CŨ (màu đặt thẳng trong thẻ) ─────────────── */
/* Ngoài stylesheet không thắng được style trong thẻ nếu thiếu !important. */
html.light body                                  { background-color: var(--c-bg) !important; color: var(--c-text) !important; }
html.light [style*="background:#060a14"]         { background: var(--c-bg-footer) !important; }
html.light [style*="background:#080d1a"]         { background: var(--c-bg-alt) !important; }
html.light [style*="background:#111827"]         { background: var(--c-bg-card) !important; }
html.light [style*="rgba(10,15,30,0.92)"]        { background: var(--c-bg-nav) !important; }

html.light .prose-content h2                     { color: #0f172a !important; }
html.light .prose-content h3                     { color: #1d4ed8 !important; }
html.light .prose-content p,
html.light .prose-content ul,
html.light .prose-content ol,
html.light .prose-content li                     { color: #334155 !important; }
html.light .prose-content strong                 { color: #0f172a !important; }
html.light .step-card                            { background: #fff !important; border-color: rgba(15,35,55,0.1) !important; }

/* ── 3. NỀN SÁNG CHO THẾ HỆ MỚI ──────────────────────────────────────── */
html.light .site-nav                             { background: var(--c-bg-nav) !important; }
html.light .bg-alt                               { background: var(--c-bg-alt) !important; }
html.light .site-footer                          { background: var(--c-bg-footer) !important; }
html.light .bg-card                              { background-color: var(--c-bg-card) !important; }
html.light .step                                 { background: #fff !important; }
html.light .prose p, html.light .prose li        { color: #475569 !important; }
html.light .prose strong                         { color: #0f172a !important; }
html.light .prose h2, html.light .prose h3       { color: #0f172a !important; }
html.light .tbl th                               { color: #0f172a !important; background: rgba(59,130,246,0.08) !important; }
html.light .tbl td                               { color: #475569 !important; }
html.light .promptbox                            { background: #f8fafc !important; }

/* Bài hướng dẫn thế hệ mới dùng .box và .prompt. Trước đây các khung này
   giữ nền tối khi trang chuyển sang sáng, trong khi chữ bên trong đã đổi
   sang navy; kết quả là chữ, số bước và liên kết bị chìm. */
html.light nav[style*="rgba(9,13,26,.9)"]        { background: var(--c-bg-nav) !important; }
html.light .prose .box:not(.warning):not(.good):not([style*="linear-gradient"]) {
  background: var(--c-bg-card) !important;
  border-color: var(--c-border) !important;
  box-shadow: 0 1px 3px rgba(15,35,55,.06);
}
html.light .prose .box.warning {
  background: #fff8eb !important;
  border-color: rgba(180,83,9,.24) !important;
}
html.light .prose .box.good {
  background: #ecfdf5 !important;
  border-color: rgba(5,150,105,.24) !important;
}
html.light .prose .prompt {
  background: #f1f5f9 !important;
  border-color: rgba(30,64,175,.28) !important;
  color: #1e293b !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
html.light .prose .num,
.prose .num                                      { color: #fff; }
html.light .prose .bg-blue-500                   { color: #fff !important; }

/* Thumbnail AI có tông navy; tăng nhẹ độ sáng và tương phản để chi tiết
   giao diện trong ảnh vẫn rõ khi đặt trên cả nền sáng lẫn nền tối. */
.prose > img {
  display: block;
  background: var(--c-bg-card);
  box-shadow: 0 12px 30px rgba(2,6,23,.18);
  filter: brightness(1.05) contrast(1.04);
}
html.light .prose > img {
  border-color: rgba(15,35,55,.14) !important;
  box-shadow: 0 12px 30px rgba(15,35,55,.12);
}

/* ── 4. TIỆN ÍCH TAILWIND DÙNG CHUNG ─────────────────────────────────── */
html.light .text-white                           { color: var(--c-text) !important; }
html.light .text-slate-300                       { color: #334155 !important; }
html.light .text-slate-400                       { color: #475569 !important; }
html.light .text-slate-500                       { color: #52606d !important; }
html.light .text-slate-600                       { color: #334155 !important; }
html.light .border-white\/10                     { border-color: var(--c-border) !important; }
html.light .border-white\/5                      { border-color: var(--c-border-subtle) !important; }
html.light .bg-white\/5                          { background-color: rgba(59,130,246,0.05) !important; }
html.light .bg-white\/10                         { background-color: rgba(59,130,246,0.07) !important; }
html.light .bg-slate-700                         { background-color: #e7e4db !important; }

/* ── 5. MÀU NHÃN — chỉnh cho nền sáng ────────────────────────────────
   Các màu -300/-400 vốn tính cho nền TỐI; trên nền sáng chúng quá nhạt,
   tỉ lệ tương phản rơi xuống 1.7–2.9 (chuẩn tối thiểu 4.5). Đổi sang sắc
   độ ~700/800 cùng tông: giữ đúng ý nghĩa phân loại mà vẫn đọc được.
   Đã kiểm: mọi cặp dưới đây đạt ≥4.7 kể cả khi nền nhãn nhạt nhất (/20). */
html.light .text-blue-300, html.light .text-blue-400    { color: #164e63 !important; }
html.light .text-cyan-300, html.light .text-cyan-400    { color: #164e63 !important; }
html.light .text-teal-300, html.light .text-teal-400    { color: #0f766e !important; }
html.light .text-green-300, html.light .text-green-400  { color: #166534 !important; }
html.light .text-emerald-300,
html.light .text-emerald-400                            { color: #047857 !important; }
html.light .text-purple-300,
html.light .text-purple-400                             { color: #7e22ce !important; }
html.light .text-violet-400                             { color: #6d28d9 !important; }
html.light .text-indigo-300, html.light .text-indigo-400{ color: #4338ca !important; }
html.light .text-pink-400                               { color: #be185d !important; }
html.light .text-fuchsia-400                            { color: #a21caf !important; }
html.light .text-orange-400                             { color: #9a3412 !important; }
html.light .text-amber-300, html.light .text-amber-400  { color: #92400e !important; }
html.light .text-yellow-400                             { color: #854d0e !important; }
html.light .text-red-400                                { color: #b91c1c !important; }

html.light .text-orange-300                             { color: #9a3412 !important; }
html.light .text-red-300                                { color: #b91c1c !important; }

/* ── 5b. HỘP PROMPT / CÔNG THỨC ───────────────────────────────────────
   30 bài có hộp mã lệnh, nhưng KHÔNG đồng nhất: bản thì đổi sang nền
   sáng mà quên đổi màu chữ, bản thì giữ nền tối cứng, bản không khai báo
   gì cho nền sáng. Kết quả ở nền sáng: chữ nhạt trên nền nhạt, hoặc chữ
   tối trên nền tối. Ép cả 4 biến thể về một kiểu sáng thống nhất. */
html.light .prompt-box,
html.light .promptbox,
html.light .pbox,
html.light .formula-box {
  background: #f1f5f9 !important;
  border-color: rgba(15,35,55,.18) !important;
  color: #1e293b !important;
}
html.light .prompt-box *,
html.light .promptbox *,
html.light .pbox *,
html.light .formula-box * { color: #1e293b !important; }
html.light .prompt-label { color: #92400e !important; }

/* Link trong bài: màu hổ phách sáng vốn dành cho nền tối, trên nền sáng
   chỉ đạt ~1.5. Đổi sang sắc đậm cùng tông. */
html.light .prose a,
html.light .prose-content a { color: #9a3412 !important; }

/* Nút CTA nằm trong nội dung bài phải giữ chữ trắng trên nền gradient ở
   cả hai chế độ. Nếu không, quy tắc link của nền sáng phía trên sẽ đổi chữ
   nút thành nâu và làm giảm tương phản. */
.prose a.btn-primary,
.prose-content a.btn-primary,
html.light .prose a.btn-primary,
html.light .prose-content a.btn-primary { color: #fff !important; text-decoration: none !important; }

/* Hai bài AI Agent / Automation ngày 26-09 dùng bộ khung nội dung riêng.
   Mọi khung đều có nền, viền và màu chữ tách biệt rõ ở cả sáng lẫn tối. */
.article-panel,
.prose-content .step,
.prose-content .card {
  background: #111827 !important;
  border-color: #334155 !important;
  box-shadow: 0 8px 24px rgba(2,6,23,.18);
}
.prose-content .step p,
.prose-content .card p { color: #dbe5f1 !important; }
.prose-content .step h3,
.prose-content .card h3 { color: #bfdbfe !important; }
.prose-content .callout {
  background: #10213f !important;
  border-color: #60a5fa !important;
  box-shadow: 0 6px 18px rgba(2,6,23,.14);
}
.prose-content .callout.warning {
  background: #2b1d08 !important;
  border-color: #f59e0b !important;
}
.prose-content .callout p { color: #e2e8f0 !important; }
.prose-content .step-num {
  background: #1e3a8a !important;
  color: #eff6ff !important;
  border: 1px solid #3b82f6;
}
.prose-content .check-table th {
  background: #172554 !important;
  color: #dbeafe !important;
  border-color: #475569 !important;
}
.prose-content .check-table td {
  background: #111827 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}
.article-cta {
  background: linear-gradient(135deg,#101f3d,#1e1b4b) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 12px 30px rgba(2,6,23,.22);
}
.article-cta p { color: #dbe5f1 !important; }
.related-card {
  background: #111827 !important;
  border-color: #334155 !important;
}
.related-card p { color: #f1f5f9 !important; }

html.light .article-panel,
html.light .prose-content .step,
html.light .prose-content .card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 20px rgba(15,35,55,.08);
}
html.light .prose-content .step p,
html.light .prose-content .card p { color: #334155 !important; }
html.light .prose-content .step h3,
html.light .prose-content .card h3 { color: #1e40af !important; }
html.light .prose-content .callout {
  background: #eff6ff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 14px rgba(37,99,235,.08);
}
html.light .prose-content .callout.warning {
  background: #fffbeb !important;
  border-color: #d97706 !important;
}
html.light .prose-content .callout p { color: #1e293b !important; }
html.light .prose-content .step-num {
  background: #dbeafe !important;
  color: #1e3a8a !important;
  border-color: #93c5fd !important;
}
html.light .prose-content .check-table th {
  background: #dbeafe !important;
  color: #172554 !important;
  border-color: #94a3b8 !important;
}
html.light .prose-content .check-table td {
  background: #ffffff !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}
html.light .article-cta {
  background: linear-gradient(135deg,#eff6ff,#f5f3ff) !important;
  border-color: #93c5fd !important;
  box-shadow: 0 8px 24px rgba(37,99,235,.1);
}
html.light .article-cta p { color: #334155 !important; }
html.light .related-card {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15,35,55,.06);
}
html.light .related-card p { color: #0f172a !important; }

/* Hai ảnh AI có nền navy nguyên bản. Tăng độ sáng vừa phải để chi tiết
   trong ảnh rõ trên card tối nhưng không bạc màu khi chuyển sang nền sáng. */
img[src*="blog-xay-ai-agent-doanh-nghiep-nho"],
img[src*="blog-automation-quy-trinh-doanh-nghiep"] {
  filter: brightness(1.12) contrast(1.06) saturate(1.04);
}
html.light img[src*="blog-xay-ai-agent-doanh-nghiep-nho"],
html.light img[src*="blog-automation-quy-trinh-doanh-nghiep"] {
  filter: brightness(1.08) contrast(1.05) saturate(1.03);
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 28px rgba(15,35,55,.14);
}

/* Nhãn/nút riêng của từng bài (không dùng lớp Tailwind nên mục 5 không với tới) */
html.light .free-badge  { color: #166534 !important; }
html.light .paid-badge  { color: #92400e !important; }
html.light .tool-badge,
html.light .tool-chip   { color: #1e40af !important; }
html.light .qr-btn      { color: #1e40af !important; }
html.light .btn-ghost,
html.light .btn-outline { color: #334155 !important; border-color: rgba(15,35,55,.25) !important; }
html.light .copy-btn    { color: #1e40af !important; }
html.light .copy-btn.done,
html.light .done        { color: #166534 !important; }
html.light .dest        { color: #334155 !important; }
html.light .time-badge,
html.light .time-chip   { color: #166534 !important; }
html.light .method-badge{ color: #6d28d9 !important; }

/* Bảng riêng của một số bài (.time-table, .cmp-table) — cùng bệnh: màu chữ
   sáng tính cho nền tối, sang nền sáng thì tụt còn ~1.5–2.6. */
html.light .time-table th,
html.light .cmp-table th { color: #334155 !important; background: rgba(59,130,246,.08) !important; }
html.light .time-table td,
html.light .cmp-table td { color: #334155 !important; }

/* Khối văn bản tiếng Việt / hộp prompt biến thể riêng */
html.light .prose-vi p,
html.light .prose-vi li,
html.light .prose-vi strong { color: #334155 !important; }
html.light .prose-vi a       { color: #9a3412 !important; }
html.light .note a           { color: #9a3412 !important; }
html.light .prompt-body,
html.light .prompt-hero code { color: #1e293b !important; }

/* Hộp mã lệnh dựng bằng tiện ích Tailwind (bg-slate-900) thay vì lớp riêng.
   Nền giữ nguyên màu tối ở cả hai chế độ, nên chữ bên trong phải sáng —
   miễn trừ khỏi các rule đổi-chữ-sang-tối ở trên. */
html.light .bg-slate-900,
html.light .bg-slate-900 * { color: #e2e8f0 !important; }

/* Thẻ luôn-tối (card sản phẩm chủ lực): phải miễn trừ khỏi mục 4–5 ở trên,
   nếu không chữ trắng bị đổi thành navy và tàng hình trên nền tối. */
html.light .flagship-dark .text-white     { color: #fff !important; }
html.light .flagship-dark .text-slate-300 { color: #cbd5e1 !important; }
html.light .flagship-dark .text-slate-400 { color: #94a3b8 !important; }
html.light .flagship-dark .text-teal-200  { color: #99f6e4 !important; }
html.light .flagship-dark .text-teal-300  { color: #5eead4 !important; }

/* ── 6. NÉT THIẾT KẾ CHUNG (áp cho cả hai nền) ───────────────────────── */

/* background-clip:text chỉ tô trong khung chữ; đuôi chữ nghiêng (y, g, ụ)
   thò ra ngoài nên bị cắt. Nới khung tô xuống rồi bù lại bằng margin âm
   để bố cục không xê dịch. */
.gradient-text {
  display: inline-block;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

/* Tiêu đề bài dài cần cho phép phần gradient xuống dòng trên mobile.
   .gradient-text mặc định là inline-block để tránh cắt chân chữ, nhưng
   với cụm 6–10 từ nó có thể làm toàn trang tràn ngang. */
.article-title .gradient-text {
  display: inline;
  padding-bottom: 0;
  margin-bottom: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  overflow-wrap: anywhere;
}

.font-accent { font-family: 'Playfair Display', serif; }

/* Nhãn mục dạng viên thuốc có chấm gradient */
.section-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: #93c5fd; margin-bottom: 14px; padding: 5px 13px 5px 10px;
  border-radius: 99px; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.18);
}
.section-label::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg,#3b82f6,#8b5cf6);
}
html.light .section-label { color: #1e40af !important; background: rgba(59,130,246,.10) !important; border-color: rgba(59,130,246,.25) !important; }

/* Nút viên thuốc kèm mũi tên tròn */
.btn-pill {
  display: inline-flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg,#3b82f6,#8b5cf6);
  color: #fff; font-weight: 700; font-size: 15px;
  padding: 6px 6px 6px 24px; border-radius: 999px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 10px 25px -8px rgba(59,130,246,.5);
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(59,130,246,.6); }
.btn-pill .pill-arrow {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #3b82f6;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform .3s var(--ease);
}
.btn-pill:hover .pill-arrow { transform: rotate(45deg); }

/* Thẻ nổi lên khi rê chuột */
.card-glow { transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s ease; }
.card-glow:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -12px rgba(59,130,246,.28); border-color: rgba(96,165,250,.35) !important; }
html.light .card-glow:hover { box-shadow: 0 16px 40px rgba(59,130,246,.16); }

/* Thanh điều hướng đổ bóng khi cuộn */
nav.scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.25); }
html.light nav.scrolled { box-shadow: 0 8px 30px rgba(15,35,55,.10); }

/* Nút chuyển sáng/tối (theme.js tự chèn vào trang chưa có) */
.theme-toggle {
  padding: 7px; border-radius: 8px; background: transparent; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.12); color: #94a3b8;
  display: flex; align-items: center; transition: all .2s;
}
.theme-toggle:hover { color: #fff; border-color: rgba(255,255,255,.3); }
html.light .theme-toggle { border-color: rgba(15,35,55,.15); color: #52606d; }
html.light .theme-toggle:hover { color: #0f172a; border-color: rgba(15,35,55,.35); }

@media (prefers-reduced-motion: reduce) {
  .card-glow, .btn-pill, .btn-pill .pill-arrow { transition: none !important; }
}