/* app.css — Lớp bổ sung riêng cho AIeReport (bảng dữ liệu, đăng nhập, canvas quy trình…).
   Dùng nguyên token của design.css; chỉ thêm pattern mà bản gốc không có. */

/* ---------- Panel / Card chung ---------- */
.panel { background: var(--bg-container); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.panel-title { font-size: 14px; font-weight: 600; color: var(--text-heading); display: flex; align-items: center; gap: 8px; }
.panel-title .panel-ic { color: var(--c-primary); display: grid; place-items: center; }
.panel-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.panel-body { padding: 16px; }
.panel-body.flush { padding: 0; }
.section-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 10px; }

/* ---------- Bảng dữ liệu chuẩn ---------- */
.dtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.dtable th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--text-secondary); background: var(--ds-table-header-bg); padding: 10px 14px; border-bottom: 1px solid var(--border);
  white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.dtable td { padding: 12px 14px; border-bottom: 1px solid var(--border-secondary); color: var(--text); vertical-align: middle; }
.dtable tbody tr { transition: background .12s; }
.dtable tbody tr:hover { background: var(--primary-000); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable td.num, .dtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable td.ctr, .dtable th.ctr { text-align: center; }
.dtable .t-code { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.dtable .t-title { font-weight: 500; color: var(--text-heading); }
.dtable .t-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.dtable tr.row-sel { background: var(--c-primary-bg); }
.dtable tr.group-row td { background: var(--bg-spotlight); font-weight: 700; color: var(--text-heading); font-size: 12px; }

/* ---------- Lưới nhập biểu (data-entry grid) ---------- */
.egrid-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-container); box-shadow: var(--sh-1); }
.egrid { border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 760px; }
.egrid th, .egrid td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px 12px; }
.egrid thead th { background: var(--ds-table-header-bg); color: var(--text-heading); font-weight: 600; text-align: center;
  font-size: 12px; position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.egrid .stub { text-align: left; background: var(--bg-layout); position: sticky; left: 0; z-index: 1; font-weight: 500;
  color: var(--text-heading); min-width: 280px; }
.egrid tbody th.stub { font-weight: 500; }
.egrid .rownum { color: var(--text-tertiary); text-align: center; background: var(--bg-layout); font-variant-numeric: tabular-nums; min-width: 40px; }
.egrid td.cell { text-align: right; font-variant-numeric: tabular-nums; background: var(--bg-container); min-width: 96px; cursor: text; }
.egrid td.cell:hover { background: var(--bg-elevated); }
.egrid td.cell.is-edit { outline: 2px solid var(--c-primary); outline-offset: -2px; background: var(--bg-container); }
.egrid td.formula { background: color-mix(in srgb, var(--st-primary) 7%, transparent); color: var(--st-primary); font-weight: 600; }
.egrid td.locked { background: var(--bg-spotlight); color: var(--text-tertiary); cursor: not-allowed; }
.egrid td.err { background: color-mix(in srgb, var(--st-error) 12%, transparent); color: var(--st-error); font-weight: 600; box-shadow: inset 0 0 0 1px var(--st-error); }
.egrid td.warn { background: color-mix(in srgb, var(--st-warning) 14%, transparent); color: var(--st-warning); font-weight: 600; }
.egrid tbody th.stub.lvl1 { padding-left: 26px; font-weight: 400; color: var(--text-secondary); }
.egrid tbody th.stub.lvl2 { padding-left: 42px; font-weight: 400; color: var(--text-secondary); }
.cell-flag { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 4px; vertical-align: middle; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--text-secondary); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; border: 1px solid var(--border-strong); }

/* ---------- Trang đăng nhập ----------
   Bê nguyên khối `lg-*` của hệ thống Họp không giấy tờ C.DTNN (aicabinet_cdtnn/src/index.css,
   mục "Login Page") để hai hệ thống nhìn giống hệt nhau: nền conic vàng kem, thẻ 2 cột
   (visual đỏ trái + form phải), footer địa chỉ Cục.
   Mọi selector scope trong .login-page và dùng tên riêng lg-* nên KHÔNG đụng lớp dùng chung
   (.btn/.input/.field/.link…) của design system AIO.
   Sửa ở đây thì sửa luôn bên kia, đừng để hai bản trôi khỏi nhau. */
