/* ============================================================
   CANCHI — TỬ VI ĐẨU SỐ DESIGN
   Aesthetic: Cổ phong Đông Á · Huyền bí · Vàng kim trên nền mực tàu
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,600;0,700;1,400&family=Ma+Shan+Zheng&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Core palette — mực tàu & vàng kim */
  --bg-deep:      #0d0b07;
  --bg-surface:   #131008;
  --bg-elevated:  #1c1710;
  --bg-cell:      #100e08;

  --border:       #2e2614;
  --border-gold:  #5a4a1a;
  --border-bright:#8a7030;

  --text-primary:  #f2e8c8;
  --text-secondary:#9e8d60;
  --text-dim:      #5c4f30;

  /* Accent: gold, vermillion, jade */
  --gold:         #c8a84b;
  --gold-bright:  #e8c96a;
  --gold-pale:    #f5e8b0;
  --vermillion:   #c03820;
  --vermillion-lt:#e04828;
  --jade:         #2a8060;
  --jade-lt:      #34d399;
  --cinnabar:     #d04030;

  /* Star element colors — ngũ hành */
  --red-400:    #e06050;
  --emerald-400:#4ab890;
  --amber-400:  #c8a030;
  --zinc-300:   #c8c0b0;
  --sky-400:    #5090c0;
  --purple-400: #9070b0;
  --blue-400:   #6090d0;

  /* Fonts */
  --font-body:    'Noto Serif', 'Times New Roman', serif;
  --font-display: 'Ma Shan Zheng', 'Noto Serif', serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
  /* Subtle noise texture */
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(200,168,75,.06) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  scrollbar-width: thin;
  scrollbar-color: var(--border-gold) var(--bg-deep);
}

body::-webkit-scrollbar { width: 4px; height: 4px; }
body::-webkit-scrollbar-track { background: var(--bg-deep); }
body::-webkit-scrollbar-thumb { background: var(--border-gold); }
body::-webkit-scrollbar-thumb:hover { background: var(--gold); }

a { color: var(--text-secondary); text-decoration: none; }
button { background: none; border: none; cursor: pointer; font-family: inherit; color: inherit; }
select { font-family: inherit; }
input { font-family: inherit; }

/* ============================================================
   LAYOUT
   ============================================================ */
.page { max-width: 960px; margin: 0 auto; padding: 2rem 1rem 4rem; }

/* ============================================================
   HEADER — Phong cách hoàng triều
   ============================================================ */
.header {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  padding: 1.5rem 0 1rem;
}

/* Top ornamental rule */
.header::before {
  content: '';
  display: block;
  width: 80%;
  max-width: 500px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-bright), var(--gold), transparent);
  margin: 0 auto 1.2rem;
}

/* Bottom ornamental rule */
.header::after {
  content: '';
  display: block;
  width: 60%;
  max-width: 360px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
  margin: 1rem auto 0;
}

.header h1 {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--gold-bright);
  text-shadow:
    0 0 30px rgba(200,168,75,.4),
    0 0 60px rgba(200,168,75,.15),
    0 1px 0 rgba(0,0,0,.8);
  position: relative;
}

/* ☽ ☆ flanking stars */
.header h1::before { content: '☽  '; color: var(--gold); opacity: .7; font-size: 2rem; vertical-align: middle; }
.header h1::after  { content: '  ☾'; color: var(--gold); opacity: .7; font-size: 2rem; vertical-align: middle; }

.header p {
  color: var(--text-secondary);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: .5rem;
  font-style: italic;
}

/* ============================================================
   FORM CARD — Khung giấy cổ
   ============================================================ */
.form-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
  padding: 2rem 2.5rem 2.5rem;
  position: relative;
  box-shadow:
    0 0 0 1px var(--border),
    inset 0 0 60px rgba(200,168,75,.03),
    0 8px 40px rgba(0,0,0,.6);
}

