/* ══════════════════════════════════════════════════════════════
   §0 · GLOBAL DESIGN TOKENS  (--tk-*)
   ══════════════════════════════════════════════════════════════ */
:root {
  --tk-font-display : 'Lexend', sans-serif;
  --tk-font-body    : 'Lexend', sans-serif;
  --tk-font-mono    : 'Fira Code', 'Cascadia Code', monospace;

  /* ── Size Scale  0–10 ── */
  --tk-size-0  : 0;
  --tk-size-1  : 0.25rem;
  --tk-size-2  : 0.55rem;
  --tk-size-3  : 0.75rem;
  --tk-size-4  : 0.85rem;
  --tk-size-5  : 1rem;
  --tk-size-6  : 1.125rem;
  --tk-size-7  : 1.25rem;
  --tk-size-8  : 1.5rem;
  --tk-size-9  : 2rem;
  --tk-size-10 : 3rem;

  /* ── Border Radius ── */
  --tk-radius-xs  : 3px;
  --tk-radius-sm  : 5px;
  --tk-radius     : 8px;
  --tk-radius-md  : 11px;
  --tk-radius-lg  : 14px;
  --tk-radius-xl  : 20px;
  --tk-radius-full: 9999px;

  /* ── Spacing ── */
  --tk-space-xs : var(--tk-size-1);
  --tk-space-sm : var(--tk-size-2);
  --tk-space-md : var(--tk-size-5);
  --tk-space-lg : var(--tk-size-9);
  --tk-space-xl : 3rem;

  /* ── Transition ── */
  --tk-transition    : 160ms cubic-bezier(.4,0,.2,1);
  --tk-transition-md : 260ms cubic-bezier(.4,0,.2,1);
  --tk-transition-lg : 360ms cubic-bezier(.4,0,.2,1);

  /* ── Sidebar widths ── */
  --tk-sidebar-w          : 240px;
  --tk-sidebar-collapsed-w: 76px;
}

/* ══════════════════════════════════════════════════════════════
   §1 · THEME : LIGHT
   ══════════════════════════════════════════════════════════════ */
[data-tk-theme="tk-light"], .tk-light {

  /* PRIMARY */
  --tk-color-primary        : #4340D2;
  --tk-color-primary-hover  : #2e2c8f;
  --tk-color-primary-soft   : rgba(67,64,210,.12);
  --tk-color-primary-text   : #ffffff;

  /* SECONDARY */
  --tk-color-secondary      : #e31c65;
  --tk-color-secondary-hover: #9a1345;
  --tk-color-secondary-soft : rgba(227,28,101,.12);
  --tk-color-secondary-text : #ffffff;

  /* INFO */
  --tk-color-info           : #2196f3;
  --tk-color-info-hover     : #1666a5;
  --tk-color-info-soft      : rgba(33,150,243,.2);
  --tk-color-info-text      : #ffffff;

  /* SUCCESS */
  --tk-color-success        : #4caf50;
  --tk-color-success-hover  : #347736;
  --tk-color-success-soft   : rgba(76,175,80,.16);
  --tk-color-success-text   : #ffffff;

  /* WARNING */
  --tk-color-warning        : #ff9800;
  --tk-color-warning-hover  : #ad6700;
  --tk-color-warning-soft   : rgba(255,152,0,.2);
  --tk-color-warning-text   : #ffffff;

  /* DANGER */
  --tk-color-danger         : #e83b2f;
  --tk-color-danger-hover   : #a62e25;
  --tk-color-danger-soft    : rgba(244,67,54,.2);
  --tk-color-danger-text    : #ffffff;

  /* NEUTRAL */
  --tk-color-light          : #f5f5f5;
  --tk-color-light-hover    : #eeeeee;
  --tk-color-light-soft     : #fafafa;
  --tk-color-light-text     : #212121;

  --tk-color-dark           : #212121;
  --tk-color-dark-hover     : #000000;
  --tk-color-dark-soft      : #424242;
  --tk-color-dark-text      : #ffffff;

  /* SURFACE */
  --tk-color-surface        : #ffffff;
  --tk-color-surface-hover  : #fafafa;
  --tk-color-surface-raised : #ffffff;
  --tk-color-surface-inset  : #f5f5f5;

  /* BASE SCALE (rz-base) */
  --tk-color-base-100       : #fafafa;
  --tk-color-base-200       : #f5f5f5;
  --tk-color-base-300       : #e0e0e0;
  --tk-color-base-400       : #bdbdbd;

  /* TEXT */
  --tk-color-text           : #212121;
  --tk-color-text-muted     : #757575;
  --tk-color-text-subtle    : #9e9e9e;

  /* BORDER */
  --tk-color-border         : #e0e0e0;
  --tk-color-border-strong  : #bdbdbd;

  /* BACKGROUND */
  --tk-bg                   : #eeeeee;

  /* SHADOW */
  --tk-elevation-1          : 0 1px 2px rgba(0,0,0,.08);
  --tk-elevation-2          : 0 2px 8px rgba(0,0,0,.12);
  --tk-elevation-3          : 0 8px 24px rgba(0,0,0,.18);
  --tk-elevation-modal      : 0 24px 64px rgba(0,0,0,.25);

}

/* ══════════════════════════════════════════════════════════════
   §2 · THEME : DARK
   ══════════════════════════════════════════════════════════════ */
[data-tk-theme="tk-dark"], .tk-dark {

  --tk-color-primary        : #6966db;
  --tk-color-primary-hover  : #4340D2;
  --tk-color-primary-soft   : rgba(67,64,210,.25);
  --tk-color-primary-text   : #ffffff;

  --tk-color-secondary      : #e94984;
  --tk-color-secondary-hover: #e31c65;
  --tk-color-secondary-soft : rgba(227,28,101,.25);
  --tk-color-secondary-text : #ffffff;

  --tk-color-info           : #4dabf5;
  --tk-color-info-hover     : #2196f3;
  --tk-color-info-soft      : rgba(33,150,243,.3);
  --tk-color-info-text      : #ffffff;

  --tk-color-success        : #70bf73;
  --tk-color-success-hover  : #4caf50;
  --tk-color-success-soft   : rgba(76,175,80,.25);
  --tk-color-success-text   : #ffffff;

  --tk-color-warning        : #ffad33;
  --tk-color-warning-hover  : #ff9800;
  --tk-color-warning-soft   : rgba(255,152,0,.3);
  --tk-color-warning-text   : #111;

  --tk-color-danger         : #f6695e;
  --tk-color-danger-hover   : #f44336;
  --tk-color-danger-soft    : rgba(244,67,54,.3);
  --tk-color-danger-text    : #fff;

  /* DARK BASE */
  --tk-color-surface        : #212121;
  --tk-color-surface-hover  : #2c2c2c;
  --tk-color-surface-raised : #2a2a2a;
  --tk-color-surface-inset  : #1a1a1a;

  --tk-color-base-100       : #212121;
  --tk-color-base-200       : #1a1a1a;
  --tk-color-base-300       : #141414;
  --tk-color-base-400       : #0e0e0e;

  --tk-color-text           : #ffffff;
  --tk-color-text-muted     : #bdbdbd;
  --tk-color-text-subtle    : #9e9e9e;

  --tk-color-border         : #424242;
  --tk-color-border-strong  : #616161;

  --tk-bg                   : #121212;

  --tk-elevation-1          : 0 1px 3px rgba(0,0,0,.45);
  --tk-elevation-2          : 0 4px 12px rgba(0,0,0,.55);
  --tk-elevation-3          : 0 12px 30px rgba(0,0,0,.65);
  --tk-elevation-modal      : 0 30px 80px rgba(0,0,0,.75);
}

/* ══════════════════════════════════════════════════════════════
   §3 · RESET + BASE
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-family: var(--tk-font-body); font-size: 17px; -webkit-font-smoothing: antialiased; }
body  { background: var(--tk-color-base-200); color: var(--tk-color-text); min-height: 100vh;
        transition: background var(--tk-transition-md), color var(--tk-transition-md); }
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--tk-scrollbar-thumb); border-radius: 99px; }

/* ══════════════════════════════════════════════════════════════
   §4 · SHELL LAYOUT
   ══════════════════════════════════════════════════════════════ */
:root { --tk-footer-h: 36px; }
.tk-shell { display: flex; flex-direction: column; min-height: 100vh; }
.tk-body  { display: flex; flex: 1; }
.tk-main  { background: var(--tk-color-surface); }

/* ══════════════════════════════════════════════════════════════
   §5 · NAVBAR
   ══════════════════════════════════════════════════════════════ */
.tk-navbar {
  position: sticky; top: 0; z-index: 200;
  height: 60px;
  background: var(--tk-color-base-200);
  display: flex; align-items: center;
  padding: 0 var(--tk-size-5);
  gap: var(--tk-size-5);
  transition: background var(--tk-transition-md);
}
.tk-navbar-brand {
  font-family: var(--tk-font-display);
  font-size: var(--tk-size-6); font-weight: 700;
  color: var(--tk-color-chrome-text); text-decoration: none;
  letter-spacing: -.02em;
  display: flex; align-items: center; gap: var(--tk-size-2);
  white-space: nowrap;
}
.tk-navbar-brand mark {
  background: var(--tk-color-primary); color: #fff;
  padding: 1px 8px; border-radius: 5px; font-size: .84em;
}
.tk-navbar-links { display: flex; align-items: center; gap: 2px; }
.tk-navbar-link  {
  padding: 6px 12px; font-size: var(--tk-size-4); font-weight: 500;
  color: var(--tk-color-chrome-muted); text-decoration: none;
  border-radius: var(--tk-radius); cursor: pointer;
  transition: background var(--tk-transition), color var(--tk-transition);
}
.tk-navbar-link:hover  { background: var(--tk-color-chrome-hover); color: var(--tk-color-chrome-text); }
.tk-navbar-link.active { background: var(--tk-color-primary-soft); color: var(--tk-color-primary); }
.tk-navbar-actions     { margin-left: auto; display: flex; align-items: center; gap: var(--tk-size-2); }
.tk-navbar-divider     { width: 1px; height: 20px; background: var(--tk-color-chrome-border); margin: 0 4px; }

