/**
 * VOLET Component Kit – Phase 3 (14.05/14.06) — parity web ↔ app primitive iOS-native.
 * Primitive: chip, badge, section-head, streak, right-now, key-badge, tier-badge, button.
 * Nguồn thiết kế: volet_demo/css (chuẩn chung web+app). Đối chiếu app:
 *   lib/core/widgets/ (VoletChip, VoletBadge, VoletSectionHeader, VoletStreakChip,
 *   VoletNowStrip/Card, VoletKeyBadge, VoletTierBadge, VoletButton).
 * Parity theo VAI TRÒ MÀU (14.03), KHÔNG hex tuyệt đối → chỉ dùng token design-tokens.css.
 * Accent business: token --color-primary tự đổi sang --biz-500 trong scope .ctx-business.
 * Dark: các token *-bg / semantic / --key-gold đã tự đổi ở [data-theme="dark"];
 *   chỉ key/tier cần chỉnh chữ (bỏ darken) để đủ tương phản trên nền tối.
 */

/* ---------- 1. CHIP / FILTER PILL (demo .chip · VoletChip) ---------- */
.vk-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: var(--space-sm) 14px;
  min-height: 34px;
  border-radius: var(--radius-chip);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-interactive);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.vk-chip:active {
  transform: scale(0.96);
}

.vk-chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Đang chọn: fill accent (tím consumer / xanh business qua .ctx-business) + chữ on-accent. */
.vk-chip.is-selected {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Hàng chip cuộn ngang (demo .chip-row) — ẩn scrollbar. */
.vk-chip-row {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
}
.vk-chip-row::-webkit-scrollbar {
  display: none;
}

/* ---------- 2. BADGE / STATUS TAG (demo .badge-* · VoletBadge) ---------- */
.vk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  line-height: 1;
}

.vk-badge--primary {
  background: var(--color-primary-50);
  color: var(--color-primary);
}
.vk-badge--verified {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.vk-badge--success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.vk-badge--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}
.vk-badge--error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}
.vk-badge--info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}
.vk-badge--neutral {
  background: var(--color-surface-2);
  color: var(--color-text-2);
}

/* ---------- 3. SECTION HEADER (demo .section-head/.more · VoletSectionHeader) ---------- */
.vk-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: var(--space-lg) 0 var(--space-sm);
}

.vk-section-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.vk-section-head__sub {
  margin: 2px 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-text-2);
}

/* Link "Xem tất cả" — màu accent, vùng chạm ≥44px. */
.vk-more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}
.vk-more:active {
  transform: scale(0.96);
}
.vk-more:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- 4. STREAK CHIP (demo home streak · VoletStreakChip) ---------- */
.vk-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--space-xs) 10px;
  border-radius: var(--radius-chip);
  font-size: var(--text-body-sm);
  font-weight: var(--font-bold);
  line-height: 1;
  /* active (mặc định): tint cảnh báo ấm (lửa sống) */
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.vk-streak__flame {
  font-size: 14px;
  line-height: 1;
}

/* broken: KHÔNG phải lỗi → trung tính mờ, lửa tắt (opacity .5). */
.vk-streak.is-broken {
  background: var(--color-surface-2);
  color: var(--color-text-2);
}
.vk-streak.is-broken .vk-streak__flame {
  opacity: 0.5;
}

/* ---------- 5. RIGHT-NOW STRIP + CARD (demo .rightnow-strip/.rn-card · VoletNowStrip/Card) ---------- */
/* Parity app: card SURFACE (không glass) + viền trái tín hiệu khẩn. Demo bản glass-on-canopy
   chỉ dùng khi đặt trên canopy tím; web general dùng bản surface như app (doc 35 §8). */
.vk-rightnow-strip {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
}
.vk-rightnow-strip::-webkit-scrollbar {
  display: none;
}

.vk-rn-card {
  flex: 0 0 auto;
  width: 158px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-interactive);
  border-left: 3px solid var(--color-warning);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}
.vk-rn-card:active {
  transform: scale(0.98);
}
.vk-rn-card.is-critical {
  border-left-color: var(--color-error);
}

