/* ============================================================================
   kythuat.work — design-system.css
   Bản 2.2.0 · 17/08/2026 · hướng nhận diện C (navy trên nền kem, cam dùng dè)
   Bản 2.2.0 hoà giải với D1, xem VENH.md. Chỉ THÊM .kt-badge--lobby;
   không sửa một token nào, không sửa một thành phần nào của bản 2.1.0.

   KIẾN TRÚC BA TẦNG
     Tầng 1, nguyên thuỷ  --kt-<ramp>-<step>      giá trị thô, không dùng trực tiếp
     Tầng 2, ngữ nghĩa    --kt-<nhóm>-<vai>       vai trò, đây là tầng để dùng
     Tầng 3, thành phần   --kt-<comp>-<thuộc tính> chỉ thành phần đó đọc

   Quy tắc: markup và màn hình CHỈ được đọc tầng 2 và tầng 3. Không màn nào
   đọc tầng 1, không màn nào gõ mã màu.

   Thang màu sinh trong OKLCH trên một trục sáng dùng chung, nên cùng một bậc
   của mọi thang có cùng sức nặng thị giác. Bậc neo (*) là màu thật trong logo.
   Tự chứa: không @import, không CDN, không thư viện ngoài.
   ==========================================================================*/

/* --- Phông ----------------------------------------------------------------
   Be Vietnam Pro, chở đủ dấu tiếng Việt kể cả dấu chồng. Đặt bốn tệp woff2
   vào /fonts/. Chưa có tệp thì rơi về phông hệ điều hành, không gọi mạng.  */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: local("Be Vietnam Pro Regular"), local("BeVietnamPro-Regular"), url("fonts/BeVietnamPro-Regular.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: local("Be Vietnam Pro Medium"), local("BeVietnamPro-Medium"), url("fonts/BeVietnamPro-Medium.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: local("Be Vietnam Pro SemiBold"), local("BeVietnamPro-SemiBold"), url("fonts/BeVietnamPro-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: local("Be Vietnam Pro Bold"), local("BeVietnamPro-Bold"), url("fonts/BeVietnamPro-Bold.woff2") format("woff2"); }

/* ==========================================================================
   TẦNG 1 — NGUYÊN THUỶ
   ==========================================================================*/
:root {
  /* brand, neo 900 = #001E52 */
  --kt-brand-50: #F7FAFF;  --kt-brand-100: #EAF2FF; --kt-brand-200: #D3E4FF; --kt-brand-300: #B7D1FB;
  --kt-brand-400: #95B7EE; --kt-brand-500: #7399D7; --kt-brand-600: #577CB8; --kt-brand-700: #3C5D93;
  --kt-brand-800: #27426D; --kt-brand-900: #001E52; --kt-brand-950: #0A1931;

  /* accent, neo 500 = #EF7C00 */
  --kt-accent-50: #FFF9F4;  --kt-accent-100: #FFEEE3; --kt-accent-200: #FFDBC3; --kt-accent-300: #FFC095;
  --kt-accent-400: #FE994E; --kt-accent-500: #EF7C00; --kt-accent-600: #BB6000; --kt-accent-700: #8F4700;
  --kt-accent-800: #673200; --kt-accent-900: #461F00; --kt-accent-950: #2C1100;

  /* cream, neo 200 = #F5E9C3; bậc 75 là nền trang của hướng C */
  --kt-cream-50: #FBFAF6;  --kt-cream-75: #FBF7EC;  --kt-cream-100: #F4F2E9; --kt-cream-200: #F5E9C3;
  --kt-cream-300: #D7CFB8; --kt-cream-400: #BFB696; --kt-cream-500: #A39874; --kt-cream-600: #867B59;
  --kt-cream-700: #675D3E; --kt-cream-800: #4A4229; --kt-cream-900: #312B18; --kt-cream-950: #1E190B;

  /* slate, neo 800 = #3F4A5E */
  --kt-slate-50: #F8FAFD;  --kt-slate-100: #EFF2F7; --kt-slate-200: #DDE3EE; --kt-slate-300: #C7D0DF;
  --kt-slate-400: #ABB6CB; --kt-slate-500: #8C99B0; --kt-slate-600: #707C92; --kt-slate-700: #535E72;
  --kt-slate-800: #3F4A5E; --kt-slate-900: #252B37; --kt-slate-950: #151A22;

  --kt-success-50: #F3FDF7;  --kt-success-100: #E5F7EB; --kt-success-200: #CAEDD7; --kt-success-300: #A8DEBD;
  --kt-success-400: #7FC99E; --kt-success-500: #54AD7D; --kt-success-600: #349061; --kt-success-700: #16794C;
  --kt-success-800: #00502F; --kt-success-900: #00351D; --kt-success-950: #002010;

  --kt-warning-50: #FFF9F3;  --kt-warning-100: #FFEEE0; --kt-warning-200: #FFDCBE; --kt-warning-300: #F8C496;
  --kt-warning-400: #EAA567; --kt-warning-500: #D18435; --kt-warning-600: #B4690E; --kt-warning-700: #884D00;
  --kt-warning-800: #623600; --kt-warning-900: #422200; --kt-warning-950: #291300;

  --kt-danger-50: #FFF8F7;  --kt-danger-100: #FFEDEA; --kt-danger-200: #FFD9D3; --kt-danger-300: #FFBCB3;
  --kt-danger-400: #FF9387; --kt-danger-500: #EE685D; --kt-danger-600: #CC4941; --kt-danger-700: #A42C27;
  --kt-danger-800: #90000A; --kt-danger-900: #550909; --kt-danger-950: #370202;

  --kt-info-50: #F6FBFF;  --kt-info-100: #E7F3FF; --kt-info-200: #CDE6FF; --kt-info-300: #ACD4FB;
  --kt-info-400: #86BBEE; --kt-info-500: #5F9ED7; --kt-info-600: #4281B8; --kt-info-700: #1E5F94;
  --kt-info-800: #14456D; --kt-info-900: #072D4B; --kt-info-950: #021B31;

  --kt-white: #FFFFFF;
  --kt-black: #000000;

  /* Nguyên thuỷ phi màu */
  --kt-unit: 4px;
  --kt-font-sans: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --kt-weight-regular: 400; --kt-weight-medium: 500; --kt-weight-semibold: 600; --kt-weight-bold: 700;
  --kt-tracking-tight: -0.011em; --kt-tracking-normal: 0em; --kt-tracking-wide: 0.02em; --kt-tracking-caps: 0.12em;
  --kt-leading-tight: 1.2; --kt-leading-snug: 1.35; --kt-leading-normal: 1.55; --kt-leading-loose: 1.7;
}

/* ==========================================================================
   TẦNG 2 — NGỮ NGHĨA, CHỦ ĐỀ SÁNG
   Số trong chú thích là tương phản đã đo theo WCAG 2.1.
   ==========================================================================*/
:root {
  color-scheme: light;

  /* Nền và bề mặt */
  --kt-bg-canvas: var(--kt-cream-75);
  --kt-bg-canvas-plain: var(--kt-white);
  --kt-bg-subtle: var(--kt-cream-100);
  --kt-bg-inverse: var(--kt-brand-900);
  --kt-surface: var(--kt-white);
  --kt-surface-sunken: var(--kt-cream-100);
  --kt-surface-accent: var(--kt-cream-200);
  --kt-surface-inverse: var(--kt-brand-900);
  --kt-surface-disabled: var(--kt-slate-100);
  --kt-surface-overlay: var(--kt-white);

  /* Chữ */
  --kt-text-primary: var(--kt-brand-900);      /* 15.38 trên nền trang */
  --kt-text-secondary: var(--kt-slate-800);    /*  8.55 */
  --kt-text-tertiary: var(--kt-slate-700);     /*  6.26 */
  --kt-text-disabled: var(--kt-slate-500);     /*  2.75, miễn ngưỡng theo WCAG 1.4.3 */
  --kt-text-placeholder: var(--kt-slate-700);  /*  6.26 */
  --kt-text-on-inverse: var(--kt-white);       /* 16.06 trên navy 900 */
  --kt-text-on-inverse-muted: var(--kt-brand-300); /* 8.02 trên navy 900 */
  --kt-text-on-accent: var(--kt-white);         /* 16.06 trên nền nút navy */
  --kt-text-link: var(--kt-brand-800);          /*  9.64 */
  --kt-text-link-hover: var(--kt-brand-900);    /* 15.00 */
  --kt-text-brand: var(--kt-brand-900);
  --kt-text-accent: var(--kt-accent-700);

  /* Viền */
  --kt-border-subtle: var(--kt-cream-300);
  --kt-border-default: var(--kt-slate-300);
  --kt-border-strong: var(--kt-brand-900);
  --kt-border-accent: var(--kt-accent-600);
  --kt-border-focus: var(--kt-accent-600);
  --kt-border-error: var(--kt-danger-800);

  /* Hành động. Nền nút chính là navy thương hiệu, chữ trắng đạt 16.06.
     Cam sáng 500 không bao giờ làm nền cho chữ: nó là màu chỉ báo, dùng cho vạch
     tiến trình, gạch tab đang chọn, đèn trạng thái, viền dòng đang chọn. */
  --kt-action-fill: var(--kt-brand-900);
  --kt-action-fill-hover: var(--kt-brand-800);
  --kt-action-fill-active: var(--kt-brand-950);
  --kt-action-indicator: var(--kt-accent-500);
  --kt-action-quiet-fg: var(--kt-brand-900);

  /* Ngữ nghĩa trạng thái: fill có chữ trắng, fg là chữ trên nền nhạt */
  --kt-success-fill: var(--kt-success-700); --kt-success-fg: var(--kt-success-800); --kt-success-bg: var(--kt-success-100); --kt-success-border: var(--kt-success-700);
  --kt-warning-fill: var(--kt-warning-600); --kt-warning-fg: var(--kt-warning-700); --kt-warning-bg: var(--kt-warning-100); --kt-warning-border: var(--kt-warning-600);
  --kt-danger-fill: var(--kt-danger-800);   --kt-danger-fg: var(--kt-danger-800);   --kt-danger-bg: var(--kt-danger-100);   --kt-danger-border: var(--kt-danger-800);
  --kt-info-fill: var(--kt-info-700);       --kt-info-fg: var(--kt-info-800);       --kt-info-bg: var(--kt-info-100);       --kt-info-border: var(--kt-info-700);
  --kt-neutral-fill: var(--kt-slate-800);   --kt-neutral-fg: var(--kt-slate-800);   --kt-neutral-bg: var(--kt-slate-100);   --kt-neutral-border: var(--kt-slate-400);

  /* Lớp trạng thái. Một mô hình duy nhất cho mọi thành phần bấm được:
     phủ mực lên bề mặt theo tỉ lệ, không đặt màu riêng cho từng nút. */
  --kt-state-ink: var(--kt-brand-900);
  --kt-state-hover: 8%;
  --kt-state-pressed: 14%;
  --kt-state-selected: 10%;
  --kt-state-disabled-opacity: 0.42;

  /* Lớp che, ánh sáng chạy trên khung xương */
  --kt-scrim: color-mix(in srgb, var(--kt-brand-950) 62%, transparent);
  --kt-sheen: color-mix(in srgb, var(--kt-white) 72%, transparent);

  /* Đổ bóng, pha theo mực nền nên không xám bẩn */
  --kt-shadow-xs: 0 1px 0 color-mix(in srgb, var(--kt-brand-950) 10%, transparent);
  --kt-shadow-sm: 0 1px 2px color-mix(in srgb, var(--kt-brand-950) 12%, transparent);
  --kt-shadow-md: 0 4px 14px color-mix(in srgb, var(--kt-brand-950) 14%, transparent);
  --kt-shadow-lg: 0 12px 32px color-mix(in srgb, var(--kt-brand-950) 20%, transparent);
  --kt-shadow-sheet: 0 -8px 28px color-mix(in srgb, var(--kt-brand-950) 20%, transparent);
}

/* ==========================================================================
   TẦNG 2 — CHỮ, KHOẢNG CÁCH, HÌNH HỌC, CHUYỂN ĐỘNG, TẦNG LỚP
   ==========================================================================*/
:root {
  /* Vai chữ. Mỗi vai gói đủ cỡ, độ cao dòng, cân nặng, giãn chữ. */
  --kt-type-display-size: 34px;   --kt-type-display-leading: var(--kt-leading-tight); --kt-type-display-weight: var(--kt-weight-bold);     --kt-type-display-tracking: var(--kt-tracking-tight);
  --kt-type-headline-size: 26px;  --kt-type-headline-leading: var(--kt-leading-tight); --kt-type-headline-weight: var(--kt-weight-bold);   --kt-type-headline-tracking: var(--kt-tracking-tight);
  --kt-type-title-size: 20px;     --kt-type-title-leading: var(--kt-leading-tight);   --kt-type-title-weight: var(--kt-weight-bold);      --kt-type-title-tracking: var(--kt-tracking-normal);
  --kt-type-subtitle-size: 17px;  --kt-type-subtitle-leading: var(--kt-leading-snug); --kt-type-subtitle-weight: var(--kt-weight-semibold); --kt-type-subtitle-tracking: var(--kt-tracking-normal);
  --kt-type-body-size: 15px;      --kt-type-body-leading: var(--kt-leading-normal);   --kt-type-body-weight: var(--kt-weight-regular);    --kt-type-body-tracking: var(--kt-tracking-normal);
  --kt-type-label-size: 13px;     --kt-type-label-leading: var(--kt-leading-snug);    --kt-type-label-weight: var(--kt-weight-medium);    --kt-type-label-tracking: var(--kt-tracking-normal);
  --kt-type-caption-size: 12px;   --kt-type-caption-leading: var(--kt-leading-snug);  --kt-type-caption-weight: var(--kt-weight-regular); --kt-type-caption-tracking: var(--kt-tracking-normal);
  --kt-type-overline-size: 11px;  --kt-type-overline-leading: var(--kt-leading-snug); --kt-type-overline-weight: var(--kt-weight-bold);   --kt-type-overline-tracking: var(--kt-tracking-caps);

  /* Khoảng cách, bội của --kt-unit */
  --kt-space-0: 0px;  --kt-space-1: 4px;  --kt-space-2: 8px;  --kt-space-3: 12px; --kt-space-4: 16px;
  --kt-space-5: 20px; --kt-space-6: 24px; --kt-space-7: 28px; --kt-space-8: 32px; --kt-space-10: 40px;
  --kt-space-12: 48px; --kt-space-16: 64px; --kt-space-20: 80px;

  /* Hình học */
  --kt-radius-none: 0px; --kt-radius-sm: 0px; --kt-radius-md: 0px; --kt-radius-lg: 0px; --kt-radius-full: 999px;
  --kt-border-w-hair: 1px; --kt-border-w: 2px; --kt-border-w-thick: 3px;
  --kt-focus-ring-w: 3px; --kt-focus-ring-offset: 2px;

  /* Tầng lớp */
  --kt-z-base: 0; --kt-z-sticky: 100; --kt-z-nav: 200; --kt-z-scrim: 300; --kt-z-drawer: 400;
  --kt-z-sheet: 500; --kt-z-dialog: 600; --kt-z-popover: 700; --kt-z-toast: 800; --kt-z-tooltip: 900;

  /* Chuyển động */
  --kt-dur-instant: 80ms; --kt-dur-fast: 120ms; --kt-dur-normal: 180ms; --kt-dur-slow: 240ms; --kt-dur-slower: 320ms;
  --kt-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --kt-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --kt-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --kt-transition-color: color var(--kt-dur-fast) var(--kt-ease-standard), background-color var(--kt-dur-fast) var(--kt-ease-standard), border-color var(--kt-dur-fast) var(--kt-ease-standard);

  /* Mốc màn hình và bề rộng vùng đọc */
  --kt-bp-sm: 390px; --kt-bp-md: 768px; --kt-bp-lg: 1024px; --kt-bp-xl: 1440px;
  --kt-measure: 68ch;
}

/* ==========================================================================
   TẦNG 3 — TOKEN THÀNH PHẦN THEO MẬT ĐỘ
   Ba hồ sơ mật độ. Chỉ đổi kích thước, không đổi màu thương hiệu.
     touch       cửa thợ, một tay, ngoài nắng, tay bẩn
     comfortable cửa khách, thoáng và trấn an
     compact     buồng lái, nén và quét nhanh
   .kt-mode-* là bút danh cũ, giữ lại để mã đang chạy không vỡ.
   ==========================================================================*/
:root, [data-kt-density="comfortable"], .kt-mode-khach {
  --kt-control-h: 48px; --kt-control-h-sm: 40px; --kt-control-h-lg: 56px;
  --kt-control-px: var(--kt-space-4);
  --kt-tap-min: 48px;
  --kt-gap: var(--kt-space-4);
  --kt-pad: var(--kt-space-4);
  --kt-pad-tight: var(--kt-space-3);
  --kt-font-ui: var(--kt-type-body-size);
  --kt-font-ui-strong: var(--kt-type-subtitle-size);
  --kt-row-h: 52px;
  --kt-icon-size: 20px;
  --kt-choice-size: 24px;
  --kt-choice-gap: var(--kt-space-3);
  --kt-switch-w: 52px; --kt-switch-h: 28px;
}
[data-kt-density="touch"], .kt-mode-ktv {
  --kt-control-h: 56px; --kt-control-h-sm: 48px; --kt-control-h-lg: 64px;
  --kt-control-px: var(--kt-space-5);
  --kt-tap-min: 56px;
  --kt-gap: var(--kt-space-5);
  --kt-pad: var(--kt-space-5);
  --kt-pad-tight: var(--kt-space-4);
  --kt-font-ui: var(--kt-type-subtitle-size);
  --kt-font-ui-strong: var(--kt-type-title-size);
  --kt-row-h: 64px;
  --kt-icon-size: 24px;
  --kt-choice-size: 28px;
  --kt-choice-gap: var(--kt-space-4);
  --kt-switch-w: 60px; --kt-switch-h: 32px;
}
[data-kt-density="compact"], .kt-mode-admin {
  --kt-control-h: 32px; --kt-control-h-sm: 28px; --kt-control-h-lg: 40px;
  --kt-control-px: var(--kt-space-3);
  --kt-tap-min: 32px;
  --kt-gap: var(--kt-space-3);
  --kt-pad: var(--kt-space-3);
  --kt-pad-tight: var(--kt-space-2);
  --kt-font-ui: 14px;
  --kt-font-ui-strong: var(--kt-type-body-size);
  --kt-row-h: 38px;
  --kt-icon-size: 18px;
  --kt-choice-size: 18px;
  --kt-choice-gap: var(--kt-space-2);
  --kt-switch-w: 40px; --kt-switch-h: 22px;
}
/* Cửa thợ và buồng lái dùng nền trắng để tương phản tối đa. */
.kt-mode-ktv { --kt-bg-canvas: var(--kt-bg-canvas-plain); }
.kt-mode-admin { --kt-bg-canvas: var(--kt-bg-canvas-plain); }

/* ==========================================================================
   NỀN CHUNG
   ==========================================================================*/
.kt-app {
  margin: 0;
  font-family: var(--kt-font-sans);
  font-size: var(--kt-type-body-size);
  line-height: var(--kt-type-body-leading);
  color: var(--kt-text-primary);
  background: var(--kt-bg-canvas);
  -webkit-text-size-adjust: 100%;
  text-wrap: pretty;
  font-variant-numeric: proportional-nums;
}
.kt-app *, .kt-app *::before, .kt-app *::after { box-sizing: border-box; }
.kt-app h1, .kt-app h2, .kt-app h3, .kt-app h4 { margin: 0; font-weight: var(--kt-weight-bold); line-height: var(--kt-leading-tight); letter-spacing: var(--kt-tracking-tight); }
.kt-app h1 { font-size: var(--kt-type-headline-size); }
.kt-app h2 { font-size: var(--kt-type-title-size); }
.kt-app h3 { font-size: var(--kt-type-subtitle-size); }
.kt-app p { margin: 0; max-width: var(--kt-measure); }
.kt-app a, .kt-link { color: var(--kt-text-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.kt-app a:hover, .kt-link:hover { color: var(--kt-text-link-hover); text-decoration-thickness: 2px; }
.kt-app ::selection { background: var(--kt-accent-200); color: var(--kt-brand-900); }
.kt-app :focus-visible { outline: var(--kt-focus-ring-w) solid var(--kt-border-focus); outline-offset: var(--kt-focus-ring-offset); }
.kt-app [hidden] { display: none !important; }

/* Vai chữ dùng được như lớp tiện ích. Đặt trong .kt-app để thắng kiểu thẻ mặc định. */
.kt-app .kt-display  { font-size: var(--kt-type-display-size);  line-height: var(--kt-type-display-leading);  font-weight: var(--kt-type-display-weight);  letter-spacing: var(--kt-type-display-tracking); }
.kt-app .kt-headline { font-size: var(--kt-type-headline-size); line-height: var(--kt-type-headline-leading); font-weight: var(--kt-type-headline-weight); letter-spacing: var(--kt-type-headline-tracking); }
.kt-app .kt-title    { font-size: var(--kt-type-title-size);    line-height: var(--kt-type-title-leading);    font-weight: var(--kt-type-title-weight); }
.kt-app .kt-subtitle { font-size: var(--kt-type-subtitle-size); line-height: var(--kt-type-subtitle-leading); font-weight: var(--kt-type-subtitle-weight); }
.kt-app .kt-body     { font-size: var(--kt-type-body-size);     line-height: var(--kt-type-body-leading); }
.kt-app .kt-label-text { font-size: var(--kt-type-label-size);  line-height: var(--kt-type-label-leading);  font-weight: var(--kt-type-label-weight); color: var(--kt-text-secondary); }
.kt-app .kt-caption  { font-size: var(--kt-type-caption-size);  line-height: var(--kt-type-caption-leading); color: var(--kt-text-tertiary); }
.kt-app .kt-eyebrow, .kt-app .kt-overline { font-size: var(--kt-type-overline-size); line-height: var(--kt-type-overline-leading); font-weight: var(--kt-type-overline-weight); letter-spacing: var(--kt-type-overline-tracking); text-transform: uppercase; color: var(--kt-text-tertiary); }

/* Bố cục cơ bản */
.kt-stack { display: flex; flex-direction: column; gap: var(--kt-gap); }
.kt-row { display: flex; align-items: center; gap: var(--kt-space-2); }
.kt-between { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-space-2); }
.kt-rule { height: 0; border: 0; border-top: var(--kt-border-w) solid var(--kt-border-strong); margin: 0; }
.kt-divider { height: 0; border: 0; border-top: var(--kt-border-w-hair) solid var(--kt-border-subtle); margin: 0; }
.kt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kt-skiplink { position: absolute; left: -9999px; top: 0; z-index: var(--kt-z-tooltip); background: var(--kt-surface-inverse); color: var(--kt-text-on-inverse); padding: var(--kt-space-3) var(--kt-space-4); font-weight: var(--kt-weight-bold); }
.kt-skiplink:focus { left: var(--kt-space-2); top: var(--kt-space-2); }

/* Biểu tượng, sprite icons.svg trong repo */
.kt-icon { width: var(--kt-icon-size); height: var(--kt-icon-size); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kt-icon--sm { width: 16px; height: 16px; }
.kt-icon--lg { width: 28px; height: 28px; }
.kt-icon--xl { width: 36px; height: 36px; }
.kt-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; background: var(--kt-surface-accent); color: var(--kt-brand-900); border: var(--kt-border-w) solid var(--kt-border-strong); }
.kt-spin { animation: kt-spin 900ms linear infinite; }
@keyframes kt-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   HÀNH ĐỘNG — nút, nhóm nút, nút biểu tượng
   Nút luôn: nền đầy hoặc viền 2px mực, nhãn 700, kèm biểu tượng, không có
   nhãn nổi phía trên. Ô nhập luôn: nền lõm, gạch chân dày, có nhãn phía trên.
   Hai họ này không được nhìn giống nhau. Xem mục Ô NHẬP.
   ==========================================================================*/
.kt-btn {
  --kt-btn-h: var(--kt-control-h);
  position: relative;
  display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--kt-space-2);
  min-height: var(--kt-btn-h); min-width: var(--kt-btn-h);
  padding: var(--kt-space-2) var(--kt-control-px);
  font: inherit; font-size: var(--kt-font-ui); font-weight: var(--kt-weight-bold); letter-spacing: var(--kt-tracking-wide);
  text-align: left; text-decoration: none; white-space: normal; text-wrap: balance;
  border: var(--kt-border-w) solid transparent; border-radius: var(--kt-radius-md);
  cursor: pointer; transition: var(--kt-transition-color);
  isolation: isolate;
}
/* Lớp trạng thái dùng chung, một cơ chế cho mọi biến thể */
.kt-btn::after { content: ""; position: absolute; inset: 0; background: var(--kt-state-ink); opacity: 0; transition: opacity var(--kt-dur-fast) var(--kt-ease-standard); z-index: -1; }
.kt-btn:hover::after { opacity: calc(var(--kt-state-hover) / 100%); }
.kt-btn:active::after { opacity: calc(var(--kt-state-pressed) / 100%); }
.kt-btn--primary { background: var(--kt-action-fill); color: var(--kt-text-on-accent); border-color: var(--kt-action-fill); --kt-state-ink: var(--kt-black); }
.kt-btn--secondary { background: var(--kt-surface); color: var(--kt-action-quiet-fg); border-color: var(--kt-border-strong); }
.kt-btn--ghost { background: transparent; color: var(--kt-action-quiet-fg); border-color: transparent; }
.kt-btn--danger { background: var(--kt-danger-fill); color: var(--kt-white); border-color: var(--kt-danger-fill); --kt-state-ink: var(--kt-black); }
.kt-btn--inverse { background: var(--kt-surface-inverse); color: var(--kt-text-on-inverse); border-color: var(--kt-surface-inverse); --kt-state-ink: var(--kt-white); }
.kt-btn--sm { --kt-btn-h: var(--kt-control-h-sm); font-size: var(--kt-type-label-size); padding: 0 var(--kt-space-3); }
.kt-btn--lg { --kt-btn-h: var(--kt-control-h-lg); font-size: var(--kt-font-ui-strong); }
.kt-btn--block { display: flex; width: 100%; }
.kt-btn--icon { padding: 0; justify-content: center; }
.kt-btn--center { justify-content: center; text-align: center; }
.kt-btn[disabled], .kt-btn[aria-disabled="true"] { opacity: var(--kt-state-disabled-opacity); cursor: not-allowed; }
.kt-btn[disabled]::after, .kt-btn[aria-disabled="true"]::after { display: none; }
.kt-btn.is-loading { color: transparent; pointer-events: none; }
.kt-btn.is-loading::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
  border-radius: var(--kt-radius-full);
  border: var(--kt-border-w) solid var(--kt-text-on-accent); border-top-color: transparent;
  animation: kt-spin 700ms linear infinite;
}
.kt-btn--secondary.is-loading::before, .kt-btn--ghost.is-loading::before { border-color: var(--kt-action-quiet-fg); border-top-color: transparent; }
.kt-btn__trailing { margin-left: auto; }

.kt-btn-group { display: inline-flex; }
.kt-btn-group > .kt-btn { border-radius: 0; margin-left: calc(var(--kt-border-w) * -1); }
.kt-btn-group > .kt-btn:first-child { margin-left: 0; }
.kt-btn-group > .kt-btn:focus-visible { z-index: 1; }

/* Gợi ý bàn phím */
.kt-kbd { font-family: ui-monospace, monospace; font-size: var(--kt-type-caption-size); padding: 1px var(--kt-space-1); border: var(--kt-border-w-hair) solid var(--kt-border-default); background: var(--kt-surface-sunken); color: var(--kt-text-secondary); }

/* ==========================================================================
   Ô NHẬP VÀ LỰA CHỌN
   Hình thức riêng: nền lõm, viền mảnh, gạch chân dày ba pixel. Không bao giờ
   trông giống nút.
   ==========================================================================*/
.kt-form { display: flex; flex-direction: column; gap: var(--kt-gap); }
.kt-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--kt-pad-tight); }
.kt-legend { padding: 0; font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-bold); letter-spacing: var(--kt-tracking-caps); text-transform: uppercase; color: var(--kt-text-tertiary); }
.kt-field { display: flex; flex-direction: column; gap: var(--kt-space-2); }
.kt-field > label { font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-semibold); color: var(--kt-text-secondary); }
.kt-required { color: var(--kt-danger-fg); }
.kt-input, .kt-select, .kt-textarea {
  font: inherit; font-size: var(--kt-font-ui); color: var(--kt-text-primary);
  min-height: var(--kt-control-h); width: 100%;
  padding: var(--kt-space-2) var(--kt-pad-tight);
  background: var(--kt-surface-sunken);
  border: var(--kt-border-w-hair) solid var(--kt-border-default);
  border-bottom: var(--kt-border-w-thick) solid var(--kt-slate-400);
  border-radius: var(--kt-radius-md);
  transition: var(--kt-transition-color);
}
.kt-textarea { min-height: calc(var(--kt-control-h) * 2); resize: vertical; }
.kt-input:hover, .kt-select:hover, .kt-textarea:hover { border-bottom-color: var(--kt-brand-700); }
.kt-input:focus, .kt-select:focus, .kt-textarea:focus { background: var(--kt-surface); border-bottom-color: var(--kt-brand-900); outline: none; }
.kt-input:focus-visible, .kt-select:focus-visible, .kt-textarea:focus-visible { outline: var(--kt-focus-ring-w) solid var(--kt-border-focus); outline-offset: var(--kt-focus-ring-offset); }
.kt-input::placeholder, .kt-textarea::placeholder { color: var(--kt-text-placeholder); }
.kt-input[disabled], .kt-select[disabled], .kt-textarea[disabled] { background: var(--kt-surface-disabled); color: var(--kt-text-disabled); border-bottom-color: var(--kt-border-default); cursor: not-allowed; }
.kt-input[readonly] { background: transparent; border-bottom-style: dotted; }
.kt-select { appearance: none; padding-right: var(--kt-space-8);
  background-image: linear-gradient(45deg, transparent 48%, currentColor 48%, currentColor 58%, transparent 58%),
                    linear-gradient(-45deg, transparent 48%, currentColor 48%, currentColor 58%, transparent 58%);
  background-size: 9px 9px, 9px 9px; background-position: right 18px center, right 11px center; background-repeat: no-repeat; }