.login-page {
  /* Token cục bộ — trang đăng nhập luôn nền sáng, không theo dark theme của app */
  --lg-primary: #bd0616;
  --lg-primary-hover: #9f0512;
  --lg-primary-pressed: #81040f;
  --lg-primary-000: #fef0f1;
  --lg-primary-100: #fee2e4;
  --lg-primary-700: #9f0512;
  --lg-primary-800: #81040f;
  --lg-ring: var(--ring);
  --lg-surface: #ffffff;
  --lg-border: #d1d5db;
  --lg-border-strong: #9ca3af;
  --lg-divider: #eaecf0;
  --lg-text: #1f2937;
  --lg-text-2: #4b5563;
  --lg-text-3: #6b7280;
  --lg-text-disabled: #9ca3af;
  --lg-gray-100: #f8f6fa;
  --lg-gray-200: #f2f0f4;
  --lg-gray-300: #eaecf0;
  --lg-shadow-xl: var(--ds-shadow-4-xl);

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--lg-text);
  font-family: var(--ds-font-family);
  font-size: 16px;
  line-height: 24px;
  /* Nền: quầng sáng trắng giữa + conic vàng kem + gradient nền (nguyên mẫu) */
  background:
    radial-gradient(34% 30% at 56% 46%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 64%),
    conic-gradient(from 0deg at 56% 46%,
      #ffffff 0deg,
      rgba(255, 249, 240, .5) 14deg,
      rgba(251, 201, 146, .34) 34deg,
      rgba(247, 177, 103, .48) 56deg,
      rgba(255, 243, 226, .60) 68deg,
      rgba(249, 185, 120, .44) 84deg,
      rgba(249, 188, 122, .38) 96deg,
      rgba(246, 170, 92, .48) 122deg,
      rgba(255, 245, 230, .72) 133deg,
      rgba(245, 163, 84, .52) 152deg,
      rgba(251, 205, 158, .30) 173deg,
      rgba(255, 249, 240, .88) 182deg,
      rgba(247, 171, 94, .52) 202deg,
      rgba(255, 242, 224, .78) 216deg,
      rgba(249, 186, 124, .32) 236deg,
      rgba(255, 252, 247, .30) 262deg,
      #ffffff 288deg,
      rgba(251, 214, 168, .20) 316deg,
      rgba(248, 190, 130, .26) 334deg,
      rgba(255, 248, 238, .42) 348deg,
      #ffffff 360deg),
    linear-gradient(120deg, #FFFFFF 0%, #FFEFD7 46%, #FFEFD7 78%, #FFDEA5 100%);
  background-attachment: fixed;
}

/* Khoá nền app (dark theme) khi đang ở màn đăng nhập */
body.login-body {
  background: #FFEFD7;
}

/* ── Tiêu đề: logo Cục + tên hệ thống ── */
.login-page .lg-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 8px 26px;
  justify-content: center;
  text-align: left;
}

.login-page .lg-head .hlogo {
  width: 84px;
  height: 84px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .14));
}

.login-page .lg-head .tt {
  line-height: 1.2;
}

.login-page .lg-head .tt .b1 {
  font-weight: 700;
  color: var(--lg-primary-800);
  font-size: 34px;
  letter-spacing: .4px;
}

.login-page .lg-head .tt .b2 {
  font-weight: 600;
  color: var(--lg-primary-700);
  font-size: 22px;
  letter-spacing: .6px;
  margin-top: 4px;
  text-transform: uppercase;
}

/* ── Thẻ 2 cột ── */
.login-page .lg-card {
  width: 100%;
  max-width: 1280px;
  background: var(--lg-surface);
  border-radius: 20px;
  box-shadow: var(--lg-shadow-xl);
  overflow: hidden;
}

.login-page .lg-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-top: 1px solid var(--lg-divider);
}

