/*!
 * Theme newnet-v2 — UTILITIES (sinh từ tokens.css)
 * Dùng cho bố cục nhanh khi dựng giao diện mới. Ưu tiên component (nn-*) khi có sẵn; utility chỉ để tinh chỉnh.
 * Quy ước: .nn-{thuộc tính}-{giá trị token}. Ví dụ: .nn-mt-6 = margin-top: var(--nn-space-6).
 */

/* Layout primitives */
.nn-stack { display: flex; flex-direction: column; gap: var(--nn-stack-gap, var(--nn-space-4)); }
.nn-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nn-cluster-gap, var(--nn-space-3)); }
.nn-flex { display: flex; } .nn-inline-flex { display: inline-flex; } .nn-block { display: block; } .nn-hidden { display: none !important; }
.nn-items-start { align-items: flex-start; } .nn-items-center { align-items: center; } .nn-items-end { align-items: flex-end; }
.nn-justify-start { justify-content: flex-start; } .nn-justify-center { justify-content: center; } .nn-justify-between { justify-content: space-between; } .nn-justify-end { justify-content: flex-end; }
.nn-flex-1 { flex: 1 1 0; min-width: 0; } .nn-wrap { flex-wrap: wrap; } .nn-w-full { width: 100%; } .nn-mx-auto { margin-inline: auto; }
.nn-relative { position: relative; } .nn-overflow-hidden { overflow: hidden; }

