/* Giao diện kiểu Microsoft Office */
:root{--blue:#185abd;--blue-d:#103f91;--blue-l:#e8f0fb;--ribbon:#f3f3f3;--line:#d4d4d4;--grid:#e1e1e1;--text:#252423;--green:#107c41;--red:#c42b1c;--amber:#c19c00}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Segoe UI","Segoe UI Web",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;color:var(--text);background:#faf9f8}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
/* Thanh tiêu đề */
.titlebar{background:var(--blue);color:#fff;display:flex;align-items:center;gap:12px;padding:0 12px;height:44px}
.titlebar .app{font-weight:600;font-size:15px;white-space:nowrap}
.titlebar .app span{opacity:.85;font-weight:400}
.titlebar form.search{flex:1;max-width:460px;margin:0 auto}
.titlebar form.search input{width:100%;border:0;border-radius:4px;padding:6px 10px;font:inherit;background:#e9eef7}
.titlebar .user{white-space:nowrap;font-size:13px}.titlebar .user a{color:#fff;margin-left:8px}
/* Ribbon */
.ribbon{background:var(--ribbon);border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tabs{display:flex;gap:2px;padding:0 8px;overflow-x:auto;background:#fff;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:none;padding:8px 14px;font:inherit;cursor:pointer;color:#444;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
.tabs button:hover{background:#f0f0f0}
.panel{display:none;padding:6px 8px;gap:4px;overflow-x:auto;align-items:stretch}
.panel.active{display:flex}
.group{display:flex;flex-direction:column;border-right:1px solid var(--line);padding:0 6px}
.group .btns{display:flex;gap:2px;flex:1}
.group .label{font-size:11px;color:#666;text-align:center;padding-top:2px;white-space:nowrap}
.rbtn{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:64px;max-width:92px;padding:4px 6px;border:1px solid transparent;border-radius:4px;color:var(--text);font-size:12px;text-align:center;line-height:1.2}
.rbtn .ic{font-size:24px;line-height:30px}
.rbtn:hover{background:#dde7f5;border-color:#c5d6ee;text-decoration:none}
.rbtn.on{background:#cfdcf2}
/* Nội dung */
main{padding:14px 16px;max-width:1600px;margin:0 auto}
h1{font-size:20px;font-weight:600;margin:4px 0 12px;color:#201f1e}
h2{font-size:16px;font-weight:600;margin:16px 0 8px;color:var(--blue-d)}
.toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #8a8886;border-radius:3px;background:#fff;color:var(--text);font:inherit;cursor:pointer;line-height:1.3}
.btn:hover{background:#f3f2f1;text-decoration:none}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue-d)}
.btn.danger{color:var(--red);border-color:var(--red)}
.btn.success{background:var(--green);border-color:var(--green);color:#fff}
.btn.big{padding:12px 18px;font-size:16px;width:100%;justify-content:center}
.o-input,select,input[type=text],input[type=number],input[type=date],input[type=password],input[type=email],textarea{border:1px solid #8a8886;border-radius:2px;padding:6px 8px;font:inherit;background:#fff;max-width:100%}
.o-input:focus,select:focus,input:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:-1px}
.card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:12px 14px;margin-bottom:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:14px}
.stat{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:3px;padding:10px 12px}
.stat .n{font-size:24px;font-weight:600;color:var(--blue-d)}.stat .t{color:#605e5c;font-size:12px}
.stat.green{border-left-color:var(--green)}.stat.red{border-left-color:var(--red)}.stat.amber{border-left-color:var(--amber)}
.msg{padding:8px 12px;border-radius:3px;margin-bottom:8px;border:1px solid}
.msg.success{background:#dff6dd;border-color:#9fd89f}.msg.error{background:#fde7e9;border-color:#f1bbbc}
.msg.warning{background:#fff4ce;border-color:#f2d675}.msg.info{background:var(--blue-l);border-color:#b4cdf0}
.filters{display:flex;flex-wrap:wrap;gap:6px;align-items:end;background:#fff;border:1px solid var(--line);padding:8px;border-radius:3px;margin-bottom:10px}
.filters label{display:flex;flex-direction:column;font-size:12px;color:#605e5c;gap:2px}
/* Lưới kiểu Excel */
.grid-wrap{overflow:auto;max-height:70vh;border:1px solid #c8c6c4;background:#fff}
table.grid{border-collapse:collapse;width:100%;font-size:13px}
table.grid th,table.grid td{border:1px solid var(--grid);padding:4px 8px;white-space:nowrap;text-align:left;vertical-align:middle}
table.grid thead th{position:sticky;top:0;background:#f3f2f1;font-weight:600;z-index:2;cursor:pointer;user-select:none;border-bottom:2px solid #c8c6c4}
table.grid thead tr.filter th{top:30px;background:#faf9f8;cursor:default;padding:2px}
table.grid thead tr.filter input{width:100%;min-width:60px;padding:2px 4px;font-size:12px;border:1px solid #c8c6c4}
table.grid th.sort-asc::after{content:" ▲";font-size:10px}table.grid th.sort-desc::after{content:" ▼";font-size:10px}
table.grid tbody tr:nth-child(even){background:#f8f9fb}
table.grid tbody tr:hover{background:#e5effb}
table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums}
table.grid td.rn{background:#f3f2f1;color:#777;text-align:center;width:36px}
table.grid tfoot td{font-weight:600;background:#f3f2f1;position:sticky;bottom:0}
table.grid td.wrap{white-space:normal;min-width:200px}
.thumb{width:40px;height:40px;object-fit:cover;border-radius:2px;vertical-align:middle;border:1px solid #ddd}
.badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;background:#edebe9}
.badge.dang_dung,.badge.khop,.badge.da_tao,.badge.da_gop{background:#dff6dd;color:#0b6a0b}
.badge.trong_kho{background:var(--blue-l);color:var(--blue-d)}
.badge.dang_sua,.badge.thua,.badge.chua_xu_ly{background:#fff4ce;color:#7a5d00}
.badge.hong,.badge.thieu{background:#fde7e9;color:#a4262c}.badge.da_thanh_ly,.badge.bo_qua{background:#e1dfdd;color:#555}
/* Form */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 16px}
.field{display:flex;flex-direction:column;gap:3px}.field label{font-size:12px;color:#605e5c;font-weight:600}
.field .o-input,.field select,.field textarea{width:100%}
.field .err{color:var(--red);font-size:12px}.field .help{color:#777;font-size:11px}
fieldset{border:1px solid var(--line);border-radius:4px;background:#fff;margin:0 0 12px;padding:10px 14px}
legend{color:var(--blue);font-weight:600;padding:0 6px}
/* Ảnh */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gallery .ph{border:1px solid var(--line);background:#fff;border-radius:3px;overflow:hidden}
.gallery .ph img{width:100%;height:130px;object-fit:cover;display:block;cursor:zoom-in}
.gallery .ph .cap{padding:4px 6px;font-size:12px}.gallery .ph.dd{outline:3px solid var(--green)}
.gallery .ph form{display:inline}.gallery .ph .acts{display:flex;gap:4px;padding:0 6px 6px;flex-wrap:wrap}
.gallery .ph .acts button{font-size:11px;padding:2px 6px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100}
.lightbox img{max-width:95vw;max-height:92vh}.lightbox.on{display:flex}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:14px}
dl.info{display:grid;grid-template-columns:180px 1fr;gap:4px 10px;margin:0}dl.info dt{color:#605e5c}dl.info dd{margin:0;font-weight:500}
.preview{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.preview img{width:72px;height:72px;object-fit:cover;border-radius:3px;border:1px solid #ccc}
/* Kiểm kê trên điện thoại */
.mobile{max-width:640px;margin:0 auto}
.mode-list a{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px;margin-bottom:10px;color:var(--text)}
.mode-list a .ic{font-size:32px}.mode-list a b{display:block;font-size:16px;color:var(--blue-d)}
.list-item{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px;margin-bottom:8px;color:var(--text)}
.list-item img{width:56px;height:56px;object-fit:cover;border-radius:4px}
.list-item .grow{flex:1;min-width:0}.list-item.done{border-left:5px solid var(--green)}
.camera-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--blue);color:#fff;border-radius:8px;padding:18px;font-size:18px;cursor:pointer;width:100%}
.camera-btn input{display:none}
#reader{width:100%;max-width:480px;margin:0 auto 10px}
.progress{height:10px;background:#edebe9;border-radius:5px;overflow:hidden}.progress div{height:100%;background:var(--green)}
.muted{color:#777;font-size:12px}
.login{max-width:360px;margin:8vh auto;background:#fff;border:1px solid var(--line);padding:24px;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.login h1{color:var(--blue)}
@media (max-width:800px){
  main{padding:10px}
  .titlebar form.search{display:none}.titlebar .app span{display:none}
  .two-col{grid-template-columns:1fr}
  dl.info{grid-template-columns:120px 1fr}
  .rbtn{min-width:56px}.rbtn .ic{font-size:20px;line-height:26px}
  .group .label{display:none}
  .btn{padding:9px 12px}
  .o-input,select,input,textarea{font-size:16px}
}
/* In tem */
.labels{display:grid;grid-template-columns:repeat(auto-fill,62mm);gap:4mm}
.lbl{width:62mm;height:30mm;border:1px dashed #999;display:flex;align-items:center;gap:2mm;padding:2mm;overflow:hidden;background:#fff;page-break-inside:avoid}
.lbl img{width:26mm;height:26mm}.lbl .t{font-size:9pt;line-height:1.2}.lbl .t b{font-size:10pt}
.printonly{display:none}
@media print{.printonly{display:block;font-size:11px;color:#555;margin-bottom:6px}.titlebar,.ribbon,.noprint,.messages{display:none!important}main{padding:0}body{background:#fff}.lbl{border:1px solid #ccc}}
/* Thiết bị CNTT: thẻ trên điện thoại, lưới trên máy tính */
.only-mobile{display:none}
@media (max-width:800px){.only-mobile{display:block}.only-desktop{display:none!important}}
.ts-pick{max-height:280px;overflow:auto;border:1px solid var(--line);background:#fff;margin-top:6px}
.ts-pick button{display:block;width:100%;text-align:left;padding:7px 8px;border:0;border-bottom:1px solid #eee;background:#fff;cursor:pointer;font:inherit}
.ts-pick button:hover{background:#eef4fc}.ts-pick .uu{color:#107c41;font-weight:600}.ts-pick .warn{color:#c19c00}
/* Ô chọn có tìm kiếm (search-select.js) */
select.ss-hidden{display:none!important}
.ss-btn{text-align:left;cursor:pointer;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:180px;max-width:100%}
.ss-btn::after{content:"▾";float:right;margin-left:6px;color:#605e5c}
.ss-panel{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding-top:8vh}
.ss-box{background:#fff;width:min(560px,96vw);max-height:80vh;display:flex;flex-direction:column;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.ss-head{display:flex;gap:6px;padding:8px;border-bottom:1px solid #e1dfdd}.ss-head input{flex:1;font-size:16px}
.ss-note{padding:6px 10px;background:#eef4fc;font-size:13px}
.ss-list{overflow:auto}.ss-list button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-bottom:1px solid #f0f0f0;background:#fff;font:inherit;cursor:pointer}
.ss-list button:hover,.ss-list button.on{background:#dde7f5}
body.ss-lock{overflow:hidden}
@media (max-width:800px){.ss-panel{padding-top:0;align-items:stretch}.ss-box{width:100vw;max-height:100vh;height:100vh;border-radius:0}.ss-list button{padding:14px 12px;font-size:16px}}
/* Xóa hàng loạt */
.xn-col{width:28px;text-align:center}.gallery .ph{position:relative}
.gallery .ph>input.xn{position:absolute;top:6px;left:6px;width:20px;height:20px;z-index:2}

/* Đang xử lý (static/js/dang_tai.js) */
#dang-tai{position:fixed;inset:0;background:rgba(255,255,255,.55);z-index:9999;display:none;align-items:center;justify-content:center}
#dang-tai .dt-hop{background:#fff;border:1px solid #c8c6c4;border-radius:6px;padding:14px 20px;box-shadow:0 4px 16px rgba(0,0,0,.15);display:flex;gap:12px;align-items:center;font-weight:600}
#dang-tai .dt-xoay{width:22px;height:22px;border:3px solid #c7e0f4;border-top-color:#0f6cbd;border-radius:50%;animation:dt-xoay .8s linear infinite}
@keyframes dt-xoay{to{transform:rotate(360deg)}}

/* Scan văn bản (Văn thư) */
.svb-nen{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;background:rgba(16,24,40,.72);z-index:10050;display:flex;align-items:stretch;justify-content:center;padding:0;touch-action:none;overscroll-behavior:none;overscroll-behavior-x:none;-webkit-overflow-scrolling:auto;-webkit-user-select:none;user-select:none}
.svb-nen[hidden]{display:none!important}
.svb-chan-vuot{position:absolute;left:0;top:0;bottom:0;width:max(56px,15vw);z-index:5;touch-action:none;-webkit-user-select:none;user-select:none}
.svb-hop{background:#161616;color:#fff;border-radius:0;width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:none;touch-action:none;overscroll-behavior:none;overscroll-behavior-x:none}
.svb-dau{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#1b1b1b;gap:8px;flex:0 0 auto}
.svb-dau b{font-size:16px}
.svb-x{min-width:40px;justify-content:center;font-size:20px;line-height:1}
.svb-san{position:relative;flex:1 1 auto;min-height:0;min-width:0;background:#000;display:flex;align-items:center;justify-content:center;touch-action:none;overscroll-behavior:none;overscroll-behavior-x:none;padding:max(48px,7vh) max(48px,12vw) max(48px,7vh) max(56px,15vw);overflow:hidden}
.svb-san canvas,.svb-san video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:center;min-width:0;min-height:0;flex:0 1 auto;display:block;touch-action:none;-webkit-user-select:none;user-select:none}
.svb-tay{position:absolute;width:44px;height:44px;background:transparent;border:none;box-shadow:none;padding:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;z-index:6}
.svb-tay::before{content:"";position:absolute;width:20px;height:20px;border:3px solid #5b9bd5;background:rgba(255,255,255,.92);border-radius:50%;box-shadow:0 0 0 5px rgba(24,90,189,.28);pointer-events:none}
.svb-tay[data-i="0"]{margin:0}
.svb-tay[data-i="0"]::before{left:-10px;top:-10px}
.svb-tay[data-i="1"]{margin:0 0 0 -44px}
.svb-tay[data-i="1"]::before{right:-10px;top:-10px;left:auto}
.svb-tay[data-i="2"]{margin:-44px 0 0 -44px}
.svb-tay[data-i="2"]::before{right:-10px;bottom:-10px;left:auto;top:auto}
.svb-tay[data-i="3"]{margin:-44px 0 0 0}
.svb-tay[data-i="3"]::before{left:-10px;bottom:-10px;top:auto}
.svb-tay[hidden]{display:none!important}
.svb-hint{padding:0 12px 8px;color:#d0d0d0;font-size:13px;margin:8px 0 0;flex:0 0 auto}
.svb-act{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;background:#222;flex:0 0 auto}
html.svb-khoa,html.svb-khoa body{overflow:hidden!important;touch-action:none!important;overscroll-behavior:none;height:100%}
body.svb-khoa{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}
@media (max-width:800px){
  .svb-nen{padding:0;align-items:stretch}
  .svb-hop{width:100vw;max-width:100vw;max-height:100vh;height:100vh;height:100dvh;border-radius:0}
  .svb-san{padding:max(48px,7vh) max(48px,12vw) max(48px,7vh) max(56px,15vw)}
  .svb-san canvas,.svb-san video{max-width:100%;max-height:100%;object-fit:contain;object-position:center;flex:0 1 auto}
  .svb-tay{width:56px;height:56px}
  .svb-tay[data-i="1"]{margin:0 0 0 -56px}
  .svb-tay[data-i="2"]{margin:-56px 0 0 -56px}
  .svb-tay[data-i="3"]{margin:-56px 0 0 0}
  .svb-tay::before{width:24px;height:24px}
  .svb-tay[data-i="0"]::before{left:-12px;top:-12px}
  .svb-tay[data-i="1"]::before{right:-12px;top:-12px;left:auto}
  .svb-tay[data-i="2"]::before{right:-12px;bottom:-12px;left:auto;top:auto}
  .svb-tay[data-i="3"]::before{left:-12px;bottom:-12px;top:auto}
  .svb-act .btn{padding:12px 14px;font-size:16px}
}