/**
 * Booktoan Pro — Shortcode Callout CSS
 * CSS cho các shortcode: [dinhnghia], [lythuyet], [vidu], [loigiai],
 * [phuongphap], [nhanxet], [chuy], [dinhly], [tinhchat], [dang],
 * [baitap], [list-posts]
 *
 * File này được load tự động khi nội dung bài viết / trang có chứa
 * bất kỳ shortcode nào ở trên (detect qua has_shortcode).
 * Không phụ thuộc vào page template.
 */

/* ================================================================
   CALLOUT VARIABLES
   ================================================================ */
:root {
  /* Callout color tokens */
  --st-c-def-bg: #eff6ff;
  --st-c-def-border: #3b82f6;
  --st-c-def-head: rgba(59, 130, 246, .12);
  --st-c-ex-bg: #f5f3ff;
  --st-c-ex-border: #8b5cf6;
  --st-c-ex-head: rgba(139, 92, 246, .12);
  --st-c-sol-bg: #f0fdf4;
  --st-c-sol-border: #10b981;
  --st-c-sol-head: rgba(16, 185, 129, .12);
  --st-c-method-bg: #fff7ed;
  --st-c-method-border: #f97316;
  --st-c-method-head: rgba(249, 115, 22, .12);
  --st-c-note-bg: #fefce8;
  --st-c-note-border: #eab308;
  --st-c-note-head: rgba(234, 179, 8, .12);
  --st-c-warn-bg: #fff1f2;
  --st-c-warn-border: #f43f5e;
  --st-c-warn-head: rgba(244, 63, 94, .12);
  /* Task / Bài tập */
  --st-c-task-bg: #f0f9ff;
  --st-c-task-border: #0ea5e9;
  --st-c-task-head: #0284c7;
}

/* ================================================================
   CALLOUT BOXES — kiểu pill label + bordered card
   ================================================================ */

