:root {
  --m-topbar-h: 52px;
  /* 261016-giao-dien-xuat-kho: bang mau UI V2 (Nguyen duyet ban ve 16/10). */
  --navy: #1d4ed8;
  --navy-light: #1d4ed8;
  --bg: #f4f5f7;
  --card-bg: #ffffff;
  --border: #e3e6eb;
  --text: #14171c;
  --muted: #5a6270;
  --success: #1b6b3a;
  --success-bg: #e3f4ea;
  --danger: #a61b1b;
  --danger-bg: #fce8e8;
  --warning: #8a4b00;
  --warning-bg: #fff1db;
  --info: #1e40af;
  --info-bg: #e8eefc;
  --radius: 12px;

  /* 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: #f4f5f7;
  --table-header-bg: #ffffff;
  --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: #14171c;
  --primary-hover: #1e40af;
  --success-hover: #145230;
  --danger-hover: #861515;
  --sidebar-w: 232px;
  --side-panel-w: 520px;
}

/* 261010-canh-bao-ton-mobile: chan Chrome/Safari tren dien thoai tu phong
   to chu ("font boosting") lam vo bo cuc bang / o hep. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ==== 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: #3b63e0;
  --navy-light: #8fb0ff;
  --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: #e4e7f0;
  --primary-hover: #2f54c9;
  --success-hover: #3d9459;
  --danger-hover: #d9534b;
}

* { 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; }

/* 261018-menu-3-gach: thanh tren gon + menu ☰ */
.m-topbar, .m-backdrop, .m-drawer { display: none; }
.desk-menu-btn { display: none; }
@media (min-width: 900px) {
  .desk-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 8px; background: none; border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 8px; cursor: pointer; font-size: 18px; }
}
@media (max-width: 899px) {
  #topbar { display: none !important; }
  .m-topbar { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 8px; background: var(--card-bg); color: var(--text); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 70; }
  .m-menu-btn { width: 44px; height: 44px; border: none; background: none; font-size: 22px; cursor: pointer; color: var(--text); position: relative; }
  .m-title { flex: 1; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; position: absolute; left: 36px; top: 10px; }
  .m-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 80; }
  .m-drawer { display: flex; flex-direction: column; position: fixed; top: var(--m-topbar-h); left: 0; bottom: 0; width: 85%; max-width: 320px; height: calc(100vh - var(--m-topbar-h)); height: calc(100dvh - var(--m-topbar-h)); background: var(--card-bg); color: var(--text); z-index: 90; transform: translateX(-100%); transition: transform .2s; box-shadow: 4px 0 16px rgba(0,0,0,.15); }
  body.m-drawer-open .m-backdrop { display: block; }
  body.m-drawer-open .m-drawer { transform: translateX(0); }
  .m-drawer-head { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); }
  .m-close { margin-left: auto; width: 36px; height: 36px; border: none; background: none; font-size: 18px; cursor: pointer; color: var(--text); }
  .m-drawer-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
  .m-link { display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--text); text-decoration: none; font-size: 14.5px; background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
  .m-link.active { background: var(--hover-bg); font-weight: 600; }
  .m-drawer-foot { border-top: 1px solid var(--border); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
  .m-langs { display: flex; gap: 4px; padding: 4px 10px; }
  .m-langs .lang-btn { min-height: 32px; padding: 4px 10px; font-size: 12.5px; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 6px; }
  .m-langs .lang-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
  /* 261018-sua-phone: an tieu de lon + nut khung phieu tren mobile */
  .page-head h1, .page-head .subtitle, .page-head p.subtitle { display: none; }
  #panelToggleBtn { display: none !important; }
  .page-head-actions .btn, .page-head-actions a.btn { width: 100%; }
  .tabs, .tab-row, .catalog-tabs, .pc-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs .tab, .tabs button, .tab-row .tab, .catalog-tabs button, .pc-tabs button { white-space: nowrap; flex-shrink: 0; }
  .packages-table-wrap, .table-box { overflow-x: auto; }
  .packages-table td:first-child, .packages-table .pkg-code { white-space: nowrap; }
}
.topbar {
  /* 261016: --navy doi sang xanh sang (nut chinh) -> topbar dien thoai giu nen toi. */
  background: #14171c;
  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;
  min-height: 24px; min-width: 24px; display: inline-flex; align-items: center; justify-content: center;
}
.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 6px; display: inline-flex; align-items: center; gap: 4px;
  min-height: 24px; min-width: 24px;
  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;
  min-height: 24px; min-width: 24px; display: inline-flex; align-items: center; justify-content: center;
}
.lang-switcher .lang-btn:hover { background: #2a3572; color: #fff; }
.lang-switcher .lang-btn.active { background: #fff; color: var(--navy); border-color: #fff; }
/* 261016-khung-dot1-them (5): kho.html nen sang -> nut ngon ngu khong active dung mau chu chinh (>= 4.5:1). */
body.kho .lang-switcher .lang-btn:not(.active) { color: var(--text); border-color: var(--muted); }

/* 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); }

/* 261021-chuong-duyet: chuong viec cho duyet o topbar (desktop + mobile). */
.approval-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; font-size: 17px; text-decoration: none; }
.approval-bell .approval-badge { position: absolute; top: -7px; right: -11px; margin-left: 0; }
.m-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 19px; text-decoration: none; }
.m-bell-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; position: absolute; right: 4px; top: 4px; }

