/* ==========================================================================
   AMA UI — file phat hanh, DUNG SUA TRUC TIEP.
   Sinh tu static/src/ + static/brand/amatech.css
   Phien ban V4.0.0 · dung luc 2026-09-07 11:55
   Sua o static/src/ roi chay: 28_BUILD_ASSETS.bat
   ========================================================================== */


/* ==== static/src/00-layers.css ========================================== */
/* =============================================================================
   AMA UI — KHAI BÁO THỨ TỰ LỚP
   -----------------------------------------------------------------------------
   Đây là file quan trọng nhất của toàn bộ hệ thiết kế.

   Trong CSS Cascade Layers, lớp khai báo SAU luôn thắng lớp khai báo TRƯỚC,
   bất kể selector dài hay ngắn. Nhờ vậy hệ thống này không cần một dòng
   !important nào — thứ tự thắng thua đã được quyết định ngay tại đây.

   LUẬT BẮT BUỘC
   1. Cấm viết !important trong toàn bộ static/src/.
      Trong hệ thống lớp, !important ĐẢO NGƯỢC thứ tự ưu tiên — chỉ cần một
      dòng lọt vào là trật tự bên dưới sụp đổ. tools/check_ui.py sẽ chặn.
   2. Cấm đặt tên class có chữ số phiên bản (cs90, checkin1106, wh219...).
      Đặt tên theo việc nó làm, để không bao giờ phải đẻ phiên bản mới.
   3. Mã màu hex chỉ được xuất hiện trong 10-tokens.css.
   ========================================================================== */

@layer reset, tokens, base, layout, components, pages, brand, utilities;


/* ==== static/src/10-tokens.css ========================================== */
/* =============================================================================
   AMA UI — TOKEN
   -----------------------------------------------------------------------------
   Đây là NƠI DUY NHẤT được phép chứa mã màu hex trong toàn hệ thống.

   Ba tầng:
     Tầng 1 — nguyên thủy : bảng màu thô, đặt tên theo màu (--blue-700)
     Tầng 2 — ngữ nghĩa   : đặt tên theo CÔNG DỤNG (--surface-1, --verdict-ok)
                            Phần còn lại của hệ thống CHỈ được dùng tầng này.
     Tầng 3 — thương hiệu : static/brand/<khach>.css ghi đè ~12 token
   ========================================================================== */

