/* /Components/CompLoyalty.razor.rz.scp.css */
/* Ô nhập tỷ lệ tích điểm: in đậm và canh phải cho dễ đối chiếu con số. */
[b-xrser7wze6] .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    font-weight: bold !important;
    text-align: right;
}

/* Nới khoảng cách chữ trong danh sách mốc điểm. */
[b-xrser7wze6] .mud-list-item-text {
    margin-left: 12px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
/* /Components/CompNewBill.razor.rz.scp.css */
/* Thanh hành động ghim đáy màn hình, chỉ hiện ở mobile */
[b-wez96wtukv] .bill-mobile-action-bar {
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
[b-wez96wtukv] .bill-mobile-action-bar .mud-button-root {
  border-radius: var(--r-md) !important;
}
[b-wez96wtukv] .bill-mobile-action-bar .mud-button-filled-primary {
  background: var(--grad-hero) !important;
}
/* /Components/CompServicePanel.razor.rz.scp.css */
/* Trạng thái rỗng của panel dịch vụ, dùng chung desktop lẫn mobile.
   flex:1 1 100% vì khối này là con trực tiếp của flex container: để mặc định thì nó co theo nội
   dung và dồn về mép trái thay vì nằm giữa panel. */
.svc-panel-empty[b-uqixve35ob] {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 24px;
    width: 100%;
    text-align: center;
    color: var(--text-3, rgba(0, 0, 0, .38));
}
/* /Components/ConnectionStatus.razor.rz.scp.css */
/* Thẻ thông báo nổi giữa màn hình trên nền phủ mờ. */

/* Thẻ kính mờ: thấy được nội dung trang phía sau nhưng chữ vẫn đọc rõ */
.conn-card[b-y5g21kznr5] {
    width: min(360px, calc(100vw - 40px));
    box-sizing: border-box;
    padding: 30px 26px 24px;
    background: var(--glass-bg, rgba(255,255,255,.72));
    backdrop-filter: var(--glass-blur, blur(22px) saturate(180%));
    -webkit-backdrop-filter: var(--glass-blur, blur(22px) saturate(180%));
    border: 1px solid var(--glass-border, rgba(255,255,255,.55));
    border-radius: var(--radius-card, 16px);
    /* Vệt sáng mép trên và bóng đổ mềm bên dưới */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), var(--glass-shadow, 0 8px 30px rgba(28,27,46,.16));
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: conn-in-b-y5g21kznr5 .32s var(--ease-rise, cubic-bezier(.22,1,.36,1)) both;
}

/* Lớp loang sáng chéo từ góc trên trái */
.conn-card[b-y5g21kznr5]::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 38%, rgba(255,255,255,0) 62%);
}

/* Cho các khối con vẽ sau lớp loang để chữ không bị phủ mờ */
.conn-card > *[b-y5g21kznr5] {
    position: relative;
}

