/* =====================================================================
 * Lịch Hay · Lịch Âm v4f Final v8.1.1
 * Luxury dark + gold theme · server-side SSR · zero JS framework
 * ===================================================================== */

/* --- THEME TOKENS --- */
:root[data-theme="dark"], :root:not([data-theme]) {
  --bg: #0a0a0a;
  --bgInk: #0d0d0d;
  --card: #161616;
  --cardHi: #1c1c1c;
  --cardSoft: #121212;
  --line: rgba(226,178,58,0.14);
  --lineStrong: rgba(226,178,58,0.32);
  --lineSoft: rgba(255,255,255,0.06);
  --gold: #e2b23a;
  --goldHi: #f7dc8a;
  --goldBright: #f7dc8a;
  --amber: #e2b23a;
  --text1: #f2ecdd;
  --text2: rgba(242,236,221,0.7);
  --text3: rgba(242,236,221,0.58);
  --text4: rgba(242,236,221,0.50);
  /* màu trạng thái — nền TỐI (tp trên #080706: 8,7 · 6,0 · 9,6 · 5,9) */
  --ok: #5fbf64; --bad: #e8604f; --warn: #f0a44a; --deep: #c9796a;
  --jade: #7dd3a0;
  --jadeDim: rgba(125,211,160,0.12);
  --jadeLine: rgba(125,211,160,0.32);
  --vermil: #6d8cff;
  --vermilDim: rgba(109,140,255,0.1);
  --vermilLine: rgba(109,140,255,0.3);
  --onGold: #1a1208;
}
:root[data-theme="light"] {
  --bg: #fbf7ec;
  --bgInk: #f5efdf;
  --card: #ffffff;
  --cardHi: #fffaef;
  --cardSoft: #f9f3e2;
  --line: rgba(184,121,26,0.32);
  --lineStrong: rgba(184,121,26,0.55);
  --lineSoft: rgba(13,28,30,0.1);
  --gold: #96610f;
  --goldHi: #8a5e12;
  --goldBright: #9a6712;
  --amber: #b8791a;
  --text1: #1a1410;
  --text2: rgba(26,20,16,0.7);
  --text3: rgba(26,20,16,0.5);
  --text4: rgba(26,20,16,0.3);
  /* màu trạng thái — nền SÁNG (tp trên #f9f7ee: 4,9 · 6,0 · 5,0 · cao) */
  --ok: #1f7a34; --bad: #b3241a; --warn: #9a5a08; --deep: #5c1a1a;
  --jade: #4a8961;
  --jadeDim: rgba(74,137,97,0.1);
  --jadeLine: rgba(74,137,97,0.32);
  --vermil: #3f5bd6;
  --vermilDim: rgba(63,91,214,0.08);
  --vermilLine: rgba(63,91,214,0.32);
  --onGold: #fff;
}

/* --- BASE --- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: 'Inter', 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15.6px;
  color: var(--text1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 800; }

/* --- LAYOUT --- */
.licham-app { max-width: 1440px; margin: 0 auto; }

/* =====================================================================
 * DESKTOP STYLES
 * ===================================================================== */

/* --- Utility bar --- */
.lc-util {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 30px; background: var(--bgInk);
  font-size: 13.8px; color: var(--text3); letter-spacing: 0.2px;
}
.lc-util-l, .lc-util-r { display: flex; gap: 18px; align-items: center; }
.lc-util a { cursor: pointer; }
.lc-util-gold { color: var(--gold); }

/* --- Header --- */
.lc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px; background: var(--bg);
  border-bottom: 1px solid var(--lineSoft);
}
.lc-brand { display: flex; align-items: center; gap: 18px; }
.lc-logo {
  width: 88px; height: 88px; border-radius: 22px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--amber) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: var(--onGold); letter-spacing: -0.5px;
}
.lc-brand-name { font-size: 26px; font-weight: 800; color: var(--text1); letter-spacing: -0.3px; line-height: 1; }
.lc-brand-sub { font-size: 14.9px; color: var(--text3); letter-spacing: 0.5px; margin-top: 3px; }
/* Thanh điều hướng là flex một hàng, không wrap, không overflow ⇒ đẩy CẢ TRANG
   trượt ngang 84px trên khung 390px (đo 04/10/2026, mọi trang dùng _sao_head).
   Cho chính nav cuộn thay vì cả trang — desktop nhìn y hệt. */
.lc-nav { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
          scrollbar-width: none; max-width: 100%; }
.lc-nav::-webkit-scrollbar { display: none; }
.lc-nav > * { flex: 0 0 auto; }
.lc-nav-item {
  padding: 9px 16px; border-radius: 12px;
  font-size: 14.9px; font-weight: 500; cursor: pointer;
  color: var(--text2); transition: all 0.15s ease;
}
.lc-nav-item:hover { background: var(--card); }
.lc-nav-item.active {
  background: var(--gold); color: var(--onGold); font-weight: 700;
}
.lc-hdr-acts { display: flex; align-items: center; gap: 8px; }
.lc-theme-btn {
  width: 52px; height: 52px; border-radius: 15px;
  background: var(--card); border: 1px solid var(--lineSoft);
  color: var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lc-theme-btn:hover { background: var(--cardHi); }

/* --- Date picker bar --- */
.lc-picker {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 32px; background: var(--bg);
  border-bottom: 1px solid var(--lineSoft); gap: 14px;
}
.lc-pick-l { display: flex; align-items: center; gap: 10px; }
.lc-pick-field { display: flex; flex-direction: column; gap: 4px; }
.lc-pick-lbl { font-size: 12.2px; color: var(--text4); letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; padding-left: 2px; }
.lc-pick-box {
  height: 38px; border-radius: 12px;
  border: 1px solid var(--lineSoft); background: var(--card);
  display: flex; align-items: center; justify-content: center;
  font-size: 16.8px; font-weight: 700; color: var(--text1);
  font-variant-numeric: tabular-nums;
  padding: 0; -webkit-appearance: none; appearance: none;
  outline: none; text-align: center;
}
.lc-pick-box:focus { border-color: var(--gold); }
.lc-pick-box.d, .lc-pick-box.m { width: 48px; }
.lc-pick-box.y { width: 72px; }
.lc-pick-acts { display: flex; align-items: center; gap: 6px; margin-top: 18px; margin-left: 8px; }
.lc-btn-primary {
  height: 38px; padding: 0 18px; border-radius: 12px;
  background: var(--gold); color: var(--onGold); border: none;
  font-size: 14.9px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.lc-btn-primary:hover { background: var(--goldHi); }
.lc-btn-ghost {
  height: 38px; padding: 0 16px; border-radius: 12px;
  background: var(--card); color: var(--text2);
  border: 1px solid var(--lineSoft);
  font-size: 14.9px; font-weight: 600; cursor: pointer;
}
.lc-btn-icon {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--card); color: var(--gold);
  border: 1px solid var(--lineSoft); cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.lc-rating-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--lineSoft);
}
.lc-rating-pill.tamn {
  padding: 10px 18px 10px 14px;
  background: #c8463a18; border: 1.5px solid #c8463a;
  box-shadow: 0 0 18px #c8463a40;
}
.lc-warn { font-size: 15.2px; color: #e85d50; font-weight: 900; letter-spacing: 0.5px; }
.lc-rating-dot { width: 8px; height: 8px; border-radius: 50%; }
.lc-rating-text { font-size: 15.2px; font-weight: 800; letter-spacing: 0.2px; }
.lc-rating-pill.tamn .lc-rating-text { color: #e85d50; letter-spacing: 0.5px; text-transform: uppercase; }
.lc-rating-sep { font-size: 14.5px; color: var(--text4); }
.lc-rating-truc { font-size: 14.9px; color: var(--text2); }

/* --- Tabs --- */
.lc-tabs {
  padding: 0 32px; background: var(--bgInk);
  border-bottom: 1px solid var(--lineSoft);
  display: flex; gap: 4px;
}
.lc-tab {
  padding: 14px 22px; font-size: 15.2px; font-weight: 500;
  color: var(--text3);
  border-bottom: 2px solid transparent;
  background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer; letter-spacing: 0.3px;
  text-decoration: none; transition: color 0.15s ease;
}
.lc-tab.active { color: var(--goldHi); border-bottom-color: var(--gold); font-weight: 700; }

/* =====================================================================
 * HERO CENTERPIECE
 * ===================================================================== */
.lc-hero-wrap { padding: 32px 32px 0; }
.lc-hero-eye {
  text-align: center; margin-bottom: 24px;
}
.lc-hero-eye-inner {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(226,178,58,0.06);
  border: 1px solid rgba(226,178,58,0.14);
  font-size: 13.8px; color: var(--goldHi);
  letter-spacing: 2.4px; text-transform: uppercase; font-weight: 700;
}
:root[data-theme="light"] .lc-hero-eye-inner {
  background: rgba(184,121,26,0.08);
  border-color: rgba(184,121,26,0.24);
}
.lc-hero-eye-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--goldHi); }

.lc-hero {
  position: relative; border-radius: 28px;
  background: linear-gradient(135deg, var(--cardHi) 0%, var(--bgInk) 100%);
  border: 1.5px solid var(--lineStrong);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 80px rgba(226,178,58,0.03);
}
:root[data-theme="light"] .lc-hero {
  box-shadow: 0 12px 36px rgba(13,28,30,0.1);
}
.lc-hero-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,178,58,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.lc-corner {
  position: absolute; opacity: 0.5;
  width: 32px; height: 32px;
}
.lc-corner.tl { top: 18px; left: 18px; }
.lc-corner.tr { top: 18px; right: 18px; transform: rotate(90deg); }
.lc-corner.br { bottom: 18px; right: 18px; transform: rotate(180deg); }
.lc-corner.bl { bottom: 18px; left: 18px; transform: rotate(270deg); }
.lc-hero-split {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  position: relative;
}
.lc-hero-cell { padding: 56px 56px 40px; position: relative; }
.lc-hero-cell-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lc-hero-tag {
  font-size: 13px; letter-spacing: 3px; font-weight: 700;
  text-transform: uppercase; padding: 5px 10px; border-radius: 8px;
}
.lc-hero-tag-sun { color: var(--gold); background: rgba(226,178,58,0.07); }
.lc-hero-tag-moon { color: var(--goldHi); background: rgba(168,230,236,0.07); }
:root[data-theme="light"] .lc-hero-tag-sun { background: rgba(184,121,26,0.08); }
:root[data-theme="light"] .lc-hero-tag-moon { background: rgba(12,102,112,0.08); }
.lc-hero-dow { font-size: 14.1px; color: var(--text2); letter-spacing: 0.4px; }
.lc-hero-year { font-size: 14.1px; color: var(--goldHi); letter-spacing: 0.4px; font-weight: 600; }
.lc-hero-body { display: flex; align-items: flex-start; gap: 18px; }
.lc-bignum {
  font-size: 248px; font-weight: 800; line-height: 0.82;
  letter-spacing: -12px; margin-top: -8px;
  text-shadow: 0 4px 30px var(--bg);
  font-family: 'Inter', 'Be Vietnam Pro', system-ui, sans-serif;
}
.lc-bignum-sun { color: var(--text1); }
.lc-bignum-moon { color: var(--goldHi); }
.lc-hero-meta { padding-top: 32px; flex: 1; }
.lc-hero-meta-mo {
  font-size: 36px; font-weight: 300; line-height: 1.1;
  letter-spacing: -0.5px;
}
.lc-hero-meta-mo strong { font-weight: 700; }
.lc-hero-meta-sun { color: var(--text2); }
.lc-hero-meta-sun strong { color: var(--text1); }
.lc-hero-meta-moon { color: var(--gold); opacity: 0.7; }
.lc-hero-meta-moon strong { color: var(--gold); opacity: 1; }
.lc-hero-sub { font-size: 19px; color: var(--text3); margin-top: 4px; letter-spacing: -0.2px; }
.lc-hero-pill {
  margin-top: 24px; padding: 10px 16px; border-radius: 12px;
  background: rgba(226,178,58,0.06);
  border: 1px solid rgba(226,178,58,0.14);
  display: inline-block;
}
:root[data-theme="light"] .lc-hero-pill {
  background: rgba(184,121,26,0.08);
  border-color: rgba(184,121,26,0.24);
}
.lc-hero-pill-lbl {
  font-size: 12.2px; letter-spacing: 1.6px; font-weight: 700;
  text-transform: uppercase; color: var(--gold);
}
.lc-hero-pill-val {
  font-size: 19px; font-weight: 800; margin-top: 2px;
  letter-spacing: 0.2px; color: var(--goldHi);
}
.lc-hero-divider {
  background: linear-gradient(180deg, transparent, var(--line), transparent);
}

