/* VSW-NEN · Thành phần biểu mẫu dùng chung: ô nhập, lựa chọn, ô tích, câu lỗi (DESIGN-SYSTEM 5.11) */

.vs-o { display: block; margin-bottom: var(--vs-k5); }
.vs-o[hidden] { display: none; }
.vs-o-nhan {
  display: block; margin-bottom: var(--vs-k2);
  font-family: var(--vs-font-noi-dung); font-size: var(--vs-co-chu-thich); font-weight: 500; line-height: 1.5; color: var(--vs-ink);
  text-wrap: balance;
}
.vs-o-tuy-chon { font-weight: 400; color: var(--vs-muted); }

.vs-o-nhap {
  display: block; width: 100%; min-height: var(--vs-cao-nut);
  padding: 12px var(--vs-k4); border: 1px solid var(--vs-line); border-radius: var(--vs-bo-nho);
  background: var(--vs-trang); color: var(--vs-ink);
  font-family: var(--vs-font-noi-dung); font-size: var(--vs-co-noi-dung); line-height: 1.4;
  transition: border-color var(--vs-t-nhanh), box-shadow var(--vs-t-nhanh);
}
textarea.vs-o-nhap { min-height: calc(var(--vs-cao-nut) * 1.6); resize: vertical; }
.vs-o-nhap:hover { border-color: var(--vs-vien-hover); }
.vs-o-nhap:focus { outline: none; border-color: var(--vs-action); box-shadow: var(--vs-bong-vong-focus); }
.vs-o-nhap.vs-o-loi { border-color: var(--vs-ember); }
.vs-o-nhap.vs-o-loi:focus { box-shadow: var(--vs-bong-vong-focus); }
.vs-o-nhap:disabled { background: var(--vs-ice); color: var(--vs-muted); cursor: not-allowed; }
select.vs-o-nhap { cursor: pointer; }

.vs-o-loi-chu {
  display: none; margin-top: var(--vs-k2);
  font-size: var(--vs-co-chu-thich); line-height: 1.5; color: var(--vs-ember); text-wrap: balance;
}
.vs-o-loi-chu.vs-o-loi--hien { display: block; }
.vs-o-loi-chu[hidden] { display: none; }
.vs-o-ghi-chu { display: block; margin-top: var(--vs-k2); font-size: var(--vs-co-chu-thich); line-height: 1.5; color: var(--vs-muted); text-wrap: balance; }
.vs-o-ghi-chu[hidden] { display: none; }

/* Hộp tích / nút tròn vẽ bằng CSS (.vs-o-dau). Ô thật trong suốt phủ kín cả hàng: vùng chạm = cả hàng, >= 44px. */
.vs-o-check, .vs-lua-chon { position: relative; }
.vs-o-check > input, .vs-lua-chon > input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.vs-o-dau {
  position: relative; flex-shrink: 0; width: 20px; height: 20px;
  border: 2px solid var(--vs-muted); border-radius: calc(var(--vs-bo-nho) / 3); background: var(--vs-trang);
  transition: background-color var(--vs-t-nhanh), border-color var(--vs-t-nhanh);
}
input:checked + .vs-o-dau { border-color: var(--vs-action); background: var(--vs-action); }
.vs-o-check > input:checked + .vs-o-dau::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px;
  border: solid var(--vs-trang); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input:focus-visible + .vs-o-dau { outline: 2px solid var(--vs-action); outline-offset: 2px; }
input.vs-o-loi + .vs-o-dau { border-color: var(--vs-ember); }
.vs-o-check:hover > input:not(:disabled) + .vs-o-dau, .vs-lua-chon:hover > .vs-o-dau { border-color: var(--vs-action); }

/* 5.11 Lựa chọn: 1 lựa chọn = 1 hàng viền */
.vs-lua-chon-nhom { display: flex; flex-wrap: wrap; gap: var(--vs-k3); }
.vs-lua-chon {
  display: flex; align-items: center; gap: var(--vs-k3); min-height: var(--vs-cao-nut);
  padding: 12px var(--vs-k4); border: 1px solid var(--vs-line); border-radius: var(--vs-bo-nho);
  font-size: var(--vs-co-nho); color: var(--vs-ink); cursor: pointer;
  transition: border-color var(--vs-t-nhanh), background-color var(--vs-t-nhanh);
}
.vs-lua-chon:hover { border-color: var(--vs-vien-hover); }
.vs-lua-chon:has(input:checked) { border-color: var(--vs-action); background: var(--vs-ice); }
.vs-lua-chon > .vs-o-dau { border-radius: 50%; }
.vs-lua-chon > input:checked + .vs-o-dau { background: var(--vs-trang); }
.vs-lua-chon > input:checked + .vs-o-dau::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--vs-action); }

/* Ô tích đơn lẻ (đồng ý, Gala, hoá đơn) */
.vs-o-check {
  display: flex; align-items: flex-start; gap: var(--vs-k3); min-height: var(--vs-cham-toi-thieu);
  padding-block: var(--vs-k2); font-size: var(--vs-co-nho); line-height: 1.5; color: var(--vs-ink); cursor: pointer;
}
.vs-o-check > .vs-o-dau { margin-top: 1px; }
.vs-o-check > span:last-child, .vs-o-check > p { margin: 0; text-wrap: pretty; }
.vs-o-check:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.vs-o-check > input:disabled { cursor: not-allowed; }

fieldset.vs-o { border: 0; padding: 0; margin: 0 0 var(--vs-k5); min-width: 0; }
fieldset.vs-o legend {
  padding: 0; margin-bottom: var(--vs-k2);
  font-family: var(--vs-font-noi-dung); font-size: var(--vs-co-chu-thich); font-weight: 500; line-height: 1.5; color: var(--vs-ink);
}

/* Thông báo chung (lỗi máy chủ, trạng thái đơn) */
.vs-canh-bao {
  display: block; margin-bottom: var(--vs-k5); padding: var(--vs-k4);
  border: 1px solid var(--vs-ember); border-radius: var(--vs-bo-nho);
  background: var(--vs-trang); color: var(--vs-ember); font-size: var(--vs-co-nho); text-wrap: pretty;
}
.vs-canh-bao[hidden] { display: none; }
.vs-canh-bao--thanh-cong { border-color: var(--vs-success); color: var(--vs-success); }