/* GiaPhaCMS V2 — CSS bổ trợ cho reference.css (chỉ những gì Kit không cấp) */

/* Menu di động (mở từ compact-header ≤1023px) */
.v2-mobile-nav { display: none; }
.v2-mobile-nav[hidden] { display: none; }
.v2-mobile-nav.open {
  display: flex; flex-direction: column;
  background: #881b26; color: #fff7dc;
  border-top: 1px solid rgba(245,214,139,.25);
}
.v2-mobile-nav.open a {
  padding: 14px 20px; color: #fff7dc; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06); font-weight: 600; font-size: 15px;
}
.v2-mobile-nav.open a.is-active { background: rgba(255,255,255,.08); color: #f6d577; }
@media (min-width: 1024px) { .v2-mobile-nav { display: none !important; } }

/* Nút search dạng anchor trong compact-header cho khớp tile button */
.compact-actions a {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.08); display: grid; place-items: center;
}
.compact-actions a img { width: 21px; filter: brightness(0) invert(1); }

/* Header sticky rút gọn khi cuộn (compact-header nổi trên desktop) */
body.v2-scrolled .compact-header {
  display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  box-shadow: 0 6px 20px rgba(62,10,16,.28);
}
@media (max-width: 1023px) { body.v2-scrolled .compact-header { position: sticky; } }

/* Trạng thái rỗng/lỗi dùng chung nếu reference chưa phủ */
.v2-inline-note { color: var(--muted); font-size: 14px; }

/* ── Cây gia phả V2: wrapper nhánh lồng + nối + tương tác ── */
.tree-branch { display: flex; flex-direction: column; align-items: center; position: relative; }
/* Hàng con chừa chỗ cho đường nối phía trên */
.tree-branch > .tree-row { margin-top: 48px; }
/* Ẩn đường nối lên ở node gốc mỗi nhánh cấp cao nhất (gốc cây) */
.tree-stage > .tree-branch > .tree-node::before { display: none; }
.tree-node.root::before { display: none; }

/* Nút thu/mở nhánh */
.node-toggle {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); color: #5c0f0f; font-weight: 700; font-size: 15px;
  display: grid; place-items: center; z-index: 3; cursor: pointer;
  border: 2px solid #fffaf0; box-shadow: 0 2px 6px rgba(64,20,22,.25);
}
.tree-node.root .node-toggle { background: var(--gold-2); }
.tree-branch.collapsed > .tree-row { display: none; }

/* Highlight khi tìm / focus */
.tree-node.is-match { outline: 3px solid var(--gold); outline-offset: 2px; }
.tree-node.is-focus { animation: v2pulse 1.2s ease-in-out 2; }
@keyframes v2pulse {
  0%,100% { box-shadow: var(--shadow-sm); }
  50% { box-shadow: 0 0 0 6px rgba(214,173,78,.5); }
}
.tree-workspace { cursor: grab; }

/* Chế độ ngang: nhánh chảy trái→phải */
.tree-stage.is-horizontal { flex-direction: row; align-items: flex-start; }
.tree-stage.is-horizontal .tree-branch { flex-direction: row; align-items: center; }
.tree-stage.is-horizontal .tree-branch > .tree-row {
  flex-direction: column; margin-top: 0; margin-left: 48px; align-items: flex-start;
}
.tree-stage.is-horizontal .tree-node::before,
.tree-stage.is-horizontal .tree-row::before { display: none; }
.tree-stage.is-horizontal .tree-branch > .tree-row > .tree-branch {
  border-left: 2px solid #c39337; padding-left: 22px; margin: 8px 0;
}

/* Danh sách kết quả dạng "Danh sách" (1 cột) */
.result-grid.result-list { grid-template-columns: 1fr; }

/* In: mở hết nhánh, ẩn thanh công cụ và điều hướng */
@media print {
  header, footer, .toolbar-wrap, .action-bar, .hero-actions,
  .compact-header, .v2-mobile-nav { display: none !important; }
  .tree-branch.collapsed > .tree-row { display: flex !important; }
  .tree-workspace { overflow: visible !important; min-height: 0 !important; }
  .tree-stage { transform: none !important; }
}

/* Nhánh chỉ 1 con: bỏ thanh nối ngang thừa, giữ đường dọc thẳng như trục chính */
.tree-row:has(> .tree-branch:only-child)::before { display: none; }