:root{
  --navy:#0A2540; --navy2:#0E3A66; --gold:#F5B800; --gold-d:#d9a200;
  --bg:#f4f6fa; --card:#fff; --line:#e6eaf0; --txt:#1c2733; --muted:#7a8699;
  --green:#1aa260; --red:#e0455e; --orange:#ef8b1f; --blue:#2f7de1;
  --shadow:0 2px 10px rgba(10,37,64,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Be Vietnam Pro","Segoe UI",Roboto,system-ui,sans-serif;background:var(--bg);color:var(--txt);font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{font-family:inherit;cursor:pointer;border:none}
a{text-decoration:none;color:inherit}

/* ===== LOGIN ===== */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy),var(--navy2))}
.login-card{background:#fff;border-radius:16px;padding:38px 40px;width:380px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.login-logo{text-align:center;margin-bottom:8px}
.brand-mark{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--navy)}
.brand-mark .dot{width:34px;height:34px;border-radius:9px;background:var(--navy);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:18px}
.slogan{text-align:center;color:var(--gold-d);font-weight:600;font-size:12px;letter-spacing:1px;margin-bottom:24px}
.login-card label{font-size:12px;color:var(--muted);font-weight:600}
.login-card select{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;margin:6px 0 16px;font-size:14px;background:#fff}
.btn-login{width:100%;padding:12px;background:var(--navy);color:#fff;border-radius:9px;font-weight:700;font-size:15px;transition:.2s}
.btn-login:hover{background:var(--navy2)}
.login-hint{font-size:11px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.5}

/* ===== SHELL ===== */
#app{display:none;min-height:100vh}
.layout{display:flex;min-height:100vh}
/* 🎨 22/07: SIDEBAR NỀN NAVY SOLID — chữ trắng, mục chọn = PILL TRẮNG chữ navy (kiểu AXIS-ZALO). Nổi bật, sang. */
.sidebar{width:248px;background:linear-gradient(180deg,#14406E 0%,#0A2540 100%);color:#E8EEF6;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;border-right:1px solid rgba(255,255,255,.06)}
.sb-brand{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:16px}
.sb-brand .dot{width:30px;height:30px;border-radius:8px;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900}
.sb-menu{flex:1;overflow-y:auto;padding:10px 0}
.sb-menu a{display:flex;align-items:center;gap:11px;padding:11px 18px;font-size:14.5px;font-weight:600;color:#DCE6F2;border-left:3px solid transparent}
.sb-menu a .ic{width:20px;text-align:center}
.sb-menu a:hover{background:rgba(255,255,255,.10);color:#fff}
.sb-menu a.active{background:#fff;color:var(--navy);border-left-color:transparent;border-radius:10px;margin:2px 10px;padding-left:14px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.sb-menu a.active:hover{background:#fff}
/* icon line đồng nhất — trắng mờ mặc định → trắng khi hover; NAVY khi active (trên pill trắng) */
.sb-menu .ic svg.nav-ic{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;color:rgba(255,255,255,.78)}
.sb-menu a:hover .ic svg.nav-ic,.sb-menu .sb-grphead:hover .ic svg.nav-ic{color:#fff}
.sb-menu a.active .ic svg.nav-ic{color:var(--navy)}
.sb-menu a.sb-child .ic svg.nav-ic{width:17px;height:17px}
.sb-menu .sb-section{padding:14px 18px 5px;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.sb-menu .sb-section:first-child{padding-top:6px}
.sb-menu::-webkit-scrollbar{width:7px}
.sb-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:4px}
.sb-menu::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
.sb-menu::-webkit-scrollbar-track{background:transparent}
.sb-foot{padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;color:rgba(255,255,255,.7)}
.sb-foot b{color:#fff}

.main{flex:1;min-width:0;margin-left:248px;display:flex;flex-direction:column}
.topbar{height:60px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:5}
.topbar h2{font-size:17px;color:var(--navy)}
.topbar .user{display:flex;align-items:center;gap:12px}
.topbar .who{text-align:right;line-height:1.3}
.topbar .who b{font-size:13px}
.topbar .who small{font-size:11px;color:var(--muted)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800}
.btn-out{font-size:12px;color:var(--red);background:#fdecef;padding:7px 12px;border-radius:8px;font-weight:600}
.content{padding:14px 12px;flex:1}

/* cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:22px}
.stat{background:var(--card);border-radius:13px;padding:18px;box-shadow:var(--shadow);border:1px solid var(--line)}
.stat .lbl{font-size:12px;color:var(--muted);font-weight:600}
.stat .val{font-size:23px;font-weight:800;color:var(--navy);margin-top:6px}
.stat .sub{font-size:11.5px;margin-top:4px}
.up{color:var(--green)} .down{color:var(--red)}

.panel{background:var(--card);border-radius:13px;box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:20px;overflow:hidden}
.panel-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.panel-h>h3{font-size:15px;color:var(--navy);margin-right:auto}
.panel-h>span{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
.panel-h .tag{font-size:11px;color:var(--muted)}
.panel-b{padding:6px 0;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
/* Tiêu đề cột DÍNH khi cuộn để luôn thấy + thanh kéo ngang luôn nằm trong tầm màn hình */
.panel-b thead th{position:sticky;top:0;z-index:3}
/* Thanh kéo NGANG + DỌC rõ ràng cho mọi bảng khi thông tin rộng (toàn phần mềm) */
.panel-b::-webkit-scrollbar,.matrix-wrap::-webkit-scrollbar{height:12px;width:12px}
.panel-b::-webkit-scrollbar-thumb,.matrix-wrap::-webkit-scrollbar-thumb{background:#b6c2d4;border-radius:8px;border:2px solid #fff}
.panel-b::-webkit-scrollbar-thumb:hover,.matrix-wrap::-webkit-scrollbar-thumb:hover{background:#8a9bb5}
.panel-b::-webkit-scrollbar-track,.matrix-wrap::-webkit-scrollbar-track{background:#eef2f7;border-radius:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:1100px){.grid2{grid-template-columns:1fr}}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 10px;font-size:13px;border-bottom:1px solid var(--line);vertical-align:middle}
/* Ô dài TỰ XUỐNG DÒNG + giới hạn 1 cột không phình quá rộng → bảng cân đối, full, không lãng phí (mọi module, trừ ma trận quyền) */
table:not(.matrix) td,table:not(.matrix) th{overflow-wrap:break-word;max-width:240px}
/* Header KHÔNG bẻ giữa từ (tránh tiêu đề cột vỡ dọc từng ký tự khi bảng nhiều cột) */
table:not(.matrix) th{word-break:keep-all}
/* Bảng nhiều cột (Vận chuyển/Bảo hành…) cho cuộn ngang thay vì ép cột co dúm */
.panel-b{overflow-x:auto}
table.wide{min-width:1080px}
th{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;background:#fafbfd}
tbody tr:hover{background:#fafcff}
td.num,th.num{text-align:right}
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
.b-green{background:#e3f6ec;color:var(--green)} .b-red{background:#fdecef;color:var(--red)}
.b-orange{background:#fdf0e1;color:var(--orange)} .b-blue{background:#e7f0fd;color:var(--blue)}
.b-gray{background:#eef1f6;color:var(--muted)}

.bar{height:8px;background:#eef1f6;border-radius:6px;overflow:hidden;min-width:90px}
.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold),var(--gold-d))}
.dept-pill{font-size:11px;padding:3px 9px;border-radius:6px;background:#eef3fb;color:var(--navy2);font-weight:600}

/* permission matrix */
.matrix td,.matrix th{text-align:center;font-size:12px}
.matrix th{font-size:18px;padding:8px 5px;cursor:default}
.matrix td:first-child,.matrix th:first-child{text-align:left;font-weight:600;font-size:12.5px}
.ok{color:var(--green);font-weight:800} .no{color:#cfd6e0}
/* tooltip rê chuột hiện tên tác vụ ngay lập tức */
.matrix td[data-tip],.matrix th[data-tip]{position:relative}
.matrix td[data-tip]:hover{background:#eaf1f8}
.matrix td[data-tip]:hover::after,.matrix th[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;left:50%;top:100%;transform:translateX(-50%);
  margin-top:6px;background:#0A2540;color:#fff;padding:6px 11px;border-radius:7px;
  font-size:12.5px;font-weight:700;white-space:nowrap;z-index:60;
  box-shadow:0 6px 18px rgba(10,37,64,.32);pointer-events:none}
.matrix td[data-tip]:hover::before,.matrix th[data-tip]:hover::before{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:#0A2540;z-index:60;pointer-events:none}
/* DÍNH cột "Bộ quyền" bên trái + DÍNH hàng icon trên cùng khi cuộn (tích không lệch) */
.matrix{border-collapse:separate;border-spacing:0}
.matrix th,.matrix td{background:#fff;border-bottom:1px solid var(--line);border-right:1px solid #eef1f6}
.matrix thead th{position:sticky;top:0;z-index:3;background:#f3f6fb}
.matrix th:first-child,.matrix td:first-child{position:sticky;left:0;z-index:2;min-width:150px;box-shadow:2px 0 0 var(--line)}
.matrix thead th:first-child{z-index:5;background:#eaf1f8}
.matrix tbody td:first-child{font-weight:700;color:var(--navy)}
.matrix tbody tr:hover td{background:#eef4ff}
.matrix tbody tr:hover td:first-child{background:#dbe8ff}

/* AI chat */
.chat{display:flex;flex-direction:column;height:calc(100vh - 250px);min-height:420px}
.chat-body{flex:1;overflow-y:auto;padding:18px;background:#f7f9fc}
.msg{max-width:74%;padding:11px 14px;border-radius:13px;margin-bottom:12px;font-size:13.5px;line-height:1.5}
.msg.ai{background:#fff;border:1px solid var(--line);border-bottom-left-radius:3px}
.msg.me{background:var(--navy);color:#fff;margin-left:auto;border-bottom-right-radius:3px}
.chat-in{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);background:#fff}
.chat-in input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.chat-in button{background:var(--gold);color:var(--navy);font-weight:800;padding:0 20px;border-radius:10px}
.ai-note{font-size:11.5px;color:var(--muted);padding:10px 14px;background:#fff8e6;border-top:1px solid var(--line)}
.locked{padding:60px;text-align:center;color:var(--muted)}
.locked .big{font-size:40px;margin-bottom:10px}

/* login tabs + register + account mgmt */
.tabs{display:flex;gap:6px;margin-bottom:16px;background:#eef1f6;border-radius:10px;padding:4px}
.tab{flex:1;padding:9px;border-radius:8px;background:transparent;font-weight:700;color:var(--muted);font-size:13px}
.tab.active{background:#fff;color:var(--navy);box-shadow:var(--shadow)}
.login-card input{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;margin:6px 0 14px;font-size:14px}
.login-msg{margin-top:12px;font-size:12.5px;padding:11px;border-radius:8px;display:none;line-height:1.5}
.login-msg.show{display:block}
.login-msg.err{background:#fdecef;color:var(--red)}
.login-msg.warn{background:#fff8e6;color:var(--gold-d)}
.login-msg.ok{background:#e3f6ec;color:var(--green)}
.quick{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.quick small{color:var(--muted);font-size:11px}
.quick select{width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;margin:6px 0}
.quick button{width:100%;padding:9px;background:#eef1f6;color:var(--navy);border-radius:8px;font-weight:700}
/* ===== HỆ THỐNG NÚT đồng bộ – chuẩn chuyên gia ===== */
.btn-sm,.btn-add,.btn-save,.btn-cancel,.btn-do,.dept-add button,.quick button,.subtab{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;line-height:1.05;border:1px solid transparent;cursor:pointer;white-space:nowrap;vertical-align:middle;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,filter .12s ease}
.btn-sm:hover{transform:translateY(-1px)}
.btn-sm:active,.btn-add:active,.btn-save:active,.btn-do:active{transform:translateY(1px)}
.btn-sm{font-size:11.5px;padding:6px 11px;border-radius:8px;font-weight:700;margin-right:5px;margin-bottom:3px}
.btn-approve{background:#e3f6ec;color:var(--green);border-color:#bfe8cf}
.btn-reject{background:#fdecef;color:var(--red);border-color:#f6cdd6}
.btn-edit{background:#e7f0fd;color:var(--blue);border-color:#cadefa}
.btn-lock{background:#fdf0e1;color:var(--orange);border-color:#f6dcb8}
.btn-approve:hover{background:#d2f0df}.btn-reject:hover{background:#fbdbe2}.btn-edit:hover{background:#d7e7fc}.btn-lock:hover{background:#fbe6cd}
.row-select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:12px}

/* modal + quản lý phòng ban */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(10,37,64,.55);z-index:50;align-items:center;justify-content:center}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:14px;padding:24px 26px;width:min(620px,95vw);max-height:92vh;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.35)}
/* Hộp thoại SỬA CHỨNG TỪ có bảng sản phẩm → rộng hẳn cho dễ thao tác */
#docEditModal>.modal{width:min(860px,97vw)}
#docEditModal #deItemsTable{min-width:640px}
#docEditModal #deItemsBody select[id^="de-ma-"]{min-width:180px;max-width:280px}
/* Ô nhập trong hộp thoại sửa to & thoáng hơn cho dễ bấm */
.modal input:not([type=checkbox]):not([type=radio]),.modal select,.modal textarea{font-size:14px}
.modal #deItemsBody input,.modal #deItemsBody select{padding:7px 8px}
.modal h3{color:var(--navy);margin-bottom:6px}
.modal label{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-top:10px}
.modal input,.modal select{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;margin-top:4px;font-size:14px}
.modal-act{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.btn-cancel{background:#eef1f6;color:var(--muted);font-weight:700;padding:10px 18px;border-radius:9px}
.btn-cancel:hover{background:#e2e7ef}
.btn-save{background:var(--navy);color:#fff;font-weight:700;padding:10px 20px;border-radius:9px;box-shadow:0 2px 8px rgba(10,37,64,.2)}
.btn-save:hover{background:var(--navy2);box-shadow:0 4px 14px rgba(10,37,64,.28)}
.btn-add{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:var(--navy);font-weight:800;padding:8px 15px;border-radius:9px;font-size:12.5px;box-shadow:0 2px 7px rgba(212,160,23,.32)}
.btn-add:hover{box-shadow:0 5px 14px rgba(212,160,23,.45);filter:brightness(1.04)}
.dept-row{display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap;padding:11px 18px;border-bottom:1px solid var(--line)}
.dept-row>span:first-child{min-width:200px}
.dept-add{display:flex;gap:8px;padding:13px 18px}
.dept-add input{flex:1;padding:9px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.dept-add button{background:var(--navy);color:#fff;padding:9px 16px;border-radius:8px;font-weight:700;white-space:nowrap}
.dept-add button:hover{background:var(--navy2)}
.quick button:hover{background:#e2e7ef}

/* kho: sub-tabs nghiệp vụ + form nhập/xuất */
.subtabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.subtab{padding:9px 16px;border-radius:9px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:13px;color:var(--muted)}
.subtab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
/* 📐 15/08/2026 · CĂN CHO Ô NHẬP THẲNG HÀNG — lệnh ông chủ 14/08 mục 7:
 *    "Phần nhập liệu căn chỉnh cho thẳng hàng".
 * Đo ra ĐÚNG HAI nguyên nhân, chữa cả hai:
 *   ① Nhãn dài ngắn khác nhau (13 → 57 ký tự) nên chỗ xuống 1 dòng, chỗ xuống 2 dòng
 *      ⇒ ô nhập bắt đầu ở độ cao khác nhau. Chữa: DÀNH SẴN chỗ cho 2 dòng nhãn
 *      (`min-height`) và ép nhãn dính đáy (`flex-end`) — nhãn 1 dòng hay 2 dòng thì
 *      ô nhập vẫn bắt đầu cùng một mức.
 *   ② `align-items:end` + hai ô có dòng gợi ý dưới input (noAddrHint · noPhoneHint)
 *      ⇒ ô nào có gợi ý thì bị ĐẨY LÊN cao hơn ô bên cạnh. Chữa: đổi sang `start`,
 *      gợi ý rơi xuống dưới, không đội ô nhập lên nữa.
 * 🔒 Chỉ đụng cách BÀY, không đụng dữ liệu/chức năng. Áp cho cả 7 form dùng lớp này
 *    (Nhập/Xuất/Chuyển kho · tạo chứng từ · tạo mã kích hoạt) để đâu cũng như đâu. */
.form-inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;padding:18px;align-items:start}
.form-inline>div{display:flex;flex-direction:column}
.form-inline label{font-size:13px;color:var(--muted);font-weight:600;display:flex;align-items:flex-end;min-height:36px;margin-bottom:5px;line-height:1.35}
.form-inline>div>div[id$="Hint"]{margin-top:3px}
/* ô chiếm trọn hàng (nhãn luôn 1 dòng) thì khỏi dành chỗ 2 dòng cho phí chỗ */
.form-inline>div[style*="1/-1"]>label{min-height:0}
.form-inline input,.form-inline select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.form-inline .act{grid-column:1/-1}
.btn-do{background:var(--navy);color:#fff;font-weight:700;padding:11px 24px;border-radius:9px;font-size:14px;box-shadow:0 2px 8px rgba(10,37,64,.2)}
.btn-do:hover{background:var(--navy2);box-shadow:0 5px 16px rgba(10,37,64,.3)}
.att{cursor:pointer;text-align:center;min-width:26px;padding:7px 4px}
.att:hover{background:#eef6ff}

/* Menu nhóm cha-con */
.sb-menu .sb-grphead{display:flex;align-items:center;gap:11px;padding:11px 18px;font-size:14.5px;font-weight:600;color:#DCE6F2;border-left:3px solid transparent;cursor:pointer}
.sb-menu .sb-grphead:hover{background:rgba(255,255,255,.10);color:#fff}
.sb-menu .sb-grphead .ic{width:20px;text-align:center}
.sb-menu .sb-grphead .chev{margin-left:auto;font-size:10px;transition:transform .15s;color:rgba(255,255,255,.5)}
.sb-menu .sb-folder{cursor:default}
.sb-menu a.sb-parent{font-weight:600}
.sb-menu a.sb-child{padding-left:44px;font-size:14px;font-weight:600;color:rgba(255,255,255,.75)}
.sb-menu a.sb-child.active{color:var(--navy);padding-left:14px;font-weight:800}
.sb-menu a.sb-child .ic{font-size:13px}

/* ===== RESPONSIVE: dien thoai / iPad / may tinh ===== */
#hamb{display:none}
#sbBackdrop{display:none;position:fixed;inset:0;background:rgba(10,37,64,.45);z-index:40}
#sbBackdrop.show{display:block}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;z-index:60;box-shadow:6px 0 24px rgba(0,0,0,.25);width:252px}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  #hamb{display:inline-flex;align-items:center;justify-content:center;width:40px;height:38px;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:20px;cursor:pointer;margin-right:8px;flex:none}
  .topbar{padding:0 12px;gap:6px}
  .topbar h2{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
  .user{gap:5px}
  .user .who{display:none}
  .btn-out{padding:7px 9px;font-size:12px}
  .content{padding:14px 12px}
  .modal{width:94vw;padding:18px 16px}
  .login-card{width:92vw;padding:26px 20px}
  th,td{padding:8px 10px;font-size:12px}
  .panel-b{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .panel-h{flex-wrap:wrap;gap:6px}
}
@media(max-width:520px){
  .topbar h2{max-width:46vw}
  .content{padding:10px 8px}
  th,td{padding:7px 7px;font-size:11.5px}
  .avatar{display:none}
}

/* In phiếu lương ra PDF */
@media print{ body.printing-payslip *{visibility:hidden} body.printing-payslip #payslipModal, body.printing-payslip #payslipModal *{visibility:visible} body.printing-payslip #payslipModal{display:flex !important;position:absolute;inset:0;background:#fff;padding:0} body.printing-payslip .modal-act{display:none !important} }
@media print{ body.printing-debtinv *{visibility:hidden} body.printing-debtinv #debtInvModal, body.printing-debtinv #debtInvModal *{visibility:visible} body.printing-debtinv #debtInvModal{display:flex !important;position:absolute;inset:0;background:#fff;padding:0} body.printing-debtinv .modal-act{display:none !important} }

/* ====== MỤC C: BỐ CỤC LINH ĐỘNG — thu gọn/mở rộng + dòng dài tự xuống dòng + kéo xem hết ====== */
/* 1) Bấm tiêu đề panel để THU GỌN / MỞ RỘNG (mũi tên chỉ thị) */
.panel-h{cursor:pointer;transition:background .15s ease}
.panel-h:hover{background:#f5f8ff}
.panel-h::after{content:'▾';margin-left:6px;color:#9fb0c4;font-size:12px;transition:transform .18s ease;flex:0 0 auto}
.panel.collapsed>*:not(.panel-h){display:none !important}
.panel.collapsed .panel-h{border-bottom:none}
.panel.collapsed .panel-h::after{transform:rotate(-90deg)}
/* không cho phần tử bấm-được trong tiêu đề (nút/select/ô nhập) bị coi là chỗ thu gọn */
.panel-h button,.panel-h a,.panel-h select,.panel-h input,.panel-h label{cursor:auto}
/* 2) Dòng dài TỰ XUỐNG DÒNG thay vì phá khung */
.panel-h>h3{overflow-wrap:anywhere}
.msg,.dept-pill,.badge,.tag{overflow-wrap:anywhere;word-break:break-word}
.wrap{white-space:normal !important;overflow-wrap:anywhere;word-break:break-word}
td.wrap,th.wrap{max-width:320px}
/* 3) MỤC E: THANH CUỘN LUÔN HIỆN RÕ ở MỌI vùng cuộn (ngang + dọc) — không ẩn kiểu overlay */
*{scrollbar-width:auto;scrollbar-color:#9aabc0 #eef2f7}            /* Firefox: luôn hiện */
::-webkit-scrollbar{width:13px;height:13px}                       /* Chrome/Edge: bề rộng cố định → luôn thấy */
::-webkit-scrollbar-thumb{background:#9aabc0;border-radius:9px;border:3px solid #eef2f7}
::-webkit-scrollbar-thumb:hover{background:#7d92ab}
::-webkit-scrollbar-track{background:#eef2f7;border-radius:9px}
::-webkit-scrollbar-corner{background:#eef2f7}
/* Bảng rộng trong panel luôn có chỗ kéo ngang (panel bo góc nhưng không cắt mất thanh cuộn) */
.matrix-wrap,.panel-b{scrollbar-width:auto}
/* Bảng DÒNG HÀNG trong form Tạo/Sửa chứng từ — căn chỉnh chuẩn, ô tên SP không kéo dãn vô hạn */
.doc-lines{width:auto;min-width:820px;border-collapse:collapse;margin-top:4px}
.doc-lines th,.doc-lines td{padding:12px 14px;vertical-align:middle;white-space:nowrap;font-size:14.5px}
.doc-lines th{background:#fafbfd;font-size:12px}
.doc-lines td:nth-child(2){white-space:normal}
.doc-lines select,.doc-lines input{font-size:15px;padding:9px 10px}
.doc-lines select[id^="ol-ma-"]{max-width:360px}
.doc-lines input[id^="ol-sl-"]{width:74px;text-align:right}
.doc-lines input[id^="ol-gia-"]{width:130px;text-align:right}

/* ================================================================
   ✨ NÂNG CẤP GIAO DIỆN CHUYÊN NGHIỆP TOÀN CRM (z217, 03/07/2026)
   Kẻ khung chuẩn chỉnh · dãn cách đủ · phông chuẩn · nút & ô nhập tinh tế.
   Loại trừ: mẫu IN (CSS riêng), .matrix (ma trận quyền), .doc-lines (dòng chứng từ).
   ================================================================ */

/* 1) Ô NHẬP — viền rõ, bo đều, CÓ HIỆU ỨNG FOCUS (trước đây thiếu) */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea{
  font-family:inherit; color:var(--txt);
  border:1.5px solid #d8e0ea; border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,
select:hover, textarea:hover{ border-color:#c2ccda; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
select:focus, textarea:focus{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(47,125,225,.15);
}
input::placeholder, textarea::placeholder{ color:#9aa7b8; }

/* 2) NÚT BẤM — dãn cách chuẩn, bóng tinh tế, chữ đậm, focus rõ ràng */
.btn-sm,.btn-do,.btn-save,.btn-add,.btn-cancel,.btn-login,.dept-add button,.chat-in button{
  font-weight:700; letter-spacing:.2px;
}
.btn-sm{ padding:7px 13px; border-radius:9px; }
.btn-sm:hover{ box-shadow:0 3px 9px rgba(10,37,64,.10); }
.btn-do,.btn-save{ padding:12px 24px; border-radius:11px; letter-spacing:.3px; }
.btn-do{ background:linear-gradient(135deg,#123a63,#0A2540); box-shadow:0 4px 12px rgba(10,37,64,.22); }
.btn-do:hover{ background:linear-gradient(135deg,#17456f,#0d2f52); box-shadow:0 7px 18px rgba(10,37,64,.30); }
button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* 3) THẺ & KHUNG — viền + bóng nhất quán, tiêu đề rõ, nội dung thoáng */
.panel{ border:1px solid #e4e9f1; box-shadow:0 3px 15px rgba(16,42,80,.055); border-radius:14px; }
.panel-h>h3{ font-size:15.5px; font-weight:800; letter-spacing:.2px; }
.stat{ border-radius:14px; box-shadow:0 3px 15px rgba(16,42,80,.055); }
.stat .val{ font-size:24px; }
.content{ padding:18px 16px; }

/* 4) BẢNG — dãn cách đủ, kẻ khung chuẩn, header rõ, sọc hàng chẵn (trừ ma trận & dòng chứng từ) */
table:not(.matrix):not(.doc-lines) th{
  background:#f1f5fb; color:#42526b; padding:11px 12px;
  border-bottom:2px solid #e3e9f2;
}
table:not(.matrix):not(.doc-lines) td{ padding:11px 12px; }
table:not(.matrix):not(.doc-lines) tbody tr:nth-child(even){ background:#fbfcfe; }
table:not(.matrix):not(.doc-lines) tbody tr:hover{ background:#f2f7ff; }

/* 5) BADGE / PILL mềm mại, dễ đọc hơn */
.badge{ padding:4px 11px; font-size:11px; letter-spacing:.2px; }

/* 6) TAB / SUBTAB — trạng thái chọn rõ, focus gọn */
.subtab{ transition:background .15s,color .15s,border-color .15s; }
.subtab:hover{ border-color:#c9d4e2; color:var(--navy); }

/* ============================================================================
   ✨ NÂNG CẤP MÀU SẮC TOÀN APP (15/07) — nút & tab SÁNG · NỔI BẬT · DỄ NHÌN
   Giữ thương hiệu Navy #0A2540 + Vàng #F5B800. Chỉ đổi màu/độ nổi — KHÔNG đổi
   kích thước/padding nên không vỡ layout ở bất kỳ trang nào.
   ============================================================================ */

/* --- 1) TAB CON: trước đây chữ xám mờ trên nền trắng → rất khó thấy --- */
.subtab{
  background:linear-gradient(180deg,#ffffff,#f2f6fc);
  color:var(--navy);                       /* chữ NAVY đậm thay vì xám mờ */
  font-weight:800;
  border:1.5px solid #d3deee;
  box-shadow:0 1px 3px rgba(10,37,64,.06);
}
.subtab:hover{
  background:linear-gradient(180deg,#fffdf5,#fff6dd);
  border-color:var(--gold);                /* hover → viền VÀNG thương hiệu */
  color:var(--navy);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(245,184,0,.28);
}
.subtab.active{
  background:linear-gradient(135deg,#17456f,#0A2540);
  color:#fff;
  border-color:var(--navy);
  box-shadow:0 4px 14px rgba(10,37,64,.32), inset 0 -3px 0 var(--gold);  /* gạch VÀNG dưới → biết ngay đang ở tab nào */
  transform:none;
}
.subtab.active:hover{ filter:brightness(1.08); box-shadow:0 6px 18px rgba(10,37,64,.4), inset 0 -3px 0 var(--gold); }

/* --- 2) NÚT HÀNH ĐỘNG NHỎ: đậm & rõ hơn, có bóng theo màu --- */
.btn-approve{ background:linear-gradient(180deg,#e9fbf1,#d5f4e3); color:#0b7a45; border-color:#8fd9b4; box-shadow:0 1px 3px rgba(26,162,96,.18); }
.btn-approve:hover{ background:linear-gradient(180deg,#d5f4e3,#bcebd1); border-color:#4cc088; box-shadow:0 4px 11px rgba(26,162,96,.32); transform:translateY(-1px); }
.btn-reject{ background:linear-gradient(180deg,#fff0f3,#fbdde3); color:#c31f3c; border-color:#f4aebc; box-shadow:0 1px 3px rgba(224,69,94,.18); }
.btn-reject:hover{ background:linear-gradient(180deg,#fbdde3,#f8c8d2); border-color:#ea6480; box-shadow:0 4px 11px rgba(224,69,94,.32); transform:translateY(-1px); }
.btn-edit{ background:linear-gradient(180deg,#eaf3ff,#d6e8fd); color:#1257b5; border-color:#a3c9f7; box-shadow:0 1px 3px rgba(47,125,225,.18); }
.btn-edit:hover{ background:linear-gradient(180deg,#d6e8fd,#bfdaf9); border-color:#5a9af0; box-shadow:0 4px 11px rgba(47,125,225,.32); transform:translateY(-1px); }
.btn-lock{ background:linear-gradient(180deg,#fff6e9,#fde7c9); color:#b96208; border-color:#f4c586; box-shadow:0 1px 3px rgba(239,139,31,.18); }
.btn-lock:hover{ background:linear-gradient(180deg,#fde7c9,#fbd9ac); border-color:#ef8b1f; box-shadow:0 4px 11px rgba(239,139,31,.32); transform:translateY(-1px); }

/* --- 3) NÚT CHÍNH: vàng thương hiệu nổi hơn --- */
.btn-add{ box-shadow:0 3px 10px rgba(245,184,0,.42); border:1.5px solid #e0a900; }
.btn-add:hover{ box-shadow:0 7px 18px rgba(245,184,0,.55); transform:translateY(-1px); }
.btn-do:hover,.btn-save:hover{ transform:translateY(-1px); }
.btn-cancel{ border:1.5px solid #dbe2ec; font-weight:700; }
.btn-cancel:hover{ border-color:#c3ccda; }

/* --- 4) NHÃN TRẠNG THÁI: rõ ràng, có viền --- */
.badge{ font-weight:800; border:1px solid transparent; }
.b-green{ background:#dcf7e8; color:#0b7a45; border-color:#9fe0bf; }
.b-red{ background:#fde4e9; color:#c31f3c; border-color:#f6b6c3; }
.b-orange{ background:#fdeed7; color:#b96208; border-color:#f6cf9a; }
.b-blue{ background:#e0edfd; color:#1257b5; border-color:#aecdf8; }
.b-gray{ background:#eceff5; color:#5b6879; border-color:#d7dde7; }
.dept-pill{ background:#e6eefb; color:#123a63; border:1px solid #c6d9f4; font-weight:700; }

/* --- 5) Chữ phụ ở đầu bảng: bớt mờ cho dễ đọc --- */
.panel-h .tag{ color:#5b6879; font-weight:600; }

/* --- 6) Thẻ số liệu: thêm vạch VÀNG cho bắt mắt --- */
.stat{ border-top:3px solid var(--gold); }
.stat:hover{ box-shadow:0 6px 22px rgba(16,42,80,.12); }

/* 📨 18/09/2026 · đã gỡ khối .ib-* (Hộp thư đa kênh) — xem _scripts/go_hopthu_0918.js */

/* ============================================================================
   🎨 27/09/2026 · MODULE BÁN HÀNG — ĐỢT 3 BỐ CỤC
   Thẻ số liệu · cột thao tác gọn (2–3 nút + menu ⋯) · bộ lọc trạng thái/NV · form chia khối ·
   tổng tiền thành thẻ · thanh Lưu dính đáy · 2 màu nút theo bảng màu thương hiệu.
   Chỉ THÊM lớp `.sale-*` + token; KHÔNG định dạng lại các khối cũ phía trên.
   ============================================================================ */
:root{ --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:18px; --r-sm:8px; --r-md:10px; --r-lg:12px; --fs-xs:12px; --fs-sm:13px; --ink-2:#5b6879; }
.sale-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2);padding:var(--sp-3) 16px 4px}
.sale-kpi{background:#f8fafd;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px;min-width:0}
.sale-kpi .l{font-size:var(--fs-xs);color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sale-kpi .v{font-size:18px;font-weight:800;color:var(--navy);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sale-kpi.hot{background:#fffbeb;border-color:#fde68a}
.sale-kpi.hot .v{color:#b96208}
.sale-filter{padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-xs);background:#fff;max-width:200px;color:var(--txt)}
.sale-acts{display:flex;flex-wrap:nowrap;gap:4px;align-items:center}
.sale-acts .btn-sm{margin:0}
/* ô Thao tác: bỏ trần rộng 240px của luật chung + không cho nhãn/nút co lại rồi bẻ dọc từng chữ (đo ảnh 27/09: "H Đ -1 0 3") */
table:not(.matrix) td.sale-td{max-width:none;white-space:nowrap}
.sale-acts>*{flex:none}
.sale-acts .badge{white-space:nowrap;word-break:normal;overflow-wrap:normal}
/* tiêu đề khối trong lưới form: .form-inline>div ép cột dọc + canh giữa ⇒ ghi đè lại thành hàng ngang, canh trái */
.form-inline>div.sale-sec{flex-direction:row;align-items:center;justify-content:flex-start}
.sale-more-btn{background:#fff;border:1px solid #d3deee;color:var(--navy);font-weight:900;padding:6px 10px;line-height:1}
.sale-more-btn:hover{border-color:var(--navy);background:#f5f8ff}
.sale-menu{position:fixed;z-index:9999;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 12px 30px rgba(10,37,64,.2);padding:6px;min-width:190px;display:flex;flex-direction:column;gap:3px}
.sale-menu .btn-sm{margin:0;width:100%;justify-content:flex-start}
.btn-navy{background:linear-gradient(135deg,#17456f,#0A2540);color:#fff;border-color:#0A2540;box-shadow:0 1px 3px rgba(10,37,64,.18)}
.btn-navy:hover{filter:brightness(1.08);box-shadow:0 4px 11px rgba(10,37,64,.3);transform:translateY(-1px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:var(--navy);border-color:#e0a900;box-shadow:0 1px 3px rgba(245,184,0,.3)}
.btn-gold:hover{filter:brightness(1.04);box-shadow:0 4px 11px rgba(245,184,0,.45);transform:translateY(-1px)}
.sale-empty{text-align:center;padding:34px 16px !important;color:var(--ink-2);font-size:13.5px}
.sale-empty b{color:var(--navy)}
.sale-empty .btn-sm{margin-left:6px}
.sale-hint{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.35}
.sale-sec{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:8px 0 -2px;padding-top:12px;border-top:1px dashed #dbe3ee;font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--navy)}
.form-inline>.sale-sec:first-child{border-top:0;padding-top:0;margin-top:0}
.sale-sec .n{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sale-pay{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:flex-start;margin-top:6px}
.sale-pay>.opts{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px}
.sale-totals{margin-left:auto;min-width:300px;background:#f8fafd;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 14px}
.sale-totals>div{display:flex;justify-content:space-between;gap:16px;padding:3px 0;font-size:13.5px}
.sale-totals>div.tt{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;font-size:16px;font-weight:800;color:var(--navy)}
.sale-actbar{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(4px);border-top:1px solid var(--line);margin:14px -18px -18px;padding:12px 18px;display:flex;justify-content:flex-end;gap:10px;align-items:center;flex-wrap:wrap;z-index:4}
@media(max-width:700px){
  .sale-kpis{grid-template-columns:repeat(2,1fr);padding:10px 10px 2px}
  .sale-totals{min-width:0;width:100%;margin-left:0}
  .sale-actbar{margin:14px -12px -12px;padding:10px 12px}
  .sale-filter{max-width:none;flex:1;min-width:120px}
}
/* ↔ 01/10/2026 · BẢNG LƯƠNG — kẻ lưới cột/hàng + tay nắm kéo mép cột. CHỈ table.sal-grid (#salTable), không đụng bảng khác. */
/* separate (KHÔNG collapse): với collapse, Chrome để đường kẻ ĐỨNG YÊN khi cột đông cứng trượt ⇒ hở khe 1px, chữ cột đang cuộn lọt qua (đã thấy trong ảnh phóng to) */
table.sal-grid{border-collapse:separate;border-spacing:0}
table.sal-grid th,table.sal-grid td{border:0;border-right:1px solid #d6dee9;border-bottom:1px solid #d6dee9;max-width:none;box-sizing:border-box}
table.sal-grid tr>*:first-child{border-left:1px solid #d6dee9}
table.sal-grid thead th{position:sticky;top:0;background:#eef2f7;border-bottom:2px solid #b8c4d6;vertical-align:bottom;white-space:normal}
table.sal-grid tbody tr:nth-child(even) td{background:#f6f9fd}
table.sal-grid tbody tr:nth-child(even) td._stkc{background:#f6f9fd}
table.sal-grid tbody tr:hover td,table.sal-grid tbody tr:hover td._stkc{background:#e8f1ff}
table.sal-grid tfoot td{border-top:2px solid #0A2540}
table.sal-grid td.num{overflow-wrap:anywhere}
.sal-rz{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;z-index:9;touch-action:none}   /* nằm TRỌN trong ô — thò ra ngoài thì ô tiêu đề dính kế bên đè lên, bấm không trúng */
.sal-rz::after{content:'';position:absolute;top:22%;bottom:22%;right:2px;width:2px;border-radius:2px;background:#b8c4d6}
.sal-rz:hover::after,.sal-rz.dang::after{background:#2563eb;top:0;bottom:0}
body.sal-keo,body.sal-keo *{cursor:col-resize !important;user-select:none !important}