/* ========================================================
   WORDPRESS THEME COMPATIBILITY RESILIENT RESET & GLOBAL STYLES
   Plugin Name: Plugin Gia Pha BEIT
   ======================================================== */
.viet-giapha-container, 
.viet-giapha-book-container, 
.viet-giapha-events-container, 
.viet-giapha-fund-container, 
.viet-giapha-proposal-container, 
.viet-giapha-branches-container, 
.viet-giapha-search-container,
.viet-giapha-dashboard-container {
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #1c1917 !important;
  background: #faf8f5 !important;
  border: 1px solid #e7e0d3 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin: 20px auto !important;
  max-width: 1280px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
  line-height: 1.5 !important;
  text-align: left !important;
  clear: both !important;
}

.viet-giapha-container *, 
.viet-giapha-book-container *, 
.viet-giapha-events-container *, 
.viet-giapha-fund-container *, 
.viet-giapha-proposal-container *, 
.viet-giapha-branches-container *, 
.viet-giapha-search-container *,
.viet-giapha-dashboard-container * {
  box-sizing: border-box !important;
}

[class*="viet-giapha-"] img {
  max-width: 100% !important;
  height: auto !important;
  display: inline-block !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

[class*="viet-giapha-"] a {
  text-decoration: none !important;
  box-shadow: none !important;
}

[class*="viet-giapha-"] table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 0 !important;
  border-spacing: 0 !important;
}

[class*="viet-giapha-"] input,
[class*="viet-giapha-"] select,
[class*="viet-giapha-"] textarea {
  box-sizing: border-box !important;
  font-family: inherit !important;
  max-width: 100% !important;
}

.giapha-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #991b1b;
  color: #fff;
  border-radius: 6px 6px 0 0;
}

.giapha-clan-brand h3 {
  margin: 0;
  color: #fef3c7;
  font-size: 1.15rem;
  font-weight: 700;
}

.giapha-actions .giapha-btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 5px;
}

.giapha-toolbar {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  background: #f4ece1;
  border-bottom: 1px solid #e2d9c8;
}

.giapha-input, .giapha-select {
  padding: 8px 12px;
  border: 1px solid #d4c5b0;
  border-radius: 5px;
  font-size: 13px;
  background: #fff;
}