@layer tokens {

  :root{
    /* ---------------------------------------------------------------------
       TẦNG 1 — NGUYÊN THỦY
       Trung tính ngả lạnh (bias xanh) để đứng cạnh màu thương hiệu không bị đục.
       --------------------------------------------------------------------- */
    /* Hai cực dùng cho color-mix() và cho trang in. */
    --tint:#ffffff;
    --shade:#000000;

    --slate-000:#ffffff;
    --slate-025:#f6f9fc;
    --slate-050:#eef3f8;
    --slate-100:#e3ebf3;
    --slate-200:#d3dee9;
    --slate-300:#b8c7d6;
    --slate-400:#94a7ba;
    --slate-500:#6f8497;
    --slate-600:#516576;
    --slate-700:#3a4b5b;
    --slate-800:#25333f;
    --slate-900:#16212b;
    --slate-950:#0d151c;

    --blue-050:#e8f1fa;
    --blue-100:#cfe2f4;
    --blue-400:#3e90d8;
    --blue-600:#0f5fa6;
    --blue-700:#0b4f8f;
    --blue-800:#093e72;
    --blue-900:#072d54;

    --green-050:#e3f6ea;
    --green-400:#34c46b;
    --green-600:#157f3d;
    --green-700:#0f6631;

    --red-050:#fdeae8;
    --red-400:#ff6b5e;
    --red-600:#c0281f;
    --red-700:#9d1e17;

    --amber-050:#fbf1dc;
    --amber-400:#e9a020;
    --amber-600:#a66a00;
    --amber-700:#8a5800;

    --violet-050:#eee8fb;
    --violet-400:#a98bf0;
    --violet-600:#6a3fbf;
    --violet-700:#57309f;

    /* ---------------------------------------------------------------------
       TẦNG 2 — NGỮ NGHĨA (chế độ sáng)
       --------------------------------------------------------------------- */

    /* Bề mặt */
    --surface-app:var(--slate-050);
    --surface-1:var(--slate-000);
    --surface-2:var(--slate-025);
    --surface-3:var(--slate-100);
    --surface-inset:var(--slate-050);

    /* Đường kẻ */
    --line:var(--slate-200);
    --line-strong:var(--slate-300);
    --line-faint:var(--slate-100);

    /* Chữ */
    --text-1:var(--slate-900);
    --text-2:var(--slate-700);
    --text-3:var(--slate-500);
    --text-on-brand:var(--slate-000);
    --text-on-solid:var(--slate-000);

    /* Thương hiệu — tầng 3 ghi đè đúng 4 token này */
    --brand:var(--blue-700);
    --brand-strong:var(--blue-800);
    --brand-soft:var(--blue-050);
    --brand-ink:var(--blue-800);

    /* Thanh trên và menu trượt.
       Tách riêng khỏi --brand có lý do: nền sáng thì thanh mang màu thương
       hiệu cho nhận diện, nhưng nền tối thì thanh phải LÙI LẠI. Ca đêm nhìn
       một dải xanh sáng suốt 8 tiếng là chói mắt. */
    --header-bg:var(--brand);
    --header-ink:var(--tint);
    --header-edge:color-mix(in srgb,var(--brand) 62%,var(--shade));

    /* Kết luận kiểm tra — trái tim của sản phẩm.
       Mỗi kết luận có 3 sắc: nền nhạt, viền, màu đặc. */
    --verdict-ok:var(--green-600);
    --verdict-ok-soft:var(--green-050);
    --verdict-ng:var(--red-600);
    --verdict-ng-soft:var(--red-050);
    --verdict-rework:var(--amber-600);
    --verdict-rework-soft:var(--amber-050);
    --verdict-return:var(--violet-600);
    --verdict-return-soft:var(--violet-050);

    /* Trạng thái hệ thống */
    --state-ok:var(--green-600);
    --state-warn:var(--amber-600);
    --state-danger:var(--red-600);
    --state-info:var(--blue-600);

    /* Đổ bóng — rất tiết chế. Thiết bị công nghiệp trông chính xác,
       không trôi nổi; ưu tiên đường kẻ 1px hơn bóng đổ. */
    --shadow-1:0 1px 2px rgba(22,33,43,.06);
    --shadow-2:0 2px 8px rgba(22,33,43,.08);
    --shadow-pop:0 12px 32px rgba(13,21,28,.16);
    --ring:0 0 0 3px rgba(15,95,166,.22);

    /* ---------------------------------------------------------------------
       KHÔNG PHỤ THUỘC CHẾ ĐỘ SÁNG/TỐI
       --------------------------------------------------------------------- */

    /* Chữ: dùng font hệ thống — nhà máy có thể không có internet,
       và Segoe UI (Windows) / Roboto (Android) đều dựng dấu tiếng Việt tốt. */
    --font-ui:"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,
              "Noto Sans",system-ui,sans-serif;
    --font-data:"Cascadia Mono",Consolas,"SF Mono","Roboto Mono",
                "DejaVu Sans Mono",monospace;

    /* Thang chữ */
    --fs-eyebrow:11px;
    --fs-caption:12px;
    --fs-body-sm:13px;
    --fs-body:14px;
    --fs-body-lg:15px;
    --fs-h4:16px;
    --fs-h3:19px;
    --fs-h2:23px;
    --fs-h1:28px;
    --fs-display:clamp(26px,3.2vw,38px);

    --lh-tight:1.18;
    --lh-snug:1.35;
    --lh-body:1.55;

    --tracking-eyebrow:.09em;
    --tracking-tight:-.011em;

    /* Khoảng cách — thang 4px */
    --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
    --sp-5:20px;  --sp-6:24px;  --sp-8:32px;  --sp-10:40px;  --sp-12:48px;

    /* Bo góc */
    --radius-sm:6px;
    --radius:8px;
    --radius-lg:12px;
    --radius-pill:999px;

    /* Chiều cao điều khiển — đổi theo mật độ, xem bên dưới */
    --control-h:40px;
    --control-h-sm:32px;
    --control-h-lg:52px;
    --tap-min:44px;

    /* Bố cục khung ứng dụng */
    --header-h:56px;
    --tabbar-h:58px;
    --drawer-w:312px;
    --page-max:1680px;

    --safe-t:env(safe-area-inset-top,0px);
    --safe-b:env(safe-area-inset-bottom,0px);
    --safe-l:env(safe-area-inset-left,0px);
    --safe-r:env(safe-area-inset-right,0px);

    --ease:cubic-bezier(.32,.72,.32,1);
    --dur-fast:.14s;
    --dur:.22s;

    --z-header:100;
    --z-tabbar:200;
    --z-drawer:300;
    --z-modal:400;
    --z-toast:500;

    color-scheme:light;
  }

  /* -----------------------------------------------------------------------
     TẦNG 2 — NGỮ NGHĨA (chế độ tối)
     Không đảo ngược máy móc: nền tối được nâng sáng dần theo lớp, và các màu
     kết luận được đẩy sáng lên để giữ độ tương phản trên nền tối.
     Ca đêm trong xưởng dùng chế độ này.
     ----------------------------------------------------------------------- */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --surface-app:var(--slate-950);
      --surface-1:#172029;
      --surface-2:#1d2833;
      --surface-3:#25323e;
      --surface-inset:#111a22;

      --line:#2a3742;
      --line-strong:#3a4956;
      --line-faint:#212d38;

      --text-1:#e8eef4;
      --text-2:#b0bfcc;
      --text-3:#8496a6;

      --header-bg:#131c25;
      --header-ink:#e8eef4;
      --header-edge:#2a3742;

      --brand:var(--blue-400);
      --brand-strong:#5aa4e4;
      --brand-soft:#10263a;
      --brand-ink:#cfe2f4;
      --text-on-brand:#08243d;

      --verdict-ok:var(--green-400);
      --verdict-ok-soft:#0f2a1a;
      --verdict-ng:var(--red-400);
      --verdict-ng-soft:#2e1512;
      --verdict-rework:var(--amber-400);
      --verdict-rework-soft:#2b2113;
      --verdict-return:var(--violet-400);
      --verdict-return-soft:#221a38;

      --state-ok:var(--green-400);
      --state-warn:var(--amber-400);
      --state-danger:var(--red-400);
      --state-info:var(--blue-400);

      --shadow-1:0 1px 2px rgba(0,0,0,.4);
      --shadow-2:0 2px 8px rgba(0,0,0,.45);
      --shadow-pop:0 14px 38px rgba(0,0,0,.6);
      --ring:0 0 0 3px rgba(62,144,216,.32);

      color-scheme:dark;
    }
  }

  :root[data-theme="dark"]{
    --surface-app:var(--slate-950);
    --surface-1:#172029;
    --surface-2:#1d2833;
    --surface-3:#25323e;
    --surface-inset:#111a22;

    --line:#2a3742;
    --line-strong:#3a4956;
    --line-faint:#212d38;

    --text-1:#e8eef4;
    --text-2:#b0bfcc;
    --text-3:#8496a6;

    --header-bg:#131c25;
    --header-ink:#e8eef4;
    --header-edge:#2a3742;

    --brand:var(--blue-400);
    --brand-strong:#5aa4e4;
    --brand-soft:#10263a;
    --brand-ink:#cfe2f4;
    --text-on-brand:#08243d;

    --verdict-ok:var(--green-400);
    --verdict-ok-soft:#0f2a1a;
    --verdict-ng:var(--red-400);
    --verdict-ng-soft:#2e1512;
    --verdict-rework:var(--amber-400);
    --verdict-rework-soft:#2b2113;
    --verdict-return:var(--violet-400);
    --verdict-return-soft:#221a38;

    --state-ok:var(--green-400);
    --state-warn:var(--amber-400);
    --state-danger:var(--red-400);
    --state-info:var(--blue-400);

    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 8px rgba(0,0,0,.45);
    --shadow-pop:0 14px 38px rgba(0,0,0,.6);
    --ring:0 0 0 3px rgba(62,144,216,.32);

    color-scheme:dark;
  }

  /* -----------------------------------------------------------------------
     MẬT ĐỘ
     Cùng một giao diện phục vụ hai hoàn cảnh trái ngược: màn 24" ở trạm cần
     dày đặc, điện thoại ngoài xưởng cần ngón tay bấm trúng. Đổi bằng thuộc
     tính trên <body>, không phải viết lại CSS.
     ----------------------------------------------------------------------- */
  [data-density="compact"]{
    --control-h:34px;
    --control-h-sm:28px;
    --control-h-lg:44px;
    --sp-3:9px; --sp-4:12px; --sp-5:15px; --sp-6:18px;
    --fs-body:13px;
    --fs-body-sm:12px;
  }

  [data-density="touch"]{
    --control-h:48px;
    --control-h-sm:40px;
    --control-h-lg:60px;
    --fs-body:15px;
    --fs-body-sm:14px;
  }

  /* Điện thoại luôn ở mật độ chạm, bất kể thiết lập của trang. */
  @media (max-width:900px){
    :root{
      --control-h:48px;
      --control-h-sm:40px;
      --control-h-lg:58px;
      --fs-body:15px;
    }
  }
}


/* ==== static/src/20-reset.css =========================================== */
/* =============================================================================
   AMA UI — RESET
   Chuẩn hoá trình duyệt. Không có quyết định thẩm mỹ nào ở đây.
   ========================================================================== */

@layer reset {

  *,*::before,*::after{box-sizing:border-box}

  html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    -moz-tab-size:2;
    tab-size:2;
  }

  body{margin:0}

  h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}

  ul[class],ol[class]{list-style:none;margin:0;padding:0}

  img,picture,video,canvas,svg{display:block;max-width:100%}

  input,button,textarea,select{font:inherit;color:inherit;margin:0}

  button{background:none;border:0;padding:0;cursor:pointer}

  table{border-collapse:collapse;border-spacing:0}

  a{color:inherit;text-decoration:none}

  [hidden]{display:none}

  /* Chỉ hiện viền khi điều hướng bằng bàn phím — quét mã ở trạm dùng bàn phím
     rất nhiều, nên viền tiêu điểm phải rõ ràng và không bao giờ bị tắt. */
  :focus{outline:none}
  :focus-visible{
    outline:2px solid var(--brand);
    outline-offset:2px;
    border-radius:var(--radius-sm);
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms;
      animation-iteration-count:1;
      transition-duration:.01ms;
      scroll-behavior:auto;
    }
  }
}


