/* =========================================================================
   VTL Construction Diary — app.css (Phần 1+2)
   Mobile-first, light theme, brand vàng/cam Vân Thiên Long.
   ========================================================================= */

:root {
  color-scheme: light; /* app light-only → chặn Android "force dark" tự đảo màu (poll/modal/input hoá đen) */
  --vtl-orange: #f59e0b;
  --vtl-orange-2: #fbbf24;
  --vtl-orange-dark: #b45309;
  --vtl-navy: #0b1020;
  --vtl-navy-2: #111827;
  --vtl-bg: #f5f7fb;
  --vtl-card: #ffffff;
  --vtl-border: #e5e7eb;
  --vtl-border-2: #d1d5db;
  --vtl-text: #1f2937;
  --vtl-text-2: #374151;
  --vtl-muted: #6b7280;
  --vtl-success: #16a34a;
  --vtl-success-bg: #dcfce7;
  --vtl-danger: #dc2626;
  --vtl-danger-bg: #fee2e2;
  --vtl-warning: #ea580c;
  --vtl-warning-bg: #ffedd5;
  --vtl-info: #2563eb;
  --vtl-info-bg: #dbeafe;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow:    0 4px 12px rgba(15,23,42,.08);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.12);
  --topbar-h: 56px;
  --bottomnav-h: 64px;
  --sidebar-w: 240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Segoe UI Emoji", sans-serif;
  background: var(--vtl-bg);
  color: var(--vtl-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--vtl-orange); text-decoration: none; }
a:hover { text-decoration: none; color: var(--vtl-orange-dark, #d97706); } /* chuẩn UI VTL: hover chỉ đổi màu, KHÔNG gạch chân */
img, video { max-width: 100%; height: auto; }
input, select, textarea, button { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ===== Layout ===== */
.layout {
  min-height: 100vh;
  padding-top: var(--topbar-h);
  padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
}

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  background: #fff;
  border-bottom: 1px solid var(--vtl-border);
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}
.topbar__menu {
  width: 44px; height: 44px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; border: 0; background: transparent; padding: 0;
}
.topbar__menu span { display: block; width: 22px; height: 2px; background: var(--vtl-text); border-radius: 2px; }
.topbar__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--vtl-text); font-weight: 700;
  flex: 1; min-width: 0; overflow: hidden;
}
.topbar__brand:hover { text-decoration: none; }
.brand__logo {
  width: 36px; height: 36px; flex: 0 0 36px;
  background: linear-gradient(135deg, var(--vtl-orange), var(--vtl-orange-2));
  color: #111827; font-weight: 800; font-size: 14px;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.brand__text { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.topbar__search {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--vtl-text); cursor: pointer;
  border-radius: 50%;
}
.topbar__search:hover { background: rgba(0,0,0,.05); }
.topbar__search[hidden] { display: none; }