/* Hero rating ribbon */
.lc-hero-ribbon {
  padding: 18px 32px; background: var(--bgInk);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-radius: 0 0 27px 27px;
}
.lc-rib-l { display: flex; align-items: center; gap: 20px; }
.lc-rib-rating {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px; border-radius: 999px;
  border: 1.5px solid;
}
.lc-rib-rating-dot { width: 8px; height: 8px; border-radius: 50%; }
.lc-rib-rating-txt {
  font-size: 15.2px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.lc-rib-truc-lbl, .lc-rib-cell-lbl {
  font-size: 13px; color: var(--text4);
  letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600;
  margin-bottom: 3px;
}
.lc-rib-truc-val { font-size: 16px; color: var(--text1); font-weight: 700; }
.lc-rib-truc-val .name { color: var(--goldHi); }
.lc-rib-truc-val .detail { color: var(--text3); font-weight: 500; margin-left: 8px; }
.lc-rib-r { display: flex; gap: 32px; font-size: 14.9px; }
.lc-rib-cell-val { color: var(--text1); font-weight: 700; }

/* =====================================================================
 * MAIN GRID 3 COLUMNS
 * ===================================================================== */
.lc-grid {
  display: grid; grid-template-columns: 316px 1fr 316px;
  gap: 18px; padding: 24px 32px 0;
}
.lc-col { display: flex; flex-direction: column; gap: 16px; }
.lc-card {
  background: var(--card); border-radius: 20px;
  border: 1px solid var(--line); overflow: hidden;
}
.lc-card-hd {
  padding: 14px 18px; border-bottom: 1px solid var(--lineSoft);
  display: flex; align-items: center; gap: 8px;
}
.lc-eye {
  font-size: 13px; font-weight: 700; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--gold);
}
.lc-eye.muted { color: var(--text3); }
.lc-card-hd-cnt { margin-left: auto; font-size: 12.6px; color: var(--text4); font-weight: 600; }

/* Tứ trụ rows */
.lc-row {
  padding: 13px 18px; border-bottom: 1px solid var(--lineSoft);
}
.lc-row:last-child { border-bottom: none; }
.lc-row-flex { display: flex; justify-content: space-between; align-items: center; }
.lc-row-lbl { font-size: 14.1px; color: var(--text3); letter-spacing: 0.3px; }
.lc-row-val { font-size: 16px; font-weight: 700; letter-spacing: 0.2px; }
.lc-row-sub { font-size: 13px; color: var(--text4); margin-top: 3px; }

/* Sao boxes */
.lc-star-list { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.lc-star-box { padding: 14px 16px; border-radius: 14px; }
.lc-star-box.jade { background: var(--jadeDim); border: 1px solid var(--jadeLine); }
.lc-star-box.vermil { background: var(--vermilDim); border: 1px solid var(--vermilLine); }
.lc-star-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lc-star-name { font-size: 15.6px; font-weight: 700; }
.lc-star-tag {
  font-size: 12.6px; letter-spacing: 1px; margin-left: auto;
  font-weight: 600; text-transform: uppercase;
}
.lc-star-desc { font-size: 14.1px; color: var(--text2); line-height: 1.55; }
.lc-jade { color: var(--jade); }
.lc-vermil { color: var(--vermil); }

/* Hướng dir rows */
.lc-dir-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; border-bottom: 1px solid var(--lineSoft);
}
.lc-dir-row:last-child { border-bottom: none; }
.lc-dir-body { flex: 1; }
.lc-dir-lbl {
  font-size: 13px; color: var(--text3);
  letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600;
}
.lc-dir-val { font-size: 16.8px; font-weight: 800; margin-top: 2px; letter-spacing: 0.2px; }
.lc-dir-sub { font-size: 13px; color: var(--text4); margin-top: 1px; }

/* Mini month calendar */
.lc-mini-hd {
  padding: 14px 20px; border-bottom: 1px solid var(--lineSoft);
  display: flex; justify-content: space-between; align-items: center;
}
.lc-mini-title { font-size: 16px; font-weight: 800; color: var(--text1); letter-spacing: -0.2px; }
.lc-mini-sub { font-size: 13.4px; color: var(--text3); letter-spacing: 0.3px; margin-left: 10px; }
.lc-mini-nav { display: flex; gap: 6px; }
.lc-mini-btn {
  width: 32px; height: 32px; border-radius: 12px;
  background: none; border: 1px solid var(--lineSoft);
  color: var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.lc-mini-body { padding: 18px 20px 20px; }
.lc-mini-week { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 8px; }
.lc-mini-wk {
  text-align: center; font-size: 12.6px; font-weight: 700;
  letter-spacing: 0.6px; color: var(--text3);
}
.lc-mini-wk.sun { color: #c88f8f; }
.lc-mini-wk.sat { color: #7ea0c4; }
.lc-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.lc-mini-cell {
  padding: 7px 0 5px; text-align: center; border-radius: 12px;
  text-decoration: none; transition: all 0.15s ease;
  cursor: pointer; display: block;
}
.lc-mini-cell:hover { background: var(--cardSoft); }
.lc-mini-cell.today { background: var(--gold); }
.lc-mini-cell.today:hover { background: var(--gold); opacity: 0.9; }
.lc-mini-cell.today .lc-mini-d { color: var(--bg); font-weight: 900; }
.lc-mini-cell.today .lc-mini-lu { color: rgba(0,0,0,0.6); }
.lc-mini-cell.tamn .lc-mini-d { color: var(--vermil); }
.lc-mini-cell.good .lc-mini-d { color: var(--jade); }
.lc-mini-cell.bad .lc-mini-d { color: #a87877; }
.lc-mini-d {
  font-size: 14.9px; font-weight: 700; color: var(--text2);
  line-height: 1; letter-spacing: -0.2px;
}
.lc-mini-lu { font-size: 11.9px; color: var(--text4); margin-top: 3px; line-height: 1; font-weight: 600; }
.lc-mini-legend {
  display: flex; gap: 18px; margin-top: 18px;
  justify-content: center; flex-wrap: wrap;
}
.lc-mini-leg { display: flex; align-items: center; gap: 6px; font-size: 13.4px; color: var(--text3); }
.lc-mini-leg-sw { width: 9px; height: 9px; border-radius: 3px; }

/* Trực + việc nên/kiêng */
.lc-truc-hd {
  padding: 18px 20px; border-bottom: 1px solid var(--lineSoft);
  display: flex; gap: 16px; align-items: center;
}
.lc-truc-badge {
  width: 64px; height: 64px; border-radius: 14px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--amber) 100%);
  color: var(--onGold);
  display: flex; align-items: center; justify-content: center;
  font-size: 20.5px; font-weight: 900; letter-spacing: -0.5px;
  box-shadow: 0 8px 24px rgba(226,178,58,0.2);
  flex-shrink: 0;
}
.lc-truc-info { flex: 1; }
.lc-truc-lbl {
  font-size: 13.8px; color: var(--gold);
  letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
}
.lc-truc-name {
  font-size: 19px; font-weight: 800; color: var(--text1);
  margin-top: 2px; letter-spacing: -0.2px;
}
.lc-truc-desc { font-size: 14.1px; color: var(--text3); margin-top: 3px; }
.lc-truc-rating-pill {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid; text-align: center; flex-shrink: 0;
}
.lc-truc-rating-pill .lbl {
  font-size: 12.6px; color: var(--text4);
  letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-bottom: 1px;
}
.lc-truc-rating-pill .val { font-size: 14.9px; font-weight: 800; letter-spacing: 0.3px; }

.lc-vk { display: grid; grid-template-columns: 1fr 1fr; }
.lc-vk-col { padding: 20px; }
.lc-vk-col + .lc-vk-col { border-left: 1px solid var(--lineSoft); }
.lc-vk-hd {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 13.4px; letter-spacing: 1.6px; font-weight: 700; text-transform: uppercase;
}
.lc-vk-hd.nen { color: var(--jade); }
.lc-vk-hd.kieng { color: var(--vermil); }
.lc-vk-circle {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15.2px; font-weight: 900;
}
.lc-vk-circle.nen { background: var(--jadeDim); color: var(--jade); }
.lc-vk-circle.kieng { background: var(--vermilDim); color: var(--vermil); }
.lc-vk-item {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 0; font-size: 15.2px; color: var(--text1); font-weight: 500;
}
.lc-vk-item + .lc-vk-item { border-top: 1px solid var(--lineSoft); }
.lc-vk-item.mute { color: var(--text2); }
.lc-vk-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; transform: translateY(-3px); }
.lc-vk-dot.nen { background: var(--jade); }
.lc-vk-dot.kieng { background: var(--vermil); }

/* Ngũ hành */
.lc-nh-hd {
  padding: 14px 20px; border-bottom: 1px solid var(--lineSoft);
  display: flex; justify-content: space-between; align-items: baseline;
}
.lc-nh-now { font-size: 13.8px; color: var(--text2); }
.lc-nh-now strong { color: var(--text1); }
.lc-nh-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 18px; }
.lc-nh-cell {
  padding: 18px 8px 14px; text-align: center;
  border-radius: 14px;
  background: var(--cardSoft);
  border: 1px solid var(--lineSoft);
  position: relative;
}
.lc-nh-cell.cur {
  background: rgba(226,178,58,0.06);
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 24px rgba(226,178,58,0.15);
}
.lc-nh-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 2px 9px; border-radius: 999px;
  background: var(--gold); color: var(--onGold);
  font-size: 11.9px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; white-space: nowrap;
}
.lc-nh-han {
  font-size: 34px; font-family: serif; line-height: 1; margin-bottom: 8px;
}
.lc-nh-name { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; }
.lc-nh-rel { font-size: 12.6px; color: var(--text3); margin-top: 5px; font-weight: 600; letter-spacing: 0.2px; }
.lc-nh-foot {
  padding: 14px 20px; border-top: 1px solid var(--lineSoft);
  display: flex; align-items: center; gap: 14px;
}
.lc-nh-foot-lbl {
  font-size: 13px; color: var(--text3);
  letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600;
  flex-shrink: 0;
}
.lc-nh-sw { display: flex; gap: 6px; }
.lc-nh-sw-box { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--lineSoft); }
.lc-nh-mau-name { font-size: 15.2px; color: var(--text1); font-weight: 700; }
.lc-nh-mau-sub { font-size: 13px; color: var(--text4); margin-top: 1px; }

