/* ============================================================
   vanban-vanban-detail.css — trang chi tiết văn bản /van-ban/{slug}
   Nền cắt từ public/assets/css/vanban-detail.css (mockup v3.1.3),
   đã bỏ: toast riêng (dùng vbToast layout), dock ghi chú/theo dõi,
   statusbox sửa đổi, vitality strip, peek — chưa có backend.
   Phần bổ sung riêng cho trang nằm cuối file.
   ============================================================ */

/* ---------- 0. Menu trên không fixed nữa: cuộn theo trang ---------- */
body { padding-top: 0; }
.v4-nav { position: static; }
/* Menu mobile neo theo nav (không trôi giữa màn hình khi cuộn) */
.v4-mobile-menu { position: absolute; top: 4.9rem; }

/* ---------- 1. Thanh tiến độ đọc (trên cùng, 3px) ---------- */
.vbd2-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--primary);
  z-index: 70;
  transition: width 0.1s linear;
}

/* ---------- 2. Tờ văn bản (paper) — trải nghiệm gốc ---------- */
.vbd2-doc {
  /* Biến cá nhân hoá — Tầng 3 ghi đè qua JS */
  --vbd2-fs: 1.0625rem;
  --vbd2-lh: 1.85;
  --vbd2-width: 100%; /* mặc định full chiều rộng kt-container-fixed */
  --vbd2-paper-bg: var(--card);
  --vbd2-paper-fg: var(--foreground);
  --vbd2-paper-muted: var(--secondary-foreground);
  --vbd2-paper-border: var(--border);
  --vbd2-font: 'Lora', Georgia, 'Times New Roman', serif;
  /* v3.1: thể thức & tiêu đề luôn giữ giọng serif trang trọng, tách khỏi font nội dung */
  --vbd2-font-display: 'Lora', Georgia, 'Times New Roman', serif;
  /* v3.1: tông ghi chú — màu info dịu, tách khỏi màu đỏ cảnh báo của primary */
  --vbd2-note: oklch(0.5 0.1 235);
  --vbd2-note-soft: oklch(0.62 0.11 235);
}
.dark .vbd2-doc { --vbd2-note: oklch(0.75 0.09 235); }
.vbd2-doc[data-doc-font="sans"] { --vbd2-font: 'Inter', system-ui, sans-serif; }
/* Dark mode + nền giấy "auto": chữ trắng 95% trên nền tối gây chói (halation) khi đọc
   văn bản dài — hạ nội dung xuống off-white ấm (~0.88), tương phản vẫn ~10:1, mắt đỡ mỏi.
   Hai nền tuỳ chọn cream/sepia/dark bên dưới đã cân sẵn nên giữ nguyên. */
.dark .vbd2-doc[data-doc-theme="auto"] { --vbd2-paper-fg: oklch(0.88 0.01 78); }
.vbd2-doc[data-doc-theme="cream"] { --vbd2-paper-bg: #f9f4e8; --vbd2-paper-fg: #3b3325; --vbd2-paper-muted: #7a6f58; --vbd2-paper-border: #e6dcc4; }
.vbd2-doc[data-doc-theme="sepia"] { --vbd2-paper-bg: #f3e7d5; --vbd2-paper-fg: #46351f; --vbd2-paper-muted: #85735a; --vbd2-paper-border: #ddccb2; }
.vbd2-doc[data-doc-theme="dark"]  { --vbd2-paper-bg: #201d19; --vbd2-paper-fg: #d9d3c7; --vbd2-paper-muted: #97917f; --vbd2-paper-border: #383329; }

.vbd2-paper {
  max-width: var(--vbd2-width);
  margin-inline: auto;
  background: var(--vbd2-paper-bg);
  color: var(--vbd2-paper-fg);
  border: 1px solid var(--vbd2-paper-border);
  border-radius: 1rem;
  padding: clamp(1.25rem, 4vw, 3.5rem);
  font-family: var(--vbd2-font);
  font-size: var(--vbd2-fs);
  line-height: var(--vbd2-lh);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--foreground) 5%, transparent), 0 16px 44px color-mix(in oklab, var(--foreground) 6%, transparent);
  transition: background-color 0.25s ease, color 0.25s ease, max-width 0.25s ease;
}

/* v3.1: hai giọng chữ — thể thức đầu trang (tên văn bản trong nội dung gốc,
   Chương, tiêu đề Điều) giữ serif trang trọng; nội dung đọc (căn cứ, Khoản,
   Điểm) theo font người dùng chọn (mặc định sans) */
.vbd2-chuong,
.vbd2-dieu-title { font-family: var(--vbd2-font-display); }

/* ---------- 3. Thể thức văn bản hành chính ---------- */
/* Chương */
.vbd2-chuong { text-align: center; margin: 2.25rem 0 1.5rem; scroll-margin-top: 5.5rem; }
/* Chương là <h2> (cấu trúc tài liệu), hai dòng con là <span> nên cần display:block */
.vbd2-chuong .vbd2-chuong-so { display: block; font-weight: 700; }
.vbd2-chuong .vbd2-chuong-ten { display: block; font-weight: 700; text-transform: uppercase; margin-top: 0.2rem; }

/* Điều / Khoản / Điểm — văn bản phẳng, sạch, không đóng hộp */
.vbd2-dieu { scroll-margin-top: 5.5rem; margin-top: 1.9em; }
.vbd2-dieu-title { font-weight: 700; }
.vbd2-khoan { margin-top: 0.9em; scroll-margin-top: 5.5rem; }
.vbd2-diem { margin-top: 0.9em; padding-left: 1.4em; scroll-margin-top: 5.5rem; }

/* ---------- 4. Tầng 2: nút ⋯ ẩn ở lề từng khối ---------- */
.vbd2-block { position: relative; }
.vbd2-block-btn {
  position: absolute;
  top: -0.15rem;
  right: -2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.55rem;
  border: 1px solid var(--vbd2-paper-border);
  background: var(--vbd2-paper-bg);
  color: var(--vbd2-paper-muted);
  font-size: 0.95rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vbd2-block:hover > .vbd2-block-btn,
.vbd2-block-btn:focus-visible,
.vbd2-block-btn.is-open { opacity: 1; }
.vbd2-block-btn:hover, .vbd2-block-btn.is-open { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 45%, var(--vbd2-paper-border)); }
/* Khối đang được thao tác: tô nhẹ để biết phạm vi */
.vbd2-block.is-targeted { background: color-mix(in oklab, var(--primary) 6%, transparent); border-radius: 0.5rem; box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 6%, transparent); }
/* Màn hẹp: không còn lề — nút nằm sát mép trong, luôn hiện mờ */
@media (max-width: 900px) {
  .vbd2-block-btn { right: -0.5rem; top: -0.3rem; width: 1.7rem; height: 1.7rem; opacity: 0.4; }
}

/* Chip ngữ cảnh nhỏ dưới tiêu đề Điều (chỉ hiện khi Điều có dữ liệu) */
.vbd2-ctx {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.vbd2-ctx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  border-radius: 9999px;
  color: var(--vbd2-paper-muted);
  border: 1px solid var(--vbd2-paper-border);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.vbd2-ctx-chip:hover { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 45%, var(--vbd2-paper-border)); background: color-mix(in oklab, var(--primary) 6%, transparent); }
.vbd2-ctx-chip i { font-size: 0.8rem; }

/* ----- Mức chú giải: chế độ "Nguyên văn" (is-verbatim) -----
   Ẩn công cụ web trên tờ văn bản, chỉ còn nguyên văn như bản in.
   Mockup còn ẩn dock ghi chú, statusbox sửa đổi, nhãn vbd2-mark —
   các phần tử đó chưa có backend nên chưa port rule tương ứng. */
#vbd2-doc.is-verbatim .vbd2-ctx,
#vbd2-doc.is-verbatim .vbd2-chg,
#vbd2-doc.is-verbatim .vbd2-block-btn { display: none !important; }