.kt-field.is-error .kt-input, .kt-field.is-error .kt-select, .kt-field.is-error .kt-textarea { border-color: var(--kt-border-error); border-bottom-color: var(--kt-border-error); }
.kt-field-hint { font-size: var(--kt-type-label-size); color: var(--kt-text-tertiary); }
.kt-field-error { display: flex; gap: var(--kt-space-1); font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-semibold); color: var(--kt-danger-fg); }
.kt-field-error::before { content: "✕"; }
.kt-input-group { display: flex; align-items: stretch; }
.kt-input-group__addon { display: inline-flex; align-items: center; padding: 0 var(--kt-pad-tight); font-size: var(--kt-font-ui); color: var(--kt-text-secondary); background: var(--kt-surface-accent); border: var(--kt-border-w-hair) solid var(--kt-border-default); border-right: 0; }

/* Hộp kiểm, ô chọn một, công tắc: đều là ô vuông mực, khác nhau ở dấu bên trong.
   Kích thước đi theo mật độ qua --kt-choice-size, nhãn căn giữa theo ô.        */
.kt-check, .kt-radio { display: inline-flex; align-items: center; gap: var(--kt-choice-gap); min-height: var(--kt-tap-min); font-size: var(--kt-font-ui); line-height: var(--kt-leading-snug); cursor: pointer; }
.kt-check > input, .kt-radio > input { appearance: none; margin: 0; flex: none; width: var(--kt-choice-size); height: var(--kt-choice-size); background: var(--kt-surface); border: var(--kt-border-w) solid var(--kt-border-strong); cursor: pointer; transition: var(--kt-transition-color); display: grid; place-content: center; }
.kt-radio > input { border-radius: var(--kt-radius-full); }
.kt-check > input:checked { background: var(--kt-brand-900); }
.kt-check > input:checked::after { content: ""; display: block; width: calc(var(--kt-choice-size) * 0.5); height: calc(var(--kt-choice-size) * 0.25); border-left: var(--kt-border-w) solid var(--kt-white); border-bottom: var(--kt-border-w) solid var(--kt-white); transform: translateY(-12%) rotate(-45deg); }
.kt-check > input:indeterminate { background: var(--kt-brand-900); }
.kt-check > input:indeterminate::after { content: ""; display: block; width: calc(var(--kt-choice-size) * 0.5); height: var(--kt-border-w); background: var(--kt-white); }
.kt-radio > input:checked { border-width: calc(var(--kt-choice-size) * 0.28); border-color: var(--kt-brand-900); }
.kt-check > input[disabled], .kt-radio > input[disabled] { opacity: var(--kt-state-disabled-opacity); cursor: not-allowed; }
.kt-check--top, .kt-radio--top { align-items: flex-start; }
.kt-check--top > input, .kt-radio--top > input { margin-top: calc((var(--kt-font-ui) * var(--kt-leading-snug) - var(--kt-choice-size)) / 2); }

