/* Compass chart presentation. Legacy selectors retained for component compatibility. */
.sp-table, .sp-full-table { inline-size: 100%; border-collapse: collapse; }
.sp-table :is(.sp-header, .sp-header-vertical) {
  background: #293b44;
  color: #fff;
  padding: .6rem;
  border: 1px solid #cbd5dc;
}
.sp-cell, .sp-cell > td { border: 1px solid #cbd5dc; }
.sp-inner-table { position: relative; margin-inline: auto; min-block-size: 6rem; }
.sp-inner-table tr { display: flex; justify-content: center; }
.pillar-marker-wrapper { display: flex; align-items: center; justify-content: center; }
.sp-chinese-character { font-size: 2.25rem; line-height: 1.4; }
.sp-chinese-character-main { font-size: 1.9rem; line-height: 1.5; }
.sp-chinese-character-sub { font-size: 1.125rem; line-height: 1.5; }
.sp-sub-info { font-size: 1.25rem; }
.sp-title-left, .sp-title-right { writing-mode: vertical-rl; margin: 0; }
.sp-table-separator { block-size: 1.5rem; }
.sp-dagua-element, .sp-dagua-period { padding: 0; }
.sp-1-yao, .sp-0-yao { block-size: .4rem; margin-block: .15rem; padding: 0; }
.sp-1-yao { background: #293b44; }
.sp-0-yao { background: #fff; }
.sp-hexagram-separator { block-size: .3rem; }
.sp-good-activity { color: #9f342c; }
.sp-bad-activity, .sp-default-text { color: #293b44; }

/* ─── THIÊN CƠ PWA RESPONSIVE SHELL UTILITIES (MPWA-AC04) ─── */
.desktop-only-nav {
  display: block;
}
.mobile-only-header {
  display: none;
}
.mobile-only-bottom-nav {
  display: none;
}
.mobile-content-container {
  padding-bottom: 0px;
}

/* Hàng thông báo hệ thống (offline + cài PWA): một lớp duy nhất, xếp chồng, không đè header/nav */
.system-notice-stack {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  z-index: var(--z-banner, 300);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.system-notice-stack > * {
  pointer-events: auto;
}

@media (max-width: 767px) {
  .desktop-only-nav {
    display: none !important;
  }
  .mobile-only-header {
    display: block !important;
  }
  /* Wrapper là spacer cuối tài liệu (sau footer) bằng chiều cao nav cố định */
  .mobile-only-bottom-nav {
    display: block !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .system-notice-stack {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}