/*!
 * patch2.css — Lào Cai Số — LÀN 3 (2026-10-29): trang ĐÃ CÓ NỘI DUNG
 * ---------------------------------------------------------------------------
 * CỘNG THÊM vào patch.css (làn 1–2), không sửa gì của làn trước.
 * Cùng quy ước: mọi selector dưới scope `html.lcui` (patch.js làn 1 gắn class),
 * `!important` chỉ trên color/font-size/line-height/max-width.
 * Thành phần do patch2.js chèn dùng tiền tố `.lcui2-` để không đụng `.lcui-` làn trước.
 *
 * CHÈN: <link rel="stylesheet" href="/assets/css/ui-patch2-20261029.css?v=1">
 *        đặt NGAY SAU <link ... ui-patch-20261029.css> (và nên sau mobile-app.css).
 *
 * SỐ ĐO DẪN ĐẾN TỪNG KHỐI (đo 2026-10-29, 1440×900 và 390×844):
 *   · Bài guide: 5 mục H2 nhưng 0 link trong trang, 4/5 H2 KHÔNG có id;
 *     "Nguồn đã đối chiếu" nằm ở top 2722px (desktop) / 2929px (mobile).
 *   · Khối nguồn: nhãn "Kiểm tra 05/09/2026" = 11px, màu rgb(107,123,115);
 *     danh sách 3 nguồn bị thu gọn sau nút "3 nguồn ▾".
 *   · Khám phá: 8 thẻ hiển thị, 6 thẻ có meta "x phút/giờ trước" (hôm nay),
 *     nhưng 0 nhãn "Mới" — badge hiện tại chỉ là chuyên mục (Văn hóa/Ẩm thực…).
 */

/* ==========================================================================
   1) MỤC LỤC "Trong bài" cho bài cẩm nang (do patch2.js dựng)
   ========================================================================== */
html.lcui .lcui2-toc {
  margin: 12px 0 4px;
  padding: 12px 14px;
  background: #f7fbff;
  border: 1px solid #e3eaf1;
  border-left: 4px solid #2b7de9;
  border-radius: 12px;
}
html.lcui .lcui2-toc > summary,
html.lcui .lcui2-toc > .lcui2-toc-title {
  font-size: 14.5px !important;
  font-weight: 700;
  color: #07345d;
  cursor: pointer;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
html.lcui .lcui2-toc > summary::-webkit-details-marker { display: none; }
html.lcui .lcui2-toc > summary::after {
  content: "▸";
  margin-left: auto;
  font-size: 13px;
  color: #5a6b7d;
}
html.lcui .lcui2-toc[open] > summary::after { content: "▾"; }
html.lcui .lcui2-toc ol {
  margin: 10px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
/* Desktop: 2 cột để mục lục không chiếm 231px (đo trước khi sửa) */
@media (min-width: 992px) {
  html.lcui .lcui2-toc ol {
    grid-template-columns: 1fr 1fr;
    gap: 4px 18px;
  }
}
html.lcui .lcui2-toc li { font-size: 14.5px !important; line-height: 1.5 !important; }
html.lcui .lcui2-toc a {
  color: #0b57d0;
  text-decoration: none;
  display: inline-block;
  padding: 3px 0;
}
html.lcui .lcui2-toc a:hover,
html.lcui .lcui2-toc a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* Neo cuộn: chừa chỗ cho header sticky 70px (đo được: header.lc-header cao 70px) */
html.lcui .lcui2-anchor { scroll-margin-top: 88px; }

/* ==========================================================================
   2) KHỐI NGUỒN dễ đọc hơn: nhãn ngày đối chiếu 11px → 13px, nút 3 nguồn ≥44px
   Đo: .agri-sources-checked 11px rgb(107,123,115) trên nền thẻ trắng.
   ========================================================================== */
html.lcui .agri-sources-checked {
  font-size: 13px !important;
  color: #4a5a52 !important;   /* tối hơn #6b7b73, giữ tông xanh xám */
  line-height: 1.4 !important;
}
html.lcui .agri-sources-toggle {
  min-height: 44px !important;
  font-size: 14px !important;
  padding-inline: 14px !important;
  border-radius: 999px !important;
  border: 1px solid #cfdbe6 !important;
  background: #f4f8fc !important;
  color: #07345d !important;
}
html.lcui .agri-sources.is-collapsible { scroll-margin-top: 88px; }

/* ==========================================================================
   3) NHÃN "Mới" cho bài đăng trong 24 giờ (patch2.js gắn vào .explore-card-meta)
   Đo: 6/8 thẻ có meta "8 phút trước" nhưng không có nhãn nào để mắt bắt.
   Trắng trên #0b57d0 = 6.4:1 (đạt AA).
   ========================================================================== */
html.lcui .lcui2-new {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  margin-right: 6px;
  font-size: 11.5px !important;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff !important;
  background: #0b57d0;
  border-radius: 999px;
  vertical-align: middle;
}

/* ==========================================================================
   4) CHIP LỌC "Mới hôm nay" cạnh danh sách Khám phá (patch2.js chèn)
   ========================================================================== */
html.lcui .lcui2-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 2px;
}
html.lcui .lcui2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 14px !important;
  font-weight: 600;
  color: #07345d !important;
  background: #eef4fb;
  border: 1px solid #e3eaf1;
  border-radius: 999px;
  cursor: pointer;
}
html.lcui .lcui2-chip[aria-pressed="true"] {
  color: #fff !important;
  background: #0b57d0;
  border-color: #0b57d0;
}
html.lcui .lcui2-chip .lcui2-chip-count {
  font-size: 12px !important;
  opacity: .9;
}
html.lcui .lcui2-hidden { display: none !important; }

html.lcui .lcui2-empty {
  margin: 10px 0;
  padding: 12px 14px;
  font-size: 14.5px !important;
  color: #5a6b7d !important;
  background: #fff;
  border: 1px dashed #e3eaf1;
  border-radius: 12px;
}

/* Làn 3 — khung "chưa có ảnh" trông CÓ CHỦ ĐÍCH, không phải lỗi tải ảnh.
   Áp cho cả trang chi tiết và thẻ danh sách Khám phá. */
html.lcui .explore-image-fallback {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 108px;
  padding: 14px 12px;
  background:
    radial-gradient(circle at 18% 22%, rgba(23,107,74,.10), transparent 55%),
    linear-gradient(135deg, #f2faf5 0%, #e3f1e8 100%) !important;
  border: 1px dashed rgba(20,100,71,.38) !important;
  border-radius: 14px;
  color: #2f6b4f !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  text-align: center;
  line-height: 1.45;
}
html.lcui .explore-image-fallback::before {
  content: "Lào Cai Số";
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(20,100,71,.72);
}
html.lcui .explore-image-fallback { flex-direction: column; }
html.lcui .explore-detail-cover.is-image-error .explore-image-fallback,
html.lcui .explore-inline-image.is-image-error .explore-image-fallback { aspect-ratio: 16 / 10; }
html.lcui .explore-related-card.is-image-error .explore-image-fallback::before { display: none; }