.kt-switch { display: inline-flex; align-items: center; gap: var(--kt-choice-gap); min-height: var(--kt-tap-min); font-size: var(--kt-font-ui); cursor: pointer; }
.kt-switch > input { appearance: none; margin: 0; flex: none; position: relative; width: var(--kt-switch-w); height: var(--kt-switch-h); background: var(--kt-surface-sunken); border: var(--kt-border-w) solid var(--kt-border-strong); cursor: pointer; transition: background var(--kt-dur-normal) var(--kt-ease-standard); }
.kt-switch > input::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(var(--kt-switch-h) - 8px); height: calc(var(--kt-switch-h) - 8px); background: var(--kt-brand-900); transition: transform var(--kt-dur-normal) var(--kt-ease-standard); }
.kt-switch > input:checked { background: var(--kt-success-fill); border-color: var(--kt-success-fill); }
.kt-switch > input:checked::after { transform: translateX(calc(var(--kt-switch-w) - var(--kt-switch-h))); background: var(--kt-white); }
.kt-switch > input[disabled] { opacity: var(--kt-state-disabled-opacity); cursor: not-allowed; }

/* Nhóm phân đoạn và chip lựa chọn */
.kt-seg { display: inline-flex; border: var(--kt-border-w) solid var(--kt-border-strong); background: var(--kt-surface); }
.kt-seg > .kt-seg__opt { font: inherit; font-size: var(--kt-font-ui); font-weight: var(--kt-weight-semibold); min-height: var(--kt-control-h); padding: 0 var(--kt-control-px); background: transparent; color: var(--kt-action-quiet-fg); border: 0; border-left: var(--kt-border-w) solid var(--kt-border-strong); cursor: pointer; }
.kt-seg > .kt-seg__opt:first-child { border-left: 0; }
.kt-seg > .kt-seg__opt:hover { background: color-mix(in srgb, var(--kt-state-ink) var(--kt-state-hover), transparent); }
.kt-seg > .kt-seg__opt.is-active, .kt-seg > .kt-seg__opt[aria-pressed="true"] { background: var(--kt-brand-900); color: var(--kt-text-on-inverse); }