/* ── TRÁI: visual nền đỏ ── */
.login-page .lg-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
  min-height: 560px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 120, 80, .42), rgba(255, 120, 80, 0) 52%),
    radial-gradient(140% 130% at 50% 44%, #ED081B 0%, #BD0616 40%, #81040f 74%, #63030c 100%);
}

/* mưa mã nhị phân */
.login-page .lg-matrix {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: .82;
  -webkit-mask: radial-gradient(circle at 50% 46%, transparent 2%, rgba(0, 0, 0, .6) 20%, #000 46%);
  mask: radial-gradient(circle at 50% 46%, transparent 2%, rgba(0, 0, 0, .6) 20%, #000 46%);
}

.login-page .lg-matrix .col {
  position: absolute;
  top: 0;
  font: 700 14px/1.7 'Courier New', ui-monospace, monospace;
  color: #FFBB01;
  text-shadow: 0 0 5px rgba(255, 180, 40, .6);
  white-space: pre;
  text-align: center;
  letter-spacing: 2px;
}

/* tia sáng chéo */
.login-page .lg-beam {
  position: absolute;
  top: -30%;
  left: 44%;
  width: 26%;
  height: 160%;
  pointer-events: none;
  z-index: 0;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);
  filter: blur(7px);
  opacity: .5;
}

.login-page .lg-beam2 {
  left: 60%;
  width: 14%;
  transform: rotate(28deg);
  opacity: .45;
}

/* sóng nước lan toả ở đáy */
.login-page .lg-ripples {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  width: 82%;
  height: 132px;
  pointer-events: none;
  z-index: 0;
  filter: blur(.7px);
}

.login-page .lg-ripples .rwv {
  fill: none;
  stroke: #FFDEA5;
  stroke-linecap: round;
}

.login-page .lg-ripples .r1 { stroke-opacity: .85; stroke-width: 2.8; }
.login-page .lg-ripples .r2 { stroke-opacity: .6;  stroke-width: 2.1; }
.login-page .lg-ripples .r3 { stroke-opacity: .38; stroke-width: 1.6; }
.login-page .lg-ripples .r4 { stroke-opacity: .22; stroke-width: 1.3; }

/* đốm sáng bokeh ở đáy */
.login-page .lg-bokeh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.login-page .lg-bokeh i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 238, 175, .95), rgba(255, 200, 90, 0) 70%);
  filter: blur(.4px);
  opacity: .85;
}

.login-page .lg-glow {
  position: absolute;
  z-index: 0;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 251, 238, .82), rgba(255, 226, 150, .34) 36%, rgba(255, 210, 120, 0) 66%);
}

.login-page .lg-biglogo {
  position: relative;
  z-index: 1;
  width: 288px;
  height: 288px;
  object-fit: contain;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .4)) drop-shadow(0 0 34px rgba(255, 224, 150, .6));
}

/* ── PHẢI: form ── */
.login-page .lg-form {
  padding: 60px 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
  margin: 0 auto;
  width: 100%;
}

.login-page .lg-form h2 {
  text-align: center;
  color: var(--lg-primary-800);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  margin: 0;
}

.login-page .lg-st {
  text-align: center;
  color: var(--lg-text-3);
  font-size: 16px;
  margin: 8px 0 28px;
}

.login-page .lg-support {
  margin: 24px 0 0;
  font-size: 14px;
}

/* thông báo lỗi / gợi ý */
.login-page .lg-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 16px;
}

.login-page .lg-alert--err {
  background: #ffedea;
  color: #93000e;
  border: 1px solid #ffdad6;
}

.login-page .lg-alert--info {
  background: var(--ds-message-infor-background-4);
  color: var(--ds-message-infor-title-text-4);
  border: 1px solid var(--ds-tag-info-border);
}

.login-page .lg-alert svg { flex: none; }

/* input */
.login-page .lg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.login-page .lg-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  background: var(--lg-surface);
  border: 1px solid var(--lg-border);
  border-radius: 8px;
  transition: .15s;
  color: var(--lg-text);
}

.login-page .lg-input > svg {
  width: 18px;
  height: 18px;
  color: var(--lg-text-3);
  flex: none;
}