/* Spacing: margin, padding, gap */
.nn-m-0 { margin: var(--nn-space-0); } .nn-mt-0 { margin-top: var(--nn-space-0); } .nn-mb-0 { margin-bottom: var(--nn-space-0); } .nn-my-0 { margin-block: var(--nn-space-0); } .nn-mx-0 { margin-inline: var(--nn-space-0); }
.nn-m-1 { margin: var(--nn-space-1); } .nn-mt-1 { margin-top: var(--nn-space-1); } .nn-mb-1 { margin-bottom: var(--nn-space-1); } .nn-my-1 { margin-block: var(--nn-space-1); } .nn-mx-1 { margin-inline: var(--nn-space-1); }
.nn-m-2 { margin: var(--nn-space-2); } .nn-mt-2 { margin-top: var(--nn-space-2); } .nn-mb-2 { margin-bottom: var(--nn-space-2); } .nn-my-2 { margin-block: var(--nn-space-2); } .nn-mx-2 { margin-inline: var(--nn-space-2); }
.nn-m-3 { margin: var(--nn-space-3); } .nn-mt-3 { margin-top: var(--nn-space-3); } .nn-mb-3 { margin-bottom: var(--nn-space-3); } .nn-my-3 { margin-block: var(--nn-space-3); } .nn-mx-3 { margin-inline: var(--nn-space-3); }
.nn-m-4 { margin: var(--nn-space-4); } .nn-mt-4 { margin-top: var(--nn-space-4); } .nn-mb-4 { margin-bottom: var(--nn-space-4); } .nn-my-4 { margin-block: var(--nn-space-4); } .nn-mx-4 { margin-inline: var(--nn-space-4); }
.nn-m-5 { margin: var(--nn-space-5); } .nn-mt-5 { margin-top: var(--nn-space-5); } .nn-mb-5 { margin-bottom: var(--nn-space-5); } .nn-my-5 { margin-block: var(--nn-space-5); } .nn-mx-5 { margin-inline: var(--nn-space-5); }
.nn-m-6 { margin: var(--nn-space-6); } .nn-mt-6 { margin-top: var(--nn-space-6); } .nn-mb-6 { margin-bottom: var(--nn-space-6); } .nn-my-6 { margin-block: var(--nn-space-6); } .nn-mx-6 { margin-inline: var(--nn-space-6); }
.nn-m-8 { margin: var(--nn-space-8); } .nn-mt-8 { margin-top: var(--nn-space-8); } .nn-mb-8 { margin-bottom: var(--nn-space-8); } .nn-my-8 { margin-block: var(--nn-space-8); } .nn-mx-8 { margin-inline: var(--nn-space-8); }
.nn-m-10 { margin: var(--nn-space-10); } .nn-mt-10 { margin-top: var(--nn-space-10); } .nn-mb-10 { margin-bottom: var(--nn-space-10); } .nn-my-10 { margin-block: var(--nn-space-10); } .nn-mx-10 { margin-inline: var(--nn-space-10); }
.nn-m-12 { margin: var(--nn-space-12); } .nn-mt-12 { margin-top: var(--nn-space-12); } .nn-mb-12 { margin-bottom: var(--nn-space-12); } .nn-my-12 { margin-block: var(--nn-space-12); } .nn-mx-12 { margin-inline: var(--nn-space-12); }
.nn-m-16 { margin: var(--nn-space-16); } .nn-mt-16 { margin-top: var(--nn-space-16); } .nn-mb-16 { margin-bottom: var(--nn-space-16); } .nn-my-16 { margin-block: var(--nn-space-16); } .nn-mx-16 { margin-inline: var(--nn-space-16); }
.nn-m-20 { margin: var(--nn-space-20); } .nn-mt-20 { margin-top: var(--nn-space-20); } .nn-mb-20 { margin-bottom: var(--nn-space-20); } .nn-my-20 { margin-block: var(--nn-space-20); } .nn-mx-20 { margin-inline: var(--nn-space-20); }
.nn-m-24 { margin: var(--nn-space-24); } .nn-mt-24 { margin-top: var(--nn-space-24); } .nn-mb-24 { margin-bottom: var(--nn-space-24); } .nn-my-24 { margin-block: var(--nn-space-24); } .nn-mx-24 { margin-inline: var(--nn-space-24); }
.nn-p-0 { padding: var(--nn-space-0); } .nn-pt-0 { padding-top: var(--nn-space-0); } .nn-pb-0 { padding-bottom: var(--nn-space-0); } .nn-py-0 { padding-block: var(--nn-space-0); } .nn-px-0 { padding-inline: var(--nn-space-0); }
.nn-p-1 { padding: var(--nn-space-1); } .nn-pt-1 { padding-top: var(--nn-space-1); } .nn-pb-1 { padding-bottom: var(--nn-space-1); } .nn-py-1 { padding-block: var(--nn-space-1); } .nn-px-1 { padding-inline: var(--nn-space-1); }
.nn-p-2 { padding: var(--nn-space-2); } .nn-pt-2 { padding-top: var(--nn-space-2); } .nn-pb-2 { padding-bottom: var(--nn-space-2); } .nn-py-2 { padding-block: var(--nn-space-2); } .nn-px-2 { padding-inline: var(--nn-space-2); }
.nn-p-3 { padding: var(--nn-space-3); } .nn-pt-3 { padding-top: var(--nn-space-3); } .nn-pb-3 { padding-bottom: var(--nn-space-3); } .nn-py-3 { padding-block: var(--nn-space-3); } .nn-px-3 { padding-inline: var(--nn-space-3); }
.nn-p-4 { padding: var(--nn-space-4); } .nn-pt-4 { padding-top: var(--nn-space-4); } .nn-pb-4 { padding-bottom: var(--nn-space-4); } .nn-py-4 { padding-block: var(--nn-space-4); } .nn-px-4 { padding-inline: var(--nn-space-4); }
.nn-p-5 { padding: var(--nn-space-5); } .nn-pt-5 { padding-top: var(--nn-space-5); } .nn-pb-5 { padding-bottom: var(--nn-space-5); } .nn-py-5 { padding-block: var(--nn-space-5); } .nn-px-5 { padding-inline: var(--nn-space-5); }
.nn-p-6 { padding: var(--nn-space-6); } .nn-pt-6 { padding-top: var(--nn-space-6); } .nn-pb-6 { padding-bottom: var(--nn-space-6); } .nn-py-6 { padding-block: var(--nn-space-6); } .nn-px-6 { padding-inline: var(--nn-space-6); }
.nn-p-8 { padding: var(--nn-space-8); } .nn-pt-8 { padding-top: var(--nn-space-8); } .nn-pb-8 { padding-bottom: var(--nn-space-8); } .nn-py-8 { padding-block: var(--nn-space-8); } .nn-px-8 { padding-inline: var(--nn-space-8); }
.nn-p-10 { padding: var(--nn-space-10); } .nn-pt-10 { padding-top: var(--nn-space-10); } .nn-pb-10 { padding-bottom: var(--nn-space-10); } .nn-py-10 { padding-block: var(--nn-space-10); } .nn-px-10 { padding-inline: var(--nn-space-10); }
.nn-p-12 { padding: var(--nn-space-12); } .nn-pt-12 { padding-top: var(--nn-space-12); } .nn-pb-12 { padding-bottom: var(--nn-space-12); } .nn-py-12 { padding-block: var(--nn-space-12); } .nn-px-12 { padding-inline: var(--nn-space-12); }
.nn-p-16 { padding: var(--nn-space-16); } .nn-pt-16 { padding-top: var(--nn-space-16); } .nn-pb-16 { padding-bottom: var(--nn-space-16); } .nn-py-16 { padding-block: var(--nn-space-16); } .nn-px-16 { padding-inline: var(--nn-space-16); }
.nn-p-20 { padding: var(--nn-space-20); } .nn-pt-20 { padding-top: var(--nn-space-20); } .nn-pb-20 { padding-bottom: var(--nn-space-20); } .nn-py-20 { padding-block: var(--nn-space-20); } .nn-px-20 { padding-inline: var(--nn-space-20); }
.nn-p-24 { padding: var(--nn-space-24); } .nn-pt-24 { padding-top: var(--nn-space-24); } .nn-pb-24 { padding-bottom: var(--nn-space-24); } .nn-py-24 { padding-block: var(--nn-space-24); } .nn-px-24 { padding-inline: var(--nn-space-24); }
.nn-gap-0 { gap: var(--nn-space-0); --nn-stack-gap: var(--nn-space-0); --nn-cluster-gap: var(--nn-space-0); }
.nn-gap-1 { gap: var(--nn-space-1); --nn-stack-gap: var(--nn-space-1); --nn-cluster-gap: var(--nn-space-1); }
.nn-gap-2 { gap: var(--nn-space-2); --nn-stack-gap: var(--nn-space-2); --nn-cluster-gap: var(--nn-space-2); }
.nn-gap-3 { gap: var(--nn-space-3); --nn-stack-gap: var(--nn-space-3); --nn-cluster-gap: var(--nn-space-3); }
.nn-gap-4 { gap: var(--nn-space-4); --nn-stack-gap: var(--nn-space-4); --nn-cluster-gap: var(--nn-space-4); }
.nn-gap-5 { gap: var(--nn-space-5); --nn-stack-gap: var(--nn-space-5); --nn-cluster-gap: var(--nn-space-5); }
.nn-gap-6 { gap: var(--nn-space-6); --nn-stack-gap: var(--nn-space-6); --nn-cluster-gap: var(--nn-space-6); }
.nn-gap-8 { gap: var(--nn-space-8); --nn-stack-gap: var(--nn-space-8); --nn-cluster-gap: var(--nn-space-8); }
.nn-gap-10 { gap: var(--nn-space-10); --nn-stack-gap: var(--nn-space-10); --nn-cluster-gap: var(--nn-space-10); }
.nn-gap-12 { gap: var(--nn-space-12); --nn-stack-gap: var(--nn-space-12); --nn-cluster-gap: var(--nn-space-12); }
.nn-gap-16 { gap: var(--nn-space-16); --nn-stack-gap: var(--nn-space-16); --nn-cluster-gap: var(--nn-space-16); }
.nn-gap-20 { gap: var(--nn-space-20); --nn-stack-gap: var(--nn-space-20); --nn-cluster-gap: var(--nn-space-20); }
.nn-gap-24 { gap: var(--nn-space-24); --nn-stack-gap: var(--nn-space-24); --nn-cluster-gap: var(--nn-space-24); }