/* ══════════════════════════════════════════════════════════════
   §6 · SIDEBAR  — with collapse support
   ══════════════════════════════════════════════════════════════ */
.tk-sidebar {

  width: var(--tk-sidebar-w);
  min-height: calc(100vh - 60px);
  background: var(--tk-color-base-200);
  padding: 8px 6px;
  display: flex; flex-direction: column; gap: 2px;
  flex-shrink: 0;
  transition: width var(--tk-transition-lg), padding var(--tk-transition-lg),
              background var(--tk-transition-md);
  
    width: var(--tk-sidebar-w);

  position: sticky;   /* ⭐ QUAN TRỌNG */
  top: 60px;           /* chiều cao navbar */

  height: calc(100vh - 60px);
  overflow-y: auto;    /* sidebar tự scroll nếu dài */

  align-self: flex-start;
}

/* ── Collapsed state ── */
.tk-sidebar.collapsed {
  width: var(--tk-sidebar-collapsed-w);
  padding: 8px 4px;
}

/* Section label — hides when collapsed */
.tk-sidebar-section {
  padding: 10px 10px 4px;
  font-size: var(--tk-size-2); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tk-color-chrome-muted);
  opacity: .65; margin-top: var(--tk-size-2);
  white-space: nowrap;
  transition: opacity var(--tk-transition-md), max-height var(--tk-transition-md),
              padding var(--tk-transition-md);
  overflow: hidden; max-height: 40px;
}
.tk-sidebar.collapsed .tk-sidebar-section {
  opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 4px;
}

/* Item */
.tk-sidebar-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  margin-top: 10px;
  font-size: var(--tk-size-4); font-weight: 500;
  color: var(--tk-color-chrome-muted);
  border-radius: var(--tk-radius-xl); cursor: pointer;
  transition: background var(--tk-transition), color var(--tk-transition),
              padding var(--tk-transition-lg), justify-content var(--tk-transition-lg);
  text-decoration: none; user-select: none;
  white-space: nowrap; overflow: hidden;
}
.tk-sidebar-item:hover  { background: var(--tk-color-chrome-hover); color: var(--tk-color-chrome-text); }
.tk-sidebar-item.active { background: var(--tk-color-chrome-active); color: var(--tk-color-primary); font-weight: 600; }

/* Icon in sidebar item */
.tk-sidebar-item i.si {
  width: 16px; text-align: center;
  font-size: var(--tk-size-5);
  flex-shrink: 0;
  margin-left: 8px;
  transition: margin var(--tk-transition-lg);
}
.tk-sidebar-item.active i.si { opacity: 1; }

/* Label text */
.tk-sidebar-item .si-label {
  flex: 1; overflow: hidden;
  opacity: 1;
  transition: opacity var(--tk-transition-md), max-width var(--tk-transition-lg);
  max-width: 160px;
}
.tk-sidebar.collapsed .tk-sidebar-item {
  padding: 9px;
  justify-content: center;
  margin: 6px;
}
.tk-sidebar.collapsed .tk-sidebar-item .si-label {
  opacity: 0; max-width: 0;
}

/* Toggle button */
.tk-sidebar-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--tk-radius);
  background: transparent; border: 1.5px solid var(--tk-color-chrome-border);
  color: var(--tk-color-chrome-muted); cursor: pointer;
  transition: all var(--tk-transition);
  flex-shrink: 0;
}
.tk-sidebar-toggle:hover {
  background: var(--tk-color-chrome-hover);
  color: var(--tk-color-chrome-text);
  border-color: var(--tk-color-primary);
}
.tk-sidebar-toggle i { transition: transform var(--tk-transition-lg); font-size: 12px; }
.tk-sidebar.collapsed .tk-sidebar-toggle i { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════════
   §7 · MAIN
   ══════════════════════════════════════════════════════════════ */
.tk-main {
  flex: 1; min-width: 0;
  padding: var(--tk-space-lg) var(--tk-space-xl);
  background: var(--tk-color-surface);
  border-radius: var(--tk-radius-lg);
  margin-left: var(--tk-size-5);
    margin-right: var(--tk-size-5);
  transition: margin var(--tk-transition-lg);
}

/* ══════════════════════════════════════════════════════════════
   §8 · LAYOUT UTILITIES
   ══════════════════════════════════════════════════════════════ */
.tk-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--tk-space-lg); }
.tk-row         { display: flex; flex-wrap: wrap;   gap: var(--tk-space-md); align-items: flex-start; }
.tk-row-center  { align-items: center; }
.tk-row-end     { align-items: flex-end; }
.tk-row-between { justify-content: space-between; }
.tk-row-around  { justify-content: space-around; }
.tk-row-nowrap  { flex-wrap: nowrap; }
.tk-col         { display: flex; flex-direction: column; gap: var(--tk-space-md); }
.tk-stack       { display: flex; flex-direction: column; gap: var(--tk-size-2); }
.tk-stack-h     { display: flex; flex-direction: row; align-items: center; gap: var(--tk-size-2); }
.tk-stack-lg    { gap: var(--tk-space-lg); }
.tk-stack-sm    { gap: var(--tk-size-1); }
.tk-spacer      { flex: 1; }

/* ══════════════════════════════════════════════════════════════
   §9 · CARD (Surface)
   ══════════════════════════════════════════════════════════════ */
.tk-card {
  background: var(--tk-color-surface);
  border: 1px solid var(--tk-color-border);
  border-radius: var(--tk-radius-lg);
  padding: var(--tk-size-5);
  box-shadow: var(--tk-elevation-1);
  transition: box-shadow var(--tk-transition), background var(--tk-transition-md);
}
.tk-card-sm       { padding: var(--tk-size-2); }
.tk-card-lg       { padding: var(--tk-space-lg); }
.tk-card-elevated { box-shadow: var(--tk-elevation-2); }
.tk-card-flat     { box-shadow: none; }
.tk-card-hoverable:hover { box-shadow: var(--tk-elevation-2); border-color: var(--tk-color-border-strong); cursor: pointer; }

/* Card Value */
.tk-card-value {
  background: var(--tk-color-surface); border: 1px solid var(--tk-color-border);
  border-radius: var(--tk-radius-lg); padding: var(--tk-size-5);
  box-shadow: var(--tk-elevation-1);
}
.tk-card-value-label { font-size: var(--tk-size-3); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tk-color-text-muted); margin-bottom: var(--tk-size-2); display: flex; align-items: center; gap: 6px; }
.tk-card-value-val   { font-family: var(--tk-font-display); font-size: var(--tk-size-9); font-weight: 700; color: var(--tk-color-text); line-height: 1; margin-bottom: 6px; }
.tk-card-value-delta { font-size: var(--tk-size-3); font-weight: 500; padding: 2px 8px; border-radius: var(--tk-radius-full); display: inline-flex; align-items: center; gap: 4px; }
.tk-card-value-delta-up   { background: var(--tk-color-success-soft); color: var(--tk-color-success); }
.tk-card-value-delta-down { background: var(--tk-color-danger-soft);  color: var(--tk-color-danger); }

/* Divider */
.tk-divider { height: 1px; background: var(--tk-color-border); border: none; margin: var(--tk-space-md) 0; }
.tk-divider-label {
  display: flex; align-items: center; gap: var(--tk-size-2);
  font-size: var(--tk-size-3); color: var(--tk-color-text-muted);
  font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}
.tk-divider-label::before,
.tk-divider-label::after { content: ''; flex: 1; height: 1px; background: var(--tk-color-border); }

/* Section */
.tk-section-header   { margin-bottom: var(--tk-space-lg); }
.tk-section-title    { font-family: var(--tk-font-display); font-size: var(--tk-size-8); font-weight: 700; color: var(--tk-color-text); margin-bottom: 4px; }
.tk-section-subtitle { font-size: var(--tk-size-4); color: var(--tk-color-text-muted); }

/* ══════════════════════════════════════════════════════════════
   §10 · BUTTON  ·  3 Variants × 9 Colors
   ══════════════════════════════════════════════════════════════ */
.tk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 18px; font-family: var(--tk-font-display);
  font-size: var(--tk-size-4); font-weight: 600;
  border: 1.5px solid transparent; border-radius: var(--tk-radius-xl);
  cursor: pointer; user-select: none; text-decoration: none; white-space: nowrap;
  outline: none; line-height: 1.4;
  transition: background var(--tk-transition), color var(--tk-transition),
              border-color var(--tk-transition), box-shadow var(--tk-transition),
              transform 80ms ease;
}
.tk-btn:active   { transform: scale(.96); }
.tk-btn:disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }
.tk-btn:focus-visible { box-shadow: 0 0 0 3px var(--tk-color-primary-soft); }
.tk-btn i { font-size: .9em; }
.tk-btn-icon-only { padding: 8px; width: 36px; height: 36px; }
.tk-btn-xs    { padding: 3px 9px;   font-size: var(--tk-size-2); }
.tk-btn-sm    { padding: 5px 12px;  font-size: var(--tk-size-3); }
.tk-btn-lg    { padding: 11px 26px; font-size: var(--tk-size-5); }
.tk-btn-xl    { padding: 14px 32px; font-size: var(--tk-size-6); }
.tk-btn-block { width: 100%; justify-content: center; }
.tk-btn-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: tk-spin .65s linear infinite; flex-shrink: 0; }