/* Giờ Hoàng đạo */
.lc-hd-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px; position: relative;
}
.lc-hd-row + .lc-hd-row { border-top: 1px solid var(--lineSoft); }
.lc-hd-row.now { background: rgba(226,178,58,0.07); box-shadow: inset 3px 0 0 var(--gold); }
.lc-hd-name { display: flex; align-items: center; gap: 8px; }
.lc-hd-name-txt { font-size: 16px; font-weight: 700; color: var(--text1); letter-spacing: 0.2px; }
.lc-hd-row.now .lc-hd-name-txt { color: var(--goldHi); font-weight: 900; }
.lc-hd-now-pill {
  padding: 2px 7px; border-radius: 999px;
  background: var(--gold); color: var(--onGold);
  font-size: 11.9px; font-weight: 900; letter-spacing: 0.8px;
  text-transform: uppercase;
}
.lc-hd-time { font-size: 13.8px; color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 600; }
.lc-hd-row.now .lc-hd-time { color: var(--goldHi); font-weight: 700; }

/* Giờ Hắc đạo */
.lc-hac-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 18px;
}
.lc-hac-row + .lc-hac-row { border-top: 1px solid var(--lineSoft); }
.lc-hac-name { font-size: 14.9px; color: var(--text3); }
.lc-hac-time { font-size: 13.4px; color: var(--text4); font-variant-numeric: tabular-nums; }

/* Ad slot */
.lc-ad {
  width: 100%; border-radius: 20px;
  border: 1px dashed var(--line);
  background: linear-gradient(135deg, var(--card) 0%, var(--cardHi) 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.lc-ad-tag {
  position: absolute; top: 10px; right: 14px;
  font-size: 11.9px; letter-spacing: 1.6px; color: var(--text4);
  text-transform: uppercase; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; background: var(--bg);
}
.lc-ad-body { text-align: center; }
.lc-ad-title { font-size: 14.5px; font-weight: 600; color: var(--text3); letter-spacing: 0.4px; }
.lc-ad-sub { font-size: 13px; color: var(--text4); margin-top: 4px; }
.lc-ad.h90 { height: 90px; }
.lc-ad.h340 { height: 340px; }
.lc-ad.h100 { height: 100px; }

/* ── v8.4.0: khung ad SAU khi ad thật load (fix "sai vị trí/xấu") ──
 * Placeholder dùng height cứng + flex center; AdSense responsive có thể trả
 * creative cao/rộng khác → bị cắt (overflow:hidden) hoặc tính width sai trong flex.
 * .lc-ad--live: bỏ height cứng, bỏ flex, khung ôm theo ad; min-height giữ chỗ chống CLS. */
.lc-ad--live {
  height: auto; display: block;
  border: none; background: none;
  overflow: visible; text-align: center;
}
.lc-ad--live ins.adsbygoogle { display: block; width: 100%; max-width: 100%; }
.lc-ad--live img, .lc-ad--live iframe { max-width: 100%; }
[data-ad-slot="right_300x340"].lc-ad--live { min-height: 250px; max-width: 340px; margin: 0 auto; }
[data-ad-slot="middle_728x100"].lc-ad--live,
[data-ad-slot^="article_"].lc-ad--live { min-height: 90px; }
[data-ad-slot="middle_320x100"].lc-ad--live { min-height: 100px; }

/* =====================================================================
 * DETAIL EXPAND + FAQ + LINKS + FOOTER
 * ===================================================================== */
.lc-detail-wrap { padding: 40px 32px 0; }
.lc-detail-hd {
  padding: 24px 32px 18px;
  background: linear-gradient(135deg, var(--cardHi), transparent);
  border-bottom: 1px solid var(--lineSoft);
}
.lc-detail-hd h2 {
  font-size: 30px; font-weight: 800; color: var(--text1);
  margin: 8px 0 0; letter-spacing: -0.7px; line-height: 1.2;
}
.lc-detail-hd h2 .em { color: var(--goldHi); }
.lc-detail-intro {
  font-size: 15.2px; color: var(--text3);
  margin-top: 8px; line-height: 1.65; max-width: 900px;
}
.lc-detail-body { display: grid; grid-template-columns: 1.55fr 1fr; }
.lc-detail-left { padding: 28px 32px; border-right: 1px solid var(--lineSoft); }
.lc-detail-right { padding: 28px 32px; display: flex; flex-direction: column; gap: 18px; }
.lc-h3 {
  font-size: 18.2px; font-weight: 800; color: var(--text1);
  margin: 24px 0 12px; letter-spacing: -0.3px;
  padding-left: 14px; border-left: 3px solid var(--gold);
}
.lc-h3:first-child { margin-top: 0; }
.lc-p { font-size: 15.6px; color: var(--text2); line-height: 1.85; margin: 0 0 14px; }
.lc-p strong { color: var(--text1); font-weight: 700; }
.lc-p em { font-style: normal; color: var(--text2); }
.lc-p .gold { color: var(--goldHi); font-weight: 600; }
.lc-p .gold2 { color: var(--gold); font-weight: 700; }
.lc-p .jade { color: var(--jade); font-weight: 700; }
.lc-p .vermil { color: var(--vermil); font-weight: 700; }

.lc-sum-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0;
}
.lc-sum-row + .lc-sum-row { border-top: 1px solid var(--lineSoft); }
.lc-sum-lbl { font-size: 14.1px; color: var(--text3); }
.lc-sum-val { font-size: 14.9px; font-weight: 700; letter-spacing: 0.2px; }

.lc-his-card {
  padding: 10px 12px; border-radius: 12px;
  background: var(--cardSoft); border: 1px solid var(--lineSoft);
}
.lc-his-card + .lc-his-card { margin-top: 10px; }
.lc-his-y { font-size: 13px; color: var(--gold); font-weight: 800; letter-spacing: 0.5px; margin-bottom: 3px; }
.lc-his-t { font-size: 14.9px; color: var(--text1); font-weight: 700; margin-bottom: 2px; }
.lc-his-d { font-size: 13.4px; color: var(--text3); line-height: 1.5; }

.lc-tags {
  padding: 14px 32px; border-top: 1px solid var(--lineSoft);
  background: var(--bgInk);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.lc-tag {
  padding: 4px 12px; font-size: 13.4px;
  border: 1px solid var(--lineSoft); border-radius: 999px;
  letter-spacing: 0.2px; font-weight: 500;
}
.lc-tag.hot { color: var(--gold); }
.lc-tag.mute { color: var(--text3); }

/* FAQ */
.lc-faq-wrap { padding: 24px 32px 0; }
.lc-faq-hd { padding: 20px 24px 16px; border-bottom: 1px solid var(--lineSoft); }
.lc-faq-hd-row { display: flex; align-items: center; gap: 10px; }
.lc-faq-badge {
  padding: 4px 10px; border-radius: 8px;
  background: rgba(226,178,58,0.1); color: var(--goldHi);
  font-size: 12.2px; letter-spacing: 1.5px;
  font-weight: 800; text-transform: uppercase;
}
:root[data-theme="light"] .lc-faq-badge { background: rgba(184,121,26,0.12); }
.lc-faq-intro { font-size: 15.2px; color: var(--text3); margin-top: 6px; }
.lc-faq-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.lc-faq-item {
  border-radius: 14px;
  background: var(--card); border: 1px solid var(--lineSoft);
  overflow: hidden;
}
.lc-faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 15px 18px; background: none; border: none;
  color: var(--text1); font-size: 15.6px; font-weight: 600; letter-spacing: 0.1px;
  cursor: pointer; text-align: left;
}
.lc-faq-plus {
  color: var(--gold); margin-left: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
.lc-faq-item[aria-expanded="true"] .lc-faq-plus { transform: rotate(45deg); }
.lc-faq-a {
  padding: 14px 18px 15px; font-size: 14.9px;
  color: var(--text2); line-height: 1.75;
  border-top: 1px solid var(--lineSoft);
}
.lc-faq-item[aria-expanded="false"] .lc-faq-a { display: none; }
.lc-faq-a strong { font-weight: 700; }

/* Internal links 4-card */
.lc-links-wrap { padding: 24px 32px 0; }
.lc-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.lc-link-card {
  padding: 16px 18px; border-radius: 20px;
  background: var(--card); border: 1px solid var(--lineSoft);
  text-decoration: none; display: block;
  transition: all 0.15s ease;
}
.lc-link-card:hover { background: var(--cardHi); border-color: var(--line); }
.lc-link-lbl {
  font-size: 13px; color: var(--text3);
  letter-spacing: 1.3px; text-transform: uppercase; font-weight: 700;
  margin-bottom: 6px;
}
.lc-link-title { font-size: 16px; font-weight: 800; color: var(--text1); letter-spacing: -0.2px; }
.lc-link-sub { font-size: 13.4px; margin-top: 3px; color: var(--text2); }
.lc-link-card.gold .lc-link-sub { color: var(--gold); }

/* Bottom ad wrap */
.lc-ad-wrap { padding: 24px 32px 0; }

/* Footer */
.lc-foot {
  margin-top: 48px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bgInk) 100%);
  border-top: 1px solid var(--line);
}
:root[data-theme="light"] .lc-foot {
  background: linear-gradient(180deg, var(--bg) 0%, #efe7d0 100%);
}
.lc-foot-top {
  padding: 40px 32px 32px;
  border-bottom: 1px solid var(--lineSoft);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px;
}
.lc-foot-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lc-foot-logo {
  width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--amber) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 16.8px; font-weight: 900; color: var(--onGold);
}
.lc-foot-bname { font-size: 19px; font-weight: 800; color: var(--text1); letter-spacing: -0.3px; }
.lc-foot-bsub { font-size: 13.4px; color: var(--text3); letter-spacing: 0.5px; margin-top: 2px; }
.lc-foot-about { font-size: 14.9px; color: var(--text3); line-height: 1.7; margin-bottom: 16px; }
.lc-foot-about strong { color: var(--text2); }
.lc-foot-about .em { color: var(--goldHi); }
.lc-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.lc-trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--lineSoft);
  font-size: 13.4px; color: var(--text2);
}
.lc-social { display: flex; gap: 8px; }
.lc-social-btn {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--lineSoft);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 16px; cursor: pointer;
  text-decoration: none;
}
.lc-foot-col h2, .lc-foot-col h4 {
  font-size: 13.8px; color: var(--gold);
  letter-spacing: 1.8px; font-weight: 800;
  text-transform: uppercase; margin: 0 0 14px;
}
.lc-foot-links { display: flex; flex-direction: column; gap: 7px; }
.lc-foot-link {
  font-size: 14.5px; color: var(--text3);
  text-decoration: none; cursor: pointer;
  letter-spacing: 0.1px; line-height: 1.5;
  transition: color 0.15s ease;
}
.lc-foot-link:hover { color: var(--text1); }
.lc-keywords { padding: 24px 32px 20px; border-bottom: 1px solid var(--lineSoft); }
.lc-kw-lbl {
  font-size: 13px; color: var(--text4);
  letter-spacing: 2px; font-weight: 700;
  text-transform: uppercase; margin-bottom: 10px;
}
.lc-kw-list { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-kw {
  padding: 4px 11px; font-size: 13px; color: var(--text3);
  background: var(--card); border: 1px solid var(--lineSoft);
  border-radius: 999px; letter-spacing: 0.1px;
  text-decoration: none;
}
.lc-foot-legal {
  padding: 18px 32px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
}
.lc-foot-legal-l { font-size: 13.8px; color: var(--text4); line-height: 1.6; }
.lc-foot-legal-l strong { color: var(--text3); }
.lc-foot-legal-r { display: flex; gap: 18px; }
.lc-foot-legal-link { font-size: 13.8px; color: var(--text3); }

/* ── Footer responsive (Đợt H item1 — chống tràn ngang trên mobile) ──
 * Gốc lỗi: .lc-foot-top là grid 5 cột cứng, không có breakpoint → tràn khi màn hẹp. */
.lc-foot { overflow-x: hidden; }
.lc-foot-top > * { min-width: 0; }                 /* cho phép grid item co lại, chống đẩy tràn */
.lc-foot-about, .lc-kw, .lc-foot-link { overflow-wrap: anywhere; } /* chuỗi/link dài không phá layout */
@media (max-width: 860px) {
  .lc-foot-top { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 20px 24px; }
}
@media (max-width: 560px) {
  .lc-foot-top { grid-template-columns: 1fr; gap: 20px; padding: 26px 16px 20px; }
  .lc-keywords { padding: 20px 16px 18px; }
  .lc-foot-legal { padding: 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .lc-foot-legal-r { gap: 14px; flex-wrap: wrap; }
}

/* =====================================================================
 * MOBILE STYLES (390px)
 * Loaded for mobile UA — sit inside `.licham-mobile` namespace
 * ===================================================================== */
.licham-mobile { max-width: 100%; margin: 0; background: var(--bg); padding-bottom: 70px; }
.licham-mobile * { box-sizing: border-box; }

/* Header */
.lm-header {
  padding: 10px 16px 12px; display: flex;
  align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--lineSoft); background: var(--bg);
  position: sticky; top: 0; z-index: 50;
}
.lm-hdr-l { display: flex; align-items: center; gap: 10px; }
.lm-logo {
  width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--amber) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 15.2px; font-weight: 900; color: var(--onGold); letter-spacing: -0.5px;
}
.lm-bname { font-size: 18.2px; font-weight: 800; color: var(--text1); line-height: 1; letter-spacing: -0.2px; }
.lm-bsub { font-size: 12.2px; color: var(--text3); letter-spacing: 0.5px; margin-top: 3px; }
.lm-hdr-acts { display: flex; gap: 6px; }
.lm-hdr-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--lineSoft);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
}
.lm-hdr-btn.mute { color: var(--text2); }

