/* Tra cứu ICD-10 — d4t0
 *
 * Token lấy nguyên từ branding/tokens.css (xem branding/README.md). Accent:
 * xanh dương #2f6fed — một họ accent duy nhất cho cả project.
 *
 * SÁNG-ONLY, có chủ đích: brief là "tông trắng". Đặt `color-scheme: light` để
 * các control gốc (input, scrollbar) không tự đổi sang tối khi máy khách đang
 * ở dark mode — đúng cách `chiasehoadon/` đã làm khi brief của nó cũng nói
 * "light theme". Đừng thêm khối `prefers-color-scheme: dark` vào đây.
 */

:root {
  /* Corner radius, Fibonacci, same scale as spacing so that
     inner = outer - padding lands on another step.
     See branding/tokens.css. */
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 13px;
  --radius-lg: 21px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  color-scheme: light;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-sunken: #fafaf9;
  --text: #1c1917;
  /* Màu của mark D4T0 — token riêng, KHÔNG dùng --text (21/08/2026). Xem
     branding/tokens.css. */
  --logo-color: #293133;
  --text-muted: #6f6b64;
  --border: #dfdbd3;
  --control-border: #7c796f;

  --accent: #286aec;
  --accent-weak: #f7faff;

  --danger: #c0342b;

  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);

  --space-1: 8px;
  --space-2: 13px;
  --space-3: 21px;
  --space-4: 34px;
  --space-5: 55px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* Font hệ thống, không webfont — luật chung của repo. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

body { min-height: 100vh; display: flex; flex-direction: column; }

.page {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
  flex: 1 0 auto;
}

/* ---- thanh trên ---- */

.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.topnav-brand { display: inline-flex; text-decoration: none; }
/* Mark là currentColor → phải dùng CSS mask, KHÔNG dùng <img> (trong <img> nó
   thành đen và biến mất ở nền tối). Luật của branding/. */
/* 36×36 — nay là cỡ chung của cả repo (branding/chrome.css, 22/08/2026); dự án
   này đi trước từ 21/08. Lý do hình học chính là lý do nó được chọn cho mọi nơi:
   mark xoay 45° phải thu nhỏ còn ~72% để bốn góc không bị khung cắt, nên ở cùng
   một khổ hộp nó trông nhỏ hơn hẳn bản thẳng. 36px cũng bằng đúng chiều cao nút
   hamburger nên hai thứ cân nhau trên thanh. */
.topnav-logo {
  display: block;
  width: 36px;
  height: 36px;
  background-color: var(--logo-color);
  -webkit-mask: url("/logo.svg") center / contain no-repeat;
  mask: url("/logo.svg") center / contain no-repeat;
}

.menu { position: relative; }
/* Không viền, không nền (22/08/2026, chung cả repo — branding/chrome.css).
   Ô vuông có viền vẽ một cái hộp quanh biểu tượng vốn đã đọc được, và trên
   một thanh chỉ có hai phần tử thì cái hộp ấy là thứ nổi nhất trang. */
.menu-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}
/* Hai vạch canh bằng MARGIN, không bằng translate: dùng translate + rotate cho
   ra hình chevron lệch chứ không thành chữ X (ghi trong CLAUDE.md §gotcha 2). */
.menu-btn span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.5px;
  margin: -0.75px 0 0 -8px;
  background: var(--text);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.menu-btn span:first-child { transform: translateY(-4px); }
.menu-btn span:last-child { transform: translateY(4px); }
.menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

.menu-panel {
  position: absolute;
  right: 0;
  top: 44px;
  min-width: 190px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  z-index: 20;
  display: flex;
  flex-direction: column;
}
/* Cặp với [hidden] cho tường minh: đặt display trên class có thể mang thuộc
   tính hidden sẽ ghi đè mặc định của trình duyệt và "ẩn" lại hiện ra. */