.login-page .lg-input input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  font: inherit;
  color: var(--lg-text);
  min-width: 0;
}

.login-page .lg-input input::placeholder { color: var(--lg-text-disabled); }
.login-page .lg-input:hover { border-color: var(--lg-border-strong); }

.login-page .lg-input:focus-within {
  border-color: var(--lg-primary);
  box-shadow: var(--lg-ring);
}

.login-page .lg-eye {
  display: flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--lg-text-3);
}

.login-page .lg-eye:hover { color: var(--lg-text-2); }

/* hàng ghi nhớ / quên mật khẩu */
.login-page .lg-rowb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 18px;
}

.login-page .lg-rem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--lg-text-2);
  cursor: pointer;
}

.login-page .lg-cbx {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--lg-border-strong);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lg-surface);
  flex: none;
  transition: .15s;
}

.login-page .lg-cbx input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.login-page .lg-cbx svg { color: #fff; opacity: 0; }
.login-page .lg-cbx.checked { background: var(--lg-primary); border-color: var(--lg-primary); }
.login-page .lg-cbx.checked svg { opacity: 1; }

.login-page .lg-link {
  color: var(--lg-primary);
  cursor: pointer;
  font-size: 14px;
}

.login-page .lg-link:hover { text-decoration: underline; }

/* nút */
.login-page .lg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: .15s ease;
  user-select: none;
}

.login-page .lg-btn--primary { background: var(--lg-primary); color: #fff; }
.login-page .lg-btn--primary:hover:not(:disabled) { background: var(--lg-primary-hover); }
.login-page .lg-btn--primary:active:not(:disabled) { background: var(--lg-primary-pressed); }

.login-page .lg-btn:focus-visible { outline: none; box-shadow: var(--lg-ring); }

.login-page .lg-btn:disabled {
  cursor: not-allowed;
  background: var(--lg-gray-300);
  color: var(--lg-text-disabled);
  border-color: transparent;
}

.login-page .lg-btn--outline {
  background: var(--lg-surface);
  color: var(--lg-primary);
  border-color: var(--lg-primary);
}

.login-page .lg-btn--outline:hover { background: var(--lg-primary-000); }
.login-page .lg-btn--outline:active { background: var(--lg-primary-100); }

.login-page .lg-sso {
  height: 58px;
  justify-content: flex-start;
  gap: 12px;
}

.login-page .lg-sso .ssoic {
  width: 28px;
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-page .lg-sso .ssoic img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.login-page .lg-sso .lbl { flex: 1; text-align: left; font-weight: 600; }

/* dải phân cách "Hoặc…" */
.login-page .lg-div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--lg-text-3);
  font-size: 12px;
}

.login-page .lg-div::before,
.login-page .lg-div::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--lg-divider);
}

/* footer */
.login-page .lg-foot {
  text-align: center;
  font-size: 12px;
  color: var(--lg-text-3);
  padding: 16px 8px 0;
  max-width: 980px;
}

/* ── Login Responsive ── */
@media (max-width: 1100px) {
  .login-page .lg-form { padding: 48px 40px; }
}

@media (max-width: 760px) {
  .login-page { padding: 16px; }
  .login-page .lg-body { grid-template-columns: 1fr; }
  .login-page .lg-visual { min-height: 240px; padding: 24px; }
  .login-page .lg-visual .lg-biglogo { width: 168px; height: 168px; }
  .login-page .lg-visual .lg-glow { width: 320px; height: 320px; }
  .login-page .lg-form { padding: 32px 24px 40px; }
  /* Tên hệ thống ở đây DÀI hơn bản gốc ("Báo cáo Tổng hợp, Phân tích, Dự báo" so với "Họp không
     giấy tờ") nên để ngang là tràn ngang cả trang ở khổ điện thoại. Xếp dọc + cho phép xuống
     dòng; min-width:0 để chữ co được, không thì flex item giữ nguyên bề rộng nội dung. */
  .login-page .lg-head { flex-direction: column; gap: 10px; padding-bottom: 18px;
    text-align: center; max-width: 100%; }
  .login-page .lg-head .tt { min-width: 0; }
  .login-page .lg-head .hlogo { width: 56px; height: 56px; }
  .login-page .lg-head .tt .b1 { font-size: 22px; }
  .login-page .lg-head .tt .b2 { font-size: 14px; }
}

