/* Etugi OPC — hệ design lấy từ opc-mockup.html đã duyệt */
:root{
  --ink:#16211D; --ink-soft:#5B655F; --paper:#F6F7F3; --surface:#FFFFFF;
  --line:#DEE3DD; --line-soft:#EAEDE8;
  --teal:#146356; --teal-deep:#0E4A41; --teal-soft:#E3EFEA;
  --ok:#2F7A3D; --ok-bg:#E7F3E5;
  --warn:#A66A12; --warn-bg:#FBEFDD;
  --bad:#B23B33; --bad-bg:#FBE7E5;
  --info:#1F5E8C; --info-bg:#E4EFF7;
  --neutral-bg:#EEF0EC;
  --radius:10px;
  --font-head:'Manrope','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:14px;line-height:1.5;
     overflow-x:hidden;}
h1,h2,h3,.brand{font-family:var(--font-head);}
table{font-variant-numeric:tabular-nums;}
a{color:var(--teal-deep);}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:238px 1fr;min-height:100vh;}
/* Grid item mặc định min-width:auto — bảng rộng 640px bên trong sẽ nong cả cột ra
   và đẩy trang tràn ngang trên điện thoại. min-width:0 cho phép cột co lại,
   bảng tự cuộn ngang trong .table-wrap đúng như thiết kế. */