/* Date picker */
.lm-pick {
  padding: 12px 16px; display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--lineSoft); background: var(--bgInk);
}
.lm-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lm-pick-fields { display: flex; gap: 6px; flex: 1; }
.lm-pick-box {
  flex: 1 0; height: 42px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--lineSoft);
  display: flex; align-items: center; justify-content: center;
  position: relative; padding: 0;
  -webkit-appearance: none; appearance: none;
  text-align: center; outline: none;
}
.lm-pick-box.yr { flex: 1.4 0; }
.lm-pick-box:focus { border-color: var(--gold); }
.lm-pick-lbl {
  position: absolute; top: 3px; left: 8px;
  font-size: 11.5px; color: var(--text4);
  letter-spacing: 1.2px; font-weight: 700; text-transform: uppercase;
  pointer-events: none;
}
.lm-pick-val { font-size: 17.5px; font-weight: 800; color: var(--text1); margin-top: 6px; font-variant-numeric: tabular-nums; }
.lm-pick-navs { display: flex; gap: 4px; }
.lm-pick-nav {
  width: 36px; height: 42px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--lineSoft);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.lm-pill-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lm-rt-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 999px;
  flex: 1; min-width: 0; overflow: hidden;
  background: var(--card); border: 1.5px solid var(--lineSoft);
  white-space: nowrap;
}
.lm-rt-pill.tamn {
  padding: 6px 10px 6px 8px;
  background: #c8463a20; border-color: #c8463a;
  box-shadow: 0 0 12px #c8463a40;
}
.lm-rt-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.lm-rt-txt { font-size: 13.8px; font-weight: 800; letter-spacing: 0.2px; flex-shrink: 0; }
.lm-rt-pill.tamn .lm-rt-txt { color: #e85d50; letter-spacing: 0.4px; text-transform: uppercase; }
.lm-warn { font-size: 15.2px; color: #e85d50; font-weight: 900; flex-shrink: 0; }
.lm-rt-sep { font-size: 13.8px; color: var(--text4); flex-shrink: 0; }
.lm-rt-truc { font-size: 13.8px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; }
.lm-today-btn {
  height: 34px; padding: 0 14px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold) 0%, var(--amber) 100%);
  color: var(--onGold); border: none;
  font-size: 14.1px; font-weight: 800; letter-spacing: 0.2px;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  display: flex; align-items: center;
}