/* ---------- 5. Menu hành động của khối (popover chung) ---------- */
.vbd2-menu {
  position: fixed;
  z-index: 80;
  min-width: 240px;
  padding: 0.4rem;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 18px 50px color-mix(in oklab, var(--foreground) 20%, transparent);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.vbd2-menu.show { opacity: 1; transform: none; pointer-events: auto; }
.vbd2-menu-head {
  padding: 0.45rem 0.65rem 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.vbd2-menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.65rem;
  border-radius: 0.6rem;
  font-size: 0.845rem;
  color: var(--foreground);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.vbd2-menu-item:hover { background: var(--accent); color: var(--primary); }
.vbd2-menu-item i { font-size: 1rem; color: var(--muted-foreground); width: 1.1rem; text-align: center; }
.vbd2-menu-item:hover i { color: var(--primary); }
.vbd2-menu-item.is-on { color: var(--primary); }
.vbd2-menu-item.is-on i { color: var(--primary); }
.vbd2-menu-sep { height: 1px; margin: 0.3rem 0.4rem; background: var(--border); }

/* ---------- 6. Thanh đọc nổi (đáy màn hình) ---------- */
.vbd2-readbar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 5rem);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  max-width: min(94vw, 34rem);
  padding: 0.4rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px color-mix(in oklab, var(--foreground) 18%, transparent);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.vbd2-readbar.show { transform: translate(-50%, 0); opacity: 1; }
.vbd2-readbar-pos {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.vbd2-readbar-pos:hover { background: var(--accent); }
.vbd2-readbar-pos i { color: var(--primary); font-size: 0.95rem; flex-shrink: 0; }
.vbd2-readbar-pos span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 13rem; }
.vbd2-readbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9999px;
  color: var(--secondary-foreground);
  font-size: 1.05rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.vbd2-readbar-btn:hover { background: var(--accent); color: var(--primary); }
.vbd2-readbar-btn.is-on { color: var(--primary); }
.vbd2-readbar-sep { width: 1px; height: 1.4rem; background: var(--border); margin-inline: 0.15rem; }
@media (max-width: 640px) {
  .vbd2-readbar-pos span { max-width: 8rem; }
}

/* ---------- 7. Tầng 3: popover Aa (tuỳ chỉnh trải nghiệm đọc) ---------- */
.vbd2-aa {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 4.6rem;
  transform: translate(-50%, 12px) scale(0.98);
  width: min(92vw, 21rem);
  padding: 1rem;
  border-radius: 1.1rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 22px 60px color-mix(in oklab, var(--foreground) 22%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.vbd2-aa.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.vbd2-aa-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.vbd2-aa-row + .vbd2-aa-row { margin-top: 0.8rem; }
.vbd2-aa-label { font-size: 0.78rem; font-weight: 600; color: var(--secondary-foreground); flex-shrink: 0; }
.vbd2-seg { display: inline-flex; padding: 0.2rem; gap: 0.15rem; border-radius: 0.7rem; background: var(--muted); }
.vbd2-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 1.85rem;
  padding-inline: 0.5rem;
  border-radius: 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--secondary-foreground);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.vbd2-seg-btn:hover { color: var(--foreground); }
.vbd2-seg-btn.is-active { background: var(--card); color: var(--primary); box-shadow: 0 1px 4px color-mix(in oklab, var(--foreground) 12%, transparent); }
/* Nút chọn nền giấy: ô tròn màu */
.vbd2-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.vbd2-swatch:hover { transform: scale(1.08); }
.vbd2-swatch.is-active { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent); }
.vbd2-swatch[data-swatch="auto"] { background: linear-gradient(135deg, #ffffff 50%, #1f1d1a 50%); }
.vbd2-swatch[data-swatch="cream"] { background: #f9f4e8; }
.vbd2-swatch[data-swatch="sepia"] { background: #f3e7d5; }
.vbd2-swatch[data-swatch="dark"] { background: #201d19; }
.vbd2-aa-reset {
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.45rem;
  border-radius: 0.6rem;
  border: 1px dashed var(--border);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.vbd2-aa-reset:hover { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }

/* ---------- 8. Mục lục (drawer) ---------- */
.vbd2-toc-link {
  display: block;
  padding: 0.45rem 0.65rem;
  border-radius: 0.55rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--secondary-foreground);
  border-left: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.vbd2-toc-link:hover { background: var(--accent); color: var(--primary); }
.vbd2-toc-link.is-active { color: var(--primary); background: color-mix(in oklab, var(--primary) 8%, transparent); border-left-color: var(--primary); font-weight: 600; }
/* Mẫu biểu: thụt dưới phụ lục chứa nó */
.vbd2-toc-link.is-sub { padding-left: 1.4rem; font-size: 0.78rem; }
.vbd2-toc-chuong {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  padding: 0.85rem 0.65rem 0.3rem;
}

/* ---------- 9. Drawer ngữ cảnh (Dễ hiểu / Bản án / Hướng dẫn / Ghi chú) ---------- */
.vbd2-ctx-tabs { display: flex; gap: 0.25rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.vbd2-ctx-tabs::-webkit-scrollbar { display: none; }
.vbd2-ctx-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--secondary-foreground);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.vbd2-ctx-tab:hover { background: var(--accent); }
.vbd2-ctx-tab.is-active { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
/* ---------- 10. Header trang (trên tờ văn bản) ---------- */
.vbd2-pagehead {
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(46rem 18rem at 88% -30%, color-mix(in oklab, var(--primary) 7%, transparent), transparent 60%),
    var(--background);
}
.vbd2-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--secondary-foreground);
}
.vbd2-meta i { color: var(--primary); font-size: 0.9rem; }

/* Vùng đặt tờ văn bản */
.vbd2-stage { padding-block: 2rem 4.5rem; }
@media (min-width: 768px) { .vbd2-stage { padding-block: 2.5rem 5.5rem; } }

/* Mobile: bỏ padding của container để nội dung chỉ thụt lề 1 lần
   (chỉ còn padding của chính tờ văn bản) */
@media (max-width: 640px) {
  .vbd2-stage > .kt-container-fixed { padding-inline: 0; }
  .vbd2-paper { border-radius: 0; border-inline: none; }
}

/* ---------- 11. Modal lịch sử hiệu lực — dòng thời gian kể chuyện (Phương án 3
   mockup phien-ban-timeline-v1): trục dọc + bong bóng năm, mỗi đời một chương ---------- */
.vbd2-hx { position: relative; padding-left: 3.6rem; }
.vbd2-hx::before { content: ''; position: absolute; left: 1.35rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: var(--border); }
.vbd2-hx-gen { position: relative; padding: 0.15rem 0 1.15rem; }
.vbd2-hx-gen:last-child { padding-bottom: 0; }
.vbd2-hx-year {
  position: absolute;
  left: -3.6rem; top: 0;
  width: 2.7rem; height: 2.7rem;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800;
  background: var(--muted);
  color: var(--secondary-foreground);
  border: 2px solid var(--border);
  z-index: 1;
}
.vbd2-hx-gen.is-current .vbd2-hx-year { background: #f0fdf4; color: #15803d; border-color: #86efac; }
.vbd2-hx-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.vbd2-hx-name { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; color: var(--foreground); line-height: 1.25; }
a.vbd2-hx-name:hover { color: var(--primary); }
.vbd2-hx-no { font-size: 0.66rem; font-weight: 600; color: var(--muted-foreground); }
.vbd2-hx-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.62rem; font-weight: 700;
  padding: 0.16rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.vbd2-hx-badge.is-live { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; }
.vbd2-hx-badge.is-dead { color: var(--muted-foreground); background: var(--muted); border: 1px solid var(--border); }
.vbd2-hx-badge.is-here { color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent); }
.vbd2-hx-pulse { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: #16a34a; animation: vbd2HxPulse 1.8s ease-out infinite; }
@keyframes vbd2HxPulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.vbd2-hx-meta { font-size: 0.68rem; color: var(--muted-foreground); margin-top: 0.18rem; }
/* Thanh "tuổi thọ" tương đối — so sánh nhanh đời nào thọ hơn đời nào */
.vbd2-hx-tenure { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.35rem; }
/* Rãnh rộng cố định: nhãn dài ngắn khác nhau không còn bóp thanh, nhờ đó độ dài
   thanh giữa các đời mới so sánh được với nhau. */
.vbd2-hx-tenure-track {
  flex: 0 0 52%; height: 0.32rem; border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 7%, transparent);
}
.vbd2-hx-tenure-bar { display: block; height: 100%; border-radius: 999px; background: color-mix(in oklab, var(--primary) 30%, var(--muted)); }
.vbd2-hx-gen.is-current .vbd2-hx-tenure-bar { background: #4ade80; }
.vbd2-hx-tenure-lb { font-size: 0.62rem; color: var(--muted-foreground); }
.vbd2-hx-pend { border-bottom: 1px dotted currentColor; cursor: help; }
.vbd2-hx-note {
  display: flex; align-items: flex-start; gap: 0.45rem;
  margin-top: 1rem; padding: 0.6rem 0.75rem;
  font-size: 0.7rem; line-height: 1.5;
  color: var(--secondary-foreground);
  background: var(--muted); border-radius: 0.6rem;
}
.vbd2-hx-note > i { color: #d97706; margin-top: 0.1rem; }
.vbd2-hx-note b { color: var(--mono); }
.vbd2-hx-vers { margin-top: 0.55rem; display: grid; gap: 0.3rem; }
.vbd2-hx-ver {
  display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap;
  font-size: 0.74rem;
  border: 1px solid var(--border); border-radius: 0.55rem;
  background: var(--background); padding: 0.4rem 0.6rem;
}
.vbd2-hx-ver.is-live { border-color: #86efac; background: #f0fdf4; }
.vbd2-hx-ver.is-future { border-style: dashed; border-color: #fcd34d; background: #fffbeb; }
.vbd2-hx-ver.is-viewing { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); background: color-mix(in oklab, var(--primary) 5%, transparent); }
.vbd2-hx-ver-date { font-weight: 800; font-size: 0.74rem; white-space: nowrap; color: var(--foreground); }
a.vbd2-hx-ver-date:hover { color: var(--primary); }
.vbd2-hx-ver-by { color: var(--muted-foreground); font-size: 0.68rem; }
/* .kt-link mặc định inline-flex: một TÊN văn bản dài (thay cho số hiệu trần) biến
   thành khối chiếm trọn chiều rộng dòng, đẩy dấu phẩy và phần chữ sau nó xuống
   đầu dòng mới. Link nằm giữa câu phải là inline để chữ chảy liền mạch. */
.vbd2-hx-ver-by a.kt-link,
.vbd2-hx-amend a.kt-link { display: inline; }
.vbd2-hx-live-lb { color: #15803d; }
.vbd2-hx-future-lb { color: #b45309; }
.vbd2-hx-ver-chips { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.vbd2-hx-chip { font-size: 0.6rem; font-weight: 700; color: var(--secondary-foreground); background: var(--muted); border-radius: 999px; padding: 0.1rem 0.42rem; }
/* Luật sửa đổi chen giữa: kim cương cam thụt vào trong đời bị sửa */
.vbd2-hx-amend {
  display: flex; align-items: baseline; gap: 0.45rem;
  font-size: 0.68rem; color: #92400e;
  padding: 0.3rem 0.6rem 0.3rem 1.3rem; position: relative;
}
.vbd2-hx-amend::before { content: ''; position: absolute; left: 0.55rem; top: 0.62rem; width: 0.4rem; height: 0.4rem; background: #d97706; transform: rotate(45deg); border-radius: 1px; }
@media (max-width: 640px) {
  .vbd2-hx { padding-left: 2.9rem; }
  .vbd2-hx::before { left: 1.05rem; }
  .vbd2-hx-year { left: -2.9rem; width: 2.15rem; height: 2.15rem; font-size: 0.62rem; }
}

/* ---------- 12. Lược đồ & bản gốc (trong modal) ---------- */
.vbd2-scheme-node { border: 1px solid var(--border); border-radius: 0.625rem; background: var(--card); padding: 0.7rem 0.9rem; }
.vbd2-scheme-node.is-self { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 7%, var(--card)); }
/* ============ Bản gốc: trình xem PDF gần toàn màn hình (iframe nạp khi mở modal) ============ */
.vbd2-modal-viewer {
  max-width: min(1500px, 96vw);
  width: 96vw;
  margin-top: 1rem;
}
.vbd2-viewer-body { padding: 0.75rem; }
.vbd2-origin-desk { position: relative; }
.vbd2-pdf-frame {
  display: block;
  width: 100%;
  height: calc(100dvh - 9.5rem); /* trừ header modal + lề — khung chiếm gần trọn màn hình */
  min-height: 340px;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--muted);
}

/* Lớp phủ chờ tải: tiến độ % thật khi kéo file từ kho, tải xong mờ dần nhường chỗ cho PDF.
   Khác mockup: chưa có ảnh bìa trang đầu nên chỉ còn thanh tiến độ, canh giữa khung. */
.vbd2-pdf-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--muted) 94%, transparent);
  transition: opacity 0.4s ease;
}
.vbd2-pdf-overlay.is-done { opacity: 0; pointer-events: none; }
.vbd2-pdf-progress { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; }
.vbd2-pdf-bar {
  width: 240px;
  height: 6px;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--foreground) 12%, transparent);
  overflow: hidden;
}
.vbd2-pdf-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--primary);
  transition: width 0.2s ease;
}
/* File lớn để trình duyệt tự kéo từng phần: không có phần trăm nên thanh chạy qua lại */
.vbd2-pdf-bar.is-wait .vbd2-pdf-bar-fill {
  width: 40%;
  animation: vbd2-pdf-wait 1.2s ease-in-out infinite;
}
@keyframes vbd2-pdf-wait {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.vbd2-pdf-pct {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* Nút "Đối chiếu song song" chỉ hữu ích khi màn hình đủ rộng cho 2 cột */
.vbd2-compare-btn { display: none; }
@media (min-width: 1024px) { .vbd2-compare-btn { display: inline-flex; } }

/* Panel đối chiếu: bản scan ghim bên phải, nội dung chính co lại bên trái, cuộn độc lập */
.vbd2-compare-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  width: clamp(420px, 44vw, 820px);
  display: none;
  flex-direction: column;
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 48px color-mix(in oklab, var(--foreground) 14%, transparent);
  transform: translateX(103%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1024px) {
  .vbd2-compare-panel { display: flex; }
  body.vbd2-compare-on .vbd2-compare-panel { transform: none; }
  main { transition: margin-right 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  body.vbd2-compare-on main { margin-right: clamp(420px, 44vw, 820px); }
  /* Rail mục lục nằm sát mép phải — nhường chỗ cho panel khi đối chiếu */
  body.vbd2-compare-on .vbd2-rail-zone { display: none; }
  /* Thanh đọc canh giữa phần nội dung còn lại thay vì giữa viewport */
  body.vbd2-compare-on .vbd2-readbar { left: calc((100% - clamp(420px, 44vw, 820px)) / 2); }
}
.vbd2-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.vbd2-compare-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}
.vbd2-compare-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--muted);
}
.vbd2-compare-body .vbd2-pdf-overlay { border-radius: 0; }

/* Khối mobile trong modal: nút mở trình xem PDF native (mặc định ẩn trên desktop) */
.vbd2-origin-mob { display: none; }
@media (max-width: 767.98px) {
  .vbd2-origin-desk { display: none; }
  .vbd2-origin-mob {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 0.5rem 0.25rem 0.75rem;
  }
  .vbd2-origin-meta {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--muted-foreground);
    text-align: center;
  }
  .vbd2-modal-viewer { width: 94vw; margin-top: 1.25rem; }
}

/* Modal Tải về: dùng chung node của Lược đồ — icon tải nằm cuối hàng, sáng lên khi hover */
.vbd2-dl-item { transition: border-color 0.15s ease, background-color 0.15s ease; }
.vbd2-dl-item:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
  background: color-mix(in oklab, var(--primary) 4%, var(--card));
}
.vbd2-dl-get { margin-left: auto; flex-shrink: 0; color: var(--muted-foreground); transition: color 0.15s ease; }
.vbd2-dl-item:hover .vbd2-dl-get { color: var(--primary); }
/* Có văn bản kèm gần 200 phụ lục: mỗi nhóm tự cuộn để bản gốc luôn nằm trong tầm mắt */
.vbd2-dl-list { max-height: 17rem; overflow-y: auto; }
#download_modal .kt-modal-body { max-height: min(78vh, 50rem); overflow-y: auto; }

/* Kích thước modal chung của trang */
.vbd2-modal { max-width: 640px; width: 92%; }
.vbd2-modal-wide { max-width: 860px; width: 94%; }

/* ============ Hạn sử dụng văn bản: phiếu kẹp ghim (E) + watermark chìm (F) ============
   Mô phỏng nghiệp vụ với tờ A4 ngoài đời: văn thư kẹp phiếu tình trạng vào góc
   trái tờ giấy; watermark in chìm giữa trang đầu.
   Màu trạng thái: còn hiệu lực = xanh lá; hết hiệu lực = đỏ son (--primary). */
:root {
  --vbd2-val-on: oklch(0.5 0.13 155);
}
.dark { --vbd2-val-on: oklch(0.74 0.13 155); }

/* Phiếu của văn thư kẹp bằng ghim — nằm trong luồng nội dung ở góc trái đầu tờ
   giấy, margin dưới bảo đảm khoảng trống với phần thể thức trong mọi bố cục */
.vbd2-front { position: relative; }
.vbd2-valslip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  width: fit-content;
  min-width: 11.5rem;
  /* dưới: 2.5rem cách thể thức, trừ 50px kéo Quốc hiệu lên (co đoạn trắng đầu giấy) */
  margin: 1.1rem 0 calc(2.5rem - 50px);
  padding: 0.9rem 1rem 0.6rem;
  border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
  border-radius: 2px;
  background:
    repeating-linear-gradient(transparent 0 1.15rem, color-mix(in oklab, #3b82f6 16%, transparent) 1.15rem calc(1.15rem + 1px)),
    color-mix(in oklab, #fff7dc 90%, var(--card) 10%);
  box-shadow: 0 10px 22px color-mix(in oklab, var(--foreground) 16%, transparent);
  cursor: pointer;
  transform: rotate(10deg);
  text-align: start;
  /* Neo theo MÉP TRÊN tờ giấy: bù đúng padding của giấy (co theo vw) + margin-top
     của phiếu, để phiếu luôn nằm ~9px dưới mép trên ở mọi cỡ màn hình —
     không bao giờ trồi lên đè thanh "Cách hiển thị" (desktop tương đương -65px cũ) */
  top: calc(9px - clamp(1.25rem, 4vw, 3.5rem) - 1.1rem);
}
.vbd2-doc.is-cards .vbd2-valslip {
  /* Dạng thẻ: thẻ đầu có padding riêng (clamp 3vw) — neo tương tự, desktop tương đương -30px cũ */
  top: calc(15px - clamp(1.1rem, 3vw, 1.75rem) - 1.1rem);
  left: 30px;
}
.dark .vbd2-valslip {
  background:
    repeating-linear-gradient(transparent 0 1.15rem, color-mix(in oklab, #93c5fd 14%, transparent) 1.15rem calc(1.15rem + 1px)),
    color-mix(in oklab, #efe6c8 85%, var(--card) 15%);
}
.vbd2-valslip-clip {
  position: absolute;
  top: -0.9rem;
  left: 1.2rem;
  width: 1rem;
  height: 2.4rem;
  border: 3px solid #98a1ab;
  border-radius: 9999px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.vbd2-valslip-clip::before {
  content: '';
  position: absolute;
  inset: 0.3rem 0.12rem -0.7rem;
  border: 2.5px solid #b8c0c9;
  border-radius: 9999px;
}
.vbd2-valslip strong {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--vbd2-val-on);
  align-self: center;
}
.vbd2-valslip > span { font-size: 0.76rem; font-weight: 600; color: #57534e; align-self: center; }
.vbd2-valslip em { font-size: 0.64rem; font-style: italic; color: #78716c; align-self: flex-end; }
.vbd2-valslip.is-off strong { color: var(--primary); }

/* Watermark in chìm giữa trang đầu — màu pha loãng để không cản việc đọc.
   Nhãn dài ("Hết hiệu lực một phần") mà giữ nowrap thì rộng gấp đôi tờ giấy trên
   điện thoại, cộng thêm chữ xoay 14° làm hộp bao phình ra → đội chiều rộng trang,
   sinh cuộn ngang. Chốt bề rộng 88% tờ giấy và cho phép xuống dòng: desktop nhãn
   vẫn vừa một dòng như cũ, mobile tự tách dòng. */
.vbd2-valwm {
  position: absolute;
  top: 56%;
  left: 50%;
  z-index: 0;
  width: 88%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-14deg);
  pointer-events: none;
  user-select: none;
}
.vbd2-valwm strong {
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
  line-height: 1.05;
  color: color-mix(in oklab, var(--vbd2-val-on) 13%, transparent);
}
.vbd2-valwm > span {
  font-size: clamp(0.85rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.35em;
  color: color-mix(in oklab, var(--vbd2-val-on) 15%, transparent);
}
.vbd2-valwm.is-off strong { color: color-mix(in oklab, var(--primary) 13%, transparent); }
.vbd2-valwm.is-off > span { color: color-mix(in oklab, var(--primary) 15%, transparent); }

@media (max-width: 640px) {
  /* Mobile kéo lên nhẹ tay hơn (-40px) để vẫn giữ khoảng trống rõ trước thể thức */
  .vbd2-valslip { min-width: 10rem; margin-bottom: calc(2rem - 40px); }
  .vbd2-valslip strong { font-size: 1rem; }
}

/* ============ Lược đồ: căn cước văn bản + nhóm quan hệ 2 cột (dựng từ dữ liệu) ============ */
.vbd2-scheme-modal { max-width: 1100px; }
.vbd2-scheme-body { max-height: min(78vh, 62rem); overflow-y: auto; }

/* "Căn cước văn bản" — đủ trường định danh để trích dẫn hồ sơ, tình trạng nổi bật nhất */
.vbd2-schinfo {
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  background: color-mix(in oklab, var(--accent) 40%, var(--card));
}
.vbd2-schinfo-name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-family: var(--vbd2-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--mono);
}
.vbd2-schinfo-st {
  padding: 0.18rem 0.65rem;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary-foreground);
  background: var(--primary);
  white-space: nowrap;
}
/* Mỗi trường một hàng "label trái — value phải", chấm dẫn nối giữa cho dễ dò mắt */
.vbd2-schinfo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.45rem 2rem;
  margin: 0.75rem 0 0;
}
.vbd2-schinfo-grid > div {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.vbd2-schinfo-grid > div::after {
  /* chấm dẫn giữa label và value, như dòng kê khai hồ sơ */
  content: '';
  order: 1;
  flex: 1;
  min-width: 0.75rem;
  border-bottom: 1px dotted color-mix(in oklab, var(--muted-foreground) 45%, transparent);
  transform: translateY(-0.2em);
}
.vbd2-schinfo-grid dt {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.vbd2-schinfo-grid dd {
  order: 2;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--foreground);
  margin: 0;
  text-align: right;
}
.vbd2-schinfo-grid .is-danger dd { color: var(--primary); font-weight: 700; }
@media (max-width: 640px) {
  .vbd2-schinfo-grid { grid-template-columns: 1fr; gap: 0.4rem; }
}
/* Hai con số mức độ áp dụng — usage, không phải quan hệ pháp lý nên đứng riêng ở đây */
.vbd2-schinfo-usage {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--border);
}
.vbd2-schinfo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid color-mix(in oklab, var(--primary) 35%, var(--border));
  border-radius: 9999px;
  background: var(--card);
  font-size: 0.8rem;
  color: var(--secondary-foreground);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.vbd2-schinfo-link i { color: var(--primary); font-size: 0.85rem; }
.vbd2-schinfo-link strong { font-size: 0.95rem; color: var(--mono); font-variant-numeric: tabular-nums; }
.vbd2-schinfo-link:hover { background: color-mix(in oklab, var(--primary) 6%, var(--card)); border-color: var(--primary); }

/* Thanh công cụ: ô tìm + chip lọc hiệu lực */
.vbd2-scheme-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.vbd2-scheme-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 220px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--input);
  border-radius: 9999px;
  background: var(--card);
}
.vbd2-scheme-search i { color: var(--muted-foreground); font-size: 0.9rem; }
.vbd2-scheme-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.875rem;
  color: var(--foreground);
}
.vbd2-scheme-chips { display: flex; gap: 0.35rem; }
.vbd2-sch-chip {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--card);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--secondary-foreground);
  transition: all 0.15s ease;
}
.vbd2-sch-chip[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

/* Hai cột theo chiều quan hệ: trái "Văn bản nguồn", phải "Văn bản tác động" */
.vbd2-sch-cols { display: grid; grid-template-columns: 1fr; gap: 0.9rem; align-items: start; margin-bottom: 0.5rem; }
@media (min-width: 860px) { .vbd2-sch-cols { grid-template-columns: 1fr 1fr; } }
.vbd2-sch-side { min-width: 0; }
.vbd2-sch-side-h {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}
.vbd2-sch-side-none { font-size: 0.8rem; color: var(--muted-foreground); }

/* Accordion nhóm quan hệ */
.vbd2-sg {
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--card);
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.vbd2-sg.is-danger { border-inline-start: 3px solid color-mix(in oklab, var(--primary) 70%, transparent); }
.vbd2-sg.is-warn { border-inline-start: 3px solid oklch(0.68 0.13 75); }
.vbd2-sg.is-info { border-inline-start: 3px solid oklch(0.6 0.1 245); }
.vbd2-sg-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: start;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mono);
  background: transparent;
  transition: background-color 0.15s ease;
}
.vbd2-sg-head:hover { background: var(--accent); }
.vbd2-sg-caret { font-size: 0.7rem; color: var(--muted-foreground); transition: transform 0.2s ease; }
.vbd2-sg.open .vbd2-sg-caret { transform: rotate(180deg); }
.vbd2-sg-name { min-width: 0; }
.vbd2-sg-count {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0.1rem 0.55rem;
  border-radius: 9999px;
  background: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--secondary-foreground);
}
.vbd2-sg-body {
  display: none;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.15rem 0.85rem 0.75rem;
}
.vbd2-sg.open .vbd2-sg-body { display: flex; }

