/* ==========================================================================
   PORTAL CSS — Giao diện Cổng Điều hành & Theo dõi tiến độ tỉnh Gia Lai
   Tách từ inline CSS trong index.html để tối ưu cache trình duyệt và render
   ========================================================================== */

/* Đăng nhập — thẻ xác thực nhiệm vụ chuyên nghiệp */
.login-modal {
  background:
    radial-gradient(circle at 18% 18%, rgba(245, 158, 11, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(13, 61, 19, 0.88), rgba(15, 23, 42, 0.62)) !important;
  backdrop-filter: blur(7px);
}
.login-card {
  width: min(1040px, calc(100vw - 40px)) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 24px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.36) !important;
}
.login-modal,.login-card,html:has(.login-modal.show),body:has(.login-modal.show) { scrollbar-width: none; }
.login-modal::-webkit-scrollbar,.login-card::-webkit-scrollbar,html:has(.login-modal.show)::-webkit-scrollbar,body:has(.login-modal.show)::-webkit-scrollbar { display: none; }
.login-panel {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 480px;
  background: #ffffff;
}
.login-hero {
  position: relative;
  padding: 20px;
  color: #ffffff;
  background:
    linear-gradient(145deg, rgba(27, 94, 32, 0.96), rgba(13, 61, 19, 0.98)),
    radial-gradient(circle at 82% 18%, rgba(245, 158, 11, 0.35), transparent 32%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
}
.login-hero::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(805px,168%);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  background: url('../img/drum-user-reference.png') center / contain no-repeat;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: invert(1) grayscale(1) sepia(1) saturate(5) brightness(1.5);
  opacity: .13;
  pointer-events: none;
}
.login-modal.show .login-hero::after { animation: login-ring-motion 60s linear infinite; }
@keyframes login-ring-motion { from { transform: translate3d(calc(-50% + var(--login-pointer-x,0px)),calc(-50% + var(--login-pointer-y,0px)),0) rotate(0deg); } to { transform: translate3d(calc(-50% + var(--login-pointer-x,0px)),calc(-50% + var(--login-pointer-y,0px)),0) rotate(360deg); } }
.login-emblem {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 4px auto 14px;
}
.login-emblem img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 12px rgba(245, 158, 11, 0.45));
}
.login-agency {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #fcd34d;
  text-align: center;
  text-transform: uppercase;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-shadow: 0 2px 12px rgba(245, 158, 11, 0.4);
  overflow-wrap: anywhere;
}
.login-kicker {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: rgba(252, 211, 77, 0.9);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
}
.login-hero h2 {
  display: none;
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 19.5px;
  line-height: 1.25;
  letter-spacing: 0.2px;
  text-align: center;
  color: #ffffff;
}
.login-heading-line { display: block; white-space: nowrap; }
.login-desc {
  position: relative;
  z-index: 1;
  margin: 60px auto 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 440px;
  text-align: center;
}
/* 6 Rõ phong cách tối giản không hộp viền */
.login-badges {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin-top: 14px;
}
.login-badges .login-principle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  overflow: visible;
  padding: 6px 6px;
  border-radius: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  user-select: none;
  transition: all 0.25s ease;
}
.login-principle i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #a7d9b3;
  box-shadow: 0 0 5px rgba(167, 243, 208, 0.6);
  transition: all 0.25s ease;
}
.login-badges .login-principle:hover {
  color: #ffffff;
  transform: translateY(-1px);
}
.login-badges .login-principle:hover i {
  background: #fcd34d;
  box-shadow: 0 0 8px #f59e0b;
}
.login-badges .login-principle.is-active {
  color: #fcd34d;
  font-weight: 800;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
  transform: translateY(-1px);
}
.login-principle.is-active i {
  background: #fcd34d;
  box-shadow: 0 0 10px #f59e0b, 0 0 4px #ffffff;
}
.login-principle-beam {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -2px;
  height: 2.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fcd34d, transparent);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.login-principle.is-active .login-principle-beam {
  opacity: 1;
  animation: login-principle-fill 3.5s linear infinite paused;
}
.login-principles.principles-running .login-principle-beam {
  animation-play-state: running;
}
@keyframes login-principle-fill {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
.login-principle:focus-visible {
  outline: 2px solid #fcd34d;
  outline-offset: 2px;
}
.login-principle-detail {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(252, 211, 77, 0.35);
  min-height: 135px;
}
.login-principle-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 11px;
  color: #fcd34d;
  font-weight: 700;
}
.login-principle-meta small {
  font-size: 11px;
  color: #a7f3d0;
  font-weight: 600;
}
.login-principle-detail h3 {
  margin: 6px 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}
