:root {
  --navy: #1e2761;
  --navy-light: #2e75b6;
  --bg: #f5f6fb;
  --card-bg: #ffffff;
  --border: #e2e5f1;
  --text: #1f2937;
  --muted: #6b7280;
  --success: #1e7b34;
  --success-bg: #e8f5ea;
  --danger: #c00000;
  --danger-bg: #fce9e9;
  --warning: #b7791f;
  --warning-bg: #fdf3e0;
  --info: #2e75b6;
  --info-bg: #e8f0fb;
  --radius: 10px;

  /* Them 09/09/2026 (theme toi) — bien moi de gom cac cho truoc day hardcode
     mau truc tiep (#fff, #f7f8fc...) khong qua bien, khien theme toi khong
     phu duoc. Tu gio moi noi deu di qua bien, theme toi chi can override
     dung 1 cho duy nhat (khoi .dark ben duoi). */
  --hover-bg: #f5f6fb;
  --table-header-bg: #f7f8fc;
  --badge-gray-bg: #eef0f5;
  --badge-gray-text: #55607a;
  --shadow-color: rgba(0, 0, 0, 0.18);
  --modal-overlay: rgba(15, 18, 32, 0.5);
  --warning-border: #f0c674;
  --warning-strong: #8a5a00;
  --heading-color: var(--navy);
}

/* ==== THEME TOI (Dark mode) — them 09/09/2026 ====
   Ap dung bang class "dark" tren the <html> (xem toggleTheme() trong
   api.js) — chi can override dung cac bien mau, MOI CSS RULE khac ben
   duoi deu tu dong doi theo vi da dung var(--...) nhat quan. */
