/* =========================================================================
   pages.css — CAC TRANG PHU
   Tai lieu (docs), ghi chu phat hanh (changelog), phap ly (legal), 404,
   khoi lien he va khoi khach hang o trang chu.

   Gom vao MOT file vi moi manh o day chi dung o mot cho, va deu nho. Manh
   nao phinh to hon mot man hinh code thi tach ra file rieng.
   ========================================================================= */

/* ══ 1. TAI LIEU ═══════════════════════════════════════════════════════ */

.docs {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}
@media (max-width: 900px) {
  .docs { grid-template-columns: 1fr; }
}

/* Muc luc ben trai — dinh theo man hinh khi cuon. */
.docs__nav {
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow-y: auto;
  padding-right: 6px;
}

/* ⚠ KHOI NAY PHAI NAM SAU `.docs__nav` O TREN — DUNG DOI LEN.
   Hai luat cung do cu the (0,1,0), nen cai viet SAU thang. Truoc 30/09/2026
   khoi dien thoai nam TRUOC, khong de len duoc gi ca: tren dien thoai muc luc
   van `position: sticky` + `max-height` + `overflow`, nen no dinh vao dau man
   hinh va CHE MAT NOI DUNG khi cuon. Tren may tinh khong ai thay.

   Dien thoai: muc luc thanh mot O CUON RIENG, cao toi da 40% man hinh, nam
   TREN bai viet. Khong dat `max-height: none` — muc luc co hon 60 muc, tra
   het ra la nguoi doc phai cuon qua ca 60 dong moi toi duoc chu dau tien. */
@media (max-width: 900px) {
  .docs__nav {
    position: static;
    max-height: 40vh;
    overflow-y: auto;
    margin-bottom: 18px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
  }
}
.docs__nav h2 {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.docs__nav ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 2px; }
.docs__nav a {
  display: block;
  padding: 7px 12px;
  border-left: 2px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.docs__nav a:hover { color: var(--text); background: var(--surface-2); }
/* Muc dang doc — js/docs.js gan theo vi tri cuon. */
.docs__nav a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 650;
}

/* O tim nhanh trong tai lieu */
.docs__find {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 14px;
  border: var(--hair) solid var(--border);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
}
.docs__find:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.docs__body { max-width: 76ch; }
.docs__body section { padding-bottom: clamp(28px, 4vw, 48px); }
.docs__body h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  padding-top: 8px;
  margin-bottom: .5em;
}
.docs__body h3 { font-size: 1.05rem; margin-top: 1.4em; }
.docs__body p, .docs__body li { color: var(--text-muted); }
.docs__body strong { color: var(--text); }

/* Khoi luu y / canh bao trong tai lieu */
.callout {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 14px 16px;
  margin: 18px 0;
  border: var(--hair) solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  background: var(--surface-2);
  font-size: var(--fs-sm);
}
.callout svg { color: var(--accent); margin-top: 2px; }
.callout--warn { border-left-color: var(--warn); }
.callout--warn svg { color: var(--warn); }
.callout p { margin: 0; }
.callout b { color: var(--text); }

/* Cac buoc thao tac danh so */
.steps-num { counter-reset: sn; list-style: none; padding: 0; display: grid; gap: 12px; }

/* ⚠ KHONG dung display:grid cho <li> o day. Ruot <li> la VAN XUOI tron
   the inline (<a>, <b>, <code>) — grid tach moi the thanh mot o rieng,
   cau "Tải gói ở <a>trang tải về</a>" bi be doc tung chu (da vo that).
   So thu tu ve bang ::before dinh vi tuyet doi, chu chay binh thuong. */
.steps-num li {
  counter-increment: sn;
  position: relative;
  display: block;
  padding-left: 38px;
  margin: 0;
  line-height: 1.65;
}
.steps-num li::before {
  content: counter(sn);
  position: absolute;
  left: 0; top: 0;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
}

/* ══ 2. GHI CHU PHAT HANH ══════════════════════════════════════════════ */

.rel { display: grid; gap: 18px; }

.rel__item {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 32px);
  padding: 22px 24px;
}
@media (max-width: 680px) {
  .rel__item { grid-template-columns: 1fr; gap: 12px; }
}

