/* =================================================================== */
/* == TỬ VI CALI — STYLESHEET HỢP NHẤT (DARK THEME & LAYOUT, 720px) == */
/* =================================================================== */

 { box-sizing: border-box; } 

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #0d1117;
    color: #c9d1d9;
}

/* ============================================= */
/* == LAYOUT CHÍNH & FORM (PHIÊN BẢN MỚI) == */
/* ============================================= */

.wrap {
    max-width: 1060px; /* Khung lớn 720 ngang */
    margin: 20px auto;
    padding: 30px 40px;
    background: #161b22;
    border: 1px solid #000000;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    position: relative;
}

.form-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 40px;
    margin-top: 24px;
}

.col, .right-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0 10px;
    align-items: center;
}

.form-group.checkbox-group {
    grid-template-columns: auto 1fr;
    gap: 8px;
}

label { font-weight: 500; color: #000; }
.form-group.checkbox-group label { font-weight: normal; }

input, select {
    padding: 8px;
    border: 1px solid #30363d;
    border-radius: 8px;
    background-color: #0d1117;
    color: #c9d1d9;
    height: 38px;
    box-sizing: border-box;
    width: 100%;
}

.actions {
    text-align: center;
    margin-top: 20px;
}

.actions button {
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid #2da042;
    background: #238636;
    color: #fff;
    cursor: pointer;
    font-size: 1.1em;
}

.theme-switch {
    position: absolute;
    right: 30px;
    bottom: 20px;
    font-size: 14px;
}

@media (max-width: 720px) {
    .form-2col { grid-template-columns: 1fr; }
}

/* ============================================= */
/* == BẢNG LÁ SỐ (GRID 4x4 + CENTER) == */
/* ============================================= */

.chart-fit-wrap { margin-top: 30px; }

.chart--desktop {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr); /* các hàng đồng đều, tránh dãn vì nội dung */
    grid-template-areas:
        "b6 b7 b8 b9"
        "b5 c  c  b10"
        "b4 c  c  b11"
        "b3 b2 b1 b12";
    gap: 1px;
    background: #30363d;
}

.box {
    background: #161b22;
    min-height: 295px;           /* linh hoạt hơn 295px */
    padding: 8px;
    position: relative;
   /* overflow: auto;               nội dung dài thì cuộn, không phá grid */
    overscroll-behavior: contain;
}

/* --- Cung trung tâm --- */
.center-wrap {
    grid-area: c;
    background: #0d1117;
    position: relative;
}

.center-ln-rect,
.center-inner {
    position: absolute;
    box-sizing: border-box;
}

/* Nền */
.center-ln-rect {
    inset: 8px;
    border: 16px solid rgba(139,148,158,.1);
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}

/* Nội dung trung tâm (đã bỏ flex-center, chống tràn) */
.center-inner {
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    height: auto;
    padding: 24px 32px 112px;
    background: transparent;
    color: #c9d1d9;
    display: block;
    overflow: auto;
    z-index: 2;
}