.vk-rn-card__label {
  font-size: var(--text-caption);
  font-weight: var(--font-bold);
  color: var(--color-text);
}
.vk-rn-card__sub {
  margin-top: 3px;
  font-size: 11px;
  line-height: var(--leading-normal);
  color: var(--color-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vk-rn-card__foot {
  margin-top: var(--space-sm);
}

/* ---------- 6. KEY BADGE — số dư "Khoá" (token --key-gold · VoletKeyBadge) ---------- */
/* Vàng = tín hiệu TIỀN TỆ, KHÔNG accent thương hiệu. Tint từ --key-gold qua color-mix
   (giữ token-pure thay vì hardcode rgba). Light: chữ darken cho tương phản; dark: chữ vàng sáng. */
.vk-key-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  line-height: 1;
  background: color-mix(in srgb, var(--key-gold) 14%, transparent);
  color: color-mix(in srgb, var(--key-gold) 58%, black);
}
.vk-key-badge__icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
  fill: currentColor;
}

/* ---------- 7. TIER BADGE — hạng thành viên (token --medal-* · VoletTierBadge) ---------- */
.vk-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 3px 9px;
  border-radius: var(--radius-chip);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  line-height: 1;
}
.vk-tier-badge__icon {
  width: var(--icon-xs);
  height: var(--icon-xs);
  fill: currentColor;
}

.vk-tier-badge--bronze {
  background: color-mix(in srgb, var(--medal-bronze) 16%, transparent);
  color: color-mix(in srgb, var(--medal-bronze) 74%, black);
}
.vk-tier-badge--silver {
  background: color-mix(in srgb, var(--medal-silver) 16%, transparent);
  color: color-mix(in srgb, var(--medal-silver) 60%, black);
}
.vk-tier-badge--gold {
  background: color-mix(in srgb, var(--medal-gold) 16%, transparent);
  color: color-mix(in srgb, var(--medal-gold) 60%, black);
}
.vk-tier-badge--diamond {
  background: color-mix(in srgb, var(--medal-diamond) 16%, transparent);
  color: color-mix(in srgb, var(--medal-diamond) 62%, black);
}

/* ---------- DARK: key/tier bỏ darken (chữ = token màu sáng, đủ tương phản trên tint tối) ---------- */
[data-theme="dark"] .vk-key-badge {
  background: color-mix(in srgb, var(--key-gold) 22%, transparent);
  color: var(--key-gold);
}
[data-theme="dark"] .vk-tier-badge--bronze {
  background: color-mix(in srgb, var(--medal-bronze) 24%, transparent);
  color: color-mix(in srgb, var(--medal-bronze) 72%, white);
}
[data-theme="dark"] .vk-tier-badge--silver {
  background: color-mix(in srgb, var(--medal-silver) 24%, transparent);
  color: color-mix(in srgb, var(--medal-silver) 78%, white);
}
[data-theme="dark"] .vk-tier-badge--gold {
  background: color-mix(in srgb, var(--medal-gold) 24%, transparent);
  color: color-mix(in srgb, var(--medal-gold) 76%, white);
}
[data-theme="dark"] .vk-tier-badge--diamond {
  background: color-mix(in srgb, var(--medal-diamond) 24%, transparent);
  color: color-mix(in srgb, var(--medal-diamond) 80%, white);
}

/* ---------- 8. BUTTON — CTA iOS-native (demo .btn/.btn-primary · VoletButton) ---------- */
/* CHỐT 2026-07 (demo .btn-primary thắng): primary fill GRADIENT 135deg + --shadow-float.
   ⚠️ Lệch app VoletButton (fill phẳng) CÓ CHỦ ĐÍCH — parity gộp về demo cho CTA web; app xem xét sau.
   padding 14×20, radius --radius-md (12), font 15/600, min-height 48, gap 8, tap scale(.97),
   disabled opacity .45. Accent qua token: consumer TÍM (--color-primary); business XANH tự đổi
   trong scope .ctx-business (design-tokens override --color-primary → --biz-500). Token-only.
   Biến thể: --secondary (iOS Tinted, nền tint), --ghost (iOS Plain, nền trong suốt cho link phụ),
   --sm (compact trong card/list); kết hợp được .vk-btn--sm.vk-btn--ghost / .vk-btn--sm.vk-btn--secondary. */
.vk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 20px;
  min-height: 48px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  /* primary (CHỐT 2026-07, demo .btn-primary): fill GRADIENT accent 135deg + bóng nổi + chữ on-accent.
     Điểm sáng nhất gradient = --color-primary ⇒ contrast on-primary giữ nguyên (light 7.1:1 / biz 5.2:1). */
  background: var(--gradient-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-float);
  transition: transform var(--duration-instant) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    opacity var(--duration-fast) var(--ease-out);
}

