/* ═══════════════════════════════════════════════════════════════════════════
   docs.hura8.vn — giao diện site tài liệu

   Viết tay, không framework, không bước dựng. Toàn bộ màu đi qua biến CSS ở
   :root; KHÔNG có mã màu nào nằm ngoài ba khối token bên dưới.

   Chữ: cố tình dùng bộ chữ hệ thống. Site không được gọi CDN (chạy được cả
   khi mất mạng), mà nhúng một font hiển thị thì tốn hàng trăm KB trong kho mã.
   Quan trọng hơn: tiếng Việt có dấu chồng (ố, ữ, ậ, ị) mà phần lớn font hiển
   thị dựng thiếu hoặc dựng xấu — font hệ thống của macOS/Windows/Android đều
   phủ đầy đủ. Bù lại bằng line-height rộng hơn thường lệ để dấu có chỗ thở.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Token: sáng ────────────────────────────────────────────────────────── */
:root {
  --bg:          #fdfdfc;
  --bg-soft:     #f4f5f3;
  --bg-sunken:   #eceeea;
  --fg:          #17201c;
  --fg-soft:     #3d4a43;
  --muted:       #6b7770;

  --accent:      #0f6b57;   /* ngọc bích — không phải xanh dương mặc định */
  --accent-hi:   #0b5244;
  --accent-soft: #e3f0eb;
  --danger:      #a8341c;   /* son — dành riêng cho nhãn beta/không dùng nữa */

  --border:      #dfe3dd;
  --border-hard: #c5ccc4;
  --code-bg:     #f4f5f3;
  --code-fg:     #24312b;

  --syn-comment: #7b877f;
  --syn-punct:   #5d6a62;
  --syn-keyword: #9b2c5e;
  --syn-attr:    #17557f;
  --syn-string:  #16694a;
  --syn-number:  #8a4b12;
  --syn-func:    #5b3ea8;
  --syn-op:      #9b2c5e;

  --shadow:      0 1px 2px rgba(23, 32, 28, .06), 0 4px 12px rgba(23, 32, 28, .05);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --sidebar-w: 17.5rem;
  --toc-w:     14.5rem;
  --measure:   47rem;
  --radius:    4px;
  --header-h:  3.5rem;
}

/* ── Token: tối theo hệ thống ───────────────────────────────────────────── */
/* :not([data-theme="light"]) để lựa chọn tay luôn thắng cài đặt hệ thống. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #101512;
    --bg-soft:     #171d19;
    --bg-sunken:   #1e2622;
    --fg:          #e6ece8;
    --fg-soft:     #c2ccc6;
    --muted:       #8b9891;

    --accent:      #4fc3a1;
    --accent-hi:   #7ad6bb;
    --accent-soft: #16302a;
    --danger:      #e8836a;

    --border:      #26302b;
    --border-hard: #38443d;
    --code-bg:     #171d19;
    --code-fg:     #e6ece8;

    --syn-comment: #7c8b83;
    --syn-punct:   #9aa8a0;
    --syn-keyword: #f191bb;
    --syn-attr:    #7cc0f0;
    --syn-string:  #7fd6a8;
    --syn-number:  #e8ab6a;
    --syn-func:    #c4a8f0;
    --syn-op:      #f191bb;

    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
  }
}

/* ── Token: tối do người dùng chọn ──────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:          #101512;
  --bg-soft:     #171d19;
  --bg-sunken:   #1e2622;
  --fg:          #e6ece8;
  --fg-soft:     #c2ccc6;
  --muted:       #8b9891;

  --accent:      #4fc3a1;
  --accent-hi:   #7ad6bb;
  --accent-soft: #16302a;
  --danger:      #e8836a;

  --border:      #26302b;
  --border-hard: #38443d;
  --code-bg:     #171d19;
  --code-fg:     #e6ece8;

  --syn-comment: #7c8b83;
  --syn-punct:   #9aa8a0;
  --syn-keyword: #f191bb;
  --syn-attr:    #7cc0f0;
  --syn-string:  #7fd6a8;
  --syn-number:  #e8ab6a;
  --syn-func:    #c4a8f0;
  --syn-op:      #f191bb;

  --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
}

/* ── Nền tảng ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Header dính ở trên: neo phải dừng BÊN DƯỚI nó, nếu không bấm vào # sẽ
     nhảy tới chỗ tiêu đề bị header che mất. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.75 var(--font-sans);   /* 1.75: dấu tiếng Việt cần chỗ thở */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 100;
  background: var(--bg); color: var(--fg);
  padding: .6rem 1rem; border: 1px solid var(--accent); border-radius: var(--radius);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; align-content: center; gap: 1rem;
  /* min-height chứ không phải height: trên màn hẹp thanh tab xuống hàng thứ
     hai, và --header-h được định nghĩa lại cho khớp (xem cuối tệp). */
  min-height: var(--header-h);
  padding: 0 1.25rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.site-title {
  font-weight: 650; font-size: 1rem; letter-spacing: -.01em;
  color: var(--fg); text-decoration: none;
  display: inline-flex; align-items: center; gap: .55rem;
}
/* Dấu ngọc bích trước tên site — chi tiết nhỏ nhưng nhận ra ngay ở tab. */
.site-title::before {
  content: ""; width: .5rem; height: .5rem;
  background: var(--accent);
  transform: rotate(45deg);
}

