/* ============================================================
   Thẻ định nghĩa chỉ số tài chính — Hướng A "Sách giáo khoa hiện đại"
   Typography là chủ đạo; thang xám + đúng MỘT màu nhấn navy.
   Công thức là ngôi sao: dạng phân số thật (tử trên / mẫu dưới),
   không nền màu, không chip, không viền trái màu, không 2 màu tử-mẫu.
   Dùng chung cho các mục "định nghĩa" trên web đào tạo MB.
   ============================================================ */

/* ---------- Biến màu theo chế độ sáng/tối ---------- */
[data-md-color-scheme="default"] {
  --sd-accent: #141B4D;      /* navy — MÀU NHẤN DUY NHẤT của toàn bộ thẻ */
  --sd-hair: var(--md-default-fg-color--lightest);
  --sd-hair-strong: var(--md-default-fg-color--lighter);
  /* rgba thay vì color-mix để chắc chắn hiển thị đồng nhất mọi trình duyệt */
  --sd-flag-bg: rgba(20, 27, 77, 0.06);
  --sd-flag-line: rgba(20, 27, 77, 0.30);
  --sd-target-bg: rgba(20, 27, 77, 0.05);
}
[data-md-color-scheme="slate"] {
  --sd-accent: #8FA8FF;      /* navy nhạt hơn để đủ tương phản trên nền tối */
  --sd-flag-bg: rgba(143, 168, 255, 0.12);
  --sd-flag-line: rgba(143, 168, 255, 0.35);
  --sd-target-bg: rgba(143, 168, 255, 0.10);
}

/* ---------- Trang khái niệm riêng (1 thẻ / 1 trang) ---------- */
/* Material tự sinh <h1> từ frontmatter title — trùng với sd-title trong thẻ.
   Ẩn H1 khi phần tử ngay sau nó là thẻ định nghĩa (chỉ trên trang khái niệm). */
.md-typeset h1:has(+ .sd-card) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}

/* ---------- Khung xếp thẻ ---------- */
.sd-stack { display: flex; flex-direction: column; gap: 0; margin: 6px 0 2px; }

/* ---------- Thẻ định nghĩa (khối ngoài cùng — anchor) ---------- */
.md-typeset .sd-card {
  position: relative;
  border: none;
  border-top: 1px solid var(--sd-hair-strong);
  border-radius: 0;
  background: var(--md-default-bg-color);
  padding: 44px 2px 10px;
  scroll-margin-top: 4.5rem; /* chừa chỗ cho header dính khi nhảy tới anchor */
  transition: background-color .3s ease, border-color .3s ease;
}
.md-typeset .sd-card:first-of-type { border-top: none; padding-top: 6px; }
/* Thẻ vừa được nhảy tới: tint + gạch trên navy rất nhẹ, không đổ bóng màu */
.md-typeset .sd-card:target {
  background: var(--sd-target-bg);
  border-top-color: var(--sd-accent);
}

/* ---------- Đầu thẻ ---------- */
.md-typeset p.sd-kicker {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--md-default-fg-color--light); font-weight: 600; margin: 0 0 10px;
}
.md-typeset p.sd-title {
  font-size: 28px; line-height: 1.15; margin: 0 0 4px; font-weight: 700;
  color: var(--sd-accent); letter-spacing: -.01em;
}
.md-typeset p.sd-subtitle {
  font-size: 15px; color: var(--md-default-fg-color--light); margin: 0 0 22px; font-weight: 400;
}

/* ---------- Định nghĩa lõi ---------- */
.md-typeset p.sd-lede {
  font-size: 17px; line-height: 1.6; color: var(--md-default-fg-color); margin: 0;
}

/* ---------- Kẻ ngang phân đoạn ---------- */
.md-typeset hr.sd-rule { border: none; border-top: 1px solid var(--sd-hair); margin: 26px 0; }
.md-typeset hr.sd-rule.sd-rule-strong { border-top: 1px solid var(--sd-hair-strong); margin: 30px 0; }

/* ---------- Nhãn mục nhỏ (uppercase, dùng khi cần) ---------- */
.md-typeset p.sd-section {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--md-default-fg-color--light); font-weight: 600; margin: 0 0 14px;
}

/* ---------- Công thức: ngôi sao của thẻ ---------- */
.sd-formula-block { margin: 8px 0; padding: 20px 2px; text-align: center; }
.md-typeset .sd-formula {
  font-family: var(--md-code-font-family, "JetBrains Mono", monospace);
  display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap;
  justify-content: center; font-size: 19px; color: var(--sd-accent);
}
.md-typeset .sd-formula .sd-fname { font-weight: 600; }
.md-typeset .sd-formula .sd-eq { color: var(--md-default-fg-color--lighter); font-weight: 400; }
/* Công thức KHÔNG phải phân số (VLĐR, CCC, EBITDA, Cân đối hàng-tiền): dòng lớn căn giữa */
.md-typeset .sd-formula.sd-formula-plain {
  display: block; font-size: 17px; line-height: 1.7; color: var(--sd-accent); font-weight: 600;
}