.kt-chip { display: inline-flex; align-items: center; gap: var(--kt-space-2); min-height: var(--kt-control-h-sm); padding: 0 var(--kt-space-3); font: inherit; font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-semibold); color: var(--kt-text-secondary); background: var(--kt-surface); border: var(--kt-border-w-hair) solid var(--kt-border-default); cursor: pointer; transition: var(--kt-transition-color); }
.kt-chip:hover { border-color: var(--kt-border-strong); color: var(--kt-text-primary); }
.kt-chip.is-selected, .kt-chip[aria-pressed="true"] { background: var(--kt-surface-accent); border: var(--kt-border-w) solid var(--kt-border-strong); color: var(--kt-text-primary); }
.kt-chip[disabled] { opacity: var(--kt-state-disabled-opacity); cursor: not-allowed; }
.kt-chip-set { display: flex; flex-wrap: wrap; gap: var(--kt-space-2); }

.kt-stepper { display: inline-flex; align-items: stretch; border: var(--kt-border-w) solid var(--kt-border-strong); background: var(--kt-surface); }
.kt-stepper > button { font: inherit; font-size: var(--kt-font-ui-strong); font-weight: var(--kt-weight-bold); width: var(--kt-control-h); min-height: var(--kt-control-h); background: transparent; color: var(--kt-action-quiet-fg); border: 0; cursor: pointer; }
.kt-stepper > button:hover { background: color-mix(in srgb, var(--kt-state-ink) var(--kt-state-hover), transparent); }
.kt-stepper > output { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; font-variant-numeric: tabular-nums; font-weight: var(--kt-weight-bold); border-left: var(--kt-border-w) solid var(--kt-border-strong); border-right: var(--kt-border-w) solid var(--kt-border-strong); }

.kt-upload { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kt-space-2); padding: var(--kt-space-6) var(--kt-pad); background: var(--kt-surface-sunken); border: var(--kt-border-w) dashed var(--kt-border-default); color: var(--kt-text-secondary); font-size: var(--kt-type-label-size); cursor: pointer; }
.kt-upload:hover, .kt-upload.is-dragover { border-color: var(--kt-border-accent); color: var(--kt-text-primary); }
.kt-upload.is-error { border-style: solid; border-color: var(--kt-border-error); background: var(--kt-danger-bg); color: var(--kt-danger-fg); }

/* ==========================================================================
   ĐIỀU HƯỚNG — thanh trên, thanh đáy, tab, vụn đường dẫn, phân trang, ray, khay
   ==========================================================================*/
.kt-appbar { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-space-3); padding: var(--kt-pad-tight) var(--kt-pad); background: var(--kt-surface-inverse); color: var(--kt-text-on-inverse); position: sticky; top: 0; z-index: var(--kt-z-sticky); }
.kt-appbar__title { font-size: var(--kt-font-ui-strong); font-weight: var(--kt-weight-bold); }
.kt-appbar .kt-btn--ghost { color: var(--kt-text-on-inverse); --kt-state-ink: var(--kt-white); }

.kt-tabbar { position: sticky; bottom: 0; z-index: var(--kt-z-nav); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--kt-surface); border-top: var(--kt-border-w) solid var(--kt-border-strong); padding-bottom: env(safe-area-inset-bottom); }
.kt-tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--kt-tap-min); padding: var(--kt-space-2) var(--kt-space-1); font: inherit; font-size: var(--kt-type-overline-size); font-weight: var(--kt-weight-semibold); color: var(--kt-text-tertiary); background: transparent; border: 0; border-top: var(--kt-border-w-thick) solid transparent; cursor: pointer; }
.kt-tabbar__item:hover { background: var(--kt-surface-sunken); }
.kt-tabbar__item.is-active, .kt-tabbar__item[aria-current="page"] { color: var(--kt-text-brand); border-top-color: var(--kt-action-indicator); }
.kt-tabbar__item[aria-disabled="true"] { opacity: var(--kt-state-disabled-opacity); pointer-events: none; }

.kt-tabs { display: flex; gap: var(--kt-space-4); border-bottom: var(--kt-border-w) solid var(--kt-border-strong); overflow-x: auto; }
.kt-tab { position: relative; font: inherit; font-size: var(--kt-font-ui); font-weight: var(--kt-weight-semibold); color: var(--kt-text-tertiary); background: transparent; border: 0; padding: var(--kt-space-3) 0; min-height: var(--kt-tap-min); cursor: pointer; white-space: nowrap; }
.kt-tab:hover { color: var(--kt-text-primary); }
.kt-tab[aria-selected="true"] { color: var(--kt-text-primary); font-weight: var(--kt-weight-bold); box-shadow: inset 0 calc(var(--kt-border-w-thick) * -1) 0 var(--kt-action-indicator); }
.kt-tab__count { display: inline-block; margin-left: var(--kt-space-2); font-variant-numeric: tabular-nums; color: var(--kt-text-tertiary); }

.kt-breadcrumb { display: flex; align-items: center; gap: var(--kt-space-2); font-size: var(--kt-type-label-size); color: var(--kt-text-tertiary); }
.kt-breadcrumb__sep { color: var(--kt-border-default); }
.kt-breadcrumb [aria-current="page"] { color: var(--kt-text-primary); font-weight: var(--kt-weight-semibold); }

.kt-pager { display: flex; align-items: center; gap: var(--kt-space-2); }
.kt-pager__info { font-size: var(--kt-type-label-size); color: var(--kt-text-secondary); font-variant-numeric: tabular-nums; }
.kt-pager__btn { font: inherit; font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-semibold); min-width: var(--kt-control-h-sm); min-height: var(--kt-control-h-sm); background: var(--kt-surface); color: var(--kt-action-quiet-fg); border: var(--kt-border-w-hair) solid var(--kt-border-default); cursor: pointer; }
.kt-pager__btn:hover { border-color: var(--kt-border-strong); }
.kt-pager__btn[aria-current="page"] { background: var(--kt-brand-900); color: var(--kt-text-on-inverse); border-color: var(--kt-brand-900); }
.kt-pager__btn[disabled] { opacity: var(--kt-state-disabled-opacity); cursor: not-allowed; }

.kt-rail { display: flex; flex-direction: column; gap: 2px; padding: var(--kt-space-3) var(--kt-space-2); background: var(--kt-surface-inverse); color: var(--kt-text-on-inverse); min-width: 216px; }
.kt-rail__item { display: flex; align-items: center; gap: var(--kt-space-3); min-height: var(--kt-control-h); padding: 0 var(--kt-space-3); font: inherit; font-size: var(--kt-font-ui); font-weight: var(--kt-weight-medium); color: var(--kt-text-on-inverse-muted); background: transparent; border: 0; border-left: var(--kt-border-w-thick) solid transparent; cursor: pointer; text-align: left; transition: var(--kt-transition-color); }
.kt-rail__item > svg { opacity: 0.75; }
.kt-rail__item:hover { color: var(--kt-text-on-inverse); background: color-mix(in srgb, var(--kt-white) 8%, transparent); }
.kt-rail__item:hover > svg { opacity: 1; }
.kt-rail__item.is-active, .kt-rail__item[aria-current="page"] { color: var(--kt-text-on-inverse); font-weight: var(--kt-weight-bold); border-left-color: var(--kt-action-indicator); background: color-mix(in srgb, var(--kt-white) 12%, transparent); }
.kt-rail__item.is-active > svg { opacity: 1; }
.kt-rail__count { margin-left: auto; font-size: var(--kt-type-caption-size); font-weight: var(--kt-weight-semibold); font-variant-numeric: tabular-nums; color: var(--kt-text-on-inverse-muted); }
.kt-rail__item.is-active .kt-rail__count { color: var(--kt-text-on-inverse); }
.kt-rail__group { margin: var(--kt-space-5) 0 var(--kt-space-1); padding: 0 var(--kt-space-3); font-size: var(--kt-type-overline-size); font-weight: var(--kt-weight-semibold); letter-spacing: var(--kt-tracking-caps); text-transform: uppercase; color: color-mix(in srgb, var(--kt-text-on-inverse-muted) 80%, transparent); }
.kt-rail__group:first-of-type { margin-top: var(--kt-space-3); }
.kt-rail__brand { display: flex; align-items: center; gap: var(--kt-space-3); padding: var(--kt-space-2) var(--kt-space-3) var(--kt-space-4); border-bottom: var(--kt-border-w-hair) solid color-mix(in srgb, var(--kt-white) 18%, transparent); }

.kt-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--kt-z-drawer); width: min(88vw, 360px); background: var(--kt-surface); border-right: var(--kt-border-w) solid var(--kt-border-strong); box-shadow: var(--kt-shadow-lg); display: flex; flex-direction: column; }

/* ==========================================================================
   BỀ MẶT NỔI — lớp che, tấm trượt, hộp thoại, cửa sổ nhỏ, trình đơn, mách nhỏ
   ==========================================================================*/
