/* extras.css — CHỈ BỔ SUNG. Nạp SAU styles.css.
   styles.css là design system; giữ nguyên nếu muốn còn đường thay thiết kế sau này.
   Mọi thứ ở đây dùng lại token và font đã khai báo trong styles.css.

   Bốn nhóm dưới đây là phần một bộ thiết kế tĩnh gần như luôn thiếu — tách riêng
   để nếu sau này thay styles.css thì chúng không bị mất theo. */

/* ---- 1. menu mobile (thiết kế tĩnh không kèm JS, nav vỡ dưới 860px) ---- */
.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,.3);color:#fff;
    font-family:'Sora',sans-serif;font-weight:600;font-size:12.5px;
    letter-spacing:.09em;text-transform:uppercase;
    padding:8px 14px;border-radius:2px;cursor:pointer
  }
  .nav-toggle:hover{border-color:#fff}
  .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}
}
/* Nav là position:sticky, nên nhảy tới mốc neo (/services#iot) sẽ bị nav che mất tiêu đề.
   Chừa sẵn khoảng trống phía trên mọi phần tử có id. */
[id]{scroll-margin-top:84px}

/* ---- 2. blog ---- */
.post-meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);letter-spacing:.04em}
.card .cover{width:100%;height:170px;object-fit:cover;border-radius:2px}
.card .cover-ph{
  width:100%;height:170px;border-radius:2px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:12px;font-family:'JetBrains Mono',monospace;font-size:11.5px;
  color:var(--ink-soft);background:
    repeating-linear-gradient(60deg,var(--panel-sunk) 0 1px,#F6F8FA 1px 14px),
    repeating-linear-gradient(-60deg,var(--panel-sunk) 0 1px,#F6F8FA 1px 14px)
}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--signal)}
.post-tags{display:flex;gap:7px;flex-wrap:wrap}
.post-tag{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-soft);border:1px solid var(--rule);
  border-radius:2px;padding:3px 7px
}

/* thân bài viết — mở rộng .prose có sẵn trong styles.css */
.prose img{border:1px solid var(--rule);border-radius:var(--radius);margin:24px 0}
.prose blockquote{border-left:3px solid var(--signal);padding-left:18px;margin:24px 0;color:var(--ink-soft);font-size:17px}
.prose code{font-family:'JetBrains Mono',monospace;font-size:14px;background:var(--panel-sunk);padding:2px 6px;border-radius:2px}
.prose pre{background:var(--graphite);color:#DDE3E9;padding:18px;border-radius:var(--radius);overflow-x:auto;margin:24px 0}
.prose pre code{background:transparent;color:inherit;padding:0;font-size:13.5px}
.prose hr{border:0;border-top:var(--tick);margin:32px 0}
.prose table{margin:24px 0}
.prose h2:first-child{margin-top:0}

.post-foot{border-top:var(--tick);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.post-foot a{color:var(--signal);font-weight:600;text-decoration:none;font-size:14.5px}

/* ---- 3. trạng thái 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:var(--verified);font-weight:600}
.form-note.is-err{color:#B3261E;font-weight:600}
#quote-submit[disabled]{opacity:.6;cursor:progress}
input:user-invalid,textarea:user-invalid{border-color:#B3261E}

/* ---- 4. trạng thái rỗng (review chưa có, blog chưa có bài) ---- */
.empty-note{
  background:var(--panel);border:1px dashed var(--ink-soft);border-radius:var(--radius);
  padding:30px;text-align:center;color:var(--ink-soft);font-size:15px
}
.empty-note strong{color:var(--ink)}

/* ---- 5. ô chưa điền ----
   Nhiều số liệu (giá, lead time, số lượng tối thiểu, danh sách máy) chưa có dữ liệu thật.
   Thay vì bỏ trống hoặc điền số bịa, hiện nó như một ô CHƯA ĐIỀN trên phiếu công việc —
   vốn đúng với hướng thiết kế của site. Người xem hiểu ngay là còn thiếu, không tưởng là lỗi.
   Khi điền xong dữ liệu thật thì xoá hẳn các thẻ này. */
.tbd{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft);border:1px dashed var(--ink-soft);border-radius:2px;padding:4px 9px;
  background:repeating-linear-gradient(-45deg,#EDF1F4 0 6px,#E3E9ED 6px 12px)
}
.tbd::before{content:"";width:7px;height:7px;background:var(--ink-soft);transform:rotate(45deg);flex:none}
.tbd-block{
  border:1px dashed var(--ink-soft);border-radius:var(--radius);padding:26px;
  background:repeating-linear-gradient(-45deg,#EDF1F4 0 8px,#E6ECF0 8px 16px)
}
.tbd-block h3{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-bottom:10px}
.tbd-block p{font-size:14.5px;color:var(--ink-soft);max-width:46em}
.tbd-block p+p{margin-top:9px}
.tbd-block ul{margin:10px 0 0 20px;font-size:14px;color:var(--ink-soft)}
.tbd-block li{margin-bottom:5px}

/* ---- dải băng báo site chưa hoàn thiện (gắn với cờ IS_DEMO) ---- */
.wip-bar{background:var(--signal-wash);color:var(--signal-deep);border-bottom:1px solid #C6D9F4;padding:9px 0;font-size:13.5px;line-height:1.45}
.wip-bar strong{font-family:'Sora',sans-serif;font-weight:600}