/* Trình duyệt SNOMED CT hai khung, song ngữ (js/trinh-duyet-sct.js).
 * Chỉ dùng token của DESIGN.md §1 và thang cỡ chữ §2 — không màu hex, không px trần cho chữ. */

/* Hai khung cạnh nhau không chịu nổi trần 1180px của `main` (cùng lối với khung LOINC ở
 * giao-dien.css: `:has()` + `:not([hidden])`, không gắn lớp bằng JS). */
/* `min-width: 0`: `main` là phần tử con của một hộp flex, nên mặc định nó KHÔNG co hẹp hơn nội dung
 * rộng nhất bên trong — một dòng thuật ngữ dài đẩy cả trang cuộn ngang ở khổ điện thoại. */
main:has(> #view-catalog:not([hidden]) > #pane-trinhduyet:not([hidden])),
main:has(> #view-catalog:not([hidden]) > #pane-cay:not([hidden])) { max-width: none; min-width: 0; }
/* Trang độc lập /sct.html: cùng lý do, nhưng `main.sct-trang` không nằm trong vỏ nên không khớp
 * selector trên. style.css đặt max-width: 1180px cho mọi <main>; bố cục hai khung cần toàn chiều rộng. */
main.sct-trang { max-width: none; min-width: 0; }

.sct-thanh {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sct-phien-ban { color: var(--ink-soft); font-size: var(--fs-s); }

/* Công tắc ngôn ngữ: ba nút dính liền, nút đang chọn đổi nền VÀ đậm chữ (không chỉ đổi màu). */
.sct-ngon-ngu { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); }
.sct-ngon-ngu button {
  background: none;
  border: none;
  border-right: 1px solid var(--line);
  padding: 6px 14px;
  min-height: 34px;
  font: inherit;
  font-size: var(--fs-m);
  color: var(--ink-soft);
  cursor: pointer;
}
.sct-ngon-ngu button:last-child { border-right: none; }
.sct-ngon-ngu button[aria-pressed="true"] {
  background: var(--seal-soft);
  color: var(--seal);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--seal);
}

.sct-hai-khung {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 24px;
  align-items: start;
}
.sct-khung { min-width: 0; }
/* Khung phải đứng yên khi danh sách bên trái cuộn: người tra cứu so vài mã trước khi chọn. */
.sct-khung-phai { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
/* Khung phải tự cuộn bên trong, nên dải tab của nó phải đứng yên — nếu không, đọc xuống bảng mô tả
 * là mất đường sang tab Sơ đồ. */
.sct-khung-phai > .subtabs { position: sticky; top: 0; z-index: 1; background: var(--bg); }

.sct-tuy-chon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 8px 0;
  font-size: var(--fs-s);
}
.sct-tuy-chon label { margin: 0; color: var(--ink-soft); }
.sct-tuy-chon select { width: auto; min-height: 30px; font-size: var(--fs-s); }
.sct-tick { display: inline-flex; gap: 6px; align-items: center; }

.sct-facet { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sct-facet:empty { display: none; }
.sct-chip {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 8px;
  min-height: 28px;
  font: inherit;
  font-size: var(--fs-s);
  color: var(--ink);
  cursor: pointer;
}
.sct-chip[aria-pressed="true"] {
  background: var(--seal-soft);
  border-color: var(--seal);
  color: var(--seal);
  font-weight: 600;
}
.sct-chip-so { color: var(--ink-soft); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.sct-kq-dem { color: var(--ink-soft); font-size: var(--fs-s); margin: 8px 0 4px; min-height: 1.4em; }

/* Một dòng kết quả là MỘT nút: cả dòng bấm được, bàn phím tới được. */
.sct-kq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 8px 8px;
  min-height: 44px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.sct-kq:hover { background: var(--seal-soft); }
.sct-kq[aria-current="true"] { background: var(--seal-soft); box-shadow: inset 3px 0 0 var(--seal); }
.sct-kq code { grid-column: 2; grid-row: 1; color: var(--seal); font-size: var(--fs-s); }
.sct-kq .sct-phu { grid-column: 1; }
.sct-phu { font-size: var(--fs-s); }

/* Dòng khái niệm dùng chung: cha, con, nút cây. */
.sct-dong {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  align-items: baseline;
  padding: 4px 0;
  min-width: 0;
}
.sct-dong .sct-ten { text-align: left; }
.sct-dong code { color: var(--seal); font-size: var(--fs-s); }
.sct-dong .sct-phu { flex-basis: 100%; }
.sct-dong[aria-current="true"] { background: var(--seal-soft); box-shadow: inset 3px 0 0 var(--seal); padding-left: 8px; }

.sct-hop {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 12px;
}
.sct-hop h3, .sct-muc {
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 8px;
}
.sct-muc { margin-top: 16px; }
.sct-hop .hint { margin: 0; }
.sct-hop > .act { margin-top: 8px; }

/* Khối giữa của Tổng quan: thẻ khái niệm bên trái, thuộc tính định nghĩa bên phải. */
.sct-giua {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.sct-giua .sct-hop { margin-bottom: 12px; }

.sct-the {
  border: 2px solid var(--seal);
  border-radius: var(--radius);
  background: var(--seal-soft);
  padding: 12px 16px;
  margin-bottom: 12px;
}
.sct-the-dau { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sct-the-dau code { font-size: var(--fs-l); color: var(--seal); }
.sct-the-ten { font-size: var(--fs-xl); line-height: 1.25; margin: 8px 0 0; }
.sct-the-fsn { font-size: var(--fs-m); margin-top: 4px; }
.sct-the-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.sct-thuoc-tinh { font-size: var(--fs-m); }
.sct-tt-dong { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 4px 0; }
.sct-tt-dong .sct-phu { flex-basis: 100%; }
.sct-tt-nhom-moi { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.sct-tt-mui { color: var(--ink-soft); }
.sct-tt-dich button { text-align: left; }

/* Cây phân loại ở khung trái. */
.sct-cay-ul, .sct-cay-ul ul { list-style: none; margin: 0; padding: 0; }
.sct-cay-ul ul { padding-left: 20px; }
.sct-cay-ul li[data-ma] { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: baseline; }
.sct-cay-ul li[data-ma] > ul { grid-column: 1 / -1; }
.sct-cay-ul li[data-ma] > ul[hidden] { display: none; }
.sct-cay-them { padding: 4px 0 4px 24px; }
.sct-xoay {
  background: none;
  border: none;
  padding: 0;
  width: 24px;
  min-height: 28px;
  font: inherit;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
}
span.sct-xoay { cursor: default; display: inline-block; }

/* Tab "Cây danh mục": cây bên trái, chi tiết bên phải đứng yên khi cây cuộn — như trình duyệt
 * SNOMED CT chính thức. Chi tiết nằm TRONG khung cuộn của nó, nên cây dài không đẩy nó xuống đáy. */
.cay-hai-khung {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 24px;
  align-items: start;
}
/* Hai khung kéo giãn được (js/keo-khung.js): JS chèn thanh `.khung-keo` ở giữa rồi đặt
 * `data-co-keo`. Mặc định 2fr : 3fr — giãn theo màn hình; `--khung-trai/phai` chỉ có khi người
 * dùng đã kéo, và là TỈ LỆ (fr) chứ không phải px nên vẫn giãn theo màn hình sau đó. */
.cay-hai-khung[data-co-keo], .sct-hai-khung[data-co-keo] {
  grid-template-columns: minmax(0, var(--khung-trai, 2fr)) 24px minmax(0, var(--khung-phai, 3fr));
  gap: 0;
}
.khung-keo {
  align-self: stretch;
  position: relative;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  border-radius: var(--radius);
}
/* Vạch 2px ở giữa cột 24px; đậm lên khi rê, kéo hoặc nhận tiêu điểm. Không chỉ đổi màu: bề dày
 * cũng đổi, nên người khó phân biệt màu vẫn thấy. */
.khung-keo::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--line);
}
.khung-keo:hover::after, .khung-keo.dang-keo::after, .khung-keo:focus-visible::after {
  background: var(--seal);
  width: 4px;
  margin-left: -2px;
}
@media (pointer: coarse) { .khung-keo { min-width: 32px; } }
body.dang-keo-khung { cursor: col-resize; user-select: none; }

/* Hướng dẫn mặc định ẨN: một dòng tiêu đề, mở khi cần. Không đặt nội dung hướng dẫn thẳng trong
 * vùng hiển thị — người đã đọc rồi phải cuộn qua nó mỗi lần mở màn. */
.huong-dan {
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.huong-dan > summary {
  cursor: pointer;
  padding: 6px 10px;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--ink-soft);
}
.huong-dan[open] > summary { color: var(--ink); border-bottom: 1px solid var(--line); }
.huong-dan > :not(summary) { padding: 4px 12px 6px; }
.huong-dan h4 { margin: 8px 0 4px; font-size: var(--fs-m); }
.huong-dan ol { margin: 0; padding-left: 18px; }
.huong-dan li, .huong-dan p.hint { font-size: var(--fs-s); }
.huong-dan p.hint { margin: 0 0 8px; }
.huong-dan-nho { margin: 8px 0; }
.cay-khung-trai { min-width: 0; }
.cay-khung-phai { min-width: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.cay-khung-phai table { min-width: 0; }
.cay-khung-phai .concept-detail { margin-top: 0; }

@media (max-width: 1000px) {
  /* Một cột: không còn "bên cạnh" để kéo giãn, nên thanh ẩn và tỉ lệ đã lưu không còn tác dụng. */
  .cay-hai-khung, .cay-hai-khung[data-co-keo], .sct-hai-khung[data-co-keo] { grid-template-columns: minmax(0, 1fr); }
  .khung-keo { display: none; }
  .cay-khung-phai { position: static; max-height: none; overflow-y: visible; }
  .sct-hai-khung { grid-template-columns: minmax(0, 1fr); }
  .sct-khung-phai { position: static; max-height: none; overflow-y: visible; }
  .sct-khung-phai > .subtabs { position: static; }
  .sct-giua { grid-template-columns: minmax(0, 1fr); }
}

/* Tab Chi tiết: bảng mô tả hai thứ tiếng. */
.sct-hau-due { margin: 12px 0 0; font-size: var(--fs-m); }
.sct-bang-mo-ta { width: 100%; font-size: var(--fs-s); }
/* `style.css` đặt `table { min-width: 760px }` cho bảng dữ liệu toàn trang. Khung phải hẹp hơn thế
 * (~670px ở màn 1440px), nên bảng bị cắt mất cột cuối — đo trên bảng mô tả: cột "Anh (GB)" và
 * "Phạm vi" chỉ còn một chữ. Ở khung này bảng co theo khung, cột thuật ngữ xuống dòng. */
.sct-khung-phai table { min-width: 0; }
.sct-khung-phai td:first-child { overflow-wrap: anywhere; }
.sct-bang-mo-ta td, .sct-bang-mo-ta th { vertical-align: top; }
.sct-bang-mo-ta tr.sct-ngung td { color: var(--ink-soft); }
.sct-cn { white-space: nowrap; }
/* Ưu tiên đậm hơn Chấp nhận — phân biệt bằng CHỮ và độ đậm, không chỉ bằng màu. */
.sct-cn-uu-tien { font-weight: 600; color: var(--seal); }
.sct-cn-chap-nhan { color: var(--ink); }
#sct-mo-ta > .linkish { margin-top: 6px; }

/* Tab Biểu thức: khối mã đọc được, cuộn ngang thay vì làm vỡ khung phải. */
.sct-bieu-thuc {
  margin: 0 0 8px;
  padding: 10px 12px;
  overflow-x: auto;
  white-space: pre;
  background: var(--bg-sunken, rgba(127, 127, 127, 0.08));
  border-radius: 6px;
  font-size: 0.9em;
}

/* --- Chuyển từ shell.css: bảng quan hệ và sơ đồ là phần của trình duyệt SNOMED CT (tab Cây của
 * vỏ và trang độc lập /sct.html cùng dùng), không phải của vỏ quản trị. sct.html không nạp shell.css. */
/* Bảng quan hệ thuộc tính. Dòng đầu của mỗi nhóm có đường kẻ trên: các dòng cùng nhóm đọc cùng
   nhau, và hai nhóm khác nhau thì không được ghép chéo. */
table.quan-he td { vertical-align: top; }
table.quan-he tr.nhom-dau td { border-top: 2px solid var(--line); }
table.quan-he code { font-size: var(--fs-s); color: var(--seal); }

/* Sơ đồ quan hệ (Diagram). Chỉ dùng token màu — chế độ tối tự đúng. Loại ô phân biệt bằng HÌNH
   (viên thuốc / khung / khung đậm / vòng tròn), không bằng màu đơn độc. Cỡ chữ khớp với phép đo
   trong so-do-quan-he.js: nếu đổi ở đây thì phải đổi ở bảng `font` bên đó. */
.sd-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 6px;
  margin: 6px 0;
}
svg.sd { display: block; max-width: none; }
svg.sd text { fill: var(--ink); }
svg.sd .sd-ma { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--fs-xs); fill: var(--seal); }
svg.sd .sd-vi { font-size: var(--fs-s); font-weight: 600; }
svg.sd .sd-en { font-size: var(--fs-xs); fill: var(--ink-soft); }
svg.sd .sd-ten { font-size: var(--fs-s); }
svg.sd .sd-dau { font-size: var(--fs-l); font-weight: 700; text-anchor: middle; fill: var(--ink); }
svg.sd rect { fill: var(--surface); stroke: var(--ink-soft); stroke-width: 1; }
svg.sd rect.sd-goc { stroke: var(--seal); stroke-width: 2.5; fill: var(--seal-soft); }
svg.sd rect.sd-loai { fill: var(--seal-soft); stroke: var(--seal); }
svg.sd rect.sd-dich { fill: var(--surface); stroke: var(--ink); }
svg.sd .sd-day { stroke: var(--ink-soft); stroke-width: 1.5; }
svg.sd .sd-mui { fill: var(--ink-soft); stroke: none; }
svg.sd .sd-mui-rong { fill: var(--surface); stroke: var(--ink-soft); stroke-width: 1.5; }
svg.sd .sd-cham { fill: var(--ink); stroke: none; }
svg.sd .sd-vong { fill: var(--surface); stroke: var(--ink-soft); stroke-width: 1.5; }