/* §10a Filled */
.tk-btn-primary   { background:var(--tk-color-primary);   color:var(--tk-color-primary-text);   border-color:var(--tk-color-primary); }
.tk-btn-primary:hover { background:var(--tk-color-primary-hover); border-color:var(--tk-color-primary-hover); box-shadow:0 4px 14px rgba(25,118,210,.32); }
.tk-btn-secondary { background:var(--tk-color-secondary);  color:var(--tk-color-secondary-text); border-color:var(--tk-color-secondary); }
.tk-btn-secondary:hover { background:var(--tk-color-secondary-hover); }
.tk-btn-danger    { background:var(--tk-color-danger);    color:var(--tk-color-danger-text);    border-color:var(--tk-color-danger); }
.tk-btn-danger:hover { background:var(--tk-color-danger-hover); box-shadow:0 4px 14px rgba(211,47,47,.3); }
.tk-btn-success   { background:var(--tk-color-success);   color:var(--tk-color-success-text);   border-color:var(--tk-color-success); }
.tk-btn-success:hover { background:var(--tk-color-success-hover); box-shadow:0 4px 14px rgba(46,125,50,.28); }
.tk-btn-warning   { background:var(--tk-color-warning);   color:var(--tk-color-warning-text);   border-color:var(--tk-color-warning); }
.tk-btn-warning:hover { background:var(--tk-color-warning-hover); }
.tk-btn-info      { background:var(--tk-color-info);      color:var(--tk-color-info-text);      border-color:var(--tk-color-info); }
.tk-btn-info:hover { background:var(--tk-color-info-hover); }
.tk-btn-light     { background:var(--tk-color-light);     color:var(--tk-color-light-text);     border-color:var(--tk-color-border-strong); }
.tk-btn-light:hover { background:var(--tk-color-light-hover); }
.tk-btn-dark      { background:var(--tk-color-dark);      color:var(--tk-color-dark-text);      border-color:var(--tk-color-dark); }
.tk-btn-dark:hover { background:var(--tk-color-dark-hover); }
.tk-btn-aqua      { background:var(--tk-color-aqua);      color:var(--tk-color-aqua-text);      border-color:var(--tk-color-aqua); }
.tk-btn-aqua:hover { background:var(--tk-color-aqua-hover); box-shadow:0 4px 14px rgba(0,151,167,.28); }

/* §10b Outline */
.tk-btn-outline-primary   { background:transparent; color:var(--tk-color-primary);   border-color:var(--tk-color-primary); }
.tk-btn-outline-primary:hover { background:var(--tk-color-primary-soft); }
.tk-btn-outline-secondary { background:transparent; color:var(--tk-color-secondary); border-color:var(--tk-color-secondary); }
.tk-btn-outline-secondary:hover { background:var(--tk-color-secondary-soft); }
.tk-btn-outline-danger    { background:transparent; color:var(--tk-color-danger);    border-color:var(--tk-color-danger); }
.tk-btn-outline-danger:hover { background:var(--tk-color-danger-soft); }
.tk-btn-outline-success   { background:transparent; color:var(--tk-color-success);   border-color:var(--tk-color-success); }
.tk-btn-outline-success:hover { background:var(--tk-color-success-soft); }
.tk-btn-outline-warning   { background:transparent; color:var(--tk-color-warning);   border-color:var(--tk-color-warning); }
.tk-btn-outline-warning:hover { background:var(--tk-color-warning-soft); }
.tk-btn-outline-info      { background:transparent; color:var(--tk-color-info);      border-color:var(--tk-color-info); }
.tk-btn-outline-info:hover { background:var(--tk-color-info-soft); }
.tk-btn-outline-aqua      { background:transparent; color:var(--tk-color-aqua);      border-color:var(--tk-color-aqua); }
.tk-btn-outline-aqua:hover { background:var(--tk-color-aqua-soft); }

/* §10c Flat */
.tk-btn-flat-primary   { background:transparent; color:var(--tk-color-primary);   border-color:transparent; }
.tk-btn-flat-primary:hover { background:var(--tk-color-primary-soft); }
.tk-btn-flat-secondary { background:transparent; color:var(--tk-color-secondary); border-color:transparent; }
.tk-btn-flat-secondary:hover { background:var(--tk-color-secondary-soft); }
.tk-btn-flat-danger    { background:transparent; color:var(--tk-color-danger);    border-color:transparent; }
.tk-btn-flat-danger:hover { background:var(--tk-color-danger-soft); }
.tk-btn-flat-success   { background:transparent; color:var(--tk-color-success);   border-color:transparent; }
.tk-btn-flat-success:hover { background:var(--tk-color-success-soft); }
.tk-btn-flat-warning   { background:transparent; color:var(--tk-color-warning);   border-color:transparent; }
.tk-btn-flat-warning:hover { background:var(--tk-color-warning-soft); }
.tk-btn-flat-info      { background:transparent; color:var(--tk-color-info);      border-color:transparent; }
.tk-btn-flat-info:hover { background:var(--tk-color-info-soft); }
.tk-btn-flat-aqua      { background:transparent; color:var(--tk-color-aqua);      border-color:transparent; }
.tk-btn-flat-aqua:hover { background:var(--tk-color-aqua-soft); }
.tk-btn-flat-dark      { background:transparent; color:var(--tk-color-text);      border-color:transparent; }
.tk-btn-flat-dark:hover { background:var(--tk-color-surface-hover); }

/* ══════════════════════════════════════════════════════════════
   §11 · BADGE  ·  3 Variants × 9 Colors
   ══════════════════════════════════════════════════════════════ */
.tk-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; font-size: var(--tk-size-2); font-weight: 600;
  border-radius: var(--tk-radius-full); border: 1.5px solid transparent;
  letter-spacing: .04em; white-space: nowrap; line-height: 1.6;
}
.tk-badge i { font-size: .85em; }
.tk-badge-dot::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.tk-badge-sm { padding: 1px 6px;  font-size: var(--tk-size-1); }
.tk-badge-lg { padding: 4px 12px; font-size: var(--tk-size-3); }

/* Filled */
.tk-badge-primary   { background:var(--tk-color-primary);   color:var(--tk-color-primary-text);   border-color:var(--tk-color-primary); }
.tk-badge-secondary { background:var(--tk-color-secondary); color:var(--tk-color-secondary-text); border-color:var(--tk-color-secondary); }
.tk-badge-danger    { background:var(--tk-color-danger);    color:var(--tk-color-danger-text);    border-color:var(--tk-color-danger); }
.tk-badge-success   { background:var(--tk-color-success);   color:var(--tk-color-success-text);   border-color:var(--tk-color-success); }
.tk-badge-warning   { background:var(--tk-color-warning);   color:var(--tk-color-warning-text);   border-color:var(--tk-color-warning); }
.tk-badge-info      { background:var(--tk-color-info);      color:var(--tk-color-info-text);      border-color:var(--tk-color-info); }
.tk-badge-light     { background:var(--tk-color-light);     color:var(--tk-color-light-text);     border-color:var(--tk-color-border-strong); }
.tk-badge-dark      { background:var(--tk-color-dark);      color:var(--tk-color-dark-text);      border-color:var(--tk-color-dark); }
.tk-badge-aqua      { background:var(--tk-color-aqua);      color:var(--tk-color-aqua-text);      border-color:var(--tk-color-aqua); }

/* Outline */
.tk-badge-outline-primary   { background:transparent; color:var(--tk-color-primary);   border-color:var(--tk-color-primary); }
.tk-badge-outline-secondary { background:transparent; color:var(--tk-color-secondary); border-color:var(--tk-color-secondary); }
.tk-badge-outline-danger    { background:transparent; color:var(--tk-color-danger);    border-color:var(--tk-color-danger); }
.tk-badge-outline-success   { background:transparent; color:var(--tk-color-success);   border-color:var(--tk-color-success); }
.tk-badge-outline-warning   { background:transparent; color:var(--tk-color-warning);   border-color:var(--tk-color-warning); }
.tk-badge-outline-info      { background:transparent; color:var(--tk-color-info);      border-color:var(--tk-color-info); }
.tk-badge-outline-aqua      { background:transparent; color:var(--tk-color-aqua);      border-color:var(--tk-color-aqua); }

/* Flat */
.tk-badge-flat-primary   { background:var(--tk-color-primary-soft);   color:var(--tk-color-primary);   border-color:transparent; }
.tk-badge-flat-secondary { background:var(--tk-color-secondary-soft); color:var(--tk-color-secondary); border-color:transparent; }
.tk-badge-flat-danger    { background:var(--tk-color-danger-soft);    color:var(--tk-color-danger);    border-color:transparent; }
.tk-badge-flat-success   { background:var(--tk-color-success-soft);   color:var(--tk-color-success);   border-color:transparent; }
.tk-badge-flat-warning   { background:var(--tk-color-warning-soft);   color:var(--tk-color-warning);   border-color:transparent; }
.tk-badge-flat-info      { background:var(--tk-color-info-soft);      color:var(--tk-color-info);      border-color:transparent; }
.tk-badge-flat-light     { background:var(--tk-color-light-soft);     color:var(--tk-color-text-muted);border-color:transparent; }
.tk-badge-flat-dark      { background:var(--tk-color-dark-soft);      color:var(--tk-color-dark-text); border-color:transparent; }
.tk-badge-flat-aqua      { background:var(--tk-color-aqua-soft);      color:var(--tk-color-aqua);      border-color:transparent; }