.site-tagline {
  margin: 0; color: var(--muted); font-size: .8125rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.header-spacer { flex: 1 1 auto; }

.icon-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--fg-soft); font: inherit; font-size: .95rem; line-height: 1;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
.icon-btn:hover { background: var(--bg-soft); border-color: var(--border); color: var(--fg); }

.theme-toggle::before { content: "◐"; font-size: 1.05rem; }
.theme-toggle[data-mode="light"]::before { content: "☀"; }
.theme-toggle[data-mode="dark"]::before  { content: "☾"; }

.menu-toggle { display: none; }
.menu-toggle::before { content: "☰"; font-size: 1.1rem; }

/* ── Bố cục ba cột ──────────────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  gap: 2.5rem;
  max-width: 88rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  align-items: start;
}

.sidebar {
  position: sticky; top: calc(var(--header-h) + 1rem);
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: .5rem;
}

.content { min-width: 0; max-width: var(--measure); }

.toc {
  position: sticky; top: calc(var(--header-h) + 1rem);
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
  font-size: .8125rem;
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}

/* ── Ô tìm kiếm ─────────────────────────────────────────────────────────── */
.search { margin: 0 0 1rem; }
.search input {
  width: 100%; padding: .5rem .65rem;
  font: inherit; font-size: .875rem;
  background: var(--bg-soft); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .12s, background-color .12s;
}
.search input::placeholder { color: var(--muted); }
.search input:focus {
  background: var(--bg); border-color: var(--accent); outline: none;
}

#search-results { list-style: none; margin: 0 0 1rem; padding: 0; }
#search-results a {
  display: block; padding: .4rem .55rem; border-radius: var(--radius);
  color: var(--fg); text-decoration: none; font-size: .875rem;
}
#search-results a:hover { background: var(--bg-soft); }
#search-results small { display: block; color: var(--muted); font-size: .75rem; }
.search-empty { padding: .4rem .55rem; color: var(--muted); font-size: .875rem; }

/* ── Điều hướng ─────────────────────────────────────────────────────────── */
.sidebar ul { list-style: none; margin: 0; padding: 0; }

.sidebar a {
  display: block; padding: .3rem .55rem;
  color: var(--fg-soft); text-decoration: none;
  font-size: .875rem; line-height: 1.5;
  border-radius: var(--radius);
  transition: background-color .12s, color .12s;
}
.sidebar a:hover { background: var(--bg-soft); color: var(--fg); }

/* Thanh dọc bên trái thay cho viên thuốc bo tròn — gọn hơn, hợp với bảng biểu. */
.sidebar a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-hi);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}


/* ── Thanh khu vực (Liquid / xStore JS / API & SDK) ──────────────────────── */
/* Nằm trên header, KHÔNG trong sidebar: ba khu vực là ba nhánh tài liệu ngang
   hàng nhau, nên chúng thuộc về thanh điều hướng chính chứ không phải mục lục.
   Ở sidebar chúng bị bó trong 17.5rem và "API & SDK" phải tụt xuống hàng hai. */