/* Một văn bản trong nhóm: icon loại + tên + meta + trạng thái hiệu lực */
.vbd2-sch-item { display: flex; align-items: center; gap: 0.6rem; }
.vbd2-sch-item > i:first-child { color: var(--primary); flex-shrink: 0; }
.vbd2-sch-item-tx { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.vbd2-sch-item-t { font-size: 0.83rem; color: var(--foreground); }
.vbd2-sch-item-m { font-size: 0.72rem; color: var(--muted-foreground); }
.vbd2-sch-item-go { margin-left: auto; flex-shrink: 0; font-size: 0.75rem; color: var(--muted-foreground); opacity: 0; transition: opacity 0.15s ease; }
.vbd2-sch-item:hover .vbd2-sch-item-go { opacity: 1; color: var(--primary); }
.vbd2-sch-st {
  flex-shrink: 0;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 600;
  white-space: nowrap;
}
.vbd2-sch-st.is-on { color: oklch(0.5 0.13 155); background: color-mix(in oklab, oklch(0.6 0.14 155) 14%, transparent); }
.vbd2-sch-st.is-off { color: var(--primary); background: color-mix(in oklab, var(--primary) 10%, transparent); }
.dark .vbd2-sch-st.is-on { color: oklch(0.78 0.12 155); }

@media (max-width: 640px) {
  .vbd2-scheme-body { max-height: 80vh; }
  /* Trạng thái hiệu lực xuống dưới meta cho khỏi chật hàng */
  .vbd2-sch-item { flex-wrap: wrap; }
  .vbd2-sch-st { order: 3; margin-inline-start: 2.1rem; }
  .vbd2-sch-item-go { display: none; }
}


/* ---------- 16c. Dòng đời văn bản (lifeline ngang) ---------- */
.vbd2-lifeline {
  margin-top: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: color-mix(in oklab, var(--card) 70%, transparent);
  overflow: hidden;
}
.vbd2-ll-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mono);
}
.vbd2-ll-head > i { color: var(--primary); }
.vbd2-ll-count { font-size: 0.68rem; font-weight: 500; color: var(--muted-foreground); }
.vbd2-ll-nav { margin-left: auto; display: flex; gap: 0.25rem; }
.vbd2-ll-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--secondary-foreground);
  font-size: 0.7rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.vbd2-ll-btn:hover { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
.vbd2-ll-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 8.5rem;
  padding: 1rem 1rem 0.35rem 0.15rem;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: center;
  flex-shrink: 0;
}
/* Trục ngang nối các mốc */
.vbd2-ll-node::before {
  content: '';
  position: absolute;
  top: 1.28rem;
  left: 0.6rem;
  right: -0.15rem;
  height: 2px;
  background: color-mix(in oklab, var(--foreground) 14%, transparent);
}
.vbd2-ll-node:last-child::before { right: 45%; }
.vbd2-ll-node.is-future::before { background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 20%, transparent) 0 5px, transparent 5px 10px); height: 2px; }
.vbd2-ll-dot {
  position: relative;
  z-index: 1;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 9999px;
  margin-top: -0.72rem;
  margin-bottom: 0.35rem;
  background: color-mix(in oklab, var(--foreground) 25%, var(--background));
  border: 2px solid var(--background);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 18%, transparent);
  transition: transform 0.15s ease;
}
.vbd2-ll-node:hover .vbd2-ll-dot { transform: scale(1.25); }
.vbd2-ll-node.is-current .vbd2-ll-dot {
  width: 0.85rem;
  height: 0.85rem;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 22%, transparent);
}
.vbd2-ll-node.is-future .vbd2-ll-dot {
  background: var(--background);
  box-shadow: 0 0 0 1px color-mix(in oklab, oklch(0.72 0.14 70) 70%, transparent);
}
.vbd2-ll-year { font-size: 0.62rem; font-weight: 700; color: var(--muted-foreground); letter-spacing: 0.03em; }
.vbd2-ll-so { font-size: 0.74rem; font-weight: 600; color: var(--secondary-foreground); white-space: nowrap; }
.vbd2-ll-node.is-current .vbd2-ll-so { color: var(--mono); }
.vbd2-ll-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.14rem 0.45rem;
  border-radius: 9999px;
  color: var(--muted-foreground);
  background: color-mix(in oklab, var(--muted) 80%, transparent);
}
.vbd2-ll-node.is-current .vbd2-ll-tag {
  color: var(--primary-foreground);
  background: var(--primary);
}
.vbd2-ll-node.is-future .vbd2-ll-tag {
  color: color-mix(in oklab, oklch(0.55 0.13 65) 92%, var(--foreground));
  background: color-mix(in oklab, oklch(0.75 0.14 70) 18%, transparent);
}
.vbd2-ll-node:hover .vbd2-ll-so { color: var(--primary); }
@media (max-width: 640px) {
  .vbd2-ll-nav { display: none; }
  .vbd2-ll-node { min-width: 7.5rem; }
}