/* ==== static/src/30-base.css ============================================ */
/* =============================================================================
   AMA UI — NỀN
   Kiểu chữ và văn bản mặc định. Chỉ dùng selector phần tử, chưa có component.
   ========================================================================== */

@layer base {

  body{
    background:var(--surface-app);
    color:var(--text-1);
    font-family:var(--font-ui);
    font-size:var(--fs-body);
    line-height:var(--lh-body);
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
    overflow-wrap:break-word;
  }

  h1,h2,h3,h4{
    font-weight:700;
    line-height:var(--lh-tight);
    letter-spacing:var(--tracking-tight);
    text-wrap:balance;
    color:var(--text-1);
  }
  h1{font-size:var(--fs-h1)}
  h2{font-size:var(--fs-h2)}
  h3{font-size:var(--fs-h3)}
  h4{font-size:var(--fs-h4)}

  small{font-size:var(--fs-caption)}

  b,strong{font-weight:700}

  a{color:var(--brand);text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent)}
  a:hover{text-decoration:underline}

  code,kbd,samp{
    font-family:var(--font-data);
    font-size:.9em;
  }

  /* Mã QR, mã kiện, số đo — luôn đều cột và không bị nhầm 0 với O. */
  .is-data,code,kbd,samp,time{
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum" 1,"zero" 1;
  }

  hr{
    border:0;
    border-top:1px solid var(--line);
    margin:var(--sp-5) 0;
  }

  ::selection{
    background:color-mix(in srgb,var(--brand) 22%,transparent);
  }

  /* Thanh cuộn chỉ tinh chỉnh trên thiết bị có chuột. */
  @media (hover:hover) and (pointer:fine){
    *::-webkit-scrollbar{width:11px;height:11px}
    *::-webkit-scrollbar-thumb{
      background:var(--line-strong);
      border:3px solid transparent;
      background-clip:content-box;
      border-radius:var(--radius-pill);
    }
    *::-webkit-scrollbar-thumb:hover{
      background:var(--text-3);
      background-clip:content-box;
    }
    *::-webkit-scrollbar-track{background:transparent}
  }
}


/* ==== static/src/40-layout.css ========================================== */
/* =============================================================================
   AMA UI — KHUNG ỨNG DỤNG
   Thanh trên, menu trượt, thanh dưới cho điện thoại, vùng nội dung, lưới.
   ========================================================================== */