/* ══════════════════════════════════════════════════════════════
   §12 · TEXT / TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */
.tk-text           { color: var(--tk-color-text); transition: color var(--tk-transition-md); }
.tk-text-display   { font-family:var(--tk-font-display); font-size:var(--tk-size-10); font-weight:800; line-height:1.05; letter-spacing:-.03em; }
.tk-text-h1        { font-family:var(--tk-font-display); font-size:clamp(1.75rem,4vw,2.25rem); font-weight:700; line-height:1.15; }
.tk-text-h2        { font-family:var(--tk-font-display); font-size:var(--tk-size-9); font-weight:700; line-height:1.2; }
.tk-text-h3        { font-family:var(--tk-font-display); font-size:var(--tk-size-8); font-weight:600; }
.tk-text-h4        { font-family:var(--tk-font-display); font-size:var(--tk-size-6); font-weight:600; }
.tk-text-body      { font-size:var(--tk-size-5); line-height:1.65; }
.tk-text-body-sm   { font-size:var(--tk-size-4); line-height:1.6; }
.tk-text-caption   { font-size:var(--tk-size-3); color:var(--tk-color-text-muted); }
.tk-text-mono      { font-family:var(--tk-font-mono); font-size:var(--tk-size-4); }
.tk-text-muted     { color:var(--tk-color-text-muted); }
.tk-text-subtle    { color:var(--tk-color-text-subtle); }
.tk-text-danger    { color:var(--tk-color-danger); }
.tk-text-success   { color:var(--tk-color-success); }
.tk-text-warning   { color:var(--tk-color-warning); }
.tk-text-primary   { color:var(--tk-color-primary); }
.tk-text-aqua      { color:var(--tk-color-aqua); }
.tk-text-truncate  { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════════
   §13 · FORM
   ══════════════════════════════════════════════════════════════ */
.tk-form       { display:flex; flex-direction:column; gap:var(--tk-space-md); }
.tk-form-item  { display:flex; flex-direction:column; gap:6px; }
.tk-form-label { font-size:var(--tk-size-4); font-weight:600; color:var(--tk-color-text); }
.tk-form-label .required { color:var(--tk-color-danger); margin-left:3px; }
.tk-form-hint  { font-size:var(--tk-size-3); color:var(--tk-color-text-muted); }

.tk-input, .tk-textarea, .tk-numeric, .tk-select {
  width:100%; background:var(--tk-color-surface); color:var(--tk-color-text);
  border:1.5px solid var(--tk-color-border-strong); border-radius:var(--tk-radius-xl);
  padding:8px 14px; font-size:var(--tk-size-5); font-family:var(--tk-font-body);
  transition:border-color var(--tk-transition), box-shadow var(--tk-transition), background var(--tk-transition-md);
  outline:none; appearance:none;
}
.tk-input::placeholder, .tk-textarea::placeholder { color:var(--tk-color-text-subtle); }
.tk-input:hover,.tk-textarea:hover,.tk-numeric:hover,.tk-select:hover { border-color:var(--tk-color-primary); }
.tk-input:focus,.tk-textarea:focus,.tk-numeric:focus,.tk-select:focus { border-color:var(--tk-color-primary); box-shadow:0 0 0 3px var(--tk-color-primary-soft); }
.tk-input-error { border-color:var(--tk-color-danger) !important; }
.tk-input-error:focus { box-shadow:0 0 0 3px var(--tk-color-danger-soft) !important; }
.tk-input-sm { padding:5px 10px; font-size:var(--tk-size-4); }
.tk-input-lg { padding:11px 17px; font-size:var(--tk-size-5); }
.tk-textarea  { resize:vertical; min-height:90px; }
.tk-numeric   { font-family:var(--tk-font-mono); }
.tk-select    { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:36px; }

/* Checkbox & Radio */
.tk-checkbox,.tk-radio { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; font-size:var(--tk-size-5); }
.tk-checkbox input[type="checkbox"],.tk-radio input[type="radio"] { appearance:none; width:17px; height:17px; border:1.5px solid var(--tk-color-border-strong); background:var(--tk-color-surface); cursor:pointer; transition:all var(--tk-transition); flex-shrink:0; display:grid; place-content:center; }
.tk-checkbox input[type="checkbox"] { border-radius:4px; }
.tk-radio    input[type="radio"]    { border-radius:50%; }
.tk-checkbox input::after { content:''; width:10px; height:10px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' d='M1.5 5L3.8 7.5 8.5 2.5'/%3E%3C/svg%3E") center/contain no-repeat; opacity:0; transform:scale(.5); transition:all var(--tk-transition); }
.tk-radio    input::after { content:''; width:8px; height:8px; border-radius:50%; background:#fff; opacity:0; transform:scale(0); transition:all var(--tk-transition); }
.tk-checkbox input:checked,.tk-radio input:checked { background:var(--tk-color-primary); border-color:var(--tk-color-primary); }
.tk-checkbox input:checked::after,.tk-radio input:checked::after { opacity:1; transform:scale(1); }

/* Switch */
.tk-switch        { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.tk-switch-track  { width:40px; height:22px; background:var(--tk-color-surface-inset); border-radius:var(--tk-radius-full); position:relative; transition:background var(--tk-transition); flex-shrink:0; border:1.5px solid var(--tk-color-border-strong); }
.tk-switch-thumb  { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--tk-color-text-muted); transition:transform var(--tk-transition), background var(--tk-transition); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.tk-switch input  { display:none; }
.tk-switch input:checked ~ .tk-switch-track { background:var(--tk-color-primary); border-color:var(--tk-color-primary); }
.tk-switch input:checked ~ .tk-switch-track .tk-switch-thumb { transform:translateX(18px); background:#fff; }
.tk-switch-label  { font-size:var(--tk-size-5); color:var(--tk-color-text); }

/* Compact switch — used in dense grids (Overview "Cô lập mạng" column). */
.tk-switch.tk-switch-sm                         { gap:4px; }
.tk-switch.tk-switch-sm .tk-switch-track        { width:28px; height:16px; border-width:1px; }
.tk-switch.tk-switch-sm .tk-switch-thumb        { width:10px; height:10px; top:2px; left:2px; }
.tk-switch.tk-switch-sm input:checked ~ .tk-switch-track .tk-switch-thumb { transform:translateX(12px); }

/* Validation */
.tk-validation         { font-size:var(--tk-size-3); display:flex; align-items:center; gap:5px; }
.tk-validation::before { content:'●'; font-size:8px; }
.tk-validation-error   { color:var(--tk-color-danger); }
.tk-validation-success { color:var(--tk-color-success); }
.tk-validation-warning { color:var(--tk-color-warning); }

/* ══════════════════════════════════════════════════════════════
   §14 · DATA DISPLAY
   ══════════════════════════════════════════════════════════════ */
/* Table */
.tk-table { width:100%; border-collapse:collapse; font-size:var(--tk-size-4); }
.tk-table thead tr { background:var(--tk-color-surface-hover); border-bottom:2px solid var(--tk-color-border); }
.tk-table th { padding:10px 14px; text-align:left; font-size:var(--tk-size-3); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--tk-color-text-muted); white-space:nowrap; }
.tk-table td { padding:11px 14px; color:var(--tk-color-text); border-bottom:1px solid var(--tk-color-border); transition:background var(--tk-transition); }
.tk-table tbody tr:hover td { background:var(--tk-color-surface-hover); }
.tk-table tbody tr:last-child td { border-bottom:none; }

/* Avatar */
.tk-avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--tk-color-primary-soft); color:var(--tk-color-primary); font-family:var(--tk-font-display); font-weight:700; overflow:hidden; flex-shrink:0; border:2px solid var(--tk-color-surface); }
.tk-avatar-xs { width:22px; height:22px; font-size:var(--tk-size-2); }
.tk-avatar-sm { width:28px; height:28px; font-size:var(--tk-size-3); }
.tk-avatar-md { width:36px; height:36px; font-size:var(--tk-size-4); }
.tk-avatar-lg { width:48px; height:48px; font-size:var(--tk-size-6); }
.tk-avatar-xl { width:64px; height:64px; font-size:var(--tk-size-8); }
.tk-avatar-group { display:flex; }
.tk-avatar-group .tk-avatar { margin-left:-8px; box-shadow:0 0 0 2px var(--tk-color-surface); }
.tk-avatar-group .tk-avatar:first-child { margin-left:0; }

/* Tag */
.tk-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; font-size:var(--tk-size-3); font-weight:500; border-radius:var(--tk-radius-sm); border:1px solid transparent; cursor:default; }
.tk-tag-default { background:var(--tk-color-surface-inset); color:var(--tk-color-text-muted);  border-color:var(--tk-color-border); }
.tk-tag-primary { background:var(--tk-color-primary-soft); color:var(--tk-color-primary); }
.tk-tag-success { background:var(--tk-color-success-soft); color:var(--tk-color-success); }
.tk-tag-danger  { background:var(--tk-color-danger-soft);  color:var(--tk-color-danger); }
.tk-tag-warning { background:var(--tk-color-warning-soft); color:var(--tk-color-warning); }
.tk-tag-aqua    { background:var(--tk-color-aqua-soft);    color:var(--tk-color-aqua); }
.tk-tag-close   { cursor:pointer; opacity:.6; margin-left:2px; font-size:var(--tk-size-2); line-height:1; }
.tk-tag-close:hover { opacity:1; }

/* List */
.tk-list      { display:flex; flex-direction:column; border:1px solid var(--tk-color-border); border-radius:var(--tk-radius-lg); overflow:hidden; background:var(--tk-color-surface); }
.tk-list-item { display:flex; align-items:center; gap:var(--tk-size-2); padding:12px var(--tk-space-md); border-bottom:1px solid var(--tk-color-border); transition:background var(--tk-transition); cursor:pointer; }
.tk-list-item:last-child { border-bottom:none; }
.tk-list-item:hover  { background:var(--tk-color-surface-hover); }
.tk-list-item.active { background:var(--tk-color-primary-soft); }

/* Timeline */
.tk-timeline       { display:flex; flex-direction:column; }
.tk-timeline-item  { display:flex; gap:var(--tk-space-md); position:relative; padding-bottom:var(--tk-size-5); }
.tk-timeline-item:last-child { padding-bottom:0; }
.tk-timeline-side  { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:32px; }
.tk-timeline-dot   { width:12px; height:12px; border-radius:50%; background:var(--tk-color-primary); border:2px solid var(--tk-color-surface); box-shadow:0 0 0 2px var(--tk-color-primary); margin-top:4px; flex-shrink:0; z-index:1; }
.tk-timeline-dot-success { background:var(--tk-color-success); box-shadow:0 0 0 2px var(--tk-color-success); }
.tk-timeline-dot-warning { background:var(--tk-color-warning); box-shadow:0 0 0 2px var(--tk-color-warning); }
.tk-timeline-dot-danger  { background:var(--tk-color-danger);  box-shadow:0 0 0 2px var(--tk-color-danger); }
.tk-timeline-dot-aqua    { background:var(--tk-color-aqua);    box-shadow:0 0 0 2px var(--tk-color-aqua); }
.tk-timeline-line  { width:1px; flex:1; background:var(--tk-color-border); margin-top:4px; }
.tk-timeline-item:last-child .tk-timeline-line { display:none; }
.tk-timeline-time  { font-size:var(--tk-size-3); color:var(--tk-color-text-subtle); margin-bottom:4px; }
.tk-timeline-title { font-family:var(--tk-font-display); font-size:var(--tk-size-5); font-weight:600; line-height:1.3; }
.tk-timeline-body  { font-size:var(--tk-size-4); color:var(--tk-color-text-muted); margin-top:2px; }

/* ══════════════════════════════════════════════════════════════
   §15 · NAVIGATION
   ══════════════════════════════════════════════════════════════ */
.tk-tabs { display:flex; border-bottom:2px solid var(--tk-color-border); }
.tk-tab  { padding:9px 18px; font-size:var(--tk-size-4); font-weight:600; color:var(--tk-color-text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color var(--tk-transition), border-color var(--tk-transition); user-select:none; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.tk-tab:hover { color:var(--tk-color-text); }
.tk-tab.active { color:var(--tk-color-primary); border-bottom-color:var(--tk-color-primary); }
.tk-tab-panel  { display:none; padding:var(--tk-space-md) 0; }
.tk-tab-panel.active { display:block; }

.tk-menu { background:var(--tk-color-surface); border:1px solid var(--tk-color-border); border-radius:var(--tk-radius-md); box-shadow:var(--tk-elevation-3); padding:4px; min-width:185px; display:flex; flex-direction:column; gap:1px; }
.tk-menu-item { display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:var(--tk-size-5); color:var(--tk-color-text); border-radius:6px; cursor:pointer; transition:background var(--tk-transition); }
.tk-menu-item:hover { background:var(--tk-color-surface-hover); }
.tk-menu-item i { width:16px; text-align:center; color:var(--tk-color-text-muted); font-size:var(--tk-size-4); }
.tk-menu-item-danger { color:var(--tk-color-danger); }
.tk-menu-item-danger:hover { background:var(--tk-color-danger-soft); }
.tk-menu-item-danger i { color:var(--tk-color-danger); }
.tk-menu-divider { height:1px; background:var(--tk-color-border); margin:3px 0; }

.tk-breadcrumb       { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:var(--tk-size-4); }
.tk-breadcrumb-item  { color:var(--tk-color-text-muted); cursor:pointer; transition:color var(--tk-transition); text-decoration:none; }
.tk-breadcrumb-item:hover { color:var(--tk-color-primary); }
.tk-breadcrumb-item.active { color:var(--tk-color-text); font-weight:500; cursor:default; pointer-events:none; }
.tk-breadcrumb-sep   { color:var(--tk-color-text-subtle); font-size:var(--tk-size-3); }

.tk-pagination { display:flex; align-items:center; gap:4px; }
.tk-page-btn   { min-width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:var(--tk-size-3); font-weight:500; border:1.5px solid var(--tk-color-border); border-radius:var(--tk-radius); background:var(--tk-color-surface); color:var(--tk-color-text-muted); cursor:pointer; transition:all var(--tk-transition); padding:0 8px; }
.tk-page-btn:hover { border-color:var(--tk-color-primary); color:var(--tk-color-primary); }
.tk-page-btn.active { background:var(--tk-color-primary); border-color:var(--tk-color-primary); color:#fff; }
.tk-page-btn:disabled { opacity:.4; cursor:default; pointer-events:none; }
.tk-page-ellipsis { padding:0 4px; color:var(--tk-color-text-subtle); }

/* ══════════════════════════════════════════════════════════════
   §16 · FEEDBACK
   ══════════════════════════════════════════════════════════════ */

/* ── Alert ── */
.tk-alert         { display:flex; gap:var(--tk-size-2); padding:var(--tk-space-md); border-radius:var(--tk-radius-md); border:1px solid transparent; align-items:flex-start; }
.tk-alert-info    { background:var(--tk-color-info-soft);    border-color:var(--tk-color-info); }
.tk-alert-success { background:var(--tk-color-success-soft); border-color:var(--tk-color-success); }
.tk-alert-warning { background:var(--tk-color-warning-soft); border-color:var(--tk-color-warning); }
.tk-alert-danger  { background:var(--tk-color-danger-soft);  border-color:var(--tk-color-danger); }
.tk-alert-aqua    { background:var(--tk-color-aqua-soft);    border-color:var(--tk-color-aqua); }
.tk-alert-icon    { font-size:var(--tk-size-6); flex-shrink:0; margin-top:1px; }
.tk-alert-title   { font-family:var(--tk-font-display); font-size:var(--tk-size-4); font-weight:600; color:var(--tk-color-text); margin-bottom:3px; }
.tk-alert-message { font-size:var(--tk-size-4); color:var(--tk-color-text-muted); }

/* ── Progress ── */
.tk-progress             { width:100%; }
.tk-progress-track       { height:8px; background:var(--tk-color-surface-inset); border-radius:var(--tk-radius-full); overflow:hidden; }
.tk-progress-fill        { height:100%; border-radius:var(--tk-radius-full); background:var(--tk-color-primary); transition:width .5s cubic-bezier(.4,0,.2,1); }
.tk-progress-fill-success{ background:var(--tk-color-success); }
.tk-progress-fill-warning{ background:var(--tk-color-warning); }
.tk-progress-fill-danger { background:var(--tk-color-danger); }
.tk-progress-fill-aqua   { background:var(--tk-color-aqua); }
.tk-progress-fill-striped{ background-image:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(255,255,255,.18) 8px,rgba(255,255,255,.18) 16px); animation:tk-stripes 1s linear infinite; }
.tk-progress-label       { display:flex; justify-content:space-between; font-size:var(--tk-size-3); color:var(--tk-color-text-muted); margin-bottom:5px; }
.tk-progress-sm .tk-progress-track { height:4px; }
.tk-progress-lg .tk-progress-track { height:12px; }

/* ── Skeleton ── */
.tk-skeleton        { background:linear-gradient(90deg,var(--tk-color-surface-inset) 25%,var(--tk-color-surface-hover) 50%,var(--tk-color-surface-inset) 75%); background-size:200% 100%; animation:tk-shimmer 1.5s infinite; border-radius:var(--tk-radius); }
.tk-skeleton-text   { height:14px; border-radius:4px; }
.tk-skeleton-title  { height:24px; border-radius:6px; }
.tk-skeleton-circle { border-radius:50%; }
.tk-skeleton-card   { height:120px; border-radius:var(--tk-radius-lg); }

/* ── Loading ── */
.tk-loading    { display:inline-flex; align-items:center; gap:10px; font-size:var(--tk-size-4); color:var(--tk-color-text-muted); }
.tk-spinner    { width:20px; height:20px; border:2.5px solid var(--tk-color-border-strong); border-top-color:var(--tk-color-primary); border-radius:50%; animation:tk-spin .7s linear infinite; }
.tk-spinner-sm { width:14px; height:14px; border-width:2px; }
.tk-spinner-lg { width:32px; height:32px; border-width:3px; }
.tk-spinner-aqua   { border-top-color:var(--tk-color-aqua); }
.tk-spinner-success{ border-top-color:var(--tk-color-success); }

/* ══════════════════════════════════════════════════════════════
   §17 · TOOLTIP SYSTEM
   ── CSS tooltip (data-tk-tooltip + data-tk-tip-pos) ──
   ── JS tooltip via TkTooltip.show/hide ──
   ══════════════════════════════════════════════════════════════ */

/* CSS-driven: add data-tk-tooltip="text" to any element */
/* ── DEFAULT DIRECTION: RIGHT ── */
[data-tk-tooltip] { position: relative; }
[data-tk-tooltip]::after {
  content: attr(data-tk-tooltip);
  position: absolute;
  /* DEFAULT = RIGHT */
  bottom: auto; left: calc(100% + 8px);
  top: 50%; transform: translateY(-50%);
  background: var(--tk-color-text);
  color: var(--tk-color-surface);
  font-family: var(--tk-font-body);
  font-size: var(--tk-size-3);
  padding: 5px 10px;
  border-radius: var(--tk-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  transition: opacity var(--tk-transition);
}
[data-tk-tooltip]::before {
  content: '';
  position: absolute;
  /* DEFAULT = RIGHT arrow */
  bottom: auto; left: calc(100% + 3px);
  top: 50%; transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: var(--tk-color-text);
  pointer-events: none; opacity: 0; z-index: 500;
  transition: opacity var(--tk-transition);
}
[data-tk-tooltip]:hover::after,
[data-tk-tooltip]:hover::before { opacity: 1; }

/* Position: top */
[data-tk-tooltip][data-tk-tip-pos="top"]::after {
  bottom: calc(100% + 8px); left: 50%;
  top: auto; transform: translateX(-50%);
}
[data-tk-tooltip][data-tk-tip-pos="top"]::before {
  bottom: calc(100% + 3px); left: 50%;
  top: auto; transform: translateX(-50%);
  border-right-color: transparent; border-top-color: var(--tk-color-text);
}
/* Position: right (explicit, same as default) */
[data-tk-tooltip][data-tk-tip-pos="right"]::after {
  bottom: auto; left: calc(100% + 8px);
  top: 50%; transform: translateY(-50%);
}
[data-tk-tooltip][data-tk-tip-pos="right"]::before {
  bottom: auto; left: calc(100% + 3px);
  top: 50%; transform: translateY(-50%);
  border-top-color: transparent; border-right-color: var(--tk-color-text);
}
/* Position: bottom */
[data-tk-tooltip][data-tk-tip-pos="bottom"]::after {
  bottom: auto; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
}
[data-tk-tooltip][data-tk-tip-pos="bottom"]::before {
  bottom: auto; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  border-right-color: transparent; border-bottom-color: var(--tk-color-text);
}
/* Position: left */
[data-tk-tooltip][data-tk-tip-pos="left"]::after {
  bottom: auto; right: calc(100% + 8px); left: auto;
  top: 50%; transform: translateY(-50%);
}
[data-tk-tooltip][data-tk-tip-pos="left"]::before {
  bottom: auto; right: calc(100% + 3px); left: auto;
  top: 50%; transform: translateY(-50%);
  border-right-color: transparent; border-left-color: var(--tk-color-text);
}

/* JS-driven tooltip bubble */
#tk-tooltip-bubble {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--tk-color-text); color: var(--tk-color-surface);
  font-family: var(--tk-font-body); font-size: var(--tk-size-3);
  padding: 6px 12px; border-radius: var(--tk-radius-sm);
  white-space: nowrap;
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--tk-transition), transform var(--tk-transition);
  box-shadow: var(--tk-elevation-2);
}
#tk-tooltip-bubble.visible { opacity: 1; transform: translateY(0); }

/* Old CSS tooltip (keep for backwards compat) */
.tk-tooltip { position:relative; display:inline-flex; }
.tk-tooltip-content { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--tk-color-text); color:var(--tk-color-surface); font-size:var(--tk-size-3); padding:5px 10px; border-radius:6px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity var(--tk-transition); z-index:200; }
.tk-tooltip-content::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--tk-color-text); }
.tk-tooltip:hover .tk-tooltip-content { opacity:1; }