.kt-scrim { position: fixed; inset: 0; z-index: var(--kt-z-scrim); background: var(--kt-scrim); }
.kt-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--kt-z-sheet); background: var(--kt-surface-overlay); border-top: var(--kt-border-w-thick) solid var(--kt-border-strong); box-shadow: var(--kt-shadow-sheet); padding: var(--kt-pad); padding-bottom: max(var(--kt-pad), env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--kt-pad-tight); animation: kt-rise var(--kt-dur-slow) var(--kt-ease-decelerate); }
.kt-sheet__grip { width: 56px; height: var(--kt-border-w-thick); background: var(--kt-border-default); align-self: center; }
.kt-sheet__title { font-size: var(--kt-type-title-size); font-weight: var(--kt-weight-bold); }
@keyframes kt-rise { from { transform: translateY(16px); opacity: 0; } }

.kt-dialog { background: var(--kt-surface-overlay); border: var(--kt-border-w) solid var(--kt-border-strong); box-shadow: var(--kt-shadow-md); padding: var(--kt-pad); max-width: 440px; display: flex; flex-direction: column; gap: var(--kt-pad-tight); }
.kt-dialog__title { font-size: var(--kt-type-title-size); font-weight: var(--kt-weight-bold); }
.kt-dialog__body { font-size: var(--kt-font-ui); color: var(--kt-text-secondary); }
.kt-dialog__actions { display: flex; gap: var(--kt-space-2); flex-wrap: wrap; }
.kt-dialog--destructive { border-color: var(--kt-danger-border); border-width: var(--kt-border-w-thick); }
.kt-dialog--destructive .kt-dialog__title { color: var(--kt-danger-fg); }
.kt-dialog--destructive::before { content: ""; height: var(--kt-space-2); background: var(--kt-danger-fill); margin: calc(var(--kt-pad) * -1) calc(var(--kt-pad) * -1) 0; }

.kt-popover { background: var(--kt-surface-overlay); border: var(--kt-border-w) solid var(--kt-border-strong); box-shadow: var(--kt-shadow-md); padding: var(--kt-pad-tight); z-index: var(--kt-z-popover); }
.kt-menu { min-width: 200px; background: var(--kt-surface-overlay); border: var(--kt-border-w) solid var(--kt-border-strong); box-shadow: var(--kt-shadow-md); padding: var(--kt-space-1) 0; z-index: var(--kt-z-popover); }
.kt-menu__item { display: flex; align-items: center; gap: var(--kt-space-3); width: 100%; min-height: var(--kt-control-h); padding: 0 var(--kt-pad-tight); font: inherit; font-size: var(--kt-font-ui); color: var(--kt-text-primary); background: transparent; border: 0; text-align: left; cursor: pointer; }
.kt-menu__item:hover { background: var(--kt-surface-sunken); }
.kt-menu__item--danger { color: var(--kt-danger-fg); }
.kt-menu__item[aria-disabled="true"] { opacity: var(--kt-state-disabled-opacity); pointer-events: none; }
.kt-menu__sep { height: 0; border-top: var(--kt-border-w-hair) solid var(--kt-border-subtle); margin: var(--kt-space-1) 0; }

.kt-tooltip { position: relative; display: inline-flex; }
.kt-tooltip__bubble { position: absolute; bottom: calc(100% + var(--kt-space-2)); left: 0; z-index: var(--kt-z-tooltip); background: var(--kt-surface-inverse); color: var(--kt-text-on-inverse); font-size: var(--kt-type-caption-size); padding: var(--kt-space-1) var(--kt-space-2); white-space: nowrap; }

/* ==========================================================================
   THÔNG BÁO — dải băng, cảnh báo trong dòng, tin báo nổi kèm hoàn tác
   ==========================================================================*/
.kt-banner { display: flex; align-items: flex-start; gap: var(--kt-space-3); padding: var(--kt-pad-tight) var(--kt-pad); font-size: var(--kt-font-ui); background: var(--kt-info-bg); color: var(--kt-info-fg); border-left: var(--kt-space-2) solid var(--kt-info-border); flex-wrap: wrap; }
.kt-banner--warning { background: var(--kt-warning-bg); color: var(--kt-warning-fg); border-left-color: var(--kt-warning-border); }
.kt-banner--danger { background: var(--kt-danger-bg); color: var(--kt-danger-fg); border-left-color: var(--kt-danger-border); }
.kt-banner--success { background: var(--kt-success-bg); color: var(--kt-success-fg); border-left-color: var(--kt-success-border); }
.kt-banner--offline { background: var(--kt-neutral-bg); color: var(--kt-neutral-fg); border-left-color: var(--kt-neutral-border); }
.kt-banner__body { display: flex; flex-direction: column; gap: var(--kt-space-1); flex: 1; min-width: 14ch; }
.kt-banner__title { font-weight: var(--kt-weight-bold); }
.kt-banner__action { margin-left: auto; flex: none; }

.kt-alert { display: flex; align-items: flex-start; gap: var(--kt-space-2); padding: var(--kt-space-2) var(--kt-pad-tight); font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-semibold); background: var(--kt-danger-bg); color: var(--kt-danger-fg); border: var(--kt-border-w-hair) solid var(--kt-danger-border); }

.kt-toast { display: flex; align-items: center; gap: var(--kt-space-3); background: var(--kt-surface-inverse); color: var(--kt-text-on-inverse); padding: var(--kt-pad-tight) var(--kt-pad); font-size: var(--kt-font-ui); border-left: var(--kt-space-2) solid var(--kt-action-indicator); box-shadow: var(--kt-shadow-md); max-width: 520px; }
.kt-toast--success { border-left-color: var(--kt-success-fill); }
.kt-toast--danger { border-left-color: var(--kt-danger-fill); }
.kt-toast--info { border-left-color: var(--kt-info-fill); }
.kt-toast__action { margin-left: auto; font: inherit; font-weight: var(--kt-weight-bold); color: var(--kt-text-on-inverse); background: transparent; border: 0; border-bottom: var(--kt-border-w) solid currentColor; padding: 0 0 1px; cursor: pointer; white-space: nowrap; }

/* ==========================================================================
   HIỂN THỊ DỮ LIỆU — thẻ, thẻ đơn, danh sách, bảng, chỉ số, dòng thời gian
   ==========================================================================*/
.kt-card { background: var(--kt-surface); border: var(--kt-border-w) solid var(--kt-border-strong); }
.kt-card__head { padding: var(--kt-pad-tight) var(--kt-pad); border-bottom: var(--kt-border-w) solid var(--kt-border-strong); background: var(--kt-surface-accent); }
.kt-card__body { padding: var(--kt-pad); display: flex; flex-direction: column; gap: var(--kt-pad-tight); }
.kt-card__foot { padding: var(--kt-pad); border-top: var(--kt-border-w-hair) solid var(--kt-border-subtle); }
.kt-card__title { font-size: var(--kt-type-title-size); font-weight: var(--kt-weight-bold); line-height: var(--kt-leading-tight); }

.kt-order { background: var(--kt-surface); border: var(--kt-border-w) solid var(--kt-border-strong); display: flex; flex-direction: column; }
.kt-order__top { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-space-2); padding: var(--kt-pad-tight) var(--kt-pad); background: var(--kt-surface-inverse); color: var(--kt-text-on-inverse); }
.kt-order__code { font-variant-numeric: tabular-nums; font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-semibold); }
.kt-order__body { padding: var(--kt-pad); display: flex; flex-direction: column; gap: var(--kt-pad-tight); }
.kt-order__service { font-size: var(--kt-font-ui-strong); font-weight: var(--kt-weight-bold); line-height: var(--kt-leading-tight); }
.kt-order__place { font-size: var(--kt-font-ui); color: var(--kt-text-secondary); }
.kt-order__note { display: flex; gap: var(--kt-space-2); background: var(--kt-surface-accent); color: var(--kt-warning-fg); padding: var(--kt-pad-tight); font-size: var(--kt-type-label-size); }
.kt-order__foot { display: flex; align-items: center; justify-content: space-between; padding: var(--kt-pad-tight) var(--kt-pad); border-top: var(--kt-border-w-hair) solid var(--kt-border-subtle); }
.kt-order:hover { box-shadow: var(--kt-shadow-xs); }
.kt-order.is-selected { outline: var(--kt-border-w-thick) solid var(--kt-action-indicator); outline-offset: -1px; }

.kt-list { display: flex; flex-direction: column; background: var(--kt-surface); border: var(--kt-border-w) solid var(--kt-border-strong); }
.kt-list__row { display: flex; align-items: center; gap: var(--kt-pad-tight); padding: var(--kt-pad-tight) var(--kt-pad); min-height: var(--kt-row-h); border-bottom: var(--kt-border-w-hair) solid var(--kt-border-subtle); text-align: left; background: transparent; border-left: 0; border-right: 0; border-top: 0; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.kt-list__row:last-child { border-bottom: 0; }
.kt-list__row:hover { background: var(--kt-surface-sunken); }
.kt-list__row.is-selected { background: var(--kt-accent-100); box-shadow: inset var(--kt-border-w-thick) 0 0 var(--kt-action-indicator); }
.kt-list__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.kt-list__title { font-weight: var(--kt-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-list__meta { font-size: var(--kt-type-label-size); color: var(--kt-text-tertiary); }

.kt-table-wrap { overflow-x: auto; max-width: 100%; background: var(--kt-surface); }
.kt-table-wrap > .kt-table { min-width: max-content; }
.kt-table { width: 100%; border-collapse: collapse; font-size: var(--kt-font-ui); background: var(--kt-surface); }
.kt-table caption { text-align: left; padding: var(--kt-pad-tight) 0; font-size: var(--kt-type-label-size); color: var(--kt-text-tertiary); }
.kt-table th { text-align: left; font-size: var(--kt-type-overline-size); font-weight: var(--kt-weight-bold); letter-spacing: var(--kt-tracking-caps); text-transform: uppercase; background: var(--kt-surface-inverse); color: var(--kt-text-on-inverse); padding: var(--kt-space-2) var(--kt-pad-tight); white-space: nowrap; position: sticky; top: 0; z-index: var(--kt-z-sticky); }
.kt-table th[aria-sort] { cursor: pointer; }
.kt-table th[aria-sort]:hover { background: var(--kt-brand-800); }
.kt-table th[aria-sort="ascending"]::after { content: " ▲"; }
.kt-table th[aria-sort="descending"]::after { content: " ▼"; }
.kt-table td { padding: 0 var(--kt-pad-tight); height: var(--kt-row-h); border-bottom: var(--kt-border-w-hair) solid var(--kt-border-subtle); vertical-align: middle; }
.kt-table tbody tr:nth-child(even) { background: var(--kt-bg-subtle); }
.kt-table tbody tr:hover { background: var(--kt-brand-100); }
.kt-table tbody tr.is-selected { background: var(--kt-accent-100); box-shadow: inset var(--kt-border-w-thick) 0 0 var(--kt-action-indicator); }
.kt-table .kt-num { text-align: right; font-variant-numeric: tabular-nums; }
/* Ô chứa ngưỡi: ảnh đại diện và tên luôn cùng một dòng, dài quá thì cắt bằng ba chấm. */
.kt-cell-user { display: inline-flex; align-items: center; gap: var(--kt-space-2); min-width: 0; max-width: 100%; white-space: nowrap; }
.kt-cell-user > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.kt-table td:has(.kt-cell-user) { white-space: nowrap; }
.kt-table--zebra-off tbody tr:nth-child(even) { background: transparent; }
.kt-bulkbar { display: flex; align-items: center; gap: var(--kt-space-3); padding: var(--kt-space-2) var(--kt-pad); background: var(--kt-brand-900); color: var(--kt-text-on-inverse); font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-semibold); }
.kt-bulkbar .kt-btn { --kt-state-ink: var(--kt-white); }

.kt-stat { display: flex; flex-direction: column; gap: var(--kt-space-1); padding: var(--kt-pad); background: var(--kt-surface); border: var(--kt-border-w) solid var(--kt-border-strong); }
.kt-stat__label { font-size: var(--kt-type-overline-size); font-weight: var(--kt-weight-bold); letter-spacing: var(--kt-tracking-caps); text-transform: uppercase; color: var(--kt-text-tertiary); }
.kt-stat__value { font-size: var(--kt-type-display-size); font-weight: var(--kt-weight-bold); line-height: var(--kt-leading-tight); font-variant-numeric: tabular-nums; }
.kt-stat__delta { font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-semibold); }
.kt-stat__delta--up { color: var(--kt-success-fg); }
.kt-stat__delta--down { color: var(--kt-danger-fg); }

.kt-timeline { display: flex; flex-direction: column; }
.kt-timeline__item { display: grid; grid-template-columns: 20px 1fr; gap: var(--kt-space-3); padding-bottom: var(--kt-space-4); position: relative; }
.kt-timeline__dot { width: 12px; height: 12px; margin-top: 4px; background: var(--kt-brand-900); }
.kt-timeline__item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 20px; bottom: 0; width: var(--kt-border-w); background: var(--kt-border-subtle); }
.kt-timeline__time { font-size: var(--kt-type-label-size); color: var(--kt-text-tertiary); font-variant-numeric: tabular-nums; }

