/* Bố cục riêng của tudien.hannom.org. Màu sắc & menu dùng chung nạp từ hannom.org
   (xem assets/theme.css và assets/nav.css qua thẻ <link> trong index.html). */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:var(--bronze);}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--seal);
  outline-offset:3px;
}
::selection{ background:var(--seal-soft); }

.label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.page{
  max-width:720px;
  margin:0 auto;
  padding:0 24px 96px;
}

/* ---------- doc header ---------- */
.doc-head{
  position:relative;
  padding:56px 0 40px;
  overflow:hidden;
}
.doc-ghost{
  position:absolute;
  top:-30px;
  right:-24px;
  font-family:var(--font-han);
  font-size:200px;
  line-height:1;
  color:var(--ink);
  opacity:.05;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.doc-head-inner{ position:relative; z-index:1; }

.seal{
  display:inline-block;
  width:96px;
  height:96px;
  transform:rotate(-6deg);
  margin-bottom:20px;
  flex-shrink:0;
}
.seal img{ display:block; width:100%; height:100%; }

h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:38px;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:balance;
}
.doc-sub{
  font-size:17px;
  color:var(--ink-soft);
  max-width:36em;
  margin:16px 0 0;
  text-wrap:pretty;
}
.doc-meta{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-soft);
  margin-top:18px;
}

/* ---------- cta buttons ---------- */
.cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}
.btn{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.04em;
  text-decoration:none;
  padding:12px 20px;
  border:1px solid var(--seal);
  color:var(--seal);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background .15s ease, color .15s ease;
}
.btn:hover{ background:var(--seal); color:var(--paper); }
.btn.primary{ background:var(--seal); color:var(--paper); }
.btn.primary:hover{ opacity:.88; background:var(--seal); }

/* ---------- sections ---------- */
.section{
  padding:36px 0;
  border-top:1px solid var(--border);
}
.section-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:22px; }
.section-head .n{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--seal);
  border:1px solid var(--seal);
  width:26px;
  height:26px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  margin:0;
  text-wrap:balance;
}
.section p{ font-size:16px; margin:0 0 12px; max-width:60ch; color:var(--ink); }
.section p:last-child{ margin-bottom:0; }

/* ---------- table of contents (trang điều khoản) ---------- */
.toc{
  border:1px solid var(--border);
  background:var(--panel);
  padding:18px 20px;
  margin:0 0 8px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 20px;
}
.toc a{
  font-size:14px;
  text-decoration:none;
  color:var(--ink-soft);
}
.toc a:hover{ color:var(--seal); }
.toc .n{ font-family:var(--font-mono); color:var(--seal); margin-right:6px; }

/* ---------- clauses (trang điều khoản) ---------- */
.clause{
  padding:36px 0;
  border-top:1px solid var(--border);
  display:flex;
  gap:24px;
  scroll-margin-top:24px;
}
.clause .num{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--seal);
  border:1px solid var(--seal);
  width:26px;
  height:26px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.clause .body{ flex:1; min-width:0; }
.clause h2{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  margin:0 0 12px;
  text-wrap:balance;
}
.clause p{ font-size:16px; margin:0 0 12px; max-width:60ch; color:var(--ink); }
.clause p:last-child{ margin-bottom:0; }
.clause ul{ margin:0 0 12px; padding-left:20px; }
.clause li{ font-size:16px; margin-bottom:6px; max-width:60ch; }
.clause strong{ color:var(--ink); }

/* ---------- feature grid ---------- */
.features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.feature{
  border:1px solid var(--border);
  background:var(--panel);
  padding:20px;
  display:flex;
  gap:14px;
}
.feature .glyph{
  font-family:var(--font-han);
  font-size:26px;
  color:var(--seal);
  border:1px solid var(--seal);
  width:44px;
  height:44px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--seal-soft);
}
.feature h3{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  margin:0 0 6px;
}
.feature p{ font-size:14.5px; color:var(--ink-soft); margin:0; }

/* ---------- platforms ---------- */
.platforms{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.platform{
  border:1px solid var(--border);
  background:var(--panel);
  padding:10px 16px;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.platform .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--bronze);
  flex:none;
}

.note{
  background:var(--panel);
  border:1px solid var(--border);
  border-left:3px solid var(--bronze);
  padding:14px 18px;
  font-size:14.5px;
  color:var(--ink-soft);
  margin-top:16px;
}

/* ---------- contact ---------- */
.contact{
  border:1px solid var(--border);
  background:var(--panel);
  padding:24px 26px;
  margin-top:8px;
}
.contact .label{ color:var(--seal); margin-bottom:10px; }
.contact a{
  font-family:var(--font-mono);
  font-size:15px;
  text-decoration:none;
}
.contact a:hover{ text-decoration:underline; }

footer.doc-footer{
  border-top:1px solid var(--border);
  padding-top:32px;
  margin-top:16px;
  font-size:13.5px;
  color:var(--ink-soft);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
footer.doc-footer p{ max-width:75ch; margin:0; }
footer.doc-footer nav a{ color:var(--ink-soft); text-decoration:none; margin-left:16px; font-size:13.5px; }
footer.doc-footer nav a:hover{ color:var(--seal); }

@media (max-width:640px){
  h1{ font-size:30px; }
  .doc-ghost{ font-size:130px; }
  .features{ grid-template-columns:1fr; }
  .clause{ gap:16px; }
  .toc{ grid-template-columns:1fr; }
  footer.doc-footer{ flex-direction:column; align-items:flex-start; }
  footer.doc-footer nav a{ margin-left:0; margin-right:16px; }
}