/* Chuông bật thông báo cạnh avatar (CTA — ẩn khi đã bật) */
.topbar__bell {
  position: relative;
  width: 40px; height: 40px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--vtl-text); cursor: pointer;
  border-radius: 50%;
}
.topbar__bell:hover { background: rgba(0,0,0,.05); }
.topbar__bell[hidden] { display: none; }
/* Chưa bật: chấm cam mời + nhịp nhẹ để người dùng để ý */
.topbar__bell--attn { color: var(--vtl-orange, #f59e0b); }
.topbar__bell--attn::after {
  content: ''; position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; box-shadow: 0 0 0 2px #fff;
  animation: bellPulse 1.8s ease-in-out infinite;
}
@keyframes bellPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .topbar__bell--attn::after { animation: none; } }
/* Bị chặn: chuông mờ, không chấm */
.topbar__bell--blocked { color: var(--vtl-muted, #9ca3af); }
/* Panel Tìm kiếm / Bộ lọc mở từ icon trên topbar (thay cho thanh dưới) */
.page-search {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 48;
  background: #fff; border-bottom: 1px solid var(--vtl-border);
  box-shadow: 0 8px 22px rgba(15,23,42,.14);
  padding: 12px 16px 14px; max-height: calc(100vh - var(--topbar-h) - 8px); overflow: auto;
}
@media (min-width: 1024px) { .page-search { left: var(--sidebar-w); } }
.page-search[hidden] { display: none; }
.page-search__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.page-search__head strong { font-size: 14px; }
.page-search__close { border: 0; background: #f3f4f6; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; color: var(--vtl-muted); font-size: 15px; }

.topbar__user { position: relative; }
.topbar__user > summary {
  list-style: none; cursor: pointer;
  padding: 6px 8px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 8px;
  user-select: none;
}
.topbar__user > summary::-webkit-details-marker { display: none; }
.topbar__name { display: none; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--vtl-navy); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.user-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--vtl-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 240px; padding: 12px;
  z-index: 60;
}
.user-menu__head { padding-bottom: 8px; border-bottom: 1px solid var(--vtl-border); margin-bottom: 8px; }
.user-menu__name { font-weight: 700; }
.user-menu__role { font-size: 13px; color: var(--vtl-muted); }
.user-menu__form { margin: 0; }

/* ===== Sidebar ===== */
.sidebar {
  position: fixed;
  top: var(--topbar-h);
  bottom: 0;
  left: -100%;
  width: 84%;
  max-width: var(--sidebar-w);
  background: var(--vtl-navy);
  color: #e5e7eb;
  z-index: 49;
  transition: left .25s ease;
  padding: 16px 0;
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}
.sidebar.is-open { left: 0; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; flex: 1; }
.nav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  color: #cbd5e1;
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
}
.nav__item:hover { background: rgba(245,158,11,.08); color: #fff; text-decoration: none; }
.nav__item.is-active {
  background: linear-gradient(90deg, rgba(245,158,11,.18), rgba(245,158,11,.04));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--vtl-orange);
}
.nav__item.is-disabled { color: #6b7280; cursor: not-allowed; }
.nav__item.is-disabled:hover { background: transparent; color: #6b7280; }
.nav__icon {
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: rgba(255,255,255,.06);
  font-weight: 700;
}
.nav__item.is-active .nav__icon { background: var(--vtl-orange); color: #111827; }
.sidebar__footer {
  padding: 12px 16px;
  font-size: 12px; color: #6b7280;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sidebar__version { color: var(--vtl-orange); margin-top: 2px; }

.overlay {
  position: fixed; inset: var(--topbar-h) 0 0 0;
  background: rgba(15,23,42,.5);
  display: none; z-index: 48;
}
.overlay.is-visible { display: block; }

/* ===== Main ===== */
.main {
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Bottom nav (mobile) ===== */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff; border-top: 1px solid var(--vtl-border);
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  z-index: 47; box-shadow: 0 -2px 8px rgba(15,23,42,.06);
}
.bottomnav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px;
  font-size: 11px; color: var(--vtl-muted);
  text-decoration: none;
  border: 0; background: transparent;
}
.bottomnav__item:hover { text-decoration: none; }
.bottomnav__item.is-active { color: var(--vtl-orange-dark); font-weight: 600; }
.bottomnav__icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 14px; font-weight: 700;
  background: rgba(245,158,11,.08);
  position: relative; overflow: visible;
}
.bottomnav__item.is-active .bottomnav__icon { background: var(--vtl-orange); color: #fff; }

/* Desktop: fixed sidebar, hide bottomnav */
@media (min-width: 1024px) {
  .topbar__menu { display: none; }
  .topbar__name { display: inline; }
  .sidebar { left: 0; max-width: var(--sidebar-w); width: var(--sidebar-w); box-shadow: none; border-right: 1px solid var(--vtl-border); background: var(--vtl-navy); }
  .main { margin-left: var(--sidebar-w); padding: 24px; max-width: none; }
  .bottomnav { display: none; }
  .layout { padding-bottom: 0; }
  .overlay { display: none !important; }
}

/* ===== Page header ===== */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.page-title { font-size: 22px; font-weight: 700; margin: 0; }
.page-sub { color: var(--vtl-muted); font-size: 14px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; min-height: 40px;
  border: 1px solid var(--vtl-border-2);
  background: #fff; color: var(--vtl-text);
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { text-decoration: none; background: #f9fafb; }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: linear-gradient(135deg, var(--vtl-orange), var(--vtl-orange-2));
  border-color: var(--vtl-orange-dark);
  color: #111827;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--vtl-orange); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--vtl-muted); }
.btn--ghost:hover { background: #f3f4f6; color: var(--vtl-text); }
.btn--danger { background: #fff; border-color: #fca5a5; color: var(--vtl-danger); }
.btn--danger:hover { background: var(--vtl-danger-bg); }
.btn--sm { padding: 6px 10px; min-height: 32px; font-size: 13px; }
.btn--lg { padding: 14px 18px; min-height: 48px; font-size: 16px; }
.btn--block { width: 100%; }
.inline-form { display: inline-block; margin: 0; }

/* ===== Cards ===== */
.card {
  background: var(--vtl-card);
  border: 1px solid var(--vtl-border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--vtl-border);
  gap: 8px;
}
.card__title { margin: 0; font-size: 16px; font-weight: 700; }
.card__body { padding: 16px; }
/* Chuẩn UI VTL (bug "text dính box"): card TRẦN (không __header/__body & không flush)
   tự có padding → nội dung không dính viền. Card có __header/__body tự pad; .card--flush giữ sát viền. */
.card:not(.card--flush):not(:has(> .card__header)):not(:has(> .card__body)) { padding: 14px 16px; }

/* ===== Stat cards ===== */
.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-bottom: 16px;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px){ .stats-grid { grid-template-columns: repeat(5, 1fr); } }
.stat-card {
  background: #fff;
  border: 1px solid var(--vtl-border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-sm);
}
.stat-card__label { color: var(--vtl-muted); font-size: 13px; }
.stat-card__value { font-size: 28px; font-weight: 800; color: var(--vtl-text); }
.stat-card__sub, .stat-card__link { font-size: 13px; }
.stat-card__unread { position: absolute; top: 8px; right: 8px; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 800; border-radius: 10px; }

/* Ô ngày dd/mm/yyyy (thay input type=date để hiển thị đúng chuẩn VTL, giữ picker native) */
.vdate { position: relative; display: flex; align-items: center; gap: 6px; }
.vdate__text { flex: 1 1 auto; min-width: 0; }
.vdate__text.is-invalid { border-color: var(--vtl-danger); outline-color: rgba(220,38,38,.25); }
.vdate__btn { flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--vtl-border-2);
  background: #fff; border-radius: var(--radius-sm); cursor: pointer; font-size: 17px; line-height: 1; }
.vdate__btn:hover { background: #f9fafb; }
.vdate__picker { position: absolute; left: 8px; bottom: 4px; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

/* Chọn loại phiếu (Thêm hoá đơn ↔ Phiếu nhận hàng) */
.doctype-pick { margin-bottom: 16px; }
.doctype-pick__lbl { font-size: 13px; font-weight: 600; color: var(--vtl-muted); margin-bottom: 8px; }
.doctype-pick__opts { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .doctype-pick__opts { grid-template-columns: 1fr 1fr; } }
.doctype-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1.5px solid var(--vtl-border-2); border-radius: 12px; background: #fff;
  text-decoration: none; color: var(--vtl-text); min-height: 64px; }
.doctype-opt:hover { border-color: var(--vtl-orange); background: #fffdf7; }
.doctype-opt.is-active { border-color: var(--vtl-orange-dark);
  background: linear-gradient(135deg, #fff7ea, #fffdf7); box-shadow: var(--shadow-sm); }
.doctype-opt__ic { font-size: 26px; flex: 0 0 auto; }
.doctype-opt__tx { display: flex; flex-direction: column; min-width: 0; }
.doctype-opt__tx strong { font-size: 15px; }
.doctype-opt__tx small { font-size: 12px; color: var(--vtl-muted); line-height: 1.35; }
.stat-card__link { color: var(--vtl-orange-dark); font-weight: 600; }
.stat-card--primary  { border-top: 4px solid var(--vtl-orange); }
.stat-card--warning  { border-top: 4px solid var(--vtl-warning); }
.stat-card--danger   { border-top: 4px solid var(--vtl-danger); }

/* ===== Forms ===== */
.form-card { padding: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 600; font-size: 14px; }
.field__hint { font-size: 12px; }
.field__error { color: var(--vtl-danger); font-size: 13px; }
.field--end { justify-content: flex-end; }
.input {
  padding: 10px 12px; min-height: 42px;
  border: 1px solid var(--vtl-border-2);
  border-radius: var(--radius-sm);
  background: #fff; color: var(--vtl-text);
  width: 100%; max-width: 100%;
  -webkit-appearance: none;
}
.input:focus { outline: 2px solid rgba(245,158,11,.3); border-color: var(--vtl-orange); }
textarea.input { min-height: 100px; resize: vertical; line-height: 1.5; }
.check { display: inline-flex; align-items: center; gap: 8px; }
.check input { width: 18px; height: 18px; }

.grid { display: grid; gap: 12px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.form-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--vtl-border); margin-top: 8px;
}

/* ===== Filter bar ===== */
.filter-bar {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .filter-bar { grid-template-columns: 1fr 200px 200px auto auto; }
}

/* ===== Lists ===== */
.list { list-style: none; margin: 0; padding: 0; }
.list__item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--vtl-border);
}
.list__item:last-child { border-bottom: 0; }
.list__main { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.list__main:hover { text-decoration: none; }
.list__title { font-weight: 600; color: var(--vtl-text, #1f2937); }
.list__sub { font-size: 13px; color: var(--vtl-text-2, #374151); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 500; }
.list__meta { font-size: 13px; margin-top: 2px; color: var(--vtl-text, #111827); font-weight: 500; }
.empty { color: var(--vtl-muted); padding: 20px; text-align: center; }

/* ===== Tables ===== */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%; border-collapse: collapse;
  background: #fff;
}
.table th, .table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--vtl-border);
  text-align: left; vertical-align: middle;
}
.table th { background: #f9fafb; font-weight: 700; font-size: 13px; color: var(--vtl-text-2); white-space: nowrap; }
.table tbody tr:hover { background: #fafafa; }
.cell-main { font-weight: 600; }
.cell-sub { font-size: 12px; color: var(--vtl-muted); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.show-sm { display: block; }
.hide-sm { display: none; }
@media (min-width: 768px) {
  .show-sm { display: none; }
  .hide-sm { display: table-cell; }
}

/* ===== Tags / Badges ===== */
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  background: #f3f4f6; color: var(--vtl-text-2);
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.tag--ok       { background: var(--vtl-success-bg); color: #14532d; }
.tag--off      { background: #f3f4f6; color: var(--vtl-muted); }
.tag--role-admin   { background: #fde68a; color: #78350f; }
.tag--role-manager { background: #dbeafe; color: #1e3a8a; }
.tag--role-worker  { background: #dcfce7; color: #14532d; }
.tag--status-active   { background: var(--vtl-success-bg); color: #14532d; }
.tag--status-paused   { background: var(--vtl-warning-bg); color: #7c2d12; }
.tag--status-completed{ background: #e0e7ff; color: #1e1b4b; }
.badge { background: var(--vtl-orange); color: #111827; padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }

/* ===== Key-value detail ===== */
.kv { display: grid; gap: 8px; }
.kv__row {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding-bottom: 8px; border-bottom: 1px dashed var(--vtl-border);
}
.kv__row:last-child { border-bottom: 0; }
.kv__k { color: var(--vtl-muted); font-size: 13px; }
.kv__v { font-weight: 500; }
@media (min-width: 768px) {
  .kv__row { grid-template-columns: 180px 1fr; gap: 12px; }
}

/* ===== Pagination ===== */
.pagination {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 12px 0;
}
.pagination__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid var(--vtl-border-2); background: #fff;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--vtl-text);
  font-weight: 600;
}
.pagination__btn:hover { background: #f9fafb; text-decoration: none; }
.pagination__btn.is-active { background: var(--vtl-orange); border-color: var(--vtl-orange-dark); color: #111827; }
.pagination__btn.is-disabled { opacity: .4; pointer-events: none; }
.pagination__gap { padding: 0 4px; color: var(--vtl-muted); }
.pagination__info { margin-left: auto; color: var(--vtl-muted); font-size: 13px; }

/* ===== Alerts ===== */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid; border-radius: var(--radius-sm);
  font-size: 14px;
}
.alert__icon {
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
}
.alert__msg { flex: 1; }
.alert__close {
  background: transparent; border: 0; font-size: 20px; line-height: 1;
  color: inherit; opacity: .6; padding: 0 4px;
}
.alert__close:hover { opacity: 1; }
.alert--success { background: var(--vtl-success-bg); border-color: #86efac; color: #14532d; }
.alert--success .alert__icon { background: var(--vtl-success); }
.alert--error   { background: var(--vtl-danger-bg);  border-color: #fca5a5; color: #7f1d1d; }
.alert--error .alert__icon { background: var(--vtl-danger); }
.alert--info    { background: var(--vtl-info-bg);    border-color: #93c5fd; color: #1e3a8a; }
.alert--info .alert__icon { background: var(--vtl-info); }

/* ===== Utility ===== */
.muted { color: var(--vtl-muted); }

/* ===== Auth page ===== */
.auth-body {
  background: linear-gradient(135deg, #0b1020 0%, #1f2937 100%);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.auth-shell { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.auth-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 24px 20px;
}
.auth-brand { text-align: center; margin-bottom: 16px; }
.auth-brand__logo {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--vtl-orange), var(--vtl-orange-2));
  border-radius: 16px;
  color: #111827; font-weight: 800; font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.auth-brand__name { font-weight: 700; font-size: 16px; color: var(--vtl-text); }
.auth-brand__sub { color: var(--vtl-muted); font-size: 13px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-foot { text-align: center; color: rgba(255,255,255,.6); font-size: 12px; }

/* ============== PHẦN 3: Logs, Media, Photo upload ============== */

.form-section {
  font-size: 14px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--vtl-muted); margin: 18px 0 8px;
  padding-bottom: 4px; border-bottom: 1px solid var(--vtl-border);
}
.form-section:first-of-type { margin-top: 0; }

.project-banner__title { font-weight: 700; font-size: 16px; }
.project-banner__sub   { font-size: 13px; margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.filter-bar--logs { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .filter-bar--logs { grid-template-columns: 1fr 200px 160px 150px 150px auto auto; }
}

/* Log status tags */
.log-status                     { font-size: 12px; }
.log-status--draft              { background: #e5e7eb; color: #374151; }
.log-status--pending            { background: #fef3c7; color: #78350f; }
.log-status--approved           { background: #dcfce7; color: #14532d; }
.log-status--need_update        { background: #fee2e2; color: #7f1d1d; }
.log-status--sync_error         { background: #fce7f3; color: #831843; }

/* Patch I: receipts list — money LEFT + camera/status RIGHT-aligned trên cùng line */
.receipt-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
}
.receipt-title-row__right {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
}
.receipt-money {
  font-size: 17px; font-weight: 700;
  color: var(--vtl-orange-dark, #c2410c);
}

.log-item .list__title { font-size: 15px; }
.log-excerpt {
  color: var(--vtl-text-2); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4;
}
.log-issue { color: var(--vtl-danger); font-weight: 600; font-size: 13px; }

/* Thumbnail strip cho log trong project detail (Patch B) */
.log-thumb-strip {
  display: flex; gap: 6px; margin-top: 8px;
  overflow-x: auto; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.log-thumb-strip::-webkit-scrollbar { display: none; }
.log-thumb-strip__item {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 8px;
  overflow: hidden; background: var(--vtl-bg-2, #2a2a2e);
  display: block;
}
.log-thumb-strip__item img,
.log-thumb-strip__item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.log-thumb-strip__item--vid { position: relative; }
.log-thumb-strip__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  background: rgba(0,0,0,.18); pointer-events: none;
}
.log-thumb-strip__more {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vtl-bg-2, #2a2a2e); color: var(--vtl-text-2, #aaa);
  font-size: 13px; font-weight: 600;
}

.prose { white-space: normal; }
.prose br { display: block; content: ""; margin-top: 4px; }

.card--danger { border-left: 4px solid var(--vtl-danger); }
.card--info   { border-left: 4px solid var(--vtl-info); background: #f0f9ff; }

/* Photo input button */
.photo-input { display: block; cursor: pointer; }
.photo-input__file { display: none; }
.photo-input__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--vtl-orange), var(--vtl-orange-2));
  color: #111827; font-weight: 700;
  border: 2px dashed var(--vtl-orange-dark); border-radius: var(--radius);
  text-align: center;
}
.photo-input:hover .photo-input__btn { filter: brightness(1.04); }

.photos-preview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
@media (min-width: 768px) { .photos-preview { grid-template-columns: repeat(4, 1fr); } }
.photo-preview-item {
  position: relative; border: 1px solid var(--vtl-border); border-radius: var(--radius-sm); overflow: hidden;
  background: #f3f4f6;
}
.photo-preview-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.photo-preview-item__meta {
  padding: 6px 8px; font-size: 12px; background: #fff;
  display: flex; flex-direction: column; gap: 4px;
}
.photo-preview-item__select { width: 100%; padding: 4px; border: 1px solid var(--vtl-border-2); border-radius: 4px; font-size: 12px; }
.photo-preview-item__caption { width: 100%; padding: 4px; border: 1px solid var(--vtl-border-2); border-radius: 4px; font-size: 12px; }
.photo-preview-item__remove {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: rgba(220,38,38,.92); color: #fff;
  font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer;
}

/* Media gallery on log show */
.media-group { margin-bottom: 18px; }
.media-group:last-child { margin-bottom: 0; }
.media-group__title { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: var(--vtl-text-2); }
.media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .media-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .media-grid { grid-template-columns: repeat(4, 1fr); } }
.media-item {
  position: relative; margin: 0;
  background: #f3f4f6; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--vtl-border);
}
.media-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
/* Ảnh mất/không tải được → placeholder gọn (không hiện đường dẫn dài làm vỡ layout mobile) */
.media-item--broken { aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: #f9fafb; border: 1px dashed var(--vtl-border-2, #d1d5db); }
.media-item--broken a { pointer-events: none; }
.media-item--broken img { display: none; }
.media-item--broken::after { content: "🖼️ Ảnh không tải được"; color: #9ca3af; font-size: 12px; text-align: center; padding: 6px; }
.media-item__caption {
  padding: 6px 8px; font-size: 12px; color: var(--vtl-text-2);
  background: #fff; border-top: 1px solid var(--vtl-border);
}
.media-item__del {
  position: absolute; top: 4px; right: 4px;
  margin: 0;
}
.media-item__del .btn--sm {
  width: 28px; height: 28px; padding: 0;
  background: rgba(220,38,38,.92); color: #fff; border-color: transparent;
  border-radius: 50%; font-size: 18px; line-height: 1;
}

/* ============== HOTFIX Phần 3.1: photo input bulletproof ============== */

/* File input "thật" — ẩn hoàn toàn nhưng vẫn click được qua label[for] */
.photo-field { position: relative; }
.photo-input__file {
  position: absolute !important;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px; padding: 0; border: 0;
  pointer-events: none;
}
.photo-input__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; padding: 14px 20px;
  background: linear-gradient(135deg, var(--vtl-orange), var(--vtl-orange-2));
  color: #111827; font-weight: 700; font-size: 15px;
  border: 2px dashed var(--vtl-orange-dark); border-radius: var(--radius);
  text-align: center; cursor: pointer;
  transition: filter .15s, transform .05s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.photo-input__btn:hover  { filter: brightness(1.05); }
.photo-input__btn:active { transform: scale(.985); }
.photo-input__btn:focus-within,
.photo-input__file:focus + .photo-input__btn { outline: 3px solid var(--vtl-orange-dark); outline-offset: 2px; }
.photo-input__icon { font-size: 22px; }
/* Patch H: sub-text dưới label chính giải thích multi-select */
.photo-input__sub {
  font-size: 11px; font-weight: 500; opacity: .85;
  display: block; margin-top: 2px;
}
.photo-input__count {
  background: #fff; color: var(--vtl-orange-dark);
  padding: 2px 10px; border-radius: 999px; font-size: 13px;
  margin-left: auto;
}

/* ============== HOTFIX Phần 3.2: filter advanced ============== */
.filter-bar--logs { display: block; gap: 0; }
.filter-row { display: flex; gap: 8px; align-items: stretch; }
.filter-row .filter-q { flex: 1 1 auto; }
.filter-advanced { margin-top: 10px; border: 1px solid var(--vtl-border); border-radius: var(--radius-sm); }
.filter-advanced > summary {
  list-style: none; padding: 10px 14px; cursor: pointer; font-weight: 600;
  background: var(--vtl-bg-2); border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.filter-advanced > summary::-webkit-details-marker { display: none; }
.filter-advanced > summary::before {
  content: "▸"; font-size: 12px; transition: transform .15s;
}
.filter-advanced[open] > summary { border-bottom: 1px solid var(--vtl-border); }
.filter-advanced[open] > summary::before { transform: rotate(90deg); }
.filter-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px; }
@media (min-width: 768px) { .filter-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.filter-field { display: flex; flex-direction: column; gap: 4px; }
.filter-field__label { font-size: 12px; color: var(--vtl-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.filter-actions { display: flex; gap: 8px; padding: 0 12px 12px; }

/* ============== HOTFIX Phần 3.3: worker dashboard ============== */
.worker-header .page-title { font-size: 22px; }
.worker-section-title { font-size: 14px; text-transform: uppercase; color: var(--vtl-muted); margin: 16px 0 10px; letter-spacing: .5px; }
.worker-project-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 768px) { .worker-project-list { grid-template-columns: 1fr 1fr; } }
.worker-project {
  background: #fff; border: 1px solid var(--vtl-border); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 8px;
  border-left: 4px solid var(--vtl-orange);
}
.worker-project--done { border-left-color: var(--vtl-ok); background: #f0fdf4; }
.worker-project__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.worker-project__name { font-weight: 700; font-size: 16px; line-height: 1.3; flex: 1; }
.worker-project__addr { font-size: 13px; }
.worker-project__actions { margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.worker-status { font-size: 13px; flex: 1; min-width: 0; }
.worker-status--done { color: var(--vtl-ok); font-weight: 600; }
.btn--lg { padding: 12px 18px; font-size: 15px; min-height: 48px; }
.btn--block { width: 100%; flex: 1; }
.btn__icon { font-size: 18px; }

/* Stat cards có thể click */
a.stat-card { text-decoration: none; color: inherit; transition: transform .1s, box-shadow .15s; cursor: pointer; }
a.stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.08)); }
.stat-card__link { display: inline-block; margin-top: 6px; color: var(--vtl-orange-dark); font-weight: 600; font-size: 13px; }

/* Alert banner cho worker dashboard */
.alert-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius); margin-bottom: 16px;
  background: #fff; border-left: 4px solid var(--vtl-danger);
  box-shadow: var(--shadow-sm);
}
.alert-banner--danger { background: #fef2f2; }
.alert-banner__icon { font-size: 28px; }
.alert-banner__body { flex: 1; }
.alert-banner__title { font-weight: 700; font-size: 15px; }
.alert-banner__sub { font-size: 13px; color: var(--vtl-muted); }

/* Card link nhỏ ở header */
.card__link { font-size: 13px; color: var(--vtl-orange-dark); font-weight: 600; }
.card__link:hover { color: var(--vtl-orange-dark, #d97706); }

.form-actions--log { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-actions--log .btn--lg { flex: 1 1 auto; min-width: 140px; }
@media (max-width: 480px) {
  .form-actions--log { flex-direction: column; align-items: stretch; }
  .form-actions--log .btn--lg { width: 100%; }
}

/* tag tag--ok / tag--off cho work_terms */
.tag--ok  { background: #dcfce7; color: #14532d; }
.tag--off { background: #e5e7eb; color: #4b5563; }

/* ============== HOTFIX Phần 3.2: filter layout, form simple, existing media ============== */

/* Override .filter-bar grid behavior cho .filter-bar--logs (specificity cao hơn) */
.filter-bar.filter-bar--logs,
form.filter-bar--logs {
  display: block !important;
  grid-template-columns: none !important;
  width: 100%;
}

/* Form simple cho worker: priority section nổi bật */
.form-section--primary {
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vtl-text);
  font-weight: 700;
  border-bottom: 2px solid var(--vtl-orange);
  padding-bottom: 6px;
  margin: 20px 0 12px;
}
.form-section--primary:first-of-type { margin-top: 0; }

.input--big {
  font-size: 16px;
  padding: 14px;
  min-height: 120px;
}

/* Collapsible "Thêm chi tiết" */
.form-details {
  border: 1px solid var(--vtl-border);
  border-radius: var(--radius-sm);
  margin: 16px 0;
  background: #fafbfc;
}
.form-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.form-details > summary::-webkit-details-marker { display: none; }
.form-details__icon { transition: transform .15s; font-size: 14px; color: var(--vtl-muted); }
.form-details[open] > summary { border-bottom: 1px solid var(--vtl-border); background: #fff; }
.form-details[open] .form-details__icon { transform: rotate(90deg); }
.form-details__label { flex-shrink: 0; }
.form-details__sub { font-size: 12px; font-weight: 400; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-details__body { padding: 14px; }

/* Existing media grid trên edit form */
.existing-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (min-width: 640px) { .existing-media-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .existing-media-grid { grid-template-columns: repeat(6, 1fr); } }
.existing-media-item {
  position: relative;
  margin: 0;
  background: #f3f4f6;
  border: 1px solid var(--vtl-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.existing-media-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.existing-media-item__caption {
  padding: 4px 6px;
  font-size: 11px;
  background: #fff;
  border-top: 1px solid var(--vtl-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.existing-media-item__del { position: absolute; top: 4px; right: 4px; margin: 0; }
.existing-media-item__del-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(220,38,38,.92);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.existing-media-item__del-btn:hover { background: rgb(220,38,38); }

/* Worker project card actions — fix wrap kỳ */
.worker-project__actions {
  flex-direction: row;
  align-items: stretch;
}
.worker-project--done .worker-project__actions {
  /* Khi đã ghi: stack 1 dòng "Đã ghi" full + button Xem ngay dưới */
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.worker-project--done .worker-status {
  font-weight: 600;
  color: var(--vtl-ok);
  font-size: 14px;
  min-width: 0;
  padding: 6px 10px;
  background: #dcfce7;
  border-radius: var(--radius-sm);
  text-align: center;
}
.worker-project--done .btn { min-height: 40px; padding: 8px 18px; }

/* btn full width chỉ trên mobile */
.btn--full-on-mobile { width: 100%; }
@media (min-width: 640px) {
  .btn--full-on-mobile { width: auto; flex: 0 0 auto; }
}

/* Form actions không bị wrap kỳ */
.form-actions--log {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  align-items: stretch;
}
@media (max-width: 639px) {
  .form-actions--log { flex-direction: column; }
}

/* Sidebar quick search */
.sidebar-search {
  padding: 10px 12px 0;
}
.sidebar-search__input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 13px;
  outline: none;
  transition: border-color .15s;
}
.sidebar-search__input::placeholder { color: rgba(255,255,255,.45); }
.sidebar-search__input:focus { border-color: var(--vtl-orange); background: rgba(255,255,255,.12); }

/* field__label-row cho row có label + count */
.field__label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14px;
}

/* form-card--simple: padding gọn hơn cho form worker */
.form-card--simple .form-section--primary:first-of-type { padding-top: 0; }

/* ============== HOTFIX Phần 3.3: bulletproof grid, filter row, worker dashboard ============== */

/* ---- existing-media-grid: bulletproof với !important để không bị CSS cũ đè ---- */
.existing-media-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}
@media (min-width: 640px) {
  .existing-media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .existing-media-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
.existing-media-item {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #f3f4f6;
  border: 1px solid var(--vtl-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-width: 0;
  display: block !important;
}
.existing-media-item > a {
  display: block;
  width: 100%;
}
.existing-media-item img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}
.existing-media-item__del {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
}
.existing-media-item__del-btn {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  background: rgba(220, 38, 38, .92) !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
  -webkit-tap-highlight-color: transparent;
}
.existing-media-item__del-btn:hover { background: rgb(220, 38, 38) !important; }

/* ---- filter-row: đảm bảo button KHÔNG bao giờ wrap xuống dòng ---- */
.filter-row {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch;
  flex-wrap: nowrap !important;
}
.filter-row .filter-q {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.filter-row > .btn {
  flex: 0 0 auto !important;
  white-space: nowrap;
}

/* ---- Dashboard worker: card xen kẽ 4 màu (cam / xanh dương / xanh lá / tím) ---- */
.worker-project-list--colored {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .worker-project-list--colored { grid-template-columns: 1fr 1fr; }
}

/* Card colored variants, override border-left + bg subtle */
.worker-project--c1 { border-left-color: #f59e0b; background: #fff7ed; }
.worker-project--c2 { border-left-color: #3b82f6; background: #eff6ff; }
.worker-project--c3 { border-left-color: #10b981; background: #ecfdf5; }
.worker-project--c4 { border-left-color: #8b5cf6; background: #f5f3ff; }
/* Done state override: tất cả thành xanh ok */
.worker-project--done {
  border-left-color: var(--vtl-ok) !important;
  background: #f0fdf4 !important;
}

/* ---- Sửa thêm worker project actions grid với CSS specificity cao ---- */
.worker-project__actions {
  display: flex !important;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}
.worker-project--done .worker-project__actions {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.worker-project--done .worker-status {
  font-weight: 600;
  color: var(--vtl-ok);
  font-size: 14px;
  min-width: 0;
  padding: 8px 12px;
  background: #dcfce7;
  border-radius: var(--radius-sm);
  text-align: center;
}
.worker-project__actions .btn--block { width: 100%; }


/* ============== HOTFIX Phần 3.4: nested form fix, bottom filter, project status ============== */

/* visually-hidden: ẩn form delete media khỏi UI nhưng accessible cho button form="..." */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Worker project — finished/hold variants */
.worker-project--finished {
  border-left-color: #6b7280 !important;
  background: #f3f4f6 !important;
  opacity: 0.85;
}
.worker-status--finished {
  font-weight: 600;
  color: #4b5563;
  font-size: 14px;
  padding: 8px 12px;
  background: #e5e7eb;
  border-radius: var(--radius-sm);
  text-align: center;
}
.worker-status--hold {
  font-weight: 600;
  color: #92400e;
  font-size: 14px;
  padding: 8px 12px;
  background: #fef3c7;
  border-radius: var(--radius-sm);
  text-align: center;
}
.worker-project--finished .worker-project__actions,
.worker-project[class*="worker-project--c"]:has(.worker-status--hold) .worker-project__actions {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

/* Bottom filter — collapsible block ở cuối list page */
.bottom-filter {
  margin-top: 24px;
  border: 1px solid var(--vtl-border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.bottom-filter__summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  min-height: 48px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bottom-filter__summary::-webkit-details-marker { display: none; }
.bottom-filter__icon { font-size: 16px; }
.bottom-filter__label { flex: 1; }
.bottom-filter__badge {
  background: var(--vtl-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}
.bottom-filter[open] > .bottom-filter__summary {
  border-bottom: 1px solid var(--vtl-border);
  background: #fafbfc;
}
.bottom-filter__body { padding: 16px; }
.bottom-filter__body .field { margin-bottom: 12px; }
.bottom-filter__body .field label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
}
.bottom-filter__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
@media (max-width: 639px) {
  .bottom-filter__actions { flex-direction: column; }
  .bottom-filter__actions .btn { width: 100%; }
}

/* Filter summary (chip hiển thị filter đang active) */
.filter-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.filter-chip {
  background: #fff;
  border: 1px solid var(--vtl-border);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
}
.filter-clear {
  margin-left: auto;
  color: #dc2626;
  font-size: 13px;
  text-decoration: none;
}
.filter-clear:hover { color: var(--vtl-orange-dark, #d97706); }

/* ============== Phần 4: PWA UI ============== */

/* Nav badge — số log pending hoặc số queue chờ sync */
.nav__item { position: relative; }
.nav__badge {
  margin-left: auto;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
  line-height: 1.5;
}
.nav__badge--sync { background: #f59e0b; color: #0b1020; }

.bottomnav__badge {
  position: absolute; top: -6px; right: -10px;
  background: #dc2626; color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal; line-height: 1;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #fff;
}
.bottomnav__badge[hidden] { display: none; }

/* Offline indicator banner */
.offline-indicator {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #1e293b;
  color: #fbbf24;
  padding: 10px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  border-bottom: 1px solid #f59e0b;
}
.offline-indicator__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fbbf24;
  animation: vtl-pulse 1.5s ease-in-out infinite;
}
@keyframes vtl-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* Style is-offline mode (đậm hơn nhẹ) */
.is-offline .topbar { border-bottom-color: #f59e0b; }

/* Sync page controls */
.sync-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
@media (max-width: 639px) {
  .sync-controls { flex-direction: column; }
  .sync-controls .btn { width: 100%; }
}

/* Sync queue list */
.sync-queue { padding: 0; margin: 0; list-style: none; }
.sync-item {
  border-bottom: 1px solid var(--vtl-border);
  padding: 12px 0;
}
.sync-item:last-child { border-bottom: 0; }
.sync-item__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 4px;
}
.sync-item__title {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
  min-width: 0;
}
.sync-item__date {
  font-size: 12px;
  color: var(--vtl-muted);
  white-space: nowrap;
}
.sync-item__meta {
  font-size: 12px;
}

/* Info list ol */
.info-list {
  padding-left: 20px;
  line-height: 1.7;
}
.info-list li {
  margin-bottom: 6px;
}

/* Toast notification */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0b1020;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  z-index: 10000;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  max-width: 90vw;
  border-left: 4px solid #10b981;
}
.toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============== Phần 4 hotfix: [hidden] override flex/grid display ============== */
.offline-indicator[hidden],
[hidden] {
  display: none !important;
}

/* list__actions: nhóm nhiều button cạnh "Mở" */
.list__actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .list__actions { flex-direction: column; }
  .list__actions .btn { width: 100%; min-width: 80px; }
}

/* btn--compact: padding nhỏ cho button trong list__actions */
.btn--compact { padding: 6px 12px; font-size: 13px; }
.btn--compact .btn__icon { margin-right: 2px; }

/* ============== Logo image (thay text VTL) ============== */
/* Topbar trong app: nhỏ gọn, vuông 1:1, object-fit: contain để KHÔNG bị méo
   bất kể browser (Chrome/Brave/Safari/Firefox/Edge) crop kiểu gì */
.brand__logo--img {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 8px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  /* Override any text-related rules from .brand__logo */
  font-size: 0;
  line-height: 0;
  color: transparent;
  flex-shrink: 0;
}

/* Trang login: logo to hơn, vẫn giữ tỷ lệ 1:1 */
.auth-brand__logo--img {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 16px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  display: inline-block;
  font-size: 0;
  line-height: 0;
  color: transparent;
  margin: 0 auto;
}

/* Mobile: logo topbar nhỏ hơn nữa cho khớp với screen */
@media (max-width: 480px) {
  .brand__logo--img {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 7px;
  }
  .auth-brand__logo--img {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
  }
}

/* ============== Sticky bottom filter (Phần 7) ============== */
/* Trên mobile: filter dính sát menu bottom, không cần scroll xuống mới thấy.
   Trên desktop có sidebar: vẫn là details collapsible thường (không sticky). */
@media (max-width: 768px) {
  .bottom-filter {
    position: sticky;
    bottom: 56px; /* đúng chiều cao bottomnav */
    z-index: 30;
    margin: 18px -16px 0;
    background: var(--bg, #0b1020);
    border-top: 1px solid var(--border, #1f2937);
    box-shadow: 0 -4px 12px rgba(0,0,0,.18);
    padding: 0;
  }
  .bottom-filter__summary {
    padding: 12px 16px;
    list-style: none;
    cursor: pointer;
    color: var(--text-primary, #e5e7eb);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .bottom-filter__summary::-webkit-details-marker { display: none; }
  .bottom-filter__body {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border, #1f2937);
    background: var(--bg-elevated, #111827);
    max-height: calc(70vh - 56px);
    overflow-y: auto;
  }
  .bottom-filter__badge {
    background: #f59e0b; color: #0b1020; font-weight: 700;
    border-radius: 10px; padding: 2px 8px; font-size: 12px;
    margin-left: auto;
  }
  .bottom-filter__actions { display: flex; gap: 8px; margin-top: 12px; }
  .bottom-filter__actions .btn { flex: 1; }
}

/* Desktop / tablet: filter dạng card thường */
@media (min-width: 769px) {
  .bottom-filter {
    margin-top: 18px;
    background: var(--bg-elevated, #111827);
    border: 1px solid var(--border, #1f2937);
    border-radius: 8px;
    overflow: hidden;
  }
  .bottom-filter__summary {
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    color: var(--text-primary, #e5e7eb);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .bottom-filter__summary::-webkit-details-marker { display: none; }
  .bottom-filter__body { padding: 14px 16px 18px; border-top: 1px solid var(--border, #1f2937); }
  .bottom-filter__badge {
    background: #f59e0b; color: #0b1020; font-weight: 700;
    border-radius: 10px; padding: 2px 8px; font-size: 12px;
    margin-left: auto;
  }
  .bottom-filter__actions { display: flex; gap: 8px; margin-top: 12px; }
}

/* ============== Radio group cho form NKCT ============== */
.radio-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 0;
}
.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #1f2937; /* app light-only: fallback --text-primary cũ (#e5e7eb) là màu dark-mode → mờ trên nền trắng */
  font-size: 14px;
  font-weight: 500;
}
.radio-option input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: #f59e0b;
  cursor: pointer;
}

/* ============== form-fieldset (collapsible chi tiết NKCT trong form) ============== */
.form-fieldset {
  margin: 18px 0;
  background: var(--bg-elevated, #111827);
  border: 1px solid var(--border, #1f2937);
  border-radius: 8px;
  overflow: hidden;
}
.form-fieldset__summary {
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  color: #f59e0b;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.06);
}
.form-fieldset__summary::-webkit-details-marker { display: none; }
.form-fieldset__body { padding: 16px; border-top: 1px solid var(--border, #1f2937); }
.form-section {
  margin: 16px 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  color: #f59e0b;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border, #1f2937);
  padding-bottom: 4px;
}

/* ============== info-grid (dt/dd 2 cột cho project show) ============== */
.info-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 16px;
  margin: 0;
}
/* Patch E: dùng --vtl-text-2 / --vtl-text thay vì --text-secondary / --text-primary
   để Chrome Android "Force dark mode" tự đảo đúng (color invert).
   Tăng font-weight cho dd lên 500 để value nổi rõ trên cả light và dark. */
.info-grid dt {
  font-weight: 600;
  color: var(--vtl-text-2, #374151);
}
.info-grid dd {
  margin: 0;
  color: var(--vtl-text, #111827);
  font-weight: 500;
}
@media (max-width: 480px) {
  .info-grid { grid-template-columns: 1fr; gap: 4px 0; }
  .info-grid dt { margin-top: 8px; }
}

/* ============== data-table (cho danh sách cán bộ) ============== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0;
}
.data-table th, .data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border, #1f2937);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
.data-table th {
  background: rgba(245, 158, 11, 0.08);
  color: #f59e0b;
  font-weight: 600;
  font-size: 13px;
}
.data-table tr:hover td { background: rgba(255,255,255,0.02); }
.data-table form { margin: 0; }
@media (max-width: 600px) {
  .data-table thead { display: none; }
  .data-table tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border, #1f2937);
    border-radius: 6px;
    padding: 8px;
  }
  .data-table td {
    display: block;
    border: none;
    padding: 4px 0;
  }
  .data-table td:first-child { font-weight: 600; color: #f59e0b; }
}

/* btn--danger ghost cho action xoá nhẹ nhàng */
.btn--ghost.btn--danger { color: #f87171; }
.btn--ghost.btn--danger:hover { background: rgba(248, 113, 113, 0.1); }

/* field-error message */
.field-error {
  color: #f87171;
  font-size: 12px;
  margin-top: 4px;
}
.required { color: #f87171; }

/* info-list (admin backup hướng dẫn) */
.info-list { padding-left: 18px; margin: 8px 0; }
.info-list li { margin: 4px 0; line-height: 1.6; }

/* Sidebar section label */
.nav__section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary, #9ca3af);
  padding: 14px 16px 4px;
  font-weight: 600;
  opacity: 0.7;
}
.nav__logout { margin: 4px 0 0; }
.nav__item--button {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.nav__item--button:hover { background: rgba(255,255,255,0.04); }

/* ============== card-collapsible (Phần 8 - project show) ============== */
.card-collapsible {
  background: var(--bg-elevated, #111827);
  border: 1px solid var(--border, #1f2937);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
.card-collapsible__summary {
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--text-primary, #e5e7eb);
  font-size: 15px;
  user-select: none;
}
.card-collapsible__summary::-webkit-details-marker { display: none; }
.card-collapsible__summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--text-secondary, #9ca3af);
  transition: transform 0.15s ease;
}
.card-collapsible[open] > .card-collapsible__summary::after {
  transform: rotate(180deg);
}
.card-collapsible__summary:hover {
  background: rgba(245, 158, 11, 0.04);
}
.card-collapsible__body {
  padding: 14px 16px 16px;
  border-top: 1px solid var(--border, #1f2937);
}
.card-collapsible .badge {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 6px;
}

/* ============================================================
   PHẦN 9 — FIX CONTRAST trên cards nền tối
   Khi card có nền tối (.card-collapsible__body, .form-fieldset__body,
   .bottom-filter__body), text labels và content phải sáng đủ để đọc.
   ============================================================ */

/* kv (key-value) info rows */
.card-collapsible .kv__k,
.card-collapsible__body .kv__k {
  color: #d1d5db;        /* sáng hơn, contrast >= 7:1 với bg #111827 */
  font-weight: 500;
}
.card-collapsible .kv__v,
.card-collapsible__body .kv__v {
  color: #f9fafb;
  font-weight: 500;
}
.card-collapsible .kv__row,
.card-collapsible__body .kv__row {
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}

/* list items in dark card */
.card-collapsible__body .list__item {
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.card-collapsible__body .list__title {
  color: #f9fafb;
  font-weight: 600;
}
.card-collapsible__body .list__sub {
  color: #d1d5db;
}
.card-collapsible__body .list__sub em {
  color: #fbbf24;
  font-style: normal;
  font-weight: 500;
}
.card-collapsible__body .muted {
  color: #9ca3af;
}

/* form labels in dark card */
.card-collapsible__body .field label,
.form-fieldset__body .field label,
.bottom-filter__body .field label {
  color: #e5e7eb;
  font-weight: 500;
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}

/* form inputs in dark card — make sure they're readable */
.card-collapsible__body .input,
.form-fieldset__body .input,
.bottom-filter__body .input {
  background: #ffffff;
  color: #111827;
  border: 1px solid #d1d5db;
}
.card-collapsible__body .input:focus,
.form-fieldset__body .input:focus {
  border-color: #f59e0b;
  outline: 2px solid rgba(245, 158, 11, 0.2);
}

/* dl info-grid in dark card (Thông tin NKCT) */
.card-collapsible__body .info-grid dt {
  color: #d1d5db;
}
.card-collapsible__body .info-grid dd {
  color: #f9fafb;
}

/* table in dark card */
.card-collapsible__body .data-table th {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  font-weight: 600;
}
.card-collapsible__body .data-table td {
  color: #f3f4f6;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.card-collapsible__body .data-table strong {
  color: #fef3c7;
}

/* h3 inside dark cards */
.card-collapsible__body h3 {
  color: #fbbf24;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
}

/* tag in dark cards */
.card-collapsible__body .tag {
  background: rgba(255,255,255,0.08);
  color: #e5e7eb;
}
.card-collapsible__body .tag--role-manager {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
.card-collapsible__body .tag--role-worker {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}
.card-collapsible__body .tag--role-admin {
  background: rgba(245, 158, 11, 0.22);
  color: #fcd34d;
}
.card-collapsible__body .tag--off {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

/* empty state */
.card-collapsible__body .empty {
  color: #9ca3af;
  text-align: center;
  padding: 20px;
}
.card-collapsible__body p.muted a {
  color: #fbbf24;
  text-decoration: underline;
}

/* Card body cũ (.card__body) nếu nằm trong layout dark — KHÔNG override
   vì có thể là light theme card. Chỉ override card-collapsible. */

/* === Sidebar text contrast (Image 2: "Quản trị" và section labels mờ) === */
.nav__section-label {
  color: #f59e0b !important;       /* dùng brand cam thay vì gray mờ */
  opacity: 1;
  font-size: 11px;
  letter-spacing: 0.6px;
}
.sidebar__version {
  color: #f59e0b;
  font-weight: 500;
}

/* === Topbar khi có dark sidebar nhưng topbar trắng: tăng tương phản === */
.topbar__user-name {
  color: #1f2937;
  font-weight: 500;
}

/* === Section label log_item subtitle (mobile log list) === */
/* Patch K2 FIX: block này còn sót từ thiết kế dark-mode ban đầu (text sáng cho nền tối).
   App thực tế là LIGHT theme nền trắng → các màu #f9fafb/#d1d5db làm chữ MỜ.
   Đổi sang màu đậm. Đây là nguyên nhân font mờ mà Patch I chưa fix được (block này
   nằm SAU nên override rule ở line 349-350 theo CSS cascade). */
.log-item .list__title {
  color: var(--vtl-text, #1f2937);
}
.log-item .list__sub .tag {
  font-size: 12px;
}
.log-item .log-excerpt {
  color: var(--vtl-text-2, #374151);
  font-size: 13px;
  margin-top: 6px;
}
.list__meta {
  font-size: 12px;
  margin-top: 4px;
  color: var(--vtl-text, #1f2937);
  font-weight: 500;
}

/* ===== vtcard — card danh sách dùng chung (Nhật ký + Công trình) ===== */
.vtcard-list { list-style: none; margin: 0; padding: 0; }
.vtcard { padding: 12px 16px; }
.vtcard__title { display: block; font-weight: 700; color: var(--vtl-text, #1f2937); text-decoration: none; font-size: 15px; margin-bottom: 6px; line-height: 1.35; }
/* Hàng tiêu đề card có avatar công trình (dùng chung Công trình + Nhật ký) */
.vtcard__titlerow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vtcard__titlerow .vtcard__title { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.vtcard__title:hover { color: var(--vtl-orange, #f59e0b); text-decoration: none; }
.vtcard__mid { display: flex; align-items: center; gap: 12px; }
.vtcard__badges { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vtcard__brow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vtcard__add { flex: 0 0 auto; white-space: nowrap; }
.vtcard__body { display: block; text-decoration: none; color: inherit; margin-top: 8px; }
.vtcard__body:hover { text-decoration: none; }
.vtcard__content { font-size: 13.5px; color: var(--vtl-text-2, #374151); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vtcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.vtcard__who { font-size: 12.5px; color: var(--vtl-text, #374151); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtcard__date { flex: 0 0 auto; font-size: 12px; color: var(--vtl-muted, #9ca3af); }
/* Avatar tròn công trình (đồng bộ với avatar kênh chat) */
.ent-avatar { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px; flex: 0 0 auto; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.ent-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Mỗi dòng = 1 card bo góc, viền trái TÔ MÀU bo cong theo card (kiểu viền trên stat-card) — màu theo --accent */
.acard {
  background: #fff;
  border: 1px solid var(--vtl-border, #e5e7eb);
  border-left: 4px solid var(--accent, var(--vtl-border, #e5e7eb));
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
}
.acard:last-child { margin-bottom: 0; }
/* Container chỉ còn là khung xếp card (bỏ nền/viền/bóng để card con nổi rõ) */
.card--flush { background: transparent; border: 0; box-shadow: none; overflow: visible; }

/* ============== Photo input — 2 nút riêng (camera + gallery) ============== */
.photo-input__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.photo-input__btn--camera,
.photo-input__btn--gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
  border: 2px dashed var(--vtl-orange, #f59e0b);
  background: rgba(245, 158, 11, 0.04);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  min-height: 80px;
}
.photo-input__btn--camera {
  border-color: #2563eb;
  background: rgba(37, 99, 235, 0.04);
}
.photo-input__btn--camera:hover,
.photo-input__btn--camera:focus-within {
  background: rgba(37, 99, 235, 0.08);
  border-color: #1d4ed8;
}
.photo-input__btn--gallery:hover,
.photo-input__btn--gallery:focus-within {
  background: rgba(245, 158, 11, 0.1);
  border-color: #b45309;
}
.photo-input__btn .photo-input__icon {
  font-size: 28px;
  line-height: 1;
}
.photo-input__btn .photo-input__text {
  font-weight: 600;
  font-size: 14px;
  color: var(--vtl-text, #1f2937);
}
.photo-input__count {
  display: inline-block;
  background: var(--vtl-orange, #f59e0b);
  color: #0b1020;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  margin: 6px 0;
}
@media (max-width: 360px) {
  .photo-input__buttons { grid-template-columns: 1fr; }
}

/* ============== Help page ============== */
.help-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0 24px;
  border-bottom: 2px solid var(--vtl-border, #e5e7eb);
  flex-wrap: wrap;
}
.help-tab {
  padding: 12px 18px;
  text-decoration: none;
  color: var(--vtl-muted, #6b7280);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-size: 14px;
}
.help-tab--active {
  color: var(--vtl-orange, #f59e0b);
  border-bottom-color: var(--vtl-orange, #f59e0b);
}

.help-intro {
  background: rgba(245, 158, 11, 0.08);
  border-left: 4px solid var(--vtl-orange, #f59e0b);
  padding: 14px 18px;
  border-radius: 6px;
  margin-bottom: 20px;
}
.help-intro p { margin: 0; color: var(--vtl-text, #1f2937); }

.help-step {
  background: var(--vtl-card, #fff);
  border: 1px solid var(--vtl-border, #e5e7eb);
  border-radius: 10px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.help-step__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(90deg, rgba(245,158,11,0.08), transparent);
  border-bottom: 1px solid var(--vtl-border, #e5e7eb);
}
.help-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--vtl-orange, #f59e0b);
  color: #0b1020;
  border-radius: 50%;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.help-step__head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--vtl-text, #1f2937);
}
.help-step__body {
  padding: 16px 18px 20px;
  color: var(--vtl-text-2, #374151);
  line-height: 1.6;
}
.help-step__body p { margin: 6px 0; }

.help-svg {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 12px auto;
  border: 1px solid var(--vtl-border, #e5e7eb);
  border-radius: 8px;
  background: #f9fafb;
}

.help-tip {
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid #2563eb;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--vtl-text-2, #374151);
  margin-top: 10px;
}

.help-list {
  margin: 8px 0;
  padding-left: 22px;
}
.help-list li { margin: 4px 0; }
.help-list code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 13px;
  color: #b45309;
}

/* ===== Cài đặt lần đầu (help worker) ===== */
.help-setup {
  border: 2px solid var(--vtl-orange, #f59e0b);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 22px;
  background: rgba(245, 158, 11, 0.05);
}
.help-setup__banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.help-setup__star { font-size: 26px; flex-shrink: 0; }
.help-setup__title { font-size: 16px; font-weight: 700; color: var(--vtl-text, #1f2937); }
.help-setup__sub { font-size: 13px; color: var(--vtl-text-2, #6b7280); margin-top: 2px; }
.help-step--setup { margin-bottom: 14px; }
.help-step--setup:last-child { margin-bottom: 0; }
.help-step__num--letter { background: #0ea5e9; color: #fff; }
.help-os {
  font-size: 13px;
  font-weight: 700;
  color: var(--vtl-text, #1f2937);
  margin: 14px 0 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--vtl-border, #e5e7eb);
}
.help-os:first-of-type { border-top: 0; padding-top: 0; }

.help-footer {
  margin-top: 30px;
  padding: 20px;
  text-align: center;
  border-top: 1px solid var(--vtl-border, #e5e7eb);
}

/* Hint-more (collapsible giúp đỡ khi không thấy folder camera) */
.field__hint-more {
  margin-top: 6px;
  font-size: 13px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 6px;
  overflow: hidden;
}
.field__hint-more summary {
  cursor: pointer;
  padding: 8px 12px;
  color: var(--vtl-orange-dark, #b45309);
  font-weight: 500;
  list-style: none;
}
.field__hint-more summary::-webkit-details-marker { display: none; }
.field__hint-more__body {
  padding: 4px 14px 12px;
  border-top: 1px solid rgba(245, 158, 11, 0.18);
  color: var(--vtl-text-2, #374151);
}
.field__hint-more__body p { margin: 8px 0 6px; line-height: 1.5; }
.field__hint-more__body ol { padding-left: 22px; margin: 6px 0; }
.field__hint-more__body li { margin: 3px 0; }
.field__hint-more__body code {
  background: #f3f4f6;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
  color: #b45309;
}

/* Video + HEIC preview (Part 13) */
.photo-preview-item video {
  display: block;
  width: 100%;
  max-height: 200px;
  background: #000;
  border-radius: 6px;
}
.photo-preview-item__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.photo-preview-item__badge--video {
  background: rgba(220, 38, 38, 0.9);
}
.photo-preview-item__heic-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fef3c7;
  border: 2px dashed #f59e0b;
  border-radius: 6px;
  padding: 24px 8px;
  min-height: 140px;
  color: #92400e;
  font-weight: 600;
}

/* Video trong media display (show + grid) */
.media-item video {
  display: block;
  width: 100%;
  max-height: 240px;
  background: #000;
  border-radius: 6px;
}

/* ============== Expense receipts module (Part 14) ============== */
.receipts-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
/* 2 stat card cạnh nhau cả mobile + desktop */
.summary-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.summary-card {
  background: var(--vtl-card, #fff);
  border: 1px solid var(--vtl-border, #e5e7eb);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.summary-card__label { font-size: 12px; color: var(--vtl-text-2, #374151); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; }
.summary-card__value { font-size: 22px; font-weight: 800; margin-top: 6px; color: var(--vtl-text, #1f2937); }
.summary-card--primary { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; border: 0; }
.summary-card--primary .summary-card__label,
.summary-card--primary .summary-card__value { color: white; }

/* Breakdown theo loại chi phí — có % bar */
.summary-breakdown { padding: 16px; }
.breakdown-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 14px; }
.breakdown-item { }
.breakdown-item__top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 6px;
}
.breakdown-item__name { font-size: 14px; font-weight: 600; color: var(--vtl-text, #1f2937); }
.breakdown-item__amount { font-size: 14px; font-weight: 700; color: var(--vtl-orange-dark, #c2410c); white-space: nowrap; }
.breakdown-item__barrow {
  display: flex; align-items: center; gap: 8px;
}
.breakdown-item__bar {
  flex: 1; height: 8px; border-radius: 999px;
  background: var(--vtl-border, #e5e7eb); overflow: hidden;
}
.breakdown-item__fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  min-width: 3px;
}
.breakdown-item__pct {
  font-size: 11px; color: var(--vtl-text-2, #374151); font-weight: 600;
  white-space: nowrap; min-width: 42px; text-align: right;
}

/* Desktop: breakdown rộng hơn, có thể đặt cạnh stat */
@media (min-width: 768px) {
  .summary-stats { grid-template-columns: 1fr 1fr; }
  .summary-card__value { font-size: 26px; }
}

.receipt-status {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  margin-left: 6px;
}
.receipt-status--pending     { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.receipt-status--approved    { background: rgba(34, 197, 94, 0.15); color: #166534; }
.receipt-status--need_update { background: rgba(251, 191, 36, 0.2); color: #92400e; }
.receipt-status--rejected    { background: rgba(239, 68, 68, 0.15); color: #991b1b; }

.receipt-status-banner {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 15px;
  border-left: 4px solid;
}
.receipt-status-banner--pending     { background: rgba(245, 158, 11, 0.08); border-color: #f59e0b; color: #b45309; }
.receipt-status-banner--approved    { background: rgba(34, 197, 94, 0.08); border-color: #22c55e; color: #166534; }
.receipt-status-banner--need_update { background: rgba(251, 191, 36, 0.12); border-color: #fbbf24; color: #92400e; }
.receipt-status-banner--rejected    { background: rgba(239, 68, 68, 0.08); border-color: #ef4444; color: #991b1b; }

.card--feedback { border-left: 4px solid #3b82f6; }
.card--review { border-left: 4px solid #f59e0b; }

.btn--success { background: #16a34a; color: white; border: 0; }
.btn--success:hover { background: #15803d; }
.btn--warning { background: #fbbf24; color: #0b1020; border: 0; }
.btn--warning:hover { background: #f59e0b; }

.ai-confidence-bar {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(59, 130, 246, 0.06);
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  font-size: 13px;
  color: #1e40af;
}

.tag--sm { font-size: 10px; padding: 1px 6px; }

/* Part 16: page-actions với nút đều nhau */
.page-actions--equal .btn,
.page-actions--equal .inline-form .btn {
  min-width: 110px;
  text-align: center;
  justify-content: center;
}
.page-actions--equal {
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 640px) {
  .page-actions--equal .btn {
    min-width: 0;
    flex: 1 1 calc(50% - 4px);
  }
}

/* User force-delete details inline */
.user-force-delete {
  display: inline-block;
  margin-left: 4px;
}
.user-force-delete summary {
  list-style: none;
  display: inline-block;
}
.user-force-delete summary::-webkit-details-marker { display: none; }
.user-force-delete[open] summary { color: #ef4444; }
.user-force-delete .inline-form { display: inline; margin-left: 4px; }

/* Quick presets cho export filter */
.export-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}
.export-preset-btn {
  padding: 6px 12px;
  border: 1px solid var(--vtl-border, #e5e7eb);
  background: white;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  color: var(--vtl-text, #1f2937);
}
.export-preset-btn:hover {
  background: var(--vtl-orange, #f59e0b);
  color: #0b1020;
  border-color: var(--vtl-orange, #f59e0b);
}

/* ============== Pending review modal (Part 17) ============== */
.pending-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pending-modal--show { opacity: 1; }
.pending-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 32, 0.75);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.pending-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  max-width: 480px;
  width: 100%;
  padding: 32px 28px 24px;
  text-align: center;
  animation: pending-modal-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pending-modal-pop {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0);       opacity: 1; }
}
.pending-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px 8px;
}
.pending-modal__close:hover { color: #1f2937; }
.pending-modal__icon {
  font-size: 48px;
  margin-bottom: 8px;
  animation: bell-ring 1.5s ease-in-out infinite;
}
@keyframes bell-ring {
  0%, 50%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-12deg); }
  20%, 40% { transform: rotate(12deg); }
}
.pending-modal__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #1f2937;
}
.pending-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 24px;
}
.pending-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  border-left: 4px solid;
  text-align: left;
}
.pending-item--logs     { background: rgba(245, 158, 11, 0.08); border-color: #f59e0b; }
.pending-item--receipts { background: rgba(34, 197, 94, 0.08);  border-color: #22c55e; }
.pending-item__count {
  font-size: 32px;
  font-weight: 800;
  min-width: 60px;
  text-align: center;
}
.pending-item--logs     .pending-item__count { color: #f59e0b; }
.pending-item--receipts .pending-item__count { color: #22c55e; }
.pending-item__label {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}
.pending-item__hint {
  font-size: 12px;
  color: #6b7280;
  margin-left: auto;
}
.pending-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pending-modal__actions .btn {
  width: 100%;
  justify-content: center;
}
body.modal-open { overflow: hidden; }

@media (max-width: 480px) {
  .pending-modal__panel { padding: 24px 18px 20px; }
  .pending-modal__title { font-size: 18px; }
  .pending-item__count { font-size: 26px; min-width: 50px; }
  .pending-item__hint { display: none; }
}

/* Part 19: tag pending cho work-terms */
.tag--warn { background: #fef3c7; color: #92400e; }

/* Btn variant success — dùng cho nút Duyệt */
.btn--success { background: #22c55e; color: white; border-color: #22c55e; }
.btn--success:hover { background: #16a34a; border-color: #16a34a; }

/* ============ Part 22+25: Multi-file pin bản vẽ + render 3D ============ */
.card--attachments {
  border: 2px solid var(--vtl-orange, #f59e0b);
  margin-bottom: 18px;
}
.card--attachments .card__header {
  background: linear-gradient(90deg, #fef3c7 0%, #fff 100%);
}

/* Section per file type (Drawing PDF / Render 3D) */
.att-section {
  background: #fff;
  border: 2px solid var(--vtl-orange, #f59e0b);
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12);
}
.att-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.att-section__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--vtl-navy, #0b1020);
  margin: 0;
}
.att-section__badge {
  background: var(--vtl-orange, #f59e0b);
  color: var(--vtl-navy, #0b1020);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
}
.att-section__meta {
  padding: 8px 10px;
  background: #fef3c7;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #4b5563;
}
.att-section__meta strong { color: var(--vtl-navy, #0b1020); }
.att-section__meta p { margin: 4px 0; line-height: 1.4; }

/* Grid layout files */
.att-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.att-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

/* File card */
.att-card {
  background: #fff;
  border: 1px solid var(--vtl-border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.att-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.att-card__preview {
  width: 100%;
  height: 160px;
  background: #f3f4f6;
  position: relative;
  overflow: hidden;
}
.att-card--pdf .att-card__preview {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.att-card--video .att-card__preview { background: #1f2937; }
.att-card__preview img,
.att-card__preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.att-card__pdf-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-decoration: none;
  color: var(--vtl-navy, #0b1020);
}
.att-card__pdf-icon { font-size: 56px; line-height: 1; }
.att-card__pdf-label {
  font-weight: 700;
  font-size: 13px;
  margin-top: 6px;
  letter-spacing: 1px;
}
.att-card__info {
  padding: 8px 10px;
  border-top: 1px solid var(--vtl-border, #e5e7eb);
  font-size: 12px;
}
.att-card__name {
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.att-card__meta { color: #6b7280; font-size: 11px; }
.att-card__actions {
  display: flex;
  gap: 4px;
  padding: 6px 8px 8px;
  flex-wrap: wrap;
}
.att-card__actions .btn { flex: 1; min-width: 0; font-size: 11px; padding: 4px 6px; }
.att-card__actions .btn--danger { flex: 0 0 auto; }

/* History */
.att-history {
  margin-top: 12px;
  padding: 10px 14px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid var(--vtl-border, #e5e7eb);
}
.att-history summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: #4b5563;
}
.att-history__type {
  margin: 14px 0 6px;
  font-size: 14px;
  color: var(--vtl-navy, #0b1020);
}
.att-history__batch {
  margin-bottom: 14px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--vtl-border, #e5e7eb);
}
.att-history__batch-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.att-version-tag {
  background: #e5e7eb;
  color: #4b5563;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}

/* Upload form preview list */
.att-preview-list {
  margin: 12px 0;
  padding: 10px 12px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
}
.att-preview-list__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: #166534;
}
.att-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.att-preview-item {
  position: relative;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
}
.att-preview-item__media {
  width: 100%;
  height: 100px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.att-preview-item__media img,
.att-preview-item__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.att-preview-item__media-pdf {
  font-size: 36px;
  color: #f59e0b;
}
.att-preview-item__media-video {
  font-size: 36px;
  color: #fff;
  background: #1f2937;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.att-preview-item__info {
  padding: 6px 8px;
  font-size: 11px;
}
.att-preview-item__name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #1f2937;
}
.att-preview-item__size { color: #6b7280; font-size: 10px; }
.att-preview-item__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.att-preview-item__remove:hover { background: #dc2626; }
.att-preview-item--invalid { border-color: #ef4444; }
.att-preview-item__error {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  text-align: center;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .att-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .att-card__preview { height: 120px; }
  .att-card__pdf-icon { font-size: 40px; }
  .att-preview-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .att-preview-item__media { height: 80px; }
}


/* ============ Part 26: Lightbox ============ */
.vtl-lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  z-index: 99999;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
}
.vtl-lb-overlay.active { display: flex; }
.vtl-lb-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent);
  z-index: 10;
}
.vtl-lb-counter {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 12px;
  background: rgba(0,0,0,0.5);
  border-radius: 14px;
}
.vtl-lb-actions { display: flex; gap: 6px; }
.vtl-lb-btn {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s;
}
.vtl-lb-btn:hover { background: rgba(255,255,255,0.25); }
.vtl-lb-close { background: rgba(239,68,68,0.6); }
.vtl-lb-close:hover { background: rgba(239,68,68,0.9); }

.vtl-lb-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.vtl-lb-img {
  max-width: 95vw;
  max-height: 85vh;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.1s ease-out;
  will-change: transform;
}
.vtl-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.vtl-lb-nav:hover { background: rgba(255,255,255,0.25); }
.vtl-lb-prev { left: 12px; }
.vtl-lb-next { right: 12px; }

.vtl-lb-caption {
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: 13px;
  background: rgba(0,0,0,0.5);
}

/* Mobile: smaller buttons */
@media (max-width: 640px) {
  .vtl-lb-topbar { padding: 8px 10px; }
  .vtl-lb-btn { width: 36px; height: 36px; font-size: 16px; }
  .vtl-lb-nav { width: 40px; height: 40px; font-size: 24px; }
  .vtl-lb-prev { left: 6px; }
  .vtl-lb-next { right: 6px; }
  .vtl-lb-img { max-height: 75vh; }
}

/* Triggers — visual hint */
.lb-trigger { cursor: zoom-in; display: inline-block; }

/* ============ Part 26: Projects index groups ============ */
.project-group { margin-bottom: 18px; }
.project-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--vtl-navy, #0b1020);
  padding: 8px 0;
  margin: 0 0 8px;
  list-style: none;
}
.project-group__title::-webkit-details-marker { display: none; }
details.project-group--done summary { cursor: pointer; }
details.project-group--done summary::before {
  content: '▶';
  font-size: 11px;
  color: var(--vtl-muted, #6b7280);
  transition: transform 0.15s;
}
details.project-group--done[open] summary::before { transform: rotate(90deg); }
.project-group--done .project-group__title {
  color: var(--vtl-muted, #6b7280);
}
.project-group__title .badge {
  background: var(--vtl-orange, #f59e0b);
  color: var(--vtl-navy, #0b1020);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}
.project-group--done .badge {
  background: var(--vtl-border, #e5e7eb);
  color: var(--vtl-muted, #6b7280);
}

/* ===== Lịch dùng chung (trang Công việc + Khách hàng) ===== */
.tcal{padding:12px 14px;margin-bottom:16px}
.tcal__bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.tcal__title{font-weight:800;font-size:15px}
.tcal__nav{border:0;background:#f3f4f6;width:34px;height:34px;border-radius:9px;font-size:20px;line-height:1;cursor:pointer;color:#374151}
.tcal__nav:active{transform:translateY(1px)}
.tcal__modes{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.tcal__mode{border:1px solid var(--vtl-border,#e5e7eb);background:#fff;border-radius:999px;padding:5px 14px;font-size:13px;font-weight:700;cursor:pointer;color:#374151}
.tcal__mode.is-on{background:#f59e0b;border-color:#f59e0b;color:#111827}
.tcal__today{margin-left:auto;border:1px solid var(--vtl-border,#e5e7eb);background:#fff;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;cursor:pointer;color:#2563eb}
.tcal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.tcal__dow span{text-align:center;font-size:11px;font-weight:700;color:#9ca3af;padding:2px 0}
.tcal__month{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.tcal__cell{aspect-ratio:1;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#f9fafb;border:1px solid transparent;cursor:pointer;position:relative;font-size:13px;color:#374151}
.tcal__cell.is-out{color:#cbd5e1;background:transparent}
.tcal__cell.is-today{border-color:#2563eb;font-weight:800}
.tcal__cell.is-sel{background:#f59e0b;color:#111827;font-weight:800}
.tcal__cell.has-task:not(.is-sel){background:#fff7ed}
.tcal__cnt{font-size:10px;font-weight:800;color:#b45309}
/* Dải màu việc nhiều ngày (line trải start→due) — dùng tên riêng, KHÔNG trùng .tcal__bar (thanh điều hướng) */
.tcal__spans{position:absolute;left:0;right:0;bottom:2px;display:flex;flex-direction:column;gap:1px;pointer-events:none}
.tcal__span{height:3px;background:#f59e0b;opacity:.95}
.tcal__span.is-start{margin-left:3px;border-top-left-radius:3px;border-bottom-left-radius:3px}
.tcal__span.is-end{margin-right:3px;border-top-right-radius:3px;border-bottom-right-radius:3px}
.tcal__spanmore{font-size:8px;color:#94a3b8;line-height:1;text-align:center}
.tcal__wday .tcal__spans{position:static;margin:4px 4px 0;padding:0}
.tcal__wday .tcal__span{height:4px;border-radius:2px}
.tcal__cell.is-sel .tcal__cnt{color:#111827}
.tcal__week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tcal__wday{border-radius:10px;background:#f9fafb;border:1px solid transparent;padding:6px 2px;text-align:center;cursor:pointer}
.tcal__wday.is-today{border-color:#2563eb}
.tcal__wday.is-sel{background:#f59e0b}
.tcal__wday.has-task:not(.is-sel){background:#fff7ed}
.tcal__wd{font-size:10px;font-weight:700;color:#9ca3af}
.tcal__wn{font-size:16px;font-weight:800;color:#374151;margin:1px 0}
.tcal__wday.is-sel .tcal__wn,.tcal__wday.is-sel .tcal__wd{color:#111827}
.tcal__wbadge{display:inline-block;min-width:16px;font-size:10px;font-weight:800;color:#fff;background:#f59e0b;border-radius:8px;padding:0 4px}
.tcal__wday.is-sel .tcal__wbadge{background:#111827}
.tcal__daysum{text-align:center;font-size:12.5px;color:#6b7280;padding:8px 0 2px}
.tcal-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#2563eb;background:none;border:0;cursor:pointer;margin-bottom:8px}