.giapha-viewport {
  width: 100%;
  height: 650px;
  overflow: auto;
  cursor: grab;
  background-image: radial-gradient(#d6cebe 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ========================================================
   ROYAL BANNER & HERITAGE TYPOGRAPHY
   ======================================================== */
.giapha-banner-royal {
  padding: 24px 20px 20px;
  margin-bottom: 24px;
  background: linear-gradient(180deg, #fffdfa 0%, #faf5ed 100%);
  border: 1px solid #e7dfd3;
  border-bottom: 2px solid #b45309;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.giapha-kicker-royal {
  font-size: 11px;
  letter-spacing: 2px;
  color: #991b1b;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.giapha-title-royal {
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 800;
  color: #7f1d1d;
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}
.giapha-quote-royal {
  font-style: italic;
  color: #78716c;
  font-size: 13px;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ========================================================
   SHORTCODE 2: PHẢ KÝ TOÀN THƯ (BOOK VIEW)
   ======================================================== */
.giapha-book-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f5ede2;
  border: 1px solid #e2d7c5;
  border-radius: 6px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.giapha-book-nav-label {
  font-weight: 700;
  font-size: 12px;
  color: #78350f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.giapha-nav-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.giapha-nav-chip {
  background: #fff;
  border: 1px solid #d4c5b0;
  color: #44403c;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.giapha-nav-chip:hover {
  background: #991b1b;
  border-color: #7f1d1d;
  color: #fff;
}
.giapha-nav-chip:hover .chip-count {
  color: #fef3c7;
}
.chip-count {
  font-size: 10px;
  color: #a8a29e;
}

.giapha-chapter {
  margin-bottom: 36px;
  scroll-margin-top: 20px;
}
.giapha-chapter-header {
  text-align: center;
  margin-bottom: 20px;
}
.giapha-chapter-ornament {
  color: #b45309;
  font-size: 12px;
  letter-spacing: 4px;
  margin-bottom: 4px;
}
.giapha-chapter-title {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 800;
  color: #991b1b;
  margin: 0 0 4px 0;
}
.giapha-chapter-sub {
  font-size: 12px;
  color: #78716c;
  font-style: italic;
}

.giapha-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.giapha-book-card {
  background: #fff;
  border: 1px solid #e2d9c8;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}
.giapha-book-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-color: #b45309;
}
.giapha-book-card.card-deceased {
  border-left: 4px solid #78716c;
}
.giapha-book-card.card-alive {
  border-left: 4px solid #16a34a;
}

.giapha-book-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.giapha-book-avatar-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #b45309;
  background: #fef3c7;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.giapha-book-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.giapha-avatar-fallback-svg {
  width: 38px;
  height: 38px;
  display: block;
}
.giapha-book-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.giapha-badge-gen {
  background: #fee2e2;
  color: #991b1b;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}
.giapha-badge-branch {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}
.giapha-badge-status {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}
.badge-deceased { background: #f5f5f4; color: #57534e; }
.badge-alive { background: #dcfce7; color: #166534; }

.giapha-book-name {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 800;
  color: #1c1917;
  margin: 0 0 2px 0;
}
.giapha-book-courtesy {
  font-size: 12px;
  color: #78716c;
  font-style: italic;
  margin-bottom: 6px;
}
.giapha-book-title-tag {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  display: inline-block;
}

.giapha-book-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: #44403c;
  border-top: 1px solid #f0e9dc;
  padding-top: 10px;
  margin-top: 6px;
}
.meta-item {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.meta-label {
  color: #78716c;
  font-weight: 600;
  min-width: 80px;
  flex-shrink: 0;
}
.meta-val {
  color: #1c1917;
}
.meta-item.highlight-anniv {
  background: #fff1f2;
  border-radius: 4px;
  padding: 4px 6px;
  border-left: 2px solid #991b1b;
}
.color-crimson { color: #991b1b !important; }
.color-green { color: #166534 !important; }

.giapha-book-bio-box {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #e2d9c8;
}
.bio-label {
  font-size: 10px;
  font-weight: 700;
  color: #b45309;
  text-transform: uppercase;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 0.5px;
}
.bio-text {
  font-family: Georgia, serif;
  font-size: 12px;
  color: #57534e;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

/* ========================================================
   SHORTCODE 3: LỊCH GIỖ & SỰ KIỆN TỘC (EVENTS VIEW)
   ======================================================== */
.giapha-event-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e2d7c5;
  padding-bottom: 12px;
}
.giapha-event-tab {
  background: #fff;
  border: 1px solid #d4c5b0;
  color: #57534e;
  padding: 6px 14px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.giapha-event-tab:hover {
  background: #f5ede2;
  color: #1c1917;
}
.giapha-event-tab.active {
  background: #991b1b;
  border-color: #7f1d1d;
  color: #fff;
  box-shadow: 0 2px 6px rgba(153, 27, 27, 0.25);
}

.giapha-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}
.giapha-event-card {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid #e2d9c8;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
}
.giapha-event-card:hover {
  transform: translateY(-2px);
  border-color: #b45309;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.giapha-lunar-plate {
  background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
  color: #fff;
  text-align: center;
  padding: 10px 8px;
  border-radius: 6px;
  min-width: 95px;
  height: fit-content;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(153, 27, 27, 0.3);
  border: 1px solid #b91c1c;
}
.lunar-tag-top {
  font-size: 9px;
  font-weight: 800;
  color: #fde68a;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 4px;
}
.lunar-date-num {
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4px;
}
.solar-preview-badge {
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 9px;
  color: #fef3c7;
}

.giapha-event-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.giapha-event-head {
  margin-bottom: 8px;
}
.giapha-type-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.badge-death { background: #fee2e2; color: #991b1b; }
.badge-gathering { background: #fef3c7; color: #92400e; }
.badge-longevity { background: #dcfce7; color: #166534; }
.badge-festival { background: #e0e7ff; color: #3730a3; }
.badge-general { background: #f5f5f4; color: #57534e; }

.giapha-event-title {
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 800;
  color: #1c1917;
  margin: 0;
  line-height: 1.35;
}
.giapha-event-meta-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: #57534e;
  margin: 6px 0;
}
.event-meta-row {
  display: flex;
  gap: 5px;
  align-items: baseline;
}
.meta-icon {
  font-size: 12px;
  flex-shrink: 0;
}
.giapha-event-desc {
  font-size: 12px;
  color: #44403c;
  line-height: 1.5;
  margin: 6px 0;
  background: #faf8f5;
  padding: 6px 8px;
  border-radius: 4px;
  border-left: 2px solid #d4c5b0;
}
.giapha-event-foot {
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid #f4ece1;
}
.foot-notice {
  font-size: 10px;
  color: #b45309;
  font-style: italic;
  font-weight: 600;
}

/* ========================================================
   SHORTCODE 4: QUỸ DÒNG HỌ & BẢNG VÀNG (FUND VIEW)
   ======================================================== */
.giapha-fund-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.giapha-fund-kpi-card {
  background: #fff;
  border: 1px solid #e2d9c8;
  border-radius: 8px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.kpi-income { border-top: 4px solid #16a34a; }
.kpi-expense { border-top: 4px solid #dc2626; }
.kpi-balance { border-top: 4px solid #b45309; background: #fffdf9; }

.kpi-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #f4ece1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.kpi-body {
  flex: 1;
}
.kpi-label {
  font-size: 11px;
  color: #78716c;
  font-weight: 600;
  display: block;
}
.kpi-val {
  font-size: 20px;
  font-weight: 800;
  color: #1c1917;
  margin: 2px 0;
}
.text-gold { color: #b45309 !important; }
.kpi-currency {
  font-size: 12px;
  font-weight: 600;
  color: #78716c;
}
.kpi-sub {
  font-size: 11px;
  color: #a8a29e;
  display: block;
}

.giapha-fund-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e2d9c8;
  padding-bottom: 10px;
}
.giapha-fund-tab-btn {
  background: #fff;
  border: 1px solid #d4c5b0;
  color: #57534e;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.giapha-fund-tab-btn:hover {
  background: #f5ede2;
}
.giapha-fund-tab-btn.active {
  background: #991b1b !important;
  border-color: #7f1d1d !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(153, 27, 27, 0.25);
}
.giapha-fund-tab-panel {
  display: none;
}
.giapha-fund-tab-panel.active {
  display: block !important;
}

.giapha-merits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.giapha-merit-card {
  background: linear-gradient(180deg, #fff 0%, #fffdf8 100%);
  border: 2px solid #fde68a;
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  position: relative;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.08);
  transition: all 0.2s ease;
}
.giapha-merit-card:hover {
  transform: translateY(-2px);
  border-color: #d97706;
  box-shadow: 0 6px 18px rgba(180, 83, 9, 0.15);
}
.merit-crest {
  font-size: 10px;
  letter-spacing: 2px;
  color: #b45309;
  font-weight: 800;
  margin-bottom: 4px;
}
.giapha-merit-rank {
  font-size: 11px;
  font-weight: 700;
  color: #991b1b;
  display: block;
  margin-bottom: 6px;
}
.giapha-merit-donor {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 800;
  color: #1c1917;
  margin: 0 0 4px 0;
}
.giapha-merit-branch {
  font-size: 11px;
  color: #78716c;
  margin-bottom: 10px;
}
.giapha-merit-amount {
  font-size: 19px;
  font-weight: 800;
  color: #991b1b;
  margin: 8px 0;
}
.giapha-merit-purpose {
  font-size: 12px;
  color: #57534e;
  background: #fef9c3;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px dashed #fde047;
  margin-top: 8px;
}

.giapha-ledger-table-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #e2d9c8;
  border-radius: 8px;
}
.giapha-ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.giapha-ledger-table th {
  background: #f4ece1;
  color: #44403c;
  font-weight: 700;
  padding: 12px 14px;
  border-bottom: 2px solid #d4c5b0;
  text-align: left;
}
.giapha-ledger-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f0e9dc;
}
.giapha-ledger-table tr:hover {
  background: #fdfbf7;
}
.ledger-receipt-tag {
  background: #f5f5f4;
  border: 1px solid #d6d3d1;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-family: monospace;
}
.giapha-tx-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}
.tx-inc { background: #dcfce7; color: #166534; }
.tx-exp { background: #fee2e2; color: #991b1b; }

.giapha-fund-cta-box {
  margin-top: 24px;
  background: #fff;
  border: 2px dashed #b45309;
  border-radius: 8px;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.cta-left h4 {
  margin: 0 0 4px 0;
  color: #991b1b;
  font-size: 15px;
}
.cta-left p {
  margin: 0;
  font-size: 12px;
  color: #57534e;
}
.bank-pill {
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
}
.bank-pill strong {
  font-size: 14px;
  color: #991b1b;
}

/* ========================================================
   SHORTCODE 5: ĐỀ XUẤT CẬP NHẬT PHẢ HỆ (PROPOSAL VIEW)
   ======================================================== */
.giapha-proposal-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 24px;
}
@media (max-width: 820px) {
  .giapha-proposal-layout { grid-template-columns: 1fr; }
}

.giapha-guide-card {
  background: #fff;
  border: 1px solid #e2d9c8;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.giapha-guide-card h4 {
  margin: 0 0 16px 0;
  color: #991b1b;
  font-size: 15px;
  border-bottom: 2px solid #b45309;
  padding-bottom: 8px;
}
.giapha-step-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.giapha-step-item {
  display: flex;
  gap: 12px;
}
.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #991b1b;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-desc strong {
  font-size: 13px;
  color: #1c1917;
  display: block;
}
.step-desc p {
  font-size: 12px;
  color: #78716c;
  margin: 2px 0 0 0;
  line-height: 1.4;
}
.giapha-secure-promise {
  margin-top: 20px;
  padding: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  color: #166534;
}

.giapha-form-royal {
  background: #fff;
  border: 1px solid #e2d9c8;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.giapha-form-head {
  border-bottom: 1px solid #e2d9c8;
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.giapha-form-head h3 {
  margin: 0 0 4px 0;
  color: #991b1b;
  font-size: 16px;
}
.giapha-form-head span {
  font-size: 11px;
  color: #a8a29e;
}
.label-hint {
  font-weight: normal;
  color: #78716c;
  font-size: 11px;
}
.giapha-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4c5b0;
  border-radius: 5px;
  font-size: 13px;
  box-sizing: border-box;
  font-family: inherit;
  background: #fff;
}
.giapha-textarea:focus, .giapha-form-royal input:focus, .giapha-form-royal select:focus {
  outline: none;
  border-color: #b45309;
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.15);
}
.giapha-submit-btn-royal {
  background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
  color: #fff;
  border: 1px solid #7f1d1d;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 3px 8px rgba(153, 27, 27, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.giapha-submit-btn-royal:hover {
  background: #7f1d1d;
  box-shadow: 0 5px 15px rgba(153, 27, 27, 0.35);
}

/* ========================================================
   SHORTCODE 6: TRA CỨU TIỀN NHÂN (SEARCH VIEW)
   ======================================================== */
.giapha-search-filter-bar {
  display: flex;
  gap: 10px;
  background: #f5ede2;
  border: 1px solid #e2d7c5;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.search-main-input-wrap {
  position: relative;
  flex: 1;
  min-width: 250px;
  display: flex;
  align-items: center;
}
.search-icon-symbol {
  position: absolute;
  left: 12px;
  color: #78716c;
  font-size: 14px;
  pointer-events: none;
}
.giapha-search-input {
  width: 100%;
  padding: 9px 36px 9px 36px;
  border: 1px solid #d4c5b0;
  border-radius: 5px;
  font-size: 13px;
  background: #fff;
  box-sizing: border-box;
}
.giapha-search-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  font-size: 16px;
  color: #78716c;
  cursor: pointer;
}
.search-select-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.giapha-search-select {
  padding: 8px 12px;
  border: 1px solid #d4c5b0;
  border-radius: 5px;
  font-size: 12px;
  background: #fff;
  color: #44403c;
  cursor: pointer;
}
.giapha-search-counter-bar {
  font-size: 12px;
  color: #78716c;
  margin-bottom: 16px;
  padding: 4px 6px;
}
.giapha-search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}
.giapha-search-card {
  background: #fff;
  border: 1px solid #e2d9c8;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.giapha-search-card:hover {
  transform: translateY(-2px);
  border-color: #b45309;
  box-shadow: 0 5px 16px rgba(0,0,0,0.08);
}
.search-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.search-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #b45309;
  background: #fef3c7;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.search-avatar-svg {
  width: 36px;
  height: 36px;
  display: block;
}
.search-badges-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.badge-dec { background: #f5f5f4; color: #57534e; }
.badge-alv { background: #dcfce7; color: #166534; }

.search-card-name {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 800;
  color: #1c1917;
  margin: 0 0 2px 0;
}
.search-card-courtesy {
  font-size: 12px;
  color: #78716c;
  font-style: italic;
  margin-bottom: 4px;
}
.search-card-title {
  font-size: 11px;
  color: #b45309;
  font-weight: 700;
  margin-bottom: 8px;
}
.search-meta-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #57534e;
  border-top: 1px solid #f4ece1;
  padding-top: 8px;
  margin-top: 6px;
}
.search-meta-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.btn-search-detail {
  margin-top: 12px;
  background: #f5ede2;
  border: 1px solid #d4c5b0;
  color: #78350f;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: all 0.15s ease;
}
.btn-search-detail:hover {
  background: #991b1b;
  border-color: #7f1d1d;
  color: #fff;
}
.giapha-search-empty-state {
  text-align: center;
  padding: 40px 20px;
  background: #fff;
  border: 1px dashed #d4c5b0;
  border-radius: 8px;
  grid-column: 1 / -1;
}
.empty-icon { font-size: 32px; display: block; margin-bottom: 8px; }

/* ========================================================
   SHORTCODE 7: LƯỢC SỬ CÁC CHI PHÁI (BRANCHES VIEW)
   ======================================================== */
.giapha-branches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
}
.giapha-branch-card-royal {
  background: #fff;
  border: 1px solid #e2d9c8;
  border-top: 4px solid #991b1b;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.giapha-branch-card-royal:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.branch-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.branch-emblem-wrap {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fef3c7;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.branch-card-name {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 800;
  color: #1c1917;
  margin: 0;
}
.branch-card-kicker {
  font-size: 11px;
  color: #78716c;
  display: block;
}
.branch-leader-box {
  background: #faf8f5;
  border: 1px solid #f0e9dc;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.leader-icon { font-size: 16px; }
.leader-title { font-size: 11px; color: #78716c; display: block; }
.leader-name { font-size: 13px; font-weight: 700; color: #1c1917; }

.branch-stats-strip {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.stat-pill {
  flex: 1;
  background: #f5ede2;
  border-radius: 4px;
  padding: 6px 8px;
  text-align: center;
}
.stat-num {
  font-size: 14px;
  font-weight: 800;
  color: #78350f;
  display: block;
}
.stat-txt {
  font-size: 10px;
  color: #78716c;
  text-transform: uppercase;
}
.branch-card-desc {
  font-size: 12px;
  color: #57534e;
  line-height: 1.5;
  margin-bottom: 14px;
}
.branch-card-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed #e2d9c8;
}
.foot-tag {
  font-size: 11px;
  font-weight: 700;
}

/* Enhanced Toolbar & Buttons */
.giapha-clan-brand { display: flex; align-items: center; gap: 10px; }
.giapha-clan-sub { font-size: 11px; opacity: 0.85; display: block; letter-spacing: 1px; color: #fef3c7; }
.giapha-btn-gold { background: linear-gradient(135deg, #b45309 0%, #d97706 100%); color: #fff; border: 1px solid #f59e0b; padding: 6px 14px; border-radius: 5px; cursor: pointer; font-weight: 600; font-size: 12px; }
.giapha-btn-gold:hover { background: #92400e; }
.giapha-btn-toggle { background: #e7dfd5; border: 1px solid #d4c5b0; color: #44403c; padding: 6px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; }
.giapha-btn-toggle:hover { background: #dad0c2; }
.giapha-btn-sm { background: #fff; border: 1px solid #d4c5b0; color: #44403c; padding: 6px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; }
.giapha-btn-sm:hover { background: #f5f0e8; }
/* Icon-only tree toolbar controls with native tooltip and accessible labels */
.giapha-quick-actions { display: flex; align-items: center; gap: 8px; }
.giapha-icon-btn { width: 38px; height: 36px; min-width: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; border-radius: 7px; }
.giapha-icon-btn span { display: inline-flex; align-items: center; justify-content: center; }
.giapha-icon-btn:focus-visible { outline: 3px solid #d97706; outline-offset: 2px; }
@media (max-width: 600px) { .giapha-quick-actions { gap: 6px; } .giapha-icon-btn { width: 40px; height: 40px; min-width: 40px; } }


/* Smart Search Bar & Autocomplete */
.giapha-search-wrap { position: relative; flex: 1; min-width: 240px; display: flex; align-items: center; }
.giapha-search-icon { position: absolute; left: 10px; color: #78716c; font-size: 13px; pointer-events: none; }
.giapha-search-wrap .giapha-input { width: 100%; padding-left: 32px; padding-right: 28px; }
.giapha-clear-btn { position: absolute; right: 8px; background: none; border: none; font-size: 16px; color: #78716c; cursor: pointer; padding: 0 4px; }
.giapha-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #d4c5b0; border-radius: 6px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); max-height: 340px; overflow-y: auto; z-index: 1000; margin-top: 4px; }
.giapha-search-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f4ece1; cursor: pointer; transition: background 0.15s; }
.giapha-search-item:hover { background: #fef9c3; }
.giapha-search-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid #d4c5b0; flex-shrink: 0; }
.giapha-search-info { flex: 1; font-size: 13px; }
.giapha-search-name { font-weight: 600; color: #1c1917; }
.giapha-search-sub { font-size: 11px; color: #78716c; }
.giapha-search-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.badge-gen { background: #fee2e2; color: #991b1b; }
.badge-branch { background: #fef3c7; color: #92400e; }
.giapha-search-empty { padding: 16px; text-align: center; color: #78716c; font-size: 13px; font-style: italic; }

/* Filter Group & Quick Actions */
.giapha-filter-group { display: flex; gap: 6px; align-items: center; }
.giapha-quick-actions { display: flex; gap: 6px; margin-left: auto; }

/* Tree Canvas & Hierarchy Nodes */
.giapha-canvas { display: inline-flex; flex-direction: column; align-items: center; min-width: 100%; padding: 40px; box-sizing: border-box; transition: transform 0.2s ease; transform-origin: center top; }
.giapha-tree-root { display: flex; flex-direction: column; align-items: center; }
.tree-node-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; margin: 0 12px; }
.tree-card { background: #fff; border: 2px solid #d4c5b0; border-radius: 10px; padding: 10px 14px; min-width: 170px; max-width: 210px; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.06); cursor: pointer; position: relative; transition: all 0.2s ease; z-index: 2; }
.tree-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); border-color: #991b1b; }
.tree-card.deceased { border-top: 4px solid #78716c; background: #fafaf9; }
.tree-card.alive { border-top: 4px solid #16a34a; background: #fff; }
.tree-card.male { border-left-color: #2563eb; }
.tree-card.female { border-left-color: #db2777; }
.tree-card.active-target { animation: giapha-pulse-gold 1.5s infinite; border-color: #f59e0b !important; box-shadow: 0 0 20px rgba(245, 158, 11, 0.6) !important; }
@keyframes giapha-pulse-gold { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

.tree-card.node-dimmed { opacity: 0.22; filter: grayscale(90%); }
.tree-card.node-hidden { display: none !important; }

/* Ancestor Avatar Silhouette & Image Wrapper */
.node-avatar-wrap {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 6px;
  border: 2px solid #b45309;
  background: #fef3c7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.node-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.node-avatar-svg {
  width: 34px;
  height: 34px;
  display: block;
}
.node-avatar-wrap img + .node-avatar-svg {
  display: none;
}

.node-title { font-weight: 700; font-size: 13px; color: #1c1917; margin: 2px 0; }
.node-courtesy { font-size: 11px; color: #78716c; font-style: italic; }
.node-meta-row { display: flex; justify-content: center; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.node-gen-badge { background: #fee2e2; color: #991b1b; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.node-status-tag { font-size: 10px; padding: 2px 5px; border-radius: 3px; }
.status-deceased { background: #f5f5f4; color: #57534e; }
.status-alive { background: #dcfce7; color: #166534; }
.node-dates { font-size: 10px; color: #a8a29e; margin-top: 4px; }

/* Admin Direct Edit Hint on Card */
.node-edit-hint {
  display: inline-block;
  font-size: 10px;
  color: #b45309;
  font-weight: 700;
  margin-top: 5px;
  background: #fef3c7;
  border: 1px dashed #d97706;
  border-radius: 3px;
  padding: 2px 6px;
  transition: all 0.2s;
}
.node-edit-hint:hover {
  background: #b45309;
  color: #fff;
}

/* Children Connector Lines - Grand Viet Imperial Tree Architecture */
.tree-stem-down {
  width: 2px !important;
  height: 24px !important;
  background: #b45309 !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
}
.tree-stem-line-v {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 2px !important;
  height: 100% !important;
  background: #b45309 !important;
  z-index: 2 !important;
  display: block !important;
}
.tree-collapse-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #991b1b !important;
  color: #fef3c7 !important;
  border: 2px solid #fff !important;
  font-size: 12px !important;
  line-height: 16px !important;
  text-align: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  font-weight: bold !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
  padding: 0 !important;
}
.tree-children-container {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}
.tree-child-col {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 24px 14px 0 14px !important;
}

/* Thẻ DOM kết nối thực tế - Chống xung đột CSS theme WordPress 100% */
.tree-connector-h {
  position: absolute !important;
  top: 0 !important;
  height: 2px !important;
  background: #b45309 !important;
  z-index: 2 !important;
  display: block !important;
}
.tree-connector-h-first {
  left: 50% !important;
  width: 50% !important;
}
.tree-connector-h-last {
  left: 0 !important;
  width: 50% !important;
}
.tree-connector-h-mid {
  left: 0 !important;
  width: 100% !important;
}
.tree-connector-v {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 2px !important;
  height: 24px !important;
  background: #b45309 !important;
  z-index: 2 !important;
  display: block !important;
}

/* Fallback bằng Pseudo elements ::before và ::after */
.tree-child-col::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 2px !important;
  height: 24px !important;
  background: #b45309 !important;
  z-index: 2 !important;
  display: block !important;
}
.tree-child-col::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: #b45309 !important;
  z-index: 2 !important;
  display: block !important;
}
.tree-child-col:first-child::after {
  left: 50% !important;
  width: 50% !important;
}
.tree-child-col:last-child::after {
  width: 50% !important;
  left: 0 !important;
}
.tree-child-col:only-child::after {
  display: none !important;
}

/* Directory Drawer */
.giapha-directory-drawer { position: absolute; top: 60px; right: 0; bottom: 0; width: 320px; background: #fff; border-left: 2px solid #e2d9c8; box-shadow: -6px 0 20px rgba(0,0,0,0.1); z-index: 100; overflow-y: auto; padding: 18px; }
.giapha-drawer-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #991b1b; padding-bottom: 10px; margin-bottom: 14px; }
.giapha-drawer-header h4 { margin: 0; color: #991b1b; font-size: 14px; }
.giapha-dir-gen-title { font-size: 11px; font-weight: 700; color: #b45309; text-transform: uppercase; margin: 12px 0 6px; letter-spacing: 0.5px; }
.giapha-dir-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 12px; }
.giapha-dir-item:hover { background: #fef9c3; }

/* Modal General */
.giapha-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.giapha-modal-dialog { background: #fff; border-radius: 10px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 15px 40px rgba(0,0,0,0.3); border: 1px solid #d4c5b0; }
.giapha-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #991b1b; color: #fff; border-radius: 10px 10px 0 0; }
.giapha-modal-head h4 { margin: 0; font-size: 16px; color: #fef3c7; }
.giapha-close-btn { background: none; border: none; font-size: 22px; color: #fff; cursor: pointer; line-height: 1; }
.giapha-modal-body { padding: 20px; font-size: 13px; line-height: 1.6; }

/* Gathering Quick Scan & Projector Modal */
.giapha-gathering-modal-overlay { position: fixed; inset: 0; background: rgba(12, 10, 9, 0.96); z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(8px); }
.giapha-gathering-modal-box { background: linear-gradient(180deg, #1c1917, #0c0a09); border: 4px solid #b45309; border-radius: 20px; max-width: 620px; width: 100%; padding: 28px 24px; text-align: center; color: #fff; box-shadow: 0 25px 60px rgba(0,0,0,0.8); position: relative; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.giapha-gathering-top-badge { display: inline-block; padding: 4px 16px; background: rgba(180, 83, 9, 0.3); border: 1px solid #d97706; border-radius: 20px; font-size: 11px; font-weight: 700; color: #fde68a; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.giapha-gathering-member-bar { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.05); padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 18px; text-align: left; }
.giapha-gathering-qr-wrap { background: #fff; padding: 14px; border-radius: 16px; border: 4px solid #b45309; display: inline-block; box-shadow: 0 10px 30px rgba(0,0,0,0.5); margin-bottom: 16px; }
.giapha-gathering-qr-img { width: 260px; height: 260px; display: block; object-fit: contain; }
.giapha-gathering-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.giapha-gathering-btn-gold { padding: 9px 18px; background: linear-gradient(135deg, #d97706, #b45309); color: #fff; border: none; border-radius: 6px; font-weight: 700; font-size: 12px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.giapha-gathering-btn-gray { padding: 9px 14px; background: rgba(255,255,255,0.1); color: #e7e5e4; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

/* Traditional Portrait Placeholder & Presets */
.giapha-trad-portrait-box { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 2px dashed #b45309; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.giapha-trad-preset-btn { padding: 5px 10px; font-size: 11px; font-weight: 600; border-radius: 4px; border: 1px solid #b45309; background: #fff; color: #92400e; cursor: pointer; transition: all 0.2s; }
.giapha-trad-preset-btn:hover { background: #b45309; color: #fff; }

/* SOLEMN GENEALOGY PDF MODAL & CANVAS (#solemn-genealogy-pdf-canvas) */
.giapha-pdf-modal-container { background: #292524; width: 96vw; height: 94vh; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
.giapha-pdf-modal-toolbar { display: flex; justify-content: space-between; align-items: center; background: #1c1917; padding: 12px 20px; border-bottom: 2px solid #b45309; color: #f5f5f4; flex-wrap: wrap; gap: 10px; }
.giapha-pdf-toolbar-left, .giapha-pdf-toolbar-right { display: flex; align-items: center; gap: 12px; }
.giapha-pdf-badge { font-weight: 700; color: #fbbf24; font-size: 12px; letter-spacing: 1px; }
.giapha-pdf-paper-label { font-size: 12px; color: #d6d3d1; }
.giapha-pdf-scale-wrap { display: flex; align-items: center; gap: 8px; }
.giapha-scale-text { font-size: 12px; color: #fbbf24; font-weight: 600; min-width: 40px; }
.giapha-checkbox-label { font-size: 12px; color: #e7e5e4; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.giapha-pdf-preview-scroller { flex: 1; overflow: auto; padding: 30px; background: #44403c; display: flex; justify-content: center; }

#solemn-genealogy-pdf-canvas {
  --tree-print-scale: 0.82;
  --tree-print-scale-a4: 0.62;
  --tree-print-scale-a3: 0.85;
  background: #fffdfa;
  border: 6px double #78350f;
  padding: 30px 40px;
  width: 1400px;
  max-width: none;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  position: relative;
  box-sizing: border-box;
}

.solemn-pdf-header { text-align: center; border-bottom: 2px solid #b45309; padding-bottom: 18px; margin-bottom: 20px; position: relative; }
.solemn-header-ribbon { font-size: 11px; letter-spacing: 2px; color: #991b1b; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; }
.solemn-header-main { display: flex; align-items: center; justify-content: space-between; }
.solemn-header-titles { flex: 1; padding: 0 20px; }
.solemn-title-ancient { font-family: Georgia, serif; font-size: 26px; color: #78350f; margin: 0 0 4px; letter-spacing: 1.5px; font-weight: 800; }
.solemn-clan-name { font-family: Georgia, serif; font-size: 22px; color: #991b1b; margin: 0 0 6px; }
.solemn-clan-motto { font-style: italic; color: #78716c; font-size: 13px; margin: 0 0 8px; }
.solemn-date-badge { font-size: 11px; color: #b45309; font-weight: 600; }

.solemn-crest-stamp { width: 72px; height: 72px; border: 3px solid #b91c1c; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 4px; box-sizing: border-box; flex-shrink: 0; background: #fff5f5; }
.seal-inner { border: 1px dashed #b91c1c; border-radius: 50%; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #b91c1c; font-weight: 800; font-size: 9px; line-height: 1.2; text-align: center; }

.solemn-pdf-body { position: relative; min-height: 500px; display: flex; justify-content: center; padding: 20px 0; }
.solemn-central-watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 280px; font-family: Georgia, serif; color: rgba(180, 83, 9, 0.05); user-select: none; pointer-events: none; z-index: 0; font-weight: bold; }
.solemn-pdf-tree-content { position: relative; z-index: 1; width: 100%; display: flex; justify-content: center; }

.solemn-pdf-footer { border-top: 2px solid #b45309; padding-top: 18px; margin-top: 20px; display: flex; justify-content: space-between; align-items: flex-end; }
.solemn-footer-notes { max-width: 600px; font-size: 12px; color: #57534e; }
.solemn-footer-notes p { margin: 0 0 6px; }
.solemn-footer-date { font-size: 11px; color: #78716c; font-style: italic; }
.solemn-footer-stamps { display: flex; gap: 30px; }
.solemn-signature-box { text-align: center; min-width: 140px; }
.sig-title { font-size: 11px; font-weight: 700; color: #78350f; display: block; margin-bottom: 8px; }
.sig-seal-placeholder { width: 70px; height: 70px; border: 2px dashed #b91c1c; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #b91c1c; font-size: 9px; font-style: italic; background: #fff5f5; }

/* REFINED PRINT MEDIA QUERY FOR #solemn-genealogy-pdf-canvas */
@media print {
  @page {
    size: landscape;
    margin: 4mm 6mm;
  }
  body * {
    visibility: hidden !important;
  }
  #solemn-genealogy-pdf-modal,
  #solemn-genealogy-pdf-modal .giapha-pdf-preview-scroller,
  #solemn-genealogy-pdf-canvas,
  #solemn-genealogy-pdf-canvas * {
    visibility: visible !important;
  }
  .no-print, .giapha-pdf-modal-toolbar {
    display: none !important;
  }
  #solemn-genealogy-pdf-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 9999999 !important;
  }
  .giapha-pdf-preview-scroller {
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  #solemn-genealogy-pdf-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: 4px double #78350f !important;
    transform-origin: top left !important;
    transform: scale(var(--tree-print-scale, 0.75)) !important;
    zoom: var(--tree-print-scale, 0.75) !important;
    page-break-inside: avoid !important;
  }
  @media (max-width: 297mm) {
    #solemn-genealogy-pdf-canvas {
      transform: scale(var(--tree-print-scale-a4, 0.62)) !important;
      zoom: var(--tree-print-scale-a4, 0.62) !important;
    }
  }
  @media (min-width: 298mm) and (max-width: 420mm) {
    #solemn-genealogy-pdf-canvas {
      transform: scale(var(--tree-print-scale-a3, 0.85)) !important;
      zoom: var(--tree-print-scale-a3, 0.85) !important;
    }
  }
}

/* ========================================================
   SHORTCODE 8: BẢNG THỐNG KÊ & CHỈ SỐ DÒNG TỘC (DASHBOARD)
   ======================================================== */
.viet-giapha-dashboard-container {
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #1c1917 !important;
  background: #faf8f5 !important;
  border: 1px solid #e7e0d3 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin: 20px auto !important;
  max-width: 1280px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
  line-height: 1.5 !important;
  text-align: left !important;
  clear: both !important;
}
.viet-giapha-dashboard-container * {
  box-sizing: border-box !important;
}
.giapha-dash-header {
  background: linear-gradient(180deg, #fffdfa 0%, #faf5ed 100%) !important;
  border: 1px solid #e7dfd3 !important;
  border-bottom: 3px solid #b45309 !important;
  border-radius: 10px !important;
  padding: 24px 20px 20px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  text-align: center !important;
}
.giapha-dash-kicker {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  color: #991b1b !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.giapha-dash-title {
  font-family: Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #7f1d1d !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: 0.5px !important;
}
.giapha-dash-subtitle {
  font-style: italic !important;
  color: #78716c !important;
  font-size: 13px !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}
.giapha-metrics-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 992px) {
  .giapha-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .giapha-metrics-grid { grid-template-columns: 1fr !important; }
}
.giapha-metric-card {
  background: #ffffff !important;
  border: 1px solid #e2d9c8 !important;
  border-radius: 10px !important;
  padding: 18px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 130px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.giapha-metric-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06) !important;
}
.giapha-metric-card.border-red { border-top: 4px solid #991b1b !important; }
.giapha-metric-card.border-amber { border-top: 4px solid #b45309 !important; }
.giapha-metric-card.border-green { border-top: 4px solid #059669 !important; }
.giapha-metric-card.border-blue { border-top: 4px solid #0284c7 !important; }
.giapha-metric-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #78716c !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.giapha-metric-value {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #1c1917 !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.giapha-metric-value .giapha-unit {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #78716c !important;
}
.giapha-metric-value .color-male { color: #991b1b !important; font-size: 16px !important; font-weight: 700 !important; }
.giapha-metric-value .color-female { color: #e11d48 !important; font-size: 16px !important; font-weight: 700 !important; }
.giapha-metric-value .color-deceased { color: #475569 !important; font-size: 16px !important; font-weight: 700 !important; }
.giapha-metric-value .color-alive { color: #059669 !important; font-size: 16px !important; font-weight: 700 !important; }
.giapha-metric-sub {
  font-size: 11px !important;
  color: #a8a29e !important;
  border-top: 1px solid #f5f5f4 !important;
  padding-top: 6px !important;
  margin-top: 4px !important;
}
.giapha-progress-bar {
  display: flex !important;
  height: 8px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #f5f5f4 !important;
  margin-top: 8px !important;
  width: 100% !important;
}
.giapha-progress-bar > div { height: 100% !important; transition: width 0.4s ease !important; }
.giapha-dash-sections {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 860px) {
  .giapha-dash-sections { grid-template-columns: 1fr !important; }
}
.giapha-dash-panel {
  background: #ffffff !important;
  border: 1px solid #e7dfd3 !important;
  border-radius: 10px !important;
  padding: 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}
.giapha-dash-panel h3 {
  font-family: Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #7f1d1d !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f4ece1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.giapha-gen-bars {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.giapha-gen-bar-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 12px !important;
}
.giapha-gen-label {
  width: 90px !important;
  font-weight: 700 !important;
  color: #44403c !important;
  flex-shrink: 0 !important;
}
.giapha-bar-track {
  flex: 1 !important;
  height: 22px !important;
  background: #f4ede3 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  border: 1px solid #e8decb !important;
  display: flex !important;
  align-items: center !important;
}
.giapha-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #991b1b, #b45309) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px !important;
  white-space: nowrap !important;
  border-radius: 5px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.giapha-elders-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.giapha-elder-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  background: #faf8f5 !important;
  border: 1px solid #e7e0d3 !important;
  border-radius: 8px !important;
  gap: 12px !important;
}
.giapha-elder-item strong { color: #1c1917 !important; font-size: 13px !important; }
.giapha-elder-item .text-muted { font-size: 11px !important; color: #78716c !important; margin-top: 2px !important; }
.giapha-age-badge {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  flex-shrink: 0 !important;
}
.giapha-branches-summary {
  background: #ffffff !important;
  border: 1px solid #e7dfd3 !important;
  border-radius: 10px !important;
  padding: 20px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}
.giapha-branches-summary h3 {
  font-family: Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #7f1d1d !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f4ece1 !important;
}
.giapha-branches-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 14px !important;
}
.giapha-branch-card {
  background: #faf8f5 !important;
  border: 1px solid #e2d9c8 !important;
  border-radius: 8px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.giapha-branch-card h4 {
  font-family: Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1c1917 !important;
  margin: 0 !important;
}
.giapha-branch-leader { font-size: 11px !important; color: #78716c !important; margin: 0 !important; }
.giapha-branch-card .color-primary { font-size: 13px !important; font-weight: 800 !important; color: #991b1b !important; }

/* BEIT Gia Pha 2.5.2: stable wide-tree layout */
#viet-giapha-app .giapha-viewport{position:relative!important;display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;isolation:isolate}
#viet-giapha-app #giapha-canvas{display:block!important;width:max-content!important;min-width:100%!important;min-height:100%!important;padding:36px 48px 56px!important;transform-origin:top center!important}
#viet-giapha-app .giapha-tree-root{display:flex!important;flex-direction:column!important;align-items:center!important;width:max-content!important;min-width:100%!important;flex:0 0 auto!important}
#viet-giapha-app .tree-node-wrapper,#viet-giapha-app .tree-child-col{flex:0 0 auto!important;min-width:max-content!important}
#viet-giapha-app .tree-children-container{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:flex-start!important;justify-content:center!important;width:max-content!important;min-width:max-content!important;flex:0 0 auto!important}
#viet-giapha-app .tree-child-col{width:max-content!important;padding-left:12px!important;padding-right:12px!important}
#viet-giapha-app .tree-card{flex:0 0 auto!important;width:190px!important;min-width:170px!important;max-width:210px!important;overflow-wrap:anywhere;word-break:normal}
#viet-giapha-app .tree-node-wrapper-cycle{display:none!important}
@media(max-width:767px){#viet-giapha-app{padding:12px!important}#viet-giapha-app .giapha-viewport{height:min(68vh,620px)!important}#viet-giapha-app #giapha-canvas{padding:24px 24px 40px!important}#viet-giapha-app .giapha-header-bar{flex-wrap:wrap!important;gap:10px!important}#viet-giapha-app .giapha-actions{display:flex!important;flex-wrap:wrap!important;gap:6px!important}#viet-giapha-app .giapha-actions .giapha-btn{margin-left:0!important}#viet-giapha-app .giapha-toolbar{flex-wrap:wrap!important}#viet-giapha-app .giapha-quick-actions{margin-left:0!important;flex-wrap:wrap!important}}


/* BEIT Gia Pha 2.5.3: drag-to-pan canvas, no scrollbars */
#viet-giapha-app .giapha-viewport{overflow:hidden!important;cursor:grab!important;touch-action:none!important;overscroll-behavior:none!important;-webkit-overflow-scrolling:auto!important;user-select:none!important;-webkit-user-select:none!important}
#viet-giapha-app .giapha-viewport.is-dragging{cursor:grabbing!important}
#viet-giapha-app #giapha-canvas{will-change:transform;transform-origin:top left!important;min-width:0!important;min-height:0!important}
#viet-giapha-app .giapha-viewport img{-webkit-user-drag:none;user-drag:none}
#viet-giapha-app .giapha-viewport::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
#viet-giapha-app .giapha-viewport::after{content:'Giữ chuột trái và kéo nền để di chuyển phả đồ';position:absolute;right:12px;bottom:10px;z-index:5;padding:6px 10px;border:1px solid rgba(180,83,9,.25);border-radius:20px;background:rgba(255,253,250,.9);color:#92400e;font-size:11px;line-height:1.3;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.06)}
@media(max-width:767px){#viet-giapha-app .giapha-viewport::after{content:'Chạm và kéo nền để di chuyển phả đồ';font-size:10px;right:8px;bottom:8px}}


/* BEIT Gia Pha 2.5.5: reliable tree controls; class state wins over flex !important */
#viet-giapha-app .tree-children-container.is-collapsed{display:none!important}
#viet-giapha-app .tree-children-container:not(.is-collapsed){display:flex!important}
#viet-giapha-app .tree-collapse-btn{pointer-events:auto!important;touch-action:manipulation!important}
#viet-giapha-app{position:relative!important}
#viet-giapha-app .giapha-directory-drawer{display:none;position:absolute!important;top:60px;right:0;bottom:auto!important;max-height:min(70vh,640px);z-index:1000!important;overflow:auto!important}
#viet-giapha-app .giapha-directory-drawer.is-open{display:block!important}
#viet-giapha-app .giapha-quick-actions button,#viet-giapha-app .giapha-actions button{pointer-events:auto!important;touch-action:manipulation!important}
#viet-giapha-app .giapha-viewport{z-index:1}


/* ==========================================================================
   BEIT Gia Pha 2.6.0 — Giao diện cây phả đồ mới (thanh lịch, chuyên nghiệp)
   Bảng màu: đỏ son trầm · vàng đồng · giấy dó ngà · mực nâu
   Toàn bộ icon là SVG nét mảnh (class .gp-ico), không còn emoji.
   ========================================================================== */
#viet-giapha-app{
  --gp-crimson:#8c1d1d; --gp-crimson-deep:#5f1212; --gp-gold:#c9953c; --gp-gold-light:#f3d58a;
  --gp-ivory:#fbf8f2; --gp-paper:#fffdf9; --gp-line:#e8dcc4; --gp-line-strong:#d9c7a1;
  --gp-ink:#2a1a10; --gp-muted:#8a7a63; --gp-male:#2f5d8a; --gp-female:#b0456f;
  --gp-radius:14px; --gp-shadow:0 10px 40px rgba(60,30,10,.10);
}
.gp-ico{flex-shrink:0;display:inline-block;vertical-align:middle}
@media (prefers-reduced-motion:reduce){#viet-giapha-app *,.giapha-modal-overlay *{animation:none!important;transition:none!important}}

/* ---------- Khung tổng ---------- */
#viet-giapha-app.viet-giapha-container{
  padding:0!important;overflow:hidden!important;border-radius:18px!important;
  border:1px solid var(--gp-line)!important;background:var(--gp-ivory)!important;box-shadow:var(--gp-shadow)!important;
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif!important;
}

/* ---------- Header ---------- */
#viet-giapha-app .giapha-header-bar{
  position:relative;gap:16px;padding:18px 26px;border-radius:0;color:#fff;
  background:
    radial-gradient(circle at 12% 0%,rgba(243,213,138,.20),transparent 45%),
    radial-gradient(circle at 100% 100%,rgba(0,0,0,.25),transparent 55%),
    linear-gradient(135deg,var(--gp-crimson-deep) 0%,var(--gp-crimson) 58%,#a52a2a 100%);
  box-shadow:inset 0 -3px 0 var(--gp-gold);
}
#viet-giapha-app .giapha-clan-brand{gap:14px;min-width:0}
#viet-giapha-app .giapha-emblem{
  width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  color:var(--gp-gold-light);background:rgba(255,255,255,.08);border:1px solid rgba(243,213,138,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px rgba(0,0,0,.25);
}
#viet-giapha-app .giapha-clan-logo-img{height:46px!important;max-width:84px!important;margin-right:0!important;padding:3px!important;border-radius:12px!important;border:1px solid rgba(243,213,138,.75)!important;background:#fff!important;box-shadow:0 4px 12px rgba(0,0,0,.25)!important}
#viet-giapha-app .giapha-clan-brand h3{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:1.25rem;font-weight:700;letter-spacing:.4px;line-height:1.25;color:#fff3d6;text-shadow:0 1px 2px rgba(0,0,0,.35)}
#viet-giapha-app .giapha-clan-sub{margin-top:3px;font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gp-gold-light);opacity:.92}

#viet-giapha-app .giapha-actions{display:flex;align-items:center;gap:12px}
#viet-giapha-app .giapha-zoom-group{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18)}
#viet-giapha-app .giapha-actions .giapha-btn{
  margin:0!important;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;min-width:34px;padding:0 9px;
  background:transparent!important;border:0!important;border-radius:9px!important;color:#fff!important;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s;
}
#viet-giapha-app .giapha-actions .giapha-btn:hover{background:rgba(255,255,255,.18)!important}
#viet-giapha-app .giapha-actions .giapha-btn-fit{padding:0 12px;border-left:1px solid rgba(255,255,255,.2)!important;border-radius:0 9px 9px 0!important;margin-left:3px!important}
#viet-giapha-app .giapha-btn-gold{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:11px;border:1px solid rgba(255,236,179,.8);
  background:linear-gradient(180deg,#f0c967 0%,#cf9a35 100%);color:#40210a;font-size:13px;font-weight:700;letter-spacing:.2px;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .15s,box-shadow .15s,filter .15s;
}
#viet-giapha-app .giapha-btn-gold:hover{background:linear-gradient(180deg,#f5d377,#d6a23f);transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.6)}
#viet-giapha-app .giapha-btn-gold:active{transform:translateY(0)}

/* ---------- Thanh công cụ ---------- */
#viet-giapha-app .giapha-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 22px;background:var(--gp-paper);border-bottom:1px solid var(--gp-line);
}
#viet-giapha-app .giapha-search-wrap{flex:1 1 280px;min-width:240px}
#viet-giapha-app .giapha-search-icon{left:14px;display:inline-flex;color:#a8946f}
#viet-giapha-app .giapha-toolbar .giapha-input,
#viet-giapha-app .giapha-toolbar .giapha-select{
  height:42px;border:1px solid var(--gp-line-strong);border-radius:11px;background-color:var(--gp-ivory);color:var(--gp-ink);font-size:13px;
  transition:border-color .15s,box-shadow .15s,background-color .15s;
}
#viet-giapha-app .giapha-search-wrap .giapha-input{padding:0 38px 0 40px}
#viet-giapha-app .giapha-toolbar .giapha-select{
  padding:0 34px 0 14px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a7a63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}
#viet-giapha-app .giapha-toolbar .giapha-input::placeholder{color:#a8977a}
#viet-giapha-app .giapha-toolbar .giapha-input:hover,#viet-giapha-app .giapha-toolbar .giapha-select:hover{border-color:var(--gp-gold)}
#viet-giapha-app .giapha-toolbar .giapha-input:focus,#viet-giapha-app .giapha-toolbar .giapha-select:focus{outline:0;background-color:#fff;border-color:var(--gp-gold);box-shadow:0 0 0 3px rgba(201,149,60,.22)}
#viet-giapha-app .giapha-clear-btn{right:9px;width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#8a7a63;background:#efe6d3}
#viet-giapha-app .giapha-clear-btn:hover{background:var(--gp-crimson);color:#fff}
#viet-giapha-app .giapha-filter-group{gap:8px}

#viet-giapha-app .giapha-btn-sm,#viet-giapha-app .giapha-btn-toggle{
  background:#fff;border:1px solid var(--gp-line-strong);color:#6b4a1f;border-radius:11px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
#viet-giapha-app .giapha-icon-btn{width:42px;height:42px;min-width:42px;border-radius:11px}
#viet-giapha-app .giapha-btn-sm:hover,#viet-giapha-app .giapha-btn-toggle:hover{background:#fbf3e1;border-color:var(--gp-gold);color:var(--gp-crimson)}
#viet-giapha-app .giapha-btn-toggle[aria-pressed="true"],
#viet-giapha-app #btn-toggle-directory[aria-expanded="true"]{background:var(--gp-crimson);border-color:var(--gp-crimson);color:#fff}
#viet-giapha-app .giapha-icon-btn:focus-visible,#viet-giapha-app .giapha-btn-gold:focus-visible,#viet-giapha-app .giapha-actions .giapha-btn:focus-visible{outline:3px solid rgba(201,149,60,.65);outline-offset:2px}
#viet-giapha-app .giapha-quick-actions{gap:8px;margin-left:auto}

/* Gợi ý tìm kiếm */
#viet-giapha-app .giapha-search-dropdown{border:1px solid var(--gp-line-strong);border-radius:13px;box-shadow:0 18px 40px rgba(60,30,10,.20);margin-top:6px;overflow:hidden;overflow-y:auto}
#viet-giapha-app .giapha-search-item{padding:10px 14px;border-bottom:1px solid #f3eadb}
#viet-giapha-app .giapha-search-item:last-child{border-bottom:0}
#viet-giapha-app .giapha-search-item:hover{background:#fbf3e1}
#viet-giapha-app .giapha-search-avatar{width:36px;height:36px;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--gp-gold)}
#viet-giapha-app .giapha-search-name{font-family:Georgia,serif;font-size:13.5px}
#viet-giapha-app .giapha-search-badge{padding:3px 9px;border-radius:999px;font-size:10.5px}
#viet-giapha-app .badge-gen{background:#fbeaea;color:var(--gp-crimson)}

/* ---------- Khung xem cây ---------- */
#viet-giapha-app .giapha-viewport{
  height:clamp(520px,72vh,760px)!important;
  background-color:var(--gp-ivory)!important;
  background-image:radial-gradient(rgba(150,120,70,.28) 1px,transparent 1.2px),radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.9),transparent 70%)!important;
  background-size:22px 22px,100% 100%!important;
}
#viet-giapha-app .giapha-viewport::after{
  content:'Kéo nền để di chuyển phả đồ';display:flex;align-items:center;right:14px;bottom:12px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--gp-line-strong);background:rgba(255,253,249,.94);color:#7a5a2a;font-size:11px;font-weight:600;box-shadow:0 4px 14px rgba(60,30,10,.10);
}
@media(max-width:767px){#viet-giapha-app .giapha-viewport::after{content:'Chạm và kéo nền để di chuyển'}}
.giapha-legend{position:absolute;left:14px;bottom:12px;z-index:5;display:flex;flex-wrap:wrap;gap:6px 14px;padding:8px 14px;border-radius:999px;pointer-events:none;
  background:rgba(255,253,249,.94);border:1px solid var(--gp-line-strong);box-shadow:0 4px 14px rgba(60,30,10,.10);font-size:11px;font-weight:600;color:#6b5a40}
.giapha-legend span{display:inline-flex;align-items:center;gap:6px}
.giapha-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.giapha-legend .lg-male{background:var(--gp-male,#2f5d8a)}
.giapha-legend .lg-female{background:var(--gp-female,#b0456f)}
.giapha-legend .lg-alive{background:#22a755;box-shadow:0 0 0 3px rgba(34,167,85,.18)}
.giapha-legend .lg-deceased{background:#9a9187}
@media(max-width:600px){.giapha-legend{display:none}}

.giapha-loading-notice{display:flex;flex-direction:column;align-items:center;gap:12px;padding:90px 20px;color:#8a7a63;font-size:13px}
.giapha-loading-notice p{margin:0}
.giapha-spinner{width:34px;height:34px;border-radius:50%;border:3px solid #eadfcb;border-top-color:var(--gp-crimson);animation:gp-spin .8s linear infinite}
@keyframes gp-spin{to{transform:rotate(360deg)}}

/* ---------- Thẻ thành viên ---------- */
#viet-giapha-app .tree-card{
  position:relative;padding:18px 14px 13px;border:1px solid var(--gp-line)!important;border-radius:16px;background:#fff!important;overflow:hidden;
  box-shadow:0 1px 2px rgba(60,30,10,.06),0 8px 22px rgba(60,30,10,.07);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
#viet-giapha-app .tree-card .node-ribbon{position:absolute;left:0;right:0;top:0;height:5px;background:var(--gp-male)}
#viet-giapha-app .tree-card.female .node-ribbon{background:var(--gp-female)}
#viet-giapha-app .tree-card.deceased{background:linear-gradient(180deg,#fcfaf6,#f6f1e8)!important}
#viet-giapha-app .tree-card.deceased .node-ribbon{filter:saturate(.35) brightness(1.05)}
#viet-giapha-app .tree-card.deceased .node-avatar-wrap{filter:saturate(.7)}
#viet-giapha-app .tree-card:hover{transform:translateY(-3px);border-color:var(--gp-gold)!important;box-shadow:0 2px 4px rgba(60,30,10,.06),0 16px 34px rgba(95,18,18,.16)}
#viet-giapha-app .tree-card.active-target{animation:gp-ring 1.4s ease-in-out infinite;border-color:var(--gp-gold)!important;box-shadow:0 0 0 3px rgba(201,149,60,.55),0 16px 34px rgba(201,149,60,.35)!important}
@keyframes gp-ring{0%,100%{transform:translateY(-2px) scale(1)}50%{transform:translateY(-4px) scale(1.035)}}
#viet-giapha-app .tree-card.node-dimmed{opacity:.28;filter:grayscale(.85)}

#viet-giapha-app .node-avatar-wrap{
  width:56px;height:56px;margin:0 auto 9px;border:2px solid #fff;background:#fdf3d8;
  box-shadow:0 0 0 2px var(--gp-male),0 6px 14px rgba(60,30,10,.18);
}
#viet-giapha-app .tree-card.female .node-avatar-wrap{box-shadow:0 0 0 2px var(--gp-female),0 6px 14px rgba(60,30,10,.18)}
#viet-giapha-app .node-avatar-svg{width:100%;height:100%}
#viet-giapha-app .node-title{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:14.5px;font-weight:700;line-height:1.3;color:var(--gp-ink)}
#viet-giapha-app .node-courtesy{margin-top:2px;font-size:11px;color:var(--gp-muted)}
#viet-giapha-app .node-meta-row{gap:6px;margin-top:9px}
#viet-giapha-app .node-gen-badge{padding:3px 9px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.3px;background:#fbeaea;color:var(--gp-crimson)}
#viet-giapha-app .node-status-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:600}
#viet-giapha-app .status-alive{background:#e8f6ec;color:#1f6b3a}
#viet-giapha-app .status-deceased{background:#f1ede6;color:#6b625a}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
#viet-giapha-app .status-alive .status-dot{background:#22a755}
#viet-giapha-app .status-deceased .status-dot{background:#9a9187}
#viet-giapha-app .node-dates{margin:9px -4px 0;padding-top:7px;border-top:1px dashed #e6d9bd;font-size:11px;letter-spacing:.3px;color:#9a8d78;font-variant-numeric:tabular-nums}
#viet-giapha-app .node-edit-hint{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:700;color:#8a5a12;background:#fdf3d8;border:1px solid #ecd596}
#viet-giapha-app .node-edit-hint:hover{background:var(--gp-gold);color:#fff;border-color:var(--gp-gold)}

/* ---------- Đường nối & nút thu/mở nhánh ---------- */
#viet-giapha-app .tree-stem-down,#viet-giapha-app .tree-stem-line-v,
#viet-giapha-app .tree-connector-h,#viet-giapha-app .tree-connector-v,
#viet-giapha-app .tree-child-col::before,#viet-giapha-app .tree-child-col::after{background:#c9ab74!important}
#viet-giapha-app .tree-stem-down{width:2px!important;height:28px!important}
#viet-giapha-app .tree-stem-down .tree-stem-line-v{background:#c9ab74!important}
#viet-giapha-app .tree-child-col{padding-top:28px!important}
#viet-giapha-app .tree-connector-v,#viet-giapha-app .tree-child-col::before{height:28px!important}
#viet-giapha-app .tree-collapse-btn{
  display:flex!important;align-items:center!important;justify-content:center!important;width:22px!important;height:22px!important;line-height:1!important;
  background:#fff!important;color:var(--gp-crimson)!important;border:2px solid var(--gp-gold)!important;box-shadow:0 2px 8px rgba(60,30,10,.18)!important;
  transition:background .15s,color .15s,transform .15s!important;
}
#viet-giapha-app .tree-collapse-btn:hover{background:var(--gp-crimson)!important;color:#fff!important;border-color:var(--gp-crimson)!important;transform:translate(-50%,-50%) scale(1.12)!important}
#viet-giapha-app .tree-collapse-btn .gp-ico{display:block}
#viet-giapha-app .tree-collapse-btn[aria-expanded="false"]{background:var(--gp-crimson)!important;color:#fff!important;border-color:var(--gp-crimson)!important}

/* ---------- Ngăn danh mục tiền nhân ---------- */
#viet-giapha-app .giapha-directory-drawer{
  top:0!important;bottom:0!important;right:0;height:100%;max-height:none!important;width:350px!important;max-width:92%;padding:0!important;
  background:var(--gp-paper);border-left:1px solid var(--gp-line-strong)!important;box-shadow:-18px 0 44px rgba(60,30,10,.20)!important;z-index:1200!important;
}
#viet-giapha-app .giapha-directory-drawer.is-open{animation:gp-slide-in .22s ease-out}
@keyframes gp-slide-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
#viet-giapha-app .giapha-drawer-header{position:sticky;top:0;z-index:2;margin:0;padding:16px 18px;background:var(--gp-paper);border-bottom:2px solid var(--gp-crimson)}
#viet-giapha-app .giapha-drawer-header h4{display:flex;align-items:center;gap:9px;margin:0;font-family:Georgia,serif;font-size:15px;color:var(--gp-crimson)}
#viet-giapha-app .giapha-drawer-header .giapha-close-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#7a5a2a;background:#f5ecda}
#viet-giapha-app .giapha-drawer-header .giapha-close-btn:hover{background:var(--gp-crimson);color:#fff}
#viet-giapha-app .giapha-drawer-content{padding:8px 12px 24px}
#viet-giapha-app .giapha-dir-gen-title{display:flex;justify-content:space-between;align-items:center;margin:14px 0 6px;padding:7px 11px;border-radius:9px;background:#f8efdc;color:#7a4a12;font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
#viet-giapha-app .giapha-dir-gen-title em{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;color:#a38250}
#viet-giapha-app .giapha-dir-item{gap:11px;padding:8px 10px;border-radius:10px;font-size:13px;transition:background .15s}
#viet-giapha-app .giapha-dir-item:hover{background:#fbf3e1}
#viet-giapha-app .giapha-dir-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--gp-line-strong);flex-shrink:0}
#viet-giapha-app .giapha-dir-name{display:flex;flex-direction:column;line-height:1.3;font-weight:600;color:var(--gp-ink)}
#viet-giapha-app .giapha-dir-name small{font-weight:400;font-size:11px;color:var(--gp-muted)}

/* ---------- Modal chung (hồ sơ tiền nhân, sửa nhanh, ...) ---------- */
.giapha-modal-overlay{background:rgba(28,14,8,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.giapha-modal-dialog{border:0;border-radius:18px;box-shadow:0 30px 80px rgba(20,8,4,.45);overflow:hidden;animation:gp-pop .22s ease-out}
@keyframes gp-pop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.giapha-modal-dialog{overflow-y:auto}
.giapha-modal-head{padding:16px 22px;border-radius:0;background:linear-gradient(135deg,#5f1212,#8c1d1d 60%,#a52a2a);box-shadow:inset 0 -3px 0 #c9953c}
.giapha-modal-head h4{font-family:Georgia,serif;font-size:17px;font-weight:700;letter-spacing:.3px;color:#fff3d6}
.giapha-close-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;transition:background .15s}
.giapha-close-btn:hover{background:rgba(255,255,255,.26)}
.giapha-modal-body{padding:22px 24px 24px;color:#2a1a10}
.uni-status{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.uni-status.is-alive{background:#e8f6ec;color:#1f6b3a}.uni-status.is-alive .status-dot{background:#22a755}
.uni-status.is-deceased{background:#f1ede6;color:#6b625a}.uni-status.is-deceased .status-dot{background:#9a9187}
.uni-inline-ico{display:inline-flex;align-items:flex-start;gap:5px;color:#44403c}
.uni-inline-ico .gp-ico{margin-top:2px;color:#b45309}
.uni-preset-box{margin-bottom:14px;padding:11px 13px;border:1px solid #f0e2b4;border-radius:12px;background:#fffaeb}
.uni-preset-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.uni-preset-title{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#854d0e}
.uni-preset-sub{font-size:10.5px;color:#a16207}
.uni-bio-title{display:inline-flex;align-items:center;gap:7px;color:#5f1212}
.uni-bio-title .gp-ico{color:#b45309}
.btn-uni-preset,.btn-trigger-gathering-mode,.btn-trigger-print-card,.btn-trigger-copy-bio,.btn-uni-download{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;font-size:12px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.btn-uni-preset{margin-right:6px;background:#fff;border:1px solid #e3c06b;color:#78350f}
.btn-uni-preset:hover{background:#c9953c;border-color:#c9953c;color:#fff}
.btn-trigger-gathering-mode{background:linear-gradient(180deg,#a52a2a,#7a1818);border:1px solid #7a1818;color:#fff}
.btn-trigger-gathering-mode:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-trigger-print-card{background:#fdf3d8;border:1px solid #e3c06b;color:#7a4a12}
.btn-trigger-print-card:hover{background:#f6e3b0}
.btn-trigger-copy-bio,.btn-uni-download{background:#fff;border:1px solid #d6cdbd;color:#44403c}
.btn-trigger-copy-bio:hover,.btn-uni-download:hover{background:#f7f2e8;border-color:#b9a77f}
#btn-proj-print-card,#btn-proj-copy-link{display:inline-flex;align-items:center;gap:7px}

/* ---------- Hộp xuất PDF / bản in ---------- */
#viet-giapha-app .giapha-pdf-modal-container{border-radius:16px;background:#26211e;box-shadow:0 30px 80px rgba(0,0,0,.55)}
#viet-giapha-app .giapha-pdf-modal-toolbar{padding:12px 20px;background:#1a1613;border-bottom:2px solid var(--gp-gold)}
#viet-giapha-app .giapha-pdf-toolbar-left,#viet-giapha-app .giapha-pdf-toolbar-right{flex-wrap:wrap;gap:12px}
#viet-giapha-app .giapha-pdf-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(201,149,60,.16);border:1px solid rgba(201,149,60,.5);color:var(--gp-gold-light);font-size:11.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase}
#viet-giapha-app .giapha-pdf-paper-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#d6d3d1}
#viet-giapha-app .giapha-pdf-modal-toolbar .giapha-select{height:36px;padding:0 30px 0 12px;border:1px solid #57534e;border-radius:9px;background-color:#2b2622;color:#f5f5f4;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d6d3d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
#viet-giapha-app .giapha-pdf-scale-wrap{display:flex;align-items:center;gap:7px}
#viet-giapha-app .giapha-btn-icon,#viet-giapha-app .hud-btn{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid #57534e;background:#2b2622;color:#f5f5f4;font-size:15px;line-height:1;cursor:pointer;transition:background .15s,border-color .15s}
#viet-giapha-app .giapha-btn-icon:hover,#viet-giapha-app .hud-btn:hover{background:#3a332e;border-color:var(--gp-gold)}
#viet-giapha-app .giapha-btn-xs,#viet-giapha-app .hud-chip{height:28px;padding:0 10px;border-radius:999px;border:1px solid #57534e;background:#2b2622;color:#e7e5e4;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
#viet-giapha-app #btn-pdf-zoom-reset,#viet-giapha-app #btn-hud-zoom-reset{background:rgba(201,149,60,.2);border-color:var(--gp-gold);color:var(--gp-gold-light)}
#viet-giapha-app .giapha-btn-xs:hover,#viet-giapha-app .hud-chip:hover{border-color:var(--gp-gold)}
#viet-giapha-app .giapha-range{width:92px;cursor:pointer;accent-color:var(--gp-gold)}
#viet-giapha-app .giapha-scale-text,#viet-giapha-app .hud-val{min-width:42px;text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;color:var(--gp-gold-light)}
#viet-giapha-app .giapha-checkbox-label{gap:7px;font-size:12px;color:#e7e5e4}
#viet-giapha-app .giapha-checkbox-label input{accent-color:var(--gp-gold);width:15px;height:15px}
#viet-giapha-app .giapha-pdf-modal-toolbar .giapha-btn-gold{height:38px;padding:0 16px}
#viet-giapha-app .giapha-pdf-modal-toolbar .giapha-close-btn{background:rgba(255,255,255,.1)}
#viet-giapha-app .giapha-pdf-preview-scroller{position:relative;text-align:center}
#viet-giapha-app .solemn-floating-zoom-hud{position:sticky;top:10px;z-index:99;margin:0 auto 12px;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
  background:rgba(26,22,19,.94);color:#fff;border:1px solid rgba(201,149,60,.6);box-shadow:0 10px 28px rgba(0,0,0,.35);font-size:12px}
#viet-giapha-app .hud-label{display:inline-flex;align-items:center;gap:6px;color:var(--gp-gold-light);font-weight:700;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase}
#solemn-genealogy-pdf-canvas{-webkit-print-color-adjust:exact;print-color-adjust:exact}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  #viet-giapha-app .giapha-header-bar{padding:16px 18px}
  #viet-giapha-app .giapha-toolbar{padding:12px 16px}
  #viet-giapha-app .giapha-quick-actions{margin-left:0}
}
@media(max-width:600px){
  #viet-giapha-app.viet-giapha-container{border-radius:14px!important}
  #viet-giapha-app .giapha-clan-brand h3{font-size:1.05rem}
  #viet-giapha-app .giapha-actions{width:100%;justify-content:space-between}
  #viet-giapha-app .giapha-btn-fit span{display:none}
  #viet-giapha-app .giapha-search-wrap{flex-basis:100%}
  #viet-giapha-app .giapha-filter-group{flex:1 1 100%}
  #viet-giapha-app .giapha-filter-group .giapha-select{flex:1;min-width:0}
  #viet-giapha-app .giapha-icon-btn{width:44px;height:44px;min-width:44px}
  #viet-giapha-app .giapha-directory-drawer{width:100%!important;max-width:100%}
  .giapha-modal-body{padding:18px}
}

/* 2.6.0 — sửa bố cục vùng xem trước PDF: thanh góc nhìn nằm trên đầu, bản in canh giữa */
#viet-giapha-app .giapha-pdf-preview-scroller{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left}
#viet-giapha-app .solemn-floating-zoom-hud{align-self:center;flex:0 0 auto;height:auto;margin:0 auto 14px;max-width:100%;white-space:nowrap}
#viet-giapha-app .solemn-floating-zoom-hud .hud-chip,#viet-giapha-app .giapha-btn-xs{white-space:nowrap}
#viet-giapha-app #solemn-genealogy-pdf-canvas{flex:0 0 auto;margin:0 auto}

/* 2.6.0 — tinh chỉnh mobile: nhóm lọc không tràn khung, hàng nút header gọn một dòng */
@media(max-width:600px){
  #viet-giapha-app .giapha-filter-group{min-width:0}
  #viet-giapha-app .giapha-filter-group .giapha-select{width:0;flex:1 1 0}
  #viet-giapha-app .giapha-header-bar{padding:14px 14px}
  #viet-giapha-app .giapha-actions{flex-wrap:nowrap!important;gap:8px!important}
  #viet-giapha-app .giapha-btn-gold{height:38px;padding:0 12px;font-size:12px;gap:6px}
}

/* ==========================================================================
   2.6.0 — Thư viện chân dung cổ truyền (hộp chọn ảnh mẫu)
   ========================================================================== */
.gp-lib-overlay{align-items:center;justify-content:center;padding:20px;z-index:1000000!important}
.gp-lib-dialog{width:min(1040px,100%);max-height:92vh;display:flex;flex-direction:column;background:#fffdf9;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(20,8,4,.5);animation:gp-pop .22s ease-out;font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;color:#2a1a10}
.gp-lib-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px;background:linear-gradient(135deg,#5f1212,#8c1d1d 60%,#a52a2a);box-shadow:inset 0 -3px 0 #c9953c}
.gp-lib-head h4{display:flex;align-items:center;gap:10px;margin:0;font:700 19px Georgia,"Times New Roman",serif;color:#fff3d6;letter-spacing:.3px}
.gp-lib-head p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:#f3d58a}
.gp-lib-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 24px;background:#fff;border-bottom:1px solid #e8dcc4}
.gp-lib-chips{display:flex;gap:8px;flex-wrap:wrap}
.gp-lib-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid #d9c7a1;border-radius:999px;background:#fbf8f2;color:#6b4a1f;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.gp-lib-chip em{font-style:normal;font-size:11px;padding:1px 7px;border-radius:999px;background:#efe3c8;color:#8a5a12}
.gp-lib-chip:hover{border-color:#c9953c;background:#fbf3e1}
.gp-lib-chip.is-active{background:#8c1d1d;border-color:#8c1d1d;color:#fff}
.gp-lib-chip.is-active em{background:rgba(255,255,255,.22);color:#fff}
.gp-lib-chip:focus-visible,.btn-select-portrait-item:focus-visible{outline:3px solid rgba(201,149,60,.65);outline-offset:2px}
.gp-lib-count{font-size:12px;font-weight:600;color:#8a7a63}
.gp-lib-grid{flex:1;overflow-y:auto;padding:22px 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;background:#faf6ee}
.gp-lib-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e8dcc4;border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(60,30,10,.06),0 8px 20px rgba(60,30,10,.06);transition:transform .2s,box-shadow .2s,border-color .2s}
.gp-lib-card:hover{transform:translateY(-4px);border-color:#c9953c;box-shadow:0 2px 4px rgba(60,30,10,.06),0 16px 32px rgba(95,18,18,.16)}
.gp-lib-thumb{position:relative;aspect-ratio:4/5;background:#f3e3c0;overflow:hidden}
.gp-lib-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gp-lib-card:hover .gp-lib-thumb img{transform:scale(1.04)}
.gp-lib-tags{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;gap:6px;padding:10px 10px 26px;background:linear-gradient(rgba(30,12,6,.62),transparent)}
.gp-lib-tags span{padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff3d6;font-size:10px;font-weight:600}
.gp-lib-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:14px}
.gp-lib-body h5{margin:0;font:700 14.5px Georgia,"Times New Roman",serif;color:#5f1212}
.gp-lib-sub{font-size:11.5px;font-weight:600;color:#a8691a}
.gp-lib-body p{flex:1;margin:0 0 6px;font-size:11.5px;line-height:1.5;color:#57534e}
.btn-select-portrait-item{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;height:38px;padding:0 10px;border:0;border-radius:10px;background:linear-gradient(180deg,#a52a2a,#7a1818);color:#fff;font-size:12px;font-weight:700;cursor:pointer;transition:filter .15s,transform .15s}
.btn-select-portrait-item:hover{filter:brightness(1.14);transform:translateY(-1px)}
.gp-lib-foot{padding:11px 24px;border-top:1px solid #e8dcc4;background:#fffdf9;font-size:11.5px;color:#8a7a63;text-align:center}
.gp-lib-empty{grid-column:1/-1;padding:40px;text-align:center;color:#8a7a63}
.btn-open-portrait-library{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;border:1px solid #8c1d1d;background:#8c1d1d;color:#fff;font-size:12px;font-weight:600;line-height:1.2;cursor:pointer;transition:filter .15s}
.btn-open-portrait-library:hover{filter:brightness(1.15)}
.gp-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:1000001;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;border:1px solid rgba(201,149,60,.6);background:#1f1a16;color:#f3e7c8;font:600 13px "Segoe UI",Arial,sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.35);animation:gp-toast-in .25s ease-out}
.gp-toast .gp-ico{color:#6fd39b}
.gp-toast.is-leaving{opacity:0;transform:translate(-50%,8px);transition:opacity .35s,transform .35s}
@keyframes gp-toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translateX(-50%)}}
@media(max-width:600px){
  .gp-lib-overlay{padding:8px}
  .gp-lib-dialog{max-height:96vh;border-radius:16px}
  .gp-lib-head,.gp-lib-tools,.gp-lib-grid,.gp-lib-foot{padding-left:14px;padding-right:14px}
  .gp-lib-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .gp-lib-body p{display:none}
}

/* 2.6.0 — khung ảnh thư viện giữ tỉ lệ 4:5 ổn định trong flex */
.gp-lib-thumb{flex:0 0 auto;aspect-ratio:auto;height:0;padding-top:125%}
.gp-lib-thumb img{position:absolute;inset:0}
.gp-lib-grid{grid-auto-rows:max-content;align-content:start}
.gp-lib-head .giapha-close-btn{flex:0 0 34px}
@media(max-width:600px){
  .gp-lib-chips{flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gp-lib-chips::-webkit-scrollbar{display:none}
  .gp-lib-chip{flex:0 0 auto}
  .gp-lib-count{display:none}
  .gp-lib-head h4{font-size:16px}
}