.login-principle-detail p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}
.login-principle-rule {
  margin-top: 8px;
  border-left: 2px solid #f59e0b;
  padding-left: 9px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #fcd34d;
}
@media (max-width: 480px) { .login-badges { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.login-form-wrap {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.login-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 32px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.login-form-head b {
  display: block;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.2;
}
.login-form-head small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 13px;
}
.login-close {
  width: 36px;
  height: 36px;
  border-radius: 12px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
}
.login-form {
  padding: 22px 32px 10px !important;
  flex: 1;
}
.login-form .field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  width: 100%;
  margin-bottom: 18px;
}
.login-form .field label {
  display: block;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
}
.login-form input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 10px 13px !important;
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-form input:focus {
  border-color: #1b5e20 !important;
  box-shadow: 0 0 0 4px rgba(27, 94, 32, 0.12) !important;
}
.login-note {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #1b5e20;
  font-size: 12.5px;
  line-height: 1.55;
}
.login-actions {
  padding: 16px 32px 24px !important;
  border-top: 0 !important;
  justify-content: flex-end !important;
}
.login-actions .btn {
  min-height: 42px;
  border-radius: 12px !important;
  padding-inline: 18px !important;
}
.login-actions .btn-primary {
  background: #1b5e20 !important;
  border-color: #1b5e20 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(27, 94, 32, 0.22);
}
.login-actions .btn-primary:hover {
  background: #0d3d13 !important;
  border-color: #0d3d13 !important;
}
@media (min-width: 761px) and (max-width: 1040px) {
  .login-hero h2 { font-size: 16px; }
}
@media (max-width: 760px) {
  .login-card { width: min(430px, 96vw) !important; border-radius: 20px !important; }
  .login-panel { grid-template-columns: 1fr; min-height: 0; }
  .login-hero { display: grid; grid-template-columns: 54px minmax(0,1fr); align-items: center; gap: 10px 12px; padding: 16px 22px; }
  .login-panel > .login-principles { padding: 0 22px 20px; color: #fff; background: #1b5e20; }
  .login-emblem { width: 54px; height: 54px; border-radius: 20px; margin-bottom: 0; }
  .login-emblem img { width: 54px; height: 54px; }
  .login-emblem { grid-row: 1 / span 2; margin: 0; }
  .login-agency { grid-column: 2; margin: 0; font-size: 20px; text-align: left; }
  .login-kicker { grid-column: 2; margin: 0; font-size: 15px; text-align: left; }
  .login-hero h2 { grid-column: 1 / -1; font-size: 14px; }
  .login-desc { font-size: 13px; margin: 16px 0 0; }
  .login-badges { margin-top: 16px; }
  .login-principle-detail { min-height: 180px; }
  .login-form-wrap { position: relative; }
  .login-form-head { padding: 0; border: 0; }
  .login-form-head b { display: none; }
  .login-note { display: none; }
  .login-close { position: absolute; top: 12px; right: 12px; z-index: 1; }
  .login-form { padding: 54px 22px 6px !important; }
  .login-actions { padding: 14px 22px 22px !important; }
  .login-actions .btn { flex: 1; justify-content: center; }
}

.public-dashboard-card { min-width: 0; width: 100%; max-width: 1440px; margin: 0 auto; }
#publicScreen .public-dashboard-card > .card-title { margin: 0 0 16px; font-size: 14px !important; color: #475569 !important; }
.public-summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0 24px; }
.public-summary-copy { min-width: 0; }
.public-scope { display: inline-block; color: #1b5e20; font-size: 12px; font-weight: 700; border-left: 3px solid #e6b325; padding-left: 8px; }
.public-summary h1 { margin: 12px 0 8px; font-size: 26px; line-height: 1.3; letter-spacing: 0; }
.public-summary p { margin: 0; font-size: 14px; color: #475569; }
.public-motion-actions { margin-top: 12px; }
.public-completion { flex: 0 1 340px; }
.public-total-metric { flex: 0 0 180px; }
.public-total-metric .stat { background: transparent; border: 0; }
.public-completion .donut { width: 96px; height: 96px; flex: 0 0 96px; }
.public-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); background: #fff; border: 1px solid #dce5e0; border-radius: 8px; overflow: hidden; }
:is(.public-metrics,.public-total-metric) .public-metric { --metric-color: #64748b; display: grid; justify-items: center; gap: 12px; padding: 18px 16px; border: 0; border-radius: 0; box-shadow: none; text-align: center; min-width: 0; }
.public-metric + .public-metric { border-left: 1px solid #e2e8f0; }
:is(.public-metrics,.public-total-metric) .public-metric .v { margin: 0; font-size: 26px; line-height: 1.2; color: #0f172a; }
:is(.public-metrics,.public-total-metric) .public-metric .l { font-size: 13px; min-height: 36px; color: #475569; line-height: 1.4; }
:is(.public-metrics,.public-total-metric) .public-metric-total { --metric-color: #2563a6; }
:is(.public-metrics,.public-total-metric) .public-metric-complete { --metric-color: #1b5e20; }
:is(.public-metrics,.public-total-metric) .public-metric-complete .v { color: #1b5e20; }
:is(.public-metrics,.public-total-metric) .public-metric-active { --metric-color: #d97706; }
:is(.public-metrics,.public-total-metric) .public-metric-overdue { --metric-color: #d32f2f; }
:is(.public-metrics,.public-total-metric) .public-metric-overdue .v { color: #d32f2f; }
:is(.public-metrics,.public-total-metric) .public-metric-late { --metric-color: #e6b325; }
:is(.public-metrics,.public-total-metric) .public-metric-ring { --chart-color: var(--metric-color); width: 116px; max-width: 100%; aspect-ratio: 1; align-items: center; }
:is(.public-metrics,.public-total-metric) .public-metric-ring::before { background: conic-gradient(var(--chart-color) calc(var(--chart-value) * 3.6deg),#e8edf3 0); }
:is(.public-metrics,.public-total-metric) .public-metric-ring::after { inset: 10px; aspect-ratio: auto; }
:is(.public-metrics,.public-total-metric) .public-metric-ring small { font-size: 12px; margin-top: 4px; }
.public-count-note { margin: 12px 0 0; color: #64748b; font-size: 12px; line-height: 1.6; }
.public-units { margin-top: 28px; padding: 24px 0; border-top: 1px solid #dce5e0; }
.public-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.public-section-heading h2 { margin: 0; font-size: 18px; }
.public-section-heading > span { color: #64748b; font-size: 12px; }
.public-units .table-wrap { border: 1px solid #dce5e0; border-radius: 8px; background: #fff; }
.public-units .table { margin: 0; }
.public-units .table th, .public-units .table td { padding: 16px 12px; }
.public-units .table tbody th { background: #fff; white-space: normal; font-weight: 600; text-align: left; min-width: 240px; }
.public-units .table td { font-variant-numeric: tabular-nums; }
.public-unit-progress { min-width: 120px; }
.public-unit-progress b { display: block; font-size: 13px; margin-bottom: 6px; color: #1b5e20; }
.public-unit-progress .progress { height: 5px; }
.public-unit-progress .progress > span { background: #1b5e20; }
.public-ring-summary { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 0; padding: 0; background: #fff; border: 1px solid #dce5e0; border-radius: 8px; overflow: hidden; }
.public-ring-summary > .public-total-metric,.public-ring-summary > .public-metrics { display: contents; }
.public-ring-summary .public-metric { padding: 16px 12px; }
.public-ring-summary .public-metrics .public-metric { border-left: 1px solid #e2e8f0; }
.public-header #publicMotionReplay { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.45) !important; border-radius: 6px; }
@media (max-width: 1000px) {
  .public-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .public-ring-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .public-summary { flex-direction: column; align-items: stretch; gap: 20px; padding-top: 8px; }
  .public-ring-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; padding: 0; }
  .public-summary h1 { font-size: 22px; }
  .public-completion { flex-basis: auto; }
  .public-total-metric { align-self: center; width: 180px; }
  .public-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .public-metrics .public-metric { padding: 14px; }
  .public-section-heading { align-items: flex-start; flex-direction: column; }
  .public-units .table { min-width: 800px; }
}

/* Trang công khai trước đăng nhập — tinh chỉnh responsive */
.public-header {
  border-bottom: 3px solid #f59e0b !important;
  background: linear-gradient(90deg, #1b5e20 0%, #2e7d32 100%) !important;
}
.public-header .brand-line b {
  letter-spacing: 0.1px !important;
  line-height: 1.25 !important;
}
.public-header .brand-line > div {
  min-width: 0;
}
.public-header .header-actions .btn,
#btnLogin {
  border-radius: 999px !important;
  min-height: 38px !important;
  padding: 8px 18px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 18px rgba(13, 61, 19, 0.18) !important;
}
#publicScreen {
  background: #f1f5f9 !important;
}
.public-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.public-dashboard-loading {
  padding: 22px 0 6px;
}
.public-skeleton {
  display: block;
  min-height: 86px;
  border-radius: 14px;
  background: linear-gradient(90deg, #eef2f6 25%, #f8fafc 50%, #eef2f6 75%);
  background-size: 220% 100%;
  animation: public-skeleton-loading 1.35s ease-in-out infinite;
}
.public-skeleton-title {
  width: min(280px, 65%);
  min-height: 18px;
  margin-bottom: 18px;
  border-radius: 7px;
}
.public-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.public-empty-state {
  max-width: 580px;
  margin: 32px auto 18px;
  padding: 30px 24px;
  text-align: center;
  border: 1px dashed #a5d6a7;
  border-radius: 16px;
  background: #f7fbf7;
}
.public-empty-state b {
  display: block;
  color: #1b5e20;
  font-size: 18px;
}
.public-empty-state p {
  margin: 9px 0 0;
  color: #475569;
  line-height: 1.6;
}
@keyframes public-skeleton-loading {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .public-skeleton { animation: none; }
}
#publicScreen > .card,
#publicScreen .public-grid > .card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}
.remember-account {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
  color: #334155;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.remember-account input {
  width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  margin: 0;
  accent-color: #1b5e20;
}
.login-form .remember-account { margin-top: 2px; }
.public-login-note {
  margin-top: 12px;
  color: #475569;
  font-size: 12.5px;
  line-height: 1.5;
}
#publicScreen .card-title {
  color: #0f172a !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}
@media (max-width: 900px) {
  .public-header {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 20px 18px 18px !important;
  }
  .public-header .brand-line {
    align-items: center !important;
    gap: 14px !important;
  }
  .public-header #logoBox {
    width: 64px !important;
    height: 64px !important;
    flex: 0 0 64px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
  }
  .public-header .brand-line img {
    width: 52px !important;
    height: 52px !important;
  }
  .public-header .brand-line b {
    font-size: 20px !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
  }
  .public-header .brand-line small {
    margin-top: 8px !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    opacity: 0.9 !important;
  }
  .public-header .header-actions {
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .public-header #publicUpdated:empty {
    display: none !important;
  }
  .public-header .header-actions .btn,
  #btnLogin {
    min-height: 42px !important;
    padding: 8px 20px !important;
    font-size: 15px !important;
    background: #ffffff !important;
    color: #1b5e20 !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
  }
  #publicScreen {
    padding: 16px !important;
  }
  .public-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  #publicScreen > .card,
  #publicScreen .public-grid > .card {
    border-radius: 16px !important;
  }
  #publicScreen .card-title {
    font-size: 22px !important;
    margin-bottom: 6px !important;
  }
  #publicDashboard.empty,
  #publicScreen .empty {
    padding: 18px 0 !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}
@media (max-width: 420px) {
  html,
  body,
  .top-shell {
    max-width: 100%;
    overflow-x: hidden;
  }
  .public-skeleton-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-empty-state { margin: 18px auto 8px; padding: 24px 18px; }
  .public-header {
    padding: 18px 16px 16px !important;
  }
  .public-header .brand-line {
    width: 100%;
    align-items: flex-start !important;
  }
  .public-header .brand-line > div {
    flex: 1 1 auto;
    max-width: calc(100% - 72px);
  }
  .public-header #logoBox {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
  }
  .public-header .brand-line img {
    width: 48px !important;
    height: 48px !important;
  }
  .public-header .brand-line b {
    font-size: 18px !important;
    line-height: 1.22 !important;
    overflow-wrap: anywhere;
  }
  .public-header .brand-line small {
    font-size: 12.5px !important;
    overflow-wrap: anywhere;
  }
}

/* Ép toàn bộ hệ thống sử dụng Be Vietnam Pro - Chuẩn Tiếng Việt không lỗi dấu */
    *, html, body, input, select, textarea, button {
      font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
      text-rendering: auto !important;
    }
    h1, h2, h3, h4, h5, h6, .ttl, .hd-head-tt, .brand, .kpi .v, .mini .v {
      letter-spacing: normal !important;
    }

    /* BỔ SUNG & TINH CHỈNH THEME THEO STYLE GUIDE NHIỆM VỤ */
    :root {
      --do: #d32f2f;
      --do-dam: #b71c1c;
      --do-nhat: #fee2e2;
      --vang: #f59e0b;
      --vang-nhat: #fef3c7;
      --luc: #1b5e20;
      --luc-dam: #0d3d13;
      --luc-nhat: #e8f5e9;
      --cam: #d97706;
      --cam-nhat: #fed7aa; /* Khối cam theo dõi tiến độ chuẩn */
      --nen: #f1f5f9;
      --be-mat: #ffffff;
      --be-mat-2: #f8fafc;
      --chu: #0f172a;
      --chu-mo: #475569;
      --vien: #e2e8f0;
      --vien-dam: #cbd5e1;
      --topbar-h: 56px;
    }
    /* MENU BÊN TRÁI ĐỒNG BỘ 100% TONE XANH LỤC ĐẬM NHIỆM VỤ GIA LAI */
    .sidebar {
      background: linear-gradient(180deg, #1b5e20 0%, #0d3d13 100%) !important;
      border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
      box-shadow: 2px 0 10px rgba(10, 40, 15, 0.18) !important;
    }
    .sidebar .brand {
      background: linear-gradient(135deg, #1b5e20, #0d3d13) !important;
      border-bottom: 3px solid #f59e0b !important;
      padding: 8px 10px !important;
      gap: 8px !important;
      display: flex !important;
      align-items: center !important;
      height: var(--topbar-h) !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }
    .sidebar .brand .logo {
      width: 34px !important;
      height: 34px !important;
      flex: none !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .sidebar .brand .logo img {
      width: 34px !important;
      height: 34px !important;
      object-fit: contain !important;
    }
    .sidebar .brand span:not(.logo) {
      min-width: 0 !important;
      flex: 1 !important;
      overflow: hidden !important;
    }
    .sidebar .brand b {
      color: #ffffff !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      letter-spacing: 0.1px !important;
      line-height: 1.25 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      display: block !important;
      margin-bottom: 3px !important;
    }
    .sidebar .brand small {
      color: #fef08a !important;
      opacity: 0.95 !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: 0.2px !important;
      line-height: 1.2 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      display: block !important;
      text-transform: uppercase !important;
    }
    .nav {
      background: transparent !important;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
    .nav::-webkit-scrollbar {
      width: 4px;
    }
    .nav::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
    }
    .nav .grp {
      color: #86efac !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 0.8px !important;
      text-transform: uppercase !important;
      margin: 14px 10px 6px !important;
      opacity: 0.95 !important;
    }
    .nav a, .nav .nav-link {
      color: rgba(255, 255, 255, 0.88) !important;
      border-radius: 8px !important;
      transition: background 0.15s ease, color 0.15s ease !important;
      position: relative !important;
    }
    .nav a svg, .nav .nav-link svg {
      stroke: rgba(255, 255, 255, 0.82) !important;
    }
    .nav a:hover, .nav .nav-link:hover {
      background: rgba(255, 255, 255, 0.12) !important;
      color: #ffffff !important;
      text-decoration: none !important;
    }
    .nav a:hover svg, .nav .nav-link:hover svg {
      stroke: #ffffff !important;
    }
    .nav a.on, .nav .nav-link.on {
      background: rgba(255, 255, 255, 0.18) !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }
    .nav a.on svg, .nav .nav-link.on svg {
      stroke: #fcd34d !important;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) !important;
    }
    .nav a.on::before, .nav .nav-link.on::before {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      top: 6px !important;
      bottom: 6px !important;
      width: 4px !important;
      border-radius: 0 4px 4px 0 !important;
      background: #f59e0b !important;
      box-shadow: 0 0 8px rgba(245, 158, 11, 0.6) !important;
    }
    .sidebar .foot {
      background: rgba(0, 0, 0, 0.25) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
      color: rgba(255, 255, 255, 0.82) !important;
      padding: 12px 14px !important;
    }
    .sidebar .foot b {
      color: #ffffff !important;
    }
    .sidebar .foot small {
      color: rgba(255, 255, 255, 0.65) !important;
    }
    .topbar {
      background: linear-gradient(90deg, #1b5e20 0%, #2e7d32 100%) !important;
      border-bottom: 3px solid #f59e0b !important;
      box-shadow: 0 2px 10px rgba(10, 40, 15, 0.2) !important;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    /* Khối theo dõi tiến độ chuẩn screenshot */
    .box-theodoi {
      background: #fed7aa;
      border: 1px solid #f59e0b;
      border-radius: 6px;
      padding: 10px 14px;
      font-weight: 700;
      color: #9a3412;
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 12px 0;
    }
    .box-theodoi input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: #2e7d32;
    }
    /* Badge trạng thái */
    .badge-luc { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; }
    .badge-cam { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; }
    .badge-do { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; }
    .badge-xanh { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; padding: 2px 8px; border-radius: 4px; font-size: 11.5px; font-weight: 600; }
    
    /* Dòng tiến trình mốc Timeline */
    .timeline-wrap {
      position: relative;
      padding-left: 28px;
      margin: 20px 0;
    }
    .timeline-wrap::before {
      content: '';
      position: absolute;
      left: 10px;
      top: 10px;
      bottom: 10px;
      width: 2px;
      background: #cbd5e1;
    }
    .tl-item {
      position: relative;
      margin-bottom: 24px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .tl-item::before {
      content: '';
      position: absolute;
      left: -23px;
      top: 18px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #1b5e20;
      border: 2px solid #ffffff;
      box-shadow: 0 0 0 2px #1b5e20;
    }
    .tl-item.pending::before {
      background: #f59e0b;
      box-shadow: 0 0 0 2px #f59e0b;
    }
    /* Chuyển tab mượt */
    .tab-content-panel { display: none; }
    .tab-content-panel.active { display: block; }

    /* CSS SƠ ĐỒ TƯ DUY NHIỆM VỤ TRỌNG TÂM */
    .sd-hero {
      background: linear-gradient(135deg, #8A0F18 0%, #5C0A10 100%) !important;
      color: #fff;
      padding: 16px 20px;
      border-radius: var(--r);
      margin-bottom: 12px;
      box-shadow: var(--bong);
    }
    .sd-hero-ten { font-size: 1.35rem; font-weight: 700; margin-top: 8px; display: flex; align-items: center; gap: 8px; }
    .sd-hero-sub { font-size: 13px; opacity: 0.9; margin-top: 4px; }
    .sd-hero-meta { font-size: 12px; opacity: 0.85; margin-top: 6px; }
    .nq-btn { background: rgba(255,255,255,0.18) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.3) !important; }
    .nq-btn:hover { background: rgba(255,255,255,0.3) !important; }
    .sd-thanh { background: var(--be-mat); border: 1px solid var(--vien); border-radius: var(--r); padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
    .sd-tim { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 260px; background: var(--be-mat-2); border: 1px solid var(--vien); border-radius: 6px; padding: 4px 10px; }
    .sd-tim input { border: none; background: transparent; outline: none; width: 100%; font-size: 13px; color: var(--chu); }
    .sd-cc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .sd-nhom { display: flex; align-items: center; gap: 3px; border-right: 1px solid var(--vien); padding-right: 10px; }
    .sd-nhom:last-child { border-right: none; padding-right: 0; }
    .sd-khung { position: relative; height: calc(100vh - 270px); min-height: 560px; background: var(--be-mat); border: 1px solid var(--vien); border-radius: var(--r); overflow: hidden; box-shadow: var(--bong); }
    #sd-svg { width: 100%; height: 100%; display: block; cursor: grab; user-select: none; }
    #sd-svg:active { cursor: grabbing; }
    .sd-chu-giai { position: absolute; bottom: 12px; left: 12px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(4px); border: 1px solid var(--vien); border-radius: 6px; padding: 6px 12px; font-size: 11.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); z-index: 10; }
    [data-theme="dark"] .sd-chu-giai { background: rgba(23, 28, 36, 0.92); }
    .sd-chu-giai span { display: flex; align-items: center; gap: 5px; }
    .sd-chu-giai i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
    .k-phan { background: #1D5FA8; }
    .k-muc { background: #7C3AED; }
    .k-tieu { background: #C26A00; }
    .k-tinh { background: #157A3B; }
    .k-ct { background: #0E8A8A; }
    .k-nv { background: #B45309; }
    .sd-tip { position: absolute; background: rgba(15, 23, 42, 0.95); color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 12px; max-width: 320px; pointer-events: none; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

    /* Role switcher select in topbar */
    .role-switcher-select {
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.3);
      color: #ffffff;
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 600;
      outline: none;
      cursor: pointer;
    }
    .role-switcher-select option {
      color: #0f172a;
      background: #ffffff;
    }

    /* ================================================================ */
    /* TỐI ƯU HÓA ĐẶC BIỆT CHO GIAO DIỆN MOBILE & CHỐNG TRÀN TOÀN TRANG  */
    /* ================================================================ */
    html, body {
      width: 100% !important;
      max-width: 100vw !important;
      overflow-x: hidden !important;
      box-sizing: border-box !important;
    }
    .app, .main {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      overflow-x: hidden !important;
      box-sizing: border-box !important;
    }
    .content {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

    /* TOPBAR TRÊN MOBILE: THU GỌN VỪA KHÍT 1 DÒNG */
    @media (max-width: 768px) {
      .topbar {
        height: 50px !important;
        padding: 0 10px !important;
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
      }
      .topbar .btn-menu {
        display: grid !important;
        width: 36px !important;
        height: 36px !important;
        flex: none !important;
      }
      .topbar .ttl {
        font-size: 14px !important;
        font-weight: 750 !important;
        color: #fff !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
      }
      .topbar .ttl small,
      .khau-hieu,
      .btn-thu,
      .btn-thoang,
      .btn-phim-tat,
      .btn-hdsd,
      .btn-tim,
      .btn-theme,
      .tb-dem {
        display: none !important;
      }
      .program-switcher-wrap,
      .role-switcher-wrap {
        flex: none !important;
        padding: 2px 4px !important;
        gap: 2px !important;
      }
      .program-switcher-wrap span,
      .role-switcher-wrap span {
        display: none !important;
      }
      .program-switcher-select,
      .role-switcher-select {
        max-width: 105px !important;
        font-size: 11px !important;
        padding: 2px 4px !important;
        height: 28px !important;
        border-radius: 6px !important;
        background: rgba(255,255,255,0.2) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255,255,255,0.35) !important;
      }
      .topbar .user {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        flex: none !important;
        cursor: pointer !important;
      }
      .topbar .user span:not(.av) {
        display: none !important;
      }
      .topbar .user .av {
        display: grid !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        place-items: center !important;
        border-radius: 50% !important;
        margin: 0 !important;
        box-shadow: 0 0 0 1.5px rgba(255,255,255,0.4) !important;
      }
      #userDropdownMenu {
        right: 0 !important;
        left: auto !important;
        max-width: min(290px, 92vw) !important;
      }
      .topbar a.ico[title="Thông báo"],
      .topbar a.ico,
      .topbar .btn-bell {
        display: none !important;
      }
      .content {
        padding: 10px 10px calc(72px + env(safe-area-inset-bottom, 10px)) !important;
      }
      .card {
        margin-bottom: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      .card .hd {
        padding: 10px 12px !important;
      }
      .card .bd {
        padding: 12px !important;
      }
    }

    /* ĐỊNH DẠNG CỘT & BỐ CỤC 2 CỘT: TRÊN MOBILE BẮT BUỘC 100% CHIỀU RỘNG */
    .col-5ro {
      flex: 0 0 38%;
      max-width: 38%;
    }
    .col-timeline {
      flex: 0 0 62%;
      max-width: 62%;
    }
    @media (max-width: 820px) {
      .row {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
      }
      .col,
      .col-5ro,
      .col-timeline,
      .col[style*="max-width:"],
      .col[style*="flex:"] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
      }
    }

    /* BADGE VÀ TIÊU ĐỀ CHI TIẾT NHIỆM VỤ */
    .task-badge-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
    }
    .badge-code {
      background: #e8f5e9;
      color: #1b5e20;
      border: 1px solid #a5d6a7;
      font-weight: 800;
      font-size: 11.5px;
      padding: 3px 8px;
      border-radius: 6px;
    }
    .task-title-detail {
      font-size: 1.35rem;
      font-weight: 750;
      line-height: 1.35;
      margin: 6px 0;
      color: var(--chu);
    }
    .task-meta-detail {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      font-size: 12px;
      color: var(--chu-mo);
      margin-bottom: 8px;
    }
    .task-actions-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin: 10px 0 14px;
    }
    @media (max-width: 768px) {
      .task-title-detail {
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
      }
      .task-actions-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
      }
      .task-actions-grid .btn {
        height: 38px !important;
        font-size: 12px !important;
        justify-content: center !important;
        padding: 0 8px !important;
        margin: 0 !important;
        white-space: nowrap !important;
      }
      .task-actions-grid .btn-primary-action {
        grid-column: span 2 !important;
        height: 42px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
      }
      .task-actions-grid .btn-back-action {
        grid-column: span 2 !important;
        height: 38px !important;
      }
      .box-theodoi {
        font-size: 12px !important;
        padding: 8px 10px !important;
      }
    }

    /* 6 RÕ DANH SÁCH KEY-VALUE (THAY THẾ BẢNG TABLE CỨNG) */
    .list-5ro {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .item-5ro {
      display: flex;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 8px;
    }
    .item-5ro .k {
      width: 140px;
      flex: none;
      font-size: 12.5px;
      font-weight: 600;
      color: #64748b;
    }
    .item-5ro .v {
      flex: 1;
      font-size: 13.5px;
      line-height: 1.5;
      color: #1e293b;
    }
    @media (max-width: 768px) {
      .item-5ro {
        flex-direction: column !important;
        gap: 2px !important;
        padding-bottom: 8px !important;
      }
      .item-5ro .k {
        width: 100% !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        color: #94a3b8 !important;
      }
      .item-5ro .v {
        font-size: 13.5px !important;
        color: #0f172a !important;
      }
    }

    /* TIMELINE TRÊN MOBILE */
    .tl-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 8px;
      gap: 6px;
      flex-wrap: wrap;
    }
    @media (max-width: 768px) {
      .tl-item {
        padding: 12px 10px 12px 14px !important;
      }
      .review-action-btns {
        flex-direction: column !important;
        gap: 8px !important;
      }
      .review-action-btns .btn {
        width: 100% !important;
        height: 40px !important;
        justify-content: center !important;
      }
    }

    /* BẢNG DẠNG THẺ TRÊN ĐIỆN THOẠI: KHẮC PHỤC TRIỆT ĐỂ LỖI LỆCH TIẾN ĐỘ & ĐÈ CHỮ */
    @media (max-width: 768px) {
      .tbl-wrap.the-m { overflow: visible !important; }
      .tbl-wrap.the-m table.tbl { min-width: 0 !important; width: 100% !important; display: block !important; border-collapse: separate !important; border-spacing: 0 !important; }
      .tbl-wrap.the-m table.tbl colgroup,
      .tbl-wrap.the-m table.tbl thead { display: none !important; }
      .tbl-wrap.the-m table.tbl tbody { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; }
      .tbl-wrap.the-m table.tbl tbody tr {
        display: flex !important;
        flex-direction: column !important;
        border: 1px solid var(--vien) !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06) !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
      }
      [data-theme="dark"] .tbl-wrap.the-m table.tbl tbody tr {
        background: #171c24 !important;
        border-color: #2a313c !important;
      }
      .tbl-wrap.the-m table.tbl tbody tr.ht { border-left: 4px solid #1b5e20 !important; }
      .tbl-wrap.the-m table.tbl tbody tr.sap { border-left: 4px solid #f59e0b !important; }
      .tbl-wrap.the-m table.tbl tbody tr.qh { border-left: 4px solid #d32f2f !important; }
      .tbl-wrap.the-m table.tbl tbody tr > td:first-child { box-shadow: none !important; }
      .tbl-wrap.the-m table.tbl td.num[data-ty]::before,
      .tbl-wrap.the-m table.tbl td.num[data-ty]::after { display: none !important; content: none !important; }
      .tbl-wrap.the-m table.tbl td.num { position: static !important; text-align: right !important; }
      .tbl-wrap.the-m table.tbl td {
        border: 0 !important;
        padding: 5px 0 !important;
        text-align: left !important;
        white-space: normal !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: transparent !important;
      }
      .tbl-wrap.the-m table.tbl td::before {
        content: attr(data-nhan) !important;
        flex: 0 0 auto !important;
        max-width: 45% !important;
        color: var(--chu-mo) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        position: static !important;
        display: block !important;
        line-height: 1.3 !important;
      }
      .tbl-wrap.the-m table.tbl td > * { text-align: right !important; }
      .tbl-wrap.the-m table.tbl td.the-chinh {
        display: block !important;
        padding: 4px 0 8px !important;
        margin-bottom: 6px !important;
        border-bottom: 1px dashed var(--vien) !important;
        width: 100% !important;
        text-align: left !important;
      }
      .tbl-wrap.the-m table.tbl td.the-chinh::before { display: none !important; }
      .tbl-wrap.the-m table.tbl td.the-chinh b,
      .tbl-wrap.the-m table.tbl td.the-chinh a {
        display: block !important;
        font-size: 14.5px !important;
        font-weight: 750 !important;
        color: var(--chu) !important;
        line-height: 1.4 !important;
        text-align: left !important;
      }
      .tbl-wrap.the-m table.tbl td.the-chinh .tiny {
        display: block !important;
        font-size: 12px !important;
        color: var(--chu-mo) !important;
        margin-top: 4px !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
        text-align: left !important;
      }
      .tbl-wrap.the-m table.tbl td.the-trong { display: none !important; }
      .tbl-wrap.the-m table.tbl tr.ct-tr-nhom { background: var(--be-mat-2) !important; border-radius: 8px !important; padding: 6px 12px !important; font-weight: 650 !important; }
      .tbl-wrap.the-m table.tbl tr.ct-tr-nhom td { display: block !important; }
      .tbl-wrap.the-m table.tbl tr.ct-tr-nhom td::before { display: none !important; }
      .tbl-wrap.the-m .tbl-nut { display: none !important; }
      .tbl-wrap.the-m table.tbl td .bar,
      .tbl-wrap.the-m table.tbl td .prog { flex: 1 !important; }
      .tbl-wrap.the-m table.tbl td:last-child {
        margin-top: 6px !important;
        padding-top: 8px !important;
        border-top: 1px dashed var(--vien) !important;
        justify-content: space-between !important;
      }
      .tbl-wrap.the-m table.tbl td:last-child .btn {
        height: 34px !important;
        padding: 0 16px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
      }
    }

    /* THANH BOTTOM NAV CHUẨN NATIVE MOBILE APP */
    .bottom-nav {
      display: none;
    }
    @media (max-width: 768px) {
      .bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        border-top: 1px solid #e2e8f0 !important;
        z-index: 9999 !important;
        padding: 5px 2px calc(5px + env(safe-area-inset-bottom, 0px)) !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
        box-sizing: border-box !important;
      }
      [data-theme="dark"] .bottom-nav {
        background: #171c24 !important;
        border-top-color: #2a313c !important;
      }
      .bottom-nav a {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        color: #64748b !important;
        padding: 4px 2px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
      }
      .bottom-nav a .ic {
        width: 34px !important;
        height: 24px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 99px !important;
        transition: background 0.15s ease !important;
      }
      .bottom-nav a svg {
        width: 19px !important;
        height: 19px !important;
      }
      .bottom-nav a.on {
        color: #1b5e20 !important;
        font-weight: 750 !important;
      }
      .bottom-nav a.on .ic {
        background: #e8f5e9 !important;
        color: #1b5e20 !important;
      }
      [data-theme="dark"] .bottom-nav a.on {
        color: #4ade80 !important;
      }
      [data-theme="dark"] .bottom-nav a.on .ic {
        background: rgba(74, 222, 128, 0.15) !important;
        color: #4ade80 !important;
      }
    }

    /* ĐỒNG BỘ 100% STYLE CHÍNH - XANH LỤC NHIỆM VỤ & VÀNG KIM */
    .btn.p, .btn-primary-action, button.btn.p, input[type="submit"].btn.p {
      background: #1b5e20 !important;
      border-color: #1b5e20 !important;
      color: #ffffff !important;
    }
    .btn.p:hover, .btn-primary-action:hover, button.btn.p:hover {
      background: #0d3d13 !important;
      border-color: #0d3d13 !important;
      color: #ffffff !important;
    }
    dialog.dlg-hd {
      border: 1px solid #1b5e20 !important;
      box-shadow: 0 24px 70px rgba(10, 40, 15, 0.35), 0 0 0 4px rgba(27, 94, 32, 0.15) !important;
    }
    .hd-head {
      background: linear-gradient(90deg, #1b5e20 0%, #2e7d32 100%) !important;
      border-bottom: 2px solid #f59e0b !important;
      color: #ffffff !important;
    }
    .hd-head-tt b, .hd-head-tt small {
      color: #ffffff !important;
    }
    .hd-head kbd {
      background: rgba(255, 255, 255, 0.2) !important;
      border: 1px solid rgba(255, 255, 255, 0.4) !important;
      color: #ffffff !important;
      cursor: pointer !important;
    }
    .hd-head kbd:hover {
      background: rgba(255, 255, 255, 0.35) !important;
    }
    .hd-ic {
      background: #f59e0b !important;
      color: #1b5e20 !important;
    }
    .hd-khoi h4 {
      color: #1b5e20 !important;
    }
    .bo-loc .pv label.on {
      background: #1b5e20 !important;
      color: #ffffff !important;
      box-shadow: 0 2px 6px rgba(27, 94, 32, 0.35) !important;
    }
    .pham-vi .chip {
      background: #e8f5e9 !important;
      color: #1b5e20 !important;
      border: 1px solid #a5d6a7 !important;
    }
    .badge-code {
      background: #e8f5e9 !important;
      color: #1b5e20 !important;
      border: 1px solid #a5d6a7 !important;
    }
    .nhac-viec.canh-bao {
      border-left-color: #f59e0b !important;
      background: linear-gradient(90deg, #fef3c7, var(--be-mat) 70%) !important;
    }
    .nhac-viec .nv-noi .do {
      color: #b45309 !important;
    }

    /* CSS PHÂN HỆ TÁC NGHIỆP NHIỆM VỤ */
    .portal-account-box {
      background: linear-gradient(135deg, #1b5e20 0%, #0d3d13 100%);
      color: #ffffff;
      border: 1px solid #1b5e20;
      border-bottom: 3px solid #f59e0b;
      border-radius: 10px;
      padding: 14px 18px;
      margin-bottom: 14px;
      box-shadow: 0 4px 14px rgba(10, 40, 15, 0.2);
    }
    .portal-account-box .p-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #fef08a;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .portal-account-grid {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 20px;
      font-size: 13px;
    }
    .portal-cred-item {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 6px;
      padding: 4px 10px;
    }
    .portal-cred-item b {
      color: #ffffff;
      font-family: monospace, sans-serif !important;
      font-size: 13.5px;
    }
    .portal-copy-btn {
      background: #f59e0b !important;
      color: #0f172a !important;
      font-weight: 700 !important;
      font-size: 11px !important;
      padding: 2px 8px !important;
      border-radius: 4px !important;
      border: none !important;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .portal-copy-btn:hover {
      background: #fbbf24 !important;
    }
    .portal-workspace-wrap, .portal-iframe-container {
      position: relative;
      width: 100%;
      min-height: 680px;
      background: #ffffff;
      border: 1px solid #1b5e20;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    }
    .portal-workspace-wrap.fullscreen, .portal-iframe-container.fullscreen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 10000;
      border-radius: 0;
      border: none;
      overflow-y: auto;
    }
    .portal-loading-banner {
      position: absolute;
      top: 10px;
      right: 14px;
      background: rgba(27, 94, 32, 0.9);
      color: #ffffff;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      pointer-events: none;
      z-index: 10;
    }
    .account-unit-card {
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 12px;
      background: #ffffff;
      margin-bottom: 10px;
      transition: all 0.15s ease;
    }
    .account-unit-card:hover {
      border-color: #1b5e20;
      box-shadow: 0 3px 10px rgba(27, 94, 32, 0.12);
    }
    .account-unit-card.featured {
      border: 2px solid #1b5e20;
      background: #f0fdf4;
    }

/* ===== Tổng quan công khai: Tiến độ tổng thể + Xếp hạng đơn vị ===== */
.public-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 18px; max-width: 1400px; margin: 0 auto; }
.public-kpi-card.public-units { margin-top: 0; padding: 18px 20px; border: 1px solid #dce5e0; }
.public-kpi-card { background: #fff; border: 1px solid #dce5e0; border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(15, 23, 42, .05); min-width: 0; }
.public-kpi-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid #eef2ef; }
.public-kpi-card-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: #1b5e20; }
.public-kpi-badge { flex: none; font-size: 12px; font-weight: 700; color: #b45309; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 6px; padding: 2px 10px; }
.public-kpi-body { display: flex; align-items: center; gap: 28px; }
.public-kpi-ring { --chart-value: 0; position: relative; flex: none; width: 168px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, #1b5e20 0%, #2e7d32 calc(var(--chart-value) * .5%), #f59e0b calc(var(--chart-value) * 1%), #e8eee9 calc(var(--chart-value) * 1%) 100%); display: grid; place-items: center; }
.public-kpi-ring::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: #fff; }
.public-kpi-ring > span { position: relative; z-index: 1; display: grid; justify-items: center; line-height: 1.1; }
.public-kpi-ring b { font-size: 32px; font-weight: 800; color: #0f172a; }
.public-kpi-ring small { margin-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #1b5e20; }
.public-kpi-side { flex: 1; min-width: 0; }
.public-kpi-total { font-size: 13px; color: #475569; margin-bottom: 10px; }
.public-kpi-total b { color: #0f172a; }
.public-kpi-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.public-kpi-item { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; font-size: 14px; color: #334155; }
.public-kpi-item b { color: #0f172a; font-weight: 700; }
.public-kpi-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot, #94a3b8); }
.public-kpi-complete { --dot: #1b5e20; }
.public-kpi-active { --dot: #f59e0b; }
.public-kpi-pending { --dot: #64748b; }
.public-kpi-muted { --dot: #94a3b8; }
.public-kpi-late { --dot: #e6b325; }
.public-kpi-overdue { --dot: #d32f2f; }
.public-kpi-overdue b { color: #d32f2f; }
.public-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-height: 300px; overflow-y: auto; }
.public-rank-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.public-rank-medal { flex: none; width: 22px; text-align: center; font-size: 15px; }
.public-rank-index { font-size: 12px; font-weight: 700; color: #64748b; }
.public-rank-name { flex: 1; min-width: 0; font-weight: 600; color: #1e293b; overflow-wrap: anywhere; }
.public-rank-value { flex: none; font-weight: 700; color: #b45309; white-space: nowrap; }
.public-rank-track { height: 8px; border-radius: 999px; background: #e8eee9; overflow: hidden; }
.public-rank-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1b5e20 0%, #2e7d32 45%, #f59e0b 100%); transition: width .8s ease; }
@media (max-width: 900px) { .public-kpi-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .public-kpi-body { flex-direction: column; gap: 18px; }
  .public-kpi-side { width: 100%; }
  .public-kpi-ring { width: 150px; }
  .public-rank-head { flex-wrap: wrap; }
  .public-rank-value { margin-left: 30px; }
}
@media (prefers-reduced-motion: reduce) { .public-rank-track > span { transition: none; } }

/* Thẻ lớn xếp hạng các đơn vị còn lại (dự kiến ~200 đơn vị) */
.public-kpi-wide { grid-column: 1 / -1; }
.public-units .public-rank-list { max-height: none; overflow: visible; }
.public-rank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px 28px; max-height: 560px; overflow-y: auto; padding-right: 6px; }
.public-rank-grid .public-rank-row { padding-bottom: 10px; border-bottom: 1px dashed #eef2ef; }
.public-rank-grid .public-rank-head { font-size: 13px; }
.public-rank-index { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #f1f5f2; }
@media (max-width: 480px) { .public-rank-grid { grid-template-columns: 1fr; max-height: 480px; } }