/* ---------- 16c-2. Nét riêng của mốc trong Dòng đời phiên bản ---------- */
.vbd2-verstrip { border-color: color-mix(in oklab, var(--primary) 22%, var(--border)); }
/* Mốc HIỆN HÀNH giữ thẻ đỏ (từ .is-current) nhưng chấm về cỡ thường —
   chấm đỏ nhấp nháy dành riêng cho mốc ĐANG XEM (bản E) */
.vbd2-fe-track .vbd2-ll-node.is-current:not(.is-viewing) .vbd2-ll-dot {
  width: 0.7rem;
  height: 0.7rem;
  background: color-mix(in oklab, var(--foreground) 25%, var(--background));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 18%, transparent);
}
/* Mốc đang xem: chấm đỏ (nhấp nháy qua .vbd2-fe-livedot) + chữ đậm */
.vbd2-ll-node.is-viewing .vbd2-ll-dot {
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 22%, transparent);
}
.vbd2-ll-node.is-viewing .vbd2-ll-so { color: var(--mono); }
.vbd2-ll-node.is-viewing .vbd2-ll-tag {
  color: var(--primary-foreground);
  background: var(--primary);
}
/* Quan hệ sửa đổi chưa hợp nhất vào sổ phiên bản: mờ + nét đứt (tín hiệu trung thực) */
.vbd2-ll-node.is-k-pending { opacity: 0.75; }
.vbd2-ll-node.is-k-pending .vbd2-ll-dot {
  background: var(--background);
  box-shadow: 0 0 0 1px color-mix(in oklab, oklch(0.72 0.14 70) 70%, transparent);
}
.vbd2-ll-node.is-k-pending::before {
  background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--foreground) 20%, transparent) 0 5px, transparent 5px 10px);
  height: 2px;
}
.vbd2-ll-node.is-k-pending .vbd2-fe-badge {
  color: color-mix(in oklab, oklch(0.55 0.13 65) 92%, var(--foreground));
  background: color-mix(in oklab, oklch(0.75 0.14 70) 18%, transparent);
}

/* ---------- 16c-3. Banner "đang xem phiên bản cũ" ----------
   Full chiều rộng container như dải hiệu lực và thanh Dòng đời phiên bản: ba khối
   xếp dọc nhau, khối nào ngắn hơn sẽ trông như lỗi dàn trang. */
.vbd2-verwarn {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid color-mix(in oklab, oklch(0.75 0.14 70) 45%, var(--border));
  border-left: 3px solid oklch(0.72 0.14 70);
  border-radius: 0.75rem;
  background: color-mix(in oklab, oklch(0.85 0.09 80) 14%, var(--card));
}
.vbd2-verwarn > i {
  font-size: 1.05rem;
  color: oklch(0.55 0.13 65);
  margin-top: 0.1rem;
}
.vbd2-verwarn-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.vbd2-verwarn-body strong { font-size: 0.85rem; color: var(--mono); }
.vbd2-verwarn-body span { font-size: 0.78rem; color: var(--secondary-foreground); line-height: 1.5; }
/* Link tên văn bản nằm giữa câu: trả về inline (xem ghi chú ở .vbd2-hx-ver-by) */
.vbd2-verwarn-body a.kt-link { display: inline; }
.vbd2-verwarn-cta { flex-shrink: 0; align-self: center; white-space: nowrap; }
@media (max-width: 640px) {
  .vbd2-verwarn { flex-wrap: wrap; }
  .vbd2-verwarn-cta { align-self: flex-start; margin-left: 1.75rem; }
}

/* ---------- 16c-3b. Dòng đời phiên bản (bản E chốt từ mockup phien-ban-timeline-v2)
   Một thanh ngang duy nhất: mỗi ĐỜI văn bản là một cụm có thước năm riêng, độ dài
   thước đúng bằng cụm mốc bên dưới; mốc tái dùng .vbd2-ll-node của thanh cũ. ---------- */
.vbd2-fe-track {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.1rem 0.15rem 0.6rem;
  scroll-behavior: smooth;
}
.vbd2-fe-grp { flex: 0 0 auto; }
/* Thước năm: nằm cùng khối với cụm mốc nên tự khớp bề rộng — đời sửa nhiều thước dài */
.vbd2-fe-bar {
  display: flex;
  align-items: center;
  height: 1.15rem;
  border-radius: 999px;
  background: #b8ada2;
  margin: 0 0.3rem 0.45rem;
}
.vbd2-fe-grp:nth-child(even) .vbd2-fe-bar { background: #a89c8f; }
.vbd2-fe-grp.is-cur .vbd2-fe-bar { background: #16a34a; }
/* Tên đời dính mép trái khi cuộn — cụm dài cỡ nào tên vẫn trong tầm mắt */
.vbd2-fe-bar-in {
  position: sticky;
  left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  padding: 0 0.65rem;
  white-space: nowrap;
}
.vbd2-fe-row { display: flex; align-items: flex-start; }
.vbd2-fe .vbd2-ll-node { min-width: 6.9rem; border-radius: 0.5rem; }
/* Nền mốc: xanh nhạt cho đời đang áp dụng, xám xen kẽ cho đời cũ */
.vbd2-fe .vbd2-ll-node.vbd2-fe-tint { background: color-mix(in oklab, var(--muted) 72%, transparent); }
.vbd2-fe .vbd2-ll-node.vbd2-fe-tint-cur { background: color-mix(in oklab, #dcfce7 45%, transparent); }
/* Nền mờ khi rê vào mốc — báo "mốc này đang được hỏi" */
.vbd2-fe .vbd2-ll-node[data-tip]:hover { background: color-mix(in oklab, var(--foreground) 7%, var(--muted)); }
/* Hàng badge dưới mỗi mốc; mọi loại tác động dùng chung một sắc xám trung tính */
.vbd2-fe-bdgs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.2rem; }
.vbd2-fe-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.08rem 0.45rem;
  white-space: nowrap;
  background: #e7e5e4;
  color: #57534e;
}
/* Mốc HIỆN HÀNH: thẻ đỏ đặc; chấm đỏ nhấp nháy nhường cho mốc ĐANG XEM */
.vbd2-fe-track .vbd2-fe-inforce .vbd2-ll-tag { color: var(--primary-foreground); background: var(--primary); }
/* Badge "Đang xem" viền primary (mốc đang mở không phải bản hiện hành) */
.vbd2-fe-here {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
}
/* Chấm active nhấp nháy theo sắc primary ở mốc người dùng đang xem */
.vbd2-fe-livedot { position: relative; }
.vbd2-fe-livedot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: vbd2FePulse 1.8s ease-out infinite;
}
@keyframes vbd2FePulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 45%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 0%, transparent); }
}
/* Máy thời gian inline trên header thanh */
.vbd2-fe-tm { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.6rem; }
.vbd2-fe-tm input[type="date"] {
  font-size: 0.66rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  padding: 0.14rem 0.35rem;
  background: var(--background);
  color: var(--foreground);
  max-width: 8.2rem;
}
.vbd2-fe-tm button {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--primary-foreground);
  background: var(--primary);
  border: 0;
  border-radius: 0.45rem;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}
/* Mốc trúng phép tra "ngày này dùng bản nào" */
.vbd2-fe-hit { outline: 2px solid #16a34a; outline-offset: 2px; border-radius: 0.6rem; }
/* Dòng kết quả máy thời gian thế chỗ dòng đếm trong 12 giây */
#fe-count b { color: #15803d; }
/* Thanh cuộn ngang: rãnh cao 12px LUÔN được chừa chỗ nên ẩn/hiện không làm khung
   nhảy; chỉ đổi màu thanh kéo — trong suốt khi rời chuột, hiện khi rê vào khung.
   Rê vào chính thanh kéo thì viền trong suốt co lại nên thanh dày hẳn, dễ nắm. */
.vbd2-fe-track::-webkit-scrollbar { height: 12px; }
.vbd2-fe-track::-webkit-scrollbar-track { background: transparent; }
.vbd2-fe-track::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 9999px;
  border: 4px solid transparent;
  background-clip: padding-box;
}
.vbd2-fe:hover .vbd2-fe-track::-webkit-scrollbar-thumb { background-color: var(--border); }
.vbd2-fe-track::-webkit-scrollbar-thumb:hover,
.vbd2-fe-track::-webkit-scrollbar-thumb:active {
  border-width: 1px;
  background-color: color-mix(in oklab, var(--muted-foreground) 45%, var(--border));
}
/* Firefox không có ::-webkit-scrollbar: scrollbar-width giữ chỗ, chỉ đổi màu khi hover */
@supports not selector(::-webkit-scrollbar) {
  .vbd2-fe-track { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .vbd2-fe:hover .vbd2-fe-track { scrollbar-color: var(--border) transparent; }
}
/* Cảm ứng không có hover: luôn hiện để người dùng biết là cuộn được */
@media (hover: none) {
  .vbd2-fe-track::-webkit-scrollbar-thumb { background-color: var(--border); }
}
@media (max-width: 640px) {
  /* Header hẹp: cho phép xuống dòng, máy thời gian chiếm nguyên hàng riêng */
  .vbd2-fe .vbd2-ll-head { flex-wrap: wrap; row-gap: 0.35rem; }
  .vbd2-fe .vbd2-ll-title { white-space: nowrap; }
  .vbd2-fe-tm { margin-left: 0; flex-basis: 100%; margin-top: 0; order: 10; }
  .vbd2-fe-tm input[type="date"] { flex: 1; max-width: none; }
  .vbd2-fe-tm button { white-space: nowrap; }
}

/* Tooltip mốc: vẽ bằng JS vào body (position fixed) — tooltip CSS thuần bị track
   overflow-x cắt mất. Hình thoi chỉ đúng tâm mốc nhờ --tip-dx do JS đặt. */
.vbd2-tip {
  position: fixed;
  z-index: 90;
  display: none;
  max-width: 17rem;
  white-space: normal;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  color: #fff;
  background: #1f2937;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}
.vbd2-tip.is-on { display: block; }
.vbd2-tip::after {
  content: '';
  position: absolute;
  left: var(--tip-dx, 50%);
  top: 100%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.55rem;
  height: 0.55rem;
  background: #1f2937;
}
.vbd2-tip.is-below::after { top: 0; }



/* ---------- 16c-4. Bia mộ đơn vị bị bãi bỏ + badge thay đổi trong tờ văn bản ---------- */
.vbd2-block.is-repealed .vbd2-dieu-title { color: var(--muted-foreground); text-decoration: line-through; text-decoration-thickness: 1px; }
.vbd2-tomb {
  display: flex;
  gap: 0.6rem;
  margin: 0.5rem 0;
  padding: 0.7rem 0.9rem;
  border: 1px dashed color-mix(in oklab, var(--foreground) 25%, transparent);
  border-radius: 0.6rem;
  background: color-mix(in oklab, var(--muted) 60%, transparent);
  font-size: 0.82rem;
  color: var(--secondary-foreground);
  line-height: 1.55;
}
.vbd2-tomb > i { color: var(--muted-foreground); margin-top: 0.15rem; }
.vbd2-tomb strong { color: var(--foreground); }
.vbd2-tomb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
.vbd2-tomb-link:hover { text-decoration: underline; }
.vbd2-chg {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.15rem 0 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, oklch(0.5 0.12 65) 92%, var(--foreground));
  background: color-mix(in oklab, oklch(0.78 0.13 75) 22%, transparent);
  border: 1px solid color-mix(in oklab, oklch(0.72 0.14 70) 35%, transparent);
}
a.vbd2-chg:hover { background: color-mix(in oklab, oklch(0.78 0.13 75) 34%, transparent); }

/* ---------- 16c-5. Modal lịch sử: cỗ máy thời gian + sổ phiên bản ---------- */
.vbd2-timemachine {
  margin-bottom: 1rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--border));
  border-radius: 0.75rem;
  background: color-mix(in oklab, var(--primary) 6%, var(--card));
}
.vbd2-tm-label {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--secondary-foreground);
  margin-bottom: 0.55rem;
  line-height: 1.5;
}
.vbd2-tm-label i { color: var(--primary); margin-top: 0.12rem; }
.vbd2-tm-row { display: flex; gap: 0.5rem; }
.vbd2-tm-row input[type="date"] { max-width: 12rem; }