/* 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;
  min-height: 24px; min-width: 24px; display: inline-flex; align-items: center; justify-content: center;
}
.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"], input[type="search"], input[data-pw-toggle], 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; }
/* 261014-hien-mat-khau: nut hien/an mat khau (js/password-toggle.js) */
.pw-toggle-wrap { position: relative; display: block; width: 100%; max-width: 100%; }
.pw-toggle-wrap input[data-pw-toggle] { padding-right: 46px; box-sizing: border-box; }
.pw-toggle-btn {
  position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
  width: 40px; height: 40px; min-width: 40px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer;
}
.pw-toggle-btn:hover { color: var(--text); }
.pw-toggle-btn:focus { outline: none; }
.pw-toggle-btn:focus-visible { outline: 2px solid var(--navy-light); outline-offset: -2px; color: var(--text); }
.pw-toggle-btn svg { display: block; pointer-events: none; }

.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: var(--primary-hover); }
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: var(--success-hover); }
button.btn-danger { background: var(--danger); color: #fff; }
button.btn-danger:hover { background: var(--danger-hover); }
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; }
.prefilled-hint { font-size: 11px; color: var(--muted, #525b6a); font-weight: normal; margin-left: 6px; font-style: italic; }

.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: 3px 6px;
  min-height: 24px; min-width: 24px; display: inline-flex; align-items: center; justify-content: center;
}
.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; }
.table-scroll-wrapper:focus { outline: 2px solid var(--navy-light); outline-offset: -2px; }
.table-scroll-wrapper:focus:not(:focus-visible) { outline: none; }
/* 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; }

  /* 261008-danh-muc-mobile: menu tha xuong cua nav. O man hep nav xuong dong
     va can giua, menu absolute (left:0, min-width 200px) bi vuot mep phai man
     hinh (VD "Kho van", "Tai lieu" o 360/400px) -> phai keo ngang ca trang.
     Ghim menu theo be ngang man hinh, cach 2 mep 12px; top:auto = giu vi tri
     doc ngay duoi nut bam; qua dai thi cuon doc ben trong menu. */
  .nav-dropdown-menu {
    position: fixed; top: auto; left: 12px; right: 12px; min-width: 0;
    margin-top: 8px; max-height: 70vh; overflow-y: auto;
  }

  /* 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; }
}

/* ==== Bang canh bao ton kho thap (giu renderer dung chung) ==== */
/* 261010-canh-bao-ton-mobile: bang ke o day du; bo cuc CHI bang CSS (khong do
   chu bang JS). Desktop: 1 dong / vat tu, 6 cot. Mobile (<= 640px): dong 1 =
   Ma | DVT | Ton | Han muc | Thieu, dong 2 = Ten (colspan 5, chu nho, nhat).
   Mau vien / nen tieu de rieng, dam hon --border de doc ro ca che do toi. */
