@font-face { font-family: "Be Vietnam Pro"; src: url("assets/fonts/BeVietnamPro-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("assets/fonts/BeVietnamPro-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("assets/fonts/BeVietnamPro-Bold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }

:root {
  --bg: #eef5fb;
  --surface: #ffffff;
  --surface-soft: #f7fbff;
  --text: #15324f;
  --muted: #5a738e;
  --line: #d3e4f1;
  --primary: #1d71b8;
  --primary-dark: #16568c;
  --primary-light: #eaf4ff;
  --red: #a51524;
  --red-dark: #7e0d19;
  --red-soft: #f8e9eb;
  --gold: #d4af37;
  --green: #1f7a55;
  --green-soft: #e6f4ee;
  --orange: #bd651d;
  --orange-soft: #fff0e3;
  --blue: #3067a5;
  --blue-soft: #e8f0fa;
  --shadow: 0 12px 30px rgba(31, 42, 55, 0.08);
  --radius: 16px;
  --sidebar: 252px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  background-color: var(--bg);
  background-image: linear-gradient(rgba(238,245,251,.93), rgba(238,245,251,.86)), url("assets/lotus.webp");
  background-position: center bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.login-screen {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(22px, 4vw, 52px);
  background-color: #eef7f9;
  background-image: radial-gradient(circle at 30% 42%, rgba(255,255,255,.98) 0%, rgba(210,228,240,.78) 42%, rgba(141,180,212,.38) 100%), linear-gradient(135deg, rgba(238,247,249,.9), rgba(225,239,248,.65));
  isolation: isolate;
}
.login-screen[hidden] { display: none; }
.login-lotus { position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; width: 100%; min-width: 980px; opacity: .72; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.22) 14%, #000 38%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.22) 14%, #000 38%); }
.login-layout { width: min(1160px, 100%); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); gap: clamp(34px, 7vw, 92px); align-items: center; position: relative; z-index: 1; }
.login-brand-panel { display: grid; justify-items: center; align-content: center; min-width: 0; text-align: center; }
.login-emblem-stage { position: relative; width: clamp(250px, 30vw, 390px); aspect-ratio: 1; display: grid; place-items: center; }
.login-emblem-glass { position: relative; z-index: 2; width: 70%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; padding: 15%; border: 1px solid rgba(255,255,255,.78); border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.48), rgba(255,255,255,.12)); box-shadow: 0 28px 70px rgba(30,90,138,.2), inset 0 0 30px rgba(255,255,255,.64); backdrop-filter: blur(10px); }
.login-emblem-glass { transition: transform .5s ease-out, box-shadow .5s ease-out; }
.login-emblem-glass::after { content: ""; position: absolute; z-index: 3; top: -38%; bottom: -38%; left: -115%; width: 78%; background: linear-gradient(105deg, transparent 10%, rgba(255,255,255,.16) 32%, rgba(255,255,255,.88) 50%, rgba(255,255,255,.18) 68%, transparent 90%); transform: rotate(-18deg); transition: left 1s ease-out; pointer-events: none; }
.login-emblem-glass img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 9px 12px rgba(105,34,39,.18)); transition: transform .5s ease-out, filter .5s ease-out; }
.login-emblem-stage:hover .login-emblem-glass { transform: scale(1.045); box-shadow: 0 32px 78px rgba(30,90,138,.24), inset 0 0 34px rgba(255,255,255,.72); }
.login-emblem-stage:hover .login-emblem-glass::after { left: 138%; }
.login-emblem-stage:hover .login-emblem-glass img { transform: scale(1.045); filter: drop-shadow(0 11px 15px rgba(105,34,39,.24)); }
.login-wave { position: absolute; z-index: 0; top: 50%; left: 50%; width: 100%; aspect-ratio: 1; border: 2px solid rgba(49,139,192,.34); border-radius: 50%; box-shadow: 0 0 11px rgba(69,151,198,.12), inset 0 0 8px rgba(255,255,255,.22); transform: translate(-50%, -50%) scale(.64); opacity: 0; pointer-events: none; animation: login-wave 4.8s cubic-bezier(.17,.55,.3,1) infinite; will-change: transform, opacity; }
.login-wave::after { content: ""; position: absolute; inset: -2px; border: 1px solid transparent; border-top-color: rgba(255,255,255,.72); border-left-color: rgba(112,186,224,.28); border-radius: 50%; opacity: .7; }
.login-wave:nth-child(1) { width: 84%; animation-duration: 4.8s; animation-delay: -.15s; }
.login-wave:nth-child(2) { width: 92%; animation-duration: 5.15s; animation-delay: -.9s; border-color: rgba(75,157,203,.3); }
.login-wave:nth-child(3) { width: 106%; animation-duration: 4.55s; animation-delay: -1.8s; border-color: rgba(38,119,173,.3); }
.login-wave:nth-child(4) { width: 97%; border-width: 1px; border-color: rgba(105,180,218,.4); animation-duration: 5.35s; animation-delay: -2.7s; }
.login-wave:nth-child(5) { width: 112%; border-width: 1px; border-color: rgba(46,131,184,.3); animation-duration: 4.7s; animation-delay: -3.6s; }
.login-brand-copy { max-width: 660px; margin-top: -16px; }
.login-brand-copy > span { color: #6687a4; font-size: 12px; font-weight: 700; letter-spacing: .28em; }
.login-brand-copy h1 { margin: 10px 0 12px; color: #173d60; font-size: clamp(26px, 2.9vw, 38px); line-height: 1.22; letter-spacing: -.02em; }
.login-brand-copy p { margin: 0; color: #587793; font-size: 14px; }
.login-card { position: relative; padding: clamp(25px, 3.4vw, 38px); overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 24px 65px rgba(30,90,138,.18), inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter: blur(18px); }
.login-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--primary), #54b6dc 70%, var(--gold)); }
.login-card-heading { margin-bottom: 22px; }
.login-card-heading h2 { margin: 5px 0 7px; color: #173d60; font-size: 27px; }
.login-card-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.login-form { display: grid; gap: 15px; }
.password-field { position: relative; }
.password-field input { padding-right: 62px; }
.password-field button { position: absolute; top: 50%; right: 7px; min-width: 46px; padding: 5px 7px; border: 0; border-radius: 7px; color: var(--primary); background: var(--primary-light); font-size: 10px; font-weight: 700; transform: translateY(-50%); }
.login-remember { display: flex; align-items: center; gap: 8px; margin: -4px 0 0; color: var(--muted); font-size: 12px; cursor: pointer; }
.login-remember input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }
.saved-password-note { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid #cde5d9; border-radius: 10px; color: var(--green); background: var(--green-soft); }
.saved-password-note > span { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--green); font-size: 11px; font-weight: 800; }
.saved-password-note p, .saved-password-note strong, .saved-password-note small { display: block; margin: 0; }
.saved-password-note strong { font-size: 11px; }
.saved-password-note small { margin-top: 1px; color: #527665; font-size: 9px; }
.login-submit { width: 100%; min-height: 46px; margin-top: 2px; box-shadow: 0 10px 22px rgba(29,113,184,.2); }
.quick-account-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.quick-account-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.quick-account-heading span { font-size: 11px; font-weight: 700; }
.quick-account-heading small { color: var(--muted); font-size: 9px; }
.quick-account-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.quick-account { min-width: 0; display: grid; justify-items: center; gap: 4px; padding: 8px 5px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface-soft); text-align: center; }
.quick-account:hover, .quick-account.is-selected { color: var(--primary-dark); border-color: #8cb9df; background: var(--primary-light); }
.quick-account-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--primary), var(--primary-dark)); font-size: 9px; font-weight: 700; }
.quick-account span:last-child { max-width: 100%; overflow: hidden; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.login-register { display: flex; justify-content: center; gap: 5px; margin-top: 18px; color: var(--muted); font-size: 11px; }
.login-register button { padding: 0; border: 0; color: var(--primary); background: transparent; font-weight: 700; }
.login-footer { position: absolute; z-index: 2; right: 28px; bottom: 14px; left: 28px; display: flex; justify-content: space-between; gap: 20px; color: rgba(31,72,104,.66); font-size: 9px; }
body.login-active { overflow: hidden; }

@keyframes login-wave {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.64); }
  13% { opacity: var(--wave-peak, .64); }
  58% { opacity: .24; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(var(--wave-end, 1.7)); }
}

.app-shell { min-height: 100vh; }
.app-shell[hidden] { display: none; }

