/* ===========================================================================
   NamPhuongERP 1.56.0 — Mobile gon + sua phoi mau che do toi
   ---------------------------------------------------------------------------
   File nay chi chua CSS. Khong doi logic, khong doi so lieu, khong doi HTML.
   PHAI nap SAU css/namphuong-ui-shell-1.53.0-clean7.css, neu khong phan A
   se bi shell ghi de nguoc lai.

   PHAN A — Sua lo giua bieu do donut o che do toi
   PHAN B — Rut gon man Tong quan tren dien thoai
   PHAN C — Vai cho tuong phan thap khac
   =========================================================================== */


/* ===========================================================================
   PHAN A — BIEU DO DONUT
   ---------------------------------------------------------------------------
   NGUYEN NHAN GOC (da kiem chung tren repo 1.55.0):

   1) namphuong-ui-dark-1.53.0-clean7.css dat chu tam donut = var(--npui-text)
      (mau SANG, dung cho nen toi).
   2) namphuong-ui-shell-1.53.0-clean7.css nap SAU va ghi de thanh #173e4d
      (mau TOI), kem comment "Lo giua donut cua core van la nen trang".
      Gia dinh do dung: .np140-donut:after van la background:#fff.
   3) NHUNG chuoi tien TRAN RA NGOAI lo trang:
         lo    : inset 24%  -> ~52% duong kinh ~ 99px
         hop chu: inset 25% -> ~95px
         "94.934.500 d" o 18px -> ~110px
      overflow-wrap:anywhere be dong, phan thua nam tren vong tron mau va nen
      the. Chu #173e4d tren nen #15181c => chim hoan toan.

   O che do sang loi nay VAN CO, chi la chu toi tran ra nen the trang nen
   van doc duoc. Do la ly do truoc gio khong ai phat hien.

   CACH SUA (3 lop, doc lap nhau):
   - Lo giua dung bien theme thay vi #fff cung.
   - Chu tam dung bien theme, bo dong ghi de cua shell.
   - Thu nho + gioi han chieu rong de chu KHONG BAO GIO tran ra khoi lo.
     Ket hop voi patch JS 1.56.0 (rut gon so thanh "94,9tr") thi chac chan.
   =========================================================================== */

