/* Hộp tóm tắt ngoài site. Thu gọn/mở bằng <details> gốc, không JS.
   Biến --bsk-tom-tat-* do PHP in vào style của .bsk-tom-tat (BSK_TomTat_Hop::style);
   fallback trong var() là bộ mặc định của Config, để hộp cũ chưa có style vẫn ra kiểu "nhẹ".
   Mọi class kiểu/cỡ/gạch/đệm là danh sách đóng của Config — thêm giá trị ở đó thì phải thêm rule ở đây,
   không thì hộp mất kiểu mà không báo gì. */
.bsk-tom-tat {
  --bsk-tom-tat-nen: #f0fdfa;
  --bsk-tom-tat-vien: #0f766e;
  --bsk-tom-tat-chu: #1f2937;
  --bsk-tom-tat-tieu-de: #0f766e;
  --bsk-tom-tat-bo: 10px;
  --bsk-tom-tat-tren: 0px;
  --bsk-tom-tat-duoi: 24px;
  --bsk-tom-tat-dem: 16px;
  box-sizing: border-box;
  color: var(--bsk-tom-tat-chu);
  font-size: 16px;
  line-height: 1.6;
  padding: var(--bsk-tom-tat-dem);
  margin: var(--bsk-tom-tat-tren) 0 var(--bsk-tom-tat-duoi);
  border-radius: var(--bsk-tom-tat-bo);
}

/* Kiểu: nhẹ (viền mảnh + nền), thẻ (bóng đổ, không viền), viền trái (thanh 4px), tối giản (hai kẻ ngang, nền trong). */
.bsk-tom-tat--nhe {
  background: var(--bsk-tom-tat-nen);
  border: 1px solid var(--bsk-tom-tat-vien);
}
.bsk-tom-tat--the {
  background: var(--bsk-tom-tat-nen);
  border: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
.bsk-tom-tat--vien-trai {
  background: var(--bsk-tom-tat-nen);
  border: 0;
  border-left: 4px solid var(--bsk-tom-tat-vien);
  /* Bo góc chỉ ở hai góc phải: thanh trái mà bo là thành mép cong lởm chởm. */
  border-radius: 0 var(--bsk-tom-tat-bo) var(--bsk-tom-tat-bo) 0;
}
.bsk-tom-tat--toi-gian {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--bsk-tom-tat-vien);
  border-bottom: 1px solid var(--bsk-tom-tat-vien);
  border-radius: 0;
}

/* Cỡ chữ, đệm trong. */
.bsk-tom-tat--co-nho { font-size: 14px; }
.bsk-tom-tat--co-vua { font-size: 16px; }
.bsk-tom-tat--co-lon { font-size: 18px; }
.bsk-tom-tat--dem-nho { --bsk-tom-tat-dem: 10px; }
.bsk-tom-tat--dem-vua { --bsk-tom-tat-dem: 16px; }
.bsk-tom-tat--dem-lon { --bsk-tom-tat-dem: 24px; }

/* Rộng tối đa, căn giữa — chỉ khi PHP in class --rong (rong > 0). */
.bsk-tom-tat--rong {
  max-width: var(--bsk-tom-tat-rong, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* Tiêu đề: icon + chữ + chữ phụ + mũi tên. */
.bsk-tom-tat summary,
.bsk-tom-tat__summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5em;
  list-style: none;
  color: var(--bsk-tom-tat-tieu-de);
  font-weight: 600;
  /* Dấu mở riêng ở ::after/::before thay ▸ mặc định của trình duyệt (khác nhau
     tuỳ engine), nên cùng một dấu trên mọi trình duyệt, đổi trạng thái chỉ
     bằng CSS theo details[open], không JS. */
  position: relative;
}
.bsk-tom-tat summary::-webkit-details-marker { display: none; }
.bsk-tom-tat summary::marker { content: ''; }
.bsk-tom-tat--dam { font-weight: 700; }

/* Dấu mở: hai trục tách — LOẠI (chevron/tam-giac/cong-tru/khong) quyết định nội
   dung, PHÍA (phai → ::after, trai → ::before) quyết định chỗ đứng; --dau-khong
   không chừa padding và không có rule nội dung nên không in gì. */
.bsk-tom-tat--dau-phai:not(.bsk-tom-tat--dau-khong) > .bsk-tom-tat__summary { padding-right: 1.4em; }
.bsk-tom-tat--dau-trai:not(.bsk-tom-tat--dau-khong) > .bsk-tom-tat__summary { padding-left: 1.4em; }
.bsk-tom-tat--dau-phai > .bsk-tom-tat__summary::after,
.bsk-tom-tat--dau-trai > .bsk-tom-tat__summary::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  font-weight: 400;
}
.bsk-tom-tat--dau-phai > .bsk-tom-tat__summary::after { right: .3em; }
.bsk-tom-tat--dau-trai > .bsk-tom-tat__summary::before { left: .1em; }

