/* ============================================================================
   04 — THÀNH PHẦN
   Thẻ · nút · bảng · viên · ô nhập · tab · thông báo · hộp trạng thái.
   Mở `index.html` để xem hết một lượt.
   ============================================================================ */

/* --- Thẻ -------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-bottom:18px}
.card h2{margin-bottom:4px}
.card .sub{color:var(--muted);margin-bottom:14px}

/* --- Nút -------------------------------------------------------------------- */
.btn{border:1px solid var(--line-strong);background:var(--card);color:var(--ink);padding:9px 15px;border-radius:8px;font-weight:600}
.btn:hover{border-color:var(--ink-soft)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
/* ⚠ Dùng `color-mix` chứ đừng gõ cứng màu đậm hơn: gõ cứng thì ở nền tối nút
   hoá tối đi trong khi `--accent` lúc đó đang sáng. */
.btn.primary:hover{background:color-mix(in srgb, var(--accent) 86%, #000)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* --- Viên (nhãn trạng thái) -------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-weight:600;padding:3px 9px;border-radius:20px;font-family:var(--mono)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.err{background:var(--err-soft);color:var(--err)}
.pill.mut{background:var(--soft2);color:var(--muted)}
.pill.blue{background:var(--accent-soft);color:var(--accent)}

/* --- Ô nhập ------------------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-weight:700;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  border:1px solid var(--line-strong);border-radius:10px;padding:9px 12px;
  background:var(--card);color:var(--ink);font-family:var(--sans);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
/* Ô chọn có mũi tên riêng, bỏ mũi tên mặc định của hệ điều hành cho đồng bộ */
.selp{
  appearance:none;-webkit-appearance:none;box-sizing:border-box;
  border:1px solid var(--line-strong);border-radius:10px;padding:9px 34px 9px 12px;
  background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23636D7B' stroke-width='1.8' stroke-linecap='round'/></svg>") right 12px center/12px no-repeat;
  color:var(--ink);
}
.selp:hover{border-color:var(--ink-soft)}
.selp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* --- Tab --------------------------------------------------------------------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs button{border:none;background:none;padding:9px 14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}

/* --- Bảng -------------------------------------------------------------------- */
table.grid{width:100%;border-collapse:collapse}
table.grid th{text-align:left;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;border-bottom:1.5px solid var(--line-strong)}
table.grid td{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.grid tr:hover td{background:var(--soft)}
td.num,th.num,td.n,th.n{text-align:right;font-family:var(--mono)}

/* ⚠ Bảng rộng hơn thẻ thì phải có khung cuộn, nếu không nó tràn ra ngoài và đẩy
   vỡ cả trang trên điện thoại. Bọc mọi bảng có khả năng rộng bằng lớp này. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Đầu cột bấm được để sắp xếp */
.sortcol,th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.sortcol:hover,th.sortable:hover{color:var(--ink)}
.sortcol::after,th.sortable::after{content:"⇅";margin-left:5px;opacity:.35;font-size:.9em}
.sortcol.asc::after,th.sortable.asc::after{content:"↑";opacity:1;color:var(--accent)}
.sortcol.desc::after,th.sortable.desc::after{content:"↓";opacity:1;color:var(--accent)}

/* Ô nhập nằm ngay trong ô bảng */
.cellinput{width:100%;border:1px solid transparent;background:transparent;padding:5px 6px;border-radius:6px;text-align:right;font-family:var(--mono);color:var(--ink)}
.cellinput:focus{outline:none;border-color:var(--accent);background:var(--card)}
.cellinput.bad{border-color:var(--err);background:var(--err-soft)}

/* Ảnh nhỏ trong bảng */
.thumb{width:46px;height:46px;object-fit:cover;border:1px solid var(--line);border-radius:6px;background:var(--soft2);flex-shrink:0}
.thumb2{width:64px;height:64px;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:var(--soft2);cursor:zoom-in}

/* --- Hộp trạng thái ---------------------------------------------------------- */
.hint{color:var(--muted)}
.warnbox{background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:9px;padding:12px 14px;color:var(--warn-ink);display:flex;gap:9px}
.okbox{background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:9px;padding:12px 14px;color:var(--ok-ink);display:flex;gap:9px}
.errbox{background:var(--err-soft);border:1px solid var(--err-line);border-radius:9px;padding:12px 14px;color:var(--err-ink);display:flex;gap:9px}
.infobox{background:var(--accent-bg2);border:1px solid var(--accent-line);border-radius:9px;padding:12px 14px;color:var(--accent-ink);display:flex;gap:9px}

/* --- Vùng thả tệp ------------------------------------------------------------ */
.drop{border:1.5px dashed var(--line-strong);border-radius:10px;padding:22px;text-align:center;color:var(--muted);background:var(--soft)}
.drop.hot{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.drop b{color:var(--ink)}

/* --- Dãy số liệu -------------------------------------------------------------- */
.stat{display:flex;gap:22px;flex-wrap:wrap;margin:2px 0 4px}
.stat .s{min-width:90px}
.stat .s .v{font-weight:700;font-family:var(--mono)}
.stat .s .l{color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.v.ok{color:var(--ok)} .v.warn{color:var(--warn)} .v.err{color:var(--err)}

/* --- Sổ kiểm tra: mỗi dòng một điều đã soát ----------------------------------- */
.ledger{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:6px}
.ledger .lrow{display:grid;grid-template-columns:26px 130px 1fr;gap:10px;padding:9px 14px;border-top:1px solid var(--line);align-items:center}
.ledger .lrow:first-child{border-top:none}
.ledger .lrow.err{background:var(--err-soft)}
.ledger .lrow.warn{background:var(--warn-soft)}
.ledger .who{font-family:var(--mono);color:var(--ink-soft)}
.dot{width:9px;height:9px;border-radius:50%;justify-self:center}
.dot.err{background:var(--err)} .dot.warn{background:var(--warn)} .dot.ok{background:var(--ok)}

/* --- Thanh chọn hàng loạt ------------------------------------------------------ */
.bulkbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:10px;padding:7px 10px}
.bulkbar .bulkcount{font-weight:700;color:var(--accent)}
.bulkbar .sep{width:1px;height:20px;background:var(--accent-line)}
.selbox{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

/* --- Số thứ tự bước ------------------------------------------------------------ */
.stepno{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--accent);color:var(--accent-on);font-family:var(--mono);font-weight:800;margin-right:8px;vertical-align:-4px}

/* --- Thông báo nổi -------------------------------------------------------------
   ⚠ Đây là MỘT thẻ duy nhất, gọi lần sau ĐÈ lần trước. Đừng bắn một câu lỗi rồi
     bắn tiếp câu thành công ngay dòng sau — người dùng chỉ thấy câu cuối, và lỗi
     biến mất không dấu vết. */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--nav);color:#fff;padding:11px 18px;border-radius:9px;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s;z-index:90}
.toast.hien{opacity:1}

/* --- Nhóm nút chọn một trong nhiều (dùng cho Giao diện / Nền / Ngôn ngữ) ------- */
.lmsw{display:flex;gap:6px;flex-wrap:wrap}
.lmsw button{flex:1;min-width:96px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:9px;background:var(--card);color:var(--muted);font-weight:600}
.lmsw button:hover{border-color:var(--accent);color:var(--accent)}
.lmsw button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.lmsw .lmi{line-height:1}
.setgrp{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.setgrp .vlabel{font-weight:700;color:var(--ink-soft);display:block;margin-bottom:7px}