.vk-btn:active {
  transform: scale(0.97);
}

.vk-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* onPressed == null / loading → disabled (demo .btn:disabled { opacity: .45 }). */
.vk-btn:disabled,
.vk-btn.is-disabled,
.vk-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* secondary (iOS Gray): nền neutral surface-2 + chữ text-primary. Hành động phụ (14.08 QĐ-3). */
.vk-btn--secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  box-shadow: none; /* phẳng — chỉ primary có bóng nổi */
}

/* ghost (iOS Plain): nền trong suốt + chữ accent, không viền. Link phụ (Báo cáo/Chia sẻ/Xem chi tiết).
   Hover tint accent nhẹ; accent tự đổi business trong .ctx-business qua --color-primary. */
.vk-btn--ghost {
  background: transparent;
  color: var(--color-primary);
  box-shadow: none; /* phẳng — chỉ primary có bóng nổi */
}
.vk-btn--ghost:hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]) {
  background: var(--color-primary-50);
}
/* ghost destructive (Xoá / Báo cáo vi phạm): chữ error thay accent (14.08 QĐ-4). */
.vk-btn--ghost.vk-btn--danger {
  color: var(--color-error-text);
}
.vk-btn--ghost.vk-btn--danger:hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]) {
  background: var(--color-error-bg);
}

/* sm: cỡ compact cho CTA trong card/list — padding 8×12, min-height 36, font caption, gap nhỏ.
   Kết hợp được với --ghost / --secondary; giữ nguyên :active scale + :focus-visible từ .vk-btn. */
.vk-btn--sm {
  gap: var(--space-xs);
  padding: 8px 12px;
  min-height: 36px;
  font-size: var(--text-caption);
}

/* ---------- 9. GROUPED INSET LIST (demo §5.2/§5.6 · iOS grouped table) ---------- */
/* Thay đổi cấu trúc quan trọng nhất (§5.2): các hàng key-value gom vào 1 container bo góc
   thay vì mỗi item 1 card rời. Hairline ngăn row (trừ row cuối). Hỗ trợ leading icon + label +
   trailing (value/chevron) và biến thể --stack (label caption trên, value dưới) cho text dài.
   Token-only; dark tự kế thừa qua --color-surface/--color-border. */

/* Header nhóm — chữ hoa nhỏ tint muted, khoảng cách trên (demo section label). */
.vk-grouped-header {
  margin: var(--space-lg) 0 var(--space-xs);
  padding: 0 var(--space-md);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-2);
}

.vk-grouped-list {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.vk-grouped-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 48px;
  padding: 12px var(--space-md);
  border: none;
  border-bottom: 1px solid var(--color-border); /* hairline ngăn row */
  color: var(--color-text);
  text-decoration: none;
}
.vk-grouped-item:last-child {
  border-bottom: none;
}

/* Leading icon (SF-style glyph) — tint muted, không co. */
.vk-grouped-item__icon {
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-text-2);
  fill: currentColor;
}

/* Label — chiếm phần còn lại, cắt gọn nếu dài. */
.vk-grouped-item__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-body);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
}

/* Trailing value — phụ, canh phải, tint 2. */
.vk-grouped-item__value {
  flex-shrink: 0;
  max-width: 60%;
  font-size: var(--text-body);
  color: var(--color-text-2);
  text-align: right;
}

/* Chevron điều hướng — trang trí, tint tertiary (≥3:1 không bắt buộc vì có label kèm). */
.vk-grouped-item__chevron {
  flex-shrink: 0;
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--color-text-muted);
  fill: none;
  stroke: currentColor;
}