html.dark {
  --navy: #2a3a8f;
  --navy-light: #5b9bd5;
  --bg: #10131f;
  --card-bg: #1a1f30;
  --border: #2e3550;
  --text: #e4e7f0;
  --muted: #9099b5;
  --success: #4caf6a;
  --success-bg: #163322;
  --danger: #f0665e;
  --danger-bg: #3a1c1c;
  --warning: #e0b45a;
  --warning-bg: #3a2f14;
  --info: #6fa8dc;
  --info-bg: #16283d;

  --hover-bg: #232a42;
  --table-header-bg: #202638;
  --badge-gray-bg: #2a3148;
  --badge-gray-text: #b6bdd6;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --modal-overlay: rgba(0, 0, 0, 0.7);
  --warning-border: #6b551f;
  --warning-strong: #e0b45a;
  /* Rieng heading can mau SANG hon --navy thong thuong de du tuong phan
     tren nen toi — neu dung chung --navy (dung lam nen topbar/nut chinh,
     buoc phai giu tong dam) thi chu tieu de se bi kho doc nhu da phat
     hien. Chon rieng 1 tong xanh duong sang, khac voi --navy-light (dung
     cho link) de khong bi lan 2 loai chu. */
  --heading-color: #8aa2e8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

a { color: var(--navy-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout ---------- */
.topbar {
  background: var(--navy);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar .brand { font-weight: 700; font-size: 17px; letter-spacing: 0.3px; }
.topbar nav { display: flex; gap: 20px; align-items: center; }
.topbar nav a { color: #cfd8f5; font-size: 14px; }
.topbar nav a.active { color: #fff; font-weight: 600; }
.topbar .user-info { font-size: 13px; color: #a9b6e8; display: flex; align-items: center; gap: 12px; }
.topbar button.logout {
  background: transparent; border: 1px solid #4a5798; color: #cfd8f5;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.topbar button.logout:hover { background: #2a3572; color: #fff; }

/* Dropdown nhom nav (04/09/2026) — gom 13 muc thanh 2 nhom de bot roi */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: transparent; border: none; color: #cfd8f5; font-size: 14px;
  cursor: pointer; padding: 4px 2px; display: flex; align-items: center; gap: 4px;
  font-family: inherit;
}
.nav-dropdown-toggle.active { color: #fff; font-weight: 600; }
.nav-dropdown-toggle .caret { font-size: 10px; }
.nav-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--card-bg); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow-color);
  min-width: 200px; padding: 6px; z-index: 100;
}
.nav-dropdown-menu.open { display: block; }
.nav-dropdown-menu a {
  display: block; color: var(--text) !important; font-size: 14px;
  padding: 9px 12px; border-radius: 6px; white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--hover-bg); }
.nav-dropdown-menu a.active { background: var(--navy); color: #fff !important; font-weight: 600; }

/* Nut chuyen doi ngon ngu — dat trong topbar, canh nut Dang xuat */
.lang-switcher { display: flex; gap: 4px; }
.lang-switcher .lang-btn {
  background: transparent; border: 1px solid #4a5798; color: #a9b6e8;
  padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.lang-switcher .lang-btn:hover { background: #2a3572; color: #fff; }
.lang-switcher .lang-btn.active { background: #fff; color: var(--navy); border-color: #fff; }

/* Bo cuc trang tai lieu (Tro giup + Quy trinh su dung) — gom ve day
   10/09/2026. Truoc do CSS nay nam inline trong tung file HTML, khi them
   trang Quy trinh su dung thi bi LAP o 2 noi — sua 1 cho quen cho kia,
   de sinh loi lech mau giua 2 trang. Gio de chung 1 noi duy nhat. */
.help-layout { display: flex; gap: 24px; align-items: flex-start; }
.help-toc {
  position: sticky; top: 20px; min-width: 200px; max-width: 220px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
}
.help-toc a {
  display: block; padding: 7px 10px; border-radius: 6px; font-size: 13.5px;
  color: var(--text); text-decoration: none; margin-bottom: 2px;
}
.help-toc a:hover { background: var(--hover-bg); text-decoration: none; }
.help-toc a.active { background: var(--navy); color: #fff; font-weight: 600; }
.help-content { flex: 1; min-width: 0; }
.help-section { scroll-margin-top: 20px; margin-bottom: 28px; }
.help-section ol { padding-left: 22px; line-height: 1.8; }
.help-section ul { padding-left: 20px; line-height: 1.7; }
@media (max-width: 640px) {
  .help-layout { flex-direction: column; }
  .help-toc { position: static; max-width: none; width: 100%; }
}

/* Khoi "Luu y" trong trang Quy trinh su dung — them 10/09/2026 */
.sop-note {
  background: var(--warning-bg); border-left: 3px solid var(--warning-border);
  border-radius: 6px; padding: 12px 14px; margin-top: 14px; font-size: 13.5px;
}
.sop-note strong { color: var(--warning-strong); }

/* Badge so viec cho duyet tren menu — them 10/09/2026 */
.approval-badge {
  display: inline-block; background: var(--danger); color: #fff;
  border-radius: 20px; padding: 0 6px; margin-left: 5px;
  font-size: 11px; font-weight: 700; min-width: 17px; text-align: center;
}

/* Nut bat/tat theme toi — them 09/09/2026 */
.theme-toggle-btn {
  background: transparent; border: 1px solid #4a5798; color: #cfd8f5;
  padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.theme-toggle-btn:hover { background: #2a3572; color: #fff; }

.page { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }
.page h1 { font-size: 24px; margin: 0 0 4px; color: var(--heading-color); }
.page .subtitle { color: var(--muted); font-size: 14px; margin: 0 0 24px; }

/* ---------- Card ---------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.card h2 { font-size: 16px; margin: 0 0 16px; color: var(--heading-color); }
.card h3 { font-size: 14px; margin: 0 0 10px; color: var(--text); }

/* ---------- Form ---------- */
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.form-row .hint { font-size: 12px; color: var(--muted); margin-top: 3px; }
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="password"], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 14px; font-family: inherit; background: var(--card-bg); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy-light); }
textarea { resize: vertical; min-height: 60px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.line-item {
  border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 10px;
  background: var(--hover-bg); position: relative;
}
.line-item .remove-line {
  position: absolute; top: 8px; right: 8px; background: none; border: none;
  color: var(--danger); cursor: pointer; font-size: 13px;
}

/* ---------- Buttons ---------- */
button.btn {
  padding: 9px 18px; border-radius: 7px; border: none; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
button.btn-primary { background: var(--navy); color: #fff; }
button.btn-primary:hover { background: #151c4a; }
button.btn-secondary { background: var(--card-bg); color: var(--heading-color); border: 1px solid var(--heading-color); }
button.btn-secondary:hover { background: var(--hover-bg); }
button.btn-success { background: var(--success); color: #fff; }
button.btn-success:hover { background: #185f28; }
button.btn-danger { background: var(--danger); color: #fff; }
button.btn-danger:hover { background: #970000; }
button.btn-outline { background: none; border: 1px solid var(--border); color: var(--text); }
button.btn-outline:hover { background: var(--hover-bg); }
button.btn-sm { padding: 5px 12px; font-size: 12.5px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- Table ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; padding: 10px 12px; background: var(--table-header-bg); color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--hover-bg); }

/* ---------- Badge (status) ---------- */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.badge-gray { background: var(--badge-gray-bg); color: var(--badge-gray-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }

/* ---------- Misc ---------- */
.empty-state { text-align: center; padding: 40px 20px; color: var(--muted); }
.error-box {
  background: var(--danger-bg); color: var(--danger); padding: 10px 14px; border-radius: 7px;
  font-size: 13.5px; margin-bottom: 14px; display: none;
}
.error-box.show { display: block; }
.success-box {
  background: var(--success-bg); color: var(--success); padding: 10px 14px; border-radius: 7px;
  font-size: 13.5px; margin-bottom: 14px; display: none;
}
.success-box.show { display: block; }
.warning-text {
  color: var(--danger); font-size: 12.5px; margin-top: 4px;
}
.warning-text:empty { display: none; }
.unit-hint { color: var(--muted); font-weight: normal; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; }
.detail-field .label { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.detail-field .value { font-size: 14px; font-weight: 600; }

.image-thumb {
  display: inline-block; width: 90px; height: 90px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); margin: 0 8px 8px 0; position: relative;
}
.image-thumb img { width: 100%; height: 100%; object-fit: cover; }

.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tabs button {
  background: none; border: none; padding: 10px 16px; font-size: 14px; font-weight: 600;
  color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tabs button.active { color: var(--heading-color); border-bottom-color: var(--heading-color); }

.login-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, #2a3572 100%);
}
.login-box {
  background: var(--card-bg); border-radius: 14px; padding: 40px; width: 380px; box-shadow: 0 20px 50px var(--shadow-color);
}
.login-box h1 { font-size: 20px; color: var(--heading-color); margin: 0 0 4px; }
.login-box .subtitle { color: var(--muted); font-size: 13px; margin: 0 0 24px; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 10px; }
.dash-section-title { margin: 32px 0 4px; font-size: 18px; color: var(--heading-color); }
.dash-section-title:first-of-type { margin-top: 20px; }
.dash-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px;
  text-align: center; transition: box-shadow 0.15s;
}
.dash-card:hover { box-shadow: 0 6px 20px rgba(30,39,97,0.1); }
.dash-card .icon { font-size: 32px; margin-bottom: 10px; }
.dash-card h3 { margin: 0 0 6px; color: var(--heading-color); }
.dash-card p { color: var(--muted); font-size: 13px; margin: 0 0 16px; }

/* ==== Modal thong tin ca nhan (profile) — dung chung, hien qua topbar ==== */
.modal-overlay {
  position: fixed; inset: 0; background: var(--modal-overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.modal-box {
  background: var(--card-bg); border-radius: 12px; padding: 24px; max-width: 480px; width: 100%;
  max-height: 85vh; overflow-y: auto; box-shadow: 0 10px 40px var(--shadow-color);
}
.modal-box h2 { margin: 0; color: var(--heading-color); font-size: 20px; }
.modal-close-btn {
  background: none; border: none; font-size: 20px; cursor: pointer; color: var(--muted);
  line-height: 1; padding: 4px 8px;
}
.modal-close-btn:hover { color: var(--text); }
.profile-field { margin-bottom: 12px; }
.profile-field .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.profile-field .value { font-size: 15px; color: var(--text); font-weight: 600; }
.profile-duties-box {
  background: var(--table-header-bg); border-radius: 8px; padding: 14px; margin-top: 6px;
  font-size: 13.5px; line-height: 1.6; color: var(--text);
}
.user-name-btn {
  background: none; border: none; cursor: pointer; color: inherit; font: inherit;
  text-decoration: underline; text-decoration-style: dotted; padding: 0;
}
.user-name-btn:hover { color: #fff; }

/* ==== Responsive cho dien thoai — quan trong vi Kiem ke thuong dung dien thoai ==== */

/* Boc bang trong div nay (tu dong bang JS, xem api.js) — neu bang qua
   nhieu cot khong vua man hinh, CHI RIENG BANG do cuon ngang, khong keo
   tran ca trang. */
.table-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Trong khung cuon nay, KHONG ep chu xuong dong — de bang tu nhien rong
   ra bao nhieu tuy noi dung, roi cuon ngang RIENG trong khung bang (vuot
   khong lam tran ca trang). De doc hon nhieu so voi ep chu vo vun trong
   1 o qua chat hep. */
.table-scroll-wrapper table { width: auto; min-width: 100%; }
.table-scroll-wrapper td, .table-scroll-wrapper th { white-space: nowrap; }

/* Bang co cot chu dai (VD: ten vat tu o chi tiet Xuat kho) — 261001: cho
   cot chu XUONG DONG, cot so giu gon 1 dong canh phai, de thay du SL thuc
   xuat ma khong phai keo ngang. */
.table-scroll-wrapper table.table-wrap-text { width: 100%; }
.table-wrap-text td.cell-text, .table-wrap-text th.cell-text { white-space: normal; min-width: 140px; word-break: break-word; }
.table-wrap-text td.cell-note { white-space: normal; min-width: 90px; }
.table-wrap-text td.num, .table-wrap-text th.num { white-space: nowrap; text-align: right; width: 1%; }
.table-wrap-text .show-narrow { display: none; color: var(--muted); font-size: 12px; margin-top: 3px; }
@media (max-width: 640px) {
  .table-wrap-text td, .table-wrap-text th { padding: 8px 5px; }
  .table-wrap-text td.cell-text, .table-wrap-text th.cell-text { min-width: 0; }
  .table-wrap-text td.cell-note, .table-wrap-text th { white-space: normal; min-width: 0; }
  .table-wrap-text .hide-narrow { display: none; }
  .table-wrap-text .show-narrow { display: block; }
}

/* Hop thong tin theo theme (thay cac mau cung #eef2ff... o tung trang). */
.info-box {
  background: var(--info-bg); color: var(--text); border: 1px solid var(--border);
  border-left: 3px solid var(--info); border-radius: 8px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 16px;
}
.info-box a { color: var(--info); font-weight: 600; }

/* Lich su sua / rut / xoa phieu kho (261001) */
.doc-history { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; }
.doc-history li { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.doc-history-time { color: var(--muted); margin-right: 6px; }
.doc-history-detail { color: var(--muted); }
.doc-history-empty { color: var(--muted); font-size: 13px; }
.doc-progress { margin-bottom: 16px; line-height: 2.2; }

/* Phieu lanh lieu (261001): chon vat tu bang ma 4 so + anh phieu giay */
.short-code-results:empty { display: none; }
.short-code-results { margin: -4px 0 10px; }
.short-code-hint { font-size: 12.5px; color: var(--warning); margin-bottom: 6px; }
.short-code-option {
  display: block; width: 100%; text-align: left; background: var(--card-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font-size: 13px;
}
.short-code-option:hover { background: var(--hover-bg); border-color: var(--navy-light); }
.checkbox-row { display: flex; gap: 8px; align-items: center; margin: 4px 0 14px; font-size: 13.5px; cursor: pointer; }
.checkbox-row input { width: auto; margin: 0; }
.paper-images { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.paper-image { position: relative; width: 120px; height: 160px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--table-header-bg); }
.paper-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paper-image-del {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none;
  background: var(--danger); color: #fff; cursor: pointer; font-size: 12px;
}
.doc-progress-meta { color: var(--muted); font-size: 12px; font-weight: normal; }

@media (max-width: 640px) {
  .page { padding: 16px 12px 40px; }

  /* Topbar: cho phep wrap xuong dong thay vi ep ca 4-5 khoi tren 1 hang
     ngang co dinh (day la nguyen nhan chinh gay tran ngang moi trang). */
  .topbar { flex-wrap: wrap; gap: 8px 0; padding: 10px 14px; }
  .topbar nav { flex-wrap: wrap; gap: 4px 0; order: 3; width: 100%; justify-content: center; }
  .topbar nav a { margin: 0 8px; padding: 4px 0; }
  .topbar .user-info { flex-wrap: wrap; justify-content: center; width: 100%; order: 2; gap: 8px 12px; }

  /* Form nhieu cot -> ve 1 cot cho de bam tren man hinh hep */
  .form-grid, .form-grid.cols-3 { grid-template-columns: 1fr; }

  /* Trang dang nhap: bo chieu rong co dinh 380px, dung % de tu co gian */
  .login-box { width: 100%; max-width: 380px; padding: 24px; box-sizing: border-box; }
  .login-wrapper { padding: 16px; box-sizing: border-box; }

  /* Cac o luoi (Dashboard, chi tiet phieu) cung ve 1 cot cho de doc */
  .dash-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* ==== Banner canh bao ton kho thap (Dashboard) ==== */
.low-stock-banner {
  background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 10px;
  padding: 14px 18px; margin-bottom: 20px;
}
.low-stock-banner-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.low-stock-banner-title { font-weight: 700; color: var(--warning-strong); display: flex; align-items: center; gap: 8px; }
.low-stock-banner-actions { display: flex; gap: 8px; }
.low-stock-banner-actions button {
  background: none; border: 1px solid var(--warning-border); color: var(--warning-strong); border-radius: 6px;
  padding: 5px 12px; font-size: 13px; cursor: pointer;
}
.low-stock-banner-actions button:hover { background: var(--warning-border); }
.low-stock-detail { margin-top: 12px; }
.low-stock-detail table { background: var(--card-bg); border-radius: 8px; overflow: hidden; }

/* ==== Phan trang dung chung (renderPager trong api.js) — them 24/09/2026 ==== */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.pager-info { font-size: 13px; color: var(--muted); }

/* ==== Tro giup: quy tac nghiep vu "Vi sao toi bi chan?" — them 24/09/2026 ==== */
.help-rule { border-left: 3px solid var(--border); padding: 6px 0 6px 12px; margin: 10px 0; font-size: 13.5px; line-height: 1.55; }
.help-rule-line + .help-rule-line { margin-top: 3px; }

/* 261001-xuat-kho-fix: canh bao xuat thieu, dong thieu, o tick chu ky phieu giay */
.warning-box {
  display: none; background: var(--warning-bg); border-left: 3px solid var(--warning-border);
  color: var(--text); padding: 10px 14px; border-radius: 6px; margin: 10px 0; font-size: 13.5px;
}
.warning-box.show { display: block; }
.issue-preview-box li { margin: 3px 0; }
button.btn-warning { background: var(--warning-strong); color: var(--card-bg); }
button.btn-warning:hover { filter: brightness(0.92); }
td.qty-short { color: var(--warning-strong); font-weight: 600; }
.paper-sign-confirm { margin: 6px 0 4px; font-weight: 600; }