/* Corner ornaments */
.form-card::before,
.form-card::after {
  content: '◈';
  position: absolute;
  color: var(--gold);
  font-size: 1rem;
  opacity: .5;
}
.form-card::before { top: .5rem; left: .6rem; }
.form-card::after  { bottom: .5rem; right: .6rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2.5rem; }
@media(max-width:600px) { .form-grid { grid-template-columns: 1fr; } }

.form-group { display: flex; flex-direction: column; gap: .5rem; }
.form-group.full { grid-column: 1/-1; }

label {
  font-size: .7rem;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .15em;
  opacity: .85;
}

/* Thin decorative line under label */
label::after {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--border-gold);
  margin-top: .25rem;
}

.input-wrap { position: relative; }
.input-wrap svg.arrow {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--gold); opacity: .5;
}

input[type=text], select {
  width: 100%; height: 2.75rem; padding: 0 1rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-gold);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: .95rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
input[type=text]:focus, select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200,168,75,.12), inset 0 0 20px rgba(200,168,75,.03);
}
select { padding-right: 2rem; }

.date-group { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: .5rem; }

/* Submit button — Nút phong ấn */
.btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: linear-gradient(135deg, #b8902a 0%, #e8c050 40%, #c09030 100%);
  color: #0d0b07;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .08em;
  border: 1px solid var(--gold-bright);
  padding: .85rem 3rem;
  cursor: pointer;
  transition: all .25s;
  position: relative;
  box-shadow: 0 4px 20px rgba(200,168,75,.3), inset 0 1px 0 rgba(255,255,255,.2);
  text-shadow: none;
}
.btn-submit::before {
  content: '';
  position: absolute; inset: 3px;
  border: 1px solid rgba(255,240,160,.3);
  pointer-events: none;
}
.btn-submit:hover {
  background: linear-gradient(135deg, #c8a030 0%, #f0d060 40%, #d0a040 100%);
  box-shadow: 0 6px 30px rgba(200,168,75,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.btn-submit:active { transform: translateY(0); }

.form-actions { display: flex; justify-content: center; margin-top: 2rem; }

/* ============================================================
   GRID — Lưới Tử Vi
   ============================================================ */
.grid-wrapper { width: 100%; overflow: visible; position: relative; }

.laso-grid {
  display: grid;
  grid-template-rows: repeat(4, minmax(0,1fr));
  grid-template-columns: repeat(4, minmax(0,1fr));
  border: 1px solid var(--border-gold);
  background: var(--bg-deep);
  width: 960px; transform-origin: top left;
  box-shadow: 0 0 0 1px var(--border), 0 0 60px rgba(0,0,0,.8);
  position: relative;
}

/* Outer glow frame */
.laso-grid::after {
  content: '';
  position: absolute; inset: -3px;
  border: 1px solid rgba(200,168,75,.15);
  pointer-events: none;
}

/* ============================================================
   CENTER CELL — Trung Cung
   ============================================================ */
.laso-center {
  grid-column: span 2; grid-row: span 2;
  border: 1px solid var(--border-gold);
  padding: 1rem;
  display: flex; flex-direction: column; gap: .4rem;
  position: relative; overflow: visible;
  background:
    linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
  font-size: .85rem;
}

/* Decorative diagonal lines in center */
.laso-center::before {
  content: '';
  position: absolute; inset: 8px;
  border: 1px solid rgba(200,168,75,.08);
  pointer-events: none;
}

.laso-center h2 {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 400;
  color: var(--gold-bright);
  text-align: center;
  letter-spacing: .1em;
  text-shadow: 0 0 20px rgba(200,168,75,.3);
}
.laso-center .subtitle { text-align: center; color: var(--text-secondary); font-size: .72rem; letter-spacing: .05em; }
.center-hr {
  border: none;
  border-top: 1px solid;
  border-image: linear-gradient(90deg, transparent, var(--border-gold), transparent) 1;
  width: 70%; margin: .4rem auto;
}
.info-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .25rem; font-size: .78rem; }
.info-row .lbl { color: var(--text-dim); }
.info-row .val { font-weight: 600; color: var(--text-primary); }
.info-row .can { font-weight: 700; color: var(--gold); }

/* ============================================================
   CUNG CELL — Ô cung
   ============================================================ */
.cung-cell {
  border: 1px solid var(--border-gold);
  padding: .55rem .5rem;
  display: flex; flex-direction: column; gap: .3rem;
  cursor: pointer; position: relative;
  transition: background .2s, border-color .2s;
  background: var(--bg-cell);
}

/* Hover shimmer */
.cung-cell:hover {
  background: var(--bg-elevated);
  border-color: var(--gold);
}
.cung-cell:hover::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(200,168,75,.04) 0%, transparent 70%);
  pointer-events: none;
}