/* ══════════════════════════════════════════════════════════════
   §18 · TOAST SYSTEM
   ══════════════════════════════════════════════════════════════ */
.tk-toast-container {
  position: fixed; z-index: 1100;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
/* Positions */
.tk-toast-container.top-right     { top:24px;    right:24px;  align-items:flex-end; }
.tk-toast-container.top-left      { top:24px;    left:24px;   align-items:flex-start; }
.tk-toast-container.top-center    { top:24px;    left:50%;    transform:translateX(-50%); align-items:center; }
.tk-toast-container.bottom-right  { bottom:24px; right:24px;  align-items:flex-end;   flex-direction:column-reverse; }
.tk-toast-container.bottom-left   { bottom:24px; left:24px;   align-items:flex-start; flex-direction:column-reverse; }
.tk-toast-container.bottom-center { bottom:24px; left:50%;    transform:translateX(-50%); align-items:center; flex-direction:column-reverse; }

.tk-toast {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--tk-color-surface);
  border: 1px solid var(--tk-color-border);
  border-radius: var(--tk-radius-md);
  box-shadow: var(--tk-elevation-3);
  min-width: 300px; max-width: 400px;
  pointer-events: all;
  animation: tk-toast-in .28s cubic-bezier(.4,0,.2,1) forwards;
  position: relative; overflow: hidden;
}
/* Color accent bar */
.tk-toast::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:2px 0 0 2px; }
.tk-toast-success::before { background:var(--tk-color-success); }
.tk-toast-danger::before  { background:var(--tk-color-danger); }
.tk-toast-warning::before { background:var(--tk-color-warning); }
.tk-toast-info::before    { background:var(--tk-color-primary); }
.tk-toast-aqua::before    { background:var(--tk-color-aqua); }

