/* ZH_PWA_V1: trang /cai-ung-dung. Màu lấy từ biến theme --lx-* (sáng/tối); chữ không dưới 14px; nút cao tối thiểu 44px. */
/* Thuộc tính hidden phải thắng display của .cd-btn (inline-flex), nếu không nút "Cài ZH về máy" vẫn hiện trên máy chưa cài được. */
.cd-body [hidden] { display: none !important; }
.cz-status { margin: 18px 0 0; font-size: 16px; color: var(--lx-text2); min-height: 24px; }
.cz-warn { border: 1px solid var(--lx-warn); border-left-width: 6px; border-radius: 16px; background: color-mix(in srgb, var(--lx-warn) 12%, var(--lx-surface)); padding: 20px 22px; }
.cz-warn h2 { font-size: 20px; margin: 0 0 8px; }
.cz-warn p, .cz-warn li { font-size: 16px; }
.cz-warn .cd-row { margin-top: 12px; }
.cz-copied { font-size: 14px; color: var(--lx-ok); }
.cz-dev, .cz-faq { border: 1px solid var(--lx-hair); border-radius: 16px; background: var(--lx-surface); margin-top: 14px; }
.cz-dev > summary, .cz-faq > summary { cursor: pointer; list-style: none; padding: 16px 20px; min-height: 52px; font-weight: 700; font-size: 17px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--lx-text); }
.cz-dev > summary::-webkit-details-marker, .cz-faq > summary::-webkit-details-marker { display: none; }
.cz-dev > summary::after, .cz-faq > summary::after { content: "+"; margin-left: auto; font-size: 24px; line-height: 1; color: var(--lx-gold-text); }
.cz-dev[open] > summary::after, .cz-faq[open] > summary::after { content: "–"; }
.cz-dev-s { font-size: 14px; font-weight: 500; color: var(--lx-muted); }
.cz-dev > summary:focus-visible, .cz-faq > summary:focus-visible { outline: 3px solid var(--lx-gold-hi); outline-offset: 2px; border-radius: 16px; }
.cz-dev .cd-steps { margin: 0 !important; padding: 0 20px 6px !important; grid-template-columns: 1fr; }
.cz-alt { margin: 4px 20px 18px; padding: 14px 16px; border: 1px dashed var(--lx-hair); border-radius: 12px; font-size: 15px; color: var(--lx-text2); }
.cz-faq p { margin: 0; padding: 0 20px 18px; font-size: 16px; color: var(--lx-text2); }
.cz-dev[open], .cz-faq[open] { border-color: var(--lx-gold-hi); }
@media (max-width: 520px) {
  .cz-dev > summary, .cz-faq > summary { padding: 14px 16px; }
  .cz-dev .cd-steps { padding: 0 14px 6px !important; }
  .cz-alt { margin: 4px 14px 14px; }
  .cz-faq p { padding: 0 16px 16px; }
}