/* ── Khớp bộ icon AIO vào khuôn login ──
   Bản gốc dùng lucide-react nên nhả thẳng <svg>; AioIcon của hệ thống này bọc trong
   <span class="aio-ic">, làm mọi selector `> svg` của bản gốc trượt. Dưới đây là bản tương
   đương cho span — sửa khuôn login thì nhớ giữ cặp quy tắc này đi kèm. */
.login-page .lg-input > .aio-ic { width: 18px; height: 18px; color: var(--lg-text-3); flex: none; }
.login-page .lg-alert .aio-ic { flex: none; }
.login-page .lg-cbx .aio-ic { color: #fff; opacity: 0; transition: opacity .15s; }
.login-page .lg-cbx.checked .aio-ic { opacity: 1; }
.login-page .lg-eye .aio-ic { position: relative; }
/* Không có icon "mắt gạch" trong bộ AIO — vẽ gạch chéo lên chính icon mắt khi đang HIỆN mật khẩu. */
.login-page .lg-eye.da-gach .aio-ic::after {
  content: ""; position: absolute; left: -1px; top: 50%; width: 20px; height: 1.6px;
  background: currentColor; transform: rotate(-45deg); transform-origin: center;
}
/* Nút SSO của hệ thống này dùng icon khiên chứ không phải ảnh VNeID như bản gốc. */
.login-page .lg-sso .ssoic .aio-ic { color: var(--lg-primary); }

/* ═══ ĐĂNG NHẬP theo màn mẫu DS Cục DTNN v2.0 (concept-7--sign-in-8, 03 §6) — giống hệt hệ thống Họp C.DTNN ═══
   Nền ảnh bg-login (minh hoạ 4 phân hệ), khối logo + huân chương + tên góc trên trái, thẻ đăng nhập TRẮNG ĐẶC
   bên phải rộng 520 r22 đệm 50/32 (bỏ hiệu ứng kính mờ của file mẫu — ngoài DS), nút đăng nhập cao 58.
   Giữ nguyên markup + chữ + cách đăng nhập của LoginView.vue; khối visual đỏ cũ ẩn đi. */
.login-page.login-page {
  background: var(--ds-warning-95) url('/ds/bg-login.jpg') center / cover no-repeat;
  align-items: flex-end;
  justify-content: center;
  padding: 120px 7vw 32px;
}
.login-page .lg-head.lg-head {
  position: absolute; top: 40px; left: 6vw; padding: 0; margin: 0; justify-content: flex-start; gap: 16px; text-align: left;
}
.login-page .lg-head .hlogo { width: auto; height: 84px; filter: none; }
.login-page .lg-head .tt .b1 { font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ds-brand-40); letter-spacing: 0; text-transform: uppercase; }
.login-page .lg-head .tt .b2 { font-size: 26px; line-height: 32px; font-weight: 700; color: var(--ds-brand-20); letter-spacing: 0; margin-top: 2px; }
.login-page .lg-card.lg-card { width: 520px; max-width: 100%; border-radius: 22px; background: var(--ds-surface-default); box-shadow: var(--ds-shadow-4-xl); border: 0; }
.login-page .lg-body.lg-body { display: block; border-top: none; }
.login-page .lg-visual { display: none; }
.login-page .lg-form.lg-form { padding: 50px 32px 40px; max-width: none; }
.login-page .lg-form h2 { font-size: 28px; line-height: 34px; font-weight: 700; color: var(--ds-text-primary); text-align: center; }
.login-page .lg-st { color: var(--ds-brand-30); text-align: center; }
.login-page .lg-btn--primary { height: 58px; font-size: 16px; border-radius: var(--ds-radius-md); }
.login-page .lg-sso { height: 58px; }
.login-page .lg-foot { width: 520px; max-width: 100%; text-align: center; color: var(--ds-text-primary); }
@media (max-width: 1100px) {
  .login-page.login-page { align-items: center; padding-top: 32px; }
  .login-page .lg-head.lg-head { position: static; margin-bottom: 24px; justify-content: center; }
}
@media (max-width: 760px) {
  .login-page.login-page { padding: 16px; }
  .login-page .lg-head.lg-head { flex-direction: column; text-align: center; }
  .login-page .lg-head .hlogo { height: 64px; }
  .login-page .lg-head .tt .b1 { font-size: 16px; line-height: 22px; }
  .login-page .lg-head .tt .b2 { font-size: 18px; line-height: 24px; }
  .login-page .lg-form.lg-form { padding: 32px 20px; }
}