.low-stock-detail {
  margin-top: 12px;
  --ls-grid: #b9bfd3;
  --ls-grid-strong: #7d86a6;
  --ls-head-bg: #e9ecf5;
}
html.dark .low-stock-detail { --ls-grid: #56608a; --ls-grid-strong: #8a94bf; --ls-head-bg: #2a3150; }
.low-stock-table {
  width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13.5px;
  background: var(--card-bg); border: 1px solid var(--ls-grid);
}
.low-stock-table th, .low-stock-table td {
  border: 1px solid var(--ls-grid); padding: 8px 10px; vertical-align: top;
}
.low-stock-table th {
  background: var(--ls-head-bg); color: var(--text); font-weight: 700;
  white-space: normal; line-height: 1.3;
}
.low-stock-table .ls-col-code { width: 15%; }
.low-stock-table .ls-col-unit { width: 7%; }
.low-stock-table .ls-col-num { width: 10%; }
.low-stock-table .ls-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.low-stock-table th.ls-num { white-space: normal; }
/* Ma: xuong dong sau "-" (<wbr>), van qua dai thi bat buoc ngat — khong tran o */
.low-stock-table .ls-code { font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.low-stock-table .ls-unit { text-align: center; white-space: nowrap; }
/* 261010-canh-bao-ton-header: dong tieu de canh giua MOI cot (ca tieu de 2
   dong), giua theo chieu doc. Selector co .ls-num de thang ".ls-num" (canh
   phai) — than bang giu nguyen canh le. */
.low-stock-table thead th, .low-stock-table thead th.ls-num { text-align: center; vertical-align: middle; }
.low-stock-table .ls-short { color: var(--danger); font-weight: 700; }
.low-stock-table .ls-name { white-space: normal; overflow-wrap: anywhere; }
.low-stock-table .ls-name-row { display: none; }
@media (max-width: 640px) {
  .low-stock-table { font-size: 13px; }
  .low-stock-table th, .low-stock-table td { padding: 6px 4px; }
  .low-stock-table .ls-col-code { width: 29%; }
  .low-stock-table .ls-col-unit { width: 14%; }
  .low-stock-table .ls-col-num { width: 19%; }
  /* so rat dai (VD 12.345.678,5) duoc ngat thay vi tran o */
  .low-stock-table td.ls-num { white-space: normal; overflow-wrap: anywhere; }
  .low-stock-table .ls-name-desk { display: none; }
  .low-stock-table .ls-name-row { display: table-row; }
  .low-stock-table .ls-name-row td {
    font-size: 12px; color: var(--muted); line-height: 1.4;
    border-bottom: 2px solid var(--ls-grid-strong);
  }
}
/* Man rat hep (<= 360px, VD 320px): bot padding, doi % cho cot so du cho
   "12.345,5" tren 1 dong; co chu giu nguyen 13px. */
@media (max-width: 360px) {
  .low-stock-table th, .low-stock-table td { padding: 6px 2px; }
  .low-stock-table .ls-col-code { width: 26%; }
  .low-stock-table .ls-col-unit { width: 14%; }
  .low-stock-table .ls-col-num { width: 20%; }
}

/* ==== 261013-mua-hang-mobile: bang 2 dong tren dien thoai (dung chung) ====
   Theo mau low-stock (low-stock.js + .ls-name-row): moi dong ve CA 2 dang —
   o .m-desk (man rong) + dong phu tr.m-sub-row (man hep). CSS an 1 trong 2.
   >= 641px: dong phu an, .m-desk hien -> giong het truoc. */
.m-2row .m-sub-row, .m-2row .m-only { display: none; }
@media (max-width: 640px) {
  .m-2row { font-size: 13px; }
  .m-2row th, .m-2row td { padding: 7px 6px; }
  /* api.js boc moi bang trong .table-scroll-wrapper (td nowrap) -> cho xuong dong */
  .m-2row td, .m-2row th { white-space: normal; }
  .m-2row .m-desk { display: none; }
  .m-2row .m-only { display: inline; }
  .m-2row tr.m-sub-row { display: table-row; }
  .m-2row tr.m-main td { border-bottom: 0; padding-bottom: 2px; }
  .m-2row tr.m-sub-row td {
    font-size: 12px; color: var(--muted); line-height: 1.4; padding-top: 0;
    white-space: normal; overflow-wrap: anywhere;
  }
  .m-2row .m-name { color: var(--text); }
  .m-2row .m-nowrap { white-space: nowrap; }
  .m-2row td { overflow-wrap: anywhere; }
}

/* 261013-mua-hang-mobile: tieu de chi tiet YC/PR — ma dai tu xuong dong */
.detail-title { min-width: 0; overflow-wrap: anywhere; }

/* 261013-mua-hang-mobile: dong tong PR — moi cap nhan + so khong tach, cac cap duoc xuong dong */
.pr-total-pair { display: inline-block; white-space: nowrap; margin-right: 14px; }

/* ==== 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; }
.stock-short { color: var(--warning-strong); font-weight: 600; }
.table-wrap-text td.num .stock-cell { white-space: normal; min-width: 96px; }
.paper-sign-confirm { margin: 6px 0 4px; font-weight: 600; }

/* ==== O chon co tim kiem (web/js/search-picker.js) — 261009-gioi-han-100 ==== */
.search-picker-host { position: relative; }
.search-picker-list {
  position: absolute; left: 0; right: 0; z-index: 50; margin-top: 2px;
  max-height: 280px; overflow-y: auto; background: var(--card-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px var(--shadow-color);
}
.search-picker-option {
  padding: 8px 10px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.search-picker-option:last-child { border-bottom: none; }
.search-picker-option:hover, .search-picker-option.active { background: var(--hover-bg); color: var(--navy-light); }
.search-picker-msg, .search-picker-more { padding: 8px 10px; font-size: 12.5px; color: var(--muted); }
.search-picker-more { border-top: 1px solid var(--border); background: var(--table-header-bg); }
@media (max-width: 640px) {
  .search-picker-list { max-height: 50vh; }
  .search-picker-option { padding: 11px 10px; font-size: 14px; }
}

/* ==== 261010-nut-kho: nut "Giao dien Kho" o thanh tren (nut lon o Trang
   chu da bo o 261021-160 — muc nay nay nam o dau menu trai, nhom Kho) ==== */
.topbar-kho-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: var(--success); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.topbar-kho-btn:hover { filter: brightness(1.1); }
@media (max-width: 640px) {
  .topbar-kho-label { display: none; }
  .topbar-kho-btn { padding: 6px 10px; font-size: 18px; }
}

/* =====================================================================
   UI V2 — 261016-giao-dien-xuat-kho: menu doc trai, khung phieu ben phai,
   nut / badge / bang kieu moi. Chi CSS + api.js / side-panel.js.
   ===================================================================== */

/* ---- Nut, badge, bang ---- */
button.btn, a.btn { min-height: 40px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
button.btn-sm, a.btn.btn-sm { min-height: 32px; }
a.btn { padding: 9px 18px; font-size: 14px; font-weight: 600; text-decoration: none; }
a.btn:hover { text-decoration: none; }
a.btn.btn-sm { padding: 5px 12px; font-size: 12.5px; }
a.btn-primary { background: var(--navy); color: #fff; }
a.btn-primary:hover { background: var(--primary-hover); }
a.btn-outline { border: 1px solid var(--border); color: var(--text); background: none; }
a.btn-outline:hover { background: var(--hover-bg); }
.badge { border-radius: 6px; border: 1px solid transparent; }
.badge-info { border-color: #c9d6f7; }
.badge-success { border-color: #bfe3cd; }
.badge-warning { border-color: #f5d9a8; }
.badge-danger { border-color: #f3c4c4; }
.badge-gray { border-color: var(--border); }
html.dark .badge-info, html.dark .badge-success, html.dark .badge-warning, html.dark .badge-danger, html.dark .badge-gray { border-color: rgba(255, 255, 255, 0.12); }
.table-v2 th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--card-bg); }
.table-v2 td { padding: 14px 12px; vertical-align: top; }
.table-v2 tr.row-active td { background: var(--info-bg); }
.table-v2 tr.row-active td:first-child { box-shadow: inset 3px 0 0 var(--navy); }
.table-box { overflow-x: auto; }
.mono, .doc-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mono { font-size: 12.5px; color: var(--muted); }
.doc-code-btn {
  background: none; border: none; padding: 0; min-height: 24px; cursor: pointer; text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: 13.5px; color: var(--navy-light);
}
.doc-code-btn:hover { text-decoration: underline; }
.doc-code-btn:focus-visible, .chip:focus-visible, .sb-link:focus-visible, .sb-group-toggle:focus-visible { outline: 2px solid var(--navy-light); outline-offset: 2px; }

/* ---- Dau trang + chip loc ---- */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .subtitle { margin-bottom: 0; }
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--card-bg); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.chip:hover { background: var(--hover-bg); }
.chip.active { background: var(--info-bg); color: var(--info); border-color: #c9d6f7; }
.chip-count { display: inline-block; min-width: 22px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--badge-gray-bg); color: var(--badge-gray-text); font-size: 12px; }
.chip.active .chip-count { background: var(--navy); color: #fff; }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filter-row input[type="search"] { flex: 1 1 240px; min-width: 0; }
.filter-row select { flex: 0 1 220px; min-width: 0; }

/* ---- Menu doc trai (chi >= 900px) ---- */
.app-sidebar, .sb-expand-btn, .sb-resizer { display: none; }
html.embed .sb-resizer { display: none !important; }
.sb-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-link .sb-label { flex: 1 1 auto; }
.sb-link .approval-badge { flex: none; }
@media (min-width: 900px) {
  html.has-sidebar #topbar { display: none; }
  html.has-sidebar body { padding-left: var(--sidebar-w); }
  html.has-sidebar.sidebar-collapsed body { padding-left: 0; }
  html.has-sidebar .page { max-width: 1280px; }
  html.has-sidebar.sidebar-collapsed .page { padding-top: 64px; }
  .app-sidebar {
    display: flex; flex-direction: column; position: fixed; left: 0; top: 0; z-index: 50;
    width: var(--sidebar-w); height: 100vh; overflow-y: auto;
    background: var(--card-bg); border-right: 1px solid var(--border);
  }
  html.sidebar-collapsed .app-sidebar { display: none; }
  /* 261016-khung-sua-nho (6): tay keo mep phai menu (dai 10px, co dinh, khong cuon theo menu). */
  html.has-sidebar .sb-resizer { display: block; position: fixed; top: 0; left: calc(var(--sidebar-w) - 5px); width: 10px; height: 100vh; z-index: 51; cursor: col-resize; touch-action: none; }
  html.has-sidebar .sb-resizer::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background 0.15s; }
  html.has-sidebar .sb-resizer:hover::after, html.has-sidebar .sb-resizer:focus-visible::after, html.sb-resizing .sb-resizer::after { background: #1D4ED8; }
  html.has-sidebar .sb-resizer:focus-visible { outline: none; }
  html.sidebar-collapsed .sb-resizer { display: none; }
  html.sb-resizing, html.sb-resizing * { cursor: col-resize !important; user-select: none; }
  html.has-sidebar.sidebar-collapsed .sb-expand-btn {
    display: inline-flex; align-items: center; justify-content: center; position: fixed; left: 12px; top: 12px; z-index: 50;
    width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
    font-size: 18px; cursor: pointer;
  }
}
.sb-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 12px 12px 16px; }
.sb-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 15px; }
.sb-brand:hover { text-decoration: none; }
.sb-logo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; }
.sb-collapse-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; font-size: 15px; }
.sb-nav { flex: 1; padding: 4px 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.sb-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 7px 10px;
  border-radius: 8px; color: var(--text); font-size: 14px;
}
.sb-link:hover { background: var(--hover-bg); text-decoration: none; }
.sb-link.active { background: #e8eefc; color: #1e40af; font-weight: 700; }
html.dark .sb-link.active { background: #1f2d55; color: #c9d6ff; }
.sb-group { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; }
.sb-group-toggle {
  display: flex; width: 100%; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px;
  background: none; border: none; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--text);
}
.sb-group-icon { font-size: 20px; width: 24px; text-align: center; flex-shrink: 0; }
.sb-group-toggle .sb-label { flex: 1; text-align: left; }
.sb-caret { transition: transform 0.15s; font-size: 14px; }
.sb-group:not(.open) .sb-caret { transform: rotate(-90deg); }
.sb-group:not(.open) .sb-group-links { display: none; }
.sb-group.open .sb-group-links { border-left: 2px solid var(--border); margin-left: 22px; }
.sb-link { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px 8px 14px; border-radius: 8px; color: var(--text); font-size: 15px; text-decoration: none; }
.sb-link.active { background: var(--info-bg); color: var(--navy); font-weight: 700; }
.sb-foot { position: sticky; bottom: 0; background: var(--card-bg); border-top: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sb-kho-btn { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 13.5px; }
.sb-kho-btn:hover { background: var(--hover-bg); text-decoration: none; }
.sb-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sb-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--text); font-size: 15px; cursor: pointer; text-decoration: none; }
.sb-icon-btn:hover { text-decoration: none; background: var(--hover-bg); }
.sb-tools .lang-switcher .lang-btn { color: var(--text); border-color: var(--border); background: none; min-height: 32px; }
.sb-tools .lang-switcher .lang-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.sb-user-btn { display: flex; flex-direction: column; align-items: flex-start; min-height: 40px; padding: 6px 10px; border-radius: 8px; border: none; background: var(--hover-bg); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.sb-user-name { font-weight: 700; font-size: 13.5px; }
.sb-user-role { font-size: 12px; color: var(--muted); }
.sb-logout { min-height: 36px; border-radius: 8px; border: 1px solid var(--border); background: none; color: var(--danger); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.sb-link .approval-badge { margin-left: auto; }

/* ---- Khung phieu ben phai (web/js/side-panel.js) ---- */
.side-panel { display: none; }
.side-panel.open {
  display: flex; flex-direction: column; position: fixed; top: 0; right: 0; z-index: 40;
  width: var(--side-panel-w); min-width: 320px; max-width: 100vw; height: 100vh;
  background: var(--card-bg); border-left: 1px solid var(--border); box-shadow: -6px 0 20px var(--shadow-color);
}
.side-panel-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.side-panel-head-main { flex: 1; min-width: 0; }
.side-panel-title { margin: 0; font-size: 17px; color: var(--heading-color); outline: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.side-panel-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.side-panel-head-actions { display: flex; gap: 6px; }
.side-panel-back { display: none; }
/* 261016-khung-dot1: button.btn (inline-flex) manh hon .side-panel-back -> tang do uu tien (loi thay o CHAY-TEST-ui). */
.side-panel-head button.side-panel-back { display: none; }
.side-panel-body { flex: 1; overflow-y: auto; padding: 14px 18px 0; }
/* 261016-khung-dot1-them (3): bang rong trong khung phieu -> cuon ngang, khong cat cot phai. */
.side-panel-body table { display: block; max-width: 100%; overflow-x: auto; }
.side-panel-body .table-box { max-width: 100%; overflow-x: auto; }
.side-panel-body .table-box > table { display: table; }
.side-panel-section h2#createTitle { display: none; }
.side-panel-actions {
  position: sticky; bottom: 0; z-index: 1; margin: 16px -18px 0; padding: 12px 18px;
  background: var(--card-bg); border-top: 1px solid var(--border);
}
.side-panel-actions:empty { display: none; }
.side-panel-actions .btn { min-height: 44px; }
.side-panel-actions button.btn-danger { background: var(--card-bg); color: var(--danger); border: 1px solid var(--danger); }
.side-panel-actions button.btn-danger:hover { background: var(--danger-bg); }
.side-panel .table-wrap-text { display: block; overflow-x: auto; }
.wait-box { margin: 12px 0; padding: 10px 12px; border-radius: 8px; background: var(--warning-bg); border: 1px solid #f5d9a8; color: var(--warning); }
.wait-box .doc-progress-meta { color: inherit; margin: 0; }
.step-bar { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
/* 261016-khung-tinh-chinh: thanh buoc 1 hang (nhan ngan), duong noi giua cac buoc. */
.step-bar li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.step-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--badge-gray-bg); color: var(--badge-gray-text); }
.step-done { color: var(--success); }
.step-done .step-dot { background: var(--success); color: #fff; }
.step-current { color: var(--info); font-weight: 700; }
.step-current .step-dot { background: var(--navy); color: #fff; }
@media (min-width: 900px) {
  html.side-panel-open .page-with-panel { margin-right: var(--side-panel-w); }
  html.panel-full .side-panel.open { width: auto; left: 0; }
  html.has-sidebar.panel-full .side-panel.open { left: var(--sidebar-w); }
  html.has-sidebar.sidebar-collapsed.panel-full .side-panel.open { left: 0; }
}
/* ==== 261016-khung-tinh-chinh ==== */
.side-panel-resizer { display: none; }
@media (min-width: 900px) {
  .side-panel.open { width: clamp(380px, var(--side-panel-w), 70vw); min-width: 380px; }
  html.side-panel-open .page-with-panel { margin-right: clamp(380px, var(--side-panel-w), 70vw); }
  html.panel-full .side-panel.open { width: auto; }
  .side-panel-resizer { display: block; position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 3; touch-action: none; }
  .side-panel-resizer::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background 0.15s; }
  .side-panel-resizer:hover::after, .side-panel-resizer:focus-visible::after, html.side-panel-resizing .side-panel-resizer::after { background: #1D4ED8; }
  .side-panel-resizer:focus-visible { outline: none; }
  html.panel-full .side-panel-resizer { display: none; }
  html.side-panel-resizing, html.side-panel-resizing * { cursor: col-resize !important; user-select: none; }
}
html.embed .side-panel-resizer { display: none !important; }
/* Thanh buoc */
.step-bar { flex-wrap: nowrap; gap: 0; align-items: flex-start; }
.step-bar li { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 4px; font-size: 12px; position: relative; text-align: center; color: var(--muted); }
.step-bar li + li::before { content: ""; position: absolute; top: 12px; left: calc(-50% + 14px); right: calc(50% + 14px); height: 2px; background: var(--border); }
.step-bar li.step-done + li::before { background: #94A3B8; }
.step-bar .step-dot { width: 22px; height: 22px; margin: 2px 0; font-size: 11px; flex: none; }
.step-bar .step-done { color: var(--muted); }
.step-bar .step-done .step-dot { background: var(--badge-gray-bg); color: var(--muted); }
.step-bar .step-todo .step-dot { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px #94A3B8; }
.step-bar .step-current { color: var(--heading-color); font-weight: 700; }
.step-bar .step-current .step-dot { width: 26px; height: 26px; margin: 0; background: #1D4ED8; color: #fff; }
.step-bar .step-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Canh bao ton (1 dong + Xem chi tiet) */
.stock-warn { margin: 10px 0; padding: 8px 12px; background: #FFF7E6; border-left: 4px solid #D97706; border-radius: 4px; color: #6B3A00; font-size: 13px; }
.stock-warn details { margin-top: 4px; }
.stock-warn summary { cursor: pointer; font-weight: 600; }
.stock-warn ul { margin: 4px 0 0 18px; padding: 0; }
html.dark .stock-warn { background: rgba(217, 119, 6, 0.16); color: #FCD9A8; }
/* Vat tu: the khi khung < 560px (container query), bang khi >= 560px */
.side-panel-body { container-type: inline-size; container-name: dpbody; }
.lines-table .lc-name { white-space: normal; word-break: break-word; }
.lines-table .show-cards { display: none; }
@container dpbody (max-width: 559px) {
  .side-panel-body table.lines-table, .side-panel-body .lines-table tbody { display: block; overflow: visible; }
  .lines-table thead { display: none; }
  .lines-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); }
  .lines-table td { display: block; padding: 0; border: 0; text-align: left; background: none; }
  .lines-table td.lc-name { grid-column: 1 / -1; font-weight: 600; }
  .lines-table td.lc-name .mono { font-weight: 400; }
  .lines-table td.lc-name .doc-progress-meta, .lines-table td.lc-name .show-narrow { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
  .lines-table td.lc-sub { grid-column: 1 / -1; order: 9; font-size: 12px; color: var(--muted); }
  .lines-table td.hide-narrow, .lines-table .hide-cards { display: none; }
  .lines-table .show-cards { display: block; }
  .lines-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
  .lines-table td.lc-short, .lines-table .lc-short-n { color: var(--danger); font-weight: 600; }
}
/* Danh sach: badge "Dang cho" ngan + dong dang mo */
.table-v2 .doc-progress-meta { font-size: 12px; color: var(--muted); }
.wait-badge { white-space: nowrap; }
.wait-days { font-size: 12px; color: var(--muted); white-space: nowrap; }
.wait-days.warn { color: var(--warning-strong); font-weight: 600; }
.table-v2 tr.row-active td { background: #DCE6FD; }
.table-v2 tr.row-active td:first-child { box-shadow: inset 4px 0 0 #1D4ED8; }
.table-v2 tr.row-active .doc-code-btn { font-weight: 700; }
html.dark .table-v2 tr.row-active td { background: rgba(59, 130, 246, 0.22); }
html.dark .table-v2 tr.row-active td:first-child { box-shadow: inset 4px 0 0 #60A5FA; }
html.dark .wait-days.warn { color: #FCD34D; }
/* ==== 261016-khung-sua-nho ==== */
.table-v2 .wait-inline, .table-v2 .wh-inline { display: none; }
@media (min-width: 900px) {
  html.side-panel-open .page-with-panel .table-v2 .col-wait,
  html.side-panel-open .page-with-panel .table-v2 .col-wh { display: none; }
  html.side-panel-open .page-with-panel .table-v2 .wait-inline { display: block; margin-top: 4px; }
  html.side-panel-open .page-with-panel .table-v2 .wh-inline { display: block; }
  html.side-panel-open .page-with-panel .table-v2 td.cell-strong-panel { font-weight: 600; }
  html.side-panel-open .page-with-panel .table-v2 td.cell-strong-panel .wh-inline { font-weight: 400; }
}
.side-panel .mono, .lines-table .mono { white-space: nowrap; display: inline-block; word-break: normal; }
/* ==== 261016-toan-trang: nut BAT/TAT toan trang ==== */
.panel-full-btn .pf-shrink { display: none; }
html.panel-full .panel-full-btn .pf-open { display: none; }
html.panel-full .panel-full-btn .pf-shrink { display: inline; }
@media (max-width: 899px) {
  #panelFullLink, #apvFullLink { display: none !important; }
}
/* 261016-viec-cho-toi-khung: che do nhung (?embed=1, trong iframe). */
html.embed #topbar, html.embed .app-sidebar, html.embed .sb-expand-btn, html.embed .asst-fab { display: none !important; }
html.embed body { padding-left: 0; }
html.embed-panel .page { display: none; }
html.embed .side-panel.open { left: 0; top: 0; width: 100vw; min-width: 0; height: 100vh; box-shadow: none; border-left: none; }
html.embed .side-panel-head button.side-panel-back,
html.embed .side-panel-head button.side-panel-hide,
html.embed #panelFullLink { display: none !important; }
html.embed:not(.embed-panel) #listCard { display: none; }
/* Viec can toi duyet: khung chua iframe */
.apv-panel .side-panel-body { padding: 0; overflow: hidden; display: flex; }
.apv-frame { flex: 1; width: 100%; height: 100%; border: 0; display: block; }
.apv-done { padding: 40px 18px; text-align: center; color: var(--muted); font-size: 15px; }
.approval-row.row-active { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--navy); }
/* 261016-khung-tinh-chinh: bo co dinh 360px o 900-1279px — rong theo --side-panel-w (keo duoc). */
@media (max-width: 899px) {
  .side-panel.open { width: 100vw; min-width: 0; left: 0; top: var(--m-topbar-h); height: calc(100vh - var(--m-topbar-h)); height: calc(100dvh - var(--m-topbar-h)); box-shadow: none; border-left: none; z-index: 60; }
  /* 261021-mobile-390 (dong 11): thanh nut dinh (.form-actions cao ~55px)
     khong duoc che truong nhap cuoi form — dem day than khung du chieu cao
     thanh nut + 20px thoang (truoc day chi 16px -> bi che ~39px). */
  .side-panel-body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .side-panel .form-actions, .side-panel-actions { position: sticky; bottom: 0; background: var(--card-bg); border-top: 1px solid var(--border); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 2; }
  .side-panel-back { display: inline-flex; }
  .side-panel-hide { display: none; }
  .side-panel-head button.side-panel-back { display: inline-flex; }
  .side-panel-head button.side-panel-hide { display: none; }
  /* nut "Hoi tro ly" khong che thanh nut day khi khung phu toan man hinh */
  html.side-panel-open .asst-fab { display: none; }
  html.side-panel-open body { overflow: hidden; }
  .page-head-actions { width: 100%; }
  .page-head-actions .btn { flex: 1 1 auto; }
}

/* ==== 261021-mobile-390 (hang doi v2 dong 11 — [#48]) ====
   O nhap dung font 14px: iOS Safari tu phong to (zoom) khi cham vao o co
   font < 16px -> bo cuc nhay, truong nhap bi day/che sau khi zoom. Tren
   man hep, ep o nhap len 16px de khong zoom (desktop giu nguyen 14px). */
@media (max-width: 640px) {
  input[type="text"], input[type="number"], input[type="date"], input[type="email"],
  input[type="password"], input[type="search"], input[data-pw-toggle], select, textarea {
    font-size: 16px;
  }
}