/* ---------- 16d. Nút hành động pagehead theo thiết bị ---------- */
@media (max-width: 767px) {
  .vbd2-act-desk { display: none; }
}
/* v3.1: desktop không còn nút ⋯ ở pagehead — mọi thao tác đã ra ngoài */
@media (min-width: 768px) {
  .vbd2-act-mob { display: none; }
}

/* ============================================================
   v3 — chuyển cách hiển thị: Dạng thẻ (bố cục 2.2) / Tờ văn bản (2.1.3)
   ============================================================ */

/* Thanh chuyển bố cục */
.vbd2-layoutbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 0 0.15rem;
}
.vbd2-layout-seg {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--card);
}
.vbd2-layout-seg button,
.vbd2-layout-seg a {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.34rem 0.8rem;
  border: none;
  border-radius: 9999px;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--secondary-foreground);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.vbd2-layout-seg button:hover,
.vbd2-layout-seg a:hover { color: var(--primary); }
.vbd2-layout-seg button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-foreground);
}
.vbd2-layout-seg button i,
.vbd2-layout-seg a i { font-size: 0.8rem; }

/* ---------- Chế độ DẠNG THẺ: khung giấy tan ra, mỗi Điều một thẻ (bố cục 2.2) ---------- */
.vbd2-doc.is-cards .vbd2-paper {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0.25rem 0 0;
}
/* Phần thể thức đầu (quốc hiệu, số hiệu, tên, căn cứ) thành thẻ riêng */
.vbd2-doc.is-cards .vbd2-front {
  border: 1px solid var(--vbd2-paper-border);
  border-radius: 0.875rem;
  background: var(--vbd2-paper-bg);
  padding: clamp(1.1rem, 3vw, 1.75rem);
}
/* Chương: nhãn nhỏ một dòng như 2.2 */
.vbd2-doc.is-cards .vbd2-chuong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  text-align: left;
  margin: 1.75rem 0.25rem 0.85rem;
}
.vbd2-doc.is-cards .vbd2-chuong .vbd2-chuong-so,
.vbd2-doc.is-cards .vbd2-chuong .vbd2-chuong-ten {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-top: 0;
}
.vbd2-doc.is-cards .vbd2-chuong .vbd2-chuong-so::after { content: ' ·'; }
/* Điều: thẻ có thanh tiêu đề riêng */
.vbd2-doc.is-cards .vbd2-dieu {
  border: 1px solid var(--vbd2-paper-border);
  border-radius: 0.875rem;
  background: var(--vbd2-paper-bg);
  padding: 0 clamp(1rem, 3vw, 1.4rem) 1.1rem;
  margin: 0 0 1.25rem;
}
/* Văn bản không chia Chương: thẻ Điều đầu tiên phải cách thẻ thể thức/căn cứ
   đúng nhịp 1.25rem như giữa hai thẻ Điều, không dính liền */
.vbd2-doc.is-cards .vbd2-front + .vbd2-dieu { margin-top: 1.25rem; }
.vbd2-doc.is-cards .vbd2-dieu-title {
  margin: 0 calc(-1 * clamp(1rem, 3vw, 1.4rem)) 0.35rem;
  padding: 0.9rem clamp(1rem, 3vw, 1.4rem);
  padding-right: 3rem; /* chừa chỗ cho nút ⋯ trong thanh tiêu đề */
  border-bottom: 1px solid var(--vbd2-paper-border);
  border-radius: 0.875rem 0.875rem 0 0;
  background: color-mix(in oklab, var(--muted) 55%, var(--vbd2-paper-bg));
  font-size: 1.0625rem;
}
.vbd2-doc.is-cards .vbd2-dieu-title.is-flash { border-radius: 0.875rem 0.875rem 0 0; }
/* Khoản / Điểm: gờ trái thể hiện cấp bậc như 2.2 */
.vbd2-doc.is-cards .vbd2-khoan {
  border-left: 2px solid var(--vbd2-paper-border);
  padding: 0.15rem 0 0.15rem 1rem;
  margin-top: 0.75em;
}
.vbd2-doc.is-cards .vbd2-diem {
  border-left: 2px dashed color-mix(in oklab, var(--vbd2-paper-border) 80%, transparent);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 0.6em 0 0.6em 1rem;
}
/* Nút ⋯ nằm gọn trong thẻ thay vì ngoài lề */
.vbd2-doc.is-cards .vbd2-dieu > .vbd2-block-btn {
  top: 0.72rem;
  right: 0.85rem;
  z-index: 1;
}
.vbd2-doc.is-cards .vbd2-khoan > .vbd2-block-btn,
.vbd2-doc.is-cards .vbd2-diem > .vbd2-block-btn {
  top: 0;
  right: 0.15rem;
}
/* Mobile: thẻ full-bleed một lề, đồng bộ hành vi với chế độ tờ văn bản */
@media (max-width: 640px) {
  .vbd2-layoutbar { padding-inline: 1rem; }
  .vbd2-doc.is-cards .vbd2-front,
  .vbd2-doc.is-cards .vbd2-dieu,
  .vbd2-doc.is-cards .vbd2-sign {
    border-radius: 0;
    border-inline: none;
  }
  .vbd2-doc.is-cards .vbd2-dieu-title { border-radius: 0; }
  .vbd2-doc.is-cards .vbd2-chuong { margin-inline: 1rem; }
}

/* In ấn: chỉ giữ tiêu đề h1, khung cảnh báo hiệu lực (nếu có), dòng cơ quan
   ban hành/hiệu lực và nội dung văn bản — mọi khung điều hướng, công cụ web,
   dòng đời, ghi chú cá nhân đều bỏ. Hai chế độ thẻ/tờ phải in ra CÙNG một
   kiểu tờ văn bản chuẩn. */
