/* ════════════════════════════════════
   KẾT QUẢ PAGE v2 (ket-qua-v2.css)
   Dark theme matching tuvi_product
════════════════════════════════════ */

/* ─── Page layout ─── */
#kq-page {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  padding-top: 64px;
  background: #0b0b18;
}
@media(max-width:860px) {
  #kq-page { grid-template-columns: 1fr; }
  #kq-sidebar { position: static !important; height: auto; border-right: none; border-bottom: .5px solid #1e1e30; }
}

/* ─── Sidebar ─── */
#kq-sidebar {
  position: sticky; top: 64px;
  height: calc(100vh - 64px); overflow-y: auto;
  background: #080812;
  border-right: .5px solid #1a1a2e;
  scrollbar-width: thin; scrollbar-color: #1e1e30 transparent;
}
.kq-sb-inner { padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; }

.kq-user-card { display: flex; align-items: center; gap: 10px; padding: 12px; background: #0f0f1f; border: .5px solid #1e1e30; border-radius: 10px; }
.kq-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--purple,#7B3FC4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; flex-shrink: 0; }
.kq-user-name  { font-size: 13px; font-weight: 500; color: #e8e0d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.kq-user-email { font-size: 11px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.kq-logout { background: none; border: none; color: #6b7280; cursor: pointer; padding: 5px; border-radius: 5px; margin-left: auto; transition: color .2s; flex-shrink: 0; }
.kq-logout:hover { color: #ef4444; }

.kq-guest-bar { display: flex; align-items: flex-start; gap: 10px; color: #6b7280; padding: 10px; }
.kq-login-link { font-size: 12px; color: var(--glow,#C4A8FF); display: block; margin-top: 2px; }

.kq-new-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; background: rgba(123,63,196,.15);
  border: .5px solid rgba(196,168,255,.2); border-radius: 8px;
  color: var(--glow,#C4A8FF); text-decoration: none; font-size: 13px; font-weight: 500;
  transition: background .2s;
}
.kq-new-btn:hover { background: rgba(123,63,196,.28); color: var(--glow,#C4A8FF); }

.kq-history-section { flex: 1; }
.kq-history-lbl { font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold,#E8C97A); margin-bottom: 8px; padding: 4px 2px 0; }
#kq-history-list { display: flex; flex-direction: column; gap: 5px; }
.kq-loading-sm { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #6b7280; padding: 4px 2px; }
.kq-spin-sm { display: inline-block; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #2a2a3a; border-top-color: var(--purple,#7B3FC4); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.kq-hi-item { display: block; padding: 9px 10px; border: .5px solid #1a1a2e; border-radius: 7px; background: #0c0c1c; text-decoration: none; transition: border-color .2s, background .2s; cursor: pointer; }
.kq-hi-item:hover  { border-color: #2a2a3a; background: #0f0f22; }
.kq-hi-item.active { border-color: rgba(123,63,196,.6); background: rgba(123,63,196,.1); }
.kq-hi-name { font-size: 13px; font-weight: 500; color: #e8e0d0; margin-bottom: 2px; }
.kq-hi-meta { font-size: 11px; color: #6b7280; line-height: 1.4; }
.kq-hi-empty { font-size: 13px; color: #6b7280; padding: 4px 2px; }

/* ─── Main ─── */
#kq-main { padding: 28px 36px 60px; min-width: 0; }
@media(max-width:768px) { #kq-main { padding: 20px 16px 48px; } }

.kq-full-center { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.kq-loading-box { text-align: center; }
.kq-loading-ring { width: 44px; height: 44px; border-radius: 50%; border: 3px solid #1e1e30; border-top-color: var(--purple,#7B3FC4); animation: spin 1s linear infinite; margin: 0 auto 16px; }
#kq-loading-msg { font-size: 14px; color: #6b7280; }

.kq-prompt-box { text-align: center; padding: 48px 32px; background: #0f0f1f; border: .5px solid #1e1e30; border-radius: 20px; max-width: 400px; }
.kq-prompt-stars { color: var(--gold,#E8C97A); font-size: 18px; letter-spacing: 5px; margin-bottom: 18px; }
.kq-prompt-box h2 { font-size: 22px; color: #e8e0d0; margin-bottom: 10px; }
.kq-prompt-box p  { font-size: 14px; color: #6b7280; margin-bottom: 20px; line-height: 1.6; }

/* ─── Result header ─── */
.kq-result-hdr { margin-bottom: 20px; }
.kq-result-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.kq-result-h1 { font-family: 'Playfair Display',serif; font-size: clamp(20px,3vw,30px); color: #e8e0d0; margin: 0; }
.kq-result-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.kq-act-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 8px 14px;
  border-radius: 7px; border: .5px solid #2a2a3a; cursor: pointer; font-family: 'Inter',sans-serif;
  background: transparent; transition: .2s;
}
.kq-pdf-btn  { color: var(--gold,#E8C97A); border-color: rgba(232,201,122,.3); }
.kq-pdf-btn:hover { background: rgba(232,201,122,.08); }
.kq-send-btn { color: var(--glow,#C4A8FF); }
.kq-send-btn:hover { background: rgba(196,168,255,.07); border-color: rgba(196,168,255,.3); }

.kq-meta-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-chip {
  font-size: 12px; color: #9ca3af; background: #0f0f1f;
  border: .5px solid #1e1e30; border-radius: 6px; padding: 4px 10px;
}
.meta-chip span { color: #e8c97a; font-weight: 500; }

/* ─── Tabs ─── */
.kq-tabs { display: flex; border-bottom: .5px solid #1e1e30; margin-bottom: 20px; }
.kq-tab {
  padding: 10px 20px; background: none; border: none; font-family: 'Inter',sans-serif;
  font-size: 14px; color: #6b7280; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.kq-tab:hover { color: #e8e0d0; }
.kq-tab.active { color: var(--glow,#C4A8FF); border-bottom-color: var(--purple,#7B3FC4); }
@media(max-width:480px) { .kq-tab { padding: 10px 12px; font-size: 13px; } }

.kq-panel { display: none; }
.kq-panel.active { display: block; animation: fadeUp .3s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ─── LÁ SỐ GRID (từ tuvi_final.html, dark theme) ─── */
.la-so-title {
  font-family: 'Playfair Display',serif; font-size: 16px; font-weight: 600;
  color: var(--gold,#E8C97A); text-align: center; margin-bottom: 12px;
  letter-spacing: .04em;
}
.la-so-grid {
  display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(4,1fr);
  gap: 3px; min-width: 460px; aspect-ratio: 1/1;
}
.cung-cell {
  background: #0b0b18; border: 1px solid #222236; border-radius: 5px;
  display: grid; grid-template-rows: auto 1fr auto auto;
  min-height: 110px; padding: 0; overflow: hidden;
  opacity: 0; animation: cellIn .4s ease forwards; position: relative;
}
@keyframes cellIn { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }
.cung-cell:hover { background: #101022; border-color: #3a3a55; }
.cung-cell.is-menh { border: 2px solid #c9a84c; box-shadow: inset 0 0 20px rgba(201,168,76,.08),0 0 10px rgba(201,168,76,.1); }
.cung-cell.is-than  { border: 2px solid #6a9fd8; box-shadow: inset 0 0 16px rgba(106,159,216,.08); }

.cung-header { display: flex; align-items: center; justify-content: space-between; padding: 3px 6px 2px; background: #08080f; border-bottom: 1px solid #1c1c2e; gap: 4px; flex-shrink: 0; }
.cung-name { font-size: clamp(7px,.9vw,10px); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4b5563; line-height: 1; }
.cung-chi  { font-family: 'Playfair Display',serif; font-size: clamp(10px,1.3vw,13px); font-weight: 600; color: #6b7280; line-height: 1; flex-shrink: 0; }
.badge-mt  { font-size: 7px; font-weight: 700; letter-spacing: .03em; padding: 1px 4px; border-radius: 2px; line-height: 1.4; flex-shrink: 0; }
.badge-m   { background: rgba(201,168,76,.18); color: #c9a84c; border: 1px solid rgba(201,168,76,.4); }
.badge-t   { background: rgba(96,165,250,.15); color: #93c5fd; border: 1px solid #1d4ed8; }
.badge-tuan   { font-size: 7px; color: #9ca3af; }
.badge-triet  { font-size: 7px; color: #6b7280; }
.cung-sao-wrapper { display: flex; gap: 0; padding: 3px 5px 2px; min-height: 0; overflow: hidden; }
.cung-sao-tot,.cung-sao-xau { flex: 1; min-width: 0; font-size: clamp(7px,.8vw,9px); line-height: 1.45; overflow: hidden; }
.cung-sao-xau { text-align: right; }
.phu-tinh-item { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cung-chinh-tinh { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px 4px; gap: 2px; border-top: 1px solid #151528; border-bottom: 1px solid #151528; text-align: center; }
.chinh-tinh-item { display: flex; flex-direction: column; align-items: center; gap: 1px; animation: saoIn .35s ease both; }
@keyframes saoIn { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
.ct-name { font-size: clamp(9px,1.2vw,13px); font-weight: 700; white-space: nowrap; letter-spacing: .01em; line-height: 1.2; }
.badge-mieu  { background:#0d2b1a;color:#4ade80;font-size:7px;padding:1px 5px;border-radius:2px;border:1px solid #166534; }
.badge-vuong { background:#0c1e3a;color:#93c5fd;font-size:7px;padding:1px 5px;border-radius:2px;border:1px solid #1d4ed8; }
.badge-dac   { background:#1e1e1e;color:#d1d5db;font-size:7px;padding:1px 5px;border-radius:2px;border:1px solid #374151; }
.badge-binh  { background:#111;color:#6b7280;font-size:7px;padding:1px 5px;border-radius:2px;border:1px solid #2a2a2a; }
.badge-ham   { background:#2d0a0a;color:#fca5a5;font-size:7px;padding:1px 5px;border-radius:2px;border:1px solid #7f1d1d; }
.badge-hoa-loc   { background:#78350f;color:#fbbf24;font-size:7px;padding:1px 6px;border-radius:2px;border:1px solid #92400e; }
.badge-hoa-quyen { background:#7c2d12;color:#fb923c;font-size:7px;padding:1px 6px;border-radius:2px;border:1px solid #9a3412; }
.badge-hoa-khoa  { background:#4c1d95;color:#c4b5fd;font-size:7px;padding:1px 6px;border-radius:2px;border:1px solid #5b21b6; }
.badge-hoa-ky    { background:#7f1d1d;color:#fca5a5;font-size:7px;padding:1px 6px;border-radius:2px;border:1px solid #991b1b; }
.hoa-badge { display:inline-flex;align-items:center;font-weight:700;letter-spacing:.02em; }
.hoa-suffix { font-size:8px;font-weight:700;margin-left:2px;vertical-align:middle;cursor:default; }
.hoa-suffix[data-tooltip]:hover::after,.hoa-badge[data-tooltip]:hover::after { opacity:1; }
.hoa-suffix[data-tooltip],.hoa-badge[data-tooltip] { position:relative; }
.hoa-suffix[data-tooltip]::after,.hoa-badge[data-tooltip]::after {
  content:attr(data-tooltip);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  background:#1a1a2e;color:#e8e0d0;font-size:10px;font-weight:400;white-space:nowrap;
  padding:4px 8px;border-radius:4px;border:1px solid #3a3a55;box-shadow:0 4px 12px rgba(0,0,0,.6);
  pointer-events:none;opacity:0;transition:opacity .15s;z-index:100;
}
.chinh-tinh-item.has-hoa .ct-name { filter:brightness(1.15); }
.cung-trang-sinh { text-align:center;font-size:clamp(7px,.8vw,9px);font-style:italic;padding:2px 4px;border-top:1px solid #111124;color:#4b5563;opacity:.82;line-height:1.3; }
.cung-trang-sinh.trang-sinh-tot { font-weight:600;font-style:normal;letter-spacing:.02em; }

.cell-center {
  grid-column:2/4;grid-row:2/4;
  background: linear-gradient(135deg,#0e0e20,#12122a);
  border: 1px solid #1e1e35; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; padding: 14px 10px; text-align: center; gap: 6px;
  position: relative;
}
.cell-center::before { content:''; position:absolute;inset:8px;border:1px solid #1a1a30;border-radius:3px;pointer-events:none; }
.c-name  { font-family:'Playfair Display',serif;font-size:clamp(12px,2vw,16px);font-weight:600;color:var(--gold,#E8C97A);line-height:1.2;word-break:break-word; }
.c-year  { font-size:clamp(9px,1.3vw,12px);color:#6b7280;font-style:italic; }
.c-line  { width:60%;height:1px;background:#1e1e30;margin:4px auto; }
.c-row   { font-size:clamp(9px,1.2vw,11px);color:#9ca3af;line-height:1.4; }
.c-row span { color:#c9a84c;font-weight:600; }
.c-gender{ font-size:clamp(8px,1vw,10px);color:#6b7280;font-style:italic;margin-top:2px; }

/* ─── AI Panel ─── */
.kq-api-bar { display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px;background:#0c0c1a;border:1px solid #1a1a2e;border-radius:10px;margin-bottom:16px; }
.kq-api-input { flex:1;min-width:200px;padding:9px 12px;background:#0a0a14;border:.5px solid #2a2a3a;border-radius:7px;color:#e8e0d0;font-family:'Inter',sans-serif;font-size:13px;outline:none;transition:border-color .2s; }
.kq-api-input:focus { border-color:var(--purple,#7B3FC4); }
.kq-api-input::placeholder { color:#4b5563; }
.kq-api-eye { background:none;border:none;cursor:pointer;color:#6b7280;font-size:15px;padding:5px;transition:color .2s; }
.kq-api-eye:hover { color:#e8e0d0; }
.kq-vande-wrap { position:relative; }
.kq-vande-sel { padding:9px 32px 9px 12px;background:#0a0a14;border:.5px solid #2a2a3a;border-radius:7px;color:#e8e0d0;font-family:'Inter',sans-serif;font-size:13px;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='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center; }
.kq-vande-sel option { background:#1a1a2e; }
.kq-luan-giai-btn { padding:9px 18px;background:rgba(123,63,196,.2);border:1px solid rgba(196,168,255,.25);border-radius:7px;color:var(--glow,#C4A8FF);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:.2s;white-space:nowrap; }
.kq-luan-giai-btn:hover { background:rgba(123,63,196,.35); }
.kq-luan-giai-btn:disabled { opacity:.5;cursor:not-allowed; }

.kq-ai-placeholder { text-align:center;padding:48px 24px; }
.kq-ai-ph-icon { font-size:32px;color:rgba(196,168,255,.3);margin-bottom:16px; }
.kq-ai-placeholder p { font-size:14px;color:#6b7280;line-height:1.6;max-width:400px;margin:0 auto; }

#kq-ai-content { font-size:15px;line-height:1.8;color:#c8bde0; }
#kq-ai-content h2 { font-family:'Playfair Display',serif;font-size:22px;color:#e8e0d0;margin:28px 0 14px;padding-bottom:10px;border-bottom:.5px solid #1e1e30; }
#kq-ai-content h3 { font-size:17px;color:var(--glow,#C4A8FF);margin:22px 0 10px; }
#kq-ai-content strong { color:#e8e0d0; }
#kq-ai-content p { margin-bottom:1em; }
#kq-ai-content ul,#kq-ai-content ol { padding-left:1.4em;margin-bottom:1em; }
#kq-ai-content li { margin-bottom:.5em; }
.kq-ai-loading { text-align:center;padding:40px; }
.kq-ai-loading p { font-size:13px;color:#6b7280;margin-top:12px; }
.kq-ai-error { padding:16px;background:rgba(239,68,68,.1);border:.5px solid rgba(239,68,68,.3);border-radius:8px;color:#fca5a5;font-size:14px;margin-top:12px; }

/* ─── Summary tab ─── */
.sum-table { width:100%;border-collapse:collapse;font-size:14px; }
.sum-table td { padding:10px 14px;border-bottom:.5px solid #1a1a2e;vertical-align:top;line-height:1.5; }
.sum-table tr:last-child td { border-bottom:none; }
.sum-table td:first-child { color:#6b7280;font-weight:500;white-space:nowrap;width:36%; }
.sum-table td:last-child  { color:#c8bde0; }
.sum-table .hl { color:#c9a84c;font-weight:600; }
.sao-chip { display:inline-flex;align-items:center;gap:4px;background:#0f0f1f;border:.5px solid #1e1e30;border-radius:5px;padding:2px 7px;font-size:12px;color:#9ca3af;margin:2px 3px 2px 0; }
.sao-chip .sc { color:#e8e0d0;font-weight:500; }

/* ─── CTA box ─── */
.kq-cta-box { margin-top:32px;padding:28px 24px;text-align:center;background:#0f0f1f;border:.5px solid #1e1e30;border-radius:16px; }
.kq-cta-stars { color:var(--gold,#E8C97A);font-size:16px;letter-spacing:4px;margin-bottom:12px; }
.kq-cta-box h3 { font-size:18px;color:#e8e0d0;margin-bottom:10px; }
.kq-cta-box p  { font-size:14px;color:#6b7280;line-height:1.6;margin-bottom:20px;font-weight:300; }

/* ─── Send modal ─── */
.kq-modal {
  position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:fadeUp .2s ease;
}
.kq-modal-box { background:#0f0f1f;border:.5px solid #2a2a3a;border-radius:16px;padding:28px;max-width:380px;width:100%; }
.kq-modal-title { font-family:'Playfair Display',serif;font-size:20px;color:#e8e0d0;margin-bottom:8px; }
.kq-modal-desc  { font-size:13px;color:#6b7280;margin-bottom:18px;line-height:1.5; }
.kq-modal-tabs  { display:flex;gap:4px;background:#0a0a14;border-radius:8px;padding:3px;margin-bottom:14px; }
.kq-mtab { flex:1;padding:7px;font-family:'Inter',sans-serif;font-size:13px;background:transparent;border:none;border-radius:6px;color:#6b7280;cursor:pointer;transition:.2s; }
.kq-mtab.active { background:var(--purple,#7B3FC4);color:#fff; }
.kq-send-info { font-size:13px;color:#9ca3af;padding:10px 12px;background:#0a0a14;border-radius:7px;margin-bottom:10px; }
.kq-modal-input { width:100%;padding:10px 12px;background:#0a0a14;border:.5px solid #2a2a3a;border-radius:7px;color:#e8e0d0;font-family:'Inter',sans-serif;font-size:13px;outline:none;transition:border-color .2s;margin-bottom:10px; }
.kq-modal-input:focus { border-color:var(--purple,#7B3FC4); }
.kq-modal-input::placeholder { color:#4b5563; }
.kq-send-status { padding:10px 14px;border-radius:7px;font-size:13px;font-weight:500;margin-bottom:10px; }
.kq-send-status.ok  { background:rgba(29,158,117,.15);color:#4ade80;border:.5px solid rgba(29,158,117,.3); }
.kq-send-status.err { background:rgba(239,68,68,.12);color:#fca5a5;border:.5px solid rgba(239,68,68,.3); }
.kq-modal-actions { display:flex;gap:10px;justify-content:flex-end; }
.kq-modal-cancel { padding:9px 18px;border-radius:7px;border:.5px solid #2a2a3a;background:none;color:#6b7280;font-family:'Inter',sans-serif;font-size:13px;cursor:pointer; }
.kq-modal-send   { padding:9px 20px;border-radius:7px;border:none;background:var(--purple,#7B3FC4);color:#fff;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .2s; }
.kq-modal-send:hover { background:var(--violet,#9B5FE0); }
.kq-modal-send:disabled { opacity:.6;cursor:not-allowed; }

/* ─── History (mobile collapse) ─── */
@media(max-width:860px) {
  #kq-sidebar { position:static; height:auto; }
  .kq-history-section { max-height:200px;overflow-y:auto; }
}

/* ─── Print ─── */
@media print {
  #kq-sidebar,#site-header,#site-footer,.kq-result-acts,.kq-tabs,.kq-cta-box,.kq-api-bar { display:none!important; }
  #kq-main { padding:0; }
  .kq-panel { display:block!important; }
  body,#kq-page,#kq-main { background:#fff!important;color:#111!important; }
  .la-so-grid { min-width:100%;aspect-ratio:auto; }
  .cung-cell { background:#f9f9f9!important;border:1px solid #ccc!important;opacity:1!important; }
  .cung-header { background:#eee!important; }
  .cung-name,.cung-chi,.ct-name { color:#111!important; }
}