/* OneCAD IoT — bổ sung cho khuôn cổng HST-7 (public/css/cong.css chép nguyên từ onecad-he-sinh-thai-web/assets/cong.css — không sửa tệp đó,
   mọi khác biệt viết ở đây). Phông chữ tự lưu (CSP không cho tệp ngoài); JetBrains Mono không có bản tự lưu → ui-monospace. */
@font-face{font-family:"Be Vietnam Pro";src:url(/fonts/BeVietnamPro-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/fonts/BeVietnamPro-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/fonts/BeVietnamPro-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(/fonts/BeVietnamPro-700.woff2) format("woff2");font-weight:700 800;font-display:swap}

/* ô cách đăng nhập: bấm được, cùng dẫn tới /dang-nhap */
.chips li{display:block}
a.chip{transition:background .2s,border-color .2s}
a.chip:hover{background:rgba(255,255,255,.07);border-color:rgba(190,225,250,.3)}

/* nút đăng nhập khi chưa cấu hình OneCAD ID */
.btn-id.off{background:rgba(255,255,255,.06);color:#9fb2c4;box-shadow:none;border:1px dashed rgba(190,225,250,.25);cursor:not-allowed}
.btn-id.off:hover{filter:none;transform:none}

/* thông báo lỗi trong ô ghi chú */
.note.warn{background:rgba(232,96,76,.09);border-color:rgba(255,130,110,.38)}
.note.warn svg{color:#ff9a86}

/* ===== Đã đăng nhập (ảnh HST-7H + nội dung IOT-1C) ===== */
.card.in .who{margin-top:20px;display:flex;align-items:center;gap:14px}
.card.in .av{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:700;color:#2a1600;letter-spacing:.02em;
 background:linear-gradient(140deg,var(--a),var(--b));box-shadow:0 0 0 4px rgba(255,255,255,.06),0 0 26px var(--s)}
.card.in .wx{min-width:0}
.card.in h2{margin-top:0;font-size:22px;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card.in .wl2{margin-top:4px;display:flex;align-items:center;gap:7px;font-size:13.5px;color:#a9bccd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.in .wl2 svg{flex:none;width:15px;height:15px;color:var(--mute)}
.card.in .wl2 span{overflow:hidden;text-overflow:ellipsis}
.okl{margin-top:16px;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#7fe0a8}
.okl svg{flex:none;width:17px;height:17px}
.soon{margin-top:12px;padding:15px 16px 14px;border-radius:14px;
 background:color-mix(in srgb,var(--c) 7%,rgba(8,16,30,.55));border:1px solid color-mix(in srgb,var(--c) 26%,transparent)}
.soon .sh{display:flex;gap:12px;align-items:flex-start}
.soon .si{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--np2);
 background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 32%,transparent)}
.soon .si svg{width:19px;height:19px}
.soon b{display:block;font-size:15px;font-weight:700;color:#fff}
.soon p{margin-top:3px;font-size:13px;line-height:1.5;color:#c9d7e3}
.steps{list-style:none;margin-top:13px;display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px}
.steps li{display:flex;align-items:center;gap:5px;padding-top:9px;border-top:3px solid rgba(190,225,250,.16);font-size:11.5px;font-weight:600;color:#8fa4b8;white-space:nowrap}
.steps li.done{border-top-color:var(--c);color:color-mix(in srgb,var(--c) 60%,#fff)}
.steps li svg{flex:none;width:11px;height:11px}
.steps .dot{flex:none;width:7px;height:7px;border-radius:50%;border:1.5px solid #8fa4b8}
.card.in .btn-id{margin-top:16px}
.lo{display:block}
button.btn-sec{width:100%;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
button:focus-visible{outline:2px solid var(--np2);outline-offset:3px}

@media (max-width:760px){
 .card.in h2{font-size:20px}
 .steps{grid-template-columns:1fr 1fr 1.5fr;gap:6px}
 .steps li{font-size:11px;white-space:normal}
}