/* ═══════════════════════════════════════════════════
   ket-qua-v2.css — Trang kết quả lá số
   Khớp với cấu trúc page-ket-qua.php + ket-qua-page.js
═══════════════════════════════════════════════════ */

/* ── ROOT WRAPPER ── */
#kq-page-root { padding-top: 64px; min-height: 100vh; background: var(--night); }

/* ── LOADING ── */
.kq-loading-screen {
  min-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
}
.kq-spinner {
  width: 48px; height: 48px;
  border: 2px solid rgba(196,168,255,.2);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: kqSpin 0.8s linear infinite;
}
@keyframes kqSpin { to { transform: rotate(360deg); } }
#kq-load-msg { font-size: 15px; color: var(--glow); font-weight: 300; }

/* ── EMPTY ── */
.kq-empty-screen { min-height: calc(100vh - 64px); display: flex; align-items: center; justify-content: center; }
.kq-empty-inner { text-align: center; padding: 60px 20px; }
.kq-empty-icon { font-size: 52px; margin-bottom: 20px; opacity: .6; }
.kq-empty-inner h2 { font-family: 'Playfair Display',serif; font-size: 26px; color: var(--text); margin-bottom: 10px; }
.kq-empty-inner p { font-size: 15px; color: var(--muted); margin-bottom: 24px; font-weight: 300; }

/* ── CONTAINER ── */
.kq-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 768px) {
  /* Remove all padding/max-width so chart fills 100% screen width */
  .kq-container   { padding: 0; overflow-x: visible; }
  .kq-body-new    { padding-top: 8px; padding-bottom: 32px; max-width: 100%; overflow-x: visible; }
  .kq-main-col    { padding: 0; overflow-x: visible; }
  .kq-result      { overflow-x: visible; }
  #kq-page-root   { overflow-x: hidden; } /* clip at page root only */
  .kq-title-section { padding: 12px 12px 6px; }
  .kq-section-title { padding: 8px 12px; margin-bottom: 4px; }
  .kq-action-bar-bottom { padding: 8px 12px; }
  .kq-display-opts { margin: 4px 8px; }
  .kq-auto-luan-giai { padding: 0 8px; }
}

/* ── HEADER BAR ── */
.kq-header-bar {
  background: var(--deep);
  border-bottom: .5px solid var(--border);
  padding: 20px 0;
  position: sticky; top: 64px; z-index: 50;
}
.kq-header-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
  margin-bottom: 16px;
}
.kq-person-name { font-family: 'Playfair Display',serif; font-size: 22px; font-weight: 400; color: var(--text); margin: 0 0 4px; }
.kq-person-meta { font-size: 13px; color: var(--gold); font-weight: 300; margin: 0; }
.kq-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.kq-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 13px;
  color: var(--muted); background: transparent;
  border: .5px solid var(--border-m); border-radius: 8px;
  cursor: pointer; transition: all .2s; white-space: nowrap;
}
.kq-action-btn:hover { color: var(--glow); border-color: var(--glow); }

/* ── INFO GRID — JS renders items here ── */
.kq-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 20px;
  padding-top: 14px;
  border-top: .5px solid var(--border);
}
.kq-info-item { display: flex; flex-direction: column; gap: 3px; }
.kq-info-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kq-info-value { font-size: 14px; font-weight: 500; color: var(--text); }
.kq-info-value.hl { color: var(--gold); }

/* ── BODY LAYOUT ── */
.kq-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
  padding-top: 36px;
  padding-bottom: 80px;
}
@media(max-width: 900px) { .kq-body { grid-template-columns: 1fr; } }

/* ── LEFT: CHART ── */
.kq-left { min-width: 0; }
.kq-section-title {
  font-family: 'Playfair Display',serif;
  font-size: 20px; font-weight: 400; color: var(--text);
  margin: 0 0 18px;
}
/* Chart: let chart.css handle all sizing */
#kq-chart-container {
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.kq-summary-wrap { margin-bottom: 24px; }