.bsk-tom-tat--dau-chevron.bsk-tom-tat--dau-phai > .bsk-tom-tat__summary::after,
.bsk-tom-tat--dau-chevron.bsk-tom-tat--dau-trai > .bsk-tom-tat__summary::before {
  content: '';
  width: .5em;
  height: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .15s ease;
}
.bsk-tom-tat--dau-chevron.bsk-tom-tat--dau-phai[open] > .bsk-tom-tat__summary::after,
.bsk-tom-tat--dau-chevron.bsk-tom-tat--dau-trai[open] > .bsk-tom-tat__summary::before {
  transform: translateY(-30%) rotate(225deg);
}
.bsk-tom-tat--dau-tam-giac.bsk-tom-tat--dau-phai > .bsk-tom-tat__summary::after,
.bsk-tom-tat--dau-tam-giac.bsk-tom-tat--dau-trai > .bsk-tom-tat__summary::before { content: '▸'; }
.bsk-tom-tat--dau-tam-giac.bsk-tom-tat--dau-phai[open] > .bsk-tom-tat__summary::after,
.bsk-tom-tat--dau-tam-giac.bsk-tom-tat--dau-trai[open] > .bsk-tom-tat__summary::before { content: '▾'; }
.bsk-tom-tat--dau-cong-tru.bsk-tom-tat--dau-phai > .bsk-tom-tat__summary::after,
.bsk-tom-tat--dau-cong-tru.bsk-tom-tat--dau-trai > .bsk-tom-tat__summary::before { content: '+'; font-size: 1.2em; }
.bsk-tom-tat--dau-cong-tru.bsk-tom-tat--dau-phai[open] > .bsk-tom-tat__summary::after,
.bsk-tom-tat--dau-cong-tru.bsk-tom-tat--dau-trai[open] > .bsk-tom-tat__summary::before { content: '−'; }
/* Hộp cũ chưa có $hop (summary trần): giữ dấu ▸/▾ đơn giản như trước. */
.bsk-tom-tat > summary:not(.bsk-tom-tat__summary)::before {
  content: '▸';
  display: inline-block;
  transition: transform .15s ease;
}
.bsk-tom-tat[open] > summary:not(.bsk-tom-tat__summary)::before { transform: rotate(90deg); }

.bsk-tom-tat__icon { display: inline-flex; flex: none; line-height: 1; }
.bsk-tom-tat__svg { width: 1.25em; height: 1.25em; }
.bsk-tom-tat__emoji { font-size: 1.1em; line-height: 1; }
.bsk-tom-tat__tieu-de { flex: 0 1 auto; }
/* Chữ phụ "bấm để xem": chỉ khi đang thu gọn, nhỏ và mờ, không đậm dù tiêu đề đậm. */
.bsk-tom-tat__phu {
  font-size: .8em;
  font-weight: 400;
  opacity: .65;
  color: var(--bsk-tom-tat-chu);
}
.bsk-tom-tat[open] > summary .bsk-tom-tat__phu { display: none; }

.bsk-tom-tat summary:focus-visible {
  outline: 2px solid var(--bsk-tom-tat-vien);
  outline-offset: 2px;
}

/* Nội dung + gạch đầu dòng. Nhắm cả ul LẪN ol: kses cho phép <ol> và lam_sach
   giữ nguyên, AI đôi khi trả danh sách đánh số — chỉ nhắm ul thì bài đó
   phớt lờ cài đặt gạch đầu dòng mà không ai biết vì sao. */