.kt-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; background: var(--kt-surface-accent); color: var(--kt-brand-900); border: var(--kt-border-w) solid var(--kt-border-strong); font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-bold); }
.kt-avatar--sm { width: 28px; height: 28px; font-size: var(--kt-type-caption-size); }

/* ==========================================================================
   TRẠNG THÁI NGHIỆP VỤ
   ==========================================================================*/
/* Sáu trạng thái đơn: màu, ký hiệu hình học, kiểu viền, ba tín hiệu cùng lúc */
.kt-badge { display: inline-flex; align-items: center; gap: var(--kt-space-1); font-size: var(--kt-type-overline-size); font-weight: var(--kt-weight-bold); letter-spacing: 0.02em; padding: 3px var(--kt-space-2); border: var(--kt-border-w) solid currentColor; white-space: nowrap; }
.kt-badge::before { font-size: 1.05em; line-height: 1; }
.kt-badge--pending   { color: var(--kt-text-secondary); border-style: dashed; }
.kt-badge--pending::before   { content: "○"; }
.kt-badge--assigned  { color: var(--kt-info-fg); border-style: solid; }
.kt-badge--assigned::before  { content: "◔"; }
.kt-badge--enroute   { color: var(--kt-info-fill); border-style: double; border-width: var(--kt-border-w-thick); }
.kt-badge--enroute::before   { content: "▶"; }
/* Mốc tới sảnh. Cùng MÀU với chặng đang tới vì cùng một họ "chưa vào nhà",
   khác ở ký hiệu và ở kiểu viền: hai tín hiệu, in đen trắng vẫn đọc ra.
   Đây là chặng Grab và bTaskee không có, vì họ không mô hình hoá toà nhà. */
.kt-badge--lobby     { color: var(--kt-info-fill); border-style: solid; border-width: var(--kt-border-w-thick); }
.kt-badge--lobby::before     { content: "◈"; }
.kt-badge--working   { color: var(--kt-warning-fg); background: var(--kt-warning-bg); border-style: solid; }
.kt-badge--working::before   { content: "◑"; }
.kt-badge--done      { color: var(--kt-success-fg); background: var(--kt-success-bg); border-style: solid; }
.kt-badge--done::before      { content: "✓"; }
.kt-badge--cancelled { color: var(--kt-danger-fg); background: var(--kt-danger-bg); border-style: solid; text-decoration: line-through; }
.kt-badge--cancelled::before { content: "✕"; text-decoration: none; }

/* Sáu giai đoạn vòng đời thợ: chữ in hoa, gạch chân dày, không viền */
.kt-stage { display: inline-flex; align-items: center; gap: var(--kt-space-2); font-size: var(--kt-type-overline-size); font-weight: var(--kt-weight-bold); letter-spacing: var(--kt-tracking-caps); text-transform: uppercase; padding-bottom: 3px; border-bottom: var(--kt-border-w-thick) solid currentColor; }
.kt-stage--candidate { color: var(--kt-text-tertiary); }
.kt-stage--probation { color: var(--kt-warning-fg); }
.kt-stage--active    { color: var(--kt-text-brand); }
.kt-stage--senior    { color: var(--kt-success-fg); }
.kt-stage--paused    { color: var(--kt-text-secondary); }
.kt-stage--left      { color: var(--kt-danger-fg); }

/* Trạng thái nhận việc hôm nay: đèn tròn, chữ thường, không viền */
.kt-duty { display: inline-flex; align-items: center; gap: var(--kt-space-2); font-size: var(--kt-type-label-size); color: var(--kt-text-secondary); }
.kt-duty::before { content: ""; width: 10px; height: 10px; flex: none; border: var(--kt-border-w) solid currentColor; }
.kt-duty--free::before { background: var(--kt-success-fill); border-color: var(--kt-success-fill); }
.kt-duty--busy::before { background: var(--kt-action-indicator); border-color: var(--kt-accent-700); border-radius: var(--kt-radius-full); }
.kt-duty--off::before  { background: transparent; border-color: var(--kt-text-tertiary); }

/* Cờ nghiệp vụ: quá hạn, bảo hành, đang chờ đồng bộ. Không phải trạng thái đơn. */
.kt-flag { display: inline-flex; align-items: center; gap: var(--kt-space-1); font-size: var(--kt-type-caption-size); font-weight: var(--kt-weight-bold); padding: 1px var(--kt-space-2); border: var(--kt-border-w-hair) solid currentColor; }
.kt-flag--late { color: var(--kt-danger-fg); background: var(--kt-danger-bg); }
.kt-flag--warranty { color: var(--kt-success-fg); background: var(--kt-success-bg); }
.kt-flag--queued { color: var(--kt-neutral-fg); background: var(--kt-neutral-bg); border-style: dashed; }

/* Thanh tiến trình sáu bước của đơn */
.kt-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--kt-space-1); }
.kt-progress__step { display: flex; flex-direction: column; gap: var(--kt-space-1); font-size: var(--kt-type-overline-size); color: var(--kt-text-tertiary); }
.kt-progress__bar { height: var(--kt-space-2); background: var(--kt-surface-sunken); border: var(--kt-border-w-hair) solid var(--kt-border-subtle); }
.kt-progress__step.is-done .kt-progress__bar { background: var(--kt-brand-900); border-color: var(--kt-brand-900); }
.kt-progress__step.is-done { color: var(--kt-text-secondary); }
.kt-progress__step.is-current .kt-progress__bar { background: var(--kt-action-indicator); border-color: var(--kt-accent-700); }
.kt-progress__step.is-current { color: var(--kt-warning-fg); font-weight: var(--kt-weight-bold); }
.kt-progress__step.is-cancelled .kt-progress__bar { background: var(--kt-danger-fill); border-color: var(--kt-danger-fill); }

/* Thanh tiến trình liên tục và con quay */
.kt-bar { height: var(--kt-space-2); background: var(--kt-surface-sunken); border: var(--kt-border-w-hair) solid var(--kt-border-subtle); overflow: hidden; }
.kt-bar__fill { height: 100%; background: var(--kt-action-indicator); transition: width var(--kt-dur-slow) var(--kt-ease-standard); }
.kt-bar--indeterminate .kt-bar__fill { width: 40%; animation: kt-slide 1.2s var(--kt-ease-standard) infinite; }
@keyframes kt-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.kt-spinner { width: 20px; height: 20px; border-radius: var(--kt-radius-full); border: var(--kt-border-w) solid var(--kt-border-default); border-top-color: var(--kt-action-indicator); animation: kt-spin 700ms linear infinite; }

/* Ảnh nghiệm thu trước và sau */
.kt-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kt-space-2); }
.kt-photo { border: var(--kt-border-w) solid var(--kt-border-strong); background: var(--kt-surface-sunken); display: flex; flex-direction: column; }
.kt-photo__label { font-size: var(--kt-type-overline-size); font-weight: var(--kt-weight-bold); letter-spacing: var(--kt-tracking-caps); text-transform: uppercase; padding: var(--kt-space-1) var(--kt-space-2); background: var(--kt-surface-inverse); color: var(--kt-text-on-inverse); }
.kt-photo__slot { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; font-size: var(--kt-type-label-size); color: var(--kt-text-tertiary); }
.kt-photo.is-empty { border-style: dashed; border-color: var(--kt-border-default); }
.kt-photo.is-empty .kt-photo__label { background: var(--kt-surface-sunken); color: var(--kt-text-tertiary); }

/* Chấm sao */
.kt-stars { display: inline-flex; align-items: center; gap: 2px; font-size: var(--kt-type-subtitle-size); line-height: 1; color: var(--kt-border-default); }
.kt-star { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.kt-stars--input .kt-star { min-width: var(--kt-tap-min); min-height: var(--kt-tap-min); }
.kt-star.is-on { color: var(--kt-accent-600); }
.kt-rating { display: inline-flex; align-items: center; gap: var(--kt-space-2); font-size: var(--kt-font-ui); }
.kt-rating__value { font-weight: var(--kt-weight-bold); font-variant-numeric: tabular-nums; }
.kt-rating--low { background: var(--kt-danger-bg); border: var(--kt-border-w) solid var(--kt-danger-border); color: var(--kt-danger-fg); padding: 2px var(--kt-space-2); font-weight: var(--kt-weight-bold); }
.kt-rating--low .kt-star.is-on { color: var(--kt-danger-fill); }

/* Tiền và thời lượng. Một định dạng duy nhất toàn hệ: 350.000 VNĐ. */
.kt-money { font-variant-numeric: tabular-nums; font-weight: var(--kt-weight-bold); white-space: nowrap; }
.kt-money__unit { font-weight: var(--kt-weight-semibold); font-size: 0.82em; margin-left: 0.22em; }
.kt-money--total { font-size: var(--kt-type-display-size); line-height: var(--kt-leading-tight); }
.kt-money--void { color: var(--kt-text-tertiary); text-decoration: line-through; }
.kt-duration { font-variant-numeric: tabular-nums; color: var(--kt-text-secondary); white-space: nowrap; }

/* ==========================================================================
   TRẠNG THÁI MÀN — rỗng, lỗi, đang tải
   ==========================================================================*/
.kt-empty, .kt-errorblock { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kt-space-2); padding: var(--kt-space-8) var(--kt-pad); background: var(--kt-surface); border: var(--kt-border-w) dashed var(--kt-border-default); }
.kt-empty__title, .kt-errorblock__title { font-size: var(--kt-type-subtitle-size); font-weight: var(--kt-weight-bold); }
.kt-empty__text, .kt-errorblock__text { font-size: var(--kt-font-ui); color: var(--kt-text-secondary); }
.kt-errorblock { border-style: solid; border-color: var(--kt-danger-border); background: var(--kt-danger-bg); }
.kt-errorblock__title { color: var(--kt-danger-fg); }

