/* ===== QL TB — Quản lý thiết bị ===== */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --c-primary: #1e40af;
  --c-primary-dark: #1e3a8a;
  --c-primary-light: #dbeafe;
  --c-bg: #f3f4f6;
  --c-surface: #ffffff;
  --c-text: #111827;
  --c-text-muted: #6b7280;
  --c-border: #e5e7eb;
  --c-danger: #dc2626;
  --c-warning: #d97706;
  --c-success: #16a34a;
  --c-info: #0891b2;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --header-h: 56px;
  --sidebar-w: 240px;
  --c-surface-2: #f9fafb;
  --c-input-bg: #ffffff;
  --c-warning-light: #fff7ed;
  --c-info-light: #eff6ff;
  /* ===== Bộ màu TRẠNG THÁI chuẩn (đồng bộ web + Android + iOS + tablet) ===== */
  --st-good:     #22C55E;   /* Hoạt động tốt  — xanh lá */
  --st-inuse:    #2563EB;   /* Đang sử dụng   — xanh dương */
  --st-wait:     #F59E0B;   /* Chờ bảo trì    — cam */
  --st-maint:    #FBBF24;   /* Đang bảo trì   — vàng cam */
  --st-error:    #EF4444;   /* Hỏng / Lỗi     — đỏ */
  --st-stopped:  #94A3B8;   /* Ngừng sử dụng  — xám */
  --st-disposed: #475569;   /* Thanh lý       — xám đậm */
  --st-inspect:  #7C3AED;   /* Sắp kiểm định  — tím */
}