.rel__ver {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.rel__date { font-size: var(--fs-xs); color: var(--text-faint); font-family: var(--font-mono); }

.rel__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rel__notes li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: start;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Nhan loai thay doi. Bon mau, bon nghia — dung mau tuy tien la mat y nghia. */
.kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.kind--new   { background: var(--accent-soft);                              color: var(--accent); }
.kind--fix   { background: color-mix(in srgb, var(--ok) 16%, transparent);  color: var(--ok); }
.kind--perf  { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.kind--break { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }


/* ── Ghi chú phát hành: bản lớn gom theo bộ (changelog/changelog.js) ──── */

.rel__badges { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }

.rel__body  { min-width: 0; }   /* cho phép chữ dài xuống dòng trong ô lưới */

.rel__intro {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Mỗi bộ là một khối thu gọn. Dùng <details> của trình duyệt — xem ghi chú
   đầu changelog.js về Ctrl+F. */
.rel__nhom {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.rel__nhom:last-child { margin-bottom: 0; }

.rel__nhom > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  list-style: none;                     /* bỏ tam giác mặc định của Chrome */
  user-select: none;
}
.rel__nhom > summary::-webkit-details-marker { display: none; }   /* Safari */

/* Mũi tên tự vẽ, xoay khi mở — một dấu hiệu duy nhất cho cả hai trạng thái. */
.rel__nhom > summary::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-right: 2px solid var(--text-faint);
  border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.rel__nhom[open] > summary::before { transform: rotate(45deg); }

.rel__nhom > summary:hover { color: var(--accent); }
.rel__nhom > summary:hover::before { border-color: var(--accent-solid); }

/* Viền focus cho người dùng bàn phím — summary là nút bấm thật sự. */
.rel__nhom > summary:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.rel__nhom-ten { flex: 1 1 auto; min-width: 0; }

/* Con số đếm — người đọc biết bung ra sẽ dài bao nhiêu trước khi bấm. */
.rel__nhom-so {
  flex: none;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
}

.rel__nhom .rel__notes { padding: 4px 14px 14px; }

.rel__muc-ten {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-strong, var(--border));
}
a.rel__muc-ten:hover { color: var(--accent); border-bottom-color: var(--accent-solid); }

.rel__muc-mo { color: var(--text-muted); }

/* Số riêng của từng chức năng. Cố ý NHỎ và XÁM: số quan trọng với người
   đọc là số bản cài ở cột trái — số này chỉ để đối chiếu khi cần. */
.rel__muc-ver {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--text-faint);
  vertical-align: 1px;
  white-space: nowrap;
}

/* Bỏ nhãn thì bỏ luôn cột dành cho nó, trả bề ngang lại cho chữ. */
.rel__body--khong-nhan .rel__notes li { grid-template-columns: 1fr; }

/* Điện thoại: cột nhãn 74px ăn gần nửa bề ngang, chữ bị bóp thành sợi.
   Cho nhãn nằm riêng một dòng phía trên. */
@media (max-width: 560px) {
  .rel__notes li { grid-template-columns: 1fr; gap: 4px; }
  .rel__notes li > .kind { justify-self: start; }
}

/* In ra giấy: mũi tên vô nghĩa trên giấy nên bỏ. Việc BUNG HẾT các khối
   thu gọn thì CSS không làm được — trình duyệt giấu ruột <details> bằng cơ
   chế riêng, không phải bằng display. Nên nó nằm ở changelog.js (hai sự
   kiện beforeprint / afterprint). */
@media print {
  .rel__nhom > summary::before { display: none; }
}

/* ══ 3. KHOI LIEN HE ═══════════════════════════════════════════════════ */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.contact__ways { display: grid; gap: 12px; }
.way {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: var(--hair) solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.way:hover { border-color: var(--accent); transform: translateX(3px); color: var(--text); }
.way__ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.way__k { font-size: var(--fs-xs); color: var(--text-faint); font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.way__v { font-weight: 650; }

/* ══ 4. KHACH HANG NOI GI ══════════════════════════════════════════════ */

.says { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }

.say { display: grid; gap: 16px; align-content: start; }
.say__quote { font-size: var(--fs-body); color: var(--text); margin: 0; }
/* Dau ngoac kep to o goc — dau hieu quen thuoc cua loi trich dan. */
.say__quote::before {
  content: "“";
  display: block;
  font-size: 2.4rem;
  line-height: .6;
  color: var(--accent);
  opacity: .5;
  margin-bottom: 10px;
}
.say__who { display: flex; align-items: center; gap: 12px; }
.say__who .avatar { flex: none; }
.say__n { font-weight: 650; font-size: var(--fs-sm); }
.say__r { font-size: var(--fs-xs); color: var(--text-faint); }

/* ══ 5. TRANG 404 ══════════════════════════════════════════════════════ */

.nf {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px 20px;
  position: relative;
}
.nf__code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 16vw, 10rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
  opacity: .22;
}
.nf__box { position: relative; max-width: 46ch; display: grid; gap: 16px; justify-items: center; }
.nf__acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ══ 6. BANG CHUYEN NGANG (nhan xet khach hang) ════════════════════════
   Cac the xep mot hang, cuon ngang, dung dung mep the nho scroll-snap.
   Vuot bang ngon tay chay san; hai nut chi la duong tat cho chuot. */
.carousel { position: relative; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  /* An thanh cuon: da co hai nut va cu vuot roi. */
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

@media (min-width: 900px) {
  .rail { grid-auto-columns: minmax(0, calc(33.333% - var(--gap) * 2 / 3)); }
}

.car-nav { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 14px; }
.car-nav button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: var(--hair) solid var(--border-strong);
  border-radius: 5px;
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.car-nav button:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
/* Het duong: lam mo va khoa han, khong de nguoi dung bam vao khoang khong. */
.car-nav button:disabled { opacity: .35; cursor: default; }

/* ══ TRANG TÀI LIỆU — PHẦN SỬA CỦA SUPERADMIN ═════════════════════════ */

/* Thanh nút dưới mỗi mục — chỉ SuperAdmin thấy (docs.js vẽ). */
.doc__admin {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

/* Modal soạn mục tài liệu. */
.docedit {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  padding: 20px;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}

.docedit.is-open { display: flex; align-items: flex-start; justify-content: center; }

.docedit__box {
  width: min(860px, 100%);
  margin: 4vh 0;
  padding: clamp(18px, 3vw, 28px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-xl);
}

.docedit__box h2 { font-size: 1.1rem; margin: 0 0 12px; }

.docedit__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 90px;
  gap: 0 14px;
}

.docedit__acts { display: flex; gap: 10px; margin-top: 14px; }

@media (max-width: 640px) {
  .docedit { padding: 0; }
  .docedit__box { margin: 0; min-height: 100dvh; border: 0; border-radius: 0; }
  .docedit__row { grid-template-columns: 1fr; }
  .docedit__acts .btn { flex: 1; }
}

/* ── Khung xem PDF ngay trong trang docs ──────────────────────────────── */
.pdfdock__mo { display: inline-block; margin-top: 10px; }

.pdfdock { margin-top: 12px; }

.pdfdock iframe {
  width: 100%;
  height: 82vh;                /* gan tron man hinh — doc PDF cho thoai */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.pdfdock__hint {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}