.kt-skel { position: relative; overflow: hidden; background: var(--kt-surface-sunken); height: 1em; }
.kt-skel--line { height: 12px; }
.kt-skel--title { height: 20px; width: 60%; }
.kt-skel--block { height: 72px; }
.kt-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--kt-sheen), transparent); animation: kt-shimmer 1.2s infinite; }
@keyframes kt-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ==========================================================================
   THÀNH PHẦN NGHIỆP VỤ
   Mười sáu khối chỉ có nghĩa với nền điều phối dịch vụ kỹ thuật. Nhãn và luật
   của chúng khai trong design-system.js, không gõ lại trong màn.
   ==========================================================================*/

/* Thẻ dịch vụ trong danh mục: biểu tượng, tên, thời lượng, giá khởi điểm */
.kt-svc { display: flex; align-items: center; gap: var(--kt-pad-tight); width: 100%; padding: var(--kt-pad-tight) var(--kt-pad); background: var(--kt-surface); border: var(--kt-border-w) solid var(--kt-border-subtle); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: var(--kt-transition-color); }
.kt-svc:hover { border-color: var(--kt-border-strong); }
.kt-svc.is-selected { border-color: var(--kt-border-strong); background: var(--kt-surface-accent); }
.kt-svc__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--kt-control-h); height: var(--kt-control-h); flex: none; color: var(--kt-text-brand); background: var(--kt-surface-accent); border: var(--kt-border-w-hair) solid var(--kt-border-subtle); }
.kt-svc__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.kt-svc__name { font-size: var(--kt-font-ui); font-weight: var(--kt-weight-semibold); }
.kt-svc__meta { font-size: var(--kt-type-label-size); color: var(--kt-text-tertiary); }
.kt-svc__price { text-align: right; }
.kt-svc[disabled] { opacity: var(--kt-state-disabled-opacity); cursor: not-allowed; }

/* Lưới giờ hẹn: ngày ở trên, ô giờ ở dưới */
.kt-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--kt-space-2); }
.kt-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: var(--kt-control-h); padding: var(--kt-space-2); font: inherit; font-size: var(--kt-font-ui); font-weight: var(--kt-weight-semibold); color: var(--kt-text-primary); background: var(--kt-surface); border: var(--kt-border-w-hair) solid var(--kt-border-default); cursor: pointer; transition: var(--kt-transition-color); }
.kt-slot__note { font-size: var(--kt-type-caption-size); font-weight: var(--kt-weight-regular); color: var(--kt-text-tertiary); }
.kt-slot:hover { border-color: var(--kt-border-strong); }
.kt-slot.is-selected { border: var(--kt-border-w) solid var(--kt-border-strong); background: var(--kt-surface-accent); }
.kt-slot[disabled] { opacity: var(--kt-state-disabled-opacity); cursor: not-allowed; text-decoration: line-through; }
.kt-slot--soonest { border-left: var(--kt-border-w-thick) solid var(--kt-action-indicator); }

/* Thẻ thợ: một hình thức duy nhất dùng ở cả ba cửa */
.kt-tech { display: flex; align-items: flex-start; gap: var(--kt-pad-tight); padding: var(--kt-pad-tight); background: var(--kt-surface); border: var(--kt-border-w) solid var(--kt-border-subtle); }
.kt-tech__main { display: flex; flex-direction: column; gap: var(--kt-space-1); flex: 1; min-width: 0; }
.kt-tech__name { font-size: var(--kt-font-ui); font-weight: var(--kt-weight-bold); }
.kt-tech__line { display: flex; align-items: center; gap: var(--kt-space-3); flex-wrap: wrap; }
.kt-tech__dist { font-size: var(--kt-type-label-size); color: var(--kt-text-secondary); font-variant-numeric: tabular-nums; }
.kt-tech--suggested { border-color: var(--kt-border-strong); box-shadow: inset var(--kt-border-w-thick) 0 0 var(--kt-action-indicator); }

/* Bốn chỉ số chất lượng thợ, máy tự đo từ đơn */
.kt-quality { display: flex; flex-direction: column; gap: var(--kt-space-2); }
.kt-quality__row { display: grid; grid-template-columns: 1fr 68px 44px; align-items: center; gap: var(--kt-space-2); font-size: var(--kt-type-label-size); }
.kt-quality__track { height: 6px; background: var(--kt-surface-sunken); border: var(--kt-border-w-hair) solid var(--kt-border-subtle); }
.kt-quality__fill { height: 100%; background: var(--kt-success-fill); }
.kt-quality__row.is-weak .kt-quality__fill { background: var(--kt-danger-fill); }
.kt-quality__val { text-align: right; font-weight: var(--kt-weight-bold); font-variant-numeric: tabular-nums; }

/* Đồng hồ bậc hoa hồng: ba bậc, vị trí hiện tại, còn mấy đơn lên bậc */
.kt-tier { display: flex; flex-direction: column; gap: var(--kt-space-2); }
.kt-tier__bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kt-space-1); }
.kt-tier__bar { height: var(--kt-space-2); background: var(--kt-surface-sunken); border: var(--kt-border-w-hair) solid var(--kt-border-subtle); }
.kt-tier__bar.is-reached { background: var(--kt-brand-900); border-color: var(--kt-brand-900); }
.kt-tier__bar.is-current { background: var(--kt-action-indicator); border-color: var(--kt-accent-700); }
.kt-tier__legend { display: flex; justify-content: space-between; font-size: var(--kt-type-caption-size); color: var(--kt-text-tertiary); }

/* Bảo hành: viên thuốc có đếm ngày, ba mức */
.kt-warranty { display: inline-flex; align-items: center; gap: var(--kt-space-2); padding: 2px var(--kt-space-2); font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-bold); border: var(--kt-border-w-hair) solid currentColor; }
.kt-warranty--active { color: var(--kt-success-fg); background: var(--kt-success-bg); }
.kt-warranty--expiring { color: var(--kt-warning-fg); background: var(--kt-warning-bg); }
.kt-warranty--expired { color: var(--kt-text-tertiary); background: var(--kt-surface-sunken); text-decoration: line-through; }

/* Đồng hồ hạn giờ hẹn, ba mức, dùng ở buồng lái và cửa thợ */
.kt-sla { display: inline-flex; align-items: center; gap: var(--kt-space-1); padding: 2px var(--kt-space-2); font-size: var(--kt-type-caption-size); font-weight: var(--kt-weight-bold); font-variant-numeric: tabular-nums; border: var(--kt-border-w-hair) solid currentColor; }
.kt-sla--ok { color: var(--kt-text-secondary); }
.kt-sla--warn { color: var(--kt-warning-fg); background: var(--kt-warning-bg); }
.kt-sla--late { color: var(--kt-danger-fg); background: var(--kt-danger-bg); }

/* Mời nhận đơn: có vạch đếm ngược tự rút, hết thì đơn trả về hàng đợi */
.kt-invite { display: flex; flex-direction: column; background: var(--kt-surface); border: var(--kt-border-w) solid var(--kt-border-strong); }
.kt-invite__timer { height: var(--kt-space-2); background: var(--kt-surface-sunken); }
.kt-invite__timer > span { display: block; height: 100%; background: var(--kt-danger-fill); transition: width 250ms linear; }
.kt-invite__head { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-space-2); padding: var(--kt-pad-tight) var(--kt-pad); border-bottom: var(--kt-border-w-hair) solid var(--kt-border-subtle); }
.kt-invite__body { padding: var(--kt-pad); display: flex; flex-direction: column; gap: var(--kt-pad-tight); }
.kt-invite__actions { display: flex; flex-direction: column; gap: var(--kt-space-2); padding: 0 var(--kt-pad) var(--kt-pad); }

/* Luật gửi xe theo toà: khối chữ có biểu tượng, không phải đoạn văn trơn */
.kt-parking { display: flex; flex-direction: column; gap: var(--kt-space-2); padding: var(--kt-pad-tight); background: var(--kt-surface-accent); color: var(--kt-warning-fg); font-size: var(--kt-type-label-size); }
.kt-parking__row { display: flex; align-items: flex-start; gap: var(--kt-space-2); }
.kt-parking__key { color: var(--kt-text-secondary); min-width: 92px; }

/* Bảng bóc tách tiền: từng dòng cộng lại thành tổng, luôn có dòng tổng */
.kt-breakdown { display: flex; flex-direction: column; gap: var(--kt-space-2); }
.kt-breakdown__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kt-space-3); font-size: var(--kt-font-ui); }
.kt-breakdown__row > span:first-child { color: var(--kt-text-secondary); }
.kt-breakdown__row--discount { color: var(--kt-success-fg); }
.kt-breakdown__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kt-space-3); padding-top: var(--kt-space-2); border-top: var(--kt-border-w) solid var(--kt-border-strong); font-weight: var(--kt-weight-bold); }

/* Chọn cách trả tiền: ô lớn, một cột trên điện thoại */
.kt-pay { display: flex; flex-direction: column; gap: var(--kt-space-2); }
.kt-pay__tile { display: flex; align-items: center; gap: var(--kt-pad-tight); min-height: var(--kt-control-h); padding: var(--kt-space-2) var(--kt-pad-tight); background: var(--kt-surface); border: var(--kt-border-w-hair) solid var(--kt-border-default); cursor: pointer; font-size: var(--kt-font-ui); }
.kt-pay__tile:hover { border-color: var(--kt-border-strong); }
.kt-pay__tile.is-selected { border: var(--kt-border-w) solid var(--kt-border-strong); background: var(--kt-surface-accent); }
.kt-pay__tile > input { appearance: none; margin: 0; width: var(--kt-choice-size); height: var(--kt-choice-size); flex: none; border-radius: var(--kt-radius-full); border: var(--kt-border-w) solid var(--kt-border-strong); }
.kt-pay__tile > input:checked { border-width: calc(var(--kt-choice-size) * 0.28); }
.kt-qr { display: flex; flex-direction: column; align-items: center; gap: var(--kt-space-2); padding: var(--kt-pad); background: var(--kt-surface); border: var(--kt-border-w) solid var(--kt-border-strong); }
.kt-qr__code { width: 168px; height: 168px; background: var(--kt-surface-sunken); border: var(--kt-border-w-hair) solid var(--kt-border-default); display: grid; place-content: center; color: var(--kt-text-tertiary); font-size: var(--kt-type-caption-size); }

