/* Trang máy /planner/{slug}, hub /devices, /how-to/…: thành phần thêm trên nền app.css (design system B'). */

/* Breadcrumb: chữ mono nhỏ như chú thích bản vẽ */
.crumbs { padding-top: var(--s4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: 0; padding: 0; list-style: none; font: 13px var(--mono); color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--ink-3); }
.crumbs li > * { display: inline-block; padding: var(--s1) 0; }
.crumbs [aria-current] { color: var(--ink); }

/* Hero trang máy: máy đã khoá, chỉ chọn năm */
.hero-dev { padding-top: var(--s5); }
.hero-dev h1 { max-width: 20ch; }
.label { font-size: 13px; color: var(--ink-2); }
.locked {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 40px; margin: 0; padding: 0 var(--s3);
  font-size: 15px; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--r);
}
.locked span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.locked a { flex: none; font-size: 13px; color: var(--ink-2); }
@media (max-width: 699px) {
  .locked { min-height: 44px; }
  .locked a { display: flex; align-items: center; min-height: 44px; }
  /* Màn đầu 390 px phải thấy H1, nút tải thử và nửa trên khung máy: máy + năm trên một hàng
     (tên máy dài xuống dòng, không cắt), câu định nghĩa dời xuống dưới khung (DOM giữ nguyên
     thứ tự, câu vẫn ngay dưới H1 cho Google và AI). */
  .hero-dev .hero-fields { grid-template-columns: minmax(0, 1fr) 112px; align-items: start; }
  .hero-dev .locked span { white-space: normal; padding: var(--s2) 0; line-height: 1.3; }
  .hero-dev { display: flex; flex-direction: column; gap: 0; }
  .hero-dev .hero-text { display: contents; }
  .hero-dev h1 { order: 1; }
  .hero-dev .hero-form { order: 2; }
  .hero-dev .small { order: 3; }
  .hero-dev .hero-fig { order: 4; margin-top: var(--s5); }
  .hero-dev .lead { order: 5; margin: var(--s5) 0 0; }
}

/* Thông số: chữ trái, bảng phải trên desktop */
.two { display: grid; gap: var(--s5); }
.two h2 { margin-bottom: var(--s4); }
.two p { margin: 0; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 960px) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s7); align-items: start; } }
.specs.kv { white-space: normal; }
.specs.kv th { width: 42%; font-weight: 400; color: var(--ink-2); background: var(--paper-2); }
.specs.kv td { font-weight: 500; }

/* Các bước nạp: số 01/02/… như khối Tap a day */
.load { margin: 0 0 var(--s4); padding: 0; list-style: none; counter-reset: step; max-width: 720px; }
.load li { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.load li:last-child { border-bottom: 1px solid var(--line); }
.load li::before { content: "0" counter(step); font: 11.5px/24px var(--mono); color: var(--ink-2); }
.load b { font-weight: 500; }
.notes { margin: 0 0 var(--s4); padding-left: 18px; max-width: 720px; color: var(--ink-2); font-size: 15px; }
.notes li { margin-bottom: var(--s2); }

/* What's inside, 4 trang */
@media (min-width: 700px) { .inside.four { grid-template-columns: repeat(4, 1fr); } }

/* Lưới 14 kiểu tuần: ảnh nhỏ thật, tải lười */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s5) var(--s4); margin: 0; padding: 0; list-style: none; }
.thumbs a { display: block; text-decoration: none; }
.thumbs img { display: block; width: 100%; height: auto; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.thumbs a:hover img { border-color: var(--ink); }
.thumbs span { display: block; margin-top: var(--s2); font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.thumbs b { display: block; font-weight: 500; font-size: 14px; color: var(--ink); }
@media (max-width: 699px) { .thumbs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .thumbs { grid-template-columns: repeat(7, 1fr); } }

/* Chip máy: link tới trang máy */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.chips a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s3);
  font-size: 12.5px; text-decoration: none; background: var(--white); border: 1px solid var(--line-2); border-radius: 99px;
}
.chips a:hover { border-color: var(--ink); }
@media (max-width: 699px) { .chips a { min-height: 44px; } }
.updated { margin-top: var(--s5); }
.note time { white-space: nowrap; }

/* Hub /devices và how-to: trang chữ một cột */
.page-h1 { margin: var(--s5) 0 var(--s3); font-size: 32px; line-height: 1.15; }
@media (min-width: 960px) { .page-h1 { font-size: 40px; } }
.wrap > .lead { max-width: 64ch; }
.specs .grp th { padding-top: var(--s4); background: var(--paper); font-weight: 500; }
.specs .grp a { margin-left: var(--s3); font-weight: 400; font-size: 13px; color: var(--ink-2); }
.howto h2 { margin: var(--s7) 0 var(--s4); font-size: 20px; }
.howto .lead { color: var(--ink-2); }
.sources { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); max-width: 720px; }
.sources li { margin-bottom: var(--s2); }
.howto .note { margin-top: var(--s3); }

/* /inside: ảnh trang thật lớn hơn lưới kiểu tuần; mục lục nhảy nhanh bằng chip */
.jump { margin: var(--s5) 0 0; }
.pages { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); margin: 0; padding: 0; list-style: none; }
.pages img { display: block; width: 100%; height: auto; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pages span { display: block; margin-top: var(--s2); font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.pages b { display: block; font-weight: 500; color: var(--ink); }
@media (min-width: 700px) { .pages { grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s5); } }
@media (min-width: 1000px) { .pages { grid-template-columns: repeat(4, 1fr); } }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }

/* Trang chữ: /about, /changelog, pháp lý */
.prose > h2 { margin: var(--s7) 0 var(--s3); font-size: 20px; line-height: 1.3; }
.prose > p:not(.lead):not(.note) { margin: 0 0 var(--s3); max-width: 68ch; }
.prose .table-wrap { margin-top: var(--s4); }
.prose .lead { margin-bottom: var(--s4); }
.log { margin: var(--s6) 0 0; padding: 0; list-style: none; max-width: 720px; }
.log > li { display: grid; gap: var(--s2); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.log > li:last-child { border-bottom: 1px solid var(--line); }
.log h2 { margin: 0; font: 400 13px/24px var(--mono); letter-spacing: 0; color: var(--ink-2); }
.log ul { margin: 0; padding-left: 18px; }
.log li li { margin-bottom: var(--s1); }
@media (min-width: 700px) { .log > li { grid-template-columns: 140px 1fr; gap: var(--s5); } }
.nowrap { white-space: nowrap; }
.log ul { list-style: disc; }