.tabbar {
  flex: 0 0 auto;
  display: flex; gap: .25rem;
  padding: .2rem;
  background: var(--bg-sunken);
  border-radius: var(--radius);
}
.tab {
  flex: 0 0 auto;
  display: block; padding: .35rem .85rem;
  font-size: .8125rem; font-weight: 550; text-align: center; white-space: nowrap;
  color: var(--muted); text-decoration: none;
  border-radius: 3px;
  transition: background-color .12s, color .12s;
}
.tab:hover { color: var(--fg); }
.tab[aria-current="true"] {
  background: var(--bg);
  color: var(--accent-hi);
  box-shadow: var(--shadow);
}

.nav-group {
  margin: 1.5rem 0 .4rem; padding: 0 .55rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}

.nav-tab li { position: relative; }
.has-children > a { padding-right: 2rem; }

.nav-toggle {
  position: absolute; top: .1rem; right: 0;
  width: 1.75rem; height: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--muted); cursor: pointer;
}
.nav-toggle::before {
  content: "›"; font-size: 1.1rem; line-height: 1;
  transition: transform .15s ease;
}
.nav-toggle:hover { background: var(--bg-soft); color: var(--fg); }
.nav-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }

.nav-children {
  margin: .1rem 0 .35rem .8rem !important;
  padding-left: .6rem !important;
  border-left: 1px solid var(--border);
}
.nav-children a { font-size: .8125rem; color: var(--muted); }
.nav-children a:hover { color: var(--fg); }

/* ── Nội dung ───────────────────────────────────────────────────────────── */
.crumbs {
  margin-bottom: 1.25rem;
  font-size: .8125rem; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--fg-soft); }