.shell > main{min-width:0;}
.sidebar{background:var(--teal-deep);color:#EAF3EF;padding:22px 14px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow-y:auto;}
.brand{padding:0 8px;}
.brand .mark{font-weight:800;font-size:17px;letter-spacing:.2px;}
.brand .sub{font-size:12px;color:#9FC2B7;font-weight:500;}
.sidebar nav{display:flex;flex-direction:column;gap:1px;}
.sidebar .group-label{font-size:10.5px;color:#7FA79A;text-transform:uppercase;letter-spacing:.06em;padding:14px 12px 5px;font-weight:600;}
.sidebar nav a{text-decoration:none;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;color:#CFE4DC;display:flex;align-items:center;gap:9px;}
.sidebar nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.sidebar nav a.active{background:#EAF3EF;color:var(--teal-deep);}
.sidebar nav a .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;flex-shrink:0;}
.sidebar nav a .pill{margin-left:auto;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:999px;}
.sidebar-foot{margin-top:auto;font-size:11.5px;color:#7FA79A;padding:10px 8px 0;border-top:1px solid rgba(255,255,255,.09);}

main{padding:24px 32px 60px;}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap;}
.topbar h1{font-size:21px;font-weight:700;margin:0;}
.topbar p{margin:4px 0 0;color:var(--ink-soft);font-size:13px;}
.topbar-actions{display:flex;align-items:center;gap:10px;}

/* ---------- account menu ---------- */
.account{position:relative;}
.account-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;}
.account-btn:hover{background:var(--neutral-bg);}
.account-btn .avatar{width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:12.5px;}
.account-btn .uname{font-size:13px;font-weight:600;}
.account-menu{position:absolute;top:calc(100% + 8px);right:0;width:270px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(22,33,29,.14);padding:8px;z-index:40;display:none;}
.account.open .account-menu{display:block;}
.am-head{padding:16px 12px 14px;text-align:center;border-bottom:1px solid var(--line-soft);margin-bottom:8px;}
.am-head .avatar-lg{width:52px;height:52px;border-radius:50%;background:var(--teal);color:#fff;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:18px;}
.am-head .name{font-family:var(--font-head);font-weight:700;font-size:14.5px;}
.am-head .mail{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.am-org{background:#F7F9F7;border:1px solid var(--line-soft);border-radius:9px;padding:10px 11px;margin:0 4px 8px;font-size:11.5px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;line-height:1.45;}
.am-item{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:8px;font-size:13.5px;}
.am-item:hover{background:var(--neutral-bg);}
.am-item.danger{color:var(--bad);}
.am-item.danger:hover{background:var(--bad-bg);}
.am-sep{height:1px;background:var(--line-soft);margin:8px 4px;}

/* ---------- kpi ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:24px;}
.kpi-grid.k4{grid-template-columns:repeat(4,1fr);}
.kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;text-decoration:none;color:inherit;display:block;}
a.kpi-card:hover{border-color:var(--teal);}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;gap:8px;}
.kpi-name{font-size:12.5px;color:var(--ink-soft);font-weight:600;}
.flag{width:9px;height:9px;border-radius:50%;flex-shrink:0;display:inline-block;}
.flag.xanh{background:var(--ok);} .flag.vang{background:var(--warn);} .flag.do{background:var(--bad);}
.kpi-value{font-family:var(--font-head);font-size:23px;font-weight:800;}
.kpi-value.sm{font-size:19px;}
.kpi-target{font-size:11.5px;color:var(--ink-soft);margin-top:4px;}

section.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px;overflow:hidden;}
.block-head{padding:15px 18px;border-bottom:1px solid var(--line-soft);display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.block-head h2{font-size:15px;font-weight:700;margin:0;}
.block-head .desc{font-size:12px;color:var(--ink-soft);margin-top:3px;max-width:66ch;}
.block-body{padding:18px;}

/* ---------- buttons ---------- */
.btn{all:unset;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:13px;padding:8px 14px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;}
.btn-primary{background:var(--teal);color:#fff;}
.btn-primary:hover{background:var(--teal-deep);}
.btn-primary[disabled]{background:#A8BDB6;cursor:not-allowed;}
.btn-ghost{background:var(--neutral-bg);color:var(--ink);}
.btn-ghost:hover{background:var(--line-soft);}
.btn-danger{background:var(--bad-bg);color:var(--bad);}
.btn-warn{background:var(--warn-bg);color:var(--warn);}
.btn-sm{padding:5px 10px;font-size:12px;}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;min-width:640px;}
table.data th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);font-weight:600;padding:10px 16px;border-bottom:1px solid var(--line-soft);background:#FAFBF9;white-space:nowrap;}
table.data td{padding:11px 16px;border-bottom:1px solid var(--line-soft);font-size:13.5px;vertical-align:middle;}
table.data tr:last-child td{border-bottom:none;}
table.data td.num,table.data th.num{text-align:right;}
table.data tr.row-danger td{background:#FEF7F6;}
table.data tr.row-warn td{background:#FEFAF3;}
.sub{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px;}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.badge.gray{background:var(--neutral-bg);color:var(--ink-soft);}
.badge.teal{background:var(--teal-soft);color:var(--teal-deep);}
.badge.ok{background:var(--ok-bg);color:var(--ok);}
.badge.warn{background:var(--warn-bg);color:var(--warn);}
.badge.bad{background:var(--bad-bg);color:var(--bad);}
.badge.info{background:var(--info-bg);color:var(--info);}

.lead-tag{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:5px;}
.lead-tag.NONG{background:var(--bad-bg);color:var(--bad);}
.lead-tag.AM{background:var(--warn-bg);color:var(--warn);}
.lead-tag.LANH{background:var(--neutral-bg);color:var(--ink-soft);}

.filters{display:flex;gap:8px;padding:14px 18px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft);}
.filters a{text-decoration:none;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--neutral-bg);color:var(--ink-soft);}
.filters a.active{background:var(--teal);color:#fff;}

.sla{font-weight:700;font-variant-numeric:tabular-nums;}
.sla.ok{color:var(--ok);} .sla.warn{color:var(--warn);} .sla.bad{color:var(--bad);}

/* ---------- banner ---------- */
.banner{border-radius:var(--radius);padding:13px 16px;margin-bottom:18px;display:flex;gap:11px;align-items:flex-start;font-size:13px;}
.banner.bad{background:var(--bad-bg);color:#7E2A24;border:1px solid #EFC7C3;}
.banner.warn{background:var(--warn-bg);color:#7A4C0B;border:1px solid #EAD4AE;}
.banner.info{background:var(--info-bg);color:#174866;border:1px solid #C3DCEC;}
.banner.ok{background:var(--ok-bg);color:#255E2F;border:1px solid #C3DFBE;}
.banner .ico{font-size:15px;line-height:1.2;}

/* ---------- form ---------- */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;}
.field label .req{color:var(--bad);}
.field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-family:var(--font-body);font-size:13.5px;color:var(--ink);background:#FDFDFC;}
.field textarea{resize:vertical;min-height:64px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.field input[readonly]{background:var(--neutral-bg);color:var(--ink-soft);}

/* ---------- ô sửa ngay trong bảng ----------
   Màn hình danh mục (Địa giới, Tài khoản ngân hàng, Danh mục con) cho sửa
   tại chỗ: input nằm thẳng trong <td>, không bọc .field, nên không ăn style
   ở trên và rơi về giao diện mặc định của trình duyệt.
   Nhỏ hơn input thường một chút vì bảng chật. */
table.data td input[type="text"],
table.data td input[type="number"],
table.data td input[type="tel"],
table.data td input[type="email"],
table.data td select,
table.data td textarea{
  width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:7px;
  font-family:var(--font-body);font-size:13px;color:var(--ink);background:#FDFDFC;
}
table.data td textarea{resize:vertical;min-height:48px;}
table.data td input:focus,
table.data td select:focus,
table.data td textarea:focus{
  outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);
}
table.data td input[readonly]{background:var(--neutral-bg);color:var(--ink-soft);}
/* Ô số tài khoản, mã bưu chính... dễ đọc hơn khi dùng chữ đều nét */
table.data td input.mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field-row.r3{grid-template-columns:repeat(3,1fr);}
.hint{font-size:11.5px;color:var(--ink-soft);margin-top:5px;}
.hint.err{color:var(--bad);font-weight:600;}
.hint.ok{color:var(--ok);font-weight:600;}

.calc-box{background:var(--teal-soft);border-radius:10px;padding:13px 15px;margin-top:4px;}
.calc-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0;}
.calc-row.total{border-top:1px solid rgba(14,74,65,.18);margin-top:6px;padding-top:8px;font-weight:700;color:var(--teal-deep);}
.calc-row .neg{color:var(--bad);}

/* ---------- timeline ---------- */
.timeline{padding:6px 18px 18px;}
.tl-item{display:grid;grid-template-columns:26px 1fr;gap:12px;padding-bottom:16px;position:relative;}
.tl-item:not(:last-child)::before{content:'';position:absolute;left:12px;top:22px;bottom:0;width:2px;background:var(--line-soft);}
.tl-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;z-index:1;}
.tl-dot.done{background:var(--ok-bg);color:var(--ok);}
.tl-dot.current{background:var(--teal);color:#fff;}
.tl-dot.todo{background:var(--neutral-bg);color:var(--ink-soft);}
.tl-body h4{margin:2px 0;font-size:13.5px;font-family:var(--font-body);font-weight:600;}
.tl-body .who{font-size:11.5px;color:var(--ink-soft);margin-top:3px;}

.empty-note{padding:22px;text-align:center;color:var(--ink-soft);font-size:13px;}
.legend{display:flex;gap:16px;padding:0 18px 15px;font-size:11.5px;color:var(--ink-soft);flex-wrap:wrap;}
.legend span{display:flex;align-items:center;gap:5px;}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--paper);padding:24px;}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px;width:400px;max-width:100%;box-shadow:0 12px 40px rgba(22,33,29,.08);}
.login-card .brand{text-align:center;margin-bottom:26px;}
.login-card .brand .mk{width:52px;height:52px;border-radius:13px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:18px;margin:0 auto 12px;}
.login-card .brand h1{font-size:19px;margin:0;}
.login-card .brand p{font-size:13px;color:var(--ink-soft);margin:4px 0 0;}
.login-card .demo{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--ink-soft);line-height:1.8;}
.login-card .demo b{color:var(--ink);}

/* ---------- dropdown có tìm kiếm (searchable_select.php) ---------- */
/* Tự viết thay vì Select2/Choices: hệ thống không có Composer và không tải CDN. */
.ss{position:relative;}
.ss-btn{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;
  gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#FDFDFC;
  font-family:var(--font-body);font-size:13.5px;color:var(--ink);min-height:38px;}
.ss-btn:hover{border-color:#C6CFC8;}
.ss.open .ss-btn{border-color:var(--teal);box-shadow:0 0 0 2px rgba(20,99,86,.13);}
.ss-btn[disabled]{cursor:not-allowed;background:var(--neutral-bg);color:var(--ink-soft);}
.ss-lb{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ss-lb.ss-ph{color:#9AA39D;}
.ss-ca,.ss-lock{width:15px;height:15px;color:var(--ink-soft);flex-shrink:0;}
.ss.open .ss-ca{transform:rotate(180deg);}

.ss-pop{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(22,33,29,.15);
  display:none;overflow:hidden;}
.ss.open .ss-pop{display:block;}
/* Mở lên trên khi gần đáy màn hình */
.ss.up .ss-pop{top:auto;bottom:calc(100% + 4px);}

.ss-sbox{display:flex;align-items:center;gap:7px;padding:9px 11px;border-bottom:1px solid var(--line-soft);}
.ss-sbox svg{width:15px;height:15px;color:var(--ink-soft);flex-shrink:0;}
.ss-search{all:unset;flex:1;font-family:var(--font-body);font-size:13.5px;color:var(--ink);min-width:0;}
.ss-list{max-height:250px;overflow-y:auto;overscroll-behavior:contain;}
.ss-op{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:8px 12px;
  font-size:13.5px;color:var(--ink);}
.ss-op:hover,.ss-op.hl{background:var(--neutral-bg);}
.ss-op.on{background:var(--teal-soft);color:var(--teal-deep);font-weight:600;}
.ss-op-lb{display:block;}
.ss-op-sub{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:1px;}
.ss-op.on .ss-op-sub{color:var(--teal-deep);opacity:.8;}
.ss-none,.ss-empty{padding:16px 12px;text-align:center;font-size:12.5px;color:var(--ink-soft);}

@media (max-width:900px){
  .shell{grid-template-columns:1fr;}
  /* Menu 14 mục đẩy nội dung xuống quá xa trên điện thoại — gập lại,
     bấm nút ETUGI·OPC để mở. Trạng thái mở do JS gắn class .nav-open. */
  .sidebar{position:static;height:auto;padding:14px;}
  .sidebar nav,.sidebar-foot{display:none;}
  .sidebar.nav-open nav{display:flex;}
  .sidebar.nav-open .sidebar-foot{display:block;}
  .brand{cursor:pointer;display:flex;flex-direction:row;align-items:center;justify-content:space-between;}
  .brand::after{content:'☰';font-size:19px;color:#9FC2B7;}
  .sidebar.nav-open .brand::after{content:'✕';}

  .kpi-grid,.kpi-grid.k4{grid-template-columns:repeat(2,1fr);}
  .field-row,.field-row.r3{grid-template-columns:1fr;}
  main{padding:20px 16px 50px;}
  .topbar{flex-direction:column;align-items:stretch;}
  .topbar-actions{justify-content:space-between;}
  /* Ngón tay khó bấm dòng 8px — nới ra trên cảm ứng */
  .ss-op{padding:11px 12px;}
  .ss-list{max-height:52vh;}
}
@media (max-width:560px){
  .kpi-grid,.kpi-grid.k4{grid-template-columns:1fr;}
  main{padding:16px 12px 40px;}
  .block-head{padding:14px;}
  .block-body,section.block form{padding-left:14px;padding-right:14px;}
}