.menu-panel[hidden] { display: none; }
.menu-panel a {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}
.menu-panel a:hover { background: var(--surface-sunken); }
.menu-panel a.active { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.menu-panel-divider { height: 1px; margin: 6px 8px; background: var(--border); }

/* MÀN RỘNG: bỏ hamburger, trải link ra ngang.
 *
 * Hamburger sinh ra để tiết kiệm bề ngang trên điện thoại. Trên màn rộng nó
 * chỉ làm người dùng phải bấm thêm một lần để thấy ba cái link vốn thừa chỗ —
 * và giấu luôn mục API, thứ đáng để người ta nhìn thấy ngay.
 *
 * Chỉ cần CSS, không đụng markup hay JS: id của nút và panel giữ nguyên nên
 * menu.js vẫn chạy y như cũ ở khổ hẹp.
 *
 * Ngưỡng 720px — nay là ngưỡng chung của cả repo (branding/chrome.css). Chọn
 * 720 vì bề ngang nội dung của trang này là 760px và ở 640–719px hàng link đẩy
 * sát mép logo; con số ấy hoá ra hợp với mọi project nên `home/` cũng chuyển từ
 * 640 sang 720 ngày 22/08/2026.
 */
@media (min-width: 720px) {
  .menu-btn { display: none; }

  /* Phải ghi đè CẢ hai: `[hidden]` là mặc định của trình duyệt, không thắng
     được nếu chỉ đặt display trên class (gotcha số 1 trong CLAUDE.md). */
  .menu-panel,
  .menu-panel[hidden] {
    display: flex;
  }

  .menu-panel {
    position: static;
    flex-direction: row;
    align-items: center;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }

  .menu-panel a { padding: 8px 10px; }

  .menu-panel-divider {
    width: 1px;
    height: 14px;
    margin: 0 4px;
  }
}

/* ---- phần mở đầu ---- */

.hero { padding: var(--space-3) 0 var(--space-2); }
h1 { font-size: 26px; line-height: 1.25; margin: 0 0 6px; letter-spacing: -0.01em; }
.subtitle { margin: 0; color: var(--text-muted); font-size: 15px; }

/* ---- ô tìm kiếm ---- */

.search {
  position: relative;
  margin: var(--space-3) 0 var(--space-2);
}
.search input {
  width: 100%;
  padding: 15px 44px 15px 16px;
  font-size: 17px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* Tắt nút xoá MẶC ĐỊNH của input[type=search] trên WebKit: nó nằm chồng lên
   nút xoá của trang, thành ra hai dấu ✕ cạnh nhau. Giữ nút của trang vì nó còn
   phải xoá cả kết quả và thẻ chi tiết, không chỉ chữ trong ô. */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-circle);
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
}
.search-clear[hidden] { display: none; }
.search-clear:hover { background: var(--surface-sunken); color: var(--text); }

.hint { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: 13px; }

/* ---- kết quả ---- */

.results { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.results li { border-bottom: 1px solid var(--border); }
.results li:first-child { border-top: 1px solid var(--border); }
.results button {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 13px 4px;
  border: none;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.results button:hover { background: var(--surface-sunken); }
.code {
  flex: none;
  min-width: 64px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
}
.rname { flex: 1; min-width: 0; }
/* Mã 3 ký tự là mã nhóm — nói ra để không ai điền nhầm vào bệnh án chỗ cần mã
   chi tiết. Bộ Y tế yêu cầu mã đầy đủ nhất có thể. */
.tag-group {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}

.empty, .loading { color: var(--text-muted); padding: var(--space-2) 0; }
.error { color: var(--danger); padding: var(--space-2) 0; }

/* ---- thẻ chi tiết ---- */

.detail {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.detail[hidden] { display: none; }
.crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.crumbs span + span::before { content: " › "; }
.detail-code {
  font-size: 30px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.detail-name { font-size: 18px; margin: 2px 0 var(--space-2); }
.detail dl { margin: 0; }
.detail dt {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.detail dd { margin: 2px 0 0; white-space: pre-line; }
.detail-children { margin-top: var(--space-2); }
.copy-btn {
  margin-top: var(--space-2);
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---- duyệt theo chương ---- */

.chapters { margin-bottom: var(--space-4); }
.chapters h2 { font-size: 15px; margin: 0 0 var(--space-1); }
.chapter-list { list-style: none; margin: 0; padding: 0; }
.chapter-list li { border-bottom: 1px solid var(--border); }
.chapter-list li:first-child { border-top: 1px solid var(--border); }
.chapter-list button {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 11px 4px;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.chapter-list button:hover { background: var(--surface-sunken); }
.chapter-list .code { min-width: 44px; color: var(--text-muted); }

/* ---- chân trang ---- */

.footer {
  flex: none;
  margin-top: auto;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  /* Padding ngang vẫn khớp .page: căn giữa không bỏ được luật container — một
     dòng căn giữa trong footer tràn viền, dưới một trang có max-width, sẽ lệch
     khỏi tâm quang học của trang trên màn rộng. */
  padding: var(--space-3) 20px;
  /* Căn giữa (22/08/2026, chung cả repo — branding/chrome.css). */
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.footer a { color: inherit; text-decoration: none; }

@media (max-width: 520px) {
  h1 { font-size: 22px; }
  .search input { font-size: 16px; }
  .code { min-width: 56px; }
}