/* Row có thể tap (a/button) — reset control, tap/hover state + focus ring (§10 drill-down). */
a.vk-grouped-item,
button.vk-grouped-item {
  width: 100%;
  font: inherit;
  text-align: left;
  background: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
a.vk-grouped-item:hover,
button.vk-grouped-item:hover,
a.vk-grouped-item:active,
button.vk-grouped-item:active {
  background: var(--color-surface-2);
}
a.vk-grouped-item:focus-visible,
button.vk-grouped-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Biến thể --stack: label caption trên, value dưới (dùng cho text dài như địa chỉ/mô tả). */
.vk-grouped-item--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.vk-grouped-item--stack .vk-grouped-item__label {
  flex: none;
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  color: var(--color-text-2);
}
.vk-grouped-item--stack .vk-grouped-item__value {
  max-width: none;
  text-align: left;
  white-space: normal;
  color: var(--color-text);
}

/* ---------- 10. SEGMENTED CONTROL (demo §5.6 · iOS segmented, CSS-only) ---------- */
/* Track nền muted + segment chia đều; segment active nền surface + shadow-sm + chữ đậm.
   CSS-ONLY: radio input ẩn (giữ focus) + label kề (input:checked + label). KHÔNG phụ thuộc JS
   để hiển thị trạng thái chọn. Đặt input NGAY TRƯỚC label tương ứng (adjacency selector). */
.vk-segmented {
  position: relative; /* chứa input ẩn absolute bên trong */
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

/* Input ẩn về mặt hình ảnh nhưng vẫn nhận focus bàn phím (adjacency + focus-visible). */
.vk-segmented__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.vk-segmented__label {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 34px;
  padding: 6px 12px;
  border-radius: calc(var(--radius-md) - 2px);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  color: var(--color-text-2); /* inactive: tint muted */
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-fast) var(--ease-in-out),
    color var(--duration-fast) var(--ease-in-out),
    box-shadow var(--duration-fast) var(--ease-in-out);
}

/* Active: nền surface nổi trên track + bóng mềm + chữ text-primary đậm. */
.vk-segmented__input:checked + .vk-segmented__label {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-sm);
}

.vk-segmented__input:focus-visible + .vk-segmented__label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.vk-segmented__input:disabled + .vk-segmented__label {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Link-based segments (URL tab nav): mirror checked styling via .is-active. */
a.vk-segmented__label {
  text-decoration: none;
}
a.vk-segmented__label.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--font-semibold);
  box-shadow: var(--shadow-sm);
}

/* ---------- 11. CARD — content container (demo §5.6 content-card · doc 04 §1) ---------- */
/* Primitive nền: container bo 12 (radius-md, khớp rn-card/grouped-list), nền surface,
   viền hairline, shadow-sm mềm, padding chuẩn --space-md. KHÔNG hover-lift (iOS tap-scale
   chỉ ở biến thể --interactive). Token-only; dark tự kế thừa qua --color-surface/--color-border.
   Biến thể: --flush (bỏ padding, để sub-part header/body/footer tự quản) · --interactive
   (row/card có thể tap: cursor + tap scale + focus ring, §10 drill-down). */
.vk-card {
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  overflow: hidden;
}

/* --flush: bỏ padding — dùng khi bố cục qua header/body/footer hoặc chứa media tràn viền. */
.vk-card--flush {
  padding: 0;
}

/* --interactive: card/row bấm được (a/button/[role=button]) — tap scale + focus ring, KHÔNG hover-lift. */
.vk-card--interactive {
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
.vk-card--interactive:active {
  transform: scale(0.98);
}
.vk-card--interactive:hover {
  background: var(--color-surface-2);
}
.vk-card--interactive:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Sub-part: header (tiêu đề) — hairline dưới, dùng với .vk-card--flush. */
.vk-card__header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-h4);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.vk-card__body {
  padding: var(--space-md);
}

/* Body kề nhau — bỏ padding-top để không nhân đôi khoảng cách. */
.vk-card__body + .vk-card__body {
  padding-top: 0;
}

.vk-card__footer {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* ---------- 12. INPUT / FIELD (demo §5.9 · doc 04 §2) ---------- */
/* input/select/textarea bo radius-md (12), viền hairline, focus ring accent qua :focus-visible.
   Placeholder tint text-2 (AA — KHÔNG dùng text-muted). Error dùng --color-error-text +
   viền error. Token-only; accent tự đổi business trong .ctx-business qua --color-primary. */
.vk-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.vk-label {
  font-size: var(--text-body-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.vk-input,
.vk-select,
.vk-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  transition: border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.vk-textarea {
  min-height: 80px;
  resize: vertical;
}

/* Focus: ring accent (2px offset qua box-shadow tint primary-50) — :focus-visible cho input luôn khớp. */
.vk-input:focus-visible,
.vk-select:focus-visible,
.vk-textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}

/* Placeholder tint text-2 (đạt AA cho label mờ) — opacity nhẹ tránh nhầm dữ liệu đã nhập. */
.vk-input::placeholder,
.vk-textarea::placeholder {
  color: var(--color-text-2);
  opacity: 0.7;
}

.vk-input:disabled,
.vk-select:disabled,
.vk-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  color: var(--color-text-2);
}

/* Trạng thái lỗi: viền + ring error (kết hợp .vk-input.is-error hoặc aria-invalid). */
.vk-input.is-error,
.vk-select.is-error,
.vk-textarea.is-error,
.vk-input[aria-invalid="true"],
.vk-select[aria-invalid="true"],
.vk-textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}
.vk-input.is-error:focus-visible,
.vk-select.is-error:focus-visible,
.vk-textarea.is-error:focus-visible,
.vk-input[aria-invalid="true"]:focus-visible,
.vk-select[aria-invalid="true"]:focus-visible,
.vk-textarea[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px var(--color-error-bg);
}

