/* ===========================================================================
   NamPhuongERP 1.61.0 — Luoi icon "Tuy chon them"
   Moi mau lay tu bien --npui-*. Chi hien tren dien thoai.
   =========================================================================== */

html.np-ui-reference .np161-grid{
  margin:14px 0 8px;
  border:1px solid var(--npui-border);
  border-radius:12px;
  background:var(--npui-surface);
  overflow:hidden;
}

/* Khi ban theo tuyen, 1.61 dung lai hop #np158MoreOptions cua 1.58 de tranh
   hien hai khoi "Tuy chon them". Chi luoi icon duoc chen vao than hop. */
html.np-ui-reference .np161-grid.np161-grid-embedded{
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
html.np-ui-reference .np158-more-body>.np161-grid.np161-grid-embedded{
  width:100%;
}
html.np-ui-reference .np161-grid.np161-grid-embedded .np161-grid-body{
  padding:2px 0 6px;
}
html.np-ui-reference .np161-grid>summary{
  list-style:none;
  cursor:pointer;
  padding:11px 14px;
  font-size:13.5px;
  font-weight:600;
  color:var(--npui-text-2);
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
html.np-ui-reference .np161-grid>summary::-webkit-details-marker{display:none}
html.np-ui-reference .np161-grid>summary::after{
  content:'⌄';
  margin-left:auto;
  font-size:15px;
  color:var(--npui-text-3);
}
html.np-ui-reference .np161-grid[open]>summary::after{content:'⌃'}
html.np-ui-reference .np161-grid[open]>summary{
  border-bottom:1px solid var(--npui-border);
}

html.np-ui-reference .np161-grid-body{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:12px;
}
html.np-ui-reference .np161-grid-body button{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:74px;
  padding:9px 5px;
  border:1px solid var(--npui-border);
  border-radius:10px;
  background:var(--npui-surface-2);
  color:var(--npui-text-2);
  cursor:pointer;
  text-align:center;
}
html.np-ui-reference .np161-grid-body button:hover{
  background:var(--npui-hover);
  border-color:var(--npui-border-strong);
}
html.np-ui-reference .np161-grid-body button:active{transform:scale(.97)}
html.np-ui-reference .np161-grid-body button i{font-size:20px;font-style:normal;line-height:1}
html.np-ui-reference .np161-grid-body button span{
  font-size:11px;
  line-height:1.25;
  font-weight:500;
}

/* Nhay vien mot cai de mat bat duoc khoi vua cuon toi */
html.np-ui-reference .np161-flash{
  animation:np161Flash 1.4s ease-out;
  border-radius:10px;
}
@keyframes np161Flash{
  0%,100%{box-shadow:0 0 0 0 transparent}
  15%,55%{box-shadow:0 0 0 3px var(--npui-warn)}
}

/* ---------- Modal cong no chi tiet ---------- */

html.np-ui-reference .np161-debt-body{padding:4px 2px}
html.np-ui-reference .np161-debt-total{
  font-size:13px;
  color:var(--npui-text-2);
  padding:8px 10px;
  margin-bottom:8px;
  border-radius:9px;
  background:var(--npui-crit-weak);
}
html.np-ui-reference .np161-debt-total b{color:var(--npui-crit);font-size:15px}

html.np-ui-reference .np161-debt-list{
  max-height:340px;
  overflow-y:auto;
}
html.np-ui-reference .np161-debt-list article{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:9px 10px;
  border-bottom:1px solid var(--npui-border);
}
html.np-ui-reference .np161-debt-list article:last-child{border-bottom:0}
html.np-ui-reference .np161-debt-list b{
  display:block;
  font-size:13px;
  color:var(--npui-text);
}
html.np-ui-reference .np161-debt-list small{
  display:block;
  font-size:11px;
  color:var(--npui-text-3);
}
html.np-ui-reference .np161-debt-num{
  text-align:right;
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}

@media (min-width:901px){
  html.np-ui-reference .np161-grid{display:none}
}
@media (max-width:380px){
  html.np-ui-reference .np161-grid-body{gap:6px;padding:10px}
  html.np-ui-reference .np161-grid-body button{min-height:66px}
  html.np-ui-reference .np161-grid-body button span{font-size:10px}
}