.cung-dimmed::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(13,11,7,.55); pointer-events: none; z-index: 10;
}

/* Cung header */
.cung-header {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; font-size: .75rem; font-weight: 500; overflow: visible;
}
.cung-header > *:first-child { justify-self: start; color: var(--text-secondary); }
.cung-header > *:last-child  { justify-self: end;   color: var(--text-secondary); }

.cung-name {
  text-transform: uppercase; font-weight: 700; font-size: .9rem;
  text-align: center; color: var(--gold-pale);
  font-family: var(--font-body);
  letter-spacing: .06em;
}

.cung-footer {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; font-size: .72rem; margin-top: auto;
  overflow: visible; color: var(--text-secondary);
}
.cung-footer > *:first-child { justify-self: start; }
.cung-footer > *:last-child  { justify-self: end; }

/* Stars area */
.saos-area {
  display: flex; flex: 1;
  justify-content: space-between;
  gap: .25rem; padding: 0 .25rem;
}
.sao-col { display: flex; flex-direction: column; min-height: 9rem; }

.chinh-tinh-area {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .12rem; min-height: 2.8rem; overflow: visible;
}
.chinh-tinh {
  font-size: 1rem; font-weight: 700; text-align: center; cursor: help;
  font-family: var(--font-body);
}
.phu-tinh { font-size: .8rem; cursor: help; text-align: left; }
.phu-tinh.important { font-weight: 700; }

/* ============================================================
   NGŨ HÀNH COLORS
   ============================================================ */
.nh-hoa   { color: var(--red-400);     }
.nh-moc   { color: var(--emerald-400); }
.nh-tho   { color: var(--amber-400);   }
.nh-kim   { color: var(--zinc-300);    }
.nh-thuy  { color: var(--sky-400);     }
.nh-default { color: var(--text-primary); }

/* ============================================================
   TOOLTIP
   ============================================================ */
.tooltip-wrap  { position: relative; display: inline-block; cursor: help; }
.tooltip-box {
  position: absolute; z-index: 200;
  min-width: 200px; max-width: 280px;
  padding: .6rem .75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  box-shadow: 0 8px 30px rgba(0,0,0,.7), 0 0 0 1px var(--border);
  pointer-events: none; font-size: .72rem; line-height: 1.55;
  animation: fadeIn .12s ease-out;
}
.tooltip-box.top    { bottom: calc(100% + 6px); left: 0; }
.tooltip-box.bottom { top: calc(100% + 6px); left: 0; }
.tooltip-box.center-x { left: 50%; transform: translateX(-50%); }
.tooltip-title { font-weight: 700; font-size: .78rem; color: var(--gold); margin-bottom: .3rem; }
.tooltip-body  { color: var(--text-secondary); }