/* Help text phụ (mô tả/hướng dẫn) — tint 2. */
.vk-field__help {
  font-size: var(--text-caption);
  color: var(--color-text-2);
}

/* Error text — dùng --color-error-text (AA trên nền surface). */
.vk-field__error {
  font-size: var(--text-caption);
  font-weight: var(--font-medium);
  color: var(--color-error-text);
}

/* ---------- 13. MODAL — center dialog (demo §5.5 alert/center · doc 04 §3) ---------- */
/* Cơ chế <dialog> NATIVE: template dùng showModal()/close() + [data-close-modal] (parity kit
   cũ .volet-modal, GIỮ nguyên JS). Overlay qua ::backdrop; panel bo radius-lg (16), surface,
   shadow-float, header/body/footer. Token-only; dark tự kế thừa. KHÔNG thêm JS lib. */
.vk-modal {
  position: fixed;
  inset: 0;
  border: none;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  background: transparent;
}

.vk-modal::backdrop {
  background: var(--color-overlay);
}

/* Lớp phủ trong dialog (bắt click ra ngoài để đóng qua [data-close-modal]). */
.vk-modal__backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

.vk-modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-float);
}

.vk-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

.vk-modal__title {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

/* Nút đóng — vùng chạm ≥44px (WCAG 2.5.5), tint 2, tap/hover state. */
.vk-modal__close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: -6px -10px -6px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-2);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.vk-modal__close:hover,
.vk-modal__close:active {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.vk-modal__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.vk-modal__body {
  flex: 1;
  padding: var(--space-lg);
  overflow-y: auto;
  color: var(--color-text);
}

.vk-modal__footer {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* ---------- 14. WARNING BUTTON (thay daisyUI .btn-warning) ---------- */
/* Giữ sắc cảnh báo cho hành động như "Ẩn bài" / "Xem tin chờ duyệt". Nền --color-warning đặc
   (ổn định qua theme — không đổi ở dark), chữ ink tối cố định #2a1c00 = 8.1:1 trên cam ⇒ AA cả
   light lẫn dark (không dùng --color-text vì đảo màu ở dark). Kết hợp được với .vk-btn--sm. */
.vk-btn--warning {
  background: var(--color-warning);
  color: #2a1c00;
  box-shadow: none;
}
.vk-btn--warning:hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]) {
  filter: brightness(0.95);
}

/* ---------- 15. LINK (thay daisyUI .link.link-primary) ---------- */
/* Link văn bản accent + gạch chân offset 2 (dùng trong bảng/danh sách). Accent tự đổi business
   trong .ctx-business qua --color-primary. Focus ring accent như input/btn. */
.vk-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-out);
}
.vk-link:hover {
  color: var(--color-primary-hover);
}
.vk-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 16. TABLE (thay daisyUI .table / .table-zebra) ---------- */
/* Bảng dữ liệu (admin lists, exchange lists). Header nền surface-2 + chữ text-2 caption; hàng ngăn
   hairline --color-border; hover tint primary-50; bo góc + cuộn ngang qua .vk-table-wrap (khi bảng
   đứng độc lập, không nằm sẵn trong .card). Token-only, AA (th text-2/surface-2 ≥4.5:1). */
.vk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}
.vk-table th {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-caption);
  font-weight: var(--font-semibold);
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.vk-table td {
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  word-wrap: break-word;
}
.vk-table tbody tr:last-child td {
  border-bottom: none;
}
.vk-table tbody tr:hover td {
  background: var(--color-primary-50);
}
.vk-table--zebra tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--color-surface-2) 55%, transparent);
}
.vk-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: auto;
}