@media print {
  @page { margin: 1.6cm 1.4cm; }

  /* Khung trang web + công cụ đọc + lớp phủ (nơi nhận/chữ ký giờ nằm trong
     nội dung gốc .vbd2-html, không còn là <footer> riêng nên ẩn thẳng luôn) */
  .v4-nav, .v4-mobile-menu, footer, .v4-toast-wrap,
  .vbd2-progress, .vbd2-readbar, .vbd2-aa, .vbd2-menu, .vbd2-rail-zone,
  .kt-modal, .kt-drawer,
  .vbd2-pagehead nav, .vbd2-actions, .vbd2-lifeline, .vbd2-verwarn-cta,
  .vbd2-vitality:not([data-verdict="warn"]), .vbd2-vitality-history,
  .vbd2-valwm,
  .vbd2-block-btn, .vbd2-ctx,
  .vbd2-peek, .vbd2-peek-backdrop,
  .vbd2-dock, .vbd2-dock-chips, .vbd2-dock-editor, .vbd2-dock-note-acts,
  .vbd2-dock-confirm { display: none !important; }

  /* Đầu trang gọn: h1 + dòng cơ quan/ngày/hiệu lực, bỏ nền hoa văn.
     .vbd2-stage mang nền be của khung đọc — máy in nào bật "in nền" sẽ phun
     kín cả trang giấy, nên dập về trắng luôn. */
  body, main, .vbd2-stage, .vbd2-pagehead { background: #fff !important; }
  .vbd2-pagehead { border: none; padding: 0; overflow: visible; }
  .vbd2-pagehead::before { display: none; }
  .vbd2-pagehead h1 { font-size: 13pt; margin-bottom: 0.2cm; max-width: 100%; }
  .vbd2-meta { font-size: 8.5pt; color: #333; }

  /* Khung cảnh báo hiệu lực giữ lại phải in mực đen rõ trên nền trắng */
  .vbd2-vitality, .vbd2-verwarn { border: 1pt solid #999 !important; background: none !important; }

  /* Ghim hiệu lực in theo bản giấy: tờ in rời khỏi web mà không mang tình trạng
     hiệu lực thì người đọc không biết bản mình cầm còn dùng được hay không.
     Trên web phiếu được "kẹp" vào mép giấy bằng top âm + xoay 10°; in thì phải
     trả về luồng thường, nếu không nó trồi lên đè dòng cơ quan/tiêu đề.
     print-color-adjust: giữ đúng màu trạng thái (xanh còn / đỏ hết hiệu lực). */
  .vbd2-valslip,
  .vbd2-doc.is-cards .vbd2-valslip {
    top: auto !important;
    left: auto !important;
    margin: 0.3cm 0 0.7cm !important;
    padding: 0.35cm 0.45cm !important;
    transform: none !important;
    background: none !important;
    box-shadow: none !important;
    border: 1pt solid #999 !important;
    break-inside: avoid;
    print-color-adjust: exact;
  }
  .vbd2-valslip strong { font-size: 12pt; }

  /* Tờ giấy: bỏ khung/bóng/nền để in như bản giấy chuẩn — áp cho CẢ hai chế độ,
     trước đây chỉ reset .is-cards nên chế độ "Tờ văn bản" in ra vẫn còn viền */
  .vbd2-paper {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    color: #111 !important;
  }

  .vbd2-layoutbar { display: none !important; }
  .vbd2-doc.is-cards .vbd2-front,
  .vbd2-doc.is-cards .vbd2-dieu,
  .vbd2-doc.is-cards .vbd2-sign {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .vbd2-doc.is-cards .vbd2-dieu { margin-top: 1.2em !important; }
  .vbd2-doc.is-cards .vbd2-dieu-title {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-size: inherit !important;
  }
  .vbd2-doc.is-cards .vbd2-chuong {
    display: block;
    text-align: center !important;
    margin: 1.6em 0 1em !important;
  }
  .vbd2-doc.is-cards .vbd2-chuong .vbd2-chuong-so,
  .vbd2-doc.is-cards .vbd2-chuong .vbd2-chuong-ten {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    letter-spacing: normal;
  }
  .vbd2-doc.is-cards .vbd2-chuong .vbd2-chuong-so::after { content: ''; }
  .vbd2-doc.is-cards .vbd2-khoan,
  .vbd2-doc.is-cards .vbd2-diem {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .vbd2-doc.is-cards .vbd2-diem { padding-left: 1.4em !important; }
}

/* ---------- 17. Nút Aa (glyph chữ, thay icon text-circle) ---------- */
.vbd2-aa-glyph {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* ---------- 18. Rail minimap (desktop): gạch theo từng Điều ---------- */
.vbd2-rail-zone { display: none; }
@media (min-width: 1024px) {
  .vbd2-rail-zone { display: block; position: fixed; right: 0; top: 0; bottom: 0; z-index: 45; width: 0; pointer-events: none; }
}
.vbd2-rail {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-end;
  padding: 0.9rem 0.4rem;
  pointer-events: auto;
}
.vbd2-rail-tick {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  border: none;
  padding: 0;
  background: color-mix(in oklab, var(--foreground) 16%, transparent);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}
.vbd2-rail-tick:hover { background: color-mix(in oklab, var(--foreground) 45%, transparent); }
.vbd2-rail-tick.is-active { width: 22px; height: 3px; background: var(--foreground); }

/* Panel mục lục hiện khi rê chuột vào rail — không làm mờ nền */
.vbd2-rail-panel {
  position: absolute;
  right: 3.1rem;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  width: 19.5rem;
  max-height: 74vh;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 96%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 55px color-mix(in oklab, var(--foreground) 18%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.vbd2-rail-zone.open .vbd2-rail-panel { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.vbd2-rail-panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--mono);
}
.vbd2-rail-panel-head i { color: var(--primary); }
.vbd2-rail-panel-hint { margin-left: auto; font-size: 0.66rem; font-weight: 500; color: var(--muted-foreground); }
.vbd2-rail-panel-body { padding: 0.6rem; overflow-y: auto; scrollbar-width: thin; }
.vbd2-rail-panel-body::-webkit-scrollbar { width: 6px; }
.vbd2-rail-panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }

/* Nút lên đầu trang: tách khỏi rail một đoạn để tránh bấm nhầm */
.vbd2-rail-top {
  position: absolute;
  right: 0.65rem;
  bottom: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--secondary-foreground);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--foreground) 12%, transparent);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s ease, color 0.15s ease, border-color 0.15s ease;
}
.vbd2-rail-top.show { opacity: 1; transform: none; pointer-events: auto; }
.vbd2-rail-top:hover { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }

@media print {
  .vbd2-rail-zone { display: none !important; }
  /* Đang mở đối chiếu mà bấm In: chỉ in tờ văn bản, trả lại toàn bộ chiều ngang */
  .vbd2-compare-panel { display: none !important; }
  body.vbd2-compare-on main { margin-right: 0 !important; }
}

/* Flash tiêu đề Điều khi đi tới từ mục lục (tự mờ dần sau 3s) */
.vbd2-dieu-title {
  border-radius: 0.4rem;
  transition: background-color 1.4s ease, box-shadow 1.4s ease;
}
.vbd2-dieu-title.is-flash,
.vbd2-block.is-flash {
  background: color-mix(in oklab, var(--primary) 15%, transparent);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 15%, transparent);
  transition-duration: 0.25s;
}
.vbd2-block.is-flash { border-radius: 0.5rem; transition: background-color 1.4s ease, box-shadow 1.4s ease; }


/* ============================================================
   Phần bổ sung riêng cho trang (không có trong CSS mockup)
   ============================================================ */

/* ---------- A. Pagehead: hoa văn trống đồng như hero trang chủ ---------- */
.vbd2-pagehead { position: relative; overflow: hidden; }
.vbd2-pagehead::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('/assets/media/trong-dong-800.webp') no-repeat center center;
  background-size: cover;
  opacity: 0.03;
}
.vbd2-pagehead > * { position: relative; }
.dark .vbd2-pagehead::before { opacity: 1; }
@media (min-width: 768px) {
  .vbd2-pagehead::before { background-image: url('/assets/media/trong-dong-1280.webp'); }
}
@media (min-width: 1280px) {
  .vbd2-pagehead::before { background-image: url('/assets/media/trong-dong-1920.webp'); }
}

/* ---------- B. Thể thức tờ văn bản: lùi dòng đầu 1cm ---------- */
.vbd2-doc:not(.is-cards) .vbd2-cancu-wrap > p,
.vbd2-doc:not(.is-cards) .vbd2-dieu-title,
.vbd2-doc:not(.is-cards) .vbd2-khoan > p,
.vbd2-doc:not(.is-cards) .vbd2-diem > p,
.vbd2-doc:not(.is-cards) .vbd2-text > p { text-indent: 1cm; }
@media print {
  .vbd2-cancu-wrap > p, .vbd2-dieu-title, .vbd2-khoan > p, .vbd2-diem > p, .vbd2-text > p {
    text-indent: 1cm !important;
  }
}
/* Chip ngữ cảnh dưới heading Điều cũng lùi theo */
.vbd2-doc:not(.is-cards) .vbd2-ctx { margin-left: 1cm; }
/* Thanh "Cách hiển thị" có 2 cụm nút — cho xuống dòng trên màn hẹp */
.vbd2-layoutbar { flex-wrap: wrap; }

/* ---------- C. Khối nội dung sinh từ DB (không có class trong HTML) ---------- */
.vbd2-cancu-wrap > p { font-style: italic; margin-bottom: 0.9em; }
.vbd2-text > p { margin-top: 0.9em; }
.vbd2-khoan > p + p, .vbd2-diem > p + p { margin-top: 0.55em; }
/* Bảng trong nội dung điều khoản */
.vbd2-html table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.9em 0;
  font-size: 0.92em;
  text-indent: 0;
}
.vbd2-html table td, .vbd2-html table th {
  border: 1px solid color-mix(in oklab, var(--vbd2-paper-border) 80%, var(--foreground) 12%);
  padding: 0.4rem 0.55rem;
  vertical-align: top;
  text-indent: 0;
}
.vbd2-html table th { font-weight: 700; background: color-mix(in oklab, var(--muted) 55%, var(--vbd2-paper-bg)); }
/* data-border="0": bảng dàn trang của bản gốc (khối ĐƠN VỊ/CỘNG HÒA, nơi nhận,
   ký tên) — không kẻ ô; "1" hoặc thiếu thuộc tính giữ kẻ ô như trên */
.vbd2-html table[data-border='0'] td,
.vbd2-html table[data-border='0'] th { border: none; padding: 0.15rem 0.55rem 0.15rem 0; }
/* Căn lề khai báo từ pipeline (data-align) */
.vbd2-html [data-align='center'] { text-align: center; }
.vbd2-html [data-align='right'] { text-align: right; }
.vbd2-html [data-align='justify'] { text-align: justify; }
/* Ảnh BE nhúng base64 (<img be="true">, xem VanBanDetailRepository::beImageTag()).
   Preflight Tailwind đặt img display:block: ảnh giữa câu bị ngắt dòng và ảnh trong
   đoạn data-align="center" mất căn giữa — trả về inline như HTML gốc */
.vbd2-html img { display: inline-block; vertical-align: middle; }

/* ---------- C2. Bảng thể thức đầu/cuối NGUYÊN BẢN + tên văn bản ----------
   Đây là nội dung gốc của văn bản (không dựng từ metadata). Bảng mang class
   thẳng từ pipeline (vb_table_header, vb_table_footer + các ô vb_header_xxx,
   vb_footer_xxx — xem VanBanDetailRepository::ALLOWED_HTML_CLASSES), tên văn
   bản không có class nên được đánh dấu vbd2-content-loai/-trichyeu ở
   VanBanDetailRepository::markDocName(). */

/* Bảng thể thức đầu: cơ quan/số hiệu | quốc hiệu/tiêu ngữ/ngày tháng */
.vbd2-html table.vb_table_header {
  width: 100%;
  border: none;
  margin: 0 0 1.75rem;
  font-family: var(--vbd2-font-display);
  font-size: 0.82em;
  line-height: 1.45;
}
.vbd2-html table.vb_table_header td {
  border: none;
  padding: 0;
  width: 50%;
  vertical-align: top;
  text-align: center;
}
.vb_header_noi_ban_hanh,
.vb_header_quoc_hieu { font-weight: 700; text-transform: uppercase; }
.vb_header_noi_ban_hanh::after,
.vb_header_tieu_ngu::after {
  content: '';
  display: block;
  width: 10%;
  height: 1px;
  margin: 0.3rem auto 0;
  background: var(--vbd2-paper-fg);
}
.vb_header_tieu_ngu { font-weight: 700; }
.vb_header_tieu_ngu::after { width: 30%; }
.vb_header_so_vb, .vb_header_ngay_thang { margin-top: 0.6rem; }
.vb_header_ngay_thang { font-style: italic; }

