/* ═══════════════════════════════════════════════════════════════════
 * Chợ Giá · Lịch âm — v8.1.1 Extras
 * - Light theme overrides
 * - Tab panels (Đổi ngày, So sánh ngày)
 * Loaded AFTER licham.css → win cascade for overrides
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── LIGHT THEME ─────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg: #f9f7ee;
  --bg-card: #ffffff;
  --bg-soft: #f4efe4;
  --text1: #1a1208;
  --text2: #3d3528;
  --text3: #5c5444;
  --text4: #8b8270;
  --line: #d8cfb8;
  --line-soft: #e8dfca;
  --gold: #b8851c;
  --gold-dark: #8a630b;
  --jade: #2d8c5c;
  --vermil: #b8392d;
}

/* Force background + text màu cho light theme — đảm bảo dù CSS chính có
 * specificity cao thì light vẫn override */
html[data-theme="light"],
html[data-theme="light"] body {
  background: #f9f7ee !important;
  color: #1a1208 !important;
}

/* Card backgrounds */
html[data-theme="light"] .lc-card,
html[data-theme="light"] .lc-hero,
html[data-theme="light"] .lc-stat,
html[data-theme="light"] .lc-block,
html[data-theme="light"] .lm-card,
html[data-theme="light"] .lm-hero,
html[data-theme="light"] .lm-block {
  background: #ffffff !important;
  border-color: #d8cfb8 !important;
}

/* Text colors trong light */
html[data-theme="light"] .lc-row-lbl,
html[data-theme="light"] .lc-foot-bsub,
html[data-theme="light"] .lm-row-lbl,
html[data-theme="light"] .lm-foot-bsub {
  color: #5c5444 !important;
}

html[data-theme="light"] .lc-row-val,
html[data-theme="light"] .lm-row-val,
html[data-theme="light"] .lc-tab,
html[data-theme="light"] .lm-tab,
html[data-theme="light"] h1, html[data-theme="light"] h2,
html[data-theme="light"] h3, html[data-theme="light"] h4 {
  color: #1a1208 !important;
}

html[data-theme="light"] .lc-tab.active,
html[data-theme="light"] .lm-tab.active {
  color: #8a630b !important;
  border-bottom-color: #b8851c !important;
}

html[data-theme="light"] a {
  color: #8a630b;
}

html[data-theme="light"] .lc-foot,
html[data-theme="light"] .lm-foot {
  background: #f4efe4 !important;
  border-top-color: #d8cfb8 !important;
}

html[data-theme="light"] .lc-foot-link,
html[data-theme="light"] .lc-kw,
html[data-theme="light"] .lm-foot-link {
  color: #3d3528 !important;
}

html[data-theme="light"] .lc-foot-link:hover,
html[data-theme="light"] .lm-foot-link:hover {
  color: #8a630b !important;
}

html[data-theme="light"] .lc-trust-badge,
html[data-theme="light"] .lm-foot-trust-b {
  background: #ffffff !important;
  border-color: #d8cfb8 !important;
  color: #3d3528 !important;
}

/* Hero numbers */
html[data-theme="light"] .lc-hero-d-big,
html[data-theme="light"] .lm-hero-d-big {
  color: #1a1208 !important;
}

/* Calendar/datepicker trong light */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] button {
  background: #ffffff;
  color: #1a1208;
  border-color: #d8cfb8;
}

/* ─── TAB PANELS ──────────────────────────────────────────────────── */
/* Default: ẩn panel, hiện khi active */
.lc-tab-panel, .lm-tab-panel {
  display: none;
  padding: 20px;
  margin: 16px 0;
  background: rgba(236, 200, 128, 0.04);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
}
.lc-tab-panel.active, .lm-tab-panel.active {
  display: block;
  animation: lc-fade-in 0.2s ease;
}
@keyframes lc-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Khi 1 trong các panel "ảo" active → ẩn nội dung chính (today) */
body.lc-panel-active .lc-hero-wrap,
body.lc-panel-active .lc-grid,
body.lc-panel-active .lc-article,
body.lc-panel-active .lm-hero-wrap,
body.lc-panel-active .lm-card,
body.lc-panel-active .lm-tn-wrap,
body.lc-panel-active .lm-faq,
body.lc-panel-active .lc-faq {
  display: none;
}