/* ── PAYWALL ── */
.kq-paywall { margin-top: 8px; }
.kq-paywall-inner {
  text-align: center; padding: 44px 28px;
  background: rgba(15,6,32,.85);
  border: .5px solid var(--border-m);
  border-radius: 16px;
  backdrop-filter: blur(12px);
}
.kq-paywall-icon { font-size: 44px; margin-bottom: 16px; }
.kq-paywall-inner h3 { font-family: 'Playfair Display',serif; font-size: 20px; color: var(--text); margin-bottom: 10px; }
.kq-paywall-inner p { font-size: 14px; color: var(--muted); max-width: 380px; margin: 0 auto 20px; line-height: 1.65; font-weight: 300; }
.kq-paywall-preview { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
.preview-cung { padding: 5px 12px; border: .5px solid var(--border-m); border-radius: 20px; font-size: 12px; color: var(--glow); }
.preview-cung.locked { color: var(--muted); opacity: .5; }
.kq-login-btn { display: inline-flex; align-items: center; gap: 10px; }
.kq-paywall-note { font-size: 12px; color: var(--muted); margin-top: 12px; opacity: .6; }

/* ── SIDEBAR ── */
.kq-sidebar { display: flex; flex-direction: column; gap: 14px; }
.kq-sidebar-card {
  padding: 22px;
  background: var(--deep);
  border: .5px solid var(--border);
  border-radius: 14px;
}
.kq-sidebar-label { display: block; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.kq-sidebar-title { font-family: 'Playfair Display',serif; font-size: 16px; font-weight: 400; color: var(--text); margin: 0 0 12px; }
.kq-select {
  width: 100%; padding: 10px 14px;
  background: rgba(255,255,255,.05);
  border: .5px solid var(--border-m); border-radius: 8px;
  color: var(--text); font-size: 14px; font-family: 'Inter',sans-serif;
  outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A897C4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}

/* ── AI CARD ── */
.kq-ai-card { background: rgba(45,17,87,.4); border-color: rgba(196,168,255,.18); }
.kq-ai-desc { font-size: 13px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; font-weight: 300; }
.kq-api-row { display: flex; gap: 6px; margin-bottom: 12px; }
.kq-input {
  flex: 1; padding: 10px 14px;
  background: rgba(255,255,255,.05);
  border: .5px solid var(--border-m); border-radius: 8px;
  color: var(--text); font-size: 13px; font-family: 'Inter',sans-serif;
  outline: none; transition: border-color .2s; min-width: 0;
}
.kq-input::placeholder { color: var(--muted); }
.kq-input:focus { border-color: var(--purple); }
.kq-api-eye {
  padding: 10px 12px; background: transparent;
  border: .5px solid var(--border-m); border-radius: 8px;
  cursor: pointer; font-size: 16px; color: var(--muted);
  transition: border-color .2s; flex-shrink: 0;
}
.kq-api-eye:hover { border-color: var(--glow); }
.kq-luangiai-btn { width: 100%; justify-content: center; display: flex; margin-bottom: 14px; }
.kq-ai-output {
  font-size: 13px; color: var(--muted); line-height: 1.75;
  border-top: .5px solid var(--border); padding-top: 14px;
  min-height: 60px;
}
.kq-ai-placeholder { font-style: italic; opacity: .7; }
.kq-ai-prose { color: var(--body); }
.kq-ai-prose h3,.kq-ai-prose h4 { font-family: 'Playfair Display',serif; color: var(--text); margin: 14px 0 6px; }
.kq-ai-prose p { margin-bottom: 10px; }
.kq-ai-prose strong { color: var(--glow); font-weight: 500; }
.kq-ai-loading { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.kq-ai-loading .kq-spinner { width: 20px; height: 20px; border-width: 2px; flex-shrink: 0; }
.kq-ai-error { color: #f08080; }
.kq-ai-error h4 { margin-bottom: 6px; }

/* ── UPGRADE CARD ── */
.kq-upgrade-card { background: rgba(45,17,87,.5); border-color: rgba(196,168,255,.2); }
.kq-upgrade-stars { color: var(--gold); font-size: 12px; letter-spacing: 4px; margin-bottom: 10px; }
.kq-upgrade-card h3 { font-family: 'Playfair Display',serif; font-size: 17px; color: var(--text); margin: 0 0 8px; }
.kq-upgrade-card p { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 12px; font-weight: 300; }
.kq-upgrade-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.kq-upgrade-list li { font-size: 13px; color: var(--glow); }

/* ── EMAIL MODAL ── */
.kq-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,6,32,.85); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.kq-modal-box {
  background: var(--deep); border: .5px solid var(--border-m);
  border-radius: 16px; padding: 32px;
  max-width: 420px; width: 100%;
  position: relative;
}
.kq-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  transition: color .2s;
}
.kq-modal-close:hover { color: var(--text); }
.kq-modal-box h3 { font-family: 'Playfair Display',serif; font-size: 20px; color: var(--text); margin-bottom: 8px; }
.kq-modal-box p { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.kq-email-status { font-size: 13px; padding: 8px 12px; border-radius: 6px; margin-top: 8px; }
.kq-email-status.ok { color: #4ade80; background: rgba(74,222,128,.1); }
.kq-email-status.err { color: #f08080; background: rgba(240,128,128,.1); }

/* ── TOAST ── */
.kq-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 2000;
  padding: 12px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 500;
  transform: translateY(16px); opacity: 0;
  transition: all .3s; pointer-events: none;
  max-width: 340px;
}
.kq-toast.show { transform: translateY(0); opacity: 1; }

/* ── RESPONSIVE ── */
@media(max-width: 760px) {
  .kq-header-top { flex-direction: column; }
  .kq-header-actions { flex-wrap: wrap; }
  .kq-info-grid { grid-template-columns: repeat(2, 1fr); }
  .kq-paywall-inner { padding: 28px 16px; }
  .kq-sidebar-card { padding: 18px 16px; }
  .kq-body { padding-top: 24px; }
}

/* ── SUMMARY TABLE (renderSummary output) ── */
.kq-summary-wrap { margin-bottom: 24px; }
.sum-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sum-table td { padding: 7px 10px; border-bottom: .5px solid var(--border); vertical-align: top; }
.sum-table td:first-child { color: var(--muted); width: 130px; white-space: nowrap; font-size: 12px; letter-spacing: .04em; }
.sum-table td:last-child { color: var(--body, #C8BDE0); }
.sum-table .hl { color: var(--gold); font-weight: 500; }
.sao-chip { display: inline-block; margin: 2px; padding: 2px 8px; background: rgba(196,168,255,.08); border: .5px solid var(--border); border-radius: 12px; font-size: 11px; }
.sao-chip .sc { color: var(--glow); }

/* ── CHART TITLE ── */
.la-so-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px; color: var(--gold);
  text-align: center; margin-bottom: 8px;
  letter-spacing: .08em;
}

/* ── META CHIPS (renderChart writes to kq-meta-chips) ── */
.kq-meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kq-meta-chip { font-size: 12px; color: var(--muted); }
.kq-meta-chip span { color: var(--glow); font-weight: 500; }

/* ── CHART WRAP: full width, horizontal scroll on mobile ── */
.kq-chart-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 28px;
}
@media (max-width: 768px) {
  .kq-chart-wrap {
    overflow-x: visible;
    margin-bottom: 12px;
  }
}

/* ══════════════════════════════════════════════════════
   AUTO LUẬN GIẢI SECTION
══════════════════════════════════════════════════════ */
/* Luận Giải — Full Width */
#kq-print-luan-giai {
  width: 100%;
  max-width: 100%;
}
.kq-auto-luan-giai {
  margin-top: 32px;
  padding-top: 28px;
  border-top: .5px solid var(--border);
  max-width: 100%;
}

/* Luận giải grid (9 mục) */
.kq-lg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 36px;
}
@media(max-width: 768px) { .kq-lg-grid { grid-template-columns: 1fr; } }
@media(min-width: 500px) and (max-width: 768px) { .kq-lg-grid { grid-template-columns: 1fr 1fr; } }

.kq-lg-item {
  padding: 18px 20px;
  background: rgba(45,17,87,.3);
  border: .5px solid var(--border);
  border-radius: 12px;
  transition: border-color .2s;
}
.kq-lg-item:hover { border-color: var(--border-m); }

.kq-lg-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.kq-lg-icon { font-size: 18px; flex-shrink: 0; }
.kq-lg-title {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--gold);
  line-height: 1.2;
}
.kq-lg-content {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
}
.kq-lg-content strong { color: var(--glow); font-weight: 500; }

/* Cung preview section */
.kq-cung-preview-section { margin-top: 4px; }
.kq-lg-sub {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 6px;
}
.kq-lg-note {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
  font-weight: 300;
}

.kq-cung-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
@media(min-width: 700px) { .kq-cung-preview-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width: 1000px) { .kq-cung-preview-grid { grid-template-columns: repeat(4, 1fr); } }

.kq-cung-preview-card {
  padding: 14px;
  background: var(--deep);
  border: .5px solid var(--border);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.kq-cp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.kq-cp-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.kq-cp-chi {
  font-size: 11px;
  color: var(--muted);
  font-family: 'Playfair Display', serif;
}
.kq-cp-sao {
  font-size: 12px;
  color: var(--glow);
  font-weight: 500;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kq-cp-ynghia {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 8px;
}
.kq-cp-lock {
  font-size: 10px;
  color: var(--muted);
  opacity: .6;
  font-style: italic;
}

/* Upgrade banner */
.kq-upgrade-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: rgba(123,63,196,.12);
  border: .5px solid rgba(196,168,255,.2);
  border-radius: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.kq-upgrade-icon { font-size: 36px; flex-shrink: 0; }
.kq-upgrade-text { flex: 1; min-width: 200px; }
.kq-upgrade-text h3 {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 4px;
}
.kq-upgrade-text p { font-size: 13px; color: var(--muted); font-weight: 300; }
.kq-upgrade-cta { white-space: nowrap; }

/* Centre cell: make font smaller to fit more info */
.cell-center .c-row { font-size: clamp(8px,1vw,11px); }
.cell-center .c-name { font-size: clamp(10px,1.6vw,14px); }

/* ══════════════════════════════════════
   NEW LAYOUT: main col + info sidebar
══════════════════════════════════════ */
.kq-body-new {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 28px;
  padding-bottom: 80px;
}
.kq-main-col { min-width: 0; }

/* ── Info Sidebar ── */
.kq-info-sidebar { position: sticky; top: 80px; }
.kq-info-sidebar-card {
  background: var(--deep);
  border: .5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.kq-info-sidebar-header {
  padding: 14px 18px 12px;
  border-bottom: .5px solid var(--border);
  background: rgba(45,17,87,.3);
}
.kq-info-sidebar-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--gold);
  margin: 0;
  letter-spacing: .04em;
}

/* Vertical info items */
.kq-info-grid-vertical { padding: 6px 0; }
.kq-info-item-v {
  display: flex;
  flex-direction: column;
  padding: 9px 18px;
  border-bottom: .5px solid var(--border);
  gap: 2px;
}
.kq-info-item-v:last-child { border-bottom: none; }
.kq-info-label-v {
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.kq-info-value-v {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.4;
}
.kq-info-value-v.hl { color: var(--gold); font-weight: 500; }

/* ══════════════════════════════════════
   CUNG MỆNH & THÂN CHI TIẾT
══════════════════════════════════════ */
.kq-lg-menh-than-wrap { margin: 28px 0; }
.kq-lg-menh-than-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media(min-width: 800px) {
  .kq-lg-menh-than-grid { grid-template-columns: 1fr 1fr; }
}

.kq-lg-cung-block {
  background: rgba(45,17,87,.25);
  border: .5px solid rgba(196,168,255,.2);
  border-radius: 14px;
  overflow: hidden;
}
.kq-lg-cung-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  background: rgba(45,17,87,.4);
  border-bottom: .5px solid var(--border);
}
.kq-lg-cung-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.kq-lg-cung-title {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kq-lg-cung-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  font-weight: 300;
}
.kq-lg-cung-body { padding: 16px 20px 20px; }
.kq-lg-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.kq-lg-row-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  min-width: 72px;
  flex-shrink: 0;
  margin-top: 2px;
}
.kq-lg-row-value { font-size: 13px; color: var(--text); line-height: 1.5; flex: 1; }
.kq-pt-list { font-size: 12px; line-height: 1.6; }
.kq-lg-luan-giai {
  margin-top: 14px;
  padding-top: 14px;
  border-top: .5px solid var(--border);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.75;
  font-weight: 300;
}
.kq-lg-luan-giai p { margin-bottom: 10px; }
.kq-lg-luan-giai p:last-child { margin-bottom: 0; }
.kq-lg-luan-giai strong { color: var(--glow); font-weight: 500; }

/* ══════════════════════════════════════════════════════
   LUẬN GIẢI CHI TIẾT CUNG MỆNH & THÂN — klg-*
══════════════════════════════════════════════════════ */
.klg-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 20px;
  width: 100%;
}
/* Luận giải: always full-width single column */

