/* ============================================================
   Design System — Design Tokens
   ============================================================

   Đây là nền tảng của toàn bộ design system.
   Mọi component ĐỀU PHẢI dùng các biến này thay vì giá trị cứng.

   Khi cần thay đổi visual toàn cục (màu brand, bo góc, kích thước...),
   chỉ cần sửa tại đây — mọi component tự động cập nhật theo.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

@layer base {
  /* Normalize CSS Plugin */
  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

  /* Document
   ========================================================================== */

  /**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

  html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
  }

  /* Sections
   ========================================================================== */

  /**
 * Remove the margin in all browsers.
 */

  body {
    margin: 0;
  }

  /**
 * Render the `main` element consistently in IE.
 */

  main {
    display: block;
  }

  /**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }

  /* Grouping content
   ========================================================================== */

  /**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

  hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
  }

  /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

  pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
  }

  /* Text-level semantics
   ========================================================================== */

  /**
 * Remove the gray background on active links in IE 10.
 */

  a {
    background-color: transparent;
  }

  /**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

  abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
  }

  /**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

  b,
  strong {
    font-weight: bolder;
  }

  /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

  code,
  kbd,
  samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
  }

  /**
 * Add the correct font size in all browsers.
 */

  small {
    font-size: 80%;
  }

  /**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /* Embedded content
   ========================================================================== */

  /**
 * Remove the border on images inside links in IE 10.
 */

  img {
    border-style: none;
  }

  /* Forms
   ========================================================================== */

  /**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
  }

  /**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

  button,
  input {
    /* 1 */
    overflow: visible;
  }

  /**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

  button,
  select {
    /* 1 */
    text-transform: none;
  }

  /**
 * Correct the inability to style clickable types in iOS and Safari.
 */

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }

  /**
 * Remove the inner border and padding in Firefox.
 */

  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  /**
 * Restore the focus styles unset by the previous rule.
 */

  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  /**
 * Correct the padding in Firefox.
 */

  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }

  /**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

  legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
  }

  /**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

  progress {
    vertical-align: baseline;
  }

  /**
 * Remove the default vertical scrollbar in IE 10+.
 */

  textarea {
    overflow: auto;
  }

  /**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

  [type="checkbox"],
  [type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
  }

  /**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  /**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

  [type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
  }

  /**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
  }

  /* Interactive
   ========================================================================== */

  /*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

  details {
    display: block;
  }

  /*
 * Add the correct display in all browsers.
 */

  summary {
    display: list-item;
  }

  /* Misc
   ========================================================================== */

  /**
 * Add the correct display in IE 10+.
 */

  template {
    display: none;
  }

  /**
 * Add the correct display in IE 10.
 */

  [hidden] {
    display: none !important;
  }

  /* My own */
  :root {
    --color-red: #dc2626;
    --color-orange: #ff6900;
    --color-yellow: #ffc107;
    --color-green: #059669;
    --color-blue: #2563eb;
    --color-indigo: #4f46e5;
    --color-violet: #7c3aed;
    --color-black: #000000;
    --color-gray: #64748b;
    --color-white: #ffffff;

    /* ── Alias ngữ nghĩa ──────────────────────────────────────
       Ánh xạ màu thô sang vai trò ngữ nghĩa.
       Để đổi toàn bộ theme primary từ blue sang indigo,
       chỉ cần sửa: --color-primary: var(--color-indigo); */
    --color-primary: var(--color-blue);
    --color-secondary: var(--color-gray);
    --color-danger: var(--color-red);
    --color-warning: var(--color-orange);
    --color-success: var(--color-green);
    --color-dark: var(--color-black);
    --color-light: var(--color-white);

    --color-visited: var(--color-indigo); /*Su dung cho link visited*/

    /* ── Contrast text colors for semantic backgrounds ────────────────────────
       Cố định — KHÔNG thay đổi theo theme sáng/tối.
       Dùng thay cho --color-light/dark khi text nằm trên nền semantic màu
       để đảm bảo độ tương phản luôn đúng ở cả hai theme. */
    --color-primary-contrast: var(--color-white);
    --color-secondary-contrast: var(--color-white);
    --color-danger-contrast: var(--color-white);
    --color-warning-contrast: var(--color-white);
    --color-success-contrast: var(--color-white);

    /* ── Component surface tokens ─────────────────────────────
       Dành riêng cho background của component UI (input, card, toolbar...).
       Tách biệt khỏi layer scale để có thể điều chỉnh độc lập.
       component-01 = surface chính (input bg, panel, dropdown).
       component-02 = fill phụ trong component (badge subtle, avatar, chip). */
    --color-component-01: color-mix(
      in srgb,
      var(--color-dark) 2%,
      var(--color-light)
    );
    --color-component-02: color-mix(
      in srgb,
      var(--color-dark) 5%,
      var(--color-light)
    );

    /* ── Nền trang (layer scale) ──────────────────────────────
       Dùng cho: demo context backgrounds, border/divider, hover overlay.
       KHÔNG dùng cho background của component — dùng --color-component-* thay thế.
       background = nền trang (8%) — sẫm nhất trong nhóm neutral nhạt.
       layer-01   = (2%) — demo layer-01 context.
       layer-02   = (6%) — border nhẹ, fill demo layer-02.
       layer-03   = (12%) — divider mạnh, dot indicator, demo layer-03.
       layer-04   = (22%) — strong accent fill, demo layer-04.
       Dùng --color-hover-overlay / --color-active-overlay cho hover trên nền cố định. */
    --color-layer-01: color-mix(
      in srgb,
      var(--color-dark) 2%,
      var(--color-light)
    );
    --color-layer-02: color-mix(
      in srgb,
      var(--color-dark) 6%,
      var(--color-light)
    );
    --color-layer-03: color-mix(
      in srgb,
      var(--color-dark) 12%,
      var(--color-light)
    );
    --color-layer-04: color-mix(
      in srgb,
      var(--color-dark) 22%,
      var(--color-light)
    );

    /* ── Hover / Active overlays ──────────────────────────────
       Dùng cho các item có background: transparent (nav link, dropdown item,
       toolbar button, accordion header...).
       Vì dùng transparent làm base thay vì màu cố định, overlay luôn tối hơn
       nền hiện tại — hoạt động đúng trên mọi màu nền (body, layer-01..04). */
    --color-hover-overlay: color-mix(
      in srgb,
      var(--color-dark) 2%,
      transparent
    );
    --color-active-overlay: color-mix(
      in srgb,
      var(--color-dark) 4%,
      transparent
    );

    /* ── Đơn vị nền tảng ──────────────────────────────────────
       Toàn bộ spacing, sizing, radius đều nhân bội từ unit-base (4px).
       Đây là "nguồn sự thật duy nhất" cho kích thước — giúp mọi khoảng
       cách trong UI luôn là bội số của 4px, tạo ra nhịp thị giác đồng đều.

       Công thức:
         --unit-base  = 4px  (nền tảng)
         --size-base  = 2px  = unit-base / 2   (bước nhảy font scale)
         --radius-base= 8px  = unit-base * 2   (bo góc tiêu chuẩn)
         --space-base = 4px  = unit-base * 1   (bước nhảy spacing) */
    --unit-base: 0.25rem;
    --size-base: calc(var(--unit-base) / 2);
    /*Kết quả là 2px*/
    --radius-base: calc(var(--unit-base) * 2);
    /*Kết quả là 8px*/
    --space-base: var(--unit-base);
    /*Kết quả là 4px*/

    /* ── Font scale ───────────────────────────────────────────
       Dựa trên --size-base (2px), mỗi bước tăng 2px.
       Component dùng theo vai trò:
         xs   = label, caption, badge, code inline
         sm   = body component (table cell, dropdown item, input, navbar link)
         base = body trang, notification, tiêu đề nhỏ
         lg   = brand name, tiêu đề section nổi bật

       Việc dùng token thay vì giá trị cứng đảm bảo khi cần
       scale toàn bộ chữ chỉ cần sửa --size-base. */
    --font-size-xs: calc(var(--size-base) * 6);
    /* 0.75rem  / 12px */
    --font-size-sm: calc(var(--size-base) * 7);
    /* 0.875rem / 14px */
    --font-size-base: calc(var(--size-base) * 8);
    /* 1rem     / 16px */
    --font-size-lg: calc(var(--size-base) * 9);
    /* 1.125rem / 18px */

    --font-size-xl: calc(var(--size-base) * 10);
    /* 1.25rem / 20px */

    /* ── Font family ───────────────────────────────────────────
       Sans mặc định: IBM Plex Sans (tải qua @import đầu file). */
    --font-family-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

    /* ── Chiều cao component tương tác ───────────────────────
       Dựa trên --space-base (4px).
       Button, input, pagination item, navbar toggler ĐỀU PHẢI dùng cùng
       scale này để khi đặt cạnh nhau vẫn thẳng hàng tự nhiên.

       sm   = compact UI, toolbar thứ cấp
       base = kích thước tiêu chuẩn (mặc định)
       lg   = form nổi bật, CTA chính

       Lý do không dùng px cứng: khi người dùng thay đổi font-size
       mặc định của trình duyệt, các chiều cao dựa trên rem tự co giãn theo. */
    --height-sm: calc(var(--space-base) * 8);
    /* 2rem    / 32px */
    --height-base: calc(var(--space-base) * 10);
    /* 2.5rem  / 40px */
    --height-lg: calc(var(--space-base) * 12);
    /* 3rem    / 48px */

    /* ── Transition ───────────────────────────────────────────
       Dùng thống nhất cho hover/focus state trên toàn hệ thống.
       0.15s đủ nhanh để không làm chậm UX nhưng đủ chậm để người dùng
       nhận ra phản hồi trực quan. Compound transition (nhiều property)
       dùng cùng duration này để mọi hiệu ứng kết thúc đồng thời. */
    --transition-base: 0.15s ease;

    /* ── Z-index layers ───────────────────────────────────────
       Định nghĩa thứ tự xếp chồng của các overlay component.
       Dùng token thay vì giá trị cứng để tránh z-index war.

       Thứ tự: dropdown → sticky → overlay/drawer → modal → toast
       Khi cần đặt dropdown bên trong modal, dùng stacking context
       riêng (position + z-index:1 trên modal content) thay vì tăng
       giá trị dropdown lên vượt modal. */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;

    /* ── Màu trang ────────────────────────────────────────────*/
    /* Màu nền theo giao diện (sáng là đen, tối là trắng) pha thêm 8% màu nền trái màu, chẳng hạn đang giao diện sáng thì màu nền là trắng pha 8% đen, ngược lại với giao diện tối */
    --color-background: color-mix(
      in srgb,
      var(--color-dark) 8%,
      var(--color-light)
    );
    /* Màu chữ giao diện (sáng là đen, tối là trắng) pha thêm 20% màu chữ trái màu, chẳng hạn đang giao diện sáng thì màu chữ là đen pha 20% trắng, ngược lại với giao diện tối */
    --color-foreground: color-mix(
      in srgb,
      var(--color-light) 20%,
      var(--color-dark)
    );
  }

  /* RESET */
  *,
  ::before,
  ::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-foreground);
    background: var(--color-background);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: var(--font-size-sm);
    font-weight: 500;
  }

  a {
    text-decoration: unset;
  }

  a:-webkit-any-link {
    color: unset;
  }
}

/* Tôn trọng người dùng đã tắt animation (motion sickness, thiết bị low-power).
   Đặt NGOÀI @layer base để tránh cascade-layer priority inversion với !important —
   khi nằm trong @layer base thì !important của nó sẽ override cả unlayered styles,
   kể cả spinner. Đặt unlayered giúp specificity bình thường hoạt động đúng.

   Spinner / loading indicator là ngoại lệ: dùng pulse thay vì frozen,
   vì một spinner đứng im không truyền tải được trạng thái đang tải. */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Spinner exception — class selector (0-1-0) thắng universal (0-0-0) */
  .nano-spinner,
  .nano-button--loading::after {
    animation: nano-spinner-pulse 1s ease-in-out infinite !important;
  }
}

@keyframes nano-spinner-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

/* ── Bottom-sheet backdrop (mobile) ──
   Shared overlay for floating components displayed as bottom sheets
   on narrow viewports. Sits at --z-overlay so the bottom-sheet panel
   (z-overlay + 1) renders above it. */
.nano-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: color-mix(in srgb, var(--color-dark) 40%, transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.nano-backdrop--visible {
  opacity: 1;
}

@layer theme {
  @media (prefers-color-scheme: light) {
    html:not([data-nano-theme]) {
      /* Giữ nguyên màu cho chế độ sáng tự động, không để trống đề phòng trường hợp giao diện ban đầu không phải là sáng  */
      --color-dark: var(--color-black);
      --color-light: var(--color-white);
    }
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-nano-theme]) {
      /* Đảo ngược màu cho chế độ tối tự động, không để trống đề phòng trường hợp giao diện ban đầu không phải là tối*/
      --color-dark: var(--color-white);
      --color-light: var(--color-black);

      --color-component-01: color-mix(
        in srgb,
        var(--color-dark) 14%,
        var(--color-light)
      );
      --color-component-02: color-mix(
        in srgb,
        var(--color-dark) 22%,
        var(--color-light)
      );
      --color-layer-01: color-mix(
        in srgb,
        var(--color-dark) 14%,
        var(--color-light)
      );
      --color-layer-02: color-mix(
        in srgb,
        var(--color-dark) 24%,
        var(--color-light)
      );
    }
  }

  html[data-nano-theme="light"] {
    /* Giữ nguyên màu cho chế độ sáng thủ công, không để trống đề phòng trường hợp giao diện ban đầu không phải là sáng */
    --color-dark: var(--color-black);
    --color-light: var(--color-white);
  }

  html[data-nano-theme="dark"] {
    /* Đảo ngược màu cho chế độ tối thủ công, không để trống đề phòng trường hợp giao diện ban đầu không phải là tối */
    --color-dark: var(--color-white);
    --color-light: var(--color-black);

    --color-component-01: color-mix(
      in srgb,
      var(--color-dark) 14%,
      var(--color-light)
    );
    --color-component-02: color-mix(
      in srgb,
      var(--color-dark) 22%,
      var(--color-light)
    );
    --color-layer-01: color-mix(
      in srgb,
      var(--color-dark) 14%,
      var(--color-light)
    );
    --color-layer-02: color-mix(
      in srgb,
      var(--color-dark) 24%,
      var(--color-light)
    );
  }
}


@layer components-accordion {
  /* Header dùng chữ đậm để nổi bật, body dùng chữ thường để phân biệt thứ bậc nội dung. */

  .nano-accordion__item {
    border-bottom: 1px solid var(--color-layer-02);
    background: var(--color-component-01);
    color: var(--color-foreground);
  }

  .nano-accordion__item:first-child {
    border-top: 1px solid var(--color-layer-02);
  }

  .nano-accordion__header {
    color: var(--color-foreground);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-weight: 600;
    background: transparent;
    border: none;
    text-align: left;
    transition: background-color var(--transition-base),
      color var(--transition-base);
    user-select: none;
  }

  /* Chevron icon dựng bằng CSS — không cần icon library.
   Dùng border-right + border-bottom rotate để tạo mũi tên.
   Khi mở, rotate thêm 180° bằng cách đổi góc. */
  .nano-accordion__header::before {
    content: "";
    flex-shrink: 0;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform var(--transition-base);
  }

  .nano-accordion__item.nano-accordion__item--open
    .nano-accordion__header::before {
    transform: rotate(-135deg) translateY(1px);
  }

  .nano-accordion__header:hover {
    background: var(--color-hover-overlay);
  }

  .nano-accordion__header:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }

  .nano-accordion__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 1rem;
    transition: max-height var(--transition-base),
      opacity var(--transition-base), padding var(--transition-base);
    line-height: 1.55;
  }

  .nano-accordion__item.nano-accordion__item--open .nano-accordion__body {
    max-height: 1500px;
    opacity: 1;
    padding: 1rem;
  }

  .nano-accordion__item.nano-accordion__item--open .nano-accordion__header {
    border-bottom: 1px solid var(--color-layer-02);
  }
}


/* ---------- Alert ----------
   Inline alert banner cho feedback trạng thái trong luồng trang.

   Khác với notification/toast (fixed position, tự đóng),
   alert là static — thường đặt đầu form, section cần chú ý, hoặc sau action.

   Layout: icon slot + text column + optional close button.
   Icon và close là optional — body tự chiếm hết không gian còn lại.

   Màu dùng subtle tint (10% semantic color) thay vì solid —
   đủ nhận biết nhưng không cạnh tranh với button CTA trên cùng trang.
   Text dùng 80% dark mix để readable trên nền nhạt, đồng thời tinted. */

.nano-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-base);
    border: 1px solid var(--color-layer-03);
    background: var(--color-component-02);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-foreground);
}

.nano-alert__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem; /* optical alignment với first line of text */
}

.nano-alert__body {
    flex: 1;
    min-width: 0;
}

.nano-alert__title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.nano-alert__message {
    opacity: 0.85;
}

.nano-alert__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius-base) / 2);
    cursor: pointer;
    color: currentColor;
    opacity: 0.6;
    padding: 0;
    margin-top: -0.125rem; /* optical alignment */
    transition: opacity var(--transition-base), background-color var(--transition-base);

    &:hover {
        opacity: 1;
        background: color-mix(in srgb, currentColor 12%, transparent);
    }

    &:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 1px;
        opacity: 1;
    }
}

/* ── Color variants ──
   Mỗi variant dùng cùng công thức:
     background: 10% semantic color — nhận biết được, không lóa mắt
     border:     25% semantic color — đủ phân biệt với background
     color:      80% semantic color mix dark — readable, tinted đúng tone */

.nano-alert--info {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-light));
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-light));
    color: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark));
}

.nano-alert--success {
    background: color-mix(in srgb, var(--color-success) 10%, var(--color-light));
    border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-light));
    color: color-mix(in srgb, var(--color-success) 80%, var(--color-dark));
}

.nano-alert--warning {
    background: color-mix(in srgb, var(--color-warning) 10%, var(--color-light));
    border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-light));
    color: color-mix(in srgb, var(--color-warning) 80%, var(--color-dark));
}

.nano-alert--danger {
    background: color-mix(in srgb, var(--color-danger) 10%, var(--color-light));
    border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-light));
    color: color-mix(in srgb, var(--color-danger) 80%, var(--color-dark));
}


/* ---------- Avatar ---------- */

.nano-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-component-02);
    color: var(--color-foreground);
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
    user-select: none;
    vertical-align: middle;
    line-height: 1;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    &.nano-avatar--xs {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.625rem;
    }

    &.nano-avatar--sm {
        width: 2rem;
        height: 2rem;
        font-size: var(--font-size-xs);
    }

    &.nano-avatar--lg {
        width: 3.5rem;
        height: 3.5rem;
        font-size: var(--font-size-base);
    }

    &.nano-avatar--square {
        border-radius: var(--radius-base);
    }

    /* ── Color variants ── */
    &.nano-avatar--primary   { background: var(--color-primary);   color: var(--color-primary-contrast);   }
    &.nano-avatar--success   { background: var(--color-success);   color: var(--color-success-contrast);   }
    &.nano-avatar--warning   { background: var(--color-warning);   color: var(--color-warning-contrast);   }
    &.nano-avatar--danger    { background: var(--color-danger);    color: var(--color-danger-contrast);    }
    &.nano-avatar--secondary { background: var(--color-secondary); color: var(--color-secondary-contrast); }
}

/* ── Status wrapper ── */
.nano-avatar-wrap {
    display: inline-block;
    position: relative;
    vertical-align: middle;

    &::after {
        content: '';
        position: absolute;
        bottom: 1px;
        right: 1px;
        width: 0.625rem;
        height: 0.625rem;
        border-radius: 50%;
        border: 2px solid var(--color-light);
    }

    &.nano-avatar-wrap--online::after  { background: var(--color-success); }
    &.nano-avatar-wrap--offline::after { background: var(--color-layer-03); }
    &.nano-avatar-wrap--busy::after    { background: var(--color-danger); }
    &.nano-avatar-wrap--away::after    { background: var(--color-warning); }

    &:has(.nano-avatar--xs)::after {
        width: 0.375rem;
        height: 0.375rem;
        bottom: 0;
        right: 0;
    }

    &:has(.nano-avatar--sm)::after {
        width: 0.5rem;
        height: 0.5rem;
        bottom: 0;
        right: 0;
    }

    &:has(.nano-avatar--lg)::after {
        width: 0.75rem;
        height: 0.75rem;
        bottom: 2px;
        right: 2px;
    }
}

/* ── Avatar group ── */
.nano-avatar-group {
    display: inline-flex;
    align-items: center;

    .nano-avatar {
        border: 2px solid var(--color-light);
        margin-left: -0.625rem;
        transition: transform var(--transition-base), z-index 0s;

        &:first-child { margin-left: 0; }
    }

    &:hover .nano-avatar:hover {
        transform: translateY(-2px);
        position: relative;
        z-index: 1;
    }
}

/* ---------- Notification ----------
   Notification truyền tải phản hồi đến người dùng sau hành động hoặc sự kiện hệ thống.

   Màu nền dùng color-mix với var(--color-light) → tông pastel nhẹ, không gây mệt mắt.
   Border cùng màu nhưng mờ hơn → ranh giới tinh tế.
   Chữ trộn với var(--color-dark) → đảm bảo contrast trên nền pastel. */

.nano-notification {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-base);
    font-size: var(--font-size-base);
    line-height: 1.5;
    border: 1px solid transparent;
    background:  var(--color-layer-01);
    color: var(--color-foreground);
    border-color: color-mix(in srgb, var(--color-foreground) 30%, transparent);
}

.nano-notification--neutral {
    background:  var(--color-background);
    color: var(--color-foreground);
    border-color: color-mix(in srgb, var(--color-foreground) 30%, transparent);
}

.nano-notification--success {
    background:   color-mix(in srgb, var(--color-success) 12%, var(--color-light));
    color:        color-mix(in srgb, var(--color-success) 40%, var(--color-dark));
    border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.nano-notification--warning {
    background:   color-mix(in srgb, var(--color-warning) 14%, var(--color-light));
    color:        color-mix(in srgb, var(--color-warning) 35%, var(--color-dark));
    border-color: color-mix(in srgb, var(--color-warning) 28%, transparent);
}

.nano-notification--danger {
    background:   color-mix(in srgb, var(--color-danger) 12%, var(--color-light));
    color:        color-mix(in srgb, var(--color-danger) 40%, var(--color-dark));
    border-color: color-mix(in srgb, var(--color-danger) 28%, transparent);
}

.nano-notification--info {
    background:   color-mix(in srgb, var(--color-primary) 12%, var(--color-light));
    color:        color-mix(in srgb, var(--color-primary) 40%, var(--color-dark));
    border-color: color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.nano-notification__content {
    flex: 1;
}

/* Nút đóng — nhỏ, mờ mặc định, rõ khi hover */
.nano-notification__close {
    flex-shrink: 0;
    padding: 0.125rem;
    border: none;
    background: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    font-size: var(--font-size-lg);
    line-height: 1;
    border-radius: var(--radius-base);
    transition: opacity var(--transition-base);
}

.nano-notification__close:hover { opacity: 1; }

.nano-notification__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Toast stack container ──────────────────────────────────────────────────
   Mỗi vị trí (bottom-right, top-right...) có một container duy nhất.
   JS tạo container này nếu chưa có, rồi append toast vào trong.
   Nhờ flex-column + gap, các toast tự xếp chồng mà không đè lên nhau.

   z-index: --z-toast — trên modal để toast luôn hiển thị được. */

.nano-notification-stack {
    position: fixed;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 22rem;
    max-width: calc(100vw - 2rem);
}

.nano-notification-stack--bottom-right  { bottom: 1rem; right: 1rem; }
.nano-notification-stack--bottom-left   { bottom: 1rem; left:  1rem; }
.nano-notification-stack--top-right     { top:    1rem; right: 1rem; }
.nano-notification-stack--top-left      { top:    1rem; left:  1rem; }
.nano-notification-stack--top-center    { top:    1rem; left: 50%; transform: translateX(-50%); }
.nano-notification-stack--bottom-center { bottom: 1rem; left: 50%; transform: translateX(-50%); }

/* Khi stack ở bottom, toast mới xuất hiện ở dưới cùng.
   Dùng flex-direction: column-reverse để toast mới ở đáy (gần cạnh màn hình),
   toast cũ tự đẩy lên — cảm giác tự nhiên hơn là đẩy xuống. */
.nano-notification-stack--bottom-right,
.nano-notification-stack--bottom-left,
.nano-notification-stack--bottom-center {
    flex-direction: column-reverse;
}

/* ── Toast animation ────────────────────────────────────────────────────────
   Slide + fade từ cạnh màn hình vào.
   Dùng class --visible để trigger animation sau khi DOM đã render
   (requestAnimationFrame trong JS), tránh bị bỏ qua bởi browser. */

/* ── Rich toast elements ─────────────────────────────────────────────────────
   Cho phép toast hiển thị thêm: icon app, tiêu đề, ảnh thumbnail, nút hành động.
   Tất cả đều optional — khi không dùng, toast vẫn hoạt động bình thường. */

/* Icon app (trái) — logo hoặc ảnh đại diện nguồn phát thông báo */
.nano-notification__icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-base);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nano-notification__icon img,
.nano-notification__icon svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Header row — chứa title + time trên cùng một dòng */
.nano-notification__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.125rem;
}

/* Title — dòng tiêu đề nổi bật */
.nano-notification__title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

/* Time — nhãn thời gian, nhỏ và mờ, căn phải trong header */
.nano-notification__time {
    font-size: var(--font-size-xs);
    opacity: 0.6;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Body — nội dung chính, hơi mờ để title nổi bật hơn */
.nano-notification__body {
    display: block;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    opacity: 0.85;
}

/* Image thumbnail (phải) — ảnh xem trước, tương tự Windows toast */
.nano-notification__image {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-base);
    object-fit: cover;
    align-self: flex-start;
}

/* Action buttons — nút hành động nằm dưới nội dung */
.nano-notification__actions {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.nano-notification__action {
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-base);
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    color: inherit;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    transition: background var(--transition-base);
}

.nano-notification__action:hover {
    background: color-mix(in srgb, currentColor 20%, transparent);
}

.nano-notification__action:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.nano-notification--toast {
    opacity: 0;
    transform: translateX(1.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* max-height animation để shrink khi xoá, giảm layout shift */
    max-height: 20rem;
    overflow: hidden;
}

/* Left variants — slide từ trái */
.nano-notification-stack--bottom-left .nano-notification--toast,
.nano-notification-stack--top-left    .nano-notification--toast {
    transform: translateX(-1.5rem);
}

/* Center variants — slide từ trên/dưới */
.nano-notification-stack--top-center    .nano-notification--toast { transform: translateY(-1rem); }
.nano-notification-stack--bottom-center .nano-notification--toast { transform: translateY(1rem); }

.nano-notification--toast.nano-notification--visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Khi ẩn: shrink chiều cao sau khi fade → không có khoảng trắng đột ngột */
.nano-notification--toast.nano-notification--hiding {
    opacity: 0;
    transform: translateX(1.5rem);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.2s ease 0.15s, padding 0.2s ease 0.15s;
}

.nano-notification-stack--bottom-left .nano-notification--toast.nano-notification--hiding,
.nano-notification-stack--top-left    .nano-notification--toast.nano-notification--hiding {
    transform: translateX(-1.5rem);
}

.nano-notification-stack--top-center    .nano-notification--toast.nano-notification--hiding { transform: translateY(-1rem); }
.nano-notification-stack--bottom-center .nano-notification--toast.nano-notification--hiding { transform: translateY(1rem); }


/* ---------- Badge ----------
   Badge là phần tử bổ trợ nhỏ gọn, chỉ dùng để thông báo nhanh
   (số lượng, trạng thái). KHÔNG phải phần tử tương tác — không có hover/click.

   Chiều cao cố định 1.25rem (20px) thay vì dùng --height-sm (32px) vì badge
   được thiết kế để nhúng inline trong text hoặc icon, không phải element độc lập.
   border-radius: 999px là hình viên thuốc (pill) — giá trị lớn tuỳ ý đảm bảo
   luôn là hình tròn hai đầu bất kể nội dung dài bao nhiêu. */

.nano-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    white-space: nowrap;
}

/* Nền đặc — dùng cho thông báo nổi bật */
.nano-badge--primary  { background: var(--color-primary);   color: var(--color-primary-contrast);   }
.nano-badge--success  { background: var(--color-success);   color: var(--color-success-contrast);   }
.nano-badge--warning  { background: var(--color-warning);   color: var(--color-warning-contrast);   }
.nano-badge--danger   { background: var(--color-danger);    color: var(--color-danger-contrast);    }
.nano-badge--secondary{ background: var(--color-secondary); color: var(--color-secondary-contrast); }

/* Outline — dùng khi badge nằm trên nền sáng cần tinh tế hơn.
   Kết hợp: nano-badge--outline + nano-badge--{color} */
.nano-badge--outline {
    background: transparent;
    border: 1px solid currentColor;
}

.nano-badge--outline.nano-badge--primary   { color: var(--color-primary);   }
.nano-badge--outline.nano-badge--success   { color: var(--color-success);   }
.nano-badge--outline.nano-badge--warning   { color: var(--color-warning);   }
.nano-badge--outline.nano-badge--danger    { color: var(--color-danger);    }
.nano-badge--outline.nano-badge--secondary { color: var(--color-secondary); }

/* Subtle — tint nhẹ, ít tương phản hơn solid. Dùng trong table, list
   khi cần badge không cạnh tranh với nội dung chính. */
.nano-badge--subtle { background: var(--color-component-02); color: var(--color-foreground); }

.nano-badge--subtle.nano-badge--primary   { background: color-mix(in srgb, var(--color-primary)   12%, transparent); color: var(--color-primary);   }
.nano-badge--subtle.nano-badge--success   { background: color-mix(in srgb, var(--color-success)   12%, transparent); color: var(--color-success);   }
.nano-badge--subtle.nano-badge--warning   { background: color-mix(in srgb, var(--color-warning)   12%, transparent); color: color-mix(in srgb, var(--color-warning) 80%, var(--color-dark)); }
.nano-badge--subtle.nano-badge--danger    { background: color-mix(in srgb, var(--color-danger)    12%, transparent); color: var(--color-danger);    }
.nano-badge--subtle.nano-badge--secondary { background: color-mix(in srgb, var(--color-secondary) 12%, transparent); color: var(--color-secondary); }

/* Dot — indicator thuần không có text.
   Dùng để báo hiệu online/offline, unread, live... */
.nano-badge--dot {
    min-width: 0.5rem;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border-radius: 50%;
}

/* Sizes */
.nano-badge--sm { min-width: 1rem; height: 1rem; font-size: 0.625rem; padding: 0 0.25rem; }
.nano-badge--lg { min-width: 1.625rem; height: 1.625rem; font-size: var(--font-size-sm); padding: 0 0.5rem; }
.nano-badge--dot.nano-badge--sm { width: 0.375rem; height: 0.375rem; min-width: 0; }
.nano-badge--dot.nano-badge--lg { width: 0.75rem;  height: 0.75rem;  min-width: 0; }


/* ---------- Chip ----------
   Chip là phần tử tương tác nhỏ gọn — dùng để filter, select, dismiss.
   Khác Tag ở chỗ chip luôn có tương tác (click, select, dismiss).
   Pill shape (border-radius: 999px) là đặc trưng phân biệt với Tag (radius-base). */

.nano-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: var(--height-sm);
    padding: 0 0.75rem;
    font-size: var(--font-size-sm);
    line-height: 1;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    /* cursor: default; */
    user-select: none;
    text-decoration: none;
    background: var(--color-component-01);
    color: var(--color-foreground);
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);

    &:is(button, a) {
        cursor: pointer;

        &:hover  { background: var(--color-hover-overlay); }
        &:active { background: var(--color-active-overlay); }

        &:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 2px;
        }
    }

    &.nano-chip--selected {
        background: color-mix(in srgb, var(--color-primary) 12%, transparent);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    /* ── Dismiss button ── */
    .nano-chip__dismiss {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        height: 1rem;
        border-radius: 999px;
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 0;
        color: currentColor;
        opacity: 0.6;
        line-height: 1;
        font-size: var(--font-size-xs);
        margin-right: -0.25rem;
        transition: opacity var(--transition-base), background-color var(--transition-base);

        &:hover {
            opacity: 1;
            background: color-mix(in srgb, currentColor 15%, transparent);
        }

        &:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 1px;
        }
    }
}

/* ── Color variants ── */
.nano-chip--primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border-color: var(--color-primary);

    &:is(button, a):hover  {
        background: color-mix(in srgb, var(--color-primary) 90%, var(--color-dark));
        border-color: color-mix(in srgb, var(--color-primary) 90%, var(--color-dark));
    }
    &:is(button, a):active {
        background: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark));
        border-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark));
    }
    &.nano-chip--selected {
        background: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark));
        border-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark));
        color: var(--color-primary-contrast);
    }
}

.nano-chip--success {
    background: var(--color-success);
    color: var(--color-success-contrast);
    border-color: var(--color-success);

    &:is(button, a):hover  {
        background: color-mix(in srgb, var(--color-success) 90%, var(--color-dark));
        border-color: color-mix(in srgb, var(--color-success) 90%, var(--color-dark));
    }
    &:is(button, a):active {
        background: color-mix(in srgb, var(--color-success) 80%, var(--color-dark));
        border-color: color-mix(in srgb, var(--color-success) 80%, var(--color-dark));
    }
}

.nano-chip--warning {
    background: var(--color-warning);
    color: var(--color-warning-contrast);
    border-color: var(--color-warning);

    &:is(button, a):hover  {
        background: color-mix(in srgb, var(--color-warning) 90%, var(--color-dark));
        border-color: color-mix(in srgb, var(--color-warning) 90%, var(--color-dark));
    }
    &:is(button, a):active {
        background: color-mix(in srgb, var(--color-warning) 80%, var(--color-dark));
        border-color: color-mix(in srgb, var(--color-warning) 80%, var(--color-dark));
    }
}

.nano-chip--danger {
    background: var(--color-danger);
    color: var(--color-danger-contrast);
    border-color: var(--color-danger);

    &:is(button, a):hover  {
        background: color-mix(in srgb, var(--color-danger) 90%, var(--color-dark));
        border-color: color-mix(in srgb, var(--color-danger) 90%, var(--color-dark));
    }
    &:is(button, a):active {
        background: color-mix(in srgb, var(--color-danger) 80%, var(--color-dark));
        border-color: color-mix(in srgb, var(--color-danger) 80%, var(--color-dark));
    }
}

.nano-chip--secondary {
    background: var(--color-secondary);
    color: var(--color-secondary-contrast);
    border-color: var(--color-secondary);

    &:is(button, a):hover  {
        background: color-mix(in srgb, var(--color-secondary) 90%, var(--color-dark));
        border-color: color-mix(in srgb, var(--color-secondary) 90%, var(--color-dark));
    }
    &:is(button, a):active {
        background: color-mix(in srgb, var(--color-secondary) 80%, var(--color-dark));
        border-color: color-mix(in srgb, var(--color-secondary) 80%, var(--color-dark));
    }
}

/* ── Outline variants ── */
.nano-chip--outline {
    background: transparent;

    &.nano-chip--primary {
        color: var(--color-primary);
        border-color: var(--color-primary);

        &:is(button, a):hover  { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
        &:is(button, a):active { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }
        &.nano-chip--selected  { background: color-mix(in srgb, var(--color-primary) 15%, transparent); }
    }

    &.nano-chip--success {
        color: var(--color-success);
        border-color: var(--color-success);

        &:is(button, a):hover  { background: color-mix(in srgb, var(--color-success) 10%, transparent); }
        &:is(button, a):active { background: color-mix(in srgb, var(--color-success) 20%, transparent); }
    }

    &.nano-chip--warning {
        color: var(--color-warning);
        border-color: var(--color-warning);

        &:is(button, a):hover  { background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
        &:is(button, a):active { background: color-mix(in srgb, var(--color-warning) 20%, transparent); }
    }

    &.nano-chip--danger {
        color: var(--color-danger);
        border-color: var(--color-danger);

        &:is(button, a):hover  { background: color-mix(in srgb, var(--color-danger) 10%, transparent); }
        &:is(button, a):active { background: color-mix(in srgb, var(--color-danger) 20%, transparent); }
    }

    &.nano-chip--secondary {
        color: var(--color-secondary);
        border-color: var(--color-secondary);

        &:is(button, a):hover  { background: color-mix(in srgb, var(--color-secondary) 10%, transparent); }
        &:is(button, a):active { background: color-mix(in srgb, var(--color-secondary) 20%, transparent); }
    }
}


/* ── Disabled state ── */
.nano-chip:disabled,
.nano-chip[aria-disabled="true"],
.nano-chip--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Subtle variants ── */
.nano-chip--subtle {
    &.nano-chip--primary {
        background: color-mix(in srgb, var(--color-primary) 12%, transparent);
        border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
        color: var(--color-primary);

        &:is(button, a):hover  { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }
        &:is(button, a):active { background: color-mix(in srgb, var(--color-primary) 28%, transparent); }
    }

    &.nano-chip--success {
        background: color-mix(in srgb, var(--color-success) 12%, transparent);
        border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
        color: var(--color-success);

        &:is(button, a):hover  { background: color-mix(in srgb, var(--color-success) 20%, transparent); }
        &:is(button, a):active { background: color-mix(in srgb, var(--color-success) 28%, transparent); }
    }

    &.nano-chip--warning {
        background: color-mix(in srgb, var(--color-warning) 12%, transparent);
        border-color: color-mix(in srgb, var(--color-warning) 25%, transparent);
        color: color-mix(in srgb, var(--color-warning) 80%, var(--color-dark));

        &:is(button, a):hover  { background: color-mix(in srgb, var(--color-warning) 20%, transparent); }
        &:is(button, a):active { background: color-mix(in srgb, var(--color-warning) 28%, transparent); }
    }

    &.nano-chip--danger {
        background: color-mix(in srgb, var(--color-danger) 12%, transparent);
        border-color: color-mix(in srgb, var(--color-danger) 25%, transparent);
        color: var(--color-danger);

        &:is(button, a):hover  { background: color-mix(in srgb, var(--color-danger) 20%, transparent); }
        &:is(button, a):active { background: color-mix(in srgb, var(--color-danger) 28%, transparent); }
    }

    &.nano-chip--secondary {
        background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
        border-color: color-mix(in srgb, var(--color-secondary) 25%, transparent);
        color: var(--color-secondary);

        &:is(button, a):hover  { background: color-mix(in srgb, var(--color-secondary) 20%, transparent); }
        &:is(button, a):active { background: color-mix(in srgb, var(--color-secondary) 28%, transparent); }
    }
}
/* ── Sizes ── */
.nano-chip--sm {
    height: 1.5rem;
    font-size: var(--font-size-xs);
    padding: 0 0.5rem;
    gap: 0.25rem;
}
.nano-chip--lg {
    height: 2.25rem;
    font-size: var(--font-size-base);
    padding: 0 1rem;
    gap: 0.5rem;
}



/* ---------- Tag ----------
   Tag là nhãn phân loại tĩnh — dùng để gắn metadata (danh mục, trạng thái,
   công nghệ...) lên nội dung. KHÔNG phải phần tử tương tác chính — khác Chip
   ở chỗ Tag không dùng để filter hay select.

   Thiết kế: góc vuông (radius-base), nhỏ hơn chip, thường dùng inline
   trong card, bài viết, table. Khi cần dismiss thì thêm __dismiss button
   nhưng bản chất vẫn là label, không phải action element. */

.nano-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-base);
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
    background: var(--color-component-02);
    color: var(--color-foreground);
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* Clickable tag (link, button) — dùng khi tag dẫn đến trang danh mục */
.nano-tag:is(a, button) {
    cursor: pointer;

    &:hover  { background: color-mix(in srgb, var(--color-dark) 10%, var(--color-light)); }
    &:active { background: color-mix(in srgb, var(--color-dark) 16%, var(--color-light)); }

    &:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }
}

/* ── Dismiss button ── */
.nano-tag__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--radius-base);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: currentColor;
    opacity: 0.6;
    line-height: 1;
    font-size: 0.625rem;
    margin-right: -0.125rem;
    transition: opacity var(--transition-base), background-color var(--transition-base);

    &:hover {
        opacity: 1;
        background: color-mix(in srgb, currentColor 15%, transparent);
    }

    &:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 1px;
    }
}

/* ── Color variants (solid) ── */
.nano-tag--primary   { background: var(--color-primary);   color: var(--color-primary-contrast);   border-color: var(--color-primary);   }
.nano-tag--success   { background: var(--color-success);   color: var(--color-success-contrast);   border-color: var(--color-success);   }
.nano-tag--warning   { background: var(--color-warning);   color: var(--color-warning-contrast);   border-color: var(--color-warning);   }
.nano-tag--danger    { background: var(--color-danger);    color: var(--color-danger-contrast);    border-color: var(--color-danger);    }
.nano-tag--secondary { background: var(--color-secondary); color: var(--color-secondary-contrast); border-color: var(--color-secondary); }

/* ── Outline variants ── */
.nano-tag--outline {
    background: transparent;
    border-color: currentColor;
}
.nano-tag--outline.nano-tag--primary   { color: var(--color-primary);   border-color: var(--color-primary);   }
.nano-tag--outline.nano-tag--success   { color: var(--color-success);   border-color: var(--color-success);   }
.nano-tag--outline.nano-tag--warning   { color: var(--color-warning);   border-color: var(--color-warning);   }
.nano-tag--outline.nano-tag--danger    { color: var(--color-danger);    border-color: var(--color-danger);    }
.nano-tag--outline.nano-tag--secondary { color: var(--color-secondary); border-color: var(--color-secondary); }

/* ── Subtle variants ── */
.nano-tag--subtle.nano-tag--primary {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-light));
    border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-light));
    color: var(--color-primary);
}
.nano-tag--subtle.nano-tag--success {
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-light));
    border-color: color-mix(in srgb, var(--color-success) 25%, var(--color-light));
    color: var(--color-success);
}
.nano-tag--subtle.nano-tag--warning {
    background: color-mix(in srgb, var(--color-warning) 12%, var(--color-light));
    border-color: color-mix(in srgb, var(--color-warning) 25%, var(--color-light));
    color: color-mix(in srgb, var(--color-warning) 80%, var(--color-dark));
}
.nano-tag--subtle.nano-tag--danger {
    background: color-mix(in srgb, var(--color-danger) 12%, var(--color-light));
    border-color: color-mix(in srgb, var(--color-danger) 25%, var(--color-light));
    color: var(--color-danger);
}
.nano-tag--subtle.nano-tag--secondary {
    background: color-mix(in srgb, var(--color-secondary) 12%, var(--color-light));
    border-color: color-mix(in srgb, var(--color-secondary) 25%, var(--color-light));
    color: var(--color-secondary);
}

/* ── Sizes ── */
.nano-tag--sm { height: 1.25rem; font-size: 0.625rem; padding: 0 0.375rem; gap: 0.125rem; }
.nano-tag--lg { height: 1.75rem; font-size: var(--font-size-sm); padding: 0 0.625rem; gap: 0.375rem; }

/* ── Disabled ── */
.nano-tag--disabled,
.nano-tag[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* ---------- Breadcrumb ----------
   Breadcrumb là navigation thứ cấp, không phải primary action.
   Font-size-sm (14px) để không cạnh tranh với tiêu đề trang.

   Separator dùng ký tự › qua ::after thay vì icon SVG để không
   cần asset và tự scale theo font-size. */

.nano-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    align-items: center;
    gap: 0.25rem;
}

.nano-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nano-breadcrumb li:not(:last-child)::after {
    content: "›";
    color: var(--color-secondary);
    /* font-weight: 600; */
    font-size: var(--font-size-base);
    line-height: 1;
}

.nano-breadcrumb a {
    color: var(--color-foreground);
    text-decoration: none;
    padding: 0.25rem 0;
    border-radius: var(--radius-base);
    transition: color var(--transition-base);
}

.nano-breadcrumb a:hover {
    color: var(--color-primary);
}

.nano-breadcrumb a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Item cuối (trang hiện tại) — màu mờ hơn để phân biệt với link có thể nhấp */
.nano-breadcrumb [aria-current="page"],
.nano-breadcrumb li:last-child span {
    color: var(--color-primary);
    /* font-weight: 500; */
    padding: 0.25rem 0;
}


/* ---------- Button ----------
   Button là component tương tác cốt lõi.

   min-height dùng --height-base (40px) thay vì px cứng — đồng bộ với input và pagination.
   font-size dùng --font-size-sm (14px) — nhỏ hơn body text một chút để không
   cạnh tranh với nội dung, nhưng vẫn đủ đọc.

   Màu hover/active dùng color-mix với var(--color-dark)/var(--color-light)
   thay vì hard-code "black"/"white" — đảm bảo hoạt động đúng khi theme đổi màu. */
@layer components-button {
  @keyframes nano-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }

  .nano-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-wrap-mode: nowrap;
    min-height: var(--height-base);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-base);
    border: none;
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: var(--color-foreground);
    transition: background-color var(--transition-base),
      color var(--transition-base), border-color var(--transition-base),
      box-shadow var(--transition-base);
    background: var(--color-component-01);

    &:hover {
      background: color-mix(
        in srgb,
        var(--color-component-01) 98%,
        var(--color-dark)
      );
    }

    &:active {
      background: color-mix(
        in srgb,
        var(--color-component-01) 96%,
        var(--color-dark)
      );
    }

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.6;
      background: color-mix(
        in srgb,
        var(--color-component-01) 60%,
        var(--color-light)
      );
    }

    /* OAuth / anchors: mimic :disabled when ARIA says not interactive */
    &[aria-disabled='true'] {
      cursor: not-allowed;
      opacity: 0.55;
      pointer-events: none;
    }

    &.nano-button--active {
      background: color-mix(
        in srgb,
        var(--color-component-01) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--outline {
      border: 1px solid var(--color-layer-02);
      background: unset;

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-light) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-light) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border: 1px solid
          color-mix(in srgb, var(--color-layer-01) 60%, var(--color-light));
      }
    }

    &.nano-button--ghost {
      background: unset;

      &:hover {
        color: color-mix(
          in srgb,
          var(--color-foreground) 90%,
          var(--color-light)
        );
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(
          in srgb,
          var(--color-foreground) 80%,
          var(--color-light)
        );
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(
          in srgb,
          var(--color-foreground) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--ghost-active {
      background: unset;
      color: color-mix(
        in srgb,
        var(--color-foreground) 80%,
        var(--color-light)
      );
    }

    /* LOADING — ẩn text/icon, hiện spinner inline.
           @keyframes khai báo lại ngay trong layer để tránh lỗi cross-layer lookup
           trên một số browser (Chrome cũ, Safari).
    visibility:hidden
      trên
      children
      giữ
      layout
      (không collapse kích thước button)
      nhưng
      ẩn
      nội
      dung.
      ::after
      spinner
      dùng
      currentColor
      —
      hoạt
      động
      với
      mọi
      color
      variant
      vì
      color
      vẫn
      set
      trên
      button,
    chỉ children bị ẩn. */
    &.nano-button--loading {
      cursor: wait;
      pointer-events: none;
      position: relative;

      & > svg {
        visibility: hidden;
      }

      &::after {
        content: "";
        margin-left: 0.5rem;
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: nano-spinner-rotate 0.7s linear infinite;
      }

      &.nano-button--loading-left {
        &::before {
          content: "";
          margin-right: 0.5rem;
          width: 1rem;
          height: 1rem;
          border: 2px solid currentColor;
          border-top-color: transparent;
          border-radius: 50%;
          animation: nano-spinner-rotate 0.7s linear infinite;
        }
      }

      &.nano-button--loading-right {
        &::after {
          content: "";
          margin-left: 0.5rem;
          width: 1rem;
          height: 1rem;
          border: 2px solid currentColor;
          border-top-color: transparent;
          border-radius: 50%;
          animation: nano-spinner-rotate 0.7s linear infinite;
        }
      }
    }

    /* SIZE VARIANTS — đồng bộ với form input sizes */
    &.nano-button--sm {
      min-height: var(--height-sm);
      padding: 0.375rem 0.75rem;
      font-size: var(--font-size-xs);
    }

    &.nano-button--lg {
      min-height: var(--height-lg);
      padding: 0.625rem 1.25rem;
      font-size: var(--font-size-base);
    }

    /* PRIMARY */
    &.nano-button--primary {
      background: var(--color-primary);
      color: var(--color-primary-contrast);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-primary) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-primary) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-primary) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--primary-active {
      color: var(--color-primary-contrast);
      background: color-mix(
        in srgb,
        var(--color-primary) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--primary-outline {
      border: 1px solid var(--color-primary);
      background: unset;
      color: var(--color-primary);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-primary) 90%,
          var(--color-dark)
        );
        color: var(--color-primary-contrast);
      }

      &:active {
        color: var(--color-primary-contrast);
        background: color-mix(
          in srgb,
          var(--color-primary) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border: 1px solid
          color-mix(in srgb, var(--color-primary) 60%, var(--color-light));
        color: color-mix(in srgb, var(--color-primary) 60%, var(--color-light));
      }
    }

    &.nano-button--primary-outline-active {
      color: var(--color-primary-contrast);
      background: color-mix(
        in srgb,
        var(--color-primary) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--primary-ghost {
      background: unset;

      color: var(--color-primary);

      &:hover {
        color: color-mix(in srgb, var(--color-primary) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-primary) 60%, var(--color-light));
      }
    }

    &.nano-button--primary-ghost-active {
      color: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark));
      background: unset;
    }

    /* DANGER */
    &.nano-button--danger {
      background: var(--color-danger);
      color: var(--color-danger-contrast);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-danger) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-danger) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-danger) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--danger-active {
      color: var(--color-danger-contrast);
      background: color-mix(
        in srgb,
        var(--color-danger) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--danger-outline {
      border: 1px solid var(--color-danger);
      background: unset;
      color: var(--color-danger);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-danger) 90%,
          var(--color-dark)
        );
        color: var(--color-danger-contrast);
      }

      &:active {
        color: var(--color-danger-contrast);
        background: color-mix(
          in srgb,
          var(--color-danger) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border: 1px solid
          color-mix(in srgb, var(--color-danger) 60%, var(--color-light));
        color: color-mix(in srgb, var(--color-danger) 60%, var(--color-light));
      }
    }

    &.nano-button--danger-outline-active {
      color: var(--color-danger-contrast);
      background: color-mix(
        in srgb,
        var(--color-danger) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--danger-ghost {
      background: unset;

      color: var(--color-danger);

      &:hover {
        color: color-mix(in srgb, var(--color-danger) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-danger) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-danger) 60%, var(--color-light));
      }
    }

    &.nano-button--danger-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-danger) 80%, var(--color-dark));
    }

    /* WARNING */
    &.nano-button--warning {
      background: var(--color-warning);
      color: var(--color-warning-contrast);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-warning) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-warning) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-warning) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--warning-active {
      color: var(--color-warning-contrast);
      background: color-mix(
        in srgb,
        var(--color-warning) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--warning-outline {
      border: 1px solid var(--color-warning);
      background: unset;
      color: var(--color-warning);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-warning) 90%,
          var(--color-dark)
        );
        color: var(--color-warning-contrast);
      }

      &:active {
        color: var(--color-warning-contrast);
        background: color-mix(
          in srgb,
          var(--color-warning) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border: 1px solid
          color-mix(in srgb, var(--color-warning) 60%, var(--color-light));
        color: color-mix(in srgb, var(--color-warning) 60%, var(--color-light));
      }
    }

    &.nano-button--warning-outline-active {
      color: var(--color-warning-contrast);
      background: color-mix(
        in srgb,
        var(--color-warning) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--warning-ghost {
      background: unset;
      color: var(--color-warning);

      &:hover {
        color: color-mix(in srgb, var(--color-warning) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-warning) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-warning) 60%, var(--color-light));
      }
    }

    &.nano-button--warning-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-warning) 80%, var(--color-dark));
    }

    /* SUCCESS */
    &.nano-button--success {
      background: var(--color-success);
      color: var(--color-success-contrast);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-success) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-success) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-success) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--success-active {
      color: var(--color-success-contrast);
      background: color-mix(
        in srgb,
        var(--color-success) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--success-outline {
      border: 1px solid var(--color-success);
      background: unset;
      color: var(--color-success);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-success) 90%,
          var(--color-dark)
        );
        color: var(--color-success-contrast);
      }

      &:active {
        color: var(--color-success-contrast);
        background: color-mix(
          in srgb,
          var(--color-success) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border: 1px solid
          color-mix(in srgb, var(--color-success) 60%, var(--color-light));
        color: color-mix(in srgb, var(--color-success) 60%, var(--color-light));
      }
    }

    &.nano-button--success-outline-active {
      color: var(--color-success-contrast);
      background: color-mix(
        in srgb,
        var(--color-success) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--success-ghost {
      background: unset;
      color: var(--color-success);

      &:hover {
        color: color-mix(in srgb, var(--color-success) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-success) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-success) 60%, var(--color-light));
      }
    }

    &.nano-button--success-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-success) 80%, var(--color-dark));
    }

    /* SECONDARY */
    &.nano-button--secondary {
      background: var(--color-secondary);
      color: var(--color-secondary-contrast);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-secondary) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-secondary) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-secondary) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--secondary-active {
      color: var(--color-secondary-contrast);
      background: color-mix(
        in srgb,
        var(--color-secondary) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--secondary-outline {
      border: 1px solid var(--color-secondary);
      background: unset;
      color: var(--color-secondary);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-secondary) 90%,
          var(--color-dark)
        );
        color: var(--color-secondary-contrast);
      }

      &:active {
        color: var(--color-secondary-contrast);
        background: color-mix(
          in srgb,
          var(--color-secondary) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border: 1px solid
          color-mix(in srgb, var(--color-secondary) 60%, var(--color-light));
        color: color-mix(
          in srgb,
          var(--color-secondary) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--secondary-outline-active {
      color: var(--color-secondary-contrast);
      background: color-mix(
        in srgb,
        var(--color-secondary) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--secondary-ghost {
      background: unset;
      color: var(--color-secondary);

      &:hover {
        color: color-mix(
          in srgb,
          var(--color-secondary) 90%,
          var(--color-dark)
        );
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(
          in srgb,
          var(--color-secondary) 80%,
          var(--color-dark)
        );
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(
          in srgb,
          var(--color-secondary) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--secondary-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-secondary) 80%, var(--color-dark));
    }

    /* BLUE */
    &.nano-button--blue {
      background: var(--color-blue);
      color: var(--color-light);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-blue) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-blue) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-blue) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--blue-active {
      color: var(--color-light);
      background: color-mix(in srgb, var(--color-blue) 80%, var(--color-dark));
    }

    &.nano-button--blue-outline {
      border: 1px solid var(--color-blue);
      background: unset;
      color: var(--color-blue);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-blue) 90%,
          var(--color-dark)
        );
        color: var(--color-light);
      }

      &:active {
        color: var(--color-light);
        background: color-mix(
          in srgb,
          var(--color-blue) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border: 1px solid
          color-mix(in srgb, var(--color-blue) 60%, var(--color-light));
        color: color-mix(in srgb, var(--color-blue) 60%, var(--color-light));
      }
    }

    &.nano-button--blue-outline-active {
      color: var(--color-light);
      background: color-mix(in srgb, var(--color-blue) 80%, var(--color-dark));
    }

    &.nano-button--blue-ghost {
      background: unset;
      color: var(--color-blue);

      &:hover {
        color: color-mix(in srgb, var(--color-blue) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-blue) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-blue) 60%, var(--color-light));
      }
    }

    &.nano-button--blue-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-blue) 80%, var(--color-dark));
    }

    /* RED */
    &.nano-button--red {
      background: var(--color-red);
      color: var(--color-light);

      &:hover {
        background: color-mix(in srgb, var(--color-red) 90%, var(--color-dark));
      }

      &:active {
        background: color-mix(in srgb, var(--color-red) 80%, var(--color-dark));
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-red) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--red-active {
      color: var(--color-light);
      background: color-mix(in srgb, var(--color-red) 80%, var(--color-dark));
    }

    &.nano-button--red-outline {
      border: 1px solid var(--color-red);
      background: unset;
      color: var(--color-red);

      &:hover {
        background: color-mix(in srgb, var(--color-red) 90%, var(--color-dark));
        color: var(--color-light);
      }

      &:active {
        color: var(--color-light);
        background: color-mix(in srgb, var(--color-red) 80%, var(--color-dark));
      }

      &:disabled {
        background: unset;
        border-color: color-mix(
          in srgb,
          var(--color-red) 60%,
          var(--color-light)
        );
        color: color-mix(in srgb, var(--color-red) 60%, var(--color-light));
      }
    }

    &.nano-button--red-outline-active {
      color: var(--color-light);
      background: color-mix(in srgb, var(--color-red) 80%, var(--color-dark));
    }

    &.nano-button--red-ghost {
      background: unset;
      color: var(--color-red);

      &:hover {
        color: color-mix(in srgb, var(--color-red) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-red) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-red) 60%, var(--color-light));
      }
    }

    &.nano-button--red-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-red) 80%, var(--color-dark));
    }

    /* ORANGE */
    &.nano-button--orange {
      background: var(--color-orange);
      color: var(--color-light);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-orange) 90%,
          var(--color-dark)
        );
        color: var(--color-light);
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-orange) 80%,
          var(--color-dark)
        );
        color: var(--color-light);
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-orange) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--orange-active {
      color: var(--color-light);
      background: color-mix(
        in srgb,
        var(--color-orange) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--orange-outline {
      border: 1px solid var(--color-orange);
      background: unset;
      color: var(--color-orange);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-orange) 90%,
          var(--color-dark)
        );
        color: var(--color-light);
      }

      &:active {
        color: var(--color-light);
        background: color-mix(
          in srgb,
          var(--color-orange) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border-color: color-mix(
          in srgb,
          var(--color-orange) 60%,
          var(--color-light)
        );
        color: color-mix(in srgb, var(--color-orange) 60%, var(--color-light));
      }
    }

    &.nano-button--orange-outline-active {
      color: var(--color-light);
      background: color-mix(
        in srgb,
        var(--color-orange) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--orange-ghost {
      background: unset;
      color: var(--color-orange);

      &:hover {
        color: color-mix(in srgb, var(--color-orange) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-orange) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-orange) 60%, var(--color-light));
      }
    }

    &.nano-button--orange-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-orange) 80%, var(--color-dark));
    }

    /* YELLOW */
    &.nano-button--yellow {
      background: var(--color-yellow);
      color: var(--color-dark);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-yellow) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-yellow) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-yellow) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--yellow-active {
      color: var(--color-dark);
      background: color-mix(
        in srgb,
        var(--color-yellow) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--yellow-outline {
      border: 1px solid var(--color-yellow);
      background: unset;
      color: var(--color-yellow);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-yellow) 90%,
          var(--color-dark)
        );
        color: var(--color-dark);
      }

      &:active {
        color: var(--color-dark);
        background: color-mix(
          in srgb,
          var(--color-yellow) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border-color: color-mix(
          in srgb,
          var(--color-yellow) 60%,
          var(--color-light)
        );
        color: color-mix(in srgb, var(--color-yellow) 60%, var(--color-light));
      }
    }

    &.nano-button--yellow-outline-active {
      color: var(--color-dark);
      background: color-mix(
        in srgb,
        var(--color-yellow) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--yellow-ghost {
      background: unset;
      color: var(--color-yellow);

      &:hover {
        color: color-mix(in srgb, var(--color-yellow) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-yellow) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-yellow) 60%, var(--color-light));
      }
    }

    &.nano-button--yellow-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-yellow) 80%, var(--color-dark));
    }

    /* GREEN */
    &.nano-button--green {
      background: var(--color-green);
      color: var(--color-light);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-green) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-green) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-green) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--green-active {
      color: var(--color-light);
      background: color-mix(in srgb, var(--color-green) 80%, var(--color-dark));
    }

    &.nano-button--green-outline {
      border: 1px solid var(--color-green);
      background: unset;
      color: var(--color-green);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-green) 90%,
          var(--color-dark)
        );
        color: var(--color-light);
      }

      &:active {
        color: var(--color-light);
        background: color-mix(
          in srgb,
          var(--color-green) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border-color: color-mix(
          in srgb,
          var(--color-green) 60%,
          var(--color-light)
        );
        color: color-mix(in srgb, var(--color-green) 60%, var(--color-light));
      }
    }

    &.nano-button--green-outline-active {
      color: var(--color-light);
      background: color-mix(in srgb, var(--color-green) 80%, var(--color-dark));
    }

    &.nano-button--green-ghost {
      background: unset;
      color: var(--color-green);

      &:hover {
        color: color-mix(in srgb, var(--color-green) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-green) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-green) 60%, var(--color-light));
      }
    }

    &.nano-button--green-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-green) 80%, var(--color-dark));
    }

    /* INDIGO */
    &.nano-button--indigo {
      background: var(--color-indigo);
      color: var(--color-light);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-indigo) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-indigo) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-indigo) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--indigo-active {
      color: var(--color-light);
      background: color-mix(
        in srgb,
        var(--color-indigo) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--indigo-outline {
      border: 1px solid var(--color-indigo);
      background: unset;
      color: var(--color-indigo);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-indigo) 90%,
          var(--color-dark)
        );
        color: var(--color-light);
      }

      &:active {
        color: var(--color-light);
        background: color-mix(
          in srgb,
          var(--color-indigo) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border-color: color-mix(
          in srgb,
          var(--color-indigo) 60%,
          var(--color-light)
        );
        color: color-mix(in srgb, var(--color-indigo) 60%, var(--color-light));
      }
    }

    &.nano-button--indigo-outline-active {
      color: var(--color-light);
      background: color-mix(
        in srgb,
        var(--color-indigo) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--indigo-ghost {
      background: unset;
      color: var(--color-indigo);

      &:hover {
        color: color-mix(in srgb, var(--color-indigo) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-indigo) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-indigo) 60%, var(--color-light));
      }
    }

    &.nano-button--indigo-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-indigo) 80%, var(--color-dark));
    }

    /* VIOLET */
    &.nano-button--violet {
      background: var(--color-violet);
      color: var(--color-light);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-violet) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-violet) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-violet) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--violet-active {
      color: var(--color-light);
      background: color-mix(
        in srgb,
        var(--color-violet) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--violet-outline {
      border: 1px solid var(--color-violet);
      background: unset;
      color: var(--color-violet);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-violet) 90%,
          var(--color-dark)
        );
        color: var(--color-light);
      }

      &:active {
        color: var(--color-light);
        background: color-mix(
          in srgb,
          var(--color-violet) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border-color: color-mix(
          in srgb,
          var(--color-violet) 60%,
          var(--color-light)
        );
        color: color-mix(in srgb, var(--color-violet) 60%, var(--color-light));
      }
    }

    &.nano-button--violet-outline-active {
      color: var(--color-light);
      background: color-mix(
        in srgb,
        var(--color-violet) 80%,
        var(--color-dark)
      );
    }

    &.nano-button--violet-ghost {
      background: unset;
      color: var(--color-violet);

      &:hover {
        color: color-mix(in srgb, var(--color-violet) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-violet) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-violet) 60%, var(--color-light));
      }
    }

    &.nano-button--violet-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-violet) 80%, var(--color-dark));
    }

    /* WHITE */
    &.nano-button--white {
      background: var(--color-white);
      color: var(--color-dark);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-white) 90%,
          var(--color-dark)
        );
      }

      &:active {
        background: color-mix(
          in srgb,
          var(--color-white) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: color-mix(
          in srgb,
          var(--color-white) 60%,
          var(--color-light)
        );
      }
    }

    &.nano-button--white-active {
      color: var(--color-dark);
      background: color-mix(in srgb, var(--color-white) 80%, var(--color-dark));
    }

    &.nano-button--white-outline {
      border: 1px solid var(--color-white);
      background: unset;
      color: var(--color-dark);

      &:hover {
        background: color-mix(
          in srgb,
          var(--color-white) 90%,
          var(--color-dark)
        );
        color: var(--color-dark);
      }

      &:active {
        color: var(--color-dark);
        background: color-mix(
          in srgb,
          var(--color-white) 80%,
          var(--color-dark)
        );
      }

      &:disabled {
        background: unset;
        border-color: color-mix(
          in srgb,
          var(--color-white) 60%,
          var(--color-light)
        );
        color: color-mix(in srgb, var(--color-dark) 60%, var(--color-light));
      }
    }

    &.nano-button--white-outline-active {
      color: var(--color-dark);
      background: color-mix(in srgb, var(--color-white) 80%, var(--color-dark));
    }

    &.nano-button--white-ghost {
      background: unset;
      color: var(--color-dark);

      &:hover {
        color: color-mix(in srgb, var(--color-white) 90%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:active {
        color: color-mix(in srgb, var(--color-white) 80%, var(--color-dark));
        background-color: color-mix(in srgb, var(--color-dark) 5%, transparent);
      }

      &:disabled {
        color: color-mix(in srgb, var(--color-white) 60%, var(--color-light));
      }
    }

    &.nano-button--white-ghost-active {
      background: unset;
      color: color-mix(in srgb, var(--color-white) 80%, var(--color-dark));
    }
  }
}


@layer components-card {
    /* ---------- Card ----------
   Card là container phân nhóm nội dung liên quan.
   border-radius: calc(--radius-base * 2) = 16px — lớn hơn component nhỏ (button, input)
   để tạo cảm giác "container" thay vì "element tương tác".

   Nền dùng --color-layer-01,
   Border 1px layer-02 (6% dark) tạo viền nhẹ — luôn thấy trên mọi nền
   mà không thêm depth giả tạo.

   Padding chia theo header/body/footer để nội dung bên trong có thể
   flush với cạnh card (ví dụ ảnh trong body) trong khi header/footer vẫn có padding. */

    .nano-card {
        background: var(--color-layer-01);
        border-radius: calc(var(--radius-base) * 2);
        border: 1px solid var(--color-layer-02);

        &.nano-card--primary {
            background: var(--color-primary);
            color: var(--color-primary-contrast);
        }

        &.nano-card--danger {
            background: var(--color-danger);
            color: var(--color-danger-contrast);
        }
    }

    .nano-card__header {
        padding-top: calc(var(--space-base) * 5.5);
        padding-left: calc(var(--space-base) * 5);
        /* 1.5rem */
        padding-right: calc(var(--space-base) * 5);
    }

    .nano-card__body {
        padding: 0 calc(var(--space-base) * 5);
        /* 0 1.5rem */
    }

    /* Padding dọc của body tự điều chỉnh theo vị trí:
   - Khi không có header phía trên: thêm padding-top 1.5rem (ngang với header)
   - Khi không có footer phía dưới: thêm padding-bottom 1.5rem (ngang với footer)
   - Khi có header phía trên: tạo khoảng cách 1rem giữa header content và body
   - Khi có footer phía dưới: tạo khoảng cách 1rem giữa body và footer content */
    .nano-card__body:first-child {
        padding-top: calc(var(--space-base) * 5);
    }

    .nano-card__body:last-child {
        padding-bottom: calc(var(--space-base) * 5);
    }

    .nano-card__header+.nano-card__body {
        padding-top: calc(var(--space-base) * 4);
    }

    .nano-card__body+.nano-card__footer {
        padding-top: calc(var(--space-base) * 4);
    }

    .nano-card__footer {
        padding-bottom: calc(var(--space-base) * 5);
        /* 1.5rem */
        padding-left: calc(var(--space-base) * 5);
        padding-right: calc(var(--space-base) * 5);
    }
}

@layer components-code {

    /* ---------- Code ----------
   Các element trình bày code, keyboard shortcut, terminal output.
   Font-size-xs cho inline (nano-code, nano-kbd) để không làm dòng chữ
   bị cao hơn bình thường khi nhúng vào đoạn văn. */

    .nano-var {
        font-style: italic;
        font-weight: bold;
    }

    /* Inline code — nền xám nhạt, padding ngang bằng 1cap để canh theo font chữ hoa */
    .nano-code {
        font-size: var(--font-size-xs);
        font-weight: bold;
        background: var(--color-component-02);
        display: inline-block;
        padding: 0rem 1cap;
        border-radius: var(--radius-base);
    }

    /* Keyboard shortcut — box-shadow 3D gợi phím vật lý */
    .nano-kbd {
        font-size: var(--font-size-xs);
        font-weight: bold;
        border-radius: calc(var(--radius-base) / 3);
        background: color-mix(in srgb, var(--color-dark) 10%, var(--color-light));
        box-shadow: 0px 1px 0px 2px color-mix(in srgb, var(--color-dark) 20%, var(--color-light));
        padding: 0rem 1cap;
        margin: 0 0.125rem;
    }

    /* Terminal output — nền tối, mono font, scroll ngang */
    .nano-samp {
        font-weight: bold;
        display: block;
        padding: 1rem;
        background: var(--color-dark);
        color: var(--color-light);
        white-space: pre;
        overflow-x: auto;
    }

    /* Pre, không màu nền, dùng trong code block */
    .nano-pre {
        font-weight: bold;
        padding: 1rem;
        white-space: pre;
        overflow-x: auto;
        border: 1px solid var(--color-layer-02);

        /* Border cho khoi code trong pre: nano-border nano-border--gray-10 */
        code {
            border: 1px solid var(--color-layer-02);
        }
    }

    /* Code block — wrapper có title và nút copy */
    .nano-code-block {
        position: relative;
    }

    .nano-code-block .nano-code-block__copy {
        position: absolute;
        top: 0.40rem;
        right: 1rem;
        padding: 0.25rem 0.5rem;
        font-size: var(--font-size-xs);
        font-weight: 500;
        color: var(--color-foreground);
        background: var(--color-component-01);
        border: 1px solid var(--color-layer-02);
        border-radius: var(--radius-base);
        cursor: pointer;
        transition: background-color var(--transition-base), color var(--transition-base);
    }

    .nano-code-block .nano-code-block__title {
        position: absolute;
        top: 0.5rem;
        left: 1rem;
        padding: 0.25rem 0;
        font-size: var(--font-size-xs);
        font-weight: 500;
        color: var(--color-foreground);
    }

    /* Dành chỗ cho title và copy button bằng padding-top */
    .nano-code-block .nano-pre,
    .nano-code-block .nano-samp {
        padding-top: 2.25rem;
    }
}

/* ---------- Dropdown ----------
   Dropdown menu là overlay tạm thời, dùng --z-dropdown để nằm trên
   hầu hết nội dung trang nhưng dưới modal và drawer.

   border-radius dùng var(--radius-base) — đồng bộ với toàn hệ thống.
   Item dùng radius nhỏ hơn (calc radius-base * 0.75) vì nằm trong
   container đã có border-radius, tránh khoảng trắng xấu ở góc. */

.nano-dropdown {
  position: relative;
  display: inline-flex;
}

.nano-dropdown__menu {
  position: absolute;
  z-index: var(--z-dropdown);
  top: 100%;
  left: 0;
  min-width: 12rem;
  margin-top: 0.25rem;
  padding: 0.25rem;
  background: var(--color-component-01);
  color: var(--color-foreground);
  border-radius: var(--radius-base);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-dark) 12%, transparent);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-base), visibility var(--transition-base),
    transform var(--transition-base);
}

.nano-dropdown--open .nano-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nano-dropdown__menu--right {
  left: auto;
  right: 0;
}

/* Item — font-size-sm vì menu thường chứa nhiều lựa chọn, cần gọn.
   tabindex="-1" cho phép JS gọi .focus() mà không đưa item vào tab order
   của trang — điều hướng bằng Arrow keys thay vì Tab. */
.nano-dropdown__item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: var(--font-size-sm);
  color: var(--color-foreground);
  text-align: left;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: calc(var(--radius-base) * 0.75);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.nano-dropdown__item:hover,
.nano-dropdown__item:focus-visible {
  background: var(--color-hover-overlay);
  outline: none;
}

/* Variant danger — cảnh báo hành động phá huỷ (xoá, huỷ...) */
.nano-dropdown__item--danger:hover {
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-light));
  color: var(--color-danger);
}

.nano-dropdown__divider {
  height: 1px;
  margin: 0.25rem 0;
  background: var(--color-component-02);
}

/* ── JS-driven fixed positioning — thoát overflow:hidden/scroll container ── */
.nano-dropdown__menu--js {
    position: fixed;
    top: auto;
    left: auto;
    margin-top: 0;
}

/* Ẩn panel fixed khi dropdown đã đóng (tránh :not() + descendant combinator — một số engine/linter dễ hiểu sai) */
.nano-dropdown:not(.nano-dropdown--open) > .nano-dropdown__menu.nano-dropdown__menu--js {
    top: -9999px;
    left: -9999px;
}

/* ── Mobile: bottom-sheet ── */
@media (max-width: 768px) {
    .nano-dropdown__menu {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        min-width: unset;
        width: auto;
        margin-top: 0;
        border-radius: var(--radius-base) var(--radius-base) 0 0;
        box-shadow: 0 -4px 32px color-mix(in srgb, var(--color-dark) 16%, transparent);
        z-index: calc(var(--z-overlay) + 1);
        max-height: 60vh;
        overflow-y: auto;
        transform: translateY(100%);
    }

    .nano-dropdown--open .nano-dropdown__menu {
        transform: translateY(0);
    }

    .nano-dropdown__menu--right {
        left: 0;
        right: 0;
    }

    .nano-dropdown__menu--mega {
        max-height: 78vh;
    }
}

/* ── Mega menu (wide panel under navbar trigger) ── */
.nano-dropdown--mega {
    position: relative;
}

.nano-dropdown__menu--mega {
    min-width: unset;
    width: min(56rem, calc(100vw - 1.5rem));
    max-width: none;
    padding: 0;
    border-radius: calc(var(--radius-base) * 1.5);
    box-shadow: 0 16px 48px color-mix(in srgb, var(--color-dark) 14%, transparent);
    max-height: min(32rem, calc(100vh - 5rem));
    overflow: hidden;
}

.nano-dropdown__menu--mega.nano-dropdown__menu--js {
    max-height: min(32rem, calc(100vh - 5rem));
    /* Cao hơn sticky header (thường z-index ~100) để panel không bị che */
    z-index: var(--z-sticky);
}

.nano-mega {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

.nano-mega__grid {
    display: grid;
    grid-template-columns: 11.5rem 1fr;
    min-height: 14rem;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.nano-mega__grid--no-trend {
    grid-template-columns: 1fr;
}

@media (max-width: 768px) {
    .nano-dropdown__menu--mega {
        width: auto;
        max-height: 78vh;
        border-radius: var(--radius-base) var(--radius-base) 0 0;
    }

    .nano-mega__grid {
        grid-template-columns: 1fr;
        max-height: 70vh;
        overflow-y: auto;
    }
}

.nano-mega__trend {
    background: color-mix(in srgb, var(--color-danger) 10%, var(--color-component-01));
    border-right: 1px solid var(--color-layer-02);
    padding: calc(var(--space-base) * 4);
    overflow-y: auto;
}

@media (max-width: 768px) {
    .nano-mega__trend {
        border-right: none;
        border-bottom: 1px solid var(--color-layer-02);
    }
}

.nano-mega__trend-head {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--color-danger) 85%, var(--color-foreground));
    margin: 0 0 calc(var(--space-base) * 4);
}

.nano-mega__trend-item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: calc(var(--space-base) * 2) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-danger) 12%, var(--color-layer-02));
}

.nano-mega__trend-item:last-child {
    border-bottom: none;
}

.nano-mega__trend-item:hover .nano-mega__trend-name {
    color: var(--color-primary);
}

.nano-mega__trend-name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.nano-mega__trend-new {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-success);
    margin-top: calc(var(--space-base) * 1);
}

.nano-mega__main {
    padding: calc(var(--space-base) * 4);
    overflow-y: auto;
    background: var(--color-component-01);
}

.nano-mega__main-inner {
    min-width: 0;
}

.nano-mega__main-head {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: color-mix(in srgb, var(--color-foreground) 45%, var(--color-layer-03));
    margin: 0 0 calc(var(--space-base) * 4);
}

.nano-mega__cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--space-base) * 6);
}

@media (max-width: 640px) {
    .nano-mega__cols {
        grid-template-columns: 1fr;
    }
}

.nano-mega__group {
    margin-bottom: calc(var(--space-base) * 2);
}

.nano-mega__group-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin: 0 0 calc(var(--space-base) * 2);
}

.nano-mega__group-desc {
    font-size: var(--font-size-xs);
    color: color-mix(in srgb, var(--color-foreground) 55%, var(--color-layer-03));
    margin: 0 0 calc(var(--space-base) * 3);
    line-height: 1.45;
}

.nano-mega__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nano-mega__links li {
    margin: 0 0 calc(var(--space-base) * 2);
}

.nano-mega__links a {
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-foreground) 88%, var(--color-layer-03));
    text-decoration: none;
    transition: color var(--transition-base);
}

.nano-mega__links a:hover {
    color: var(--color-primary);
}

.nano-mega__footer {
    flex-shrink: 0;
    padding: calc(var(--space-base) * 3) calc(var(--space-base) * 4);
    border-top: 1px solid var(--color-layer-02);
    background: color-mix(in srgb, var(--color-layer-01) 55%, var(--color-component-01));
}

.nano-mega__all {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.nano-mega__all:hover {
    text-decoration: underline;
}


/* ---------- Modal (model) ----------
   Modal dùng native <dialog> element — accessibility built-in,
   không cần JS để quản lý focus trap và aria.

   Width cố định 30rem (480px) là kích thước phổ biến cho dialog xác nhận,
   form ngắn. Dùng margin: auto để tự căn giữa trong dialog context.

   Backdrop màu dark opacity 40% — đủ làm mờ content bên dưới
   để người dùng tập trung vào modal, không tối quá gây cảm giác nặng nề. */

.nano-model {
    margin: auto;
    border: unset;
    background: var(--color-component-01);
    color: var(--color-foreground);
    border-radius: var(--radius-base);
    width: 30rem;
    max-width: calc(100vw - 2rem); /* prevents overflow on small screens */
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity var(--transition-base), transform var(--transition-base),
                display allow-discrete, overlay allow-discrete;

    &[open] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Entry animation — browsers that support @starting-style */
    @starting-style {
        &[open] {
            opacity: 0;
            transform: translateY(-8px) scale(0.98);
        }
    }
}

.nano-model::backdrop {
    background: var(--color-black);
    opacity: 0;
    transition: opacity var(--transition-base),
                display allow-discrete, overlay allow-discrete;
}

.nano-model[open]::backdrop {
    opacity: 0.4;
}

@starting-style {
    .nano-model[open]::backdrop {
        opacity: 0;
    }
}

.nano-model__body {
    padding: calc(var(--space-base) * 6);   /* 1.5rem đồng đều 4 phía */
    padding-bottom: 0;
}

/* Footer — nền nhạt hơn body (layer-01) để phân tách visual khu vực action */
.nano-model__footer {
    display: flex;
    gap: calc(var(--space-base) * 3);       /* 0.75rem */
    padding: calc(var(--space-base) * 3) calc(var(--space-base) * 4);  /* 0.75rem 1rem */
    align-items: center;
    justify-content: flex-end;
    margin-top: calc(var(--space-base) * 4);
    border-radius: 0 0 var(--radius-base) var(--radius-base);
    background-color: var(--color-component-01);
}

/* ---------- Table ----------
   Không định nghĩa custom property riêng trong :root vì table border/radius
   đều đã có trong share.css (--color-layer-02, --radius-base).
   Định nghĩa ở component scope chỉ tạo ra sự trùng lặp và khó bảo trì.

   box-shadow nhẹ thay vì border đầy đủ để bảng trông "nổi" khỏi nền trang
   mà không tạo ra đường kẻ cứng xung quanh. */

.nano-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    background: var(--color-component-01);
    overflow: hidden;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--color-dark) 6%, transparent);
}

.nano-table th,
.nano-table td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid var(--color-layer-02);
}

/* Header — nền component-01 để phân biệt với data rows */
.nano-table th {
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--color-component-02);
    color: var(--color-foreground);
}

.nano-table tbody tr {
    transition: background-color var(--transition-base);
}

.nano-table tbody tr:hover {
    background: var(--color-hover-overlay);
}

.nano-table tbody tr:last-child td {
    border-bottom: 1px solid var(--color-layer-03);
}

.nano-table caption {
    font-size: var(--font-size-base);
    text-align: center;
    color: var(--color-foreground);
    margin-bottom: 0.5rem;
    font-style: italic;
    caption-side: top;
}

/* Striped — row chẵn tô nền nhẹ, tạo thứ bậc thị giác dễ scan */
.nano-table.nano-table--striped tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--color-component-02) 40%, transparent);
}

.nano-table.nano-table--striped tbody tr:nth-child(even):hover {
    background: var(--color-hover-overlay);
}

.nano-table__td--hover { /*Xu ly rowspan, doc trong trong javascript*/
    background: var(--color-hover-overlay);
}

/* Bordered — border đầy đủ 4 phía, phù hợp bảng so sánh dữ liệu dày đặc */
.nano-table.nano-table--bordered th,
.nano-table.nano-table--bordered td {
    border: 1px solid var(--color-layer-02);
}

.nano-table.nano-table--bordered th {
    border-bottom: 1px solid var(--color-layer-03);
}

/* Compact — padding thu nhỏ cho bảng nhiều dữ liệu trong không gian hẹp */
.nano-table.nano-table--compact th,
.nano-table.nano-table--compact td {
    padding: 0.375rem 0.625rem;
}

/* Wrapper cho horizontal scroll trên màn hình nhỏ */
.nano-table-wrapper {
    width: 100%;
    overflow-x: auto;
}




/* ---------- Form ----------
   Text-like controls — chỉ viền dưới (phong cách IBM Carbon / underline).
   - Không áp dụng cho checkbox, radio, range, color, file (có khối riêng).
   - Focus / error: đổi màu border-bottom; không dùng outline full box để tránh “khung” 4 cạnh.
   - Input group (.nano-input-group) vẫn override viền đầy đủ — xem input-group/style.css.

   Chiều cao dùng --height-base/sm/lg để đồng bộ với button —
   khi form có button submit bên cạnh input, chúng tự khớp chiều cao. */

:is(
    .nano-input-text,
    .nano-input-password,
    .nano-input-email,
    .nano-input-number,
    .nano-input-tel,
    .nano-input-url,
    .nano-input-search,
    .nano-input-textarea,
    .nano-input-select,
    select.nano-input,
    textarea.nano-input,
    input.nano-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"])
) {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font: inherit;
    font-size: var(--font-size-base); /* 16px — prevents iOS Safari auto-zoom on focus */
    line-height: 1.4;
    color: var(--color-foreground);
    background: var(--color-component-02);
    border: none;
    border-bottom: 1px solid var(--color-layer-03);
    border-radius: var(--radius-base);
    padding: 0 1rem;
    min-height: var(--height-base);
    width: 100%;
    max-width: 100%;
    transition: border-color var(--transition-base), background-color var(--transition-base), outline var(--transition-base);
}

/* Focus — nhấn mạnh đường gạch dưới */
:is(
    .nano-input-text,
    .nano-input-password,
    .nano-input-email,
    .nano-input-number,
    .nano-input-tel,
    .nano-input-url,
    .nano-input-search,
    .nano-input-textarea,
    .nano-input-select,
    select.nano-input,
    textarea.nano-input,
    input.nano-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"])
):focus {
    outline: none;
    border-bottom-color: var(--color-primary);
    background: var(--color-component-02);
}

:is(
    .nano-input-text,
    .nano-input-password,
    .nano-input-email,
    .nano-input-number,
    .nano-input-tel,
    .nano-input-url,
    .nano-input-search,
    .nano-input-textarea,
    .nano-input-select,
    select.nano-input,
    textarea.nano-input,
    input.nano-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"])
):disabled {
    cursor: not-allowed;
    color: color-mix(in srgb, var(--color-foreground) 50%, transparent);
    background: var(--color-component-02);
    border-bottom-color: transparent;
}

/* Validation — chỉ hiện error khi đã nhập (placeholder-shown) và không đang focus */
:is(
    .nano-input-text,
    .nano-input-password,
    .nano-input-email,
    .nano-input-number,
    .nano-input-tel,
    .nano-input-url,
    .nano-input-search,
    .nano-input-textarea,
    .nano-input-select,
    select.nano-input,
    textarea.nano-input,
    input.nano-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"])
):invalid:not(:placeholder-shown):not(:focus) {
    outline: none;
    border-bottom-color: var(--color-danger);
}

.nano-input::placeholder,
.nano-input-textarea::placeholder {
    color: var(--color-secondary);
}

/* Textarea — chiều cao auto (min-height 104px = 4 dòng), resize theo chiều dọc */
.nano-input-textarea {
    height: auto;
    min-height: 104px;
    resize: vertical;
    padding: 0.6875rem 1rem !important;
    line-height: 1.5;
}

/* Select — custom chevron SVG thay vì mũi tên mặc định của browser */
.nano-input-select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 11L3 6h10l-5 5z' fill='%23161616'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px;
    cursor: pointer;
}

/* Dark mode — invert chevron (SVG background-image không dùng được CSS variable) */
@media (prefers-color-scheme: dark) {
    html:not([data-nano-theme]) .nano-input-select { filter: invert(1); }
}
html[data-nano-theme="dark"] .nano-input-select { filter: invert(1); }

/* Date / Time — picker indicator đồng nhất màu, không cho browser mặc định */
.nano-input[type="date"],
.nano-input[type="time"],
.nano-input[type="datetime-local"],
.nano-input[type="month"],
.nano-input[type="week"] {
    padding-right: 0.5rem;
}

.nano-input[type="date"]::-webkit-calendar-picker-indicator,
.nano-input[type="time"]::-webkit-calendar-picker-indicator,
.nano-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.nano-input[type="month"]::-webkit-calendar-picker-indicator,
.nano-input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.45;
    transition: opacity var(--transition-base);
    border-radius: calc(var(--radius-base) / 2);
    padding: calc(var(--space-base) / 2);
}

/* Search — ẩn nút X mặc định của browser để style đồng nhất */
.nano-input-search[type="search"]::-webkit-search-cancel-button,
.nano-input-search[type="search"]::-webkit-search-decoration {
    appearance: none;
    -webkit-appearance: none;
}

/* Number — ẩn spin buttons */
.nano-input-number[type="number"]::-webkit-outer-spin-button,
.nano-input-number[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}
.nano-input-number[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Range slider */
.nano-input[type="range"] {
    height: 4px;
    padding: 0;
    min-height: unset;
    background: var(--color-component-02);
    border: none;
    border-radius: 0;
    outline: none;
}
.nano-input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: none;
    transition: transform var(--transition-base);
}
.nano-input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: none;
    transition: transform var(--transition-base);
}
/* Color picker — giữ khung đầy đủ (ô màu), không dùng underline */
.nano-input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font: inherit;
    font-size: var(--font-size-base);
    line-height: 1.4;
    color: var(--color-foreground);
    background: var(--color-component-02);
    border: 1px solid var(--color-layer-03);
    border-radius: var(--radius-base);
    width: 100%;
    max-width: 100%;
    padding: 4px;
    height: var(--height-base);
    min-height: var(--height-base);
    cursor: pointer;
    transition: border-color var(--transition-base), background-color var(--transition-base), outline var(--transition-base);
}
.nano-input[type="color"]:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background: var(--color-component-02);
}
.nano-input[type="color"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    border-color: transparent;
}
.nano-input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.nano-input[type="color"]::-webkit-color-swatch { border: none; border-radius: 0; }
.nano-input[type="color"]::-moz-color-swatch { border: none; border-radius: 0; }

/* File input — nút chọn file dùng style của button primary */
.nano-input[type="file"] {
    padding: 0;
    height: auto;
    min-height: var(--height-base);
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
}
.nano-input[type="file"]::file-selector-button {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 0 1rem;
    height: var(--height-base);
    margin-right: 1rem;
    border: none;
    border-radius: var(--radius-base);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    cursor: pointer;
    transition: background-color var(--transition-base);
}
/* Checkbox & Radio — reset appearance về native rồi dùng accent-color để tô màu primary.
   Base .nano-input có appearance:none nên phải reset lại ở đây,
   nếu không browser sẽ render một hộp rỗng. */
.nano-input[type="checkbox"],
.nano-input[type="radio"] {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    width: 1rem;
    height: 1rem;
    min-height: unset;
    padding: 0;
    border: revert;
    background: revert;
    accent-color: var(--color-primary);
    cursor: pointer;
    vertical-align: middle;
    border-radius: 0;
}

/* ── Sizes ──────────────────────────────────────────────────────────────────
   Dùng --height-* tokens để đồng bộ với button size variants.
   sm (32px) → form nhỏ gọn, filter inline
   lg (48px) → form đăng nhập, CTA nổi bật */
.nano-input--sm,
.nano-input-text.nano-input--sm,
.nano-input-textarea.nano-input--sm,
.nano-input-select.nano-input--sm {
    height: var(--height-sm);
    min-height: var(--height-sm);
    padding: 0 1rem;
    font-size: var(--font-size-xs);
}

.nano-input--lg,
.nano-input-text.nano-input--lg,
.nano-input-textarea.nano-input--lg,
.nano-input-select.nano-input--lg {
    height: var(--height-lg);
    min-height: var(--height-lg);
    padding: 0 1rem;
    font-size: var(--font-size-base);
}

.nano-input-textarea.nano-input--sm {
    height: auto;
    min-height: 64px;
    padding: 0.5rem 1rem;
}

.nano-input-textarea.nano-input--lg {
    height: auto;
    min-height: 144px;
    padding: 0.75rem 1rem;
}

/* ── Field ──────────────────────────────────────────────────────────────────
   Field là wrapper của label + input + message.
   gap: 0.5rem giữa label và input, margin-bottom: 1.5rem giữa các field. */
.nano-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Label dùng font-size-xs và không bold — input là nhân vật chính,
   label chỉ là chú thích */
.nano-field label {
    font-size: var(--font-size-xs);
    font-weight: 400;
    letter-spacing: 0.32px;
    color: var(--color-foreground);
}

.nano-field .nano-field-message {
    font-size: var(--font-size-xs);
    letter-spacing: 0.32px;
    color: var(--color-secondary);
    margin-top: -0.25rem;
}

.nano-field.nano-field--error .nano-field-message {
    color: var(--color-danger);
}

.nano-field.nano-field--error :is(
    .nano-input-text,
    .nano-input-password,
    .nano-input-email,
    .nano-input-number,
    .nano-input-tel,
    .nano-input-url,
    .nano-input-search,
    .nano-input-textarea,
    .nano-input-select,
    select.nano-input,
    textarea.nano-input,
    input.nano-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"])
) {
    outline: none;
    border-bottom-color: var(--color-danger);
}

.nano-field.nano-field--success .nano-field-message {
    color: var(--color-success);
}

.nano-field.nano-field--success :is(
    .nano-input-text,
    .nano-input-password,
    .nano-input-email,
    .nano-input-number,
    .nano-input-tel,
    .nano-input-url,
    .nano-input-search,
    .nano-input-textarea,
    .nano-input-select,
    select.nano-input,
    textarea.nano-input,
    input.nano-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="hidden"])
) {
    outline: none;
    border-bottom-color: var(--color-success);
}

/* ── Form wrapper ───────────────────────────────────────────────────────────*/
.nano-form {
    display: flex;
    flex-direction: column;
    max-width: 28rem;
}

.nano-form .nano-field {
    margin-bottom: 1.5rem;
}

.nano-form .nano-form-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* ── Fieldset & Legend ──────────────────────────────────────────────────────*/
.nano-fieldset,
fieldset {
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    padding: 1.5rem;
    margin: 0 0 1.5rem 0;
    background: transparent;
}

.nano-legend,
legend {
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.16px;
    color: var(--color-foreground);
    padding: 0 0.5rem;
}

/* ── Output, progress, meter ────────────────────────────────────────────────*/
output {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-foreground);
}

/* Progress/meter — không dùng border-radius để trông thẳng, công nghiệp */
progress {
    width: 100%;
    height: 8px;
    border: none;
    border-radius: 0;
    background: var(--color-component-02);
    overflow: hidden;
}
progress::-webkit-progress-bar   { background: var(--color-component-02); border-radius: 0; }
progress::-webkit-progress-value { background: var(--color-primary); border-radius: 0; transition: width 0.25s ease; }
progress::-moz-progress-bar      { background: var(--color-primary); border-radius: 0; }

meter {
    width: 100%;
    height: 8px;
    border: none;
    border-radius: 0;
    background: var(--color-component-02);
    overflow: hidden;
}
meter::-webkit-meter-bar           { background: var(--color-component-02); border-radius: 0; }
meter::-webkit-meter-optimum-value { background: var(--color-success); border-radius: 0; }
meter::-moz-meter-bar              { background: var(--color-primary); border-radius: 0; }

/* ---------- List group ----------
   List group là danh sách có cấu trúc, mỗi item là một row đầy đủ chiều ngang.
   Khác với dropdown (overlay), list group nằm inline trong trang.

   border-radius: var(--radius-base) cho container, overflow: hidden để các
   item ở góc không bị tràn ra ngoài border-radius. */

.nano-list-group {
    display: flex;
    flex-direction: column;
    background: var(--color-component-01);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    overflow: hidden;
}

/* Item — padding đồng bộ với dropdown item, font-size-sm để gọn */
.nano-list-group__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    /* background: var(--color-light); */
    border-bottom: 1px solid var(--color-layer-02);
    text-decoration: none;
    transition: background-color var(--transition-base);
}

.nano-list-group__item:last-child {
    border-bottom: none;
}

.nano-list-group__item:hover {
    background: var(--color-hover-overlay);
}

.nano-list-group__item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Active — dùng layer-02 + màu primary thay vì nền đặc để không quá nặng nề */
.nano-list-group__item--active {
    background: var(--color-active-overlay);
    color: var(--color-primary);
}

.nano-list-group__item--disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Danger hover — cảnh báo hành động phá huỷ */
.nano-list-group__item--danger:hover {
    background: color-mix(in srgb, var(--color-danger) 10%, var(--color-light));
    color: var(--color-danger);
}

/* ---------- Navbar ----------
   Navbar là điểm điều hướng chính của ứng dụng, luôn nằm trên cùng.
   Nền trắng + border-bottom phân biệt với content bên dưới.

   Nav link dùng border-radius: var(--radius-base) để trông như "chip nhỏ"
   khi hover — tạo visual feedback rõ ràng mà không cần underline.
   Font-size-sm (14px) để nhiều link vừa một hàng trên màn hình nhỏ.

   Mặc định nội dung canh theo .nano-container (max-width 1024px + --grid-gutter).
   Thêm nano-navbar--fluid để full chiều ngang (hành vi trước đây).
   nano-navbar--padding: full-bleed background, inner flex row aligned with .nano-container (same 1024px + gutter inset; keep in sync if container width changes).
   */

.nano-navbar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding: 0.75rem var(--grid-gutter);
    background: var(--color-light);
    border-bottom: 1px solid var(--color-layer-02);
}

/* Full-bleed ngang viewport — cùng padding ngang với nano-container-fluid */
.nano-navbar--fluid {
    max-width: none;
}

/*
 * Full-bleed bar + inner row aligned to .nano-container (1024px + gutter).
 * max-width none + margin 0: bar spans viewport; symmetric horizontal padding
 * matches container inset so flex content lines up with page content.
 */
.nano-navbar--padding {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: max(var(--grid-gutter), calc((100% - 1024px) * 0.5 + var(--grid-gutter)));
    padding-right: max(var(--grid-gutter), calc((100% - 1024px) * 0.5 + var(--grid-gutter)));
}

/* Brand — to hơn link (font-size-lg = 20px) để nổi bật là điểm nhận diện */
.nano-navbar__brand {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-foreground);
    text-decoration: none;
    display: flex;
    gap: calc(var(--space-base) * 2);
    align-items: center;
}

.nano-navbar__nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    flex: 1;
    justify-content: flex-end;
}

/* Cụm action phụ (theme switch, user menu, …) — dùng với nano-navbar--split */
.nano-navbar__actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* Layout tách: desktop — links sát logo trái, actions phải; mobile — actions luôn hàng đầu phải, links trong panel toggler */
.nano-navbar--split .nano-navbar__brand {
    order: 1;
}

.nano-navbar--split .nano-navbar__nav {
    flex: 0 1 auto;
    justify-content: flex-start;
    order: 2;
}

.nano-navbar--split .nano-navbar__actions {
    order: 3;
    margin-left: auto;
}

.nano-navbar__link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    height: var(--height-base);
    color: var(--color-foreground);
    text-decoration: none;
    border-radius: var(--radius-base);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.nano-navbar__link:hover {
    background: var(--color-hover-overlay);
}

.nano-navbar__link--active {
    background: var(--color-active-overlay);
    font-weight: 500;
}

/* Button dùng như nav link (mega menu trigger) */
button.nano-navbar__link {
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.nano-navbar__link--mega .nano-navbar__chevron {
    margin-left: 0.35rem;
    opacity: 0.65;
    flex-shrink: 0;
}

.nano-dropdown--mega.nano-dropdown--open .nano-navbar__link--mega {
    background: color-mix(in srgb, var(--color-foreground) 8%, var(--color-component-01));
    font-weight: 600;
}

/* Toggler — kích thước var(--height-base) = 40px, vuông, bo góc đồng bộ */
.nano-navbar__toggler {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--height-base);
    height: var(--height-base);
    padding: 0;
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    background: var(--color-light);
    color: var(--color-foreground);
    cursor: pointer;
}

@media (max-width: 768px) {
    .nano-navbar__toggler {
        display: inline-flex;
    }

    .nano-navbar__nav {
        display: none;
        flex: 1 1 100%;
        width: 100%;
        order: 3;
        flex-direction: column;
        align-items: stretch;
        margin-top: 0.25rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--color-layer-02);
    }

    /* Split mobile: brand + actions luôn trên hàng bar; panel links full-width bên dưới (order 3) */
    .nano-navbar--split .nano-navbar__nav {
        order: 3;
    }

    .nano-navbar--split .nano-navbar__actions {
        order: 2;
        margin-left: auto;
        flex-shrink: 0;
    }

    .nano-navbar--split .nano-navbar__brand {
        flex-shrink: 0;
    }

    .nano-navbar__nav.nano-navbar__nav--open {
        display: flex;
    }

    .nano-navbar__link {
        justify-content: flex-start;
    }
}

/* ---------- Pagination ----------
   Pagination item dùng --height-base (40px) để đồng bộ với button và input.
   Khi pagination đặt cạnh button (ví dụ filter bar), chiều cao tự khớp nhau.

   min-width = height để item số ngắn vẫn là hình vuông,
   item dài (Next ›) tự mở rộng nhờ padding. */

.nano-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.nano-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--height-base);
    height: var(--height-base);
    padding: 0 0.5rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-foreground);
    background: var(--color-light);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.nano-pagination__item:hover {
    background: var(--color-component-02);
    border-color: var(--color-layer-03);
}

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

/* Active — nền primary đặc, không có hover effect vì là trang hiện tại */
.nano-pagination__item--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
    cursor: default;
}

.nano-pagination__item--active:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

.nano-pagination__item--disabled,
.nano-pagination__item[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Ellipsis — không có border, chỉ là text "..." căn giữa */
.nano-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--height-base);
    height: var(--height-base);
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
}

/* ---------- Spinner ----------
   Spinner dùng border trick: border đầy đủ màu nhạt,
   chỉ border-top-color đổi sang primary — tạo "cánh quay" mà không cần SVG.

   Spinner là visual indicator, KHÔNG phải touch target nên KHÔNG dùng
   --height-* tokens (dành cho button/input cần min 32px để chạm được).
   Scale spinner nhỏ hơn nhiều để phù hợp khi nhúng inline hoặc icon.

   Kích thước:
     sm   = 1.25rem / 20px — nhúng trong button, kề text
     base = 2rem    / 32px — standalone indicator
     lg   = 2.75rem / 44px — loading toàn section/trang

   border-width tỉ lệ với kích thước — spinner lớn cần stroke dày hơn
   để tỉ lệ cánh quay trông tự nhiên (không quá mảnh hay quá dày). */

.nano-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--color-layer-02);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: nano-spinner-rotate 0.7s linear infinite;
    flex-shrink: 0;
}

.nano-spinner--sm {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 1.5px;
}

.nano-spinner--lg {
    width: 2.75rem;
    height: 2.75rem;
    border-width: 3px;
}

/* Màu sắc — chỉ đổi màu cánh quay, track giữ nguyên */
.nano-spinner--secondary { border-top-color: var(--color-secondary); }
.nano-spinner--success   { border-top-color: var(--color-success); }
.nano-spinner--danger    { border-top-color: var(--color-danger); }
.nano-spinner--warning   { border-top-color: var(--color-warning); }
/* --primary là mặc định, khai báo lại để cho phép override từ ngoài */
.nano-spinner--primary   { border-top-color: var(--color-primary); }

/* Inline — dùng kề text, vertical-align căn giữa chữ */
.nano-spinner--inline {
    display: inline-block;
    vertical-align: middle;
}

@keyframes nano-spinner-rotate {
    to { transform: rotate(360deg); }
}


/* ---------- Tabs ----------
   JS adds overflow scroll arrows + ARIA attributes.

   DOM after JS init:
   .nano-tabs
     .nano-tabs__nav            ← added by JS (flex row: btn + track + btn)
       .nano-tabs__scroll-btn--left   ← added by JS
       .nano-tabs__list-track         ← added by JS (holds mask)
         .nano-tabs__list
       .nano-tabs__scroll-btn--right  ← added by JS
     .nano-tabs__panel[s]

   The nav's border-bottom draws the full-width gray indicator line.
   The track uses margin-bottom:-2px to let active tab's border overlap it. */

/* ── Nav wrapper (added by JS) ── */
.nano-tabs__nav {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid var(--color-layer-03);
}

/* ── Scroll arrow buttons ── */
.nano-tabs__scroll-btn {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    border: none;
    background: transparent;
    color: var(--color-secondary);
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-base), background-color var(--transition-base);

    &:hover {
        color: var(--color-foreground);
        background: color-mix(in srgb, var(--color-layer-03) 60%, transparent);
    }

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

.nano-tabs__nav.has-fade-left  .nano-tabs__scroll-btn--left  { display: flex; }
.nano-tabs__nav.has-fade-right .nano-tabs__scroll-btn--right { display: flex; }

/* ── Track (mask wrapper) ── */
.nano-tabs__list-track {
    flex: 1;
    min-width: 0;
    position: relative;
    margin-bottom: -2px; /* extend into nav border so active tab border overlaps it */
    -webkit-mask-image: none;
    mask-image: none;
}

.nano-tabs__nav.has-fade-left:not(.has-fade-right) .nano-tabs__list-track {
    -webkit-mask-image: linear-gradient(to right, transparent, black 3rem);
    mask-image: linear-gradient(to right, transparent, black 3rem);
}

.nano-tabs__nav.has-fade-right:not(.has-fade-left) .nano-tabs__list-track {
    -webkit-mask-image: linear-gradient(to left, transparent, black 3rem);
    mask-image: linear-gradient(to left, transparent, black 3rem);
}

.nano-tabs__nav.has-fade-left.has-fade-right .nano-tabs__list-track {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 3rem,
        black calc(100% - 3rem),
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        black 3rem,
        black calc(100% - 3rem),
        transparent
    );
}

/* ── List ── */
.nano-tabs__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.25rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Reserve the bottom indicator line before JS enhancement to avoid
       a visible "jump" when the nav wrapper is injected. */
    border-bottom: 2px solid var(--color-layer-03);
}

.nano-tabs__list-track .nano-tabs__list {
    border-bottom: 0;
}

.nano-tabs__list::-webkit-scrollbar {
    display: none;
}

/* ── Tab button ── */
.nano-tabs__tab {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.625rem 1rem;
    font-weight: 500;
    color: var(--color-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.nano-tabs__tab:hover {
    color: var(--color-foreground);
}

.nano-tabs__tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    border-radius: var(--radius-base) var(--radius-base) 0 0;
}

.nano-tabs__tab.nano-tabs__tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ── Panel ── */
.nano-tabs__panel {
    display: none;
    padding: 1rem 0;
}

.nano-tabs__panel.nano-tabs__panel--active {
    display: block;
}


/* ---------- HStack ----------
   Horizontal scrollable stack with fade masks and scroll arrows,
   reusing the same overflow UX pattern as Tabs.

   Chứa bất kỳ phần tử nào bên trong — card, button, avatar, chip, v.v.
   JS tự động bọc .nano-hstack__list trong nav > track structure
   và thêm scroll buttons khi nội dung overflow. */

/* ── Nav wrapper (added by JS) ── */
.nano-hstack__nav {
    display: flex;
    align-items: stretch;
}

/* ── Scroll arrow buttons ── */
.nano-hstack__scroll-btn {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    border: none;
    background: transparent;
    color: var(--color-secondary);
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-base), background-color var(--transition-base);

    &:hover {
        color: var(--color-foreground);
        background: color-mix(in srgb, var(--color-layer-03) 60%, transparent);
    }

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

.nano-hstack__nav.has-fade-left  .nano-hstack__scroll-btn--left  { display: flex; }
.nano-hstack__nav.has-fade-right .nano-hstack__scroll-btn--right { display: flex; }

/* ── Track (mask wrapper) ── */
.nano-hstack__track {
    flex: 1;
    min-width: 0;
    position: relative;
    -webkit-mask-image: none;
    mask-image: none;
}

.nano-hstack__nav.has-fade-left:not(.has-fade-right) .nano-hstack__track {
    -webkit-mask-image: linear-gradient(to right, transparent, black 3rem);
    mask-image: linear-gradient(to right, transparent, black 3rem);
}

.nano-hstack__nav.has-fade-right:not(.has-fade-left) .nano-hstack__track {
    -webkit-mask-image: linear-gradient(to left, transparent, black 3rem);
    mask-image: linear-gradient(to left, transparent, black 3rem);
}

.nano-hstack__nav.has-fade-left.has-fade-right .nano-hstack__track {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 3rem,
        black calc(100% - 3rem),
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        black 3rem,
        black calc(100% - 3rem),
        transparent
    );
}

/* ── List ── */
.nano-hstack__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    gap: calc(var(--space-base) * 3);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nano-hstack__list::-webkit-scrollbar {
    display: none;
}

/* ── Gap variants ── */
.nano-hstack--gap-0 .nano-hstack__list { gap: 0; }
.nano-hstack--gap-1 .nano-hstack__list { gap: var(--space-base); }
.nano-hstack--gap-2 .nano-hstack__list { gap: calc(var(--space-base) * 2); }
.nano-hstack--gap-3 .nano-hstack__list { gap: calc(var(--space-base) * 3); }
.nano-hstack--gap-4 .nano-hstack__list { gap: calc(var(--space-base) * 4); }
.nano-hstack--gap-6 .nano-hstack__list { gap: calc(var(--space-base) * 6); }
.nano-hstack--gap-8 .nano-hstack__list { gap: calc(var(--space-base) * 8); }

/* ---------- Tooltip ----------
   Tooltip là thông tin bổ sung khi hover/focus — không phải nội dung chính.
   Font-size-xs (12px) thay vì sm vì tooltip thường 1 câu ngắn,
   kích thước nhỏ gợi tính "chú thích", không cạnh tranh với UI chính.

   pointer-events: none để không chặn click vào element bên dưới. */

.nano-tooltip {
    position: relative;
    display: inline-flex;
}

.nano-tooltip__content {
    position: absolute;
    z-index: var(--z-dropdown);
    padding: 0.375rem 0.625rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-light);
    background: var(--color-dark);
    border-radius: var(--radius-base);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.nano-tooltip:hover .nano-tooltip__content,
.nano-tooltip:focus-within .nano-tooltip__content {
    opacity: 1;
    visibility: visible;
}

/* Top (mặc định) */
.nano-tooltip__content {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.375rem;
}

/* Bottom */
.nano-tooltip__content--bottom {
    bottom: auto;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
    margin-top: 0.375rem;
}

/* Left */
.nano-tooltip__content--left {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
    margin-right: 0.375rem;
}

/* Right */
.nano-tooltip__content--right {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
    margin-left: 0.375rem;
}

/* JS-driven fixed positioning — overrides absolute position so the tooltip
   escapes overflow:hidden/scroll containers and stays within the viewport.
   JS adds this class on mouseenter, removes on mouseleave.
   Double-class selector ensures specificity beats all position modifier rules. */
.nano-tooltip__content.nano-tooltip__content--js,
.nano-tooltip:hover .nano-tooltip__content.nano-tooltip__content--js,
.nano-tooltip:focus-within .nano-tooltip__content.nano-tooltip__content--js {
    position: fixed;
    bottom: auto;
    right: auto;
    margin: 0;
    transform: none;
}

.nano-tooltip__content.nano-tooltip__content--js {
    top: -9999px;
    left: -9999px;
}

/* Fix loi tooltip boc avatar trong avatar group */
.nano-avatar-group .nano-tooltip {
    margin-left: -0.625rem;
    transition: transform var(--transition-base), z-index 0s;

    &:first-child { margin-left: 0; }
}


/* ---------- Toggle / Switch ---------- */

.nano-toggle {
    --toggle-width: 2.75rem;
    --toggle-height: 1.5rem;
    --toggle-color: var(--color-success);

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;

    &:has(.nano-toggle__input:disabled) {
        cursor: not-allowed;
    }

    .nano-toggle__input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
    }

    .nano-toggle__track {
        position: relative;
        flex-shrink: 0;
        width: var(--toggle-width);
        height: var(--toggle-height);
        border-radius: 999px;
        background: var(--color-layer-03);
        transition: background var(--transition-base);

        &::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: calc(var(--toggle-height) - 4px);
            height: calc(var(--toggle-height) - 4px);
            border-radius: 50%;
            background: var(--color-success-contrast);
            box-shadow: 0 1px 3px color-mix(in srgb, var(--color-dark) 25%, transparent);
            transition: transform var(--transition-base);
        }
    }

    .nano-toggle__input:checked + .nano-toggle__track {
        background: var(--toggle-color);

        &::after {
            transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
        }
    }

    .nano-toggle__input:focus-visible + .nano-toggle__track {
        outline: 2px solid var(--toggle-color);
        outline-offset: 2px;
    }

    .nano-toggle__input:disabled + .nano-toggle__track {
        opacity: 0.45;
        pointer-events: none;
    }

    .nano-toggle__label {
        font-size: var(--font-size-sm);
        color: var(--color-foreground);
        line-height: 1.4;
    }
}

/* ── Sizes ── */
.nano-toggle--sm {
    --toggle-width: 2.25rem;
    --toggle-height: 1.125rem;

    .nano-toggle__label { font-size: var(--font-size-xs); }
}

.nano-toggle--lg {
    --toggle-width: 3.5rem;
    --toggle-height: 1.875rem;

    .nano-toggle__label { font-size: var(--font-size-base); }
}

/* ── Color variants ── */
.nano-toggle--success { --toggle-color: var(--color-success); }
.nano-toggle--danger  { --toggle-color: var(--color-danger); }
.nano-toggle--warning { --toggle-color: var(--color-warning); }


/* ---------- Stepper ---------- */

.nano-stepper {
    --stepper-size: 2rem;
    --stepper-color: var(--color-primary);

    display: flex;
    align-items: flex-start;
}

/* ── Item ── */
.nano-stepper__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &:is(button) {
        appearance: none;
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;

        &:focus-visible {
            outline: 2px solid var(--stepper-color);
            outline-offset: 4px;
            border-radius: var(--radius-base);
        }
    }

    &:not(:last-child)::after {
        content: '';
        position: absolute;
        top: calc(var(--stepper-size) / 2 - 1px);
        left: 50%;
        width: 100%;
        height: 2px;
        background: var(--color-component-02);
        z-index: 0;
        transition: background var(--transition-base);
    }

    &.nano-stepper__item--completed::after {
        background: var(--stepper-color);
    }
}

/* ── Indicator ── */
.nano-stepper__indicator {
    position: relative;
    z-index: 1;
    width: var(--stepper-size);
    height: var(--stepper-size);
    border-radius: 50%;
    border: 2px solid var(--color-layer-02);
    background: var(--color-light);
    color: var(--color-layer-03);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    flex-shrink: 0;
    cursor: default;
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);

    svg {
        width: calc(var(--stepper-size) * 0.45);
        height: calc(var(--stepper-size) * 0.45);
    }
}

/* ── States ── */
.nano-stepper__item--active .nano-stepper__indicator {
    border-color: var(--stepper-color);
    color: var(--stepper-color);
    background: color-mix(in srgb, var(--stepper-color) 8%, var(--color-light));
}

.nano-stepper__item--completed .nano-stepper__indicator {
    border-color: var(--stepper-color);
    background: var(--stepper-color);
    color: var(--color-primary-contrast);
}

/* ── Label ── */
.nano-stepper__label {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.125rem;
}

.nano-stepper__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-foreground);
    line-height: 1.3;

    .nano-stepper__item--active & { color: var(--stepper-color); }
}

.nano-stepper__desc {
    font-size: var(--font-size-xs);
    color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
    line-height: 1.4;
}

/* ── Sizes ── */
.nano-stepper--sm {
    --stepper-size: 1.5rem;

    .nano-stepper__indicator { font-size: var(--font-size-xs); }
    .nano-stepper__title     { font-size: var(--font-size-xs); }
}

.nano-stepper--lg {
    --stepper-size: 2.75rem;

    .nano-stepper__indicator { font-size: var(--font-size-base); }
    .nano-stepper__title     { font-size: var(--font-size-base); }
}

/* ── Vertical ── */
.nano-stepper--vertical {
    flex-direction: column;

    .nano-stepper__item {
        flex: none;
        flex-direction: row;
        align-items: flex-start;
        gap: 0.875rem;
        width: 100%;

        &:not(:last-child) {
            padding-bottom: 1.5rem;

            &::after {
                top: var(--stepper-size);
                left: calc(var(--stepper-size) / 2 - 1px);
                width: 2px;
                height: calc(100% - var(--stepper-size));
            }
        }
    }

    .nano-stepper__label {
        margin-top: 0;
        padding-top: calc((var(--stepper-size) - 1.3em * var(--font-size-sm)) / 2);
        align-items: flex-start;
        text-align: left;
    }
}


/* ---------- Empty State ---------- */

.nano-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    max-width: 30rem;
    margin-inline: auto;
}

/* ── Icon wrapper ─────────────────────────────────────────────────────── */
.nano-empty__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--color-component-01);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
    color: var(--color-layer-03);

    svg, img {
        width: 2.25rem;
        height: 2.25rem;
    }
}

/* ── Typography ───────────────────────────────────────────────────────── */
.nano-empty__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-foreground);
    margin-bottom: 0.375rem;
    line-height: 1.4;
}

.nano-empty__desc {
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
    line-height: 1.6;
    margin-bottom: 1.5rem;

    /* Khi không có actions thì không cần margin bottom */
    &:last-child { margin-bottom: 0; }
}

/* ── Actions ──────────────────────────────────────────────────────────── */
.nano-empty__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Color variants — đổi màu icon wrapper theo ngữ cảnh ─────────────── */
.nano-empty--primary .nano-empty__icon {
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-light));
    color: var(--color-primary);
}

.nano-empty--success .nano-empty__icon {
    background: color-mix(in srgb, var(--color-success) 8%, var(--color-light));
    color: var(--color-success);
}

.nano-empty--warning .nano-empty__icon {
    background: color-mix(in srgb, var(--color-warning) 8%, var(--color-light));
    color: var(--color-warning);
}

.nano-empty--danger .nano-empty__icon {
    background: color-mix(in srgb, var(--color-danger) 8%, var(--color-light));
    color: var(--color-danger);
}

/* ── Compact — dùng bên trong table, card, panel nhỏ ─────────────────── */
.nano-empty--compact {
    padding: 1.5rem 1rem;

    .nano-empty__icon {
        width: 3rem;
        height: 3rem;
        margin-bottom: 0.75rem;

        svg, img {
            width: 1.5rem;
            height: 1.5rem;
        }
    }

    .nano-empty__title {
        font-size: var(--font-size-sm);
        margin-bottom: 0.25rem;
    }

    .nano-empty__desc {
        font-size: var(--font-size-xs);
        margin-bottom: 1rem;
    }
}


/* ---------- Skeleton ---------- */

@keyframes nano-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

@keyframes nano-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.nano-skeleton {
    display: block;
    border-radius: var(--radius-base);
    background: linear-gradient(
        90deg,
        var(--color-component-02) 25%,
        var(--color-component-03) 50%,
        var(--color-component-02) 75%
    );
    background-size: 400% 100%;
    animation: nano-shimmer 1.6s ease-in-out infinite;
    width: 100%;
    height: 1rem;
    flex-shrink: 0;
}

/* ── Shapes ── */
.nano-skeleton--text {
    height: 0.875rem;
    border-radius: 999px;
}

.nano-skeleton--circle {
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

.nano-skeleton--pill {
    border-radius: 999px;
}

/* ── Sizes ── */
.nano-skeleton--xs { height: 0.625rem; }
.nano-skeleton--lg { height: 1.5rem; }
.nano-skeleton--xl { height: 2rem; }

.nano-skeleton--circle.nano-skeleton--sm {
    width: 2rem;
    height: 2rem;
}

.nano-skeleton--circle.nano-skeleton--lg {
    width: 3.5rem;
    height: 3.5rem;
}

/* ── Pulse variant ── */
.nano-skeleton--pulse {
    background: var(--color-component-02);
    animation: nano-pulse 1.6s ease-in-out infinite;
}


/* ---------- Popover ---------- */

.nano-popover-wrap {
    position: relative;
    display: inline-block;
}

/* ── Panel ── */
.nano-popover {
    position: absolute;
    z-index: var(--z-sticky);
    min-width: 14rem;
    max-width: 22rem;
    width: max-content;
    background: var(--color-light);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    /* Mặc định: bottom — panel xuất hiện bên dưới trigger */
    top: calc(100% + 0.625rem);
    left: 50%;
    transform: translateX(-50%);

    opacity: 0;
    pointer-events: none;

    /* Arrow mặc định — nằm trên cùng panel, chỉ lên trigger */
    &::before {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background: var(--color-light);
        border: 1px solid var(--color-layer-02);
        transform: rotate(45deg);
        top: -6px;
        left: 50%;
        margin-left: -5px;
        border-bottom: none;
        border-right: none;
    }

    &.nano-popover--open {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── Top placement ── */
.nano-popover.nano-popover--top {
    top: auto;
    bottom: calc(100% + 0.625rem);
    transform: translateX(-50%);

    &::before {
        top: auto;
        bottom: -6px;
        border-top: none;
        border-left: none;
        border-bottom: 1px solid var(--color-layer-02);
        border-right: 1px solid var(--color-layer-02);
    }
}

/* ── Right placement ── */
.nano-popover.nano-popover--right {
    top: 50%;
    left: calc(100% + 0.625rem);
    transform: translateY(-50%);

    &::before {
        top: 50%;
        left: -6px;
        margin-left: 0;
        margin-top: -5px;
        border-top: none;
        border-right: none;
        border-bottom: 1px solid var(--color-layer-02);
        border-left: 1px solid var(--color-layer-02);
    }
}

/* ── Left placement ── */
.nano-popover.nano-popover--left {
    top: 50%;
    left: auto;
    right: calc(100% + 0.625rem);
    transform: translateY(-50%);

    &::before {
        top: 50%;
        left: auto;
        right: -6px;
        margin-left: 0;
        margin-top: -5px;
        border-bottom: none;
        border-left: none;
        border-top: 1px solid var(--color-layer-02);
        border-right: 1px solid var(--color-layer-02);
    }
}

/* ── JS-driven fixed positioning — thoát overflow:hidden/scroll container ── */
.nano-popover.nano-popover--js,
.nano-popover.nano-popover--js.nano-popover--top,
.nano-popover.nano-popover--js.nano-popover--left,
.nano-popover.nano-popover--js.nano-popover--right {
    position: fixed;
    bottom: auto;
    right: auto;
    transform: none;
}

.nano-popover.nano-popover--js:not(.nano-popover--open) {
    top: -9999px;
    left: -9999px;
}

/* ── Sections ── */
.nano-popover__header {
    padding: 0.75rem 1rem 0.625rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-foreground);
    border-bottom: 1px solid var(--color-layer-02);
}

.nano-popover__body {
    padding: 0.875rem 1rem;
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    line-height: 1.6;
}

.nano-popover__footer {
    padding: 0.625rem 1rem 0.75rem;
    border-top: 1px solid var(--color-layer-02);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}


/* ---------- Rating ---------- */

.nano-rating {
    --star-size: 1.5rem;
    --star-color-empty:  var(--color-layer-03);
    --star-color-filled: var(--color-warning);

    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

/* ── Star button ── */
.nano-rating__star {
    font-size: var(--star-size);
    color: var(--star-color-empty);
    background: none;
    border: none;
    padding: 0.125rem;
    cursor: pointer;
    transition: color var(--transition-base), transform var(--transition-base);
    user-select: none;

    &:focus-visible {
        outline: 2px solid var(--star-color-filled);
        outline-offset: 2px;
        border-radius: 2px;
    }

    &.nano-rating__star--hover {
        color: color-mix(in srgb, var(--star-color-filled) 65%, var(--color-light));
        transform: scale(1.15);
    }

    &.nano-rating__star--active {
        color: var(--star-color-filled);
    }
}

/* ── Sizes ── */
.nano-rating--sm { --star-size: 1.125rem; }
.nano-rating--lg { --star-size: 2.25rem; }

/* ── Read-only ── */
.nano-rating--readonly {
    pointer-events: none;

    .nano-rating__star {
        cursor: default;
        padding: 0.0625rem;

        &.nano-rating__star--hover { transform: none; }
    }
}

/* ── Half-star (read-only display) ── */
.nano-rating__star--half {
    position: relative;
    color: var(--star-color-empty);

    &::before {
        content: '★';
        position: absolute;
        left: 0.125rem;
        top: 0.125rem;
        width: 50%;
        overflow: hidden;
        color: var(--star-color-filled);
    }
}

/* ── Label (count / text kèm theo) ── */
.nano-rating__label {
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-foreground) 55%, transparent);
    margin-left: 0.375rem;
}


/* ---------- Timeline ---------- */

.nano-timeline {
    --tl-dot-size: 0.625rem;
    --tl-icon-size: 2rem;
    --tl-col-width: 2rem;
    --tl-color: var(--color-primary);
    --tl-line-color: var(--color-layer-02);

    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* ── Item layout ── */
.nano-timeline__item {
    display: grid;
    grid-template-columns: var(--tl-col-width) 1fr;
    gap: 0 0.875rem;
}

/* ── Aside: indicator + connector line ── */
.nano-timeline__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nano-timeline__item:not(:last-child) .nano-timeline__aside::after {
    content: '';
    flex: 1;
    width: 2px;
    min-height: 0.5rem;
    margin-top: 0.375rem;
    background: var(--tl-line-color);
}

.nano-timeline__item:not(:last-child) .nano-timeline__aside:has(.nano-timeline__icon)::after {
    margin-top: 0.25rem;
}

/* ── Dot ── */
.nano-timeline__dot {
    flex-shrink: 0;
    width: var(--tl-dot-size);
    height: var(--tl-dot-size);
    border-radius: 50%;
    background: var(--tl-color);
    margin-top: 0.45rem;

    /* Outlined dot — trạng thái chưa hoàn thành / pending */
    &.nano-timeline__dot--outline {
        background: var(--color-light);
        border: 2px solid var(--tl-line-color);
    }

    /* Active dot — bước hiện tại */
    &.nano-timeline__dot--active {
        width: 0.875rem;
        height: 0.875rem;
        margin-top: 0.325rem;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-color) 20%, var(--color-light));
    }

    /* Color variants */
    &.nano-timeline__dot--success { background: var(--color-success); }
    &.nano-timeline__dot--warning { background: var(--color-warning); }
    &.nano-timeline__dot--danger  { background: var(--color-danger);  }
    &.nano-timeline__dot--gray    { background: var(--color-layer-03); }
}

/* ── Icon indicator ── */
.nano-timeline__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tl-icon-size);
    height: var(--tl-icon-size);
    border-radius: 50%;
    background: color-mix(in srgb, var(--tl-color) 12%, var(--color-light));
    color: var(--tl-color);

    /* Filled variant */
    &.nano-timeline__icon--filled {
        background: var(--tl-color);
        color: var(--color-light);
    }

    /* Color variants */
    &.nano-timeline__icon--primary { --tl-color: var(--color-primary); }
    &.nano-timeline__icon--success { --tl-color: var(--color-success); }
    &.nano-timeline__icon--warning { --tl-color: var(--color-warning); }
    &.nano-timeline__icon--danger  { --tl-color: var(--color-danger);  }
    &.nano-timeline__icon--gray    { --tl-color: var(--color-layer-03); color: var(--color-foreground, #1a1a1a); }
}

/* ── Body content ── */
.nano-timeline__body {
    padding-bottom: 1.5rem;

    .nano-timeline__item:last-child & {
        padding-bottom: 0;
    }
}

.nano-timeline__time {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    margin-bottom: 0.25rem;
}

.nano-timeline__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: inherit;
}

.nano-timeline__desc {
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    margin: 0;
}


/* ---------- OTP / PIN Input ---------- */

.nano-otp {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

.nano-otp__box {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-align: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    background: var(--color-component-01);
    border: none;
    border-bottom: 2px solid var(--color-layer-03);
    border-radius: var(--radius-base);
    color: var(--color-foreground);
    outline: none;
    cursor: text;
    transition: background-color var(--transition-base), outline var(--transition-base);

    &:hover { background: var(--color-component-02); }

    &:focus {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
        background: var(--color-component-01);
    }

    /* Hide number spinners */
    &[type="number"]::-webkit-outer-spin-button,
    &[type="number"]::-webkit-inner-spin-button { appearance: none; }
    &[type="number"] { appearance: textfield; }
}

/* ── Separator (dấu gạch giữa nhóm) ── */
.nano-otp__sep {
    color: var(--color-layer-03);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1;
    user-select: none;
}

/* ── States ── */
.nano-otp--error .nano-otp__box {
    outline: 2px solid var(--color-danger);
    outline-offset: -2px;
    border-bottom-color: transparent;
}

.nano-otp--success .nano-otp__box {
    outline: 2px solid var(--color-success);
    outline-offset: -2px;
    border-bottom-color: transparent;
}

/* ── Sizes ── */
.nano-otp--sm .nano-otp__box {
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--font-size-base);
}

.nano-otp--lg .nano-otp__box {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.5rem;
}


/* ---------- Custom DateTime Picker ---------- */

/* ── Wrapper ── */
.nano-datetime {
    position: relative;
    display: inline-block;
    width: 100%;
}

.nano-datetime__field {
    position: relative;
}

/* Icon button injected by JS */
.nano-datetime__icon-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-foreground);
    opacity: 0.45;
    padding: 0;
    transition: opacity var(--transition-base);

    &:hover { opacity: 0.8; }
}

/* Dark mode — invert icon vì SVG background-image không dùng được CSS variable */
@media (prefers-color-scheme: dark) {
    html:not([data-nano-theme]) .nano-datetime__field::after { filter: invert(1); }
}
html[data-nano-theme="dark"] .nano-datetime__field::after { filter: invert(1); }

.nano-datetime__input {
    /* Hidden — used only as ISO value carrier for form submission */
    display: none !important;
}

/* ── Custom segment display ── */
.nano-datetime__seg {
    display: flex;
    align-items: center;
    padding-right: 2.5rem; /* room for icon button */
    cursor: default;
    user-select: none;
    outline: none;

    &:focus-within,
    &:focus {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }
}

.nano-datetime__seg-part {
    padding: 0 2px;
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
    color: var(--color-secondary);
    min-width: 1ch;
    text-align: center;

    &.is-filled { color: var(--color-foreground); }

    &.is-active {
        background: var(--color-primary);
        color: var(--color-light);
        border-radius: 2px;
    }
}

.nano-datetime__seg-sep {
    color: var(--color-secondary);
    flex-shrink: 0;
}

/* ── Panel ── */
.nano-datetime__panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    z-index: var(--z-overlay);
    width: 18rem;
    background: var(--color-light);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-dark) 10%, transparent);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity var(--transition-base), transform var(--transition-base);

    &.nano-datetime__panel--open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
}

/* ── Header ── */
.nano-datetime__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.5rem 0.5rem;
    gap: 0.25rem;
}

.nano-datetime__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-base);
    cursor: pointer;
    font-size: 1.125rem;
    color: var(--color-foreground, #1a1a1a);
    transition: background var(--transition-base);

    &:hover { background: var(--color-hover-overlay); }
    &:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
}

.nano-datetime__title {
    flex: 1;
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-base);
    color: var(--color-foreground, #1a1a1a);
    transition: background var(--transition-base);

    &:hover { background: var(--color-hover-overlay); }
    &:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
}

/* ── Weekday labels ── */
.nano-datetime__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 0.5rem 0.25rem;

    span {
        text-align: center;
        font-size: var(--font-size-xs);
        color: var(--color-secondary);
        padding: 0.125rem 0;
    }
}

/* ── Days grid ── */
.nano-datetime__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 0.5rem 0.25rem;
    gap: 1px;
}

.nano-datetime__day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: var(--font-size-xs);
    cursor: pointer;
    color: inherit;
    transition: background var(--transition-base), color var(--transition-base);

    &:hover:not(:disabled):not(.is-selected) { background: var(--color-hover-overlay); }
    &:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

    &.is-today {
        font-weight: 700;
        color: var(--color-primary);
    }

    &.is-selected {
        background: var(--color-primary);
        color: var(--color-primary-contrast);
        font-weight: 600;
    }

    &.is-outside {
        color: var(--color-layer-03);
    }

    &:disabled {
        opacity: 0.3;
        cursor: default;
    }
}

/* ── Months grid ── */
.nano-datetime__months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0.25rem 0.5rem 0.5rem;
    gap: 4px;
}

.nano-datetime__month {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: inherit;
    transition: background var(--transition-base), color var(--transition-base);

    &:hover { background: var(--color-hover-overlay); }
    &:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

    &.is-current {
        font-weight: 600;
        color: var(--color-primary);
    }

    &.is-selected {
        background: var(--color-primary);
        color: var(--color-primary-contrast);
        font-weight: 600;
    }
}

/* ── Time section wrapper (embedded in datetime) ── */
.nano-datetime__time {
    border-top: 1px solid var(--color-layer-02);
}

/* ── Drum / Scroll Time Picker ── */
.nano-datetime__drum {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    gap: 0.125rem;

    /* Fade edges to mask non-centered items */
    &::before,
    &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 35%;
        pointer-events: none;
        z-index: 2;
    }
    &::before {
        top: 0;
        background: linear-gradient(to bottom, var(--color-light) 10%, transparent);
    }
    &::after {
        bottom: 0;
        background: linear-gradient(to top, var(--color-light) 10%, transparent);
    }
}

/* Non-scrolling center highlight band */
.nano-datetime__drum-highlight {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    height: 2.5rem;
    background: var(--color-component-01);
    border-radius: var(--radius-base);
    pointer-events: none;
    z-index: 0;
}

/* Clipping viewport for the drum track */
.nano-datetime__drum-col {
    height: calc(2.5rem * 5);
    overflow: hidden;
    position: relative;
    z-index: 1;
    flex: 1;
    cursor: grab;
    user-select: none;

    &:active { cursor: grabbing; }
}

/* Compact variant (embedded in datetime panel) shows 3 items */
.nano-datetime__drum--compact .nano-datetime__drum-col {
    height: calc(2.5rem * 3);
}

/* Moving track — transformed by JS physics engine */
.nano-datetime__drum-track {
    will-change: transform;
}

/* Top/bottom spacers allow first and last items to reach center */
.nano-datetime__drum-spacer {
    height: calc(2.5rem * 2); /* 2 items — for 5-visible drum */
    pointer-events: none;
}

.nano-datetime__drum--compact .nano-datetime__drum-spacer {
    height: 2.5rem; /* 1 item — for 3-visible drum */
}

.nano-datetime__drum-item {
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--color-layer-04);
    cursor: pointer;
    user-select: none;

    &.is-selected {
        color: var(--color-foreground);
        font-weight: 700;
    }
}

.nano-datetime__drum-sep {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-layer-03);
    flex-shrink: 0;
    z-index: 1;
    padding: 0 0.125rem;
    pointer-events: none; /* let scroll events pass through to columns */
}

/* ── Footer ── */
.nano-datetime__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.625rem;
    border-top: 1px solid var(--color-layer-02);
}

/* ── Time-only: panel width to fit wider drum columns ── */
.nano-datetime[data-nano-type="time"] .nano-datetime__panel {
    width: 16rem;
}

/* ── JS-driven fixed positioning — thoát overflow:hidden/scroll container ── */
.nano-datetime__panel--js {
    position: fixed;
    top: auto;
    left: auto;
}

/* ── Mobile: full-width panel on small screens ── */
@media (max-width: 768px) {
    .nano-datetime__panel {
        position: fixed;
        left: 0.75rem;
        right: 0.75rem;
        top: auto;
        width: auto;
        bottom: 1rem;
        transform: translateY(8px);
        border-radius: var(--radius-base);
        box-shadow: 0 8px 32px color-mix(in srgb, var(--color-dark) 20%, transparent);
    }

    .nano-datetime__panel.nano-datetime__panel--open {
        transform: translateY(0);
    }

    /* Time-only inherits fixed positioning, reset explicit width */
    .nano-datetime[data-nano-type="time"] .nano-datetime__panel {
        width: auto;
    }

    /* Year drum column needs more space for 4-digit numbers */
    .nano-datetime__drum-col[data-drum="year"] {
        flex: 1.4;
    }
}

/* ── Segment Input ──
   Replaces the plain <input> visually; JS inserts this into .nano-datetime__field.
   Replicates nano-input appearance so the field looks identical. */
.nano-datetime__segments {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--height-base);
    padding: 0 2.5rem 0 1rem; /* matches nano-input padding */
    border: none;
    border-bottom: 1px solid var(--color-layer-03);
    border-radius: var(--radius-base);
    background: var(--color-component-01);
    font-size: var(--font-size-sm);
    box-sizing: border-box;
    cursor: text;
    user-select: none;
    outline: none;
    transition: background-color var(--transition-base), outline var(--transition-base);

    &:focus-within,
    &:focus {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
        background: var(--color-component-01);
    }
}

/* Individual editable segment (DD, MM, YYYY, HH, MI) */
.nano-datetime__seg {
    padding: 1px 3px;
    border-radius: 3px;
    min-width: 1.6ch;
    text-align: center;
    cursor: default;
    outline: none;

    &.is-empty {
        color: var(--color-layer-03);
    }

    &.is-focused {
        background: var(--color-primary);
        color: var(--color-primary-contrast);
    }
}

/* Separator characters (/, :, space) between segments */
.nano-datetime__seg-sep {
    color: var(--color-layer-03);
    padding: 0 1px;
    flex-shrink: 0;
    user-select: none;
}


/* ---------- Divider ----------
   A thin visual separator to divide content sections.

   Three modes:
   - Default: horizontal block element, full width
   - --vertical: inline separator, self-stretching inside a flex container
   - --label: two flanking lines with centered text in between

   Uses --color-layer-02 (neutral gray) so the divider reads clearly
   on both white and off-white backgrounds without being distracting. */

.nano-divider {
    border: none;
    border-top: 1px solid var(--color-layer-02);
    margin: 1.5rem 0;
    height: 0;
}

/* Vertical — place inside a flex container */
.nano-divider--vertical {
    border: none;
    border-left: 1px solid var(--color-layer-02);
    width: 0;
    height: auto;
    align-self: stretch;
    margin: 0 1rem;
    display: inline-block;
}

/* With label — two flanking lines around centered text */
.nano-divider--label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: none;
    height: auto;
    margin: 1.5rem 0;
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    white-space: nowrap;

    &::before,
    &::after {
        content: '';
        flex: 1;
        border-top: 1px solid var(--color-layer-02);
    }
}


/* ---------- Drawer ---------- */

/* ── Container ── */
.nano-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    pointer-events: none;

    &.nano-drawer--open {
        pointer-events: auto;
    }
}

/* ── Backdrop ── */
.nano-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-dark) 48%, transparent);
    opacity: 0;
    transition: opacity 0.25s ease;

    .nano-drawer--open & { opacity: 1; }
}

/* ── Panel base ── */
.nano-drawer__panel {
    position: absolute;
    background: var(--color-light);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease;
}

/* ── Right (default) ── */
.nano-drawer--right .nano-drawer__panel,
.nano-drawer:not([class*="nano-drawer--left"]):not([class*="nano-drawer--top"]):not([class*="nano-drawer--bottom"]) .nano-drawer__panel {
    top: 0; right: 0; bottom: 0;
    width: 22rem;
    transform: translateX(100%);
    box-shadow: -4px 0 24px color-mix(in srgb, var(--color-dark) 12%, transparent);

    .nano-drawer--open & { transform: translateX(0); }
}

/* ── Left ── */
.nano-drawer--left .nano-drawer__panel {
    top: 0; left: 0; bottom: 0;
    width: 22rem;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px color-mix(in srgb, var(--color-dark) 12%, transparent);

    .nano-drawer--open & { transform: translateX(0); }
}

/* ── Top ── */
.nano-drawer--top .nano-drawer__panel {
    top: 0; left: 0; right: 0;
    height: 18rem;
    transform: translateY(-100%);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--color-dark) 12%, transparent);

    .nano-drawer--open & { transform: translateY(0); }
}

/* ── Bottom ── */
.nano-drawer--bottom .nano-drawer__panel {
    bottom: 0; left: 0; right: 0;
    height: 18rem;
    transform: translateY(100%);
    box-shadow: 0 -4px 24px color-mix(in srgb, var(--color-dark) 12%, transparent);

    .nano-drawer--open & { transform: translateY(0); }
}

/* ── Sizes ── */
.nano-drawer--sm.nano-drawer--right .nano-drawer__panel,
.nano-drawer--sm.nano-drawer--left  .nano-drawer__panel { width: 17rem; }
.nano-drawer--lg.nano-drawer--right .nano-drawer__panel,
.nano-drawer--lg.nano-drawer--left  .nano-drawer__panel { width: 30rem; }

.nano-drawer--sm.nano-drawer--top    .nano-drawer__panel,
.nano-drawer--sm.nano-drawer--bottom .nano-drawer__panel { height: 12rem; }
.nano-drawer--lg.nano-drawer--top    .nano-drawer__panel,
.nano-drawer--lg.nano-drawer--bottom .nano-drawer__panel { height: 26rem; }

/* ── Header ── */
.nano-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-layer-02);
    flex-shrink: 0;
}

.nano-drawer__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0;
}

.nano-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-base);
    cursor: pointer;
    color: var(--color-secondary);
    font-size: 1.125rem;
    line-height: 1;
    transition: background var(--transition-base), color var(--transition-base);

    &:hover { background: var(--color-hover-overlay); color: var(--color-foreground); }
    &:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
}

/* ── Body ── */
.nano-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* ── Footer ── */
.nano-drawer__footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-layer-02);
    flex-shrink: 0;
}


/* ---------- Input Group ----------
   Composes an input with an adjacent prefix/suffix: a plain text addon or
   an action button. Common examples: URL field with "https://" prefix,
   search with a submit button, amount field with currency suffix.

   Layout: flex row. The input stretches (flex: 1); addons/buttons are fixed.
   Adjacent corners are flattened so the group reads as a single unit.

   The input is given a full border (overriding the default bottom-border-only
   style) to visually merge with the addon and define the group boundary. */

.nano-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Input inside a group — full border + no radius (corners merged) */
.nano-input-group .nano-input,
.nano-input-group .nano-input-text,
.nano-input-group .nano-input-email,
.nano-input-group .nano-input-number,
.nano-input-group .nano-input-tel,
.nano-input-group .nano-input-url,
.nano-input-group .nano-input-search,
.nano-input-group .nano-input-select {
    flex: 1;
    min-width: 0;
    border-radius: 0;
    border: 1px solid var(--color-layer-02);
    background: var(--color-light);

    &:focus {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
        position: relative;
        z-index: 1;
    }
}

/* Restore outer radius when input is the first or last child */
.nano-input-group > .nano-input:first-child,
.nano-input-group > .nano-input-text:first-child,
.nano-input-group > .nano-input-email:first-child,
.nano-input-group > .nano-input-url:first-child,
.nano-input-group > .nano-input-search:first-child {
    border-radius: var(--radius-base) 0 0 var(--radius-base);
}

.nano-input-group > .nano-input:last-child,
.nano-input-group > .nano-input-text:last-child,
.nano-input-group > .nano-input-email:last-child,
.nano-input-group > .nano-input-url:last-child,
.nano-input-group > .nano-input-search:last-child {
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
}

/* Addon — non-interactive text label */
.nano-input-group__addon {
    display: inline-flex;
    align-items: center;
    padding: 0 0.875rem;
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    background: var(--color-component-01);
    border: 1px solid var(--color-layer-02);
    white-space: nowrap;
    flex-shrink: 0;
}

.nano-input-group__addon:first-child {
    border-radius: var(--radius-base) 0 0 var(--radius-base);
    border-right: none;
}

.nano-input-group__addon:last-child {
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
    border-left: none;
}

/* Button inside group — flatten inner corners */
.nano-input-group .nano-button {
    flex-shrink: 0;
    border-radius: 0;
    height: var(--height-base);
}

.nano-input-group .nano-button:first-child {
    border-radius: var(--radius-base) 0 0 var(--radius-base);
}

.nano-input-group .nano-button:last-child {
    border-radius: 0 var(--radius-base) var(--radius-base) 0;
}

/* ── Sizes ── */
.nano-input-group--sm .nano-input-group__addon,
.nano-input-group--sm .nano-button {
    height: var(--height-sm);
    font-size: var(--font-size-xs);
}

.nano-input-group--lg .nano-input-group__addon,
.nano-input-group--lg .nano-button {
    height: var(--height-lg);
    font-size: var(--font-size-base);
}


/* ---------- Segmented ---------- */

.nano-segmented {
    --sg-height: var(--height-base);
    --sg-pad: 3px;

    display: inline-flex;
    background: var(--color-component-01);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    padding: var(--sg-pad);
    gap: 2px;
}

/* ── Anti-flash for async item injection ─────────────────────────────────────
   Some apps render an empty .nano-segmented first, then inject items later.
   Use --loading to reserve height and avoid a visible pop-in/layout shift.
   Toggle to --ready after items are mounted. */
.nano-segmented--loading {
    min-height: var(--sg-height);
    opacity: 0;
    pointer-events: none;
}

.nano-segmented--ready {
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--transition-base);
}

@media (prefers-reduced-motion: reduce) {
    .nano-segmented--ready { transition: none; }
}

.nano-segmented__item {
    flex: 1;
    height: calc(var(--sg-height) - var(--sg-pad) * 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0 0.875rem;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius-base) - 2px);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    user-select: none;
    color: var(--color-foreground);
    transition: color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);

    &:hover:not(.nano-segmented__item--active):not(:disabled) {
        background: var(--color-hover-overlay);
    }

    &:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 1px;
    }

    &.nano-segmented__item--active {
        background: var(--color-active-overlay);
        font-weight: 600;
    }

    &:disabled,
    &.nano-segmented__item--disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }
}

/* ── Sizes ── */
.nano-segmented--sm { --sg-height: var(--height-sm); }
.nano-segmented--lg {
    --sg-height: var(--height-lg);
    .nano-segmented__item { font-size: var(--font-size-base); }
}

/* ── Block (full width) ── */
.nano-segmented--block {
    display: flex;
    width: 100%;
}


/* ---------- Stat ----------
   Displays a key metric (number) with a label and optional trend indicator.
   Used in dashboards, analytics, landing page hero sections.

   Intentionally minimal: no card chrome, just clean typography.
   The value uses a large font with tight tracking to establish hierarchy.
   Trend uses semantic color (success = up, danger = down) so it reads
   without needing icons. */

.nano-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nano-stat__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--color-foreground);
}

.nano-stat__label {
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
}

.nano-stat__trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-top: 0.125rem;
}

/* ── Trend variants ── */
.nano-stat--up .nano-stat__trend   { color: var(--color-success); }
.nano-stat--down .nano-stat__trend { color: var(--color-danger); }


/* ---------- Nav ----------
   Vertical navigation list for sidebars, drawers, and in-page menus.
   Distinct from Navbar (horizontal, page-level) and Tabs (panel switching).

   Active item: left-accent border (2px primary) + tinted background.
   Hover: subtle background tint — does not shift layout.
   Group label: small-caps category header to cluster related links.
   Badge: optional count/status indicator pinned to the right edge. */

.nano-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Group label — section header within the nav */
.nano-nav__group-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-secondary);
    padding: 0.75rem 0.75rem 0.3rem;
    user-select: none;
}

/* Divider between groups */
.nano-nav__divider {
    border: none;
    border-top: 1px solid var(--color-layer-02);
    margin: 0.375rem 0;
}

/* Nav link — the main interactive element */
.nano-nav__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-foreground);
    border-radius: var(--radius-base);
    border-left: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: 1.4;
    transition: background var(--transition-base), color var(--transition-base),
        border-color var(--transition-base);

    &:hover {
        background: var(--color-hover-overlay);
    }

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

    &.nano-nav__link--active {
        background: color-mix(in srgb, var(--color-primary) 8%, var(--color-light));
        color: var(--color-primary);
        border-left-color: var(--color-primary);
        font-weight: 600;
    }
}

/* ---------- Nested sub-menu ---------- */

/* Wrapper that groups a collapsible parent link and its sub-list */
.nano-nav__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Chevron icon – rotates when parent is expanded */
.nano-nav__chevron {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform var(--transition-base);
}

.nano-nav__link--has-sub[aria-expanded="true"] .nano-nav__chevron {
    transform: rotate(180deg);
}

/* Sub-menu container – hidden by default */
.nano-nav__sub {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: 1rem;
}

.nano-nav__sub--open {
    display: flex;
}

/* Sub-menu link – slightly muted, indented via parent padding */
.nano-nav__sub-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-secondary);
    border-radius: var(--radius-base);
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base);

    &:hover {
        background: var(--color-hover-overlay);
        color: var(--color-foreground);
    }

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

    &.nano-nav__sub-link--active {
        color: var(--color-primary);
        font-weight: 500;
        background: color-mix(in srgb, var(--color-primary) 6%, var(--color-light));
    }
}

/* Badge / count inside a link */
.nano-nav__badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--color-hover-overlay);
    color: var(--color-secondary);
}

.nano-nav__link--active .nano-nav__badge {
    background: color-mix(in srgb, var(--color-primary) 14%, var(--color-light));
    color: var(--color-primary);
}


/* ---------- Upload ----------
   A styled dropzone for file uploads. Extends beyond the native file input
   (already in form) with drag-and-drop support and a file list.

   Zone: dashed border signals "droppable area". On dragover the border
   becomes solid primary to give clear visual feedback. On hover the
   background tints lightly. The hidden <input type="file"> is stretched
   over the entire zone so clicking anywhere triggers the file picker. */

.nano-upload {
    position: relative;
}

.nano-upload__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 2.5rem 1.5rem;
    border: 2px dashed var(--color-layer-03);
    border-radius: var(--radius-base);
    background: var(--color-component-01);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base);

    &:hover {
        border-color: var(--color-primary);
        background: color-mix(in srgb, var(--color-primary) 4%, var(--color-light));
    }
}

.nano-upload__zone--dragover {
    border-color: var(--color-primary);
    border-style: solid;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-light));
}

/* Hidden native input stretched over the zone */
.nano-upload__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    font-size: 0;
}

.nano-upload__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-component-02);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
    color: var(--color-secondary);
}

.nano-upload__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-foreground);
}

.nano-upload__hint {
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
}

/* ── File list ── */
.nano-upload__list {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nano-upload__file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-component-01);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
}

.nano-upload__file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.nano-upload__file-size {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
}

.nano-upload__file-remove {
    flex-shrink: 0;
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-secondary);
    opacity: 0.6;
    transition: opacity var(--transition-base);
    line-height: 1;

    &:hover { opacity: 1; color: var(--color-danger); }
}


/* ---------- Tree ----------
   Hierarchical tree view for nested data: file explorers, category trees,
   org charts, nested menus.

   Structure: .nano-tree > <ul> > <li> each containing a .nano-tree__item
   and optionally a .nano-tree__children (<ul>) for nested nodes.

   Toggle arrow rotates 90° when the node is open (JS adds --open class).
   Indentation is achieved via padding-left on .nano-tree__children so the
   visual nesting is always proportional to depth. */

.nano-tree {
    font-size: var(--font-size-sm);
}

.nano-tree ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nano-tree li {
    position: relative;
}

/* Row — the clickable item line */
.nano-tree__item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem;
    border-radius: var(--radius-base);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-base);

    &:hover {
        background: var(--color-hover-overlay);
    }

    &.nano-tree__item--active {
        background: color-mix(in srgb, var(--color-primary) 8%, var(--color-light));
        color: var(--color-primary);
        font-weight: 500;
    }
}

/* Expand/collapse arrow */
.nano-tree__toggle {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--color-secondary);
    transition: transform var(--transition-base);
}

.nano-tree__toggle--open {
    transform: rotate(90deg);
}

/* Invisible spacer for leaf nodes (keeps labels aligned) */
.nano-tree__toggle--leaf {
    visibility: hidden;
}

.nano-tree__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nested children */
.nano-tree__children {
    padding-left: 1.25rem;
}

.nano-tree__children[hidden] {
    display: none;
}


/* ---------- Toolbar ----------
   A horizontal strip of compact action controls — buttons, separators,
   and grouped controls. Common in editors, data tables, and filter bars.

   Distinct from Button (standalone CTA) and Nav (page navigation).
   Toolbar is for dense, secondary actions at component level.

   __btn: compact button (height-sm, no border, hover bg only).
   __group: flex wrapper to cluster related buttons visually.
   __divider: 1px vertical rule between groups. */

/* ---------- Track ----------
   Wraps .nano-toolbar to allow CSS mask-fade on overflow edges.
   Cannot apply mask on the toolbar itself because overflow:auto clips pseudo-elements. */

.nano-toolbar__track {
    position: relative;
    -webkit-mask-image: none;
    mask-image: none;
}

.nano-toolbar__track.has-fade-left:not(.has-fade-right) {
    -webkit-mask-image: linear-gradient(to right, transparent, black 3rem);
    mask-image: linear-gradient(to right, transparent, black 3rem);
}

.nano-toolbar__track.has-fade-right:not(.has-fade-left) {
    -webkit-mask-image: linear-gradient(to left, transparent, black 3rem);
    mask-image: linear-gradient(to left, transparent, black 3rem);
}

.nano-toolbar__track.has-fade-left.has-fade-right {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 3rem,
        black calc(100% - 3rem),
        transparent
    );
    mask-image: linear-gradient(
        to right,
        transparent,
        black 3rem,
        black calc(100% - 3rem),
        transparent
    );
}

.nano-toolbar {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem;
    background: var(--color-component-01);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nano-toolbar::-webkit-scrollbar {
    display: none;
}

.nano-toolbar--block {
    width: 100%;
}

.nano-toolbar__group {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.nano-toolbar__divider {
    width: 1px;
    height: 1.25rem;
    background: var(--color-hover-overlay);
    margin: 0 0.25rem;
    flex-shrink: 0;
    align-self: center;
}

/* Compact button — intentionally smaller than nano-button */
.nano-toolbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: var(--height-sm);
    padding: 0 0.625rem;
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-foreground);
    background: transparent;
    border: none;
    border-radius: calc(var(--radius-base) - 2px);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-base), color var(--transition-base);

    &:hover {
        background: var(--color-hover-overlay);
    }

    &:active {
        background: var(--color-active-overlay);
    }

    &.nano-toolbar__btn--active {
        background: color-mix(in srgb, var(--color-primary) 10%, var(--color-light));
        color: var(--color-primary);
        font-weight: 600;
    }

    &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }
}


/* ---------- Message ----------
   Chat / comment message bubbles. Two alignment variants:
   --sent: right-aligned, primary-color background (the current user)
   --received: left-aligned, neutral background (the other party)

   Corner radius: the bubble's "tail" corner is tightened to 4px to suggest
   speech direction without needing a CSS triangle trick.

   .nano-message-row: optional flex wrapper to place an avatar beside the bubble. */

.nano-message {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 100%;
}

.nano-message + .nano-message {
    margin-top: 0.75rem;
}

/* Sent (current user) — right side */
.nano-message--sent {
    align-items: flex-end;
}

/* Received (other party) — left side */
.nano-message--received {
    align-items: flex-start;
}

.nano-message__bubble {
    max-width: 72%;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-base);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    word-break: break-word;
}

.nano-message--sent .nano-message__bubble {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    border-bottom-right-radius: 4px;
}

.nano-message--received .nano-message__bubble {
    background: var(--color-component-01);
    color: var(--color-foreground);
    border-bottom-left-radius: 4px;
}

/* Meta row — name + timestamp */
.nano-message__meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    padding: 0 0.25rem;
}

.nano-message--sent .nano-message__meta {
    flex-direction: row-reverse;
}

.nano-message__name {
    font-weight: 600;
}

.nano-message__time {
    opacity: 0.75;
}

/* Row with avatar — wrap .nano-message in .nano-message-row */
.nano-message-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.nano-message-row.nano-message-row--sent {
    flex-direction: row-reverse;
}


/* ---------- Cascader ----------
   A multi-level dropdown selector where each panel reveals the next level
   when a parent option is chosen. Common for hierarchical data:
   Province → District → Ward, Category → Sub-category → Item.

   Trigger: styled to match the form input family (bottom-border, same height).
   Dropdown: flex row of menus — each level is a separate scrollable column.
   Parent option has a right-arrow indicator; leaf option has none.
   Selected path is joined with " / " and shown in the trigger. */

.nano-cascader {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 20rem;
}

/* Trigger — mirrors nano-input-select look */
.nano-cascader__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--height-base);
    padding: 0 1rem;
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    background: var(--color-component-01);
    border: none;
    border-bottom: 1px solid var(--color-layer-03);
    border-radius: var(--radius-base);
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background var(--transition-base), outline var(--transition-base);

    &:hover { background: var(--color-component-02); }
    &:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; background: var(--color-component-01); }
}

.nano-cascader__value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nano-cascader__value--placeholder {
    color: var(--color-secondary);
}

.nano-cascader__arrow {
    font-size: 0.6rem;
    color: var(--color-secondary);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.nano-cascader--open .nano-cascader__arrow {
    transform: rotate(180deg);
}

/* Dropdown panel */
.nano-cascader__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--z-sticky);
    display: flex;
    background: var(--color-light);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.nano-cascader__dropdown[hidden] { display: none; }

/* One column per level */
.nano-cascader__menu {
    list-style: none;
    padding: 0.25rem;
    margin: 0;
    min-width: 160px;
    max-height: 240px;
    overflow-y: auto;
    border-right: 1px solid var(--color-layer-02);

    &:last-child { border-right: none; }
}

.nano-cascader__menu[hidden] { display: none; }

/* Individual option */
.nano-cascader__option {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.75rem;
    border-radius: calc(var(--radius-base) - 2px);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background var(--transition-base), color var(--transition-base);
    user-select: none;

    &:hover { background: var(--color-hover-overlay); }

    &.nano-cascader__option--active {
        background: color-mix(in srgb, var(--color-primary) 8%, var(--color-light));
        color: var(--color-primary);
        font-weight: 500;
    }
}

.nano-cascader__option-label { flex: 1; }

.nano-cascader__option-arrow {
    font-size: 0.55rem;
    color: var(--color-secondary);
    flex-shrink: 0;
}

.nano-cascader__option--active .nano-cascader__option-arrow {
    color: var(--color-primary);
}

/* ── JS-driven fixed positioning — thoát overflow:hidden/scroll container ── */
.nano-cascader__dropdown--js {
    position: fixed;
    top: auto;
    left: auto;
}

/* ── Mobile: bottom-sheet ── */
@media (max-width: 768px) {
    .nano-cascader__dropdown {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        border-radius: var(--radius-base) var(--radius-base) 0 0;
        box-shadow: 0 -4px 32px color-mix(in srgb, var(--color-dark) 16%, transparent);
        z-index: calc(var(--z-overlay) + 1);
        max-height: 60vh;
        overflow-y: auto;
    }

    .nano-cascader__menu {
        border-right: none;
        border-bottom: 1px solid var(--color-layer-02);
        max-height: none;
        min-width: 0;
    }

    .nano-cascader__menu:last-child { border-bottom: none; }
}


/* ---------- Select ----------
   Custom select widget — plain (native-like) by default, searchable opt-in.

   The control mirrors .nano-input (bottom-border, component-01 bg, height-base)
   so it fits naturally inside existing form layouts.

   The dropdown panel uses the same tokens as .nano-dropdown__menu:
   component-01 bg, z-dropdown, radius-base, same shadow depth.
   Item highlight/radius follow dropdown__item conventions. */

/* ── Wrapper ── */
.nano-select {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
}

/* ── Hybrid: khởi tạo từ <select> ───────────────────────────────────────────
   Trước khi JS chạy: <select class="nano-input"> hiển thị như control form thường.
   Sau khi JS bọc .nano-select--from-native: ẩn <select> thật, hiển thị UI custom. */
/* Trước khi ready: <select class="nano-input"> không giãn 100% (form .nano-input { width:100% }) */
.nano-select--from-native:not(.nano-select--ready) > select.nano-input {
    width: auto;
    min-width: 12rem;
    max-width: 100%;
}

.nano-select--from-native:not(.nano-select--ready) .nano-select__control,
.nano-select--from-native:not(.nano-select--ready) .nano-select__dropdown,
.nano-select--from-native:not(.nano-select--ready) .nano-select__hidden {
    display: none !important;
}

.nano-select--from-native.nano-select--ready .nano-select__native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nano-select--from-native.nano-select--ready {
    transition: opacity var(--transition-base);
}

@media (prefers-reduced-motion: reduce) {
    .nano-select--from-native.nano-select--ready { transition: none; }
}

/* ── Control (the visible input box) ── */
.nano-select__control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: min(100%, 12rem);;
    min-height: var(--height-base);
    padding: 0.25rem 0.5rem 0.25rem 1rem;
    background: var(--color-component-01);
    border: none;
    border-bottom: 1px solid var(--color-layer-03);
    border-radius: var(--radius-base);
    cursor: text;
    transition: background-color var(--transition-base), border-color var(--transition-base), outline var(--transition-base);

    &:has(.nano-select__input[readonly]) { cursor: pointer; }
}

.nano-select--open .nano-select__control,
.nano-select__control:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: -1px;
    background: var(--color-component-01);
}

.nano-select--disabled .nano-select__control {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── Tag chips (multi-select) ── */
.nano-select__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-component-01));
    color: var(--color-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-component-01));
    white-space: nowrap;
    user-select: none;
}

.nano-select__tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: currentColor;
    font-size: 0.625rem;
    line-height: 1;
    padding: 0;
    margin-right: -0.125rem;
    opacity: 0.65;
    transition: opacity var(--transition-base), background-color var(--transition-base);

    &:hover {
        opacity: 1;
        background: color-mix(in srgb, var(--color-primary) 20%, transparent);
    }
}

/* ── Search input ── */
.nano-select__input {
    flex: 1;
    min-width: 4rem;
    height: 1.75rem;
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    outline: none;
    padding: 0;

    &[readonly] {
        cursor: pointer;
        caret-color: transparent;
        user-select: none;
    }
}

.nano-select__input::placeholder {
    color: var(--color-secondary);
}

/* ── Clear search button ── */
.nano-select__clear {
    display: none;

    &:not([hidden]) { display: flex; }
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--color-secondary);
    font-size: 0.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--transition-base), color var(--transition-base);

    &:hover {
        background: var(--color-hover-overlay);
        color: var(--color-foreground);
    }
}

/* ── Chevron ── */
.nano-select__arrow {
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-secondary);
    flex-shrink: 0;
    transition: transform var(--transition-base);
    pointer-events: none;
}

.nano-select--open .nano-select__arrow {
    transform: rotate(180deg);
}

/* ── Dropdown panel ── */
.nano-select__dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-component-01);
    color: var(--color-foreground);
    border-radius: var(--radius-base);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-dark) 12%, transparent);
    z-index: var(--z-dropdown);
    overflow: hidden;
}

/* ── JS-driven fixed positioning — thoát overflow:hidden/scroll container ── */
.nano-select__dropdown--js {
    position: fixed;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
}

/* ── Option list ── */
.nano-select__list {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    max-height: 260px;
    overflow-y: auto;
}

/* ── Group label ── */
.nano-select__group-label {
    padding: 0.375rem 0.75rem 0.125rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
    user-select: none;
}

/* ── Option row ── */
.nano-select__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    border-radius: calc(var(--radius-base) * 0.75);
    cursor: pointer;
    transition: background-color var(--transition-base);

    &.nano-select__option--highlighted {
        background: var(--color-hover-overlay);
    }

    &.nano-select__option--selected {
        background: color-mix(in srgb, var(--color-primary) 8%, var(--color-component-01));
        color: var(--color-primary);
        font-weight: 500;
    }

    &.nano-select__option--selected.nano-select__option--highlighted {
        background: color-mix(in srgb, var(--color-primary) 14%, var(--color-component-01));
    }

    &.nano-select__option--disabled {
        opacity: 0.4;
        cursor: not-allowed;
        pointer-events: none;
    }
}

/* Checkbox indicator (multi) — empty square → checked square */
.nano-select__option-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border: 1.5px solid var(--color-layer-03);
    border-radius: calc(var(--radius-base) * 0.375);
    background: transparent;
    color: transparent;
    font-size: 0.625rem;
    line-height: 1;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);

    .nano-select__option--selected & {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-light);
    }
}

/* ── "Create" option ── */
.nano-select__create {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0 0.25rem 0.25rem;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    border-radius: calc(var(--radius-base) * 0.75);
    cursor: pointer;
    border-top: 1px solid var(--color-component-02);
    transition: background-color var(--transition-base);

    &:hover,
    &.nano-select__create--highlighted {
        background: color-mix(in srgb, var(--color-primary) 8%, var(--color-component-01));
    }
}

/* ── Empty state ── */
.nano-select__empty {
    padding: 0.75rem 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    text-align: center;
    user-select: none;
}

/* ── Mobile: bottom-sheet (non-searchable) ── */
@media (max-width: 768px) {
    .nano-select__dropdown {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--radius-base) var(--radius-base) 0 0;
        box-shadow: 0 -4px 32px color-mix(in srgb, var(--color-dark) 16%, transparent);
        z-index: calc(var(--z-overlay) + 1);
    }

    .nano-select__list {
        max-height: 50vh;
    }

    /* ── Searchable: full-screen overlay ── */
    [data-nano-select-searchable] > .nano-select__dropdown,
    [data-nano-select-creatable] > .nano-select__dropdown {
        top: 0;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
    }

    [data-nano-select-searchable] > .nano-select__dropdown > .nano-select__list,
    [data-nano-select-creatable] > .nano-select__dropdown > .nano-select__list {
        flex: 1;
        max-height: none;
        overflow-y: auto;
    }

    .nano-select__sheet-header {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        border-bottom: 1px solid var(--color-layer-02);
        background: var(--color-component-01);
    }

    .nano-select__sheet-back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--height-lg);
        height: var(--height-lg);
        border: none;
        background: transparent;
        color: var(--color-foreground);
        font-size: 1.25rem;
        cursor: pointer;
        flex-shrink: 0;
    }

    .nano-select__sheet-input {
        flex: 1;
        min-width: 0;
        height: var(--height-lg);
        padding: 0 1rem 0 0;
        border: none;
        background: transparent;
        font: inherit;
        font-size: var(--font-size-base);
        color: var(--color-foreground);
        outline: none;

        &::placeholder { color: var(--color-secondary); }
    }
}


/* ---------- Search ----------
   Enhanced search input with:
   - Leading search icon
   - Clear (×) button when text is present
   - Loading spinner overlay
   - Suggestions dropdown (static autocomplete or async-fed)

   Full-border style by default.
   --bordered variant uses layer-02 border for standalone hero / site-level search boxes.

   The wrapper is position:relative so the dropdown is always anchored to it,
   regardless of the container's overflow. */

/* ── Wrapper ── */
.nano-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--color-component-01);
    border: 1px solid var(--color-layer-03);
    border-radius: var(--radius-base);
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);

    &:focus-within {
        outline: 2px solid var(--color-primary);
        outline-offset: -1px;
        background: var(--color-component-01);
    }
}

/* ── Bordered variant — for prominent / standalone search ── */
.nano-search--bordered {
    border: 1px solid var(--color-layer-02);
}

/* ── Open state — round bottom corners to connect to dropdown ── */
.nano-search--open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ── Size modifiers ── */
.nano-search--sm { --_h: var(--height-sm); }
.nano-search--lg { --_h: var(--height-lg); }
.nano-search { --_h: var(--height-base); }

/* ── Search icon ── */
.nano-search__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--_h);
    height: var(--_h);
    color: var(--color-foreground);
    pointer-events: none;
    font-size: 0.875rem;
}

/* ── Input ── */
.nano-search__input {
    flex: 1;
    height: var(--_h);
    border: none;
    background: transparent;
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    outline: none;
    padding: 0;
    min-width: 0;

    &::placeholder { color: var(--color-secondary); }

    /* Hide browser-native clear / search decorations */
    &[type="search"]::-webkit-search-cancel-button,
    &[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
}

/* ── Clear button ── */
.nano-search__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: calc(var(--_h) * 0.75);
    height: var(--_h);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-secondary);
    font-size: 0.75rem;
    padding: 0;
    transition: color var(--transition-base);

    &:hover { color: var(--color-foreground); }

    &[hidden] { display: none; }
}

/* ── Spinner (shown via .nano-search--loading) ── */
.nano-search__spinner {
    display: none;
    flex-shrink: 0;
    width: calc(var(--_h) * 0.75);
    height: var(--_h);
    align-items: center;
    justify-content: center;

    &::after {
        content: '';
        display: block;
        width: 1rem;
        height: 1rem;
        border: 2px solid var(--color-layer-02);
        border-top-color: var(--color-primary);
        border-radius: 999px;
        animation: nano-search-spin 0.6s linear infinite;
    }

    .nano-search--loading & { display: flex; }
    .nano-search--loading ~ .nano-search__clear { display: none !important; }
}

@keyframes nano-search-spin {
    to { transform: rotate(360deg); }
}

/* ── Dropdown ── */
.nano-search__dropdown {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    background: var(--color-light);
    border: 1px solid var(--color-primary);
    border-top: none;
    border-bottom-left-radius: var(--radius-base);
    border-bottom-right-radius: var(--radius-base);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-dark) 10%, transparent);
    z-index: var(--z-sticky);
    overflow: hidden;

    &[hidden] { display: none; }
}

/* ── JS-driven fixed positioning — thoát overflow:hidden/scroll container ── */
.nano-search__dropdown--js {
    position: fixed;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
}

/* ── Result list ── */
.nano-search__list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    max-height: 280px;
    overflow-y: auto;
}

/* ── Section label (grouped results) ── */
.nano-search__section {
    padding: 0.375rem 1rem 0.125rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-layer-03);
    user-select: none;
}

/* ── Result item ── */
.nano-search__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background-color var(--transition-base);
}

/* Matched text highlight inside item */
.nano-search__match {
    font-weight: 600;
    color: var(--color-primary);
}

/* Optional leading icon slot inside item */
.nano-search__item-icon {
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
    color: var(--color-layer-03);
    font-size: var(--font-size-sm);
}

/* ── Empty state ── */
.nano-search__empty {
    padding: 0.875rem 1rem;
    font-size: var(--font-size-sm);
    color: var(--color-layer-03);
    text-align: center;
}

/* ── Footer slot (e.g. "See all results →") ── */
.nano-search__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--color-layer-02);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    gap: 0.25rem;
}

/* ── Mobile: full-screen search overlay ── */
@media (max-width: 768px) {
    .nano-search__dropdown {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        z-index: calc(var(--z-overlay) + 1);
        display: flex;
        flex-direction: column;
    }

    .nano-search--open {
        border-bottom-left-radius: var(--radius-base);
        border-bottom-right-radius: var(--radius-base);
    }

    .nano-search__list {
        flex: 1;
        max-height: none;
        overflow-y: auto;
    }

    .nano-search__sheet-header {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        border-bottom: 1px solid var(--color-layer-02);
        background: var(--color-component-01);
    }

    .nano-search__sheet-back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--height-lg);
        height: var(--height-lg);
        border: none;
        background: transparent;
        color: var(--color-foreground);
        font-size: 1.25rem;
        cursor: pointer;
        flex-shrink: 0;
    }

    .nano-search__sheet-input {
        flex: 1;
        min-width: 0;
        height: var(--height-lg);
        padding: 0 1rem 0 0;
        border: none;
        background: transparent;
        font: inherit;
        font-size: var(--font-size-base);
        color: var(--color-foreground);
        outline: none;

        &::placeholder { color: var(--color-secondary); }
    }
}


/* ---------- Carousel ----------
   Slide-based content carousel.

   Layout:
   - .nano-carousel        — relative wrapper, overflow hidden, clips slides
   - .nano-carousel__track — flex row, translate-X to change slide
   - .nano-carousel__slide — flex: 0 0 100%, each slide fills the viewport

   Prev/Next buttons are overlaid absolutely.
   Dots are rendered inside .nano-carousel__dots by JS.

   Modifiers:
   - --fade   — cross-fade instead of slide (absolute stacking + opacity)
   - --dark   — dark-themed arrows and dots (for use on light slides) */

/* ── Wrapper ── */
.nano-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-base);
    background: var(--color-component-01);
    /* Prevent text selection during drag */
    user-select: none;
}

/* ── Track ── */
.nano-carousel__track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;

    /* Pause transition when dragging */
    &.nano-carousel__track--dragging {
        transition: none;
    }
}

/* ── Slide ── */
.nano-carousel__slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;

    /* Slides are content-agnostic — let content define height.
       For image carousels use aspect ratio on the slide itself. */
    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
    }
}

/* ── Fade variant ── */
.nano-carousel--fade .nano-carousel__track {
    display: block;
    position: relative;
}

.nano-carousel--fade .nano-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;

    &.nano-carousel__slide--active {
        opacity: 1;
        position: relative;
        pointer-events: auto;
    }
}

/* ── Prev / Next buttons ── */
.nano-carousel__prev,
.nano-carousel__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: none;
    background: color-mix(in srgb, var(--color-light) 85%, transparent);
    backdrop-filter: blur(4px);
    color: var(--color-foreground);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    z-index: var(--z-dropdown);
    transition: background-color var(--transition-base), opacity var(--transition-base);
    opacity: 0.75;
    padding: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-dark) 15%, transparent);

    &:hover { opacity: 1; }
    &:active { background: color-mix(in srgb, var(--color-light) 95%, transparent); }

    &:disabled {
        opacity: 0.25;
        cursor: not-allowed;
    }
}

.nano-carousel__prev { left: 0.75rem; }
.nano-carousel__next { right: 0.75rem; }

/* Dark variant — white buttons for dark/image backgrounds */
.nano-carousel--dark .nano-carousel__prev,
.nano-carousel--dark .nano-carousel__next {
    background: color-mix(in srgb, var(--color-dark) 55%, transparent);
    color: var(--color-light);

    &:hover { background: color-mix(in srgb, var(--color-dark) 70%, transparent); }
}

/* ── Slide caption / overlay ── */
.nano-carousel__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1.25rem 1rem;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-dark) 60%, transparent), transparent);
    color: var(--color-light);
}

.nano-carousel__caption-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.nano-carousel__caption-text {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    margin: 0;
}

/* ── Dots ── */
.nano-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    position: absolute;
    bottom: 0.75rem;
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
}

.nano-carousel__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: color-mix(in srgb, var(--color-light) 55%, transparent);
    cursor: pointer;
    transition: background-color var(--transition-base), width var(--transition-base);

    &.nano-carousel__dot--active {
        width: 1.25rem;
        background: var(--color-light);
    }
}

/* Outside dots (for carousels without image backgrounds) */
.nano-carousel--dots-outside .nano-carousel__dots {
    position: static;
    padding: 0.75rem 0 0;
}

.nano-carousel--dots-outside .nano-carousel__dot {
    background: var(--color-component-02);

    &.nano-carousel__dot--active {
        background: var(--color-primary);
    }
}

/* ── Aspect ratio helpers (use on .nano-carousel) ── */
.nano-carousel--ratio-16-9  { aspect-ratio: 16/9; }
.nano-carousel--ratio-4-3   { aspect-ratio: 4/3; }
.nano-carousel--ratio-1-1   { aspect-ratio: 1/1; }


/* ---------- Video ----------
   YouTube-inspired custom video player.

   Two-row controls layout:
   ┌──────────────────────────────────────────────────────────┐
   │  .nano-video__title  (top gradient, on hover / pause)   │
   │                                                          │
   │         .nano-video__overlay-play  (center)             │
   │                                                          │
   │  [══════════ .nano-video__progress ═══════════]         │
   │  [▶ ⏮10 ⏭10  0:00/0:00 ──── 🔊▬▬ 1x ⧉ ⛶]            │
   └──────────────────────────────────────────────────────────┘

   States:
   - .nano-video--paused      controls always visible
   - .nano-video--playing     controls visible on hover, auto-hide after 3 s
   - .nano-video--idle        hide controls + cursor (added by JS timer)
   - .nano-video--loading     show spinner
   - .nano-video--started     hide poster
   - .nano-video--pip         hide in-page video element
   - .nano-video--fullscreen  (added on fullscreen) */

/* ── Wrapper ─────────────────────────────────────────────── */
.nano-video {
    position: relative;
    display: block;
    width: 100%;
    background: #000;
    overflow: hidden;
    cursor: default;
    user-select: none;

    &:hover .nano-video__controls,
    &.nano-video--paused .nano-video__controls,
    &.nano-video--show-controls .nano-video__controls {
        opacity: 1;
        transform: translateY(0);
    }

    &:hover .nano-video__title,
    &.nano-video--paused .nano-video__title,
    &.nano-video--show-controls .nano-video__title {
        opacity: 1;
        transform: translateY(0);
    }

    /* Auto-hide: JS adds .nano-video--idle when playing + no movement for 3 s */
    &.nano-video--idle .nano-video__controls {
        opacity: 0 !important;
        transform: translateY(0.25rem) !important;
        pointer-events: none;
    }
    &.nano-video--idle .nano-video__title { opacity: 0 !important; }
    &.nano-video--idle { cursor: none; }
}

/* ── Video element ───────────────────────────────────────── */
.nano-video__el {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ── Title overlay (top, shown on hover / pause) ─────────── */
.nano-video__title {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 0.75rem 1rem 3rem;
    background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    z-index: 3;
    opacity: 0;
    transform: translateY(-0.25rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Center overlay (click area + big play icon) ─────────── */
.nano-video__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.nano-video__overlay-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    color: #fff;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;

    .nano-video--paused & { opacity: 1; }

    &.nano-video__overlay-play--pulse {
        animation: _vp-pulse 0.38s ease forwards;
    }
}

@keyframes _vp-pulse {
    0%   { transform: scale(1);    opacity: 1; }
    60%  { transform: scale(1.3);  opacity: 0.5; }
    100% { transform: scale(1.6);  opacity: 0; }
}

/* ── Keyboard shortcut hint ──────────────────────────────── */
.nano-video__kb-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0.5rem 1.125rem;
    border-radius: var(--radius-base);
    opacity: 0;
    pointer-events: none;
    z-index: 9;
    white-space: nowrap;
    transition: opacity 0.12s ease, transform 0.12s ease;
    border: 1px solid rgba(255,255,255,0.12);

    &.nano-video__kb-hint--show {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ── Subtitle overlay (WebVTT via TextTrack, filled by JS) ─ */
.nano-video__captions {
    position: absolute;
    left: 50%;
    bottom: 3.75rem;
    transform: translateX(-50%);
    max-width: min(92%, 36rem);
    padding: calc(var(--space-base) * 1.5) calc(var(--space-base) * 3);
    border-radius: calc(var(--radius-base) / 2);
    background: color-mix(in srgb, var(--color-dark) 78%, transparent);
    color: var(--color-light);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    white-space: pre-line;
    text-wrap: balance;
    pointer-events: none;
    z-index: 5;
    transition: bottom var(--transition-base);

    &:empty,
    &[hidden] {
        display: none;
    }

    .nano-video--idle & {
        bottom: 1rem;
    }
}

.nano-video__btn--captions-on {
    color: var(--color-primary);
}

/* ── Controls bar ────────────────────────────────────────── */
.nano-video__controls {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem 0.75rem 0.5rem;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.9)  0%,
        rgba(0,0,0,0.55) 55%,
        transparent      100%
    );
    z-index: 3;
    opacity: 0;
    transform: translateY(0.25rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ── Progress row (full width, above buttons) ────────────── */
.nano-video__progress {
    position: relative;
    width: 100%;
    height: 1.25rem; /* tall hit area */
    cursor: pointer;
    flex-shrink: 0;
    --_bar-h: 3px;

    &:hover { --_bar-h: 5px; }
}

.nano-video__progress-track {
    position: absolute;
    bottom: 0.375rem;
    left: 0;
    right: 0;
    height: var(--_bar-h, 3px);
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    transition: height var(--transition-base);
    overflow: hidden;
}

.nano-video__progress-buffer {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: rgba(255,255,255,0.4);
    border-radius: 999px;
    transition: width 0.5s linear;
}

/* Segment mode (setProgressSegment): buffer is full-file — show neutral full track, fill is cue-local */
.nano-video.nano-video--progress-segment .nano-video__progress-buffer {
    width: 100% !important;
    opacity: 0.35;
}

.nano-video__progress-fill {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: var(--color-primary);
    border-radius: 999px;
    transition: width 0.1s linear;
}

/* Draggable thumb */
.nano-video__progress-thumb {
    position: absolute;
    bottom: calc(0.375rem + var(--_bar-h, 3px) / 2);
    transform: translateX(-50%) translateY(50%) scale(0);
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    background: #fff;
    pointer-events: none;
    box-shadow: 0 1px 6px rgba(0,0,0,0.45);
    transition: transform var(--transition-base);

    .nano-video__progress:hover & {
        transform: translateX(-50%) translateY(50%) scale(1);
    }
}

/* Time tooltip shown on progress hover */
.nano-video__tooltip {
    position: absolute;
    bottom: calc(1.25rem + 0.375rem);
    transform: translateX(-50%);
    background: rgba(20, 20, 20, 0.9);
    color: #fff;
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: calc(var(--radius-base) / 2);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 5;
    border: 1px solid rgba(255,255,255,0.12);

    &.nano-video__tooltip--visible { opacity: 1; }
}

/* ── Button row ──────────────────────────────────────────── */
.nano-video__btn-row {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

/* Flexible spacer pushes right-side buttons to end */
.nano-video__spacer { flex: 1; }

/* ── Control buttons ─────────────────────────────────────── */
.nano-video__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    border-radius: calc(var(--radius-base) / 2);
    padding: 0;
    transition: background-color var(--transition-base), transform 0.1s ease;

    &:hover { background: rgba(255,255,255,0.15); }
    &:active { transform: scale(0.88); }
    &:focus-visible {
        outline: 2px solid rgba(255,255,255,0.8);
        outline-offset: 1px;
    }
}

/* Rate button: wider to fit "1.25x" */
.nano-video__btn--rate {
    width: auto;
    min-width: 2.5rem;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

/* ── Time display ────────────────────────────────────────── */
.nano-video__time {
    font-size: var(--font-size-xs);
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    padding: 0 0.25rem;
    opacity: 0.9;
}

/* ── Volume area ─────────────────────────────────────────── */
.nano-video__volume {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Slider hidden by default, expands on hover (YouTube-style) */
.nano-video__volume-slider {
    width: 0;
    height: 3px;
    cursor: pointer;
    accent-color: var(--color-primary);
    background: rgba(255,255,255,0.3);
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.2s ease;

    .nano-video__volume:hover &,
    .nano-video__volume:focus-within & {
        width: 5rem;
        opacity: 1;
    }

    &::-webkit-slider-thumb {
        appearance: none;
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 999px;
        background: #fff;
        cursor: pointer;
        box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    }

    &::-moz-range-thumb {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 999px;
        background: #fff;
        cursor: pointer;
        border: none;
    }

    @media (max-width: 480px) { display: none !important; }
}

/* ── Rate menu ───────────────────────────────────────────── */
.nano-video__rate-wrap {
    position: relative;
    flex-shrink: 0;
}

.nano-video__rate-menu {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    right: 50%;
    transform: translateX(50%);
    background: rgba(18, 18, 18, 0.96);
    backdrop-filter: blur(12px);
    border-radius: var(--radius-base);
    padding: 0.375rem 0;
    display: none;
    flex-direction: column;
    min-width: 6rem;
    z-index: 10;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.06) inset;
    border: 1px solid rgba(255,255,255,0.08);

    &.nano-video__rate-menu--open { display: flex; }

    /* Section label */
    &::before {
        content: 'Tốc độ phát';
        display: block;
        font-size: 10px;
        color: rgba(255,255,255,0.45);
        padding: 0.25rem 0.875rem 0.375rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        margin-bottom: 0.25rem;
    }
}

.nano-video__rate-menu__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.875rem;
    font-size: var(--font-size-sm);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);

    /* Checkmark space */
    &::before {
        content: '';
        width: 0.875rem;
        height: 0.875rem;
        flex-shrink: 0;
    }

    &:hover { background: rgba(255,255,255,0.1); color: #fff; }

    &.nano-video__rate-menu__item--active {
        color: var(--color-primary);
        font-weight: 600;

        &::before {
            content: '✓';
            font-size: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

/* ── Seek flash (±10 s feedback, YouTube-style) ──────────── */
.nano-video__seek-flash {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 5rem;
    height: 5rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.12s ease;

    &[data-dir="back"]    { left: 8%; }
    &[data-dir="forward"] { right: 8%; left: auto; }

    &.nano-video__seek-flash--active {
        opacity: 1;
        animation: _vp-flash 0.75s ease forwards;
    }
}

@keyframes _vp-flash {
    0%   { opacity: 1; transform: translateY(-50%) scale(1); }
    65%  { opacity: 0.9; transform: translateY(-50%) scale(1.1); }
    100% { opacity: 0; transform: translateY(-50%) scale(0.95); }
}

/* ── Loading spinner ─────────────────────────────────────── */
.nano-video__spinner {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;

    &::after {
        content: '';
        width: 2.75rem;
        height: 2.75rem;
        border: 3px solid rgba(255,255,255,0.18);
        border-top-color: #fff;
        border-radius: 999px;
        animation: _vp-spin 0.75s linear infinite;
    }

    .nano-video--loading & { display: flex; }
}

@keyframes _vp-spin {
    to { transform: rotate(360deg); }
}

/* ── Aspect ratio helpers ────────────────────────────────── */
.nano-video--ratio-16-9 { aspect-ratio: 16/9; }
.nano-video--ratio-4-3  { aspect-ratio: 4/3;  }
.nano-video--ratio-9-16 { aspect-ratio: 9/16; }
.nano-video--ratio-1-1  { aspect-ratio: 1/1;  }
.nano-video--ratio-21-9 { aspect-ratio: 21/9; }

/* ── Poster (shown before first play) ───────────────────── */
.nano-video__poster {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.4s ease;

    .nano-video--started & { opacity: 0; }
}

/* ── Series / episode picker (layout around .nano-video) ─────
   Optional companion block for streaming-style “chọn tập”.
   Typical order: .nano-video → .nano-video-series__head → .nano-video-series__pick
     (.nano-video-series__pick-title + optional .nano-segmented sort + .nano-video-series__episodes flex wrap).
   Episode switching is app logic: update video src, poster img,
   data-title, remove .nano-video--started, then NanoVideo.refresh(wrapper). */

.nano-video-series {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-base) * 3);
    width: 100%;
    max-width: 640px;
}

.nano-video-series__head {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-base) * 1);
}

.nano-video-series__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
}

.nano-video-series__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-dark);
}

.nano-video-series__pick {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-base) * 2);
}

.nano-video-series__pick-title {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-dark);
}

.nano-video-series__episodes {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space-base) * 1.5);
    align-items: center;
    justify-content: flex-start;
}

.nano-video-series__ep {
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid var(--color-layer-03);
    border-radius: 0;
    background: var(--color-layer-01);
    color: var(--color-dark);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1;
    margin: 0;
    padding: 0;
    width: 2.25rem;
    height: 2.25rem;
    min-width: var(--height-sm);
    min-height: var(--height-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);

    &:hover:not(.nano-video-series__ep--active) {
        border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-layer-03));
        background: color-mix(in srgb, var(--color-primary) 10%, var(--color-layer-01));
    }

    &.nano-video-series__ep--active {
        border-color: var(--color-primary);
        background: var(--color-primary);
        color: var(--color-primary-contrast);
        font-weight: 600;
    }

    &.nano-video-series__ep--active:hover {
        background: color-mix(in srgb, var(--color-primary) 88%, var(--color-dark));
        border-color: var(--color-primary);
        color: var(--color-primary-contrast);
    }
}

/* ── PiP state ───────────────────────────────────────────── */
.nano-video--pip .nano-video__el {
    visibility: hidden; /* browser renders PiP window; hide the in-page copy */
}

/* ── Mobile: compact controls on narrow screens ──────────── */
@media (max-width: 480px) {
    /* Reduce button tap targets slightly to fit the row */
    .nano-video__btn {
        width: 2rem;
        height: 2rem;
    }

    /* Hide non-essential buttons; keep play, skip, mute, fullscreen */
    .nano-video__btn[data-action="pip"],
    .nano-video__btn--rate {
        display: none !important;
    }

    /* Tighten controls padding on small screens */
    .nano-video__controls {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}


/* ---------- Audio ----------
   Custom audio player UI built on native <audio>.

   Why custom UI:
   - Consistent with Nano design system (tokens, spacing, states)
   - Theme-aware (colors use currentColor + tokens, no hardcoded white/black)
   - Lets apps hide native controls but keep accessibility via aria labels

   Required DOM inside [data-nano-trigger="audio"]:
   - .nano-audio__el               <audio> core element (controls removed by JS)
   - .nano-audio__btn[data-action] play | mute
   - .nano-audio__time             time label
   - .nano-audio__progress         seek bar wrapper (click/drag)
     - .nano-audio__progress-track
       - .nano-audio__progress-buffer
       - .nano-audio__progress-fill
     - .nano-audio__progress-thumb
   - .nano-audio__volume-slider    <input type="range"> 0..1
*/

.nano-audio {
  /* Aim: closer to native audio controls (compact, minimal chrome) */
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-base) * 2);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: calc(var(--space-base) * 2);
  border: 1px solid var(--color-layer-03);
  border-radius: calc(var(--radius-base) * 1.25);
  background: var(--color-component-02);
}

.nano-audio__el {
  display: none; /* hide native UI; keep element for audio core */
}

.nano-audio__row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* luôn một hàng; progress co nhờ min-width:0 */
  gap: calc(var(--space-base) * 2);
  min-width: 0;
}

.nano-audio__btn {
  width: calc(var(--height-base) - 4px);
  height: calc(var(--height-base) - 4px);
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base), color var(--transition-base);

  &:hover {
    background: color-mix(in srgb, var(--color-layer-02) 70%, transparent);
    border-color: color-mix(in srgb, var(--color-layer-03) 70%, transparent);
  }

  &:active {
    transform: translateY(1px);
  }

  &:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
  }
}

.nano-audio__time {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-sm);
  color: var(--color-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.nano-audio__spacer {
  flex: 1 1 0;
  min-width: 0;
}

.nano-audio__progress {
  position: relative;
  width: 100%;
  height: 1.25rem; /* tall hit area */
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0; /* cùng hàng flex: cho phép co, tránh tràn ngang mobile */
  --_bar-h: 3px;

  &:hover { --_bar-h: 5px; }
}

.nano-audio__progress-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--_bar-h);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-layer-03) 70%, var(--color-dark));
  overflow: hidden;
}

.nano-audio__progress-buffer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: color-mix(in srgb, var(--color-layer-03) 50%, var(--color-dark));
}

.nano-audio.nano-audio--progress-segment .nano-audio__progress-buffer {
  width: 100% !important;
  opacity: 0.35;
}

.nano-audio__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: color-mix(in srgb, var(--color-primary) 78%, var(--color-dark));
}

.nano-audio__progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--color-light);
  border: 2px solid color-mix(in srgb, var(--color-primary) 78%, var(--color-dark));
  box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  pointer-events: none;
}

.nano-audio__volume {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-base) * 2);
  flex-shrink: 0;
}

.nano-audio__volume-slider {
  width: 5.5rem;
  min-width: 0;
  flex-shrink: 1;
}

/* Mobile: vẫn một hàng — bỏ slider (giống video), thu nút + khoảng cách để seek còn đủ chỗ */
@media (max-width: 480px) {
  .nano-audio {
    padding: calc(var(--space-base) * 1.5);
  }

  .nano-audio__row {
    gap: calc(var(--space-base) * 1);
  }

  .nano-audio__btn {
    width: calc(var(--height-sm) - 4px);
    height: calc(var(--height-sm) - 4px);
  }

  .nano-audio__time {
    font-size: var(--font-size-xs);
  }

  .nano-audio__volume {
    gap: calc(var(--space-base) * 1);
  }

  .nano-audio__volume-slider {
    display: none !important;
  }
}

.nano-audio--loading {
  opacity: 0.85;
}

.nano-audio--playing .nano-audio__btn[data-action="play"] {
  color: var(--color-primary);
}



/* ---------- Lightbox ----------
   Two-part component:

   1. .nano-lightbox  — image thumbnail wrapper.
      Hover reveals an overlay with action buttons (preview, download).
      Add data-nano-group="name" on multiple items to link them into a gallery.

   2. .nano-lightbox-modal — singleton full-screen modal created by JS.
      Shows the full image with prev/next navigation, zoom, and download. */

/* ════════════════════════════════════════════════════════════
   THUMBNAIL WRAPPER
   ════════════════════════════════════════════════════════════ */

.nano-lightbox {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: var(--radius-base);
    cursor: pointer;
    background: var(--color-component-01);

    /* Slight scale on hover for tactile feedback */
    &:hover .nano-lightbox__img { transform: scale(1.04); }
    &:hover .nano-lightbox__overlay { opacity: 1; }
}

/* ── Image ── */
.nano-lightbox__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
    user-select: none;
    pointer-events: none;
    draggable: false;
}

/* ── Hover overlay ── */
.nano-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-dark) 40%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* ── Action buttons on overlay ── */
.nano-lightbox__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, var(--color-light) 60%, transparent);
    background: color-mix(in srgb, var(--color-dark) 30%, transparent);
    backdrop-filter: blur(4px);
    color: var(--color-light);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
    padding: 0;
    line-height: 1;

    &:hover {
        background: color-mix(in srgb, var(--color-light) 20%, transparent);
        border-color: var(--color-light);
        transform: scale(1.1);
    }

    &:focus-visible {
        outline: 2px solid var(--color-light);
        outline-offset: 2px;
    }
}

/* ── "More" badge on last item of a capped gallery ── */
.nano-lightbox__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-dark) 55%, transparent);
    color: var(--color-light);
    font-size: 1.5rem;
    font-weight: 700;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   GALLERY GRID HELPERS
   ════════════════════════════════════════════════════════════ */

.nano-lightbox-grid {
    display: grid;
    gap: 0.25rem;

    &.nano-lightbox-grid--2 { grid-template-columns: repeat(2, 1fr); }
    &.nano-lightbox-grid--3 { grid-template-columns: repeat(3, 1fr); }
    &.nano-lightbox-grid--4 { grid-template-columns: repeat(4, 1fr); }

    /* First item spans full width in 3- and 4-col layouts */
    &.nano-lightbox-grid--3 > .nano-lightbox:first-child,
    &.nano-lightbox-grid--4 > .nano-lightbox:first-child {
        grid-column: span 2;
    }

    .nano-lightbox {
        width: 100%;
        aspect-ratio: 1 / 1;
    }
}

/* ════════════════════════════════════════════════════════════
   LIGHTBOX MODAL (singleton, injected by JS)
   ════════════════════════════════════════════════════════════ */

.nano-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;

    &.nano-lightbox-modal--open {
        opacity: 1;
        visibility: visible;
    }
}

/* ── Backdrop ── */
.nano-lightbox-modal__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-dark) 88%, transparent);
    backdrop-filter: blur(6px);
}

/* ── Content area (image + zoom) ── */
.nano-lightbox-modal__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: zoom-in;

    &.nano-lightbox-modal__content--zoomed { cursor: grab; }
    &.nano-lightbox-modal__content--grabbing { cursor: grabbing; }
}

/* ── Image ── */
.nano-lightbox-modal__img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: calc(var(--radius-base) / 2);
    box-shadow: 0 8px 40px color-mix(in srgb, var(--color-dark) 50%, transparent);
    transform-origin: center center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    user-select: none;
    pointer-events: none;
    draggable: false;

    &.nano-lightbox-modal__img--loading { opacity: 0.3; }
}

/* ── Top toolbar ── */
.nano-lightbox-modal__toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-dark) 60%, transparent), transparent);
    z-index: 2;
}

.nano-lightbox-modal__counter {
    font-size: var(--font-size-sm);
    color: color-mix(in srgb, var(--color-light) 80%, transparent);
    font-variant-numeric: tabular-nums;
}

.nano-lightbox-modal__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Bottom caption ── */
.nano-lightbox-modal__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1.25rem 1rem;
    background: linear-gradient(to top, color-mix(in srgb, var(--color-dark) 60%, transparent), transparent);
    text-align: center;
    z-index: 2;
    pointer-events: none;

    p {
        margin: 0;
        font-size: var(--font-size-sm);
        color: color-mix(in srgb, var(--color-light) 85%, transparent);
    }
}

/* ── Modal icon buttons (close, zoom, download) ── */
.nano-lightbox-modal__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: none;
    background: color-mix(in srgb, var(--color-light) 12%, transparent);
    color: var(--color-light);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--transition-base);

    &:hover { background: color-mix(in srgb, var(--color-light) 22%, transparent); }
    &:focus-visible { outline: 2px solid var(--color-light); outline-offset: 2px; }
    &:disabled { opacity: 0.3; cursor: not-allowed; }
}

/* ── Prev / Next arrows ── */
.nano-lightbox-modal__prev,
.nano-lightbox-modal__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: none;
    background: color-mix(in srgb, var(--color-dark) 45%, transparent);
    backdrop-filter: blur(4px);
    color: var(--color-light);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-base), opacity var(--transition-base);
    opacity: 0.7;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-dark) 30%, transparent);

    &:hover { opacity: 1; }
    &:disabled { opacity: 0.2; cursor: not-allowed; }
}

.nano-lightbox-modal__prev { left: 1rem; }
.nano-lightbox-modal__next { right: 1rem; }

/* ── Zoom level indicator ── */
.nano-lightbox-modal__zoom-level {
    font-size: var(--font-size-xs);
    color: color-mix(in srgb, var(--color-light) 70%, transparent);
    min-width: 2.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Thumbnail strip ── */
.nano-lightbox-modal__thumbs {
    position: absolute;
    bottom: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.375rem;
    z-index: 2;
    padding: 0.375rem;
    background: color-mix(in srgb, var(--color-dark) 40%, transparent);
    border-radius: var(--radius-base);
    backdrop-filter: blur(4px);
    max-width: 90vw;
    overflow-x: auto;
}

.nano-lightbox-modal__thumb {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: calc(var(--radius-base) / 2);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.55;
    border: 2px solid transparent;
    transition: opacity var(--transition-base), border-color var(--transition-base);

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
    }

    &.nano-lightbox-modal__thumb--active {
        opacity: 1;
        border-color: var(--color-primary);
    }

    &:hover { opacity: 0.85; }
}


/* ---------- Rich Text Editor (RTE) ----------
   A WYSIWYG editor built on contenteditable.

   Structure:
   - .nano-rte              — wrapper with border
   - .nano-rte__toolbar     — sticky button bar
     - .nano-rte__group     — button group (separated by divider)
     - .nano-rte__btn       — icon toolbar button
     - .nano-rte__btn--active — reflects active format at cursor
     - .nano-rte__select    — block-format <select>
     - .nano-rte__divider   — vertical separator between groups
   - .nano-rte__body        — contenteditable editing area
   - .nano-rte__footer      — word/char count status bar
   - .nano-rte__link-bar    — inline popover for inserting links  */

/* ── Wrapper ── */
.nano-rte {
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--color-light);

    &:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
    }
}

/* ── Toolbar ── */
.nano-rte__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--color-layer-02);
    background: var(--color-component-01);
    position: sticky;
    top: 0;
    z-index: 10;
}

.nano-rte__group {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

/* ── Toolbar divider ── */
.nano-rte__divider {
    width: 1px;
    height: 1.25rem;
    background: var(--color-component-01);
    margin: 0 0.25rem;
    flex-shrink: 0;
}

/* ── Toolbar buttons ── */
.nano-rte__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border: none;
    background: transparent;
    border-radius: calc(var(--radius-base) / 2);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-foreground);
    padding: 0;
    line-height: 1;
    transition: background-color var(--transition-base), color var(--transition-base);
    user-select: none;

    &:hover { background: var(--color-hover-overlay); }

    &.nano-rte__btn--active {
        background: color-mix(in srgb, var(--color-primary) 12%, var(--color-light));
        color: var(--color-primary);
    }

    &:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

    &:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 1px;
    }
}

/* ── Block format select ── */
.nano-rte__select {
    height: 1.875rem;
    padding: 0 0.375rem;
    font-size: var(--font-size-xs);
    font: inherit;
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-layer-02);
    border-radius: calc(var(--radius-base) / 2);
    background: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition-base);

    &:hover  { border-color: var(--color-layer-03); }
    &:focus  { border-color: var(--color-primary); }
}

/* ── Editable body ── */
.nano-rte__body {
    flex: 1;
    min-height: 200px;
    padding: 1rem 1.25rem;
    outline: none;
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--color-foreground);
    overflow-y: auto;
    word-break: break-word;

    /* Typography inside the editor */
    h1 { font-size: 1.75rem; font-weight: 700; margin: 0.75rem 0 0.5rem; line-height: 1.25; }
    h2 { font-size: 1.375rem; font-weight: 600; margin: 0.75rem 0 0.5rem; line-height: 1.3; }
    h3 { font-size: 1.125rem; font-weight: 600; margin: 0.5rem 0 0.375rem; line-height: 1.35; }
    p  { margin: 0 0 0.625rem; }

    a  { color: var(--color-primary); text-decoration: underline; }

    strong, b { font-weight: 700; }
    em, i     { font-style: italic; }
    u          { text-decoration: underline; }
    s          { text-decoration: line-through; }

    ul, ol {
        padding-left: 1.5rem;
        margin: 0.375rem 0 0.625rem;
    }
    ul { list-style: disc; }
    ol { list-style: decimal; }
    li { margin-bottom: 0.2rem; }

    blockquote {
        margin: 0.75rem 0;
        padding: 0.5rem 1rem;
        border-left: 3px solid var(--color-primary);
        background: var(--color-component-01);
        border-radius: 0 calc(var(--radius-base) / 2) calc(var(--radius-base) / 2) 0;
        color: color-mix(in srgb, var(--color-foreground) 80%, transparent);
        font-style: italic;
    }

    pre {
        margin: 0.75rem 0;
        padding: 0.75rem 1rem;
        background: var(--color-component-02);
        border: 1px solid var(--color-layer-02);
        border-radius: calc(var(--radius-base) / 2);
        font-family: ui-monospace, monospace;
        font-size: var(--font-size-sm);
        overflow-x: auto;
        white-space: pre;
    }

    code {
        font-family: ui-monospace, monospace;
        font-size: 0.875em;
        background: var(--color-component-02);
        border: 1px solid var(--color-layer-02);
        padding: 0.1em 0.35em;
        border-radius: 4px;
    }

    pre code {
        background: none;
        border: none;
        padding: 0;
    }

    hr {
        border: none;
        border-top: 1px solid var(--color-layer-02);
        margin: 1rem 0;
    }

    img {
        max-width: 100%;
        height: auto;
        border-radius: calc(var(--radius-base) / 2);
    }

    /* Placeholder */
    &:empty::before {
        content: attr(data-placeholder);
        color: var(--color-layer-03);
        pointer-events: none;
    }
}

/* ── Footer / status bar ── */
.nano-rte__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.25rem 0.75rem;
    border-top: 1px solid var(--color-layer-02);
    background: var(--color-component-01);
    font-size: var(--font-size-xs);
    color: var(--color-layer-03);
    user-select: none;
}

/* ── Link popover bar ── */
.nano-rte__link-bar {
    display: none;
    position: absolute;
    z-index: 20;
    background: var(--color-light);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-dark) 12%, transparent);
    padding: 0.375rem 0.5rem;
    gap: 0.375rem;
    align-items: center;
    min-width: 18rem;

    &.nano-rte__link-bar--open { display: flex; }
}

.nano-rte__link-input {
    flex: 1;
    height: 1.875rem;
    border: 1px solid var(--color-layer-02);
    border-radius: calc(var(--radius-base) / 2);
    padding: 0 0.5rem;
    font: inherit;
    font-size: var(--font-size-sm);
    outline: none;
    color: var(--color-foreground);
    background: var(--color-component-01);

    &:focus { border-color: var(--color-primary); }
}


/* ---------- Progress Bar ---------- */

.nano-progress {
    --pg-height: 0.5rem;
    --pg-color: var(--color-primary);
    --pg-bg: var(--color-component-01);

    width: 100%;
    height: var(--pg-height);
    background: var(--pg-bg);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
}

.nano-progress__bar {
    height: 100%;
    background: var(--pg-color);
    border-radius: 999px;
    transition: width 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-primary-contrast);
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;

    /* Color variants */
    &.nano-progress__bar--success   { --pg-color: var(--color-success);   color: var(--color-success-contrast);   }
    &.nano-progress__bar--warning   { --pg-color: var(--color-warning);   color: var(--color-warning-contrast);   }
    &.nano-progress__bar--danger    { --pg-color: var(--color-danger);    color: var(--color-danger-contrast);    }
    &.nano-progress__bar--secondary { --pg-color: var(--color-secondary); color: var(--color-secondary-contrast); }
}

/* ── Sizes ── */
.nano-progress--sm { --pg-height: 0.25rem; }
.nano-progress--lg { --pg-height: 1rem; }
.nano-progress--xl { --pg-height: 1.5rem; }

/* ── Striped ── */
.nano-progress__bar--striped {
    background-image: linear-gradient(
        45deg,
        color-mix(in srgb, var(--color-light) 15%, transparent) 25%,
        transparent 25%,
        transparent 50%,
        color-mix(in srgb, var(--color-light) 15%, transparent) 50%,
        color-mix(in srgb, var(--color-light) 15%, transparent) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
}

/* ── Animated stripes ── */
@keyframes nano-pg-stripes {
    from { background-position-x: 1rem; }
    to   { background-position-x: 0; }
}

.nano-progress__bar--animated {
    animation: nano-pg-stripes 0.8s linear infinite;
}

/* ── Indeterminate ── */
@keyframes nano-pg-indeterminate {
    0%   { left: -45%; width: 45%; }
    100% { left: 100%; width: 45%; }
}

.nano-progress--indeterminate {
    position: relative;
    overflow: hidden;

    .nano-progress__bar {
        position: absolute;
        width: 45%;
        animation: nano-pg-indeterminate 1.4s ease-in-out infinite;
        border-radius: 999px;
    }
}

/* ── Stacked — multiple bars ── */
.nano-progress:has(.nano-progress__bar + .nano-progress__bar) {
    /* Container clips via overflow hidden, bars don't need individual radius */
    .nano-progress__bar {
        border-radius: 0;
        min-width: 4px; /* visible even at very low values */
    }
}


/* ---------- Credit Card ----------
   Two parts:

   1. .nano-card-display  — visual card widget (3D flip on hover/focus, front + back)
   2. .nano-card-form     — formatted input group (number 4-4-4-4, expiry MM/YY, CVV)

   Card type is detected by JS and set via data-card-type attribute on the wrapper,
   which swaps the network logo SVG shown in the top-right corner. */

/* ════════════════════════════════════════════════════════
   CARD DISPLAY
   ════════════════════════════════════════════════════════ */

.nano-card-display {
    width: 22rem;
    max-width: 100%;
    perspective: 1000px;
    cursor: pointer;
}

.nano-card-display__inner {
    position: relative;
    width: 100%;
    aspect-ratio: 85.6 / 53.98; /* ISO/IEC 7810 ID-1 */
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.875rem;

    .nano-card-display--flipped & { transform: rotateY(180deg); }
}

/* Front & Back common */
.nano-card-display__front,
.nano-card-display__back {
    position: absolute;
    inset: 0;
    border-radius: 0.875rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--color-dark) 30%, transparent),
                0 2px 8px  color-mix(in srgb, var(--color-dark) 15%, transparent);
    color: var(--color-light);
    user-select: none;
}

/* ── Front ── */
.nano-card-display__front {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    justify-content: space-between;
}

/* Shimmer overlay */
.nano-card-display__front::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        transparent 30%,
        color-mix(in srgb, var(--color-light) 6%, transparent) 50%,
        transparent 70%);
    pointer-events: none;
    border-radius: inherit;
}

/* Card type color themes */
.nano-card-display[data-card-type="visa"]       .nano-card-display__front { background: linear-gradient(135deg,#1a1f71,#1565c0); }
.nano-card-display[data-card-type="mastercard"] .nano-card-display__front { background: linear-gradient(135deg,#1a1a1a,#eb5757); }
.nano-card-display[data-card-type="amex"]       .nano-card-display__front { background: linear-gradient(135deg,#007b5e,#00c896); }
.nano-card-display[data-card-type="discover"]   .nano-card-display__front { background: linear-gradient(135deg,#e87722,#f5a623); }

/* Chip */
.nano-card-display__chip {
    width: 2.5rem;
    height: 1.875rem;
    background: linear-gradient(135deg, #f5e642, #c8a415);
    border-radius: 0.3rem;
    position: relative;
    overflow: hidden;

    &::before, &::after {
        content: '';
        position: absolute;
        background: color-mix(in srgb, var(--color-dark) 20%, transparent);
    }
    /* Vertical line */
    &::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
    /* Horizontal line */
    &::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
}

.nano-card-display__top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.nano-card-display__network {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    opacity: 0.9;
    font-style: italic;
}

/* Card number */
.nano-card-display__number {
    font-size: 1.25rem;
    letter-spacing: 0.2em;
    font-family: ui-monospace, monospace;
    text-shadow: 0 1px 3px color-mix(in srgb, var(--color-dark) 40%, transparent);
    word-spacing: 0.4em;
}

.nano-card-display__bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}

.nano-card-display__label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
    margin-bottom: 0.2rem;
}

.nano-card-display__value {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* ── Back ── */
.nano-card-display__back {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    transform: rotateY(180deg);
    padding: 0;
    justify-content: flex-start;
    gap: 0;
}

.nano-card-display__magnetic {
    height: 2.75rem;
    background: #111;
    margin-top: 1.5rem;
    width: 100%;
    flex-shrink: 0;
}

.nano-card-display__signature-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
}

.nano-card-display__signature {
    flex: 1;
    height: 2.25rem;
    background: repeating-linear-gradient(
        45deg,
        #f8f8f8,
        #f8f8f8 5px,
        #e8e8e8 5px,
        #e8e8e8 10px
    );
    border-radius: 0.2rem;
}

.nano-card-display__cvv {
    min-width: 3rem;
    height: 2.25rem;
    background: #fff;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    font-family: ui-monospace, monospace;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    padding: 0 0.5rem;
}

.nano-card-display__back-network {
    padding: 0.75rem 1.5rem;
    text-align: right;
    font-size: 1.125rem;
    font-weight: 800;
    font-style: italic;
    opacity: 0.7;
}

/* ════════════════════════════════════════════════════════
   CARD FORM
   ════════════════════════════════════════════════════════ */

.nano-card-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nano-card-form__row {
    display: flex;
    gap: 0.75rem;
}

/* Card type indicator badge on number input */
.nano-card-form__type-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    font-style: italic;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: var(--color-component-01);
    color: var(--color-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background-color var(--transition-base), color var(--transition-base);
    user-select: none;
    height: 1.375rem;

    /* Type-specific colors */
    &[data-type="visa"]       { background: #1a1f71; color: var(--color-light); }
    &[data-type="mastercard"] { background: #eb5757; color: var(--color-light); }
    &[data-type="amex"]       { background: #007b5e; color: var(--color-light); }
    &[data-type="discover"]   { background: #e87722; color: var(--color-light); }
}


/* ---------- Pricing ----------
   Pricing plan cards with:
   - Monthly / Annual billing toggle (segmented)
   - Feature checklist
   - "Popular" / "Enterprise" badge
   - Highlighted plan variant

   .nano-pricing-toggle     — monthly/annual switch wrapper
   .nano-pricing-grid       — responsive card grid
   .nano-pricing-card       — individual plan card
   .nano-pricing-card--featured — highlighted border + primary bg header
   .nano-pricing-card__badge
   .nano-pricing-card__name
   .nano-pricing-card__price     — large amount display
   .nano-pricing-card__period
   .nano-pricing-card__desc
   .nano-pricing-card__features  — <ul> of features
   .nano-pricing-card__feature   — <li> with check/cross icon  */

/* ── Billing toggle ── */
.nano-pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.nano-pricing-toggle__label {
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
}

.nano-pricing-toggle__save {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-light));
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, var(--color-light));
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

/* ── Grid ── */
.nano-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* Featured card sits slightly higher */
.nano-pricing-grid .nano-pricing-card--featured {
    margin-top: -0.75rem;
    margin-bottom: -0.75rem;
}

/* ── Card ── */
.nano-pricing-card {
    border: 1px solid var(--color-layer-02);
    border-radius: calc(var(--radius-base) * 1.5);
    overflow: hidden;
    background: var(--color-light);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base);

    &:hover {
        box-shadow: 0 8px 24px color-mix(in srgb, var(--color-dark) 8%, transparent);
    }
}

.nano-pricing-card--featured {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--color-primary) 20%, transparent);

    &:hover {
        box-shadow: 0 8px 32px color-mix(in srgb, var(--color-primary) 25%, transparent);
    }
}

/* ── Card header ── */
.nano-pricing-card__header {
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--color-component-01);
    border-bottom: 1px solid var(--color-layer-02);
    position: relative;

    .nano-pricing-card--featured & {
        background: var(--color-primary);
        border-bottom-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-dark));
        color: var(--color-primary-contrast);
    }
}

.nano-pricing-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: color-mix(in srgb, var(--color-primary-contrast) 25%, transparent);
    color: var(--color-primary-contrast);
    margin-bottom: 0.625rem;

    .nano-pricing-card:not(.nano-pricing-card--featured) & {
        background: color-mix(in srgb, var(--color-primary) 12%, var(--color-light));
        color: var(--color-primary);
    }
}

.nano-pricing-card__name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.nano-pricing-card__desc {
    font-size: var(--font-size-sm);
    opacity: 0.75;
    margin: 0;
}

/* ── Price ── */
.nano-pricing-card__price-row {
    padding: 1.25rem 1.5rem 0;
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
}

.nano-pricing-card__currency {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1;
    padding-bottom: 0.35rem;
    color: var(--color-foreground);
}

.nano-pricing-card__amount {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-foreground);
    font-variant-numeric: tabular-nums;
    transition: opacity 0.2s ease;
}

.nano-pricing-card__period {
    font-size: var(--font-size-sm);
    color: var(--color-layer-03);
    padding-bottom: 0.4rem;
}

.nano-pricing-card__billed {
    padding: 0.25rem 1.5rem 0;
    font-size: var(--font-size-xs);
    color: var(--color-layer-03);
    min-height: 1.25rem;
}

/* ── Features list ── */
.nano-pricing-card__features {
    list-style: none;
    margin: 0;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex: 1;
}

.nano-pricing-card__feature {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: var(--font-size-sm);
}

.nano-pricing-card__feature-icon {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    line-height: 1;
    margin-top: 0.1rem;

    &.nano-pricing-card__feature-icon--yes {
        background: color-mix(in srgb, var(--color-success) 15%, var(--color-light));
        color: var(--color-success);
    }
    &.nano-pricing-card__feature-icon--no {
        background: var(--color-component-01);
        color: var(--color-layer-03);
    }
}

/* ── CTA ── */
.nano-pricing-card__cta {
    padding: 0 1.5rem 1.5rem;
}


/* ---------- Order Summary ----------
   Cart/checkout order summary with:
   - Line items (image, name, variant, qty, price)
   - Promo code input
   - Cost breakdown (subtotal, shipping, discount, tax, total)

   .nano-order                     — wrapper
   .nano-order__items              — list of line items
   .nano-order__item               — single item row
     .nano-order__item-img         — thumbnail
     .nano-order__item-info        — name + variant text
     .nano-order__item-qty         — quantity badge
     .nano-order__item-price       — right-aligned price
   .nano-order__promo              — promo code input group
   .nano-order__breakdown          — cost table
     .nano-order__row              — label + value row
     .nano-order__row--discount    — green discount row
     .nano-order__row--total       — large bold total row
     .nano-order__divider          — <hr> separator */

/* ── Wrapper ── */
.nano-order {
    border: 1px solid var(--color-layer-02);
    border-radius: calc(var(--radius-base) * 1.25);
    overflow: hidden;
    background: var(--color-light);
}

/* ── Items section ── */
.nano-order__items {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    border-bottom: 1px solid var(--color-layer-02);
}

.nano-order__item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.nano-order__item-img-wrap {
    position: relative;
    flex-shrink: 0;
}

.nano-order__item-img {
    width: 3.75rem;
    height: 3.75rem;
    object-fit: cover;
    border-radius: calc(var(--radius-base) / 1.5);
    background: var(--color-component-01);
    display: block;
}

/* Qty badge on thumbnail */
.nano-order__item-qty {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--color-secondary);
    color: var(--color-light);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
    border: 2px solid var(--color-light);
}

.nano-order__item-info {
    flex: 1;
    min-width: 0;
}

.nano-order__item-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0 0 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nano-order__item-variant {
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    margin: 0;
}

.nano-order__item-price {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-foreground);
    white-space: nowrap;
    padding-top: 0.1rem;
}

/* ── Promo code ── */
.nano-order__promo {
    display: flex;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-layer-02);
}

.nano-order__promo-input {
    flex: 1;
    height: var(--height-sm);
    padding: 0 0.75rem;
    font: inherit;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    outline: none;
    background: var(--color-component-01);
    color: var(--color-foreground);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: border-color var(--transition-base);

    &::placeholder { text-transform: none; letter-spacing: 0; color: var(--color-secondary); }
    &:focus { border-color: var(--color-primary); }
}

/* ── Breakdown ── */
.nano-order__breakdown {
    padding: 0.875rem 1rem;
}

.nano-order__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
}

.nano-order__row-label { color: var(--color-secondary); }

.nano-order__row--discount .nano-order__row-value {
    color: var(--color-success);
    font-weight: 600;
}

.nano-order__row--free .nano-order__row-value {
    color: var(--color-success);
    font-weight: 600;
}

.nano-order__divider {
    border: none;
    border-top: 1px solid var(--color-layer-02);
    margin: 0.5rem 0;
}

.nano-order__row--total {
    padding: 0.5rem 0 0.25rem;

    .nano-order__row-label {
        font-size: var(--font-size-base);
        font-weight: 700;
        color: var(--color-foreground);
    }

    .nano-order__row-value {
        font-size: 1.25rem;
        font-weight: 800;
        color: var(--color-foreground);
    }
}

.nano-order__row-sub {
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    font-weight: 400;
}


/* ---------- Payment Method ----------
   Styled radio-button selectors for payment options.

   .nano-payment-methods          — vertical list wrapper
   .nano-payment-method           — single method row (radio card)
   .nano-payment-method--selected — active / checked state
   .nano-payment-method__radio    — hidden <input type="radio">
   .nano-payment-method__icon     — logo / icon slot (48×32)
   .nano-payment-method__label    — method name
   .nano-payment-method__desc     — sub-label (e.g. "Phí 0%")
   .nano-payment-method__panel    — collapsible detail panel (e.g. card form, QR) */

/* ── List ── */
.nano-payment-methods {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* ── Row ── */
.nano-payment-method {
    border: 1.5px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    background: var(--color-light);

    &:hover { border-color: var(--color-layer-03); }

    &.nano-payment-method--selected {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 1px var(--color-primary);
    }
}

/* ── Header row ── */
.nano-payment-method__header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    position: relative;
}

/* Hidden radio — cosmetically replaced by the styled row */
.nano-payment-method__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom radio dot */
.nano-payment-method__dot {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    border: 1.5px solid var(--color-layer-02);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-base);

    &::after {
        content: '';
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 999px;
        background: var(--color-primary);
        opacity: 0;
        transition: opacity var(--transition-base), transform var(--transition-base);
        transform: scale(0.5);
    }

    .nano-payment-method--selected & {
        border-color: var(--color-primary);

        &::after { opacity: 1; transform: scale(1); }
    }
}

/* ── Icon ── */
.nano-payment-method__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 2rem;
    border-radius: 4px;
    border: 1px solid var(--color-layer-02);
    background: var(--color-light);
    flex-shrink: 0;
    font-size: 1.25rem;
    overflow: hidden;

    img { max-width: 100%; max-height: 100%; object-fit: contain; }
}

.nano-payment-method__info { flex: 1; min-width: 0; }

.nano-payment-method__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0;
}

.nano-payment-method__desc {
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    margin: 0;
}

/* ── Expandable detail panel ── */
.nano-payment-method__panel {
    border-top: 1px solid var(--color-layer-02);
    padding: 1rem;
    background: var(--color-component-01);
    display: none;

    .nano-payment-method--selected & { display: block; }
}

/* ── QR code panel ── */
.nano-payment-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
}

.nano-payment-qr__img {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
    border: 1px solid var(--color-layer-02);
    border-radius: calc(var(--radius-base) / 2);
    background: var(--color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}

.nano-payment-qr__label {
    font-size: var(--font-size-xs);
    color: var(--color-layer-03);
    text-align: center;
}

/* ── Badge (e.g. "Phổ biến", "0% phí") ── */
.nano-payment-method__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-light));
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 25%, var(--color-light));
    flex-shrink: 0;
}


/* ---------- Invoice ----------
   Printable invoice / receipt layout.

   .nano-invoice                  — wrapper (screen + print)
   .nano-invoice__header          — company logo + invoice title + status badge
   .nano-invoice__meta-grid       — 2-col grid: bill-to / invoice details
   .nano-invoice__meta-block      — one column (company/client address, or dates/number)
   .nano-invoice__meta-label      — small caps field label
   .nano-invoice__meta-value      — field value
   .nano-invoice__table           — line items table (uses nano-table styles internally)
   .nano-invoice__totals          — right-aligned cost breakdown
   .nano-invoice__notes           — payment terms / bank info block
   .nano-invoice__footer          — thank-you line

   Print: @media print hides everything outside .nano-invoice and removes shadows. */

/* ── Wrapper ── */
.nano-invoice {
    background: var(--color-light);
    border: 1px solid var(--color-layer-02);
    border-radius: calc(var(--radius-base) * 1.5);
    padding: 2.5rem;
    max-width: 52rem;
    margin: 0 auto;
    box-shadow: 0 2px 16px color-mix(in srgb, var(--color-dark) 6%, transparent);
}

/* ── Header ── */
.nano-invoice__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.nano-invoice__brand {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nano-invoice__logo {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-primary);
    margin: 0;
}

.nano-invoice__company-address {
    font-size: var(--font-size-xs);
    color: var(--color-layer-03);
    line-height: 1.6;
    margin: 0;
}

.nano-invoice__title-block {
    text-align: right;
}

.nano-invoice__title {
    font-size: 1.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-foreground);
    margin: 0 0 0.5rem;
}

/* ── Status badge ── */
.nano-invoice__status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.875rem;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    &.nano-invoice__status--paid {
        background: color-mix(in srgb, var(--color-success) 12%, var(--color-light));
        color: var(--color-success);
        border: 1px solid color-mix(in srgb, var(--color-success) 30%, var(--color-light));
    }
    &.nano-invoice__status--pending {
        background: color-mix(in srgb, var(--color-warning) 12%, var(--color-light));
        color: color-mix(in srgb, var(--color-warning) 85%, var(--color-dark));
        border: 1px solid color-mix(in srgb, var(--color-warning) 30%, var(--color-light));
    }
    &.nano-invoice__status--overdue {
        background: color-mix(in srgb, var(--color-danger) 10%, var(--color-light));
        color: var(--color-danger);
        border: 1px solid color-mix(in srgb, var(--color-danger) 25%, var(--color-light));
    }
    &.nano-invoice__status--draft {
        background: var(--color-component-01);
        color: var(--color-layer-03);
        border: 1px solid var(--color-layer-02);
    }
}

/* ── Meta grid ── */
.nano-invoice__divider {
    border: none;
    border-top: 1px solid var(--color-layer-02);
    margin: 1.5rem 0;
}

.nano-invoice__meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;

    @media (max-width: 480px) { grid-template-columns: 1fr; }
}

.nano-invoice__meta-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--color-layer-03);
    margin: 0 0 0.375rem;
}

.nano-invoice__meta-value {
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
    line-height: 1.6;
    margin: 0;
}

.nano-invoice__meta-block {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.nano-invoice__meta-field { }

/* ── Line items ── */
.nano-invoice__table-wrap {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.nano-invoice__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);

    th {
        text-align: left;
        padding: 0.625rem 0.75rem;
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        font-weight: 600;
        color: var(--color-layer-03);
        background: var(--color-component-01);
        border-bottom: 1px solid var(--color-layer-02);

        &:last-child { text-align: right; }
    }

    td {
        padding: 0.75rem;
        border-bottom: 1px solid var(--color-layer-02);
        color: var(--color-foreground);
        vertical-align: top;

        &:last-child { text-align: right; font-weight: 500; }
    }

    tbody tr:last-child td { border-bottom: none; }
}

.nano-invoice__item-name {
    font-weight: 600;
    margin: 0 0 0.2rem;
}

.nano-invoice__item-desc {
    font-size: var(--font-size-xs);
    color: var(--color-layer-03);
    margin: 0;
}

/* ── Totals ── */
.nano-invoice__totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    margin-bottom: 2rem;
}

.nano-invoice__total-row {
    display: flex;
    justify-content: flex-end;
    gap: 3rem;
    padding: 0.3rem 0;
    font-size: var(--font-size-sm);
    width: 100%;
    max-width: 22rem;
}

.nano-invoice__total-label { color: var(--color-layer-03); }

.nano-invoice__total-row--discount .nano-invoice__total-value { color: var(--color-success); font-weight: 600; }

.nano-invoice__total-divider {
    width: 100%;
    max-width: 22rem;
    border: none;
    border-top: 1px solid var(--color-layer-02);
    margin: 0.375rem 0;
}

.nano-invoice__total-row--grand {
    .nano-invoice__total-label { font-size: var(--font-size-base); font-weight: 700; color: var(--color-foreground); }
    .nano-invoice__total-value { font-size: 1.25rem; font-weight: 800; }
}

/* ── Notes / Bank info ── */
.nano-invoice__notes {
    background: var(--color-component-01);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    padding: 1rem 1.25rem;
    font-size: var(--font-size-sm);
    margin-bottom: 1.5rem;
}

.nano-invoice__notes-title {
    font-weight: 600;
    margin: 0 0 0.375rem;
    font-size: var(--font-size-sm);
}

.nano-invoice__notes-body {
    color: var(--color-layer-03);
    margin: 0;
    line-height: 1.6;
}

/* ── Footer ── */
.nano-invoice__footer {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-layer-03);
}

/* ── Print action bar ── */
.nano-invoice-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

/* ── Print styles ── */
@media print {
    .nano-navbar,
    .nano-invoice-actions,
    .nano-breadcrumb,
    h1, h2, p.nano-text--secondary,
    .nano-accordion,
    .nano-table.nano-table--bordered { display: none !important; }

    body { background: var(--color-light); }

    .nano-invoice {
        border: none;
        box-shadow: none;
        padding: 0;
        max-width: 100%;
    }
}


/* ---------- Kbd ----------
   Renders a keyboard key badge. Mimics the physical appearance of a key:
   - border-bottom is 2px (thicker than top/sides) to simulate key depth
   - inset box-shadow adds a subtle pressed-edge effect
   Used in documentation, tooltips, keyboard shortcut help panels. */

.nano-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    font-family: monospace, monospace;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-foreground);
    background: var(--color-component-01);
    border: 1px solid var(--color-layer-03);
    border-bottom-width: 2px;
    border-radius: calc(var(--radius-base) - 2px);
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 var(--color-layer-03);
    vertical-align: middle;
}

/* Separator between keys (e.g. "+" or "then") */
.nano-kbd-sep {
    display: inline-flex;
    align-items: center;
    margin: 0 0.25rem;
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    vertical-align: middle;
}


/* ---------- Leaderboard ----------
   Ranked list for scores: rank, user label, optional meta, score.
   Self row uses semantic highlight (primary tint). Keeps tokens only. */

.nano-leaderboard {
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-sm);
}

.nano-leaderboard__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-layer-02);
  border-radius: var(--radius-base);
  overflow: hidden;
  background: var(--color-component-01);
  max-height: min(50vh, 20rem);
  overflow-y: auto;
}

.nano-leaderboard__row {
  display: grid;
  grid-template-columns: 2.15rem 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--space-base) * 2);
  padding: calc(var(--space-base) * 1.75) calc(var(--space-base) * 2.5);
  border-bottom: 1px solid var(--color-layer-02);
  transition: background-color var(--transition-base);
}

.nano-leaderboard__row:last-child {
  border-bottom: none;
}

.nano-leaderboard__row:hover {
  background: var(--color-hover-overlay);
}

.nano-leaderboard__row--self {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-light));
  border-left: 3px solid var(--color-primary);
  padding-left: calc(var(--space-base) * 2.5 - 3px);
}

.nano-leaderboard__row--self:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-light));
}

.nano-leaderboard__rank {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-secondary);
  text-align: right;
}

.nano-leaderboard__score {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-foreground);
  min-width: 2.5rem;
  text-align: right;
}

.nano-leaderboard__row--self .nano-leaderboard__score {
  color: var(--color-primary);
}

.nano-leaderboard__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nano-leaderboard__name {
  font-weight: 600;
  color: var(--color-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.nano-link {
    color: var(--color-primary);
    text-decoration: underline;
}

.nano-link:hover {
    text-decoration: unset;
}

.nano-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
    text-decoration: none;
}

.nano-link:visited {
    color: var(--color-visited);
}

/* ---------- ThemeSwitch ----------
   Compact 3-way selector cho System / Light / Dark mode.
   Thiết kế giống segmented nhưng dành riêng cho việc chuyển theme.
   JS lưu lựa chọn vào localStorage và set data-nano-theme trên <html>. */

.nano-theme-switch {
    --ts-pad: 3px;
    --ts-height: var(--height-base);

    display: inline-flex;
    background: var(--color-component-01);
    border-radius: 999px;
    padding: var(--ts-pad);
    gap: 2px;
}

.nano-theme-switch__item {
    height: calc(var(--ts-height) - var(--ts-pad) * 2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0 0.75rem;
    border: none;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    color: var(--color-secondary);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    user-select: none;
    transition: color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);

    svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        pointer-events: none;
    }

    &:hover:not(.nano-theme-switch__item--active) {
        background: var(--color-hover-overlay);
        color: var(--color-foreground);
    }

    &:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 1px;
    }

    &.nano-theme-switch__item--active {
        background: var(--color-component-02);
        color: var(--color-foreground);
    }
}

/* ── Sizes ── */
.nano-theme-switch--sm {
    --ts-height: var(--height-sm);

    .nano-theme-switch__item {
        font-size: var(--font-size-xs);
        padding: 0 0.5rem;

        svg { width: 0.875rem; height: 0.875rem; }
    }
}

.nano-theme-switch--lg {
    --ts-height: var(--height-lg);

    .nano-theme-switch__item {
        font-size: var(--font-size-base);
        padding: 0 1rem;

        svg { width: 1.125rem; height: 1.125rem; }
    }
}

/* ── Icon-only variant ── */
.nano-theme-switch--icon {
    .nano-theme-switch__item {
        width: calc(var(--ts-height) - var(--ts-pad) * 2);
        padding: 0;
        border-radius: 50%;
    }
}

/* ---------- ThemeDropdown ----------
   Custom dropdown hoàn toàn bằng div, thay thế cho select/option.
   Hiển thị icon + label, cho phép user biết rõ đang chọn theme nào. */

.nano-theme-dropdown {
    --td-height: var(--height-base);
    --td-min-width: 10rem;

    position: relative;
    display: inline-flex;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* Trigger button - hiển thị selected value */
.nano-theme-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-width: var(--td-min-width);
    height: var(--td-height);
    padding: 0 0.875rem;
    border: none;
    border-radius: 999px;
    background: var(--color-component-01);
    color: var(--color-secondary);
    font: inherit;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);

    &:hover {
        background: var(--color-hover-overlay);
        color: var(--color-foreground);
    }

    &:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 1px;
    }

    svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        transition: transform var(--transition-base);
    }
}

/* Arrow icon */
.nano-theme-dropdown__arrow {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-base);
}

.nano-theme-dropdown--open .nano-theme-dropdown__arrow {
    transform: rotate(-135deg);
}

/* Dropdown menu */
.nano-theme-dropdown__menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 0.25rem);
    left: 0;
    min-width: 100%;
    padding: 0.25rem;
    background: var(--color-light);
    border: 1px solid var(--color-layer-02);
    border-radius: var(--radius-base);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}

.nano-theme-dropdown--open .nano-theme-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Menu items */
.nano-theme-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: calc(var(--radius-base) * 0.75);
    background: none;
    color: var(--color-foreground);
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-base);

    &:hover {
        background: var(--color-hover-overlay);
    }

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

    svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }
}

/* Active state - đánh dấu option đang được chọn */
.nano-theme-dropdown__item--active {
    background: var(--color-component-01);
    color: var(--color-primary);

    &:hover {
        background: var(--color-hover-overlay);
    }
}

/* ── Sizes ── */
.nano-theme-dropdown--sm {
    --td-height: var(--height-sm);
    --td-min-width: 8rem;

    font-size: var(--font-size-xs);

    .nano-theme-dropdown__trigger svg,
    .nano-theme-dropdown__item svg {
        width: 0.875rem;
        height: 0.875rem;
    }
}

.nano-theme-dropdown--lg {
    --td-height: var(--height-lg);
    --td-min-width: 12rem;

    font-size: var(--font-size-base);

    .nano-theme-dropdown__trigger svg,
    .nano-theme-dropdown__item svg {
        width: 1.125rem;
        height: 1.125rem;
    }
}

/* ── JS-driven fixed positioning — thoát overflow:hidden/scroll container ── */
.nano-theme-dropdown__menu--js {
    position: fixed;
    top: auto;
    left: auto;
}

/* Menu alignment */
.nano-theme-dropdown__menu--right {
    left: auto;
    right: 0;
}

/* Margin – scale Tailwind (--unit-base): 0,1,2,3,4,5,6,8,10,12,16,20. m | mt | mr | mb | ml | mx | my | *-auto */
.nano-m-0 { margin: calc(var(--unit-base) * 0); }
.nano-m-1 { margin: calc(var(--unit-base) * 1); }
.nano-m-2 { margin: calc(var(--unit-base) * 2); }
.nano-m-3 { margin: calc(var(--unit-base) * 3); }
.nano-m-4 { margin: calc(var(--unit-base) * 4); }
.nano-m-5 { margin: calc(var(--unit-base) * 5); }
.nano-m-6 { margin: calc(var(--unit-base) * 6); }
.nano-m-8 { margin: calc(var(--unit-base) * 8); }
.nano-m-10 { margin: calc(var(--unit-base) * 10); }
.nano-m-12 { margin: calc(var(--unit-base) * 12); }
.nano-m-16 { margin: calc(var(--unit-base) * 16); }
.nano-m-20 { margin: calc(var(--unit-base) * 20); }

.nano-mt-0 { margin-top: calc(var(--unit-base) * 0); }
.nano-mt-1 { margin-top: calc(var(--unit-base) * 1); }
.nano-mt-2 { margin-top: calc(var(--unit-base) * 2); }
.nano-mt-3 { margin-top: calc(var(--unit-base) * 3); }
.nano-mt-4 { margin-top: calc(var(--unit-base) * 4); }
.nano-mt-5 { margin-top: calc(var(--unit-base) * 5); }
.nano-mt-6 { margin-top: calc(var(--unit-base) * 6); }
.nano-mt-8 { margin-top: calc(var(--unit-base) * 8); }
.nano-mt-10 { margin-top: calc(var(--unit-base) * 10); }
.nano-mt-12 { margin-top: calc(var(--unit-base) * 12); }
.nano-mt-16 { margin-top: calc(var(--unit-base) * 16); }
.nano-mt-20 { margin-top: calc(var(--unit-base) * 20); }

.nano-mr-0 { margin-right: calc(var(--unit-base) * 0); }
.nano-mr-1 { margin-right: calc(var(--unit-base) * 1); }
.nano-mr-2 { margin-right: calc(var(--unit-base) * 2); }
.nano-mr-3 { margin-right: calc(var(--unit-base) * 3); }
.nano-mr-4 { margin-right: calc(var(--unit-base) * 4); }
.nano-mr-5 { margin-right: calc(var(--unit-base) * 5); }
.nano-mr-6 { margin-right: calc(var(--unit-base) * 6); }
.nano-mr-8 { margin-right: calc(var(--unit-base) * 8); }
.nano-mr-10 { margin-right: calc(var(--unit-base) * 10); }
.nano-mr-12 { margin-right: calc(var(--unit-base) * 12); }
.nano-mr-16 { margin-right: calc(var(--unit-base) * 16); }
.nano-mr-20 { margin-right: calc(var(--unit-base) * 20); }

.nano-mb-0 { margin-bottom: calc(var(--unit-base) * 0); }
.nano-mb-1 { margin-bottom: calc(var(--unit-base) * 1); }
.nano-mb-2 { margin-bottom: calc(var(--unit-base) * 2); }
.nano-mb-3 { margin-bottom: calc(var(--unit-base) * 3); }
.nano-mb-4 { margin-bottom: calc(var(--unit-base) * 4); }
.nano-mb-5 { margin-bottom: calc(var(--unit-base) * 5); }
.nano-mb-6 { margin-bottom: calc(var(--unit-base) * 6); }
.nano-mb-8 { margin-bottom: calc(var(--unit-base) * 8); }
.nano-mb-10 { margin-bottom: calc(var(--unit-base) * 10); }
.nano-mb-12 { margin-bottom: calc(var(--unit-base) * 12); }
.nano-mb-16 { margin-bottom: calc(var(--unit-base) * 16); }
.nano-mb-20 { margin-bottom: calc(var(--unit-base) * 20); }

.nano-ml-0 { margin-left: calc(var(--unit-base) * 0); }
.nano-ml-1 { margin-left: calc(var(--unit-base) * 1); }
.nano-ml-2 { margin-left: calc(var(--unit-base) * 2); }
.nano-ml-3 { margin-left: calc(var(--unit-base) * 3); }
.nano-ml-4 { margin-left: calc(var(--unit-base) * 4); }
.nano-ml-5 { margin-left: calc(var(--unit-base) * 5); }
.nano-ml-6 { margin-left: calc(var(--unit-base) * 6); }
.nano-ml-8 { margin-left: calc(var(--unit-base) * 8); }
.nano-ml-10 { margin-left: calc(var(--unit-base) * 10); }
.nano-ml-12 { margin-left: calc(var(--unit-base) * 12); }
.nano-ml-16 { margin-left: calc(var(--unit-base) * 16); }
.nano-ml-20 { margin-left: calc(var(--unit-base) * 20); }

.nano-mx-0 { margin-left: calc(var(--unit-base) * 0); margin-right: calc(var(--unit-base) * 0); }
.nano-mx-1 { margin-left: calc(var(--unit-base) * 1); margin-right: calc(var(--unit-base) * 1); }
.nano-mx-2 { margin-left: calc(var(--unit-base) * 2); margin-right: calc(var(--unit-base) * 2); }
.nano-mx-3 { margin-left: calc(var(--unit-base) * 3); margin-right: calc(var(--unit-base) * 3); }
.nano-mx-4 { margin-left: calc(var(--unit-base) * 4); margin-right: calc(var(--unit-base) * 4); }
.nano-mx-5 { margin-left: calc(var(--unit-base) * 5); margin-right: calc(var(--unit-base) * 5); }
.nano-mx-6 { margin-left: calc(var(--unit-base) * 6); margin-right: calc(var(--unit-base) * 6); }
.nano-mx-8 { margin-left: calc(var(--unit-base) * 8); margin-right: calc(var(--unit-base) * 8); }
.nano-mx-10 { margin-left: calc(var(--unit-base) * 10); margin-right: calc(var(--unit-base) * 10); }
.nano-mx-12 { margin-left: calc(var(--unit-base) * 12); margin-right: calc(var(--unit-base) * 12); }
.nano-mx-16 { margin-left: calc(var(--unit-base) * 16); margin-right: calc(var(--unit-base) * 16); }
.nano-mx-20 { margin-left: calc(var(--unit-base) * 20); margin-right: calc(var(--unit-base) * 20); }

.nano-my-0 { margin-top: calc(var(--unit-base) * 0); margin-bottom: calc(var(--unit-base) * 0); }
.nano-my-1 { margin-top: calc(var(--unit-base) * 1); margin-bottom: calc(var(--unit-base) * 1); }
.nano-my-2 { margin-top: calc(var(--unit-base) * 2); margin-bottom: calc(var(--unit-base) * 2); }
.nano-my-3 { margin-top: calc(var(--unit-base) * 3); margin-bottom: calc(var(--unit-base) * 3); }
.nano-my-4 { margin-top: calc(var(--unit-base) * 4); margin-bottom: calc(var(--unit-base) * 4); }
.nano-my-5 { margin-top: calc(var(--unit-base) * 5); margin-bottom: calc(var(--unit-base) * 5); }
.nano-my-6 { margin-top: calc(var(--unit-base) * 6); margin-bottom: calc(var(--unit-base) * 6); }
.nano-my-8 { margin-top: calc(var(--unit-base) * 8); margin-bottom: calc(var(--unit-base) * 8); }
.nano-my-10 { margin-top: calc(var(--unit-base) * 10); margin-bottom: calc(var(--unit-base) * 10); }
.nano-my-12 { margin-top: calc(var(--unit-base) * 12); margin-bottom: calc(var(--unit-base) * 12); }
.nano-my-16 { margin-top: calc(var(--unit-base) * 16); margin-bottom: calc(var(--unit-base) * 16); }
.nano-my-20 { margin-top: calc(var(--unit-base) * 20); margin-bottom: calc(var(--unit-base) * 20); }

.nano-m-auto { margin: auto; }
.nano-mx-auto { margin-left: auto; margin-right: auto; }
.nano-my-auto { margin-top: auto; margin-bottom: auto; }
.nano-mt-auto { margin-top: auto; }
.nano-mr-auto { margin-right: auto; }
.nano-mb-auto { margin-bottom: auto; }
.nano-ml-auto { margin-left: auto; }

@layer padding {
  .nano-p-0 {
    padding: calc(var(--unit-base) * 0);
  }
  .nano-p-1 {
    padding: calc(var(--unit-base) * 1);
  }
  .nano-p-2 {
    padding: calc(var(--unit-base) * 2);
  }
  .nano-p-3 {
    padding: calc(var(--unit-base) * 3);
  }
  .nano-p-4 {
    padding: calc(var(--unit-base) * 4);
  }
  .nano-p-5 {
    padding: calc(var(--unit-base) * 5);
  }
  .nano-p-6 {
    padding: calc(var(--unit-base) * 6);
  }
  .nano-p-8 {
    padding: calc(var(--unit-base) * 8);
  }
  .nano-p-10 {
    padding: calc(var(--unit-base) * 10);
  }
  .nano-p-12 {
    padding: calc(var(--unit-base) * 12);
  }
  .nano-p-16 {
    padding: calc(var(--unit-base) * 16);
  }
  .nano-p-20 {
    padding: calc(var(--unit-base) * 20);
  }

  .nano-pt-0 {
    padding-top: calc(var(--unit-base) * 0);
  }
  .nano-pt-1 {
    padding-top: calc(var(--unit-base) * 1);
  }
  .nano-pt-2 {
    padding-top: calc(var(--unit-base) * 2);
  }
  .nano-pt-3 {
    padding-top: calc(var(--unit-base) * 3);
  }
  .nano-pt-4 {
    padding-top: calc(var(--unit-base) * 4);
  }
  .nano-pt-5 {
    padding-top: calc(var(--unit-base) * 5);
  }
  .nano-pt-6 {
    padding-top: calc(var(--unit-base) * 6);
  }
  .nano-pt-8 {
    padding-top: calc(var(--unit-base) * 8);
  }
  .nano-pt-10 {
    padding-top: calc(var(--unit-base) * 10);
  }
  .nano-pt-12 {
    padding-top: calc(var(--unit-base) * 12);
  }
  .nano-pt-16 {
    padding-top: calc(var(--unit-base) * 16);
  }
  .nano-pt-20 {
    padding-top: calc(var(--unit-base) * 20);
  }

  .nano-pr-0 {
    padding-right: calc(var(--unit-base) * 0);
  }
  .nano-pr-1 {
    padding-right: calc(var(--unit-base) * 1);
  }
  .nano-pr-2 {
    padding-right: calc(var(--unit-base) * 2);
  }
  .nano-pr-3 {
    padding-right: calc(var(--unit-base) * 3);
  }
  .nano-pr-4 {
    padding-right: calc(var(--unit-base) * 4);
  }
  .nano-pr-5 {
    padding-right: calc(var(--unit-base) * 5);
  }
  .nano-pr-6 {
    padding-right: calc(var(--unit-base) * 6);
  }
  .nano-pr-8 {
    padding-right: calc(var(--unit-base) * 8);
  }
  .nano-pr-10 {
    padding-right: calc(var(--unit-base) * 10);
  }
  .nano-pr-12 {
    padding-right: calc(var(--unit-base) * 12);
  }
  .nano-pr-16 {
    padding-right: calc(var(--unit-base) * 16);
  }
  .nano-pr-20 {
    padding-right: calc(var(--unit-base) * 20);
  }

  .nano-pb-0 {
    padding-bottom: calc(var(--unit-base) * 0);
  }
  .nano-pb-1 {
    padding-bottom: calc(var(--unit-base) * 1);
  }
  .nano-pb-2 {
    padding-bottom: calc(var(--unit-base) * 2);
  }
  .nano-pb-3 {
    padding-bottom: calc(var(--unit-base) * 3);
  }
  .nano-pb-4 {
    padding-bottom: calc(var(--unit-base) * 4);
  }
  .nano-pb-5 {
    padding-bottom: calc(var(--unit-base) * 5);
  }
  .nano-pb-6 {
    padding-bottom: calc(var(--unit-base) * 6);
  }
  .nano-pb-8 {
    padding-bottom: calc(var(--unit-base) * 8);
  }
  .nano-pb-10 {
    padding-bottom: calc(var(--unit-base) * 10);
  }
  .nano-pb-12 {
    padding-bottom: calc(var(--unit-base) * 12);
  }
  .nano-pb-16 {
    padding-bottom: calc(var(--unit-base) * 16);
  }
  .nano-pb-20 {
    padding-bottom: calc(var(--unit-base) * 20);
  }

  .nano-pl-0 {
    padding-left: calc(var(--unit-base) * 0);
  }
  .nano-pl-1 {
    padding-left: calc(var(--unit-base) * 1);
  }
  .nano-pl-2 {
    padding-left: calc(var(--unit-base) * 2);
  }
  .nano-pl-3 {
    padding-left: calc(var(--unit-base) * 3);
  }
  .nano-pl-4 {
    padding-left: calc(var(--unit-base) * 4);
  }
  .nano-pl-5 {
    padding-left: calc(var(--unit-base) * 5);
  }
  .nano-pl-6 {
    padding-left: calc(var(--unit-base) * 6);
  }
  .nano-pl-8 {
    padding-left: calc(var(--unit-base) * 8);
  }
  .nano-pl-10 {
    padding-left: calc(var(--unit-base) * 10);
  }
  .nano-pl-12 {
    padding-left: calc(var(--unit-base) * 12);
  }
  .nano-pl-16 {
    padding-left: calc(var(--unit-base) * 16);
  }
  .nano-pl-20 {
    padding-left: calc(var(--unit-base) * 20);
  }

  .nano-px-0 {
    padding-left: calc(var(--unit-base) * 0);
    padding-right: calc(var(--unit-base) * 0);
  }
  .nano-px-1 {
    padding-left: calc(var(--unit-base) * 1);
    padding-right: calc(var(--unit-base) * 1);
  }
  .nano-px-2 {
    padding-left: calc(var(--unit-base) * 2);
    padding-right: calc(var(--unit-base) * 2);
  }
  .nano-px-3 {
    padding-left: calc(var(--unit-base) * 3);
    padding-right: calc(var(--unit-base) * 3);
  }
  .nano-px-4 {
    padding-left: calc(var(--unit-base) * 4);
    padding-right: calc(var(--unit-base) * 4);
  }
  .nano-px-5 {
    padding-left: calc(var(--unit-base) * 5);
    padding-right: calc(var(--unit-base) * 5);
  }
  .nano-px-6 {
    padding-left: calc(var(--unit-base) * 6);
    padding-right: calc(var(--unit-base) * 6);
  }
  .nano-px-8 {
    padding-left: calc(var(--unit-base) * 8);
    padding-right: calc(var(--unit-base) * 8);
  }
  .nano-px-10 {
    padding-left: calc(var(--unit-base) * 10);
    padding-right: calc(var(--unit-base) * 10);
  }
  .nano-px-12 {
    padding-left: calc(var(--unit-base) * 12);
    padding-right: calc(var(--unit-base) * 12);
  }
  .nano-px-16 {
    padding-left: calc(var(--unit-base) * 16);
    padding-right: calc(var(--unit-base) * 16);
  }
  .nano-px-20 {
    padding-left: calc(var(--unit-base) * 20);
    padding-right: calc(var(--unit-base) * 20);
  }

  .nano-py-0 {
    padding-top: calc(var(--unit-base) * 0);
    padding-bottom: calc(var(--unit-base) * 0);
  }
  .nano-py-1 {
    padding-top: calc(var(--unit-base) * 1);
    padding-bottom: calc(var(--unit-base) * 1);
  }
  .nano-py-2 {
    padding-top: calc(var(--unit-base) * 2);
    padding-bottom: calc(var(--unit-base) * 2);
  }
  .nano-py-3 {
    padding-top: calc(var(--unit-base) * 3);
    padding-bottom: calc(var(--unit-base) * 3);
  }
  .nano-py-4 {
    padding-top: calc(var(--unit-base) * 4);
    padding-bottom: calc(var(--unit-base) * 4);
  }
  .nano-py-5 {
    padding-top: calc(var(--unit-base) * 5);
    padding-bottom: calc(var(--unit-base) * 5);
  }
  .nano-py-6 {
    padding-top: calc(var(--unit-base) * 6);
    padding-bottom: calc(var(--unit-base) * 6);
  }
  .nano-py-8 {
    padding-top: calc(var(--unit-base) * 8);
    padding-bottom: calc(var(--unit-base) * 8);
  }
  .nano-py-10 {
    padding-top: calc(var(--unit-base) * 10);
    padding-bottom: calc(var(--unit-base) * 10);
  }
  .nano-py-12 {
    padding-top: calc(var(--unit-base) * 12);
    padding-bottom: calc(var(--unit-base) * 12);
  }
  .nano-py-16 {
    padding-top: calc(var(--unit-base) * 16);
    padding-bottom: calc(var(--unit-base) * 16);
  }
  .nano-py-20 {
    padding-top: calc(var(--unit-base) * 20);
    padding-bottom: calc(var(--unit-base) * 20);
  }
}

/* ============================================================
   NANO GRID SYSTEM — 24 Columns, Mobile-First Responsive
   Breakpoints:
     (base) : all sizes
     sm     : ≥ 480px
     md     : ≥ 768px
     lg     : ≥ 1024px
     xl     : ≥ 1280px
     xxl    : ≥ 1536px
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --grid-columns: 24;
  /* Khớp spacing token (4 × --space-base = 1rem) — đồng bộ với utilities */
  --grid-gutter: calc(var(--space-base) * 4);
}

/* Gutter nhỏ hơn trên viewport hẹp: giữ khoảng cách nhưng giảm rủi ro tràn ngang
   khi nhiều cột + nội dung min-content lớn (đi kèm minmax/min-width bên dưới). */
@media (max-width: 479px) {
  :root {
    --grid-gutter: calc(var(--space-base) * 2);
  }
}

/* ---------- Container ---------- */
.nano-container {
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
}

.nano-container-fluid {
  width: 100%;
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
}

/* ---------- Row ---------- */
.nano-row {
  display: grid;
  /* minmax(0, 1fr): tránh minimum auto của 1fr — ô được phép co theo container,
     không đẩy grid rộng hơn 100% khi có column-gap (lỗi thường gặp trên mobile). */
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

/* Cho phép item co trong ô; nội dung bên trong vẫn wrap/overflow theo component con. */
.nano-row > * {
  min-width: 0;
}

.nano-row-no-gap    { gap: 0; }
.nano-row-gap-xs    { gap: 0.25rem; }
.nano-row-gap-sm    { gap: 0.5rem; }
.nano-row-gap-md    { gap: 1rem; }
.nano-row-gap-lg    { gap: 1.5rem; }
.nano-row-gap-xl    { gap: 2rem; }
.nano-row-gap-xxl   { gap: 3rem; }

/* ---------- Alignment helpers on row ---------- */
.nano-row-start     { align-items: start; }
.nano-row-center    { align-items: center; }
.nano-row-end       { align-items: end; }
.nano-row-stretch   { align-items: stretch; }


/* ============================================================
   BASE COLUMNS  (no prefix — applies to ALL breakpoints)
   ============================================================ */
.nano-col-1  { grid-column: span 1; }
.nano-col-2  { grid-column: span 2; }
.nano-col-3  { grid-column: span 3; }
.nano-col-4  { grid-column: span 4; }
.nano-col-5  { grid-column: span 5; }
.nano-col-6  { grid-column: span 6; }
.nano-col-7  { grid-column: span 7; }
.nano-col-8  { grid-column: span 8; }
.nano-col-9  { grid-column: span 9; }
.nano-col-10 { grid-column: span 10; }
.nano-col-11 { grid-column: span 11; }
.nano-col-12 { grid-column: span 12; }
.nano-col-13 { grid-column: span 13; }
.nano-col-14 { grid-column: span 14; }
.nano-col-15 { grid-column: span 15; }
.nano-col-16 { grid-column: span 16; }
.nano-col-17 { grid-column: span 17; }
.nano-col-18 { grid-column: span 18; }
.nano-col-19 { grid-column: span 19; }
.nano-col-20 { grid-column: span 20; }
.nano-col-21 { grid-column: span 21; }
.nano-col-22 { grid-column: span 22; }
.nano-col-23 { grid-column: span 23; }
.nano-col-24 { grid-column: span 24; }

/* BASE — Column start (offset) */
.nano-col-start-1  { grid-column-start: 1; }
.nano-col-start-2  { grid-column-start: 2; }
.nano-col-start-3  { grid-column-start: 3; }
.nano-col-start-4  { grid-column-start: 4; }
.nano-col-start-5  { grid-column-start: 5; }
.nano-col-start-6  { grid-column-start: 6; }
.nano-col-start-7  { grid-column-start: 7; }
.nano-col-start-8  { grid-column-start: 8; }
.nano-col-start-9  { grid-column-start: 9; }
.nano-col-start-10 { grid-column-start: 10; }
.nano-col-start-11 { grid-column-start: 11; }
.nano-col-start-12 { grid-column-start: 12; }
.nano-col-start-13 { grid-column-start: 13; }
.nano-col-start-14 { grid-column-start: 14; }
.nano-col-start-15 { grid-column-start: 15; }
.nano-col-start-16 { grid-column-start: 16; }
.nano-col-start-17 { grid-column-start: 17; }
.nano-col-start-18 { grid-column-start: 18; }
.nano-col-start-19 { grid-column-start: 19; }
.nano-col-start-20 { grid-column-start: 20; }
.nano-col-start-21 { grid-column-start: 21; }
.nano-col-start-22 { grid-column-start: 22; }
.nano-col-start-23 { grid-column-start: 23; }
.nano-col-start-24 { grid-column-start: 24; }
.nano-col-start-auto { grid-column-start: auto; }

/* BASE — Self alignment */
.nano-self-start   { align-self: start; }
.nano-self-center  { align-self: center; }
.nano-self-end     { align-self: end; }
.nano-self-stretch { align-self: stretch; }

/* BASE — Order */
.nano-order-first  { order: -9999; }
.nano-order-last   { order:  9999; }
.nano-order-1      { order: 1; }
.nano-order-2      { order: 2; }
.nano-order-3      { order: 3; }
.nano-order-4      { order: 4; }
.nano-order-5      { order: 5; }
.nano-order-6      { order: 6; }


/* ============================================================
   SM — ≥ 480px
   ============================================================ */
@media (min-width: 480px) {

  /* Columns */
  .nano-col-sm-1  { grid-column: span 1; }
  .nano-col-sm-2  { grid-column: span 2; }
  .nano-col-sm-3  { grid-column: span 3; }
  .nano-col-sm-4  { grid-column: span 4; }
  .nano-col-sm-5  { grid-column: span 5; }
  .nano-col-sm-6  { grid-column: span 6; }
  .nano-col-sm-7  { grid-column: span 7; }
  .nano-col-sm-8  { grid-column: span 8; }
  .nano-col-sm-9  { grid-column: span 9; }
  .nano-col-sm-10 { grid-column: span 10; }
  .nano-col-sm-11 { grid-column: span 11; }
  .nano-col-sm-12 { grid-column: span 12; }
  .nano-col-sm-13 { grid-column: span 13; }
  .nano-col-sm-14 { grid-column: span 14; }
  .nano-col-sm-15 { grid-column: span 15; }
  .nano-col-sm-16 { grid-column: span 16; }
  .nano-col-sm-17 { grid-column: span 17; }
  .nano-col-sm-18 { grid-column: span 18; }
  .nano-col-sm-19 { grid-column: span 19; }
  .nano-col-sm-20 { grid-column: span 20; }
  .nano-col-sm-21 { grid-column: span 21; }
  .nano-col-sm-22 { grid-column: span 22; }
  .nano-col-sm-23 { grid-column: span 23; }
  .nano-col-sm-24 { grid-column: span 24; }

  /* Column start */
  .nano-col-start-sm-1  { grid-column-start: 1; }
  .nano-col-start-sm-2  { grid-column-start: 2; }
  .nano-col-start-sm-3  { grid-column-start: 3; }
  .nano-col-start-sm-4  { grid-column-start: 4; }
  .nano-col-start-sm-5  { grid-column-start: 5; }
  .nano-col-start-sm-6  { grid-column-start: 6; }
  .nano-col-start-sm-7  { grid-column-start: 7; }
  .nano-col-start-sm-8  { grid-column-start: 8; }
  .nano-col-start-sm-9  { grid-column-start: 9; }
  .nano-col-start-sm-10 { grid-column-start: 10; }
  .nano-col-start-sm-11 { grid-column-start: 11; }
  .nano-col-start-sm-12 { grid-column-start: 12; }
  .nano-col-start-sm-13 { grid-column-start: 13; }
  .nano-col-start-sm-14 { grid-column-start: 14; }
  .nano-col-start-sm-15 { grid-column-start: 15; }
  .nano-col-start-sm-16 { grid-column-start: 16; }
  .nano-col-start-sm-17 { grid-column-start: 17; }
  .nano-col-start-sm-18 { grid-column-start: 18; }
  .nano-col-start-sm-19 { grid-column-start: 19; }
  .nano-col-start-sm-20 { grid-column-start: 20; }
  .nano-col-start-sm-21 { grid-column-start: 21; }
  .nano-col-start-sm-22 { grid-column-start: 22; }
  .nano-col-start-sm-23 { grid-column-start: 23; }
  .nano-col-start-sm-24 { grid-column-start: 24; }
  .nano-col-start-sm-auto { grid-column-start: auto; }

  /* Self alignment */
  .nano-self-sm-start   { align-self: start; }
  .nano-self-sm-center  { align-self: center; }
  .nano-self-sm-end     { align-self: end; }
  .nano-self-sm-stretch { align-self: stretch; }

  /* Order */
  .nano-order-sm-first  { order: -9999; }
  .nano-order-sm-last   { order:  9999; }
  .nano-order-sm-1      { order: 1; }
  .nano-order-sm-2      { order: 2; }
  .nano-order-sm-3      { order: 3; }
  .nano-order-sm-4      { order: 4; }
  .nano-order-sm-5      { order: 5; }
  .nano-order-sm-6      { order: 6; }

  /* Visibility */
  .nano-hidden-sm  { display: none; }
  .nano-visible-sm { display: revert; }
}


/* ============================================================
   MD — ≥ 768px
   ============================================================ */
@media (min-width: 768px) {

  /* Columns */
  .nano-col-md-1  { grid-column: span 1; }
  .nano-col-md-2  { grid-column: span 2; }
  .nano-col-md-3  { grid-column: span 3; }
  .nano-col-md-4  { grid-column: span 4; }
  .nano-col-md-5  { grid-column: span 5; }
  .nano-col-md-6  { grid-column: span 6; }
  .nano-col-md-7  { grid-column: span 7; }
  .nano-col-md-8  { grid-column: span 8; }
  .nano-col-md-9  { grid-column: span 9; }
  .nano-col-md-10 { grid-column: span 10; }
  .nano-col-md-11 { grid-column: span 11; }
  .nano-col-md-12 { grid-column: span 12; }
  .nano-col-md-13 { grid-column: span 13; }
  .nano-col-md-14 { grid-column: span 14; }
  .nano-col-md-15 { grid-column: span 15; }
  .nano-col-md-16 { grid-column: span 16; }
  .nano-col-md-17 { grid-column: span 17; }
  .nano-col-md-18 { grid-column: span 18; }
  .nano-col-md-19 { grid-column: span 19; }
  .nano-col-md-20 { grid-column: span 20; }
  .nano-col-md-21 { grid-column: span 21; }
  .nano-col-md-22 { grid-column: span 22; }
  .nano-col-md-23 { grid-column: span 23; }
  .nano-col-md-24 { grid-column: span 24; }

  /* Column start */
  .nano-col-start-md-1  { grid-column-start: 1; }
  .nano-col-start-md-2  { grid-column-start: 2; }
  .nano-col-start-md-3  { grid-column-start: 3; }
  .nano-col-start-md-4  { grid-column-start: 4; }
  .nano-col-start-md-5  { grid-column-start: 5; }
  .nano-col-start-md-6  { grid-column-start: 6; }
  .nano-col-start-md-7  { grid-column-start: 7; }
  .nano-col-start-md-8  { grid-column-start: 8; }
  .nano-col-start-md-9  { grid-column-start: 9; }
  .nano-col-start-md-10 { grid-column-start: 10; }
  .nano-col-start-md-11 { grid-column-start: 11; }
  .nano-col-start-md-12 { grid-column-start: 12; }
  .nano-col-start-md-13 { grid-column-start: 13; }
  .nano-col-start-md-14 { grid-column-start: 14; }
  .nano-col-start-md-15 { grid-column-start: 15; }
  .nano-col-start-md-16 { grid-column-start: 16; }
  .nano-col-start-md-17 { grid-column-start: 17; }
  .nano-col-start-md-18 { grid-column-start: 18; }
  .nano-col-start-md-19 { grid-column-start: 19; }
  .nano-col-start-md-20 { grid-column-start: 20; }
  .nano-col-start-md-21 { grid-column-start: 21; }
  .nano-col-start-md-22 { grid-column-start: 22; }
  .nano-col-start-md-23 { grid-column-start: 23; }
  .nano-col-start-md-24 { grid-column-start: 24; }
  .nano-col-start-md-auto { grid-column-start: auto; }

  /* Self alignment */
  .nano-self-md-start   { align-self: start; }
  .nano-self-md-center  { align-self: center; }
  .nano-self-md-end     { align-self: end; }
  .nano-self-md-stretch { align-self: stretch; }

  /* Order */
  .nano-order-md-first  { order: -9999; }
  .nano-order-md-last   { order:  9999; }
  .nano-order-md-1      { order: 1; }
  .nano-order-md-2      { order: 2; }
  .nano-order-md-3      { order: 3; }
  .nano-order-md-4      { order: 4; }
  .nano-order-md-5      { order: 5; }
  .nano-order-md-6      { order: 6; }

  /* Visibility */
  .nano-hidden-md  { display: none; }
  .nano-visible-md { display: revert; }
}


/* ============================================================
   LG — ≥ 1024px
   ============================================================ */
@media (min-width: 1024px) {

  /* Columns */
  .nano-col-lg-1  { grid-column: span 1; }
  .nano-col-lg-2  { grid-column: span 2; }
  .nano-col-lg-3  { grid-column: span 3; }
  .nano-col-lg-4  { grid-column: span 4; }
  .nano-col-lg-5  { grid-column: span 5; }
  .nano-col-lg-6  { grid-column: span 6; }
  .nano-col-lg-7  { grid-column: span 7; }
  .nano-col-lg-8  { grid-column: span 8; }
  .nano-col-lg-9  { grid-column: span 9; }
  .nano-col-lg-10 { grid-column: span 10; }
  .nano-col-lg-11 { grid-column: span 11; }
  .nano-col-lg-12 { grid-column: span 12; }
  .nano-col-lg-13 { grid-column: span 13; }
  .nano-col-lg-14 { grid-column: span 14; }
  .nano-col-lg-15 { grid-column: span 15; }
  .nano-col-lg-16 { grid-column: span 16; }
  .nano-col-lg-17 { grid-column: span 17; }
  .nano-col-lg-18 { grid-column: span 18; }
  .nano-col-lg-19 { grid-column: span 19; }
  .nano-col-lg-20 { grid-column: span 20; }
  .nano-col-lg-21 { grid-column: span 21; }
  .nano-col-lg-22 { grid-column: span 22; }
  .nano-col-lg-23 { grid-column: span 23; }
  .nano-col-lg-24 { grid-column: span 24; }

  /* Column start */
  .nano-col-start-lg-1  { grid-column-start: 1; }
  .nano-col-start-lg-2  { grid-column-start: 2; }
  .nano-col-start-lg-3  { grid-column-start: 3; }
  .nano-col-start-lg-4  { grid-column-start: 4; }
  .nano-col-start-lg-5  { grid-column-start: 5; }
  .nano-col-start-lg-6  { grid-column-start: 6; }
  .nano-col-start-lg-7  { grid-column-start: 7; }
  .nano-col-start-lg-8  { grid-column-start: 8; }
  .nano-col-start-lg-9  { grid-column-start: 9; }
  .nano-col-start-lg-10 { grid-column-start: 10; }
  .nano-col-start-lg-11 { grid-column-start: 11; }
  .nano-col-start-lg-12 { grid-column-start: 12; }
  .nano-col-start-lg-13 { grid-column-start: 13; }
  .nano-col-start-lg-14 { grid-column-start: 14; }
  .nano-col-start-lg-15 { grid-column-start: 15; }
  .nano-col-start-lg-16 { grid-column-start: 16; }
  .nano-col-start-lg-17 { grid-column-start: 17; }
  .nano-col-start-lg-18 { grid-column-start: 18; }
  .nano-col-start-lg-19 { grid-column-start: 19; }
  .nano-col-start-lg-20 { grid-column-start: 20; }
  .nano-col-start-lg-21 { grid-column-start: 21; }
  .nano-col-start-lg-22 { grid-column-start: 22; }
  .nano-col-start-lg-23 { grid-column-start: 23; }
  .nano-col-start-lg-24 { grid-column-start: 24; }
  .nano-col-start-lg-auto { grid-column-start: auto; }

  /* Self alignment */
  .nano-self-lg-start   { align-self: start; }
  .nano-self-lg-center  { align-self: center; }
  .nano-self-lg-end     { align-self: end; }
  .nano-self-lg-stretch { align-self: stretch; }

  /* Order */
  .nano-order-lg-first  { order: -9999; }
  .nano-order-lg-last   { order:  9999; }
  .nano-order-lg-1      { order: 1; }
  .nano-order-lg-2      { order: 2; }
  .nano-order-lg-3      { order: 3; }
  .nano-order-lg-4      { order: 4; }
  .nano-order-lg-5      { order: 5; }
  .nano-order-lg-6      { order: 6; }

  /* Visibility */
  .nano-hidden-lg  { display: none; }
  .nano-visible-lg { display: revert; }
}


/* ============================================================
   XL — ≥ 1280px
   ============================================================ */
@media (min-width: 1280px) {

  /* Columns */
  .nano-col-xl-1  { grid-column: span 1; }
  .nano-col-xl-2  { grid-column: span 2; }
  .nano-col-xl-3  { grid-column: span 3; }
  .nano-col-xl-4  { grid-column: span 4; }
  .nano-col-xl-5  { grid-column: span 5; }
  .nano-col-xl-6  { grid-column: span 6; }
  .nano-col-xl-7  { grid-column: span 7; }
  .nano-col-xl-8  { grid-column: span 8; }
  .nano-col-xl-9  { grid-column: span 9; }
  .nano-col-xl-10 { grid-column: span 10; }
  .nano-col-xl-11 { grid-column: span 11; }
  .nano-col-xl-12 { grid-column: span 12; }
  .nano-col-xl-13 { grid-column: span 13; }
  .nano-col-xl-14 { grid-column: span 14; }
  .nano-col-xl-15 { grid-column: span 15; }
  .nano-col-xl-16 { grid-column: span 16; }
  .nano-col-xl-17 { grid-column: span 17; }
  .nano-col-xl-18 { grid-column: span 18; }
  .nano-col-xl-19 { grid-column: span 19; }
  .nano-col-xl-20 { grid-column: span 20; }
  .nano-col-xl-21 { grid-column: span 21; }
  .nano-col-xl-22 { grid-column: span 22; }
  .nano-col-xl-23 { grid-column: span 23; }
  .nano-col-xl-24 { grid-column: span 24; }

  /* Column start */
  .nano-col-start-xl-1  { grid-column-start: 1; }
  .nano-col-start-xl-2  { grid-column-start: 2; }
  .nano-col-start-xl-3  { grid-column-start: 3; }
  .nano-col-start-xl-4  { grid-column-start: 4; }
  .nano-col-start-xl-5  { grid-column-start: 5; }
  .nano-col-start-xl-6  { grid-column-start: 6; }
  .nano-col-start-xl-7  { grid-column-start: 7; }
  .nano-col-start-xl-8  { grid-column-start: 8; }
  .nano-col-start-xl-9  { grid-column-start: 9; }
  .nano-col-start-xl-10 { grid-column-start: 10; }
  .nano-col-start-xl-11 { grid-column-start: 11; }
  .nano-col-start-xl-12 { grid-column-start: 12; }
  .nano-col-start-xl-13 { grid-column-start: 13; }
  .nano-col-start-xl-14 { grid-column-start: 14; }
  .nano-col-start-xl-15 { grid-column-start: 15; }
  .nano-col-start-xl-16 { grid-column-start: 16; }
  .nano-col-start-xl-17 { grid-column-start: 17; }
  .nano-col-start-xl-18 { grid-column-start: 18; }
  .nano-col-start-xl-19 { grid-column-start: 19; }
  .nano-col-start-xl-20 { grid-column-start: 20; }
  .nano-col-start-xl-21 { grid-column-start: 21; }
  .nano-col-start-xl-22 { grid-column-start: 22; }
  .nano-col-start-xl-23 { grid-column-start: 23; }
  .nano-col-start-xl-24 { grid-column-start: 24; }
  .nano-col-start-xl-auto { grid-column-start: auto; }

  /* Self alignment */
  .nano-self-xl-start   { align-self: start; }
  .nano-self-xl-center  { align-self: center; }
  .nano-self-xl-end     { align-self: end; }
  .nano-self-xl-stretch { align-self: stretch; }

  /* Order */
  .nano-order-xl-first  { order: -9999; }
  .nano-order-xl-last   { order:  9999; }
  .nano-order-xl-1      { order: 1; }
  .nano-order-xl-2      { order: 2; }
  .nano-order-xl-3      { order: 3; }
  .nano-order-xl-4      { order: 4; }
  .nano-order-xl-5      { order: 5; }
  .nano-order-xl-6      { order: 6; }

  /* Visibility */
  .nano-hidden-xl  { display: none; }
  .nano-visible-xl { display: revert; }
}


/* ============================================================
   XXL — ≥ 1536px
   ============================================================ */
@media (min-width: 1536px) {

  /* Columns */
  .nano-col-xxl-1  { grid-column: span 1; }
  .nano-col-xxl-2  { grid-column: span 2; }
  .nano-col-xxl-3  { grid-column: span 3; }
  .nano-col-xxl-4  { grid-column: span 4; }
  .nano-col-xxl-5  { grid-column: span 5; }
  .nano-col-xxl-6  { grid-column: span 6; }
  .nano-col-xxl-7  { grid-column: span 7; }
  .nano-col-xxl-8  { grid-column: span 8; }
  .nano-col-xxl-9  { grid-column: span 9; }
  .nano-col-xxl-10 { grid-column: span 10; }
  .nano-col-xxl-11 { grid-column: span 11; }
  .nano-col-xxl-12 { grid-column: span 12; }
  .nano-col-xxl-13 { grid-column: span 13; }
  .nano-col-xxl-14 { grid-column: span 14; }
  .nano-col-xxl-15 { grid-column: span 15; }
  .nano-col-xxl-16 { grid-column: span 16; }
  .nano-col-xxl-17 { grid-column: span 17; }
  .nano-col-xxl-18 { grid-column: span 18; }
  .nano-col-xxl-19 { grid-column: span 19; }
  .nano-col-xxl-20 { grid-column: span 20; }
  .nano-col-xxl-21 { grid-column: span 21; }
  .nano-col-xxl-22 { grid-column: span 22; }
  .nano-col-xxl-23 { grid-column: span 23; }
  .nano-col-xxl-24 { grid-column: span 24; }

  /* Column start */
  .nano-col-start-xxl-1  { grid-column-start: 1; }
  .nano-col-start-xxl-2  { grid-column-start: 2; }
  .nano-col-start-xxl-3  { grid-column-start: 3; }
  .nano-col-start-xxl-4  { grid-column-start: 4; }
  .nano-col-start-xxl-5  { grid-column-start: 5; }
  .nano-col-start-xxl-6  { grid-column-start: 6; }
  .nano-col-start-xxl-7  { grid-column-start: 7; }
  .nano-col-start-xxl-8  { grid-column-start: 8; }
  .nano-col-start-xxl-9  { grid-column-start: 9; }
  .nano-col-start-xxl-10 { grid-column-start: 10; }
  .nano-col-start-xxl-11 { grid-column-start: 11; }
  .nano-col-start-xxl-12 { grid-column-start: 12; }
  .nano-col-start-xxl-13 { grid-column-start: 13; }
  .nano-col-start-xxl-14 { grid-column-start: 14; }
  .nano-col-start-xxl-15 { grid-column-start: 15; }
  .nano-col-start-xxl-16 { grid-column-start: 16; }
  .nano-col-start-xxl-17 { grid-column-start: 17; }
  .nano-col-start-xxl-18 { grid-column-start: 18; }
  .nano-col-start-xxl-19 { grid-column-start: 19; }
  .nano-col-start-xxl-20 { grid-column-start: 20; }
  .nano-col-start-xxl-21 { grid-column-start: 21; }
  .nano-col-start-xxl-22 { grid-column-start: 22; }
  .nano-col-start-xxl-23 { grid-column-start: 23; }
  .nano-col-start-xxl-24 { grid-column-start: 24; }
  .nano-col-start-xxl-auto { grid-column-start: auto; }

  /* Self alignment */
  .nano-self-xxl-start   { align-self: start; }
  .nano-self-xxl-center  { align-self: center; }
  .nano-self-xxl-end     { align-self: end; }
  .nano-self-xxl-stretch { align-self: stretch; }

  /* Order */
  .nano-order-xxl-first  { order: -9999; }
  .nano-order-xxl-last   { order:  9999; }
  .nano-order-xxl-1      { order: 1; }
  .nano-order-xxl-2      { order: 2; }
  .nano-order-xxl-3      { order: 3; }
  .nano-order-xxl-4      { order: 4; }
  .nano-order-xxl-5      { order: 5; }
  .nano-order-xxl-6      { order: 6; }

  /* Visibility */
  .nano-hidden-xxl  { display: none; }
  .nano-visible-xxl { display: revert; }
}


/* ============================================================
   GLOBAL VISIBILITY HELPERS  (không gắn breakpoint)
   ============================================================ */
.nano-hidden  { display: none; }
.nano-visible { display: revert; }

/* Chỉ hiện trên mobile (< 480px) */
@media (min-width: 480px) {
  .nano-only-xs { display: none; }
}
/* Chỉ hiện trên sm (480–767px) */
@media (max-width: 479px),  (min-width: 768px) {
  .nano-only-sm { display: none; }
}
/* Chỉ hiện trên md (768–1023px) */
@media (max-width: 767px),  (min-width: 1024px) {
  .nano-only-md { display: none; }
}
/* Chỉ hiện trên lg (1024–1279px) */
@media (max-width: 1023px), (min-width: 1280px) {
  .nano-only-lg { display: none; }
}
/* Chỉ hiện trên xl (1280–1535px) */
@media (max-width: 1279px), (min-width: 1536px) {
  .nano-only-xl { display: none; }
}
/* Chỉ hiện trên xxl (≥ 1536px) */
@media (max-width: 1535px) {
  .nano-only-xxl { display: none; }
}
@layer utilities-text {

    .nano-text-xs {
        font-size: calc(var(--size-base) * 6);
        line-height: calc(var(--size-base) * 6 * 1.4);
    }

    .nano-text-sm {
        font-size: calc(var(--size-base) * 7);
        line-height: calc(var(--size-base) * 7 * 1.4);
    }

    .nano-text-md {
        font-size: calc(var(--size-base) * 8);
        line-height: calc(var(--size-base) * 8 * 1.4);
    }

    .nano-text-lg {
        font-size: calc(var(--size-base) * 9);
        line-height: calc(var(--size-base) * 9 * 1.4);
    }

    .nano-text-xl {
        font-size: calc(var(--size-base) * 10);
        line-height: calc(var(--size-base) * 10 * 1.4);
    }

    .nano-text-2xl {
        font-size: calc(var(--size-base) * 11);
        line-height: calc(var(--size-base) * 11 * 1.4);
    }

    .nano-text-3xl {
        font-size: calc(var(--size-base) * 12);
        line-height: calc(var(--size-base) * 12 * 1.4);
    }

    .nano-text-4xl {
        font-size: calc(var(--size-base) * 13);
        line-height: calc(var(--size-base) * 13 * 1.4);
    }

    .nano-text-5xl {
        font-size: calc(var(--size-base) * 14);
        line-height: calc(var(--size-base) * 14 * 1.4);
    }

    .nano-text-6xl {
        font-size: calc(var(--size-base) * 15);
        line-height: calc(var(--size-base) * 15 * 1.4);
    }

    .nano-text-7xl {
        font-size: calc(var(--size-base) * 16);
        line-height: calc(var(--size-base) * 16 * 1.4);
    }

    .nano-text-8xl {
        font-size: calc(var(--size-base) * 17);
        line-height: calc(var(--size-base) * 17 * 1.4);
    }

    .nano-text-9xl {
        font-size: calc(var(--size-base) * 18);
        line-height: calc(var(--size-base) * 18 * 1.4);
    }

    .nano-text-10xl {
        font-size: calc(var(--size-base) * 19);
        line-height: calc(var(--size-base) * 19 * 1.4);
    }

    .nano-text-11xl {
        font-size: calc(var(--size-base) * 20);
        line-height: calc(var(--size-base) * 20 * 1.4);
    }

    .nano-text-12xl {
        font-size: calc(var(--size-base) * 21);
        line-height: calc(var(--size-base) * 21 * 1.4);
    }

    .nano-text-13xl {
        font-size: calc(var(--size-base) * 22);
        line-height: calc(var(--size-base) * 22 * 1.4);
    }

    .nano-text-14xl {
        font-size: calc(var(--size-base) * 23);
        line-height: calc(var(--size-base) * 23 * 1.4);
    }

    .nano-text-15xl {
        font-size: calc(var(--size-base) * 24);
        line-height: calc(var(--size-base) * 24 * 1.4);
    }

    .nano-text-16xl {
        font-size: calc(var(--size-base) * 25);
        line-height: calc(var(--size-base) * 25 * 1.4);
    }

    .nano-text-17xl {
        font-size: calc(var(--size-base) * 26);
        line-height: calc(var(--size-base) * 26 * 1.4);
    }

    .nano-text-18xl {
        font-size: calc(var(--size-base) * 27);
        line-height: calc(var(--size-base) * 27 * 1.4);
    }

    .nano-text-19xl {
        font-size: calc(var(--size-base) * 28);
        line-height: calc(var(--size-base) * 28 * 1.4);
    }

    .nano-text-20xl {
        font-size: calc(var(--size-base) * 29);
        line-height: calc(var(--size-base) * 29 * 1.4);
    }

    .nano-text-intent-xs {
        text-indent: calc(var(--size-base) * 6 * 2);
    }

    .nano-text-intent-sm {
        text-indent: calc(var(--size-base) * 7 * 2);
    }

    .nano-text-intent-mb {
        text-indent: calc(var(--size-base) * 8 * 2);
    }

    .nano-text-intent-lg {
        text-indent: calc(var(--size-base) * 10 * 2);
    }

    .nano-text-intent-xl {
        text-indent: calc(var(--size-base) * 12 * 2);
    }

    .nano-text-intent-2xl {
        text-indent: calc(var(--size-base) * 16 * 2);
    }

    .nano-text-intent-3xl {
        text-indent: calc(var(--size-base) * 20 * 2);
    }

    .nano-text-left {
        text-align: left;
    }

    .nano-text-center {
        text-align: center;
    }

    .nano-text-right {
        text-align: right;
    }

    .nano-uppercase {
        text-transform: uppercase;
    }

    .nano-lowercase {
        text-transform: lowercase;
    }

    .nano-capitalize {
        text-transform: capitalize;
    }


    .nano-font-normal {
        font-weight: 400;
    }

    .nano-font-medium {
        font-weight: 500;
    }

    .nano-font-semibold {
        font-weight: 600;
    }

    .nano-font-bold {
        font-weight: 700;
    }

    .nano-text-italic {
        font-style: italic;
    }

    .nano-text-underline {
        text-decoration: underline;
    }

    .nano-text-line-through {
        text-decoration: line-through;
    }

    .nano-text--white {
        color: var(--color-white);
    }

    .nano-text--black {
        color: var(--color-black);
    }

    .nano-text--light {
        color: var(--color-light);
    }

    .nano-text--dark {
        color: var(--color-dark);
    }

    .nano-text--red {
        color: var(--color-red);
    }

    .nano-text--orange {
        color: var(--color-orange);
    }

    .nano-text--yellow {
        color: var(--color-yellow);
    }

    .nano-text--green {
        color: var(--color-green);
    }

    .nano-text--blue {
        color: var(--color-blue);
    }

    .nano-text--indigo {
        color: var(--color-indigo);
    }

    .nano-text--violet {
        color: var(--color-violet);
    }

    .nano-text--gray {
        color: var(--color-gray);
    }

    .nano-text--primary {
        color: var(--color-primary);
    }

    .nano-text--danger {
        color: var(--color-danger);
    }

    .nano-text--warning {
        color: var(--color-warning);
    }

    .nano-text--success {
        color: var(--color-success);
    }

    .nano-text--secondary {
        color: var(--color-secondary);
    }

    /* text pha màu 10%–90% (color-mix với white) */
    .nano-text--primary-10 {
        color: color-mix(in srgb, var(--color-primary) 10%, var(--color-light));
    }

    .nano-text--primary-20 {
        color: color-mix(in srgb, var(--color-primary) 20%, var(--color-light));
    }

    .nano-text--primary-30 {
        color: color-mix(in srgb, var(--color-primary) 30%, var(--color-light));
    }

    .nano-text--primary-40 {
        color: color-mix(in srgb, var(--color-primary) 40%, var(--color-light));
    }

    .nano-text--primary-50 {
        color: color-mix(in srgb, var(--color-primary) 50%, var(--color-light));
    }

    .nano-text--primary-60 {
        color: color-mix(in srgb, var(--color-primary) 60%, var(--color-light));
    }

    .nano-text--primary-70 {
        color: color-mix(in srgb, var(--color-primary) 70%, var(--color-light));
    }

    .nano-text--primary-80 {
        color: color-mix(in srgb, var(--color-primary) 80%, var(--color-light));
    }

    .nano-text--primary-90 {
        color: color-mix(in srgb, var(--color-primary) 90%, var(--color-light));
    }

    .nano-text--red-10 {
        color: color-mix(in srgb, var(--color-red) 10%, var(--color-light));
    }

    .nano-text--red-20 {
        color: color-mix(in srgb, var(--color-red) 20%, var(--color-light));
    }

    .nano-text--red-30 {
        color: color-mix(in srgb, var(--color-red) 30%, var(--color-light));
    }

    .nano-text--red-40 {
        color: color-mix(in srgb, var(--color-red) 40%, var(--color-light));
    }

    .nano-text--red-50 {
        color: color-mix(in srgb, var(--color-red) 50%, var(--color-light));
    }

    .nano-text--red-60 {
        color: color-mix(in srgb, var(--color-red) 60%, var(--color-light));
    }

    .nano-text--red-70 {
        color: color-mix(in srgb, var(--color-red) 70%, var(--color-light));
    }

    .nano-text--red-80 {
        color: color-mix(in srgb, var(--color-red) 80%, var(--color-light));
    }

    .nano-text--red-90 {
        color: color-mix(in srgb, var(--color-red) 90%, var(--color-light));
    }

    .nano-text--orange-10 {
        color: color-mix(in srgb, var(--color-orange) 10%, var(--color-light));
    }

    .nano-text--orange-20 {
        color: color-mix(in srgb, var(--color-orange) 20%, var(--color-light));
    }

    .nano-text--orange-30 {
        color: color-mix(in srgb, var(--color-orange) 30%, var(--color-light));
    }

    .nano-text--orange-40 {
        color: color-mix(in srgb, var(--color-orange) 40%, var(--color-light));
    }

    .nano-text--orange-50 {
        color: color-mix(in srgb, var(--color-orange) 50%, var(--color-light));
    }

    .nano-text--orange-60 {
        color: color-mix(in srgb, var(--color-orange) 60%, var(--color-light));
    }

    .nano-text--orange-70 {
        color: color-mix(in srgb, var(--color-orange) 70%, var(--color-light));
    }

    .nano-text--orange-80 {
        color: color-mix(in srgb, var(--color-orange) 80%, var(--color-light));
    }

    .nano-text--orange-90 {
        color: color-mix(in srgb, var(--color-orange) 90%, var(--color-light));
    }

    .nano-text--yellow-10 {
        color: color-mix(in srgb, var(--color-yellow) 10%, var(--color-light));
    }

    .nano-text--yellow-20 {
        color: color-mix(in srgb, var(--color-yellow) 20%, var(--color-light));
    }

    .nano-text--yellow-30 {
        color: color-mix(in srgb, var(--color-yellow) 30%, var(--color-light));
    }

    .nano-text--yellow-40 {
        color: color-mix(in srgb, var(--color-yellow) 40%, var(--color-light));
    }

    .nano-text--yellow-50 {
        color: color-mix(in srgb, var(--color-yellow) 50%, var(--color-light));
    }

    .nano-text--yellow-60 {
        color: color-mix(in srgb, var(--color-yellow) 60%, var(--color-light));
    }

    .nano-text--yellow-70 {
        color: color-mix(in srgb, var(--color-yellow) 70%, var(--color-light));
    }

    .nano-text--yellow-80 {
        color: color-mix(in srgb, var(--color-yellow) 80%, var(--color-light));
    }

    .nano-text--yellow-90 {
        color: color-mix(in srgb, var(--color-yellow) 90%, var(--color-light));
    }

    .nano-text--green-10 {
        color: color-mix(in srgb, var(--color-green) 10%, var(--color-light));
    }

    .nano-text--green-20 {
        color: color-mix(in srgb, var(--color-green) 20%, var(--color-light));
    }

    .nano-text--green-30 {
        color: color-mix(in srgb, var(--color-green) 30%, var(--color-light));
    }

    .nano-text--green-40 {
        color: color-mix(in srgb, var(--color-green) 40%, var(--color-light));
    }

    .nano-text--green-50 {
        color: color-mix(in srgb, var(--color-green) 50%, var(--color-light));
    }

    .nano-text--green-60 {
        color: color-mix(in srgb, var(--color-green) 60%, var(--color-light));
    }

    .nano-text--green-70 {
        color: color-mix(in srgb, var(--color-green) 70%, var(--color-light));
    }

    .nano-text--green-80 {
        color: color-mix(in srgb, var(--color-green) 80%, var(--color-light));
    }

    .nano-text--green-90 {
        color: color-mix(in srgb, var(--color-green) 90%, var(--color-light));
    }

    .nano-text--blue-10 {
        color: color-mix(in srgb, var(--color-blue) 10%, var(--color-light));
    }

    .nano-text--blue-20 {
        color: color-mix(in srgb, var(--color-blue) 20%, var(--color-light));
    }

    .nano-text--blue-30 {
        color: color-mix(in srgb, var(--color-blue) 30%, var(--color-light));
    }

    .nano-text--blue-40 {
        color: color-mix(in srgb, var(--color-blue) 40%, var(--color-light));
    }

    .nano-text--blue-50 {
        color: color-mix(in srgb, var(--color-blue) 50%, var(--color-light));
    }

    .nano-text--blue-60 {
        color: color-mix(in srgb, var(--color-blue) 60%, var(--color-light));
    }

    .nano-text--blue-70 {
        color: color-mix(in srgb, var(--color-blue) 70%, var(--color-light));
    }

    .nano-text--blue-80 {
        color: color-mix(in srgb, var(--color-blue) 80%, var(--color-light));
    }

    .nano-text--blue-90 {
        color: color-mix(in srgb, var(--color-blue) 90%, var(--color-light));
    }

    .nano-text--indigo-10 {
        color: color-mix(in srgb, var(--color-indigo) 10%, var(--color-light));
    }

    .nano-text--indigo-20 {
        color: color-mix(in srgb, var(--color-indigo) 20%, var(--color-light));
    }

    .nano-text--indigo-30 {
        color: color-mix(in srgb, var(--color-indigo) 30%, var(--color-light));
    }

    .nano-text--indigo-40 {
        color: color-mix(in srgb, var(--color-indigo) 40%, var(--color-light));
    }

    .nano-text--indigo-50 {
        color: color-mix(in srgb, var(--color-indigo) 50%, var(--color-light));
    }

    .nano-text--indigo-60 {
        color: color-mix(in srgb, var(--color-indigo) 60%, var(--color-light));
    }

    .nano-text--indigo-70 {
        color: color-mix(in srgb, var(--color-indigo) 70%, var(--color-light));
    }

    .nano-text--indigo-80 {
        color: color-mix(in srgb, var(--color-indigo) 80%, var(--color-light));
    }

    .nano-text--indigo-90 {
        color: color-mix(in srgb, var(--color-indigo) 90%, var(--color-light));
    }

    .nano-text--violet-10 {
        color: color-mix(in srgb, var(--color-violet) 10%, var(--color-light));
    }

    .nano-text--violet-20 {
        color: color-mix(in srgb, var(--color-violet) 20%, var(--color-light));
    }

    .nano-text--violet-30 {
        color: color-mix(in srgb, var(--color-violet) 30%, var(--color-light));
    }

    .nano-text--violet-40 {
        color: color-mix(in srgb, var(--color-violet) 40%, var(--color-light));
    }

    .nano-text--violet-50 {
        color: color-mix(in srgb, var(--color-violet) 50%, var(--color-light));
    }

    .nano-text--violet-60 {
        color: color-mix(in srgb, var(--color-violet) 60%, var(--color-light));
    }

    .nano-text--violet-70 {
        color: color-mix(in srgb, var(--color-violet) 70%, var(--color-light));
    }

    .nano-text--violet-80 {
        color: color-mix(in srgb, var(--color-violet) 80%, var(--color-light));
    }

    .nano-text--violet-90 {
        color: color-mix(in srgb, var(--color-violet) 90%, var(--color-light));
    }

    .nano-text--gray-10 {
        color: color-mix(in srgb, var(--color-gray) 10%, var(--color-light));
    }

    .nano-text--gray-20 {
        color: color-mix(in srgb, var(--color-gray) 20%, var(--color-light));
    }

    .nano-text--gray-30 {
        color: color-mix(in srgb, var(--color-gray) 30%, var(--color-light));
    }

    .nano-text--gray-40 {
        color: color-mix(in srgb, var(--color-gray) 40%, var(--color-light));
    }

    .nano-text--gray-50 {
        color: color-mix(in srgb, var(--color-gray) 50%, var(--color-light));
    }

    .nano-text--gray-60 {
        color: color-mix(in srgb, var(--color-gray) 60%, var(--color-light));
    }

    .nano-text--gray-70 {
        color: color-mix(in srgb, var(--color-gray) 70%, var(--color-light));
    }

    .nano-text--gray-80 {
        color: color-mix(in srgb, var(--color-gray) 80%, var(--color-light));
    }

    .nano-text--gray-90 {
        color: color-mix(in srgb, var(--color-gray) 90%, var(--color-light));
    }

    .nano-text--danger-10 {
        color: color-mix(in srgb, var(--color-danger) 10%, var(--color-light));
    }

    .nano-text--danger-20 {
        color: color-mix(in srgb, var(--color-danger) 20%, var(--color-light));
    }

    .nano-text--danger-30 {
        color: color-mix(in srgb, var(--color-danger) 30%, var(--color-light));
    }

    .nano-text--danger-40 {
        color: color-mix(in srgb, var(--color-danger) 40%, var(--color-light));
    }

    .nano-text--danger-50 {
        color: color-mix(in srgb, var(--color-danger) 50%, var(--color-light));
    }

    .nano-text--danger-60 {
        color: color-mix(in srgb, var(--color-danger) 60%, var(--color-light));
    }

    .nano-text--danger-70 {
        color: color-mix(in srgb, var(--color-danger) 70%, var(--color-light));
    }

    .nano-text--danger-80 {
        color: color-mix(in srgb, var(--color-danger) 80%, var(--color-light));
    }

    .nano-text--danger-90 {
        color: color-mix(in srgb, var(--color-danger) 90%, var(--color-light));
    }

    .nano-text--warning-10 {
        color: color-mix(in srgb, var(--color-warning) 10%, var(--color-light));
    }

    .nano-text--warning-20 {
        color: color-mix(in srgb, var(--color-warning) 20%, var(--color-light));
    }

    .nano-text--warning-30 {
        color: color-mix(in srgb, var(--color-warning) 30%, var(--color-light));
    }

    .nano-text--warning-40 {
        color: color-mix(in srgb, var(--color-warning) 40%, var(--color-light));
    }

    .nano-text--warning-50 {
        color: color-mix(in srgb, var(--color-warning) 50%, var(--color-light));
    }

    .nano-text--warning-60 {
        color: color-mix(in srgb, var(--color-warning) 60%, var(--color-light));
    }

    .nano-text--warning-70 {
        color: color-mix(in srgb, var(--color-warning) 70%, var(--color-light));
    }

    .nano-text--warning-80 {
        color: color-mix(in srgb, var(--color-warning) 80%, var(--color-light));
    }

    .nano-text--warning-90 {
        color: color-mix(in srgb, var(--color-warning) 90%, var(--color-light));
    }

    .nano-text--success-10 {
        color: color-mix(in srgb, var(--color-success) 10%, var(--color-light));
    }

    .nano-text--success-20 {
        color: color-mix(in srgb, var(--color-success) 20%, var(--color-light));
    }

    .nano-text--success-30 {
        color: color-mix(in srgb, var(--color-success) 30%, var(--color-light));
    }

    .nano-text--success-40 {
        color: color-mix(in srgb, var(--color-success) 40%, var(--color-light));
    }

    .nano-text--success-50 {
        color: color-mix(in srgb, var(--color-success) 50%, var(--color-light));
    }

    .nano-text--success-60 {
        color: color-mix(in srgb, var(--color-success) 60%, var(--color-light));
    }

    .nano-text--success-70 {
        color: color-mix(in srgb, var(--color-success) 70%, var(--color-light));
    }

    .nano-text--success-80 {
        color: color-mix(in srgb, var(--color-success) 80%, var(--color-light));
    }

    .nano-text--success-90 {
        color: color-mix(in srgb, var(--color-success) 90%, var(--color-light));
    }

    .nano-text--secondary-10 {
        color: color-mix(in srgb, var(--color-secondary) 10%, var(--color-light));
    }

    .nano-text--secondary-20 {
        color: color-mix(in srgb, var(--color-secondary) 20%, var(--color-light));
    }

    .nano-text--secondary-30 {
        color: color-mix(in srgb, var(--color-secondary) 30%, var(--color-light));
    }

    .nano-text--secondary-40 {
        color: color-mix(in srgb, var(--color-secondary) 40%, var(--color-light));
    }

    .nano-text--secondary-50 {
        color: color-mix(in srgb, var(--color-secondary) 50%, var(--color-light));
    }

    .nano-text--secondary-60 {
        color: color-mix(in srgb, var(--color-secondary) 60%, var(--color-light));
    }

    .nano-text--secondary-70 {
        color: color-mix(in srgb, var(--color-secondary) 70%, var(--color-light));
    }

    .nano-text--secondary-80 {
        color: color-mix(in srgb, var(--color-secondary) 80%, var(--color-light));
    }

    .nano-text--secondary-90 {
        color: color-mix(in srgb, var(--color-secondary) 90%, var(--color-light));
    }

    /* text shade 110%–190% (color-mix với black) */
    .nano-text--primary-110 {
        color: color-mix(in srgb, var(--color-primary) 90%, var(--color-dark));
    }

    .nano-text--primary-120 {
        color: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark));
    }

    .nano-text--primary-130 {
        color: color-mix(in srgb, var(--color-primary) 70%, var(--color-dark));
    }

    .nano-text--primary-140 {
        color: color-mix(in srgb, var(--color-primary) 60%, var(--color-dark));
    }

    .nano-text--primary-150 {
        color: color-mix(in srgb, var(--color-primary) 50%, var(--color-dark));
    }

    .nano-text--primary-160 {
        color: color-mix(in srgb, var(--color-primary) 40%, var(--color-dark));
    }

    .nano-text--primary-170 {
        color: color-mix(in srgb, var(--color-primary) 30%, var(--color-dark));
    }

    .nano-text--primary-180 {
        color: color-mix(in srgb, var(--color-primary) 20%, var(--color-dark));
    }

    .nano-text--primary-190 {
        color: color-mix(in srgb, var(--color-primary) 10%, var(--color-dark));
    }

    .nano-text--secondary-110 {
        color: color-mix(in srgb, var(--color-secondary) 90%, var(--color-dark));
    }

    .nano-text--secondary-120 {
        color: color-mix(in srgb, var(--color-secondary) 80%, var(--color-dark));
    }

    .nano-text--secondary-130 {
        color: color-mix(in srgb, var(--color-secondary) 70%, var(--color-dark));
    }

    .nano-text--secondary-140 {
        color: color-mix(in srgb, var(--color-secondary) 60%, var(--color-dark));
    }

    .nano-text--secondary-150 {
        color: color-mix(in srgb, var(--color-secondary) 50%, var(--color-dark));
    }

    .nano-text--secondary-160 {
        color: color-mix(in srgb, var(--color-secondary) 40%, var(--color-dark));
    }

    .nano-text--secondary-170 {
        color: color-mix(in srgb, var(--color-secondary) 30%, var(--color-dark));
    }

    .nano-text--secondary-180 {
        color: color-mix(in srgb, var(--color-secondary) 20%, var(--color-dark));
    }

    .nano-text--secondary-190 {
        color: color-mix(in srgb, var(--color-secondary) 10%, var(--color-dark));
    }

    .nano-text--red-110 {
        color: color-mix(in srgb, var(--color-red) 90%, var(--color-dark));
    }

    .nano-text--red-120 {
        color: color-mix(in srgb, var(--color-red) 80%, var(--color-dark));
    }

    .nano-text--red-130 {
        color: color-mix(in srgb, var(--color-red) 70%, var(--color-dark));
    }

    .nano-text--red-140 {
        color: color-mix(in srgb, var(--color-red) 60%, var(--color-dark));
    }

    .nano-text--red-150 {
        color: color-mix(in srgb, var(--color-red) 50%, var(--color-dark));
    }

    .nano-text--red-160 {
        color: color-mix(in srgb, var(--color-red) 40%, var(--color-dark));
    }

    .nano-text--red-170 {
        color: color-mix(in srgb, var(--color-red) 30%, var(--color-dark));
    }

    .nano-text--red-180 {
        color: color-mix(in srgb, var(--color-red) 20%, var(--color-dark));
    }

    .nano-text--red-190 {
        color: color-mix(in srgb, var(--color-red) 10%, var(--color-dark));
    }

    .nano-text--orange-110 {
        color: color-mix(in srgb, var(--color-orange) 90%, var(--color-dark));
    }

    .nano-text--orange-120 {
        color: color-mix(in srgb, var(--color-orange) 80%, var(--color-dark));
    }

    .nano-text--orange-130 {
        color: color-mix(in srgb, var(--color-orange) 70%, var(--color-dark));
    }

    .nano-text--orange-140 {
        color: color-mix(in srgb, var(--color-orange) 60%, var(--color-dark));
    }

    .nano-text--orange-150 {
        color: color-mix(in srgb, var(--color-orange) 50%, var(--color-dark));
    }

    .nano-text--orange-160 {
        color: color-mix(in srgb, var(--color-orange) 40%, var(--color-dark));
    }

    .nano-text--orange-170 {
        color: color-mix(in srgb, var(--color-orange) 30%, var(--color-dark));
    }

    .nano-text--orange-180 {
        color: color-mix(in srgb, var(--color-orange) 20%, var(--color-dark));
    }

    .nano-text--orange-190 {
        color: color-mix(in srgb, var(--color-orange) 10%, var(--color-dark));
    }

    .nano-text--yellow-110 {
        color: color-mix(in srgb, var(--color-yellow) 90%, var(--color-dark));
    }

    .nano-text--yellow-120 {
        color: color-mix(in srgb, var(--color-yellow) 80%, var(--color-dark));
    }

    .nano-text--yellow-130 {
        color: color-mix(in srgb, var(--color-yellow) 70%, var(--color-dark));
    }

    .nano-text--yellow-140 {
        color: color-mix(in srgb, var(--color-yellow) 60%, var(--color-dark));
    }

    .nano-text--yellow-150 {
        color: color-mix(in srgb, var(--color-yellow) 50%, var(--color-dark));
    }

    .nano-text--yellow-160 {
        color: color-mix(in srgb, var(--color-yellow) 40%, var(--color-dark));
    }

    .nano-text--yellow-170 {
        color: color-mix(in srgb, var(--color-yellow) 30%, var(--color-dark));
    }

    .nano-text--yellow-180 {
        color: color-mix(in srgb, var(--color-yellow) 20%, var(--color-dark));
    }

    .nano-text--yellow-190 {
        color: color-mix(in srgb, var(--color-yellow) 10%, var(--color-dark));
    }

    .nano-text--green-110 {
        color: color-mix(in srgb, var(--color-green) 90%, var(--color-dark));
    }

    .nano-text--green-120 {
        color: color-mix(in srgb, var(--color-green) 80%, var(--color-dark));
    }

    .nano-text--green-130 {
        color: color-mix(in srgb, var(--color-green) 70%, var(--color-dark));
    }

    .nano-text--green-140 {
        color: color-mix(in srgb, var(--color-green) 60%, var(--color-dark));
    }

    .nano-text--green-150 {
        color: color-mix(in srgb, var(--color-green) 50%, var(--color-dark));
    }

    .nano-text--green-160 {
        color: color-mix(in srgb, var(--color-green) 40%, var(--color-dark));
    }

    .nano-text--green-170 {
        color: color-mix(in srgb, var(--color-green) 30%, var(--color-dark));
    }

    .nano-text--green-180 {
        color: color-mix(in srgb, var(--color-green) 20%, var(--color-dark));
    }

    .nano-text--green-190 {
        color: color-mix(in srgb, var(--color-green) 10%, var(--color-dark));
    }

    .nano-text--blue-110 {
        color: color-mix(in srgb, var(--color-blue) 90%, var(--color-dark));
    }

    .nano-text--blue-120 {
        color: color-mix(in srgb, var(--color-blue) 80%, var(--color-dark));
    }

    .nano-text--blue-130 {
        color: color-mix(in srgb, var(--color-blue) 70%, var(--color-dark));
    }

    .nano-text--blue-140 {
        color: color-mix(in srgb, var(--color-blue) 60%, var(--color-dark));
    }

    .nano-text--blue-150 {
        color: color-mix(in srgb, var(--color-blue) 50%, var(--color-dark));
    }

    .nano-text--blue-160 {
        color: color-mix(in srgb, var(--color-blue) 40%, var(--color-dark));
    }

    .nano-text--blue-170 {
        color: color-mix(in srgb, var(--color-blue) 30%, var(--color-dark));
    }

    .nano-text--blue-180 {
        color: color-mix(in srgb, var(--color-blue) 20%, var(--color-dark));
    }

    .nano-text--blue-190 {
        color: color-mix(in srgb, var(--color-blue) 10%, var(--color-dark));
    }

    .nano-text--indigo-110 {
        color: color-mix(in srgb, var(--color-indigo) 90%, var(--color-dark));
    }

    .nano-text--indigo-120 {
        color: color-mix(in srgb, var(--color-indigo) 80%, var(--color-dark));
    }

    .nano-text--indigo-130 {
        color: color-mix(in srgb, var(--color-indigo) 70%, var(--color-dark));
    }

    .nano-text--indigo-140 {
        color: color-mix(in srgb, var(--color-indigo) 60%, var(--color-dark));
    }

    .nano-text--indigo-150 {
        color: color-mix(in srgb, var(--color-indigo) 50%, var(--color-dark));
    }

    .nano-text--indigo-160 {
        color: color-mix(in srgb, var(--color-indigo) 40%, var(--color-dark));
    }

    .nano-text--indigo-170 {
        color: color-mix(in srgb, var(--color-indigo) 30%, var(--color-dark));
    }

    .nano-text--indigo-180 {
        color: color-mix(in srgb, var(--color-indigo) 20%, var(--color-dark));
    }

    .nano-text--indigo-190 {
        color: color-mix(in srgb, var(--color-indigo) 10%, var(--color-dark));
    }

    .nano-text--violet-110 {
        color: color-mix(in srgb, var(--color-violet) 90%, var(--color-dark));
    }

    .nano-text--violet-120 {
        color: color-mix(in srgb, var(--color-violet) 80%, var(--color-dark));
    }

    .nano-text--violet-130 {
        color: color-mix(in srgb, var(--color-violet) 70%, var(--color-dark));
    }

    .nano-text--violet-140 {
        color: color-mix(in srgb, var(--color-violet) 60%, var(--color-dark));
    }

    .nano-text--violet-150 {
        color: color-mix(in srgb, var(--color-violet) 50%, var(--color-dark));
    }

    .nano-text--violet-160 {
        color: color-mix(in srgb, var(--color-violet) 40%, var(--color-dark));
    }

    .nano-text--violet-170 {
        color: color-mix(in srgb, var(--color-violet) 30%, var(--color-dark));
    }

    .nano-text--violet-180 {
        color: color-mix(in srgb, var(--color-violet) 20%, var(--color-dark));
    }

    .nano-text--violet-190 {
        color: color-mix(in srgb, var(--color-violet) 10%, var(--color-dark));
    }

    .nano-text--gray-110 {
        color: color-mix(in srgb, var(--color-gray) 90%, var(--color-dark));
    }

    .nano-text--gray-120 {
        color: color-mix(in srgb, var(--color-gray) 80%, var(--color-dark));
    }

    .nano-text--gray-130 {
        color: color-mix(in srgb, var(--color-gray) 70%, var(--color-dark));
    }

    .nano-text--gray-140 {
        color: color-mix(in srgb, var(--color-gray) 60%, var(--color-dark));
    }

    .nano-text--gray-150 {
        color: color-mix(in srgb, var(--color-gray) 50%, var(--color-dark));
    }

    .nano-text--gray-160 {
        color: color-mix(in srgb, var(--color-gray) 40%, var(--color-dark));
    }

    .nano-text--gray-170 {
        color: color-mix(in srgb, var(--color-gray) 30%, var(--color-dark));
    }

    .nano-text--gray-180 {
        color: color-mix(in srgb, var(--color-gray) 20%, var(--color-dark));
    }

    .nano-text--gray-190 {
        color: color-mix(in srgb, var(--color-gray) 10%, var(--color-dark));
    }

    .nano-text--danger-110 {
        color: color-mix(in srgb, var(--color-danger) 90%, var(--color-dark));
    }

    .nano-text--danger-120 {
        color: color-mix(in srgb, var(--color-danger) 80%, var(--color-dark));
    }

    .nano-text--danger-130 {
        color: color-mix(in srgb, var(--color-danger) 70%, var(--color-dark));
    }

    .nano-text--danger-140 {
        color: color-mix(in srgb, var(--color-danger) 60%, var(--color-dark));
    }

    .nano-text--danger-150 {
        color: color-mix(in srgb, var(--color-danger) 50%, var(--color-dark));
    }

    .nano-text--danger-160 {
        color: color-mix(in srgb, var(--color-danger) 40%, var(--color-dark));
    }

    .nano-text--danger-170 {
        color: color-mix(in srgb, var(--color-danger) 30%, var(--color-dark));
    }

    .nano-text--danger-180 {
        color: color-mix(in srgb, var(--color-danger) 20%, var(--color-dark));
    }

    .nano-text--danger-190 {
        color: color-mix(in srgb, var(--color-danger) 10%, var(--color-dark));
    }

    .nano-text--warning-110 {
        color: color-mix(in srgb, var(--color-warning) 90%, var(--color-dark));
    }

    .nano-text--warning-120 {
        color: color-mix(in srgb, var(--color-warning) 80%, var(--color-dark));
    }

    .nano-text--warning-130 {
        color: color-mix(in srgb, var(--color-warning) 70%, var(--color-dark));
    }

    .nano-text--warning-140 {
        color: color-mix(in srgb, var(--color-warning) 60%, var(--color-dark));
    }

    .nano-text--warning-150 {
        color: color-mix(in srgb, var(--color-warning) 50%, var(--color-dark));
    }

    .nano-text--warning-160 {
        color: color-mix(in srgb, var(--color-warning) 40%, var(--color-dark));
    }

    .nano-text--warning-170 {
        color: color-mix(in srgb, var(--color-warning) 30%, var(--color-dark));
    }

    .nano-text--warning-180 {
        color: color-mix(in srgb, var(--color-warning) 20%, var(--color-dark));
    }

    .nano-text--warning-190 {
        color: color-mix(in srgb, var(--color-warning) 10%, var(--color-dark));
    }

    .nano-text--success-110 {
        color: color-mix(in srgb, var(--color-success) 90%, var(--color-dark));
    }

    .nano-text--success-120 {
        color: color-mix(in srgb, var(--color-success) 80%, var(--color-dark));
    }

    .nano-text--success-130 {
        color: color-mix(in srgb, var(--color-success) 70%, var(--color-dark));
    }

    .nano-text--success-140 {
        color: color-mix(in srgb, var(--color-success) 60%, var(--color-dark));
    }

    .nano-text--success-150 {
        color: color-mix(in srgb, var(--color-success) 50%, var(--color-dark));
    }

    .nano-text--success-160 {
        color: color-mix(in srgb, var(--color-success) 40%, var(--color-dark));
    }

    .nano-text--success-170 {
        color: color-mix(in srgb, var(--color-success) 30%, var(--color-dark));
    }

    .nano-text--success-180 {
        color: color-mix(in srgb, var(--color-success) 20%, var(--color-dark));
    }

    .nano-text--success-190 {
        color: color-mix(in srgb, var(--color-success) 10%, var(--color-dark));
    }
}

.nano-list-arabic-indic { list-style-type: arabic-indic }
.nano-list-armenian { list-style-type: armenian }
.nano-list-bengali { list-style-type: bengali }
.nano-list-cambodian { list-style-type: cambodian }
.nano-list-circle { list-style-type: circle }
.nano-list-cjk-decimal { list-style-type: cjk-decimal }
.nano-list-cjk-earthly-branch { list-style-type: cjk-earthly-branch }
.nano-list-cjk-heavenly-stem { list-style-type: cjk-heavenly-stem }
.nano-list-cjk-ideographic { list-style-type: cjk-ideographic }
.nano-list-decimal { list-style-type: decimal }
.nano-list-decimal-leading-zero { list-style-type: decimal-leading-zero }
.nano-list-devanagari { list-style-type: devanagari }
.nano-list-disc { list-style-type: disc }
.nano-list-disclosure-closed { list-style-type: disclosure-closed }
.nano-list-disclosure-open { list-style-type: disclosure-open }
.nano-list-ethiopic-halehame-am { list-style-type: ethiopic-halehame-am }
.nano-list-ethiopic-halehame-ti-er { list-style-type: ethiopic-halehame-ti-er }
.nano-list-ethiopic-halehame-ti-et { list-style-type: ethiopic-halehame-ti-et }
.nano-list-ethiopic-numeric { list-style-type: ethiopic-numeric }
.nano-list-georgian { list-style-type: georgian }
.nano-list-gujarati { list-style-type: gujarati }
.nano-list-gurmukhi { list-style-type: gurmukhi }
.nano-list-hangul { list-style-type: hangul }
.nano-list-hangul-consonant { list-style-type: hangul-consonant }
.nano-list-hebrew { list-style-type: hebrew }
.nano-list-hiragana { list-style-type: hiragana }
.nano-list-hiragana-iroha { list-style-type: hiragana-iroha }
.nano-list-japanese-formal { list-style-type: japanese-formal }
.nano-list-japanese-informal { list-style-type: japanese-informal }
.nano-list-kannada { list-style-type: kannada }
.nano-list-katakana { list-style-type: katakana }
.nano-list-katakana-iroha { list-style-type: katakana-iroha }
.nano-list-khmer { list-style-type: khmer }
.nano-list-korean-hangul-formal { list-style-type: korean-hangul-formal }
.nano-list-korean-hanja-formal { list-style-type: korean-hanja-formal }
.nano-list-korean-hanja-informal { list-style-type: korean-hanja-informal }
.nano-list-lao { list-style-type: lao }
.nano-list-lower-alpha { list-style-type: lower-alpha }
.nano-list-lower-armenian { list-style-type: lower-armenian }
.nano-list-lower-greek { list-style-type: lower-greek }
.nano-list-lower-latin { list-style-type: lower-latin }
.nano-list-lower-roman { list-style-type: lower-roman }
.nano-list-malayalam { list-style-type: malayalam }
.nano-list-mongolian { list-style-type: mongolian }
.nano-list-myanmar { list-style-type: myanmar }
.nano-list-none { list-style-type: none }
.nano-list-oriya { list-style-type: oriya }
.nano-list-persian { list-style-type: persian }
.nano-list-simp-chinese-formal { list-style-type: simp-chinese-formal }
.nano-list-simp-chinese-informal { list-style-type: simp-chinese-informal }
.nano-list-square { list-style-type: square }
.nano-list-tamil { list-style-type: tamil }
.nano-list-telugu { list-style-type: telugu }
.nano-list-thai { list-style-type: thai }
.nano-list-tibetan { list-style-type: tibetan }
.nano-list-trad-chinese-formal { list-style-type: trad-chinese-formal }
.nano-list-trad-chinese-informal { list-style-type: trad-chinese-informal }
.nano-list-upper-alpha { list-style-type: upper-alpha }
.nano-list-upper-armenian { list-style-type: upper-armenian }
.nano-list-upper-latin { list-style-type: upper-latin }
.nano-list-upper-roman { list-style-type: upper-roman }
.nano-list-urdu { list-style-type: urdu }
.nano-list-dash { list-style-type: "-  " }
.nano-list-plus { list-style-type: "+  " }







/* Display & cursor – prefix nano- */
.nano-cursor-pointer { cursor: pointer; }
.nano-cursor-default { cursor: default; }
.nano-cursor-not-allowed { cursor: not-allowed; }

.nano-block { display: block; }
.nano-inline-block { display: inline-block; }
.nano-inline { display: inline; }
.nano-flex { display: flex; }
.nano-inline-flex { display: inline-flex; }
.nano-grid { display: grid; }
.nano-inline-grid { display: inline-grid; }
.nano-hidden { display: none; }
.nano-table { display: table; }
.nano-table-row { display: table-row; }
.nano-table-cell { display: table-cell; }

/* ── Responsive display ── */
@media (min-width: 480px) {
    .nano-block-sm        { display: block; }
    .nano-inline-sm       { display: inline; }
    .nano-inline-block-sm { display: inline-block; }
    .nano-flex-sm         { display: flex; }
    .nano-inline-flex-sm  { display: inline-flex; }
    .nano-grid-sm         { display: grid; }
    .nano-hidden-sm-only  { display: none; }
}
@media (min-width: 768px) {
    .nano-block-md        { display: block; }
    .nano-inline-md       { display: inline; }
    .nano-inline-block-md { display: inline-block; }
    .nano-flex-md         { display: flex; }
    .nano-inline-flex-md  { display: inline-flex; }
    .nano-grid-md         { display: grid; }
    .nano-hidden-md-only  { display: none; }
}
@media (min-width: 1024px) {
    .nano-block-lg        { display: block; }
    .nano-inline-lg       { display: inline; }
    .nano-inline-block-lg { display: inline-block; }
    .nano-flex-lg         { display: flex; }
    .nano-inline-flex-lg  { display: inline-flex; }
    .nano-grid-lg         { display: grid; }
    .nano-hidden-lg-only  { display: none; }
}
@media (min-width: 1280px) {
    .nano-block-xl        { display: block; }
    .nano-inline-xl       { display: inline; }
    .nano-inline-block-xl { display: inline-block; }
    .nano-flex-xl         { display: flex; }
    .nano-inline-flex-xl  { display: inline-flex; }
    .nano-grid-xl         { display: grid; }
    .nano-hidden-xl-only  { display: none; }
}

.nano-visible { visibility: visible; }
.nano-invisible { visibility: hidden; }

.nano-pointer-events-none { pointer-events: none; }
.nano-pointer-events-auto { pointer-events: auto; }

/* Layout – width, height, max-width. prefix nano-, var(--unit-base) */
.nano-w-full { width: 100%; }
.nano-h-full { height: 100%; }
.nano-w-screen { width: 100vw; }
.nano-h-screen { height: 100vh; }
.nano-min-w-0 { min-width: 0; }
.nano-min-h-0 { min-height: 0; }
.nano-min-h-full { min-height: 100%; }

.nano-max-w-sm { max-width: 24rem; }
.nano-max-w-md { max-width: 28rem; }
.nano-max-w-lg { max-width: 32rem; }
.nano-max-w-xl { max-width: 36rem; }
.nano-max-w-2xl { max-width: 42rem; }
.nano-max-w-3xl { max-width: 48rem; }
.nano-max-w-4xl { max-width: 56rem; }
.nano-max-w-5xl { max-width: 64rem; }
.nano-max-w-6xl { max-width: 72rem; }
.nano-max-w-full { max-width: 100%; }
.nano-max-w-fit { max-width: fit-content; }

/* https://techfilm.vn/ty-le-khung-hinh-la-gi/#Ti_le_1610 */
/* Avatar, icon, thumnail quare */
.nano-aspect--1-1 { aspect-ratio: 1 / 1; }
/* Anh co dien, man hinh cu, slide Powerpoint */
.nano-aspect--4-3 { aspect-ratio: 4 / 3; }
/* May chup anh DSLR */
.nano-aspect--3-2 { aspect-ratio: 3 / 2; }
/* Video Youtube, man hinh TV, presentation */
.nano-aspect--16-9 { aspect-ratio: 16 / 9; }
/* Man hinh laptop. monitor */
.nano-aspect--16-10 { aspect-ratio: 16 / 10; }
/* Man hinh sieu rong (utralwide), cinema */
.nano-aspect--21-9 { aspect-ratio: 21 / 9; }
/* Story Instagram/Tiktok video doc */
.nano-aspect--9-16 { aspect-ratio: 9 / 16; }
/* Dien anh widescreen */
.nano-aspect--2-40 { aspect-ratio: 2.39 / 1; }
/* Tu dong */
.nano-aspect-auto { aspect-ratio: auto; }



.nano-object-contain { object-fit: contain; }
.nano-object-cover { object-fit: cover; }
.nano-object-fill { object-fit: fill; }

/* Flexbox & gap – prefix nano-, scale theo var(--unit-base) */
.nano-flex-1 { flex: 1 1 0%; min-width: 0; }
.nano-shrink { flex-shrink: 1; }
.nano-shrink-0 { flex-shrink: 0; }
.nano-flex-none { flex: none; }
.nano-flex-auto { flex: 1 1 auto; }
.nano-flex-col { flex-direction: column; }
.nano-flex-row { flex-direction: row; }
.nano-flex-wrap { flex-wrap: wrap; }
.nano-flex-nowrap { flex-wrap: nowrap; }

.nano-items-start { align-items: flex-start; }
.nano-items-center { align-items: center; }
.nano-items-end { align-items: flex-end; }
.nano-items-stretch { align-items: stretch; }
.nano-items-baseline { align-items: baseline; }

.nano-justify-start { justify-content: flex-start; }
.nano-justify-center { justify-content: center; }
.nano-justify-end { justify-content: flex-end; }
.nano-justify-between { justify-content: space-between; }
.nano-justify-around { justify-content: space-around; }
.nano-justify-evenly { justify-content: space-evenly; }

.nano-self-start { align-self: flex-start; }
.nano-self-center { align-self: center; }
.nano-self-end { align-self: flex-end; }
.nano-self-stretch { align-self: stretch; }

/* ── Responsive flex-direction ── */
@media (min-width: 480px) {
    .nano-flex-col-sm { flex-direction: column; }
    .nano-flex-row-sm { flex-direction: row; }
}
@media (min-width: 768px) {
    .nano-flex-col-md { flex-direction: column; }
    .nano-flex-row-md { flex-direction: row; }
}
@media (min-width: 1024px) {
    .nano-flex-col-lg { flex-direction: column; }
    .nano-flex-row-lg { flex-direction: row; }
}
@media (min-width: 1280px) {
    .nano-flex-col-xl { flex-direction: column; }
    .nano-flex-row-xl { flex-direction: row; }
}

/* ── Responsive flex-wrap ── */
@media (min-width: 480px) {
    .nano-flex-wrap-sm   { flex-wrap: wrap; }
    .nano-flex-nowrap-sm { flex-wrap: nowrap; }
}
@media (min-width: 768px) {
    .nano-flex-wrap-md   { flex-wrap: wrap; }
    .nano-flex-nowrap-md { flex-wrap: nowrap; }
}
@media (min-width: 1024px) {
    .nano-flex-wrap-lg   { flex-wrap: wrap; }
    .nano-flex-nowrap-lg { flex-wrap: nowrap; }
}

.nano-gap-0 { gap: calc(var(--unit-base) * 0); }
.nano-gap-1 { gap: calc(var(--unit-base) * 1); }
.nano-gap-2 { gap: calc(var(--unit-base) * 2); }
.nano-gap-3 { gap: calc(var(--unit-base) * 3); }
.nano-gap-4 { gap: calc(var(--unit-base) * 4); }
.nano-gap-5 { gap: calc(var(--unit-base) * 5); }
.nano-gap-6 { gap: calc(var(--unit-base) * 6); }
.nano-gap-8 { gap: calc(var(--unit-base) * 8); }
.nano-gap-10 { gap: calc(var(--unit-base) * 10); }
.nano-gap-12 { gap: calc(var(--unit-base) * 12); }
.nano-gap-16 { gap: calc(var(--unit-base) * 16); }
.nano-gap-20 { gap: calc(var(--unit-base) * 20); }

/* Position & z-index – prefix nano- */
.nano-relative { position: relative; }
.nano-absolute { position: absolute; }
.nano-fixed { position: fixed; }
.nano-sticky { position: sticky; top: 0; left: 0; z-index: var(--z-sticky); }
.nano-static { position: static; }

.nano-z-0        { z-index: 0; }
.nano-z-10       { z-index: 10; }
.nano-z-20       { z-index: 20; }
.nano-z-30       { z-index: 30; }
.nano-z-40       { z-index: 40; }
.nano-z-50       { z-index: 50; }
.nano-z-auto     { z-index: auto; }

/* Token-based aliases — luôn đồng bộ với --z-* design tokens */
.nano-z-dropdown { z-index: var(--z-dropdown); }
.nano-z-sticky   { z-index: var(--z-sticky); }
.nano-z-overlay  { z-index: var(--z-overlay); }
.nano-z-modal    { z-index: var(--z-modal); }
.nano-z-toast    { z-index: var(--z-toast); }

.nano-inset-0 { inset: 0; }
.nano-top-0 { top: 0; }
.nano-right-0 { right: 0; }
.nano-bottom-0 { bottom: 0; }
.nano-left-0 { left: 0; }

.nano-rounded-none { 
    border-radius: 0; 
}
.nano-rounded-sm { 
    border-radius: calc(var(--radius-base) / 2); 
}
.nano-rounded-md, .nano-rounded {
    border-radius: var(--radius-base);
}
.nano-rounded-lg {
    border-radius: calc(var(--radius-base) / 2 * 3); 
}
.nano-rounded-xl { 
    border-radius: calc(var(--radius-base) / 2 * 4); 
}
.nano-rounded-2xl {
    border-radius: calc(var(--radius-base) / 2 * 5); 
}
.nano-rounded-full {
    border-radius: 9999px; 
}

/* :root {
  --base-radius: 1em;
  --nested-radius: calc(var(--base-radius) - var(--padding));
} */
/* Size (w+h cùng giá trị) – prefix nano-, var(--unit-base) */
.nano-size-1 { width: calc(var(--unit-base) * 1); height: calc(var(--unit-base) * 1); }
.nano-size-2 { width: calc(var(--unit-base) * 2); height: calc(var(--unit-base) * 2); }
.nano-size-4 { width: calc(var(--unit-base) * 4); height: calc(var(--unit-base) * 4); }
.nano-size-6 { width: calc(var(--unit-base) * 6); height: calc(var(--unit-base) * 6); }
.nano-size-8 { width: calc(var(--unit-base) * 8); height: calc(var(--unit-base) * 8); }
.nano-size-10 { width: calc(var(--unit-base) * 10); height: calc(var(--unit-base) * 10); }
.nano-size-12 { width: calc(var(--unit-base) * 12); height: calc(var(--unit-base) * 12); }


.nano-w-1 { width: calc(var(--unit-base) * 1); }
.nano-w-2 { width: calc(var(--unit-base) * 2); }
.nano-w-4 { width: calc(var(--unit-base) * 4); }
.nano-w-6 { width: calc(var(--unit-base) * 6); }
.nano-w-8 { width: calc(var(--unit-base) * 8); }
.nano-w-10 { width: calc(var(--unit-base) * 10); }
.nano-w-12 { width: calc(var(--unit-base) * 12); }
.nano-w-16 { width: calc(var(--unit-base) * 16); }
.nano-w-20 { width: calc(var(--unit-base) * 20); }

.nano-h-1 { height: calc(var(--unit-base) * 1); }
.nano-h-2 { height: calc(var(--unit-base) * 2); }
.nano-h-4 { height: calc(var(--unit-base) * 4); }
.nano-h-6 { height: calc(var(--unit-base) * 6); }
.nano-h-8 { height: calc(var(--unit-base) * 8); }
.nano-h-10 { height: calc(var(--unit-base) * 10); }
.nano-h-12 { height: calc(var(--unit-base) * 12); }
.nano-h-16 { height: calc(var(--unit-base) * 16); }
.nano-h-20 { height: calc(var(--unit-base) * 20); }


/*10 màu nền cơ bản: 7 màu trong hệ cầu vồng và 3 màu trong hệ sáng tối, là cơ cở để pha màu cho các màu khác*/
.nano-bg--red { background-color: var(--color-red); }
.nano-bg--orange { background-color: var(--color-orange); }
.nano-bg--yellow { background-color: var(--color-yellow); }
.nano-bg--green { background-color: var(--color-green); }
.nano-bg--blue { background-color: var(--color-blue); }
.nano-bg--indigo { background-color: var(--color-indigo); }
.nano-bg--violet { background-color: var(--color-violet); }
.nano-bg--black { background-color: var(--color-black); }
.nano-bg--gray { background-color: var(--color-gray); }
.nano-bg--white { background-color: var(--color-white); }

/*7 màu nền theo ngữ cảnh sử dụng, dùng các màu nên cơ bản mà không pha trộn*/
.nano-bg--danger { background-color: var(--color-danger); }
.nano-bg--warning { background-color: var(--color-warning); }
.nano-bg--success { background-color: var(--color-success); }
.nano-bg--primary { background-color: var(--color-primary); }
.nano-bg--secondary { background-color: var(--color-secondary); }
.nano-bg--dark { background-color: var(--color-dark); }
.nano-bg--light { background-color: var(--color-light); }

/*Bề mặt component: scale xám trung tính cho input, button, divider, border*/
.nano-bg--component-01 { background-color: var(--color-layer-01); }
.nano-bg--layer-02 { background-color: var(--color-layer-02); }
.nano-bg--layer-03 { background-color: var(--color-layer-03); }
.nano-bg--layer-04 { background-color: var(--color-layer-04); }

/*Nền trang: scale layer tạo chiều sâu không dùng shadow*/
.nano-bg--body { background-color: var(--color-background); }
.nano-bg--layer-01 { background-color: var(--color-layer-01); }
.nano-bg--layer-02 { background-color: var(--color-layer-02); }
.nano-bg--layer-03 { background-color: var(--color-layer-03); }


.nano-bg--red-10 { background-color: color-mix(in srgb, var(--color-red) 10%, var(--color-light)); }
.nano-bg--red-20 { background-color: color-mix(in srgb, var(--color-red) 20%, var(--color-light)); }
.nano-bg--red-30 { background-color: color-mix(in srgb, var(--color-red) 30%, var(--color-light)); }
.nano-bg--red-40 { background-color: color-mix(in srgb, var(--color-red) 40%, var(--color-light)); }
.nano-bg--red-50 { background-color: color-mix(in srgb, var(--color-red) 50%, var(--color-light)); }
.nano-bg--red-60 { background-color: color-mix(in srgb, var(--color-red) 60%, var(--color-light)); }
.nano-bg--red-70 { background-color: color-mix(in srgb, var(--color-red) 70%, var(--color-light)); }
.nano-bg--red-80 { background-color: color-mix(in srgb, var(--color-red) 80%, var(--color-light)); }
.nano-bg--red-90 { background-color: color-mix(in srgb, var(--color-red) 90%, var(--color-light)); }
.nano-bg--red-110 { background-color: color-mix(in srgb, var(--color-red) 90%, var(--color-dark)); }
.nano-bg--red-120 { background-color: color-mix(in srgb, var(--color-red) 80%, var(--color-dark)); }
.nano-bg--red-130 { background-color: color-mix(in srgb, var(--color-red) 70%, var(--color-dark)); }
.nano-bg--red-140 { background-color: color-mix(in srgb, var(--color-red) 60%, var(--color-dark)); }
.nano-bg--red-150 { background-color: color-mix(in srgb, var(--color-red) 50%, var(--color-dark)); }
.nano-bg--red-160 { background-color: color-mix(in srgb, var(--color-red) 40%, var(--color-dark)); }
.nano-bg--red-170 { background-color: color-mix(in srgb, var(--color-red) 30%, var(--color-dark)); }
.nano-bg--red-180 { background-color: color-mix(in srgb, var(--color-red) 20%, var(--color-dark)); }
.nano-bg--red-190 { background-color: color-mix(in srgb, var(--color-red) 10%, var(--color-dark)); }

.nano-bg--orange-10 { background-color: color-mix(in srgb, var(--color-orange) 10%, var(--color-light)); }
.nano-bg--orange-20 { background-color: color-mix(in srgb, var(--color-orange) 20%, var(--color-light)); }
.nano-bg--orange-30 { background-color: color-mix(in srgb, var(--color-orange) 30%, var(--color-light)); }
.nano-bg--orange-40 { background-color: color-mix(in srgb, var(--color-orange) 40%, var(--color-light)); }
.nano-bg--orange-50 { background-color: color-mix(in srgb, var(--color-orange) 50%, var(--color-light)); }
.nano-bg--orange-60 { background-color: color-mix(in srgb, var(--color-orange) 60%, var(--color-light)); }
.nano-bg--orange-70 { background-color: color-mix(in srgb, var(--color-orange) 70%, var(--color-light)); }
.nano-bg--orange-80 { background-color: color-mix(in srgb, var(--color-orange) 80%, var(--color-light)); }
.nano-bg--orange-90 { background-color: color-mix(in srgb, var(--color-orange) 90%, var(--color-light)); }
.nano-bg--orange-110 { background-color: color-mix(in srgb, var(--color-orange) 90%, var(--color-dark)); }
.nano-bg--orange-120 { background-color: color-mix(in srgb, var(--color-orange) 80%, var(--color-dark)); }
.nano-bg--orange-130 { background-color: color-mix(in srgb, var(--color-orange) 70%, var(--color-dark)); }
.nano-bg--orange-140 { background-color: color-mix(in srgb, var(--color-orange) 60%, var(--color-dark)); }
.nano-bg--orange-150 { background-color: color-mix(in srgb, var(--color-orange) 50%, var(--color-dark)); }
.nano-bg--orange-160 { background-color: color-mix(in srgb, var(--color-orange) 40%, var(--color-dark)); }
.nano-bg--orange-170 { background-color: color-mix(in srgb, var(--color-orange) 30%, var(--color-dark)); }
.nano-bg--orange-180 { background-color: color-mix(in srgb, var(--color-orange) 20%, var(--color-dark)); }
.nano-bg--orange-190 { background-color: color-mix(in srgb, var(--color-orange) 10%, var(--color-dark)); }

.nano-bg--yellow-10 { background-color: color-mix(in srgb, var(--color-yellow) 10%, var(--color-light)); }
.nano-bg--yellow-20 { background-color: color-mix(in srgb, var(--color-yellow) 20%, var(--color-light)); }
.nano-bg--yellow-30 { background-color: color-mix(in srgb, var(--color-yellow) 30%, var(--color-light)); }
.nano-bg--yellow-40 { background-color: color-mix(in srgb, var(--color-yellow) 40%, var(--color-light)); }
.nano-bg--yellow-50 { background-color: color-mix(in srgb, var(--color-yellow) 50%, var(--color-light)); }
.nano-bg--yellow-60 { background-color: color-mix(in srgb, var(--color-yellow) 60%, var(--color-light)); }
.nano-bg--yellow-70 { background-color: color-mix(in srgb, var(--color-yellow) 70%, var(--color-light)); }
.nano-bg--yellow-80 { background-color: color-mix(in srgb, var(--color-yellow) 80%, var(--color-light)); }
.nano-bg--yellow-90 { background-color: color-mix(in srgb, var(--color-yellow) 90%, var(--color-light)); }
.nano-bg--yellow-110 { background-color: color-mix(in srgb, var(--color-yellow) 90%, var(--color-dark)); }
.nano-bg--yellow-120 { background-color: color-mix(in srgb, var(--color-yellow) 80%, var(--color-dark)); }
.nano-bg--yellow-130 { background-color: color-mix(in srgb, var(--color-yellow) 70%, var(--color-dark)); }
.nano-bg--yellow-140 { background-color: color-mix(in srgb, var(--color-yellow) 60%, var(--color-dark)); }
.nano-bg--yellow-150 { background-color: color-mix(in srgb, var(--color-yellow) 50%, var(--color-dark)); }
.nano-bg--yellow-160 { background-color: color-mix(in srgb, var(--color-yellow) 40%, var(--color-dark)); }
.nano-bg--yellow-170 { background-color: color-mix(in srgb, var(--color-yellow) 30%, var(--color-dark)); }
.nano-bg--yellow-180 { background-color: color-mix(in srgb, var(--color-yellow) 20%, var(--color-dark)); }
.nano-bg--yellow-190 { background-color: color-mix(in srgb, var(--color-yellow) 10%, var(--color-dark)); }

.nano-bg--green-10 { background-color: color-mix(in srgb, var(--color-green) 10%, var(--color-light)); }
.nano-bg--green-20 { background-color: color-mix(in srgb, var(--color-green) 20%, var(--color-light)); }
.nano-bg--green-30 { background-color: color-mix(in srgb, var(--color-green) 30%, var(--color-light)); }
.nano-bg--green-40 { background-color: color-mix(in srgb, var(--color-green) 40%, var(--color-light)); }
.nano-bg--green-50 { background-color: color-mix(in srgb, var(--color-green) 50%, var(--color-light)); }
.nano-bg--green-60 { background-color: color-mix(in srgb, var(--color-green) 60%, var(--color-light)); }
.nano-bg--green-70 { background-color: color-mix(in srgb, var(--color-green) 70%, var(--color-light)); }
.nano-bg--green-80 { background-color: color-mix(in srgb, var(--color-green) 80%, var(--color-light)); }
.nano-bg--green-90 { background-color: color-mix(in srgb, var(--color-green) 90%, var(--color-light)); }
.nano-bg--green-110 { background-color: color-mix(in srgb, var(--color-green) 90%, var(--color-dark)); }
.nano-bg--green-120 { background-color: color-mix(in srgb, var(--color-green) 80%, var(--color-dark)); }
.nano-bg--green-130 { background-color: color-mix(in srgb, var(--color-green) 70%, var(--color-dark)); }
.nano-bg--green-140 { background-color: color-mix(in srgb, var(--color-green) 60%, var(--color-dark)); }
.nano-bg--green-150 { background-color: color-mix(in srgb, var(--color-green) 50%, var(--color-dark)); }
.nano-bg--green-160 { background-color: color-mix(in srgb, var(--color-green) 40%, var(--color-dark)); }
.nano-bg--green-170 { background-color: color-mix(in srgb, var(--color-green) 30%, var(--color-dark)); }
.nano-bg--green-180 { background-color: color-mix(in srgb, var(--color-green) 20%, var(--color-dark)); }
.nano-bg--green-190 { background-color: color-mix(in srgb, var(--color-green) 10%, var(--color-dark)); }

.nano-bg--blue-10 { background-color: color-mix(in srgb, var(--color-blue) 10%, var(--color-light)); }
.nano-bg--blue-20 { background-color: color-mix(in srgb, var(--color-blue) 20%, var(--color-light)); }
.nano-bg--blue-30 { background-color: color-mix(in srgb, var(--color-blue) 30%, var(--color-light)); }
.nano-bg--blue-40 { background-color: color-mix(in srgb, var(--color-blue) 40%, var(--color-light)); }
.nano-bg--blue-50 { background-color: color-mix(in srgb, var(--color-blue) 50%, var(--color-light)); }
.nano-bg--blue-60 { background-color: color-mix(in srgb, var(--color-blue) 60%, var(--color-light)); }
.nano-bg--blue-70 { background-color: color-mix(in srgb, var(--color-blue) 70%, var(--color-light)); }
.nano-bg--blue-80 { background-color: color-mix(in srgb, var(--color-blue) 80%, var(--color-light)); }
.nano-bg--blue-90 { background-color: color-mix(in srgb, var(--color-blue) 90%, var(--color-light)); }
.nano-bg--blue-110 { background-color: color-mix(in srgb, var(--color-blue) 90%, var(--color-dark)); }
.nano-bg--blue-120 { background-color: color-mix(in srgb, var(--color-blue) 80%, var(--color-dark)); }
.nano-bg--blue-130 { background-color: color-mix(in srgb, var(--color-blue) 70%, var(--color-dark)); }
.nano-bg--blue-140 { background-color: color-mix(in srgb, var(--color-blue) 60%, var(--color-dark)); }
.nano-bg--blue-150 { background-color: color-mix(in srgb, var(--color-blue) 50%, var(--color-dark)); }
.nano-bg--blue-160 { background-color: color-mix(in srgb, var(--color-blue) 40%, var(--color-dark)); }
.nano-bg--blue-170 { background-color: color-mix(in srgb, var(--color-blue) 30%, var(--color-dark)); }
.nano-bg--blue-180 { background-color: color-mix(in srgb, var(--color-blue) 20%, var(--color-dark)); }
.nano-bg--blue-190 { background-color: color-mix(in srgb, var(--color-blue) 10%, var(--color-dark)); }

.nano-bg--indigo-10 { background-color: color-mix(in srgb, var(--color-indigo) 10%, var(--color-light)); }
.nano-bg--indigo-20 { background-color: color-mix(in srgb, var(--color-indigo) 20%, var(--color-light)); }
.nano-bg--indigo-30 { background-color: color-mix(in srgb, var(--color-indigo) 30%, var(--color-light)); }
.nano-bg--indigo-40 { background-color: color-mix(in srgb, var(--color-indigo) 40%, var(--color-light)); }
.nano-bg--indigo-50 { background-color: color-mix(in srgb, var(--color-indigo) 50%, var(--color-light)); }
.nano-bg--indigo-60 { background-color: color-mix(in srgb, var(--color-indigo) 60%, var(--color-light)); }
.nano-bg--indigo-70 { background-color: color-mix(in srgb, var(--color-indigo) 70%, var(--color-light)); }
.nano-bg--indigo-80 { background-color: color-mix(in srgb, var(--color-indigo) 80%, var(--color-light)); }
.nano-bg--indigo-90 { background-color: color-mix(in srgb, var(--color-indigo) 90%, var(--color-light)); }
.nano-bg--indigo-110 { background-color: color-mix(in srgb, var(--color-indigo) 90%, var(--color-dark)); }
.nano-bg--indigo-120 { background-color: color-mix(in srgb, var(--color-indigo) 80%, var(--color-dark)); }
.nano-bg--indigo-130 { background-color: color-mix(in srgb, var(--color-indigo) 70%, var(--color-dark)); }
.nano-bg--indigo-140 { background-color: color-mix(in srgb, var(--color-indigo) 60%, var(--color-dark)); }
.nano-bg--indigo-150 { background-color: color-mix(in srgb, var(--color-indigo) 50%, var(--color-dark)); }
.nano-bg--indigo-160 { background-color: color-mix(in srgb, var(--color-indigo) 40%, var(--color-dark)); }
.nano-bg--indigo-170 { background-color: color-mix(in srgb, var(--color-indigo) 30%, var(--color-dark)); }
.nano-bg--indigo-180 { background-color: color-mix(in srgb, var(--color-indigo) 20%, var(--color-dark)); }
.nano-bg--indigo-190 { background-color: color-mix(in srgb, var(--color-indigo) 10%, var(--color-dark)); }

.nano-bg--violet-10 { background-color: color-mix(in srgb, var(--color-violet) 10%, var(--color-light)); }
.nano-bg--violet-20 { background-color: color-mix(in srgb, var(--color-violet) 20%, var(--color-light)); }
.nano-bg--violet-30 { background-color: color-mix(in srgb, var(--color-violet) 30%, var(--color-light)); }
.nano-bg--violet-40 { background-color: color-mix(in srgb, var(--color-violet) 40%, var(--color-light)); }
.nano-bg--violet-50 { background-color: color-mix(in srgb, var(--color-violet) 50%, var(--color-light)); }
.nano-bg--violet-60 { background-color: color-mix(in srgb, var(--color-violet) 60%, var(--color-light)); }
.nano-bg--violet-70 { background-color: color-mix(in srgb, var(--color-violet) 70%, var(--color-light)); }
.nano-bg--violet-80 { background-color: color-mix(in srgb, var(--color-violet) 80%, var(--color-light)); }
.nano-bg--violet-90 { background-color: color-mix(in srgb, var(--color-violet) 90%, var(--color-light)); }
.nano-bg--violet-110 { background-color: color-mix(in srgb, var(--color-violet) 90%, var(--color-dark)); }
.nano-bg--violet-120 { background-color: color-mix(in srgb, var(--color-violet) 80%, var(--color-dark)); }
.nano-bg--violet-130 { background-color: color-mix(in srgb, var(--color-violet) 70%, var(--color-dark)); }
.nano-bg--violet-140 { background-color: color-mix(in srgb, var(--color-violet) 60%, var(--color-dark)); }
.nano-bg--violet-150 { background-color: color-mix(in srgb, var(--color-violet) 50%, var(--color-dark)); }
.nano-bg--violet-160 { background-color: color-mix(in srgb, var(--color-violet) 40%, var(--color-dark)); }
.nano-bg--violet-170 { background-color: color-mix(in srgb, var(--color-violet) 30%, var(--color-dark)); }
.nano-bg--violet-180 { background-color: color-mix(in srgb, var(--color-violet) 20%, var(--color-dark)); }
.nano-bg--violet-190 { background-color: color-mix(in srgb, var(--color-violet) 10%, var(--color-dark)); }

.nano-bg--gray-10 { background-color: color-mix(in srgb, var(--color-gray) 10%, var(--color-light)); }
.nano-bg--gray-20 { background-color: color-mix(in srgb, var(--color-gray) 20%, var(--color-light)); }
.nano-bg--gray-30 { background-color: color-mix(in srgb, var(--color-gray) 30%, var(--color-light)); }
.nano-bg--gray-40 { background-color: color-mix(in srgb, var(--color-gray) 40%, var(--color-light)); }
.nano-bg--gray-50 { background-color: color-mix(in srgb, var(--color-gray) 50%, var(--color-light)); }
.nano-bg--gray-60 { background-color: color-mix(in srgb, var(--color-gray) 60%, var(--color-light)); }
.nano-bg--gray-70 { background-color: color-mix(in srgb, var(--color-gray) 70%, var(--color-light)); }
.nano-bg--gray-80 { background-color: color-mix(in srgb, var(--color-gray) 80%, var(--color-light)); }
.nano-bg--gray-90 { background-color: color-mix(in srgb, var(--color-gray) 90%, var(--color-light)); }
.nano-bg--gray-110 { background-color: color-mix(in srgb, var(--color-gray) 90%, var(--color-dark)); }
.nano-bg--gray-120 { background-color: color-mix(in srgb, var(--color-gray) 80%, var(--color-dark)); }
.nano-bg--gray-130 { background-color: color-mix(in srgb, var(--color-gray) 70%, var(--color-dark)); }
.nano-bg--gray-140 { background-color: color-mix(in srgb, var(--color-gray) 60%, var(--color-dark)); }
.nano-bg--gray-150 { background-color: color-mix(in srgb, var(--color-gray) 50%, var(--color-dark)); }
.nano-bg--gray-160 { background-color: color-mix(in srgb, var(--color-gray) 40%, var(--color-dark)); }
.nano-bg--gray-170 { background-color: color-mix(in srgb, var(--color-gray) 30%, var(--color-dark)); }
.nano-bg--gray-180 { background-color: color-mix(in srgb, var(--color-gray) 20%, var(--color-dark)); }
.nano-bg--gray-190 { background-color: color-mix(in srgb, var(--color-gray) 10%, var(--color-dark)); }

.nano-bg--secondary-10 { background-color: color-mix(in srgb, var(--color-secondary) 10%, var(--color-light)); }
.nano-bg--secondary-20 { background-color: color-mix(in srgb, var(--color-secondary) 20%, var(--color-light)); }
.nano-bg--secondary-30 { background-color: color-mix(in srgb, var(--color-secondary) 30%, var(--color-light)); }
.nano-bg--secondary-40 { background-color: color-mix(in srgb, var(--color-secondary) 40%, var(--color-light)); }
.nano-bg--secondary-50 { background-color: color-mix(in srgb, var(--color-secondary) 50%, var(--color-light)); }
.nano-bg--secondary-60 { background-color: color-mix(in srgb, var(--color-secondary) 60%, var(--color-light)); }
.nano-bg--secondary-70 { background-color: color-mix(in srgb, var(--color-secondary) 70%, var(--color-light)); }
.nano-bg--secondary-80 { background-color: color-mix(in srgb, var(--color-secondary) 80%, var(--color-light)); }
.nano-bg--secondary-90 { background-color: color-mix(in srgb, var(--color-secondary) 90%, var(--color-light)); }
.nano-bg--secondary-110 { background-color: color-mix(in srgb, var(--color-secondary) 90%, var(--color-dark)); }
.nano-bg--secondary-120 { background-color: color-mix(in srgb, var(--color-secondary) 80%, var(--color-dark)); }
.nano-bg--secondary-130 { background-color: color-mix(in srgb, var(--color-secondary) 70%, var(--color-dark)); }
.nano-bg--secondary-140 { background-color: color-mix(in srgb, var(--color-secondary) 60%, var(--color-dark)); }
.nano-bg--secondary-150 { background-color: color-mix(in srgb, var(--color-secondary) 50%, var(--color-dark)); }
.nano-bg--secondary-160 { background-color: color-mix(in srgb, var(--color-secondary) 40%, var(--color-dark)); }
.nano-bg--secondary-170 { background-color: color-mix(in srgb, var(--color-secondary) 30%, var(--color-dark)); }
.nano-bg--secondary-180 { background-color: color-mix(in srgb, var(--color-secondary) 20%, var(--color-dark)); }
.nano-bg--secondary-190 { background-color: color-mix(in srgb, var(--color-secondary) 10%, var(--color-dark)); }

.nano-bg--danger-10 { background-color: color-mix(in srgb, var(--color-danger) 10%, var(--color-light)); }
.nano-bg--danger-20 { background-color: color-mix(in srgb, var(--color-danger) 20%, var(--color-light)); }
.nano-bg--danger-30 { background-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-light)); }
.nano-bg--danger-40 { background-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-light)); }
.nano-bg--danger-50 { background-color: color-mix(in srgb, var(--color-danger) 50%, var(--color-light)); }
.nano-bg--danger-60 { background-color: color-mix(in srgb, var(--color-danger) 60%, var(--color-light)); }
.nano-bg--danger-70 { background-color: color-mix(in srgb, var(--color-danger) 70%, var(--color-light)); }
.nano-bg--danger-80 { background-color: color-mix(in srgb, var(--color-danger) 80%, var(--color-light)); }
.nano-bg--danger-90 { background-color: color-mix(in srgb, var(--color-danger) 90%, var(--color-light)); }
.nano-bg--danger-110 { background-color: color-mix(in srgb, var(--color-danger) 90%, var(--color-dark)); }
.nano-bg--danger-120 { background-color: color-mix(in srgb, var(--color-danger) 80%, var(--color-dark)); }
.nano-bg--danger-130 { background-color: color-mix(in srgb, var(--color-danger) 70%, var(--color-dark)); }
.nano-bg--danger-140 { background-color: color-mix(in srgb, var(--color-danger) 60%, var(--color-dark)); }
.nano-bg--danger-150 { background-color: color-mix(in srgb, var(--color-danger) 50%, var(--color-dark)); }
.nano-bg--danger-160 { background-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-dark)); }
.nano-bg--danger-170 { background-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-dark)); }
.nano-bg--danger-180 { background-color: color-mix(in srgb, var(--color-danger) 20%, var(--color-dark)); }
.nano-bg--danger-190 { background-color: color-mix(in srgb, var(--color-danger) 10%, var(--color-dark)); }

.nano-bg--warning-10 { background-color: color-mix(in srgb, var(--color-warning) 10%, var(--color-light)); }
.nano-bg--warning-20 { background-color: color-mix(in srgb, var(--color-warning) 20%, var(--color-light)); }
.nano-bg--warning-30 { background-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-light)); }
.nano-bg--warning-40 { background-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-light)); }
.nano-bg--warning-50 { background-color: color-mix(in srgb, var(--color-warning) 50%, var(--color-light)); }
.nano-bg--warning-60 { background-color: color-mix(in srgb, var(--color-warning) 60%, var(--color-light)); }
.nano-bg--warning-70 { background-color: color-mix(in srgb, var(--color-warning) 70%, var(--color-light)); }
.nano-bg--warning-80 { background-color: color-mix(in srgb, var(--color-warning) 80%, var(--color-light)); }
.nano-bg--warning-90 { background-color: color-mix(in srgb, var(--color-warning) 90%, var(--color-light)); }
.nano-bg--warning-110 { background-color: color-mix(in srgb, var(--color-warning) 90%, var(--color-dark)); }
.nano-bg--warning-120 { background-color: color-mix(in srgb, var(--color-warning) 80%, var(--color-dark)); }
.nano-bg--warning-130 { background-color: color-mix(in srgb, var(--color-warning) 70%, var(--color-dark)); }
.nano-bg--warning-140 { background-color: color-mix(in srgb, var(--color-warning) 60%, var(--color-dark)); }
.nano-bg--warning-150 { background-color: color-mix(in srgb, var(--color-warning) 50%, var(--color-dark)); }
.nano-bg--warning-160 { background-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-dark)); }
.nano-bg--warning-170 { background-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-dark)); }
.nano-bg--warning-180 { background-color: color-mix(in srgb, var(--color-warning) 20%, var(--color-dark)); }
.nano-bg--warning-190 { background-color: color-mix(in srgb, var(--color-warning) 10%, var(--color-dark)); }

.nano-bg--success-10 { background-color: color-mix(in srgb, var(--color-success) 10%, var(--color-light)); }
.nano-bg--success-20 { background-color: color-mix(in srgb, var(--color-success) 20%, var(--color-light)); }
.nano-bg--success-30 { background-color: color-mix(in srgb, var(--color-success) 30%, var(--color-light)); }
.nano-bg--success-40 { background-color: color-mix(in srgb, var(--color-success) 40%, var(--color-light)); }
.nano-bg--success-50 { background-color: color-mix(in srgb, var(--color-success) 50%, var(--color-light)); }
.nano-bg--success-60 { background-color: color-mix(in srgb, var(--color-success) 60%, var(--color-light)); }
.nano-bg--success-70 { background-color: color-mix(in srgb, var(--color-success) 70%, var(--color-light)); }
.nano-bg--success-80 { background-color: color-mix(in srgb, var(--color-success) 80%, var(--color-light)); }
.nano-bg--success-90 { background-color: color-mix(in srgb, var(--color-success) 90%, var(--color-light)); }
.nano-bg--success-110 { background-color: color-mix(in srgb, var(--color-success) 90%, var(--color-dark)); }
.nano-bg--success-120 { background-color: color-mix(in srgb, var(--color-success) 80%, var(--color-dark)); }
.nano-bg--success-130 { background-color: color-mix(in srgb, var(--color-success) 70%, var(--color-dark)); }
.nano-bg--success-140 { background-color: color-mix(in srgb, var(--color-success) 60%, var(--color-dark)); }
.nano-bg--success-150 { background-color: color-mix(in srgb, var(--color-success) 50%, var(--color-dark)); }
.nano-bg--success-160 { background-color: color-mix(in srgb, var(--color-success) 40%, var(--color-dark)); }
.nano-bg--success-170 { background-color: color-mix(in srgb, var(--color-success) 30%, var(--color-dark)); }
.nano-bg--success-180 { background-color: color-mix(in srgb, var(--color-success) 20%, var(--color-dark)); }
.nano-bg--success-190 { background-color: color-mix(in srgb, var(--color-success) 10%, var(--color-dark)); }

.nano-bg--primary-10 { background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-light)); }
.nano-bg--primary-20 { background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-light)); }
.nano-bg--primary-30 { background-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-light)); }
.nano-bg--primary-40 { background-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-light)); }
.nano-bg--primary-50 { background-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-light)); }
.nano-bg--primary-60 { background-color: color-mix(in srgb, var(--color-primary) 60%, var(--color-light)); }
.nano-bg--primary-70 { background-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-light)); }
.nano-bg--primary-80 { background-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-light)); }
.nano-bg--primary-90 { background-color: color-mix(in srgb, var(--color-primary) 90%, var(--color-light)); }
.nano-bg--primary-110 { background-color: color-mix(in srgb, var(--color-primary) 90%, var(--color-dark)); }
.nano-bg--primary-120 { background-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark)); }
.nano-bg--primary-130 { background-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-dark)); }
.nano-bg--primary-140 { background-color: color-mix(in srgb, var(--color-primary) 60%, var(--color-dark)); }
.nano-bg--primary-150 { background-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-dark)); }
.nano-bg--primary-160 { background-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-dark)); }
.nano-bg--primary-170 { background-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-dark)); }
.nano-bg--primary-180 { background-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-dark)); }
.nano-bg--primary-190 { background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-dark)); }

.nano-bg--transparent { background-color: transparent; }
/* Overflow – prefix nano- */
.nano-overflow-auto { overflow: auto; }
.nano-overflow-hidden { overflow: hidden; }
.nano-overflow-visible { overflow: visible; }
.nano-overflow-scroll { overflow: scroll; }
.nano-overflow-x-auto { overflow-x: auto; overflow-y: visible; }
.nano-overflow-y-auto { overflow-y: auto; overflow-x: visible; }
.nano-overflow-x-hidden { overflow-x: hidden; }
.nano-overflow-y-hidden { overflow-y: hidden; }

/* Opacity – prefix nano- */
.nano-opacity-0 { opacity: 0; }
.nano-opacity-5 { opacity: 0.05; }
.nano-opacity-10 { opacity: 0.1; }
.nano-opacity-20 { opacity: 0.2; }
.nano-opacity-25 { opacity: 0.25; }
.nano-opacity-30 { opacity: 0.3; }
.nano-opacity-40 { opacity: 0.4; }
.nano-opacity-50 { opacity: 0.5; }
.nano-opacity-60 { opacity: 0.6; }
.nano-opacity-70 { opacity: 0.7; }
.nano-opacity-75 { opacity: 0.75; }
.nano-opacity-80 { opacity: 0.8; }
.nano-opacity-90 { opacity: 0.9; }
.nano-opacity-95 { opacity: 0.95; }
.nano-opacity-100 { opacity: 1; }

/* Border – prefix nano-, var(--color-*) var(--radius-base) */
.nano-border { border-width: 1px; border-style: solid; border-color: var(--color-gray); }
.nano-border--0 { border-width: 0; }
.nano-border--t { border-top-width: 1px; border-top-style: solid; border-top-color: var(--color-gray); }
.nano-border--r { border-right-width: 1px; border-right-style: solid; border-right-color: var(--color-gray); }
.nano-border--b { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--color-gray); }
.nano-border--l { border-left-width: 1px; border-left-style: solid; border-left-color: var(--color-gray); }

/* Border style (Tailwind-like) */
.nano-border--solid { border-style: solid; }
.nano-border--dashed { border-style: dashed; }
.nano-border--dotted { border-style: dotted; }
.nano-border--double { border-style: double; }
.nano-border--none { border-style: none; }

/* Border of raw color */
.nano-border--red { border-color: var(--color-red); }
.nano-border--orange { border-color: var(--color-orange); }
.nano-border--yellow { border-color: var(--color-yellow); }
.nano-border--green { border-color: var(--color-green); }
.nano-border--blue { border-color: var(--color-blue); }
.nano-border--indigo { border-color: var(--color-indigo); }
.nano-border--violet { border-color: var(--color-violet); }
.nano-border--black { border-color: var(--color-black); }
.nano-border--gray { border-color: var(--color-gray); }
.nano-border--white { border-color: var(--color-white); }

/* Border of sematic color */
.nano-border--primary { border-color: var(--color-primary); }
.nano-border--secondary { border-color: var(--color-secondary); }
.nano-border--danger { border-color: var(--color-danger); }
.nano-border--warning { border-color: var(--color-warning); }
.nano-border--dark { border-color: var(--color-dark); }
.nano-border--light { border-color: var(--color-light); }

/* Step for color */
.nano-border--gray-10 { border-color: color-mix(in srgb, var(--color-gray) 10%, var(--color-light)); }
.nano-border--gray-20 { border-color: color-mix(in srgb, var(--color-gray) 20%, var(--color-light)); }
.nano-border--gray-30 { border-color: color-mix(in srgb, var(--color-gray) 30%, var(--color-light)); }
.nano-border--gray-40 { border-color: color-mix(in srgb, var(--color-gray) 40%, var(--color-light)); }
.nano-border--gray-50 { border-color: color-mix(in srgb, var(--color-gray) 50%, var(--color-light)); }
.nano-border--gray-60 { border-color: color-mix(in srgb, var(--color-gray) 60%, var(--color-light)); }
.nano-border--gray-70 { border-color: color-mix(in srgb, var(--color-gray) 70%, var(--color-light)); }
.nano-border--gray-80 { border-color: color-mix(in srgb, var(--color-gray) 80%, var(--color-light)); }
.nano-border--gray-90 { border-color: color-mix(in srgb, var(--color-gray) 90%, var(--color-light)); }
.nano-border--gray-110 { border-color: color-mix(in srgb, var(--color-gray) 90%, var(--color-dark)); }
.nano-border--gray-120 { border-color: color-mix(in srgb, var(--color-gray) 80%, var(--color-dark)); }
.nano-border--gray-130 { border-color: color-mix(in srgb, var(--color-gray) 70%, var(--color-dark)); }
.nano-border--gray-140 { border-color: color-mix(in srgb, var(--color-gray) 60%, var(--color-dark)); }
.nano-border--gray-150 { border-color: color-mix(in srgb, var(--color-gray) 50%, var(--color-dark)); }
.nano-border--gray-160 { border-color: color-mix(in srgb, var(--color-gray) 40%, var(--color-dark)); }
.nano-border--gray-170 { border-color: color-mix(in srgb, var(--color-gray) 30%, var(--color-dark)); }
.nano-border--gray-180 { border-color: color-mix(in srgb, var(--color-gray) 20%, var(--color-dark)); }
.nano-border--gray-190 { border-color: color-mix(in srgb, var(--color-gray) 10%, var(--color-dark)); }

/* Step for red */
.nano-border--red-10 { border-color: color-mix(in srgb, var(--color-red) 10%, var(--color-light)); }
.nano-border--red-20 { border-color: color-mix(in srgb, var(--color-red) 20%, var(--color-light)); }
.nano-border--red-30 { border-color: color-mix(in srgb, var(--color-red) 30%, var(--color-light)); }
.nano-border--red-40 { border-color: color-mix(in srgb, var(--color-red) 40%, var(--color-light)); }
.nano-border--red-50 { border-color: color-mix(in srgb, var(--color-red) 50%, var(--color-light)); }
.nano-border--red-60 { border-color: color-mix(in srgb, var(--color-red) 60%, var(--color-light)); }
.nano-border--red-70 { border-color: color-mix(in srgb, var(--color-red) 70%, var(--color-light)); }
.nano-border--red-80 { border-color: color-mix(in srgb, var(--color-red) 80%, var(--color-light)); }
.nano-border--red-90 { border-color: color-mix(in srgb, var(--color-red) 90%, var(--color-light)); }
.nano-border--red-110 { border-color: color-mix(in srgb, var(--color-red) 90%, var(--color-dark)); }
.nano-border--red-120 { border-color: color-mix(in srgb, var(--color-red) 80%, var(--color-dark)); }
.nano-border--red-130 { border-color: color-mix(in srgb, var(--color-red) 70%, var(--color-dark)); }
.nano-border--red-140 { border-color: color-mix(in srgb, var(--color-red) 60%, var(--color-dark)); }
.nano-border--red-150 { border-color: color-mix(in srgb, var(--color-red) 50%, var(--color-dark)); }
.nano-border--red-160 { border-color: color-mix(in srgb, var(--color-red) 40%, var(--color-dark)); }
.nano-border--red-170 { border-color: color-mix(in srgb, var(--color-red) 30%, var(--color-dark)); }
.nano-border--red-180 { border-color: color-mix(in srgb, var(--color-red) 20%, var(--color-dark)); }
.nano-border--red-190 { border-color: color-mix(in srgb, var(--color-red) 10%, var(--color-dark)); }

/* Step for orange */
.nano-border--orange-10 { border-color: color-mix(in srgb, var(--color-orange) 10%, var(--color-light)); }
.nano-border--orange-20 { border-color: color-mix(in srgb, var(--color-orange) 20%, var(--color-light)); }
.nano-border--orange-30 { border-color: color-mix(in srgb, var(--color-orange) 30%, var(--color-light)); }
.nano-border--orange-40 { border-color: color-mix(in srgb, var(--color-orange) 40%, var(--color-light)); }
.nano-border--orange-50 { border-color: color-mix(in srgb, var(--color-orange) 50%, var(--color-light)); }
.nano-border--orange-60 { border-color: color-mix(in srgb, var(--color-orange) 60%, var(--color-light)); }
.nano-border--orange-70 { border-color: color-mix(in srgb, var(--color-orange) 70%, var(--color-light)); }
.nano-border--orange-80 { border-color: color-mix(in srgb, var(--color-orange) 80%, var(--color-light)); }
.nano-border--orange-90 { border-color: color-mix(in srgb, var(--color-orange) 90%, var(--color-light)); }
.nano-border--orange-110 { border-color: color-mix(in srgb, var(--color-orange) 90%, var(--color-dark)); }
.nano-border--orange-120 { border-color: color-mix(in srgb, var(--color-orange) 80%, var(--color-dark)); }
.nano-border--orange-130 { border-color: color-mix(in srgb, var(--color-orange) 70%, var(--color-dark)); }
.nano-border--orange-140 { border-color: color-mix(in srgb, var(--color-orange) 60%, var(--color-dark)); }
.nano-border--orange-150 { border-color: color-mix(in srgb, var(--color-orange) 50%, var(--color-dark)); }
.nano-border--orange-160 { border-color: color-mix(in srgb, var(--color-orange) 40%, var(--color-dark)); }
.nano-border--orange-170 { border-color: color-mix(in srgb, var(--color-orange) 30%, var(--color-dark)); }
.nano-border--orange-180 { border-color: color-mix(in srgb, var(--color-orange) 20%, var(--color-dark)); }
.nano-border--orange-190 { border-color: color-mix(in srgb, var(--color-orange) 10%, var(--color-dark)); }

/* Step for yellow */
.nano-border--yellow-10 { border-color: color-mix(in srgb, var(--color-yellow) 10%, var(--color-light)); }
.nano-border--yellow-20 { border-color: color-mix(in srgb, var(--color-yellow) 20%, var(--color-light)); }
.nano-border--yellow-30 { border-color: color-mix(in srgb, var(--color-yellow) 30%, var(--color-light)); }
.nano-border--yellow-40 { border-color: color-mix(in srgb, var(--color-yellow) 40%, var(--color-light)); }
.nano-border--yellow-50 { border-color: color-mix(in srgb, var(--color-yellow) 50%, var(--color-light)); }
.nano-border--yellow-60 { border-color: color-mix(in srgb, var(--color-yellow) 60%, var(--color-light)); }
.nano-border--yellow-70 { border-color: color-mix(in srgb, var(--color-yellow) 70%, var(--color-light)); }
.nano-border--yellow-80 { border-color: color-mix(in srgb, var(--color-yellow) 80%, var(--color-light)); }
.nano-border--yellow-90 { border-color: color-mix(in srgb, var(--color-yellow) 90%, var(--color-light)); }
.nano-border--yellow-110 { border-color: color-mix(in srgb, var(--color-yellow) 90%, var(--color-dark)); }
.nano-border--yellow-120 { border-color: color-mix(in srgb, var(--color-yellow) 80%, var(--color-dark)); }
.nano-border--yellow-130 { border-color: color-mix(in srgb, var(--color-yellow) 70%, var(--color-dark)); }
.nano-border--yellow-140 { border-color: color-mix(in srgb, var(--color-yellow) 60%, var(--color-dark)); }
.nano-border--yellow-150 { border-color: color-mix(in srgb, var(--color-yellow) 50%, var(--color-dark)); }
.nano-border--yellow-160 { border-color: color-mix(in srgb, var(--color-yellow) 40%, var(--color-dark)); }
.nano-border--yellow-170 { border-color: color-mix(in srgb, var(--color-yellow) 30%, var(--color-dark)); }
.nano-border--yellow-180 { border-color: color-mix(in srgb, var(--color-yellow) 20%, var(--color-dark)); }
.nano-border--yellow-190 { border-color: color-mix(in srgb, var(--color-yellow) 10%, var(--color-dark)); }

/* Step for green */
.nano-border--green-10 { border-color: color-mix(in srgb, var(--color-green) 10%, var(--color-light)); }
.nano-border--green-20 { border-color: color-mix(in srgb, var(--color-green) 20%, var(--color-light)); }
.nano-border--green-30 { border-color: color-mix(in srgb, var(--color-green) 30%, var(--color-light)); }
.nano-border--green-40 { border-color: color-mix(in srgb, var(--color-green) 40%, var(--color-light)); }
.nano-border--green-50 { border-color: color-mix(in srgb, var(--color-green) 50%, var(--color-light)); }
.nano-border--green-60 { border-color: color-mix(in srgb, var(--color-green) 60%, var(--color-light)); }
.nano-border--green-70 { border-color: color-mix(in srgb, var(--color-green) 70%, var(--color-light)); }
.nano-border--green-80 { border-color: color-mix(in srgb, var(--color-green) 80%, var(--color-light)); }
.nano-border--green-90 { border-color: color-mix(in srgb, var(--color-green) 90%, var(--color-light)); }
.nano-border--green-110 { border-color: color-mix(in srgb, var(--color-green) 90%, var(--color-dark)); }
.nano-border--green-120 { border-color: color-mix(in srgb, var(--color-green) 80%, var(--color-dark)); }
.nano-border--green-130 { border-color: color-mix(in srgb, var(--color-green) 70%, var(--color-dark)); }
.nano-border--green-140 { border-color: color-mix(in srgb, var(--color-green) 60%, var(--color-dark)); }
.nano-border--green-150 { border-color: color-mix(in srgb, var(--color-green) 50%, var(--color-dark)); }
.nano-border--green-160 { border-color: color-mix(in srgb, var(--color-green) 40%, var(--color-dark)); }
.nano-border--green-170 { border-color: color-mix(in srgb, var(--color-green) 30%, var(--color-dark)); }
.nano-border--green-180 { border-color: color-mix(in srgb, var(--color-green) 20%, var(--color-dark)); }
.nano-border--green-190 { border-color: color-mix(in srgb, var(--color-green) 10%, var(--color-dark)); }

/* Step for blue */
.nano-border--blue-10 { border-color: color-mix(in srgb, var(--color-blue) 10%, var(--color-light)); }
.nano-border--blue-20 { border-color: color-mix(in srgb, var(--color-blue) 20%, var(--color-light)); }
.nano-border--blue-30 { border-color: color-mix(in srgb, var(--color-blue) 30%, var(--color-light)); }
.nano-border--blue-40 { border-color: color-mix(in srgb, var(--color-blue) 40%, var(--color-light)); }
.nano-border--blue-50 { border-color: color-mix(in srgb, var(--color-blue) 50%, var(--color-light)); }
.nano-border--blue-60 { border-color: color-mix(in srgb, var(--color-blue) 60%, var(--color-light)); }
.nano-border--blue-70 { border-color: color-mix(in srgb, var(--color-blue) 70%, var(--color-light)); }
.nano-border--blue-80 { border-color: color-mix(in srgb, var(--color-blue) 80%, var(--color-light)); }
.nano-border--blue-90 { border-color: color-mix(in srgb, var(--color-blue) 90%, var(--color-light)); }
.nano-border--blue-110 { border-color: color-mix(in srgb, var(--color-blue) 90%, var(--color-dark)); }
.nano-border--blue-120 { border-color: color-mix(in srgb, var(--color-blue) 80%, var(--color-dark)); }
.nano-border--blue-130 { border-color: color-mix(in srgb, var(--color-blue) 70%, var(--color-dark)); }
.nano-border--blue-140 { border-color: color-mix(in srgb, var(--color-blue) 60%, var(--color-dark)); }
.nano-border--blue-150 { border-color: color-mix(in srgb, var(--color-blue) 50%, var(--color-dark)); }
.nano-border--blue-160 { border-color: color-mix(in srgb, var(--color-blue) 40%, var(--color-dark)); }
.nano-border--blue-170 { border-color: color-mix(in srgb, var(--color-blue) 30%, var(--color-dark)); }
.nano-border--blue-180 { border-color: color-mix(in srgb, var(--color-blue) 20%, var(--color-dark)); }
.nano-border--blue-190 { border-color: color-mix(in srgb, var(--color-blue) 10%, var(--color-dark)); }

/* Step for indigo */
.nano-border--indigo-10 { border-color: color-mix(in srgb, var(--color-indigo) 10%, var(--color-light)); }
.nano-border--indigo-20 { border-color: color-mix(in srgb, var(--color-indigo) 20%, var(--color-light)); }
.nano-border--indigo-30 { border-color: color-mix(in srgb, var(--color-indigo) 30%, var(--color-light)); }
.nano-border--indigo-40 { border-color: color-mix(in srgb, var(--color-indigo) 40%, var(--color-light)); }
.nano-border--indigo-50 { border-color: color-mix(in srgb, var(--color-indigo) 50%, var(--color-light)); }
.nano-border--indigo-60 { border-color: color-mix(in srgb, var(--color-indigo) 60%, var(--color-light)); }
.nano-border--indigo-70 { border-color: color-mix(in srgb, var(--color-indigo) 70%, var(--color-light)); }
.nano-border--indigo-80 { border-color: color-mix(in srgb, var(--color-indigo) 80%, var(--color-light)); }
.nano-border--indigo-90 { border-color: color-mix(in srgb, var(--color-indigo) 90%, var(--color-light)); }
.nano-border--indigo-110 { border-color: color-mix(in srgb, var(--color-indigo) 90%, var(--color-dark)); }
.nano-border--indigo-120 { border-color: color-mix(in srgb, var(--color-indigo) 80%, var(--color-dark)); }
.nano-border--indigo-130 { border-color: color-mix(in srgb, var(--color-indigo) 70%, var(--color-dark)); }
.nano-border--indigo-140 { border-color: color-mix(in srgb, var(--color-indigo) 60%, var(--color-dark)); }
.nano-border--indigo-150 { border-color: color-mix(in srgb, var(--color-indigo) 50%, var(--color-dark)); }
.nano-border--indigo-160 { border-color: color-mix(in srgb, var(--color-indigo) 40%, var(--color-dark)); }
.nano-border--indigo-170 { border-color: color-mix(in srgb, var(--color-indigo) 30%, var(--color-dark)); }
.nano-border--indigo-180 { border-color: color-mix(in srgb, var(--color-indigo) 20%, var(--color-dark)); }
.nano-border--indigo-190 { border-color: color-mix(in srgb, var(--color-indigo) 10%, var(--color-dark)); }

/* Step for violet */
.nano-border--violet-10 { border-color: color-mix(in srgb, var(--color-violet) 10%, var(--color-light)); }
.nano-border--violet-20 { border-color: color-mix(in srgb, var(--color-violet) 20%, var(--color-light)); }
.nano-border--violet-30 { border-color: color-mix(in srgb, var(--color-violet) 30%, var(--color-light)); }
.nano-border--violet-40 { border-color: color-mix(in srgb, var(--color-violet) 40%, var(--color-light)); }
.nano-border--violet-50 { border-color: color-mix(in srgb, var(--color-violet) 50%, var(--color-light)); }
.nano-border--violet-60 { border-color: color-mix(in srgb, var(--color-violet) 60%, var(--color-light)); }
.nano-border--violet-70 { border-color: color-mix(in srgb, var(--color-violet) 70%, var(--color-light)); }
.nano-border--violet-80 { border-color: color-mix(in srgb, var(--color-violet) 80%, var(--color-light)); }
.nano-border--violet-90 { border-color: color-mix(in srgb, var(--color-violet) 90%, var(--color-light)); }
.nano-border--violet-110 { border-color: color-mix(in srgb, var(--color-violet) 90%, var(--color-dark)); }
.nano-border--violet-120 { border-color: color-mix(in srgb, var(--color-violet) 80%, var(--color-dark)); }
.nano-border--violet-130 { border-color: color-mix(in srgb, var(--color-violet) 70%, var(--color-dark)); }
.nano-border--violet-140 { border-color: color-mix(in srgb, var(--color-violet) 60%, var(--color-dark)); }
.nano-border--violet-150 { border-color: color-mix(in srgb, var(--color-violet) 50%, var(--color-dark)); }
.nano-border--violet-160 { border-color: color-mix(in srgb, var(--color-violet) 40%, var(--color-dark)); }
.nano-border--violet-170 { border-color: color-mix(in srgb, var(--color-violet) 30%, var(--color-dark)); }
.nano-border--violet-180 { border-color: color-mix(in srgb, var(--color-violet) 20%, var(--color-dark)); }
.nano-border--violet-190 { border-color: color-mix(in srgb, var(--color-violet) 10%, var(--color-dark)); }

/* Step for black */
.nano-border--black-10 { border-color: color-mix(in srgb, var(--color-black) 10%, var(--color-light)); }
.nano-border--black-20 { border-color: color-mix(in srgb, var(--color-black) 20%, var(--color-light)); }
.nano-border--black-30 { border-color: color-mix(in srgb, var(--color-black) 30%, var(--color-light)); }
.nano-border--black-40 { border-color: color-mix(in srgb, var(--color-black) 40%, var(--color-light)); }
.nano-border--black-50 { border-color: color-mix(in srgb, var(--color-black) 50%, var(--color-light)); }
.nano-border--black-60 { border-color: color-mix(in srgb, var(--color-black) 60%, var(--color-light)); }
.nano-border--black-70 { border-color: color-mix(in srgb, var(--color-black) 70%, var(--color-light)); }
.nano-border--black-80 { border-color: color-mix(in srgb, var(--color-black) 80%, var(--color-light)); }
.nano-border--black-90 { border-color: color-mix(in srgb, var(--color-black) 90%, var(--color-light)); }
.nano-border--black-110 { border-color: color-mix(in srgb, var(--color-black) 90%, var(--color-dark)); }
.nano-border--black-120 { border-color: color-mix(in srgb, var(--color-black) 80%, var(--color-dark)); }
.nano-border--black-130 { border-color: color-mix(in srgb, var(--color-black) 70%, var(--color-dark)); }
.nano-border--black-140 { border-color: color-mix(in srgb, var(--color-black) 60%, var(--color-dark)); }
.nano-border--black-150 { border-color: color-mix(in srgb, var(--color-black) 50%, var(--color-dark)); }
.nano-border--black-160 { border-color: color-mix(in srgb, var(--color-black) 40%, var(--color-dark)); }
.nano-border--black-170 { border-color: color-mix(in srgb, var(--color-black) 30%, var(--color-dark)); }
.nano-border--black-180 { border-color: color-mix(in srgb, var(--color-black) 20%, var(--color-dark)); }
.nano-border--black-190 { border-color: color-mix(in srgb, var(--color-black) 10%, var(--color-dark)); }

/* Step for white */
.nano-border--white-10 { border-color: color-mix(in srgb, var(--color-white) 10%, var(--color-light)); }
.nano-border--white-20 { border-color: color-mix(in srgb, var(--color-white) 20%, var(--color-light)); }
.nano-border--white-30 { border-color: color-mix(in srgb, var(--color-white) 30%, var(--color-light)); }
.nano-border--white-40 { border-color: color-mix(in srgb, var(--color-white) 40%, var(--color-light)); }
.nano-border--white-50 { border-color: color-mix(in srgb, var(--color-white) 50%, var(--color-light)); }
.nano-border--white-60 { border-color: color-mix(in srgb, var(--color-white) 60%, var(--color-light)); }
.nano-border--white-70 { border-color: color-mix(in srgb, var(--color-white) 70%, var(--color-light)); }
.nano-border--white-80 { border-color: color-mix(in srgb, var(--color-white) 80%, var(--color-light)); }
.nano-border--white-90 { border-color: color-mix(in srgb, var(--color-white) 90%, var(--color-light)); }
.nano-border--white-110 { border-color: color-mix(in srgb, var(--color-white) 90%, var(--color-dark)); }
.nano-border--white-120 { border-color: color-mix(in srgb, var(--color-white) 80%, var(--color-dark)); }
.nano-border--white-130 { border-color: color-mix(in srgb, var(--color-white) 70%, var(--color-dark)); }
.nano-border--white-140 { border-color: color-mix(in srgb, var(--color-white) 60%, var(--color-dark)); }
.nano-border--white-150 { border-color: color-mix(in srgb, var(--color-white) 50%, var(--color-dark)); }
.nano-border--white-160 { border-color: color-mix(in srgb, var(--color-white) 40%, var(--color-dark)); }
.nano-border--white-170 { border-color: color-mix(in srgb, var(--color-white) 30%, var(--color-dark)); }
.nano-border--white-180 { border-color: color-mix(in srgb, var(--color-white) 20%, var(--color-dark)); }
.nano-border--white-190 { border-color: color-mix(in srgb, var(--color-white) 10%, var(--color-dark)); }

/* Step for semantic colors */
/* Primary */
.nano-border--primary-10 { border-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-light)); }
.nano-border--primary-20 { border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-light)); }
.nano-border--primary-30 { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-light)); }
.nano-border--primary-40 { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-light)); }
.nano-border--primary-50 { border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-light)); }
.nano-border--primary-60 { border-color: color-mix(in srgb, var(--color-primary) 60%, var(--color-light)); }
.nano-border--primary-70 { border-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-light)); }
.nano-border--primary-80 { border-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-light)); }
.nano-border--primary-90 { border-color: color-mix(in srgb, var(--color-primary) 90%, var(--color-light)); }
.nano-border--primary-110 { border-color: color-mix(in srgb, var(--color-primary) 90%, var(--color-dark)); }
.nano-border--primary-120 { border-color: color-mix(in srgb, var(--color-primary) 80%, var(--color-dark)); }
.nano-border--primary-130 { border-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-dark)); }
.nano-border--primary-140 { border-color: color-mix(in srgb, var(--color-primary) 60%, var(--color-dark)); }
.nano-border--primary-150 { border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-dark)); }
.nano-border--primary-160 { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-dark)); }
.nano-border--primary-170 { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-dark)); }
.nano-border--primary-180 { border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-dark)); }
.nano-border--primary-190 { border-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-dark)); }

/* Secondary */
.nano-border--secondary-10 { border-color: color-mix(in srgb, var(--color-secondary) 10%, var(--color-light)); }
.nano-border--secondary-20 { border-color: color-mix(in srgb, var(--color-secondary) 20%, var(--color-light)); }
.nano-border--secondary-30 { border-color: color-mix(in srgb, var(--color-secondary) 30%, var(--color-light)); }
.nano-border--secondary-40 { border-color: color-mix(in srgb, var(--color-secondary) 40%, var(--color-light)); }
.nano-border--secondary-50 { border-color: color-mix(in srgb, var(--color-secondary) 50%, var(--color-light)); }
.nano-border--secondary-60 { border-color: color-mix(in srgb, var(--color-secondary) 60%, var(--color-light)); }
.nano-border--secondary-70 { border-color: color-mix(in srgb, var(--color-secondary) 70%, var(--color-light)); }
.nano-border--secondary-80 { border-color: color-mix(in srgb, var(--color-secondary) 80%, var(--color-light)); }
.nano-border--secondary-90 { border-color: color-mix(in srgb, var(--color-secondary) 90%, var(--color-light)); }
.nano-border--secondary-110 { border-color: color-mix(in srgb, var(--color-secondary) 90%, var(--color-dark)); }
.nano-border--secondary-120 { border-color: color-mix(in srgb, var(--color-secondary) 80%, var(--color-dark)); }
.nano-border--secondary-130 { border-color: color-mix(in srgb, var(--color-secondary) 70%, var(--color-dark)); }
.nano-border--secondary-140 { border-color: color-mix(in srgb, var(--color-secondary) 60%, var(--color-dark)); }
.nano-border--secondary-150 { border-color: color-mix(in srgb, var(--color-secondary) 50%, var(--color-dark)); }
.nano-border--secondary-160 { border-color: color-mix(in srgb, var(--color-secondary) 40%, var(--color-dark)); }
.nano-border--secondary-170 { border-color: color-mix(in srgb, var(--color-secondary) 30%, var(--color-dark)); }
.nano-border--secondary-180 { border-color: color-mix(in srgb, var(--color-secondary) 20%, var(--color-dark)); }
.nano-border--secondary-190 { border-color: color-mix(in srgb, var(--color-secondary) 10%, var(--color-dark)); }

/* Danger */
.nano-border--danger-10 { border-color: color-mix(in srgb, var(--color-danger) 10%, var(--color-light)); }
.nano-border--danger-20 { border-color: color-mix(in srgb, var(--color-danger) 20%, var(--color-light)); }
.nano-border--danger-30 { border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-light)); }
.nano-border--danger-40 { border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-light)); }
.nano-border--danger-50 { border-color: color-mix(in srgb, var(--color-danger) 50%, var(--color-light)); }
.nano-border--danger-60 { border-color: color-mix(in srgb, var(--color-danger) 60%, var(--color-light)); }
.nano-border--danger-70 { border-color: color-mix(in srgb, var(--color-danger) 70%, var(--color-light)); }
.nano-border--danger-80 { border-color: color-mix(in srgb, var(--color-danger) 80%, var(--color-light)); }
.nano-border--danger-90 { border-color: color-mix(in srgb, var(--color-danger) 90%, var(--color-light)); }
.nano-border--danger-110 { border-color: color-mix(in srgb, var(--color-danger) 90%, var(--color-dark)); }
.nano-border--danger-120 { border-color: color-mix(in srgb, var(--color-danger) 80%, var(--color-dark)); }
.nano-border--danger-130 { border-color: color-mix(in srgb, var(--color-danger) 70%, var(--color-dark)); }
.nano-border--danger-140 { border-color: color-mix(in srgb, var(--color-danger) 60%, var(--color-dark)); }
.nano-border--danger-150 { border-color: color-mix(in srgb, var(--color-danger) 50%, var(--color-dark)); }
.nano-border--danger-160 { border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-dark)); }
.nano-border--danger-170 { border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-dark)); }
.nano-border--danger-180 { border-color: color-mix(in srgb, var(--color-danger) 20%, var(--color-dark)); }
.nano-border--danger-190 { border-color: color-mix(in srgb, var(--color-danger) 10%, var(--color-dark)); }

/* Warning */
.nano-border--warning-10 { border-color: color-mix(in srgb, var(--color-warning) 10%, var(--color-light)); }
.nano-border--warning-20 { border-color: color-mix(in srgb, var(--color-warning) 20%, var(--color-light)); }
.nano-border--warning-30 { border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-light)); }
.nano-border--warning-40 { border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-light)); }
.nano-border--warning-50 { border-color: color-mix(in srgb, var(--color-warning) 50%, var(--color-light)); }
.nano-border--warning-60 { border-color: color-mix(in srgb, var(--color-warning) 60%, var(--color-light)); }
.nano-border--warning-70 { border-color: color-mix(in srgb, var(--color-warning) 70%, var(--color-light)); }
.nano-border--warning-80 { border-color: color-mix(in srgb, var(--color-warning) 80%, var(--color-light)); }
.nano-border--warning-90 { border-color: color-mix(in srgb, var(--color-warning) 90%, var(--color-light)); }
.nano-border--warning-110 { border-color: color-mix(in srgb, var(--color-warning) 90%, var(--color-dark)); }
.nano-border--warning-120 { border-color: color-mix(in srgb, var(--color-warning) 80%, var(--color-dark)); }
.nano-border--warning-130 { border-color: color-mix(in srgb, var(--color-warning) 70%, var(--color-dark)); }
.nano-border--warning-140 { border-color: color-mix(in srgb, var(--color-warning) 60%, var(--color-dark)); }
.nano-border--warning-150 { border-color: color-mix(in srgb, var(--color-warning) 50%, var(--color-dark)); }
.nano-border--warning-160 { border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-dark)); }
.nano-border--warning-170 { border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-dark)); }
.nano-border--warning-180 { border-color: color-mix(in srgb, var(--color-warning) 20%, var(--color-dark)); }
.nano-border--warning-190 { border-color: color-mix(in srgb, var(--color-warning) 10%, var(--color-dark)); }

/* Dark */
.nano-border--dark-10 { border-color: color-mix(in srgb, var(--color-dark) 10%, var(--color-light)); }
.nano-border--dark-20 { border-color: color-mix(in srgb, var(--color-dark) 20%, var(--color-light)); }
.nano-border--dark-30 { border-color: color-mix(in srgb, var(--color-dark) 30%, var(--color-light)); }
.nano-border--dark-40 { border-color: color-mix(in srgb, var(--color-dark) 40%, var(--color-light)); }
.nano-border--dark-50 { border-color: color-mix(in srgb, var(--color-dark) 50%, var(--color-light)); }
.nano-border--dark-60 { border-color: color-mix(in srgb, var(--color-dark) 60%, var(--color-light)); }
.nano-border--dark-70 { border-color: color-mix(in srgb, var(--color-dark) 70%, var(--color-light)); }
.nano-border--dark-80 { border-color: color-mix(in srgb, var(--color-dark) 80%, var(--color-light)); }
.nano-border--dark-90 { border-color: color-mix(in srgb, var(--color-dark) 90%, var(--color-light)); }
.nano-border--dark-110 { border-color: color-mix(in srgb, var(--color-dark) 90%, var(--color-dark)); }
.nano-border--dark-120 { border-color: color-mix(in srgb, var(--color-dark) 80%, var(--color-dark)); }
.nano-border--dark-130 { border-color: color-mix(in srgb, var(--color-dark) 70%, var(--color-dark)); }
.nano-border--dark-140 { border-color: color-mix(in srgb, var(--color-dark) 60%, var(--color-dark)); }
.nano-border--dark-150 { border-color: color-mix(in srgb, var(--color-dark) 50%, var(--color-dark)); }
.nano-border--dark-160 { border-color: color-mix(in srgb, var(--color-dark) 40%, var(--color-dark)); }
.nano-border--dark-170 { border-color: color-mix(in srgb, var(--color-dark) 30%, var(--color-dark)); }
.nano-border--dark-180 { border-color: color-mix(in srgb, var(--color-dark) 20%, var(--color-dark)); }
.nano-border--dark-190 { border-color: color-mix(in srgb, var(--color-dark) 10%, var(--color-dark)); }

/* Light */
.nano-border--light-10 { border-color: color-mix(in srgb, var(--color-light) 10%, var(--color-light)); }
.nano-border--light-20 { border-color: color-mix(in srgb, var(--color-light) 20%, var(--color-light)); }
.nano-border--light-30 { border-color: color-mix(in srgb, var(--color-light) 30%, var(--color-light)); }
.nano-border--light-40 { border-color: color-mix(in srgb, var(--color-light) 40%, var(--color-light)); }
.nano-border--light-50 { border-color: color-mix(in srgb, var(--color-light) 50%, var(--color-light)); }
.nano-border--light-60 { border-color: color-mix(in srgb, var(--color-light) 60%, var(--color-light)); }
.nano-border--light-70 { border-color: color-mix(in srgb, var(--color-light) 70%, var(--color-light)); }
.nano-border--light-80 { border-color: color-mix(in srgb, var(--color-light) 80%, var(--color-light)); }
.nano-border--light-90 { border-color: color-mix(in srgb, var(--color-light) 90%, var(--color-light)); }
.nano-border--light-110 { border-color: color-mix(in srgb, var(--color-light) 90%, var(--color-dark)); }
.nano-border--light-120 { border-color: color-mix(in srgb, var(--color-light) 80%, var(--color-dark)); }
.nano-border--light-130 { border-color: color-mix(in srgb, var(--color-light) 70%, var(--color-dark)); }
.nano-border--light-140 { border-color: color-mix(in srgb, var(--color-light) 60%, var(--color-dark)); }
.nano-border--light-150 { border-color: color-mix(in srgb, var(--color-light) 50%, var(--color-dark)); }
.nano-border--light-160 { border-color: color-mix(in srgb, var(--color-light) 40%, var(--color-dark)); }
.nano-border--light-170 { border-color: color-mix(in srgb, var(--color-light) 30%, var(--color-dark)); }
.nano-border--light-180 { border-color: color-mix(in srgb, var(--color-light) 20%, var(--color-dark)); }
.nano-border--light-190 { border-color: color-mix(in srgb, var(--color-light) 10%, var(--color-dark)); }

.nano-border--transparent { border-color: transparent; }

/* Shadow – prefix nano- */
.nano-shadow-none { box-shadow: none; }
.nano-shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.nano-shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.nano-shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.nano-shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

/* Transition – prefix nano- */
.nano-transition-none { transition-property: none; }
.nano-transition { transition-property: color, background-color, border-color, opacity, box-shadow; transition-timing-function: ease; transition-duration: 150ms; }
.nano-transition-all { transition-property: all; transition-timing-function: ease; transition-duration: 150ms; }
.nano-duration-75 { transition-duration: 75ms; }
.nano-duration-150 { transition-duration: 150ms; }
.nano-duration-300 { transition-duration: 300ms; }
.nano-duration-500 { transition-duration: 500ms; }

/* Override .nano-table tbody tr default transition when row has transition utility */
.nano-table tbody tr.nano-transition-none { transition-property: none; }
.nano-table tbody tr.nano-transition {
    transition-property: color, background-color, border-color, opacity, box-shadow;
    transition-timing-function: ease;
    transition-duration: 150ms;
}
.nano-table tbody tr.nano-transition-all {
    transition-property: all;
    transition-timing-function: ease;
    transition-duration: 150ms;
}
.nano-table tbody tr.nano-duration-75 { transition-duration: 75ms; }
.nano-table tbody tr.nano-duration-150 { transition-duration: 150ms; }
.nano-table tbody tr.nano-duration-300 { transition-duration: 300ms; }
.nano-table tbody tr.nano-duration-500 { transition-duration: 500ms; }