.tk-toast-icon-wrap {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 15px;
}
.tk-toast-success .tk-toast-icon-wrap { background:var(--tk-color-success-soft); color:var(--tk-color-success); }
.tk-toast-danger  .tk-toast-icon-wrap { background:var(--tk-color-danger-soft);  color:var(--tk-color-danger); }
.tk-toast-warning .tk-toast-icon-wrap { background:var(--tk-color-warning-soft); color:var(--tk-color-warning); }
.tk-toast-info    .tk-toast-icon-wrap { background:var(--tk-color-primary-soft); color:var(--tk-color-primary); }
.tk-toast-aqua    .tk-toast-icon-wrap { background:var(--tk-color-aqua-soft);    color:var(--tk-color-aqua); }

.tk-toast-body    { flex:1; min-width:0; }
.tk-toast-title   { font-family:var(--tk-font-display); font-size:var(--tk-size-4); font-weight:700; color:var(--tk-color-text); line-height:1.3; }
.tk-toast-message { font-size:var(--tk-size-3); color:var(--tk-color-text-muted); margin-top:3px; line-height:1.45; }
.tk-toast-actions { display:flex; gap:6px; margin-top:10px; }

/* Progress bar under toast */
.tk-toast-progress {
  position: absolute; left: 4px; bottom: 0; right: 0; height: 2px;
  background: var(--tk-color-border);
}
.tk-toast-progress-fill { height: 100%; width: 100%; transform-origin: left; }
.tk-toast-success .tk-toast-progress-fill { background:var(--tk-color-success); }
.tk-toast-danger  .tk-toast-progress-fill { background:var(--tk-color-danger); }
.tk-toast-warning .tk-toast-progress-fill { background:var(--tk-color-warning); }
.tk-toast-info    .tk-toast-progress-fill { background:var(--tk-color-primary); }
.tk-toast-aqua    .tk-toast-progress-fill { background:var(--tk-color-aqua); }

.tk-toast-close {
  background:none; border:none; color:var(--tk-color-text-subtle);
  cursor:pointer; font-size:12px; padding:2px; border-radius:4px;
  align-self:flex-start; transition:color var(--tk-transition), background var(--tk-transition);
  line-height:1;
}
.tk-toast-close:hover { color:var(--tk-color-text); background:var(--tk-color-surface-hover); }
.tk-toast.tk-toast-exit { animation: tk-toast-out .22s cubic-bezier(.4,0,.2,1) forwards; }

/* ══════════════════════════════════════════════════════════════
   §19 · DIALOG / OVERLAY / MODAL SYSTEM
   ══════════════════════════════════════════════════════════════ */

/* ── Overlay backdrop ── */
.tk-overlay {
  position: fixed; inset: 0;
  background: var(--tk-overlay);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--tk-transition-md);
  padding: 20px;
}
.tk-overlay.active { opacity: 1; pointer-events: all; }

/* ── Dialog (small, confirm-style) ── */
.tk-dialog {
  background: var(--tk-color-surface);
  border-radius: var(--tk-radius-xl);
  box-shadow: var(--tk-elevation-modal);
  width: 100%; max-width: 480px;
  border: 1px solid var(--tk-color-border);
  transform: translateY(24px) scale(.96);
  transition: transform var(--tk-transition-md);
  z-index: 1001; overflow: hidden;
}
.tk-overlay.active .tk-dialog { transform: translateY(0) scale(1); }

/* Dialog sizes */
.tk-dialog-sm { max-width: 360px; }
.tk-dialog-lg { max-width: 620px; }
.tk-dialog-xl { max-width: 820px; }

/* Dialog header */
.tk-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
}
.tk-dialog-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0; margin-right: 12px;
}
.tk-dialog-icon-success { background:var(--tk-color-success-soft); color:var(--tk-color-success); }
.tk-dialog-icon-danger  { background:var(--tk-color-danger-soft);  color:var(--tk-color-danger); }
.tk-dialog-icon-warning { background:var(--tk-color-warning-soft); color:var(--tk-color-warning); }
.tk-dialog-icon-info    { background:var(--tk-color-primary-soft); color:var(--tk-color-primary); }
.tk-dialog-icon-aqua    { background:var(--tk-color-aqua-soft);    color:var(--tk-color-aqua); }