@keyframes conn-in-b-y5g21kznr5 {
    from { opacity: 0; transform: translateY(10px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

/* Huy hiệu tròn quanh biểu tượng, có vòng loang chậm cho thấy app đang chờ */
.conn-icon[b-y5g21kznr5] {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 50%;
    /* Nền trong mờ để huy hiệu cùng chất liệu kính với thẻ */
    background: color-mix(in srgb, var(--red, #F44336) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--red, #F44336) 22%, transparent);
    color: var(--red, #F44336);
}

.conn-icon[b-y5g21kznr5]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--red, #F44336);
    animation: conn-ring-b-y5g21kznr5 2s var(--ease-ios, cubic-bezier(.32,.72,.25,1)) infinite;
}

@keyframes conn-ring-b-y5g21kznr5 {
    0%   { opacity: .5; transform: scale(1); }
    70%  { opacity: 0;  transform: scale(1.35); }
    100% { opacity: 0;  transform: scale(1.35); }
}

.conn-icon[b-y5g21kznr5]  svg {
    width: 32px;
    height: 32px;
}

.conn-title[b-y5g21kznr5] {
    font-size: var(--font-size-lg, 20px);
    font-weight: 800;
    color: var(--text, rgba(0,0,0,.87));
    margin-bottom: 8px;
}

.conn-desc[b-y5g21kznr5] {
    font-size: var(--font-size-sm, 13px);
    line-height: 1.55;
    color: var(--text-2, rgba(0,0,0,.6));
}

/* Dòng trạng thái với ba chấm chạy so le cho thấy đang kiểm tra lại */
.conn-retry[b-y5g21kznr5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    font-size: var(--font-size-xs, 12px);
    color: var(--text-3, rgba(0,0,0,.38));
}

.conn-dots[b-y5g21kznr5] {
    display: inline-flex;
    gap: 4px;
}

.conn-dots i[b-y5g21kznr5] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: conn-dot-b-y5g21kznr5 1.2s ease-in-out infinite;
}

.conn-dots i:nth-child(2)[b-y5g21kznr5] { animation-delay: .18s; }
.conn-dots i:nth-child(3)[b-y5g21kznr5] { animation-delay: .36s; }

@keyframes conn-dot-b-y5g21kznr5 {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Nút bấm */
[b-y5g21kznr5] .conn-btn {
    width: 100%;
    margin-top: 20px;
    border-radius: var(--radius-pill, 999px);
    text-transform: none;
    font-weight: 700;
    padding: 10px 18px;
}
/* /DialogForm/DlgCaptureImages.razor.rz.scp.css */
/* Khung xem trước camera, nút chụp và dải ảnh thu nhỏ của popup chụp ảnh phiếu. */

.camera-wrapper[b-drntedx0mf] {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

/* Nháy sáng phản hồi lúc bấm chụp. */
.camera-wrapper:active[b-drntedx0mf]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 5;
}

.video-el[b-drntedx0mf] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shutter-container[b-drntedx0mf] {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: auto;
    height: auto;
}

.thumb-list[b-drntedx0mf] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0;
    min-height: 100px;
}

/* Nút chụp và ảnh thu nhỏ do MudBlazor render nên phải qua ::deep mới bám được. */
[b-drntedx0mf] .shutter {
    background: rgba(255,255,255,0.2) !important;
    backdrop-filter: blur(8px);
    border: 2px solid #fff !important;
}

[b-drntedx0mf] .shutter:active {
    transform: scale(0.9);
}

[b-drntedx0mf] .thumb-item-img {
    cursor: pointer;
    transition: transform 0.2s;
}

[b-drntedx0mf] .thumb-item-img:hover {
    transform: scale(1.05);
}
/* /DialogForm/DlgCustomerHistory.razor.rz.scp.css */
/* Tab lịch sử đơn của hộp thoại xem chi tiết khách hàng, bản mobile. */

.dch-mscroll[b-xvzot86sox] {
  height: 600px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px;
}

/* Dùng thanh tab tự dựng, ẩn thanh tab gốc trên mobile */
.dch-tabs-m[b-xvzot86sox]  .mud-tabs-tabbar { display: none; }
.dch-tabbar[b-xvzot86sox] { margin: 4px 8px 0; border-radius: var(--r-md); overflow: hidden; }

/* Nút Đóng rộng hết hàng, bỏ khoảng cách trên vì không có ô nhập phía trên */
.dch-close-btn.mud-button-root[b-xvzot86sox] { margin-top: 0 !important; }

.dch-mscroll .cust-empty[b-xvzot86sox] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  height: 100%; text-align: center; color: var(--text-3);
}

.dch-mscroll .info-card-detail .pd-row b[b-xvzot86sox]  .mud-icon-root {
  vertical-align: middle; margin-right: 2px; width: 15px; height: 15px; font-size: 15px;
}
/* /Pages/Functionality/Bills.razor.rz.scp.css */
/* Trang đơn hàng, cả desktop lẫn mobile. */

/* Bố cục desktop */

/* Bố cục mobile: thanh trên cố định, chỉ danh sách cuộn.
   Nút quét mã chỉ trang này mới có nên giữ ở đây. */
.bills-m[b-k4349j6gea]  .qr-btn {
  flex: none; width: 36px !important; height: 36px !important;
  border-radius: var(--r-sm) !important;
  background: var(--primary-soft) !important; color: var(--primary-dark) !important;
}
.bills-m[b-k4349j6gea]  .qr-btn:active { background: #DEDCF8 !important; }

/* Hàng chip lọc, không nền để thấy nền trang phía sau */
.bills-m .chips[b-k4349j6gea] {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 14px 8px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent);
  mask-image: linear-gradient(90deg,#000 0,#000 calc(100% - 32px),transparent);
}
.bills-m .chips[b-k4349j6gea]::-webkit-scrollbar { display: none; }
.bills-m[b-k4349j6gea]  .chips .chip {
  flex: none; display: flex; align-items: center;
  /* Bỏ lề mặc định của chip để khoảng cách chỉ do khai báo gap quyết định */
  margin: 0 !important;
  height: auto !important;
  padding: 8px 15px !important; border-radius: var(--r-pill) !important;
  background: var(--card) !important; color: var(--text-2);
  border: 1px solid var(--border);
  font-size: var(--font-size-base); font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform .14s cubic-bezier(.32,.72,.25,1),
              box-shadow .14s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.bills-m[b-k4349j6gea]  .chips .chip:active { transform: scale(.95); }
/* Khoảng cách giữa chữ và số đếm phải đặt ở lớp bọc bên trong chip mới có tác dụng */
.bills-m[b-k4349j6gea]  .chips .chip .mud-chip-content {
  display: flex; align-items: center; gap: 6px;
}
.bills-m .chips .chip .count[b-k4349j6gea] {
  background: var(--surface); border-radius: 999px;
  padding: 1px 7px; font-size: var(--font-size-sm); color: var(--text-3); font-weight: 700;
}
.bills-m[b-k4349j6gea]  .chips .chip.active {
  background: var(--grad-hero) !important; border-color: transparent;
  color: #fff !important; box-shadow: 0 6px 16px rgba(74,59,212,.30);
}
.bills-m .chips .chip.active .count[b-k4349j6gea] { background: rgba(255,255,255,.22); color: #fff; }

/* Danh sách thẻ phiếu, khoảng cách giữa các thẻ bằng lề dưới */
.bills-m .list[b-k4349j6gea] {
  flex: 1 1 auto;
  min-height: 0;   /* BẮT BUỘC, thiếu dòng này danh sách sẽ nở hết và thanh trên bị trôi */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 12px calc(var(--nav-clearance,110px) + env(safe-area-inset-bottom));
}
.bills-m .list[b-k4349j6gea]::-webkit-scrollbar { display: none; }
.bills-m .card[b-k4349j6gea] { margin-bottom: 10px; }
.bills-m[b-k4349j6gea]  .bill-skeleton { margin-bottom: 10px; animation: bills-card-in-b-k4349j6gea .6s cubic-bezier(.22,1,.36,1) both; }

/* Hiệu ứng hiện dần khi thẻ lọt vào khung nhìn. */
@keyframes bills-card-in-b-k4349j6gea {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bills-m .card.card-pop[b-k4349j6gea] {
  animation: bills-card-in-b-k4349j6gea .8s cubic-bezier(.22,1,.36,1) both;
}

@media (prefers-reduced-motion: reduce) {
  .bills-m .card.card-pop[b-k4349j6gea],
  .bills-m[b-k4349j6gea]  .bill-skeleton { animation: none; }
}

/* Thẻ phiếu */
.bills-m .b-head[b-k4349j6gea] { display: flex; align-items: center; gap: 11px; }
.bills-m .head-main[b-k4349j6gea] { flex: 1; min-width: 0; }
.bills-m .row-top[b-k4349j6gea] { display: flex; align-items: center; gap: 8px; }
.bills-m .bill-name[b-k4349j6gea] {
  font-size: var(--font-size-base); font-weight: 700; flex: 1; min-width: 0;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
/* Mũi tên để màu đậm hơn chữ phụ, tránh trông như đang bị vô hiệu hoá.
   Số điện thoại để cỡ chữ lớn hơn các dòng phụ khác cho dễ đọc chính xác. */
.bills-m .row-phone[b-k4349j6gea] {
  margin-top: 3px; font-size: var(--font-size-base); color: var(--text-3); line-height: var(--lh-snug);
}
.bills-m .row-meta[b-k4349j6gea] {
  display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 10px;
}
.bills-m .bill-code[b-k4349j6gea],
.bills-m .shelf-chip[b-k4349j6gea] {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--card); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 10px; font-size: var(--font-size-sm); font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.bills-m .bill-code:active[b-k4349j6gea],
.bills-m .shelf-chip:active[b-k4349j6gea] { background: var(--surface); border-color: var(--primary); }
.bills-m .bill-code[b-k4349j6gea] { flex: none; font-family: var(--font-mono); border-style: dashed; }
.bills-m .shelf-chip[b-k4349j6gea] { flex: 0 1 auto; min-width: 0; }
.bills-m .shelf-chip span[b-k4349j6gea] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bills-m .shelf-chip.none[b-k4349j6gea] { color: var(--text-3); border-style: dashed; }
.bills-m .row-bottom[b-k4349j6gea] {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  margin-top: 12px;
}
.bills-m .row-note[b-k4349j6gea] {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; border-top: 1px solid var(--line);
  padding: 12px 2px 0;
  font-size: var(--font-size-base); line-height: var(--lh-normal); color: var(--text-2);
}
.bills-m .row-note[b-k4349j6gea]  .mud-icon-root { flex: none; margin-top: 2px; width: 14px; height: 14px; font-size: 14px; }
.bills-m .row-note span[b-k4349j6gea] {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Cham vao the de mo phan chi tiet */
.bills-m .card.bill.collapsible[b-k4349j6gea] { cursor: pointer; }
.bills-m .card.bill.collapsible .ordr-detail[b-k4349j6gea] { display: none; margin-top: var(--space-3); padding: 6px 12px; }
.bills-m .card.bill.collapsible.open .ordr-detail[b-k4349j6gea] { display: block; }
/* Khi mo thi an phan tom tat vi thong tin da nam trong phan chi tiet */
.bills-m .card.bill.collapsible.open .row-meta[b-k4349j6gea],
.bills-m .card.bill.collapsible.open .row-bottom[b-k4349j6gea],
.bills-m .card.bill.collapsible.open .row-note[b-k4349j6gea] { display: none; }

/* Lớp bọc nút menu để bấm vào không mở luôn phần chi tiết */
.bills-m .menu-hit[b-k4349j6gea] { flex: none; display: inline-flex; align-items: center; }

/* Trạng thái rỗng */
.bills-empty[b-k4349j6gea] {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 60px 24px 110px; text-align: center; color: var(--text-3);
}

/* Phần riêng của bảng chọn ở trang này */
/* /Pages/Functionality/IncomeExpense.razor.rz.scp.css */
/* Trang thu chi, bản mobile. Chỉ giữ phần riêng của trang, phần dùng chung nằm ở CSS toàn cục. */
.ince-m .ince-scroll[b-gfwksifsuu] {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 14px 14px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.ince-m .ince-scroll[b-gfwksifsuu]::-webkit-scrollbar { display: none; }

/* Khung chờ và trạng thái rỗng */
.ince-m[b-gfwksifsuu]  .ince-skel { cursor: default; }
.ince-m .ince-empty[b-gfwksifsuu] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 60px 24px; text-align: center; color: var(--text-3);
}
/* /Pages/Functionality/IncomeExpenseDetail.razor.rz.scp.css */
/* Form thêm sửa một khoản thu chi, bản mobile. */
.inced-m .inced-scroll[b-vz78vodft8] {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.inced-m .inced-scroll[b-vz78vodft8]::-webkit-scrollbar { display: none; }

/* /Pages/Functionality/LoyaltyPrograms.razor.rz.scp.css */
/* Trang tích điểm và khuyến mãi, bản mobile. */

/* Khoảng cách dưới nhóm nút chọn trong thanh trên */
.lyl-m[b-6tvz7ijsqt]  .seg.mud-toggle-group { margin-bottom: 12px; }

.lyl-m .lyl-scroll[b-6tvz7ijsqt] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 12px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.lyl-m .lyl-scroll[b-6tvz7ijsqt]::-webkit-scrollbar { display: none; }

/* Cả hai tab luôn dựng sẵn, ẩn hiện bằng CSS để không mất dữ liệu đang nhập */
.lyl-m .lyl-panel[b-6tvz7ijsqt] { display: none; }
.lyl-m .lyl-panel.active[b-6tvz7ijsqt] { display: block; }

/* Tab Tích điểm */
.lyl-m[b-6tvz7ijsqt]  .lyl-card { margin-bottom: 12px; }
.lyl-m[b-6tvz7ijsqt]  .lyl-card-title {
  font-size: var(--font-size-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-2); margin-bottom: 4px;
}
.lyl-m[b-6tvz7ijsqt]  .rate-row { display: flex; align-items: flex-start; gap: 8px; }
.lyl-m[b-6tvz7ijsqt]  .rate-row > .mud-input-control { flex: 1 1 0; min-width: 0; }
.lyl-m[b-6tvz7ijsqt]  .rate-eq { flex: none; padding-bottom: 0; padding-top: 28px; color: var(--text-3); font-size: var(--font-size-lg); font-weight: 700; }
.lyl-m[b-6tvz7ijsqt]  .lyl-switch-row {
  margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line);
}
.lyl-m[b-6tvz7ijsqt]  .lyl-alert { margin-top: 12px; }
.lyl-m[b-6tvz7ijsqt]  .lyl-submit { margin-top: 4px; padding: 4px 2px 8px; }

/* Tab Khuyến mãi */
.lyl-m[b-6tvz7ijsqt]  .promo-wrap { position: relative; min-height: 40vh; }
.lyl-m[b-6tvz7ijsqt]  .promo-note {
  display: flex; align-items: flex-start; gap: 7px; margin-top: 11px;
  font-size: var(--font-size-sm); font-style: italic; color: var(--text-3); line-height: 1.4;
}
.lyl-m[b-6tvz7ijsqt]  .promo-note .mud-icon-root { flex: none; width: 16px; height: 16px; font-size: 16px; margin-top: 1px; }
.lyl-m[b-6tvz7ijsqt]  .promo-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 60px 24px; text-align: center; color: var(--text-3);
}
/* /Pages/Functionality/NewBill.razor.rz.scp.css */
/* Trang nhận đồ, bản mobile. Mỗi lần chỉ mở một phiếu nên dải tab bị ẩn hẳn. */
.newbill-m .newbill-scroll[b-3wmbiun07z] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Chặn vuốt dội ra lớp ngoài, nếu không thanh trên sẽ bị kéo trôi khi form còn ngắn */
  overscroll-behavior: contain;
  /* Ẩn thanh cuộn cho đồng bộ với các vùng cuộn mobile khác */
  scrollbar-width: none;
}
.newbill-m .newbill-scroll[b-3wmbiun07z]::-webkit-scrollbar { display: none; }

/* Ẩn hẳn dải tab trên mobile */
.newbill-m[b-3wmbiun07z]  .mud-tabs-tabbar { display: none; }

/* Bỏ nền trắng hai lớp bao ngoài để nền gradient của trang hiện xuyên qua */
.newbill-m[b-3wmbiun07z]  .newbill-tabwrap,
.newbill-m[b-3wmbiun07z]  .new-bill-root { background: transparent !important; }

/* Hai panel nội dung thành thẻ trắng bo góc có bóng, thay viền đứt nét cũ */
.newbill-m[b-3wmbiun07z]  .bill-detail-panel,
.newbill-m[b-3wmbiun07z]  .bill-right-paper {
  background: var(--color-card) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Card bọc ngoài để trong suốt, thẻ hiển thị thật là lớp bên trong */
.newbill-m[b-3wmbiun07z]  .bill-right-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Khoảng cách dọc đều 12px, khớp với lề hai bên */
.newbill-m[b-3wmbiun07z]  .bill-left-col { padding-top: 0 !important; }
.newbill-m[b-3wmbiun07z]  .bill-detail-panel { margin-bottom: 4px !important; }

/* Bù lại khoảng cách trên cùng đã mất khi ẩn dải tab */
.newbill-m[b-3wmbiun07z]  .newbill-tabwrap { padding-top: 12px !important; }

/* Đệm trên 4px để ô tìm kiếm bên trong không dính sát mép panel */
.newbill-m[b-3wmbiun07z]  .bill-detail-panel { padding-top: 4px !important; }

/* Bắc cầu lại chuỗi chiều cao cho desktop, vì lớp bọc thêm cho mobile đã chen vào giữa */
@media (min-width: 1024px) {
  .newbill-page > .newbill-wrap[b-3wmbiun07z] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .newbill-page[b-3wmbiun07z]  .newbill-tabwrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
}

/* Thanh nut Luu o mobile PHAI nam ngoai vung cuon, neu de ben trong thi iOS lam mat thanh nay */
.newbill-m .newbill-actions[b-3wmbiun07z] {
  flex: 0 0 auto;
  position: relative;
  z-index: 30;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
/* /Pages/Index.Mobile.razor.rz.scp.css */
/* Trang chủ, bản mobile */

.home-mobile[b-asqd4d2305] {
    display: flex;
    flex-direction: column;
    /* Neo theo chiều cao màn hình vì lớp bao ngoài cao theo nội dung */
    min-height: 100dvh;
}

/* Thanh trên cùng nền gradient */
.home-mobile[b-asqd4d2305]  .home-topbar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: max(env(safe-area-inset-top), 12px) 16px 12px;
    background: var(--primary);
    border-bottom: 3px solid var(--accent);
}

.home-mobile[b-asqd4d2305]  .home-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.home-mobile[b-asqd4d2305]  .home-logo-u {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    display: grid;
    place-items: center;
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-family: var(--font-brand);
}

.home-mobile[b-asqd4d2305]  .home-logo-word {
    font-size: var(--font-size-2xl);
    font-family: var(--font-brand);
    color: #fff;
    line-height: 1;
}

/* Vùng nội dung cuộn */
.home-mobile[b-asqd4d2305]  .home-scroll {
    flex: 1;
    /* Xếp dọc để chân trang ghim được xuống đáy khi nội dung ngắn */
    display: flex;
    flex-direction: column;
    padding: 16px 14px 16px;
}

/* Hàng chào người dùng */
.home-mobile[b-asqd4d2305]  .home-user {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 2px 2px 18px;
    text-decoration: none;
}

.home-mobile[b-asqd4d2305]  .home-user-meta {
    flex: 1;
    min-width: 0;
}

.home-mobile[b-asqd4d2305]  .home-user-meta .hi {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--text);
    line-height: var(--lh-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-mobile[b-asqd4d2305]  .home-user-meta .store {
    font-size: var(--font-size-base);
    color: var(--text-2);
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nền gradient đậm và icon trắng để nổi hẳn so với nền trang */
.home-mobile[b-asqd4d2305]  .home-user-av {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--grad-hero);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(74,59,212,.30);
}

.home-mobile[b-asqd4d2305]  .home-user-av .mud-icon-root {
    width: 30px;
    height: 30px;
    font-size: 30px;
}

/* Lưới thao tác nhanh */
.home-mobile[b-asqd4d2305]  .home-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.home-mobile[b-asqd4d2305]  .quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 8px 18px;
    border: none;
    border-radius: var(--r-xl);
    cursor: pointer;
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-ios), box-shadow var(--dur-fast);
}

.home-mobile[b-asqd4d2305]  .quick-tile:active {
    transform: scale(.95);
    box-shadow: 0 4px 12px rgba(46, 40, 90, .22);
}

/* icon trong vòng tròn kính sáng trên nền gradient */
.home-mobile[b-asqd4d2305]  .quick-tile .mud-icon-root {
    width: 24px;
    height: 24px;
    font-size: 24px;
    padding: 8px;
    box-sizing: content-box;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

.home-mobile[b-asqd4d2305]  .quick-tile.violet { background: var(--grad-hero); box-shadow: 0 8px 20px rgba(74, 59, 212, .34); }
.home-mobile[b-asqd4d2305]  .quick-tile.blue   { background: var(--grad-blue);  box-shadow: 0 8px 20px rgba(30, 111, 224, .32); }
.home-mobile[b-asqd4d2305]  .quick-tile.orange { background: linear-gradient(140deg, #FB8C00 0%, #E65100 100%); box-shadow: 0 8px 20px rgba(230, 81, 0, .32); }

/* Tiêu đề nhóm nội dung */
.home-mobile[b-asqd4d2305]  .home-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 2px 12px;
}

.home-mobile[b-asqd4d2305]  .home-section-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: .02em;
}

.home-mobile[b-asqd4d2305]  .home-section-action {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.home-mobile[b-asqd4d2305]  .home-section-action:active { opacity: .7; }

.home-mobile[b-asqd4d2305]  .home-section-action .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

/* Lưới ô số liệu tổng quan */
.home-mobile[b-asqd4d2305]  .home-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 28px;
}

.home-mobile[b-asqd4d2305]  .stat-tile {
    background: var(--card);
    border-radius: var(--r-md);
    padding: 16px 6px 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    box-shadow: var(--shadow-sm);
    /* Ô số liệu bấm được: bỏ kiểu link mặc định, thêm hiệu ứng nhấn như ô thao tác nhanh */
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-ios);
}

.home-mobile[b-asqd4d2305]  .stat-tile:active {
    transform: scale(.95);
}

.home-mobile[b-asqd4d2305]  .stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    line-height: 1;
}

.home-mobile[b-asqd4d2305]  .stat-label {
    font-size: var(--font-size-2xs);
    font-weight: 500;
    color: var(--text-2);
    text-align: center;
    line-height: var(--lh-snug);
}

.home-mobile[b-asqd4d2305]  .u-text-primary { color: var(--primary); }
.home-mobile[b-asqd4d2305]  .u-text-info    { color: var(--blue); }
.home-mobile[b-asqd4d2305]  .u-text-warning { color: var(--orange); }
.home-mobile[b-asqd4d2305]  .u-text-success { color: var(--green); }

/* Danh sách đơn hàng gần đây: bỏ gạch chân của link và bù đệm đáy cho khung chờ */
.home-mobile[b-asqd4d2305]  .home-recent {
    display: flex;
    flex-direction: column;
}

.home-mobile[b-asqd4d2305]  .home-recent .ordr-item {
    text-decoration: none;
}

.home-mobile[b-asqd4d2305]  .home-recent .recent-skeleton .ordr-headtop {
    padding-bottom: var(--pad-card);
}

/* Khung chờ và trạng thái rỗng */
.home-mobile[b-asqd4d2305]  .recent-skeleton {
    pointer-events: none;
}

/* Khung chờ cho ô số liệu, canh giữa như ô thật */
.home-mobile[b-asqd4d2305]  .stat-skeleton {
    pointer-events: none;
}

.home-mobile[b-asqd4d2305]  .stat-skeleton .mud-skeleton {
    border-radius: var(--r-sm);
}

.home-mobile[b-asqd4d2305]  .home-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 0;
    color: var(--text-3);
}

.home-mobile[b-asqd4d2305]  .home-empty-ic {
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: var(--text-3);
}

.home-mobile[b-asqd4d2305]  .home-empty-text {
    font-size: var(--font-size-sm);
}

/* Bản quyền và hotline hỗ trợ, luôn nằm ở đáy vùng cuộn */
.home-mobile[b-asqd4d2305]  .home-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 22px;
    padding-bottom: 4px;
}

.home-mobile[b-asqd4d2305]  .home-footer-copy {
    font-size: var(--font-size-xs);
    color: var(--text-3);
}

.home-mobile[b-asqd4d2305]  .home-footer-hotline.mud-chip {
    height: auto;
    padding: 7px 14px;
    background: var(--red-soft);
    color: var(--red);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.home-mobile[b-asqd4d2305]  .home-footer-hotline .mud-chip-icon {
    color: var(--red);
    width: 16px;
    height: 16px;
    font-size: 16px;
}
/* /Pages/Index.razor.rz.scp.css */
/* QA #11 (desktop only): rule global .mt-2 { margin-top: 1px !important } trong app.css bị dùng
   chung ở nhiều trang report khác (Bills, RevenueReportDetail, OtherIncome, OtherExpenses,
   FinancialDetail, FinancialReport, DlgCustomerHistory) — KHÔNG được sửa trực tiếp rule đó (sẽ phá
   desktop/mobile các trang kia). Thêm 1 class riêng cho đúng khối lưới module ở trang Home desktop,
   specificity 2 lớp (.idx-module-grid.mt-2) thắng rule 1 lớp gốc mà không đụng gì ở nơi khác.
   ::deep bắt buộc vì class gắn qua Class= lên <MudPaper> (component, DOM gốc không mang
   scope-attribute của Index.razor). */
[b-c6j5mtsr3f] .idx-module-grid.mt-2 {
  margin-top: 16px !important;
}
/* /Pages/ListItemPages/BankDetail.razor.rz.scp.css */
/* Form thêm/sửa tài khoản ngân hàng, giao diện mobile: áp shell mobile chung, field giữ nguyên MudBlazor. */

/* .bankd-m: shell flex-column 100dvh đã gộp global (app.mobile.css). */
.bankd-m .bankd-scroll[b-7c6hvdqcel] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.bankd-m .bankd-scroll[b-7c6hvdqcel]::-webkit-scrollbar { display: none; }

/* /Pages/ListItemPages/Banks.razor.rz.scp.css */
/* Trang tài khoản ngân hàng, bản mobile. */
.bank-m .bank-scroll[b-v1e87v5hwc] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 12px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.bank-m .bank-scroll[b-v1e87v5hwc]::-webkit-scrollbar { display: none; }

/* Hàng tài khoản: bố cục riêng vì hình dạng khác hàng chuẩn (logo, khối chi tiết, mũi tên) */
.bank-m .bank-row[b-v1e87v5hwc] {
  align-items: center;
  gap: 13px;
  padding-top: 13px;
  padding-bottom: 13px;
  --list-inset: 16px;
}

.bank-m .bank-logo[b-v1e87v5hwc] {
  flex: none;
  width: 66px;
  height: 50px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.bank-m .bank-logo[b-v1e87v5hwc]  img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bank-m .bank-logo[b-v1e87v5hwc]  .mud-icon-root { width: 26px; height: 26px; font-size: 26px; color: var(--text-3); }

.bank-m .bank-main[b-v1e87v5hwc] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bank-m .bank-name[b-v1e87v5hwc] { font-size: var(--font-size-md); font-weight: 700; color: var(--text); line-height: var(--lh-snug); }
.bank-m .bank-full[b-v1e87v5hwc] {
  font-size: var(--font-size-xs); color: var(--text-2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bank-m .bank-detail[b-v1e87v5hwc] { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.bank-m .bank-holder[b-v1e87v5hwc] { font-size: var(--font-size-sm); font-weight: 700; color: var(--text); }
.bank-m .bank-no[b-v1e87v5hwc] { font-family: 'Roboto Mono', monospace; font-size: var(--font-size-xs); color: var(--text-2); margin-top: 2px; }
.bank-m .bank-note[b-v1e87v5hwc] { font-size: var(--font-size-xs); font-style: italic; color: var(--text-3); margin-top: 3px; }

.bank-m .settings-chev[b-v1e87v5hwc] { flex: none; margin-left: -2px; }


.bank-m .bank-skel[b-v1e87v5hwc] { align-items: flex-start; }
.bank-m .bank-skel[b-v1e87v5hwc]  .mud-skeleton { border-radius: 10px; }
/* /Pages/ListItemPages/BillPrintedTemplate.razor.rz.scp.css */
/* Trang mẫu phiếu in, bản mobile. Trình soạn thảo lấp đầy khung, thêm thanh 3 nút dưới cùng. */
.pt-m .pt-editor-wrap[b-rcsmtfl3gx] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--color-card);
}

.pt-m[b-rcsmtfl3gx]  .pt-skel { height: 100% !important; }

/* Trình soạn thảo tự chèn markup sau khi trang render xong, cần dùng ::deep mới chỉnh được */
.pt-m[b-rcsmtfl3gx]  .note-editor.note-frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none;
  border-radius: 0;
}
.pt-m[b-rcsmtfl3gx]  .note-toolbar {
  flex: none;
  background: var(--color-card);
  border-bottom: 1px solid var(--line);
}
.pt-m[b-rcsmtfl3gx]  .note-editing-area {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pt-m[b-rcsmtfl3gx]  .note-editable {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Ẩn thanh kéo giãn chiều cao vì trình soạn thảo đã lấp đầy khung sẵn */
.pt-m[b-rcsmtfl3gx]  .note-statusbar { display: none; }

/* Thanh 3 nút dưới cùng: Lấy mẫu, Xem trước, Lưu thay đổi */
.pt-m .pt-actions[b-rcsmtfl3gx] {
  flex: none;
  display: flex;
  gap: 12px;
  padding: 10px 12px calc(12px + var(--nav-clearance, 110px));
  background: var(--color-card);
  border-top: 1px solid var(--line);
}
.pt-m[b-rcsmtfl3gx]  .pt-act.mud-button-root {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  border-radius: var(--r-md) !important;
  text-transform: none;
  font-size: var(--font-size-xs);
  padding-left: 4px;
  padding-right: 4px;
}
.pt-m .pt-act-skel[b-rcsmtfl3gx] { flex: 1 1 0; min-width: 0; height: 44px; border-radius: var(--r-md); }
/* /Pages/ListItemPages/CustomerDebtDetail.razor.rz.scp.css */
/* Chi tiết nợ khách hàng, bản mobile. */
.debt-m .debt-scroll[b-lvn9qza78w] {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.debt-m .debt-scroll[b-lvn9qza78w]::-webkit-scrollbar { display: none; }

/* Thẻ tổng nợ (hero) */
.debt-m .debt-card[b-lvn9qza78w] { padding: 22px 16px 18px; text-align: center; margin-bottom: 16px; }
.debt-m .debt-card .nm[b-lvn9qza78w] { font-size: var(--font-size-lg); font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.debt-m .debt-card .total-label[b-lvn9qza78w] { font-size: var(--font-size-sm); color: rgba(255,255,255,.85); margin-top: 10px; }
.debt-m .debt-card .total-amt[b-lvn9qza78w] { font-size: var(--font-size-2xl); font-weight: 800; color: #fff; margin-top: 3px; line-height: 1.1; }
/* Khung chờ lấy đúng lề của phần tử nó thay thế để không nhảy bố cục */
.debt-m .debt-card .debt-skel-nm[b-lvn9qza78w] { margin: 0 auto; }
.debt-m .debt-card .debt-skel-amt[b-lvn9qza78w] { margin: 3px auto 0; }
/* Cho nội dung nút nằm thẳng trong bố cục hàng ngang, bỏ viết hoa mặc định */
.debt-m[b-lvn9qza78w]  .debt-pay2 {
  width: 100%; border: none; border-radius: var(--r-md); background: #fff; color: var(--primary);
  font-family: inherit; cursor: pointer; padding: 12px 14px; margin-top: 16px; text-transform: none;
  display: flex; flex-direction: row; align-items: center; gap: 13px;
  box-shadow: 0 10px 26px rgba(28,18,70,.22); transition: transform .14s ease;
}
.debt-m[b-lvn9qza78w]  .debt-pay2 .mud-button-label { display: contents; }
.debt-m[b-lvn9qza78w]  .debt-pay2:disabled { opacity: .55; cursor: default; }
.debt-m[b-lvn9qza78w]  .debt-pay2:active:not(:disabled) { transform: scale(.98); }
.debt-m[b-lvn9qza78w]  .debt-pay2 .pay-ic2 {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary); display: grid; place-items: center;
}
.debt-m[b-lvn9qza78w]  .debt-pay2 .pay-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.debt-m[b-lvn9qza78w]  .debt-pay2 .main { font-size: var(--font-size-lg); font-weight: 800; color: var(--primary); }
.debt-m[b-lvn9qza78w]  .debt-pay2 .sub { font-size: var(--font-size-xs); font-weight: 500; color: var(--text-2); }
.debt-m[b-lvn9qza78w]  .debt-pay2 .pay-chev { flex: none; color: var(--primary); }

/* Lề của tiêu đề danh sách phải khớp đệm của từng phiếu để hai ô chọn thẳng hàng */
.debt-m .pts-listhead[b-lvn9qza78w] { display: flex; align-items: center; gap: 12px; margin: 0 14px 12px; }
.debt-m .pts-listhead .cnt[b-lvn9qza78w] { margin-left: auto; font-size: var(--font-size-sm); color: var(--text-3); }
.debt-m .pts-listhead .t[b-lvn9qza78w] { font-size: var(--font-size-sm); font-weight: 700; color: var(--text-2); }
.debt-m .debt-selall[b-lvn9qza78w] { display: flex; cursor: pointer; }

/* Chạm bất kỳ đâu trên hàng để chọn, nên ô chọn bỏ qua sự kiện chuột */
.debt-m[b-lvn9qza78w]  .chk-box { flex: none; margin: 0; padding: 0; }
/* Nền tròn nhạt quanh ô chọn của từng phiếu, không áp cho ô chọn tất cả */
.debt-m[b-lvn9qza78w]  .debt-item .chk-box .mud-icon-button { background: var(--surface); }
.debt-m[b-lvn9qza78w]  .debt-selall .chk-box .mud-checkbox,
.debt-m[b-lvn9qza78w]  .debt-selall .chk-box .mud-checkbox *,
.debt-m[b-lvn9qza78w]  .debt-item .chk-box .mud-checkbox,
.debt-m[b-lvn9qza78w]  .debt-item .chk-box .mud-checkbox * { pointer-events: none !important; }

/* Thẻ phiếu nợ: ô chọn canh giữa theo chiều dọc của cả thẻ */
.debt-m .debt-item[b-lvn9qza78w] {
  background: var(--card); border-radius: var(--r-md); padding: 13px 14px; margin-bottom: 10px;
  box-shadow: var(--shadow-card); display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.debt-m .debt-item-main[b-lvn9qza78w] { flex: 1; min-width: 0; }
.debt-m .debt-item-top[b-lvn9qza78w] { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Mã phiếu bấm được để mở chi tiết */
.debt-m[b-lvn9qza78w]  .debt-item .code { font-family: var(--font-mono); font-size: var(--font-size-base); font-weight: 700; color: var(--primary); }
.debt-m .debt-item .val[b-lvn9qza78w] {
  flex: none; font-size: var(--font-size-sm); font-weight: 700; color: var(--orange); background: var(--orange-soft);
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.debt-m .debt-item-meta[b-lvn9qza78w] { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 9px; }
.debt-m .debt-item-meta .who[b-lvn9qza78w], .debt-m .debt-item-meta .when[b-lvn9qza78w] { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); }
.debt-m .debt-item-meta .who[b-lvn9qza78w] { color: var(--text-2); }
.debt-m .debt-item-meta .when[b-lvn9qza78w] { color: var(--text-3); }
.debt-m .debt-item-meta[b-lvn9qza78w]  .mud-icon-root { flex: none; color: var(--text-3); width: 13px; height: 13px; font-size: 13px; }

/* Phiếu thu (lịch sử thanh toán) */
.debt-m .pay-item[b-lvn9qza78w] { padding: 14px; margin-bottom: 12px; cursor: pointer; }
.debt-m .pay-head[b-lvn9qza78w] { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.debt-m .pay-ic[b-lvn9qza78w] {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary); display: grid; place-items: center;
}
.debt-m .pay-ic[b-lvn9qza78w]  .mud-icon-root { width: 19px; height: 19px; font-size: 19px; }
.debt-m .pay-code[b-lvn9qza78w] { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--font-size-md); font-weight: 700; color: var(--primary); }
.debt-m .pay-amt[b-lvn9qza78w] {
  flex: none; font-size: var(--font-size-sm); font-weight: 700; color: var(--green); background: var(--green-soft);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
}
.debt-m .pay-rows[b-lvn9qza78w] { margin-top: 12px; display: flex; flex-direction: column; gap: 11px; }
.debt-m .pay-row[b-lvn9qza78w] { display: flex; align-items: center; gap: 9px; font-size: var(--font-size-sm); color: var(--text-2); }
.debt-m .pay-row[b-lvn9qza78w]  .mud-icon-root { flex: none; width: 16px; height: 16px; font-size: 16px; color: var(--text-3); }
.debt-m .pay-row b[b-lvn9qza78w] { color: var(--text); font-weight: 700; margin-left: 2px; }
/* /Pages/ListItemPages/CustomerDetail.razor.rz.scp.css */
/* Form thêm/sửa khách hàng, giao diện mobile: áp shell mobile chung, field giữ nguyên MudBlazor. */

/* .custd-m: shell flex-column 100dvh đã gộp global (app.mobile.css). */
.custd-m .custd-scroll[b-l1yple4dge] {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.custd-m .custd-scroll[b-l1yple4dge]::-webkit-scrollbar { display: none; }

/* /Pages/ListItemPages/CustomerPointHistory.razor.rz.scp.css */
/* Lịch sử điểm tích luỹ khách hàng, bản mobile.
   Vùng cố định gồm thẻ tổng và tiêu đề danh sách, không cuộn cùng danh sách. */
.pts-m .pts-fixed[b-k7u8usptxj] { flex: none; padding: 14px 14px 0; }

.pts-m .pts-scroll[b-k7u8usptxj] {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Bỏ đệm trên vì tiêu đề danh sách đã tự có khoảng cách riêng */
  padding: 0 14px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.pts-m .pts-scroll[b-k7u8usptxj]::-webkit-scrollbar { display: none; }

/* Thẻ tóm tắt khách hàng */
.pts-m .pts-head-card[b-k7u8usptxj] { padding: 18px; margin-bottom: 20px; }
.pts-m .pts-cust[b-k7u8usptxj] { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pts-m .pts-cust-av[b-k7u8usptxj] {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.20); color: #fff; border: 1px solid rgba(255,255,255,.32);
  display: grid; place-items: center;
}
.pts-m .pts-cust-av[b-k7u8usptxj]  .mud-icon-root { width: 22px; height: 22px; font-size: 22px; }
.pts-m .pts-cust .lbl[b-k7u8usptxj] { font-size: var(--font-size-sm); color: rgba(255,255,255,.82); }
.pts-m .pts-cust .nm[b-k7u8usptxj] { font-size: var(--font-size-lg); font-weight: 800; color: #fff; text-transform: uppercase; margin-top: 1px; }

.pts-m .pts-stats[b-k7u8usptxj] {
  display: flex;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-md); overflow: hidden;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pts-m .pts-stat[b-k7u8usptxj] { flex: 1; text-align: center; padding: 12px 8px; }
.pts-m .pts-stat + .pts-stat[b-k7u8usptxj] { border-left: 1px solid rgba(255,255,255,.18); }
.pts-m .pts-stat .l[b-k7u8usptxj] { font-size: var(--font-size-2xs); font-weight: 700; color: rgba(255,255,255,.80); text-transform: uppercase; letter-spacing: .03em; }
.pts-m .pts-stat .n[b-k7u8usptxj] { font-size: var(--font-size-xl); font-weight: 800; margin-top: 7px; line-height: 1; color: #fff; }
.pts-m .pts-stat .n.pts-red[b-k7u8usptxj] { color: #FFC7D4; }
.pts-m .pts-stat .n.pts-green[b-k7u8usptxj] { color: #8CF3C6; }

/* Khung chờ lấy đúng lề của phần tử nó thay thế để không nhảy bố cục */
.pts-m .pts-skel-nm[b-k7u8usptxj] { margin-top: 1px; }
.pts-m .pts-skel-n[b-k7u8usptxj] { margin: 7px auto 0; }

/* Thẻ giao dịch */
.pts-m .pts-tx[b-k7u8usptxj] { margin-bottom: 12px; }
.pts-m .pts-tx-top[b-k7u8usptxj] { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pts-m .pts-date[b-k7u8usptxj] { font-size: var(--font-size-xs); color: var(--text-3); margin-top: 8px; }
.pts-m .pts-delta[b-k7u8usptxj] { flex: none; text-align: right; }
.pts-m .pts-delta .d[b-k7u8usptxj] { font-size: var(--font-size-lg); font-weight: 800; color: var(--green); line-height: 1; }
.pts-m .pts-delta.pts-red .d[b-k7u8usptxj] { color: var(--red); }
.pts-m .pts-delta .l[b-k7u8usptxj] { font-size: var(--font-size-xs); font-weight: 600; color: var(--text-2); margin-top: 3px; }
.pts-m .pts-tx-foot[b-k7u8usptxj] {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 13px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.pts-m .pts-f .l[b-k7u8usptxj] { font-size: var(--font-size-xs); color: var(--text-3); }
.pts-m .pts-f .v[b-k7u8usptxj] { font-size: var(--font-size-md); font-weight: 800; color: var(--text); margin-top: 4px; }
.pts-m .pts-f.right[b-k7u8usptxj] { text-align: right; }

/* Nới khoảng đệm thanh công cụ bảng ở giao diện desktop. */
[b-k7u8usptxj] .mud-table-toolbar {
    padding-top: 10px !important;
    padding-inline-start: 10px !important;
    padding-inline-end: 10px !important;
}
/* /Pages/ListItemPages/Customers.razor.rz.scp.css */
/* Danh sách khách hàng, bản mobile. */

/* Dòng tóm tắt cần lề ngang riêng vì thanh trên trang này không có lớp bọc chung.
   TUYỆT ĐỐI không dùng lề âm ở đây, sẽ làm thẻ đầu tiên đè lên dòng tóm tắt khi cuộn. */
.cust-m .cust-summary[b-3safisne2m] { margin: 12px 14px 12px; }

.cust-m .cust-scroll[b-3safisne2m] {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Khoảng cách giữa các thẻ bằng lề dưới của từng thẻ, không dùng gap */
  padding: 0 var(--pad-card) calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.cust-m .cust-scroll[b-3safisne2m]::-webkit-scrollbar { display: none; }
/* Khoảng cách giữa các thẻ, áp cho cả thẻ thật lẫn khung chờ */
.cust-m[b-3safisne2m]  .cust { margin-bottom: var(--gap-list); }

.cust-m .cust-head[b-3safisne2m] { display: flex; gap: 11px; }
.cust-m .cust-head .head-main[b-3safisne2m] { flex: 1; min-width: 0; }
.cust-m .cust-row1[b-3safisne2m] { display: flex; align-items: center; gap: 8px; }
.cust-m .cust-name[b-3safisne2m] {
  flex: 1; min-width: 0; font-size: var(--font-size-base); font-weight: 700; color: var(--text);
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Mũi tên để màu đậm hơn chữ phụ, tránh trông như đang bị vô hiệu hoá */
.cust-m[b-3safisne2m]  .cust-menu {
  flex: none; width: 30px; height: 30px; margin: -4px -6px 0 0;
  border: none; background: none; color: var(--text-2); cursor: pointer;
  border-radius: 8px; display: grid; place-items: center;
}
.cust-m[b-3safisne2m]  .cust-menu:active { background: var(--surface); }
.cust-m[b-3safisne2m]  .cust-menu .mud-icon-root { width: 15px; height: 15px; font-size: 15px; }

.cust-m .debt-badge[b-3safisne2m] {
  flex: none; margin-top: 2px; font-size: var(--font-size-xs); font-weight: 700;
  color: var(--red); background: var(--red-soft); padding: 4px 11px; border-radius: 999px;
  white-space: nowrap; cursor: pointer;
}
/* Số điện thoại để cỡ chữ lớn hơn các dòng phụ khác cho dễ đọc chính xác */
.cust-m .cust-line[b-3safisne2m] {
  display: flex; align-items: center; gap: 8px; margin-top: 3px;
  font-size: var(--font-size-base); line-height: var(--lh-snug); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cust-m .cust-line.is-empty[b-3safisne2m] { color: var(--color-text-muted, var(--text-3)); }
.cust-m .cust-line .dot[b-3safisne2m] { color: var(--text-3); margin: 0 1px; }

.cust-m .cust-divider[b-3safisne2m] { height: 0; background: none; margin: 7px 0; }

/* Địa chỉ khi khách chưa từng phát sinh đơn: có vạch kẻ trên, tối đa hai dòng */
.cust-m .cust-addr[b-3safisne2m] {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; border-top: 1px solid var(--line);
  padding: 12px 2px 0;
  font-size: var(--font-size-base); line-height: var(--lh-normal); color: var(--text-2);
}
.cust-m .cust-addr[b-3safisne2m]  .mud-icon-root { flex: none; margin-top: 2px; color: var(--text-3); width: 14px; height: 14px; font-size: 14px; }
.cust-m .cust-addr span[b-3safisne2m] {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.cust-m .cust-stats[b-3safisne2m] { display: flex; gap: 10px; }
/* Ô số liệu không nền, chữ giá trị màu xanh tự báo hiệu bấm được */
.cust-m[b-3safisne2m]  .stat-box {
  flex: 1; min-width: 0;
  padding: 9px 10px; cursor: pointer;
  text-align: left; text-decoration: none; display: block;
}
/* Chưa có dữ liệu thì không cho bấm và làm mờ */
.cust-m[b-3safisne2m]  .stat-box.disabled,
.cust-m[b-3safisne2m]  .stat-box:disabled {
  cursor: default; opacity: .5; pointer-events: none;
}
/* Chưa bật tích điểm thì ô này không bấm được nên trả về màu chữ thường */
.cust-m[b-3safisne2m]  .stat-box.static { cursor: default; }
.cust-m[b-3safisne2m]  .stat-box.static .val { color: var(--text); }
.cust-m[b-3safisne2m]  .stat-box .lbl {
  font-size: var(--font-size-2xs); font-weight: 700; color: var(--text-3); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Giá trị bấm được thì tô màu xanh */
.cust-m[b-3safisne2m]  .stat-box .val {
  font-size: var(--font-size-sm); font-weight: 600; color: var(--blue, #2196F3); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cust-m[b-3safisne2m]  .stat-box .val b { font-weight: 800; }
.cust-m[b-3safisne2m]  .stat-box .val .sep { color: var(--text-3); margin: 0 2px; }

/* Khung chờ dùng đúng bố cục thật để không giật khung */
.cust-m .cust-skel[b-3safisne2m] { cursor: default; }
.cust-m .cust-skel[b-3safisne2m]  .mud-skeleton-circle { flex: none; }
/* /Pages/ListItemPages/ImpCustomer.razor.rz.scp.css */
/* ImpCustomer.razor.css — Nhập khách hàng từ file Excel, giao diện mobile (desktop giữ nguyên).
   Markup thật (shell + scroll + card) đã chuyển vào component dùng chung
   Shared/Components/ImportExcelForm.razor — CSS tương ứng (.impc-m .impc-scroll...) cũng đã chuyển
   sang ImportExcelForm.razor.css vì phần tử giờ do component đó render, không phải file này (scoped
   CSS ở đây sẽ không khớp được — xem comment tại ImportExcelForm.razor.css). File này không còn CSS
   riêng nào. */
/* /Pages/ListItemPages/ImpService.razor.rz.scp.css */
/* ImpService.razor.css — Nhập dịch vụ từ file Excel, giao diện mobile (desktop giữ nguyên).
   Markup thật (shell + scroll + card) đã chuyển vào component dùng chung
   Shared/Components/ImportExcelForm.razor — CSS tương ứng (.imps-m .imps-scroll...) cũng đã chuyển
   sang ImportExcelForm.razor.css vì phần tử giờ do component đó render, không phải file này (scoped
   CSS ở đây sẽ không khớp được — xem comment tại ImportExcelForm.razor.css). File này không còn CSS
   riêng nào. */
/* /Pages/ListItemPages/RackDetail.razor.rz.scp.css */
/* Form thêm/sửa kệ lưu đồ, giao diện mobile: áp shell mobile chung, field giữ nguyên MudBlazor. */

/* .rackd-m: shell flex-column 100dvh đã gộp global (app.mobile.css). */
.rackd-m .rackd-scroll[b-cikwlcqjop] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.rackd-m .rackd-scroll[b-cikwlcqjop]::-webkit-scrollbar { display: none; }

/* /Pages/ListItemPages/Racks.razor.rz.scp.css */
/* Trang kệ lưu đồ, bản mobile. */
.rack-m .rack-scroll[b-jm7ffi8g1i] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 12px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.rack-m .rack-scroll[b-jm7ffi8g1i]::-webkit-scrollbar { display: none; }

/* Hàng kệ: không có icon dẫn đầu nên lề và đường kẻ thụt 16px */
.rack-m .rack-row[b-jm7ffi8g1i] {
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
  --list-inset: 16px;
}

.rack-m .rack-main[b-jm7ffi8g1i] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rack-m .rack-name[b-jm7ffi8g1i] {
  font-size: var(--font-size-md); font-weight: 500; color: var(--text); line-height: var(--lh-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rack-m .rack-note[b-jm7ffi8g1i] {
  font-size: var(--font-size-xs); font-style: italic; color: var(--text-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rack-m .settings-chev[b-jm7ffi8g1i] { flex: none; margin-left: -2px; }


.rack-m .rack-skel[b-jm7ffi8g1i] { min-height: 50px; }
/* /Pages/ListItemPages/ServiceDetail.razor.rz.scp.css */
/* Form thêm/sửa dịch vụ, giao diện mobile: áp shell mobile chung, field giữ nguyên MudBlazor. */

/* .svcd-m: shell flex-column 100dvh đã gộp global (app.mobile.css). */
.svcd-m .svcd-scroll[b-2mfy9p2k21] {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.svcd-m .svcd-scroll[b-2mfy9p2k21]::-webkit-scrollbar { display: none; }


/* Icon xoá trên topnav — .nav-icon-btn ép màu chữ mặc định (!important) nên cần selector riêng đè
   lại thành đỏ cho đúng ý nghĩa hành động huỷ. MudIconButton là component nên phải qua ::deep từ
   .svcd-m (element literal viết tay trong ServiceDetail.razor). */
.svcd-m[b-2mfy9p2k21]  .svcd-delete-btn { color: var(--red) !important; }
/* /Pages/ListItemPages/Services.razor.rz.scp.css */
/* Trang bảng giá dịch vụ, bản mobile. */
.svc-m .svc-scroll[b-24cwnwi3x4] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 12px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}

.svc-m .svc-scroll[b-24cwnwi3x4]::-webkit-scrollbar {
  display: none;
}

/* Banner nhắc khi ở chế độ Sắp xếp, đứng ngoài vùng cuộn nên không trôi theo danh sách */
.svc-m .svc-sortbar[b-24cwnwi3x4] {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 12px;
  background: var(--color-card);
  border: 1px solid rgba(251, 140, 0, .35);
  border-radius: var(--r-md);
  padding: 12px 12px;
  box-shadow: var(--shadow-sm);
}

.svc-m .svc-sortbar .txt[b-24cwnwi3x4] {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-xs);
  line-height: var(--lh-normal);
  color: var(--text-2);
}

.svc-m .svc-sortbar .txt b[b-24cwnwi3x4] {
  color: var(--orange);
}

/* Icon chèn giữa dòng chữ cho nút đưa lên đầu, ép cỡ nhỏ và căn theo dòng chữ */
.svc-m .svc-sortbar .txt[b-24cwnwi3x4]  .svc-sortbar-ic {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--green);
  vertical-align: text-bottom;
  margin: 0 1px;
}

.svc-m .svc-sortbar .save[b-24cwnwi3x4] {
  flex: none;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: .02em;
  padding: 10px 13px;
}

.svc-m .svc-sortbar .save:active[b-24cwnwi3x4] {
  opacity: .85;
}

/* Mỗi dòng dịch vụ: nền trắng, bo góc đầu cuối để trông như một khối card liền */
.svc-m .svc-row[b-24cwnwi3x4] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px 13px 16px;
  background: var(--color-card);
  cursor: pointer;
  /* Vạch chia dòng căn theo biến này, để thẳng hàng với chữ thay vì thụt lệch */
  --list-inset: 16px;
}

.svc-m .svc-row--first[b-24cwnwi3x4] {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.svc-m .svc-row--last[b-24cwnwi3x4] {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.svc-m .svc-main[b-24cwnwi3x4] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.svc-m .svc-name[b-24cwnwi3x4] {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text);
  line-height: var(--lh-snug);
}

.svc-m .svc-note[b-24cwnwi3x4] {
  font-size: var(--font-size-xs);
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.35;
}

.svc-m .svc-unit[b-24cwnwi3x4] {
  flex: none;
  min-width: 42px;
  text-align: right;
  font-size: var(--font-size-sm);
  color: var(--text-2);
}

.svc-m .svc-unit.none[b-24cwnwi3x4] {
  color: var(--text-3);
}

.svc-m .svc-price[b-24cwnwi3x4] {
  flex: none;
  min-width: 66px;
  text-align: right;
  font-size: var(--font-size-md);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
}

/* Mũi tên cuối dòng */
.svc-m .settings-chev[b-24cwnwi3x4] {
  margin-left: -4px;
}

/* Ô nhập số thứ tự trong chế độ Sắp xếp */
.svc-m .svc-order[b-24cwnwi3x4] {
  flex: none;
  width: 84px;
}

.svc-m .svc-order[b-24cwnwi3x4]  .mud-input-slot {
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: 700;
}

.svc-m .svc-order[b-24cwnwi3x4]  .mud-input-adornment {
  margin-left: 0;
}


.svc-m .svc-skel[b-24cwnwi3x4] {
  display: flex;
}
/* Ô nhập đơn giá: in đậm cho dễ đọc khi rà bảng giá. */
[b-24cwnwi3x4] .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
    font-weight: bold !important;
}
/* /Pages/ListItemPages/ShopDetail.razor.rz.scp.css */
/* Form thêm/sửa cửa hàng, giao diện mobile: áp shell mobile chung, field giữ nguyên MudBlazor. */

/* .shopd-m: shell flex-column 100dvh đã gộp global (app.mobile.css). */
.shopd-m .shopd-scroll[b-fua3fxy72c] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.shopd-m .shopd-scroll[b-fua3fxy72c]::-webkit-scrollbar { display: none; }

/* /Pages/ListItemPages/Shops.razor.rz.scp.css */
/* Danh sách cửa hàng, bản mobile. Mỗi cửa hàng một thẻ rời, có khoảng cách dọc. */
.shop-m .shop-scroll[b-lk553tda92] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.shop-m .shop-scroll[b-lk553tda92]::-webkit-scrollbar { display: none; }

/* Cả thẻ bấm được để mở bảng chọn */
.shop-m .shop[b-lk553tda92] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.shop-m .shop:active[b-lk553tda92] { background: var(--surface); }
.shop-m .shop.shop-skel[b-lk553tda92] { cursor: default; }
.shop-m .shop.shop-skel:active[b-lk553tda92] { background: var(--color-card); }

/* Hàng đầu thẻ: mã cửa hàng, tên và mũi tên chỉ dấu bấm được */
.shop-m .shop-top[b-lk553tda92] { display: flex; align-items: center; gap: 9px; }
.shop-m .shop-code[b-lk553tda92] {
  flex: none; font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 700;
  color: var(--primary-dark); background: var(--primary-soft);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.shop-m .shop-name[b-lk553tda92] {
  flex: 1; min-width: 0; font-size: var(--font-size-md); font-weight: 800; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-m .shop-menu[b-lk553tda92] {
  flex: none; width: 30px; height: 30px; margin: -4px -6px 0 0;
  color: var(--text-3); display: grid; place-items: center;
}
.shop-m .shop-menu[b-lk553tda92]  .mud-icon-root { width: 20px; height: 20px; font-size: 20px; }

/* Dòng thông tin: icon nhỏ và chữ, tự xuống dòng khi tràn */
.shop-m .shop-line[b-lk553tda92] {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px;
  font-size: var(--font-size-base); color: var(--text-2); line-height: 1.35;
}
.shop-m .shop-line[b-lk553tda92]  .mud-icon-root { flex: none; width: 15px; height: 15px; font-size: 15px; color: var(--text-3); }
.shop-m .shop-line .dot[b-lk553tda92], .shop-m .shop-line .bar[b-lk553tda92] { color: var(--border); }
.shop-m .shop-line .mail[b-lk553tda92] { color: var(--text-2); word-break: break-all; }
.shop-m .shop-line .vat[b-lk553tda92] { font-weight: 600; color: var(--text-2); }

/* Nhãn Sử dụng bảng giá riêng, icon check xanh */
.shop-m .shop-tag[b-lk553tda92] {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 11px;
  font-size: var(--font-size-base); color: var(--text-2);
}
.shop-m .shop-tag[b-lk553tda92]  .mud-icon-root { flex: none; width: 15px; height: 15px; font-size: 15px; color: var(--green); }

/* /Pages/ListItemPages/Status.razor.rz.scp.css */
/* Trang trạng thái phiếu, bản mobile. */
.status-m .status-scroll[b-igwkle63bx] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 12px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.status-m .status-scroll[b-igwkle63bx]::-webkit-scrollbar { display: none; }

/* Hàng trạng thái: hai dòng tiêu đề và mô tả, canh trên. Không có icon dẫn đầu nên lề thụt 16px. */
.status-m[b-igwkle63bx]  .st-row { --list-inset: 16px; }
/* Chỉ còn phần khác biệt riêng của trang này */
.status-m .st-row__content[b-igwkle63bx] {
  align-items: flex-start;
  gap: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.status-m .st-meta[b-igwkle63bx] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.status-m .st-title[b-igwkle63bx] {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--font-size-md); font-weight: 700; color: var(--text); line-height: var(--lh-snug);
}
.status-m[b-igwkle63bx]  .st-lock { flex: none; width: 15px; height: 15px; font-size: 15px; color: var(--red, #e23b3b); }
.status-m .st-desc[b-igwkle63bx] {
  margin-top: 4px; font-size: var(--font-size-sm); line-height: 1.4; color: var(--text-3); font-style: italic;
}
.status-m .st-desc.custom[b-igwkle63bx] { font-style: normal; }

/* Mũi tên canh với dòng tiêu đề */
.status-m .settings-chev[b-igwkle63bx] { flex: none; margin-top: 1px; }

.status-m .st-skel[b-igwkle63bx] { align-items: flex-start; }

/* Ghi chú khoá trong bảng chọn, thay cho nút Sửa/Xoá */
.status-m .sheet-locked-note[b-igwkle63bx] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 2px 6px 6px;
  padding: 12px 14px;
  border-radius: var(--r-md, 14px);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--font-size-sm);
  line-height: var(--lh-normal);
}
.status-m .sheet-locked-note[b-igwkle63bx]  .mud-icon-root {
  flex: none; width: 18px; height: 18px; font-size: 18px; color: var(--text-3); margin-top: 1px;
}
/* /Pages/ListItemPages/StatusDetail.razor.rz.scp.css */
/* Form thêm/sửa trạng thái phiếu, giao diện mobile: áp shell mobile chung, field giữ nguyên MudBlazor. */

/* .statusd-m: shell flex-column 100dvh đã gộp global (app.mobile.css). */
.statusd-m .statusd-scroll[b-ergbsvh8t5] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.statusd-m .statusd-scroll[b-ergbsvh8t5]::-webkit-scrollbar { display: none; }

/* /Pages/ListItemPages/UnitDetail.razor.rz.scp.css */
/* Form thêm/sửa đơn vị tính, giao diện mobile: áp shell mobile chung, field giữ nguyên MudBlazor. */

/* .unitd-m: shell flex-column 100dvh đã gộp global (app.mobile.css). */
.unitd-m .unitd-scroll[b-r4ctf1vkhj] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.unitd-m .unitd-scroll[b-r4ctf1vkhj]::-webkit-scrollbar { display: none; }

/* /Pages/ListItemPages/Units.razor.rz.scp.css */
/* Trang đơn vị tính, bản mobile. */
.unit-m .unit-scroll[b-jvupg80h1t] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 12px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.unit-m .unit-scroll[b-jvupg80h1t]::-webkit-scrollbar { display: none; }

/* Hàng đơn vị: không có icon dẫn đầu nên lề và đường kẻ thụt 16px */
.unit-m[b-jvupg80h1t]  .unit-row { --list-inset: 16px; }
/* Chỉ còn phần khác biệt riêng của trang này */
.unit-m .unit-row__content[b-jvupg80h1t] {
  align-items: center;
  gap: 12px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.unit-m .unit-main[b-jvupg80h1t] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.unit-m .unit-name[b-jvupg80h1t] {
  font-size: var(--font-size-md); font-weight: 500; color: var(--text); line-height: var(--lh-snug);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.unit-m .unit-note[b-jvupg80h1t] {
  font-size: var(--font-size-xs); font-style: italic; color: var(--text-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.unit-m .settings-chev[b-jvupg80h1t] { flex: none; margin-left: -2px; }


.unit-m .unit-skel[b-jvupg80h1t] { min-height: 48px; }
/* /Pages/Overview.razor.rz.scp.css */
/* Trang Tổng quan hôm nay, chỉ có bản mobile. Thanh trên đứng yên, chỉ vùng nội dung cuộn. */

.ov-scroll[b-z5zabwicpa] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 14px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.ov-scroll[b-z5zabwicpa]::-webkit-scrollbar {
  display: none;
}

.ov-title[b-z5zabwicpa] {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text);
  margin: 4px 4px 12px;
}
.ov-title.mt[b-z5zabwicpa] {
  margin-top: 24px;
}

/* Thẻ doanh thu hôm nay */
.ov-hero[b-z5zabwicpa] {
  padding: 20px 18px;
  margin-bottom: 4px;
}
.ov-hero-top[b-z5zabwicpa] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ov-hero-label[b-z5zabwicpa] {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--font-size-sm);
  opacity: .9;
}
.ov-hero-date[b-z5zabwicpa] {
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: rgba(255,255,255,.16);
  padding: 4px 10px;
  border-radius: 999px;
}
.ov-hero-value[b-z5zabwicpa] {
  font-size: var(--font-size-display);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 8px;
  line-height: 1;
}
.ov-hero-value .u[b-z5zabwicpa] {
  font-size: var(--font-size-lg);
  font-weight: 700;
  opacity: .85;
}
.ov-hero-trend[b-z5zabwicpa] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-top: 8px;
  opacity: .95;
}
.ov-hero-trend.down[b-z5zabwicpa] {
  color: #FFD3D0;
}
.ov-hero-skel[b-z5zabwicpa] {
  margin-top: 8px;
  background-color: rgba(255, 255, 255, .22) !important;
  border-radius: 6px;
}

/* Trạng thái đơn: lưới 2x2, mỗi ô bấm được để mở danh sách đơn tương ứng */
.ov-grid[b-z5zabwicpa] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ov-m[b-z5zabwicpa]  .ov-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
}
.ov-card-ic[b-z5zabwicpa] {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
}
.ov-card-ic .mud-icon-root[b-z5zabwicpa] {
  font-size: 20px;
}
.ov-card-body[b-z5zabwicpa] {
  flex: 1;
  min-width: 0;
}
.ov-card-num[b-z5zabwicpa] {
  font-size: var(--font-size-xl);
  font-weight: 800;
  line-height: 1;
}
.ov-card-lbl[b-z5zabwicpa] {
  font-size: var(--font-size-xs);
  color: var(--text-2);
  margin-top: 4px;
}

/* Thanh toán hôm nay: cột giá trị bên phải mỗi hàng */
[b-z5zabwicpa] .ov-row-right {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
}
[b-z5zabwicpa] .ov-row-val {
  font-size: var(--font-size-md);
  font-weight: 800;
  color: var(--text);
}
/* Dùng tên lớp riêng, KHÔNG đặt tên trùng với lớp tiện ích màu của thư viện */
[b-z5zabwicpa] .ov-row-val.ov-green {
  color: var(--green);
}
[b-z5zabwicpa] .ov-row-val.ov-red {
  color: var(--red);
}
[b-z5zabwicpa] .ov-row-cnt {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-3);
}

/* Dòng tổng: nền nhạt, chữ đậm hơn */
[b-z5zabwicpa] .ov-total {
  background: #FAFAFC;
}
[b-z5zabwicpa] .ov-total .settings-label {
  font-weight: 700;
}
[b-z5zabwicpa] .ov-total .ov-row-val {
  color: var(--primary);
  font-size: var(--font-size-md);
}
/* /Pages/Report/FinancialChart.razor.rz.scp.css */
/* Trang báo cáo kinh doanh. Khối card tổng đầu trang và các bảng xếp hạng dùng chung
   cho cả mobile lẫn desktop. */

.rpt-m[b-qujzyengic]  .rpt-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 14px 16px calc(var(--nav-clearance,110px) + env(safe-area-inset-bottom));
}
.rpt-m[b-qujzyengic]  .rpt-scroll::-webkit-scrollbar { display: none; }

.rpt-m[b-qujzyengic]  .flt-group { margin-bottom: 20px; }
.rpt-m[b-qujzyengic]  .flt-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 14px;
  cursor: pointer;
  position: relative;
}
.rpt-m[b-qujzyengic]  .flt-row + .flt-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50px;
  right: 0;
  height: 1px;
  background: var(--color-hairline);
  transform: scaleY(.5);
}
.rpt-m[b-qujzyengic]  .flt-row:active { background: rgba(28,27,46,.045); }
.rpt-m[b-qujzyengic]  .flt-ic { flex: none; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary-dark); display: grid; place-items: center; }
.rpt-m[b-qujzyengic]  .flt-ic svg { width: 17px; height: 17px; }
.rpt-m[b-qujzyengic]  .flt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rpt-m[b-qujzyengic]  .flt-label { font-size: var(--font-size-xs); color: var(--text-3); }
.rpt-m[b-qujzyengic]  .flt-value { font-size: var(--font-size-md); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt-m[b-qujzyengic]  .flt-chev { flex: none; color: var(--text-3); }

.rpt-m[b-qujzyengic]  .rpt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 22px; }
.rpt-m[b-qujzyengic]  .rpt-stat { cursor: pointer; transition: transform var(--dur-fast) var(--ease-ios), box-shadow var(--dur-fast); }
.rpt-m[b-qujzyengic]  .rpt-stat:active { transform: scale(.98); box-shadow: var(--shadow-md); }
.rpt-m[b-qujzyengic]  .rpt-stat .lbl { font-size: var(--font-size-sm); color: var(--text-2); line-height: var(--lh-snug); min-height: 31px; }
.rpt-m[b-qujzyengic]  .rpt-stat .amt { font-size: var(--font-size-lg); font-weight: 800; margin-top: 7px; color: var(--c, #5246E0); line-height: 1; }
.rpt-m[b-qujzyengic]  .rpt-stat .stat-foot { display: flex; align-items: center; margin-top: 8px; }
.rpt-m[b-qujzyengic]  .rpt-stat .cnt { flex: 0 1 auto; max-width: 100%; display: inline-flex; align-items: center; gap: 4px; width: fit-content; font-size: var(--font-size-xs); font-weight: 700; color: var(--c, #5246E0); background: color-mix(in srgb, var(--c, #5246E0) 10%, #fff 90%); border-radius: 999px; padding: 3px 6px 3px 8px; line-height: var(--lh-tight); white-space: nowrap; }
.rpt-m[b-qujzyengic]  .rpt-stat .cnt .flt-chev { opacity: .62; color: inherit; }
.rpt-m[b-qujzyengic]  .rpt-stat-skel { cursor: default; }
.rpt-m[b-qujzyengic]  .rpt-stat-skel:active { transform: none; }

/* Bốn card tổng đầu trang bản desktop. Riêng card Khách nợ để nền trắng chữ đỏ cho nổi bật. */
.rpt-kpi[b-qujzyengic] {
    border-radius: var(--radius-card, 16px);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    color: #fff;
    transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.rpt-kpi:hover[b-qujzyengic], .rpt-kpi:focus-visible[b-qujzyengic] { transform: translateY(-2px); }
.rpt-kpi-head[b-qujzyengic] { display: flex; align-items: center; justify-content: space-between; }
.rpt-kpi-icon[b-qujzyengic] { flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.22); display: grid; place-items: center; }
.rpt-kpi-right[b-qujzyengic] { display: flex; align-items: center; gap: 6px; }
.rpt-kpi-badge[b-qujzyengic] { background: rgba(255,255,255,.22); border-radius: 9999px; padding: 3px 10px; font-size: .72rem; font-weight: 500; white-space: nowrap; }
.rpt-kpi-chev[b-qujzyengic] { opacity: .8; }
.rpt-kpi-lbl[b-qujzyengic] { font-size: .75rem; opacity: .85; letter-spacing: .02em; }
.rpt-kpi-amt[b-qujzyengic] { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }

.rpt-kpi--purple[b-qujzyengic] { background: linear-gradient(135deg, #7C6CF5 0%, #4F3FD6 100%); box-shadow: 0 8px 20px rgba(79,63,214,.25); }
.rpt-kpi--purple:hover[b-qujzyengic] { box-shadow: 0 12px 26px rgba(79,63,214,.35); }
.rpt-kpi--green[b-qujzyengic] { background: linear-gradient(135deg, #4CD08A 0%, #0FA660 100%); box-shadow: 0 8px 20px rgba(15,166,96,.25); }
.rpt-kpi--green:hover[b-qujzyengic] { box-shadow: 0 12px 26px rgba(15,166,96,.35); }
.rpt-kpi--orange[b-qujzyengic] { background: linear-gradient(135deg, #FFA257 0%, #F4631E 100%); box-shadow: 0 8px 20px rgba(244,99,30,.25); }
.rpt-kpi--orange:hover[b-qujzyengic] { box-shadow: 0 12px 26px rgba(244,99,30,.35); }

.rpt-kpi--debt[b-qujzyengic] { background: #fff; color: #1a1a1a; box-shadow: var(--shadow-card-soft); }
.rpt-kpi--debt:hover[b-qujzyengic] { box-shadow: var(--shadow-card-soft-hover); }
.rpt-kpi--debt .rpt-kpi-icon[b-qujzyengic] { background: #FCE0DE; color: #D32F2F; }
.rpt-kpi--debt .rpt-kpi-badge[b-qujzyengic] { background: #FCE0DE; color: #D32F2F; }
.rpt-kpi--debt .rpt-kpi-chev[b-qujzyengic] { color: rgba(0,0,0,.4); opacity: 1; }
.rpt-kpi--debt .rpt-kpi-lbl[b-qujzyengic] { opacity: 1; color: rgba(0,0,0,.6); }
.rpt-kpi--debt .rpt-kpi-amt[b-qujzyengic] { color: #D32F2F; }

/* Khung chờ đổi sang trắng mờ vì màu xám gần như không thấy trên nền đậm */
.rpt-kpi:not(.rpt-kpi--debt)[b-qujzyengic]  .mud-skeleton { background-color: rgba(255,255,255,.32); }
.rpt-kpi:not(.rpt-kpi--debt)[b-qujzyengic]  .mud-skeleton-wave::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); }

.rpt-m[b-qujzyengic]  .rpt-card { padding: 16px; margin-bottom: 16px; overflow: hidden; }
.rpt-m[b-qujzyengic]  .rpt-card-title { font-size: var(--font-size-md); font-weight: 700; color: var(--text); margin-bottom: 12px; }
.rpt-m[b-qujzyengic]  .rpt-chart-skel { border-radius: var(--r-md); }

/* Biểu đồ: card trắng, chú thích nhỏ, không thanh công cụ */
.rpt-m[b-qujzyengic]  .apexcharts-canvas,
.rpt-m[b-qujzyengic]  .apexcharts-svg { max-width: 100%; }
.rpt-m[b-qujzyengic]  .apexcharts-gridline { stroke: rgba(127, 127, 160, .14) !important; }
.rpt-m[b-qujzyengic]  .apexcharts-xaxis-tick,
.rpt-m[b-qujzyengic]  .apexcharts-xaxis line,
.rpt-m[b-qujzyengic]  .apexcharts-yaxis line { stroke: transparent !important; }
.rpt-m[b-qujzyengic]  .apexcharts-bar-area { filter: drop-shadow(0 4px 8px rgba(82,70,224,.10)); }
.rpt-m[b-qujzyengic]  .rpt-card:first-of-type .apexcharts-bar-area:nth-of-type(odd) { fill: var(--primary) !important; }
.rpt-m[b-qujzyengic]  .rpt-card:first-of-type .apexcharts-bar-area:nth-of-type(even) { fill: var(--green) !important; }
.rpt-m[b-qujzyengic]  .apexcharts-legend { justify-content: center !important; gap: 12px; padding-top: 2px !important; }
.rpt-m[b-qujzyengic]  .apexcharts-legend-marker { border-radius: 999px !important; }
.rpt-m[b-qujzyengic]  .apexcharts-legend-text { font-family: var(--font-ui) !important; font-size: var(--font-size-sm) !important; color: var(--text-2) !important; }
.rpt-m[b-qujzyengic]  .apexcharts-xaxis text,
.rpt-m[b-qujzyengic]  .apexcharts-yaxis text,
.rpt-m[b-qujzyengic]  .apexcharts-datalabel,
.rpt-m[b-qujzyengic]  .apexcharts-text { font-family: var(--font-ui) !important; fill: var(--text-3) !important; }
.rpt-m[b-qujzyengic]  .apexcharts-tooltip { border-radius: var(--r-md) !important; box-shadow: var(--shadow-md) !important; border: 0 !important; }
.rpt-m[b-qujzyengic]  .apexcharts-tooltip-title { font-family: var(--font-ui) !important; background: var(--surface) !important; border-bottom-color: var(--line) !important; }
.rpt-m[b-qujzyengic]  .apexcharts-tooltip-series-group { font-family: var(--font-ui) !important; }
.rpt-m[b-qujzyengic]  .rpt-card:last-of-type .apexcharts-yaxis-label { font-size: var(--font-size-xs) !important; }
.rpt-m[b-qujzyengic]  .rpt-card:last-of-type .apexcharts-bar-area { fill: var(--primary) !important; }
/* Bảng xếp hạng Top dịch vụ, dùng chung cho mobile và desktop.
   Số hạng dùng chung với Top khách hàng nên hai nơi phải giống hệt nhau:
   hạng 1 nền hổ phách, hạng 2-3 nền tím nhạt, còn lại nền xám. */
.rpt-rank-badge[b-qujzyengic] { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: var(--font-size-xs); font-weight: 700; background: #f0f1f6; color: var(--text-3); }
.top-service-item[data-svc-rank="1"] .rpt-rank-badge[b-qujzyengic],
.top-cust-item[data-rank="1"] .rpt-rank-badge[b-qujzyengic] { background: #FFB300; color: #fff; }
.top-service-item[data-svc-rank="2"] .rpt-rank-badge[b-qujzyengic],
.top-service-item[data-svc-rank="3"] .rpt-rank-badge[b-qujzyengic],
.top-cust-item[data-rank="2"] .rpt-rank-badge[b-qujzyengic],
.top-cust-item[data-rank="3"] .rpt-rank-badge[b-qujzyengic] { background: var(--primary-soft); color: var(--primary); }

/* Đệm dọc và đường kẻ để nhịp dòng khớp với Top khách hàng nằm cạnh bên */
.top-service-item[b-qujzyengic] { display: flex; align-items: center; gap: 10px; padding: 13px 0; }
.top-service-item + .top-service-item[b-qujzyengic] { border-top: 1px solid var(--color-hairline); }
.top-service-body[b-qujzyengic] { flex: 1; min-width: 0; }
.top-service-head[b-qujzyengic] { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
/* Cỡ chữ khớp với phần nội dung còn lại của trang */
.top-service-name[b-qujzyengic] { min-width: 0; color: var(--text); font-size: var(--mud-typography-body1-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-service-qty[b-qujzyengic] { color: var(--text-3); font-size: var(--font-size-sm); }
.top-service-track[b-qujzyengic] { height: 6px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.top-service-bar[b-qujzyengic] { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary-light), var(--primary)); }
.top-service-amount[b-qujzyengic] { flex: none; color: var(--text-2); font-size: var(--font-size-base); font-weight: 700; white-space: nowrap; }

/* Top khách hàng: hạng, tên, số đơn và tiền */
.top-cust-item[b-qujzyengic] { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.top-cust-item + .top-cust-item[b-qujzyengic] { border-top: 1px solid var(--color-hairline); }
.top-cust-info[b-qujzyengic] { flex: 1; min-width: 0; }
.top-cust-name[b-qujzyengic] { font-size: var(--mud-typography-body1-size); color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Số điện thoại và địa chỉ cũng cắt bớt khi quá dài */
.top-cust-sub[b-qujzyengic] { font-size: var(--font-size-xs); color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-cust-sub .dot[b-qujzyengic] { color: var(--text-3); margin: 0 4px; }
.top-cust-amount-wrap[b-qujzyengic] { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.top-cust-amount[b-qujzyengic] { font-weight: 700; color: var(--text); font-size: var(--font-size-base); }
.top-cust-count[b-qujzyengic] { font-size: var(--font-size-xs); color: var(--text-3); }

/* Trạng thái đơn: vòng tròn và chú thích, dùng chung mobile và desktop */
.rpt-donut-wrap[b-qujzyengic] { display: flex; align-items: center; gap: 18px; }
.rpt-donut[b-qujzyengic] { position: relative; width: 132px; height: 132px; border-radius: 50%; flex: none; }
.rpt-donut-hole[b-qujzyengic] { position: absolute; inset: 26px; background: var(--card); border-radius: 50%; display: grid; place-items: center; text-align: center; }
.rpt-donut-hole .n[b-qujzyengic] { font-size: var(--font-size-xl); font-weight: 800; line-height: 1; color: var(--text); }
.rpt-donut-hole .l[b-qujzyengic] { font-size: var(--font-size-2xs); color: var(--text-2); margin-top: 3px; }
.rpt-legend2[b-qujzyengic] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
/* Cỡ chữ khớp với phần nội dung còn lại của trang */
.rpt-legend2-item[b-qujzyengic] { display: flex; align-items: center; gap: 9px; font-size: var(--mud-typography-body1-size); color: var(--text); }
.rpt-legend2-dot[b-qujzyengic] { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.rpt-legend2-item .c[b-qujzyengic] { margin-left: auto; font-weight: 800; color: var(--text-2); }
.rpt-empty[b-qujzyengic] { padding: 28px 8px; text-align: center; font-size: var(--font-size-base); color: var(--text-3); }

/* Bảng chọn cửa hàng và thời gian */
.rpt-m[b-qujzyengic]  .bsheet-backdrop { position: fixed; inset: 0; background: rgba(18,16,40,.45); opacity: 0; pointer-events: none; transition: opacity .22s ease; z-index: calc(var(--z-sheet) - 1); }
.rpt-m[b-qujzyengic]  .bsheet-backdrop.open { opacity: 1; pointer-events: auto; }
.rpt-m[b-qujzyengic]  .bsheet {
  position: fixed; bottom: 0; left: 0; right: 0; transform: translateY(105%);
  width: 100%; background: var(--card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
  transition: transform .26s cubic-bezier(.32,.72,.25,1); z-index: var(--z-sheet);
  box-shadow: var(--shadow-pop); max-height: 80vh; overflow-y: auto;
}
.rpt-m[b-qujzyengic]  .bsheet.open { transform: translateY(0); }
.rpt-m[b-qujzyengic]  .bsheet-h { font-size: var(--font-size-md); font-weight: 700; text-align: center; padding: 4px 0 10px; }
.rpt-m[b-qujzyengic]  .opt { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: none; font-family: inherit; cursor: pointer; text-align: left; padding: 13px 12px; font-size: var(--font-size-md); color: var(--text); border-radius: var(--r-md); text-transform: none; }
/* Cho nội dung nút nằm thẳng trong bố cục hàng ngang để icon chọn đẩy được sang phải */
.rpt-m[b-qujzyengic]  .opt .mud-button-label { display: contents; }
.rpt-m[b-qujzyengic]  .opt:active { background: var(--surface); }
.rpt-m[b-qujzyengic]  .opt.sel { color: var(--primary); font-weight: 600; }
.rpt-m[b-qujzyengic]  .opt .opt-check { margin-left: auto; color: var(--primary); opacity: 0; }
.rpt-m[b-qujzyengic]  .opt.sel .opt-check { opacity: 1; }
.rpt-m[b-qujzyengic]  .opt + .opt { border-top: .5px solid rgba(60,60,67,.1); border-radius: 0; }
.rpt-m[b-qujzyengic]  .opt .box { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--color-border); display: grid; place-items: center; color: #fff; }
.rpt-m[b-qujzyengic]  .opt.on .box { background: var(--primary); border-color: var(--primary); }
.rpt-m[b-qujzyengic]  .opt .box svg { opacity: 0; }
.rpt-m[b-qujzyengic]  .opt.on .box svg { opacity: 1; }
.rpt-m[b-qujzyengic]  .opt .stx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpt-m[b-qujzyengic]  .bsheet-apply { width: calc(100% - 8px); justify-content: center; margin: 12px 4px 4px; padding: 12px; border: none; border-radius: var(--r-md); color: var(--primary); background: var(--primary-soft); font-size: var(--font-size-md); font-weight: 700; font-family: inherit; }
.rpt-m[b-qujzyengic]  .bsheet-apply:active { background: #DEDCF8; }
/* Vòng quay chờ phủ kín vùng biểu đồ đang dựng */
.rpt-chart-load[b-qujzyengic] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: #fff;
    z-index: 1;
}

/* Vùng biểu đồ làm gốc định vị cho vòng quay chờ */
.rpt-chart-wrap[b-qujzyengic] { position: relative; min-height: 350px; height: 100%; }
/* Thông báo rỗng phủ kín vùng biểu đồ và căn giữa hai chiều */
.rpt-chart-wrap > .rpt-empty[b-qujzyengic] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Riêng card Trạng thái đơn tự căn giữa hai chiều vì nội dung nhỏ hơn card */
.rpt-chart-wrap--center[b-qujzyengic] {
    display: flex; align-items: center; justify-content: center;
    /* Mốc để vòng tròn co giãn theo bề rộng thật của card chứ không theo màn hình */
    container-type: inline-size;
    container-name: rpt-status;
}

/* Ép card cao bằng ô chứa để hai card cùng hàng không lệch chiều cao */
[b-qujzyengic] .mud-card { height: 100%; }

/* Vòng tròn co giãn theo bề rộng card, có chặn trên chặn dưới để không tràn hay quá nhỏ.
   Giữ đúng tỷ lệ độ dày vành như bản mobile. Chữ chú thích không giãn theo. */
@container rpt-status (min-width: 1px) {
    .rpt-donut[b-qujzyengic] { width: clamp(132px, 34cqw, 320px); height: clamp(132px, 34cqw, 320px); }
    .rpt-donut-hole[b-qujzyengic] { inset: clamp(26px, 6.7cqw, 63px); }
    .rpt-donut-hole .n[b-qujzyengic] { font-size: clamp(22px, 4.4cqw, 42px); }
    .rpt-donut-hole .l[b-qujzyengic] { font-size: clamp(11px, 1.7cqw, 16px); }
    .rpt-donut-wrap[b-qujzyengic] { gap: clamp(18px, 3cqw, 40px); }
}
/* /Pages/Report/FinancialDetail.razor.rz.scp.css */
/* Trang chi tiet don, ban mobile.
   LUU Y: trong file nay khong viet ten lop kem dau cham o comment, se lam hong rule ngay sau do. */

/* Khoang cach giua cac the bang le duoi */
.fd-m[b-d1cgbm6g26]  .list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 14px calc(var(--nav-clearance,110px) + env(safe-area-inset-bottom));
}
.fd-m[b-d1cgbm6g26]  .list::-webkit-scrollbar { display: none; }

/* The tong no, chi con khoang cach rieng cua trang nay */
.fd-m[b-d1cgbm6g26]  .fd-debt-total { margin-bottom: 14px; }

/* Ghi chu, chi khai le rieng */
.fd-m[b-d1cgbm6g26]  .incd-note { margin: 6px 14px 0; }

/* Che do xem theo ngay khong gap mo duoc: bo con tro va hieu ung nhan */
.fd-m[b-d1cgbm6g26]  .day-card.fd-plain { cursor: default; }
.fd-m[b-d1cgbm6g26]  .day-card.fd-plain:active { transform: none; }

/* Khung cho luc dang tai va trang thai rong */
.fd-m[b-d1cgbm6g26]  .fd-skel { cursor: default; }
.fd-m[b-d1cgbm6g26]  .fd-skel:active { transform: none; }
.fd-m[b-d1cgbm6g26]  .fd-skel-money { display: flex; flex-direction: column; align-items: flex-end; }
.fd-m[b-d1cgbm6g26]  .fd-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 60px 24px; text-align: center; color: var(--text-3);
}


/* /Pages/Report/FinancialReport.razor.rz.scp.css */
/* Trang sổ quỹ cửa hàng, bản mobile */

/* Desktop: rộng hai phần ba, dưới 1400px thì rộng hết hàng, cùng mốc với thanh điều hướng trên */
.fr-desktop-col[b-eetv0jc9iz] { width: 100%; }
@media (min-width: 1400px) {
    .fr-desktop-col[b-eetv0jc9iz] { width: 66.666667%; }
}

/* Vùng cuộn nội dung */
.cashbook-m .cb-scroll[b-eetv0jc9iz] {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance,110px) + env(safe-area-inset-bottom));
}
.cashbook-m .cb-scroll[b-eetv0jc9iz]::-webkit-scrollbar { display: none; }

/* Chỉ còn khoảng cách riêng của trang này */
.cashbook-m .cb-note[b-eetv0jc9iz] { margin: 0 4px 10px; }

/* Bảng thu chi */
.cashbook-m .cb-row[b-eetv0jc9iz] {
  position: relative;
  display: flex; align-items: flex-start;
  padding: 14px; gap: 8px;
  --list-inset: 14px;
}
.cashbook-m .cb-row + .cb-row[b-eetv0jc9iz]::before {
  content: '';
  position: absolute; top: 0; left: var(--list-inset,14px); right: 14px;
  height: 1px; background: var(--color-hairline);
  transform: scaleY(.5); transform-origin: 0 0;
}
.cashbook-m .cb-row-main[b-eetv0jc9iz] { flex: 1; min-width: 0; }
.cashbook-m .cb-row-title[b-eetv0jc9iz] { font-size: var(--font-size-base); color: var(--text); line-height: 1.35; }
.cashbook-m .cb-row-sub[b-eetv0jc9iz] { font-size: var(--font-size-sm); color: var(--text-3); margin-top: 3px; line-height: 1.35; }
.cashbook-m .cb-row-val[b-eetv0jc9iz] { flex: none; font-size: var(--font-size-md); font-weight: 700; color: var(--text); margin-top: 1px; }
/* Dùng tên lớp riêng, KHÔNG đặt tên trùng với lớp tiện ích màu của thư viện */
.cashbook-m .cb-row-val.cb-in[b-eetv0jc9iz] { color: var(--green); }
.cashbook-m .cb-row.link[b-eetv0jc9iz] { cursor: pointer; }
.cashbook-m .cb-row.link:active[b-eetv0jc9iz] { background: rgba(28,27,46,.04); }
.cashbook-m[b-eetv0jc9iz]  .cb-row-chev { flex: none; color: var(--text-3); margin: 1px -2px 0 0; }

/* Hàng tổng hợp A / B / C */
.cashbook-m .cb-row.sum[b-eetv0jc9iz] { background: var(--color-surface-sunken); align-items: center; }
.cashbook-m .cb-row.sum[b-eetv0jc9iz]::before { display: none; }
.cashbook-m .cb-row.sum .cb-row-title[b-eetv0jc9iz] { font-size: var(--font-size-base); font-weight: 700; color: var(--text); }
/* Công thức phụ tách xuống dòng riêng, chữ nhỏ hơn tiêu đề */
.cashbook-m .cb-row.sum .cb-row-sub[b-eetv0jc9iz] { font-size: var(--font-size-xs); color: var(--text-3); margin-top: 2px; }
.cashbook-m .cb-row.sum .cb-row-val[b-eetv0jc9iz] {
  background: var(--surface); padding: 6px 13px; border-radius: 999px;
  font-size: var(--font-size-md); font-weight: 800;
}
.cashbook-m .cb-row.total .cb-row-val[b-eetv0jc9iz] { background: var(--primary-soft); color: var(--primary-dark); }

/* Khung chờ dùng đúng bố cục thật để không giật khung khi có dữ liệu */
.cashbook-m .cb-hero-skel-txt[b-eetv0jc9iz] { flex: 1; min-width: 0; }
/* Khối chữ của khung chờ phải khai lại phần co giãn vì dùng tên lớp riêng */
.cashbook-m .cb-mini-skel-txt[b-eetv0jc9iz] { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cashbook-m .cb-skel-row .cb-skel-val[b-eetv0jc9iz] { flex: none; margin: 1px 0 0 auto; }
/* /Pages/Report/OtherExpenses.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   OtherExpenses.razor.css — Chi tiết chi khác, giao diện mobile (desktop giữ nguyên).
   Nguồn đối chiếu: Mobile.Prototype/expense-detail.html + styles.css khối "SCREEN: EXPENSE-DETAIL".

   Quy ước ::deep: dùng thống nhất `.oexp-m ::deep …` cho MỌI rule trong file này.
   PRIMITIVE DÙNG CHUNG đã ở app.mobile.css (global, KHÔNG lặp lại): .header-zone/.topnav/
   .sheet-backdrop/.flt-sheet/.btn-primary/.search-collapse/.search/.card/.card--interactive,
   .card-pop, .pts-listhead, .incd-filters/.incd-filt (+.incd-skelv), .pd-row (base),
   .incd-note (base), .status (base + màu cash/bank). Card "phiếu chi khác" (.oth-item/.oth-top/
   .oth-meta/.oth-detail/.oth-amt.chi/.oth-skel/.oth-empty) đã promote sang app.mobile.css — dùng
   chung với OtherIncome.razor. File này chỉ còn phần riêng của trang: shell + vùng cuộn.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shell .oexp-m: flex column fill viewport, header cố định — đã gộp chung ở app.mobile.css ── */

/* Dùng block, không dùng flex kèm gap, để khoảng cách giữa các thẻ không bị lệch. */
.oexp-m[b-6af4tmc277]  .list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 14px calc(var(--nav-clearance,110px) + env(safe-area-inset-bottom));
}
.oexp-m[b-6af4tmc277]  .list::-webkit-scrollbar { display: none; }

/* Ghi chú (Description) — chỉ margin riêng (base .incd-note ở app.mobile.css), đặt sau panel */
.oexp-m[b-6af4tmc277]  .incd-note { margin: 10px 14px 0; }
/* /Pages/Report/OtherIncome.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   OtherIncome.razor.css — Chi tiết thu khác, giao diện mobile (desktop giữ nguyên).
   Nguồn đối chiếu: Mobile.Prototype/other-income.html + styles.css khối "SCREEN: OTHER-INCOME".

   Quy ước ::deep: dùng thống nhất `.oinc-m ::deep …` cho MỌI rule trong file này.
   PRIMITIVE DÙNG CHUNG đã ở app.mobile.css (global, KHÔNG lặp lại): .header-zone/.topnav/
   .sheet-backdrop/.flt-sheet/.btn-primary/.search-collapse/.search/.card/.card--interactive,
   .card-pop, .pts-listhead, .incd-filters/.incd-filt (+.incd-skelv), .pd-row (base),
   .incd-note (base), .status (base + màu cash/bank). Card "phiếu thu khác" (.oth-item/.oth-top/
   .oth-meta/.oth-detail/.oth-amt.thu/.oth-skel/.oth-empty) đã promote sang app.mobile.css — dùng
   chung với OtherExpenses.razor. File này chỉ còn phần riêng của trang: shell + vùng cuộn.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shell .oinc-m: flex column fill viewport, header cố định — đã gộp chung ở app.mobile.css ── */

/* Dùng block, không dùng flex kèm gap, để khoảng cách giữa các thẻ không bị lệch. */
.oinc-m[b-fuiesgwimc]  .list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 14px calc(var(--nav-clearance,110px) + env(safe-area-inset-bottom));
}
.oinc-m[b-fuiesgwimc]  .list::-webkit-scrollbar { display: none; }

/* Ghi chú (Description) — chỉ margin riêng (base .incd-note ở app.mobile.css), đặt sau panel */
.oinc-m[b-fuiesgwimc]  .incd-note { margin: 10px 14px 0; }
/* /Pages/Report/ReceivableReport.razor.rz.scp.css */
/* Trang chi tiết chưa thu, bản mobile. */

/* Khoảng cách giữa các thẻ bằng lề dưới */
.rcv-m[b-xnf50p1sq7]  .list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 14px calc(var(--nav-clearance,110px) + env(safe-area-inset-bottom));
}
.rcv-m[b-xnf50p1sq7]  .list::-webkit-scrollbar { display: none; }

/* Thẻ tổng tiền chưa thu, chỉ còn khoảng cách riêng của trang này */
.rcv-m[b-xnf50p1sq7]  .unpd-total { margin-bottom: 14px; }

/* Ghi chú, chỉ khai lề riêng */
.rcv-m[b-xnf50p1sq7]  .incd-note { margin: 6px 14px 0; }

/* Mỗi ngày một thẻ riêng, không gập mở được nên bỏ con trỏ và hiệu ứng nhấn */
.rcv-m[b-xnf50p1sq7]  .day-card { cursor: default; }
.rcv-m[b-xnf50p1sq7]  .day-card:active { transform: none; }

/* Khung chờ dùng đúng bố cục thật, và trạng thái rỗng */
.rcv-m[b-xnf50p1sq7]  .rcv-skel { cursor: default; }
.rcv-m[b-xnf50p1sq7]  .rcv-skel:active { transform: none; }
.rcv-m[b-xnf50p1sq7]  .rcv-skel-money { display: flex; flex-direction: column; align-items: flex-end; }
.rcv-m[b-xnf50p1sq7]  .rcv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 60px 24px; text-align: center; color: var(--text-3);
}

/* /Pages/Report/RevenueReportDetail.razor.rz.scp.css */
/* Trang chi tiet thu, ban mobile.
   LUU Y: trong file nay khong viet ten lop kem dau cham o comment, se lam hong rule ngay sau do. */

/* Khoang cach giua cac the bang le duoi */
.rrd-m[b-lhclj7hln7]  .list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 14px calc(var(--nav-clearance,110px) + env(safe-area-inset-bottom));
}
.rrd-m[b-lhclj7hln7]  .list::-webkit-scrollbar { display: none; }

/* O chon nhieu de xuat hoa don dien tu.
   Le trai cua o chon-tat-ca phai bu them cho thang hang voi o chon cua tung the ben duoi. */
.rrd-m[b-lhclj7hln7]  .incd-selall { display: flex; cursor: pointer; margin-left: var(--pad-card); }
.rrd-m[b-lhclj7hln7]  .incd-chk { flex: none; margin: 0; padding: 0; }
/* Nen tron nhat quanh o chon cua tung the, khong ap cho o chon-tat-ca */
.rrd-m[b-lhclj7hln7]  .ordr-headtop .incd-chk .mud-icon-button { background: var(--surface); }
/* Dau dang chon dung thuoc tinh rieng, KHONG dung them ten lop: danh sach lop cua the
   phai la hang so, neu khong trang thai dong mo do JS quan ly se bi xoa mat. */
.rrd-m[b-lhclj7hln7]  .incd-item[data-sel] { box-shadow: 0 0 0 1.5px var(--primary), var(--shadow-card); }

/* Ghi chu, chi khai le rieng */
.rrd-m[b-lhclj7hln7]  .incd-note { margin: 6px 14px 0; }

/* Nut xuat hoa don dien tu: rong het hang, ke phan cach tren, bo goc theo day the */
.rrd-m[b-lhclj7hln7]  .incd-einv {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; border: none; border-top: 1px solid var(--line);
  background: transparent; color: var(--primary);
  font-family: inherit; font-size: var(--font-size-base); font-weight: 600;
  padding: 12px; cursor: pointer; text-transform: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.rrd-m[b-lhclj7hln7]  .incd-einv .mud-button-label { display: contents; }
.rrd-m[b-lhclj7hln7]  .incd-einv:active { background: var(--primary-soft); }

/* Thanh hanh dong day man hinh: xuat hoa don dien tu hang loat, rong het man hinh */
.rrd-m[b-lhclj7hln7]  .incd-selbar {
  position: fixed; bottom: 0; left: 0; right: 0; transform: translateY(110%);
  background: var(--card); color: var(--text);
  border: none; border-top: 1px solid var(--line); cursor: pointer; font-family: inherit; text-align: left;
  padding: 16px 18px calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 13px; text-transform: none;
  box-shadow: 0 -8px 28px rgba(46,40,90,.14);
  z-index: 30; transition: transform .28s cubic-bezier(.32,.72,.25,1);
}
.rrd-m[b-lhclj7hln7]  .incd-selbar .mud-button-label { display: contents; }
.rrd-m[b-lhclj7hln7]  .incd-selbar.show { transform: translateY(0); }
.rrd-m[b-lhclj7hln7]  .incd-selbar:active { background: var(--surface); }
.rrd-m[b-lhclj7hln7]  .incd-selbar .ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.rrd-m[b-lhclj7hln7]  .incd-selbar .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rrd-m[b-lhclj7hln7]  .incd-selbar .main { font-size: var(--font-size-base); font-weight: 800; color: var(--primary); }
.rrd-m[b-lhclj7hln7]  .incd-selbar .sub { font-size: var(--font-size-base); color: var(--text-2); font-weight: 600; }
.rrd-m[b-lhclj7hln7]  .incd-selbar .chev { flex: none; color: var(--text-3); }

/* Khung cho luc dang tai va trang thai rong */
.rrd-m[b-lhclj7hln7]  .rrd-skel { cursor: default; }
.rrd-m[b-lhclj7hln7]  .rrd-skel:active { transform: none; }
.rrd-m[b-lhclj7hln7]  .rrd-skel-money { display: flex; flex-direction: column; align-items: flex-end; }
.rrd-m[b-lhclj7hln7]  .rrd-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 60px 24px; text-align: center; color: var(--text-3);
}
/* /Pages/SystemPages/ChangePassword.razor.rz.scp.css */
/* Đổi mật khẩu, giao diện mobile: theo khuôn shell "Detail form" chung — app bar cố định trên,
   nội dung cuộn riêng, nút submit ghim đáy. */

/* .chpwd-m: shell flex-column 100dvh đã gộp global (app.mobile.css). */
.chpwd-m .chpwd-scroll[b-efzyh320fa] {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.chpwd-m .chpwd-scroll[b-efzyh320fa]::-webkit-scrollbar { display: none; }

/* Nút submit ghim đáy vùng cuộn — markup dùng chung class "form-submit-bar" (position:sticky/bottom/
   padding đã ở app.mobile.css, dùng chung với 8 trang Detail khác) + "chpwd-submit" chỉ còn override
   phần khác biệt thật của riêng trang này: margin-top hẹp hơn (form ngắn, 3 field) và nền gradient
   che nội dung cuộn phía sau nút (form-submit-bar chung hiện không có nền — cố ý không đổi global ở
   đây để không ảnh hưởng 8 trang Detail khác chưa được test lại). */
.chpwd-m .chpwd-submit[b-efzyh320fa] {
  margin-top: 20px;
  background: linear-gradient(180deg, transparent, var(--bg, #F4F3FB) 24%);
}
/* /Pages/SystemPages/Options.razor.rz.scp.css */
/* Trang Quản lý, bản mobile. Chỉ giữ phần riêng của trang, phần dùng chung nằm ở CSS toàn cục. */

/* Khoảng đệm nội dung, phần đáy nhỏ vì lớp ngoài đã chừa chỗ cho thanh điều hướng dưới */
.more-scroll[b-7lhkksrs86] {
    padding: 14px 16px 24px;
}

/* Khoảng cách giữa các nhóm, riêng trang này */
.more-scroll[b-7lhkksrs86]  .settings-group {
    margin-bottom: 22px;
}

/* Thẻ thông tin cửa hàng: nền gradient tím, chữ và icon đổi sang trắng cho đủ tương phản */
.more-scroll[b-7lhkksrs86]  .store-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    margin-bottom: 22px;
    background: var(--grad-hero) !important;
    box-shadow: 0 8px 20px rgba(74,59,212,.30);
}

/* Logo cửa hàng: nền trắng mờ để nổi trên nền gradient tím */
.more-scroll[b-7lhkksrs86]  .store-logo {
    flex: none;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: var(--font-size-2xl);
    font-weight: 800;
    line-height: 1;
    font-family: var(--font-brand);
}

.more-scroll[b-7lhkksrs86]  .store-info {
    flex: 1;
    min-width: 0;
}

/* Tên tiệm chỉ một dòng, dài hơn thì cắt bớt */
.more-scroll[b-7lhkksrs86]  .store-name {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: #fff;
    line-height: var(--lh-snug);
    letter-spacing: -.01em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    word-break: break-word;
}

.more-scroll[b-7lhkksrs86]  .store-addr {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, .85);
    margin-top: 4px;
    line-height: 1.35;
    min-width: 0;
}

/* Địa chỉ cũng chỉ một dòng */
.more-scroll[b-7lhkksrs86]  .store-addr span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    word-break: break-word;
}

.more-scroll[b-7lhkksrs86]  .store-addr .mud-icon-root {
    flex: none;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}

.more-scroll[b-7lhkksrs86]  .store-card > .chev {
    flex: none;
    color: rgba(255, 255, 255, .85);
    font-size: 20px;
}

/* Hàng tài khoản người dùng */
.more-scroll[b-7lhkksrs86]  .uavatar {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, #FFE4C4 0%, #FFD1A8 100%);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(28, 27, 46, .12);
}

.more-scroll[b-7lhkksrs86]  .uavatar .mud-icon-root {
    font-size: 18px;
    color: #8A4D16;
}

.more-scroll[b-7lhkksrs86]  .user-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 400;
}

.more-scroll[b-7lhkksrs86]  .uname {
    display: block;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text);
    line-height: var(--lh-snug);
}

.more-scroll[b-7lhkksrs86]  .urole {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-3);
    margin-top: 2px;
}

/* Hàng đăng xuất */
.more-scroll[b-7lhkksrs86]  .settings-row.logout {
    color: var(--red);
    font-weight: 600;
    font-size: var(--font-size-md);
    --list-inset: 0;
}

.more-scroll[b-7lhkksrs86]  .logout-icon {
    color: var(--red);
    font-size: 19px;
}

.more-scroll[b-7lhkksrs86]  .settings-row.logout::before {
    left: 0;
}
/* /Pages/SystemPages/SystemLogs.razor.rz.scp.css */
/* SystemLogs.razor.css — Nhật ký hệ thống, giao diện mobile (desktop giữ nguyên). Tham khảo
   Mobile.Prototype/logs.html. Trang chỉ xem, không có action sheet/FAB. Header/search-collapse/
   flt-sheet/daterow/df-mud dùng chung style global (app.mobile.css) — chỉ khai báo phần riêng trang. */

/* .log-m: shell flex-column 100dvh đã gộp global (app.mobile.css). */
.log-m .log-scroll[b-2n9hy6d0hs] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 12px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.log-m .log-scroll[b-2n9hy6d0hs]::-webkit-scrollbar { display: none; }

/* Badge hành động — nền trong suốt, viền theo màu (khớp Mobile.Prototype .log-act) */
.log-m .log-act[b-2n9hy6d0hs] {
  flex: none;
  margin-left: auto;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid currentColor;
}
.log-m .log-act.green[b-2n9hy6d0hs]  { color: var(--green); }
.log-m .log-act.orange[b-2n9hy6d0hs] { color: var(--orange); }
.log-m .log-act.red[b-2n9hy6d0hs]    { color: var(--red); }
.log-m .log-act.violet[b-2n9hy6d0hs] { color: var(--primary-dark); }

.log-m .log-detail[b-2n9hy6d0hs] {
  font-size: var(--font-size-sm);
  color: var(--text-2);
  line-height: 1.5;
  padding: 10px 2px 0;
}
.log-m .log-detail b[b-2n9hy6d0hs] { color: var(--text); font-weight: 700; }

/* .log-skel đặt trên <MudPaper> (component) -> cần ::deep. .log-empty là <div> thuần nên không cần. */
.log-m[b-2n9hy6d0hs]  .log-skel { cursor: default; }
.log-m .log-empty[b-2n9hy6d0hs] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 24px;
  text-align: center;
  color: var(--text-3);
}
/* /Pages/SystemPages/UserPermission.razor.rz.scp.css */
/* Trang phân quyền, bản mobile */
.mud-chip>.mud-chip-content[b-23aebmchoq] {
    padding-right: 6px !important;
}
.perm-m[b-23aebmchoq]  .seg.mud-toggle-group { margin-bottom: 12px; }

.perm-m .perm-scroll[b-23aebmchoq] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 12px 12px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.perm-m .perm-scroll[b-23aebmchoq]::-webkit-scrollbar { display: none; }

/* Thẻ nhân viên đang phân quyền. Phải khai rõ hướng hàng ngang, nếu không sẽ bị xếp dọc. */
.perm-m .perm-emp[b-23aebmchoq] {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  margin-bottom: 14px;
}
/* Cho nội dung nút nằm thẳng trong bố cục hàng ngang, bỏ viết hoa mặc định */
.perm-m[b-23aebmchoq]  .perm-emp-pick {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  text-transform: none;
}
.perm-m[b-23aebmchoq]  .perm-emp-pick .mud-button-label { display: contents; }
.perm-m[b-23aebmchoq]  .perm-emp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.perm-m[b-23aebmchoq]  .perm-emp-main .lbl { font-size: var(--font-size-2xs); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.perm-m[b-23aebmchoq]  .perm-emp-main .nm { font-size: var(--font-size-lg); font-weight: 800; color: var(--text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perm-m[b-23aebmchoq]  .perm-emp-main .ac { font-size: var(--font-size-sm); color: var(--text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perm-m[b-23aebmchoq]  .perm-emp-pick .chev { flex: none; color: var(--primary); }
.perm-m[b-23aebmchoq]  .perm-emp-edit { flex: none; align-self: center; margin-right: 4px; color: var(--text-2); }

/* Cả hai tab luôn dựng sẵn, ẩn hiện bằng CSS */
.perm-m .perm-panel[b-23aebmchoq] { display: none; }
.perm-m .perm-panel.active[b-23aebmchoq] { display: block; }

.perm-m .perm-funchead[b-23aebmchoq] { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.perm-m .perm-funchead .t[b-23aebmchoq] { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-2); }
/* Nút chọn tất cả, cùng cách xử lý như nút chọn nhân viên ở trên */
.perm-m[b-23aebmchoq]  .perm-selall { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); font-weight: 600; color: var(--primary); background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; text-transform: none; }
.perm-m[b-23aebmchoq]  .perm-selall .mud-button-label { display: contents; }
.perm-m[b-23aebmchoq]  .perm-selall .mud-icon-root { font-size: 16px; }

.perm-m .perm-card[b-23aebmchoq] { margin-bottom: 12px; }

/* Danh sách cửa hàng: chạm bất kỳ đâu trên hàng để chọn */
.perm-m .pck-row[b-23aebmchoq] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  cursor: pointer;
}
.perm-m .perm-card .pck-row + .pck-row[b-23aebmchoq] { border-top: 1px solid var(--line); }
/* Lớp đánh dấu nằm ở div bọc ngoài ô chọn, không phải ở ô chọn bên trong */
.perm-m[b-23aebmchoq]  .pck-row .pck { flex: none; margin: 0; padding: 0; }
/* Cho ô chọn bỏ qua sự kiện chuột để chạm vào nó cũng tính là chạm cả hàng */
.perm-m[b-23aebmchoq]  .pck-row .pck .mud-checkbox,
.perm-m[b-23aebmchoq]  .pck-row .pck .mud-checkbox * { pointer-events: none !important; }
.perm-m .pck-main[b-23aebmchoq] { flex: 1; min-width: 0; }
.perm-m .pck-name[b-23aebmchoq] { font-size: var(--font-size-md); font-weight: 700; color: var(--text); }
.perm-m .pck-sub[b-23aebmchoq] { display: flex; align-items: center; gap: 5px; font-size: var(--font-size-sm); color: var(--text-2); margin-top: 4px; }
.perm-m[b-23aebmchoq]  .pck-sub .mud-icon-root { flex: none; font-size: 15px; color: var(--text-3); }

/* Cây quyền ở tab Chức năng */
.perm-m[b-23aebmchoq]  .perm-tree .mud-treeview,
.perm-m[b-23aebmchoq]  .perm-tree .mud-treeview-group { padding: 0; margin: 0; }
.perm-m[b-23aebmchoq]  .perm-tree > .mud-treeview > .mud-treeview-item + .mud-treeview-item { border-top: 1px solid var(--line); }
.perm-m[b-23aebmchoq]  .perm-tree .mud-treeview-item-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  min-height: 0;
}
.perm-m[b-23aebmchoq]  .perm-tree .mud-treeview-item-checkbox { order: 1; margin: 0; }
.perm-m[b-23aebmchoq]  .perm-tree .mud-treeview-item-label {
  order: 2;
  flex: 1;
  font-size: var(--font-size-md) !important;
  font-weight: 700 !important;
  white-space: normal !important;
  color: var(--text);
}
.perm-m[b-23aebmchoq]  .perm-tree .mud-treeview-item-arrow { order: 3; margin: 0; }
/* Mục không có mục con thì ẩn hẳn nút mở rộng */
.perm-m[b-23aebmchoq]  .perm-tree .perm-leaf > .mud-treeview-item-content .mud-treeview-item-arrow { visibility: hidden; }

/* Các quyền con Xem, Thêm, Sửa, Xoá: nền nhạt và thụt lề, bung thu nhanh */
.perm-m[b-23aebmchoq]  .perm-tree .mud-collapse-container { background: var(--surface); transition-duration: .16s !important; }
.perm-m[b-23aebmchoq]  .perm-tree .mud-collapse-container .mud-treeview { padding-left: 34px; }
.perm-m[b-23aebmchoq]  .perm-tree .mud-collapse-container .mud-treeview-item + .mud-treeview-item { border-top: 1px solid var(--border); }
.perm-m[b-23aebmchoq]  .perm-tree .mud-collapse-container .mud-treeview-item-content { padding: 11px 14px 11px 0; }
.perm-m[b-23aebmchoq]  .perm-tree .mud-collapse-container .mud-treeview-item-label {
  font-size: var(--font-size-base) !important;
  font-weight: 400 !important;
}
.perm-m[b-23aebmchoq]  .perm-tree .mud-collapse-container .mud-treeview-item-arrow { display: none; }

/* Xem quyền của chính mình thì chỉ được bung xem, không sửa được */
.perm-m[b-23aebmchoq]  .perm-tree-readonly .mud-treeview-item-content { pointer-events: none; }
.perm-m[b-23aebmchoq]  .perm-tree-readonly .mud-treeview-item-arrow { pointer-events: auto; }
.perm-m[b-23aebmchoq]  .perm-tree-readonly .mud-treeview-item-checkbox,
.perm-m[b-23aebmchoq]  .perm-tree-readonly .mud-treeview-item-label { opacity: .55; }

.perm-m .perm-selfnote[b-23aebmchoq] {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 13px 15px;
  background: var(--surface); border-radius: var(--r-md);
  font-size: var(--font-size-sm); font-style: italic; color: var(--text-2); line-height: 1.4;
}
.perm-m[b-23aebmchoq]  .perm-selfnote .mud-icon-root { flex: none; font-size: 18px; color: var(--text-3); }

/* Nút Lưu thay đổi, chỉ khai khoảng cách trên, hình dáng theo nút chuẩn dùng chung */
.perm-m[b-23aebmchoq]  .perm-save.mud-button-root {
  margin-top: 4px;
}

/* Bảng chọn nhân viên phải tự giới hạn chiều cao và cho cuộn vì danh sách có thể rất dài */
.perm-m .emp-sheet[b-23aebmchoq] { max-height: 82dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.perm-m .emp-sheet-title[b-23aebmchoq] { font-size: var(--font-size-md); font-weight: 700; text-align: center; padding: 4px 0 10px; }
.perm-m[b-23aebmchoq]  .emp-opt.sel .emp-opt-name { color: var(--primary); }
.perm-m .emp-opt-txt[b-23aebmchoq] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.perm-m .emp-opt-name[b-23aebmchoq] { font-size: var(--font-size-md); font-weight: 600; color: var(--text); line-height: var(--lh-snug); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perm-m .emp-opt-acc[b-23aebmchoq] { font-size: var(--font-size-sm); color: var(--text-3); line-height: var(--lh-snug); }
.perm-m[b-23aebmchoq]  .opt-check { flex: none; color: var(--primary); margin-left: auto; }
/* /Shared/Components/BottomNavigation.Mobile.razor.rz.scp.css */
/* Thanh điều hướng dưới cùng và bảng chọn Báo cáo, trạng thái mở dùng lớp .open */

.bottomnav[b-np1whk94xn] {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -6px 24px rgba(46,40,90,.12);
    display: flex;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    z-index: 26;
    transition: transform .25s cubic-bezier(.32,.72,.25,1);
}

/* An thanh nav khi co bat ky bang chon nao dang mo, tren iOS thanh nav se bi ve de len sheet neu khong an */
:root:has(.sheet.open, .flt-sheet.open, .bsheet.open) .bottomnav[b-np1whk94xn] {
    transform: translate(-50%, 100%);
}

@media (prefers-reduced-transparency: reduce) {
    .bottomnav[b-np1whk94xn] {
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Các mục điều hướng, ép lại kiểu mặc định để không bị màu/icon gốc ghi đè */
.bottomnav[b-np1whk94xn]  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: none;
    background: none !important;
    font-family: inherit;
    font-size: var(--font-size-2xs) !important;
    font-weight: 600 !important;
    line-height: var(--lh-tight);
    text-transform: none !important;
    color: var(--text-3);
    padding: 6px 0 5px !important;
    min-width: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    text-decoration: none;
}

/* Cho icon và chữ nằm thẳng trong bố cục của mục, không thêm một tầng bọc */
.bottomnav[b-np1whk94xn]  .nav-item .mud-button-label {
    display: contents;
}

.bottomnav[b-np1whk94xn]  .nav-item svg {
    width: 23px;
    height: 23px;
    font-size: 23px;
    transition: transform .2s cubic-bezier(.32,.72,.25,1);
}

.bottomnav[b-np1whk94xn]  .nav-item.active {
    color: var(--primary);
}

.bottomnav[b-np1whk94xn]  .nav-item.active svg {
    transform: translateY(-1px) scale(1.06);
}

/* Bảng chọn Báo cáo */

.rp-sheet[b-np1whk94xn] {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 105%);
    width: 100%;
    background: var(--card);
    /* Bo góc theo đúng tỷ lệ card chuẩn */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 8px 12px calc(14px + env(safe-area-inset-bottom));
    transition: transform .26s cubic-bezier(.32,.72,.25,1);
    z-index: var(--z-sheet);
    box-shadow: var(--shadow-pop);
}

.rp-sheet.open[b-np1whk94xn] {
    transform: translate(-50%, 0);
}

.sheet-title[b-np1whk94xn] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-3);
    text-align: center;
    padding: 2px 0 8px;
}

/* Bỏ đệm mặc định để hàng tự kiểm soát chiều cao */
.rp-sheet[b-np1whk94xn]  .rp-list,
.rp-sheet[b-np1whk94xn]  .rp-list .mud-list { padding: 0; background: transparent; }
.rp-sheet[b-np1whk94xn]  .rp-list .mud-list-item,
.rp-sheet[b-np1whk94xn]  .rp-list .mud-list-item-gutters { min-height: 0; padding: 0; border-bottom: none !important; }
.rp-sheet[b-np1whk94xn]  .rp-list .mud-list-item-text { margin: 0; }
.rp-sheet[b-np1whk94xn]  .rp-list .mud-list-item-text p { margin: 0; }

/* Bố cục thật đặt trên lớp con tự viết, phần tử gốc chỉ giữ trạng thái nhấn và bo góc */
.rp-sheet[b-np1whk94xn]  .sheet-item {
    width: 100%;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
}

.rp-sheet[b-np1whk94xn]  .sheet-item:active {
    background: var(--surface);
}

.rp-sheet[b-np1whk94xn]  .sheet-item-content {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    font-family: inherit;
    padding: 13px 8px;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text);
    text-align: left;
}

.rp-sheet[b-np1whk94xn]  .sheet-item .sheet-ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
}

.rp-sheet[b-np1whk94xn]  .sheet-item .sheet-ic.ic-green {
    background: var(--green-soft);
    color: var(--green);
}

.rp-sheet[b-np1whk94xn]  .sheet-item .sheet-ic.ic-violet {
    background: var(--primary-soft);
    color: var(--primary);
}

.rp-sheet[b-np1whk94xn]  .sheet-item .sheet-ic svg {
    width: 19px;
    height: 19px;
    font-size: 19px;
    color: inherit;
}

.rp-sheet[b-np1whk94xn]  .sheet-item .sheet-meta {
    flex: 1;
    min-width: 0;
}

.rp-sheet[b-np1whk94xn]  .sheet-item .sheet-meta .st {
    display: block;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text);
}

.rp-sheet[b-np1whk94xn]  .sheet-item .sheet-meta .sd {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-3);
    margin-top: 2px;
}

.rp-sheet[b-np1whk94xn]  .sheet-item .chev {
    flex: none;
    color: var(--text-3);
    margin-left: auto;
}

/* Mục không có quyền: vẫn hiện nhưng làm mờ, không bấm được, đổi sang icon ổ khoá */
.rp-sheet[b-np1whk94xn]  .sheet-item--locked { pointer-events: none; }
.rp-sheet[b-np1whk94xn]  .sheet-item--locked .sheet-ic { filter: grayscale(1); opacity: .5; }
.rp-sheet[b-np1whk94xn]  .sheet-item--locked .sheet-meta .st { color: var(--text-3); font-weight: 400; }
.rp-sheet[b-np1whk94xn]  .sheet-item .sheet-lock { color: var(--text-3); opacity: .85; }
/* /Shared/Components/ImportExcelForm.razor.rz.scp.css */
/* Style cho form nhập Excel dùng chung.

   CSS của các phần tử này phải đặt tại đây, không đặt ở trang gọi: scoped CSS chỉ gắn cho phần tử
   viết trực tiếp trong file đang biên dịch, mà chúng do chính component này render. */
.impc-m .impc-scroll[b-4a10fju21o],
.imps-m .imps-scroll[b-4a10fju21o] {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px calc(var(--nav-clearance, 110px) + env(safe-area-inset-bottom));
}
.impc-m .impc-scroll[b-4a10fju21o]::-webkit-scrollbar,
.imps-m .imps-scroll[b-4a10fju21o]::-webkit-scrollbar { display: none; }
/* /Shared/Components/MobileAppBar.Mobile.razor.rz.scp.css */
/* Thanh tiêu đề (app bar) cho các trang mobile. Style của thanh nav lấy từ app.mobile.css.

   Riêng header-zone giữ position:sticky tại đây, không theo global: một trong hai trang dùng
   component này để cả nội dung cuộn chung trong main-content, khi đó chỉ sticky mới giữ được
   header đứng yên. Trang có shell riêng tự quản overflow thì sticky vô hại. */
.header-zone[b-b5m7x992n6] {
    position: sticky;
    top: 0;
    z-index: 30;
    background: transparent;
    padding-bottom: 8px;
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-iyvggadnll] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-iyvggadnll] {
    flex: 1;
}

.sidebar[b-iyvggadnll] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-iyvggadnll] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-iyvggadnll]  a, .top-row[b-iyvggadnll]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

        .top-row[b-iyvggadnll]  a:hover, .top-row[b-iyvggadnll]  .btn-link:hover {
            text-decoration: underline;
        }

        .top-row[b-iyvggadnll]  a:first-child {
            overflow: hidden;
            text-overflow: ellipsis;
        }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-iyvggadnll] {
        display: none;
    }

    .top-row.auth[b-iyvggadnll] {
        justify-content: space-between;
    }

    .top-row[b-iyvggadnll]  a, .top-row[b-iyvggadnll]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-iyvggadnll] {
        flex-direction: row;
    }

    .sidebar[b-iyvggadnll] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-iyvggadnll] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-iyvggadnll]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-iyvggadnll], article[b-iyvggadnll] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}