/* Tabs */
.lm-tabs {
  display: flex; gap: 0; padding: 0 16px;
  background: var(--bgInk); border-bottom: 1px solid var(--lineSoft);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.lm-tabs::-webkit-scrollbar { display: none; }
.lm-tab {
  padding: 12px 14px; font-size: 14.9px; font-weight: 500;
  color: var(--text3);
  border-bottom: 2px solid transparent;
  background: none; border-top: none; border-left: none; border-right: none;
  white-space: nowrap; letter-spacing: 0.2px;
  text-decoration: none;
}
.lm-tab.active { color: var(--goldHi); border-bottom-color: var(--gold); font-weight: 800; }

/* Tam Nương banner */
.lm-tn-wrap { padding: 14px 16px 0; }
.lm-tn {
  position: relative; border-radius: 16px;
  padding: 16px 16px 16px 14px;
  background: linear-gradient(135deg, #8b2a1f40 0%, #1a0c0a 60%, #0d0707 100%);
  border: 1.5px solid #c8463a80; overflow: hidden;
  animation: lm-tn-glow 3.5s ease-in-out infinite;
}
:root[data-theme="light"] .lm-tn {
  background: linear-gradient(135deg, #ffd9d4 0%, #fff5f2 60%, #fff 100%);
}
@keyframes lm-tn-glow {
  0%, 100% { box-shadow: 0 0 20px #c8463a30, inset 0 0 30px #8b2a1f30; }
  50% { box-shadow: 0 0 36px #c8463a50, inset 0 0 40px #8b2a1f40; }
}
.lm-tn-stripes {
  position: absolute; top: 0; right: 0; bottom: 0; width: 80px;
  background: repeating-linear-gradient(135deg, rgba(63,91,214,0.16) 0 8px, transparent 8px 16px);
  pointer-events: none;
}
.lm-tn-row { display: flex; align-items: flex-start; gap: 14px; position: relative; }
.lm-tn-icon {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle, #e85d50, #c8463a);
  display: flex; align-items: center; justify-content: center;
  animation: lm-tn-pulse 2s ease-out infinite;
  border: 2px solid #e85d50;
}
@keyframes lm-tn-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 #e85d5080; }
  50% { transform: scale(1.07); box-shadow: 0 0 0 9px #e85d5000; }
}
.lm-tn-body { flex: 1; min-width: 0; }
.lm-tn-tag {
  font-size: 13px; font-weight: 900; letter-spacing: 2.2px;
  text-transform: uppercase; color: #e85d50;
  padding: 3px 9px; border-radius: 7px;
  background: rgba(63,91,214,0.15); border: 1px solid #c8463a80;
  display: inline-block; margin-bottom: 6px;
}
.lm-tn-h {
  font-size: 20.5px; font-weight: 900; letter-spacing: -0.4px; line-height: 1.15;
  color: #fff; margin: 0 0 4px;
  text-shadow: 0 2px 10px #c8463a60;
}
:root[data-theme="light"] .lm-tn-h { color: #5a1d12; text-shadow: none; }
.lm-tn-h .em { color: #e85d50; }
.lm-tn-sub { font-size: 13.8px; color: #f5d4d0; font-weight: 700; margin-bottom: 3px; }
:root[data-theme="light"] .lm-tn-sub { color: #8b2a1f; }
.lm-tn-desc { font-size: 14.1px; color: #f5d4d0; line-height: 1.55; }
.lm-tn-desc strong { color: #e85d50; }
:root[data-theme="light"] .lm-tn-desc { color: #5a1d12; }
.lm-tn-tags {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid #c8463a40;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.lm-tn-tag-pill {
  padding: 4px 10px; border-radius: 999px; font-size: 13.4px;
  background: rgba(63,91,214,0.12); border: 1px solid rgba(63,91,214,0.3);
  color: #fff; font-weight: 700; letter-spacing: 0.1px;
}
:root[data-theme="light"] .lm-tn-tag-pill { color: #5a1d12; }

/* Hero */
.lm-hero-wrap { padding: 16px 16px 0; }
.lm-hero-eye-wrap { text-align: center; margin-bottom: 14px; }
.lm-hero-eye {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: rgba(226,178,58,0.07); border: 1px solid rgba(226,178,58,0.14);
  font-size: 12.6px; color: var(--goldHi);
  letter-spacing: 1.4px; text-transform: uppercase; font-weight: 800;
  white-space: nowrap; line-height: 1.2;
}
:root[data-theme="light"] .lm-hero-eye {
  background: rgba(184,121,26,0.08);
  border-color: rgba(184,121,26,0.24);
}
.lm-hero-dow { font-size: 14.9px; color: var(--text2); margin-top: 6px; letter-spacing: 0.3px; }
.lm-hero {
  position: relative; border-radius: 22px;
  background: linear-gradient(135deg, var(--cardHi) 0%, var(--bgInk) 100%);
  border: 1.5px solid var(--lineStrong); overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 60px rgba(226,178,58,0.03);
}
:root[data-theme="light"] .lm-hero { box-shadow: 0 8px 24px rgba(13,28,30,0.08); }
.lm-hero-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,178,58,0.07) 0%, transparent 50%);
  pointer-events: none;
}
.lm-corner {
  position: absolute; opacity: 0.5; width: 22px; height: 22px;
}
.lm-corner.tl { top: 12px; left: 12px; }
.lm-corner.tr { top: 12px; right: 12px; transform: rotate(90deg); }
.lm-corner.br { bottom: 12px; right: 12px; transform: rotate(180deg); }
.lm-corner.bl { bottom: 12px; left: 12px; transform: rotate(270deg); }
.lm-hero-split { display: grid; grid-template-columns: 1fr 1px 1fr; position: relative; }
.lm-hero-cell { padding: 24px 16px 16px; text-align: center; }
.lm-hero-tag {
  font-size: 12.2px; letter-spacing: 2.5px; font-weight: 800;
  text-transform: uppercase; padding: 3px 8px; border-radius: 7px;
  display: inline-block; margin-bottom: 8px;
}
.lm-hero-tag.sun { color: var(--gold); background: rgba(226,178,58,0.07); }
.lm-hero-tag.moon { color: var(--goldHi); background: rgba(168,230,236,0.07); }
:root[data-theme="light"] .lm-hero-tag.sun { background: rgba(184,121,26,0.08); }
:root[data-theme="light"] .lm-hero-tag.moon { background: rgba(12,102,112,0.08); }
.lm-bignum {
  font-size: 118px; font-weight: 800; line-height: 0.85;
  letter-spacing: -6px; text-shadow: 0 4px 20px var(--bg);
  font-family: 'Inter', 'Be Vietnam Pro', system-ui, sans-serif;
}
.lm-bignum.sun { color: var(--text1); }
.lm-bignum.moon { color: var(--goldHi); }
.lm-hero-meta { font-size: 15.2px; margin-top: 8px; letter-spacing: -0.1px; }
.lm-hero-meta.sun { color: var(--text2); }
.lm-hero-meta.sun .mute { color: var(--text3); }
.lm-hero-meta.moon { color: var(--gold); opacity: 0.85; }
.lm-hero-meta.moon .mute { opacity: 0.7; }
.lm-hero-pill {
  margin-top: 10px; padding: 5px 12px; border-radius: 10px;
  background: rgba(226,178,58,0.06); border: 1px solid rgba(226,178,58,0.14);
  display: inline-block; white-space: nowrap;
}
:root[data-theme="light"] .lm-hero-pill { background: rgba(184,121,26,0.08); border-color: rgba(184,121,26,0.24); }
.lm-hero-pill-lbl { font-size: 11.5px; letter-spacing: 1.4px; font-weight: 700; text-transform: uppercase; }
.lm-hero-pill-val { font-size: 14.5px; font-weight: 800; margin-top: 1px; letter-spacing: 0.2px; }
.lm-hero-div { background: linear-gradient(180deg, transparent, var(--line), transparent); }
.lm-hero-rib {
  padding: 12px 16px; border-top: 1px solid var(--line);
  background: var(--bgInk);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.lm-hero-rib-pill {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 5px 12px; border-radius: 999px; border: 1.5px solid;
  white-space: nowrap;
}
.lm-hero-rib-dot { width: 6px; height: 6px; border-radius: 50%; }
.lm-hero-rib-txt { font-size: 13.8px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; }
.lm-hero-rib-r { text-align: right; }
.lm-hero-rib-r-lbl { font-size: 12.2px; color: var(--text4); letter-spacing: 1.4px; text-transform: uppercase; font-weight: 600; }
.lm-hero-rib-r-val { font-size: 14.5px; color: var(--goldHi); font-weight: 800; margin-top: 1px; }

/* Quick stats 2x2 */
.lm-qs { padding: 14px 16px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lm-qs-cell {
  padding: 10px 12px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--lineSoft);
}
.lm-qs-lbl {
  font-size: 11.9px; color: var(--text3);
  letter-spacing: 1.3px; font-weight: 700; text-transform: uppercase;
  margin-bottom: 3px;
}
.lm-qs-val { font-size: 15.6px; font-weight: 800; letter-spacing: -0.1px; }

/* Section + card pattern */
.lm-sec { padding: 20px 16px 0; }
.lm-sec-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lm-eye {
  font-size: 12.2px; font-weight: 800; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--gold);
}
.lm-card {
  border-radius: 16px; background: var(--card);
  border: 1px solid var(--line); overflow: hidden;
}
.lm-sec-row { padding: 12px 14px; }
.lm-sec-row + .lm-sec-row { border-top: 1px solid var(--lineSoft); }
.lm-sec-flex { display: flex; justify-content: space-between; align-items: center; }
.lm-sec-lbl { font-size: 14.1px; color: var(--text3); letter-spacing: 0.3px; }
.lm-sec-val { font-size: 16px; font-weight: 800; letter-spacing: 0.2px; }
.lm-sec-sub { font-size: 13px; color: var(--text4); margin-top: 3px; }

/* Truc m */
.lm-truc-hd {
  padding: 14px; border-bottom: 1px solid var(--lineSoft);
  display: flex; align-items: center; gap: 12px;
}
.lm-truc-badge {
  width: 50px; height: 50px; border-radius: 12px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--amber) 100%);
  color: var(--onGold);
  display: flex; align-items: center; justify-content: center;
  font-size: 17.5px; font-weight: 900; letter-spacing: -0.4px;
  box-shadow: 0 6px 18px rgba(226,178,58,0.2);
  flex-shrink: 0;
}
.lm-truc-info { flex: 1; min-width: 0; }
.lm-truc-lbl {
  font-size: 12.6px; color: var(--gold);
  letter-spacing: 1.4px; font-weight: 800; text-transform: uppercase;
}
.lm-truc-name { font-size: 16.8px; font-weight: 800; color: var(--text1); margin-top: 1px; letter-spacing: -0.2px; }
.lm-truc-desc { font-size: 13.8px; color: var(--text3); margin-top: 2px; }
.lm-vk { display: grid; grid-template-columns: 1fr 1fr; }
.lm-vk-col { padding: 14px; }
.lm-vk-col + .lm-vk-col { border-left: 1px solid var(--lineSoft); }
.lm-vk-hd {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: 12.6px; letter-spacing: 1.6px; font-weight: 800; text-transform: uppercase;
}
.lm-vk-hd.nen { color: var(--jade); }
.lm-vk-hd.kieng { color: var(--vermil); }
.lm-vk-circle {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.8px; font-weight: 900;
}
.lm-vk-circle.nen { background: var(--jadeDim); color: var(--jade); }
.lm-vk-circle.kieng { background: var(--vermilDim); color: var(--vermil); }
.lm-vk-item {
  display: flex; align-items: baseline; gap: 7px;
  padding: 6px 0; font-size: 14.5px; font-weight: 500; color: var(--text1);
}
.lm-vk-item + .lm-vk-item { border-top: 1px solid var(--lineSoft); }
.lm-vk-item.mute { color: var(--text2); }
.lm-vk-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; transform: translateY(-3px); }
.lm-vk-dot.nen { background: var(--jade); }
.lm-vk-dot.kieng { background: var(--vermil); }

/* Ngũ hành mobile */
.lm-nh-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 14px; }
.lm-nh-cell {
  padding: 12px 4px 10px; text-align: center; border-radius: 10px;
  background: var(--cardSoft); border: 1px solid var(--lineSoft);
  position: relative;
}
.lm-nh-cell.cur {
  background: rgba(226,178,58,0.07);
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 16px rgba(226,178,58,0.18);
}
.lm-nh-badge {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  padding: 1px 7px; border-radius: 999px;
  background: var(--gold); color: var(--onGold);
  font-size: 11.1px; font-weight: 800; letter-spacing: 0.8px;
  text-transform: uppercase; white-space: nowrap;
}
.lm-nh-han { font-size: 26px; font-family: serif; line-height: 1; margin-bottom: 5px; }
.lm-nh-name { font-size: 14.1px; font-weight: 800; letter-spacing: -0.1px; }
.lm-nh-rel { font-size: 11.5px; color: var(--text3); margin-top: 3px; font-weight: 600; }
.lm-nh-foot {
  padding: 12px 14px; border-top: 1px solid var(--lineSoft);
  display: flex; align-items: center; gap: 12px;
}
.lm-nh-foot-lbl {
  font-size: 12.2px; color: var(--text3);
  letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700;
  flex-shrink: 0;
}
.lm-nh-sw { display: flex; gap: 5px; }
.lm-nh-sw-box { width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--lineSoft); }
.lm-nh-mau-name { font-size: 14.5px; color: var(--text1); font-weight: 800; }
.lm-nh-mau-sub { font-size: 12.2px; color: var(--text4); margin-top: 1px; }

/* Giờ HĐ mobile */
.lm-hd-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 14px;
}
.lm-hd-row + .lm-hd-row { border-top: 1px solid var(--lineSoft); }
.lm-hd-row.now { background: rgba(226,178,58,0.07); box-shadow: inset 3px 0 0 var(--gold); }
.lm-hd-name { display: flex; align-items: center; gap: 7px; }
.lm-hd-name-txt { font-size: 15.2px; font-weight: 800; color: var(--text1); letter-spacing: 0.2px; }
.lm-hd-row.now .lm-hd-name-txt { color: var(--goldHi); font-weight: 900; }
.lm-hd-now-pill {
  padding: 2px 6px; border-radius: 999px;
  background: var(--gold); color: var(--onGold);
  font-size: 11.1px; font-weight: 900; letter-spacing: 0.7px;
  text-transform: uppercase;
}
.lm-hd-time { font-size: 13.4px; color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 600; }
.lm-hd-row.now .lm-hd-time { color: var(--goldHi); font-weight: 700; }

/* Hướng mobile */
.lm-dir-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
}
.lm-dir-row + .lm-dir-row { border-top: 1px solid var(--lineSoft); }
.lm-dir-body { flex: 1; }
.lm-dir-lbl {
  font-size: 12.6px; color: var(--text3);
  letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700;
}
.lm-dir-val { font-size: 15.6px; font-weight: 800; margin-top: 2px; letter-spacing: 0.2px; }
.lm-dir-sub { font-size: 12.6px; color: var(--text4); margin-top: 1px; }

/* Sao mobile */
.lm-star-list { padding: 14px; display: flex; flex-direction: column; gap: 9px; }
.lm-star-box { padding: 12px 14px; border-radius: 12px; }
.lm-star-box.jade { background: var(--jadeDim); border: 1px solid var(--jadeLine); }
.lm-star-box.vermil { background: var(--vermilDim); border: 1px solid var(--vermilLine); }
.lm-star-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.lm-star-name { font-size: 14.9px; font-weight: 800; }
.lm-star-tag {
  font-size: 11.9px; letter-spacing: 0.9px; margin-left: auto;
  font-weight: 700; text-transform: uppercase;
}
.lm-star-desc { font-size: 13.8px; color: var(--text2); line-height: 1.55; }

/* Mini month mobile */
.lm-mini-hd {
  padding: 12px 14px; border-bottom: 1px solid var(--lineSoft);
  display: flex; justify-content: space-between; align-items: center;
}
.lm-mini-title { font-size: 15.2px; font-weight: 800; color: var(--text1); letter-spacing: -0.2px; }
.lm-mini-sub { font-size: 12.6px; color: var(--text3); margin-left: 6px; }
.lm-mini-navs { display: flex; gap: 5px; }
.lm-mini-nav {
  width: 28px; height: 28px; border-radius: 10px;
  background: none; border: 1px solid var(--lineSoft);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.lm-mini-body { padding: 14px; }
.lm-mini-wk-row { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.lm-mini-wk {
  text-align: center; font-size: 11.9px; font-weight: 800;
  letter-spacing: 0.5px; color: var(--text3);
}
.lm-mini-wk.sun { color: #c88f8f; }
.lm-mini-wk.sat { color: #7ea0c4; }
.lm-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.lm-mini-cell {
  padding: 5px 0 3px; text-align: center; border-radius: 8px;
  display: block; text-decoration: none;
}
.lm-mini-cell.today { background: var(--gold); }
.lm-mini-cell.today .lm-mini-d { color: var(--bg); font-weight: 900; }
.lm-mini-cell.today .lm-mini-lu { color: rgba(0,0,0,0.6); }
.lm-mini-cell.tamn .lm-mini-d { color: var(--vermil); }
.lm-mini-cell.good .lm-mini-d { color: var(--jade); }
.lm-mini-cell.bad .lm-mini-d { color: #a87877; }
.lm-mini-d { font-size: 13.8px; font-weight: 800; color: var(--text2); line-height: 1; letter-spacing: -0.2px; }
.lm-mini-lu { font-size: 11.1px; color: var(--text4); margin-top: 2px; line-height: 1; font-weight: 700; }

/* FAQ mobile */
.lm-faq-wrap { padding: 20px 16px 0; }
.lm-faq-hd { padding: 14px; border-bottom: 1px solid var(--lineSoft); }
.lm-faq-hd-row { display: flex; align-items: center; gap: 8px; }
.lm-faq-badge {
  padding: 3px 8px; border-radius: 6px;
  background: rgba(226,178,58,0.1); color: var(--goldHi);
  font-size: 11.9px; letter-spacing: 1.4px;
  font-weight: 800; text-transform: uppercase;
}
.lm-faq-intro { font-size: 14.1px; color: var(--text3); margin-top: 5px; }
.lm-faq-body { padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.lm-faq-item {
  border-radius: 12px;
  background: var(--card); border: 1px solid var(--lineSoft);
  overflow: hidden;
}
.lm-faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: none; border: none;
  color: var(--text1); font-size: 14.9px; font-weight: 700; letter-spacing: 0.1px;
  text-align: left; gap: 10px; cursor: pointer; font-family: inherit;
}
.lm-faq-plus { color: var(--gold); flex-shrink: 0; transition: transform 0.2s ease; }
.lm-faq-item[aria-expanded="true"] .lm-faq-plus { transform: rotate(45deg); }
.lm-faq-a {
  padding: 12px 14px 13px; font-size: 14.1px;
  color: var(--text2); line-height: 1.7;
  border-top: 1px solid var(--lineSoft);
}
.lm-faq-item[aria-expanded="false"] .lm-faq-a { display: none; }
.lm-faq-a strong { color: var(--text1); }
.lm-faq-a em { color: var(--goldHi); font-style: normal; }

/* Footer mobile */
.lm-foot {
  margin-top: 32px; padding: 24px 16px 24px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bgInk) 100%);
  border-top: 1px solid var(--line);
}
:root[data-theme="light"] .lm-foot {
  background: linear-gradient(180deg, var(--bg) 0%, #efe7d0 100%);
}
.lm-foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lm-foot-logo {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--amber) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: var(--onGold);
}
.lm-foot-bname { font-size: 17.5px; font-weight: 800; color: var(--text1); letter-spacing: -0.3px; }
.lm-foot-bsub { font-size: 13px; color: var(--text3); letter-spacing: 0.5px; margin-top: 2px; }
.lm-foot-about { font-size: 14.1px; color: var(--text3); line-height: 1.65; margin-bottom: 14px; }
.lm-foot-about strong { color: var(--text2); }
.lm-foot-trust { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.lm-foot-trust-b {
  padding: 4px 9px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--lineSoft);
  font-size: 13px; color: var(--text2);
}
.lm-foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.lm-foot-col h2, .lm-foot-col h4 {
  font-size: 13px; color: var(--gold);
  letter-spacing: 1.6px; font-weight: 800;
  text-transform: uppercase; margin: 0 0 10px;
}
.lm-foot-link {
  font-size: 13.8px; color: var(--text3);
  display: block; padding: 4px 0; text-decoration: none;
}
.lm-foot-legal {
  font-size: 13px; color: var(--text4); line-height: 1.6;
  padding-top: 12px; border-top: 1px solid var(--lineSoft);
}
.lm-foot-legal strong { color: var(--text3); }

/* Bottom nav fixed */
.lm-bn {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--bgInk); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
  z-index: 100;
}
.lm-bn-item {
  padding: 10px 4px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none;
}
.lm-bn-item.active { color: var(--goldHi); }
.lm-bn-item:not(.active) { color: var(--text3); }
.lm-bn-label { font-size: 12.2px; font-weight: 700; letter-spacing: 0.3px; }

/* No-JS fallback: show all FAQ answers */
.no-js .lc-faq-item[aria-expanded="false"] .lc-faq-a,
.no-js .lm-faq-item[aria-expanded="false"] .lm-faq-a { display: block; }

/* ══ Đợt I — Ngày tốt theo việc ══ */
.gd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:8px 0 24px}
.gd-card{display:block;background:linear-gradient(135deg,var(--card) 0%,var(--cardHi) 100%);border:1px solid var(--line);border-radius:16px;padding:20px;text-decoration:none;color:var(--text1);transition:.15s}
.gd-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.gd-card-ico{font-size:28px}
.gd-card-h{font-size: 18.2px;margin:8px 0 4px;color:var(--goldHi)}
.gd-card-desc{font-size: 14.9px;color:var(--text3);line-height:1.6;min-height:40px}
.gd-card-days{font-size: 14.5px;color:var(--text2);margin:8px 0}
.gd-chip{display:inline-block;background:var(--bg);border:1px solid var(--gold);color:var(--goldHi);border-radius:999px;padding:1px 9px;margin:0 3px;font-weight:600}
.gd-card-cta{font-size: 14.5px;color:var(--gold)}
.gd-bc{font-size: 14.5px;color:var(--text3);margin-bottom:6px}
.gd-bc a{color:var(--gold);text-decoration:none}
.gd-monthnav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size: 15.2px}
.gd-monthnav a{color:var(--gold);text-decoration:none;border:1px solid var(--line);border-radius:10px;padding:6px 12px}
.gd-best-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:10px}
.gd-best-card{background:var(--card);border:1px solid var(--gold);border-radius:14px;padding:14px}
.gd-best-date{display:flex;align-items:baseline;gap:8px}
.gd-best-d{font-size:30px;font-weight:800;color:var(--goldHi)}
.gd-best-my{font-size: 14.5px;color:var(--text3)}
.gd-best-cc{font-size: 14.9px;color:var(--text2);margin:4px 0}
.gd-best-why{font-size: 14.1px;color:var(--text3);padding-left:16px;margin:6px 0;line-height:1.6}
.gd-best-gio{font-size: 14.1px;color:var(--text2);border-top:1px dashed var(--line);padding-top:6px}
.gd-table-wrap{overflow-x:auto}
.gd-table{width:100%;border-collapse:collapse;font-size: 14.9px;margin-top:8px}
.gd-table th,.gd-table td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left}
.gd-table tr.gd-tot{background:rgba(80,200,120,.07)}
.gd-table tr.gd-xau{opacity:.55}
.gd-note{font-size: 14.1px;color:var(--text4);margin-top:8px}
.gd-faq{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:8px 0}
.gd-faq summary{cursor:pointer;font-weight:600;font-size: 15.6px}
.gd-faq p{font-size: 14.9px;color:var(--text2);line-height:1.7}
/* ══ Đợt J — công cụ ══ */
.cv-form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px}
.cv-mode{display:flex;gap:18px;font-size: 15.6px;margin-bottom:12px}
.cv-fields{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.cv-fields label{display:flex;flex-direction:column;font-size: 14.1px;color:var(--text3);gap:4px}
.cv-fields input[type=number]{width:86px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text1);padding:8px}
.cv-leap{flex-direction:row!important;align-items:center}
.cv-btn{background:var(--gold);color:#1a1408;border:none;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer}
.cv-result{background:var(--card);border:1px solid var(--gold);border-radius:16px;padding:18px;margin-bottom:16px}
.cv-err{border-color:#ef4444;color:#fca5a5}
.cv-big{font-size: 17.5px;line-height:1.7}
.cv-gold{color:var(--goldHi);font-size: 19.8px}
.cv-info{font-size: 14.9px;color:var(--text2);margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.tet-count{display:flex;gap:14px;justify-content:center;padding:18px 0 26px;flex-wrap:wrap}
.tet-unit{background:var(--card);border:1px solid var(--gold);border-radius:16px;min-width:88px;padding:14px 10px;text-align:center}
.tet-unit span{font-size:34px;font-weight:800;color:var(--goldHi);display:block}
.tet-unit label{font-size: 13.8px;color:var(--text3);letter-spacing:1px;text-transform:uppercase}
.tet-moc{font-size: 15.6px;line-height:2}
.by-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:6px 0 18px}
.by-fact{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.by-fact label{display:block;font-size: 13.4px;color:var(--text4);letter-spacing:1px;text-transform:uppercase}
.by-fact strong{font-size: 16.8px;color:var(--goldHi)}
.by-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.by-cell{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center;text-decoration:none;color:var(--text1);font-size: 14.5px}
.by-cell span{display:block;font-size: 13.4px;color:var(--text3)}
.by-cell:hover{border-color:var(--gold)}
.by-now{border-color:var(--gold)}
/* ══ Đợt K — văn khấn ══ */
.vk-list{display:grid;gap:12px}
.vk-item{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--text1)}
.vk-item:hover{border-color:var(--gold)}
.vk-item h2{font-size: 17.5px;color:var(--goldHi);margin:0 0 4px}
.vk-item p{font-size: 14.9px;color:var(--text3);margin:0}
.vk-print-btn{background:var(--gold);color:#1a1408;border:none;border-radius:10px;padding:9px 16px;font-weight:700;cursor:pointer;margin-right:10px}
@media print {
  header, footer, nav, .lc-foot, .lc-keywords, .lc-ad, .lc-ad-wrap, .vk-print-btn,
  .lc-sao-cta-link, .lc-art-related, .lc-sao-header, #admin-theme { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .lc-art-body, main { color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
}

/* ══ v8.6.0 — SEO nâng cao văn khấn ══ */
.vk-ritual{background:linear-gradient(135deg,var(--card),var(--cardHi));border:1px solid var(--gold);border-radius:14px;padding:16px 18px;margin:18px 0}
.vk-ritual-h{font-size: 16.8px;color:var(--goldHi);margin:0 0 8px}
.vk-ritual ul{margin:0;padding-left:18px;font-size: 15.2px;line-height:2}
.vk-ritual-note{font-size: 14.1px;color:var(--text3);margin:8px 0 0}
.vk-ritual a{color:var(--gold)}
.vk-faqs{margin:18px 0}
.vk-faqs h2{font-size: 17.5px}
.vk-faq{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:8px 0}
.vk-faq summary{cursor:pointer;font-weight:600;font-size: 15.6px}
.vk-faq p{font-size: 14.9px;color:var(--text2);line-height:1.7}
@media print { .vk-ritual, .vk-faqs { display: none !important; } }

/* ══ v8.8.0 — tools strip (fix trang mồ côi) + vk groups ══ */
.lc-tools{max-width:1180px;margin:26px auto;padding:0 16px}
.lc-tools-h{font-size: 18.2px;color:var(--goldHi);margin:0 0 12px}
.lc-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.lc-tool-card{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-decoration:none;color:var(--text1);font-size: 14.5px;transition:.15s}
.lc-tool-card:hover{border-color:var(--gold)}
.lc-tool-card strong{color:var(--goldHi);font-size: 15.6px}
.lc-tool-card span:last-child{color:var(--text3)}
.lc-tool-ico{font-size: 20.5px}
.lc-tools-chips{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size: 14.5px}
.lc-tools-chips-label{color:var(--text3)}
.lc-tool-chip{border:1px solid var(--line);border-radius:999px;padding:4px 11px;text-decoration:none;color:var(--text1);font-size: 14.1px}
.lc-tool-chip:hover{border-color:var(--gold);color:var(--goldHi)}
.vk-group{margin:20px 0}
.vk-group-h{font-size: 17.5px;color:var(--goldHi);border-bottom:1px solid var(--line);padding-bottom:6px}
.vk-group-empty{font-size: 14.9px;color:var(--text3)}
.vk-group-empty a{color:var(--gold)}
.vk-item h3{font-size: 16.8px;color:var(--goldHi);margin:0 0 4px}

/* ══ v8.9.0 — polish: related links, legend, decades, hero ══ */
.lc-conv-more{display:inline-block;margin-top:8px;font-size: 14.5px;color:var(--gold);text-decoration:none}
.lc-conv-more:hover{color:var(--goldHi)}
.lc-rel{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);margin-top:26px;padding:16px 0 6px;font-size: 14.5px}
.lc-rel-label{color:var(--text3)}
.lc-rel-item{border:1px solid var(--line);border-radius:999px;padding:5px 12px;text-decoration:none;color:var(--text1);font-size: 14.5px;transition:.15s}
.lc-rel-item:hover{border-color:var(--gold);color:var(--goldHi)}
.gd-sum{font-size: 15.2px;margin:6px 0 8px}
.gd-sum-tot{color:var(--ok)}.gd-sum-xau{color:var(--warn)}.gd-sum-binh{color:var(--text3)}
.gd-legend{display:flex;flex-wrap:wrap;gap:12px;font-size: 14.1px;color:var(--text3);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:8px}
.gd-lg-tot{color:var(--ok)}.gd-lg-xau{color:var(--warn)}
.gd-table tr.gd-tot td:first-child{border-left:3px solid var(--ok)}
.gd-table tr.gd-xau td:first-child{border-left:3px solid var(--warn)}
.by-decade{margin:18px 0}
.by-decade-h{font-size: 16.4px;color:var(--goldHi);border-bottom:1px solid var(--line);padding-bottom:5px}
.by-hero-emoji{font-size:52px;line-height:1;margin-bottom:6px}

/* ══ v8.10.0 — Thần số học (điểm nhấn, phong cách phong thuỷ) ══ */
.ns-wrap{--ns-gold:var(--goldHi,#e8c874)}
.ns-hero{text-align:center;position:relative;padding-top:8px}
.ns-hero-glyph{font-size:44px;line-height:1;opacity:.9;margin-bottom:4px;filter:drop-shadow(0 2px 8px rgba(226,178,58,.35))}
.ns-form{background:linear-gradient(135deg,var(--card),var(--cardHi));border:1px solid var(--line);border-radius:18px;padding:20px;margin:18px 0;display:flex;flex-direction:column;gap:14px}
.ns-form-row{display:flex;gap:12px;flex-wrap:wrap}
.ns-field{display:flex;flex-direction:column;gap:6px;font-size: 14.5px;color:var(--text3)}
.ns-field input,.ns-field select{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text1);padding:11px 12px;font-size: 16px}
.ns-field-name{flex:1;min-width:220px}.ns-field-gt{min-width:130px}
.ns-form-dob{align-items:flex-end}
.ns-form-dob .ns-field input{width:92px}
.ns-btn{background:linear-gradient(135deg,#d4af37,#b8891b);color:#1a1408;border:none;border-radius:12px;padding:12px 22px;font-weight:700;font-size: 16px;cursor:pointer;align-self:flex-end;box-shadow:0 3px 12px rgba(226,178,58,.3)}
.ns-btn:hover{filter:brightness(1.08)}
.ns-result{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px}
.ns-err{border-color:#ef4444;color:#fca5a5}
.ns-core{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.ns-core-num{flex:0 0 auto;width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:46px;font-weight:800;color:#1a1408;background:radial-gradient(circle at 35% 30%,#f3d98a,#c99a2e);box-shadow:0 6px 20px rgba(226,178,58,.4),inset 0 -3px 8px rgba(0,0,0,.2)}
.ns-core-num[data-master="1"]{background:radial-gradient(circle at 35% 30%,#f7e3a3,#b8322e);color:#fff8e7;box-shadow:0 6px 22px rgba(63,91,214,.45)}
.ns-core-num-sm{width:56px;height:56px;font-size:26px}
.ns-core-label{font-size: 13.8px;letter-spacing:2px;text-transform:uppercase;color:var(--ns-gold)}
.ns-core-title{font-size:22px;color:var(--goldHi);margin:2px 0 6px}
.ns-core-desc{font-size: 15.6px;line-height:1.8;color:var(--text2);margin:0}
.ns-core-axis{font-size: 14.5px;color:var(--text3);margin-top:8px}
.ns-names{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.ns-name-idx{display:flex;gap:12px;align-items:flex-start}
.ns-name-num{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--bg);border:1px solid var(--ns-gold);color:var(--ns-gold);display:flex;align-items:center;justify-content:center;font-size: 20.5px;font-weight:700}
.ns-name-lb{font-size: 15.6px;font-weight:700;color:var(--text1)}
.ns-name-sub{font-size: 13.8px;color:var(--text4);line-height:1.5}
.ns-name-mean{font-size: 14.1px;color:var(--text3);margin-top:3px}
.ns-chart-wrap{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.ns-chart-h{font-size: 16.8px;color:var(--goldHi);margin:0 0 10px}
.ns-chart{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:280px}
.ns-cell{aspect-ratio:1;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--bg);color:var(--text4);font-size: 19px;letter-spacing:1px}
.ns-cell-on{border-color:var(--ns-gold);color:var(--ns-gold);background:linear-gradient(135deg,rgba(226,178,58,.12),transparent);font-weight:700}
.ns-chart-note{font-size: 14.1px;color:var(--text4);margin-top:8px}
.ns-cta{display:inline-block;margin-top:18px;background:var(--bg);border:1px solid var(--ns-gold);color:var(--ns-gold);border-radius:12px;padding:12px 18px;text-decoration:none;font-weight:600;font-size: 15.6px}
.ns-cta:hover{background:rgba(226,178,58,.1)}
.ns-guide{margin-top:8px}
.ns-mean-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:12px}
.ns-mean-item{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ns-mean-item p{font-size: 14.5px;color:var(--text3);line-height:1.6;margin:3px 0 0}
.ns-mean-item strong{font-size: 15.6px;color:var(--text1)}
.ns-mean-n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text2)}
.ns-mean-master{border-color:var(--ns-gold)}
.ns-mean-master .ns-mean-n{border-color:var(--ns-gold);color:var(--ns-gold)}
.ns-disclaimer{font-size: 14.1px;color:var(--text4);font-style:italic;margin-top:14px;line-height:1.7}
.ns-disclaimer a{color:var(--gold)}
.ns-suggest-head{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.ns-suggest-head p{font-size: 15.2px;color:var(--text2);line-height:1.7;margin:0;flex:1;min-width:220px}
.ns-name-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.ns-name-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px}
.ns-name-hop{border-color:var(--ns-gold);background:linear-gradient(135deg,rgba(226,178,58,.09),transparent)}
.ns-name-card-top{display:flex;justify-content:space-between;align-items:center}
.ns-name-full{font-size: 17.5px;font-weight:700;color:var(--goldHi)}
.ns-name-tick{color:var(--ok);font-weight:700}
.ns-name-nums{font-size: 14.1px;color:var(--text2);margin:4px 0}
.ns-name-why{font-size: 13.4px;color:var(--text4);line-height:1.5}
.lc-tool-hot{position:relative;border-color:var(--gold)}
.lc-tool-badge{background:#b8322e;color:#fff;font-size: 12.2px;padding:1px 6px;border-radius:999px;vertical-align:middle;margin-left:4px;letter-spacing:.5px}
@media (max-width:520px){.ns-core-num{width:76px;height:76px;font-size:36px}.ns-core-title{font-size: 19.8px}}

/* ══ v8.10.0 — polish spacing (fix "dòng sát nhau quá, thô") ══ */
.lc-sao-wrap .lc-sao-block{margin:30px 0}
.lc-sao-wrap .lc-sao-block > h2{margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size: 19px}
.lc-sao-lead{line-height:1.85}
/* Bảng ngày tốt: hàng thoáng hơn, có nhịp zebra nhẹ */
.gd-table th,.gd-table td{padding:11px 12px}
.gd-table tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
.gd-table tbody tr{transition:background .12s}
.gd-table tbody tr:hover{background:rgba(226,178,58,.06)}
.gd-best-grid,.gd-grid,.by-grid,.ns-mean-grid{margin-top:14px}
.gd-best-card{padding:16px 18px}
.gd-best-why{line-height:1.85}
.gd-best-why li{margin-bottom:3px}
/* FAQ: giãn cách, bấm dễ hơn trên mobile */
.gd-faq,.vk-faq{margin:10px 0;padding:14px 16px}
.gd-faq summary,.vk-faq summary{padding:2px 0}
.gd-faq p,.vk-faq p{margin-top:10px}
/* Năm sinh facts: ô cao ráo hơn */
.by-facts{gap:14px}
.by-fact{padding:16px 12px}
.by-decade{margin:22px 0}
/* card list văn khấn */
.vk-item{padding:16px 18px;margin-bottom:2px}
.vk-group{margin:26px 0}
.vk-group-h{padding-bottom:8px;margin-bottom:12px}
/* khoảng thở đáy trang trước footer */
.lc-tools{margin:30px auto 36px}
.lc-rel{margin-top:30px;padding-top:18px}
/* mạch dễ đọc: đoạn văn trong block giãn dòng */
.lc-sao-block p{line-height:1.85;margin:10px 0}

/* emblem logo: bỏ nền vàng ô để lộ con dấu tròn (2026-08-25) */
.lc-logo,.lc-foot-logo{background:transparent!important;box-shadow:none!important}
.lc-foot-logo .lh-emblem{width:100%;height:100%}
.center>.bagua .lh-emblem{width:100%;height:100%}
.center>.bagua{opacity:.68}

/* Logo động: 2 vòng Bát Quái xoay ngược + ngọc lấp lánh (2026-08-25) */
.lh-emblem{position:relative;display:block;width:100%;height:100%;line-height:0}.lh-emblem .lh-la{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform}.lh-emblem .lh-ra{animation:lh-spin 24s linear infinite}.lh-emblem .lh-rb{animation:lh-spin 17s linear infinite reverse}@keyframes lh-spin{to{transform:rotate(360deg)}}.lh-emblem .lh-spark{position:absolute;left:47%;top:50%;width:30%;height:30%;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,245,225,.95),rgba(255,120,120,.45) 38%,transparent 70%);opacity:.5;animation:lh-tw 2.6s ease-in-out infinite}.lh-emblem .lh-spark::before{content:"";position:absolute;inset:-35%;background:linear-gradient(0deg,transparent 46%,rgba(255,255,255,.8) 50%,transparent 54%),linear-gradient(90deg,transparent 46%,rgba(255,255,255,.8) 50%,transparent 54%);animation:lh-star 3.4s linear infinite}@keyframes lh-tw{0%,100%{opacity:.25;transform:translate(-50%,-50%) scale(.7)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}@keyframes lh-star{to{transform:rotate(180deg)}}@media (prefers-reduced-motion:reduce){.lh-emblem .lh-ra,.lh-emblem .lh-rb,.lh-emblem .lh-spark{animation:none}}

/* Inter (bien thien 300-900) — tu host, chi vietnamese+latin. Nguon: Google Fonts. */
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: block;
  src: url(/public/fonts/inter-var-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: block;
  src: url(/public/fonts/inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== Đợt 09/10/2026 · nút gửi cho bộ chọn ngày (bản mobile) =====
   Trước đây form có 3 ô nhưng KHÔNG có nút submit: Chrome chặn luôn cả
   implicit submission (Enter) khi form nhiều field mà thiếu submit button,
   nên khách mobile không tra được ngày bất kỳ. */
.lm-pick-go-row { display: flex; margin-top: 8px; }
.lm-pick-go {
  flex: 1; min-height: 46px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--gold) 0%, var(--amber) 100%);
  color: var(--onGold);
  font-size: 16.8px; font-weight: 800; letter-spacing: 0.2px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.lm-pick-go:active { filter: brightness(0.94); }


/* ================= Đợt 09/10/2026 · nhóm 3 — chạm, cuộn, quảng cáo =================
   Số đo trước khi sửa (mobile 390px): 86/108 phần tử tương tác dưới 44px,
   link chân trang cao 18px, ô lịch mini 28px, thanh điều hướng 33px. */

/* --- vùng chạm tối thiểu 44px (WCAG 2.5.5) --- */
.lc-foot-link { display: inline-flex; align-items: center; min-height: 44px; }
.lm-foot-link { display: flex; align-items: center; min-height: 44px; padding: 6px 0; }
.lm-mini-cell { padding: 12px 0 10px; }
.lc-nav-item  { padding: 13px 16px; }
.lc-kw        { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; }

/* --- thanh tab: 4 tab rộng 434px trong khung 390px nên tab cuối bị cắt mà
       không có dấu hiệu gì. Giữ cuộn ngang nhưng BÁO cho người dùng biết. --- */
.lm-tabs { scroll-snap-type: x proximity; padding-right: 8px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), rgba(0,0,0,0.15));
          mask-image: linear-gradient(to right, #000 calc(100% - 26px), rgba(0,0,0,0.15)); }
.lm-tab  { scroll-snap-align: start; padding-left: 11px; padding-right: 11px; }

/* --- ô quảng cáo rỗng: licham-client.js gắn .lc-ad--live khi có quảng cáo THẬT,
       nên chỉ ẩn khung giữ chỗ, quảng cáo thật vẫn hiện bình thường. --- */
.lc-ad:not(.lc-ad--live) { display: none !important; }


/* ===== Đợt 09/10/2026 · siết nốt vùng chạm còn dưới chuẩn ===== */
.lc-kw            { min-height: 40px; font-size: 14px; }
.lc-sao-aside-link{ min-height: 44px; display: flex; align-items: center; }
.lc-social-btn    { min-width: 44px; min-height: 44px; }





/* ===== Đợt 09/10/2026 · khôi phục --onGold và cứu nút nền vàng ở chế độ sáng =====
   1) `--onGold` đo ra RỖNG trên trang thật ⇒ mọi `color: var(--onGold)` rơi về màu
      thừa kế: nút "Hôm nay" chế độ sáng ra #8a5e12 trên nền vàng = tương phản 1,09.
   2) Có luật chung `html[data-theme="light"] button { background:#fff }` áp cho MỌI
      button nên nút "Xem ngày" mất sạch nền vàng ở chế độ sáng (độ ưu tiên 0,1,2
      thắng `.lm-pick-go` 0,1,0). Phải nâng độ ưu tiên, không dùng !important. */
:root[data-theme="dark"], :root:not([data-theme]) { --onGold: #1a1208; }
:root[data-theme="light"]                         { --onGold: #ffffff; }

html[data-theme="light"] button.lm-pick-go,
html[data-theme="dark"]  button.lm-pick-go,
:root:not([data-theme])  button.lm-pick-go {
  background: linear-gradient(135deg, var(--gold) 0%, var(--amber) 100%);
  border: none;
  color: var(--onGold);
}


/* ===== Đợt 09/10/2026 · thuận màu hai chế độ — ghi đè đúng 5 mã màu =====
   lib/Engine.php nhúng thẳng mã hex vào style inline (đánh giá ngày + ngũ hành).
   Một bộ màu dùng chung cho cả hai nền, chọn theo nền TỐI, nên trên nền SÁNG chỉ
   đạt 1,96–3,51. Đếm trên trang thật: đúng 5 mã, không mã nào là màu sáng,
   nên ghi đè theo thuộc tính là an toàn và kiểm chứng được (khác `filter`). */
:root[data-theme="light"] [style*="color:#22c55e"] { color: #126b31 !important; } /* Ngày tốt · Mộc  → tp 6,0 */
:root[data-theme="light"] [style*="color:#ef4444"] { color: #b3241a !important; } /* Ngày xấu · Hỏa  → tp 6,0 */
:root[data-theme="light"] [style*="color:#f87171"] { color: #b3241a !important; } /* Hỏa (nhạt)      → tp 6,0 */
:root[data-theme="light"] [style*="color:#f97316"] { color: #9a4a06 !important; } /* Tam Nương       → tp 5,7 */
:root[data-theme="light"] [style*="color:#e6a817"] { color: #8a6508 !important; } /* Bình thường·Thổ → tp 4,9 */

/* Nút CTA là thẻ <a> nên bị luật chung `html[data-theme=light] a` ghi đè màu,
   khiến chữ #8a5e12 nằm trên nền vàng #96610f = tương phản 1,09. */
html[data-theme="light"] a.lc-sao-cta-btn,
html[data-theme="dark"]  a.lc-sao-cta-btn,
:root:not([data-theme])  a.lc-sao-cta-btn { color: var(--onGold); }


/* ===== Đợt 09/10/2026 · ngũ hành bản desktop + vài chip, chế độ sáng ===== */
:root[data-theme="light"] [style*="color:#cdd6df"] { color: #4a5560 !important; } /* Kim   tp 6,9 */
:root[data-theme="light"] [style*="color:#7dd3a0"] { color: #126b31 !important; } /* Mộc   tp 6,0 */
:root[data-theme="light"] [style*="color:#e2b23a"] { color: #8a6508 !important; } /* Thổ   tp 4,9 */
:root[data-theme="light"] [style*="color:#7ab8e0"] { color: #15607f !important; } /* Thủy  tp 6,3 */
:root[data-theme="light"] [style*="color:#e89a6a"] { color: #9a4a06 !important; } /* Hỏa   tp 5,7 */
/* các chip khai màu trong CSS (không nhúng inline) nên ghi đè theo lớp */
:root[data-theme="light"] .lc-sao-chip.c-hung,
:root[data-theme="light"] .lc-wish-likes,
:root[data-theme="light"] .xt-pill { color: #b3241a; }


/* ===== Đợt 09/10/2026 · trình bày chữ =====
   Trước: <h1> mượn khung "eyebrow" (pill nhãn ngắn) nên cả câu 61 ký tự bị
   IN HOA + giãn chữ 1,4px, tràn 2 dòng — đọc rất mệt. Và ngay dưới lặp lại
   thứ-trong-tuần đã có trong tiêu đề. Nay tách ba tầng rõ vai trò. */
.lh-h1 {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 0; padding: 0; background: none; border: none;
  text-transform: none; letter-spacing: normal; max-width: 100%;
}
.lh-h1-kicker {                       /* nhãn ngắn — ĐÚNG chỗ dùng in hoa + giãn chữ */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(226,178,58,0.07); border: 1px solid rgba(226,178,58,0.16);
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--goldHi);
}
.lh-h1-main {                         /* tiêu đề thật — chữ thường, to, không giãn */
  font-size: 23px; font-weight: 800; line-height: 1.25;
  color: var(--text1); letter-spacing: -0.2px; text-wrap: balance;
}
.lh-h1-sub { font-size: 14.5px; font-weight: 500; color: var(--text2); }
@media (min-width: 900px) {
  .lh-h1 { gap: 10px; }
  .lh-h1-main { font-size: 30px; }
  .lh-h1-sub  { font-size: 15.5px; }
}

/* Bề ngang dòng văn: đo được 84–91 ký tự/dòng ở khổ desktop (rộng 725px);
   khoảng đọc dễ nhất là 60–75 ký tự. */
.lc-p, .lc-detail-body p, .lc-art-body p { max-width: 58ch; }
/* 🔴 `ch` đo theo bề rộng chữ số 0 — rộng hơn chữ thường nhiều. Đo thật:
   68ch = 680px nhưng vẫn chứa 84–91 ký tự/dòng. 58ch ≈ 580px ≈ 72–74 ký tự. */

/* Trong văn bản chạy chỉ nên dùng MỘT cách nhấn. Đo được 20,5% ký tự bị tô nhấn,
   có đoạn 35,4% với 4 màu — vì từ khoá vừa đổi màu vừa in đậm. Giữ màu, hạ độ đậm. */
.lc-p b, .lc-p strong, .lm-p b, .lm-p strong,
.lc-detail-body p b, .lc-detail-body p strong { font-weight: 600; }

/* các trang khác dùng lớp đoạn văn riêng — đo được 1.010–1.048px/dòng.
   Đều `text-align: start` nên giới hạn bề ngang không làm lệch căn chỉnh. */
.lc-sao-block > p, .lc-hol-faq p, p.gd-sum, p.gd-note { max-width: 58ch; }


/* ===== Đợt 09/10/2026 · viền tiêu điểm bàn phím =====
   Đo được 3 ô nhập ngày/tháng/năm (desktop) không hiện dấu gì khi tab tới
   ⇒ người dùng bàn phím mất dấu con trỏ. :focus-visible chỉ hiện khi điều
   hướng bằng bàn phím, không làm phiền người bấm chuột. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}


/* ===== Đợt 09/10/2026 · khối hero của các trang danh mục =====
   `.lc-sao-hero` vốn thiết kế cho cặp `.lc-sao-hero-emblem` + `.lc-sao-hero-main`
   nên để `display:flex` hàng ngang. Nhưng 11 view khác lại đặt THẲNG 4 khối con
   (breadcrumb · h1 · mô tả · điều hướng) vào trong nó ⇒ tiêu đề bị bóp còn
   142–425px và vỡ 2–4 dòng. Đo: /thang-10-nam-2026/ h1 rộng 142px = 4 dòng.
   `:not(:has())` chỉ áp cho nhóm dùng sai, trang dùng đúng (vd /sao/*) không đổi;
   trình duyệt không hỗ trợ :has() thì giữ nguyên hiện trạng, không tệ hơn. */
/* 🔴 Các luật này viết cho hero xếp NGANG (desktop). Trên mobile hero là
   flex COLUMN nên `flex-basis: 440px` biến thành CHIỀU CAO — đoạn mô tả chỉ
   ~6 dòng chữ mà chiếm 440px toàn khoảng trống, đẩy lưới lịch khỏi màn hình
   đầu. Vì vậy chỉ áp từ 768px trở lên. */
@media (min-width: 601px) {
  .lc-sao-hero:not(:has(> .lc-sao-hero-main)) { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
  .lc-sao-hero:not(:has(> .lc-sao-hero-main)) > .gd-bc        { flex: 1 0 100%; margin: 0; }
  .lc-sao-hero:not(:has(> .lc-sao-hero-main)) > .lc-sao-h1    { flex: 1 0 100%; margin: 0; }
  .lc-sao-hero:not(:has(> .lc-sao-hero-main)) > .lc-sao-lead  { flex: 1 1 440px; margin: 0; }
  .lc-sao-hero:not(:has(> .lc-sao-hero-main)) > nav:last-child{ flex: 0 0 auto; margin-left: auto; }
}

/* mô tả trong hero: khi hero không có khối điều hướng thì nó giãn hết 998px
   = 125 ký tự/dòng (tác dụng phụ của luật hero ở trên). Và mô tả trong thẻ
   danh sách văn khấn cũng rộng 1010px. Cùng ngưỡng 58ch như đoạn văn khác. */
.lc-sao-lead, .vk-item p { max-width: 58ch; }


/* ===== Đợt 09/10/2026 · logo bị méo ở 23 loại trang dùng _sao_head.php =====
   `.lh-emblem` khai width:100%;height:100% nhưng `.lc-logo` KHÔNG có kích thước
   riêng, nên khung co theo chiều cao khối chữ bên cạnh: đo được 58×88 (méo dọc,
   vòng bát quái thành bầu dục). Bản trang ngày không dính vì `.lm-logo` có cỡ
   cố định — đo 60×60 vuông. Ép khung vuông, ảnh giữ đúng tỉ lệ 1:1. */
.lc-brand .lc-logo { flex: 0 0 auto; width: 58px; height: 58px; }
.lc-brand .lc-logo .lh-emblem { width: 100%; height: 100%; aspect-ratio: 1; }
@media (max-width: 767px) {
  .lc-brand .lc-logo { width: 50px; height: 50px; }
}


/* ===== Đợt 09/10/2026 · trang lịch tháng trên điện thoại =====
   Sếp yêu cầu đưa lưới lịch lên đầu để xem tổng quan. Đo trước khi sửa:
   hero 449px đẩy lưới xuống y=653 (ngoài màn hình đầu 844px).
   Mô tả nay nằm ngoài hero nên có thể xếp lại thứ tự bằng `order`:
   hero → lưới lịch → mô tả. Chỉ áp cho trang có lưới (`:has(> .mo-print)`). */
@media (max-width: 600px) {
  .lc-sao-wrap:has(> .mo-print) { display: flex; flex-direction: column; }
  .lc-sao-wrap:has(> .mo-print) > *              { order: 5; }
  .lc-sao-wrap:has(> .mo-print) > .lc-sao-hero   { order: 1; }
  .lc-sao-wrap:has(> .mo-print) > .mo-print      { order: 2; }
  .lc-sao-wrap:has(> .mo-print) > .lc-sao-lead   { order: 3; margin: 0 0 14px; }
  /* điều hướng tháng: 3 mục tự xuống dòng so le trông lộn xộn → chia đều 1 hàng */
  .mo-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; width: 100%; }
  .mo-nav > :last-child { text-align: right; }
}


/* ===== Đợt 09/10/2026 · thanh tiêu đề trên điện thoại =====
   Đo ở 390px: `.lc-brand` chỉ được 121px (logo 50 + chữ 53) trong khi điều hướng
   chiếm 205px ⇒ "Lịch Hay" vỡ 2 dòng và "Lịch âm vạn niên" vỡ 4 dòng, thanh tiêu
   đề cao 156px. Cùng cách đã dùng cho trang lá số: bỏ dòng phụ, giữ tên một dòng. */
@media (max-width: 600px) {
  .lc-brand { flex: 0 0 auto; gap: 10px; }
  .lc-brand-sub  { display: none; }
  .lc-brand-name { font-size: 20px; white-space: nowrap; }
}
@media (max-width: 380px) {
  .lc-brand .lc-logo { width: 42px; height: 42px; }
  .lc-brand-name { font-size: 18px; }
}