/* Container chung: tạo vùng đẩy xuống để pill label nhô ra ngoài */
.st-callout {
  position: relative;
  margin: 32px 0 24px;
  padding-top: 14px;
  /* chỗ trống cho pill nhô lên */
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: transparent;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.st-callout:hover {
  transform: translateY(-2px);
}

/* Phần pill label nhô lên trên đường viền */
.st-callout__head {
  /* absolute ra ngoài box, đặt góc trên-trái */
  position: absolute;
  top: -14px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  /* shadow nhẹ cho pill */
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  z-index: 1;
}

/* Pill label cho details (lời giải) cần list-style none */
.st-callout > summary.st-callout__head {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.st-callout > summary.st-callout__head::-webkit-details-marker {
  display: none;
}

.st-callout__icon {
  font-size: 14px;
  flex-shrink: 0;
}

.st-callout__title {
  flex: 1;
}

/* Mũi tên thu/mở cho details */
.st-callout__arrow {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.2s;
  margin-left: 4px;
}

details.st-callout[open] .st-callout__arrow {
  transform: rotate(90deg);
}

/* Nội dung box — có nền màu nhạt, border-radius hợp với container */
.st-callout__body {
  padding: 20px 20px 18px;
  font-size: 16px;
  line-height: 1.85;
  border-radius: 12px;
}

.st-callout__body > *:last-child {
  margin-bottom: 0 !important;
}

/* ── Định nghĩa / Lý thuyết (blue) ─────────────────── */
.st-callout--def {
  border-color: var(--st-c-def-border); /* #3b82f6 */
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
}

.st-callout--def:hover {
  box-shadow: 0 6px 24px rgba(59, 130, 246, .18);
}

.st-callout--def .st-callout__head {
  background: #1e40af; /* dark blue pill */
  color: #fff;
}

.st-callout--def .st-callout__body {
  background: var(--st-c-def-bg); /* #eff6ff */
  color: #1e3a5f;
}

/* ── Ví dụ (purple) ─────────────────────────────────── */
.st-callout--ex {
  border-color: var(--st-c-ex-border); /* #8b5cf6 */
  box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
}

.st-callout--ex:hover {
  box-shadow: 0 6px 24px rgba(139, 92, 246, .18);
}

.st-callout--ex .st-callout__head {
  background: #5b21b6; /* dark purple pill */
  color: #fff;
}

.st-callout--ex .st-callout__body {
  background: var(--st-c-ex-bg); /* #f5f3ff */
  color: #3b2066;
}

/* ── Lời giải (green) ───────────────────────────────── */
.st-callout--sol {
  border-color: var(--st-c-sol-border); /* #10b981 */
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}

.st-callout--sol:hover {
  box-shadow: 0 6px 24px rgba(16, 185, 129, .18);
}

.st-callout--sol > summary.st-callout__head {
  background: #065f46; /* dark green pill */
  color: #fff;
}

.st-callout--sol .st-callout__body {
  background: var(--st-c-sol-bg); /* #f0fdf4 */
  color: #14532d;
}

/* ── Phương pháp (orange) ───────────────────────────── */
.st-callout--method {
  border-color: var(--st-c-method-border); /* #f97316 */
  box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
}

.st-callout--method:hover {
  box-shadow: 0 6px 24px rgba(249, 115, 22, .18);
}

.st-callout--method .st-callout__head {
  background: #c2410c; /* dark orange pill */
  color: #fff;
}

.st-callout--method .st-callout__body {
  background: var(--st-c-method-bg); /* #fff7ed */
  color: #7c2d12;
}

/* ── Nhận xét (yellow) ──────────────────────────────── */
.st-callout--note {
  border-color: var(--st-c-note-border); /* #eab308 */
  box-shadow: 0 0 0 0 rgba(234, 179, 8, 0);
}

.st-callout--note:hover {
  box-shadow: 0 6px 24px rgba(234, 179, 8, .2);
}

.st-callout--note .st-callout__head {
  background: #a16207; /* dark yellow pill */
  color: #fff;
}

.st-callout--note .st-callout__body {
  background: var(--st-c-note-bg); /* #fefce8 */
  color: #713f12;
}

/* ── Chú ý (rose/red) ───────────────────────────────── */
.st-callout--warn {
  border-color: var(--st-c-warn-border); /* #f43f5e */
  box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
}

.st-callout--warn:hover {
  box-shadow: 0 6px 24px rgba(244, 63, 94, .18);
}

.st-callout--warn .st-callout__head {
  background: #9f1239; /* dark rose pill */
  color: #fff;
}

.st-callout--warn .st-callout__body {
  background: var(--st-c-warn-bg); /* #fff1f2 */
  color: #881337;
}

/* ================================================================
   CALLOUT NÂNG CAO: Định lý, Tính chất, Dạng bài
   ================================================================ */

/* ── Định lý (indigo) ───────────────────────────────── */
.st-callout--theorem {
  border-color: #4f46e5;
  box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
}

.st-callout--theorem:hover {
  box-shadow: 0 6px 24px rgba(79, 70, 229, .18);
}

.st-callout--theorem .st-callout__head {
  background: #312e81; /* dark indigo pill */
  color: #fff;
}

.st-callout--theorem .st-callout__body {
  background: #eef2ff;
  color: #312e81;
}

/* ── Tính chất (teal) ───────────────────────────────── */
.st-callout--prop {
  border-color: #0d9488;
  box-shadow: 0 0 0 0 rgba(13, 148, 136, 0);
}

.st-callout--prop:hover {
  box-shadow: 0 6px 24px rgba(13, 148, 136, .18);
}

.st-callout--prop .st-callout__head {
  background: #134e4a; /* dark teal pill */
  color: #fff;
}

.st-callout--prop .st-callout__body {
  background: #f0fdfa;
  color: #134e4a;
}

/* ── Dạng bài (amber) ───────────────────────────────── */
.st-callout--dang {
  border-color: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
}

.st-callout--dang:hover {
  box-shadow: 0 6px 24px rgba(245, 158, 11, .22);
}

.st-callout--dang .st-callout__head {
  background: #92400e; /* dark amber pill */
  color: #fff;
  font-size: 13.5px;
}

.st-callout--dang .st-callout__title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}

.st-callout--dang .st-callout__body {
  background: #fffbeb;
  color: #78350f;
  font-family: 'STIX Two Text', 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.85;
  padding: 20px 22px 20px;
}

/* Lồng [phuongphap] bên trong [dang] */
.st-callout--dang .st-callout--method {
  margin: 20px 0 0;
}

/* "Phương pháp giải:" heading bên trong body */
.st-callout--dang .st-callout__body strong:first-child {
  display: block;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 10px;
}

/* ── Bài tập (sky blue professional) ───────────────── */
.st-callout--task {
  border-color: var(--st-c-task-border); /* #0ea5e9 */
  box-shadow: 0 0 0 0 rgba(19, 38, 66, 0);
}

.st-callout--task:hover {
  box-shadow: 0 6px 24px rgba(36, 73, 38, 0.15);
}

.st-callout--task .st-callout__head {
  background: var(--st-c-task-head); /* #0284c7 */
  color: #fff;
}

.st-callout--task .st-callout__body {
  background: var(--st-c-task-bg);
  color: #1e324d;
  border: 1px solid var(--st-c-task-border);
}

/* ================================================================
   DANH SÁCH BÀI VIẾT — Shortcode [list-posts]
   ================================================================ */
.st-list-posts {
  list-style: none !important;
  margin: 1.5rem 0 !important;
  padding: 0 !important;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.st-list-posts li {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid #f3f4f6;
}

.st-list-posts li:last-child {
  border-bottom: none;
}

.st-list-posts a {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  color: #374151 !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.st-list-posts a::before {
  content: "→";
  margin-right: 12px;
  color: #10b981;
  font-weight: bold;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.st-list-posts a:hover {
  background: #f9fafb;
  color: #1565c0 !important;
  padding-left: 24px;
}

.st-list-posts a:hover::before {
  transform: translateX(4px);
  opacity: 1;
}

/* ─── Variant: related="true" — li có span số thứ tự ─── */

/* Số thứ tự: 1. 2. 3. ... */
.st-list-posts__num {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 12px 0 12px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #10b981;
  min-width: 2.2em;
  line-height: 1;
  vertical-align: middle;
}

/* Khi li chứa span số + link: layout flex (browser hiện đại) */
.st-list-posts li:has(.st-list-posts__num) {
  display: flex;
  align-items: stretch;
}

/* Link thu hẹp padding-left vì đã có số thứ tự */
.st-list-posts li:has(.st-list-posts__num) a {
  flex: 1;
  padding-left: 6px;
}

/* Ẩn mũi tên → khi li đã có số thứ tự */
.st-list-posts li:has(.st-list-posts__num) a::before {
  display: none;
}

/* Fallback cho browser không support :has() —
   span__num hiển thị inline trước link, không vỡ layout */
@supports not selector(:has(a)) {
  .st-list-posts__num {
    padding: 12px 4px 12px 18px;
  }
}