.badge-row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .3rem; }
.badge {
  font-size: .62rem; padding: .1rem .4rem;
  font-weight: 700; border: 1px solid;
}
.badge.cat   { background: rgba(74,184,144,.1);  color: var(--emerald-400); border-color: rgba(74,184,144,.3);  }
.badge.hung  { background: rgba(224,96,80,.1);   color: var(--red-400);     border-color: rgba(224,96,80,.3);   }
.badge.mieu  { background: rgba(74,184,144,.1);  color: var(--emerald-400); border-color: rgba(74,184,144,.3);  }
.badge.vuong { background: rgba(96,144,208,.1);  color: var(--blue-400);    border-color: rgba(96,144,208,.3);  }
.badge.dac   { background: rgba(144,112,176,.1); color: var(--purple-400);  border-color: rgba(144,112,176,.3); }
.badge.ham   { background: rgba(224,96,80,.1);   color: var(--red-400);     border-color: rgba(224,96,80,.3);   }
.badge.binh  { background: rgba(255,255,255,.04); color: var(--text-secondary); border-color: var(--border-gold); }
.badge.tuhoa-ky { background: rgba(224,96,80,.1); color: var(--red-400); border-color: rgba(224,96,80,.3); }
.badge.tuhoa { background: rgba(200,160,48,.1); color: var(--gold); border-color: rgba(200,160,48,.3); }
.badge.loai  { background: rgba(255,255,255,.04); color: var(--text-secondary); border-color: var(--border-gold); }
.badge.than  { background: var(--vermillion); color: var(--gold-pale); border-color: var(--vermillion-lt); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

/* Triệt/Tuần badge */
.triet-badge {
  position: absolute; z-index: 30;
  background: var(--vermillion); color: var(--gold-pale);
  border: 1px solid rgba(232,201,106,.3);
  font-size: .62rem; font-weight: 700; padding: .1rem .4rem;
  transform: translate(-50%,-50%); white-space: nowrap; cursor: help;
}

/* ============================================================
   DAI HAN TIMELINE
   ============================================================ */
.timeline-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
  padding: .65rem .85rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.timeline-label {
  font-size: .68rem; font-weight: 600; color: var(--gold);
  text-transform: uppercase; letter-spacing: .12em; margin-bottom: .45rem;
  opacity: .8;
}
.timeline-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--border-gold) transparent;
}
.dai-han-row { display: flex; gap: 0; }

.dh-item {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  padding: .3rem .15rem;
  border: 1px solid var(--border-gold);
  cursor: pointer; transition: all .15s;
  background: var(--bg-deep); color: var(--text-secondary);
}
.dh-item:hover {
  background: var(--bg-elevated);
  border-color: var(--gold);
  color: var(--gold-pale);
}
.dh-item.active {
  background: linear-gradient(135deg, #8a6a1a, #c09030) !important;
  color: #0d0b07 !important;
  border-color: var(--gold) !important;
  z-index: 2;
}
.dh-item.active span { color: #0d0b07 !important; }
.dh-item.current {
  background: rgba(200,168,75,.08) !important;
  border-color: var(--gold) !important;
}
.dh-item.current.active {
  background: linear-gradient(135deg, #8a6a1a, #c09030) !important;
  color: #0d0b07 !important;
  border-color: var(--gold) !important;
}
.dh-item span { font-size: .62rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.dh-item .dh-age { font-size: .72rem; font-weight: 700; }

/* Tiểu hạn */
.tieu-han-wrap {
  margin-top: .45rem;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  padding: .4rem .5rem;
}
.tieu-han-sub-label {
  font-size: .62rem; font-weight: 600; color: var(--gold);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .35rem; opacity: .7;
}
.th-item {
  flex: 0 0 auto; min-width: 3.5rem; display: flex; flex-direction: column; align-items: center;
  padding: .2rem .1rem;
  border: 1px solid var(--border);
  cursor: pointer; transition: all .15s;
  background: var(--bg-deep); color: var(--text-secondary);
}
.th-item:hover { background: var(--bg-elevated); z-index: 1; border-color: var(--border-gold); }
.th-item.th-current {
  background: rgba(200,168,75,.08) !important;
  border-color: var(--gold) !important;
  font-weight: 700; color: var(--gold) !important;
}
.th-item span { font-size: .62rem; text-align: center; }

.timeline-legend { display: flex; gap: .8rem; align-items: center; margin-top: .5rem; flex-wrap: wrap; }
.legend-dot { width: .5rem; height: .5rem; border-radius: .1rem; display: inline-block; margin-right: .2rem; }

/* ============================================================
   LEGEND PANEL
   ============================================================ */
.legend-wrapper {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .3s ease, opacity .25s ease;
}
.legend-wrapper.open { grid-template-rows: 1fr; opacity: 1; }
.legend-inner { overflow: hidden; }
.legend-panel {
  padding: .85rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
}
.legend-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media(max-width:700px) { .legend-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:400px) { .legend-grid { grid-template-columns: 1fr; } }
.legend-section h4 {
  font-size: .68rem; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem;
  opacity: .8;
}
.legend-row { display: flex; align-items: center; gap: .4rem; font-size: .73rem; margin-bottom: .2rem; color: var(--text-secondary); }
.legend-color { width: .65rem; height: .65rem; flex-shrink: 0; }
.legend-box { width: 1rem; height: .65rem; flex-shrink: 0; border: 2px solid; }

/* ============================================================
   ACTION BUTTONS
   ============================================================ */
.action-bar {
  display: flex; gap: .5rem; justify-content: center;
  flex-wrap: wrap; margin-bottom: .5rem;
}

.canchi-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .38rem .75rem; font-size: .72rem;
  border: 1px solid var(--border-gold);
  color: var(--text-secondary);
  background: var(--bg-surface);
  transition: all .2s;
  letter-spacing: .04em;
}
.canchi-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--gold);
  color: var(--gold);
}
.canchi-btn:disabled { opacity: .4; pointer-events: none; }
.canchi-btn svg { width: .85rem; height: .85rem; flex-shrink: 0; }

/* ============================================================
   BACK BUTTON
   ============================================================ */
.back-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: var(--text-secondary);
  background: none; border: none; cursor: pointer;
  transition: color .15s; padding: 0; margin-bottom: .85rem;
  letter-spacing: .04em;
}
.back-btn:hover { color: var(--gold); }

