/* AI Mỗi Ngày - additions to the design CSS (C-078): the states site.js switches on, and the two text
   pages (terms, privacy) the design only links to. Uses the variables of tokens.css only. */

/* Accordions: with site.js an answer shows only under an open button. Without it every answer shows,
   and the buttons, which would do nothing, read as plain questions; the copy buttons need it too. */
.js .faq-btn[aria-expanded="false"] + .faq-a { display: none; }
html:not(.js) .faq-btn { cursor: default; }
html:not(.js) .faq-btn:hover { color: var(--ice); }
html:not(.js) .faq-btn .icon, html:not(.js) .copy-btn { display: none; }

/* Spacing the design declares but its own reset cancels: `.page p, .page ul, .page figure { margin: 0 }` is
   more specific than these one-class rules, so in the canvas they never applied (text sat on the box under
   it). Same values as components.css, one class more specific. */
.page .step-body > * + * { margin-top: var(--sp-3); }
.page .illus { margin-top: var(--sp-5); }
.page .req-list { margin-top: var(--sp-5); }
.page .ss-step { margin-bottom: var(--sp-2); }
.page .cmd-label { margin-bottom: var(--sp-2); }
.page .cmd-note { margin-top: var(--sp-2); }
/* Not in the design: the gap between "Gõ trong PowerShell..." and the command cards (the h2 above uses it). */
.doc-section > p + .cmd-list { margin-top: var(--sp-5); }
/* The three steps of "Cách làm" start level: a shorter step no longer spreads its rows over the row height. */
.steps-row .step { align-content: start; }

/* Text pages (Điều khoản dùng thử, Chính sách quyền riêng tư): one column of --doc. */
.terms { max-width: calc(var(--doc) + 2 * var(--sp-6)); margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-9); }
.terms h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.2; letter-spacing: var(--track-heading); text-wrap: balance; }
.terms-version { margin-top: var(--sp-4) !important; }
.terms-intro { margin-top: var(--sp-6) !important; color: var(--text-2); font-size: var(--fs-lead); line-height: 1.5; }
.terms-section { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.terms-section h2 { font-size: var(--fs-heading-sm); line-height: 1.24; letter-spacing: var(--track-heading); }
.terms-section > p { color: var(--text-2); }
.terms-section > * + * { margin-top: var(--sp-4) !important; }
.terms-end { margin-top: var(--sp-7) !important; padding-top: var(--sp-5); border-top: 1px solid var(--line); color: var(--text-2); }

@media (max-width: 699px) {
  .terms { padding: var(--sp-7) var(--sp-4) var(--sp-8); }
}
/* Below 390 px the hero's one-line pill ("Bản thử nghiệm 1.1.0-beta.1 · miễn phí") is wider than the column
   and was cut at the right edge: tighter tracking keeps it on one line, and below 340 px it may wrap. */
@media (max-width: 389px) {
  .hero-inner > .pill { letter-spacing: var(--track-ui); }
}
@media (max-width: 339px) {
  .hero-inner > .pill { letter-spacing: 0; max-width: 100%; height: auto; min-height: 26px; white-space: normal; }
}