/* ---------- Phân số thật (tử trên / kẻ ngang / mẫu dưới) ---------- */
.sd-frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.3; vertical-align: middle; }
.sd-frac .sd-frac-top, .sd-frac .sd-frac-bot { padding: 2px 4px; font-size: 16px; color: var(--sd-accent); }
.sd-frac .sd-frac-bar { width: 100%; height: 1px; background: var(--sd-accent); margin: 4px 0; }
/* Nhiều phân số gọn xếp dọc (ROA · ROE · ROS) */
.sd-formula-multi { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.sd-formula-multi .sd-formula { font-size: 17px; }

/* ---------- Đọc con số / ghi chú ---------- */
.md-typeset p.sd-note { font-size: 15px; line-height: 1.65; color: var(--md-default-fg-color--light); margin: 0; }
.md-typeset p.sd-note b { color: var(--md-default-fg-color); font-weight: 600; }

/* ---------- Ví dụ minh họa ---------- */
.md-typeset .sd-example { font-size: 15px; line-height: 1.7; color: var(--md-default-fg-color--light); margin: 22px 0 0; }
.md-typeset .sd-example b { color: var(--md-default-fg-color); }
.md-typeset .sd-example .sd-example-result {
  display: block; margin-top: 8px; font-weight: 700; color: var(--sd-accent);
}

/* ---------- Bảng so sánh (cặp dễ nhầm, vd DSCR / ICR) ---------- */
.md-typeset table.sd-cmp { width: 100%; border-collapse: collapse; font-size: 14px; margin: 22px 0 0; }
.md-typeset table.sd-cmp th, .md-typeset table.sd-cmp td {
  text-align: left; padding: 11px 14px; border: none; border-top: 1px solid var(--sd-hair);
}
.md-typeset table.sd-cmp thead th {
  border-top: none; border-bottom: 1px solid var(--sd-hair-strong);
  color: var(--md-default-fg-color--light); font-weight: 600; text-transform: uppercase;
  font-size: 11px; letter-spacing: .06em;
}
.md-typeset table.sd-cmp th:first-child, .md-typeset table.sd-cmp td:first-child {
  padding-left: 0; color: var(--md-default-fg-color--light); font-weight: 500;
}
.md-typeset table.sd-cmp td.sd-cmp-accent { color: var(--sd-accent); font-weight: 600; }

/* ---------- Ba mức độ sâu 🟢🟡🔴 ---------- */
.sd-levels { margin-top: 26px; }
.md-typeset details.sd-lv { border-top: 1px solid var(--sd-hair); padding: 2px 0; }
.md-typeset details.sd-lv:last-of-type { border-bottom: 1px solid var(--sd-hair); }
.md-typeset details.sd-lv > summary {
  list-style: none; cursor: pointer; padding: 14px 0; display: flex; align-items: baseline;
  gap: 12px; font-size: 15px; font-weight: 600; color: var(--md-default-fg-color);
}
.md-typeset details.sd-lv > summary::-webkit-details-marker { display: none; }
.md-typeset details.sd-lv > summary::marker { content: ""; }
.md-typeset details.sd-lv > summary::before { display: none; }
.md-typeset details.sd-lv > summary::after {
  content: "›"; margin-left: auto; font-size: 19px; line-height: 1;
  color: var(--md-default-fg-color--lighter); transition: transform .15s ease;
}
.md-typeset details.sd-lv[open] > summary::after { transform: rotate(90deg); }
.md-typeset details.sd-lv > summary:focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; }
.md-typeset details.sd-lv > summary .sd-lv-mark {
  font-family: var(--md-code-font-family, monospace); font-size: 12px;
  color: var(--md-default-fg-color--light); font-weight: 600; letter-spacing: .04em; white-space: nowrap;
}
.md-typeset details.sd-lv .sd-lv-body {
  padding: 0 0 22px 26px; font-size: 15px; line-height: 1.7; color: var(--md-default-fg-color--light);
}
.md-typeset details.sd-lv .sd-lv-body p { margin: 0 0 10px; }
.md-typeset details.sd-lv .sd-lv-body p:last-child { margin-bottom: 0; }
.md-typeset details.sd-lv .sd-lv-body ul { margin: 8px 0 0; padding-left: 18px; }
.md-typeset details.sd-lv .sd-lv-body li { margin: 4px 0; }

/* ---------- Khối "Cần xác nhận" — nhấn navy nhẹ, KHÔNG đỏ/hồng ---------- */
.md-typeset .sd-flag {
  display: inline-flex; align-items: baseline; gap: 6px; margin-top: 4px;
  padding: 7px 12px; font-size: 13px; line-height: 1.5;
  background: var(--sd-flag-bg); color: var(--md-default-fg-color);
  border: 1px solid var(--sd-flag-line); border-radius: 6px;
}
.sd-flag-tag { font-weight: 700; color: var(--sd-accent); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .md-typeset .sd-card, .md-typeset details.sd-lv > summary::after { transition: none; }
}