/* ---------- Canvas thiết kế quy trình ---------- */
.canvas { position: relative; background:
    radial-gradient(circle, var(--border-strong) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--bg-layout); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; min-height: 540px; }
.flow-node { position: absolute; width: 190px; background: var(--bg-container); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: 0; }
.flow-node.sel { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-bg-h), var(--sh-2); }
.flow-node-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border-secondary); font-weight: 600; font-size: 14px; color: var(--text-heading); }
.flow-node-h .fn-ic { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.flow-node-b { padding: 8px 12px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.flow-node.start .fn-ic, .flow-node.end .fn-ic { color: #fff; }
.flow-edge-label { position: absolute; background: var(--bg-container); border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 2px 10px; box-shadow: var(--sh-1); }
.palette-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-container); font-size: 14px; color: var(--text-heading); cursor: grab; transition: all .12s; }
.palette-item:hover { border-color: var(--c-primary); box-shadow: var(--sh-1); }
.palette-item .pi-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }

/* ---------- Timeline kỳ báo cáo ---------- */
.period-line { display: flex; align-items: flex-start; gap: 0; margin: 8px 0; }
.period-step { flex: 1; position: relative; text-align: center; }
.period-step::before { content: ''; position: absolute; top: 13px; left: 50%; right: -50%; height: 2px; background: var(--border-strong); z-index: 0; }
.period-step:last-child::before { display: none; }
.period-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 8px; position: relative; z-index: 1;
  background: var(--bg-container); border: 2px solid var(--border-strong); color: var(--text-tertiary); font-weight: 700; font-size: 12px; }
.period-step.done .period-dot { background: var(--st-success); border-color: var(--st-success); color: #fff; }
.period-step.active .period-dot { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 0 0 4px var(--c-primary-bg); }
.period-step.done::before { background: var(--st-success); }
.period-label { font-size: 12px; font-weight: 600; color: var(--text-heading); }
.period-date { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

/* ---------- Lưới form 2 cột ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Vòng đời (state machine) ---------- */
.sm-state { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-lg); border: 1.5px solid var(--border-strong);
  background: var(--bg-container); font-weight: 600; font-size: 14px; color: var(--text-heading); box-shadow: var(--sh-1); }
.sm-arrow { display: inline-flex; flex-direction: column; align-items: center; color: var(--text-tertiary); font-size: 12px; gap: 1px; }

/* ---------- Ma trận phân quyền ---------- */
.matrix td.perm { text-align: center; }
.matrix .pm-yes { color: var(--st-success); }
.matrix .pm-no { color: var(--text-disabled); }

/* ---------- Banner / alert ---------- */
.alert-bar { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--r-md); font-size: 14px; line-height: 1.5; }
.alert-bar .ab-ic { flex-shrink: 0; margin-top: 1px; }
.alert-bar.info { background: color-mix(in srgb, var(--st-info) 9%, transparent); color: var(--st-info); border: 1px solid color-mix(in srgb, var(--st-info) 28%, transparent); }
.alert-bar.warn { background: color-mix(in srgb, var(--st-warning) 11%, transparent); color: var(--st-warning); border: 1px solid color-mix(in srgb, var(--st-warning) 30%, transparent); }
.alert-bar.err { background: color-mix(in srgb, var(--st-error) 9%, transparent); color: var(--st-error); border: 1px solid color-mix(in srgb, var(--st-error) 26%, transparent); }
.alert-bar.success { background: color-mix(in srgb, var(--st-success) 10%, transparent); color: var(--st-success); border: 1px solid color-mix(in srgb, var(--st-success) 28%, transparent); }
.alert-bar b { font-weight: 700; }
.alert-bar .ab-txt { color: var(--text); }