@layer layout {

  /* -------------------------------------------------- Khung tổng ---------- */
  .ui-app{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    background:var(--surface-app);
  }

  .ui-main{
    flex:1 1 auto;
    width:100%;
    max-width:var(--page-max);
    margin-inline:auto;
    padding:var(--sp-4) max(var(--sp-4),var(--safe-l)) var(--sp-8) max(var(--sp-4),var(--safe-r));
  }

  @media (max-width:900px){
    .ui-main{
      padding:var(--sp-3) max(var(--sp-3),var(--safe-l))
              calc(var(--tabbar-h) + var(--safe-b) + var(--sp-4))
              max(var(--sp-3),var(--safe-r));
    }
  }

  /* -------------------------------------------------- Thanh trên ---------- */
  .ui-header{
    position:sticky;
    top:0;
    z-index:var(--z-header);
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    height:var(--header-h);
    padding-inline:max(var(--sp-4),var(--safe-l)) max(var(--sp-4),var(--safe-r));
    background:var(--header-bg);
    color:var(--header-ink);
    border-bottom:1px solid var(--header-edge);
  }

  .ui-header__brand{
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    min-width:0;
    flex:0 1 auto;
    color:inherit;
  }
  .ui-header__brand:hover{text-decoration:none}

  .ui-header__mark{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:var(--radius);
    background:color-mix(in srgb,var(--header-ink) 14%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--header-ink) 26%,transparent);
  }
  .ui-header__mark svg{width:19px;height:19px}

  .ui-header__names{display:flex;flex-direction:column;min-width:0;line-height:1.15}
  .ui-header__title{
    font-size:var(--fs-h4);font-weight:700;letter-spacing:.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .ui-header__sub{
    font-size:9.5px;
    font-weight:600;
    letter-spacing:var(--tracking-eyebrow);
    text-transform:uppercase;
    color:color-mix(in srgb,var(--header-ink) 72%,transparent);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  .ui-header__nav{display:flex;align-items:center;gap:var(--sp-1)}

  .ui-header__spacer{flex:1 1 auto;min-width:var(--sp-2)}

  .ui-header__tools{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto}

  /* Nút điều hướng trên thanh xanh */
  .ui-navbtn{
    display:inline-flex;
    align-items:center;
    gap:var(--sp-2);
    height:34px;
    padding-inline:var(--sp-3);
    border-radius:var(--radius);
    font-size:var(--fs-body-sm);
    font-weight:600;
    color:color-mix(in srgb,var(--header-ink) 88%,transparent);
    white-space:nowrap;
    transition:background var(--dur-fast) linear,color var(--dur-fast) linear;
  }
  .ui-navbtn svg{width:16px;height:16px;flex:0 0 auto}
  .ui-navbtn:hover{
    background:color-mix(in srgb,var(--header-ink) 13%,transparent);
    color:var(--header-ink);
    text-decoration:none;
  }
  .ui-navbtn[aria-current="page"]{
    background:var(--surface-1);
    color:var(--brand-ink);
  }

  /* Nút mở menu — chỉ xuất hiện khi thanh điều hướng không đủ chỗ */
  .ui-burger{
    display:none;
    flex:0 0 auto;
    width:40px;
    height:40px;
    border-radius:var(--radius);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
    background:color-mix(in srgb,var(--header-ink) 10%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--header-ink) 22%,transparent);
  }
  .ui-burger span{
    display:block;
    width:17px;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transition:transform var(--dur) var(--ease),opacity var(--dur-fast) linear;
  }
  [data-drawer="open"] .ui-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  [data-drawer="open"] .ui-burger span:nth-child(2){opacity:0}
  [data-drawer="open"] .ui-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* -------------------------------------------------- Menu trượt ---------- */
  .ui-scrim{
    position:fixed;
    inset:0;
    z-index:calc(var(--z-drawer) - 1);
    background:color-mix(in srgb,var(--slate-950) 62%,transparent);
    opacity:0;
    transition:opacity var(--dur) linear;
  }
  [data-drawer="open"] .ui-scrim{opacity:1}

  .ui-drawer{
    position:fixed;
    inset-block:0;
    inset-inline-start:0;
    z-index:var(--z-drawer);
    width:min(var(--drawer-w),86vw);
    display:flex;
    flex-direction:column;
    background:var(--surface-1);
    box-shadow:var(--shadow-pop);
    transform:translateX(-102%);
    transition:transform var(--dur) var(--ease);
    padding-inline-start:var(--safe-l);
  }
  [data-drawer="open"] .ui-drawer{transform:translateX(0)}

  .ui-drawer__head{
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    padding:var(--sp-4);
    background:var(--header-bg);
    color:var(--header-ink);
    border-bottom:1px solid var(--header-edge);
  }
  .ui-drawer__who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
  .ui-drawer__who b{font-size:var(--fs-body-lg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ui-drawer__who span{
    font-size:var(--fs-caption);
    color:color-mix(in srgb,var(--header-ink) 76%,transparent);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .ui-drawer__close{
    margin-inline-start:auto;
    flex:0 0 auto;
    width:38px;height:38px;
    display:grid;place-items:center;
    border-radius:var(--radius);
    background:color-mix(in srgb,var(--header-ink) 14%,transparent);
    color:inherit;
  }
  .ui-drawer__close svg{width:17px;height:17px}

  .ui-drawer__body{
    flex:1 1 auto;
    overflow-y:auto;
    padding:var(--sp-2) var(--sp-2) var(--sp-4);
  }

  .ui-drawer__group{
    margin:var(--sp-4) var(--sp-3) var(--sp-2);
    font-size:var(--fs-eyebrow);
    font-weight:700;
    letter-spacing:var(--tracking-eyebrow);
    text-transform:uppercase;
    color:var(--text-3);
  }
  .ui-drawer__group:first-child{margin-top:var(--sp-2)}

  .ui-drawer__link{
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    min-height:var(--tap-min);
    padding:var(--sp-2) var(--sp-3);
    border-radius:var(--radius);
    color:var(--text-1);
    font-size:var(--fs-body-lg);
    font-weight:500;
  }
  .ui-drawer__link:hover{background:var(--surface-2);text-decoration:none}
  .ui-drawer__link svg{
    width:19px;height:19px;flex:0 0 auto;color:var(--text-3);
  }
  .ui-drawer__link[aria-current="page"]{
    background:var(--brand-soft);
    color:var(--brand-ink);
    font-weight:700;
  }
  .ui-drawer__link[aria-current="page"] svg{color:var(--brand)}

  .ui-drawer__foot{
    display:flex;
    align-items:center;
    gap:var(--sp-2);
    padding:var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--safe-b));
    border-top:1px solid var(--line);
    background:var(--surface-2);
  }

  /* -------------------------------------------------- Thanh dưới ---------- */
  .ui-tabbar{
    display:none;
    position:fixed;
    inset-inline:0;
    bottom:0;
    z-index:var(--z-tabbar);
    background:color-mix(in srgb,var(--surface-1) 96%,transparent);
    border-top:1px solid var(--line);
    box-shadow:0 -2px 14px rgba(22,33,43,.08);
    padding-bottom:var(--safe-b);
    backdrop-filter:blur(12px);
  }

  .ui-tab{
    flex:1 1 0;
    min-width:0;
    height:var(--tabbar-h);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:var(--text-3);
    font-size:10.5px;
    font-weight:600;
  }
  .ui-tab svg{width:21px;height:21px}
  .ui-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
  .ui-tab:hover{text-decoration:none}
  .ui-tab[aria-current="page"]{color:var(--brand)}

  @media (max-width:900px){
    .ui-tabbar{display:flex}
  }

  /* Dưới 1100px thanh điều hướng ngang nhường chỗ cho menu trượt. */
  @media (max-width:1100px){
    .ui-header__nav{display:none}
    .ui-burger{display:flex}
    .ui-header__brand{flex:0 1 auto}
  }

  /* Màn hẹp: bỏ dòng phụ của thương hiệu để tên và các nút không tranh chỗ. */
  @media (max-width:620px){
    .ui-header{gap:var(--sp-2);padding-inline:var(--sp-3)}
    .ui-header__sub{display:none}
    .ui-header__title{font-size:var(--fs-body-lg)}
    .ui-header__mark{width:30px;height:30px}
    .ui-header__mark svg{width:17px;height:17px}
    /* Nút đổi nền nhường chỗ cho tên thương hiệu — nó vẫn nằm trong menu trượt. */
    .ui-header__tools .ui-navbtn{display:none}
    .ui-status{height:26px;padding-inline:var(--sp-2);font-size:10px}
  }

  body[data-drawer="open"]{overflow:hidden}

  /* -------------------------------------------------- Đăng nhập ---------- */
  /* Màn hình đầu tiên khách hàng nhìn thấy khi demo — hai cột trên máy tính,
     một cột trên điện thoại. */
  .ui-signin{
    min-height:100dvh;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    background:var(--surface-app);
  }
  .ui-signin__brand{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:var(--sp-8);
    padding:var(--sp-12) var(--sp-10);
    background:var(--brand);
    color:var(--tint);
  }
  .ui-signin__mark{
    width:56px;height:56px;
    display:grid;place-items:center;
    border-radius:var(--radius-lg);
    background:color-mix(in srgb,var(--tint) 15%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 28%,transparent);
  }
  .ui-signin__mark svg{width:30px;height:30px}
  .ui-signin__brand h1{font-size:var(--fs-display);color:var(--tint)}
  .ui-signin__brand p{
    margin-top:var(--sp-3);
    max-width:34ch;
    color:color-mix(in srgb,var(--tint) 82%,transparent);
    font-size:var(--fs-body-lg);
  }
  .ui-signin__meta{
    font-size:var(--fs-caption);
    color:color-mix(in srgb,var(--tint) 66%,transparent);
  }
  .ui-signin__panel{
    display:grid;
    place-items:center;
    padding:var(--sp-8) var(--sp-6);
  }
  .ui-signin__form{width:min(400px,100%);display:flex;flex-direction:column;gap:var(--sp-4)}
  .ui-signin__form h2{font-size:var(--fs-h2)}

  @media (max-width:860px){
    .ui-signin{grid-template-columns:minmax(0,1fr);min-height:auto}
    .ui-signin__brand{
      padding:var(--sp-6) var(--sp-5);
      gap:var(--sp-4);
      padding-top:calc(var(--sp-6) + var(--safe-t));
    }
    .ui-signin__brand h1{font-size:var(--fs-h2)}
    .ui-signin__brand p{font-size:var(--fs-body)}
    .ui-signin__meta{display:none}
    .ui-signin__panel{padding:var(--sp-6) var(--sp-4) calc(var(--sp-8) + var(--safe-b))}
  }

  /* -------------------------------------------------- Đầu trang ----------- */
  .ui-pagehead{
    display:flex;
    align-items:flex-start;
    gap:var(--sp-4);
    flex-wrap:wrap;
    margin-bottom:var(--sp-4);
  }
  .ui-pagehead__text{flex:1 1 320px;min-width:0}
  .ui-pagehead__eyebrow{
    font-size:var(--fs-eyebrow);
    font-weight:700;
    letter-spacing:var(--tracking-eyebrow);
    text-transform:uppercase;
    color:var(--text-3);
    margin-bottom:var(--sp-1);
  }
  .ui-pagehead h1{font-size:var(--fs-h2)}
  .ui-pagehead__note{color:var(--text-2);font-size:var(--fs-body);margin-top:var(--sp-1)}
  .ui-pagehead__actions{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}

  /* -------------------------------------------------- Lưới --------------- */
  .ui-grid{display:grid;gap:var(--sp-3)}
  .ui-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ui-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ui-grid--auto{grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
  .ui-grid--menu{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}

  .ui-grid > *{min-width:0}

  .ui-split{display:grid;gap:var(--sp-3);grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}

  @media (max-width:1100px){
    .ui-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ui-split{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:760px){
    .ui-grid--2,.ui-grid--3,.ui-grid--4{grid-template-columns:minmax(0,1fr)}
    .ui-grid--menu{grid-template-columns:repeat(2,minmax(0,1fr))}
  }

  .ui-stack{display:flex;flex-direction:column;gap:var(--sp-3)}
  .ui-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
  .ui-row--end{justify-content:flex-end}
  .ui-row--between{justify-content:space-between}
}


/* ==== static/src/50-components.css ====================================== */
/* =============================================================================
   AMA UI — COMPONENT
   Tên đặt theo CÔNG DỤNG, không theo phiên bản. Đây là toàn bộ vốn từ vựng
   giao diện của sản phẩm; trang nghiệp vụ chỉ được ghép từ những mảnh này.
   ========================================================================== */

@layer components {

  /* ======================================================== THẺ ============ */
  .ui-card{
    background:var(--surface-1);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-1);
  }
  .ui-card__head{
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    flex-wrap:wrap;
    padding:var(--sp-3) var(--sp-4);
    border-bottom:1px solid var(--line);
  }
  .ui-card__title{
    font-size:var(--fs-h4);
    font-weight:700;
    letter-spacing:var(--tracking-tight);
    margin-inline-end:auto;
  }
  .ui-card__note{font-size:var(--fs-caption);color:var(--text-3)}
  .ui-card__body{padding:var(--sp-4)}
  .ui-card__foot{
    display:flex;
    align-items:center;
    gap:var(--sp-2);
    flex-wrap:wrap;
    padding:var(--sp-3) var(--sp-4);
    border-top:1px solid var(--line);
    background:var(--surface-2);
    border-radius:0 0 var(--radius-lg) var(--radius-lg);
  }
  .ui-card--flush .ui-card__body{padding:0}
  .ui-card--accent{border-top:3px solid var(--brand)}

  /* ======================================================== NÚT ============ */
  .ui-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--sp-2);
    height:var(--control-h);
    padding-inline:var(--sp-4);
    border-radius:var(--radius);
    border:1px solid transparent;
    background:var(--surface-3);
    color:var(--text-1);
    font-size:var(--fs-body);
    font-weight:600;
    white-space:nowrap;
    transition:background var(--dur-fast) linear,
               border-color var(--dur-fast) linear,
               transform var(--dur-fast) var(--ease);
  }
  .ui-btn svg{width:17px;height:17px;flex:0 0 auto}
  .ui-btn:hover{background:color-mix(in srgb,var(--surface-3) 82%,var(--text-1));text-decoration:none}
  .ui-btn:active{transform:translateY(1px)}
  .ui-btn:disabled,.ui-btn[aria-disabled="true"]{
    opacity:.45;
    cursor:not-allowed;
    transform:none;
  }

  .ui-btn--primary{background:var(--brand);color:var(--text-on-brand)}
  .ui-btn--primary:hover{background:var(--brand-strong)}

  .ui-btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--text-1)}
  .ui-btn--ghost:hover{background:var(--surface-2);border-color:var(--text-3)}

  .ui-btn--quiet{background:transparent;color:var(--text-2)}
  .ui-btn--quiet:hover{background:var(--surface-2);color:var(--text-1)}

  .ui-btn--danger{background:var(--state-danger);color:var(--text-on-solid)}
  .ui-btn--danger:hover{background:color-mix(in srgb,var(--state-danger) 84%,var(--shade))}

  .ui-btn--sm{height:var(--control-h-sm);padding-inline:var(--sp-3);font-size:var(--fs-body-sm)}
  .ui-btn--lg{height:var(--control-h-lg);padding-inline:var(--sp-6);font-size:var(--fs-body-lg)}
  .ui-btn--block{width:100%}
  .ui-btn--icon{width:var(--control-h);padding:0}

  .ui-btngroup{display:flex;gap:var(--sp-2);flex-wrap:wrap}
  .ui-btngroup--fill > .ui-btn{flex:1 1 140px}

  /* ======================================================== BIỂU MẪU ======= */
  .ui-field{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}

  .ui-label{
    font-size:var(--fs-caption);
    font-weight:700;
    color:var(--text-2);
    letter-spacing:.01em;
  }
  .ui-label__req{color:var(--state-danger)}

  .ui-input,.ui-select,.ui-textarea{
    width:100%;
    min-height:var(--control-h);
    padding:var(--sp-2) var(--sp-3);
    border:1px solid var(--line-strong);
    border-radius:var(--radius);
    background:var(--surface-1);
    color:var(--text-1);
    font-size:var(--fs-body);
    transition:border-color var(--dur-fast) linear,box-shadow var(--dur-fast) linear;
  }
  .ui-textarea{min-height:96px;resize:vertical;line-height:var(--lh-body)}

  .ui-input::placeholder,.ui-textarea::placeholder{color:var(--text-3)}

  .ui-input:hover,.ui-select:hover,.ui-textarea:hover{border-color:var(--text-3)}

  .ui-input:focus,.ui-select:focus,.ui-textarea:focus{
    outline:none;
    border-color:var(--brand);
    box-shadow:var(--ring);
  }

  .ui-input:disabled,.ui-select:disabled,.ui-textarea:disabled,
  .ui-input[readonly]{
    background:var(--surface-inset);
    color:var(--text-2);
    cursor:not-allowed;
  }

  .ui-input[aria-invalid="true"]{border-color:var(--state-danger)}
  .ui-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--state-danger) 24%,transparent)}

  .ui-select{
    appearance:none;
    padding-inline-end:var(--sp-8);
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                     linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
    background-size:5px 5px,5px 5px;
    background-repeat:no-repeat;
  }

  .ui-hint{font-size:var(--fs-caption);color:var(--text-3)}
  .ui-error{font-size:var(--fs-caption);color:var(--state-danger);font-weight:600}

  /* Ô chọn — vùng chạm rộng bằng cả dòng chữ */
  .ui-check{
    display:inline-flex;
    align-items:center;
    gap:var(--sp-2);
    min-height:var(--tap-min);
    cursor:pointer;
    font-size:var(--fs-body);
  }
  .ui-check input{
    width:20px;height:20px;flex:0 0 auto;
    accent-color:var(--brand);
    cursor:pointer;
  }

  /* Công tắc */
  .ui-switch{display:inline-flex;align-items:center;gap:var(--sp-3);cursor:pointer}
  .ui-switch input{position:absolute;opacity:0;pointer-events:none}
  .ui-switch__track{
    width:44px;height:26px;flex:0 0 auto;
    border-radius:var(--radius-pill);
    background:var(--line-strong);
    padding:3px;
    transition:background var(--dur-fast) linear;
  }
  .ui-switch__dot{
    width:20px;height:20px;
    border-radius:50%;
    background:var(--surface-1);
    box-shadow:var(--shadow-1);
    transition:transform var(--dur) var(--ease);
  }
  .ui-switch input:checked + .ui-switch__track{background:var(--brand)}
  .ui-switch input:checked + .ui-switch__track .ui-switch__dot{transform:translateX(18px)}
  .ui-switch input:focus-visible + .ui-switch__track{box-shadow:var(--ring)}

  /* ======================================================== Ô BẮN QR ====== */
  /* Thành phần đặc trưng nhất của sản phẩm: người vận hành nhìn nó cả ca. */
  .ui-scan{
    display:flex;
    flex-direction:column;
    gap:var(--sp-2);
    padding:var(--sp-3);
    border:2px solid var(--line-strong);
    border-radius:var(--radius-lg);
    background:var(--surface-2);
    transition:border-color var(--dur-fast) linear,background var(--dur-fast) linear;
  }
  .ui-scan__label{
    display:flex;
    align-items:center;
    gap:var(--sp-2);
    font-size:var(--fs-eyebrow);
    font-weight:700;
    letter-spacing:var(--tracking-eyebrow);
    text-transform:uppercase;
    color:var(--text-3);
  }
  .ui-scan__label svg{width:15px;height:15px}
  .ui-scan__input{
    width:100%;
    height:var(--control-h-lg);
    padding-inline:var(--sp-4);
    border:1px solid var(--line-strong);
    border-radius:var(--radius);
    background:var(--surface-1);
    color:var(--text-1);
    font-family:var(--font-data);
    font-size:clamp(17px,2.1vw,23px);
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-variant-numeric:tabular-nums;
  }
  .ui-scan__input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
  .ui-scan__row{display:flex;gap:var(--sp-2);flex-wrap:wrap}
  .ui-scan__row > .ui-btn{flex:1 1 auto}

  .ui-scan[data-state="waiting"]{border-color:var(--line-strong)}
  .ui-scan[data-state="ready"]{border-color:var(--brand);background:var(--brand-soft)}
  .ui-scan[data-state="ok"]{border-color:var(--verdict-ok);background:var(--verdict-ok-soft)}
  .ui-scan[data-state="error"]{border-color:var(--state-danger);background:var(--verdict-ng-soft)}

  /* ======================================================== KẾT LUẬN ====== */
  /* OK / NG / REWORK / RETURN — không chỉ phân biệt bằng màu: mỗi nút có nhãn
     chữ riêng, để người mù màu và màn hình bạc màu vẫn đọc đúng. */
  .ui-verdicts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-2)}
  @media (max-width:760px){
    .ui-verdicts{grid-template-columns:repeat(2,minmax(0,1fr))}
  }

  .ui-verdict{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-height:var(--control-h-lg);
    padding:var(--sp-2);
    border:2px solid var(--line-strong);
    border-radius:var(--radius);
    background:var(--surface-1);
    color:var(--text-2);
    font-size:var(--fs-body-lg);
    font-weight:700;
    letter-spacing:.02em;
    transition:transform var(--dur-fast) var(--ease),
               background var(--dur-fast) linear,
               border-color var(--dur-fast) linear;
  }
  .ui-verdict small{font-size:9.5px;font-weight:600;letter-spacing:.05em;opacity:.72}
  .ui-verdict:active{transform:scale(.98)}

  .ui-verdict[data-verdict="ok"]:hover{border-color:var(--verdict-ok);background:var(--verdict-ok-soft)}
  .ui-verdict[data-verdict="ng"]:hover{border-color:var(--verdict-ng);background:var(--verdict-ng-soft)}
  .ui-verdict[data-verdict="rework"]:hover{border-color:var(--verdict-rework);background:var(--verdict-rework-soft)}
  .ui-verdict[data-verdict="return"]:hover{border-color:var(--verdict-return);background:var(--verdict-return-soft)}

  .ui-verdict[aria-pressed="true"][data-verdict="ok"]{background:var(--verdict-ok);border-color:var(--verdict-ok);color:var(--text-on-solid)}
  .ui-verdict[aria-pressed="true"][data-verdict="ng"]{background:var(--verdict-ng);border-color:var(--verdict-ng);color:var(--text-on-solid)}
  .ui-verdict[aria-pressed="true"][data-verdict="rework"]{background:var(--verdict-rework);border-color:var(--verdict-rework);color:var(--text-on-solid)}
  .ui-verdict[aria-pressed="true"][data-verdict="return"]{background:var(--verdict-return);border-color:var(--verdict-return);color:var(--text-on-solid)}

  /* ======================================================== NHÃN TRẠNG THÁI */
  .ui-pill{
    display:inline-flex;
    align-items:center;
    gap:var(--sp-1);
    padding:3px var(--sp-2);
    border-radius:var(--radius-pill);
    background:var(--surface-3);
    color:var(--text-2);
    font-size:var(--fs-eyebrow);
    font-weight:700;
    letter-spacing:.03em;
    white-space:nowrap;
  }
  .ui-pill::before{
    content:"";
    width:6px;height:6px;
    border-radius:50%;
    background:currentColor;
    flex:0 0 auto;
  }
  .ui-pill--bare::before{display:none}
  .ui-pill--ok{background:var(--verdict-ok-soft);color:var(--verdict-ok)}
  .ui-pill--ng{background:var(--verdict-ng-soft);color:var(--verdict-ng)}
  .ui-pill--rework{background:var(--verdict-rework-soft);color:var(--verdict-rework)}
  .ui-pill--return{background:var(--verdict-return-soft);color:var(--verdict-return)}
  .ui-pill--info{background:var(--brand-soft);color:var(--brand-ink)}

  /* Đèn báo kết nối máy chủ — xưởng cần thấy ngay khi rớt mạng */
  .ui-status{
    display:inline-flex;
    align-items:center;
    gap:var(--sp-2);
    height:30px;
    padding-inline:var(--sp-3);
    border-radius:var(--radius-pill);
    font-size:var(--fs-eyebrow);
    font-weight:700;
    letter-spacing:.03em;
    font-variant-numeric:tabular-nums;
    background:color-mix(in srgb,var(--header-ink) 16%,transparent);
    color:var(--header-ink);
    white-space:nowrap;
  }
  .ui-status__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
  .ui-status[data-state="online"]{background:var(--verdict-ok);color:var(--text-on-solid)}
  .ui-status[data-state="offline"]{background:var(--state-danger);color:var(--text-on-solid)}
  .ui-status[data-state="online"] .ui-status__dot{animation:ui-beat 2.4s ease-in-out infinite}

  @keyframes ui-beat{
    0%,100%{opacity:1}
    50%{opacity:.35}
  }

  /* ======================================================== Ô SỐ LIỆU ===== */
  .ui-kpi{
    display:flex;
    flex-direction:column;
    gap:var(--sp-1);
    padding:var(--sp-3) var(--sp-4);
    background:var(--surface-1);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
  }
  .ui-kpi__label{
    font-size:var(--fs-eyebrow);
    font-weight:700;
    letter-spacing:var(--tracking-eyebrow);
    text-transform:uppercase;
    color:var(--text-3);
  }
  .ui-kpi__value{
    font-size:var(--fs-h1);
    font-weight:700;
    line-height:1.05;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
    color:var(--text-1);
  }
  .ui-kpi__value small{font-size:var(--fs-body);font-weight:600;color:var(--text-3)}
  .ui-kpi__foot{font-size:var(--fs-caption);color:var(--text-3)}
  .ui-kpi--ok .ui-kpi__value{color:var(--verdict-ok)}
  .ui-kpi--ng .ui-kpi__value{color:var(--verdict-ng)}
  .ui-kpi--brand .ui-kpi__value{color:var(--brand)}

  /* ======================================================== BẢNG ========== */
  .ui-tablewrap{
    overflow:auto;
    overscroll-behavior-x:contain;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    background:var(--surface-1);
  }
  .ui-table{width:100%;font-size:var(--fs-body-sm)}
  .ui-table th,.ui-table td{
    padding:var(--sp-2) var(--sp-3);
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid var(--line-faint);
  }
  .ui-table thead th{
    position:sticky;
    top:0;
    z-index:1;
    background:var(--surface-2);
    color:var(--text-3);
    font-size:var(--fs-eyebrow);
    font-weight:700;
    letter-spacing:var(--tracking-eyebrow);
    text-transform:uppercase;
    white-space:nowrap;
    border-bottom:1px solid var(--line);
  }
  .ui-table tbody tr:last-child td{border-bottom:0}
  .ui-table tbody tr:hover{background:var(--surface-2)}
  .ui-table td.is-num,.ui-table th.is-num{
    text-align:right;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .ui-table td.is-code{font-family:var(--font-data);font-size:12px;white-space:nowrap}
  .ui-table--zebra tbody tr:nth-child(even){background:var(--surface-2)}
  .ui-table--zebra tbody tr:nth-child(even):hover{background:var(--surface-3)}

  /* ======================================================== TAB =========== */
  .ui-tabs{
    display:flex;
    gap:var(--sp-1);
    padding:var(--sp-1);
    background:var(--surface-3);
    border-radius:var(--radius-lg);
    overflow-x:auto;
    scrollbar-width:none;
  }
  .ui-tabs::-webkit-scrollbar{display:none}
  .ui-tabs__item{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:var(--sp-2);
    height:var(--control-h);
    padding-inline:var(--sp-4);
    border-radius:var(--radius);
    color:var(--text-2);
    font-size:var(--fs-body-sm);
    font-weight:600;
    white-space:nowrap;
  }
  .ui-tabs__item:hover{background:color-mix(in srgb,var(--surface-1) 60%,transparent);text-decoration:none}
  .ui-tabs__item[aria-selected="true"]{
    background:var(--surface-1);
    color:var(--brand-ink);
    box-shadow:var(--shadow-1);
  }

  /* ======================================================== THANH LỌC ===== */
  .ui-filterbar{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:var(--sp-2);
    align-items:end;
  }
  .ui-filterbar__actions{display:flex;gap:var(--sp-2);align-items:end}

  /* ======================================================== THÔNG BÁO ===== */
  .ui-alert{
    display:flex;
    gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4);
    border:1px solid var(--line);
    border-inline-start:3px solid var(--text-3);
    border-radius:var(--radius);
    background:var(--surface-1);
    font-size:var(--fs-body);
  }
  .ui-alert__icon{flex:0 0 auto;width:20px;height:20px;color:var(--text-3)}
  .ui-alert b{display:block;margin-bottom:2px}
  .ui-alert--ok{border-inline-start-color:var(--state-ok);background:var(--verdict-ok-soft)}
  .ui-alert--ok .ui-alert__icon{color:var(--state-ok)}
  .ui-alert--warn{border-inline-start-color:var(--state-warn);background:var(--verdict-rework-soft)}
  .ui-alert--warn .ui-alert__icon{color:var(--state-warn)}
  .ui-alert--danger{border-inline-start-color:var(--state-danger);background:var(--verdict-ng-soft)}
  .ui-alert--danger .ui-alert__icon{color:var(--state-danger)}
  .ui-alert--info{border-inline-start-color:var(--brand);background:var(--brand-soft)}
  .ui-alert--info .ui-alert__icon{color:var(--brand)}

  /* ======================================================== TRỐNG ========= */
  .ui-empty{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--sp-2);
    padding:var(--sp-10) var(--sp-4);
    text-align:center;
    color:var(--text-3);
  }
  .ui-empty svg{width:38px;height:38px;opacity:.55}
  .ui-empty b{color:var(--text-2);font-size:var(--fs-body-lg)}
  .ui-empty p{font-size:var(--fs-body-sm);max-width:44ch}

  /* ======================================================== HỘP THOẠI ===== */
  .ui-modal{
    position:fixed;
    inset:0;
    z-index:var(--z-modal);
    display:grid;
    place-items:center;
    padding:var(--sp-4);
    background:color-mix(in srgb,var(--slate-950) 58%,transparent);
  }
  .ui-modal__panel{
    width:min(640px,100%);
    max-height:min(88dvh,900px);
    display:flex;
    flex-direction:column;
    background:var(--surface-1);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-pop);
    overflow:hidden;
  }
  .ui-modal__head{
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    padding:var(--sp-4);
    border-bottom:1px solid var(--line);
  }
  .ui-modal__head h2{font-size:var(--fs-h3);margin-inline-end:auto}
  .ui-modal__body{padding:var(--sp-4);overflow-y:auto}
  .ui-modal__foot{
    display:flex;
    gap:var(--sp-2);
    justify-content:flex-end;
    padding:var(--sp-3) var(--sp-4);
    border-top:1px solid var(--line);
    background:var(--surface-2);
  }
  .ui-modal--wide .ui-modal__panel{width:min(1100px,100%)}

  @media (max-width:640px){
    .ui-modal{padding:0}
    .ui-modal__panel{
      width:100%;
      height:100dvh;
      max-height:100dvh;
      border-radius:0;
    }
    .ui-modal__foot{padding-bottom:calc(var(--sp-3) + var(--safe-b))}
    .ui-modal__foot .ui-btn{flex:1 1 auto}
  }

  /* ======================================================== NỔI LÊN ======= */
  .ui-toasts{
    position:fixed;
    z-index:var(--z-toast);
    inset-block-end:calc(var(--sp-4) + var(--safe-b));
    inset-inline-end:var(--sp-4);
    display:flex;
    flex-direction:column;
    gap:var(--sp-2);
    max-width:min(380px,calc(100vw - var(--sp-8)));
  }
  @media (max-width:900px){
    .ui-toasts{
      inset-block-end:calc(var(--tabbar-h) + var(--safe-b) + var(--sp-3));
      inset-inline:var(--sp-3);
      max-width:none;
    }
  }
  .ui-toast{
    display:flex;
    gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4);
    border-radius:var(--radius);
    background:var(--slate-900);
    color:var(--slate-025);
    box-shadow:var(--shadow-pop);
    font-size:var(--fs-body-sm);
    animation:ui-rise var(--dur) var(--ease);
  }
  .ui-toast--ok{background:var(--verdict-ok);color:var(--text-on-solid)}
  .ui-toast--danger{background:var(--state-danger);color:var(--text-on-solid)}

  @keyframes ui-rise{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:none}
  }

  /* ======================================================== ĐANG TẢI ====== */
  .ui-skeleton{
    border-radius:var(--radius-sm);
    background:linear-gradient(90deg,
      var(--surface-3) 25%,
      var(--surface-2) 37%,
      var(--surface-3) 63%);
    background-size:400% 100%;
    animation:ui-shimmer 1.4s linear infinite;
  }
  @keyframes ui-shimmer{
    from{background-position:100% 0}
    to{background-position:0 0}
  }

  .ui-progress{
    height:6px;
    border-radius:var(--radius-pill);
    background:var(--surface-3);
    overflow:hidden;
  }
  .ui-progress__bar{
    height:100%;
    border-radius:inherit;
    background:var(--brand);
    transition:width var(--dur) var(--ease);
  }

  /* ======================================================== ẢNH ĐẠI DIỆN == */
  .ui-avatar{
    width:34px;height:34px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--surface-1);
    color:var(--brand-ink);
    font-size:var(--fs-caption);
    font-weight:700;
    letter-spacing:.02em;
  }

  /* ======================================================== Ô CHỨC NĂNG === */
  /* Ô trên trang chủ — cửa ngõ vào từng nghiệp vụ. */
  .ui-menucard{
    display:flex;
    flex-direction:column;
    gap:var(--sp-3);
    padding:var(--sp-4);
    min-height:126px;
    background:var(--surface-1);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    color:var(--text-1);
    box-shadow:var(--shadow-1);
    transition:transform var(--dur-fast) var(--ease),
               border-color var(--dur-fast) linear,
               box-shadow var(--dur-fast) linear;
  }
  .ui-menucard:hover{
    transform:translateY(-2px);
    border-color:var(--brand);
    box-shadow:var(--shadow-2);
    text-decoration:none;
  }
  .ui-menucard:active{transform:translateY(0)}
  .ui-menucard__icon{
    width:34px;height:34px;
    display:grid;
    place-items:center;
    border-radius:var(--radius);
    background:var(--brand-soft);
    color:var(--brand);
  }
  .ui-menucard__icon svg{width:18px;height:18px}
  .ui-menucard__name{display:block;font-size:var(--fs-body-lg);font-weight:700;line-height:var(--lh-snug)}
  .ui-menucard__note{display:block;font-size:var(--fs-caption);color:var(--text-3);margin-top:2px;line-height:var(--lh-snug)}
  .ui-menucard__spacer{flex:1 1 auto}

  /* Sắc thái theo nhóm nghiệp vụ — dùng token kết luận để cả hệ thống
     chỉ có một bảng màu duy nhất. */
  .ui-menucard--ok .ui-menucard__icon{background:var(--verdict-ok-soft);color:var(--verdict-ok)}
  .ui-menucard--warn .ui-menucard__icon{background:var(--verdict-rework-soft);color:var(--verdict-rework)}
  .ui-menucard--danger .ui-menucard__icon{background:var(--verdict-ng-soft);color:var(--verdict-ng)}
  .ui-menucard--special .ui-menucard__icon{background:var(--verdict-return-soft);color:var(--verdict-return)}

  /* ======================================================== ĐOẠN MỤC ====== */
  .ui-sectionhead{
    display:flex;
    align-items:baseline;
    gap:var(--sp-3);
    flex-wrap:wrap;
    margin-bottom:var(--sp-3);
  }
  .ui-sectionhead h2{
    font-size:var(--fs-eyebrow);
    font-weight:700;
    letter-spacing:var(--tracking-eyebrow);
    text-transform:uppercase;
    color:var(--text-2);
  }
  .ui-sectionhead p{font-size:var(--fs-caption);color:var(--text-3)}
  .ui-sectionhead::after{
    content:"";
    flex:1 1 40px;
    height:1px;
    background:var(--line);
  }

  /* ======================================================== MÔ TẢ ========= */
  .ui-deflist{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-2) var(--sp-4)}
  .ui-deflist dt{
    font-size:var(--fs-caption);
    font-weight:700;
    color:var(--text-3);
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .ui-deflist dd{font-size:var(--fs-body);color:var(--text-1);min-width:0}
}