.sidebar {
  position: fixed;
  /* Bat dau tu duoi khoi logo/ten he thong (".brand-notch", cao 62px) +
     1 khoang nen trung tinh (~14px) ngan cach - KHONG con noi lien truc
     tiep vao day cua khoi do nhu truoc, de lo net "2 khoi rieng biet". */
  inset: 76px auto 0 0;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: 18px 16px 24px;
  color: #fff;
  /* Tong xanh SANG va NHE hon han khoi logo (khoi logo moi giu dung tong
     dam/bao hoa cu cua sidebar) - tao phan tang: khoi thuong hieu la diem
     nhan dam nhat, sidebar la nen dieu huong nhe nhang hon. */
  background: linear-gradient(180deg, #4c93c9 0%, #285f8f 100%);
  border-right: 2px solid #c8963e;
  border-radius: 0 14px 0 0;
  z-index: 20;
  /* Sidebar co chieu cao co dinh (inset object tren = 76px co dinh, duoi =
     0). Man hinh laptop thap (~700px hoac thap hon khi tinh ca thanh dia
     chi/tab cua trinh duyet) khong du cho the nguoi dung + toan bo danh
     sach dieu huong + footer - truoc day phan tran o duoi (vi du "Quan tri
     nhan su", "Cai dat") bi day ra ngoai vung nhin va KHONG the bam duoc,
     vi day la vi tri fixed, khong co scroll. Chi ".nav-list" ben duoi
     duoc phep cuon rieng, the nguoi dung/footer luon co dinh. */
  overflow: hidden;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 0 8px 24px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.brand-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 auto;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 20px rgba(6,59,115,.26);
}

.brand strong, .brand span { display: block; }
.brand strong { font-size: 14px; letter-spacing: .04em; }
.brand span { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 12px; }

/* Khoi logo/ten he thong TACH HAN khoi nen xanh cua sidebar - dat "noi"
   (position:fixed) rieng o goc tren-trai, rong hon het bề ngang sidebar
   (tu co dung theo do dai dong chu, khong dat cung 1 con so), thap va gon,
   vien dong vang mong chay duoi + goc duoi-phai bo tron, tao dang nhu 1
   "notch" nho hon ra ngoai luoi vuong thay vi nam gon trong 1 o phang.
   Van la CON cua ".sidebar" trong HTML (khong doi cau truc) nhung tu dat
   position:fixed rieng - tren desktop (".sidebar" khong co transform) no
   noi doc lap voi ca man hinh, khong bi be ngang cua sidebar rang buoc;
   tren mobile (".sidebar" co transform luc dong/mo) no tu dong "an theo"
   sidebar vi transform tao containing block moi cho phan tu fixed ben
   trong no - truot vao/ra CUNG sidebar, khong can code rieng cho mobile.
   Ca production lan demo deu dung class nay (khong sua ".brand" truc
   tiep vi class do la style nen dung chung, dung cho ca 2 ban). */
.brand.brand-notch {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 25;
  width: max-content;
  max-width: 340px;
  height: 62px;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  text-align: left;
  margin: 0;
  padding: 0 20px;
  border: 2px solid #c8963e;
  border-top: none;
  border-left: none;
  border-radius: 0 0 16px 0;
  background: linear-gradient(120deg, #1d71b8 0%, #0c4a80 100%);
  box-shadow: 5px 6px 14px rgba(6,39,74,.26);
}
.brand-notch .brand-logo { width: 34px; height: 34px; box-shadow: none; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.96); }
.brand-notch strong { display: block; color: #fff; font-size: 12px; font-weight: 800; line-height: 1.22; letter-spacing: 0; }
.brand-notch span { display: block; margin-top: 2px; white-space: nowrap; color: rgba(255,255,255,.72); font-weight: 600; font-size: 10.5px; }

/* O thong tin nguoi dang dang nhap, dat giua khoi logo va danh sach tab
   de tranh dang nhap nham tai khoan. */
.sidebar-user-card {
  margin: 0 0 6px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  flex-shrink: 0;
}
.sidebar-user-card strong { display: block; overflow: hidden; color: #fff; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-card span { display: block; margin-top: 2px; overflow: hidden; color: rgba(255,255,255,.6); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.nav-list {
  display: grid;
  gap: 6px;
  margin-top: 0;
  min-height: 0; /* bat buoc de flex child nay co the co ngan lai va cuon,
                    thay vi giu chieu cao tu nhien va tran ra ngoai sidebar */
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) transparent;
}
.nav-list::-webkit-scrollbar { width: 6px; }
.nav-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 999px; }
.nav-list::-webkit-scrollbar-track { background: transparent; }
.nav-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  color: rgba(255,255,255,.78);
  background: transparent;
  text-align: left;
}
.nav-item:hover, .nav-item.is-active { color: #fff; background: rgba(255,255,255,.14); }
.nav-item.is-active { box-shadow: inset 3px 0 0 var(--gold); }
.nav-icon { width: 20px; font-size: 18px; text-align: center; }
.nav-count {
  min-width: 22px;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  color: #614a00;
  background: #ffe9a3;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.sidebar-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
}
.sidebar-note strong, .sidebar-note span { display: block; }
.sidebar-note strong { font-size: 12px; }
.sidebar-note span { color: rgba(255,255,255,.64); font-size: 11px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 0 3px rgba(110,231,168,.17); }

/* Chan sidebar - dong chu ghi nguon, khong con hien ten/vai tro dang nhap */
.sidebar-footer { position: relative; margin-top: auto; padding-top: 16px; flex-shrink: 0; }
.sidebar-footer::before { content: ""; position: absolute; top: 0; left: 4px; right: 4px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 50%, transparent); }
.sidebar-footer-credit span { display: block; color: rgba(255,255,255,.5); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.sidebar-footer-credit strong { display: block; margin-top: 3px; color: rgba(255,255,255,.88); font-size: 12px; font-weight: 600; }

/* Chuong thong bao noi co dinh o goc tren-phai man hinh, tach khoi topbar/sidebar */
.notification-center.notification-center-floating { position: fixed; top: 20px; right: 24px; z-index: 45; }
.notification-center-floating .notification-toggle { box-shadow: 0 6px 16px rgba(15,44,73,.16); }

/* Bo han topbar tieu de trang cho gon (chi ban production dung class nay,
   khong dung ".topbar"/".page-heading" truc tiep vi 2 class do dung chung
   voi ban demo - se lam mat tieu de ben demo neu an nham). */
.topbar.topbar-minimal { display: none; }
.topbar-minimal .page-heading { display: none; }

.main-content { margin-left: var(--sidebar); min-width: 0; }
.topbar {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 32px;
  border-bottom: 3px solid var(--gold);
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 18px rgba(6,59,115,.07);
}
.page-heading { min-width: 0; }
.eyebrow { color: var(--primary-dark); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 24px; line-height: 1.2; }
h2 { margin-bottom: 6px; font-size: 20px; }
h3 { margin-bottom: 4px; font-size: 15px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.session-user { max-width: 220px; display: grid; text-align: right; }
.session-user strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.session-user span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.logout-button { min-height: 36px; padding: 7px 10px; font-size: 10px; }
.notification-center { position: relative; }
.notification-toggle { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--surface); cursor: pointer; }
.notification-toggle:hover, .notification-toggle[aria-expanded="true"] { color: var(--primary); border-color: #9bc4e5; background: var(--primary-light); }
.notification-toggle:focus-visible { outline: 3px solid rgba(29,113,184,.18); outline-offset: 2px; }
.notification-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: var(--red); font-size: 9px; font-weight: 800; line-height: 1; }
.notification-badge[hidden], .notification-panel[hidden], .notification-header button[hidden] { display: none; }
.notification-panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 40; width: min(390px, calc(100vw - 32px)); overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 18px 45px rgba(15,44,73,.2); }
.notification-panel::before { content: ""; position: absolute; top: -7px; right: 14px; width: 12px; height: 12px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); background: var(--surface); transform: rotate(45deg); }
.notification-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px 12px; border-bottom: 1px solid var(--line); }
.notification-header strong, .notification-header span { display: block; }
.notification-header strong { font-size: 14px; }
.notification-header span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.notification-header button { padding: 4px 0; border: 0; color: var(--primary); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }
.notification-list { max-height: min(480px, calc(100vh - 150px)); overflow-y: auto; }
.notification-item { width: 100%; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; padding: 13px 15px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; }
.notification-item:hover { background: var(--surface-soft); }
.notification-item.is-unread { background: #f4f9fd; }
.notification-item.is-read { opacity: .72; }
.notification-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--orange); }
.notification-dot.revision { background: var(--red); }
.notification-dot.resubmitted { background: var(--blue); }
.notification-dot.account { background: var(--green); }
.notification-dot.escalation { background: var(--gold); }
.notification-copy, .notification-copy strong, .notification-copy span, .notification-copy small { display: block; min-width: 0; }
.notification-copy strong { color: var(--text); font-size: 12px; }
.notification-copy span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.notification-copy small { margin-top: 5px; color: #89939e; font-size: 10px; }
.notification-empty { display: grid; gap: 4px; padding: 34px 20px; color: var(--muted); text-align: center; }
.notification-empty strong { color: var(--text); font-size: 13px; }
.notification-empty span { font-size: 11px; }
.avatar-button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--primary), var(--primary-dark));
  font-weight: 700;
}
.mobile-menu { display: none; border: 0; background: transparent; font-size: 24px; }

/* padding-top du rong de noi dung khong bi chuong thong bao noi (fixed,
   top:20px cao 42px) de len - xay ra o cac trang khong co banner/thanh loc
   ngay dau nhu Nhat ky, Cai dat. */
