/* extras.css — CHỈ BỔ SUNG.
   styles.css là file design system gốc, giữ nguyên không sửa một byte nào.
   Mọi thứ ở đây là phần bản gốc còn thiếu: menu mobile và giao diện blog.
   Đều dùng lại token và font đã khai báo trong styles.css. */

/* ---- menu mobile (bản gốc không có JS, nav chỉ wrap xuống dòng) ---- */
.nav-toggle{display:none}
@media(max-width:860px){
  .nav-toggle{
    display:inline-flex;align-items:center;gap:9px;
    background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px;
    letter-spacing:.08em;text-transform:uppercase;
    padding:8px 14px;border-radius:3px;cursor:pointer
  }
  .nav-toggle:hover{border-color:#fff}
  .nav-toggle:focus-visible{outline:2px solid var(--twill);outline-offset:2px}
  .nav-toggle-bars{width:16px;height:2px;background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 14px}
  .nav-links.open{display:flex}
  .nav-links li{border-top:1px solid rgba(255,255,255,.12)}
  .nav-links a{display:block;padding:13px 2px}
  .nav-cta{display:block;margin-top:12px;text-align:center;padding:12px 18px}
}

/* ---- blog ---- */
.post-meta{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--ink-soft);letter-spacing:.04em}
.tile .cover{width:100%;height:150px;object-fit:cover;border-bottom:var(--stitch)}
.tile h3 a{color:var(--ink);text-decoration:none}
.tile h3 a:hover{color:var(--selvedge)}
.post-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.post-tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-soft);border:1px solid var(--line);
  border-radius:3px;padding:3px 8px
}

/* thân bài viết — mở rộng .prose có sẵn */
.prose img{border:1.5px solid var(--ink);border-radius:var(--radius);margin:22px 0}
.prose blockquote{
  border-left:4px solid var(--selvedge);padding-left:18px;margin:22px 0;
  color:var(--ink-soft);font-size:17px
}
.prose code{font-family:'IBM Plex Mono',monospace;font-size:14px;background:var(--oxford);padding:2px 6px;border-radius:3px}
.prose pre{background:var(--ink);color:#E8EBEF;padding:18px;border-radius:var(--radius);overflow-x:auto;margin:22px 0}
.prose pre code{background:transparent;color:inherit;padding:0;font-size:13.5px}
.prose hr{border:0;border-top:var(--stitch);margin:30px 0}
.prose table{margin:22px 0}
.prose ol{margin:0 0 16px 20px}

.post-foot{border-top:var(--stitch);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.post-foot a{color:var(--selvedge);font-weight:600;text-decoration:none;font-size:14.5px}
.empty-note{
  background:#fff;border:1.5px dashed var(--ink);border-radius:var(--radius);
  padding:28px;text-align:center;color:var(--ink-soft);font-size:15px
}

/* ---- dải băng báo đây là bản demo ---- */
.demo-bar{background:var(--twill);color:#2A2118;padding:9px 0;font-size:13.5px;line-height:1.45}
.demo-bar strong{font-family:'Archivo',sans-serif;font-weight:700}

/* ---- review ---- */
.review{display:flex;flex-direction:column;gap:12px}
.review-quote{margin:0;font-size:15.5px;color:var(--ink);border:0;padding:0}
.review-quote p{margin:0 0 8px}
.review-quote p:last-child{margin-bottom:0}
.review .who{margin-top:auto}
.review-role{color:var(--ink-soft)}

/* ---- form ---- */
/* Bẫy bot: đẩy ra ngoài màn hình thay vì display:none, vì một số bot bỏ qua phần tử ẩn. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note.is-ok{color:#1B6B3A;font-weight:600}
.form-note.is-err{color:var(--selvedge);font-weight:600}
#quote-submit[disabled]{opacity:.6;cursor:progress}
input:user-invalid,textarea:user-invalid{border-color:var(--selvedge)}

.map-embed{
  width:100%;height:220px;border:1.5px solid var(--ink);border-radius:var(--radius);
  margin-top:16px;display:block
}