/* ============================================================
   AI CARD
   ============================================================ */
.ai-card {
  margin-bottom: .6rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
  padding: .9rem 1rem;
  position: relative;
}
.ai-card::before {
  content: '✦  Giải Mệnh  ✦';
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--bg-surface);
  color: var(--gold); font-size: .68rem; letter-spacing: .15em;
  padding: 0 .75rem; white-space: nowrap;
}
.ai-title {
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold-pale);
  margin-top: .3rem;
}
.ai-note { margin-top: .3rem; font-size: .72rem; color: var(--text-secondary); }

.ai-key-row {
  margin-top: .6rem;
  display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center;
}
.ai-key-row input[type=password] {
  width: 100%; height: 2.4rem; padding: 0 .75rem;
  border: 1px solid var(--border-gold);
  background: var(--bg-deep);
  color: var(--text-primary); font-size: .8rem;
}
.ai-key-row input[type=password]:focus { border-color: var(--gold); outline: none; }
.ai-remember {
  display: flex; align-items: center; gap: .35rem;
  font-size: .72rem; color: var(--text-secondary);
}

.ai-topic-list { margin-top: .65rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.ai-topic-btn {
  border: 1px solid var(--border-gold);
  background: var(--bg-deep);
  color: var(--text-secondary);
  padding: .42rem .75rem; font-size: .76rem; font-weight: 600;
  line-height: 1; transition: all .15s;
}
.ai-topic-btn:hover { border-color: var(--gold); color: var(--gold-pale); }
.ai-topic-btn.active { background: var(--vermillion); color: var(--gold-pale); border-color: var(--vermillion-lt); }
.ai-topic-btn.overview { border-color: var(--gold); color: var(--gold); }
.ai-topic-btn.overview.active { background: linear-gradient(135deg,#8a6a1a,#c09030); color: #0d0b07; border-color: var(--gold-bright); }

.ai-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.ai-run-btn {
  background: var(--vermillion); color: var(--gold-pale);
  border: 1px solid var(--vermillion-lt);
  font-size: .88rem; font-weight: 700; padding: .45rem .8rem;
  letter-spacing: .04em;
}
.ai-run-btn:hover { background: var(--vermillion-lt); border-color: #f05838; color: var(--gold-pale); }
.ai-run-btn.ai-overview {
  background: linear-gradient(135deg,#8a6a1a,#c09030);
  border-color: var(--gold-bright); color: #0d0b07;
}
.ai-run-btn.ai-overview:hover {
  background: linear-gradient(135deg,#a07820,#d8a838);
  color: #0d0b07;
}
.ai-run-btn:disabled {
  background: #4a3010; border-color: #6a4820; color: #8a6030; opacity: 1;
}

.ai-status { min-height: 1.1rem; margin-top: .55rem; font-size: .73rem; color: var(--text-secondary); }
.ai-status.error   { color: var(--red-400); }
.ai-status.success { color: var(--emerald-400); }

.ai-output {
  margin-top: .55rem;
  border: 1px solid var(--border-gold);
  background: var(--bg-deep);
  padding: .75rem;
  min-height: 14rem;
  font-size: .8rem; line-height: 1.65; color: var(--text-primary);
  font-family: var(--font-body);
}
.ai-output h1,.ai-output h2,.ai-output h3,.ai-output h4 {
  margin: .5rem 0 .35rem; font-weight: 700; line-height: 1.3; color: var(--gold);
  font-family: var(--font-body); letter-spacing: .04em;
}
.ai-output h1 { font-size: 1.05rem; }
.ai-output h2 { font-size: .98rem; }
.ai-output h3 { font-size: .92rem; }
.ai-output h4 { font-size: .87rem; }
.ai-output p  { margin: .25rem 0; color: var(--text-primary); }
.ai-output strong { color: var(--gold-pale); font-weight: 700; }
.ai-output ul,.ai-output ol { margin: .2rem 0 .35rem 1.1rem; color: var(--text-primary); }
.ai-output li { margin: .12rem 0; }

@media(max-width:700px) {
  .ai-key-row { grid-template-columns: 1fr; }
  .ai-run-btn { font-size: .84rem; padding: .38rem .65rem; }
}

/* ============================================================
   SVG TAM PHUONG
   ============================================================ */
.tam-phuong-svg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5; overflow: visible;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.space-y > * + * { margin-top: .5rem; }
.text-coral    { color: var(--vermillion-lt); }
.text-secondary{ color: var(--text-secondary); }
.text-dim      { color: var(--text-dim); }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ============================================================
   PAGE LOAD ANIMATION
   ============================================================ */
.header, .form-card {
  animation: riseIn .6s ease-out both;
}
.form-card { animation-delay: .12s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SOLAR NOON / NOI SINH
   ============================================================ */
.noisinh-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-2, #1e1e2e); border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 10px; z-index: 999; max-height: 200px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.noisinh-item {
  padding: .6rem .9rem; cursor: pointer; font-size: .875rem;
  color: var(--text-primary, #e0e0e0); transition: background .15s;
}
.noisinh-item:hover, .noisinh-item.active { background: var(--surface-3, rgba(255,255,255,.08)); }
.noisinh-item .noisinh-sub { font-size: .75rem; opacity: .55; }

.solar-info {
  margin-top: .45rem; padding: .5rem .8rem; border-radius: 8px;
  background: rgba(255,200,80,.08); border: 1px solid rgba(255,200,80,.2);
  font-size: .8rem; color: var(--text-secondary, #aaa); line-height: 1.5;
}
.solar-info .solar-noon-val { color: #ffd060; font-weight: 600; }
.solar-info .solar-adj { color: #80e8a0; font-weight: 600; }
.solar-info .solar-err { color: #ff7070; }

.time-input-wrap { display: flex; align-items: center; gap: 2px; }

#grp-gio-canchi label { color: var(--text-secondary, #aaa); }