.tk-dialog-title-wrap { flex:1; }
.tk-dialog-title      { font-family:var(--tk-font-display); font-size:var(--tk-size-7); font-weight:700; color:var(--tk-color-text); }
.tk-dialog-subtitle   { font-size:var(--tk-size-3); color:var(--tk-color-text-muted); margin-top:2px; }

.tk-dialog-close {
  width: 30px; height: 30px; border-radius: var(--tk-radius);
  background: none; border: none; color: var(--tk-color-text-muted);
  cursor: pointer; font-size: 16px; display:flex; align-items:center; justify-content:center;
  transition: background var(--tk-transition), color var(--tk-transition);
  flex-shrink: 0;
}
.tk-dialog-close:hover { background:var(--tk-color-surface-hover); color:var(--tk-color-text); }

/* Dialog body */
.tk-dialog-body {
  padding: 16px 24px;
  color: var(--tk-color-text-muted);
  font-size: var(--tk-size-5);
  line-height: 1.65;
  max-height: 60vh; overflow-y: auto;
}

/* Dialog footer */
.tk-dialog-footer {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 10px; padding: 16px 24px;
  border-top: 1px solid var(--tk-color-border);
  background: var(--tk-color-surface-inset);
}
.tk-dialog-footer-left { margin-right: auto; }

/* ── Modal (larger, scrollable) ── */
.tk-modal {
  background: var(--tk-color-surface);
  border-radius: var(--tk-radius-xl);
  box-shadow: var(--tk-elevation-modal);
  width: 100%; max-width: 700px; max-height: 88vh;
  overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--tk-color-border);
  transform: translateY(30px) scale(.96);
  transition: transform var(--tk-transition-md);
  z-index: 1001;
}
.tk-overlay.active .tk-modal { transform: translateY(0) scale(1); }
.tk-modal-sm { max-width: 520px; }
.tk-modal-lg { max-width: 900px; }
.tk-modal-header { padding:20px 24px; border-bottom:1px solid var(--tk-color-border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.tk-modal-title  { font-family:var(--tk-font-display); font-size:var(--tk-size-6); font-weight:700; }
.tk-modal-body   { padding:var(--tk-space-lg); overflow-y:auto; flex:1; }
.tk-modal-footer { padding:16px 24px; border-top:1px solid var(--tk-color-border); display:flex; gap:10px; justify-content:flex-end; flex-shrink:0; background:var(--tk-color-surface-inset); }

/* ── Confirm dialog special ── */
.tk-confirm-body { text-align: center; padding: 28px 32px 20px; }
.tk-confirm-icon { font-size: 3rem; margin-bottom: 16px; }
.tk-confirm-title { font-family:var(--tk-font-display); font-size:var(--tk-size-7); font-weight:700; color:var(--tk-color-text); margin-bottom:10px; }
.tk-confirm-message { font-size:var(--tk-size-5); color:var(--tk-color-text-muted); line-height:1.6; }
.tk-confirm-footer { display:flex; gap:10px; justify-content:center; padding:0 32px 24px; }

/* ══════════════════════════════════════════════════════════════
   §20 · DOCS PAGE HELPERS
   ══════════════════════════════════════════════════════════════ */
.docs-hero { background:var(--tk-color-surface); border-bottom:1px solid var(--tk-color-border); padding:var(--tk-space-xl); position:relative; overflow:hidden; }
.docs-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 80% 50%, var(--tk-color-primary-soft) 0%, transparent 65%); pointer-events:none; }
.docs-hero-eyebrow { font-size:var(--tk-size-3); letter-spacing:.12em; text-transform:uppercase; color:var(--tk-color-primary); margin-bottom:var(--tk-size-2); display:flex; align-items:center; gap:8px; }
.docs-hero-eyebrow::before { content:''; display:inline-block; width:24px; height:1.5px; background:var(--tk-color-primary); }
.docs-hero-title { font-family:var(--tk-font-display); font-size:clamp(2.4rem,5vw,3.8rem); font-weight:800; line-height:1.05; letter-spacing:-.03em; color:var(--tk-color-text); margin-bottom:var(--tk-space-md); }
.docs-hero-title span { color:var(--tk-color-primary); }
.docs-hero-sub  { font-size:var(--tk-size-6); color:var(--tk-color-text-muted); max-width:520px; line-height:1.65; margin-bottom:var(--tk-space-lg); }
.docs-hero-stats { display:flex; gap:var(--tk-space-lg); flex-wrap:wrap; }
.docs-stat-value { font-family:var(--tk-font-display); font-size:var(--tk-size-8); font-weight:800; color:var(--tk-color-text); }
.docs-stat-label { font-size:var(--tk-size-3); color:var(--tk-color-text-muted); }

.docs-section-bar  { display:flex; align-items:center; gap:var(--tk-space-md); margin:2.5rem 0 1.25rem; }
.docs-section-tag  { font-size:var(--tk-size-3); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--tk-color-primary); background:var(--tk-color-primary-soft); padding:3px 11px; border-radius:var(--tk-radius-full); white-space:nowrap; }
.docs-section-line { flex:1; height:1px; background:var(--tk-color-border); }
.docs-anchor       { scroll-margin-top:80px; }

.demo-box  { display:flex; align-items:center; justify-content:center; padding:var(--tk-space-md); background:var(--tk-color-surface-hover); border:1px dashed var(--tk-color-border); border-radius:var(--tk-radius-md); min-height:80px; }
.code-block { background:var(--tk-color-surface-inset); border:1px solid var(--tk-color-border); border-radius:var(--tk-radius-md); padding:var(--tk-space-md); font-family:var(--tk-font-mono); font-size:var(--tk-size-3); color:var(--tk-color-text); overflow-x:auto; margin:var(--tk-size-2) 0; line-height:1.7; }
.code-block .kw  { color:var(--tk-color-primary); }
.code-block .str { color:var(--tk-color-success); }
.code-block .cm  { color:var(--tk-color-text-subtle); font-style:italic; }
.code-block .val { color:var(--tk-color-warning); }

.tk-theme-toggle { background:transparent; border:1.5px solid var(--tk-color-chrome-border); border-radius:var(--tk-radius); width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--tk-transition); font-size:15px; }
.tk-theme-toggle:hover { border-color:var(--tk-color-primary); background:var(--tk-color-chrome-hover); }
.tk-table-wrap { overflow-x:auto; border:1px solid var(--tk-color-border); border-radius:var(--tk-radius-lg); background:var(--tk-color-surface); }
.swatch { width:52px; height:52px; border-radius:var(--tk-radius); border:1px solid var(--tk-color-border); display:inline-block; }
.swatch-grid { display:flex; gap:var(--tk-size-2); flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════════
   §21 · KEYFRAMES
   ══════════════════════════════════════════════════════════════ */
@keyframes tk-spin     { to { transform:rotate(360deg); } }
@keyframes tk-shimmer  { from { background-position:200% 0; } to { background-position:-200% 0; } }
@keyframes tk-stripes  { from { background-position:0 0; } to { background-position:32px 0; } }
@keyframes tk-toast-in  { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:translateX(0); } }
@keyframes tk-toast-out { from { opacity:1; transform:translateX(0); max-height:120px; margin-bottom:0; } to { opacity:0; transform:translateX(24px); max-height:0; padding:0; margin-bottom:-10px; } }

/* ══════════════════════════════════════════════════════════════
   §22 · RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .tk-main    { padding:var(--tk-space-lg) var(--tk-space-md); }
}
@media (max-width: 600px) {
  .tk-navbar-links { display:none; }
  .docs-hero-title { font-size:2rem; }
}

/* ══════════════════════════════════════════════════════════════
   TkUI v2.0 · CSS Additions
   Thêm vào index.css — các token còn thiếu
   ══════════════════════════════════════════════════════════════

   HƯỚNG DẪN: Paste các block dưới đây vào đúng vị trí trong
   index.css hiện có.
   ══════════════════════════════════════════════════════════════ */


/* ── 1. Thêm vào :root (§0 · GLOBAL DESIGN TOKENS) ── */
/*
   Màu Aqua là màu không thay đổi theo theme (base tone),
   light/dark override ở mỗi theme block nếu cần.
*/
:root {
  /* AQUA (base) */
  --tk-color-aqua       : #0097a7;
  --tk-color-aqua-hover : #00838f;
  --tk-color-aqua-soft  : rgba(0,151,167,.12);
  --tk-color-aqua-text  : #ffffff;
}


/* ── 2. Thêm vào [data-tk-theme="tk-light"] (§1) ── */
[data-tk-theme="tk-light"], .tk-light {

  /* Chrome — navbar + sidebar dùng token này */
  --tk-color-chrome-text   : #212121;
  --tk-color-chrome-muted  : #757575;
  --tk-color-chrome-hover  : rgba(0,0,0,.055);
  --tk-color-chrome-border : #e0e0e0;
  --tk-color-chrome-active : rgba(67,64,210,.08);

  /* Overlay backdrop */
  --tk-overlay             : rgba(0,0,0,.42);

  /* Scrollbar */
  --tk-scrollbar-thumb     : #bdbdbd;

  /* Aqua override cho light theme */
  --tk-color-aqua          : #0097a7;
  --tk-color-aqua-hover    : #00838f;
  --tk-color-aqua-soft     : rgba(0,151,167,.12);
  --tk-color-aqua-text     : #ffffff;
}