/* Block tổng thể */
.klg-block {
  background: rgba(20,10,40,.5);
  border: .5px solid rgba(196,168,255,.15);
  border-radius: 16px;
  overflow: hidden;
}
.klg-block-tot { border-color: rgba(74,222,128,.2); }
.klg-block-xau { border-color: rgba(248,113,113,.15); }

/* Header */
.klg-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 16px;
  background: rgba(45,17,87,.35);
  border-bottom: .5px solid rgba(196,168,255,.1);
}
.klg-header-left { display: flex; gap: 12px; align-items: flex-start; }
.klg-icon  { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
.klg-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 500;
  color: #e8e0d0;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.klg-sub { font-size: 12px; color: rgba(200,190,175,.5); margin: 0; font-weight: 300; }

/* Star row */
.klg-star-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  border-bottom: .5px solid rgba(196,168,255,.08);
}
.klg-ct-cell {
  padding: 14px 18px;
  border-right: .5px solid rgba(196,168,255,.08);
}
.klg-pt-cell { padding: 14px 18px; }
.klg-field-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(200,190,175,.4);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 6px;
}
.klg-ct-names {
  font-size: 14px;
  line-height: 1.6;
}
.klg-amp { color: rgba(200,190,175,.3); margin: 0 4px; }
.klg-none { color: rgba(200,190,175,.35); font-style: italic; font-size: 12px; }

