@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap&subset=vietnamese');

:root {
  --dth-blue: #0072B2;
  --dth-vermillion: #D55E00;
  --dth-ink: #1f2933;
}

body {
  font-family: "Be Vietnam Pro", Arial, Helvetica, "DejaVu Sans", sans-serif;
  color: var(--dth-ink);
  line-height: 1.7;
}

h1, h2, h3, h4, .title { font-family: "Be Vietnam Pro", Arial, Helvetica, "DejaVu Sans", sans-serif; font-weight: 700; }
h1.title, .quarto-title h1 { color: var(--dth-blue); }
a { color: var(--dth-blue); }

/* Mã R: cỡ chữ gọn, nền nhạt */
div.sourceCode, pre.sourceCode { font-size: 0.85em; }
details > summary { cursor: pointer; font-weight: 600; }

/* Hộp lưu ý và "Đi sâu hơn" */
.callout { border-radius: 6px; }

/* Bảng ký hiệu */
table { font-size: 0.95em; }
table th { white-space: nowrap; }

/* Hình */
figure.quarto-float img, .figure img { max-width: 100%; height: auto; }
.quarto-figure-center > figure > figcaption { font-size: 0.9em; color: #52606d; }

/* Nhãn câu hỏi tự kiểm tra (webexercises) */
.webex-solveme { font-family: inherit; }

/* Công thức dài không tràn viền: cuộn ngang trong khung thay vì đè lên lề (2026-10-19) */
/* Khung công thức là khối, không phải chữ nội dòng, nên giới hạn chiều rộng có tác dụng; phần thừa cuộn trong khung. */
span.math.display { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
mjx-container[display="true"] { min-width: 0 !important; max-width: 100%; }

/* Mọi thứ trong cột nội dung không được rộng hơn cột (2026-10-19, kiểm tra ở 390px) */
main.content { overflow-wrap: anywhere; }
main.content img, main.content video { max-width: 100%; height: auto; }
/* Sơ đồ Graphviz/DAG ghi max-width: none nội dòng nên cần !important */
main.content svg { max-width: 100% !important; height: auto; }
/* Câu hỏi tương tác: hộp chọn co theo khung, không theo đáp án dài nhất */
select.webex-select { max-width: 100%; width: auto; white-space: normal; text-overflow: ellipsis; }
/* Mã R: cuộn ngang trong khối mã */
div.sourceCode, pre { max-width: 100%; overflow-x: auto; }
/* Bảng: trên màn hình hẹp, bảng rộng cuộn ngang trong khung riêng */
@media (max-width: 767.98px) {
  main.content table { display: block; max-width: 100%; overflow-x: auto; }
  main.content table caption { display: block; }
  select.webex-select { width: 100%; }
}