.bsk-tom-tat__noi-dung { margin-top: .6em; }
.bsk-tom-tat__noi-dung ul,
.bsk-tom-tat__noi-dung ol {
  margin: 0;
  padding-left: 1.4em;
}
.bsk-tom-tat__noi-dung li + li { margin-top: .3em; }
.bsk-tom-tat--gach-cham .bsk-tom-tat__noi-dung ul,
.bsk-tom-tat--gach-cham .bsk-tom-tat__noi-dung ol { list-style: disc; }
.bsk-tom-tat--gach-so .bsk-tom-tat__noi-dung ul,
.bsk-tom-tat--gach-so .bsk-tom-tat__noi-dung ol { list-style: decimal; }
.bsk-tom-tat--gach-khong .bsk-tom-tat__noi-dung ul,
.bsk-tom-tat--gach-khong .bsk-tom-tat__noi-dung ol { list-style: none; padding-left: 0; }
.bsk-tom-tat--gach-tick .bsk-tom-tat__noi-dung ul,
.bsk-tom-tat--gach-tick .bsk-tom-tat__noi-dung ol { list-style: none; padding-left: 0; }
.bsk-tom-tat--gach-tick .bsk-tom-tat__noi-dung ul > li,
.bsk-tom-tat--gach-tick .bsk-tom-tat__noi-dung ol > li { position: relative; padding-left: 1.5em; }
.bsk-tom-tat--gach-tick .bsk-tom-tat__noi-dung ul > li::before,
.bsk-tom-tat--gach-tick .bsk-tom-tat__noi-dung ol > li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--bsk-tom-tat-vien);
  font-weight: 700;
}

/* Màn hẹp: đệm giảm một bậc. */
@media (max-width: 600px) {
  .bsk-tom-tat--dem-vua { --bsk-tom-tat-dem: 10px; }
  .bsk-tom-tat--dem-lon { --bsk-tom-tat-dem: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .bsk-tom-tat__summary::after,
  .bsk-tom-tat__summary::before,
  .bsk-tom-tat > summary:not(.bsk-tom-tat__summary)::before { transition: none; }
}

/* Xem trước trong tab admin: bỏ cách trên/dưới để hộp mẫu không nhảy trong khung khi chỉnh số. */
.bsk-tom-tat-xem-thu .bsk-tom-tat { margin-top: 0; margin-bottom: 0; }


/* Lá chắn chống theme/Elementor: theme hay đặt margin/list-style cho ul li trong
   .entry-content, và font/nền cho <summary>/<details>; các rule đó có độ ưu tiên
   ngang hoặc hơn class của ta và nạp sau. Chốt các thuộc tính hình hài. */
.bsk-tom-tat.bsk-tom-tat { box-sizing: border-box; background-image: none !important; text-align: left; }
.bsk-tom-tat .bsk-tom-tat__summary, .bsk-tom-tat > summary {
  background: transparent !important; border: 0 !important; margin: 0 !important; text-transform: none !important;
  letter-spacing: normal !important; text-decoration: none !important; font-family: inherit !important; }
.bsk-tom-tat .bsk-tom-tat__noi-dung ul, .bsk-tom-tat .bsk-tom-tat__noi-dung ol { margin: 0 !important; background: none !important; border: 0 !important; }
.bsk-tom-tat .bsk-tom-tat__noi-dung li { background: none !important; border: 0 !important; margin-bottom: 0 !important; font-size: inherit !important; }
.bsk-tom-tat--gach-cham .bsk-tom-tat__noi-dung ul, .bsk-tom-tat--gach-cham .bsk-tom-tat__noi-dung ol { list-style: disc !important; padding-left: 1.4em !important; }
.bsk-tom-tat--gach-so .bsk-tom-tat__noi-dung ul, .bsk-tom-tat--gach-so .bsk-tom-tat__noi-dung ol { list-style: decimal !important; padding-left: 1.4em !important; }
.bsk-tom-tat--gach-khong .bsk-tom-tat__noi-dung ul, .bsk-tom-tat--gach-khong .bsk-tom-tat__noi-dung ol,
.bsk-tom-tat--gach-tick .bsk-tom-tat__noi-dung ul, .bsk-tom-tat--gach-tick .bsk-tom-tat__noi-dung ol { list-style: none !important; padding-left: 0 !important; }
.bsk-tom-tat .bsk-tom-tat__noi-dung li::marker { color: var(--bsk-tom-tat-vien); }