:root{--bg:#f3f6f8;--side:#0f2f3a;--side-hi:#174759;--accent:#0e8a7d;--accent-d:#0b6f65;--danger:#c0392b;--text:#1b2a33;--muted:#6a7b87;--line:#e1e8ec;--card:#fff;--warn:#b7791f}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5}
a{color:var(--accent-d)}
.app{display:flex;min-height:100vh}
.sidebar{width:250px;background:var(--side);color:#cfe3ea;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;flex-shrink:0}
.brand{padding:22px 22px 16px;font-weight:700;font-size:19px;color:#fff;letter-spacing:.2px}
.brand small{display:block;font-weight:400;font-size:12px;color:#8fb0bd;margin-top:2px}
.nav{flex:1;padding-top:6px}
.nav a{display:flex;align-items:center;gap:12px;padding:12px 22px;color:#cfe3ea;text-decoration:none;border-left:3px solid transparent}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a.active{background:var(--side-hi);color:#fff;border-left-color:#3ddc97;font-weight:600}
.side-foot{padding:16px 22px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
.who{color:#fff;margin-bottom:6px}
.link-btn{background:none;border:0;color:#8fd3c8;cursor:pointer;padding:0;font:inherit;text-decoration:underline}
.main{flex:1;min-width:0}
.topbar{display:flex;align-items:center;gap:12px;padding:16px 28px;background:var(--card);border-bottom:1px solid var(--line)}
.topbar h1{font-size:20px;margin:0}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;font-size:20px;padding:2px 10px;cursor:pointer}
.content{padding:24px 28px 60px;max-width:1240px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:20px}
.card h2{font-size:16px;margin:0 0 14px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.toolbar .grow{flex:1}
input[type=text],input[type=search],input[type=password],input[type=number],select,textarea{font:inherit;padding:9px 11px;border:1px solid #cdd7de;border-radius:8px;background:#fff;color:var(--text);width:100%}
.toolbar input[type=search],.toolbar input[type=text]{width:260px}
.toolbar select{width:auto;min-width:170px}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(14,138,125,.35);border-color:var(--accent)}
textarea{min-height:80px;resize:vertical}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:8px;border:1px solid transparent;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent-d)}
.btn.sec{background:#fff;color:var(--text);border-color:#cdd7de}
.btn.sec:hover{background:#f0f4f6}
.btn.danger{background:#fff;color:var(--danger);border-color:#e8b9b3}
.btn.danger:hover{background:#fdf1ef}
.btn.sm{padding:5px 10px;font-size:13px;font-weight:500}
table.tbl{width:100%;border-collapse:collapse;background:var(--card)}
.tbl th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:hover td{background:#fafcfd}
.tbl .num{text-align:right;white-space:nowrap}
.tbl .act{white-space:nowrap;text-align:right}
.tbl .act form{display:inline}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.code{font-family:ui-monospace,Consolas,monospace;font-size:13px;color:#33566a}
.muted{color:var(--muted)}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600}
.badge.ok{background:#e0f5ee;color:#0a6b54}
.badge.off{background:#eceff1;color:#6a7b87}
.badge.warn{background:#fdf1d8;color:#8a5a00}
.badge.info{background:#e3eefc;color:#1d4f91}
.badge.err{background:#fdeeed;color:#8f2a1f}
.flash{padding:11px 14px;border-radius:8px;margin-bottom:16px;border:1px solid}
.flash.ok{background:#e8f7f0;border-color:#a9dcc6;color:#0a5c47}
.flash.err{background:#fdeeed;border-color:#f0bcb6;color:#8f2a1f}
.flash.warn{background:#fdf6e3;border-color:#efd9a0;color:#7a5200}
.form-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px 16px}
.f{grid-column:span 6}.f.w3{grid-column:span 3}.f.w4{grid-column:span 4}.f.w8{grid-column:span 8}.f.w12{grid-column:span 12}
.f label.l{display:block;font-weight:600;font-size:13.5px;margin-bottom:5px}
.f .hint{font-size:12.5px;color:var(--muted);margin-top:4px}
.req{color:var(--danger)}
.check{display:flex;align-items:center;gap:8px}
.check input{width:auto}
.radios{display:flex;gap:18px;padding-top:6px}
.radios label{display:flex;align-items:center;gap:6px;font-weight:400}
.radios input{width:auto}
.actions{display:flex;gap:10px;margin-top:20px;align-items:center}
.pager{display:flex;gap:16px;align-items:center;justify-content:center;margin:18px 0;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-decoration:none;color:inherit}
.stat b{display:block;font-size:28px;line-height:1.1}
.stat span{color:var(--muted);font-size:13.5px}
.stat:hover{border-color:var(--accent)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* bộ chọn chỉ định cho gói */
.picker{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.picker-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px;background:#f7fafb;border-bottom:1px solid var(--line)}
.picker-tools input[type=search]{width:240px}.picker-tools select{width:auto;min-width:170px}
.picker-tools label{display:flex;align-items:center;gap:6px;font-size:13.5px}.picker-tools label input{width:auto}
.picker-list{max-height:430px;overflow:auto}
.pk-group h4{margin:0;padding:8px 14px;background:#eef3f5;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:#4a6472;position:sticky;top:0}
.pk-item{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.pk-item:hover{background:#f6fbfa}.pk-item.on{background:#e8f6f2}
.pk-item input{width:auto}
.pk-item .k{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:#4a6472;min-width:130px}
.pk-item .n{flex:1}.pk-item .p{color:var(--muted);white-space:nowrap}
.pk-sum{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding:12px 14px;background:#0f2f3a;color:#fff}
.pk-sum b{color:#7ff0c6}.pk-sum .warnmsg{color:#ffd48a}
.hidden{display:none!important}
/* trang đăng nhập / cài đặt */
body.bare{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:20px}
.bare-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;width:100%;max-width:420px;box-shadow:0 8px 30px rgba(15,47,58,.08)}
.bare-card h1{margin:0 0 4px;font-size:22px}
.bare-card .f{grid-column:span 12;margin-bottom:14px}
@media(max-width:900px){
  .sidebar{position:fixed;left:-260px;z-index:50;transition:left .2s}
  .sidebar.open{left:0;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .menu-btn{display:inline-flex}
  .content{padding:16px}.topbar{padding:12px 16px}
  .f,.f.w3,.f.w4,.f.w8{grid-column:span 12}
  .split{grid-template-columns:1fr}
}
/* ---------- Điện thoại ---------- */
.lp-actions{flex-wrap:wrap}
@media(max-width:700px){
  body{font-size:16px} /* 16px để iPhone không tự phóng to khi chạm vào ô nhập */
  input[type=text],input[type=search],input[type=password],input[type=number],input[type=datetime-local],select,textarea{font-size:16px}
  .toolbar input[type=search],.toolbar input[type=text],.picker-tools input[type=search]{width:100%}
  .toolbar select,.picker-tools select{width:100%}
  .pk-item{padding:12px 12px}
  .pk-item .k{display:none}
  .picker-list{max-height:55vh}
  .card{padding:14px}
  .lp-actions select,.lp-actions .btn{width:100%!important;justify-content:center}
  .lp-actions .btn{padding:14px;font-size:17px}
  /* Giỏ đã chọn: bảng -> thẻ */
  #cart-wrap{border:none;background:none;overflow:visible}
  #cart-wrap table,#cart-wrap tbody,#cart-wrap tr,#cart-wrap td{display:block;width:100%}
  #cart-wrap tr:first-child{display:none}
  #cart-body tr{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;padding:8px 10px;background:#fff}
  #cart-body td{border:none;padding:3px 0;text-align:left!important}
  #cart-body td:first-child{font-weight:700}
  #cart-body td:nth-child(3),#cart-body td:nth-child(4){display:none}
  #cart-body td:nth-child(5)::before{content:'Thành tiền: ';color:var(--muted);font-weight:400}
  #cart-body td:nth-child(6)::before{content:'Nơi gửi mẫu';display:block;color:var(--muted);font-size:13px}
  #cart-body td:nth-child(7)::before{content:'Hẹn trả kết quả';display:block;color:var(--muted);font-size:13px}
  #cart-body select,#cart-body input{min-width:0!important;width:100%}
  .pk-sum{gap:8px 14px}
}
/* Nhập kết quả trên điện thoại: bỏ cột Mã + Đơn vị cho vừa màn hình */
@media(max-width:700px){
  .kq-nhap tr > :first-child:not([colspan]), .kq-nhap tr > :nth-child(5){display:none}
  .kq-nhap td, .kq-nhap th{padding:8px 6px}
  .kq-nhap input[type=text]{width:90px!important}
}

/* Logo trên menu và trang đăng nhập */
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:#fff;padding:2px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.bare-logo{display:block;width:88px;height:88px;margin:0 auto 10px;border-radius:50%}
.bare-card h1{text-align:center}
.bare-card h1 + p.muted{text-align:center}

/* Chọn cơ sở trên menu */
.coso-chon{margin:0 14px 10px;padding:8px 10px;background:rgba(255,255,255,.07);border-radius:9px;display:flex;align-items:center;gap:8px;color:#cfe0e6;font-size:12.5px}
.coso-chon span{white-space:nowrap}
.coso-chon b{color:#fff;font-size:14px}
.coso-chon select{flex:1;min-width:0;background:#fff;color:#0f2f3a;border:none;border-radius:6px;padding:5px 6px;font:inherit;font-size:14px;font-weight:700}