/* ─── ĐỔI NGÀY (CONVERTER) ────────────────────────────────────────── */
.lc-conv {
  max-width: 640px;
  margin: 0 auto;
}
.lc-conv-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold, #d4a857);
  margin-bottom: 6px;
  text-align: center;
}
.lc-conv-sub {
  color: var(--text3, #8b8270);
  text-align: center;
  font-size: 13px;
  margin-bottom: 18px;
}
.lc-conv-mode {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 4px;
}
html[data-theme="light"] .lc-conv-mode {
  background: rgba(0, 0, 0, 0.05);
}
.lc-conv-mode button {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: 0;
  color: var(--text3, #8b8270);
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}
.lc-conv-mode button.active {
  background: var(--gold, #d4a857);
  color: #1a1208;
}
.lc-conv-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .lc-conv-form {
    grid-template-columns: repeat(3, 1fr);
  }
  .lc-conv-form button {
    grid-column: 1 / -1;
  }
}
.lc-conv-form input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 15px;
  font-family: inherit;
  text-align: center;
}
html[data-theme="light"] .lc-conv-form input {
  background: #ffffff;
  border-color: #d8cfb8;
}
.lc-conv-form input:focus {
  outline: 2px solid var(--gold, #d4a857);
  outline-offset: 1px;
}
.lc-conv-form button {
  padding: 10px 18px;
  background: var(--gold, #d4a857);
  color: #1a1208;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.lc-conv-form button:hover { background: var(--gold-dark, #b8851c); }

.lc-conv-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  justify-content: center;
}
.lc-conv-quick button {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  color: var(--text2, #cdd6df);
  border-radius: 16px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.lc-conv-quick button:hover {
  border-color: var(--gold, #d4a857);
  color: var(--gold, #d4a857);
}

.lc-conv-result {
  padding: 20px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  margin-top: 10px;
}
html[data-theme="light"] .lc-conv-result {
  background: rgba(255, 255, 255, 0.6);
}
.lc-conv-result.empty {
  color: var(--text4, #8b8270);
  font-style: italic;
}
.lc-conv-result .lbl {
  display: block;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text4, #8b8270);
  margin-bottom: 6px;
}
.lc-conv-result .val {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--gold, #d4a857);
  margin-bottom: 8px;
}
.lc-conv-result .sub {
  font-size: 14px;
  color: var(--text2, #cdd6df);
  margin-bottom: 12px;
}
.lc-conv-result a {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 16px;
  background: var(--gold, #d4a857);
  color: #1a1208;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
}
.lc-conv-result a:hover { background: var(--gold-dark, #b8851c); }
.lc-conv-result.error { color: var(--vermil, #c8463a); }

/* ─── SO SÁNH NGÀY (COMPARE) ──────────────────────────────────────── */
.lc-cmp {
  max-width: 760px;
  margin: 0 auto;
}
.lc-cmp-title { font-size: 20px; font-weight: 700; color: var(--gold, #d4a857); margin-bottom: 6px; text-align: center; }
.lc-cmp-sub { color: var(--text3, #8b8270); text-align: center; font-size: 13px; margin-bottom: 18px; }

.lc-cmp-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .lc-cmp-inputs { grid-template-columns: 1fr; }
}
.lc-cmp-side {
  padding: 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  border-radius: 8px;
}
.lc-cmp-side h4 {
  margin: 0 0 8px 0;
  color: var(--gold, #d4a857);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.lc-cmp-side input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-family: inherit;
  margin-bottom: 6px;
  font-size: 14px;
}
html[data-theme="light"] .lc-cmp-side input { background: #ffffff; }
.lc-cmp-side input:focus { outline: 2px solid var(--gold, #d4a857); }

.lc-cmp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.lc-cmp-actions button {
  padding: 10px 18px;
  border-radius: 8px;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.lc-cmp-actions button.primary {
  background: var(--gold, #d4a857);
  color: #1a1208;
}
.lc-cmp-actions button.primary:hover { background: var(--gold-dark, #b8851c); }
.lc-cmp-actions button.secondary {
  background: transparent;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  color: var(--text2, #cdd6df);
}

.lc-cmp-result {
  display: none;
  margin-top: 10px;
}
.lc-cmp-result.shown { display: block; }
.lc-cmp-table {
  width: 100%;
  border-collapse: collapse;
}
.lc-cmp-table th, .lc-cmp-table td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  font-size: 14px;
}
.lc-cmp-table th {
  font-weight: 600;
  color: var(--text4, #8b8270);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.lc-cmp-table th:first-child, .lc-cmp-table td:first-child {
  text-align: left;
  color: var(--text3, #8b8270);
  font-size: 12px;
  width: 30%;
}
.lc-cmp-table td.better {
  color: var(--jade, #7dd3a0);
  font-weight: 700;
}
.lc-cmp-table td.worse {
  color: var(--vermil, #c8463a);
}
.lc-cmp-loading {
  text-align: center;
  padding: 30px;
  color: var(--text4, #8b8270);
  font-style: italic;
}

/* ─── MOBILE TAB PANELS variants ───────────────────────────────────── */
.lm-tab-panel.active {
  padding: 14px;
}

/* v8.1.2 — ô chọn Tháng nhuận trong bộ đổi ngày (Âm → Dương) */
.lc-conv-leap{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text3,#9aa);white-space:nowrap;cursor:pointer;user-select:none}
.lc-conv-leap[hidden]{display:none}
.lc-conv-leap input{width:16px;height:16px;accent-color:var(--gold,#e6a817);cursor:pointer}

/* ===== Back to Top (v8.2) ===== */
.lc-top{position:fixed;right:16px;bottom:20px;z-index:60;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--lineStrong,rgba(212,168,80,.32));border-radius:50%;background:var(--card,#161616);color:var(--gold,#d4a857);cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.lc-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.lc-top:hover{background:var(--cardHi,#1c1c1c);border-color:var(--gold,#d4a857)}
/* tránh đè lên bottom-nav mobile */
@media (max-width:768px){ .lc-top{bottom:74px;right:12px;width:42px;height:42px} }

/* ===== Sao internal links (v8.2 Đợt B) ===== */
.lc-sao-link{color:inherit;text-decoration:none;border-bottom:1px dashed currentColor;transition:opacity .15s}
.lc-sao-link:hover{opacity:.75}
.lc-sao-chip:hover{border-color:var(--gold,#d4a857);color:var(--gold,#d4a857)!important}
.lc-sao-body p{margin:0 0 14px}

/* ============================================================
   BÁCH KHOA SAO — giao diện chuyên nghiệp (v8.2 Đợt B redesign)
   ============================================================ */
.lc-sao-main{max-width:880px;margin:0 auto;padding:18px 16px 10px}
.lc-bc{font-size:13px;color:var(--text3,#9a9a9a);margin:6px 0 18px}
.lc-bc a{color:var(--text2,#c9c9c9);text-decoration:none}
.lc-bc a:hover{color:var(--gold,#d4a857)}
.lc-bc .sep{margin:0 6px;opacity:.5}
.lc-bc .cur{color:var(--text1,#fff)}

/* Hero */
.lc-sao-article{}
.lc-sao-hero{display:flex;gap:18px;align-items:center;background:linear-gradient(135deg,var(--card,#161616),var(--cardHi,#1c1c1c));border:1px solid var(--line,#2a2a2a);border-radius:16px;padding:22px 24px;margin-bottom:14px}
.lc-sao-hero-emblem{flex:0 0 auto;width:72px;height:72px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:var(--nat,#d4a857);background:rgba(255,255,255,.04);border:1.5px solid var(--nat,#d4a857)}
.lc-sao-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3,#9a9a9a);font-weight:600}
.lc-sao-hero-main h1{margin:3px 0 4px;font-size:28px;line-height:1.15;color:var(--text1,#fff)}
.lc-sao-full{color:var(--text3,#9a9a9a);font-size:14px;margin-bottom:10px}
.lc-sao-natbadge{display:inline-block;font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:20px;color:var(--nat,#d4a857);background:color-mix(in srgb,var(--nat,#d4a857) 15%,transparent);border:1px solid color-mix(in srgb,var(--nat,#d4a857) 35%,transparent)}

/* Meta strip */
.lc-sao-metastrip{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.lc-sao-meta{flex:1 1 140px;background:var(--card,#161616);border:1px solid var(--line,#2a2a2a);border-radius:12px;padding:10px 14px}
.lc-sao-meta span{display:block;font-size:11.5px;color:var(--text3,#9a9a9a);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.lc-sao-meta b{font-size:15px;color:var(--text1,#fff)}

/* Body */
.lc-sao-body{color:var(--text2,#c9c9c9);line-height:1.85;font-size:16px;margin:18px 0}
.lc-sao-body p{margin:0 0 14px}
.lc-sao-body strong{color:var(--text1,#fff);font-weight:700}

/* Callout */
.lc-sao-callout{border-radius:12px;padding:14px 18px;font-size:14.5px;line-height:1.7;color:var(--text2,#c9c9c9);border:1px solid var(--line,#2a2a2a);background:var(--cardSoft,#141414);border-left:3px solid var(--gold,#d4a857);margin:18px 0}
.lc-sao-callout.is-cat{border-left-color:var(--jade,#7dd3a0)}
.lc-sao-callout.is-hung{border-left-color:#e87979}
.lc-sao-callout strong{color:var(--text1,#fff)}

/* Related + chips */
.lc-sao-related{margin:26px 0 10px;border-top:1px solid var(--line,#2a2a2a);padding-top:18px}
.lc-sao-related h2,.lc-sao-idx-sec-hd h2{font-size:18px;color:var(--text1,#fff);margin:0 0 12px}
.lc-sao-chips{display:flex;flex-wrap:wrap;gap:8px}
.lc-sao-chip{font-size:13.5px;padding:6px 13px;border:1px solid var(--line,#2a2a2a);border-radius:20px;color:var(--text2,#c9c9c9);text-decoration:none;background:var(--card,#161616);transition:all .15s}
.lc-sao-chip:hover{border-color:var(--gold,#d4a857);color:var(--gold,#d4a857);transform:translateY(-1px)}
.lc-sao-chip.c-cat{color:var(--jade,#7dd3a0)}
.lc-sao-chip.c-cat:hover{border-color:var(--jade,#7dd3a0);color:var(--jade,#7dd3a0)}
.lc-sao-chip.c-hung{color:#e87979}
.lc-sao-chip.c-hung:hover{border-color:#e87979;color:#e87979}

/* CTA */
.lc-sao-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:26px 0 10px}
.lc-sao-cta-btn{display:inline-block;padding:12px 22px;background:var(--gold,#d4a857);color:#1a1a1a;border-radius:10px;text-decoration:none;font-weight:700;font-size:15px}
.lc-sao-cta-btn:hover{background:var(--goldHi,#e0bd6a)}
.lc-sao-cta-link{color:var(--text3,#9a9a9a);text-decoration:none;font-size:14px}
.lc-sao-cta-link:hover{color:var(--gold,#d4a857)}

/* Index hero + sections */
.lc-sao-idx-hero{text-align:center;padding:10px 0 22px;border-bottom:1px solid var(--line,#2a2a2a);margin-bottom:22px}
.lc-sao-idx-hero h1{font-size:30px;color:var(--text1,#fff);margin:0 0 10px}
.lc-sao-idx-hero p{color:var(--text2,#c9c9c9);line-height:1.7;max-width:640px;margin:0 auto 16px}
.lc-sao-idx-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.lc-sao-idx-stats div{display:flex;flex-direction:column}
.lc-sao-idx-stats b{font-size:24px;color:var(--gold,#d4a857);font-weight:800;line-height:1}
.lc-sao-idx-stats span{font-size:12px;color:var(--text3,#9a9a9a);margin-top:3px}
.lc-sao-idx-sec{margin-bottom:24px}
.lc-sao-idx-sec-hd{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.lc-sao-idx-ic{flex:0 0 auto;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--card,#161616);border:1px solid var(--line,#2a2a2a);color:var(--gold,#d4a857)}
.lc-sao-idx-sec-hd h2 em{font-style:normal;font-size:12.5px;color:var(--text3,#9a9a9a);font-weight:500;margin-left:6px}
.lc-sao-idx-sec-hd p{margin:2px 0 0;font-size:13px;color:var(--text3,#9a9a9a)}

@media (max-width:600px){
  .lc-sao-hero{flex-direction:column;text-align:center;gap:12px;padding:20px 16px}
  .lc-sao-hero-emblem{width:60px;height:60px;font-size:28px}
  .lc-sao-hero-main h1{font-size:23px}
  .lc-sao-idx-hero h1{font-size:24px}
  .lc-sao-idx-stats{gap:16px}
}