/* Tên văn bản: dòng loại (LUẬT/NGHỊ ĐỊNH/QUYẾT ĐỊNH...) + trích yếu */
.vbd2-content-loai, .vbd2-content-trichyeu { font-family: var(--vbd2-font-display); text-align: center; }
.vbd2-content-loai > p, .vbd2-content-trichyeu > p {
  margin-top: 0;
  text-indent: 0 !important;
}
.vbd2-content-loai > p { font-size: 1.35em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.vbd2-content-trichyeu > p { font-size: 1.02em; font-weight: 700; text-transform: uppercase; line-height: 1.55; }
.vbd2-content-trichyeu-last { margin-bottom: 1.75rem; }
.vbd2-content-trichyeu-last > p::after {
  content: '';
  display: block;
  width: 5.5rem;
  height: 1px;
  margin: 0.85rem auto 0;
  background: var(--vbd2-paper-fg);
}

/* Bảng cuối: nơi nhận | quyền hạn + người ký */
.vbd2-html table.vb_table_footer {
  width: 100%;
  border: none;
  margin: 2.75rem 0 0;
  font-family: var(--vbd2-font-display);
  font-size: 0.82em;
  line-height: 1.5;
}
.vbd2-html table.vb_table_footer td {
  border: none;
  padding: 0;
  vertical-align: top;
}
.vbd2-html table.vb_table_footer td.vb_footer_noi_nhan { width: 53.5%; }
.vbd2-html table.vb_table_footer td:not(.vb_footer_noi_nhan) {
  width: 46.5%;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
}
.vb_footer_chu_noi_nhan { font-weight: 700; font-style: italic; text-transform: none; }
.vb_footer_noi_nhan p + p { margin-top: 0.15em; }
.vb_footer_nguoi_ky { display: block; margin-top: 4.5rem; text-transform: none; font-size: 1.15em; }

/* Khối nơi nhận + chữ ký (đánh dấu ở VanBanDetailRepository::markSignBlock):
   bảng dàn trang, kể cả khi pipeline không gắn vb_table_footer — không kẻ ô */
.vbd2-sign table td, .vbd2-sign table th { border: none; }
.vbd2-sign table:not(.vb_table_footer) {
  margin: 2.75rem 0 0;
  font-family: var(--vbd2-font-display);
  font-size: 0.82em;
  line-height: 1.5;
}
.vbd2-sign table:not(.vb_table_footer) td { padding: 0; }
.vbd2-sign table:not(.vb_table_footer) td:first-child { width: 53.5%; }
.vbd2-sign table:not(.vb_table_footer) td:last-child:not(:first-child) { text-align: center; }
/* Dạng thẻ: khối ký thành thẻ riêng như phần thể thức đầu */
.vbd2-doc.is-cards .vbd2-sign {
  border: 1px solid var(--vbd2-paper-border);
  border-radius: 0.875rem;
  background: var(--vbd2-paper-bg);
  padding: clamp(1.1rem, 3vw, 1.75rem);
  margin-top: 1.25rem;
}
.vbd2-doc.is-cards .vbd2-sign table { margin-top: 0; }

/* ---------- D. Phụ lục ---------- */
.vbd2-phuluc {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px dashed var(--vbd2-paper-border);
  scroll-margin-top: 5.5rem;
}
.vbd2-pl-head { text-align: center; margin-bottom: 1.1rem; }
.vbd2-pl-kicker { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; }
.vbd2-pl-title {
  font-family: var(--vbd2-font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin: 0.2rem 0 0.3rem;
}
.vbd2-pl-sub { font-style: italic; font-size: 0.85rem; color: var(--secondary-foreground); margin: 0; }
.vbd2-doc.is-cards .vbd2-phuluc {
  border: 1px solid var(--vbd2-paper-border);
  border-radius: 0.875rem;
  background: var(--vbd2-paper-bg);
  padding: clamp(1.1rem, 3vw, 1.75rem);
  margin-top: 1.25rem;
  border-top-style: solid;
}

/* Thanh công cụ phụ lục */
.vbd2-pl-tools { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0 0.75rem; }

/* Bảng danh mục mẫu (dựng ở VanBanDetailRepository::appendixIndex) */
.vbd2-html table.vbd2-pl-table { min-width: 560px; margin: 0; font-size: 0.85rem; }
.vbd2-html table.vbd2-pl-table td { padding: 0.45rem 0.6rem; vertical-align: middle; text-align: left; }
.vbd2-html table.vbd2-pl-table tr.vbd2-pl-headrow td {
  text-align: center;
  font-weight: 700;
  background: color-mix(in oklab, var(--muted) 60%, var(--vbd2-paper-bg));
}
.vbd2-html table.vbd2-pl-table tr.vbd2-pl-group td {
  font-weight: 700;
  background: color-mix(in oklab, var(--muted) 45%, var(--vbd2-paper-bg));
}
.vbd2-html table.vbd2-pl-table td.vbd2-pl-no { font-weight: 600; white-space: nowrap; font-size: 0.8rem; }
.vbd2-html table.vbd2-pl-table tr.is-avail td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.vbd2-html table.vbd2-pl-table td:last-child { width: 7rem; }
.vbd2-pl-view {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 600; color: var(--primary);
  background: none; border: 0; cursor: pointer; white-space: nowrap; padding: 0.15rem 0.2rem;
}
.vbd2-pl-view:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Khối một mẫu: thanh thao tác + tờ mẫu */
.vbd2-form { margin-top: 2rem; scroll-margin-top: 5.5rem; }
.vbd2-form.is-flash-form .vbd2-form-paper,
.vbd2-form.is-flash .vbd2-form-paper { animation: vbd2-form-flash 2.2s ease; }
@keyframes vbd2-form-flash {
  0%, 45% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 45%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.vbd2-form-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.6rem;
  font-family: 'Inter', system-ui, sans-serif;
}
.vbd2-form-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.vbd2-form-badge {
  display: inline-flex; align-items: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary); white-space: nowrap;
}
.vbd2-form-note { font-size: 0.75rem; color: var(--muted-foreground); }
.vbd2-form-draftchip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.72rem; font-weight: 600;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: color-mix(in oklab, var(--success, #16a34a) 14%, transparent);
  color: var(--success, #16a34a);
}
.vbd2-form-draftchip[hidden] { display: none; }
.vbd2-form-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.vbd2-form-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vbd2-form-paper {
  min-width: 640px;
  border: 1px solid var(--vbd2-paper-border);
  border-radius: 4px;
  background: var(--vbd2-paper-bg);
  box-shadow: 0 1px 3px color-mix(in oklab, var(--foreground) 8%, transparent);
  padding: 1.4rem 1.6rem 1.6rem;
  font-size: 0.875rem;
  line-height: 1.55;
}
/* Tờ mẫu nằm trong .vbd2-html của phụ lục: trả bảng về quy ước của
   vanban-form-editor.css (kẻ ô chỉ khi tb-border) thay vì kiểu bảng nội dung */
.vbd2-html .vbf-sheet table { font-size: inherit; margin: 0.5em 0; }
.vbd2-html .vbf-sheet table td, .vbd2-html .vbf-sheet table th { border: none; padding: 3px 7px; }
.vbd2-html .vbf-sheet table.tb-border td, .vbd2-html .vbf-sheet table.tb-border th { border: 1px solid #000; }

/* Nguyên văn: giấu công cụ web (nút soạn/tải/in, Xem mẫu) — chỉ còn phụ lục như bản in */
.vbd2-doc.is-verbatim .vbd2-pl-tools,
.vbd2-doc.is-verbatim .vbd2-form-bar,
.vbd2-doc.is-verbatim .vbd2-pl-view { display: none !important; }

@media print {
  .vbd2-pl-tools, .vbd2-form-bar, .vbd2-pl-view { display: none !important; }
  .vbd2-phuluc { border-top: none; margin-top: 0; padding-top: 0; page-break-before: always; }
  .vbd2-form { page-break-before: always; margin-top: 0; }
  .vbd2-form-scroll { overflow: visible !important; }
  .vbd2-form-paper { min-width: 0 !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
  .vbd2-html table.vbd2-pl-table { min-width: 0 !important; }
  .vbd2-doc.is-cards .vbd2-phuluc { border: none !important; background: none !important; padding: 0 !important; }
}

/* ---------- E. Văn bản chưa số hóa nội dung ---------- */
.vbd2-digitizing {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--border);
  border-radius: 0.9rem;
  background: color-mix(in oklab, var(--muted) 45%, transparent);
  color: var(--secondary-foreground);
  font-size: 0.9rem;
}
.vbd2-digitizing i { font-size: 1.5rem; color: var(--primary); flex: none; }

/* ---------- F. Danh sách bản án render sẵn trong drawer ngữ cảnh ---------- */
.vbd2-ba-item {
  display: block;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  background: var(--card);
}
.vbd2-ba-item + .vbd2-ba-item { margin-top: 0.5rem; }
.vbd2-ba-item:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
.vbd2-ba-item-title {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vbd2-ba-item-meta {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--muted-foreground);
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ============================================================
   G. Cá nhân hóa (Wave 2) — port từ vanban-detail.css (mockup v3.1.3):
   ghi chú trong drawer, dock dưới khối, dải xác thực hiệu lực, form góp ý
   ============================================================ */

/* ---------- G1. Ghi chú trong drawer ---------- */
.vbd2-note-item { border: 1px solid var(--border); border-radius: 0.625rem; padding: 0.75rem; background: var(--card); }

/* ---------- G2. Dock dưới khối: chip Đang theo dõi / Ghi chú inline ---------- */
.vbd2-dock {
  margin: 0.55em 0 0.35em;
  font-family: 'Inter', system-ui, sans-serif;
}
.vbd2-dock-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.vbd2-dock-chips:empty { display: none; }
/* Nguyên văn: tờ văn bản sạch như bản in — ẩn cả phần cá nhân hóa */
.vbd2-doc.is-verbatim .vbd2-dock { display: none; }
.vbd2-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.vbd2-chip:active { transform: scale(0.97); }
.vbd2-chip i { font-size: 0.8rem; }
.vbd2-chip-follow {
  color: oklch(0.45 0.12 155);
  background: color-mix(in oklab, oklch(0.62 0.13 155) 11%, transparent);
}
.vbd2-chip-follow:hover {
  color: oklch(0.4 0.13 25);
  background: color-mix(in oklab, oklch(0.58 0.19 25) 10%, transparent);
}
.dark .vbd2-chip-follow { color: oklch(0.78 0.12 155); }
.vbd2-chip-note {
  color: var(--secondary-foreground);
  background: color-mix(in oklab, var(--muted) 70%, transparent);
  border-color: var(--border);
}
.vbd2-chip-note.is-open,
.vbd2-chip-note:hover {
  color: var(--vbd2-note);
  background: color-mix(in oklab, var(--vbd2-note-soft) 10%, transparent);
  border-color: color-mix(in oklab, var(--vbd2-note-soft) 35%, var(--border));
}

/* Hộp ghi chú hiển thị dưới khối */
.vbd2-dock-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.45rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px dashed color-mix(in oklab, var(--vbd2-note-soft) 38%, var(--vbd2-paper-border));
  background: color-mix(in oklab, var(--vbd2-note-soft) 6%, transparent);
}
.vbd2-dock-note-ico { color: var(--vbd2-note); margin-top: 0.15rem; flex-shrink: 0; }
.vbd2-dock-note-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.vbd2-dock-note-label {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vbd2-note);
}
.vbd2-dock-note-text {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--vbd2-paper-fg);
  white-space: pre-line;
}
.vbd2-dock-note-acts {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.vbd2-dock-note:hover .vbd2-dock-note-acts,
.vbd2-dock-note:focus-within .vbd2-dock-note-acts { opacity: 1; }
@media (hover: none) { .vbd2-dock-note-acts { opacity: 1; } }
.vbd2-dock-note-acts button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.5rem;
  border: none;
  background: none;
  color: var(--muted-foreground);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.vbd2-dock-note-acts button:hover { color: var(--vbd2-note); background: color-mix(in oklab, var(--vbd2-note-soft) 12%, transparent); }
.vbd2-dock-note-acts button[data-dock-act="del"]:hover { color: oklch(0.55 0.19 25); background: color-mix(in oklab, oklch(0.58 0.19 25) 10%, transparent); }
.vbd2-dock-confirm {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--vbd2-paper-fg);
}

/* Khung nhập ghi chú inline */
.vbd2-dock-editor {
  margin-top: 0.45rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.65rem;
  border: 1px solid color-mix(in oklab, var(--vbd2-note-soft) 40%, var(--vbd2-paper-border));
  background: color-mix(in oklab, var(--vbd2-note-soft) 6%, var(--card));
}
.vbd2-dock-editor-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mono);
}
.vbd2-dock-editor-head i { color: var(--vbd2-note); }
.vbd2-dock-editor-head span { margin-left: auto; font-size: 0.66rem; font-weight: 500; color: var(--muted-foreground); }
/* Trên mobile, font-size bị ép về 16px bởi quy tắc chống iOS zoom trong vanban-common.css */
.vbd2-dock-input { font-size: 0.85rem; width: 100%; }
.vbd2-dock-editor-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

/* ---------- G3. Dải xác thực hiệu lực (vitality strip) ----------
   Kéo full chiều rộng container như thanh Dòng đời phiên bản — hai khối
   xếp cạnh nhau mà một cái ngắn một cái dài trông như lỗi dàn trang. */
.vbd2-vitality {
  position: relative;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  transition: border-color 0.5s ease, background-color 0.5s ease;
}
.vbd2-vitality[data-state="ok"] {
  border-color: color-mix(in oklab, oklch(0.62 0.13 155) 38%, var(--border));
  background: color-mix(in oklab, oklch(0.62 0.13 155) 5%, var(--card));
}
.vbd2-vitality-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.vbd2-vitality-icon {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}
.vbd2-vitality-icon svg { width: 100%; height: 100%; }
.vv-ring {
  stroke: color-mix(in oklab, var(--foreground) 22%, transparent);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 63;
  stroke-dashoffset: 47;
  stroke-linecap: round;
  transform-origin: center;
  animation: vv-spin 0.9s linear infinite;
}
.vv-check {
  stroke: oklch(0.55 0.14 155);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}
.vbd2-vitality[data-state="ok"] .vv-ring {
  animation: none;
  stroke: oklch(0.62 0.13 155);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s ease, stroke 0.3s ease;
}
.vbd2-vitality[data-state="ok"] .vv-check {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s ease 0.35s;
}
.vbd2-vitality.no-anim .vv-ring,
.vbd2-vitality.no-anim .vv-check { transition: none; }
@keyframes vv-spin { to { transform: rotate(360deg); } }
.vbd2-vitality-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.vbd2-vitality-text strong {
  font-size: 0.9rem;
  color: var(--mono);
  transition: color 0.3s ease;
}
.vbd2-vitality[data-state="ok"] .vbd2-vitality-text strong { color: oklch(0.45 0.12 155); }
.dark .vbd2-vitality[data-state="ok"] .vbd2-vitality-text strong { color: oklch(0.75 0.12 155); }
.vbd2-vitality-text span { font-size: 0.72rem; color: var(--muted-foreground); }
.vbd2-vitality-history { margin-left: auto; flex-shrink: 0; }

/* Trạng thái "warn" (đã hết hiệu lực / ngưng): không có trong mockup (chỉ demo bản OK)
   — bổ sung theo cùng ngôn ngữ màu, tông hổ phách cảnh báo */
.vbd2-vitality .vv-warn-ico { display: none; }
.vbd2-vitality[data-state="warn"] {
  border-color: color-mix(in oklab, oklch(0.75 0.14 70) 45%, var(--border));
  background: color-mix(in oklab, oklch(0.75 0.14 70) 6%, var(--card));
}
.vbd2-vitality[data-state="warn"] .vbd2-vitality-icon svg { display: none; }
.vbd2-vitality[data-state="warn"] .vv-warn-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.4rem;
  color: oklch(0.6 0.14 65);
}
.vbd2-vitality[data-state="warn"] .vbd2-vitality-text strong { color: oklch(0.5 0.13 65); }
.dark .vbd2-vitality[data-state="warn"] .vbd2-vitality-text strong { color: oklch(0.8 0.13 70); }