.view-container { max-width: 1540px; margin: 0 auto; padding: 76px 32px 48px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 20px; }
.toolbar .spacer { flex: 1; }
.filter-field { display: grid; gap: 5px; }
.filter-field span { color: var(--muted); font-size: 11px; }
.filter-field select, .filter-field input {
  min-height: 38px;
  padding: 7px 32px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.button {
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-weight: 650;
}
.button-primary { color: #fff; background: var(--primary); }
.button-primary:hover { background: var(--primary-dark); }
.button-secondary { color: var(--text); border-color: var(--line); background: var(--surface); }
.button-secondary:hover { background: var(--surface-soft); }
.button-secondary.is-picked { color: var(--primary-dark, var(--primary)); border-color: var(--primary); background: var(--primary-light); font-weight: 600; white-space: normal; text-align: left; line-height: 1.4; }
.kpi-catalog-change { display: inline; font-weight: 400; color: var(--muted); }
.button-danger { color: var(--red); border-color: #ecc4c9; background: var(--red-soft); }
.button-small { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.icon-button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-soft); font-size: 24px; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.metric-card, .panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,249,255,.96));
  box-shadow: 0 2px 10px rgba(31,42,55,.03);
}
.metric-card { position: relative; padding: 18px; overflow: hidden; }
.metric-card.gold { background: linear-gradient(145deg, #fff, #fff8e7); }
.metric-card.green { background: linear-gradient(145deg, #fff, #edf9f3); }
.metric-card.blue { background: linear-gradient(145deg, #fff, #eaf4ff); }
.metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--primary); }
.metric-card.green::before { background: var(--green); }
.metric-card.blue::before { background: var(--blue); }
.metric-card.gold::before { background: var(--gold); }
.metric-label { color: var(--muted); font-size: 12px; }
.metric-value { margin: 5px 0 2px; font-size: 30px; font-weight: 750; letter-spacing: -.03em; }
.metric-context { color: var(--muted); font-size: 11px; }
.metric-context strong { color: var(--green); }

/* "Lien ket nhanh" o dau Tong quan - cac trang web can dung hang ngay (trang tin
   dien tu, quan ly van ban...), mo tab moi, khong chiem nhieu dien tich.
   Danh sach ngay cang dai (9+ muc) nen tren man hinh rong van cho wrap xuong
   dong binh thuong (du cho), nhung tu kho ~760px tro xuong doi sang 1 HANG
   CUON NGANG (overflow-x) de khong day noi dung ben duoi xuong qua xa - kem
   vien mo (mask-image) bao hieu con muc chua xem. Duoi ~420px (dien thoai),
   chi hien icon se kho hieu la trang gi - nen rut gon icon-only CHI khi o
   trang thai thu gon, kem nut "Mo rong" chuyen sang danh sach day du ten,
   xep doc tung dong cho de doc (khong can cuon ngang/doan icon nua). */
.quick-links-panel { padding: 10px 16px; margin-bottom: 14px; }
.quick-links-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quick-links-label { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.quick-links-toggle { display: none; border: none; background: none; color: var(--primary-dark, var(--primary)); font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 4px; }
.quick-links-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quick-link-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--primary-dark, var(--primary)); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.quick-link-chip:hover { background: var(--primary-light); border-color: #9bc4e5; }

@media (max-width: 760px) {
  .quick-links-row { flex-wrap: nowrap; overflow-x: auto; margin-top: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .quick-link-chip { scroll-snap-align: start; flex: 0 0 auto; }
}

@media (max-width: 420px) {
  .quick-links-toggle { display: inline-flex; }
  .quick-link-chip-text { display: none; }
  .quick-link-chip { padding: 7px 10px; font-size: 15px; }

  .quick-links-panel.expanded .quick-links-row { flex-direction: column; align-items: stretch; flex-wrap: nowrap; overflow-x: visible;
    -webkit-mask-image: none; mask-image: none; }
  .quick-links-panel.expanded .quick-link-chip { font-size: 13px; padding: 9px 12px; }
  .quick-links-panel.expanded .quick-link-chip-text { display: inline; }
}

.dashboard-summary-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.dashboard-kpi-cluster { grid-column: span 8; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.compact-metric {
  --tile-accent: var(--primary);
  --tile-wash: rgba(29,113,184,.11);
  min-width: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  overflow: hidden;
  padding: 14px 13px 13px 16px;
  border: 1px solid rgba(29,113,184,.2);
  border-radius: 16px;
  background-color: rgba(250,253,255,.97);
  background-image: radial-gradient(circle at 94% 7%, var(--tile-wash), transparent 37%), repeating-linear-gradient(135deg, rgba(29,113,184,.025) 0 1px, transparent 1px 10px);
  box-shadow: 0 5px 12px rgba(31,42,55,.06), 0 14px 26px rgba(31,42,55,.035);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.compact-metric::before { content: ""; position: absolute; z-index: 2; top: 13px; bottom: 13px; left: 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--tile-accent); transform: scaleY(.56); transition: transform .28s ease; }
.compact-metric::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(115deg, transparent 28%, var(--tile-wash) 48%, transparent 68%); transform: translateX(-130%); transition: transform .65s ease; pointer-events: none; }
.compact-metric > * { position: relative; z-index: 1; }
.compact-metric:hover { transform: translateY(-5px); border-color: var(--tile-accent); box-shadow: 0 12px 20px rgba(31,42,55,.11), 0 22px 34px rgba(31,42,55,.08); }
.compact-metric:hover::before { transform: scaleY(1); }
.compact-metric:hover::after { transform: translateX(130%); }
.compact-metric.gold { --tile-accent: var(--gold); --tile-wash: rgba(212,175,55,.14); border-color: rgba(212,175,55,.28); background-color: #fffdf5; }
.compact-metric.green { --tile-accent: var(--green); --tile-wash: rgba(31,122,85,.12); border-color: rgba(31,122,85,.23); background-color: #f7fcf9; }
.compact-metric.blue { --tile-accent: #536fba; --tile-wash: rgba(83,111,186,.12); border-color: rgba(83,111,186,.23); background-color: #f8faff; }
.compact-metric span { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.compact-metric strong { margin-top: 2px; font-size: 22px; line-height: 1; }
.compact-metric small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-notice { margin-bottom: 10px; padding: 8px 12px; font-size: 10px; }
.dashboard-toolbar { gap: 9px; margin-bottom: 12px; }
.dashboard-toolbar .filter-field { gap: 3px; }
.dashboard-toolbar .filter-field select { min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
.dashboard-toolbar .button { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
.insight-strip.dashboard-insight { grid-column: span 4; min-width: 0; position: relative; isolation: isolate; display: grid; align-content: center; gap: 4px; overflow: hidden; margin: 0; padding: 10px 12px; border: 1px solid rgba(31,122,85,.22); border-left: 1px solid rgba(31,122,85,.22); border-radius: 18px; background-color: #f7fcf9; background-image: radial-gradient(circle at 94% 8%, rgba(31,122,85,.13), transparent 36%), repeating-linear-gradient(135deg, rgba(31,122,85,.024) 0 1px, transparent 1px 10px); box-shadow: 0 5px 12px rgba(31,42,55,.06), 0 14px 26px rgba(31,42,55,.035); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.insight-strip.dashboard-insight::before { content: ""; position: absolute; z-index: 2; top: 14px; bottom: 14px; left: 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--green); transform: scaleY(.56); transition: transform .28s ease; }
.insight-strip.dashboard-insight::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(115deg, transparent 28%, rgba(31,122,85,.11) 48%, transparent 68%); transform: translateX(-130%); transition: transform .65s ease; pointer-events: none; }
.insight-strip.dashboard-insight > * { position: relative; z-index: 1; }
.insight-strip.dashboard-insight:hover { transform: translateY(-5px); border-color: var(--green); box-shadow: 0 12px 20px rgba(31,42,55,.11), 0 22px 34px rgba(31,42,55,.08); }
.insight-strip.dashboard-insight:hover::before { transform: scaleY(1); }
.insight-strip.dashboard-insight:hover::after { transform: translateX(130%); }
.insight-strip.dashboard-insight div { min-width: 0; }
.gauge-wrap { min-width: 0; display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 8px; }
.gauge-visual { display: grid; justify-items: center; gap: 1px; }
.gauge-visual > span { color: var(--muted); font-size: 7px; }
.mini-gauge { position: relative; width: 124px; height: 70px; overflow: hidden; }
.gauge-dial { position: absolute; top: 5px; left: 0; width: 124px; height: 124px; border-radius: 50%; background: conic-gradient(from 270deg, #eb6a70 0 16.67%, #f4c34f 16.67% 33.33%, #45b77d 33.33% 50%, transparent 50% 100%); }
.gauge-dial::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; }
.gauge-needle { position: absolute; z-index: 2; bottom: 10px; left: 15px; width: 47px; height: 1.5px; border-radius: 999px; background: #34495a; transform-origin: 100% 50%; transition: transform .5s ease; }
.mini-gauge > i { position: absolute; z-index: 3; bottom: 6px; left: 57px; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; background: #34495a; }
.mini-gauge > small { position: absolute; z-index: 3; color: #89939e; font-size: 6px; }
.gauge-min { bottom: 2px; left: 2px; }
.gauge-mid { top: 2px; left: 59px; }
.gauge-max { right: 0; bottom: 2px; }
.gauge-reading { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-top: 3px; color: #37495a; }
.gauge-reading strong { font-size: 15px; line-height: 1; }
.gauge-reading span { color: var(--muted); font-size: 7px; }
.gauge-copy { min-width: 0; }
.gauge-copy > strong { display: block; margin-top: 1px; font-size: 11px; line-height: 1.25; }
.dashboard-insight .gauge-copy p { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .8fr); gap: 20px; }
.panel { min-width: 0; padding: 20px; }
.panel-wide { grid-column: 1 / -1; }
.panel-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.panel-header p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.panel-header-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
/* "Cong viec da giao" tach 2 khu Dang thuc hien/Da hoan thanh, xep chong
   trong cung 1 nua man hinh (xem rt()/renderTasks). */
.task-panel-stacked { margin-bottom: 16px; }
.task-search-field { margin-bottom: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 11px; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }

.dashboard-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: dense; gap: 16px; align-items: start; }
.dashboard-bento .bento-tile {
  --tile-accent: var(--primary);
  --tile-wash: rgba(29,113,184,.1);
  --tile-ring: rgba(29,113,184,.18);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px;
  border-color: rgba(29,113,184,.2);
  border-radius: 19px;
  background-color: rgba(250,253,255,.97);
  background-image: radial-gradient(circle at 94% 6%, var(--tile-wash), transparent 31%), repeating-linear-gradient(135deg, rgba(29,113,184,.024) 0 1px, transparent 1px 11px);
  box-shadow: 0 5px 13px rgba(31,42,55,.065), 0 15px 28px rgba(31,42,55,.04);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.dashboard-bento .bento-tile::before { content: ""; position: absolute; z-index: 3; top: 18px; bottom: 18px; left: 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--tile-accent); transform: scaleY(.55); transition: transform .28s ease; }
.dashboard-bento .bento-tile::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(115deg, transparent 29%, var(--tile-wash) 48%, transparent 67%); transform: translateX(-125%); transition: transform .65s ease; pointer-events: none; }
.dashboard-bento .bento-tile > * { position: relative; z-index: 1; }
.dashboard-bento .bento-tile:hover { transform: translateY(-6px); border-color: var(--tile-accent); box-shadow: 0 13px 22px rgba(31,42,55,.12), 0 25px 40px rgba(31,42,55,.09); }
.dashboard-bento .bento-tile:hover::before { transform: scaleY(1); }
.dashboard-bento .bento-tile:hover::after { transform: translateX(125%); }
.dashboard-bento .panel-header { position: relative; margin-bottom: 9px; padding-right: 14px; }
.dashboard-bento .panel-header::before { content: ""; position: absolute; z-index: 0; top: -34px; right: -44px; width: 150px; height: 100px; background: linear-gradient(135deg, transparent 0 31%, var(--tile-wash) 31% 45%, transparent 45% 52%, var(--tile-ring) 52% 55%, transparent 55%); opacity: .72; transition: transform .55s ease, opacity .35s ease; pointer-events: none; }
.dashboard-bento .panel-header > * { position: relative; z-index: 1; }
.dashboard-bento .panel-header::after { content: "⋮"; position: absolute; top: -4px; right: 0; color: #9aa2ab; font-size: 13px; }
.dashboard-bento .bento-tile:hover .panel-header::before { transform: translate(-7px, 6px) scale(1.06); opacity: 1; }
.dashboard-bento .panel-header h2 { margin: 0; color: #3e4650; font-size: 11px; font-weight: 600; }
.dashboard-bento .panel-header p { margin-top: 2px; font-size: 8px; }
.bento-trend { grid-column: span 6; align-self: stretch; }
.bento-side-stack { grid-column: span 6; display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.bento-side-stack .bento-tile { padding: 12px; }
.bento-side-stack .panel-header { gap: 6px; margin-bottom: 9px; }
.bento-side-stack .panel-header h2 { font-size: 10px; }
.bento-side-stack .panel-header p, .bento-side-stack .chart-unit { display: none; }
.dashboard-bento .bento-trend { --tile-accent: #536fba; --tile-wash: rgba(83,111,186,.11); --tile-ring: rgba(83,111,186,.19); background-color: #f8faff; }
.dashboard-bento .bento-distribution { --tile-accent: #1f7a55; --tile-wash: rgba(31,122,85,.11); --tile-ring: rgba(31,122,85,.19); background-color: #f7fcf9; }
.dashboard-bento .bento-progress { --tile-accent: #d4af37; --tile-wash: rgba(212,175,55,.13); --tile-ring: rgba(212,175,55,.21); background-color: #fffdf5; }
.dashboard-bento .bento-category { --tile-accent: #7c5bb3; --tile-wash: rgba(124,91,179,.1); --tile-ring: rgba(124,91,179,.18); background-color: #fbf9ff; }
.dashboard-bento .bento-comparison { --tile-accent: #1d71b8; --tile-wash: rgba(29,113,184,.1); --tile-ring: rgba(29,113,184,.18); background-color: #f8fcff; }
.dashboard-bento .bento-summary { --tile-accent: #8b617c; --tile-wash: rgba(139,97,124,.1); --tile-ring: rgba(139,97,124,.18); background-color: #fdfafd; }
.bento-comparison { grid-column: 1 / -1; }
.bento-category { grid-column: 1 / -1; }
.bento-summary { grid-column: 2 / 12; width: 100%; }
.bento-trend .trend-chart { min-height: 0; }
.bento-comparison .unit-comparison-grid { gap: 16px; }
.bento-comparison .unit-comparison-group { padding: 11px; }
.bento-comparison .unit-group-header { padding-bottom: 7px; }
.bento-comparison .unit-column-labels { padding-top: 7px; }
.bento-comparison .unit-compare-row { min-height: 35px; padding-top: 4px; padding-bottom: 4px; }
.bento-distribution { display: flex; flex-direction: column; }
.bento-distribution .bar-list { gap: 9px; padding-top: 1px; }
.bento-distribution .bar-track { height: 9px; }
.bento-distribution .bar-label { gap: 5px; font-size: 9px; }
.bento-distribution .bar-label span:last-child { font-size: 8px; white-space: nowrap; }
.bento-distribution .detail-section { display: none; }
.bento-summary .table-wrap { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.bento-summary thead th { position: sticky; z-index: 2; top: 0; }
.bento-summary th, .bento-summary td { padding-top: 9px; padding-bottom: 9px; }
.category-stats-table { border: 1px solid var(--line); border-radius: 10px; }
.category-stats-table table { min-width: 760px; }
.category-stats-table th, .category-stats-table td { padding-top: 9px; padding-bottom: 9px; }
.category-stats-table th:first-child { width: 32%; }
.category-stats-table th:nth-child(2) { width: 25%; }
.category-share { min-width: 150px; display: grid; grid-template-columns: minmax(90px, 1fr) 34px; align-items: center; gap: 8px; }
.category-share .bar-track { height: 8px; }
.category-share > span { color: var(--muted); font-size: 10px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.matrix-wrap { position: relative; min-height: 390px; }
.matrix-chart { width: 100%; height: auto; min-height: 360px; overflow: visible; }
.matrix-chart .grid-line { stroke: var(--line); stroke-width: 1; }
.matrix-chart .axis-line { stroke: #aab2bd; stroke-width: 1.2; }
.matrix-chart .axis-label, .matrix-chart .tick-label { fill: var(--muted); font-size: 11px; }
.matrix-chart .quadrant-label { fill: #8a939e; font-size: 11px; font-weight: 650; }
.matrix-chart .bubble { fill: rgba(165,21,36,.72); stroke: #fff; stroke-width: 2; cursor: pointer; transition: r .18s ease, opacity .18s ease; }
.matrix-chart .bubble:hover, .matrix-chart .bubble:focus { fill: var(--red-dark); opacity: 1; }
.matrix-chart .bubble-label { fill: var(--text); font-size: 10px; pointer-events: none; }

.bar-list { display: grid; gap: 14px; }
.bar-row { display: grid; gap: 6px; }
.bar-label { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.bar-label span:last-child { color: var(--muted); }
.bar-track { height: 9px; border-radius: 999px; background: #edf0f3; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: var(--red); }
.bar-fill.green { background: var(--green); }
.bar-fill.gold { background: var(--gold); }
.bar-fill.blue { background: var(--blue); }

.table-wrap { overflow-x: auto; }
.table-sort-help { margin: -2px 0 9px; color: var(--muted); font-size: 11px; text-align: right; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: var(--muted); background: var(--surface-soft); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
tbody tr:hover { background: #fbfbfc; }
.table-group-row td { background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 8px 10px; }
.table-group-row:hover { background: transparent; }
.summary-row-clickable { cursor: pointer; }
.summary-row-clickable:hover { background: var(--primary-light); }
.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.sortable-column { padding: 0; }
.sort-button { width: 100%; min-height: 43px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px; border: 0; color: var(--muted); background: transparent; font: inherit; font-weight: 700; letter-spacing: inherit; text-align: right; cursor: pointer; }
.sort-button:hover { color: var(--primary-dark); background: var(--primary-light); }
.sort-button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--blue); outline-offset: -2px; }
.sort-button.is-active { color: var(--primary-dark); background: color-mix(in srgb, var(--primary-light) 72%, white); }
.sort-indicator { width: 13px; flex: 0 0 13px; color: #919aa5; font-size: 13px; line-height: 1; text-align: center; }
.sort-button.is-active .sort-indicator { color: var(--primary); }
.person-cell { display: flex; align-items: center; gap: 9px; min-width: 180px; }
.mini-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--primary-dark); background: var(--primary-light); font-size: 11px; font-weight: 700; }
.person-cell strong, .person-cell span { display: block; }
.person-cell span { color: var(--muted); font-size: 11px; }
.score-pill, .status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.score-high { color: var(--green); background: var(--green-soft); }
.score-mid { color: var(--blue); background: var(--blue-soft); }
.score-low { color: var(--orange); background: var(--orange-soft); }
.status-pending { color: var(--orange); background: var(--orange-soft); }
.status-approved { color: var(--green); background: var(--green-soft); }
.status-revision { color: var(--red); background: var(--red-soft); }
.status-info { color: var(--blue); background: var(--blue-soft); }

.task-list { display: grid; gap: 10px; margin-top: 14px; }
.task-card { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.task-card.is-overdue { border-left: 3px solid var(--red); background: var(--red-soft); }
.task-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.task-card p { margin: 0; color: var(--muted); font-size: 13px; }
.task-card-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--muted); }
.task-due-form { display: flex; align-items: flex-end; gap: 8px; }
.task-due-form label { display: grid; gap: 3px; font-size: 11px; color: var(--muted); }
.task-member-list { display: grid; gap: 6px; margin-top: 4px; }
.task-member-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); font-size: 12.5px; }
.task-member-row > span:first-child { flex: 1; font-weight: 600; color: var(--text); }
/* Nguoi da bi rut khoi 1 viec da giao (con giu lai nhat ky/du lieu cu,
   xem migration 00070) - hien mo nhat trong the, tach biet voi nguoi
   dang hoat dong. */
.task-member-removed { opacity: .55; }
.meta-tag-muted { font-style: italic; }
.task-card-actions { display: flex; gap: 8px; margin-top: 2px; }

.journal-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.journal-header p { margin: 0; color: var(--muted); font-size: 13px; }
.journal-header .button { margin-left: auto; }
.journal-header-actions { margin-left: auto; display: flex; gap: 10px; }
.journal-header-actions .button { margin-left: 0; }
.journal-list { display: grid; gap: 12px; }
.journal-card { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.journal-card.is-revision { border-color: #e2a7ae; box-shadow: inset 4px 0 0 var(--red); }
.journal-date { color: var(--muted); font-size: 12px; }
.journal-date strong { display: block; color: var(--text); font-size: 18px; }
.journal-body p { margin: 5px 0 8px; color: var(--muted); font-size: 12px; }
/* Giu nguyen xuong dong nguoi dung go o cac o van ban dai (Ket qua, Mo ta,
   Nhan xet cua lanh dao, Loi nhan...) khi hien thi lai - de "thoang" dung
   nhu luc go (yeu cau nguoi dung 2026-09-10). */
.journal-body h3, .journal-body p,
.leader-comment span, .revision-feedback span, .resubmission-context span, .override-feedback span,
.task-card > p,
.review-detail .detail-section > p:not(.metric-context) { white-space: pre-wrap; }
.journal-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.meta-tag { padding: 3px 7px; border-radius: 6px; color: var(--muted); background: var(--surface-soft); font-size: 11px; }
.meta-tag-warning { color: #8a650d; background: #fffaf0; border: 1px solid #ead7a4; }
.journal-scores { display: flex; gap: 8px; }
.journal-side { display: grid; justify-items: end; gap: 10px; }
.button-small { padding: 8px 11px; font-size: 11px; white-space: nowrap; }
.revision-feedback, .revision-notice, .resubmission-context { display: grid; gap: 4px; padding: 10px 12px; border-left: 3px solid var(--red); border-radius: 8px; color: var(--text); background: var(--red-soft); }
.revision-notice[hidden] { display: none; }
.revision-feedback { margin: 10px 0; }
.revision-feedback strong, .revision-notice strong, .resubmission-context strong { color: var(--red); font-size: 12px; }
.revision-feedback span, .revision-notice span, .resubmission-context span { font-size: 12px; line-height: 1.45; }
.resubmission-context { margin-bottom: 16px; border-left-color: var(--blue); background: var(--blue-soft); }
/* Nhan xet cua lanh dao di kem nhat ky da xac nhan/da cham diem (ca khi
   duyet lan dau lan khi bi dieu chinh lai sau do) - dung tong mau xanh la
   giong trang thai "Da xac nhan", khac mau do cua ".revision-feedback" vi
   day khong phai "can bo sung", chi la thong tin tham khao. */
.leader-comment { display: grid; gap: 4px; margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--green); border-radius: 8px; color: var(--text); background: var(--green-soft); }
.leader-comment strong { color: var(--green); font-size: 12px; }
.leader-comment span { font-size: 12px; line-height: 1.45; }
/* Rieng cho khung "Giai trinh khi cham diem chinh thuc" o Cham diem thang
   (row.note) - van dung tong mau vang nhu truoc, khac voi .leader-comment
   o nhat ky hang ngay. */
.override-feedback { display: grid; gap: 4px; margin: 10px 0; padding: 10px 12px; border-left: 3px solid #d4af37; border-radius: 8px; color: #6b5310; background: #fffaf0; }
.override-feedback strong { color: #8a650d; font-size: 12px; }
.override-feedback span { font-size: 12px; line-height: 1.45; }

/* Diem cong/tru dot xuat - tab rieng "Diem cong/tru dot xuat" (khen
   thuong/ky luat phat hien sau khi thang da cham xong) - moi lan dieu
   chinh la 1 dong rieng, khong bao gio bi ghi de. */
.score-adjustment-list { display: grid; gap: 8px; margin-top: 4px; }
.score-adjustment-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 9px; border-left: 3px solid var(--line); background: var(--surface-soft); }
.score-adjustment-item.is-positive { border-left-color: var(--green); }
.score-adjustment-item.is-negative { border-left-color: var(--red); }
.score-adjustment-main { display: grid; gap: 2px; min-width: 0; }
.score-adjustment-main strong { font-size: 13px; }
.score-adjustment-item.is-positive .score-adjustment-main strong { color: var(--green); }
.score-adjustment-item.is-negative .score-adjustment-main strong { color: var(--red); }
.score-adjustment-main span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.score-adjustment-person { font-size: 12px; font-weight: 700; color: var(--text); }
.score-adjustment-meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.score-adjustment-meta span { color: var(--muted); font-size: 11px; white-space: nowrap; }
/* Banner tom tat hien trong "Cham diem thang" - bam vao nhay sang tab
   "Diem cong/tru dot xuat", man hinh quan ly day du nam rieng o do. */
.score-adjustment-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 10px 0; padding: 11px 14px; border: none; border-radius: 9px; border-left: 3px solid var(--line); background: var(--surface-soft); cursor: pointer; text-align: left; font-size: 12.5px; color: var(--text); }
.score-adjustment-banner.is-positive { border-left-color: var(--green); }
.score-adjustment-banner.is-negative { border-left-color: var(--red); }
.score-adjustment-banner-link { flex: 0 0 auto; color: var(--primary); font-weight: 700; font-size: 12px; white-space: nowrap; }
/* Trang "Phat trien tinh nang & sua loi" - nhat ky cap nhat phan mem
   danh cho nguoi khong ranh ky thuat, nhom theo ngay, moi ngay gan nhat
   len dau. */
.changelog-page { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.changelog-page .changelog-main { flex: 1 1 400px; min-width: 0; }
.changelog-sidebar { flex: 0 0 352px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.changelog-contact { padding: 14px 18px 16px; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 3px rgba(15, 44, 73, .06); }
.changelog-contact-title { padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.changelog-contact-name { color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.45; white-space: nowrap; }
.changelog-contact-name span { color: var(--muted); font-size: 13px; font-weight: 400; }
.changelog-contact-phone { margin-top: 6px; color: var(--muted); font-size: 13px; }
.changelog-contact-phone a { color: var(--blue); font-size: 15px; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.changelog-download-desc { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.changelog-download-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; box-sizing: border-box; text-decoration: none; }
@media (max-width: 900px) { .changelog-sidebar { flex-basis: 100%; position: static; } .changelog-contact-name { white-space: normal; } }
.changelog-list { display: grid; gap: 22px; max-width: 720px; }
.changelog-date { margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.changelog-items { display: grid; gap: 10px; }
.changelog-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.changelog-item span { font-size: 13px; line-height: 1.5; color: var(--text); }
.changelog-tag { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.changelog-tag.tag-feature { color: var(--blue); background: var(--blue-soft); }
.changelog-tag.tag-fix { color: var(--red); background: var(--red-soft); }
.changelog-tag.tag-improve { color: var(--orange); background: var(--orange-soft); }
.resubmission-context strong { color: var(--blue); }
.resubmission-badge { display: inline-flex; margin: 0 0 5px; padding: 3px 7px; border-radius: 999px; color: var(--blue); background: var(--blue-soft); font-size: 10px; font-weight: 700; }
.score-box { min-width: 76px; padding: 8px; border-radius: 9px; background: var(--surface-soft); text-align: center; }
.score-box span, .score-box strong { display: block; }
.score-box span { color: var(--muted); font-size: 10px; }
.score-box strong { margin-top: 2px; font-size: 18px; }

.review-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; }
.review-queue { display: grid; gap: 9px; }
.review-queue-details summary { cursor: pointer; font-weight: 700; font-size: 13px; margin-bottom: 10px; list-style: revert; }
.review-queue-hint { font-weight: 400; color: var(--muted); font-size: 11px; }
/* Khu phu "Dang cho nguoi khac xu ly" - nhat ky da nop dich danh cho
   nguoi khac (vd 1 Pho) nhung minh van co quyen can thiep - tach roi
   bang duong ke ngan cach de khong lan vao hang chinh, tranh gianh duyet
   nham. */
.review-queue-others { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
@media (min-width: 821px) {
  /* Man hinh rong van hien song song 2 ben nhu cu - an het phan
     tom-tat/mui ten cua <details> de khong doi giao dien desktop. */
  .review-queue-details summary { display: none; }
}
.queue-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); text-align: left; }
.queue-item:hover, .queue-item.is-selected { border-color: #8cb9df; background: var(--primary-light); }
.queue-item strong { display: block; margin-bottom: 4px; }
.queue-item p { margin: 0 0 7px; color: var(--muted); font-size: 11px; }
.queue-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }

/* Nhom nhat ky cho duyet theo tung KSV, moi muc trong nhom danh so thu tu. */
.queue-group { margin-bottom: 16px; }
.queue-group:last-child { margin-bottom: 0; }
.queue-group-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px 7px; }
.queue-group-header strong { font-size: 12px; color: var(--text); }
.queue-group-header span { color: var(--muted); font-size: 10px; }
.queue-index { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: 10px; font-weight: 700; }
.queue-item-body { min-width: 0; flex: 1; }
.queue-item-body p { margin: 0 0 6px; }

/* Tab "Nhat ky cong tac cua don vi" - the chon che do, danh sach nguoi,
   nhom theo ngay dung lai o ca 2 che do (theo nguoi / theo thoi gian). */
.uj-toolbar { align-items: center; }
.uj-mode-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-soft); }
.uj-mode-btn { padding: 7px 14px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 600; }
.uj-mode-btn.is-active { color: #fff; background: var(--primary); }
.uj-group-heading { margin: 16px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; }
.uj-group-heading:first-child { margin-top: 0; }
.uj-person-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.uj-person-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: left; }
.uj-person-card:hover { border-color: #8cb9df; background: var(--primary-light); }
.uj-person-info strong { display: block; font-size: 13px; }
.uj-person-info span { color: var(--muted); font-size: 11px; }
.uj-person-stats { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uj-last-date { color: var(--muted); font-size: 10px; }
.uj-back { margin-bottom: 12px; }
.uj-date-group { margin-bottom: 18px; }
.uj-date-group:last-child { margin-bottom: 0; }
.uj-date-group-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px 8px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.uj-date-group-header strong { font-size: 13px; }
.uj-date-group-header span { color: var(--muted); font-size: 11px; }
.uj-date-items { display: grid; gap: 10px; }
.uj-numbered-item { display: flex; align-items: flex-start; gap: 10px; }
.uj-numbered-item .journal-card { flex: 1; }

/* Tab "Theo ngay" cua Nhat ky cong tac don vi - xem nhanh 1 ngay cu the:
   ai da nop, ai nghi phep, ai chua nop, de lanh dao don doc. */
.uj-day-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.uj-day-header h2 { margin: 0; font-size: 16px; }
.uj-day-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.uj-day-stat { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.uj-day-stat.tone-submitted { color: var(--green); background: var(--green-soft); }
.uj-day-stat.tone-leave { color: var(--blue); background: var(--blue-soft); }
.uj-day-stat.tone-missing { color: var(--red); background: var(--red-soft); }
.uj-day-weekend-note { margin: 4px 0 0; }
.uj-day-section { margin-top: 20px; }
.uj-day-section:first-of-type { margin-top: 14px; }
.uj-day-section h3 { margin: 0 0 10px; font-size: 13px; color: var(--text); }
.uj-day-list { display: grid; gap: 8px; }
.uj-day-card { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; width: 100%; box-sizing: border-box; }
.uj-day-card-name { font-weight: 700; font-size: 13px; color: var(--text); }
.uj-day-card-meta { color: var(--muted); font-size: 11px; margin-right: auto; }
button.uj-day-card { cursor: pointer; }
button.uj-day-card.is-missing { border-color: #ecc; background: var(--red-soft); }
button.uj-day-card.is-missing:hover { border-color: var(--red); }
.uj-day-card.is-static { background: var(--blue-soft); border-color: #c7dcf2; }
details.uj-day-card { display: block; padding: 0; overflow: hidden; }
details.uj-day-card summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: revert; }
details.uj-day-card .uj-day-card-logs { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
details.uj-day-card .uj-day-card-logs .journal-card { margin-top: 10px; }
details.uj-day-card .uj-day-card-logs .journal-card:first-child { margin-top: 12px; }
.journal-author-tag { border: 0; color: var(--primary-dark); background: var(--primary-light); font-weight: 700; cursor: pointer; }
.review-detail { min-height: 520px; }
.detail-section { padding: 16px 0; border-bottom: 1px solid var(--line); }
.detail-section:first-of-type { padding-top: 0; }
.detail-section:last-child { border-bottom: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.detail-item { padding: 11px; border-radius: 9px; background: var(--surface-soft); }
.detail-item span, .detail-item strong { display: block; }
.detail-item span { color: var(--muted); font-size: 10px; }
.detail-item strong { margin-top: 3px; font-size: 13px; }
.rating-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rating-control { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.rating-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.rating-value { min-width: 38px; padding: 4px 9px; border-radius: 8px; color: #fff; background: var(--primary); font-size: 18px; font-weight: 750; text-align: center; }
.rating-control input[type="range"] { width: 100%; accent-color: var(--primary); }
.range-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.score-guide {
  min-height: 72px;
  display: grid;
  align-content: start;
  gap: 3px;
  margin-top: 11px;
  padding: 10px 11px;
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: var(--blue-soft);
}
.score-guide strong { color: var(--text); font-size: 12px; }
.score-guide span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.score-guide[data-band="low"] { border-left-color: var(--orange); background: var(--orange-soft); }
.score-guide[data-type="quality"][data-band="high"] { border-left-color: var(--green); background: var(--green-soft); }
.score-guide[data-type="complexity"][data-band="high"] { border-left-color: var(--red); background: var(--red-soft); }
.review-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 16px; }

.org-tree { display: grid; gap: 18px; }
.org-root { max-width: 380px; margin: 0 auto; padding: 18px; border: 2px solid #9bc4e5; border-radius: 14px; background: var(--primary-light); text-align: center; }
.org-root span { display: block; color: var(--muted); font-size: 11px; }
.org-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; position: relative; }
.org-column h3 { padding-bottom: 10px; border-bottom: 2px solid var(--primary-light); }
.org-unit-wrap { margin-top: 10px; }
.org-unit { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.org-unit:hover { border-color: var(--primary); }
.org-unit.is-expanded { border-color: var(--primary); border-radius: 10px 10px 0 0; }
.org-unit span { display: block; color: var(--muted); font-size: 11px; }
.org-unit-members { padding: 4px 13px 12px; border: 1px solid var(--primary); border-top: 0; border-radius: 0 0 10px 10px; background: var(--surface-soft); display: grid; gap: 2px; }
.org-member-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.org-member-row:last-child { border-bottom: 0; }
.org-member-row > span:first-child { flex: 1; font-weight: 600; color: var(--text); }
.org-role-list { display: grid; gap: 8px; margin-top: 18px; }
.org-role-row { display: grid; grid-template-columns: 160px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.org-role-row p { margin: 0; color: var(--muted); font-size: 12px; }

.empty-state { padding: 50px 20px; color: var(--muted); text-align: center; }
.empty-state strong { display: block; margin-bottom: 5px; color: var(--text); }

.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(19,27,35,.5); z-index: 50; }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(720px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.modal-header { display: flex; justify-content: space-between; gap: 20px; padding: 22px 24px 14px; border-bottom: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 22px 24px 24px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 12px; font-weight: 650; }
.field em { color: var(--muted); font-weight: 400; }
.field-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 650; }
/* Khu "Xuat nhat ky chi tiet" trong modal xuat bao cao thang - phan tach
   ro voi khu "Bao cao tong hop diem" o tren khi ca 2 cung hien (lanh dao),
   khong can vien khi chi hien 1 minh (nhan vien thuong). */
#exportLogSection { padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--line); }
#exportScoreSection[hidden] + #exportLogSection { padding-top: 0; margin-top: 0; border-top: none; }
/* O ngay/gio "Han goi y", "Dat han"... ghep 1 o Ngay + 1 o Gio, moi o la
   1 khoi go tay gon (xem .date-field-wrap/.time-field-input ben duoi) -
   thay cho input[type=datetime-local] cua trinh duyet (hien 12h
   sang/chieu hay 24h tuy ngon ngu trinh duyet, ngoai tam kiem soat).
   Dung "!important" cho width vi ".field input" (dinh nghia ben duoi, o
   sau file) co do dac ta (specificity) CAO HON 1 class don (.field +
   input = 2 phan tu > 1 class) nen se ghi de mat kich thuoc rieng neu
   khong co !important - day chinh la nguyen nhan o Gio/Ngay bi "kich
   nhau" (bi keo ve 100% chieu rong, danh nhau trong 1 hang khong xuong
   dong) truoc khi sua. */
.due-datetime-picker { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.due-datetime-sep, .due-datetime-colon { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
/* O Gio va o Ngay dung CHUNG 1 kich thuoc (khong con lech nhau - o Gio
   truoc day nho hon han o Ngay, hoac bi keo rong 100% de "kich" vao
   nhau) - moi o chiem 1 nua khu vuc chon ngay/gio cho can doi. */
.time-field-input { width: 140px !important; flex: 0 0 auto; text-align: center; letter-spacing: .04em; }
/* O ngay go tay dang "dd/mm/yyyy" (tu nhay dau / khi go so) + nut lich
   bam chon cho nguoi khong quen go tay - thay cho input[type=date] cua
   trinh duyet (hien thi sai thu tu ngay/thang tuy ngon ngu trinh duyet,
   khong sua duoc bang thuoc tinh "lang" cua trang). Ca 2 cach nhap deu
   luon ra dung dd/mm/yyyy. */
.date-field-wrap { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.date-field-input { width: 140px !important; flex: 0 0 auto; letter-spacing: .02em; }
.date-field-cal-btn { flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 15px; line-height: 1; cursor: pointer; }
.date-field-cal-btn:hover { background: var(--primary-light); border-color: #9bc4e5; }
.date-field-popup { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 240px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgba(15, 30, 50, .16); }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 12.5px; }
.cal-nav { width: 26px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
.cal-nav:hover { background: var(--primary-light); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; font-size: 10.5px; color: var(--muted); text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-cell { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 12px; cursor: pointer; }
.cal-cell:not(.cal-empty):hover { background: var(--primary-light); }
.cal-cell.is-today { font-weight: 700; color: var(--primary-dark); }
.cal-cell.is-selected { color: #fff; background: var(--primary); }
.cal-empty { cursor: default; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  background: var(--surface);
}
/* Textarea tu dan cao theo noi dung go vao (xem autoGrowTextarea trong
   app.js) - khong con keo tay (resize:none), thanh cuon rieng CHI xuat
   hien khi noi dung vuot qua max-height (dan giay/dan cuc dai), tranh 1 o
   nho phai cuon len xuong trong khi dien tich con lai cua trang van trong. */
.field textarea { resize: none; overflow-y: auto; max-height: 480px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(29,113,184,.13); border-color: var(--primary); }
.field-wide { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 4px; }
.password-field-row { display: flex; gap: 8px; }
.password-field-row input { flex: 1 1 auto; }

/* Bang mat khau vua tao/dat lai - CO DINH, chi mat khi admin tu bam dong,
   khac voi toast (tu bien mat sau 3s) vi can du thoi gian chep lai. */
.credential-notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
  padding: 16px 20px;
  border: 1px solid #ead7a4;
  border-left: 4px solid #c99a1f;
  border-radius: 12px;
  background: #fffaf0;
}
.credential-notice-body p { margin: 4px 0 0; font-size: 13px; }
.credential-notice-password { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.credential-notice code { padding: 2px 6px; border-radius: 6px; background: #fff; border: 1px solid #ead7a4; }
.credential-notice-hint { color: #8a650d; font-size: 11.5px; }

.toast { position: fixed; right: 24px; bottom: 24px; max-width: 360px; padding: 12px 16px; border-radius: 10px; color: #fff; background: #24313d; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; z-index: 100; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

.demo-notice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border: 1px solid #ead7a4;
  border-radius: 12px;
  color: #674f13;
  background: #fffaf0;
  font-size: 12px;
}
.demo-notice strong { flex: 0 0 auto; color: #8a650d; }
.insight-strip {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 20px;
  padding: 16px 20px;
  border: 1px solid #d9e7df;
  border-left: 4px solid var(--green);
  border-radius: 12px;
  background: linear-gradient(90deg, #f1faf5, #fff);
}
.insight-strip div { min-width: 270px; }
.insight-strip strong { display: block; margin-top: 3px; }
.insight-strip p { margin: 0; color: var(--muted); font-size: 12px; }
.chart-unit { flex: 0 0 auto; padding: 4px 8px; border-radius: 6px; color: var(--muted); background: var(--surface-soft); font-size: 10px; }
.trend-chart { width: 100%; min-height: 260px; overflow: visible; }
.trend-plot { fill: #fff; stroke: #dfe3e8; stroke-width: .8; }
.trend-chart .grid-line { stroke: #e9ecef; stroke-width: .7; }
.trend-chart .square-grid { stroke: #f0f2f4; stroke-width: .55; }
.trend-chart .month-grid { stroke: #e3e6e9; stroke-width: .75; }
.trend-line { fill: none; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.trend-line.quality { stroke: #536fba; }
.trend-line.complexity { stroke: #28aeb1; stroke-dasharray: 4 2.5; }
.trend-area { fill: rgba(29,113,184,.08); stroke: none; }
.trend-point { fill: #fff; stroke-width: 1.2; }
.trend-point.quality { stroke: #536fba; }
.trend-point.complexity { stroke: #28aeb1; }
.trend-value { fill: var(--text); font-size: 10px; font-weight: 700; }
.trend-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 3px; }
.trend-delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.7); font-size: 8px; }
.trend-delta i { width: 13px; height: 1px; background: #536fba; }
.trend-delta.complexity i { background: #28aeb1; }
.trend-delta.up { color: var(--green); }
.trend-delta.down { color: var(--red); }
.trend-delta.flat { color: var(--muted); }
.trend-legend { margin-top: 4px; }
.legend-line { width: 18px; height: 1px; display: inline-block; background: #536fba; }
.legend-line.complexity { background: repeating-linear-gradient(90deg, #28aeb1 0 5px, transparent 5px 8px); }
.chart-caption { margin-top: 10px; color: var(--muted); font-size: 10px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 9px; height: 9px; display: inline-block; border-radius: 2px; }
.swatch-green { background: var(--green); }
.swatch-blue { background: var(--blue); }
.swatch-orange { background: var(--orange); }
.swatch-red { background: var(--red); }
.swatch-gold { background: var(--gold); }
.legend-bubble { width: 12px; height: 12px; display: inline-block; border: 2px solid var(--red); border-radius: 50%; }
.donut-layout { min-height: 250px; display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 24px; }
.donut {
  width: 176px;
  height: 176px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--green) 0 var(--approved), var(--red) var(--approved) var(--reviewed), var(--gold) var(--reviewed) 100%);
}
.donut::before { content: ""; grid-area: 1 / 1; width: 116px; height: 116px; border-radius: 50%; background: var(--surface); }
.donut > div { grid-area: 1 / 1; position: relative; text-align: center; }
.donut strong, .donut span { display: block; }
.donut strong { font-size: 28px; }
.donut span { color: var(--muted); font-size: 10px; }
.donut-legend { display: grid; gap: 12px; }
.donut-legend > div { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.donut-legend strong { font-variant-numeric: tabular-nums; }
.compact-pie-layout { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; justify-content: center; gap: 14px; }
.compact-pie { width: 112px; height: 112px; display: grid; place-items: center; justify-self: center; border-radius: 50%; }
.review-pie { background: conic-gradient(#28b7b0 0 var(--p1), #ef7079 var(--p1) var(--p2), #f0c451 var(--p2) 100%); }
.quality-pie { background: conic-gradient(#28b7b0 0 var(--p1), #536fba var(--p1) var(--p2), #f0c451 var(--p2) var(--p3), #ef7079 var(--p3) 100%); }
.compact-pie::before { content: ""; grid-area: 1 / 1; width: 70px; height: 70px; border-radius: 50%; background: #fff; }
.compact-pie > div { grid-area: 1 / 1; position: relative; text-align: center; }
.compact-pie strong, .compact-pie span { display: block; }
.compact-pie strong { color: #40505d; font-size: 16px; font-weight: 600; }
.compact-pie span { color: var(--muted); font-size: 7px; }
.compact-pie-legend { min-width: 0; display: grid; gap: 4px; }
.compact-pie-legend > div { min-width: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 5px; font-size: 8px; }
.compact-pie-legend span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.compact-pie-legend strong { font-size: 9px; white-space: nowrap; }
.compact-pie-legend small { color: var(--muted); font-size: 7px; font-weight: 500; }
.review-progress-compact { display: grid; gap: 10px; }
.review-progress-track { height: 14px; display: flex; overflow: hidden; border-radius: 999px; background: #edf0f3; box-shadow: inset 0 1px 2px rgba(31,42,55,.08); }
.review-progress-track span { display: block; height: 100%; }
.review-progress-track .approved { background: var(--green); }
.review-progress-track .revision { background: var(--red); }
.review-progress-track .pending { background: var(--gold); }
.review-progress-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.review-progress-stats > div { min-width: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: center; gap: 3px 5px; padding: 6px 7px; border-radius: 8px; background: rgba(255,255,255,.7); }
.review-progress-stats span { overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.review-progress-stats strong { grid-column: 2; font-size: 13px; }
.review-progress-total { color: var(--green); font-size: 10px; }
.comparison-chart { display: grid; gap: 5px; }
.comparison-head, .comparison-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(180px, 1.4fr) 72px; gap: 14px; align-items: center; }
.comparison-head { padding: 0 10px 7px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.comparison-head span:nth-child(n+2) { text-align: center; }
.comparison-row { min-height: 58px; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; }
.comparison-row:hover { border-color: var(--line); background: var(--surface-soft); }
.comparison-label strong, .comparison-label span { display: block; }
.comparison-label strong { font-size: 12px; }
.comparison-label span { color: var(--muted); font-size: 9px; }
.comparison-score { display: grid; grid-template-columns: 1fr 34px; gap: 9px; align-items: center; }
.comparison-score strong { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.complexity-chip { min-width: 44px; justify-self: center; padding: 5px 8px; border-radius: 7px; color: #7b5b0e; background: #fff5d7; font-size: 11px; font-weight: 750; text-align: center; }
.comparison-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.comparison-controls select { min-height: 30px; max-width: 190px; padding: 4px 26px 4px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface); font-size: 9px; }
.comparison-limit-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; color: var(--muted); background: var(--surface-soft); font-size: 9px; }

.unit-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.unit-comparison-grid.is-single { grid-template-columns: 1fr; }
.unit-comparison-group {
  min-width: 0;
  padding: 14px;
  border: 1px solid #c6def1;
  border-radius: 15px;
  background: linear-gradient(155deg, rgba(234,244,255,.96), rgba(255,255,255,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 5px 16px rgba(6,59,115,.05);
}
.unit-comparison-group.regional { border-color: #bee4df; background: linear-gradient(155deg, rgba(231,249,246,.96), rgba(255,255,255,.88)); }
.unit-group-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(29,113,184,.14); }
.unit-group-header > div { min-width: 0; display: flex; align-items: center; gap: 8px; }
.unit-group-header h3 { margin: 0; color: var(--primary-dark); font-size: 13px; }
.unit-group-header > strong { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; color: var(--primary-dark); background: rgba(255,255,255,.72); font-size: 9px; }
.unit-group-stripe { width: 4px; height: 20px; flex: 0 0 auto; border-radius: 999px; background: linear-gradient(180deg, var(--primary), #06b6d4); }
.regional .unit-group-stripe { background: linear-gradient(180deg, var(--green), #27b69b); }
.unit-column-labels, .unit-compare-row { display: grid; grid-template-columns: minmax(92px, .95fr) minmax(72px, 1.15fr) 30px 48px; gap: 7px; align-items: center; }
.unit-column-labels { padding: 9px 8px 5px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.unit-column-labels span:nth-child(n+2) { text-align: center; }
.unit-compare-list { display: grid; gap: 4px; }
.unit-compare-row { min-height: 42px; padding: 6px 8px; border-radius: 9px; background: rgba(255,255,255,.66); }
.unit-compare-row:nth-child(even) { background: rgba(232,243,253,.65); }
.regional .unit-compare-row:nth-child(even) { background: rgba(225,246,241,.68); }
.unit-compare-label { min-width: 0; }
.unit-compare-label strong, .unit-compare-label span { display: block; overflow: hidden; }
.unit-compare-label strong { font-size: 10px; line-height: 1.25; }
.unit-compare-label span { color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.unit-compare-bar { min-width: 0; }
.unit-quality { font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.unit-complexity { padding: 4px 3px; border-radius: 6px; color: #76590d; background: rgba(255,239,191,.8); font-size: 8px; font-weight: 700; text-align: center; white-space: nowrap; }

.monthly-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, .75fr); gap: 20px; align-items: start; }
.monthly-table-panel { padding-right: 0; }
.monthly-table-panel .panel-header { padding-right: 20px; }
.monthly-detail { position: sticky; top: 18px; }
.is-selected-row { background: #fff6f7; }
.grade-badge, .grade-seal { display: inline-grid; place-items: center; font-weight: 800; }
.grade-badge { min-width: 32px; padding: 4px 8px; border-radius: 999px; font-size: 11px; }
.grade-seal { width: 46px; height: 46px; border-radius: 50%; font-size: 18px; }
.grade-a { color: var(--green); background: var(--green-soft); }
.grade-b { color: var(--blue); background: var(--blue-soft); }
.grade-c { color: var(--orange); background: var(--orange-soft); }
.grade-d { color: var(--red); background: var(--red-soft); }
.grade-pending { color: var(--muted); background: var(--surface-soft); }
.evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.evidence-grid > div { padding: 10px; border-radius: 9px; background: var(--surface-soft); text-align: center; }
.evidence-grid span, .evidence-grid strong { display: block; }
.evidence-grid span { color: var(--muted); font-size: 9px; }
.evidence-grid strong { margin-top: 2px; font-size: 18px; }
.progress-line { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: 14px; font-size: 11px; }
.progress-line .bar-track { grid-column: 1 / -1; }
.permission-note { margin-top: 16px; padding: 10px 12px; border-radius: 9px; color: var(--muted); background: var(--surface-soft); font-size: 11px; }
.compact-form { padding: 0; }

.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.admin-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.delegation-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.delegation-card strong, .delegation-card span { display: block; }
.delegation-card > div > span { color: var(--muted); font-size: 11px; }
.audit-list { display: grid; }
.audit-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 16px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.audit-row:last-child { border-bottom: 0; }
.audit-row p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.audit-row > span:last-child { color: var(--muted); text-align: right; }
.audit-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.registration-explainer { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #d9e7df; border-radius: 10px; color: var(--green); background: #f2faf6; }
.registration-explainer strong { flex: 0 0 auto; }
.registration-explainer span { color: var(--muted); font-size: 11px; }
.demo-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.demo-code button { padding: 5px 8px; border: 1px dashed #8cb9df; border-radius: 6px; color: var(--primary-dark); background: var(--primary-light); font-family: ui-monospace, Consolas, monospace; }
.code-generator { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; padding: 14px; border-radius: 11px; background: var(--surface-soft); }
.code-generator .filter-field { min-width: 150px; }
.code-table code, .pending-account-table code, td code { padding: 4px 7px; border-radius: 5px; color: var(--red-dark); background: var(--red-soft); font-family: ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 700; }
.compact-empty { padding: 22px 12px; }

/* Danh sach tick chon "don vi phu trach" cho Pho Vien truong tinh - thay
   the select multiple (phai giu Ctrl/Cmd, kho dung) bang checkbox de chon
   de va ro rang hon. */
#taskSupportSearch { width: 100%; margin: 4px 0 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; box-sizing: border-box; }
.unit-checklist { display: flex; flex-direction: column; gap: 4px; min-width: 150px; max-height: 170px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: inset 0 -10px 8px -8px rgba(15, 23, 42, .12); }
.unit-checklist label { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 11px; cursor: pointer; }
/* flex:0 0 auto khong du de chan keo gian: khi dat trong ".field" (vi du
   form uy quyen), quy tac ".field input{width:100%}" van ap dung vi no
   khong dung "flex", khien checkbox bi keo dai het hang thay vi 1 o
   vuong nho - phai ghi de rieng width/height/padding/border. */
.unit-checklist input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; padding: 0; border: 1px solid var(--line); accent-color: var(--primary); }
.unit-checklist-empty { display: inline-block; color: var(--muted); font-size: 11px; font-style: italic; }

/* O chon "nguoi phoi hop" trong Giao viec - phong to + chia nhom vai tro
   (Lanh dao duoi quyen / Can bo, KSV / Nguoi lao dong) co the mo rong/thu
   gon, kem khu "Da chon" dang the (chip) phia tren de khong phai do lai
   trong danh sach dai khi don vi dong nguoi. */
.support-picker { display: grid; gap: 6px; }
.support-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; padding: 6px 2px; }
.support-picker-chips-empty { color: var(--muted); font-size: 11px; font-style: italic; align-self: center; }
.support-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 11px; border-radius: 999px; color: var(--primary-dark); background: var(--primary-light); font-size: 12px; font-weight: 600; }
.support-chip-remove { display: grid; place-items: center; width: 18px; height: 18px; border: none; border-radius: 50%; color: var(--primary-dark); background: rgba(29,113,184,.16); font-size: 13px; line-height: 1; cursor: pointer; }
.support-chip-remove:hover { background: rgba(29,113,184,.28); }
.support-group { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.support-group:last-child { margin-bottom: 0; }
.support-group summary { padding: 9px 12px; cursor: pointer; font-weight: 700; font-size: 12.5px; color: var(--text); background: var(--surface-soft); list-style: revert; }
.unit-checklist-lg { min-width: 220px; max-height: 260px; gap: 6px; padding: 10px 12px; border: none; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
.unit-checklist-lg label { font-size: 13px; gap: 9px; }
.unit-checklist-lg input[type="checkbox"] { width: 18px; height: 18px; }

/* Nhom bang "Gan vai tro va don vi" theo tung don vi, gap/mo bang the
   <details> co san cua trinh duyet - khong can thu vien ngoai. */
.unit-group { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.unit-group summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; cursor: pointer; background: var(--surface-soft); list-style: none; }
.unit-group summary::-webkit-details-marker { display: none; }
.unit-group summary strong { font-size: 13px; }
.unit-group summary span { color: var(--muted); font-size: 11px; }
.unit-group[open] summary { border-bottom: 1px solid var(--line); }
.unit-group .table-wrap { margin: 0; }
.unit-group.is-unassigned { border-color: rgba(212,175,55,.5); }
.unit-group.is-unassigned summary { background: var(--gold-soft, #fff8e7); }
.unit-group.is-unassigned summary strong { color: #7a5b00; }

/* Khu "Da hoan thanh" o man Giao viec - tai su dung dung style unit-group,
   chi them padding rieng cho phan noi dung (o tim + danh sach) khi mo. */
.task-done-collapse-body { padding: 12px 14px; }

.copy-journal-block { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.copy-journal-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.copy-journal-panel[hidden] { display: none; }
.copy-journal-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.copy-journal-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; text-align: left; color: var(--text); background: #fff; cursor: pointer; }
.copy-journal-item:hover { border-color: var(--primary); background: var(--primary-light); }
.copy-journal-item span { color: var(--muted); font-size: 11px; }

.export-summary-notice { margin-bottom: 10px; }
.export-missing-list { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; }
.export-missing-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.export-missing-row span { color: var(--muted); }

.month-nav { display: flex; align-items: center; gap: 6px; }
.month-nav strong { min-width: 120px; text-align: center; font-size: 13px; }
.month-nav .icon-button { width: 30px; height: 30px; font-size: 18px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-weekday { padding: 4px 2px; color: var(--muted); text-align: center; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.calendar-day { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 92px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.calendar-day:hover { border-color: var(--primary); }
.calendar-day.is-other-month { opacity: .45; }
.calendar-day.is-today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.calendar-day.is-selected { background: var(--primary-light); border-color: var(--primary); }
.calendar-day-number { align-self: flex-end; color: var(--muted); font-size: 11px; font-weight: 700; }
.calendar-day-chip { padding: 2px 6px; border-radius: 5px; overflow: hidden; color: var(--primary-dark); background: var(--primary-light); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.calendar-day-chip.is-done { color: var(--muted); background: var(--surface-soft); text-decoration: line-through; }
.calendar-day-chip.is-overdue { color: var(--red); background: var(--red-soft); }
.calendar-day-more { color: var(--muted); font-size: 9px; }
.note-list { display: flex; flex-direction: column; gap: 10px; }
.note-card { padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 9px; background: #fff; }
.note-card.is-done { border-left-color: var(--green); opacity: .72; }
.note-card.is-overdue { border-left-color: var(--red); background: var(--red-soft); }
.note-card-check { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.note-card-check input { flex: 0 0 auto; accent-color: var(--primary); }
.note-card-check span { color: var(--text); font-weight: 700; font-size: 13px; }
.note-card.is-done .note-card-check span { color: var(--muted); text-decoration: line-through; }
.note-card p { margin: 6px 0 0; color: var(--muted); font-size: 12px; white-space: pre-wrap; }
.note-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

.field-warning { display: block; margin-top: 4px; color: #8a650d; font-size: 11px; }
.field-warning[hidden] { display: none; }
/* .field mac dinh "display:grid" manh hon thuoc tinh [hidden] cua trinh
   duyet (cung do dac ta) - can override rieng cho cac o dieu kien hien/an
   bang JS (Bat dau tu ngay, Gan voi viec duoc giao, Nop cho lanh dao -
   rieng o nay khi la Vien truong tinh) thi moi thuc su an. */
#journalRangeStartField[hidden], #journalTaskField[hidden], #journalSubmitToField[hidden] { display: none; }

/* Nhac nho tieu chi (vd do dai mat khau) - trung tinh, khac mau vang cua
   ".field-warning" (danh cho canh bao that su, khong phai chi dan truoc). */
.field-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.link-button:hover { color: var(--primary-dark, var(--primary)); }

.self-score-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); font-size: 12px; }

.sticky-board-panel { margin-top: 20px; }
.sticky-board { display: flex; flex-wrap: wrap; gap: 16px; }
.sticky-note { position: relative; min-width: 160px; min-height: 120px; max-width: 100%; padding: 26px 12px 10px; border-radius: 4px; background: #fff6b7; box-shadow: 0 2px 6px rgba(0,0,0,.14); resize: both; overflow: auto; }
.sticky-note-text { display: block; width: 100%; height: 100%; padding: 0; border: 0; resize: none; background: transparent; color: #4a4210; font-family: inherit; font-size: 13px; line-height: 1.5; }
.sticky-note-text:focus { outline: none; }
.sticky-note-text::placeholder { color: #9a9152; }
.sticky-note-delete { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border: 0; border-radius: 50%; color: #4a4210; background: rgba(0,0,0,.08); font-size: 13px; line-height: 1; cursor: pointer; }
.sticky-note-delete:hover { background: rgba(0,0,0,.16); }

@media (max-width: 1100px) {
  .login-layout { grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); gap: 30px; }
  .login-emblem-stage { width: clamp(230px, 31vw, 330px); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-summary-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-kpi-cluster, .dashboard-insight { grid-column: 1 / -1; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-bento > .panel { grid-column: auto; min-height: auto; }
  .bento-side-stack { grid-column: auto; grid-template-columns: 1fr; }
  .panel-wide { grid-column: auto; }
  .review-layout { grid-template-columns: 320px minmax(0, 1fr); }
  .monthly-layout { grid-template-columns: 1fr; }
  .monthly-detail { position: static; }
}

@media (max-width: 820px) {
  body.login-active { overflow-y: auto; }
  .login-screen { min-height: 100svh; overflow-y: auto; padding: 28px 18px 48px; }
  .login-layout { grid-template-columns: 1fr; gap: 10px; }
  .login-emblem-stage { width: 180px; }
  .login-brand-copy { margin-top: -20px; }
  .login-brand-copy > span { font-size: 9px; }
  .login-brand-copy h1 { margin: 6px 0; font-size: 26px; }
  .login-brand-copy p { display: none; }
  .login-card { width: min(520px, 100%); justify-self: center; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  /* ".brand-notch" la 1 phan tu fixed DOC LAP (khong con la con cua
     ".sidebar" trong HTML - tung thu qua cach long ben trong nhung bi
     chinh overflow:hidden cua sidebar cat mat chu khi mo tren mobile, vi
     transform bien sidebar thanh containing block kiem luon vung cat cho
     no). La phan tu doc lap thi luon "noi" o goc tren-trai bat ke sidebar
     dong/mo - phai an/hien thu cong dung luc bang selector ke ".sidebar.
     is-open ~ .brand-notch" (".brand-notch" nam SAU ".sidebar" trong HTML). */
  .brand-notch { visibility: hidden; }
  .sidebar.is-open ~ .brand-notch { visibility: visible; }
  .sidebar.is-open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .mobile-menu { display: inline-block; }
  .topbar { padding: 14px 18px; }
  .topbar.topbar-minimal { display: flex; align-items: center; min-height: auto; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: none; }
  .view-container { padding: 20px 18px 36px; }
  .review-layout { grid-template-columns: 1fr; }
  .review-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
  .insight-strip { align-items: flex-start; flex-direction: column; gap: 8px; }
  .insight-strip div { min-width: 0; }
}

@media (max-width: 620px) {
  /* Goi y truc quan "con noi dung cuon ngang" cho moi bang - truoc day
     .table-wrap chi co overflow-x:auto (that su cuon duoc) nhung khong co
     dau hieu gi, nguoi dung tuong bi cat mat cot chu khong biet co the
     vuot ngang. Dung box-shadow inset thay vi gradient nen de khong phu
     thuoc mau nen tung panel (nhieu panel dung nen gradient rieng). */
  .table-wrap { -webkit-overflow-scrolling: touch; box-shadow: inset -14px 0 10px -10px rgba(15, 23, 42, .18); }
  .login-screen { place-items: start center; }
  .login-emblem-stage { width: 145px; }
  .login-brand-copy h1 { font-size: 22px; }
  .login-card { padding: 24px 19px; border-radius: 19px; }
  .login-card-heading h2 { font-size: 23px; }
  .login-footer { position: relative; right: auto; bottom: auto; left: auto; align-self: end; flex-direction: column; gap: 2px; margin-top: 18px; text-align: center; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .page-heading { flex: 1; }
  .page-heading .eyebrow { display: none; }
  h1 { font-size: 18px; }
  .avatar-button { display: none; }
  .session-user { margin-left: auto; text-align: left; }
  .logout-button { flex: 0 0 auto; }
  .topbar-actions { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .notification-center { margin-left: auto; }
  .notification-panel { position: fixed; top: 122px; right: 16px; left: 16px; bottom: auto; width: auto; max-height: calc(100vh - 140px); }
  .notification-panel::before { display: none; }
  .toolbar .filter-field { width: 100%; flex: 0 0 100%; }
  .toolbar .filter-field select, .toolbar .filter-field input { width: 100%; min-width: 0; }
  .toolbar .spacer { display: none; }
  .toolbar > .button { width: 100%; }
  .metric-grid { grid-template-columns: 1fr; }
  /* Rieng hang so lieu ngan cua "Nhat ky cua toi" (3-4 the chi 1 con so) -
     xep 1 hang thay vi xep chong tung the day, do man hinh khong can. */
  .journal-stats-row { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
  .journal-stats-row .metric-card { padding: 10px 8px; }
  .journal-stats-row .metric-label { font-size: 10px; }
  .journal-stats-row .metric-value { font-size: 18px; }
  .journal-stats-row .metric-context { font-size: 9px; }
  .dashboard-summary-bento { grid-template-columns: 1fr; gap: 8px; }
  .dashboard-kpi-cluster { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-insight { grid-column: auto; }
  .bento-side-stack { grid-template-columns: 1fr; }
  .comparison-controls { width: 100%; justify-content: stretch; }
  .comparison-controls select { width: 100%; max-width: none; }
  .journal-header { align-items: start; }
  .journal-card { grid-template-columns: 1fr; }
  .journal-scores { justify-content: flex-start; }
  .journal-side { justify-items: start; }
  .form-grid, .rating-grid, .detail-grid, .org-branches { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .review-queue { grid-template-columns: 1fr; }
  .org-role-row { grid-template-columns: 1fr; gap: 4px; }
  .topbar-actions { min-width: 0; }
  .demo-notice { align-items: flex-start; flex-direction: column; gap: 4px; }
  .donut-layout { grid-template-columns: 1fr; justify-items: center; }
  .donut-legend { width: 100%; }
  .evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-row { grid-template-columns: 1fr; gap: 3px; }
  .audit-row > span:last-child { text-align: left; }
  .comparison-head { display: none; }
  .unit-comparison-grid { grid-template-columns: 1fr; }
  .comparison-row { grid-template-columns: 1fr 60px; gap: 8px; }
  .comparison-score { grid-column: 1 / -1; grid-row: 2; }
  .complexity-chip { grid-column: 2; grid-row: 1; }
  .register-button { width: 100%; }
  .registration-explainer { align-items: flex-start; flex-direction: column; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-wave { animation-duration: 6.5s !important; }
  .login-emblem-glass, .login-emblem-glass::after, .login-emblem-glass img { transition-duration: 1.4s; }
  .compact-metric,
  .compact-metric::before,
  .compact-metric::after,
  .dashboard-insight,
  .dashboard-insight::before,
  .dashboard-insight::after,
  .dashboard-bento .bento-tile,
  .dashboard-bento .bento-tile::before,
  .dashboard-bento .bento-tile::after,
  .dashboard-bento .panel-header::before { transition: none !important; }
  .compact-metric:hover,
  .dashboard-insight:hover,
  .dashboard-bento .bento-tile:hover { transform: none; }
  .compact-metric:hover::after,
  .dashboard-insight:hover::after,
  .dashboard-bento .bento-tile:hover::after { transform: translateX(-130%); }
  .dashboard-bento .bento-tile:hover .panel-header::before { transform: none; }
}

@media (hover: none) {
  .compact-metric:hover,
  .dashboard-insight:hover,
  .dashboard-bento .bento-tile:hover { transform: none; }
  .compact-metric:hover::after,
  .dashboard-insight:hover::after,
  .dashboard-bento .bento-tile:hover::after { transform: translateX(-130%); }
  .dashboard-bento .bento-tile:hover .panel-header::before { transform: none; }
}

/* ============ Tab "Chỉ tiêu công tác" (demo/chitieu.js) ============ */
.ct-toolbar { margin-bottom: 12px; }
.ct-unit-field select { min-width: 240px; }
.ct-unit-fixed { display: block; padding: 9px 0; font-size: 14px; }
.ct-tabs { flex-wrap: wrap; margin-bottom: 18px; }
.ct-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; color: #fff; background: var(--orange); font-size: 10px; }
.ct-lead { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.ct-muted { color: var(--muted); }
.ct-text-bad { color: var(--red); }
.ct-text-warn { color: var(--orange); }
.ct-text-ok { color: var(--green); }
.ct-panel { margin-bottom: 16px; }
.ct-panel h3 { margin: 0 0 12px; font-size: 16px; }
.ct-metrics { margin-bottom: 16px; }
.ct-filterbar { margin-bottom: 14px; }
.ct-search input { min-width: 220px; }
.ct-badge { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.ct-ok { color: var(--green); background: var(--green-soft); }
.ct-info { color: var(--blue); background: var(--blue-soft); }
.ct-warn { color: #8a5a0d; background: #fff4dc; }
.ct-bad { color: var(--red); background: var(--red-soft); }
.ct-muted.ct-badge, .ct-badge.ct-muted { color: var(--muted); background: #eef1f4; }
.ct-code { display: inline-block; padding: 1px 6px; border-radius: 5px; color: var(--primary-dark); background: var(--primary-light); font: 600 11px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.ct-progress { height: 7px; margin-bottom: 4px; border-radius: 999px; background: #e6eef6; overflow: hidden; min-width: 120px; }
.ct-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #34a372); }
.ct-table td small { color: var(--muted); }
.ct-table-compact th, .ct-table-compact td { padding: 8px; vertical-align: top; }
.ct-row-actions { white-space: nowrap; text-align: right; }
.ct-part-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ct-part-head h3 { margin: 0; }
.ct-items { display: grid; gap: 2px; }
.ct-parent { margin: 10px 0 2px; color: var(--text); font-size: 13px; font-weight: 700; }
.ct-item { border-radius: 10px; }
.ct-item.is-open { background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line); }
.ct-item-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 170px 170px 128px 64px; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 10px; color: var(--text); background: transparent; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ct-item-row:hover { background: var(--surface-soft); }
.ct-item.is-child .ct-name { padding-left: 12px; border-left: 2px solid var(--line); }
.ct-target, .ct-result { color: var(--muted); font-size: 12px; }
.ct-points { text-align: right; font-weight: 700; }
.ct-points small { color: var(--muted); font-weight: 400; }
.ct-detail { padding: 6px 14px 14px; font-size: 13px; }
.ct-guide { margin-bottom: 10px; padding: 10px 12px; border-left: 3px solid var(--gold); border-radius: 6px; background: #fffdf5; line-height: 1.5; }
.ct-detail-actions { display: flex; gap: 8px; margin-top: 10px; }
.ct-alert { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; font-size: 13px; line-height: 1.55; }
.ct-alert ul { margin: 6px 0 0; padding-left: 18px; }
.ct-alert-bad { color: var(--red-dark); background: var(--red-soft); border: 1px solid #efc6cc; }
.ct-alert-info { color: var(--text); background: var(--blue-soft); border: 1px solid #cddcf0; }
.ct-form { align-items: start; }
.ct-picker { position: relative; }
.ct-picker input { width: 100%; }
.ct-pick-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 340px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.ct-pick-list button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; color: var(--text); background: transparent; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ct-pick-list button:hover, .ct-pick-list button:focus { background: var(--primary-light); }
.ct-pick-list button small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.ct-pick-empty { padding: 10px; color: var(--muted); font-size: 13px; }
.ct-pick-hint { margin: 0; font-size: 12px; }
.ct-pick-info { display: grid; gap: 5px; padding: 10px 12px; border-radius: 10px; background: var(--surface-soft); font-size: 13px; }
.ct-pick-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); }
.ct-pick-info details summary { color: var(--primary); cursor: pointer; font-size: 12px; }
.ct-pick-info details p { margin: 6px 0 0; line-height: 1.5; }
.ct-steps { margin: 0 0 4px; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.ct-steps li { margin-bottom: 10px; }
.ct-file-btn { cursor: pointer; }
.ct-excel-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; }
.ct-excel-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 64px; padding: 12px 16px; text-align: left; white-space: normal; }
.ct-excel-btn strong { font-size: 14px; }
.ct-excel-btn small { font-size: 12px; font-weight: 400; opacity: .85; }
.ct-excel-note { margin: 0; }
@media (max-width: 760px) { .ct-excel-actions { grid-template-columns: 1fr; } }
.ct-preview { margin-top: 14px; padding: 14px; border: 1px dashed var(--primary); border-radius: 12px; background: #fbfdff; }
.ct-preview h4 { margin: 0 0 10px; }
.ct-preview-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ct-preview-table { max-height: 380px; overflow: auto; margin-bottom: 10px; }
.ct-row-bad td { background: #fff6f7; }
.ct-row-dup td { color: var(--muted); background: #f6f7f8; }
.ct-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ct-decl-list { display: grid; gap: 6px; }
.ct-decl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.ct-decl-row.is-dirty { border-color: var(--gold); background: #fffdf3; }
.ct-decl-row.ct-flash { animation: ctFlash 1.6s ease 1; }
@keyframes ctFlash { 0%, 60% { box-shadow: 0 0 0 3px rgba(212,175,55,.55); } 100% { box-shadow: none; } }
.ct-decl-name { font-size: 13px; line-height: 1.45; }
.ct-decl-name small { display: block; margin: 3px 0; color: var(--muted); font-size: 11px; }
.ct-decl-inputs { display: flex; flex-wrap: wrap; align-items: end; justify-content: flex-end; gap: 8px; }
.field.ct-mini > span { font-size: 11px; font-weight: 600; color: var(--muted); }
.field.ct-mini input, .field.ct-mini select { min-height: 34px; padding: 6px 8px; font-size: 13px; }
.field.ct-mini input[type="number"] { width: 92px; }
.field.ct-mini.ct-note input { width: 160px; }
.ct-pct { padding-bottom: 8px; font-weight: 700; color: var(--primary-dark); }
.ct-auto-base { max-width: 300px; padding: 6px 10px; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 12px; font-weight: 600; }
.ct-auto-base small { color: var(--muted); font-weight: 400; }
@media (max-width: 1100px) {
  .ct-item-row { grid-template-columns: 70px minmax(0, 1fr) 120px 110px; }
  .ct-item-row .ct-result { grid-column: 2 / 4; grid-row: 2; }
  .ct-item-row .ct-points { grid-row: 2; grid-column: 4; }
}
@media (max-width: 760px) {
  .ct-item-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .ct-item-row .ct-code { grid-column: 1; }
  .ct-item-row .ct-name { grid-column: 1 / -1; grid-row: 2; }
  .ct-item-row .ct-target { grid-column: 1; grid-row: 3; }
  .ct-item-row .ct-result { grid-column: 1; grid-row: 4; }
  .ct-item-row .ct-status { grid-column: 2; grid-row: 1; }
  .ct-item-row .ct-points { grid-column: 2; grid-row: 3 / 5; align-self: center; }
  .ct-decl-row { grid-template-columns: 1fr; }
  .ct-decl-inputs { justify-content: flex-start; }
  .ct-unit-field select, .ct-search input { min-width: 0; width: 100%; }
  .ct-unit-field, .ct-search { flex: 1 1 100%; }
}

.rank-cell { display: grid; gap: 4px; min-width: 170px; }
.rank-cell input { min-height: 32px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12px; }