/* ==== static/src/90-utilities.css ======================================= */
/* =============================================================================
   AMA UI — TIỆN ÍCH
   Lớp cuối cùng, thắng mọi lớp trước. Giữ danh sách này NGẮN: mỗi tiện ích
   thêm vào là một lần né tránh việc đặt tên component cho tử tế.
   ========================================================================== */

@layer utilities {

  .u-hidden{display:none}
  .u-sr{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }

  .u-muted{color:var(--text-3)}
  .u-strong{font-weight:700}
  .u-data{font-family:var(--font-data);font-variant-numeric:tabular-nums}
  .u-nowrap{white-space:nowrap}
  .u-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .u-ok{color:var(--verdict-ok)}
  .u-ng{color:var(--verdict-ng)}
  .u-rework{color:var(--verdict-rework)}
  .u-return{color:var(--verdict-return)}

  .u-grow{flex:1 1 auto;min-width:0}
  .u-right{margin-inline-start:auto}

  .u-mt-2{margin-top:var(--sp-2)}
  .u-mt-4{margin-top:var(--sp-4)}
  .u-mt-6{margin-top:var(--sp-6)}
  .u-mb-3{margin-bottom:var(--sp-3)}
  .u-mb-6{margin-bottom:var(--sp-6)}

  @media (max-width:900px){
    .u-desktop-only{display:none}
  }
  @media (min-width:901px){
    .u-mobile-only{display:none}
  }

  /* ------------------------------------------------------------------ IN -- */
  @media print{
    .ui-header,.ui-tabbar,.ui-drawer,.ui-scrim,.ui-toasts,.u-noprint{display:none}
    .ui-main{padding:0;max-width:none}
    .ui-card{border:0;box-shadow:none;break-inside:avoid}
    .ui-tablewrap{border:0;overflow:visible}
    body{background:var(--tint)}
  }
}


/* ==== static/brand/amatech.css ========================================== */
/* =============================================================================
   THUONG HIEU — AMA TECH (mac dinh)
   Day la toan bo nhung gi can sua de ban cho mot khach hang moi.
   Chep file nay thanh <ten-khach>.css, doi 4 dong, xong.
   ========================================================================== */

@layer brand {
  :root{
    --brand:#0b4f8f;
    --brand-strong:#093e72;
    --brand-soft:#e8f1fa;
    --brand-ink:#093e72;
  }

  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --brand:#3e90d8;
      --brand-strong:#5aa4e4;
      --brand-soft:#10263a;
      --brand-ink:#cfe2f4;
    }
  }

  :root[data-theme="dark"]{
    --brand:#3e90d8;
    --brand-strong:#5aa4e4;
    --brand-soft:#10263a;
    --brand-ink:#cfe2f4;
  }
}