/* Phụ tinh chips */
.klg-pt-row  { display: flex; flex-wrap: wrap; gap: 6px; }
.klg-pt-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.klg-pt-glabel {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 2px;
}
.klg-pt-glabel.cat  { color: #86efac; background: rgba(134,239,172,.1); border: .5px solid rgba(134,239,172,.25); }
.klg-pt-glabel.hung { color: #fca5a5; background: rgba(252,165,165,.1); border: .5px solid rgba(252,165,165,.25); }
.klg-pt-glabel.neu  { color: #9ca3af; background: rgba(156,163,175,.08); border: .5px solid rgba(156,163,175,.2); }
.klg-pt {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}
.klg-pt.cat  { color: #86efac; background: rgba(134,239,172,.1); }
.klg-pt.hung { color: #fca5a5; background: rgba(252,165,165,.08); }
.klg-pt.neu  { color: #9ca3af; background: rgba(156,163,175,.06); }

/* Tứ Hóa tại cung */
.klg-hoa-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.klg-hoa {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(251,191,36,.12);
  color: #fbbf24;
  border: .5px solid rgba(251,191,36,.3);
}
.klg-hoa.ky { background: rgba(252,165,165,.1); color: #fca5a5; border-color: rgba(252,165,165,.3); }

/* Body */
.klg-body { padding: 6px 0 4px; }
.klg-section {
  padding: 16px 22px;
  border-bottom: .5px solid rgba(196,168,255,.06);
}
.klg-section:last-child { border-bottom: none; }
.klg-sh {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 500;
  color: #c9a84c;
  margin: 0 0 10px;
  letter-spacing: .02em;
}
.klg-section p {
  font-size: 13px;
  color: rgba(200,190,175,.75);
  line-height: 1.75;
  margin: 0 0 8px;
  font-weight: 300;
}
.klg-section p:last-child { margin-bottom: 0; }
.klg-section p strong { color: #e0c070; font-weight: 500; }
.klg-section em { color: rgba(200,190,175,.5); font-style: italic; }
.klg-na { color: rgba(200,190,175,.4) !important; font-style: italic; }

/* Luận giải từng sao */
.klg-luan-item { margin-bottom: 12px; }
.klg-luan-item:last-child { margin-bottom: 0; }
.klg-sao-name {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #e0c070;
  margin-bottom: 4px;
}

/* Tam phương grid */
.klg-tam-desc { font-size: 12px !important; margin-bottom: 10px !important; opacity: .7; }
.klg-tam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media(max-width: 600px) { .klg-tam-grid { grid-template-columns: 1fr; } }
.klg-tam-card {
  background: rgba(20,10,40,.6);
  border: .5px solid rgba(196,168,255,.1);
  border-radius: 8px;
  padding: 10px 12px;
}
.klg-tam-label {
  font-size: 9px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(201,168,76,.6) !important;
  margin-bottom: 3px !important;
}
.klg-tam-ten  { font-size: 11px !important; color: rgba(200,190,175,.6) !important; margin-bottom: 6px !important; }
.klg-tam-sao  { font-size: 11px; line-height: 1.6; }

/* Cung Thân extras */
.klg-than-goc { background: rgba(45,17,87,.15); }
.klg-compare {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-top: 10px;
  line-height: 1.6;
}
.klg-compare.tot  { background: rgba(74,222,128,.08);  color: #86efac; border: .5px solid rgba(74,222,128,.2); }
.klg-compare.ok   { background: rgba(96,165,250,.08);  color: #93c5fd; border: .5px solid rgba(96,165,250,.2); }
.klg-compare.warn { background: rgba(251,191,36,.08);  color: #fbbf24; border: .5px solid rgba(251,191,36,.2); }
.klg-compare.xau  { background: rgba(248,113,113,.08); color: #fca5a5; border: .5px solid rgba(248,113,113,.2); }

/* ── Admin static content override ── */
.klg-static-content {
  font-size: 13px;
  color: rgba(200,190,175,.75);
  line-height: 1.75;
  font-weight: 300;
}
.klg-static-content p  { margin-bottom: 10px; }
.klg-static-content strong { color: #e0c070; font-weight: 500; }
.klg-static-content em { color: rgba(200,190,175,.5); }
.klg-static-content h4, .klg-static-content h3 {
  color: #c9a84c; font-family: 'Playfair Display', serif;
  font-weight: 500; margin-bottom: 8px;
}
.klg-static-content ul, .klg-static-content ol {
  padding-left: 18px; margin-bottom: 10px;
}
.klg-static-content li { margin-bottom: 4px; }

.klg-prompt-placeholder {
  font-size: 12px;
  color: rgba(200,190,175,.35);
  font-style: italic;
  padding: 8px 0;
}

/* ── AI Button & Result ── */
.klg-ai-section { margin-top: 12px; border-top: .5px dashed rgba(196,168,255,.2); padding-top: 10px; }
.klg-ai-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 7px; font-size: 12px; font-weight: 500;
  cursor: pointer; border: .5px solid rgba(139,92,246,.4);
  background: rgba(139,92,246,.1); color: #c4b5fd;
  transition: background .2s; width: 100%; justify-content: center;
}
.klg-ai-btn:hover:not(:disabled) { background: rgba(139,92,246,.2); }
.klg-ai-btn:disabled { opacity: .6; cursor: wait; }
.klg-ai-response {
  margin-top: 12px; padding: 14px; border-radius: 8px;
  background: rgba(139,92,246,.06); border: .5px solid rgba(139,92,246,.2);
  font-size: 13px; color: rgba(200,190,175,.85); line-height: 1.75;
}
.klg-ai-response p { margin-bottom: 8px; }
.klg-ai-response p:last-child { margin-bottom: 0; }
.klg-ai-response strong { color: #e0c070; font-weight: 500; }
.klg-ai-h { font-family: 'Playfair Display', serif; font-size: 14px; color: #c9a84c; margin: 12px 0 6px; }
.klg-ai-response ul { padding-left: 16px; margin-bottom: 8px; }
.klg-ai-response li { margin-bottom: 4px; }

/* ── Display Options Panel (result page) ── */
.kq-display-opts {
  margin: 16px 0;
  border: .5px solid rgba(196,168,255,.2);
  border-radius: 10px;
  overflow: hidden;
}
.kq-display-opts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  background: rgba(45,17,87,.3);
  cursor: pointer;
  font-size: 13px;
  color: rgba(200,190,175,.7);
  font-weight: 500;
  user-select: none;
  transition: background .15s;
}
.kq-display-opts-header:hover { background: rgba(45,17,87,.5); color: #e8e0d0; }
.kq-display-arrow { font-size: 11px; opacity: .6; }

.kq-display-opts-body { padding: 14px 16px; }
.kq-display-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.kq-display-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(200,190,175,.75);
  cursor: pointer;
  font-weight: 300;
}
.kq-display-opt input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: #c9a84c;
  cursor: pointer;
  flex-shrink: 0;
}

.kq-display-section-title {
  font-size: 11px; font-weight: 600; color: rgba(200,190,175,.45);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 10px 0 6px; margin-top: 4px;
}
.kq-display-grid { margin-bottom: 4px; }

/* ═══════════════════════════════════════════
   MOBILE — Kết Quả Lá Số
═══════════════════════════════════════════ */
@media (max-width: 768px) {
  .kq-hero-section {
    padding: 16px 12px 12px;
  }
  .kq-person-name {
    font-size: 20px;
  }
  .kq-subtitle {
    font-size: 11px;
    flex-wrap: wrap;
  }
  .kq-action-bar {
    gap: 8px;
  }
  .kq-action-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  .kq-main-content {
    padding: 0 8px;
  }
  /* Chart section heading */
  .kq-section-title {
    font-size: 14px;
    padding: 10px 12px;
  }
  /* Display options panel */
  .kq-display-opts {
    margin: 8px 0;
  }
  .kq-display-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
  }
  .kq-display-opt {
    font-size: 12px;
  }
  /* Luận giải section — padding sits on header/cells/section
     themselves (not on .klg-block), so don't double it up here */
  .klg-block {
    padding: 0;
  }
  .klg-header {
    padding: 14px 14px 12px;
    gap: 10px;
  }
  .klg-icon { font-size: 22px; }
  .klg-title { font-size: 16px; }
  .klg-ct-cell,
  .klg-pt-cell {
    padding: 12px 14px;
  }
  .klg-section {
    padding: 14px;
  }
  .klg-sh {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .kq-display-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Title section (replaces header bar) ── */
.kq-title-section {
  padding: 24px 20px 12px;
}
@media (max-width: 768px) {
  .kq-title-section { padding: 16px 14px 8px; }
}

/* ── Action bar BELOW chart ── */
.kq-action-bar-bottom {
  display: flex;
  gap: 10px;
  padding: 14px 0 8px;
  flex-wrap: wrap;
}
.kq-action-bar-bottom .kq-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1px solid rgba(200,190,175,.25);
  border-radius: 8px;
  background: rgba(123,63,196,.1);
  color: rgba(200,190,175,.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.kq-action-bar-bottom .kq-action-btn:hover {
  background: rgba(123,63,196,.22);
  border-color: rgba(123,63,196,.5);
  color: #e8e0d0;
}
@media (max-width: 768px) {
  .kq-action-bar-bottom {
    gap: 8px;
    padding: 10px 0 6px;
  }
  .kq-action-bar-bottom .kq-action-btn {
    padding: 7px 14px;
    font-size: 12px;
  }
}

/* ── Expert loading indicator (no AI mention) ── */
.klg-expert-typing {
  color: rgba(200,190,175,.6);
  font-size: 13px;
  font-style: italic;
}
.klg-dot-anim {
  display: inline-block;
  color: rgba(200,190,175,.5);
  animation: tvtt-dots 1.4s infinite;
}
@keyframes tvtt-dots {
  0%, 20%  { content: ''; }
  40%      { color: rgba(200,190,175,.8); }
  100%     { color: rgba(200,190,175,.3); }
}
/* Hide AI button visually */
.klg-ai-btn[style*="display:none"],
.klg-ai-btn[style*="display: none"] { display: none !important; }

/* ── Section grid layout ── */
.klg-sections-grid { display: block; }
.klg-sec-row { margin-bottom: 16px; }
.klg-section { margin-bottom: 0; }
@media (max-width: 600px) {
  .klg-sec-row { display: block !important; grid-template-columns: 1fr !important; }
}


/* Chart stays constrained; luận giải goes full width */
#kq-content-for-pdf {
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}

.kq-lg-card#kq-lg-tong-quan {
  margin-bottom: 24px;
  width: 100%;
}

/* klg sections inside each block */
.klg-body {
  padding: 16px;
}

/* AI result content full width */
.klg-ai-result {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--text);
}
.klg-ai-result p { margin: 0 0 10px; }

/* Mobile: 1 col */
@media (max-width: 640px) {
  .klg-wrap {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════
   PRINT STYLES — Lá Số + Luận Giải chỉ in phần này
   ══════════════════════════════════════════════ */
@media print {
  /* Ẩn mọi thứ */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body > *,
  .kq-container > *,
  .kq-main-col > *,
  .site-header,
  .site-footer,
  .kq-action-bar-bottom,
  #kq-display-opts,
  .kq-paywall,
  .kq-upgrade-banner,
  .kq-cung-preview-section,
  .kq-right-col,
  nav, header, footer,
  .kq-btn-pdf, .kq-btn-email, .kq-btn-save { display: none !important; }

  /* Chỉ hiện phần Lá Số + Luận Giải */
  body, html { background: #0f0620 !important; color: #e0d8f0 !important; }

  #kq-result { display: block !important; }
  .kq-container.kq-body-new { display: block !important; }
  .kq-main-col { display: block !important; width: 100% !important; }

  #kq-content-for-pdf,
  #kq-print-luan-giai { display: block !important; }

  #kq-luan-giai-auto { display: block !important; }

  /* Chart và Luận giải */
  .kq-chart-wrap { page-break-after: auto; }
  .klg-block { page-break-inside: avoid; margin-bottom: 16px; }
  .klg-ai-result { display: block !important; }

  /* Page setup */
  @page { margin: 10mm; size: A4 portrait; }
}

/* ════════════════════════════════════════════════
   FLOATING TOC (Table of Contents)
   ════════════════════════════════════════════════ */
.kq-toc-float {
  position: fixed;
  top: 100px;
  left: 0;
  width: 220px;
  max-height: calc(100vh - 140px);
  background: rgba(15, 6, 32, 0.96);
  border: .5px solid rgba(123,63,196,.35);
  border-left: none;
  border-radius: 0 12px 12px 0;
  box-shadow: 4px 0 24px rgba(0,0,0,.4);
  z-index: 900;
  transition: transform .3s ease, width .25s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kq-toc-float.kq-toc-collapsed {
  width: 36px;
}
.kq-toc-float.kq-toc-collapsed .kq-toc-nav { display: none; }

.kq-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: .5px solid rgba(123,63,196,.25);
  flex-shrink: 0;
}
.kq-toc-title {
  font-size: 11px;
  font-weight: 700;
  color: #c9a84c;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
}
.kq-toc-toggle {
  background: none;
  border: .5px solid rgba(123,63,196,.4);
  border-radius: 4px;
  color: #c9a84c;
  font-size: 14px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background .2s;
}
.kq-toc-toggle:hover { background: rgba(201,168,76,.15); }

.kq-toc-nav {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: 8px 0 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(123,63,196,.3) transparent;
}
.kq-toc-group { margin-bottom: 2px; }
.kq-toc-cung {
  display: block;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: #c4b5fd;
  text-decoration: none;
  transition: background .15s, color .15s;
  border-left: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kq-toc-cung:hover { background: rgba(123,63,196,.15); color: #e0d8f0; }
.kq-toc-cung.kq-toc-active {
  border-left-color: #c9a84c;
  color: #c9a84c;
  background: rgba(201,168,76,.08);
}
.kq-toc-secs {
  list-style: none;
  margin: 0;
  padding: 0 0 4px 20px;
}
.kq-toc-secs li { margin: 0; }
.kq-toc-secs a {
  display: block;
  padding: 3px 8px;
  font-size: 10px;
  color: rgba(196,181,253,.6);
  text-decoration: none;
  border-left: 1px solid rgba(123,63,196,.2);
  transition: color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kq-toc-secs a:hover { color: #e0d8f0; }

/* Mobile: hide TOC */
@media (max-width: 1024px) {
  .kq-toc-float { display: none !important; }
}

/* ════════════════════════════════════════════════
   PREVIEW CARDS — clickable version
   ════════════════════════════════════════════════ */
.kq-cung-preview-card.kq-cp-linked {
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.kq-cung-preview-card.kq-cp-linked:hover {
  border-color: #c9a84c !important;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(201,168,76,.15);
}
.kq-cp-detail-link {
  font-size: 11px;
  color: #c9a84c;
  margin-top: 8px;
  font-weight: 600;
}

/* Section headers + detail section labels */
.kq-preview-header { margin-bottom: 16px; }
.kq-detail-header  { margin: 32px 0 16px; }

/* Print: hide TOC */
@media print { .kq-toc-float { display: none !important; } }

/* ════════════════════════════════════════════
   AI RESPONSE TABLES — rendered from markdown
   ════════════════════════════════════════════ */
.klg-table-wrap {
  overflow-x: auto;
  margin: 12px 0;
  border-radius: 10px;
  border: .5px solid rgba(123,63,196,.3);
}
.klg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.6;
}
.klg-table th,
.klg-table td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: .5px solid rgba(123,63,196,.15);
  vertical-align: top;
}
.klg-table .klg-tr-head th {
  background: rgba(123,63,196,.18);
  color: #c9a84c;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .03em;
  border-bottom: 1px solid rgba(201,168,76,.3);
}
.klg-table .klg-tr-even td {
  background: rgba(255,255,255,.025);
}
.klg-table tr:last-child td,
.klg-table tr:last-child th { border-bottom: none; }
.klg-table tr:hover td { background: rgba(123,63,196,.08); }

/* AI unordered list */
.klg-ai-ul {
  margin: 8px 0 8px 16px;
  padding: 0;
}
.klg-ai-ul li {
  margin-bottom: 4px;
  color: var(--tvtt-color-lg-body, #c8bfaf);
}

@media (max-width: 640px) {
  .klg-table th, .klg-table td { padding: 7px 10px; font-size: 12px; }
}
/* Ẩn phần Ý Nghĩa Sơ Lược 12 Cung theo yêu cầu */
#kq-cung-preview-section {
  display: none !important;
}
/* ═══════════════════════════════════════════════════════════
   Ý nghĩa sơ lược dưới tên cung — Luận Giải Chi Tiết Các Cung
   Dán vào cuối file ket-qua-v2.css
═══════════════════════════════════════════════════════════ */
.klg-ynghia {
  font-size: 12.5px;
  color: rgba(200, 190, 175, .55);
  font-style: italic;
  line-height: 1.5;
  margin: 4px 0 0;
}
/* ═══════════════════════════════════════════════════════════
   Tóm tắt luận giải nhanh (AI) trong mỗi thẻ cung
   Dán vào cuối file ket-qua-v2.css
═══════════════════════════════════════════════════════════ */
.klg-ai-summary {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(201, 168, 76, .05);
  border-left: 2px solid rgba(201, 168, 76, .3);
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(220, 212, 198, .85);
}
.klg-ai-summary:empty { display: none; }
.klg-ai-summary p { margin: 6px 0; }
.klg-ai-summary ul { margin: 4px 0 8px; padding-left: 18px; }
.klg-ai-summary li { margin-bottom: 3px; }
.klg-ai-summary strong { color: #e8d8a0; }
.klg-ai-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #c9a84c;
  text-transform: uppercase;
}
.klg-ai-loading {
  font-size: 12px;
  font-style: italic;
  color: rgba(200, 190, 175, .4);
}