/* Typography */
.nn-text-3xs { font-size: var(--nn-text-3xs); }
.nn-text-2xs { font-size: var(--nn-text-2xs); }
.nn-text-xs { font-size: var(--nn-text-xs); }
.nn-text-sm { font-size: var(--nn-text-sm); }
.nn-text-md { font-size: var(--nn-text-md); }
.nn-text-base { font-size: var(--nn-text-base); }
.nn-text-lg { font-size: var(--nn-text-lg); }
.nn-text-xl { font-size: var(--nn-text-xl); }
.nn-text-2xl { font-size: var(--nn-text-2xl); }
.nn-text-3xl { font-size: var(--nn-text-3xl); }
.nn-text-4xl { font-size: var(--nn-text-4xl); }
.nn-text-5xl { font-size: var(--nn-text-5xl); }
.nn-text-6xl { font-size: var(--nn-text-6xl); }
.nn-fs-h1 { font-size: var(--nn-h1); }
.nn-fs-h2 { font-size: var(--nn-h2); }
.nn-fs-h3 { font-size: var(--nn-h3); }
.nn-fs-h4 { font-size: var(--nn-h4); }
.nn-fs-h5 { font-size: var(--nn-h5); }
.nn-fs-h6 { font-size: var(--nn-h6); }
.nn-fs-display { font-size: var(--nn-display); }
.nn-fs-title { font-size: var(--nn-title); }
.nn-fs-lead { font-size: var(--nn-lead); }
.nn-fw-regular { font-weight: var(--nn-weight-regular); }
.nn-fw-medium { font-weight: var(--nn-weight-medium); }
.nn-fw-semibold { font-weight: var(--nn-weight-semibold); }
.nn-fw-bold { font-weight: var(--nn-weight-bold); }
.nn-fw-extrabold { font-weight: var(--nn-weight-extrabold); }
.nn-leading-none { line-height: var(--nn-leading-none); }
.nn-leading-tight { line-height: var(--nn-leading-tight); }
.nn-leading-snug { line-height: var(--nn-leading-snug); }
.nn-leading-normal { line-height: var(--nn-leading-normal); }
.nn-leading-relaxed { line-height: var(--nn-leading-relaxed); }
.nn-text-left { text-align: left; } .nn-text-center { text-align: center; } .nn-text-right { text-align: right; }
.nn-uppercase { text-transform: uppercase; letter-spacing: var(--nn-tracking-wide); } .nn-nowrap { white-space: nowrap; } .nn-tabular { font-variant-numeric: tabular-nums; }
.nn-balance { text-wrap: balance; } .nn-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Màu chữ & nền (theo vai trò, không theo mã màu) */
.nn-c-ink { color: var(--nn-ink); }
.nn-c-text { color: var(--nn-text); }
.nn-c-muted { color: var(--nn-muted); }
.nn-c-subtle { color: var(--nn-subtle); }
.nn-c-primary { color: var(--nn-primary); }
.nn-c-accent { color: var(--nn-accent); }
.nn-c-success { color: var(--nn-success); }
.nn-c-danger { color: var(--nn-danger); }
.nn-c-warning { color: var(--nn-warning-700); }
.nn-c-white { color: #fff; }
.nn-bg-white { background: #fff; }
.nn-bg-surface { background: var(--nn-surface); }
.nn-bg-surface-2 { background: var(--nn-surface-2); }
.nn-bg-brand { background: var(--nn-bg-brand); }
.nn-bg-brand-soft { background: var(--nn-primary-soft); }
.nn-bg-accent-soft { background: var(--nn-accent-100); }
.nn-bg-ink { background: var(--nn-ink); }
.nn-bg-brand, .nn-bg-ink { color: var(--nn-on-brand); }
.nn-gradient-text { background: var(--nn-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Radius, border, shadow */
.nn-rounded-2xs { border-radius: var(--nn-radius-2xs); }
.nn-rounded-xs { border-radius: var(--nn-radius-xs); }
.nn-rounded-sm { border-radius: var(--nn-radius-sm); }
.nn-rounded-md { border-radius: var(--nn-radius-md); }
.nn-rounded-lg { border-radius: var(--nn-radius-lg); }
.nn-rounded-xl { border-radius: var(--nn-radius-xl); }
.nn-rounded-2xl { border-radius: var(--nn-radius-2xl); }
.nn-rounded-3xl { border-radius: var(--nn-radius-3xl); }
.nn-rounded-pill { border-radius: var(--nn-radius-pill); }
.nn-rounded-round { border-radius: var(--nn-radius-round); }
.nn-rounded { border-radius: var(--nn-radius); }
.nn-border { border: 1px solid var(--nn-border); } .nn-border-strong { border: 1px solid var(--nn-border-strong); }
.nn-shadow-xs { box-shadow: var(--nn-shadow-xs); }
.nn-shadow-sm { box-shadow: var(--nn-shadow-sm); }
.nn-shadow-lg { box-shadow: var(--nn-shadow-lg); }
.nn-shadow-xl { box-shadow: var(--nn-shadow-xl); }
.nn-shadow-brand { box-shadow: var(--nn-shadow-brand); }
.nn-shadow { box-shadow: var(--nn-shadow); } .nn-ring { box-shadow: var(--nn-ring); }
.nn-glass { background: var(--nn-glass); border: 1px solid var(--nn-glass-border); backdrop-filter: blur(var(--nn-blur)); -webkit-backdrop-filter: blur(var(--nn-blur)); }

/* Hiển thị theo breakpoint (md = 768px, lg = 992px) */
@media (max-width: 767.98px) { .nn-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .nn-hide-tablet-up { display: none !important; } }
@media (max-width: 991.98px) { .nn-hide-below-lg { display: none !important; } }
@media (min-width: 992px) { .nn-hide-desktop { display: none !important; } }