/* Hoá đơn: danh sách dòng có số lượng và đơn giá */
.kt-invoice { display: flex; flex-direction: column; }
.kt-invoice__row { display: grid; grid-template-columns: 1fr 44px 96px; gap: var(--kt-space-2); padding: var(--kt-space-2) 0; border-bottom: var(--kt-border-w-hair) solid var(--kt-border-subtle); font-size: var(--kt-font-ui); }
.kt-invoice__row > :nth-child(2) { text-align: center; color: var(--kt-text-tertiary); font-variant-numeric: tabular-nums; }
.kt-invoice__row > :nth-child(3) { text-align: right; }

/* Sự vụ và khiếu nại: mức độ, hạn xử lý, người phụ trách */
.kt-case { display: flex; flex-direction: column; gap: var(--kt-space-2); padding: var(--kt-pad-tight); background: var(--kt-surface); border-left: var(--kt-space-2) solid var(--kt-neutral-border); border-top: var(--kt-border-w-hair) solid var(--kt-border-subtle); border-right: var(--kt-border-w-hair) solid var(--kt-border-subtle); border-bottom: var(--kt-border-w-hair) solid var(--kt-border-subtle); }
.kt-case--high { border-left-color: var(--kt-danger-fill); }
.kt-case--mid { border-left-color: var(--kt-warning-fill); }
.kt-case__head { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-space-2); }
.kt-case__id { font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-bold); font-variant-numeric: tabular-nums; }

/* Chọn địa bàn năm cấp: dòng thụt theo cấp, cấp ghi đè có cờ */
.kt-addr { display: flex; flex-direction: column; background: var(--kt-surface); border: var(--kt-border-w) solid var(--kt-border-subtle); }
.kt-addr__row { display: flex; align-items: center; gap: var(--kt-space-2); min-height: var(--kt-row-h); padding: var(--kt-space-2) var(--kt-pad-tight); border-bottom: var(--kt-border-w-hair) solid var(--kt-border-subtle); font: inherit; font-size: var(--kt-font-ui); color: inherit; background: transparent; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; width: 100%; }
.kt-addr__row:last-child { border-bottom: 0; }
.kt-addr__row:hover { background: var(--kt-surface-sunken); }
.kt-addr__row.is-selected { background: var(--kt-accent-100); box-shadow: inset var(--kt-border-w-thick) 0 0 var(--kt-action-indicator); }
.kt-addr__row[data-level="2"] { padding-left: calc(var(--kt-pad-tight) + var(--kt-space-5)); }
.kt-addr__row[data-level="3"] { padding-left: calc(var(--kt-pad-tight) + var(--kt-space-10)); }
.kt-addr__row[data-level="4"] { padding-left: calc(var(--kt-pad-tight) + var(--kt-space-12)); }
.kt-addr__row[data-level="5"] { padding-left: calc(var(--kt-pad-tight) + var(--kt-space-16)); }
.kt-addr__meta { margin-left: auto; font-size: var(--kt-type-label-size); color: var(--kt-text-tertiary); }

/* Hàng chờ đồng bộ khi thợ mất mạng */
.kt-queue { display: flex; align-items: center; gap: var(--kt-space-2); padding: var(--kt-space-2) var(--kt-pad-tight); background: var(--kt-neutral-bg); color: var(--kt-neutral-fg); font-size: var(--kt-type-label-size); border: var(--kt-border-w-hair) dashed var(--kt-neutral-border); }
.kt-queue__count { font-weight: var(--kt-weight-bold); font-variant-numeric: tabular-nums; }

/* Ảnh nghiệm thu bắt buộc: thiếu thì viền đỏ và có chữ nhắc */
.kt-photos.is-required .kt-photo.is-empty { border-color: var(--kt-border-error); }
.kt-photos.is-required .kt-photo.is-empty .kt-photo__label { background: var(--kt-danger-bg); color: var(--kt-danger-fg); }

/* Chỗ đặt tin báo nổi do KT.ui.toast dựng ra */
.kt-toast-host { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--kt-space-5); z-index: var(--kt-z-toast); display: flex; flex-direction: column; gap: var(--kt-space-2); width: min(520px, calc(100vw - 32px)); }

/* ==========================================================================
   LỚP VĂN BẢN DÀI
   Thang chữ giao diện không dùng được cho bài viết: câu dài cần cỡ lớn hơn,
   dòng thưa hơn, bề rộng vùng đọc hẹp hơn. Đây là lớp riêng cho bài viết,
   trang giới thiệu, sổ tay và tài liệu in.
   ==========================================================================*/
.kt-article { max-width: 720px; margin: 0 auto; padding: var(--kt-space-8) var(--kt-pad); }
.kt-article--wide { max-width: 960px; }
.kt-kicker { font-size: var(--kt-type-overline-size); font-weight: var(--kt-weight-bold); letter-spacing: var(--kt-tracking-caps); text-transform: uppercase; color: var(--kt-text-accent); }
.kt-headline-xl { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.12; font-weight: var(--kt-weight-bold); letter-spacing: -0.015em; }
.kt-lede { font-size: 19px; line-height: 1.6; color: var(--kt-text-secondary); max-width: 62ch; }
.kt-byline { display: flex; align-items: center; gap: var(--kt-space-3); font-size: var(--kt-type-label-size); color: var(--kt-text-tertiary); }

.kt-prose { font-size: 17px; line-height: 1.7; color: var(--kt-text-primary); max-width: 68ch; }
.kt-prose > * + * { margin-top: var(--kt-space-5); }
.kt-prose h2 { font-size: 26px; line-height: 1.25; margin-top: var(--kt-space-10); }
.kt-prose h3 { font-size: 20px; line-height: 1.3; margin-top: var(--kt-space-8); }
.kt-prose h2 + p, .kt-prose h3 + p { margin-top: var(--kt-space-3); }
.kt-prose p { max-width: 68ch; }
.kt-prose strong { font-weight: var(--kt-weight-bold); }
.kt-prose a { color: var(--kt-text-link); text-decoration: underline; text-underline-offset: 3px; }
.kt-prose ul, .kt-prose ol { padding-left: var(--kt-space-6); display: flex; flex-direction: column; gap: var(--kt-space-2); }
.kt-prose li { padding-left: var(--kt-space-1); }
.kt-prose hr { height: 0; border: 0; border-top: var(--kt-border-w) solid var(--kt-border-strong); margin: var(--kt-space-10) 0; }
.kt-prose table { width: 100%; border-collapse: collapse; font-size: var(--kt-type-body-size); }
.kt-prose th { text-align: left; font-size: var(--kt-type-overline-size); letter-spacing: var(--kt-tracking-caps); text-transform: uppercase; border-bottom: var(--kt-border-w) solid var(--kt-border-strong); padding: var(--kt-space-2) var(--kt-space-3) var(--kt-space-2) 0; }
.kt-prose td { border-bottom: var(--kt-border-w-hair) solid var(--kt-border-subtle); padding: var(--kt-space-3) var(--kt-space-3) var(--kt-space-3) 0; vertical-align: top; }
.kt-prose--compact { font-size: var(--kt-type-body-size); line-height: 1.62; }

.kt-quote { border-left: var(--kt-border-w-thick) solid var(--kt-border-strong); padding-left: var(--kt-pad); font-size: 20px; line-height: 1.5; }
.kt-quote__by { display: block; margin-top: var(--kt-space-2); font-size: var(--kt-type-label-size); color: var(--kt-text-tertiary); }
.kt-figure { display: flex; flex-direction: column; gap: var(--kt-space-2); }
.kt-figcaption { font-size: var(--kt-type-label-size); color: var(--kt-text-tertiary); border-left: var(--kt-border-w) solid var(--kt-border-subtle); padding-left: var(--kt-space-3); }
.kt-callout { display: flex; flex-direction: column; gap: var(--kt-space-2); padding: var(--kt-pad); background: var(--kt-surface-accent); border-left: var(--kt-space-2) solid var(--kt-border-strong); font-size: var(--kt-type-body-size); }
.kt-callout__title { font-weight: var(--kt-weight-bold); }
.kt-toc { display: flex; flex-direction: column; gap: var(--kt-space-2); padding: var(--kt-pad); background: var(--kt-surface-sunken); font-size: var(--kt-type-body-size); }
.kt-steps { counter-reset: kt-step; display: flex; flex-direction: column; gap: var(--kt-space-4); --kt-step-size: 34px; }
[data-kt-density="compact"] .kt-steps, .kt-mode-admin .kt-steps { --kt-step-size: 26px; gap: var(--kt-space-3); }
.kt-steps > li { counter-increment: kt-step; display: block; list-style: none; padding: 0; line-height: 1.6; text-wrap: pretty; overflow-wrap: break-word; }
.kt-steps > li::after { content: ""; display: block; clear: both; }
/* Câu dẫn in đậm nằm riêng một dòng, để phần giải thích không bị ngắt lẻ chữ. */
.kt-steps > li > b:first-child { display: block; margin-bottom: 2px; }
.kt-steps > li::before { content: counter(kt-step); float: left; margin: 2px var(--kt-space-3) var(--kt-space-1) 0; display: grid; place-items: center; width: var(--kt-step-size); height: var(--kt-step-size); background: var(--kt-surface-inverse); color: var(--kt-text-on-inverse); font-size: var(--kt-type-label-size); font-weight: var(--kt-weight-bold); }

/* Khung màn */
.kt-screen { display: flex; flex-direction: column; min-height: 100%; }
.kt-screen__body { flex: 1; padding: var(--kt-pad); display: flex; flex-direction: column; gap: var(--kt-gap); }

/* ==========================================================================
   TÔN TRỌNG THIẾT LẬP NGƯỜI DÙNG
   ==========================================================================*/
@media (prefers-reduced-motion: reduce) {
  .kt-app *, .kt-app *::before, .kt-app *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
@media (prefers-contrast: more) {
  :root { --kt-border-default: var(--kt-brand-900); --kt-text-secondary: var(--kt-brand-900); --kt-text-tertiary: var(--kt-slate-900); }
}
@media print {
  .kt-app { background: var(--kt-white); }
  .kt-tabbar, .kt-appbar, .kt-toast, .kt-sheet, .kt-scrim, .kt-drawer { display: none !important; }
  .kt-badge, .kt-flag { border-color: var(--kt-black) !important; color: var(--kt-black) !important; background: transparent !important; }
}

/* Ô lịch trong bảng điều phối theo giờ: trống, đang có đơn, hoặc đích để phân đơn đang giữ */
.kt-cell { display: block; width: 100%; min-height: 30px; padding: 3px 6px; font: inherit; font-size: var(--kt-type-caption-size); font-weight: var(--kt-weight-bold); text-align: left; color: var(--kt-text-tertiary); background: transparent; border: var(--kt-border-w-hair) dashed var(--kt-border-subtle); cursor: default; }
.kt-cell--busy { color: var(--kt-info-fg); background: var(--kt-info-bg); border: var(--kt-border-w) solid var(--kt-info-border); }
.kt-cell--target { color: var(--kt-accent-800); background: var(--kt-accent-100); border: var(--kt-border-w) dashed var(--kt-border-accent); cursor: pointer; }
.kt-cell--target:hover { background: var(--kt-accent-200); }