/* ---------- Tiện ích ---------- */
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--text-secondary); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.grid-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.content.narrow { max-width: 1080px; margin: 0 auto; }

/* ---------- Bảng điều khiển kiểu mockup (thẻ số liệu lớn + biểu đồ cột) ----------
   Đặt tên riêng (dash-*, stat-tile) để KHÔNG đụng .stat compact của design.css
   và các lớp tiện ích Tailwind (.grid). */
.dash-grid { display: grid; gap: 16px; }
.dash-grid-4 { grid-template-columns: repeat(4, 1fr); }
.dash-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1180px) { .dash-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .dash-grid-2 { grid-template-columns: 1fr; } }

/* Thẻ KPI (DS Metrics With icon): card r12 viền border/subtle không bóng, số Display-numeric 28 tabular */
.stat-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 20px;
  background: var(--ds-surface-default); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg); box-shadow: none; }
.stat-tile .st-ico { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center; }
.stat-tile .st-label { color: var(--text-secondary); font-size: 14px; padding-right: 48px; }
.stat-tile .st-value { font-size: 28px; font-weight: 700; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-tile .st-delta { font-size: 12px; display: flex; align-items: center; gap: 4px; color: var(--text-secondary); }
.st-ico.red { background: var(--primary-000); color: var(--primary-600); }
.st-ico.blue { background: var(--info-bg); color: var(--st-info); }
.st-ico.green { background: var(--success-bg); color: var(--st-success); }
.st-ico.amber { background: var(--warning-bg); color: var(--st-warning); }

.chart-bars { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding: 10px 4px 0; }
.chart-bars .cb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
/* Biểu đồ (DS C10): màu đặc theo Chart/series-* (thứ tự ưu tiên 5, 2, 3, 6, 1 — 06 Q8), không gradient;
   "hoàn thành" = success */
.chart-bars .cb .bar { width: 60%; max-width: 38px; min-height: 3px; border-radius: 4px 4px 0 0;
  background: var(--ds-chart-series-5); }
.chart-bars .cb .bar.alt { background: var(--ds-success-60); }
.chart-bars .cb .cv { font-size: 12px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.chart-bars .cb .cl { font-size: 12px; color: var(--text-secondary); text-align: center; }
/* Progress bar (DS C7, Figma 27/10 có Status): track 8 surface/container-high, fill interactive/primary (Default);
   .is-xong = Success (đủ 100%, xanh) · .is-loi = Error (quá hạn, đỏ lỗi) */
.progress-bar { height: 8px; border-radius: 8px; background: var(--ds-surface-container-high); overflow: hidden; }
.progress-bar > span { display: block; height: 100%; border-radius: 8px; background: var(--ds-interactive-primary); }
.progress-bar.is-xong > span, .progress-fill.is-xong { background: var(--ds-support-success); }
.progress-bar.is-loi > span, .progress-fill.is-loi { background: var(--ds-support-error); }

/* Dòng thông báo/nhắc việc trên bảng điều khiển */
.feed-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.feed-row:last-child { border-bottom: 0; }
.feed-ic { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; flex-shrink: 0; }
.feed-title { font-size: 14px; font-weight: 500; color: var(--text); }
.feed-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ---------- Màn giám sát / phân tích (mockup giam-sat-nhap-lieu, phan-tich-du-bao) ---------- */
/* Dải đầu mục (mockup giám sát) theo đầu mục DS: nền brand/95 đặc (không gradient), số tròn 28 brand/90 – brand/40,
   tiêu đề nhóm IN HOA brand/20 như section của màn mẫu "Chi tiết tài sản" */
.gs-band { display: flex; align-items: center; gap: 12px; background: var(--ds-brand-95);
  border: 1px solid var(--ds-brand-90); border-left: 4px solid var(--ds-brand-40); border-radius: var(--ds-radius-md); padding: 12px 20px; }
.gs-band .gs-no { width: 28px; height: 28px; border-radius: 50%; background: var(--ds-brand-90); color: var(--ds-brand-40);
  display: grid; place-items: center; font-weight: 600; font-size: 16px; flex: 0 0 auto; }
.gs-band .gs-title { font-size: 16px; font-weight: 700; color: var(--ds-brand-20); text-transform: uppercase; }
.gs-band .gs-upd { margin-left: auto; font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }

/* Đồng hồ % lớn */
.gauge { text-align: center; padding: 10px 0 2px; }
.gauge .gg-num { font-size: 52px; font-weight: 700; color: var(--ds-text-primary); line-height: 1; font-variant-numeric: tabular-nums; }
.gauge .gg-num small { font-size: 22px; color: var(--text-secondary); font-weight: 500; }
.gauge .gg-track { height: 12px; border-radius: 8px; background: var(--ds-surface-container-high); overflow: hidden; margin: 14px 40px 0; }
.gauge .gg-track > span { display: block; height: 100%; border-radius: 8px; background: var(--ds-interactive-primary); }
.gg-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.gg-mini .m { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; text-align: center; }
.gg-mini .m .ml { font-size: 12px; color: var(--text-secondary); }
.gg-mini .m .mv { font-size: 18px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Cột dọc theo đơn vị (có ngưỡng màu) */
.vbars { display: flex; align-items: stretch; gap: 12px; height: 236px; padding: 8px 4px 0; overflow-x: auto; }
.vbars .vb { flex: 0 0 auto; width: 52px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.vbars .vb .vt { flex: 0 0 auto; height: 18px; font-size: 12px; font-weight: 700; color: var(--text-secondary); line-height: 18px; }
.vbars .vb .vcol { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
.vbars .vb .vbar { width: 28px; border-radius: 4px 4px 0 0; background: var(--ds-success-60); }
.vbars .vb .vbar.warn { background: var(--ds-chart-series-3); }
.vbars .vb .vbar.bad { background: var(--ds-chart-series-5); }
.vbars .vb .vl { flex: 0 0 auto; font-size: 12px; color: var(--text-secondary); text-align: right; width: 96px; height: 58px;
  line-height: 1.2; transform: rotate(-32deg); transform-origin: top right; margin-top: 4px; white-space: nowrap; overflow: visible; }

/* Thanh ngang theo biểu */
.hbars { display: flex; flex-direction: column; gap: 14px; padding: 6px 4px; }
.hbar .hb-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; margin-bottom: 6px; }
.hbar .hb-top .hb-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .hb-top b { color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Nút gạt chọn 1 (mockup .pill-toggle) = Tabs button Type PILL của DS (D6, Figma 27/10: Pill / Button group = lọc nhanh):
   khung r8 nền surface/container đệm 2 · nút 32 r8 chữ 14 Medium · đang chọn nền đỏ đặc chữ trắng (tổng cao 36) */
.pill-toggle { display: inline-flex; gap: 2px; background: var(--ds-surface-container); border: 0; border-radius: var(--ds-radius-md); padding: 2px; }
.pill-toggle button { height: 32px; border: 0; background: none; padding: 0 12px; border-radius: var(--ds-radius-md); font-size: 14px; font-weight: 500;
  color: var(--ds-tab-inactive); cursor: pointer; white-space: nowrap; }
.pill-toggle button:hover:not(.on):not([disabled]) { color: var(--ds-tab-hover-text); }
.pill-toggle button.on { background: var(--ds-tab-active-bg); color: var(--ds-text-white); }

/* Thanh ngang phân đoạn của mockup (giam-sat-nhap-lieu.html) */
.hbar .hb-track { height: 14px; border-radius: 8px; background: var(--ds-surface-container-high); overflow: hidden; }
.hbar .hb-track > span { display: block; height: 100%; border-radius: 8px; background: var(--ds-chart-series-5); }