/* ── 3. Thêm vào [data-tk-theme="tk-dark"] (§2) ── */
[data-tk-theme="tk-dark"], .tk-dark {

  /* Chrome */
  --tk-color-chrome-text   : #ffffff;
  --tk-color-chrome-muted  : #9e9e9e;
  --tk-color-chrome-hover  : rgba(255,255,255,.07);
  --tk-color-chrome-border : #424242;
  --tk-color-chrome-active : rgba(105,102,219,.18);

  /* Overlay backdrop */
  --tk-overlay             : rgba(0,0,0,.65);

  /* Scrollbar */
  --tk-scrollbar-thumb     : #616161;

  /* Aqua override cho dark theme (sáng hơn một chút) */
  --tk-color-aqua          : #26c6da;
  --tk-color-aqua-hover    : #0097a7;
  --tk-color-aqua-soft     : rgba(38,198,218,.2);
  --tk-color-aqua-text     : #ffffff;
}
/* ══════════════════════════════════════════════════════════════
   §23 · NAVBAR ICON BUTTON  (tk-navbar-icon-btn)
   ══════════════════════════════════════════════════════════════ */
.tk-navbar-icon-btn {
  position: relative;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--tk-radius);
  background: transparent;
  border: none;
  color: var(--tk-color-chrome-muted);
  cursor: pointer;
  font-size: var(--tk-size-5);
  transition: background var(--tk-transition), color var(--tk-transition);
  outline: none;
}
.tk-navbar-icon-btn:hover {
  background: var(--tk-color-chrome-hover);
  color: var(--tk-color-chrome-text);
}
.tk-navbar-icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--tk-color-primary-soft);
}
/* Notification badge inside icon button */
.tk-nav-badge {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 16px; height: 16px;
  border-radius: var(--tk-radius-full);
  background: var(--tk-color-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
  line-height: 1;
  border: 1.5px solid var(--tk-color-base-200);
}

/* ══════════════════════════════════════════════════════════════
   §24 · SPLIT BUTTON  (tk-split-btn)
   ── Structure:
      <div class="tk-split-btn">
        <button class="tk-btn …">Main</button>
        <button class="tk-btn … tk-split-arrow" onclick="TkDropdown.toggle(this)">▾</button>
        <div class="tk-menu tk-split-btn-menu">...</div>
      </div>
   ══════════════════════════════════════════════════════════════ */
.tk-split-btn {
  display: inline-flex;
  position: relative;
  border-radius: var(--tk-radius-xl);
}
/* Arrow (chevron) button */
.tk-split-btn .tk-split-arrow {
  min-width: 0;
}
/* Dropdown panel */
.tk-split-btn-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--tk-transition-md), transform var(--tk-transition-md);
  z-index: 600;
}
.tk-split-btn.open .tk-split-btn-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
/* Chevron rotation when open */
.tk-split-btn.open .tk-split-arrow i {
  transform: rotate(180deg);
}
.tk-split-arrow i {
  transition: transform var(--tk-transition-md);
  font-size: .75em;
}

/* ══════════════════════════════════════════════════════════════
   §25 · PAGE HEADER  (auto breadcrumb + page title)
   ══════════════════════════════════════════════════════════════ */
.tk-page-header {
  padding: 20px 24px 0;
  margin-bottom: var(--tk-space-lg);
}
.tk-page-title {
  font-family: var(--tk-font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--tk-color-primary);
  line-height: 1.15;
  margin-bottom: 2px;
}
.tk-page-header .tk-breadcrumb {
  margin-top: 2px;
}
/* Primary-colored active crumb */
.tk-breadcrumb-item.active {
  color: var(--tk-color-text);
  font-weight: 500;
}
/* Clickable crumbs get primary color */
.tk-breadcrumb-item:not(.active):hover {
  color: var(--tk-color-primary);
}

/* ══════════════════════════════════════════════════════════════
   §26 · DEMO TAB PAGE wrapper
   ══════════════════════════════════════════════════════════════ */
.tk-demo-section {
  margin-bottom: var(--tk-space-lg);
}
.tk-demo-section:last-child {
  margin-bottom: 0;
}
.tk-demo-subtitle {
  font-size: var(--tk-size-3);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tk-color-text-muted);
  margin-bottom: var(--tk-size-2);
  display: flex; align-items: center; gap: 6px;
}
.tk-demo-subtitle::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--tk-color-border);
}
/* ── Monitor pane (server metrics) ────────────────────────── */
.mon-metric {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--tk-color-border-subtle, var(--tk-color-border));
}
.mon-metric:last-child { border-bottom: none; }
.mon-lbl {
  font-size: 11px;
  color: var(--tk-color-text-muted);
  font-weight: 500;
}
.mon-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--tk-color-text-base);
  text-align: right;
}
.mon-bar {
  grid-column: 1 / -1;
  height: 4px;
  background: var(--tk-color-surface-inset);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.mon-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tk-color-success), var(--tk-color-warning));
  transition: width .3s ease;
}
.mon-bar-fill.warn {
  background: linear-gradient(90deg, var(--tk-color-warning), var(--tk-color-danger));
}
.mon-bar-fill.crit {
  background: var(--tk-color-danger);
}

/* ══════════════════════════════════════════════════════════════
   §24 · FOOTER
   ══════════════════════════════════════════════════════════════ */
.tk-footer {
  height: var(--tk-footer-h);
  flex-shrink: 0;
  display: flex; align-items: center;
  padding: 0 var(--tk-size-5);
  gap: var(--tk-size-3);
  background: var(--tk-color-base-200);
  border-top: 1px solid var(--tk-color-border);
  font-size: 11px; color: var(--tk-color-text-muted);
  transition: background var(--tk-transition-md);
}
.tk-footer-brand {
  font-family: var(--tk-font-display);
  font-weight: 700; font-size: 12px;
  color: var(--tk-color-text);
}
.tk-footer-brand mark {
  background: var(--tk-color-primary); color: #fff;
  padding: 0px 5px; border-radius: 4px; font-size: .82em;
}
.tk-footer-sep { flex: 1; }
.tk-footer-copy { font-size: 11px; }

/* ══════════════════════════════════════════════════════════════
   §25 · RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet (768–1023px) ── */
@media (max-width: 1023px) {
  :root { --tk-sidebar-w: 200px; }
  .tk-navbar-link  { padding: 6px 9px; font-size: 12px; }
  .tk-main { padding: var(--tk-space-md) var(--tk-space-md); }
}

/* ── Mobile (≤ 767px) ── */
@media (max-width: 767px) {

  /* Sidebar: thu về icon-only */
  .tk-sidebar {
    width: var(--tk-sidebar-collapsed-w) !important;
    padding: 8px 4px !important;
  }
  .tk-sidebar .tk-sidebar-section {
    opacity: 0 !important; max-height: 0 !important;
    padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 2px !important;
  }
  .tk-sidebar .tk-sidebar-item {
    padding: 9px !important; justify-content: center !important; margin: 4px !important;
  }
  .tk-sidebar .tk-sidebar-item .si-label {
    opacity: 0 !important; max-width: 0 !important;
  }

  /* Navbar: ẩn text links, giữ brand + actions */
  .tk-navbar-links { display: none !important; }
  .tk-navbar       { padding: 0 10px; gap: 8px; }
  .tk-navbar-brand { font-size: 1rem; }

  /* Main content: sát hơn */
  .tk-main { margin-left: 2px; margin-right: 2px; border-radius: 0; }

  /* Modal: full-width */
  .pp-overlay { padding: 10px; align-items: flex-end; }
  .pp-modal {
    max-width: 100% !important;
    padding: 18px !important;
    border-radius: var(--tk-radius-lg) var(--tk-radius-lg) 0 0 !important;
    max-height: 85vh;
  }

  /* Button sizes on mobile */
  .tk-btn-xs { padding: 3px 8px; font-size: 11px; }
  .tk-btn-sm { padding: 5px 10px; }

  /* Scrollbar thinner on mobile */
  ::-webkit-scrollbar { width: 3px; height: 3px; }
}

/* NordVPN country picker (V6 — flag images + search) */
.nord-country-picker { position:relative; }
.nord-country-picker .ncp-trigger {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  border:1px solid var(--tk-color-border); border-radius:6px;
  cursor:pointer; background:var(--tk-color-surface);
  min-height:36px; box-sizing:border-box;
}
.nord-country-picker .ncp-trigger:hover { border-color:var(--tk-color-primary); }
.nord-country-picker .ncp-flag {
  width:24px; height:18px; border-radius:2px; object-fit:cover;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.nord-country-picker .ncp-label { flex:1; color:var(--tk-color-text); font-size:13px; }
.nord-country-picker .ncp-dropdown {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:var(--tk-color-surface); border:1px solid var(--tk-color-border);
  border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.12);
  max-height:340px; overflow:auto; z-index:1000;
}
.nord-country-picker .ncp-search {
  width:calc(100% - 16px); margin:8px; padding:6px 10px;
  border:1px solid var(--tk-color-border); border-radius:4px;
  background:var(--tk-color-surface); color:var(--tk-color-text);
  font-size:12px; box-sizing:border-box;
}
.nord-country-picker .ncp-list { padding:4px; }
.nord-country-picker .ncp-item {
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  cursor:pointer; border-radius:4px; font-size:13px;
}
.nord-country-picker .ncp-item:hover { background:var(--tk-color-surface-inset); }
.nord-country-picker .ncp-item img {
  width:24px; height:18px; border-radius:2px; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}