/* ===== Dark mode ===== */
[data-theme="dark"] {
  --c-primary: #60a5fa;
  --c-primary-dark: #3b82f6;
  --c-primary-light: #1e3a5f;
  --c-bg: #0f172a;
  --c-surface: #1e293b;
  --c-surface-2: #243047;
  --c-input-bg: #0f172a;
  --c-text: #e5e9f0;
  --c-text-muted: #94a3b8;
  --c-border: #334155;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow: 0 6px 18px rgba(0,0,0,0.55);
  --c-warning-light: #3d2a04;
  --c-info-light: #1e3a5f;
}
[data-theme="dark"] .topbar,
[data-theme="dark"] .card,
[data-theme="dark"] .stat,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .modal,
[data-theme="dark"] .m1-card,
[data-theme="dark"] .bottom-nav { background: var(--c-surface); }
[data-theme="dark"] .btn--secondary { background: var(--c-surface); color: var(--c-text); }
[data-theme="dark"] .btn--secondary:hover { background: var(--c-surface-2); }
[data-theme="dark"] table.table th { background: var(--c-surface-2); color: var(--c-text-muted); }
[data-theme="dark"] table.table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.03); }
[data-theme="dark"] table.table tbody tr:hover td { background: var(--c-primary-light); }
[data-theme="dark"] input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .search input { background: var(--c-input-bg); color: var(--c-text); border-color: var(--c-border); }
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"] { color-scheme: dark; }
[data-theme="dark"] .m1-specs,
[data-theme="dark"] .m1-card__thumb,
[data-theme="dark"] .tabs { background: var(--c-input-bg); }
[data-theme="dark"] .tab.active { background: var(--c-surface); }
/* Badge trạng thái dùng MÀU ĐẶC theo bộ màu chuẩn — giống nhau ở light & dark. */
[data-theme="dark"] .qr-display { background: var(--c-surface); }
[data-theme="dark"] .m2-seg__btn.is-active { background: var(--c-surface-2); color: var(--c-primary); }
[data-theme="dark"] .search { background: var(--c-surface-2); }
[data-theme="dark"] .alert-bar { background: #3d2a04; border-color: #78450a; color: #fde68a; }
[data-theme="dark"] .alert-bar--danger { background: #3b0a0a; border-color: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .card--danger { background: #3b0a0a; border-color: #7f1d1d; }
[data-theme="dark"] .card--danger h4 { color: #fca5a5; }
[data-theme="dark"] .card--warning { background: var(--c-warning-light); border-left-color: #f59e0b; }
[data-theme="dark"] .card--warning h4 { color: #fde68a; }
[data-theme="dark"] .card--info { background: var(--c-info-light); border-left-color: #3b82f6; }
[data-theme="dark"] .card--info h4 { color: #93c5fd; }
[data-theme="dark"] .card--from { background: #3d2a04; border-left-color: #f59e0b; }
[data-theme="dark"] .card--from h4 { color: #fde68a; }
[data-theme="dark"] .card--to { background: #052e16; border-left-color: #16a34a; }
[data-theme="dark"] .card--to h4 { color: #86efac; }

html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#bg-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
#app {
  position: relative;
  z-index: 1;
}
:root {
  --bg-particle-dot: rgba(255,255,255,0.55);
  --bg-particle-line: rgba(255,255,255,0.14);
}
[data-theme="dark"] {
  --bg-particle-dot: rgba(147,197,253,0.38);
  --bg-particle-line: rgba(96,165,250,0.12);
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Boot screen ===== */
.boot {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: var(--c-bg);
}
.boot__spinner {
  width: 48px; height: 48px;
  border: 4px solid var(--c-primary-light);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.boot__text { color: var(--c-text-muted); font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Login ===== */
.login {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background-color: #1b2347;
  /* background-image: url('../icons/login-bg.svg'); */
  background-size: cover; background-position: center;
  padding: 20px;
}
.login__card {
  background: #eef1f5; padding: 40px 34px 26px; border-radius: 24px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  width: 100%; max-width: 430px;
}
.login__logo-img { display: block; margin: 0 auto 30px; height: 70px; width: auto; max-width: 80%; }
.login__card .form-group { margin-bottom: 18px; }
.login__card .form-group label {
  display: block; font-size: 15px; font-weight: 600; color: #3b4252; margin-bottom: 8px;
}
.login__field { position: relative; }
.login__field .login__ic {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: #9aa1ab; display: flex; pointer-events: none;
}
/* Đặc tả cao hơn rule input cơ sở để chừa chỗ cho icon (icon KHÔNG đè chữ) */
.login__card .login__field input {
  width: 100%; padding: 15px 16px 15px 48px;
  border: 1px solid #d7dce3; border-radius: 14px; background: #f5f7fa;
  font-size: 16px; color: #1f2937; transition: border-color .15s, background .15s; min-height: 0;
}
.login__card .login__field input::placeholder { color: #9aa1ab; }
.login__card .login__field input:focus { outline: none; border-color: #7b87f5; background: #fff; box-shadow: 0 0 0 3px rgba(123,135,245,.18); }
/* Đặc tả cao hơn .btn để nút đăng nhập đúng màu chàm tím + bo tròn như thiết kế */
.login__card .login__submit {
  width: 100%; padding: 15px; margin-top: 6px;
  background: #7b87f5; color: #fff; border: none; border-radius: 14px;
  font-size: 17px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 16px rgba(123,135,245,.35);
  transition: background .15s, box-shadow .15s, transform .05s;
}
.login__card .login__submit:hover { background: #6b78f0; box-shadow: 0 8px 22px rgba(123,135,245,.45); }
.login__card .login__submit:active { transform: translateY(1px); }
.login__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px;
}
.login__forgot {
  display: inline-flex; align-items: center; gap: 7px;
  color: #5b6cf0; font-size: 15px; text-decoration: none;
}
.login__forgot:hover { text-decoration: underline; }
.login__forgot-ic { display: flex; }
.login__ver { color: #3b4252; font-size: 14px; font-weight: 700; }

/* ===== Layout ===== */
.layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar-backdrop { display: none; }
.sidebar {
  background: var(--c-primary-dark); color: #e5e7eb;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
}
.sidebar__brand {
  padding: 18px 18px; font-weight: 700; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: 10px; font-size: 16px;
}
.sidebar__brand span.dot { width: 10px; height: 10px; border-radius: 50%; background: #60a5fa; }
.sidebar__logo-img { height: 46px; width: auto; max-width: 100%; background: #fff; border-radius: 10px; padding: 7px 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.sidebar__company {
  padding: 8px 18px 2px; font-size: 11px; line-height: 1.4;
  color: #93c5fd; letter-spacing: .3px; text-transform: uppercase;
}
.sidebar__company-en {
  padding: 0 18px 14px; font-size: 10px; line-height: 1.3;
  color: #93c5fd; letter-spacing: .3px; text-transform: uppercase; opacity: .8;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar__nav { padding: 8px 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sidebar__item {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 16px; color: #cbd5e1; cursor: pointer;
  font-size: 14.5px; font-weight: 500; letter-spacing: .2px;
  border-left: 3px solid transparent; border-radius: 0 8px 8px 0;
}
.sidebar__item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar__item.active {
  background: rgba(255,255,255,0.1); color: #fff;
  border-left-color: #60a5fa;
}
.sidebar__item .icon { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: #ffffff; }
.sidebar__item .icon svg { width: 22px; height: 22px; display: block; }
.sidebar__footer {
  flex: none; padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12px;
  background: var(--c-primary-dark);
}
.sidebar__user { color: #fff; font-weight: 600; }
.sidebar__role { color: #94a3b8; }
.sidebar__logout {
  margin-top: 8px; background: rgba(255,255,255,0.1); color: #fff;
  border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; width: 100%;
  font-size: 13px;
}
.sidebar__logout:hover { background: rgba(255,255,255,0.2); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: #fff; border-bottom: 1px solid var(--c-border);
  /* env(safe-area-inset-*) = 0 trên web → không đổi UI; trên iPhone có notch
     sẽ đẩy header xuống dưới tai thỏ / status bar cho khỏi bị che. */
  padding: env(safe-area-inset-top, 0px) calc(20px + env(safe-area-inset-right, 0px)) 0 calc(20px + env(safe-area-inset-left, 0px));
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between;
}
.topbar__title { font-size: 18px; font-weight: 600; margin: 0; }
.topbar__actions { display: flex; gap: 8px; align-items: center; }
.topbar__menu {
  display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--c-text);
}
/* Giới hạn & căn giữa nội dung trên màn hình lớn để bố cục cân đối, "chuẩn web"
   (màn nhỏ không đổi vì chưa chạm max-width). Topbar vẫn full-width. */
.content { padding: 14px 18px; flex: 1; width: 100%; max-width: 1440px; margin-inline: auto; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 8px; border: 1px solid transparent;
  background: var(--c-primary); color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  text-decoration: none;
}
.btn:hover { background: var(--c-primary-dark); }
.btn:active { transform: translateY(1px); }
.btn--secondary { background: #fff; color: var(--c-text); border-color: var(--c-border); }
.btn--secondary:hover { background: #f9fafb; }
.btn--danger { background: var(--c-danger); }
.btn--danger:hover { background: #b91c1c; }
.btn--success { background: var(--c-success); }
.btn--warning { background: var(--c-warning); }
.btn--ghost { background: transparent; color: var(--c-primary); }
.btn--ghost:hover { background: var(--c-primary-light); }
.btn--sm { padding: 6px 10px; font-size: 13px; }
.btn--lg { padding: 14px 22px; font-size: 16px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* ===== Cards ===== */
.card {
  background: var(--c-surface); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 14px; border: 1px solid var(--c-border);
  margin-bottom: 12px;
}
.card--danger { background: #fef2f2; border-color: #fecaca; }
.card--danger h4 { color: #991b1b; }
.card--warning { background: var(--c-warning-light); border-left: 4px solid #f59e0b; }
.card--warning h4 { color: #92400e; }
.card--info { background: var(--c-info-light); border-left: 4px solid #3b82f6; }
.card--info h4 { color: #1d4ed8; }
.card--from { background: #fffbeb; border-left: 3px solid #f59e0b; }
.card--from h4 { color: #92400e; }
.card--to { background: #ecfdf5; border-left: 3px solid #16a34a; }
.card--to h4 { color: #065f46; }
.card__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 10px; flex-wrap: wrap;
}
.card__title { font-size: 16px; font-weight: 600; margin: 0; }

/* ===== Stats grid ===== */
.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 14px; }
.stat {
  background: #fff; padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--c-border); box-shadow: var(--shadow-sm);
}
.stat__label { color: var(--c-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.stat__value { font-size: 26px; font-weight: 700; color: var(--c-text); }
.stat__sub { color: var(--c-text-muted); font-size: 12px; margin-top: 4px; }
.stat--primary { border-top: 3px solid var(--c-primary); }
.stat--success { border-top: 3px solid var(--c-success); }
.stat--warning { border-top: 3px solid var(--c-warning); }
.stat--danger { border-top: 3px solid var(--c-danger); }
.stat--info { border-top: 3px solid var(--c-info); }
.stat { transition: box-shadow .15s ease, transform .15s ease; }
.stat:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* ===== Tables ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--c-border); background: #fff; }
.table-wrap--scroll { max-height: 64vh; overflow: auto; }
table.table.table--sticky thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px 0 var(--c-border); }
.m1-pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.table th, table.table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
table.table th { background: #f9fafb; font-weight: 600; color: var(--c-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }
table.table tbody tr:nth-child(even) td { background: var(--c-surface-2); }
table.table tr:last-child td { border-bottom: none; }
table.table tbody tr:hover td { background: var(--c-primary-light); }
table.table .row-actions { display: flex; gap: 6px; }

/* ===== Forms ===== */
.form-group { margin-bottom: 10px; }
.form-group label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--c-text); }
.form-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-control, input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="password"], input[type="email"], input[type="search"], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--c-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(30,64,175,0.15);
}
textarea { min-height: 80px; resize: vertical; }
.form-hint { font-size: 12px; color: var(--c-text-muted); margin-top: 4px; }

/* ===== Modal ===== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto;
}
.modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 640px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25); max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
}
.modal--wide { max-width: 900px; }
.modal--narrow { max-width: 420px; }
.modal__header { padding: 16px 20px; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; align-items: center; }
.modal__title { margin: 0; font-size: 17px; font-weight: 600; }
.modal__close { background: none; border: none; font-size: 24px; color: var(--c-text-muted); cursor: pointer; }
.modal__body { padding: 20px; overflow-y: auto; flex: 1; }
.modal__footer { padding: 14px 20px; border-top: 1px solid var(--c-border); display: flex; justify-content: flex-end; gap: 8px; }

/* ===== Badges ===== */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
/* Trạng thái thiết bị — màu đặc theo bộ màu chuẩn */
.badge--running     { background: var(--st-good);     color: #fff; }    /* Hoạt động tốt */
.badge--stopped     { background: var(--st-stopped);  color: #1f2937; } /* Ngừng sử dụng */
.badge--maintenance { background: var(--st-maint);    color: #1f2937; } /* Đang bảo trì */
.badge--repair      { background: var(--st-error);    color: #fff; }    /* Hỏng / Lỗi */
.badge--disposed    { background: var(--st-disposed); color: #fff; }    /* Thanh lý */
/* Badge tiện ích — đồng bộ cùng bộ màu chuẩn */
.badge--success     { background: var(--st-good);     color: #fff; }
.badge--info        { background: var(--st-inuse);    color: #fff; }    /* Đang sử dụng */
.badge--warning     { background: var(--st-wait);     color: #1f2937; } /* Chờ bảo trì */
.badge--danger      { background: var(--st-error);    color: #fff; }
.badge--secondary   { background: var(--st-stopped);  color: #1f2937; }
.badge--purple, .badge--inspect { background: var(--st-inspect); color: #fff; } /* Sắp kiểm định */

/* ===== Toast ===== */
.toast-wrap {
  position: fixed; top: 70px; right: 16px; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: #1f2937; color: #fff; padding: 12px 16px; border-radius: 8px;
  min-width: 240px; max-width: 380px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  animation: toast-in 0.2s ease-out;
  font-size: 14px;
}
.toast--success { background: #16a34a; }
.toast--error { background: #dc2626; }
.toast--warning { background: #d97706; }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== Tabs ===== */
.tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tab {
  background: none; border: none; padding: 10px 16px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--c-text-muted);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }
.tab:hover { color: var(--c-text); }

/* ===== Misc ===== */
.empty { padding: 40px 20px; text-align: center; color: var(--c-text-muted); }
.empty__icon { font-size: 48px; margin-bottom: 8px; opacity: 0.4; }
.muted { color: var(--c-text-muted); font-size: 13px; }
.flex { display: flex; gap: 8px; align-items: center; }
.flex--between { justify-content: space-between; }
.flex--wrap { flex-wrap: wrap; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.dl { display: grid; grid-template-columns: 160px 1fr; row-gap: 8px; column-gap: 12px; font-size: 14px; }
.dl dt { color: var(--c-text-muted); font-weight: 500; }
.dl dd { margin: 0; color: var(--c-text); }
.search {
  display: flex; align-items: center; gap: 8px; max-width: 320px;
  background: #f9fafb; border: 1px solid var(--c-border); border-radius: 8px;
  padding: 0 12px;
}
.search input { border: none; background: transparent; padding: 10px 0; flex: 1; }
.search input:focus { box-shadow: none; }
.qr-display {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px; background: #fff;
}
.qr-display canvas, .qr-display img { max-width: 100%; height: auto; }
.qr-scanner { background: #000; border-radius: 8px; overflow: hidden; min-height: 280px; }
#qr-reader { width: 100%; }
.alert-bar {
  background: #fef3c7; border: 1px solid #fcd34d; color: #92400e;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 14px;
}
.alert-bar--danger { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.alert-bar--info { background: var(--c-primary-light); border-color: #93c5fd; color: var(--c-primary-dark); }

/* ===== Quick actions on QR scan landing ===== */
.qr-actions { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 16px; }
.qr-actions .btn { padding: 16px 12px; font-size: 14px; }

/* ===== Mobile ===== */
/* ===== Bottom tab bar (mobile) ===== */
.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: #ffffff; border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 14px rgba(0,0,0,0.07);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 2px 7px; min-height: 56px;
  background: none; border: none; cursor: pointer;
  color: #6b7280; text-decoration: none; font-family: inherit;
}
.bottom-nav__item.active { color: var(--c-primary); }
.bottom-nav__ic { font-size: 21px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.bottom-nav__ic svg { width: 24px; height: 24px; display: block; }
.bottom-nav__lbl { font-size: 10.5px; font-weight: 600; }

@media (max-width: 900px) {
  :root { --sidebar-w: 240px; }
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: 0; top: 0;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    width: var(--sidebar-w); height: auto;
    transform: translateX(-100%); transition: transform 0.2s ease-out;
    z-index: 46; box-shadow: 0 0 30px rgba(0,0,0,0.3);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 30;
  }
  .sidebar-backdrop.is-open { display: block; }
  .topbar__menu { display: block; }
  .form-row, .form-row--3 { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; row-gap: 2px; }
  .dl dt { margin-top: 8px; }
  .content { padding: 14px 14px 80px; }
  .btn { padding: 11px 16px; }
  .btn--block-mobile { width: 100%; }
  .bottom-nav { display: flex; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat__value { font-size: 22px; }
  table.table th, table.table td { padding: 8px 10px; font-size: 13px; }
  .modal { max-height: calc(100vh - 16px); }
}

@media print {
  .sidebar, .topbar, .sidebar-backdrop, .btn, .no-print, .bottom-nav { display: none !important; }
  .layout { grid-template-columns: 1fr; }
  .content { padding: 0; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ============================================================
   MODULE 1 — DANH MỤC THIẾT BỊ
   ============================================================ */
.m1-section {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}

/* ---- Card grid (chế độ thẻ) ---- */
.m1-cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.m1-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.m1-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); transform: translateY(-1px); }
.m1-card__check { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(255,255,255,.9); border-radius: 4px; padding: 2px 4px; }
.m1-card__thumb { display: block; aspect-ratio: 4/3; background: #f3f4f6; overflow: hidden; }
.m1-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m1-card__placeholder { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 48px; opacity: .35; }
.m1-card__body { padding: 12px; }
.m1-card__code { font-size: 11px; color: #6b7280; font-weight: 600; }
.m1-card__name { display: block; font-weight: 600; color: var(--c-text); margin: 2px 0 6px; text-decoration: none; }
.m1-card__name:hover { color: var(--c-primary); }
.m1-card__meta { font-size: 12px; color: #6b7280; line-height: 1.5; }
.m1-card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; font-size: 12px; }

/* ---- Info grid (chi tiết) ---- */
.m1-info-grid {
  display: grid;
  gap: 12px 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 8px 0;
}
.m1-info { padding: 6px 0; border-bottom: 1px dashed #eef0f3; }
.m1-info__lbl { font-size: 11px; text-transform: uppercase; color: #6b7280; letter-spacing: .3px; }
.m1-info__val { font-size: 14px; color: var(--c-text); margin-top: 2px; word-break: break-word; }
.m1-specs { padding: 12px; background: #f9fafb; border-radius: 6px; white-space: pre-wrap; font-size: 14px; line-height: 1.55; }

/* ---- Ảnh thumbnail ---- */
.m1-thumbs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.m1-thumb { position: relative; width: 90px; height: 90px; border-radius: 6px; overflow: hidden; border: 1px solid var(--c-border); }
.m1-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.m1-thumb__x {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0;
}
.m1-thumb__x:hover { background: rgba(239,68,68,.9); }
.m1-thumbs--lg .m1-thumb { width: 160px; height: 160px; }

/* ---- Tài liệu ---- */
.m1-doc {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #f9fafb;
  border: 1px solid var(--c-border); border-radius: 6px;
  margin-bottom: 6px;
}
.m1-doc a { color: var(--c-primary); text-decoration: none; flex: 1; }
.m1-doc a:hover { text-decoration: underline; }

/* ---- QR box ---- */
.m1-qr-box {
  display: flex; gap: 24px; align-items: center; padding: 20px;
  background: #f9fafb; border-radius: var(--radius);
  flex-wrap: wrap; justify-content: center;
}
.m1-qr-box img { width: 240px; height: 240px; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--c-border); }
.m1-qr-info { min-width: 200px; }
.m1-qr-print {
  background: #fff; border: 1px dashed #cbd5e1;
  display: flex; align-items: center; gap: 8px; padding: 6px;
  box-sizing: border-box;
}
.m1-qr-print img { height: 80%; aspect-ratio: 1; object-fit: contain; }
.m1-qr-print__txt { font-size: 11px; line-height: 1.2; overflow: hidden; }

.muted { color: #6b7280; }

/* Mobile: card-grid 2 cột; form-row đổ về 1 cột */
@media (max-width: 640px) {
  .m1-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .m1-info-grid { grid-template-columns: 1fr; }
  .m1-qr-box img { width: 180px; height: 180px; }
}

/* ============================================================
   MODULE 2 — MÃ QR / BARCODE  (PRD §3.2)
   ============================================================ */

/* ---- Hero của trang Kết quả quét + đầu modal quick action ---- */
.m2-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; margin-bottom: 12px;
}
.m2-hero__photo {
  width: 84px; height: 84px; flex-shrink: 0;
  object-fit: cover; border-radius: 10px;
  border: 1px solid var(--c-border); background: #f3f4f6;
}
.m2-hero__photo--ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; opacity: .4;
}
.m2-hero__body { min-width: 0; flex: 1; }
.m2-hero__code {
  font-size: 12px; font-weight: 700; color: var(--c-primary);
  letter-spacing: .5px;
}
.m2-hero__name {
  font-size: 20px; font-weight: 700; color: var(--c-text);
  margin: 2px 0 6px; line-height: 1.25;
  word-break: break-word;
}
.m2-hero__meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 13px;
}

/* ---- Section heading nhỏ ---- */
.m2-section {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b7280;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
  display: flex; justify-content: space-between; align-items: baseline;
}
.m2-section__more {
  font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--c-primary);
}

/* ---- Quick action buttons ---- */
.m2-quick {
  display: grid; gap: 10px; grid-template-columns: 1fr 1fr;
  margin-bottom: 14px;
}
.m2-quick__btn {
  padding: 18px 12px !important; font-size: 15px !important;
  display: flex; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center;
  border-radius: 12px; box-shadow: var(--shadow-sm);
}
.m2-quick__ic { font-size: 26px; line-height: 1; }

/* ---- Key/value rút gọn cho trang Kết quả quét ---- */
.m2-kv {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 8px; padding: 6px 0;
  border-bottom: 1px dashed #eef0f3;
  font-size: 14px;
}
.m2-kv:last-child { border-bottom: none; }
.m2-kv__l { color: #6b7280; font-size: 12px; align-self: center; }
.m2-kv__v { color: var(--c-text); word-break: break-word; }

/* ---- Mục lịch sử sửa chữa / kiểm định trong scan result ---- */
.m2-rep {
  padding: 10px 0; border-bottom: 1px dashed #eef0f3;
}
.m2-rep:last-child { border-bottom: none; }
.m2-rep__top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 4px;
}
.m2-rep__code { font-weight: 600; color: var(--c-text); font-size: 13px; }
.m2-rep__sym { font-size: 14px; color: var(--c-text); margin: 2px 0; }
.m2-rep__meta { font-size: 12px; color: #6b7280; }

/* ---- Segment button (chọn mức độ / kích thước / loại mã) ---- */
.m2-seg {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  background: #f3f4f6; padding: 4px; border-radius: 10px;
}
.m2-seg__btn {
  background: transparent; border: none;
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--c-text-muted);
}
.m2-seg__btn:hover { color: var(--c-text); }
.m2-seg__btn.is-active {
  background: #fff; color: var(--c-primary);
  box-shadow: var(--shadow-sm);
}

/* ---- Nhập mã thủ công ---- */
.m2-manual {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed var(--c-border);
}
.m2-manual label {
  display: block; font-size: 12px; color: var(--c-text-muted);
  margin-bottom: 6px;
}

/* ---- Print hub: nhóm cấu hình ---- */
.m2-print-cfg {
  display: flex; flex-direction: column; gap: 6px;
}
.m2-print-cfg > label {
  font-size: 12px; font-weight: 600; color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: .4px;
}

/* ---- Print hub list + counter ---- */
.m2-print-list { margin-top: 12px; }
.m2-print-list table.table th:first-child,
.m2-print-list table.table td:first-child { width: 36px; text-align: center; }
.m2-print-count {
  display: inline-block; padding: 3px 9px; background: var(--c-primary-light);
  color: var(--c-primary-dark); border-radius: 999px; font-size: 12px; font-weight: 600;
}

/* ---- Generic grid helper dùng chung cho các module (m3..m6) ---- */
.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Ép GIỮ bố cục 1×3 (3 cột trên 1 hàng) ở mọi kích thước — cho thẻ thống kê 3 mục */
.grid--keep3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px; }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  /* Thẻ thống kê giữ bố cục 2 cột (2x2) trên điện thoại — không co về 1 cột */
  .grid--stats.grid--3, .grid--stats.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Ẩn phần tử trên bố cục mobile (khi thanh tab dưới hoạt động ở ≤900px) */
@media (max-width: 900px) { .u-hide-mobile { display: none !important; } }

/* ---- Mobile tinh chỉnh ---- */
@media (max-width: 640px) {
  .m2-hero__name { font-size: 18px; }
  .m2-hero__photo { width: 70px; height: 70px; }
  .m2-kv { grid-template-columns: 100px 1fr; }
  /* Giữ lưới 2x2 cho các nút thao tác nhanh trên điện thoại */
  .m2-quick { grid-template-columns: 1fr 1fr; }
}

/* ===== Tiêu chuẩn chạm (điện thoại Android/iOS + máy tính bảng) =====
   Đặt CUỐI file để thắng thứ tự cascade so với các rule cơ sở phía trên.
   - Mọi nút bấm vùng chạm tối thiểu 44x44 px
   - Ô nhập 16px: chống iOS tự phóng to khi focus + dễ đọc (≥14px)
   - Mục điều hướng đủ cao để điều khiển bằng ngón tay
   Áp dụng cho màn ≤1024px HOẶC thiết bị cảm ứng; desktop (chuột) vẫn gọn. */
@media (max-width: 1024px), (pointer: coarse) {
  .btn { min-height: 44px; }
  .tab { min-height: 44px; }
  .topbar__actions .btn, .row-actions .btn, .m1-pager .btn { min-width: 44px; }
  .badge .btn { min-height: 0; min-width: 0; }      /* nút ✕ trong chip giữ nhỏ */
  .sidebar__item { padding-top: 13px; padding-bottom: 13px; }
  .form-control, input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="password"], input[type="email"], input[type="search"], select, textarea { font-size: 16px; }
  .form-control, input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="password"], input[type="email"], input[type="search"], select { min-height: 44px; }
  .btn--sm { font-size: 14px; }
  .form-group label { font-size: 14px; }
}