.center-title { margin: 0 0 10px; font-size: 18px; font-weight: 800; text-align: center; color: #a70202; }
.center-card { border: 0; background: transparent; padding: 0; }
.center-grid { display: block; }
.center-row { display: flex; gap: 6px; line-height: 1.35; }
.center-row b { min-width: 160px; color: #000000; }
.center-inner .note { position: absolute; left: 0; right: 0; bottom: 28px; margin: 0; text-align: center; font-size: 12px; color: #8b949e; }

/* ============================================= */
/* == CHI TIẾT CUNG (BOX) == */
/* ============================================= */

.ts-stack { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.ts-edge-row { display: flex; gap: 6px; }
.ts-edge-base { margin-bottom: 2px; }
.ts-edge-luu { margin-bottom: 2px; }
.box .ts-bottom { font-size: 14px; font-weight: 700; color: #8b949e; white-space: nowrap; }
.edge-pill { display: inline-block; padding: 1px 6px; font-size: 11px; font-weight: 800; line-height: 1.1; color: #b91c1c; border: 1px solid #b91c1c; background: #ffffff; border-radius: 999px; white-space: nowrap; }
.edge-pill.luu { color: #b91c1c; border-color: #b91c1c; }

.box .header { position: relative; display: flex; justify-content: center; align-items: center; height: 40px; padding-top: 6px; }
.box .chi-left { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 700; color: #8b949e; }
.box .cung-center { font-size: 16px; font-weight: 800; color: #000000; white-space: nowrap; }
.badge { position: absolute; top: 40px; font-weight: 800; right: 30px; font-size: 14px; background: #ffffff; color: #ff0c00; padding: 2px 6px; border-radius: 12px; }


.lcung { position: absolute; top: 35px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: #080808; }
.napcan-left { position: absolute; left: -10px; top: 8px; font-size: 14px; font-weight: 700; padding: 0 6px; color: #000000; background: transparent; }
.dv-left { position: absolute; left: -10px; font-size: 10px; font-weight: 600; padding: 0 6px; }
.dv-menh { top: 28px; color: #b22e26; }
.dv-lt, .dv-kd, .dv-khoi, .dv-viet, .dv-tma { top: 68px; color: #f85149; }
.dv-da { top: 48px; color: #f85149; }
.dv-hloc, .dv-hquyen, .dv-hkhoa, .dv-hky { top: 88px; color: #f85149; }
.ltmbh-tag { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: #58a6ff; background: transparent; pointer-events: none; white-space: nowrap; }
.pill-aux { position: absolute; left: 8px; font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 999px; border: 1px solid; background: #ffffff; }
.pill-aux.ldv { color: #f85149; border-color: #f85149; top: 248px; }

.star-center { text-align: center; padding: 8px 10px 0; font-size: 16px; line-height: 1.35; color: #ff9e99; min-height: 1.35em; margin-top: 12px; margin-bottom: 2px; margin-right:-30px; }
.star-tv { font-weight: 700; position: relative; top: 1px; }
.star-tf { font-weight: 800; position: relative; top: -18px; }
.mvdh-tag { font-weight: 700; padding: 1px 4px; border-radius: 4px; margin-left: 4px; }
.mvdh-mieu { color: #000000; border: 1px solid #ffffff; }
.mvdh-vuong { color: #000000; border: 1px solid #ffffff; }
.mvdh-dac { color: #000000; border: 1px solid #ffffff; }
.mvdh-ham { color: #000000; border: 1px solid #ffffff; }



.below-stars{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0;

  /* ==== Núm vặn linh hoạt ==== */
  --shift-y: -12px;   /* dịch theo trục Y: âm = kéo lên, dương = đẩy xuống */
  --mt-delta: 0px;  /* muốn reflow (dãn khoảng thật) thì chỉnh margin-top qua biến này */
  --z: 1;           /* chồng lớp khi cần phủ lên nền sao, header... */

  /* Khoảng cách xung quanh */
  margin-right: 8px;
  margin-left: 8px;
  margin-bottom: 0;
  margin-top: calc(6px + var(--mt-delta)); /* mặc định 6px, cộng/trừ thêm linh hoạt */

  position: relative;
  transform: translateY(var(--shift-y));  /* dịch “ảo” không làm xô lệch layout */
  z-index: var(--z);
  /* optionally mượt hơn khi có animation: will-change: transform; */
}


.star-side { margin: 0; max-width: 100%; text-align: left; padding: 0; }
.star-right { max-width: 100%; text-align: right; font-size: 12px; color: #000000; padding: 0; }
.star-side .line { font-size: 12px; line-height: 1.3; padding: 2px 0; color: #000000; white-space: nowrap; }

.line-tt { font-weight: 700; color: #a5d6ff; }
.line-lt { color: #79c0ff; }
.line-ls { color: #f85149; font-style: italic; }
.line-phu, .line-vx { color: #7ee787; }
.line-kv, .line-ap { color: #a5d6ff; }
.line-hh, .line-dh { color: #e088ff; }
.line-gi, .line-ta { color: #76e3ea; }
.line-ma { color: #ffc68a; }
.line-lf { color: #d8b3ff; }
.line-kh { color: #d8b3ff; }
.line-cq { color: #8b949e; }
.line-la, .line-vong { color: #d8b3ff; }
.line-llt, .line-lkd, .line-lda, .line-lsh, .line-ldh, .line-ltm, .line-lbh, .line-lkhoc, .line-lhu { color: #e3b341; }
.line-lth { color: #7ee787; }

.luu-line { display: block; margin: 2px 0; white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 1.3; color: #e3b341; }
@media (max-width: 760px) {
  .below-stars { grid-template-columns: 1fr; }
  .below-stars .star-right { text-align: left; margin-top: 4px; }
}

.cln-pos { position: absolute; font-weight: 800; font-size: 13px; color: #f85149; background: #30363d; padding: 0 3px; }
.cln-active { color: #e3b341; text-decoration: underline; }
.pos-hoi { top: 0; left: 0; transform: translate(-30%, -130%); } .pos-dan { top: 0; right: 0; transform: translate(30%, -130%); } .pos-ty { bottom: 0; right: 0; transform: translate(30%, 130%); } .pos-than { bottom: 0; left: 0; transform: translate(-30%, 130%); } .pos-tyy { top: 0; left: 33%; transform: translate(-50%, -130%); } .pos-suu { top: 0; left: 66%; transform: translate(-50%, -130%); } .pos-mao { right: 25px; top: 33%; transform: translate(130%, -50%); } .pos-thin { right: 25px; top: 66%; transform: translate(130%, -50%); } .pos-mui { bottom: 0; left: 33%; transform: translate(-50%, 130%); } .pos-ngo { bottom: 0; left: 66%; transform: translate(-50%, 130%); } .pos-tuat { left: 25px; top: 33%; transform: translate(-130%, -50%); } .pos-dau { left: 25px; top: 66%; transform: translate(-130%, -50%); }

.top-right-pills { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.dv-pill { font-size: 14px; font-weight: 700; color: #000000; }
.month-label-pill { font-size: 11px; font-weight: 700; padding: 0px 2px; color: #000000; background: #ffffff; border-radius: 4px; }
.nguyet-han-pill { font-size: 9px; font-weight: 700; padding: 1px 6px; color: #000; border: 1px solid #000; background: transparent; border-radius: 999px; white-space: nowrap; }

/* --- Luận giải 12 tháng & các khối phân tích --- */
.month-analysis-block { background-color: #0d1117; border: 1px solid #30363d; border-radius: 8px; padding: 20px; margin-bottom: 24px; }
.month-title { color: #000000 !important; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 4px; font-size: 1.6em !important; font-weight: bold; margin-top: 0; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #30363d; }
.analysis-item { margin-bottom: 16px; }
.item-label { display: block; color: #000000; font-size: 1em; margin-bottom: 6px; font-weight: bold; }
.item-value, .item-content { color: #000000; line-height: 1.6; padding-left: 0px; }
.item-content b { color: #1c28d7 !important; }
.item-content b span { color: #000000 !important; }
.stars-list b { color: #000000 !important; }
.stars-list span[style*="color:blue"] { color: #7ee787 !important; }
.stars-list span[style*="color:red"] { color: #f85149 !important; }
.fin-month { border: 1px dashed #334155; border-radius: 12px; padding: 12px; background: transparent; margin-top: 8px; }
.fin-month .fin-title { font-weight: 700; color: #000000; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.fin-month .fin-score { font-weight: 600; margin-bottom: 4px; }
.fin-month ul { margin: 6px 0 0 16px; }
.fin-month .fin-hint, .fin-month .fin-tip { margin-top: 4px; font-size: 13px; color: #000000; }

/* --- Các module đặc biệt: Tứ Hóa, Plan Badge, Upgrade Button --- */
:root { --tuhoa-accent: #a78bfa; --tuhoa-accent2: #60a5fa; --tuhoa-text: #e5e7eb; --tuhoa-muted: #9ca3af; --tuhoa-surface: #0f172a; --tuhoa-surface2: #111827; --tuhoa-border: #374151; }
.tuhoa-pro { margin-top: 16px; }
.tuhoa-pro .month-title { font-size: 1.4em !important; color: var(--tuhoa-accent); padding-bottom: 6px; margin: 0 0 12px; border-bottom: 1px solid var(--tuhoa-border); }
.tuhoa-pro .analysis-item { background: var(--tuhoa-surface2); border: 1px solid var(--tuhoa-border); border-left: 4px solid var(--tuhoa-accent); border-radius: 12px; padding: 12px 14px; margin: 14px 0; color: var(--tuhoa-text); }
.tuhoa-pro h4 { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--tuhoa-text); }
.tuhoa-pro p { margin: 6px 0; line-height: 1.55; color: var(--tuhoa-text); }

:root { --upgrade-color: #e90ed8; --upgrade-color-dark: #c50cb7; --upgrade-glow: rgba(233, 14, 216, .35); }
.locked-card .btn-upgrade, a.btn-upgrade { background: var(--upgrade-color) !important; border: 1px solid var(--upgrade-color) !important; color: #fff !important; border-radius: 10px !important; padding: 8px 14px !important; font-weight: 800 !important; text-decoration: none !important; display: inline-block !important; line-height: 1 !important; box-shadow: 0 0 0 1px var(--upgrade-glow) inset, 0 8px 20px var(--upgrade-glow) !important; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease !important; }
.locked-card .btn-upgrade:hover, a.btn-upgrade:hover { background: var(--upgrade-color-dark) !important; border-color: var(--upgrade-color-dark) !important; transform: translateY(-1px) !important; }
.locked-card .btn-upgrade:active, a.btn-upgrade:active { transform: translateY(0) !important; filter: brightness(.96) !important; box-shadow: 0 0 0 1px var(--upgrade-glow) inset, 0 4px 14px var(--upgrade-glow) !important; }

@property --dash-rot { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plan-badge { --bg: #0b1220; --fg: #e5e7eb; --bd: #334155; --ring: #e90ed8, #ff8a00, #ffd93d, #39ff14, #00eaff, #3b82f6, #a78bfa, #ff4d6d, #e90ed8; --ring-alpha: .35; --led-size: 6deg; --led-gap: 18deg; --led-speed: 5.1s; position: relative; display: inline-flex; align-items: center; gap: .35em; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--bd); background: var(--bg); color: var(--fg); font-weight: 800; line-height: 1; letter-spacing: .3px; isolation: isolate; }
.plan-badge::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: 0; background: conic-gradient(var(--ring)); opacity: var(--ring-alpha); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.plan-badge::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: 1; background: conic-gradient(var(--ring)); -webkit-mask: repeating-conic-gradient(from var(--dash-rot), #000 0deg calc(var(--led-size)), transparent calc(var(--led-size)) calc(var(--led-gap))), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: source-in, xor; mask-composite: intersect, exclude; filter: saturate(1.2) contrast(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, .28)); animation: planBadgeLED var(--led-speed) linear infinite; }
@keyframes planBadgeLED { to { --dash-rot: 360deg; } }
.plan-badge.free { --bg: #1f2937; --fg: #cbd5e1; --bd: #374151; }
.plan-badge.gold { --bg: #21160a; --fg: #fff7e6; --bd: #f59e0b; }
.plan-badge.diamond { --bg: #0b1325; --fg: #e0f2fe; --bd: #60a5fa; }

/* ============================================= */
/* == DEBUG FRAME (bật bằng class trên .chart--desktop) == */
/* ============================================= */
.chart--desktop.debug-frame .box { outline: 1px dashed rgba(88,166,255,.45); }
.chart--desktop.debug-frame .center-wrap { outline: 2px solid rgba(227,179,65,.45); }
.chart--desktop.debug-frame .box * { overflow: visible; } /* soi phần tràn */

/* Theme + Auth (bên phải, 2 dòng) — giữ 1 bản, bỏ bản trùng */
.theme-switch{ position:absolute; right:30px; top:14px; text-align:right; font-size:14px; }
.theme-switch .row + .row{ margin-top:4px; }

/* Dropdown tối giản */
.u-menu{ position:relative; display:inline-block; }
.u-trigger{ list-style:none; display:inline-flex; gap:6px; align-items:center; cursor:pointer; }
.u-trigger::-webkit-details-marker{ display:none; }

/* Bỏ “viên thuốc” provider -> chữ thường */
.u-provider{ font-size:11px; opacity:.7; border:0; padding:0; border-radius:0; }

/* Vỏ dropdown gọn, không đổ bóng */
.u-dropdown{
  position:absolute; right:0; margin-top:6px; min-width:220px;
  border:1px solid #30363d; border-radius:10px; background:#0d1117; color:#c9d1d9;
  padding:8px 10px; box-shadow:none; z-index:50;
}
.theme-light .u-dropdown{ background:#ffffff; color:#111827; border-color:#e5e7eb; }

/* Item dạng text thuần, không nền xanh, không bo góc */
.u-dropdown a{
  display:block; padding:4px 0;
  color:inherit !important;           /* light: đen; dark: xám nhạt */
  background:transparent !important;
  border:0 !important; border-radius:0 !important;
}
.u-dropdown a:hover{
  background:transparent !important;  /* không tô nền */
  text-decoration:underline;          /* hover gạch chân đơn giản */
}

/* Header nhỏ gọn */
.u-head{ padding:4px 0 6px; border-bottom:1px solid #30363d; margin-bottom:6px; }
.theme-light .u-head{ border-bottom-color:#e5e7eb; }
.u-title{ font-weight:600; }          /* chữ đen thường, không quá đậm */
.u-sub{ font-size:12px; opacity:.8; }
.u-sep{ height:1px; background:#30363d; margin:6px 0; }

/* Sửa vòng 12 chi không bị che bởi trung tâm */
/* Center layering fix: vòng/nhãn ở trên, thẻ thông tin ở dưới */
/* ====== CENTER STACK (chuẩn cuối) ====== */
.center-wrap{
  position: relative;               /* gốc tọa độ cho 2 lớp */
  overflow: visible;
}

/* Lớp vòng/nhãn: trong suốt + chữ đen + ở trên */
.center-ln-rect{
  position: absolute;
  inset: 8px;
  z-index: 10 !important;           /* cao hơn center-inner */
  background: transparent !important;
  border-color: transparent !important;
  color: #000 !important;           /* chữ đen */
  pointer-events: none !important;  /* không chặn click/scroll */
}

/* Nhãn bên trong rect: bỏ nền/đổ bóng, chữ đen */
.center-ln-rect .cln-pos{
  background: transparent !important;
  color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Lớp nội dung trung tâm ở dưới, trong suốt, có cuộn */
.center-inner{
  position: absolute;
  inset: 8px;
  z-index: 5 !important;            /* thấp hơn ln-rect */
  background: transparent !important;
  overflow: auto;
}
/* Tuỳ chọn: chỉ đen ở Light theme */
.theme-light .center-ln-rect,
.theme-light .center-ln-rect .cln-pos{ color:#000 !important; }

/* Sửa vòng 12 chi không bị che bởi trung tâm */


/* ==== CENTER: bỏ scrollbar, thu nhỏ gọn gàng ==== */
/* ===== CENTER: thu nhỏ bề ngang + note xuống cuối ===== */
.center-wrap{ position: relative; overflow: visible; }

/* Vòng/nhãn ở trên, trong suốt + chữ đen (giữ nguyên yêu cầu trước) */
.center-ln-rect{
  position: absolute; inset: 8px;
  z-index: 10 !important;
  background: transparent !important;
  border-color: transparent !important;
  color: #000 !important;
  pointer-events: none !important;
}
.center-ln-rect .cln-pos{
  background: transparent !important;
  color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Trung tâm: thu hẹp bề ngang, không cuộn, canh giữa */
/* === Center: đúng cỡ nhỏ + note thấp hơn === */
.center-inner{
  position: relative !important;
  inset: auto !important;
  z-index: 5 !important;
  background: transparent !important;
  overflow: visible !important;      /* bỏ scrollbar */
  max-width: 460px;                  /* ↓ thu nhỏ như ảnh (có thể 440–480 tuỳ ý) */
  width: calc(100% - 96px);          /* chừa mép để không che 12 Chi */
  margin: 40px auto 20px;             /* canh giữa + thêm khoảng dưới */
  padding: 12px 16px 16px !important;
  font-size: 13px;
  line-height: 1.35;
}

/* chữ trong trung tâm gọn gàng */
.center-title{ font-size: 16px; margin-bottom: 8px; }
.center-grid{ display: grid; gap: 4px 10px; }
.center-row{ display: flex; gap: 6px; font-size: 13px; line-height: 1.35; }
.center-row b{ min-width: 130px; color: #000000; font-weight: 700; }

/* Note ở cuối, cách nội dung một đoạn cho "sang" hơn */
.center-inner .note{
  position: static !important;
  margin-top: 50px !important;       /* ↓ xuống thêm một chút */
  text-align: center;
  font-size: 12px;
  color: #000000;
  opacity: .9;
}

/* Giữ vòng/nhãn ở trên, trong suốt + chữ đen */
.center-ln-rect{
  position: absolute; inset: 8px;
  z-index: 10 !important;
  background: transparent !important;
  border-color: transparent !important;
  color: #000 !important;
  pointer-events: none !important;
}
.center-ln-rect .cln-pos{
  background: transparent !important;
  color: #000 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Hàng của lưới tự cao theo nội dung (tránh đè 12 cung) */
.chart--desktop{ grid-template-rows: repeat(4, auto) !important; }

/* Trung tâm: thu hẹp bề ngang, không cuộn, canh giữa */



/* Màu riêng cho tiêu đề (đè mạnh, hỗ trợ cả .title và .page-title) */
:root{
  --brand-title-dark: #58a6ff;   /* Dark theme */
  --brand-title-light:#b91c1c;   /* Light theme */
}

h2.title,
h2.page-title{
  color: var(--brand-title-dark) !important;
  font-weight: 800;
  margin: 0 0 8px;
}

.theme-light h2.title,
.theme-light h2.page-title{
  color: var(--brand-title-light) !important;
}


.title{margin:0; line-height:1.1}

  /* 1) Vàng hoàng gia (đẹp trên nền tối) */
  .title--gold{
    font-family:"Be Vietnam Pro",system-ui,sans-serif;
    font-weight:800;
    font-size:clamp(28px,5vw,48px);
    letter-spacing:.5px;
    text-transform:uppercase;
    background:linear-gradient(180deg,#fde68a 0%,#f59e0b 60%,#b45309 100%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    text-shadow:0 1px 0 rgba(0,0,0,.25), 0 8px 20px rgba(245,158,11,.35);
  }

  /* 2) Ruby sang trọng (serif) */
  .title--ruby{
    font-family:"Lora",serif;
    font-weight:700;
    font-size:clamp(26px,4.6vw,44px);
    color:#ef4444;
    letter-spacing:.3px;
    text-shadow:0 1px 0 #7f1d1d, 0 10px 18px rgba(239,68,68,.25);
    position:relative;
  }
  .title--ruby::after{
    content:"";
    display:block;
    width:72px; height:4px; margin-top:10px;
    background:linear-gradient(90deg,#ef4444,#f59e0b);
    border-radius:999px;
  }

  /* 3) Neon hiện đại (nổi trên nền tối/đen) */
  .title--neon{
    font-family:"Be Vietnam Pro",system-ui,sans-serif;
    font-weight:700;
    font-size:clamp(28px,5vw,48px);
    color:#93c5fd;                 /* xanh neon nhạt */
    text-shadow:
      0 0 2px #93c5fd,
      0 0 10px #60a5fa,
      0 0 22px rgba(96,165,250,.6);
    letter-spacing:.8px;
  }

  /* Tuỳ chọn: viền chữ (nếu muốn đậm hơn trên nền ảnh) */
  @supports(-webkit-text-stroke:1px #000){
    .title--gold.stroke,
    .title--ruby.stroke,
    .title--neon.stroke{
      -webkit-text-stroke:1px rgba(0,0,0,.25);
      text-shadow:none;
    }
  }
  
/* Link trông như text */
.title .title__link{
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

/* Ruby đỏ, KHÔNG có gạch vàng bên dưới */
.title--ruby{
  font-family: "Lora", serif;
  font-weight: 700;
  font-size: clamp(26px, 4.6vw, 44px);
  color: #dc2626;                 /* đỏ tươi */
  letter-spacing: .3px;
  text-shadow: 0 1px 0 #7f1d1d, 0 10px 18px rgba(220,38,38,.18);
}
.title--ruby::after{ content: none; } /* bỏ thanh gạch vàng */

/* Đặt SAU file CSS chung của anh */
h2.title.title--ruby > .title__link,
h2.title.title--ruby > .title__link:link,
h2.title.title--ruby > .title__link:visited,
h2.title.title--ruby > .title__link:hover,
h2.title.title--ruby > .title__link:active{
  color:#dc2626 !important;
            /* đỏ */
  text-decoration:none;      /* bỏ gạch chân */
}

/* Style tiêu đề ruby (không có gạch vàng) */
.title--ruby{
  font-family:"Lora",serif;
  font-weight:700;
  font-size:clamp(26px,4.6vw,44px);
  color:#dc2626;
  letter-spacing:.3px;
  text-shadow:0 1px 0 #7f1d1d, 0 10px 18px rgba(220,38,38,.18);
}
.title--ruby::after{ content:none; }  /* đảm bảo không còn gạch bên dưới */
}

/* Micro theme + FB share */
.theme-micro{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font:500 14px/1.3 system-ui, -apple-system, "Be Vietnam Pro", sans-serif;
  color:#475569;
}
.theme-micro .sep{ opacity:.55; user-select:none }
.theme-micro b{ font-weight:700 }
.theme-micro i{ opacity:.7 }

.btn-share-fb{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; text-decoration:none;
  background:#ffffff; color:#fff; font-weight:700;
  border:1px solid rgba(0,0,0,.06);
}
.btn-share-fb:hover{ filter:brightness(1.06) }
.fb-ico{ width:16px; height:16px; fill:currentColor; display:block }


.dob-group{display:flex;gap:8px;flex-wrap:wrap}
.dob-group select{min-width:96px;padding:8px 10px;border-radius:10px;border:1px solid #cbd5e1;font-size:16px}
.hint{color:#64748b;font-size:12px;display:block;margin-top:6px}


.month-analysis-block {
  position: relative;
  border: 1px solid var(--bd, #2b2f3a);
  border-radius: 10px;
  padding: 10px 12px;
  transition: box-shadow .2s ease, border-color .2s ease;
  margin-bottom: 12px;
}
.month-analysis-block.month-cell--warn {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239,68,68,.12);
}
.month-analysis-block.month-cell--loc { /* nhẹ nhàng, không đổi màu viền */
  outline: none;
}

.month-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px 0; font-size: 16px; font-weight: 700;
}
.badge-warn, .badge-loc {
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 14px; line-height: 1;
}
.note-warn{ color:#ef4444; font-size:12px; margin-top:6px; }
.note-loc{ color:#10b981; font-size:12px; margin-top:6px; }

.tv-tuhoa-month .tv-tuhoa-head { font-weight:600; margin-bottom:4px; }
.tv-tuhoa-month .tv-tuhoa-grid { font-size:14px; }


  .tv-tuhoa-mvdh .tv-tuhoa-mvdh-list { margin:4px 0 0 18px; }
  .tv-tuhoa-mvdh .tv-tuhoa-mvdh-item li { margin:2px 0; }
  
  
   .label-star{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
  .star-ico{display:inline-flex;line-height:1}
  .star-ico svg{
    fill:#f59e0b;           /* amber-500 */
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.12));
    transition: transform .15s ease, filter .15s ease;
  }
  .label-star:hover .star-ico svg{
    transform:scale(1.08);
    filter: drop-shadow(0 2px 0 rgba(0,0,0,.16));
  }
  
/* Footer mini — fixed bottom, centered */
.tvc-mini-footer{
  width:100%;
  text-align:center;
  font-size:12px;
  color:#64748b;           /* light */
  margin:18px 0 8px;
  padding-top:8px;
  border-top:1px dashed #e5e7eb;
}
.theme-dark .tvc-mini-footer{ color:#94a3b8; border-top-color:#334155; }