/* A1. Lo giua doi mau theo theme */
html.np-ui-reference .np140-donut:after{
  background:var(--npui-surface,#fff)!important;
  box-shadow:0 0 0 1px var(--npui-border,#e4ecef)!important;
}

/* A2. Chu tam doi mau theo theme — ghi de dong 1479 cua file shell.
       Selector nay dai hon (them html) nen thang ve do uu tien. */
html.np-ui-reference[data-theme="dark"] .np140-donut-center strong,
html.np-ui-reference .np140-donut-center strong{
  color:var(--npui-text)!important;
}
html.np-ui-reference[data-theme="dark"] .np140-donut-center small,
html.np-ui-reference .np140-donut-center small{
  color:var(--npui-text-3)!important;
}

/* A3. Khong cho chu tran ra khoi lo.
       Lo rong ra mot chut, hop chu hep lai, co chu co gian theo be ngang. */
html.np-ui-reference .np140-donut:after{inset:22%!important}
html.np-ui-reference .np140-donut-center{
  inset:24%!important;
  padding:0 4px;
  overflow:hidden;
}
html.np-ui-reference .np140-donut-center strong{
  font-size:clamp(12px,2.1vw,17px)!important;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
html.np-ui-reference .np140-donut-center small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* A4. Chu thich ben canh donut — nen 70,93% doc duoc ro o che do toi */
html.np-ui-reference[data-theme="dark"] .np140-chart-legend small{
  color:var(--npui-text-2)!important;
}
html.np-ui-reference .np140-chart-legend article{
  border-bottom-color:var(--npui-border)!important;
}


/* ===========================================================================
   PHAN B — MAN TONG QUAN TREN DIEN THOAI
   ---------------------------------------------------------------------------
   Dem tren anh chup 10:27 sang 27/08: truoc khi cham duoc nut dau tien,
   nguoi dung phai luot qua 5 dong chu la tieu de long nhau:

     1. thanh tren        "Tong quan"
     2. eyebrow           "DIEU HANH · NAM PHUONG"
     3. tieu de trang     "Tong quan dieu hanh"
     4. eyebrow muc       "THAO TAC NHANH"
     5. tieu de muc       "Cong viec thuong dung"

   KiotViet chi co MOT dong "Ban hang" roi vao thang o tim kiem.

   Toan bo phan nay chi ap dung tu 768px tro xuong. Man hinh may tinh
   khong doi mot pixel nao.
   =========================================================================== */

@media (max-width:768px){

  /* B1. Bo eyebrow lap. Thanh tren da hien ten trang roi. */
  html.np-ui-reference .np1380-section-title>div>small{display:none!important}
  html.np-ui-reference .np1380-section-title>span{display:none!important}
  html.np-ui-reference .np1380-section-title{
    margin-bottom:8px!important;
    padding-bottom:0!important;
  }
  html.np-ui-reference .np1380-section-title h3{
    font-size:14px!important;
    margin:0!important;
  }

  /* B2. Tieu de trang gon lai, nut hanh dong xuong mot hang rieng */
  html.np-ui-reference .page-head{
    display:block!important;
    margin-bottom:10px!important;
  }
  html.np-ui-reference .page-head h2{
    font-size:19px!important;
    margin:0 0 8px!important;
  }
  html.np-ui-reference .page-head .actions{
    display:flex!important;
    gap:8px;
  }
  html.np-ui-reference .page-head .actions>button{
    flex:1;
    padding:9px 10px!important;
    font-size:13px!important;
  }

  /* B3. Bon the thao tac nhanh -> hang cuon ngang, bo dong mo ta phu.
         "Tao don / Tiep nhan / Duyet don / Dieu phoi" van con,
         chi bo "Ban hang nhanh / Ghi don khach dat / ..." */
  html.np-ui-reference .np1380-quick-grid{
    display:flex!important;
    gap:8px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
    margin-bottom:12px;
  }
  html.np-ui-reference .np1380-quick-grid::-webkit-scrollbar{display:none}
  html.np-ui-reference .np1380-quick-grid>*{
    flex:0 0 auto;
    scroll-snap-align:start;
    min-width:118px;
    padding:10px 12px!important;
  }
  /* SUA 1.63.0.3 — cau truc THAT cua nut (loi dong ~10310):
       <button><i>icon</i><span><b>Tao don</b><small>Ban hang nhanh</small></span><em>></em></button>

     Ban 1.56.0 an `span` de bo dong mo ta phu. Nhung <b> CHUA nhan chinh lai
     nam BEN TRONG <span> do, nen an span la an luon nhan. Quy tac
     `b{font-size:13px}` ngay duoi tro thanh vo nghia vi cha da display:none.
     Ket qua: bon the chi con icon, khong ai biet nut nao lam gi.

     Sua: chi an <small> (mo ta phu) va <em> (mui ten '>'), giu <span> va <b>. */
  html.np-ui-reference .np1380-quick-grid>* small,
  html.np-ui-reference .np1380-quick-grid>* em{display:none!important}
  html.np-ui-reference .np1380-quick-grid>* span{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  html.np-ui-reference .np1380-quick-grid>* b{
    display:block!important;
    font-size:13px!important;
    line-height:1.25!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:var(--npui-text)!important;
  }
  html.np-ui-reference .np1380-quick-grid>* i{
    flex:0 0 auto!important;
    font-style:normal!important;
  }

  /* B4. The chi so suc khoe: bo phan ghi chu dai, giu lai con so */
  html.np-ui-reference .health-hero{padding:14px!important;margin-bottom:12px!important}
  html.np-ui-reference .health-hero strong{font-size:30px!important}
  html.np-ui-reference .health-notes{display:none!important}

  /* B5. Ba the dem: bo qua 3 cot chat -> 3 cot nhung gon han.
         The nao bang 0 se bi patch JS lam mo di, xem 1.56.0 JS. */
  html.np-ui-reference .workflow-strip{gap:6px!important;margin-bottom:12px!important}
  html.np-ui-reference .workflow-strip>button{padding:10px 6px!important}
  html.np-ui-reference .workflow-strip>button b{font-size:22px!important}
  html.np-ui-reference .workflow-strip>button small{
    font-size:10px!important;
    line-height:1.25;
  }
  html.np-ui-reference .workflow-strip>button span{font-size:16px!important}

  /* B6. KPI: 3 cot o 375px lam chu xuong dong. Ep ve 2 cot. */
  html.np-ui-reference .cards.dashboard-kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  html.np-ui-reference .cards.dashboard-kpis .card.metric{padding:11px!important}
  html.np-ui-reference .cards.dashboard-kpis .card.metric span{font-size:11px!important}
  html.np-ui-reference .cards.dashboard-kpis .card.metric strong{
    font-size:17px!important;
    overflow-wrap:anywhere;
  }
  html.np-ui-reference .cards.dashboard-kpis .card.metric small{
    font-size:10px!important;
    line-height:1.3;
  }

  /* B7. Cac bang phan tich sau: khong phai viec dieu hanh trong ngay.
         Van giu lai, chi lam mat do gon hon. */
  html.np-ui-reference .dashboard-grid{gap:10px!important}
  html.np-ui-reference .dashboard-grid .card{padding:12px!important}
  html.np-ui-reference .dashboard-grid h3{font-size:13px!important}
  html.np-ui-reference .quick-grid>button span{display:none!important}
}


/* ===========================================================================
   PHAN C — CAC CHO TUONG PHAN THAP KHAC O CHE DO TOI
   ---------------------------------------------------------------------------
   Nguyen tac: khong dung opacity de lam chu mo. Tren nen toi opacity tut
   tuong phan rat nhanh. Luon dung bien --npui-text-2 / --npui-text-3.
   =========================================================================== */

/* C1. Bang: dong ke va chu phu */
html.np-ui-reference[data-theme="dark"] .table-wrap table td,
html.np-ui-reference[data-theme="dark"] .table-wrap table th{
  border-color:var(--npui-border)!important;
}
html.np-ui-reference[data-theme="dark"] .table-wrap table .empty{
  color:var(--npui-text-3)!important;
}

/* C2. Chu .muted dung bien thay vi mau co dinh */
html.np-ui-reference[data-theme="dark"] .muted{color:var(--npui-text-3)!important}

/* C3. Dong tom tat trong cac modal (Cong no hien tai / Con lai ...) */
html.np-ui-reference[data-theme="dark"] .summary-row{
  border-color:var(--npui-border)!important;
}
html.np-ui-reference[data-theme="dark"] .summary-row>span{
  color:var(--npui-text-2)!important;
}
html.np-ui-reference[data-theme="dark"] .summary-row>b{
  color:var(--npui-text)!important;
}

/* C4. Bat cu cho nao con dung opacity de lam chu mo thi tra ve 1
       va doi sang bien mau — an toan hon tren nen toi. */
html.np-ui-reference[data-theme="dark"] .np140-chart-head small{
  opacity:1!important;
  color:var(--npui-text-3)!important;
}


/* ===========================================================================
   PHAN D — BANG "CAC DON CON NO" trong modal Thu cong no (1.56.0D)
   ---------------------------------------------------------------------------
   Bang do patch_1_56_0_debt_invoices.js chen vao. Khong co trong core nen
   phai tu dinh nghia. Moi mau deu lay tu bien theme, chay dung ca hai che do.
   =========================================================================== */

html.np-ui-reference .np156-invoice-box{margin:10px 0 4px}

html.np-ui-reference .np156-invoice-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
html.np-ui-reference .np156-invoice-head b{
  font-size:13px;
  color:var(--npui-text);
}
html.np-ui-reference .np156-invoice-head small{
  font-size:11px;
  color:var(--npui-text-3);
  text-align:right;
}

html.np-ui-reference .np156-invoice-note{
  font-size:12px;
  color:var(--npui-text-3);
  padding:8px 0;
}

html.np-ui-reference .np156-invoice-scroll{
  max-height:210px;
  overflow-y:auto;
  overflow-x:auto;
  border:1px solid var(--npui-border);
  border-radius:10px;
  background:var(--npui-surface);
}

html.np-ui-reference .np156-invoice-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
html.np-ui-reference .np156-invoice-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--npui-surface-2);
  color:var(--npui-text-2);
  font-weight:600;
  text-align:left;
  padding:7px 8px;
  white-space:nowrap;
  border-bottom:1px solid var(--npui-border);
}
html.np-ui-reference .np156-invoice-table td{
  padding:7px 8px;
  white-space:nowrap;
  color:var(--npui-text);
  border-bottom:1px solid var(--npui-border);
}
html.np-ui-reference .np156-invoice-table tr:last-child td{border-bottom:0}
html.np-ui-reference .np156-invoice-table .np156-num{text-align:right}

/* Nhan cho khoan KHONG phai hoa don ban hang */
html.np-ui-reference .np156-kind{
  font-style:normal;
  font-size:11px;
  padding:1px 6px;
  border-radius:6px;
  background:var(--npui-surface-3);
  color:var(--npui-text-2);
}

/* So tien se bi tru lan nay / so con lai sau khi thu */
html.np-ui-reference .np156-applied{color:var(--npui-good);font-weight:600}
html.np-ui-reference .np156-left{color:var(--npui-warn)}

@media (max-width:768px){
  html.np-ui-reference .np156-invoice-scroll{max-height:170px}
  html.np-ui-reference .np156-invoice-table{font-size:11px}
  html.np-ui-reference .np156-invoice-table th,
  html.np-ui-reference .np156-invoice-table td{padding:6px}
}

/* Nut "Thu lai" trong khoi bao loi cua bang hoa don */
html.np-ui-reference .np156-retry{
  margin-left:6px;
  padding:2px 10px;
  font-size:12px;
  border-radius:6px;
  border:1px solid currentColor;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
html.np-ui-reference .np156-retry:hover{background:var(--npui-hover)}