/* Các "chứng nhận" chi tiết: hiện lần lượt sau khi đối chiếu xong */
.vbd2-vitality-facts {
  display: none;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed color-mix(in oklab, var(--border) 80%, transparent);
}
.vbd2-vitality[data-state="ok"] .vbd2-vitality-facts,
.vbd2-vitality[data-state="warn"] .vbd2-vitality-facts { display: flex; }
.vv-fact {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  opacity: 0;
  transform: translateY(4px);
  animation: vv-fact-in 0.35s ease forwards;
}
.vbd2-vitality[data-state="ok"] .vv-fact:nth-child(1),
.vbd2-vitality[data-state="warn"] .vv-fact:nth-child(1) { animation-delay: 0.5s; }
.vbd2-vitality[data-state="ok"] .vv-fact:nth-child(2),
.vbd2-vitality[data-state="warn"] .vv-fact:nth-child(2) { animation-delay: 0.62s; }
.vbd2-vitality[data-state="ok"] .vv-fact:nth-child(3),
.vbd2-vitality[data-state="warn"] .vv-fact:nth-child(3) { animation-delay: 0.74s; }
.vbd2-vitality[data-state="ok"] .vv-fact:nth-child(4),
.vbd2-vitality[data-state="warn"] .vv-fact:nth-child(4) { animation-delay: 0.86s; }
.vbd2-vitality.no-anim .vv-fact { animation-delay: 0s !important; animation-duration: 0.01s; }
@keyframes vv-fact-in { to { opacity: 1; transform: none; } }
.vv-fact.is-ok {
  color: oklch(0.45 0.12 155);
  background: color-mix(in oklab, oklch(0.62 0.13 155) 10%, transparent);
}
.dark .vv-fact.is-ok { color: oklch(0.78 0.12 155); }
.vv-fact.is-ok i { font-size: 0.8rem; }
.vv-fact.is-warn {
  color: color-mix(in oklab, oklch(0.5 0.13 65) 92%, var(--foreground));
  background: color-mix(in oklab, oklch(0.75 0.14 70) 14%, transparent);
}
.dark .vv-fact.is-warn { color: oklch(0.8 0.13 70); }
.vv-fact.is-warn i { font-size: 0.8rem; }
.vv-fact.is-soon {
  color: color-mix(in oklab, oklch(0.55 0.13 65) 92%, var(--foreground));
  background: color-mix(in oklab, oklch(0.75 0.14 70) 16%, transparent);
  border-color: color-mix(in oklab, oklch(0.75 0.14 70) 35%, transparent);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.vv-fact.is-soon:hover { background: color-mix(in oklab, oklch(0.75 0.14 70) 26%, transparent); }

/* ---------- G4. Form góp ý ---------- */
.vbd2-fb-types { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vbd2-fb-type input { position: absolute; opacity: 0; pointer-events: none; }
.vbd2-fb-type span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--secondary-foreground);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.vbd2-fb-type input:checked + span {
  color: var(--primary);
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
  background: color-mix(in oklab, var(--primary) 8%, transparent);
}
.vbd2-fb-err {
  min-height: 1rem;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  color: oklch(0.55 0.19 25);
}
.vbd2-fb-invalid {
  border-color: oklch(0.6 0.19 25) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, oklch(0.58 0.19 25) 12%, transparent);
}
/* Honeypot chống bot: đẩy khỏi màn hình, người thật không bao giờ thấy */
.vbd2-fb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- G5. Nút lên đầu ở thanh đọc: desktop đã có nút cạnh rail ---------- */
@media (min-width: 1024px) {
  #rb-top { display: none; }
}

/* ---------- H. Popover pinpoint: xem nhanh điều/khoản/điểm được dẫn chiếu ---------- */

/* Link trong nội dung văn bản (pipeline gắn, sanitize giữ lại): gạch chấm kín đáo,
   không đổi màu chữ để tờ văn bản vẫn "sạch" như bản giấy; hover mới lên màu.
   :not(.kt-link) chừa các link hệ thống (bia mộ "bãi bỏ bởi...") đã có style riêng */
.vbd2-html a:not(.kt-link) {
  color: inherit;
  text-decoration: underline dotted 1px color-mix(in oklab, var(--primary) 55%, transparent);
  text-underline-offset: 3px;
}
.vbd2-html a:not(.kt-link):hover { color: var(--primary); text-decoration-style: solid; }

/* Cụm trích dẫn có pinpoint: nền phớt như bút dạ quang đánh dấu "chỗ này
   bấm được", icon mắt nhỏ cuối cụm; box-decoration-break để cụm xuống dòng
   vẫn liền nền */
.vbd2-html .lc-cite[data-pins] {
  cursor: pointer;
  border-radius: 0.25rem;
  padding: 0.05rem 0.15rem;
  margin: -0.05rem -0.15rem;
  background: color-mix(in oklab, var(--primary) 7%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background 0.15s ease;
}
.vbd2-html .lc-cite[data-pins]:hover,
.vbd2-html .lc-cite[data-pins]:focus-visible {
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  outline: none;
}
/* Khung popover — desktop: thẻ nổi neo theo cụm trích dẫn */
.vbd2-peek {
  position: fixed;
  z-index: 85;
  width: min(92vw, 27rem);
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 24px 64px color-mix(in oklab, var(--foreground) 24%, transparent);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.vbd2-peek.show { opacity: 1; transform: none; pointer-events: auto; }

.vbd2-peek-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
.vbd2-peek-headmain { min-width: 0; }
.vbd2-peek-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.3rem; }
.vbd2-peek-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vbd2-peek-body {
  padding: 0.85rem 1rem;
  overflow-y: auto;
  max-height: 42vh;
  font-size: 0.855rem;
  line-height: 1.7;
  color: var(--foreground);
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.vbd2-peek-body p + p { margin-top: 0.55em; }

/* Popover nhiều điều (data-pins trỏ nhiều điều khác nhau): mỗi điều một
   .vbd2-pk-art, mở trọn hết (không gập cấp Điều) — chỉ cần vạch phân cách thị
   giác giữa các điều. Điều đầu không có vạch/khoảng cách trên vì đã có
   .vbd2-pk-h + .vbd2-pk-ver riêng ngay dưới nó. */
.vbd2-pk-art + .vbd2-pk-art {
  margin-top: 0.9em;
  padding-top: 0.8em;
  border-top: 1px dashed color-mix(in oklab, var(--border) 85%, transparent);
}

/* Heading điều + dòng phiên bản */
.vbd2-pk-h {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--mono, var(--foreground));
  margin-bottom: 0.45rem;
  line-height: 1.45;
}
.vbd2-pk-ver {
  display: block;
  font-size: 0.72rem;
  line-height: 1.5;
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.65rem;
}
.vbd2-pk-ver.is-current { background: color-mix(in oklab, var(--success, #16a34a) 10%, transparent); color: color-mix(in oklab, var(--success, #16a34a) 80%, var(--foreground)); }
.vbd2-pk-ver.is-past { background: color-mix(in oklab, var(--primary) 9%, transparent); color: color-mix(in oklab, var(--primary) 85%, var(--foreground)); }
.vbd2-pk-ver.is-gone,
.vbd2-pk-ver.is-future { background: color-mix(in oklab, var(--destructive, #dc2626) 9%, transparent); color: color-mix(in oklab, var(--destructive, #dc2626) 82%, var(--foreground)); }
.vbd2-pk-cur {
  display: inline;
  border: 0;
  background: none;
  padding: 0;
  margin-left: 0.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Cây unit: khoản/điểm lồng nhau thụt nhẹ. Viền trái liền (Khoản) / đứt đoạn
   (Điểm) đồng nhất với chế độ thẻ ở trang toàn văn (xem .vbd2-doc.is-cards
   .vbd2-khoan/.vbd2-diem) — dùng var(--border) thay var(--vbd2-paper-border)
   vì popover nằm ngoài .vbd2-doc (append vào body), biến giấy không có tác dụng. */
.vbd2-pk-unit { margin-top: 0.45em; }
.vbd2-pk-unit .vbd2-pk-unit { margin-left: 0.85rem; }
.vbd2-pk-unit.is-khoan {
  border-left: 2px solid var(--border);
  padding-left: 0.6rem;
}
.vbd2-pk-unit.is-diem {
  border-left: 2px dashed color-mix(in oklab, var(--border) 80%, transparent);
  padding-left: 0.6rem;
}
/* Unit được pin: KHÔNG còn nền hồng/viền đỏ (gây cảm giác hết hạn/bãi bỏ) vì
   hiện tại mọi phần không được pin đã bị ẩn (.vbd2-pk-fold) nên phần hiển thị
   chính là nội dung được hỏi rồi, không cần nhấn thêm. Giữ lại class is-pin
   trong markup: khi bật lại cụm gập ẩn ở trên, thêm 1 rule ở đây để highlight
   NHẸ riêng phần nội dung chính (ví dụ chỉ đổi background mờ, không viền đỏ). */

/* Cụm gập "Khoản X – Y · bấm để xem": render sẵn, mở tức thì không chờ mạng.
   Tạm ẨN theo yêu cầu (chưa muốn lộ phần còn lại của Điều/Khoản chưa được pin
   trong popover) — xoá dòng display:none dưới đây để hiện lại, HTML/JS toggle
   vẫn giữ nguyên không đổi. */
.vbd2-pk-fold { display: none; margin-top: 0.45em; }
.vbd2-pk-range {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px dashed color-mix(in oklab, var(--border) 80%, var(--foreground));
  background: color-mix(in oklab, var(--muted, #f4f4f5) 60%, transparent);
  color: var(--secondary-foreground);
  border-radius: 999px;
  padding: 0.18rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.vbd2-pk-range em { font-style: normal; font-weight: 500; opacity: 0.75; }
.vbd2-pk-range:hover { background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.vbd2-pk-range.is-open .ki-plus { transform: rotate(45deg); }
.vbd2-pk-range .ki-plus { transition: transform 0.15s ease; font-size: 0.7rem; }
.vbd2-pk-more { margin-top: 0.2em; }

/* Bia mộ: mục đã bị bãi bỏ */
.vbd2-pk-tomb {
  color: var(--destructive, #dc2626);
  font-size: 0.78rem;
  font-style: italic;
}

.vbd2-peek-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--border);
}

/* Skeleton chờ tải */
.vbd2-pk-skel {
  display: block;
  height: 0.7rem;
  border-radius: 999px;
  margin: 0.45rem 0;
  background: color-mix(in oklab, var(--foreground) 8%, transparent);
  animation: vbd2-pk-pulse 1.1s ease-in-out infinite;
}
@keyframes vbd2-pk-pulse { 50% { opacity: 0.45; } }

/* Backdrop chỉ dùng cho bottom-sheet mobile */
.vbd2-peek-backdrop {
  position: fixed;
  inset: 0;
  z-index: 84;
  background: color-mix(in oklab, var(--foreground) 35%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

/* Mobile: popover thành bottom-sheet có tay nắm, khóa cuộn nền */
@media (max-width: 640px) {
  .vbd2-peek {
    left: 0 !important;
    right: 0;
    bottom: 0;
    top: auto !important;
    width: 100%;
    border-radius: 1.1rem 1.1rem 0 0;
    transform: translateY(100%);
  }
  .vbd2-peek.show { transform: none; }
  .vbd2-peek::before {
    content: '';
    display: block;
    width: 2.6rem;
    height: 0.3rem;
    border-radius: 999px;
    background: var(--border);
    margin: 0.5rem auto 0;
  }
  .vbd2-peek-body { max-height: 52vh; }
  .vbd2-peek-backdrop.show { opacity: 1; pointer-events: auto; }
  body.vbd2-peek-lock { overflow: hidden; }
}

/* LCP văn bản dài (đo 10/10/2026: BLTTDS 7,6s vì DOM ~1,9MB render một lượt): các Điều
   dưới fold chỉ layout/paint khi cuộn tới. Trình duyệt tự render phần tử đích khi nhảy
   anchor (#dieu-n); contain-intrinsic-size giữ thanh cuộn ổn định, scroll-margin-top giữ
   nguyên hiệu lực vì chỉ áp lúc phần tử đã là đích cuộn. */
.vbd2-dieu,
.vbd2-phuluc {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}