.content h1, .content h2, .content h3, .content h4 {
  line-height: 1.35; letter-spacing: -.015em;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.content h1 { font-size: 1.85rem; font-weight: 680; margin: 0 0 1rem; }
.content h2 {
  font-size: 1.3rem; font-weight: 650;
  margin: 3rem 0 1rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.content h3 { font-size: 1.05rem; font-weight: 650; margin: 2rem 0 .75rem; }

/* Tên slot/đối tượng là mã, không phải văn xuôi — chữ đơn cách cho đúng bản chất. */
.content h1 code, .content h2 code, .content h3 code {
  background: none; padding: 0; font-size: inherit; color: inherit;
}

.content p, .content li { color: var(--fg-soft); }
.content strong { color: var(--fg); font-weight: 620; }

.content blockquote {
  margin: 1.5rem 0; padding: .85rem 1.1rem;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.content blockquote > :first-child { margin-top: 0; }
.content blockquote > :last-child  { margin-bottom: 0; }

/* Neo cạnh tiêu đề: chỉ hiện khi rê chuột, nhưng KHÔNG ẩn khi được focus. */
.anchor {
  margin-left: .4rem; color: var(--border-hard); text-decoration: none;
  opacity: 0; transition: opacity .12s, color .12s;
  /* Đích nhảy của liên kết # là chính thẻ <a> này (CommonMark đặt id ở đây,
     không ở thẻ h2), nên scroll-margin phải nằm trên nó mới tránh được header. */
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor,
.anchor:focus { opacity: 1; }
.anchor:hover { color: var(--accent); }

/* ── Mã ─────────────────────────────────────────────────────────────────── */
.content code {
  background: var(--code-bg);
  padding: .1em .35em; border-radius: 3px;
  font-family: var(--font-mono); font-size: .855em;
  border: 1px solid var(--border);
}

.content pre {
  position: relative;
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.content pre code { background: none; padding: 0; border: 0; font-size: inherit; }

.copy {
  position: absolute; top: .5rem; right: .5rem;
  padding: .25rem .55rem;
  font: inherit; font-size: .75rem; font-weight: 550;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border-hard); border-radius: 3px;
  cursor: pointer; opacity: 0;
  transition: opacity .12s, color .12s, border-color .12s;
}
pre:hover .copy, pre:focus-within .copy { opacity: 1; }
.copy:hover { color: var(--accent-hi); border-color: var(--accent); }
.copy.is-done { color: var(--accent-hi); border-color: var(--accent); opacity: 1; }

/* Thiết bị cảm ứng không có trạng thái hover — nút phải luôn hiện. */
@media (hover: none) {
  .copy { opacity: 1; }
}

/* ── Bảng ───────────────────────────────────────────────────────────────── */
/* Bảng tham chiếu rất rộng — cuộn ngang trong khung riêng, không kéo cả trang. */
.content table {
  display: block; overflow-x: auto;
  width: 100%; border-collapse: collapse;
  margin: 1.25rem 0; font-size: .875rem;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.content th, .content td {
  padding: .5rem .7rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.content th {
  background: var(--bg-soft);
  font-weight: 620; font-size: .8125rem;
  white-space: nowrap; color: var(--fg);
}
.content tbody tr:last-child td { border-bottom: 0; }
.content tbody tr:hover { background: var(--bg-soft); }
.content td code { white-space: nowrap; }

/* ── Trang trước / trang sau ────────────────────────────────────────────── */
.pager {
  display: flex; gap: 1rem; margin-top: 4rem;
  padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.pager a {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: .15rem;
  padding: .75rem .9rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .12s, background-color .12s;
}
.pager a:hover { border-color: var(--accent); background: var(--bg-soft); }
.pager span   { font-size: .75rem; color: var(--muted); }
.pager strong {
  font-size: .875rem; font-weight: 600; color: var(--accent-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pager-next { text-align: right; margin-left: auto; }

/* ── Mục lục bên phải ───────────────────────────────────────────────────── */
.toc-title {
  margin: 0 0 .6rem;
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: block; padding: .22rem 0 .22rem .6rem;
  margin-left: -1rem; padding-left: 1rem;
  color: var(--muted); text-decoration: none; line-height: 1.45;
  border-left: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.toc a:hover { color: var(--fg); }
.toc a.is-active { color: var(--accent-hi); border-left-color: var(--accent); font-weight: 550; }
.toc .toc-h3 a { padding-left: 1.75rem; font-size: .78125rem; }

/* ── Chân trang ─────────────────────────────────────────────────────────── */
.site-footer {
  padding: 1.5rem; border-top: 1px solid var(--border);
  color: var(--muted); font-size: .8125rem; text-align: center;
}
.site-footer p { margin: 0; }

/* ── Màn hình hẹp ───────────────────────────────────────────────────────── */
/* Mục lục là tiện ích phụ — bỏ trước khi bỏ menu. */
@media (max-width: 1180px) {
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 900px) {
  /* Header hai hàng. Sidebar-ngăn-kéo và scrim đều neo theo --header-h, nên
     định nghĩa lại BIẾN là đủ — không phải sửa từng inset một. */
  :root { --header-h: 6rem; }

  .layout { grid-template-columns: 1fr; padding: 1.25rem 1rem 3rem; }
  .menu-toggle { display: inline-flex; }
  .site-tagline { display: none; }

  .site-header { flex-wrap: wrap; gap: .5rem 1rem; padding: .5rem 1rem; }
  .header-spacer { display: none; }
  .site-title { flex: 1 1 auto; }
  .tabbar { order: 10; width: 100%; }
  .tab { flex: 1 1 0; padding-inline: .5rem; }

  .sidebar {
    position: fixed; inset: var(--header-h) auto 0 0; z-index: 50;
    /* 78vw chứ không phải 85vw: phải chừa một dải scrim đủ rộng để bấm ra
       ngoài đóng được ngăn kéo — 85vw chỉ còn ~56px trên máy 375px. */
    width: min(20rem, 78vw); max-height: none;
    padding: 1.25rem 1rem;
    background: var(--bg);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow); }

  .scrim {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 45;
    background: rgba(0, 0, 0, .4);
  }

  .pager { flex-direction: column; }
  .pager-next { text-align: left; margin-left: 0; }
}

/* Người dùng tắt hiệu ứng thì tôn trọng — kể cả cuộn mượt. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}